/*
 * member.css — Semua komponen halaman Memberarea
 * Bergantung pada variabel dari theme.css
 * Semua warna pakai var(--mlm-*), tidak ada hardcode per tema
 *
 * Sections:
 *   1. RESET & BASE
 *   2. LAYOUT (body, main-container, page-wrap)
 *   3. SIDEBAR (sb-*)
 *   4. MODAL GANTI AKUN (akun-*)
 *   5. NAV BOTTOM (nb-*)
 *   6. TOP BAR / PAGE HEADER (tb-*, ph-*)
 *   7. HERO DASHBOARD (hd-*)
 *   8. STAT CARDS (st-*)
 *   9. BONUS TABS (bt-*)
 *  10. LEADERSHIP SECTION (lws-*)
 *  11. SHARED COMPONENTS (pg-*, badge, empty, form)
 *  12. PRODUK (pl-*, pd-*)
 *  13. PROFIL FORM (pf-*)
 *  14. BONUS & RIWAYAT (bn-*, rw-*)
 *  15. GENEALOGY / JARINGAN (gl-*, gs-*)
 *  16. PENARIKAN & TOPUP (wd-*, tu-*)
 *  17. KLAIM REWARD (kr-*)
 *  18. SPIN (sp-*)
 *  19. PAGINATION
 *  20. MISC (testimoni, berita, all-menu, dll)
 */

/* ================================================================
   1. RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; padding: 0; min-height: 100%; background: #000; }
body { margin: 0; padding: 0; min-height: 100vh; }

body {
    background-color: var(--mlm-page-bg);
    color: var(--mlm-page-text);
    font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.body-scroll {
    background-color: var(--mlm-page-bg) !important;
    min-height: 100vh;
}

/* Bootstrap .card override — ikuti tema */
.card {
    background-color: var(--mlm-card-bg);
    border: 1px solid var(--mlm-card-border);
    color: var(--mlm-page-text);
}
.card-header, .card-footer {
    background-color: transparent;
    border-color: var(--mlm-card-border);
    color: var(--mlm-page-text);
}

a {
    color: var(--mlm-theme-color);
    text-decoration: none;
}
a:hover {
    color: var(--mlm-theme-color-2);
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--mlm-card-border);
    border-radius: 4px;
}

/* ================================================================
   2. LAYOUT
   ================================================================ */
.main-container {
    background-color: var(--mlm-page-bg);
    width: 100%;
    max-width: 100%;
    padding: 25px 25px 58px 25px;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Body jadi flex-row di desktop: sidebar kiri, konten kanan */
@media (min-width: 992px) {
    body.body-scroll {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        min-height: 100vh;
    }
    /* Konten mengisi sisa lebar — hd-page-wrap adalah flex child langsung */
    body.body-scroll > :not(.sb-drawer):not(.sb-backdrop) {
        flex: 1;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }
    /* Nav bottom disembunyikan di desktop — sidebar sudah ada */
    .nb { display: none !important; }
}

.hd-page-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 56px;
    padding-bottom: 80px;
    width: 100%;
    background: var(--mlm-page-bg) !important;
    background-attachment: unset !important;
}
@media (min-width: 992px) {
    .hd-page-wrap { padding-bottom: 0; }
}

/* Slide + testimoni grid: col harus stretch agar ts-wrap height:100% bekerja */
.row.g-3 > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
.row.g-3 > [class*="col-"] > .sl-wrap,
.row.g-3 > [class*="col-"] > .ts-wrap {
    flex: 1;
}

/* ================================================================
   3. SIDEBAR — sb-drawer (independent, no style.css dependency)
   ================================================================ */

/* Backdrop */
.sb-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1040;
    display: none;
    opacity: 0;
    transition: opacity .28s ease;
}
.sb-backdrop.sb-open {
    display: block;
    opacity: 1;
}

/* Drawer panel — mobile: overlay; desktop: sidebar permanen */
.sb-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 268px;
    z-index: 1045;
    /* background: var(--mlm-sidebar-bg, var(--mlm-theme-color)); */
    background: linear-gradient(180deg, var(--mlm-sidebar-bg) 0%, var(--mlm-sidebar-bg-2) 100%);
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
    flex-shrink: 0;
}
.sb-drawer.sb-open {
    transform: translateX(0);
}

/* Desktop: sidebar menjadi permanent, tidak overlay */
@media (min-width: 992px) {
    .sb-drawer {
        position: sticky;
        top: 0;
        height: 100vh;
        transform: translateX(0) !important;
        box-shadow: none;
        border-right: 1px solid rgba(255,255,255,.1);
        flex-shrink: 0;
        z-index: 10;
    }
    .sb-backdrop {
        display: none !important;
    }
}

.sb-drawer-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Brand */
.sb-drawer .sb-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 20px 20px;
    flex-shrink: 0;
}
.sb-drawer .sb-brand-logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--mlm-theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.sb-drawer .sb-brand-logo img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.sb-drawer .sb-brand-name {
    font-size: 15px;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sb-drawer .sb-brand-sub {
    font-size: 10px;
    color: var(--mlm-theme-color);
    margin-top: 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Profile card ── */
.sb-drawer .sb-profile {
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
    background: linear-gradient(150deg, rgba(var(--mlm-theme-color-rgb),.1) 0%, transparent 55%);
}
.sb-drawer .sb-profile-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

/* Avatar wrap — image + badge overlay */
.sb-drawer .sb-avatar-wrap { position: relative; flex-shrink: 0; }
.sb-drawer .sb-avatar {
    width: 68px; height: 68px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--mlm-theme-color), rgba(var(--mlm-theme-color-rgb),.3)) border-box;
    border: 2px solid transparent;
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.sb-drawer .sb-avatar img {
    width: 100%; height: 100%;
    object-fit: contain; border-radius: 50%;
    background: rgba(0,0,0,.18); padding: 8px;
}

/* Shimmer badge under avatar */
.sb-drawer .sb-avatar-badge {
    position: absolute; bottom: -7px; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 3px;
    white-space: nowrap;
    background: linear-gradient(90deg, var(--mlm-theme-color) 0%, rgba(var(--mlm-theme-color-rgb),.6) 50%, var(--mlm-theme-color) 100%);
    background-size: 200% auto;
    animation: sbShimmer 3s linear infinite;
    color: #000;
    font-size: 7px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 20px;
    border: 1.5px solid rgba(255,255,255,.3);
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.sb-drawer .sb-avatar-badge i { font-size: 7px; }
@keyframes sbShimmer { to { background-position: 200% center; } }

/* Info column */
.sb-drawer .sb-info {
    min-width: 0; flex: 1;
    display: flex; flex-direction: column; gap: 4px;
    padding-top: 4px;
}
.sb-drawer .sb-name {
    font-size: 15px; font-weight: 800; color: #fff;
    margin: 0; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: .01em;
}
.sb-drawer .sb-id {
    display: flex; align-items: center; gap: 5px;
    font-size: 10px; color: rgba(255,255,255,.5);
    font-family: monospace; line-height: 1; margin: 0;
}
.sb-drawer .sb-id-verified { font-size: 10px; color: var(--mlm-theme-color); opacity: .9; }
.sb-drawer .sb-plan-badge {
    display: inline-flex; align-items: center;
    align-self: flex-start;
    font-size: 8.5px; font-weight: 800;
    color: var(--mlm-theme-color);
    background: rgba(var(--mlm-theme-color-rgb),.14);
    border: 1px solid rgba(var(--mlm-theme-color-rgb),.28);
    border-radius: 20px; padding: 2px 9px;
    text-transform: uppercase; letter-spacing: .07em;
}

/* Switch / Ganti Akun button */
.sb-drawer .sb-switch-btn {
    display: flex; align-items: center; gap: 8px;
    width: 100%; margin-top: 12px; padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(var(--mlm-theme-color-rgb),.22);
    background: rgba(var(--mlm-theme-color-rgb),.07);
    color: rgba(255,255,255,.75);
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background .18s, border-color .18s;
}
.sb-drawer .sb-switch-btn:hover {
    background: rgba(var(--mlm-theme-color-rgb),.15);
    border-color: rgba(var(--mlm-theme-color-rgb),.4);
    color: #fff;
}
.sb-switch-count {
    margin-left: auto;
    background: #ef4444; color: #fff;
    font-size: 9px; font-weight: 800;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(239,68,68,.45);
}

/* Nav scroll area */
.sb-drawer .sb-nav-scroll {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 12px 0 20px;
}
.sb-drawer .sb-nav-scroll::-webkit-scrollbar { width: 3px; }
.sb-drawer .sb-nav-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.sb-drawer .sb-section-label {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: rgba(255,255,255,.35);
    padding: 12px 20px 6px;
}
.sb-drawer .sb-divider {
    height: 1px; background: rgba(255,255,255,.08); margin: 10px 20px;
}

/* Nav list */
.sb-drawer .sb-nav {
    list-style: none; padding: 0 12px; margin: 0 0 4px;
    display: flex; flex-direction: column; gap: 2px;
}
.sb-drawer .sb-nav .nav-item { width: 100%; }
.sb-drawer .sb-nav .nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 5px 6px;
    color: rgba(255,255,255,.6) !important;
    font-size: 13px; font-weight: 600;
    border-radius: 12px; line-height: 1.3;
    background: transparent;
    border: 1px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
    text-decoration: none; width: 100%;
}
.sb-drawer .sb-nav .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.07);
}
.sb-drawer .sb-nav .nav-link.active,
.sb-drawer .sb-nav .nav-link[aria-current="page"] {
    color: var(--mlm-theme-text) !important;
    background: rgba(var(--mlm-theme-color-rgb), .15) !important;
    border: 1px solid rgba(var(--mlm-theme-color-rgb), .3) !important;
    font-weight: 700;
}
.sb-drawer .sb-icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    transition: background .15s, color .15s;
}
.sb-drawer .sb-nav .nav-link:hover .sb-icon {
    background: rgba(255,255,255,.1);
}
.sb-drawer .sb-nav .nav-link span i {
    transition: color .15s;
    font-size: 12px;
}
.sb-drawer .sb-nav .nav-link.active .sb-icon,
.sb-drawer .sb-nav .nav-link[aria-current="page"] .sb-icon {
    background: rgba(var(--mlm-theme-color-rgb), .25);
    color: var(--mlm-theme-text);
}
.sb-drawer .sb-label { flex: 1; }
.sb-drawer .sb-arrow {
    font-size: 9px; transition: transform .2s;
    color: rgba(255,255,255,.3); margin-left: auto;
}
.sb-drawer .sb-nav .nav-link[aria-expanded="true"] .sb-arrow { transform: rotate(90deg); }
.sb-drawer .sb-nav .nav-link[aria-expanded="true"] { color: #fff !important; }

/* Submenu */
.sb-drawer .sb-submenu { padding: 2px 0 4px 16px; }
.sb-drawer .sb-sublink {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,.55);
    transition: color .15s, background .15s;
    border-radius: 10px; margin-bottom: 1px; text-decoration: none;
}
.sb-drawer .sb-sublink:hover { color: #fff; background: rgba(255,255,255,.07); }
.sb-sub-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,.3); flex-shrink: 0;
}

/* Theme toggle pill */
.sb-theme-pill {
    width: 28px;
    height: 16px;
    border-radius: 8px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.2);
    position: relative;
    flex-shrink: 0;
}
.sb-theme-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.8);
    transition: left .2s;
}
body.theme-gold-light .sb-theme-knob,
body.theme-blue-light .sb-theme-knob,
body.theme-green-light .sb-theme-knob,
body.theme-purple-light .sb-theme-knob,
body.theme-red-light .sb-theme-knob { left: 14px; }

/* Logout */
.sb-drawer .sb-logout { color: rgba(255,150,150,.9) !important; }
.sb-drawer .sb-logout:hover { background: var(--mlm-theme-color); color: #fff !important; }

/* ================================================================
   4. MODAL GANTI AKUN (akun-*)
   ================================================================ */
.akun-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}
@media (min-width: 576px) {
    .akun-modal-overlay { align-items: center; }
}
.akun-modal-overlay.akun-modal-open {
    opacity: 1;
    pointer-events: auto;
}
.akun-modal {
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    background: var(--mlm-card-bg);
    border: 1px solid var(--mlm-card-border);
    border-bottom: none;
    box-shadow: 0 -8px 40px rgba(0,0,0,.5);
    transform: translateY(30px);
    transition: transform .28s cubic-bezier(.22,.68,0,1.2);
    overflow: hidden;
}
@media (min-width: 576px) {
    .akun-modal {
        border-radius: 20px;
        border-bottom: 1px solid var(--mlm-card-border);
        transform: translateY(16px) scale(.97);
    }
}
.akun-modal-overlay.akun-modal-open .akun-modal {
    transform: translateY(0) scale(1);
}
.akun-modal-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--mlm-card-border);
    flex-shrink: 0;
}
.akun-modal-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--mlm-page-text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.akun-modal-title i { color: var(--mlm-theme-color); }
.akun-modal-close {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(var(--mlm-theme-color-rgb), .08);
    border: none;
    color: var(--mlm-page-text-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 12px;
    transition: background .15s, color .15s;
}
.akun-modal-close:hover {
    background: rgba(var(--mlm-theme-color-rgb), .18);
    color: var(--mlm-page-text);
}
.akun-modal-search {
    padding: 10px 18px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--mlm-card-border);
}
.akun-search-input-wrap { position: relative; }
.akun-search-input-wrap i {
    position: absolute;
    left: 11px; top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--mlm-page-text-muted);
    pointer-events: none;
}
.akun-search-input {
    width: 100%;
    padding: 9px 12px 9px 32px;
    border-radius: 10px;
    border: 1px solid var(--mlm-input-border);
    background: var(--mlm-input-bg);
    color: var(--mlm-input-text);
    font-size: 12px;
    outline: none;
    transition: border-color .18s;
    box-sizing: border-box;
}
.akun-search-input::placeholder { color: var(--mlm-page-text-muted); opacity: .6; }
.akun-search-input:focus { border-color: var(--mlm-theme-color); }
.akun-modal-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--mlm-card-border) transparent;
}
.akun-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    cursor: pointer;
    transition: background .15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.akun-item:hover { background: rgba(var(--mlm-theme-color-rgb), .07); }
.akun-item.akun-active { background: rgba(var(--mlm-theme-color-rgb), .1); }
.akun-item-avatar {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(var(--mlm-theme-color-rgb), .12);
    border: 1px solid rgba(var(--mlm-theme-color-rgb), .22);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800;
    color: var(--mlm-theme-color);
    flex-shrink: 0;
}
.akun-item.akun-active .akun-item-avatar {
    background: var(--mlm-theme-color);
    color: var(--mlm-theme-text);
}
.akun-item-avatar img { width:100%; height:100%; object-fit:cover; border-radius:8px; display:block; }
.akun-item-info { flex: 1; min-width: 0; }
.akun-item-name {
    font-size: 12px; font-weight: 700;
    color: var(--mlm-page-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 2px;
}
.akun-item-id {
    font-size: 10px;
    color: var(--mlm-page-text-muted);
    font-family: monospace;
}
.akun-item-badge {
    font-size: 9px; font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(var(--mlm-theme-color-rgb), .15);
    color: var(--mlm-theme-color);
    border: 1px solid rgba(var(--mlm-theme-color-rgb), .25);
    white-space: nowrap; flex-shrink: 0;
}
.akun-item.akun-active .akun-item-badge {
    background: var(--mlm-theme-color);
    color: var(--mlm-theme-text);
}
.akun-empty {
    padding: 28px 18px;
    text-align: center;
    font-size: 12px;
    color: var(--mlm-page-text-muted);
}

/* ================================================================
   5. NAV BOTTOM (nb-*)
   ================================================================ */
.nb {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: var(--mlm-footer-bg);
    border-top: 1px solid var(--mlm-card-border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 100;
    padding: 0 4px;
}
.nb-list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; width: 100%; height: 100%; }
.nb-item { flex: 1; display: flex; align-items: center; justify-content: center; }
.nb-item-center { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; }
.nb-fab-circle {
    width: 50px; height: 50px; border-radius: 50%;
    background: linear-gradient(135deg, var(--mlm-theme-color-grad-1, var(--mlm-theme-color)), var(--mlm-theme-color-grad-2, var(--mlm-theme-color)));
    display: flex; align-items: center; justify-content: center;
    color: var(--mlm-theme-text, #fff); font-size: 20px;
    box-shadow: 0 4px 16px rgba(var(--mlm-theme-color-rgb), .4);
    transition: transform .2s, box-shadow .2s;
    position: relative; top: -10px;
    border: 3px solid var(--mlm-footer-bg);
}
.nb-fab:active .nb-fab-circle,
.nb-fab:hover .nb-fab-circle { transform: scale(1.08) translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.nb-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 6px 0;
    color: var(--mlm-footer-text);
    text-decoration: none;
    position: relative;
    transition: color .2s;
    cursor: pointer;
    background: none;
    border: none;
}
.nb-link i { font-size: 18px; line-height: 1; }
.nb-label {
    font-size: 9px;
    font-weight: 600;
    margin-top: 3px;
    letter-spacing: .02em;
}
.nb-link.active {
    color: var(--mlm-footer-text-active);
}
.nb-link.active::before {
    content: '';
    position: absolute;
    top: 0; left: 30%; right: 30%;
    height: 2px;
    background: var(--mlm-footer-text-active);
    border-radius: 0 0 3px 3px;
}

/* FAB center button */
.nb-fab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.nb-fab-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mlm-theme-color-grad-1), var(--mlm-theme-color-grad-2));
    border: 3px solid var(--mlm-footer-bg);
    color: var(--mlm-theme-text);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    margin-top: -16px;
    box-shadow: 0 4px 16px rgba(var(--mlm-theme-color-rgb), .4);
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s;
}
.nb-fab-btn:hover { transform: scale(1.08); }
.nb-fab-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--mlm-footer-text);
    margin-top: 1px;
    letter-spacing: .02em;
}

/* Badge notif */
.nb-badge {
    position: absolute;
    top: 4px; right: calc(50% - 18px);
    background: var(--mlm-red);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    min-width: 14px; height: 14px;
    border-radius: 7px;
    padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
}
.notif-dot {
    position: absolute;
    top: 2px; right: calc(50% - 14px);
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--mlm-red);
    border: 1.5px solid var(--mlm-footer-bg);
    display: none;
}
.notif-dot.show { display: block; }

/* ================================================================
   6. PAGE HEADER — halaman non-home (ph-*)
   ================================================================ */
.ph-wrap {
    background: linear-gradient(135deg,
        rgba(var(--mlm-theme-color-rgb), .18) 0%,
        rgba(var(--mlm-theme-color-rgb), .06) 100%);
    border-bottom: 1px solid var(--mlm-card-border);
    padding: 14px 0 12px;
    margin-bottom: 16px;
}
.ph-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ph-back {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: rgba(var(--mlm-theme-color-rgb), .1);
    border: 1px solid var(--mlm-card-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--mlm-theme-color);
    font-size: 13px;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .15s;
}
.ph-back:hover { background: rgba(var(--mlm-theme-color-rgb), .2); }
.ph-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--mlm-page-text);
    margin: 0;
    line-height: 1.2;
}
.ph-sub {
    font-size: 11px;
    color: var(--mlm-page-text-muted);
    margin-top: 2px;
}

/* has-header: pages that use page_header.php (pg-topbar) */
main.has-header {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 72px;
    padding-bottom: 80px;
}
@media (min-width: 992px) {
    main.has-header { padding-bottom: 24px; }
}

/* pg-topbar — fixed topbar (dashboard home & page_header) */
.pg-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    height: 72px;
    background: linear-gradient(45deg, var(--mlm-sidebar-bg), var(--mlm-sidebar-bg-2));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
/* Dorong konten di bawah topbar fixed — semua page-wrap */
.hd-page-wrap,
[class*="-page-wrap"],
[class*="page-wrap"] {
    padding-top: 72px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh; /* dynamic viewport: akurat di mobile browser */
}
/* Body/konten di dalam page-wrap mengisi sisa tinggi */
[class*="-page-wrap"] > [class*="-body"],
[class*="-page-wrap"] > .pj-content,
[class*="-page-wrap"] > .tp-body,
[class*="-page-wrap"] > .sp-body,
[class*="-page-wrap"] > .mc-body {
    flex: 1;
}
/* Padding bawah — ruang untuk nav bottom (mobile) */
[class*="-page-wrap"] > [class*="-body"],
[class*="-page-wrap"] > .pj-content,
[class*="-page-wrap"] > .tp-body,
[class*="-page-wrap"] > .sp-body,
[class*="-page-wrap"] > .mc-body {
    padding-bottom: 80px;
}
/* Desktop: tidak perlu padding bawah karena nav bottom hidden */
@media (min-width: 992px) {
    [class*="-page-wrap"] > [class*="-body"],
    [class*="-page-wrap"] > .pj-content,
    [class*="-page-wrap"] > .tp-body,
    [class*="-page-wrap"] > .sp-body,
    [class*="-page-wrap"] > .mc-body {
        padding-bottom: 24px;
    }
}
@media (min-width: 992px) {
    .pg-topbar { left: 268px; }
}
.pg-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.pg-topbar-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--mlm-theme-text);
    /* color:#a3a3a3; */
    line-height: 1.2;
    margin: 0;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.pg-topbar-sub {
    font-size: 10px;
    color: var(--mlm-theme-text);
    font-weight: 600;
    margin: 0;
    letter-spacing: .04em;
}
/* back button — dipakai di page_header.php */
.pg-topbar-back {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--mlm-card-border);
    background: rgba(var(--mlm-theme-color-rgb), .08);
    color: var(--mlm-theme-color);
    text-decoration: none;
    transition: background .15s;
    flex-shrink: 0;
}
.pg-topbar-back:hover { background: rgba(var(--mlm-theme-color-rgb), .18); color: var(--mlm-theme-color); }

/* filter button injected into topbar (used by slip_bonus, riwayat pages) */
.pg-topbar-filter {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(var(--mlm-theme-color-rgb), .2);
    background: rgba(var(--mlm-theme-color-rgb), .08);
    color: var(--mlm-theme-color);
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 6px;
    font-size: 14px;
    transition: background .15s;
}
.pg-topbar-filter:hover { background: rgba(var(--mlm-theme-color-rgb), .18); }

/* ================================================================
   6b. WELCOME BAR (wc-*)
   HTML: memberarea/view/dashboard/home.php
   ================================================================ */
.wc-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--mlm-card-bg);
    border-radius: 16px;
    border: 1px solid var(--mlm-card-border);
    margin: 12px 0 4px;
}
.wc-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.wc-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(var(--mlm-theme-color-rgb), .15);
    border: 2px solid var(--mlm-theme-color);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wc-avatar img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.wc-info {
    min-width: 0;
}
.wc-greeting {
    font-size: 11px;
    color: var(--mlm-text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wc-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--mlm-text-1);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wc-stats {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.wc-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-decoration: none;
    background: rgba(var(--mlm-theme-color-rgb), .08);
    border: 1px solid rgba(var(--mlm-theme-color-rgb), .18);
    border-radius: 10px;
    padding: 6px 10px;
    min-width: 88px;
    transition: background .2s, border-color .2s;
}
.wc-stat:hover {
    background: rgba(var(--mlm-theme-color-rgb), .16);
    border-color: rgba(var(--mlm-theme-color-rgb), .36);
}
.wc-stat-label {
    font-size: 10px;
    color: var(--mlm-text-muted);
    white-space: nowrap;
}
.wc-stat-val {
    font-size: 13px;
    font-weight: 800;
    color: var(--mlm-theme-color);
    white-space: nowrap;
}
/* light mode override */
.theme-gold-light .wc-bar,
.theme-blue-light .wc-bar,
.theme-green-light .wc-bar,
.theme-purple-light .wc-bar,
.theme-red-light .wc-bar {
    background: rgba(255,255,255,.85);
    border-color: rgba(0,0,0,.1);
}
.theme-gold-light .wc-stat,
.theme-blue-light .wc-stat,
.theme-green-light .wc-stat,
.theme-purple-light .wc-stat,
.theme-red-light .wc-stat {
    background: rgba(255,255,255,.6);
    border-color: rgba(0,0,0,.1);
}
.theme-gold-light .wc-stat-val,
.theme-blue-light .wc-stat-val,
.theme-green-light .wc-stat-val,
.theme-purple-light .wc-stat-val,
.theme-red-light .wc-stat-val {
    color: var(--mlm-theme-color);
}

/* ================================================================
   7. HERO DASHBOARD (hd-*)
   ================================================================ */
/* ================================================================
   HEADER / TOP BAR  (hd-*)
   HTML: memberarea/view/layout/top_bar.php
         memberarea/view/dashboard/home.php  (hero section)
   ================================================================ */

/* ── Hero wrapper ── */
.hd-hero {
    background: linear-gradient(145deg,
        var(--mlm-theme-color-grad-2) 0%,
        var(--mlm-theme-color) 55%,
        var(--mlm-theme-color-grad-1) 100%);
    position: relative;
    overflow: hidden;
}
.hd-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 85% -10%, rgba(255,255,255,.12) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at -5% 110%, rgba(0,0,0,.18) 0%, transparent 55%);
    pointer-events: none;
}
.hd-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.32);
}
.hd-inner {
    position: relative;
    z-index: 2;
}

/* ── Topbar ── */
.hd-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 10px;
    gap: 10px;
}

/* Hamburger */
.hd-menu-btn {
    width: 38px; height: 38px;
    border-radius: 12px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .18s;
}
.hd-menu-btn:hover { background: rgba(255,255,255,.25); }

/* Desktop: sembunyikan hamburger karena sidebar selalu tampil */
@media (min-width: 992px) {
    .hd-menu-btn { display: none; }
}

/* Brand center */
.hd-topbar-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    justify-content: center;
}
.hd-brand-img {
    height: 26px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.hd-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.hd-brand-name {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.hd-brand-sub {
    font-size: 9px;
    color: rgba(255,255,255,.55);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Action buttons */
.hd-topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.hd-action-btn {
    width: 36px; height: 36px;
    border-radius: 11px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s;
    position: relative;
    flex-shrink: 0;
}
.hd-action-btn:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.35); color: #fff; }
.hd-wa-btn { color: #4ade80; }
.hd-wa-btn:hover { color: #fff; }

/* Notif dot */
.hd-notif-btn .notif-dot {
    position: absolute;
    top: 7px; right: 7px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #f87171;
    border: 1.5px solid rgba(0,0,0,.3);
}

/* Profile chip — desktop only */
.hd-profile-chip {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 6px;
    border-radius: 30px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.2);
    text-decoration: none;
    transition: background .18s;
    cursor: pointer;
}
.hd-profile-chip:hover { background: rgba(255,255,255,.22); }
.hd-chip-icon {
    width: 26px; height: 26px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255,255,255,.15);
    padding: 2px;
    flex-shrink: 0;
}
.hd-chip-info { display: flex; flex-direction: column; gap: 1px; }
.hd-chip-name {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
}
.hd-chip-plan {
    font-size: 9px;
    color: rgba(255,255,255,.6);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .04em;
}
@media (min-width: 576px) {
    .hd-profile-chip { display: flex; }
}

/* ── Identity section ── */
.hd-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0 24px;
}
.hd-id-avatar {
    width: 58px; height: 58px;
    border-radius: 16px;
    background: rgba(255,255,255,.15);
    border: 2px solid rgba(255,255,255,.3);
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.hd-id-avatar img {
    width: 42px; height: 42px;
    object-fit: contain;
}
.hd-id-body { min-width: 0; }
.hd-greeting {
    font-size: 11px;
    color: rgba(255,255,255,.7);
    margin: 0 0 3px;
    letter-spacing: .01em;
}
.hd-name {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.15;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hd-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.hd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 20px;
    padding: 3px 10px;
    letter-spacing: .02em;
}
.hd-badge i { font-size: 9px; opacity: .8; }
.hd-badge-plan {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.35);
    font-weight: 700;
}

/* ── Bonus row cards ── */
.hd-bonus-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding-bottom: 6px;
}
@media (min-width: 480px) {
    .hd-bonus-row { grid-template-columns: repeat(3, 1fr); }
}
.hd-bonus-card {
    border-radius: 14px;
    padding: 13px 14px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    transition: background .18s, transform .18s;
    position: relative;
    overflow: hidden;
}
.hd-bonus-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background .18s;
}
.hd-bonus-card:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.bc-label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0;
}
.bc-value, .bc-val {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}
.bc-sub {
    font-size: 9px;
    color: rgba(255,255,255,.5);
    margin: 0;
}

/* ── Wave separator ── */
.hd-wave {
    position: relative;
    z-index: 1;
    line-height: 0;
    margin-top: -2px;
}
.hd-wave svg { display: block; width: 100%; }

/* Ticker */
.hd-ticker {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--mlm-theme-color-rgb), .08);
    border: 1px solid var(--mlm-card-border);
    border-radius: 8px;
    padding: 6px 10px;
    margin: 12px 0;
    font-size: 11px;
    color: var(--mlm-page-text-muted);
    overflow: hidden;
}
.hd-ticker-badge {
    font-size: 9px;
    font-weight: 700;
    background: var(--mlm-theme-color);
    color: var(--mlm-theme-text);
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Validasi Bonus Alert ── */
.val-alert { border-radius:16px; overflow:hidden; margin:12px 0 4px; box-shadow:0 4px 20px rgba(239,68,68,.12); }
.val-alert-header { display:flex; align-items:center; justify-content:space-between; gap:12px; background:linear-gradient(135deg,#ef4444,#dc2626); padding:14px 16px; }
.val-alert-header-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.val-alert-pulse { position:relative; flex-shrink:0; width:10px; height:10px; }
.val-alert-pulse::before,.val-alert-pulse::after { content:''; position:absolute; inset:0; border-radius:50%; background:#fff; }
.val-alert-pulse::before { opacity:.4; animation:val-pulse 1.8s ease-out infinite; }
.val-alert-pulse::after { opacity:1; transform:scale(.55); }
@keyframes val-pulse { 0%{transform:scale(.6);opacity:.5} 100%{transform:scale(2);opacity:0} }
.val-alert-icon { flex-shrink:0; width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; }
.val-alert-title { font-size:13px; font-weight:800; color:#fff; line-height:1.3; }
.val-alert-sub { font-size:11px; color:rgba(255,255,255,.75); margin-top:1px; }
.val-alert-toggle { flex-shrink:0; width:30px; height:30px; border-radius:8px; border:none; background:rgba(255,255,255,.18); color:#fff; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.val-alert-toggle i { transition:transform .3s ease; }
.val-alert-toggle:hover { background:rgba(255,255,255,.28); }
.val-alert-body { background:var(--mlm-card-bg); border:1px solid rgba(239,68,68,.2); border-top:none; border-radius:0 0 16px 16px; max-height:0; overflow:hidden; transition:max-height .35s ease, padding .25s ease; }
.val-alert-body.open { max-height:400px; padding:12px 16px 14px; }
.val-alert-grup { margin-bottom:10px; }
.val-alert-grup:last-child { margin-bottom:0; }
.val-alert-grup-label { display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:#ef4444; background:rgba(239,68,68,.1); border-radius:20px; padding:3px 10px; margin-bottom:6px; }
.val-alert-grup-items { display:flex; flex-direction:column; gap:5px; padding-left:4px; }
.val-alert-item { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--mlm-page-text); line-height:1.5; }
.val-alert-item i { font-size:9px; color:#ef4444; flex-shrink:0; }
body.theme-gold-light .val-alert-body,body.theme-blue-light .val-alert-body,body.theme-green-light .val-alert-body,body.theme-purple-light .val-alert-body,body.theme-red-light .val-alert-body { background:#fff; }

/* ================================================================
   8. STAT CARDS (st-*) — lihat definisi lengkap di bagian bawah
   ================================================================ */

/* ================================================================
   9. BONUS TABS (bt-*)
   ================================================================ */
.bt-card {
    background: var(--mlm-card-bg);
    border: 1px solid var(--mlm-card-border);
    border-radius: 16px;
    overflow: hidden;
}
.bt-head {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--mlm-card-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.bt-head::-webkit-scrollbar { display: none; }
.bt-tab {
    flex-shrink: 0;
    padding: 11px 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--mlm-page-text-muted);
    cursor: pointer;
    border: none;
    background: none;
    transition: color .18s;
    white-space: nowrap;
    position: relative;
}
.bt-tab.active {
    color: var(--mlm-theme-color);
}
.bt-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 2px;
    background: var(--mlm-theme-color);
    border-radius: 2px 2px 0 0;
}
.bt-body { padding: 12px; }
.bt-panel { display: none; }
.bt-panel.active { display: block; }

.bt-bonus-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--mlm-card-border);
    gap: 8px;
}
.bt-bonus-row:last-child { border-bottom: none; }
.bt-bonus-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--mlm-page-text);
    flex: 1;
}
.bt-bonus-val {
    font-size: 12px;
    font-weight: 800;
    color: var(--mlm-theme-color);
    white-space: nowrap;
}

/* Top earner row — placeholder (canonical styles in responsive block below) */

/* Card header reusable */
.hd-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mlm-card-border);
}
.hd-card-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--mlm-page-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.hd-card-link {
    font-size: 10px;
    font-weight: 700;
    color: var(--mlm-theme-color);
    display: flex;
    align-items: center;
    gap: 3px;
}
.hd-card-link:hover { opacity: .8; color: var(--mlm-theme-color); }

/* Tree card (hd-tree-*) */
.hd-tree-card, .hd-news-card {
    background: var(--mlm-card-bg);
    border: 1px solid var(--mlm-card-border);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06); height: 100%;
}
.hd-tree-body { padding: 14px; }
.hd-tree-root { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; }
.hd-tree-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, var(--mlm-theme-color), var(--mlm-theme-color));
    display: flex; align-items: center; justify-content: center;
    border: 3px solid rgba(255,255,255,.2);
    box-shadow: 0 4px 14px rgba(0,0,0,.15); overflow: hidden;
}
.hd-tree-avatar img { width: 100%; height: 100%; object-fit: contain; }
.hd-tree-root-name { font-size: 12px; font-weight: 700; color: var(--mlm-page-text); text-align: center; }
.hd-tree-root-id   { font-size: 10px; color: var(--mlm-page-text-muted); text-align: center; }
.hd-tree-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hd-tree-branch {
    background: var(--mlm-card-bg-2, rgba(0,0,0,.04));
    border-radius: 12px; padding: 10px 10px 8px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    border: 1px solid var(--mlm-card-border);
}
.hd-tree-branch-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--mlm-page-text-muted); }
.hd-tree-branch-val   { font-size: 20px; font-weight: 800; color: var(--mlm-theme-color); line-height: 1.1; }
.hd-tree-branch-sub   { font-size: 9px; color: var(--mlm-page-text-muted); text-align: center; }
.hd-tree-branch.left  .hd-tree-branch-label { color: #0ea5e9; }
.hd-tree-branch.right .hd-tree-branch-label { color: #8b5cf6; }
.hd-tree-branch.left  .hd-tree-branch-val   { color: #0ea5e9; }
.hd-tree-branch.right .hd-tree-branch-val   { color: #8b5cf6; }
.hd-tree-branch-solo { grid-column: 1 / -1; }
.hd-tree-branch-solo .hd-tree-branch-val { color: var(--mlm-theme-color); }

/* Light theme overrides */
body.theme-gold-light .hd-tree-branch, body.theme-blue-light .hd-tree-branch,
body.theme-green-light .hd-tree-branch, body.theme-purple-light .hd-tree-branch,
body.theme-red-light .hd-tree-branch { background: #f9fafb; border-color: #e5e7eb; }

/* News card (hd-news-*) */
.hd-news-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mlm-card-border);
    text-decoration: none; transition: background .15s;
}
.hd-news-item:last-child { border-bottom: none; }
.hd-news-item:hover { background: rgba(0,0,0,.03); }
.hd-news-img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--mlm-card-bg); }
.hd-news-info { flex: 1; min-width: 0; }
.hd-news-item-title {
    font-size: 12px; font-weight: 600; color: var(--mlm-page-text);
    line-height: 1.4; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 3px;
}
.hd-news-item-date { font-size: 10px; color: var(--mlm-page-text-muted); }

/* ================================================================
   10. LEADERSHIP SECTION (lws-*)
   ================================================================ */
.lws-wrap { margin-bottom: 4px; }

.lws-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.lws-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lws-header-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(245,158,11,.35);
}
.lws-header-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--mlm-page-text);
    line-height: 1.2;
}
.lws-header-sub {
    font-size: 10px;
    color: var(--mlm-page-text-muted);
    margin-top: 2px;
}
.lws-header-link {
    font-size: 11px;
    font-weight: 700;
    color: var(--mlm-theme-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.lws-swiper { overflow: hidden; width: 100%; padding-bottom: 20px !important; }
.lws-swiper .swiper-slide { width: 100%; height: auto; padding: 4px 2px; }
.lws-pagination, .bgs-pagination { bottom: 0 !important; height: 4px !important; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.15) !important; border-radius: 3px; }
.lws-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill,
.bgs-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--mlm-theme-color,#c9a227) !important; border-radius: 3px; }

.lws-card {
    width: 100%;
    background: var(--mlm-card-bg);
    border: 1px solid var(--mlm-card-border);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
}
.lws-card::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 90px; height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--mlm-theme-color-rgb),.1) 0%, transparent 70%);
    pointer-events: none;
}
.lws-card-done { border-color: rgba(34,197,94,.35); }
.lws-card-done::before { background: radial-gradient(circle, rgba(34,197,94,.1) 0%, transparent 70%); }
.lws-card-locked { opacity: .7; }

.lws-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lws-ring-wrap {
    position: relative;
    width: 64px; height: 64px;
    flex-shrink: 0;
}
.lws-ring {
    width: 64px; height: 64px;
    transform: rotate(-90deg);
}
.lws-ring-track {
    fill: none;
    stroke: rgba(var(--mlm-theme-color-rgb), .12);
    stroke-width: 5;
}
.lws-ring-fill {
    fill: none;
    stroke: var(--mlm-theme-color);
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dasharray .6s ease;
}
.lws-ring-fill.done { stroke: #22c55e; }
.lws-ring-center {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
}
.lws-ring-pct {
    font-size: 11px;
    font-weight: 800;
    color: var(--mlm-page-text);
    line-height: 1;
}
.lws-card-info {
    flex: 1; min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lws-card-plan {
    font-size: 11px;
    font-weight: 800;
    color: var(--mlm-page-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.lws-card-progress-txt {
    font-size: 10px;
    color: var(--mlm-page-text-muted);
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-wrap: wrap;
}
.lws-poin {
    font-size: 16px;
    font-weight: 800;
    color: var(--mlm-theme-color);
    line-height: 1;
}
.lws-poin-sep { opacity: .5; }
.lws-syarat { opacity: .75; }

.lws-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 20px;
    letter-spacing: .03em;
    width: fit-content;
}
.lws-status-badge.qualified { background: rgba(34,197,94,.15); color: #22c55e; }
.lws-status-badge.pending {
    background: rgba(var(--mlm-theme-color-rgb),.12);
    color: var(--mlm-theme-color);
}
.lws-status-badge.locked { background: rgba(148,163,184,.1); color: #94a3b8; }

.lws-bar-bg {
    height: 5px;
    background: rgba(var(--mlm-theme-color-rgb), .1);
    border-radius: 10px;
    overflow: hidden;
}
.lws-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mlm-theme-color-grad-2), var(--mlm-theme-color-grad-1));
    border-radius: 10px;
    transition: width .6s ease;
}
.lws-bar-fill.done { background: linear-gradient(90deg, #16a34a, #22c55e); }

.lws-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(var(--mlm-theme-color-rgb), .06);
    border-radius: 10px;
    padding: 8px 10px;
}
.lws-nominal-label {
    font-size: 9px;
    color: var(--mlm-page-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.lws-nominal-val {
    font-size: 13px;
    font-weight: 800;
    color: var(--mlm-theme-color);
}
.lws-upgrade-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--mlm-theme-color);
    color: var(--mlm-theme-text) !important;
    font-size: 10px;
    font-weight: 700;
    padding: 7px 10px;
    border-radius: 9px;
    text-decoration: none;
    transition: opacity .2s;
    letter-spacing: .02em;
}
.lws-upgrade-btn:hover { opacity: .85; color: var(--mlm-theme-text) !important; }


/* ================================================================
   11. SHARED COMPONENTS (pg-*)
   ================================================================ */

/* Page wrapper */
.pg-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.pg-body { flex: 1; padding: 16px 0 80px; }

/* Section label */
.pg-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mlm-theme-color);
    margin: 18px 0 10px;
}
.pg-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--mlm-theme-color);
    opacity: .18;
}

/* Generic card */
.pg-card {
    background: var(--mlm-card-bg);
    border: 1px solid var(--mlm-card-border);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

/* Empty state */
.pg-empty {
    padding: 40px 20px;
    text-align: center;
}
.pg-empty i {
    font-size: 36px;
    color: var(--mlm-page-text-muted);
    opacity: .3;
    display: block;
    margin-bottom: 12px;
}
.pg-empty p {
    font-size: 12px;
    color: var(--mlm-page-text-muted);
    margin: 0;
}

/* Buttons */
.pg-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--mlm-theme-color);
    color: var(--mlm-theme-text) !important;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: var(--mlm-input-rounded);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .2s;
    width: 100%;
}
.pg-btn-primary:hover { opacity: .85; }

.pg-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(var(--mlm-theme-color-rgb), .1);
    color: var(--mlm-theme-color) !important;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: var(--mlm-input-rounded);
    border: 1px solid rgba(var(--mlm-theme-color-rgb), .25);
    cursor: pointer;
    text-decoration: none;
    transition: background .2s;
    width: 100%;
}
.pg-btn-secondary:hover { background: rgba(var(--mlm-theme-color-rgb), .18); }

/* Badge */
.pg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid;
}
.pg-badge-success { background: rgba(34,197,94,.12); color: #22c55e; border-color: rgba(34,197,94,.2); }
.pg-badge-warning { background: rgba(245,158,11,.12); color: #f59e0b; border-color: rgba(245,158,11,.2); }
.pg-badge-danger  { background: rgba(239,68,68,.12);  color: #ef4444; border-color: rgba(239,68,68,.2); }
.pg-badge-muted   {
    background: rgba(var(--mlm-theme-color-rgb), .08);
    color: var(--mlm-page-text-muted);
    border-color: var(--mlm-card-border);
}

/* Info bar */
.pg-info-bar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(var(--mlm-theme-color-rgb), .07);
    border: 1px solid rgba(var(--mlm-theme-color-rgb), .18);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.pg-info-bar-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(var(--mlm-theme-color-rgb), .12);
    display: flex; align-items: center; justify-content: center;
    color: var(--mlm-theme-color);
    font-size: 13px;
    flex-shrink: 0;
}
.pg-info-bar-text {
    font-size: 11px;
    color: var(--mlm-page-text-muted);
    line-height: 1.5;
}
.pg-info-bar-text strong { color: var(--mlm-page-text); }

/* Form rows */
.pg-form-row { margin-bottom: 14px; }
.pg-form-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--mlm-page-text-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pg-form-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--mlm-input-rounded);
    border: 1px solid var(--mlm-input-border);
    background: var(--mlm-input-bg);
    color: var(--mlm-input-text);
    font-size: 13px;
    outline: none;
    transition: border-color .18s;
}
.pg-form-input:focus { border-color: var(--mlm-theme-color); }
.pg-form-input::placeholder { color: var(--mlm-page-text-muted); opacity: .5; }
.pg-form-hint {
    font-size: 10px;
    color: var(--mlm-page-text-muted);
    margin-top: 4px;
    opacity: .7;
}

/* ================================================================
   12. PRODUK (pl-*, pd-*)
   ================================================================ */

/* ── Produk List (pl-*) ── */
.pl-page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.pl-body { flex:1; padding-bottom:90px; }

.pl-canvas { display:flex; gap:0; align-items:flex-start; padding-top:12px; }

.pl-sidebar {
    width:200px; flex-shrink:0;
    position:sticky; top:80px;
    max-height:calc(100vh - 100px); overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:rgba(var(--mlm-theme-color-rgb),.15) transparent;
    padding-right:14px; padding-bottom:20px;
}
.pl-sidebar::-webkit-scrollbar { width:4px; }
.pl-sidebar::-webkit-scrollbar-track { background:transparent; }
.pl-sidebar::-webkit-scrollbar-thumb { background:rgba(var(--mlm-theme-color-rgb),.15); border-radius:4px; }

.pl-sidebar-title {
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px;
    color:rgba(var(--mlm-theme-color-rgb),.5);
    padding:0 0 10px; margin-bottom:4px;
    border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.12);
    display:flex; align-items:center; gap:6px;
}

.pl-cat-list { display:flex; flex-direction:column; gap:2px; margin-top:8px; }
.pl-cat-btn {
    display:flex; align-items:center; gap:9px;
    padding:9px 11px; border-radius:10px; border:none; background:none;
    cursor:pointer; text-align:left; width:100%;
    transition:background .15s, color .15s;
    font-size:12px; font-weight:600; color:var(--mlm-page-text);
}
.pl-cat-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.07); color:var(--mlm-theme-color); }
.pl-cat-btn.active { background:rgba(var(--mlm-theme-color-rgb),.12); color:var(--mlm-theme-color); }
.pl-cat-btn.active .pl-cat-dot { background:var(--mlm-theme-color); }
.pl-cat-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:rgba(var(--mlm-theme-color-rgb),.2); transition:background .15s; }
.pl-cat-label { flex:1; line-height:1.3; }
.pl-cat-count {
    font-size:10px; font-weight:700;
    color:rgba(var(--mlm-theme-color-rgb),.5);
    background:var(--mlm-card-bg); border-radius:20px; padding:1px 7px; flex-shrink:0;
}
.pl-cat-btn.active .pl-cat-count { background:rgba(var(--mlm-theme-color-rgb),.15); color:var(--mlm-theme-color); }

.pl-filter-strip {
    display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:10px 0 4px;
}
.pl-filter-strip::-webkit-scrollbar { display:none; }
.pl-filter-pill {
    white-space:nowrap; padding:6px 14px; border-radius:20px;
    border:1.5px solid rgba(var(--mlm-theme-color-rgb),.18);
    background:var(--mlm-card-bg); color:var(--mlm-page-text);
    font-size:12px; font-weight:600; cursor:pointer; flex-shrink:0; transition:all .18s;
}
.pl-filter-pill.active { background:var(--mlm-theme-color); border-color:var(--mlm-theme-color); color:var(--mlm-theme-text); }

.pl-main { flex:1; min-width:0; }

.pl-stats-bar { display:flex; align-items:center; justify-content:space-between; padding:0 2px 12px; gap:8px; }
.pl-stats-count { font-size:12px; color:rgba(var(--mlm-theme-color-rgb),.5); font-weight:600; }
.pl-stats-count strong { color:var(--mlm-page-text); font-weight:800; }
.pl-active-filter {
    font-size:11px; font-weight:700; color:var(--mlm-theme-color);
    background:rgba(var(--mlm-theme-color-rgb),.1);
    border:1px solid rgba(var(--mlm-theme-color-rgb),.2);
    padding:3px 10px; border-radius:20px;
}

.pl-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:768px) { .pl-grid { grid-template-columns:repeat(3,1fr); } }

.pl-card {
    background:var(--mlm-card-bg);
    border-radius:16px;
    border:1px solid rgba(var(--mlm-theme-color-rgb),.12);
    overflow:hidden; display:flex; flex-direction:column;
    transition:transform .2s, box-shadow .2s, border-color .2s; text-decoration:none;
}
.pl-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.1); border-color:rgba(var(--mlm-theme-color-rgb),.3); }

.pl-card-img { position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--mlm-page-bg-2); }
.pl-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; display:block; }
.pl-card:hover .pl-card-img img { transform:scale(1.05); }

.pl-card-badge {
    position:absolute; top:8px; left:8px;
    font-size:9px; font-weight:700; padding:3px 8px; border-radius:20px;
    background:rgba(var(--mlm-theme-color-rgb),.9); color:#fff; letter-spacing:.3px; backdrop-filter:blur(4px);
}

.pl-card-share { position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:4px; }
.pl-card-share a {
    width:26px; height:26px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:11px;
    text-decoration:none; background:rgba(255,255,255,.92); backdrop-filter:blur(4px);
    transition:transform .18s, box-shadow .18s; box-shadow:0 1px 4px rgba(0,0,0,.12); color:#333;
}
.pl-card-share a:hover { transform:scale(1.12); }
.pl-card-share .wa { color:#25d366; }
.pl-card-share .fb { color:#1877f2; }

.pl-card-body { padding:10px 12px 12px; display:flex; flex-direction:column; gap:4px; flex:1; }
.pl-card-name {
    font-size:12px; font-weight:600; color:var(--mlm-page-text); line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pl-card-qty { font-size:10px; color:rgba(var(--mlm-theme-color-rgb),.5); }
.pl-card-price { font-size:15px; font-weight:900; color:var(--mlm-theme-color); line-height:1; margin-top:2px; }
.pl-card-btn {
    margin-top:auto; padding-top:8px; display:block;
    background:var(--mlm-theme-color); color:var(--mlm-theme-text); text-align:center;
    font-size:11px; font-weight:700; padding:7px 0; border-radius:9px; text-decoration:none;
    transition:opacity .18s, transform .12s; border:none; cursor:pointer; width:100%;
}
.pl-card-btn:hover { opacity:.88; color:var(--mlm-theme-text); transform:translateY(-1px); }

.pl-card-wrap { display:block; }
.pl-card-wrap.pl-hidden { display:none; }

.pl-empty { text-align:center; padding:60px 20px; color:rgba(var(--mlm-theme-color-rgb),.5); display:none; }
.pl-empty.show { display:block; }
.pl-empty i { font-size:44px; opacity:.35; display:block; margin-bottom:14px; }
.pl-empty p { font-size:13px; font-weight:600; }

@media (max-width:767px) {
    .pl-sidebar { display:none; }
    .pl-filter-strip-wrap { display:block !important; }
    .pl-canvas { padding-top:0; }
}
@media (min-width:768px) { .pl-filter-strip-wrap { display:none !important; } }

/* ── Produk Detail (pd-*) ── */
.pd-page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.pd-body { flex:1; padding-bottom:90px; background:var(--mlm-page-bg-2); }

.pd-back-strip { display:flex; align-items:center; gap:10px; padding:14px 0 10px; }
.pd-back-btn {
    width:34px; height:34px; flex-shrink:0; border-radius:10px;
    border:1.5px solid rgba(var(--mlm-theme-color-rgb),.25);
    background:var(--mlm-card-bg);
    display:flex; align-items:center; justify-content:center;
    font-size:13px; color:var(--mlm-theme-color); cursor:pointer; text-decoration:none;
    transition:background .15s, box-shadow .15s;
}
.pd-back-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.08); box-shadow:0 0 0 3px rgba(var(--mlm-theme-color-rgb),.12); color:var(--mlm-theme-color); }
.pd-back-title { font-size:14px; font-weight:700; color:var(--mlm-page-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (min-width:768px) { .pd-layout { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; } }

.pd-gallery-card {
    background:var(--mlm-card-bg); border-radius:18px;
    border:1px solid rgba(var(--mlm-theme-color-rgb),.12);
    overflow:hidden; padding:12px 12px 0; margin-bottom:14px;
    box-shadow:0 2px 16px rgba(0,0,0,.07);
}
@media (min-width:768px) { .pd-gallery-card { margin-bottom:0; } }

.pd-swiper-wrap .swiper-slide img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; display:block; }
.pd-swiper-wrap .swiper-pagination-bullet { background:rgba(var(--mlm-theme-color-rgb),.3); opacity:1; }
.pd-swiper-wrap .swiper-pagination-bullet-active { background:var(--mlm-theme-color) !important; width:18px; border-radius:4px; transition:width .2s; }

.pd-thumbs { display:flex; gap:8px; padding:10px 0 12px; overflow-x:auto; scrollbar-width:none; }
.pd-thumbs::-webkit-scrollbar { display:none; }
.pd-thumb { width:52px; height:52px; flex-shrink:0; border-radius:9px; object-fit:cover; border:2px solid transparent; cursor:pointer; opacity:.5; transition:border-color .15s, opacity .15s; }
.pd-thumb.active { border-color:var(--mlm-theme-color); opacity:1; }
.pd-thumb:hover { opacity:.8; }

.pd-info-col { display:flex; flex-direction:column; gap:12px; }

.pd-card { background:var(--mlm-card-bg); border-radius:16px; border:1px solid rgba(var(--mlm-theme-color-rgb),.1); padding:18px; box-shadow:0 2px 12px rgba(0,0,0,.06); }

.pd-jenis-badge {
    display:inline-flex; align-items:center; font-size:10px; font-weight:700; letter-spacing:.6px;
    text-transform:uppercase; padding:3px 10px; border-radius:20px;
    background:rgba(var(--mlm-theme-color-rgb),.12); color:var(--mlm-theme-color);
    border:1px solid rgba(var(--mlm-theme-color-rgb),.2); margin-bottom:12px;
}
.pd-name { font-size:18px; font-weight:800; color:var(--mlm-page-text); margin:0 0 14px; line-height:1.4; }
.pd-divider { height:1px; background:rgba(var(--mlm-theme-color-rgb),.12); margin:14px 0; }
.pd-price-block { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.pd-price { font-size:28px; font-weight:900; color:var(--mlm-theme-color); line-height:1; }
.pd-netto {
    display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
    color:var(--mlm-page-text); opacity:.55;
    background:rgba(var(--mlm-theme-color-rgb),.07); padding:5px 12px; border-radius:20px;
    border:1px solid rgba(var(--mlm-theme-color-rgb),.15);
}
.pd-netto i { font-size:9px; color:var(--mlm-theme-color); opacity:.8; }

.pd-section-label {
    display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800;
    text-transform:uppercase; letter-spacing:1px; color:var(--mlm-page-text); opacity:.45; margin-bottom:12px;
}
.pd-section-label::before {
    content:''; width:3px; height:13px; border-radius:2px;
    background:var(--mlm-theme-color); display:inline-block; opacity:1;
}

.pd-desc { font-size:13px; color:var(--mlm-page-text); opacity:.75; line-height:1.8; max-height:84px; overflow:hidden; transition:max-height .4s ease; }
.pd-desc.expand { max-height:3000px; }
.pd-desc-toggle {
    display:inline-flex; align-items:center; gap:5px; margin-top:10px;
    font-size:12px; font-weight:700; color:var(--mlm-theme-color);
    background:none; border:none; padding:6px 0; cursor:pointer; transition:opacity .15s;
}
.pd-desc-toggle:hover { opacity:.75; }

.pd-share-row { display:flex; gap:10px; margin-bottom:12px; }
.pd-share-btn {
    flex:1; height:44px; border-radius:12px; border:none; font-size:13px; font-weight:700;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
    text-decoration:none; transition:opacity .15s, transform .12s, box-shadow .15s;
}
.pd-share-btn:active { transform:scale(.97); }
.pd-share-wa { background:#25d366; color:#fff; box-shadow:0 4px 14px rgba(37,211,102,.3); }
.pd-share-wa:hover { opacity:.9; box-shadow:0 6px 20px rgba(37,211,102,.4); color:#fff; }
.pd-share-fb { background:#1877f2; color:#fff; box-shadow:0 4px 14px rgba(24,119,242,.3); }
.pd-share-fb:hover { opacity:.9; box-shadow:0 6px 20px rgba(24,119,242,.4); color:#fff; }

.pd-copy-row {
    display:flex; align-items:center; gap:10px;
    background:rgba(var(--mlm-theme-color-rgb),.06);
    border:1px solid rgba(var(--mlm-theme-color-rgb),.15);
    border-radius:10px; padding:9px 12px;
}
.pd-copy-url { flex:1; font-size:11px; color:var(--mlm-page-text); opacity:.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-copy-btn {
    flex-shrink:0; font-size:11px; font-weight:700; color:var(--mlm-theme-color);
    background:none; border:none; cursor:pointer; padding:2px 0;
    display:flex; align-items:center; gap:4px; white-space:nowrap; transition:opacity .15s;
}
.pd-copy-btn:hover { opacity:.7; }

/* -- produk detail: lightbox modal -- */
.pd-lightbox {
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,.92); align-items:center; justify-content:center;
}
.pd-lightbox.open { display:flex; }
.pd-lightbox-inner {
    position:relative; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
}
.pd-lightbox-img {
    max-width:94vw; max-height:88vh;
    object-fit:contain; border-radius:10px;
    user-select:none; -webkit-user-drag:none;
}
.pd-lightbox-close {
    position:absolute; top:14px; right:14px;
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.15); border:none; color:#fff;
    font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .15s;
}
.pd-lightbox-close:hover { background:rgba(255,255,255,.3); }
.pd-lightbox-nav {
    position:absolute; top:50%; transform:translateY(-50%);
    width:42px; height:42px; border-radius:50%;
    background:rgba(255,255,255,.15); border:none; color:#fff;
    font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .15s; z-index:2;
}
.pd-lightbox-nav:hover { background:rgba(255,255,255,.3); }
.pd-lightbox-prev { left:14px; }
.pd-lightbox-next { right:14px; }
.pd-lightbox-nav.hidden { display:none; }
.pd-lightbox-counter {
    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,.7); font-size:12px; background:rgba(0,0,0,.4);
    padding:4px 12px; border-radius:20px; pointer-events:none;
}
.pd-swiper-wrap .swiper-slide img { cursor:zoom-in; }

/* dark/light override tidak diperlukan — modal pakai overlay hitam */

/* ================================================================
   13. PROFIL FORM (pf-*)
   ================================================================ */
.pf-page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.pf-body      { flex:1; padding-bottom:80px; }

.pf-card {
    background:var(--mlm-card-bg);
    border:1px solid var(--mlm-card-border);
    border-radius:16px; overflow:hidden; margin-bottom:14px;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
}

.pf-card-head {
    padding:12px 16px;
    background:rgba(var(--mlm-theme-color-rgb),.06);
    border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.1);
    font-size:13px; font-weight:700; color:var(--mlm-page-text);
    display:flex; align-items:center; gap:8px;
}
.pf-card-head i { color:var(--mlm-theme-color); }
.pf-card-body { padding:16px; }

.pf-field  { margin-bottom:14px; }
.pf-label  { display:block; font-size:11px; font-weight:600; color:var(--mlm-page-text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }

.pf-input, .pf-select, .pf-textarea {
    width:100%; box-sizing:border-box;
    background:var(--mlm-input-bg); border:1px solid var(--mlm-input-border);
    border-radius:10px; padding:11px 14px; font-size:13px; color:var(--mlm-input-text); outline:none;
    transition:border-color .18s; appearance:none; -webkit-appearance:none;
}
.pf-input:focus, .pf-select:focus, .pf-textarea:focus { border-color:var(--mlm-theme-color); }
.pf-input::placeholder, .pf-textarea::placeholder { color:var(--mlm-page-text-muted); opacity:.4; }
.pf-textarea { resize:vertical; min-height:80px; }

.pf-input-wrap { position:relative; display:flex; align-items:center; }
.pf-input-wrap .pf-input { padding-right:44px; }
.pf-eye-btn {
    position:absolute; right:12px; background:none; border:none; cursor:pointer;
    color:var(--mlm-page-text-muted); font-size:14px; padding:0; line-height:1; transition:color .15s;
}
.pf-eye-btn:hover { color:var(--mlm-theme-color); }

.pf-avail { font-size:11px; margin-top:4px; min-height:16px; }
.pf-avail.ok  { color:#3dba78; }
.pf-avail.err { color:#ef4444; }

.pf-error { font-size:12px; color:#ef4444; min-height:16px; margin-top:4px; }

.pf-actions { display:flex; gap:10px; margin-top:6px; }
.pf-btn-cancel {
    flex:1; padding:12px; border-radius:12px; font-size:13px; font-weight:700; cursor:pointer;
    background:none; border:1px solid rgba(var(--mlm-theme-color-rgb),.2);
    color:var(--mlm-page-text-muted); transition:background .15s; text-decoration:none;
    display:flex; align-items:center; justify-content:center; gap:6px;
}
.pf-btn-cancel:hover { background:rgba(var(--mlm-theme-color-rgb),.08); text-decoration:none; }
.pf-btn-submit {
    flex:2; padding:12px; border-radius:12px; font-size:13px; font-weight:700; cursor:pointer;
    background:var(--mlm-theme-color); color:var(--mlm-theme-text); border:none; transition:opacity .15s;
    display:flex; align-items:center; justify-content:center; gap:7px;
}
.pf-btn-submit:hover { opacity:.88; }
.pf-btn-submit:disabled { opacity:.5; cursor:not-allowed; }

.pf-pin-wrap { text-align:center; padding-top:20px; }
.pf-pin-title { font-size:15px; font-weight:800; color:var(--mlm-page-text); margin-bottom:5px; }
.pf-pin-sub { font-size:12px; color:var(--mlm-page-text-muted); margin-bottom:18px; }
.pf-pin-input {
    width:160px; background:var(--mlm-input-bg); border:1px solid rgba(var(--mlm-theme-color-rgb),.25);
    border-radius:12px; padding:12px; font-size:18px; font-weight:700; color:var(--mlm-input-text);
    text-align:center; letter-spacing:.2em; outline:none; margin:0 auto 14px; display:block; transition:border-color .18s;
}
.pf-pin-input:focus { border-color:var(--mlm-theme-color); }
.pf-pin-error { font-size:12px; color:#ef4444; min-height:18px; margin-bottom:12px; }

.pf-note {
    background:rgba(var(--mlm-theme-color-rgb),.06);
    border:1px solid rgba(var(--mlm-theme-color-rgb),.12);
    border-radius:10px; padding:10px 13px;
    font-size:12px; color:var(--mlm-page-text-muted); line-height:1.6; margin-bottom:14px;
}
.pf-note i { color:var(--mlm-theme-color); margin-right:5px; }

.pf-info-page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.pf-info-body { flex:1; padding-bottom:80px; }

.pf-section {
    background:var(--mlm-card-bg);
    border:1px solid var(--mlm-card-border);
    border-radius:14px; overflow:hidden; margin-bottom:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.pf-section-head {
    display:flex; align-items:center; gap:10px; padding:13px 14px;
    cursor:pointer; user-select:none;
    border-bottom:1px solid transparent; transition:border-color .15s;
}
.pf-section-head.open { border-bottom-color:rgba(var(--mlm-theme-color-rgb),.08); }
.pf-section-icon {
    width:32px; height:32px; border-radius:9px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:.8rem; color:var(--mlm-theme-text);
    background:var(--mlm-theme-color);
}
.pf-section-title { font-size:13px; font-weight:700; color:var(--mlm-page-text); flex:1; }
.pf-section-chevron { color:var(--mlm-page-text-muted); font-size:.65rem; transition:transform .2s; flex-shrink:0; opacity:.5; }
.pf-section-head.open .pf-section-chevron { transform:rotate(90deg); color:var(--mlm-theme-color); opacity:1; }
.pf-section-body { padding:13px 14px; display:none; }
.pf-section-body.open { display:block; }

.pf-body-text { font-size:.8rem; color:var(--mlm-page-text-muted); line-height:1.75; margin:0 0 8px; }
.pf-list { list-style:none; padding:0; margin:0; }
.pf-list li { display:flex; gap:8px; align-items:flex-start; font-size:.8rem; color:var(--mlm-page-text-muted); line-height:1.7; padding:3px 0; }
.pf-list li::before { content:'•'; color:var(--mlm-theme-color); font-weight:700; flex-shrink:0; }
.pf-list li strong { color:var(--mlm-page-text); }
.pf-divider { height:1px; background:rgba(var(--mlm-theme-color-rgb),.07); margin:10px 0; }

.pf-highlight {
    background:rgba(var(--mlm-theme-color-rgb),.08);
    border:1px solid rgba(var(--mlm-theme-color-rgb),.14);
    border-radius:9px; padding:9px 13px; margin-bottom:10px;
    font-size:.79rem; color:var(--mlm-theme-color); font-weight:600; line-height:1.55;
}
.pf-highlight.green  { background:rgba(61,186,120,.08); border-color:rgba(61,186,120,.15); color:#3dba78; }
.pf-highlight.danger { background:rgba(239,68,68,.07); border-color:rgba(239,68,68,.14); color:#ef4444; }

.pf-table { width:100%; border-collapse:collapse; font-size:.78rem; margin-bottom:8px; }
.pf-table th { background:rgba(var(--mlm-theme-color-rgb),.08); padding:7px 10px; text-align:left; color:var(--mlm-page-text-muted); font-weight:600; border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.1); }
.pf-table td { padding:7px 10px; color:var(--mlm-page-text); opacity:.8; border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.06); }
.pf-table tr:last-child td { border-bottom:none; }
.pf-table td strong { color:var(--mlm-page-text); opacity:1; }

.pf-tag { display:inline-block; font-size:.65rem; font-weight:700; padding:2px 8px; border-radius:20px; margin-right:3px; }
.pf-tag.green  { background:rgba(61,186,120,.12); color:#3dba78; border:1px solid rgba(61,186,120,.2); }
.pf-tag.purple { background:rgba(139,92,246,.12); color:#a78bfa; border:1px solid rgba(139,92,246,.2); }
.pf-tag.amber  { background:rgba(245,158,11,.1); color:#f59e0b; border:1px solid rgba(245,158,11,.18); }

.pf-section-label {
    font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--mlm-theme-color);
    display:flex; align-items:center; gap:6px; margin:18px 0 8px;
}
.pf-section-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, rgba(var(--mlm-theme-color-rgb),.3), transparent); }

.pf-faq {
    background:var(--mlm-card-bg);
    border:1px solid var(--mlm-card-border);
    border-radius:14px; overflow:hidden; margin-bottom:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.pf-faq-item { border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.07); }
.pf-faq-item:last-child { border-bottom:none; }
.pf-faq-q { display:flex; align-items:center; gap:10px; padding:13px 14px; cursor:pointer; user-select:none; }
.pf-faq-q-icon { color:var(--mlm-theme-color); font-size:.8rem; flex-shrink:0; }
.pf-faq-q-text { flex:1; font-size:.82rem; font-weight:600; color:var(--mlm-page-text); }
.pf-faq-chevron { color:var(--mlm-page-text-muted); font-size:.65rem; transition:transform .2s; flex-shrink:0; opacity:.5; }
.pf-faq-item.open .pf-faq-chevron { transform:rotate(90deg); color:var(--mlm-theme-color); opacity:1; }
.pf-faq-a { display:none; padding:0 14px 13px 38px; }
.pf-faq-item.open .pf-faq-a { display:block; }
.pf-faq-a p { font-size:.8rem; color:var(--mlm-page-text-muted); line-height:1.75; margin:0 0 6px; }
.pf-faq-a ul { list-style:none; padding:0; margin:4px 0 0; }
.pf-faq-a ul li { font-size:.8rem; color:var(--mlm-page-text-muted); line-height:1.7; display:flex; gap:6px; padding:2px 0; }
.pf-faq-a ul li::before { content:'→'; color:var(--mlm-theme-color); flex-shrink:0; }
.pf-faq-a ul li strong { color:var(--mlm-page-text); }

.pf-kontak {
    background:var(--mlm-card-bg);
    border:1px solid var(--mlm-card-border);
    border-radius:14px; overflow:hidden; margin-bottom:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.pf-kontak-item {
    display:flex; align-items:center; gap:12px; padding:13px 14px;
    border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.07);
    text-decoration:none; transition:background .15s;
}
.pf-kontak-item:last-child { border-bottom:none; }
.pf-kontak-item:hover { background:rgba(var(--mlm-theme-color-rgb),.05); text-decoration:none; }
.pf-kontak-icon { width:36px; height:36px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.85rem; color:#fff; }
.pf-kontak-icon.wa    { background:linear-gradient(135deg,#16a34a,#15803d); }
.pf-kontak-icon.ig    { background:linear-gradient(135deg,#e1306c,#833ab4); }
.pf-kontak-icon.email { background:linear-gradient(135deg,#0369a1,#0284c7); }
.pf-kontak-text { flex:1; }
.pf-kontak-label { font-size:.82rem; font-weight:600; color:var(--mlm-page-text); }
.pf-kontak-sub { font-size:.7rem; color:var(--mlm-page-text-muted); margin-top:1px; }
.pf-kontak-arrow { color:var(--mlm-page-text-muted); font-size:.7rem; opacity:.4; }

.pf-info-note {
    background:rgba(var(--mlm-theme-color-rgb),.07);
    border:1px solid rgba(var(--mlm-theme-color-rgb),.13);
    border-radius:10px; padding:11px 13px;
    font-size:.79rem; color:var(--mlm-page-text-muted); line-height:1.6; margin-bottom:14px;
}
.pf-info-note i { color:var(--mlm-theme-color); margin-right:5px; }
.pf-info-note.amber { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.15); color:#f59e0b; }

/* pf-info-page extras: intro, paket-card, reward-card, sub-head, cta */
.pf-info-page-wrap { padding-top:0; }
.pf-info-body { padding-top:72px; }

.pf-intro {
    display:flex; align-items:flex-start; gap:12px;
    background:rgba(var(--mlm-theme-color-rgb),.08);
    border:1px solid rgba(var(--mlm-theme-color-rgb),.15);
    border-radius:14px; padding:14px; margin:12px 14px 8px;
}
.pf-intro-icon { font-size:22px; flex-shrink:0; color:var(--mlm-theme-color); padding-top:2px; }
.pf-intro-text { font-size:.8rem; color:var(--mlm-page-text-muted); line-height:1.7; }
.pf-intro-text strong { color:var(--mlm-page-text); display:block; margin-bottom:3px; }

.pf-muted { color:var(--mlm-page-text-muted); font-size:.75rem; font-weight:400; }

.pf-sub-head {
    font-size:.8rem; font-weight:800; color:var(--mlm-page-text);
    margin:12px 0 8px; display:flex; align-items:center; gap:7px;
}
.pf-sub-head i { color:var(--mlm-theme-color); }

.pf-paket-card {
    border:1px solid var(--mlm-card-border); border-radius:12px;
    padding:12px 13px; margin-bottom:10px;
    background:rgba(var(--mlm-theme-color-rgb),.03);
}
.pf-paket-head {
    display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.pf-paket-icon { font-size:18px; flex-shrink:0; }
.pf-paket-nama { font-size:13px; font-weight:900; color:var(--mlm-page-text); flex:1; }
.pf-paket-poin {
    font-size:10px; font-weight:800; padding:3px 9px; border-radius:20px;
    background:rgba(var(--mlm-theme-color-rgb),.13); color:var(--mlm-theme-color);
}

.pf-reward-card {
    border:1px solid var(--mlm-card-border); border-radius:12px;
    padding:12px 13px; margin-bottom:10px;
}
.pf-reward-head {
    display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.pf-reward-no {
    width:24px; height:24px; border-radius:50%; flex-shrink:0;
    background:rgba(var(--mlm-theme-color-rgb),.13); color:var(--mlm-theme-color);
    font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center;
}
.pf-reward-icon { font-size:20px; flex-shrink:0; }
.pf-reward-nama { font-size:13px; font-weight:900; color:var(--mlm-page-text); }
.pf-reward-syarat { font-size:11px; color:var(--mlm-page-text-muted); margin-top:1px; }
.pf-reward-prize {
    font-size:.8rem; color:var(--mlm-page-text-muted);
    display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.pf-reward-prize i { color:var(--mlm-theme-color); }
.pf-reward-nilai {
    font-size:12px; font-weight:800; color:var(--mlm-theme-color);
    background:rgba(var(--mlm-theme-color-rgb),.1); padding:2px 9px; border-radius:20px;
}

.pf-cta-btn {
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin:16px 14px 4px; padding:14px; border-radius:14px;
    background:linear-gradient(135deg,#16a34a,#15803d);
    color:#fff; font-size:14px; font-weight:800; text-decoration:none;
    transition:opacity .18s;
}
.pf-cta-btn:hover { opacity:.88; color:#fff; text-decoration:none; }
.pf-cta-btn i { font-size:18px; }

.select2-container--default .select2-selection--single {
    background:var(--mlm-input-bg) !important;
    border:1px solid var(--mlm-input-border) !important;
    border-radius:10px !important; height:auto !important; padding:11px 14px !important;
    color:var(--mlm-input-text) !important; font-size:13px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color:inherit !important; line-height:1.4 !important; padding:0 !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top:50% !important; transform:translateY(-50%) !important; }

/* ================================================================
   14. BONUS & RIWAYAT (bn-*, rw-*, rwp-*, rts-*, sb-*)
   ================================================================ */

/* ── Bonus list (bn-*) ── */
.bn-page-wrap { display:flex; flex-direction:column; min-height:100vh; }

.bn-filter-bar {
    position:sticky; top:0; z-index:99;
    background:var(--mlm-page-bg);
    border-bottom:1px solid var(--mlm-card-border);
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.bn-filter-scroll { display:flex; gap:7px; padding:9px 14px; overflow-x:auto; scrollbar-width:none; }
.bn-filter-scroll::-webkit-scrollbar { display:none; }

.bn-filter-btn {
    display:inline-flex; align-items:center; white-space:nowrap; flex-shrink:0;
    padding:5px 14px; border-radius:20px; font-size:11.5px; font-weight:700; cursor:pointer;
    border:1px solid rgba(var(--mlm-theme-color-rgb),.18);
    background:rgba(var(--mlm-theme-color-rgb),.07);
    color:var(--mlm-page-text-muted);
    transition:background .15s, border-color .15s, color .15s;
}
.bn-filter-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.14); color:var(--mlm-page-text); }
.bn-filter-btn.active { background:var(--mlm-theme-color); border-color:var(--mlm-theme-color); color:var(--mlm-theme-text); }

.bn-filter-panel {
    overflow:hidden; max-height:0;
    transition:max-height .3s ease, padding .3s ease;
    padding:0 14px;
    background:var(--mlm-card-bg);
    border-top:1px solid transparent;
}
.bn-filter-panel.open { max-height:240px; padding:12px 14px 14px; border-top-color:rgba(var(--mlm-theme-color-rgb),.1); }
.bn-fp-row { display:flex; gap:10px; flex-wrap:wrap; }
.bn-fp-group { flex:1; min-width:120px; }
.bn-fp-label { display:block; font-size:10px; font-weight:700; color:var(--mlm-page-text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
.bn-fp-select, .bn-fp-date {
    width:100%; box-sizing:border-box; height:36px;
    border:1px solid var(--mlm-input-border); border-radius:10px; padding:0 10px; font-size:12px;
    background:var(--mlm-input-bg); color:var(--mlm-input-text); outline:none; transition:border-color .18s;
}
.bn-fp-select:focus, .bn-fp-date:focus { border-color:var(--mlm-theme-color); }
.bn-fp-actions { display:flex; gap:8px; margin-top:10px; }
.bn-fp-reset {
    height:36px; padding:0 16px; border-radius:10px;
    border:1px solid rgba(var(--mlm-theme-color-rgb),.2);
    background:none; color:var(--mlm-page-text-muted);
    font-size:12px; font-weight:700; cursor:pointer; transition:background .15s;
}
.bn-fp-reset:hover { background:rgba(var(--mlm-theme-color-rgb),.08); }
.bn-fp-apply {
    flex:1; height:36px; border-radius:10px; border:none;
    background:var(--mlm-theme-color); color:var(--mlm-theme-text);
    font-size:12px; font-weight:700; cursor:pointer; transition:opacity .15s;
}
.bn-fp-apply:hover { opacity:.88; }

.bn-active-bar {
    display:none; align-items:center; gap:6px; padding:6px 14px;
    background:rgba(var(--mlm-theme-color-rgb),.07);
    border-top:1px solid rgba(var(--mlm-theme-color-rgb),.1);
    font-size:11px; color:var(--mlm-theme-color);
}
.bn-active-bar.show { display:flex; }
.bn-active-bar span { flex:1; }
.bn-active-bar button {
    background:none; border:none; color:var(--mlm-page-text-muted);
    font-size:11px; font-weight:700; cursor:pointer; padding:0; transition:color .15s;
}
.bn-active-bar button:hover { color:#ef4444; }

.bn-body { flex:1; }
.bn-list-wrap { padding-top:12px; padding-bottom:90px; }
.bn-list { display:flex; flex-direction:column; gap:8px; padding:0 14px; }

.bn-card {
    background:var(--mlm-card-bg);
    border:1px solid var(--mlm-card-border);
    border-radius:14px; padding:12px;
    display:flex; align-items:flex-start; gap:11px; transition:border-color .18s;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.bn-card:hover { border-color:rgba(var(--mlm-theme-color-rgb),.32); }

.bn-icon {
    width:42px; height:42px; border-radius:12px;
    background:rgba(var(--mlm-theme-color-rgb),.12);
    border:1px solid rgba(var(--mlm-theme-color-rgb),.18);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    font-size:16px; color:var(--mlm-theme-color);
}
.bn-info { flex:1; min-width:0; }
.bn-type { font-size:12.5px; font-weight:700; color:var(--mlm-page-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bn-keterangan { font-size:11px; color:var(--mlm-page-text-muted); line-height:1.4; margin-top:2px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.bn-right { text-align:right; flex-shrink:0; }
.bn-nominal { font-size:14px; font-weight:800; color:#6ee7b7; white-space:nowrap; }
.bn-nominal.reject { color:#f87171; }
.bn-date { font-size:10px; color:var(--mlm-page-text-muted); margin-top:2px; white-space:nowrap; }
.bn-badge { display:inline-block; margin-top:4px; font-size:9px; font-weight:700; padding:2px 8px; border-radius:10px; }
.bn-badge.pending  { background:rgba(245,158,11,.12); color:#f59e0b; border:1px solid rgba(245,158,11,.2); }
.bn-badge.transfer { background:rgba(61,186,120,.12); color:#6ee7b7; border:1px solid rgba(61,186,120,.2); }
.bn-badge.reject   { background:rgba(239,68,68,.1); color:#f87171; border:1px solid rgba(239,68,68,.18); }

.bn-loadmore-wrap { padding:12px 14px 4px; text-align:center; }
.bn-loadmore-btn {
    display:inline-flex; align-items:center; gap:6px; padding:9px 22px; border-radius:12px;
    font-size:12px; font-weight:700;
    background:rgba(var(--mlm-theme-color-rgb),.1); border:1px solid rgba(var(--mlm-theme-color-rgb),.2);
    color:var(--mlm-theme-color); cursor:pointer; transition:background .15s;
}
.bn-loadmore-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.2); }

.bn-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px; text-align:center; }
.bn-empty i { font-size:36px; color:var(--mlm-page-text-muted); opacity:.3; }
.bn-empty p { margin:0; font-size:13px; color:var(--mlm-page-text-muted); }

/* ── Riwayat Penarikan (rwp-*) ── */
.rwp-page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.rwp-body { flex:1; padding-bottom:80px; }

.rwp-filter-wrap { overflow:hidden; margin-bottom:12px; }
.rwp-filter-tabs { display:flex; gap:6px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none; }
.rwp-filter-tabs::-webkit-scrollbar { display:none; }
.rwp-filter-tab {
    display:inline-flex; align-items:center; gap:4px; padding:6px 14px; border-radius:10px;
    font-size:11px; font-weight:700; white-space:nowrap; cursor:pointer; flex-shrink:0;
    border:1px solid rgba(var(--mlm-theme-color-rgb),.15);
    background:rgba(var(--mlm-theme-color-rgb),.07);
    color:var(--mlm-page-text-muted);
    transition:background .15s, border-color .15s, color .15s;
}
.rwp-filter-tab:hover { background:rgba(var(--mlm-theme-color-rgb),.14); color:var(--mlm-page-text); }
.rwp-filter-tab.active { background:var(--mlm-theme-color); border-color:var(--mlm-theme-color); color:var(--mlm-theme-text); }

.rwp-list { display:flex; flex-direction:column; gap:8px; }

.rwp-item {
    background:var(--mlm-card-bg); border:1px solid var(--mlm-card-border);
    border-radius:14px; padding:13px 14px; display:flex; align-items:center; gap:12px;
    transition:border-color .18s; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.rwp-item:hover { border-color:rgba(var(--mlm-theme-color-rgb),.3); }

.rwp-icon {
    width:40px; height:40px; border-radius:11px; flex-shrink:0;
    background:rgba(var(--mlm-theme-color-rgb),.1); border:1px solid rgba(var(--mlm-theme-color-rgb),.16);
    display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--mlm-theme-color);
}
.rwp-mid { flex:1; min-width:0; }
.rwp-amount { font-size:15px; font-weight:900; color:var(--mlm-theme-color); white-space:nowrap; margin-bottom:2px; }
.rwp-atas-nama { font-size:10.5px; font-weight:700; color:var(--mlm-page-text-muted); text-transform:uppercase; letter-spacing:.03em; }
.rwp-bank-row { display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--mlm-page-text-muted); margin-top:1px; }
.rwp-right { text-align:right; flex-shrink:0; }
.rwp-date { font-size:9.5px; color:var(--mlm-page-text-muted); white-space:nowrap; margin-bottom:5px; }
.rwp-badge { display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:700; padding:3px 9px; border-radius:7px; white-space:nowrap; }
.rwp-badge.pending { background:rgba(245,158,11,.1); color:#f59e0b; border:1px solid rgba(245,158,11,.18); }
.rwp-badge.success { background:rgba(61,186,120,.12); color:#3dba78; border:1px solid rgba(61,186,120,.2); }
.rwp-badge.danger  { background:rgba(239,68,68,.1); color:#f87171; border:1px solid rgba(239,68,68,.16); }

.rwp-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px; text-align:center; }
.rwp-empty i { font-size:36px; color:var(--mlm-page-text-muted); opacity:.3; }
.rwp-empty p { margin:0; font-size:13px; color:var(--mlm-page-text-muted); }

/* ── Riwayat Topup Saldo (rts-*) ── */
.rts-list { display:flex; flex-direction:column; gap:8px; }
.rts-item {
    background:var(--mlm-card-bg); border:1px solid var(--mlm-card-border);
    border-radius:14px; padding:13px 14px; transition:border-color .18s;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.rts-item:hover { border-color:rgba(var(--mlm-theme-color-rgb),.3); }
.rts-item-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.rts-code {
    display:inline-flex; align-items:center; gap:5px;
    font-size:10.5px; font-weight:700; color:var(--mlm-theme-color);
    background:rgba(var(--mlm-theme-color-rgb),.1); border:1px solid rgba(var(--mlm-theme-color-rgb),.2);
    border-radius:7px; padding:3px 9px;
}
.rts-nominal { font-size:15px; font-weight:900; color:var(--mlm-theme-color); white-space:nowrap; }
.rts-item-mid {
    display:flex; align-items:flex-start; gap:8px; padding:8px 0;
    border-top:1px solid rgba(var(--mlm-theme-color-rgb),.07);
    border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.07); margin-bottom:8px;
}
.rts-bank-icon { font-size:11px; color:var(--mlm-page-text-muted); margin-top:1px; flex-shrink:0; }
.rts-bank-info { flex:1; min-width:0; }
.rts-bank-line { font-size:11px; color:var(--mlm-page-text-muted); line-height:1.5; }
.rts-bank-line strong { color:var(--mlm-page-text); font-weight:700; }
.rts-item-foot { display:flex; align-items:center; justify-content:space-between; }
.rts-date { font-size:9.5px; color:var(--mlm-page-text-muted); }
.rts-badge { display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:700; padding:3px 9px; border-radius:7px; white-space:nowrap; }
.rts-badge.pending { background:rgba(245,158,11,.1); color:#f59e0b; border:1px solid rgba(245,158,11,.18); }
.rts-badge.success { background:rgba(61,186,120,.12); color:#3dba78; border:1px solid rgba(61,186,120,.2); }
.rts-badge.danger  { background:rgba(239,68,68,.1); color:#f87171; border:1px solid rgba(239,68,68,.16); }
.rts-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px; text-align:center; }
.rts-empty i { font-size:36px; color:var(--mlm-page-text-muted); opacity:.3; }
.rts-empty p { margin:0; font-size:13px; color:var(--mlm-page-text-muted); }

/* ── Slip Bonus (sb-*) ── */
.sb-page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.sb-body { flex:1; padding-bottom:90px; }
.sb-card {
    background:var(--mlm-card-bg); border:1px solid var(--mlm-card-border);
    border-radius:16px; overflow:hidden; margin-bottom:16px;
    box-shadow:0 4px 20px rgba(0,0,0,.08);
}
.sb-card-head {
    padding:16px; background:rgba(var(--mlm-theme-color-rgb),.07);
    border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.1);
    display:flex; align-items:center; gap:12px;
}
.sb-logo { width:52px; height:52px; object-fit:contain; flex-shrink:0; }
.sb-company { flex:1; min-width:0; }
.sb-company-name { font-size:14px; font-weight:800; color:var(--mlm-theme-color); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-company-address, .sb-company-phone { font-size:10px; color:var(--mlm-page-text-muted); margin-top:2px; line-height:1.4; }
.sb-member-info {
    padding:14px 16px; border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.08);
    display:grid; grid-template-columns:1fr 1fr; gap:6px 12px;
}
.sb-info-row { display:flex; gap:4px; font-size:11px; }
.sb-info-label { color:var(--mlm-page-text-muted); white-space:nowrap; flex-shrink:0; }
.sb-info-sep { color:var(--mlm-page-text-muted); flex-shrink:0; opacity:.5; }
.sb-info-val { font-weight:700; color:var(--mlm-page-text); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-title {
    font-size:13px; font-weight:800; text-align:center; color:var(--mlm-theme-color);
    padding:12px 16px 10px; border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.08);
    text-transform:uppercase; letter-spacing:.04em;
}
.sb-rows { padding:10px 16px; }
.sb-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.05); font-size:12px; }
.sb-row:last-child { border-bottom:none; }
.sb-row-no { width:22px; flex-shrink:0; color:var(--mlm-page-text-muted); font-size:11px; text-align:right; }
.sb-row-name { flex:1; color:var(--mlm-page-text); min-width:0; }
.sb-row-amount { font-weight:700; color:#6ee7b7; white-space:nowrap; flex-shrink:0; }
.sb-total-row {
    display:flex; align-items:center; justify-content:space-between; padding:10px 16px;
    border-top:1px solid rgba(var(--mlm-theme-color-rgb),.12);
    background:rgba(var(--mlm-theme-color-rgb),.04);
}
.sb-total-label { font-size:12px; font-weight:700; color:var(--mlm-page-text-muted); }
.sb-total-amount { font-size:15px; font-weight:900; color:var(--mlm-theme-color); white-space:nowrap; }
.sb-signature { padding:12px 16px 16px; border-top:1px solid rgba(var(--mlm-theme-color-rgb),.06); }
.sb-sig-line { font-size:11px; color:var(--mlm-page-text-muted); margin-bottom:3px; }
.sb-sig-quote { font-size:10.5px; font-style:italic; color:var(--mlm-page-text-muted); opacity:.6; }
.sb-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px; text-align:center; }
.sb-empty i { font-size:36px; color:var(--mlm-page-text-muted); opacity:.3; }
.sb-empty p { margin:0; font-size:13px; color:var(--mlm-page-text-muted); }
.sb-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1050; align-items:flex-end; }
.sb-modal-overlay.open { display:flex; }
.sb-modal { background:var(--mlm-card-bg); border-radius:20px 20px 0 0; padding:20px 16px 32px; width:100%; max-width:500px; margin:0 auto; }
.sb-modal-title { font-size:15px; font-weight:800; color:var(--mlm-page-text); margin-bottom:16px; }
.sb-form-label { display:block; font-size:11px; font-weight:600; color:var(--mlm-page-text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
.sb-form-select {
    width:100%; box-sizing:border-box;
    background:var(--mlm-input-bg); border:1px solid var(--mlm-input-border);
    border-radius:10px; padding:9px 12px; font-size:12px; color:var(--mlm-input-text);
    outline:none; margin-bottom:12px; transition:border-color .18s;
}
.sb-form-select:focus { border-color:var(--mlm-theme-color); }
.sb-modal-actions { display:flex; gap:8px; margin-top:4px; }
.sb-modal-btn { flex:1; padding:10px; border-radius:12px; font-size:12px; font-weight:700; cursor:pointer; border:none; transition:opacity .15s; }
.sb-modal-btn.cancel { background:rgba(var(--mlm-theme-color-rgb),.08); color:var(--mlm-page-text-muted); border:1px solid rgba(var(--mlm-theme-color-rgb),.15); }
.sb-modal-btn.apply { background:var(--mlm-theme-color); color:var(--mlm-theme-text); }
.sb-modal-btn:hover { opacity:.85; }
.sb-download-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:13px; border-radius:14px; font-size:13px; font-weight:700;
    background:var(--mlm-theme-color); color:var(--mlm-theme-text); border:none;
    cursor:pointer; transition:opacity .15s; margin-bottom:16px;
}
.sb-download-btn:hover { opacity:.88; }

/* ── Riwayat Pesanan (rp-*) ── */
.rp-page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.rp-body { flex:1; padding-bottom:80px; }
.rp-search-wrap { position:relative; margin-bottom:12px; }
.rp-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--mlm-page-text-muted); pointer-events:none; }
.rp-search-input {
    width:100%; box-sizing:border-box; background:var(--mlm-input-bg);
    border:1px solid rgba(var(--mlm-theme-color-rgb),.18); border-radius:12px;
    padding:10px 44px 10px 34px; font-size:12px; color:var(--mlm-input-text); outline:none; transition:border-color .18s;
}
.rp-search-input:focus { border-color:var(--mlm-theme-color); }
.rp-search-input::placeholder { color:var(--mlm-page-text-muted); opacity:.5; }
.rp-filter-btn {
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border-radius:8px;
    background:rgba(var(--mlm-theme-color-rgb),.12); border:none;
    color:var(--mlm-theme-color); cursor:pointer; font-size:11px;
    display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.rp-filter-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.22); }
.rp-list { display:flex; flex-direction:column; gap:10px; }
.rp-card {
    background:var(--mlm-card-bg); border:1px solid var(--mlm-card-border);
    border-radius:14px; overflow:hidden; transition:border-color .18s;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.rp-card:hover { border-color:rgba(var(--mlm-theme-color-rgb),.32); }
.rp-card-head {
    display:flex; align-items:center; gap:8px; padding:9px 13px;
    border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.08);
    background:rgba(var(--mlm-theme-color-rgb),.05);
}
.rp-paket-badge {
    display:inline-flex; align-items:center; font-size:9px; font-weight:700;
    padding:2px 8px; border-radius:6px;
    background:rgba(var(--mlm-theme-color-rgb),.15); border:1px solid rgba(var(--mlm-theme-color-rgb),.25);
    color:var(--mlm-theme-color); white-space:nowrap; flex-shrink:0;
}
.rp-stokis-name { font-size:10.5px; font-weight:600; color:var(--mlm-page-text-muted); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-order-date { font-size:10px; font-weight:600; color:var(--mlm-page-text-muted); white-space:nowrap; flex-shrink:0; }
.rp-produk-row {
    display:flex; align-items:center; gap:10px; padding:10px 13px;
    border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.06);
}
.rp-produk-row:last-of-type { border-bottom:none; }
.rp-produk-img { width:52px; height:52px; border-radius:9px; object-fit:cover; flex-shrink:0; background:rgba(var(--mlm-theme-color-rgb),.08); border:1px solid rgba(var(--mlm-theme-color-rgb),.12); }
.rp-produk-info { flex:1; min-width:0; }
.rp-produk-jenis { font-size:9.5px; color:var(--mlm-page-text-muted); text-transform:uppercase; letter-spacing:.04em; }
.rp-produk-nama { font-size:12.5px; font-weight:700; color:var(--mlm-page-text); line-height:1.3; }
.rp-produk-satuan { font-size:10px; color:var(--mlm-page-text-muted); margin-top:1px; }
.rp-produk-right { text-align:right; flex-shrink:0; }
.rp-produk-qty { font-size:10px; color:var(--mlm-page-text-muted); }
.rp-produk-harga { font-size:12px; font-weight:800; color:var(--mlm-theme-color); white-space:nowrap; }
.rp-show-more {
    display:flex; align-items:center; justify-content:center; gap:5px; padding:7px;
    font-size:10.5px; font-weight:600; color:var(--mlm-page-text-muted);
    background:none; border:none; border-top:1px solid rgba(var(--mlm-theme-color-rgb),.06);
    width:100%; cursor:pointer; transition:color .15s;
}
.rp-show-more:hover { color:var(--mlm-theme-color); }
.rp-card-foot {
    display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:9px 13px;
    border-top:1px solid rgba(var(--mlm-theme-color-rgb),.08);
    background:rgba(var(--mlm-theme-color-rgb),.03);
}
.rp-total-label { font-size:10.5px; color:var(--mlm-page-text-muted); }
.rp-total-val { font-size:13px; font-weight:900; color:var(--mlm-theme-color); }
.rp-load-more { padding:12px 0 4px; text-align:center; }
.rp-load-btn {
    display:inline-flex; align-items:center; gap:6px; padding:9px 22px; border-radius:12px;
    font-size:12px; font-weight:700;
    background:rgba(var(--mlm-theme-color-rgb),.1); border:1px solid rgba(var(--mlm-theme-color-rgb),.2);
    color:var(--mlm-theme-color); cursor:pointer; transition:background .15s;
}
.rp-load-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.2); }
.rp-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px; text-align:center; }
.rp-empty i { font-size:36px; color:var(--mlm-page-text-muted); opacity:.3; }
.rp-empty p { margin:0; font-size:13px; color:var(--mlm-page-text-muted); }
.rp-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1050; align-items:flex-end; }
.rp-modal-overlay.open { display:flex; }
.rp-modal { background:var(--mlm-card-bg); border-radius:20px 20px 0 0; padding:20px 16px 32px; width:100%; max-width:500px; margin:0 auto; }
.rp-modal-title { font-size:15px; font-weight:800; color:var(--mlm-page-text); margin-bottom:16px; }
.rp-form-label { font-size:11px; font-weight:600; color:var(--mlm-page-text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; display:block; }
.rp-date-row { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.rp-date-input {
    flex:1; background:var(--mlm-input-bg); border:1px solid rgba(var(--mlm-theme-color-rgb),.2);
    border-radius:10px; padding:9px 12px; font-size:12px; color:var(--mlm-input-text);
    outline:none; transition:border-color .18s;
}
.rp-date-input:focus { border-color:var(--mlm-theme-color); }
.rp-date-sep { font-size:11px; color:var(--mlm-page-text-muted); flex-shrink:0; }
.rp-modal-actions { display:flex; gap:8px; margin-top:4px; }
.rp-modal-btn { flex:1; padding:10px; border-radius:12px; font-size:12px; font-weight:700; cursor:pointer; border:none; transition:opacity .15s; }
.rp-modal-btn.cancel { background:rgba(var(--mlm-theme-color-rgb),.08); color:var(--mlm-page-text-muted); border:1px solid rgba(var(--mlm-theme-color-rgb),.15); }
.rp-modal-btn.apply { background:var(--mlm-theme-color); color:var(--mlm-theme-text); }
.rp-modal-btn:hover { opacity:.85; }

/* ================================================================
   15A. POHON JARINGAN BINARY (pj-*)
   ================================================================ */

/* Page wrap — sama seperti home */
.pj-page-wrap { display:flex; flex-direction:column; min-height:100vh; background:var(--mlm-page-bg); }
.pj-content { padding-top:0px; padding-bottom:80px; }

/* Search bar */
.pj-search-bar { padding:12px 0 4px; }
.pj-search-inner { display:flex; align-items:center; gap:8px; }
.pj-search-back-btn {
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(var(--mlm-theme-color-rgb,201,162,39),.1);
    color:var(--mlm-theme-color); font-size:13px; text-decoration:none;
    border:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2);
    transition:background .18s;
}
.pj-search-back-btn:hover { background:rgba(var(--mlm-theme-color-rgb,201,162,39),.2); color:var(--mlm-theme-color); }
.pj-search-wrap { flex:1; position:relative; }
.pj-search-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--mlm-page-text-muted); pointer-events:none; }
.pj-search-input {
    width:100%; box-sizing:border-box; height:38px;
    background:var(--mlm-input-bg); border:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2);
    border-radius:10px; padding:0 36px 0 32px; font-size:12px; color:var(--mlm-input-text);
    outline:none; transition:border-color .18s;
}
.pj-search-input:focus { border-color:var(--mlm-theme-color); }
.pj-search-input::placeholder { color:var(--mlm-page-text-muted); opacity:.5; }
.pj-search-submit {
    position:absolute; right:5px; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border-radius:8px; border:none; cursor:pointer;
    background:rgba(var(--mlm-theme-color-rgb,201,162,39),.15); color:var(--mlm-theme-color);
    font-size:11px; display:flex; align-items:center; justify-content:center;
    transition:background .15s;
}
.pj-search-submit:hover { background:rgba(var(--mlm-theme-color-rgb,201,162,39),.28); }
.pj-search-action-btn {
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(var(--mlm-theme-color-rgb,201,162,39),.1);
    color:var(--mlm-theme-color); font-size:13px; text-decoration:none;
    border:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2);
    transition:background .18s;
}
.pj-search-action-btn:hover { background:rgba(var(--mlm-theme-color-rgb,201,162,39),.22); color:var(--mlm-theme-color); }
.pj-reset-btn { color:var(--mlm-page-text-muted); }

/* Tree container */
.pj-tree-wrap { overflow-x:auto; padding:8px 0 12px; -webkit-overflow-scrolling:touch; }
.pj-tree-scroll { display:inline-block; min-width:100%; }

/* Tree connector lines */
.pj-tree { display:block; padding:0; margin:0; }
.pj-tree ul { display:flex; justify-content:space-around; padding:20px 0; position:relative; width:100%; margin:0; }
.pj-tree li { text-align:center; list-style-type:none; position:relative; padding:20px 5px; }
.pj-tree ul li { width:50%; }
.pj-tree li::before, .pj-tree li::after { content:''; position:absolute; top:0; right:50%; border-top:2px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.25); width:50%; height:20px; }
.pj-tree li::after { right:auto; left:50%; border-left:2px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.25); }
.pj-tree li:only-child::after, .pj-tree li:only-child::before { display:none; }
.pj-tree li:only-child { padding-top:0; }
.pj-tree li:first-child::before, .pj-tree li:last-child::after { border:0 none; }
.pj-tree li:last-child::before { border-right:2px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.25); border-radius:0 5px 0 0; }
.pj-tree li:first-child::after { border-radius:5px 0 0 0; }
.pj-tree ul::before { content:''; position:absolute; top:0; left:50%; border-left:2px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.25); width:0; height:20px; }

/* Member node card */
.pj-node { display:inline-flex; flex-direction:column; align-items:center; width:110px; border-radius:14px; overflow:hidden; cursor:pointer; transition:transform .18s, box-shadow .18s; }
.pj-node-member {
    background:var(--mlm-card-bg); border:1.5px solid var(--mlm-card-border);
    box-shadow:0 3px 12px rgba(0,0,0,.12);
}
.pj-node-member:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.18); border-color:rgba(var(--mlm-theme-color-rgb,201,162,39),.4); }

/* Plan badge */
.pj-node-plan-badge {
    width:100%; padding:3px 6px; font-size:9px; font-weight:800; letter-spacing:.04em;
    text-align:center; text-transform:uppercase; line-height:1.4;
    background:rgba(var(--mlm-theme-color-rgb,201,162,39),.15); color:var(--mlm-theme-color);
}
/* bg-color plan overrides */
.pj-node-plan-badge.bg-basic,    .bg-basic    .pj-node-plan-badge { background:rgba(180,190,215,.15); color:#a0b0d0; }
.pj-node-plan-badge.bg-bronze,   .bg-bronze   .pj-node-plan-badge { background:rgba(180,110,60,.2);   color:#d4956a; }
.pj-node-plan-badge.bg-gold,     .bg-gold     .pj-node-plan-badge { background:rgba(200,160,30,.2);   color:#e8c84a; }
.pj-node-plan-badge.bg-diamond,  .bg-diamond  .pj-node-plan-badge { background:rgba(190,215,245,.15); color:#b8d8f8; }
.pj-node-plan-badge.bg-platinum, .bg-platinum .pj-node-plan-badge { background:rgba(170,185,215,.15); color:#c8cede; }
.pj-node-plan-badge.bg-blue,     .bg-blue     .pj-node-plan-badge { background:rgba(59,130,246,.2);   color:#3b82f6; }
.pj-node-plan-badge.bg-green,    .bg-green    .pj-node-plan-badge { background:rgba(34,197,94,.2);    color:#22c55e; }
.pj-node-plan-badge.bg-purple,   .bg-purple   .pj-node-plan-badge { background:rgba(168,85,247,.2);   color:#a855f7; }
.pj-node-plan-badge.bg-red,      .bg-red      .pj-node-plan-badge { background:rgba(239,68,68,.2);    color:#ef4444; }
.pj-node-plan-badge.bg-default { background:rgba(var(--mlm-theme-color-rgb,201,162,39),.15); color:var(--mlm-theme-color); }

/* Plan image */
.pj-node-img-wrap { width:54px; height:54px; margin:8px auto 4px; display:flex; align-items:center; justify-content:center; }
.pj-node-plan-img { width:100%; height:100%; object-fit:contain; }
.pj-node-plan-fallback { width:46px; height:46px; border-radius:50%; background:rgba(var(--mlm-theme-color-rgb,201,162,39),.15); color:var(--mlm-theme-color); font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; }

/* Node body text */
.pj-node-body { width:100%; padding:0 6px 8px; }
.pj-node-name { font-size:10.5px; font-weight:700; color:var(--mlm-page-text); line-height:1.3; word-break:break-word; }
.pj-node-id { font-size:9px; color:var(--mlm-page-text-muted); margin-top:1px; }
.pj-node-counts { display:flex; justify-content:space-between; margin-top:5px; gap:4px; }
.pj-kiri-count, .pj-kanan-count { font-size:9.5px; font-weight:700; color:var(--mlm-theme-color); display:flex; align-items:center; gap:2px; }
.pj-kiri-count i, .pj-kanan-count i { font-size:7px; opacity:.7; }
.pj-node-detail-hint { font-size:8.5px; color:var(--mlm-page-text-muted); margin-top:4px; display:flex; align-items:center; justify-content:center; gap:3px; opacity:.6; }

/* Empty slot */
.pj-node-empty { width:110px; border-radius:14px; border:2px dashed rgba(var(--mlm-theme-color-rgb,201,162,39),.2); background:rgba(var(--mlm-theme-color-rgb,201,162,39),.04); transition:border-color .18s; }
.pj-node-empty:hover { border-color:rgba(var(--mlm-theme-color-rgb,201,162,39),.45); }
.pj-empty-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:18px 8px; text-decoration:none; }
.pj-empty-icon { font-size:18px; color:rgba(var(--mlm-theme-color-rgb,201,162,39),.3); }
.pj-empty-label { font-size:9.5px; font-weight:700; color:var(--mlm-page-text-muted); letter-spacing:.03em; }
.pj-slot-locked .pj-empty-icon { color:rgba(var(--mlm-theme-color-rgb,201,162,39),.2); }
.pj-slot-join .pj-empty-icon { color:rgba(34,197,94,.5); }
.pj-slot-join .pj-empty-label { color:#22c55e; }
.pj-slot-join { border-color:rgba(34,197,94,.3); }
.pj-slot-join:hover { border-color:rgba(34,197,94,.6); }

/* Popup overlay & center modal */
.pj-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1040; opacity:0; pointer-events:none; transition:opacity .25s; backdrop-filter:blur(3px); }
.pj-overlay-open { opacity:1; pointer-events:all; }
.pj-popup {
    position:fixed; top:50%; left:50%; z-index:1050;
    transform:translate(-50%,-50%) scale(.94);
    width:min(460px, calc(100vw - 32px));
    background:var(--mlm-page-bg-2); border-radius:20px;
    border:1px solid var(--mlm-card-border);
    padding:0 0 4px;
    max-height:88vh; overflow-y:auto;
    opacity:0; pointer-events:none;
    transition:transform .25s cubic-bezier(.4,0,.2,1), opacity .25s;
    box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.pj-popup-open { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:all; }
.pj-popup-drag { display:none; }
.pj-popup-close {
    position:absolute; top:12px; right:14px; width:28px; height:28px; border-radius:50%;
    border:none; background:rgba(255,255,255,.08); color:var(--mlm-page-text-muted);
    display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer;
    transition:background .15s; z-index:1;
}
.pj-popup-close:hover { background:rgba(255,255,255,.15); }
.pj-popup-body { padding:4px 0 12px; }

/* Popup header strip — solid plan color */
.pj-ph-header {
    display:flex; align-items:center; gap:12px;
    padding:16px; border-radius:18px 18px 0 0;
    background:linear-gradient(135deg, rgba(var(--mlm-theme-color-rgb,201,162,39),.22) 0%, rgba(var(--mlm-theme-color-rgb,201,162,39),.08) 100%);
    border-bottom:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.15);
}
.pj-ph-header.bg-basic    { background:linear-gradient(135deg,rgba(180,190,215,.2) 0%,rgba(160,175,210,.06) 100%); border-bottom-color:rgba(160,175,210,.25); }
.pj-ph-header.bg-bronze   { background:linear-gradient(135deg,rgba(180,110,60,.25) 0%,rgba(180,110,60,.07) 100%); border-bottom-color:rgba(180,110,60,.3); }
.pj-ph-header.bg-gold     { background:linear-gradient(135deg,rgba(200,160,30,.28) 0%,rgba(200,160,30,.08) 100%); border-bottom-color:rgba(200,160,30,.3); }
.pj-ph-header.bg-diamond  { background:linear-gradient(135deg,rgba(190,215,245,.22) 0%,rgba(190,215,245,.06) 100%); border-bottom-color:rgba(190,215,245,.25); }
.pj-ph-header.bg-platinum { background:linear-gradient(135deg,rgba(170,185,215,.22) 0%,rgba(170,185,215,.06) 100%); border-bottom-color:rgba(170,185,215,.25); }
.pj-ph-header.bg-blue     { background:linear-gradient(135deg,rgba(59,130,246,.28) 0%,rgba(59,130,246,.08) 100%); border-bottom-color:rgba(59,130,246,.2); }
.pj-ph-header.bg-green    { background:linear-gradient(135deg,rgba(34,197,94,.28) 0%,rgba(34,197,94,.08) 100%); border-bottom-color:rgba(34,197,94,.2); }
.pj-ph-header.bg-purple{ background:linear-gradient(135deg,rgba(168,85,247,.28) 0%,rgba(168,85,247,.08) 100%); border-bottom-color:rgba(168,85,247,.2); }
.pj-ph-header.bg-red   { background:linear-gradient(135deg,rgba(239,68,68,.28) 0%,rgba(239,68,68,.08) 100%); border-bottom-color:rgba(239,68,68,.2); }
.pj-ph-img-wrap { width:54px; height:54px; flex-shrink:0; border-radius:13px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.pj-ph-img { width:100%; height:100%; object-fit:contain; }
.pj-ph-img-fb { width:54px; height:54px; border-radius:13px; background:rgba(var(--mlm-theme-color-rgb,201,162,39),.2); color:var(--mlm-theme-color); font-size:18px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.pj-ph-info { flex:1; min-width:0; }
.pj-ph-name { font-size:16px; font-weight:800; color:var(--mlm-page-text); line-height:1.2; }
.pj-ph-id { font-size:11px; color:var(--mlm-page-text-muted); margin-top:3px; }
.pj-ph-meta { font-size:10px; color:var(--mlm-page-text-muted); margin-top:5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pj-badge-a { background:rgba(34,197,94,.18); color:#22c55e; padding:2px 8px; border-radius:20px; font-size:9px; font-weight:700; border:1px solid rgba(34,197,94,.25); }
.pj-badge-r { background:rgba(239,68,68,.15); color:#f87171; padding:2px 8px; border-radius:20px; font-size:9px; font-weight:700; border:1px solid rgba(239,68,68,.2); }

/* Kiri/Kanan bar — 3 kolom simetris */
.pj-ph-bar {
    display:grid; grid-template-columns:1fr 1px 1fr 1px 1fr;
    align-items:center; padding:12px 16px;
    border-bottom:1px solid var(--mlm-card-border);
    background:rgba(var(--mlm-theme-color-rgb,201,162,39),.03);
}
.pj-ph-bar-col { display:flex; flex-direction:column; align-items:center; gap:3px; padding:2px 0; }
.pj-ph-bar-kiri { align-items:flex-start; padding-left:4px; }
.pj-ph-bar-kanan { align-items:flex-end; padding-right:4px; }
.pj-ph-bar-div { width:1px; height:32px; background:var(--mlm-card-border); justify-self:center; }
.pj-ph-bar-val { font-size:17px; font-weight:800; color:var(--mlm-theme-color); line-height:1; }
.pj-ph-bar-kiri .pj-ph-bar-val { color:#60a5fa; }
.pj-ph-bar-kanan .pj-ph-bar-val { color:#f87171; }
.pj-ph-bar-lbl { font-size:9.5px; color:var(--mlm-page-text-muted); display:flex; align-items:center; gap:3px; }

/* Nav buttons (upline / kiri / kanan) */
.pj-ph-nav { display:flex; gap:8px; padding:10px 16px 4px; flex-wrap:wrap; }
.pj-ph-nav-btn { flex:1; min-width:70px; display:flex; align-items:center; justify-content:center; gap:5px; padding:8px 10px; border-radius:10px; font-size:11px; font-weight:700; cursor:pointer; border:none; background:var(--mlm-card-bg2,rgba(0,0,0,.06)); color:var(--mlm-page-text); transition:opacity .15s; }
.pj-ph-nav-btn:active { opacity:.7; }
.pj-ph-nav-kiri  { background:rgba(59,130,246,.12); color:#3b82f6; }
.pj-ph-nav-kanan { background:rgba(239,68,68,.12);  color:#ef4444; }

/* Loading state */
.pj-ph-loading { display:flex; align-items:center; justify-content:center; padding:48px 16px; font-size:14px; color:var(--mlm-page-text-muted); gap:10px; }

/* RO info */
.pj-ph-ro { padding:8px 16px; font-size:11px; font-weight:600; display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--mlm-card-border); }
.pj-ph-ro-ok { color:#22c55e; }
.pj-ph-ro-none { color:var(--mlm-page-text-muted); }

/* Poin section */
.pj-ph-poin-wrap { padding:0; }
.pj-ph-poin-row {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    grid-template-rows:auto auto;
    border-bottom:1px solid var(--mlm-card-border);
}
.pj-ph-poin-row:last-child { border-bottom:none; }
.pj-ph-poin-label {
    grid-column:1/-1; grid-row:1;
    font-size:9px; font-weight:700; letter-spacing:.06em;
    color:var(--mlm-theme-color); text-transform:uppercase; text-align:center;
    background:rgba(var(--mlm-theme-color-rgb,201,162,39),.08);
    padding:5px 16px;
    border-bottom:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.1);
}
.pj-ph-poin-side {
    grid-row:2;
    display:flex; flex-direction:column; gap:1px;
    padding:9px 14px;
}
.pj-ph-poin-kiri { align-items:flex-end; }
.pj-ph-poin-kanan { align-items:flex-start; }
.pj-ph-poin-divider { grid-row:2; width:1px; height:34px; background:var(--mlm-card-border); align-self:center; }
.pj-ph-poin-num { font-size:18px; font-weight:800; line-height:1; }
.pj-ph-poin-kiri .pj-ph-poin-num { color:#60a5fa; }
.pj-ph-poin-kanan .pj-ph-poin-num { color:#f87171; }
.pj-ph-poin-tag { font-size:9px; display:flex; align-items:center; gap:2px; margin-top:2px; }
.pj-ph-poin-kiri .pj-ph-poin-tag { color:rgba(96,165,250,.7); }
.pj-ph-poin-kanan .pj-ph-poin-tag { color:rgba(248,113,113,.65); }

/* Actions */
.pj-ph-actions { display:flex; gap:8px; padding:12px 16px 4px; }
.pj-ph-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 14px; border-radius:12px; font-size:11px; font-weight:700; text-decoration:none; transition:opacity .18s, box-shadow .18s; }
.pj-ph-btn-primary { background:var(--mlm-theme-color); color:var(--mlm-theme-text,#000); box-shadow:0 4px 12px rgba(var(--mlm-theme-color-rgb,201,162,39),.3); }
.pj-ph-btn-primary:hover { opacity:.88; color:var(--mlm-theme-text,#000); }
.pj-ph-btn-outline { background:rgba(var(--mlm-theme-color-rgb,201,162,39),.1); color:var(--mlm-theme-color); border:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.25); }
.pj-ph-btn-outline:hover { background:rgba(var(--mlm-theme-color-rgb,201,162,39),.2); color:var(--mlm-theme-color); }

/* Light mode overrides */
body.theme-gold-light .pj-node-member,
body.theme-blue-light .pj-node-member,
body.theme-green-light .pj-node-member,
body.theme-purple-light .pj-node-member,
body.theme-red-light .pj-node-member { box-shadow:0 2px 10px rgba(0,0,0,.08); }
body.theme-gold-light .pj-popup,
body.theme-blue-light .pj-popup,
body.theme-green-light .pj-popup,
body.theme-purple-light .pj-popup,
body.theme-red-light .pj-popup { box-shadow:0 -4px 24px rgba(0,0,0,.12); }

/* ================================================================
   15. GENEALOGY / JARINGAN (gs-*)
   ================================================================ */
.gs-page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.gs-body { flex:1; padding-bottom:80px; }

.gs-stats {
    display:flex; background:var(--mlm-card-bg);
    border:1px solid var(--mlm-card-border);
    border-radius:16px; margin-bottom:14px; overflow:hidden;
    box-shadow:0 4px 16px rgba(0,0,0,.05);
}
.gs-stat-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:13px 8px; text-align:center; }
.gs-stat-icon { font-size:13px; color:rgba(var(--mlm-theme-color-rgb),.45); margin-bottom:1px; }
.gs-stat-val { font-size:16px; font-weight:900; color:var(--mlm-theme-color); line-height:1; }
.gs-stat-label { font-size:9px; font-weight:600; color:var(--mlm-page-text-muted); text-transform:uppercase; letter-spacing:.04em; line-height:1.3; }
.gs-stat-divider { width:1px; background:rgba(var(--mlm-theme-color-rgb),.1); align-self:stretch; flex-shrink:0; }

.gs-search-wrap { position:relative; margin-bottom:12px; }
.gs-search-wrap input {
    width:100%; box-sizing:border-box; background:var(--mlm-input-bg);
    border:1px solid rgba(var(--mlm-theme-color-rgb),.18); border-radius:12px;
    padding:10px 80px 10px 36px; font-size:12px; color:var(--mlm-input-text);
    outline:none; transition:border-color .18s;
}
.gs-search-wrap input:focus { border-color:var(--mlm-theme-color); }
.gs-search-wrap input::placeholder { color:var(--mlm-page-text-muted); opacity:.5; }
.gs-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--mlm-page-text-muted); pointer-events:none; }
.gs-search-actions { position:absolute; right:6px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:4px; }
.gs-search-btn, .gs-reset-btn { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; border:none; cursor:pointer; font-size:11px; transition:background .15s; }
.gs-search-btn { background:rgba(var(--mlm-theme-color-rgb),.15); color:var(--mlm-theme-color); }
.gs-search-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.28); }
.gs-reset-btn { background:rgba(var(--mlm-theme-color-rgb),.08); color:var(--mlm-page-text-muted); }
.gs-reset-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.15); }

.gs-search-info { display:none; font-size:11px; padding:7px 12px; border-radius:9px; margin-bottom:10px; font-weight:600; }
.gs-search-info.found { background:rgba(61,186,120,.12); color:#3dba78; border:1px solid rgba(61,186,120,.2); }
.gs-search-info.not-found { background:rgba(239,68,68,.1); color:#f87171; border:1px solid rgba(239,68,68,.18); }

.gs-node {
    background:var(--mlm-card-bg); border:1px solid var(--mlm-card-border);
    border-radius:14px; margin-bottom:6px; overflow:hidden; cursor:pointer;
    transition:border-color .18s, box-shadow .18s; user-select:none;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.gs-node:hover { border-color:rgba(var(--mlm-theme-color-rgb),.35); }
.gs-node.expanded { border-color:rgba(var(--mlm-theme-color-rgb),.55); box-shadow:0 0 0 1px rgba(var(--mlm-theme-color-rgb),.1); }
.gs-node.gs-highlight { border-color:#f59e0b !important; box-shadow:0 0 0 2px rgba(245,158,11,.2) !important; animation:gs-pulse 1.2s ease 3; }
@keyframes gs-pulse { 0%,100% { box-shadow:0 0 0 2px rgba(245,158,11,.2); } 50% { box-shadow:0 0 0 6px rgba(245,158,11,.07); } }
.gs-node-inner { display:flex; align-items:center; gap:10px; padding:11px 13px; }

.gs-avatar {
    width:34px; height:34px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900;
    background:rgba(var(--mlm-theme-color-rgb),.12); border:1px solid rgba(var(--mlm-theme-color-rgb),.2);
    color:var(--mlm-theme-color); transition:background .15s;
}
.gs-avatar-root { background:var(--mlm-theme-color); border-color:var(--mlm-theme-color); color:var(--mlm-theme-text); font-size:15px; }
.gs-node.expanded > .gs-node-inner .gs-avatar { background:rgba(var(--mlm-theme-color-rgb),.22); }

.gs-mid { flex:1; min-width:0; }
.gs-id { font-size:10.5px; font-weight:700; color:var(--mlm-page-text-muted); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }
.gs-plan { display:inline-block; font-size:9px; font-weight:700; padding:1px 6px; border-radius:5px; background:rgba(var(--mlm-theme-color-rgb),.12); color:var(--mlm-theme-color); margin-left:4px; vertical-align:middle; }
.gs-name { font-size:13px; font-weight:800; color:var(--mlm-page-text); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }
.gs-ro-active .gs-ro, .gs-ro-last .gs-ro, .gs-ro-none .gs-ro { display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:700; padding:2px 7px; border-radius:6px; }
.gs-ro-active .gs-ro { background:rgba(61,186,120,.12); color:#3dba78; border:1px solid rgba(61,186,120,.2); }
.gs-ro-last .gs-ro  { background:rgba(245,158,11,.1); color:#f59e0b; border:1px solid rgba(245,158,11,.18); }
.gs-ro-none .gs-ro  { background:rgba(var(--mlm-theme-color-rgb),.07); color:var(--mlm-page-text-muted); border:1px solid rgba(var(--mlm-theme-color-rgb),.1); }
.gs-right { text-align:right; flex-shrink:0; }
.gs-date { font-size:9px; color:var(--mlm-page-text-muted); white-space:nowrap; margin:0 0 3px; }
.gs-spon { font-size:9.5px; color:var(--mlm-page-text-muted); white-space:nowrap; margin:0; }
.gs-spon b { color:var(--mlm-theme-color); }
.gs-chevron { flex-shrink:0; font-size:9px; color:var(--mlm-page-text-muted); transition:transform .22s; opacity:.5; }
.gs-node.expanded > .gs-node-inner .gs-chevron { transform:rotate(90deg); color:var(--mlm-theme-color); opacity:1; }

.gs-root-node {
    background:linear-gradient(135deg, rgba(var(--mlm-theme-color-rgb),.14), rgba(var(--mlm-theme-color-rgb),.04));
    border-color:rgba(var(--mlm-theme-color-rgb),.4); cursor:default; margin-bottom:10px;
    box-shadow:0 4px 20px rgba(var(--mlm-theme-color-rgb),.08);
}
.gs-root-node .gs-name { color:var(--mlm-theme-color); font-size:14px; }
.gs-root-since { font-size:9.5px; color:var(--mlm-page-text-muted); margin:1px 0 0; }
.gs-root-badge {
    display:inline-flex; align-items:center; gap:4px; font-size:9px; font-weight:800;
    padding:4px 9px; border-radius:8px;
    background:rgba(var(--mlm-theme-color-rgb),.13); border:1px solid rgba(var(--mlm-theme-color-rgb),.28);
    color:var(--mlm-theme-color); white-space:nowrap; flex-shrink:0; letter-spacing:.03em;
}

.gs-children { display:none; padding:0 0 4px 28px; }
.gs-children.open { display:block; }
.gs-child-item { position:relative; padding-top:6px; }
.gs-child-item::before {
    content:''; position:absolute; top:0; left:-14px;
    width:14px; height:26px;
    border-left:2px solid rgba(var(--mlm-theme-color-rgb),.18);
    border-bottom:2px solid rgba(var(--mlm-theme-color-rgb),.18);
    border-radius:0 0 0 6px;
}
.gs-loading { padding:12px 14px 12px 0; font-size:11px; color:var(--mlm-page-text-muted); display:flex; align-items:center; gap:8px; }
@keyframes gs-spin { to { transform:rotate(360deg); } }
.gs-spinner { width:14px; height:14px; flex-shrink:0; border:2px solid rgba(var(--mlm-theme-color-rgb),.18); border-top-color:var(--mlm-theme-color); border-radius:50%; animation:gs-spin .7s linear infinite; }
.gs-empty { padding:28px 0 20px; text-align:center; color:var(--mlm-page-text-muted); font-size:12px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.gs-empty i { font-size:22px; opacity:.35; }
.gs-empty p { margin:0; }

/* ================================================================
   16. PENARIKAN & TOPUP (wd-*, ts-*)
   ================================================================ */

/* ── Penarikan (wd-*) ── */
.wd-page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.wd-body { flex:1; padding-bottom:90px; }

.wd-amount-wrap { text-align:center; padding:28px 16px 16px; }
.wd-amount-input {
    background:none; border:none; border-bottom:2px solid rgba(var(--mlm-theme-color-rgb),.3);
    outline:none; font-size:2.4rem; font-weight:900; color:var(--mlm-theme-color);
    text-align:center; width:100%; max-width:280px; padding:4px 0; transition:border-color .18s;
}
.wd-amount-input:focus { border-bottom-color:var(--mlm-theme-color); }
.wd-amount-error { min-height:20px; margin-top:6px; font-size:12px; color:#ef4444; font-weight:600; }

.wd-breakdown { margin:4px 0 12px; border-radius:14px; overflow:hidden; border:1px solid var(--mlm-card-border); box-shadow:0 2px 8px rgba(0,0,0,.04); }
.wd-row { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.07); font-size:12.5px; }
.wd-row:last-child { border-bottom:none; }
.wd-row-label { color:var(--mlm-page-text-muted); }
.wd-row-val { font-weight:700; color:var(--mlm-page-text); }
.wd-row.total { background:rgba(var(--mlm-theme-color-rgb),.05); }
.wd-row.total .wd-row-label { font-weight:700; }
.wd-row.total .wd-row-val { font-size:14px; font-weight:900; color:var(--mlm-theme-color); }

.wd-bank-card {
    background:var(--mlm-card-bg); border:1px solid rgba(var(--mlm-theme-color-rgb),.16);
    border-radius:14px; padding:14px; display:flex; align-items:center; gap:12px;
    margin-bottom:16px; transition:border-color .18s;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.wd-bank-icon {
    width:40px; height:40px; border-radius:11px; flex-shrink:0;
    background:rgba(var(--mlm-theme-color-rgb),.1); border:1px solid rgba(var(--mlm-theme-color-rgb),.18);
    display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--mlm-theme-color);
}
.wd-bank-mid { flex:1; min-width:0; }
.wd-bank-name { font-size:11px; color:var(--mlm-page-text-muted); text-transform:uppercase; letter-spacing:.04em; }
.wd-bank-rekening { font-size:14px; font-weight:800; color:var(--mlm-page-text); margin-top:1px; }
.wd-bank-atas-nama { font-size:11px; color:var(--mlm-page-text-muted); margin-top:1px; }
.wd-bank-arrow { font-size:11px; color:var(--mlm-page-text-muted); flex-shrink:0; opacity:.5; }
.wd-bank-amount { font-size:13px; font-weight:900; color:var(--mlm-theme-color); white-space:nowrap; flex-shrink:0; }

.wd-submit-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:14px; border-radius:14px; font-size:14px; font-weight:800;
    background:var(--mlm-theme-color); color:var(--mlm-theme-text); border:none;
    cursor:pointer; transition:opacity .15s; margin-bottom:16px;
}
.wd-submit-btn:hover { opacity:.88; }

.wd-no-bank { background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.18); border-radius:14px; padding:20px 16px; text-align:center; margin-bottom:16px; }
.wd-no-bank-title { font-size:13px; font-weight:700; color:#f59e0b; margin-bottom:6px; }
.wd-no-bank-text { font-size:12px; color:var(--mlm-page-text-muted); margin-bottom:14px; }
.wd-no-bank-link {
    display:inline-flex; align-items:center; gap:6px; padding:9px 20px; border-radius:10px;
    background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.22); color:#f59e0b;
    font-size:12px; font-weight:700; text-decoration:none; transition:background .15s;
}
.wd-no-bank-link:hover { background:rgba(245,158,11,.2); color:#f59e0b; text-decoration:none; }

.wd-pin-wrap { display:none; padding:20px 0 0; text-align:center; }
.wd-pin-title { font-size:16px; font-weight:800; color:var(--mlm-page-text); margin-bottom:6px; }
.wd-pin-subtitle { font-size:12px; color:var(--mlm-page-text-muted); margin-bottom:20px; }
.wd-pin-input {
    width:160px; background:var(--mlm-input-bg); border:1px solid rgba(var(--mlm-theme-color-rgb),.25);
    border-radius:12px; padding:12px; font-size:18px; font-weight:700; color:var(--mlm-input-text);
    text-align:center; letter-spacing:.2em; outline:none; margin:0 auto 16px; display:block; transition:border-color .18s;
}
.wd-pin-input:focus { border-color:var(--mlm-theme-color); }
.wd-pin-error { font-size:12px; color:#ef4444; margin-bottom:12px; min-height:18px; }

/* ── Topup Saldo (ts-*) ── */
.ts-page-wrap, .rts-page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.ts-body { flex:1; padding-bottom:90px; }

.ts-card {
    background:var(--mlm-card-bg); border:1px solid var(--mlm-card-border);
    border-radius:16px; overflow:hidden; margin-bottom:14px;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.ts-card-head {
    padding:12px 16px; background:rgba(var(--mlm-theme-color-rgb),.06);
    border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.1);
    font-size:13px; font-weight:700; color:var(--mlm-page-text);
    display:flex; align-items:center; gap:8px;
}
.ts-card-head i { color:var(--mlm-theme-color); }
.ts-card-body { padding:16px; }
.ts-field { margin-bottom:14px; }
.ts-label { display:block; font-size:11px; font-weight:600; color:var(--mlm-page-text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
.ts-input, .ts-select {
    width:100%; box-sizing:border-box;
    background:var(--mlm-input-bg); border:1px solid var(--mlm-input-border);
    border-radius:10px; padding:11px 14px; font-size:13px; color:var(--mlm-input-text); outline:none; transition:border-color .18s;
}
.ts-input:focus, .ts-select:focus { border-color:var(--mlm-theme-color); }
.ts-input::placeholder { color:var(--mlm-page-text-muted); opacity:.4; }
.ts-actions { display:flex; gap:10px; margin-top:6px; }
.ts-btn-cancel {
    flex:1; padding:12px; border-radius:12px; font-size:13px; font-weight:700; cursor:pointer;
    background:none; border:1px solid rgba(var(--mlm-theme-color-rgb),.2);
    color:var(--mlm-page-text-muted); transition:background .15s; text-decoration:none;
    display:flex; align-items:center; justify-content:center;
}
.ts-btn-cancel:hover { background:rgba(var(--mlm-theme-color-rgb),.08); text-decoration:none; }
.ts-btn-submit {
    flex:2; padding:12px; border-radius:12px; font-size:13px; font-weight:700; cursor:pointer;
    background:var(--mlm-theme-color); color:var(--mlm-theme-text); border:none; transition:opacity .15s;
    display:flex; align-items:center; justify-content:center; gap:7px;
}
.ts-btn-submit:hover { opacity:.88; }
.ts-detail { padding:4px 0; }
.ts-detail-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.06); font-size:12.5px; }
.ts-detail-row:last-child { border-bottom:none; }
.ts-detail-label { color:var(--mlm-page-text-muted); }
.ts-detail-val { font-weight:700; color:var(--mlm-page-text); }
.ts-detail-val.highlight { color:var(--mlm-theme-color); font-size:14px; font-weight:900; }
.ts-pin-wrap { display:none; text-align:center; padding-top:20px; }
.ts-pin-title { font-size:15px; font-weight:800; color:var(--mlm-page-text); margin-bottom:5px; }
.ts-pin-sub { font-size:12px; color:var(--mlm-page-text-muted); margin-bottom:18px; }
.ts-pin-input {
    width:160px; background:var(--mlm-input-bg); border:1px solid rgba(var(--mlm-theme-color-rgb),.25);
    border-radius:12px; padding:12px; font-size:18px; font-weight:700; color:var(--mlm-input-text);
    text-align:center; letter-spacing:.2em; outline:none; margin:0 auto 14px; display:block; transition:border-color .18s;
}
.ts-pin-input:focus { border-color:var(--mlm-theme-color); }
.ts-pin-error { font-size:12px; color:#ef4444; min-height:18px; margin-bottom:12px; }

/* ================================================================
   17. KLAIM REWARD (kr-*)
   ================================================================ */
.kr-page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.kr-body { flex:1; padding-bottom:90px; }

.kr-lock-banner {
    background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.18);
    border-radius:14px; padding:16px; display:flex; align-items:center; gap:14px; margin-bottom:14px;
}
.kr-lock-icon {
    width:46px; height:46px; border-radius:50%;
    background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.25);
    display:flex; align-items:center; justify-content:center; font-size:18px; color:#f87171; flex-shrink:0;
}
.kr-lock-text { flex:1; }
.kr-lock-text h6 { margin:0 0 4px; font-size:13px; font-weight:700; color:#f87171; }
.kr-lock-text p  { margin:0 0 10px; font-size:11px; color:var(--mlm-page-text-muted); line-height:1.5; }
.kr-lock-btn {
    display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:20px;
    background:rgba(239,68,68,.12); color:#f87171;
    font-size:11px; font-weight:700; text-decoration:none;
    border:1px solid rgba(239,68,68,.2); transition:background .15s;
}
.kr-lock-btn:hover { background:rgba(239,68,68,.2); color:#f87171; text-decoration:none; }

.kr-card {
    background:var(--mlm-card-bg); border:1px solid var(--mlm-card-border);
    border-radius:14px; overflow:hidden; margin-bottom:12px; transition:border-color .18s;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.kr-card:hover { border-color:rgba(var(--mlm-theme-color-rgb),.3); }
.kr-card-header {
    background:rgba(var(--mlm-theme-color-rgb),.08); border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.1);
    padding:11px 14px; display:flex; align-items:center; gap:10px;
}
.kr-card-num {
    width:26px; height:26px; border-radius:50%; flex-shrink:0;
    background:rgba(var(--mlm-theme-color-rgb),.18);
    display:flex; align-items:center; justify-content:center;
    color:var(--mlm-theme-color); font-size:11px; font-weight:700;
}
.kr-card-title { color:var(--mlm-page-text); font-size:13px; font-weight:700; flex:1; min-width:0; }
.kr-card-nominal {
    background:rgba(var(--mlm-theme-color-rgb),.12); border:1px solid rgba(var(--mlm-theme-color-rgb),.2);
    border-radius:20px; padding:3px 11px; color:var(--mlm-theme-color); font-size:11px; font-weight:700; white-space:nowrap; flex-shrink:0;
}
.kr-card-body { padding:12px 14px; }
.kr-poin-row { display:flex; gap:10px; align-items:stretch; }
.kr-poin-box {
    flex:1; background:rgba(var(--mlm-theme-color-rgb),.05);
    border:1px solid rgba(var(--mlm-theme-color-rgb),.1); border-radius:10px; padding:10px 12px;
}
.kr-poin-label { font-size:10px; color:var(--mlm-page-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:4px; }
.kr-poin-val { font-size:14px; font-weight:800; color:#93c5fd; }
.kr-poin-val.full { color:#6ee7b7; }
.kr-poin-target { font-size:10px; color:var(--mlm-page-text-muted); margin-top:2px; }
.kr-poin-bar { height:3px; border-radius:2px; background:rgba(var(--mlm-theme-color-rgb),.12); margin-top:6px; overflow:hidden; }
.kr-poin-bar-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,#93c5fd,#6ee7b7); transition:width .4s ease; }
.kr-poin-fill-full { background:#6ee7b7 !important; }
.kr-poin-sep { display:flex; align-items:center; justify-content:center; width:32px; flex-shrink:0; }
.kr-poin-sep-icon {
    width:28px; height:28px; border-radius:50%;
    background:rgba(var(--mlm-theme-color-rgb),.1); border:1px solid rgba(var(--mlm-theme-color-rgb),.18);
    display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--mlm-theme-color);
}
.kr-card-footer { padding:10px 14px; border-top:1px solid rgba(var(--mlm-theme-color-rgb),.07); display:flex; justify-content:flex-end; align-items:center; }
.kr-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px; font-size:10.5px; font-weight:700; }
.kr-badge-success { background:rgba(61,186,120,.12); color:#3dba78; border:1px solid rgba(61,186,120,.2); }
.kr-badge-warning { background:rgba(245,158,11,.1); color:#f59e0b; border:1px solid rgba(245,158,11,.18); }
.kr-badge-dark { background:rgba(var(--mlm-theme-color-rgb),.1); color:var(--mlm-page-text-muted); border:1px solid rgba(var(--mlm-theme-color-rgb),.15); }
.kr-badge-danger { background:rgba(239,68,68,.1); color:#f87171; border:1px solid rgba(239,68,68,.16); }
.kr-btn-klaim {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--mlm-theme-color); color:var(--mlm-theme-text);
    border:none; border-radius:20px; padding:7px 20px;
    font-size:12px; font-weight:700; cursor:pointer; transition:opacity .2s;
}
.kr-btn-klaim:hover { opacity:.88; }

.kr-confirm-card {
    background:var(--mlm-card-bg); border:1px solid rgba(var(--mlm-theme-color-rgb),.18);
    border-radius:16px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.08);
}
.kr-confirm-header { background:rgba(239,68,68,.12); border-bottom:1px solid rgba(239,68,68,.18); padding:20px; text-align:center; }
.kr-confirm-header i { font-size:32px; color:#f87171; margin-bottom:8px; display:block; }
.kr-confirm-header h5 { margin:0; font-size:16px; font-weight:700; color:var(--mlm-page-text); }
.kr-confirm-header p  { margin:4px 0 0; font-size:12px; color:var(--mlm-page-text-muted); }
.kr-confirm-body { padding:16px; }
.kr-confirm-actions { display:flex; gap:10px; padding:0 16px 20px; }
.kr-btn-back {
    flex:1; padding:12px; border-radius:12px;
    border:1px solid rgba(var(--mlm-theme-color-rgb),.2);
    background:none; color:var(--mlm-page-text-muted);
    font-weight:700; font-size:13px; cursor:pointer; transition:background .15s;
}
.kr-btn-back:hover { background:rgba(var(--mlm-theme-color-rgb),.08); }
.kr-btn-confirm {
    flex:2; padding:12px; border-radius:12px; border:none;
    background:var(--mlm-theme-color); color:var(--mlm-theme-text);
    font-weight:700; font-size:13px; cursor:pointer; transition:opacity .2s;
}
.kr-btn-confirm:hover { opacity:.88; }

.kr-pin-wrap { display:none; padding:20px 0; text-align:center; }
.kr-pin-title { font-size:15px; font-weight:800; color:var(--mlm-page-text); margin-bottom:5px; }
.kr-pin-sub { font-size:12px; color:var(--mlm-page-text-muted); margin-bottom:18px; }
.kr-pin-input {
    width:160px; background:var(--mlm-input-bg);
    border:1px solid rgba(var(--mlm-theme-color-rgb),.25);
    border-radius:12px; padding:12px; font-size:18px; font-weight:700;
    color:var(--mlm-input-text); text-align:center; letter-spacing:.2em; outline:none;
    margin:0 auto 14px; display:block; transition:border-color .18s;
}
.kr-pin-input:focus { border-color:var(--mlm-theme-color); }
.kr-pin-error { font-size:12px; color:#ef4444; min-height:18px; margin-bottom:12px; }
.kr-pin-submit {
    display:inline-flex; align-items:center; gap:7px;
    padding:12px 28px; border-radius:12px; border:none;
    background:var(--mlm-theme-color); color:var(--mlm-theme-text);
    font-size:13px; font-weight:700; cursor:pointer; transition:opacity .15s;
}
.kr-pin-submit:hover { opacity:.88; }
.kr-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px; text-align:center; }
.kr-empty i { font-size:36px; color:var(--mlm-page-text-muted); opacity:.3; }
.kr-empty p { margin:0; font-size:13px; color:var(--mlm-page-text-muted); }

/* ================================================================
   18. SPIN (sp-*, rs-*)
   ================================================================ */
.sp-page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.sp-body { flex:1; padding-bottom:90px; }

.sp-wheel-section { display:flex; flex-direction:column; align-items:center; padding:16px 14px 0; }
.wheel-wrapper { width:100%; max-width:380px; aspect-ratio:1/1; position:relative; overflow:hidden; }

.sp-saldo-chip {
    display:inline-flex; align-items:center; gap:7px;
    background:rgba(var(--mlm-theme-color-rgb),.1); border:1px solid rgba(var(--mlm-theme-color-rgb),.22);
    border-radius:20px; padding:6px 16px; font-size:12px; font-weight:700; color:var(--mlm-theme-color); margin-bottom:12px;
}
.sp-saldo-label { font-size:10px; color:var(--mlm-page-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }

.sp-spin-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 32px; border-radius:14px; font-size:14px; font-weight:800; border:none; cursor:pointer; transition:opacity .15s; margin-top:16px; }
.sp-spin-btn.active { background:var(--mlm-theme-color); color:var(--mlm-theme-text); box-shadow:0 4px 16px rgba(var(--mlm-theme-color-rgb),.35); }
.sp-spin-btn.disabled { background:rgba(var(--mlm-theme-color-rgb),.1); border:1px solid rgba(var(--mlm-theme-color-rgb),.15); color:var(--mlm-page-text-muted); cursor:not-allowed; }
.sp-spin-btn:not(.disabled):hover { opacity:.88; }

.sp-result-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1060; align-items:center; justify-content:center; padding:20px; }
.sp-result-overlay.open { display:flex; }
.sp-result-modal {
    background:var(--mlm-card-bg); border-radius:20px; padding:28px 20px; max-width:340px; width:100%;
    text-align:center; border:1px solid rgba(var(--mlm-theme-color-rgb),.2);
}
.sp-result-icon { font-size:48px; margin-bottom:12px; }
.sp-result-title { font-size:18px; font-weight:800; color:var(--mlm-page-text); margin-bottom:6px; }
.sp-result-content { font-size:13px; color:var(--mlm-page-text-muted); margin-bottom:20px; line-height:1.6; }
.sp-result-close {
    display:inline-flex; align-items:center; gap:6px; padding:11px 28px; border-radius:12px; border:none;
    background:var(--mlm-theme-color); color:var(--mlm-theme-text); font-size:13px; font-weight:700; cursor:pointer; transition:opacity .15s;
}
.sp-result-close:hover { opacity:.88; }

/* ── Riwayat Spin (rs-*) ── */
.rs-page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.rs-body { flex:1; padding-bottom:90px; }
.rs-list { display:flex; flex-direction:column; gap:8px; }
.rs-item {
    background:var(--mlm-card-bg); border:1px solid var(--mlm-card-border);
    border-radius:14px; overflow:hidden; transition:border-color .18s;
    display:flex; align-items:center; gap:12px; padding:12px 14px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.rs-item:hover { border-color:rgba(var(--mlm-theme-color-rgb),.3); }
.rs-icon {
    width:42px; height:42px; border-radius:12px; flex-shrink:0;
    background:rgba(var(--mlm-theme-color-rgb),.1); border:1px solid rgba(var(--mlm-theme-color-rgb),.18);
    display:flex; align-items:center; justify-content:center; font-size:18px;
}
.rs-mid { flex:1; min-width:0; }
.rs-label { font-size:11px; font-weight:600; color:var(--mlm-page-text-muted); margin-bottom:2px; }
.rs-reward { font-size:14px; font-weight:800; color:var(--mlm-theme-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rs-date { font-size:10px; font-weight:600; color:var(--mlm-page-text-muted); margin-top:2px; }
.rs-empty { text-align:center; padding:56px 20px; color:var(--mlm-page-text-muted); font-size:13px; }
.rs-empty i { font-size:40px; display:block; margin-bottom:10px; opacity:.5; }
.rs-load-more { display:flex; justify-content:center; margin-top:14px; }
.rs-btn-more {
    display:inline-flex; align-items:center; gap:6px; padding:9px 22px; border-radius:12px;
    font-size:12px; font-weight:700; cursor:pointer;
    background:rgba(var(--mlm-theme-color-rgb),.1); border:1px solid rgba(var(--mlm-theme-color-rgb),.2);
    color:var(--mlm-theme-color); transition:background .15s;
}
.rs-btn-more:hover { background:rgba(var(--mlm-theme-color-rgb),.18); }

/* ================================================================
   19. PAGINATION
   ================================================================ */
.pg-pagination { display:flex; align-items:center; justify-content:center; gap:5px; padding:16px 0; flex-wrap:wrap; }
.pg-page-btn {
    min-width:34px; height:34px; border-radius:9px; border:1px solid var(--mlm-card-border);
    background:var(--mlm-card-bg); color:var(--mlm-page-text); font-size:12px; font-weight:600;
    cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 8px;
    transition:background .15s, border-color .15s;
}
.pg-page-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.1); border-color:rgba(var(--mlm-theme-color-rgb),.3); }
.pg-page-btn.active { background:var(--mlm-theme-color); border-color:var(--mlm-theme-color); color:var(--mlm-theme-text); }
.pg-page-btn:disabled { opacity:.4; cursor:not-allowed; }

/* ── Widget / testimoni ── */
.form-textarea {
    display:block; width:100%; padding:.375rem .75rem;
    font-size:.7rem; font-weight:400; line-height:1.5;
    color:var(--mlm-input-text); background:var(--mlm-input-bg); border:1px solid var(--mlm-input-border);
    appearance:none; border-radius:.25rem; transition:border-color .15s, box-shadow .15s;
}
.text-testimoni { color:var(--mlm-page-text-muted); }

/* ── Slide Certificate ── */
.cert-section {
    margin-top:24px;
    background: var(--mlm-card-bg);
    border:1px solid var(--mlm-card-border);
    border-radius:20px; padding:16px;
    box-shadow:0 4px 20px rgba(0,0,0,.18);
}
.cert-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cert-header-title {
    font-size:14px; font-weight:800; color:var(--mlm-page-text);
    display:flex; align-items:center; gap:10px;
}
.cert-header-icon { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--mlm-theme-color-grad-1,#e2b93b),var(--mlm-theme-color-grad-2,#8a6c00)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; flex-shrink:0; box-shadow:0 4px 10px rgba(var(--mlm-theme-color-rgb,201,162,39),.3); }
.cert-card { background:transparent; border-radius:14px; overflow:hidden; transition:transform .2s, box-shadow .2s; }
.cert-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.18); }
.cert-card img { width:100%; display:block; object-fit:cover; border-radius:14px; }

/* ── Riwayat Transfer Bonus (rtb-*) ── */
.rtb-date-group { margin-bottom:12px; }
.rtb-date-label { font-size:.68rem; font-weight:700; color:var(--mlm-page-text-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; padding:0 2px; }
.rtb-card {
    background:var(--mlm-card-bg); border-radius:14px; border:1px solid var(--mlm-card-border);
    box-shadow:0 2px 8px rgba(0,0,0,.04); padding:13px 14px; margin-bottom:8px;
}
.rtb-card-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.rtb-icon {
    width:38px; height:38px; border-radius:11px; flex-shrink:0;
    background:linear-gradient(135deg,#16a34a,#15803d);
    display:flex; align-items:center; justify-content:center; font-size:.85rem; color:#fff;
}
.rtb-grup  { font-size:.82rem; font-weight:700; color:var(--mlm-page-text); margin:0; }
.rtb-time  { font-size:.68rem; color:var(--mlm-page-text-muted); margin:2px 0 0; }
.rtb-net   { font-size:1.05rem; font-weight:800; color:#16a34a; text-align:right; flex-shrink:0; line-height:1.2; }
.rtb-net-label { font-size:.62rem; color:var(--mlm-page-text-muted); font-weight:500; text-align:right; }
.rtb-detail { font-size:.72rem; color:var(--mlm-page-text-muted); background:var(--mlm-page-bg-2); border-radius:8px; padding:7px 10px; line-height:1.7; }
.rtb-detail-row { display:flex; justify-content:space-between; }
.rtb-detail-row span:first-child { color:var(--mlm-page-text-muted); }
.rtb-detail-row span:last-child  { font-weight:600; color:var(--mlm-page-text); }
.rtb-divider { height:1px; background:var(--mlm-card-border); margin:5px 0; }
.rtb-empty { text-align:center; padding:52px 20px; color:var(--mlm-page-text-muted); font-size:.82rem; }
.rtb-empty i { font-size:2.4rem; display:block; margin-bottom:10px; opacity:.3; }
.rtb-loading { text-align:center; padding:24px; font-size:.8rem; color:var(--mlm-page-text-muted); }
.rtb-load-more {
    display:block; width:100%; padding:13px;
    background:var(--mlm-page-bg-2); border:1.5px solid var(--mlm-card-border);
    border-radius:12px; font-size:.8rem; font-weight:600; color:var(--mlm-page-text-muted);
    text-align:center; cursor:pointer; transition:background .15s; margin-top:4px;
}
.rtb-load-more:hover { background:rgba(var(--mlm-theme-color-rgb),.08); }

/* ── Link Referral (lr-*) ── */
.lr-card {
    background:linear-gradient(135deg,#1983d1,#0d5a9e);
    border-radius:18px; padding:16px; margin-bottom:20px;
    box-shadow:0 4px 18px rgba(25,131,209,.25);
    display:flex; align-items:center; gap:14px;
}
.lr-icon { width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; flex-shrink:0; }
.lr-body { flex:1; min-width:0; }
.lr-label { font-size:10px; font-weight:600; color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
.lr-link { font-size:12px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; text-decoration:none; }
.lr-desc { font-size:10.5px; color:rgba(255,255,255,.75); margin-top:3px; line-height:1.4; }
.lr-copy { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.2); border:none; color:#fff; font-size:15px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .2s; }
.lr-copy:hover { background:rgba(255,255,255,.35); }

/* ── Web Replika Page (wrp-*) ── */
.wrp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.wrp-title { font-size:1rem; font-weight:800; color:var(--mlm-page-text); display:flex; align-items:center; gap:8px; }
.wrp-title i { color:var(--mlm-theme-color); font-size:1.1rem; }
.wrp-subtitle { font-size:11px; color:var(--mlm-page-text-muted); margin-top:2px; }
.wrp-count { background:rgba(var(--mlm-theme-color-rgb),.12); color:var(--mlm-theme-color); font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; }

.wrp-grid { display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:640px) { .wrp-grid { grid-template-columns:repeat(2,1fr); } }

.wrp-card { background:var(--mlm-card-bg); border:1.5px solid var(--mlm-card-border); border-radius:18px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.06); transition:box-shadow .2s,transform .2s; }
.wrp-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.1); transform:translateY(-2px); }

.wrp-card-top { background:var(--mlm-theme-color,#1983d1); background:linear-gradient(135deg,var(--mlm-theme-color,#1983d1),rgba(var(--mlm-theme-color-rgb,25,131,209),.7)); padding:18px 16px 14px; position:relative; }
.wrp-badge { position:absolute; top:12px; right:12px; background:rgba(255,255,255,.2); backdrop-filter:blur(4px); color:#fff; font-size:9px; font-weight:700; padding:3px 8px; border-radius:20px; letter-spacing:.5px; text-transform:uppercase; }
.wrp-no { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.25); color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.wrp-link-label { font-size:9.5px; font-weight:600; color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.wrp-link-url { font-size:11.5px; font-weight:700; color:#fff; word-break:break-all; line-height:1.5; text-decoration:none; display:block; }
.wrp-link-url:hover { text-decoration:underline; color:#fff; }

.wrp-card-bottom { padding:14px 16px; }
.wrp-keterangan { font-size:11px; color:var(--mlm-page-text-muted); margin-bottom:14px; min-height:16px; display:flex; align-items:center; gap:5px; }
.wrp-keterangan i { color:var(--mlm-theme-color); font-size:11px; }

.wrp-actions { display:flex; gap:8px; flex-wrap:wrap; }
.wrp-btn { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 10px; border-radius:10px; border:none; font-size:11px; font-weight:700; cursor:pointer; transition:all .18s; text-decoration:none; white-space:nowrap; }
.wrp-btn-copy { background:rgba(var(--mlm-theme-color-rgb),.1); color:var(--mlm-theme-color); border:1.5px solid rgba(var(--mlm-theme-color-rgb),.2); }
.wrp-btn-copy:hover { background:rgba(var(--mlm-theme-color-rgb),.18); }
.wrp-btn-copy.copied { background:#16a34a; color:#fff; border-color:#16a34a; }
.wrp-btn-wa { background:#25d366; color:#fff; }
.wrp-btn-wa:hover { background:#1db954; color:#fff; text-decoration:none; }
.wrp-btn-fb { background:#1877f2; color:#fff; }
.wrp-btn-fb:hover { background:#1565d8; color:#fff; text-decoration:none; }

.wrp-empty { text-align:center; padding:48px 20px; color:var(--mlm-page-text-muted); }
.wrp-empty i { font-size:40px; margin-bottom:12px; display:block; opacity:.3; }
.wrp-empty p { font-size:13px; font-weight:600; margin-bottom:4px; }
.wrp-empty span { font-size:11px; }

/* jQuery Validate error label inside form-floating */
.form-floating > label.error {
    position: absolute;
    top: auto !important;
    bottom: -42px;
    left: 0;
    color: #ef4444;
    font-size: 11px;
}

/* Swiper slide fixed width in poin strip */
.poinswiper .swiper-wrapper .swiper-slide { width: 270px; }

/* Invoice / print page utility */
.btn-app {
    border-radius: 2px;
    display: block;
    float: left;
    height: 90px;
    width: 90px;
    text-align: center;
}
.btn-app > .fa { font-size: 45px !important; }

/* ================================================================
   20. RIWAYAT ORDER & KLAIM AUTOSAVE (ro-*, ca-*)
   ================================================================ */

/* ── Riwayat Order (ro-*) ── */
.ro-page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.ro-body { flex:1; padding-bottom:80px; }
.ro-filter-wrap { overflow:hidden; margin-bottom:12px; }
.ro-filter-tabs { display:flex; gap:6px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none; }
.ro-filter-tabs::-webkit-scrollbar { display:none; }
.ro-filter-tab {
    display:inline-flex; align-items:center; gap:4px; padding:6px 13px; border-radius:10px;
    font-size:11px; font-weight:700; white-space:nowrap; cursor:pointer; flex-shrink:0;
    border:1px solid rgba(var(--mlm-theme-color-rgb),.15);
    background:rgba(var(--mlm-theme-color-rgb),.07); color:var(--mlm-page-text-muted);
    transition:background .15s, border-color .15s, color .15s;
}
.ro-filter-tab:hover { background:rgba(var(--mlm-theme-color-rgb),.14); color:var(--mlm-page-text); }
.ro-filter-tab.active { background:var(--mlm-theme-color); border-color:var(--mlm-theme-color); color:var(--mlm-theme-text); }
.ro-list { display:flex; flex-direction:column; gap:8px; }
.ro-item {
    background:var(--mlm-card-bg); border:1px solid var(--mlm-card-border);
    border-radius:14px; overflow:hidden; transition:border-color .18s;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.ro-item:hover { border-color:rgba(var(--mlm-theme-color-rgb),.32); }
.ro-item-head {
    display:flex; align-items:center; gap:8px; padding:9px 13px;
    border-bottom:1px solid rgba(var(--mlm-theme-color-rgb),.08);
    background:rgba(var(--mlm-theme-color-rgb),.05);
}
.ro-item-head a { text-decoration:none; }
.ro-order-date { font-size:10px; font-weight:600; color:var(--mlm-page-text-muted); flex:1; }
.ro-order-date a { color:var(--mlm-theme-color); }
.ro-item-body { display:flex; align-items:center; gap:12px; padding:11px 13px; }
.ro-shop-icon {
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    background:rgba(var(--mlm-theme-color-rgb),.1); border:1px solid rgba(var(--mlm-theme-color-rgb),.18);
    display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--mlm-theme-color);
}
.ro-mid { flex:1; min-width:0; }
.ro-stokis { font-size:11.5px; font-weight:700; color:var(--mlm-page-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ro-kota { font-size:10px; color:var(--mlm-page-text-muted); margin-top:1px; }
.ro-nominal { font-size:14px; font-weight:900; color:var(--mlm-theme-color); white-space:nowrap; margin-top:3px; }
.ro-right { text-align:right; flex-shrink:0; }
.ro-status-badge { display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:700; padding:3px 9px; border-radius:7px; white-space:nowrap; }
.ro-status-badge.secondary { background:rgba(var(--mlm-theme-color-rgb),.08); color:var(--mlm-page-text-muted); border:1px solid rgba(var(--mlm-theme-color-rgb),.15); }
.ro-status-badge.success { background:rgba(61,186,120,.12); color:#3dba78; border:1px solid rgba(61,186,120,.2); }
.ro-status-badge.warning { background:rgba(245,158,11,.1); color:#f59e0b; border:1px solid rgba(245,158,11,.18); }
.ro-status-badge.danger  { background:rgba(239,68,68,.1); color:#f87171; border:1px solid rgba(239,68,68,.16); }
.ro-updated { font-size:9px; color:var(--mlm-page-text-muted); margin-top:3px; white-space:nowrap; }
.ro-actions { display:flex; gap:6px; margin-top:6px; justify-content:flex-end; }
.ro-btn { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:5px 11px; border-radius:8px; cursor:pointer; border:none; text-decoration:none; transition:background .15s; white-space:nowrap; }
.ro-btn.confirm { background:rgba(61,186,120,.15); color:#3dba78; border:1px solid rgba(61,186,120,.25); }
.ro-btn.confirm:hover { background:rgba(61,186,120,.25); color:#3dba78; text-decoration:none; }
.ro-btn.cancel  { background:rgba(239,68,68,.1); color:#f87171; border:1px solid rgba(239,68,68,.18); }
.ro-btn.cancel:hover { background:rgba(239,68,68,.18); }
.ro-btn.pay { background:var(--mlm-theme-color); color:var(--mlm-theme-text); border:1px solid var(--mlm-theme-color); }
.ro-btn.pay:hover { opacity:.88; text-decoration:none; }
.ro-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px; text-align:center; }
.ro-empty i { font-size:36px; color:var(--mlm-page-text-muted); opacity:.3; }
.ro-empty p { margin:0; font-size:13px; color:var(--mlm-page-text-muted); }

/* ── Klaim Autosave / Cart (ca-*) ── */
.ca-page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.ca-body { flex:1; padding-bottom:100px; }
.ca-saldo-chip {
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(var(--mlm-theme-color-rgb),.08); border:1px solid rgba(var(--mlm-theme-color-rgb),.16);
    border-radius:12px; padding:11px 14px; margin-bottom:14px;
    box-shadow:0 1px 6px rgba(0,0,0,.04);
}
.ca-saldo-label { font-size:11px; font-weight:600; color:var(--mlm-page-text-muted); text-transform:uppercase; letter-spacing:.04em; }
.ca-saldo-val { font-size:15px; font-weight:900; color:var(--mlm-theme-color); }
.ca-item {
    background:var(--mlm-card-bg); border:1px solid var(--mlm-card-border);
    border-radius:14px; padding:12px; display:flex; align-items:center; gap:12px;
    margin-bottom:10px; transition:border-color .18s; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.ca-item:hover { border-color:rgba(var(--mlm-theme-color-rgb),.3); }
.ca-img { width:60px; height:60px; border-radius:10px; object-fit:cover; flex-shrink:0; background:rgba(var(--mlm-theme-color-rgb),.08); border:1px solid rgba(var(--mlm-theme-color-rgb),.12); }
.ca-info { flex:1; min-width:0; }
.ca-name { font-size:13px; font-weight:700; color:var(--mlm-page-text); line-height:1.3; }
.ca-price { font-size:12px; font-weight:800; color:var(--mlm-theme-color); margin-top:3px; }
.ca-qty-wrap { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.ca-qty-btn {
    width:30px; height:30px; border-radius:50%; cursor:pointer;
    background:rgba(var(--mlm-theme-color-rgb),.12); border:1px solid rgba(var(--mlm-theme-color-rgb),.2);
    color:var(--mlm-theme-color); font-size:12px;
    display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.ca-qty-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.22); }
.ca-qty-input { width:44px; text-align:center; background:none; border:none; outline:none; font-size:14px; font-weight:700; color:var(--mlm-page-text); }
.ca-footer {
    position:fixed; bottom:0; left:0; right:0; z-index:90;
    background:var(--mlm-footer-bg);
    border-top:1px solid var(--mlm-card-border);
    padding:12px 16px;
    padding-bottom:max(12px, env(safe-area-inset-bottom));
    display:flex; align-items:center; gap:12px;
    box-shadow:0 -2px 12px rgba(0,0,0,.08);
}
.ca-footer-total-wrap { flex:1; min-width:0; }
.ca-footer-label { font-size:10.5px; color:var(--mlm-page-text-muted); font-weight:600; }
.ca-footer-total { font-size:16px; font-weight:900; color:var(--mlm-theme-color); white-space:nowrap; }
.ca-footer-actions { display:flex; gap:8px; flex-shrink:0; }
.ca-btn-cancel {
    padding:10px 16px; border-radius:12px; font-size:12px; font-weight:700; cursor:pointer;
    background:none; border:1px solid rgba(var(--mlm-theme-color-rgb),.2);
    color:var(--mlm-page-text-muted); transition:background .15s;
}
.ca-btn-cancel:hover { background:rgba(var(--mlm-theme-color-rgb),.08); }
.ca-btn-checkout {
    padding:10px 20px; border-radius:12px; font-size:12px; font-weight:700; cursor:pointer;
    background:var(--mlm-theme-color); color:var(--mlm-theme-text); border:none; transition:opacity .15s;
    display:flex; align-items:center; gap:6px;
}
.ca-btn-checkout:hover { opacity:.88; }
.ca-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px; text-align:center; }
.ca-empty i { font-size:36px; color:var(--mlm-page-text-muted); opacity:.3; }
.ca-empty p { margin:0; font-size:13px; color:var(--mlm-page-text-muted); }

/* ================================================================
   21. QUICK ACTIONS / NAV HEADER (qa-*)
   ================================================================ */
.qa-wrap { margin-top:20px; }
.qa-swiper { overflow:hidden; }
.qa-swiper .swiper-slide { width:100% !important; }

.qa-grid {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; padding:5px 0;
}
@media (min-width:480px) { .qa-grid { grid-template-columns:repeat(5, 1fr); } }
@media (min-width:640px) { .qa-grid { grid-template-columns:repeat(6, 1fr); } }
@media (min-width:992px) { .qa-grid { grid-template-columns:repeat(8, 1fr); } }

.qa-item {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    padding:14px 6px; border-radius:14px; text-decoration:none;
    background: var(--mlm-card-bg);
    border:1px solid rgba(var(--mlm-theme-color-rgb, 201,162,39), .12);
    transition:border-color .22s, box-shadow .22s, transform .18s, background .22s;
    -webkit-tap-highlight-color:transparent;
}
body.theme-gold-light .qa-item, body.theme-blue-light .qa-item, body.theme-green-light .qa-item,
body.theme-purple-light .qa-item, body.theme-red-light .qa-item {
    background: var(--mlm-card-bg);
    border-color:rgba(var(--mlm-theme-color-rgb, 201,162,39), .18);
}
.qa-item:hover, .qa-item:active {
    border-color:rgba(var(--mlm-theme-color-rgb, 201,162,39), .55);
    box-shadow:0 0 20px rgba(var(--mlm-theme-color-rgb, 201,162,39), .12);
    transform:translateY(-2px); text-decoration:none;
}
.qa-icon {
    width:40px; height:40px; border-radius:50%;
    background:rgba(var(--mlm-theme-color-rgb, 201,162,39), .1);
    border:1px solid rgba(var(--mlm-theme-color-rgb, 201,162,39), .22);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:background .22s, color .22s, border-color .22s;
}
.qa-icon i { font-size:15px; color:var(--mlm-theme-color, #c9a227); transition:color .22s; }
.qa-item:hover .qa-icon, .qa-item:active .qa-icon { background:var(--mlm-theme-color, #c9a227); border-color:var(--mlm-theme-color, #c9a227); }
.qa-item:hover .qa-icon i, .qa-item:active .qa-icon i { color:#000; }
.qa-icon-all { background:var(--mlm-theme-color, #c9a227) !important; border-color:var(--mlm-theme-color, #c9a227) !important; }
.qa-icon-all i { color:#000 !important; }
.qa-item:hover .qa-icon-all { box-shadow:0 0 14px rgba(var(--mlm-theme-color-rgb, 201,162,39), .4); }

.qa-label {
    font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:rgba(255,255,255,.72); text-align:center; line-height:1.35;
    word-break:break-word; transition:color .22s;
}
body.theme-gold-light .qa-label, body.theme-blue-light .qa-label, body.theme-green-light .qa-label,
body.theme-purple-light .qa-label, body.theme-red-light .qa-label { color:rgba(0,0,0,.6); }
.qa-item:hover .qa-label, .qa-item:active .qa-label { color:var(--mlm-theme-color, #c9a227); }

.qa-dots {
    position: relative !important;
    bottom: auto !important;
    height: 3px;
    margin-top: 10px;
    border-radius: 3px;
    background: rgba(255,255,255,.1);
    overflow: hidden;
}
body.theme-gold-light .qa-dots,
body.theme-blue-light .qa-dots,
body.theme-green-light .qa-dots,
body.theme-purple-light .qa-dots,
body.theme-red-light .qa-dots { background: rgba(0,0,0,.1); }
.qa-dots.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--mlm-theme-color, #c9a227);
    border-radius: 3px;
}

/* ================================================================
   21b. REFERRAL BANNER (hd-referral)
   ================================================================ */
.hd-referral {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(120deg,
        rgba(var(--mlm-theme-color-rgb), .18) 0%,
        rgba(var(--mlm-theme-color-rgb), .06) 100%);
    border: 1px solid rgba(var(--mlm-theme-color-rgb), .25);
    position: relative;
    overflow: hidden;
}
.hd-referral::before {
    content: '';
    position: absolute;
    right: -30px; top: -30px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--mlm-theme-color-rgb),.18) 0%, transparent 70%);
    pointer-events: none;
}
.hd-referral-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: rgba(var(--mlm-theme-color-rgb), .15);
    border: 1px solid rgba(var(--mlm-theme-color-rgb), .25);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    color: var(--mlm-theme-color);
    flex-shrink: 0;
}
.hd-referral-body { flex: 1; min-width: 0; }
.hd-referral-title {
    font-size: 13px; font-weight: 800;
    color: var(--mlm-page-text);
    margin: 0 0 3px;
    display: flex; align-items: center; gap: 6px;
}
.hd-referral-title i { color: var(--mlm-theme-color); }
.hd-referral-desc {
    font-size: 11.5px;
    color: var(--mlm-page-text-muted);
    margin: 0;
    line-height: 1.5;
}
.hd-referral-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--mlm-theme-color);
    color: var(--mlm-theme-text);
    font-size: 12px; font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity .18s, transform .18s;
}
.hd-referral-btn:hover { opacity: .88; transform: translateY(-1px); color: var(--mlm-theme-text); }

/* light mode */
body.theme-gold-light .hd-referral,
body.theme-blue-light .hd-referral,
body.theme-green-light .hd-referral,
body.theme-purple-light .hd-referral,
body.theme-red-light .hd-referral {
    background: linear-gradient(120deg,
        rgba(var(--mlm-theme-color-rgb), .1) 0%,
        rgba(var(--mlm-theme-color-rgb), .03) 100%);
    border-color: rgba(var(--mlm-theme-color-rgb), .2);
}

/* ================================================================
   22. ALL MENU PAGE (am-*)
   ================================================================ */
.am-page { background:var(--mlm-page-bg); min-height:100vh; }
.am-wrap { padding:16px 16px 100px; flex:1; }
.am-section { margin-bottom:16px; }

/* Section header — icon + label */
.am-section-hd {
    display:flex; align-items:center; gap:8px; margin-bottom:10px; padding-left:2px;
}
.am-section-icon {
    width:24px; height:24px; border-radius:8px; flex-shrink:0;
    background:rgba(var(--mlm-theme-color-rgb),.15);
    display:flex; align-items:center; justify-content:center;
}
.am-section-icon i { font-size:11px; color:var(--mlm-theme-color); }
.am-section-title {
    font-size:11px; font-weight:700; color:var(--mlm-page-text-muted); text-transform:uppercase;
    letter-spacing:.7px;
}

/* Card wrapper */
.am-card {
    background:none; border-radius:18px; padding:0;
    border:none; transition:background .22s;
}
body.theme-gold-light .am-card, body.theme-blue-light .am-card, body.theme-green-light .am-card,
body.theme-purple-light .am-card, body.theme-red-light .am-card {
    background:none;
}

/* Grid */
.am-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px 6px; }
@media (min-width:400px) { .am-grid { grid-template-columns:repeat(5, 1fr); } }
@media (min-width:576px) { .am-grid { grid-template-columns:repeat(6, 1fr); } }
@media (min-width:768px) { .am-grid { grid-template-columns:repeat(8, 1fr); } }

/* Item — same feel as qa-item */
.am-item {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    text-decoration:none; padding:10px 4px; border-radius:16px;
    border:1px solid rgba(var(--mlm-theme-color-rgb),.12);
    background:transparent; transition:border-color .22s, background .22s, transform .22s;
}
body.theme-gold-light .am-item, body.theme-blue-light .am-item, body.theme-green-light .am-item,
body.theme-purple-light .am-item, body.theme-red-light .am-item {
    background:var(--mlm-card-bg);
}
.am-item:hover, .am-item:active {
    border-color:rgba(var(--mlm-theme-color-rgb),.55);
    background:rgba(var(--mlm-theme-color-rgb),.06);
    transform:translateY(-2px);
    text-decoration:none;
}

/* Icon circle */
.am-icon {
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    background:rgba(var(--mlm-theme-color-rgb),.1);
    border:1.5px solid rgba(var(--mlm-theme-color-rgb),.2);
    display:flex; align-items:center; justify-content:center;
    transition:background .22s, border-color .22s, box-shadow .22s;
}
.am-icon i { font-size:15px; color:var(--mlm-theme-color); transition:color .22s; }
.am-item:hover .am-icon, .am-item:active .am-icon {
    background:var(--mlm-theme-color); border-color:var(--mlm-theme-color);
    box-shadow:0 4px 14px rgba(var(--mlm-theme-color-rgb),.35);
}
.am-item:hover .am-icon i, .am-item:active .am-icon i { color:#000; }

/* Label */
.am-label {
    font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--mlm-page-text-muted); text-align:center; line-height:1.35; word-break:break-word;
    transition:color .22s;
}
body.theme-gold-light .am-label, body.theme-blue-light .am-label, body.theme-green-light .am-label,
body.theme-purple-light .am-label, body.theme-red-light .am-label { color:rgba(0,0,0,.6); }
.am-item:hover .am-label, .am-item:active .am-label { color:var(--mlm-theme-color); }

/* ================================================================
   23. DASHBOARD PRODUCT WIDGET (dw-prod-*)
   ================================================================ */
.dw-prod-section {
    margin-top:24px;
    background: var(--mlm-card-bg);
    border:1px solid var(--mlm-card-border);
    border-radius:20px; padding:16px;
    box-shadow:0 4px 20px rgba(0,0,0,.18);
}
.dw-prod-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.dw-prod-title {
    font-size:14px; font-weight:800; color:var(--mlm-page-text);
    display:flex; align-items:center; gap:10px;
}
.dw-prod-title-icon { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--mlm-theme-color-grad-1,#e2b93b),var(--mlm-theme-color-grad-2,#8a6c00)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; flex-shrink:0; box-shadow:0 4px 10px rgba(var(--mlm-theme-color-rgb,201,162,39),.3); }
.dw-prod-link {
    font-size:11px; color:var(--mlm-theme-color); font-weight:700;
    text-decoration:none; display:flex; align-items:center; gap:3px;
}
.dw-prod-link:hover { opacity:.75; }
.dw-prod-card {
    background: var(--mlm-card-bg);
    border:1px solid var(--mlm-card-border);
    border-radius:16px; overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.12);
    transition:transform .22s, box-shadow .22s, border-color .22s;
    height:100%; display:flex; flex-direction:column;
}
.dw-prod-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.18); border-color:rgba(var(--mlm-theme-color-rgb,201,162,39),.45); }
.dw-prod-img-wrap { position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--mlm-input-bg); }
.dw-prod-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.dw-prod-card:hover .dw-prod-img-wrap img { transform:scale(1.06); }
.dw-prod-badge {
    position:absolute; top:8px; left:8px;
    background:linear-gradient(135deg, #ff6b35, #f64749); color:#fff;
    font-size:9px; font-weight:700; padding:3px 9px; border-radius:20px;
    letter-spacing:.3px; box-shadow:0 2px 6px rgba(246,71,73,.4);
}
.dw-prod-share { position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:4px; }
.dw-prod-share a {
    width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; backdrop-filter:blur(8px); transition:transform .2s, box-shadow .2s;
    text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.dw-prod-share a:hover { transform:scale(1.18); }
.dw-prod-share .wa { background:rgba(255,255,255,.9); color:#25d366; }
.dw-prod-share .fb { background:rgba(255,255,255,.9); color:#1877f2; }
.dw-prod-body { padding:10px 12px 13px; display:flex; flex-direction:column; gap:3px; flex:1; }
.dw-prod-name {
    font-size:11.5px; font-weight:600; color:var(--mlm-page-text);
    line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.dw-prod-price { font-size:14px; font-weight:800; color:var(--mlm-theme-color); line-height:1; margin-top:2px; }
.dw-prod-sold { font-size:10px; color:var(--mlm-page-text-muted); }
.dw-prod-btn {
    margin-top:auto; display:block;
    background:linear-gradient(135deg, var(--mlm-theme-color, #BF953F), var(--mlm-theme-color-grad-1, #D4AF37));
    color:var(--mlm-theme-text) !important; text-align:center;
    font-size:11px; font-weight:700; padding:8px 0;
    border-radius:10px; text-decoration:none; transition:opacity .2s, box-shadow .2s;
    box-shadow:0 3px 10px rgba(0,0,0,.15);
}
.dw-prod-btn:hover { opacity:.9; box-shadow:0 5px 16px rgba(0,0,0,.22); text-decoration:none; }

/* ================================================================
   24. SLIDE / HERO SLIDER (sl-*)
   ================================================================ */
.sl-wrap {
    border-radius:20px; overflow:hidden; position:relative; width:100%;
    background:var(--mlm-card-bg);
    border:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39), .18);
    box-shadow:0 0 0 1px rgba(var(--mlm-theme-color-rgb,201,162,39), .05), 0 8px 32px rgba(0,0,0,.35);
}
body.theme-gold-light .sl-wrap, body.theme-blue-light .sl-wrap, body.theme-green-light .sl-wrap,
body.theme-purple-light .sl-wrap, body.theme-red-light .sl-wrap {
    background:var(--mlm-card-bg);
    border-color:rgba(var(--mlm-theme-color-rgb,201,162,39), .22);
    box-shadow:0 4px 20px rgba(0,0,0,.08);
}
.sl-wrap .swiper-container { display:block !important; width:100% !important; overflow:hidden !important; }
.sl-wrap .swiper-wrapper { display:flex !important; flex-wrap:nowrap !important; width:100% !important; align-items:stretch; }
.sl-wrap .swiper-slide { width:100% !important; min-width:100% !important; flex-shrink:0 !important; box-sizing:border-box; }

.sl-item { position:relative; min-height:220px; display:flex; align-items:stretch; overflow:hidden; }
@media (min-width:480px) { .sl-item { min-height:255px; } }
@media (min-width:768px) { .sl-item { min-height:290px; } }

.sl-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; transition:transform 6s ease; }
.swiper-slide-active .sl-bg { transform:scale(1.04); }

.sl-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to right, rgba(0,0,0,.95) 0%, rgba(0,0,0,.82) 45%, rgba(20,12,0,.3) 100%);
    pointer-events:none;
}
.sl-item.sl-no-img .sl-overlay { background:linear-gradient(to right, rgba(0,0,0,.5) 0%, transparent 100%); }

.sl-body { position:relative; z-index:2; padding:28px 28px 24px; display:flex; flex-direction:column; justify-content:center; gap:10px; max-width:520px; flex:1; }
@media (min-width:480px) { .sl-body { padding:36px 36px 28px; } }

.sl-badge { display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 12px; border-radius:999px; width:fit-content; border:1px solid; backdrop-filter:blur(6px); }
.sl-badge-amber  { color:#fcd34d; background:rgba(245,158,11,.18); border-color:rgba(245,158,11,.35); }
.sl-badge-blue   { color:#93c5fd; background:rgba(59,130,246,.18); border-color:rgba(59,130,246,.35); }
.sl-badge-red    { color:#fca5a5; background:rgba(239,68,68,.18);  border-color:rgba(239,68,68,.35); }
.sl-badge-green  { color:#6ee7b7; background:rgba(16,185,129,.18); border-color:rgba(16,185,129,.35); }
.sl-badge-purple { color:#c4b5fd; background:rgba(139,92,246,.18); border-color:rgba(139,92,246,.35); }

.sl-title { font-size:22px; font-weight:900; color:#fff; line-height:1.2; letter-spacing:.01em; text-transform:uppercase; margin:0; text-shadow:0 2px 16px rgba(0,0,0,.7); }
@media (min-width:480px) { .sl-title { font-size:26px; } }
@media (min-width:768px) { .sl-title { font-size:30px; } }

.sl-desc { font-size:11.5px; color:rgba(148,163,184,.85); line-height:1.7; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
body.theme-gold-light .sl-desc, body.theme-blue-light .sl-desc, body.theme-green-light .sl-desc,
body.theme-purple-light .sl-desc, body.theme-red-light .sl-desc { color:rgba(71,85,105,.85); }

.sl-btn {
    display:inline-flex; align-items:center; gap:8px;
    background:linear-gradient(to right, #f59e0b, #d97706);
    color:#000 !important; font-size:11.5px; font-weight:800;
    padding:9px 20px; border-radius:12px; text-decoration:none !important;
    width:fit-content; margin-top:4px;
    box-shadow:0 4px 16px rgba(245,158,11,.3);
    transition:background .18s, transform .18s, box-shadow .18s; letter-spacing:.02em;
}
.sl-btn:hover { background:linear-gradient(to right, #fbbf24, #f59e0b); transform:translateY(-2px); box-shadow:0 6px 22px rgba(245,158,11,.4); }
.sl-btn i { font-size:10px; }

.sl-imgonly { position:relative; z-index:2; width:100%; display:flex; align-items:center; justify-content:center; padding:24px; }
.sl-imgonly img { max-width:100%; max-height:240px; object-fit:contain; border-radius:12px; filter:drop-shadow(0 4px 20px rgba(0,0,0,.5)); }

.sl-controls {
    position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-top:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39), .12);
    background:rgba(0,0,0,.45); backdrop-filter:blur(8px); flex-shrink:0;
}
body.theme-gold-light .sl-controls, body.theme-blue-light .sl-controls, body.theme-green-light .sl-controls,
body.theme-purple-light .sl-controls, body.theme-red-light .sl-controls {
    background:rgba(255,255,255,.6); border-top-color:rgba(var(--mlm-theme-color-rgb,201,162,39), .18);
}
.sl-nav-btns { display:flex; gap:6px; }
.sl-nav-btn {
    width:32px; height:32px; border-radius:9px;
    background:rgba(var(--mlm-theme-color-rgb,201,162,39), .1);
    border:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39), .22);
    color:var(--mlm-theme-color, #c9a227); display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:11px; transition:background .18s, border-color .18s; user-select:none;
}
.sl-nav-btn:hover { background:rgba(var(--mlm-theme-color-rgb,201,162,39), .25); border-color:var(--mlm-theme-color, #c9a227); }
body.theme-gold-light .sl-nav-btn, body.theme-blue-light .sl-nav-btn, body.theme-green-light .sl-nav-btn,
body.theme-purple-light .sl-nav-btn, body.theme-red-light .sl-nav-btn { color:#6b4c00; }

.sl-dots { display:flex; gap:5px; align-items:center; }
.sl-dot {
    width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.2);
    cursor:pointer; transition:all .25s; border:none; padding:0;
}
body.theme-gold-light .sl-dot, body.theme-blue-light .sl-dot, body.theme-green-light .sl-dot,
body.theme-purple-light .sl-dot, body.theme-red-light .sl-dot { background:rgba(0,0,0,.18); }
.sl-dot.active { background:var(--mlm-theme-color, #c9a227); width:20px; border-radius:4px; }

/* ================================================================
   25. TESTIMONI — Dashboard widget (ts-widget-*) & Page list (tsp-*)
   ================================================================ */

/* ── Dashboard testimoni widget — ts-wrap (shared with ts-widget prefix) ── */
.ts-wrap {
    border-radius:20px; overflow:hidden; position:relative; width:100%; height:100%; min-height:220px;
    background:var(--mlm-card-bg);
    border:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39), .18);
    box-shadow:0 0 0 1px rgba(var(--mlm-theme-color-rgb,201,162,39), .05), 0 8px 32px rgba(0,0,0,.35);
    display:flex; flex-direction:column; padding:22px 22px 16px; box-sizing:border-box;
}
@media (min-width:480px) { .ts-wrap { min-height:255px; } }
@media (min-width:768px) { .ts-wrap { min-height:290px; } }
body.theme-gold-light .ts-wrap, body.theme-blue-light .ts-wrap, body.theme-green-light .ts-wrap,
body.theme-purple-light .ts-wrap, body.theme-red-light .ts-wrap {
    background:var(--mlm-card-bg);
    border-color:rgba(var(--mlm-theme-color-rgb,201,162,39), .22);
    box-shadow:0 4px 20px rgba(0,0,0,.08);
}
.ts-hd {
    border-bottom:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39), .1);
    padding-bottom:12px; margin-bottom:16px; flex-shrink:0;
}
.ts-hd-title {
    font-size:12px; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:.08em;
    display:flex; align-items:center; gap:8px; margin:0 0 4px;
}
body.theme-gold-light .ts-hd-title, body.theme-blue-light .ts-hd-title, body.theme-green-light .ts-hd-title,
body.theme-purple-light .ts-hd-title, body.theme-red-light .ts-hd-title { color:var(--mlm-page-text); }
.ts-hd-title i { color:var(--mlm-theme-color, #c9a227); }
.ts-hd-sub { font-size:10.5px; color:rgba(148,163,184,.75); margin:0; line-height:1.4; }
body.theme-gold-light .ts-hd-sub, body.theme-blue-light .ts-hd-sub, body.theme-green-light .ts-hd-sub,
body.theme-purple-light .ts-hd-sub, body.theme-red-light .ts-hd-sub { color:rgba(71,85,105,.7); }

.ts-rotator { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; position:relative; }
.ts-item { display:none; flex-direction:column; gap:14px; animation:tsFadeIn .4s ease; }
.ts-item.ts-active { display:flex; }
@keyframes tsFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.ts-quote {
    font-size:11.5px; color:rgba(203,213,225,.88); font-style:italic; line-height:1.75; margin:0;
    display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
body.theme-gold-light .ts-quote, body.theme-blue-light .ts-quote, body.theme-green-light .ts-quote,
body.theme-purple-light .ts-quote, body.theme-red-light .ts-quote { color:rgba(30,41,59,.75); }

.ts-meta { display:flex; align-items:center; gap:10px; }
.ts-avatar {
    width:36px; height:36px; border-radius:50%; object-fit:cover;
    border:1.5px solid rgba(var(--mlm-theme-color-rgb,201,162,39), .4); flex-shrink:0;
    background:linear-gradient(135deg, var(--mlm-theme-color,#c9a227), rgba(201,162,39,.4));
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:800; overflow:hidden;
}
.ts-meta-info { line-height:1.3; }
.ts-meta-name { font-size:11.5px; font-weight:700; color:#fff; margin:0 0 2px; }
body.theme-gold-light .ts-meta-name, body.theme-blue-light .ts-meta-name, body.theme-green-light .ts-meta-name,
body.theme-purple-light .ts-meta-name, body.theme-red-light .ts-meta-name { color:var(--mlm-page-text); }
.ts-meta-plan { font-size:9px; font-weight:700; color:var(--mlm-theme-color, #c9a227); text-transform:uppercase; letter-spacing:.06em; margin:0; }

.ts-dots { display:flex; justify-content:center; gap:5px; padding-top:14px; flex-shrink:0; }
.ts-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.18); border:none; padding:0; cursor:pointer; transition:all .25s; }
body.theme-gold-light .ts-dot, body.theme-blue-light .ts-dot, body.theme-green-light .ts-dot,
body.theme-purple-light .ts-dot, body.theme-red-light .ts-dot { background:rgba(0,0,0,.18); }
.ts-dot.ts-dot-active { background:var(--mlm-theme-color, #c9a227); width:16px; border-radius:4px; }

/* ── Testimoni page (tsp-*) ── */
.tsp-page { background:var(--mlm-page-bg); min-height:100vh; }
.tsp-list-wrap { padding:12px 16px 140px; }
.tsp-card {
    background:var(--mlm-card-bg); border-radius:16px; padding:14px;
    box-shadow:0 2px 10px rgba(0,0,0,.06); margin-bottom:12px;
    position:relative; overflow:hidden; border:1px solid var(--mlm-card-border);
}
.tsp-card::before { content:'\201C'; position:absolute; top:-4px; right:14px; font-size:72px; color:rgba(0,0,0,.06); font-family:Georgia, serif; line-height:1; pointer-events:none; }
.tsp-meta { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.tsp-avatar {
    width:40px; height:40px; border-radius:50%;
    background:linear-gradient(135deg, var(--mlm-theme-color), var(--mlm-theme-color-grad-1, #d97706));
    color:#fff; font-size:16px; font-weight:700;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.tsp-info { flex:1; min-width:0; }
.tsp-name { font-size:13px; font-weight:700; color:var(--mlm-page-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tsp-plan { font-size:10.5px; color:var(--mlm-theme-color); font-weight:600; }
.tsp-date { font-size:10px; color:var(--mlm-page-text-muted); flex-shrink:0; }
.tsp-stars { color:#f59e0b; font-size:11px; margin-bottom:6px; letter-spacing:1px; }
.tsp-body { font-size:12px; color:var(--mlm-page-text-muted); line-height:1.7; }
.tsp-readmore-span { display:none; }
.tsp-readmore-btn { background:none; border:none; padding:0; font-size:11.5px; color:var(--mlm-theme-color); font-weight:600; cursor:pointer; }
.tsp-loadmore-wrap { text-align:center; margin-top:4px; }
.tsp-loadmore-btn {
    background:var(--mlm-card-bg); border:1.5px solid var(--mlm-theme-color); color:var(--mlm-theme-color);
    font-size:13px; font-weight:600; padding:9px 32px; border-radius:30px; cursor:pointer; transition:all .2s;
}
.tsp-loadmore-btn:hover { background:var(--mlm-theme-color); color:var(--mlm-theme-text); }
.tsp-empty { text-align:center; padding:60px 20px; color:var(--mlm-page-text-muted); }
.tsp-empty i { font-size:48px; margin-bottom:16px; display:block; opacity:.4; }
.tsp-empty p { font-size:14px; }

/* Hero banner */
.tsp-hero {
    margin:72px 16px 4px;
    background:linear-gradient(135deg, var(--mlm-theme-color) 0%, var(--mlm-theme-color-grad-1,#d97706) 100%);
    border-radius:18px; padding:16px 18px; display:flex; align-items:center; gap:14px;
    box-shadow:0 4px 18px rgba(var(--mlm-theme-color-rgb,201,162,39),.3);
}
.tsp-hero-icon {
    width:44px; height:44px; border-radius:14px; background:rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; flex-shrink:0;
}
.tsp-hero-text { flex:1; min-width:0; }
.tsp-hero-title { font-size:14px; font-weight:800; color:#fff; margin:0 0 2px; }
.tsp-hero-sub   { font-size:11px; color:rgba(255,255,255,.75); margin:0; }
.tsp-write-btn  {
    display:flex; align-items:center; gap:6px; flex-shrink:0;
    background:rgba(255,255,255,.22); border:1.5px solid rgba(255,255,255,.35);
    color:#fff; font-size:12px; font-weight:700; padding:8px 14px; border-radius:30px;
    cursor:pointer; transition:background .18s; white-space:nowrap;
}
.tsp-write-btn:hover { background:rgba(255,255,255,.32); }

/* List wrap — padding bawah untuk nav-bottom */
.tsp-list-wrap { padding:14px 16px 110px; }

/* Form overlay (slide-up sheet) */
.tsp-form-overlay {
    display:none; position:fixed; inset:0; z-index:500;
    background:rgba(0,0,0,.45); align-items:flex-end;
    transition:background .3s;
}
.tsp-form-overlay.tsp-overlay-active .tsp-form-sheet { transform:translateY(0); }
.tsp-form-sheet {
    background:var(--mlm-card-bg); border-radius:24px 24px 0 0; width:100%;
    padding:10px 20px 32px; box-sizing:border-box; max-height:90vh; overflow-y:auto;
    transform:translateY(100%); transition:transform .3s cubic-bezier(.32,1,.5,1);
    box-shadow:0 -8px 32px rgba(0,0,0,.18);
}
.tsp-form-handle {
    width:40px; height:4px; border-radius:2px; background:rgba(var(--mlm-page-text-rgb,0,0,0),.12);
    margin:0 auto 16px;
}
.tsp-form-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.tsp-form-title { font-size:15px; font-weight:800; color:var(--mlm-page-text); display:flex; align-items:center; gap:8px; }
.tsp-form-title i { color:var(--mlm-theme-color); }
.tsp-form-close {
    width:32px; height:32px; border-radius:50%; background:var(--mlm-page-bg-2);
    border:none; color:var(--mlm-page-text-muted); font-size:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
.tsp-form-hint { font-size:11.5px; color:var(--mlm-page-text-muted); margin:0 0 14px; line-height:1.5; }
.tsp-form-sheet textarea {
    width:100%; box-sizing:border-box; border:1.5px solid var(--mlm-input-border); border-radius:14px;
    padding:13px 14px; font-size:13px; color:var(--mlm-input-text); background:var(--mlm-input-bg);
    resize:none; outline:none; transition:border-color .2s; line-height:1.65;
}
.tsp-form-sheet textarea:focus { border-color:var(--mlm-theme-color); }
.tsp-form-actions { display:flex; gap:10px; margin-top:14px; }

/* Dashboard widget — link Semua */
.ts-hd-link {
    font-size:9px; font-weight:700; color:var(--mlm-theme-color);
    text-decoration:none; margin-left:auto; flex-shrink:0;
    display:flex; align-items:center; gap:2px;
    padding:3px 8px; border:1px solid rgba(var(--mlm-theme-color-rgb),.35);
    border-radius:20px; white-space:nowrap;
}
.ts-hd-link:hover { opacity:.75; text-decoration:none; }

/* ================================================================
   26. PROFIL (prf-*)
   ================================================================ */
.prf-hero {
    background:linear-gradient(135deg, var(--mlm-theme-color) 0%, var(--mlm-theme-color-grad-2, #1e6fa8) 100%);
    border-radius:20px; padding:20px 18px 18px; margin-bottom:20px;
    position:relative; overflow:hidden; box-shadow:0 6px 20px rgba(3,105,161,.25);
}
.prf-hero::before { content:''; position:absolute; width:180px; height:180px; background:rgba(255,255,255,.06); border-radius:50%; top:-60px; right:-40px; }
.prf-hero::after  { content:''; position:absolute; width:100px; height:100px; background:rgba(255,255,255,.05); border-radius:50%; bottom:-30px; left:20px; }

.prf-avatar-wrap { position:relative; width:68px; height:68px; flex-shrink:0; }
.prf-avatar { width:68px; height:68px; border-radius:50%; background:rgba(255,255,255,.2); border:2.5px solid rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; font-size:1.7rem; color:#fff; }
.prf-plan-badge { position:absolute; bottom:0; right:-4px; background:#fbbf24; border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border:2px solid #fff; overflow:hidden; }
.prf-plan-badge img { width:18px; height:18px; object-fit:contain; }
.prf-name  { font-size:1.05rem; font-weight:700; color:#fff; margin:0; }
.prf-id    { font-size:.72rem; color:rgba(255,255,255,.75); margin:2px 0 6px; }
.prf-chips { display:flex; gap:6px; flex-wrap:wrap; }
.prf-chip  { display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:20px; padding:3px 10px; font-size:.6rem; font-weight:600; color:#fff; backdrop-filter:blur(4px); }
.prf-chip i { font-size:.55rem; }

.prf-section-title {
    font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--mlm-theme-color); display:flex; align-items:center; gap:6px; margin:0 0 10px;
}
.prf-section-title::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--mlm-theme-color) 0%, transparent 100%); opacity:.25; }

.prf-card {
    background:var(--mlm-card-bg); border-radius:16px; box-shadow:0 2px 12px rgba(0,0,0,.06);
    border:1px solid var(--mlm-card-border); overflow:hidden; margin-bottom:20px;
}
.prf-row { display:flex; align-items:center; padding:11px 16px; border-bottom:1px solid var(--mlm-card-border); gap:12px; }
.prf-row:last-child { border-bottom:none; }
.prf-row-icon {
    width:32px; height:32px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    font-size:.78rem; color:#fff; flex-shrink:0;
}
.prf-row-icon.ocean,  .prf-menu-icon.ocean  { background:linear-gradient(135deg,#0369a1,#0284c7); }
.prf-row-icon.amber,  .prf-menu-icon.amber  { background:linear-gradient(135deg,#d97706,#b45309); }
.prf-row-icon.teal,   .prf-menu-icon.teal   { background:linear-gradient(135deg,#0d9488,#0f766e); }
.prf-row-icon.indigo, .prf-menu-icon.indigo { background:linear-gradient(135deg,#4f46e5,#4338ca); }
.prf-row-icon.rose,   .prf-menu-icon.rose   { background:linear-gradient(135deg,#e11d48,#be123c); }
.prf-row-icon.sky,    .prf-menu-icon.sky    { background:linear-gradient(135deg,#0ea5e9,#0284c7); }
.prf-row-icon.violet, .prf-menu-icon.violet { background:linear-gradient(135deg,#7c3aed,#6d28d9); }
.prf-row-icon.slate,  .prf-menu-icon.slate  { background:linear-gradient(135deg,#475569,#334155); }
.prf-row-label { font-size:.68rem; color:var(--mlm-page-text-muted); margin:0 0 1px; }
.prf-row-value { font-size:.82rem; font-weight:600; color:var(--mlm-page-text); margin:0; }
.prf-row-body  { flex:1; min-width:0; }

.prf-menu-card { background:var(--mlm-card-bg); border-radius:16px; box-shadow:0 2px 12px rgba(0,0,0,.06); border:1px solid var(--mlm-card-border); overflow:hidden; margin-bottom:20px; }
.prf-menu-item { display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--mlm-card-border); text-decoration:none; transition:background .15s; }
.prf-menu-item:last-child { border-bottom:none; }
.prf-menu-item:active { background:var(--mlm-page-bg-2); }
.prf-menu-icon { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:#fff; flex-shrink:0; }
.prf-menu-text  { flex:1; font-size:.82rem; font-weight:600; color:var(--mlm-page-text); }
.prf-menu-sub   { font-size:.65rem; color:var(--mlm-page-text-muted); margin-top:1px; }
.prf-menu-arrow { color:var(--mlm-page-text-muted); font-size:.7rem; }

.prf-logout {
    display:block; width:100%; background:linear-gradient(135deg, #ef4444, #dc2626);
    color:#fff; font-weight:700; font-size:.85rem; border:none; border-radius:50px; padding:14px;
    text-align:center; text-decoration:none; box-shadow:0 4px 14px rgba(220,38,38,.3); transition:opacity .2s;
}
.prf-logout:hover { opacity:.9; color:#fff; }

/* ================================================================
   27. SIDEBAR GANTI AKUN MODAL (akun-*)
   ================================================================ */
.sb-switch-btn {
    display:flex; align-items:center; gap:7px; width:100%;
    margin:8px 0 0; padding:8px 12px; border-radius:10px;
    border:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39), .25);
    background:rgba(var(--mlm-theme-color-rgb,201,162,39), .07);
    color:var(--mlm-theme-color, #c9a227); font-size:11px; font-weight:700;
    cursor:pointer; transition:background .18s, border-color .18s; letter-spacing:.02em; text-align:left;
}
.sb-switch-btn:hover { background:rgba(var(--mlm-theme-color-rgb,201,162,39), .15); border-color:rgba(var(--mlm-theme-color-rgb,201,162,39), .45); }
.sb-switch-btn i { font-size:11px; }
.sb-switch-count {
    margin-left:auto; background:var(--mlm-theme-color, #c9a227); color:#000;
    font-size:9px; font-weight:800; width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.akun-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px);
    z-index:9999; display:flex; align-items:flex-end; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .22s;
}
@media (min-width:576px) { .akun-modal-overlay { align-items:center; } }
.akun-modal-overlay.akun-modal-open { opacity:1; pointer-events:auto; }

.akun-modal {
    width:100%; max-width:420px; max-height:85vh; border-radius:20px 20px 0 0;
    display:flex; flex-direction:column;
    background:linear-gradient(135deg, rgba(18,18,18,.98) 0%, rgba(8,8,8,1) 100%);
    border:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39), .2); border-bottom:none;
    box-shadow:0 -8px 40px rgba(0,0,0,.5);
    transform:translateY(30px); transition:transform .28s cubic-bezier(.22,.68,0,1.2); overflow:hidden;
}
@media (min-width:576px) { .akun-modal { border-radius:20px; border-bottom:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39), .2); transform:translateY(16px) scale(.97); } }
.akun-modal-overlay.akun-modal-open .akun-modal { transform:translateY(0) scale(1); }
body.theme-gold-light .akun-modal, body.theme-blue-light .akun-modal, body.theme-green-light .akun-modal,
body.theme-purple-light .akun-modal, body.theme-red-light .akun-modal {
    background:var(--mlm-page-bg);
    border-color:rgba(var(--mlm-theme-color-rgb,201,162,39), .25);
}

.akun-modal-hd {
    display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px;
    border-bottom:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39), .1); flex-shrink:0;
}
.akun-modal-title { font-size:13px; font-weight:800; color:#fff; display:flex; align-items:center; gap:8px; margin:0; }
body.theme-gold-light .akun-modal-title, body.theme-blue-light .akun-modal-title,
body.theme-green-light .akun-modal-title, body.theme-purple-light .akun-modal-title,
body.theme-red-light .akun-modal-title { color:var(--mlm-page-text); }
.akun-modal-title i { color:var(--mlm-theme-color, #c9a227); }
.akun-modal-close {
    width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.08); border:none;
    color:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:12px; transition:background .15s, color .15s;
}
body.theme-gold-light .akun-modal-close, body.theme-blue-light .akun-modal-close,
body.theme-green-light .akun-modal-close, body.theme-purple-light .akun-modal-close,
body.theme-red-light .akun-modal-close { background:rgba(0,0,0,.06); color:rgba(0,0,0,.5); }
.akun-modal-close:hover { background:rgba(255,255,255,.15); color:#fff; }

.akun-modal-search { padding:10px 18px; flex-shrink:0; border-bottom:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39), .08); }
.akun-search-input-wrap { position:relative; }
.akun-search-input-wrap i { position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:12px; color:rgba(255,255,255,.3); pointer-events:none; }
body.theme-gold-light .akun-search-input-wrap i, body.theme-blue-light .akun-search-input-wrap i,
body.theme-green-light .akun-search-input-wrap i, body.theme-purple-light .akun-search-input-wrap i,
body.theme-red-light .akun-search-input-wrap i { color:rgba(0,0,0,.3); }
.akun-search-input {
    width:100%; padding:9px 12px 9px 32px; border-radius:10px;
    border:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39), .18);
    background:rgba(255,255,255,.05); color:#fff; font-size:12px; outline:none;
    transition:border-color .18s, background .18s; box-sizing:border-box;
}
body.theme-gold-light .akun-search-input, body.theme-blue-light .akun-search-input,
body.theme-green-light .akun-search-input, body.theme-purple-light .akun-search-input,
body.theme-red-light .akun-search-input { background:rgba(0,0,0,.04); color:var(--mlm-page-text); border-color:rgba(var(--mlm-theme-color-rgb,201,162,39), .25); }
.akun-search-input::placeholder { color:rgba(255,255,255,.28); }
body.theme-gold-light .akun-search-input::placeholder, body.theme-blue-light .akun-search-input::placeholder,
body.theme-green-light .akun-search-input::placeholder, body.theme-purple-light .akun-search-input::placeholder,
body.theme-red-light .akun-search-input::placeholder { color:rgba(0,0,0,.28); }
.akun-search-input:focus { border-color:var(--mlm-theme-color, #c9a227); background:rgba(var(--mlm-theme-color-rgb,201,162,39), .05); }

.akun-modal-list {
    flex:1; overflow-y:auto; padding:6px 0; scrollbar-width:thin;
    scrollbar-color:rgba(var(--mlm-theme-color-rgb,201,162,39),.3) transparent;
}
.akun-modal-list::-webkit-scrollbar { width:4px; }
.akun-modal-list::-webkit-scrollbar-thumb { background:rgba(var(--mlm-theme-color-rgb,201,162,39),.3); border-radius:4px; }

.akun-item {
    display:flex; align-items:center; gap:12px; padding:11px 18px; cursor:pointer;
    transition:background .15s; border:none; background:none; width:100%; text-align:left;
}
.akun-item:hover { background:rgba(var(--mlm-theme-color-rgb,201,162,39), .07); }
.akun-item.akun-active { background:rgba(var(--mlm-theme-color-rgb,201,162,39), .1); }
.akun-item-avatar {
    width:38px; height:38px; border-radius:10px;
    background:rgba(var(--mlm-theme-color-rgb,201,162,39), .12);
    border:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39), .22);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:800; color:var(--mlm-theme-color, #c9a227); flex-shrink:0;
}
.akun-item.akun-active .akun-item-avatar { background:var(--mlm-theme-color, #c9a227); color:#000; border-color:var(--mlm-theme-color, #c9a227); }
.akun-item-avatar img { width:100%; height:100%; object-fit:cover; border-radius:8px; display:block; }
.akun-item-info { flex:1; min-width:0; }
.akun-item-name { font-size:12px; font-weight:700; color:rgba(255,255,255,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
body.theme-gold-light .akun-item-name, body.theme-blue-light .akun-item-name,
body.theme-green-light .akun-item-name, body.theme-purple-light .akun-item-name,
body.theme-red-light .akun-item-name { color:var(--mlm-page-text); }
.akun-item-id { font-size:10px; color:rgba(255,255,255,.35); font-family:monospace; }
body.theme-gold-light .akun-item-id, body.theme-blue-light .akun-item-id,
body.theme-green-light .akun-item-id, body.theme-purple-light .akun-item-id,
body.theme-red-light .akun-item-id { color:var(--mlm-page-text-muted); }
.akun-item-badge {
    font-size:9px; font-weight:700; padding:3px 8px; border-radius:6px;
    background:rgba(var(--mlm-theme-color-rgb,201,162,39), .15);
    color:var(--mlm-theme-color, #c9a227);
    border:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39), .25); white-space:nowrap; flex-shrink:0;
}
.akun-item.akun-active .akun-item-badge { background:var(--mlm-theme-color, #c9a227); color:#000; border-color:var(--mlm-theme-color, #c9a227); }
.akun-empty { padding:28px 18px; text-align:center; font-size:12px; color:rgba(255,255,255,.28); }
body.theme-gold-light .akun-empty, body.theme-blue-light .akun-empty, body.theme-green-light .akun-empty,
body.theme-purple-light .akun-empty, body.theme-red-light .akun-empty { color:var(--mlm-page-text-muted); }

/* ================================================================
   28. DAFTAR STOKIS (sk-*)
   ================================================================ */
.sk-card {
    background:var(--mlm-card-bg); border-radius:16px; border:1.5px solid var(--mlm-card-border);
    padding:14px 16px; margin-bottom:12px; transition:box-shadow .15s;
}
.sk-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.07); }
.sk-head { display:flex; align-items:flex-start; gap:12px; }
.sk-avatar {
    width:42px; height:42px; border-radius:12px; flex-shrink:0;
    background:linear-gradient(135deg, #6366f1, #8b5cf6);
    color:#fff; font-size:18px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
}
.sk-mid { flex:1; min-width:0; }
.sk-name { font-size:14px; font-weight:700; color:var(--mlm-page-text); margin:0 0 2px; }
.sk-id   { font-size:11px; color:var(--mlm-page-text-muted); margin:0; }
.sk-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.sk-badge {
    display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--mlm-page-text-muted);
    background:var(--mlm-page-bg-2); border:1px solid var(--mlm-card-border); border-radius:8px; padding:3px 9px;
}
.sk-badge i { font-size:10px; color:var(--mlm-page-text-muted); }
.sk-badge.sk-stock { background:#ede9fe; border-color:#c4b5fd; color:#6d28d9; }
.sk-badge.sk-stock i { color:#8b5cf6; }
.sk-addr { font-size:11px; color:var(--mlm-page-text-muted); margin-top:8px; line-height:1.5; display:flex; gap:5px; }
.sk-addr i { color:var(--mlm-page-text-muted); flex-shrink:0; margin-top:2px; }
.sk-footer { display:flex; justify-content:flex-end; margin-top:12px; }
.sk-wa-btn {
    display:inline-flex; align-items:center; gap:6px;
    background:#16a34a; color:#fff; font-size:12px; font-weight:600;
    border:none; border-radius:10px; padding:7px 16px;
    text-decoration:none; transition:background .15s;
}
.sk-wa-btn:hover { background:#15803d; color:#fff; text-decoration:none; }
.sk-empty { text-align:center; padding:40px 20px; color:var(--mlm-page-text-muted); font-size:13px; }
.sk-search-wrap { position:relative; margin-bottom:14px; }
.sk-search-wrap input {
    border-radius:12px; padding:10px 44px 10px 14px; font-size:13px;
    border:1.5px solid var(--mlm-input-border); width:100%; outline:none; box-sizing:border-box;
    background:var(--mlm-input-bg); color:var(--mlm-input-text); transition:border-color .15s;
}
.sk-search-wrap input:focus { border-color:var(--mlm-theme-color); }
.sk-search-wrap i { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--mlm-page-text-muted); font-size:14px; pointer-events:none; }

/* ================================================================
   29. BERITA / NEWS LIST PAGE (bn-*)
   ================================================================ */
.bn-page-wrap { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--mlm-page-bg); }
.bn-wrap { padding:80px 16px 90px; }

.bn-featured {
    border-radius:18px; overflow:hidden; background:var(--mlm-card-bg);
    box-shadow:0 4px 20px rgba(var(--mlm-theme-color-rgb),.12); margin-bottom:20px;
    display:block; text-decoration:none; color:inherit;
    transition:transform .18s, box-shadow .18s; border:1px solid var(--mlm-card-border);
}
.bn-featured:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(var(--mlm-theme-color-rgb),.2); color:inherit; text-decoration:none; }
.bn-featured-img { width:100%; height:190px; object-fit:cover; display:block; }
.bn-featured-placeholder { width:100%; height:190px; background:linear-gradient(135deg, #dbeafe, #bae6fd); display:flex; align-items:center; justify-content:center; font-size:42px; color:#93c5fd; }
.bn-featured-body { padding:14px 16px 16px; }
.bn-badge {
    display:inline-block; background:var(--mlm-theme-color); color:var(--mlm-theme-text);
    font-size:10px; font-weight:800; padding:2px 10px; border-radius:20px;
    text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px;
}
.bn-featured-title { font-size:16px; font-weight:800; color:var(--mlm-page-text); line-height:1.45; margin:0 0 8px; }
.bn-featured-excerpt {
    font-size:13px; color:var(--mlm-page-text-muted); margin:0 0 12px; line-height:1.65;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.bn-featured-meta { display:flex; align-items:center; gap:14px; font-size:11px; color:var(--mlm-page-text-muted); }
.bn-featured-meta i { color:var(--mlm-theme-color); margin-right:3px; }

.bn-section-head {
    font-size:11px; font-weight:800; color:var(--mlm-page-text-muted); text-transform:uppercase;
    letter-spacing:.7px; margin:4px 0 12px; display:flex; align-items:center; gap:6px;
}
.bn-section-head::after { content:''; flex:1; height:1px; background:var(--mlm-card-border); }

.bn-card {
    background:var(--mlm-card-bg); border-radius:14px; overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.06); margin-bottom:10px;
    display:flex; text-decoration:none; color:inherit;
    transition:transform .15s, box-shadow .15s; border:1px solid var(--mlm-card-border);
}
.bn-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(var(--mlm-theme-color-rgb),.14); color:inherit; text-decoration:none; }
.bn-thumb { width:96px; height:86px; flex-shrink:0; object-fit:cover; }
.bn-thumb-placeholder { width:96px; height:86px; flex-shrink:0; background:linear-gradient(135deg, #dbeafe, #bae6fd); display:flex; align-items:center; justify-content:center; font-size:22px; color:#93c5fd; }
.bn-card-body { padding:10px 13px; display:flex; flex-direction:column; justify-content:center; flex:1; min-width:0; }
.bn-card-title { font-size:13px; font-weight:700; color:var(--mlm-page-text); margin:0 0 4px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bn-card-excerpt { font-size:11.5px; color:var(--mlm-page-text-muted); margin:0 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.5; }
.bn-card-meta { font-size:10.5px; color:var(--mlm-page-text-muted); display:flex; align-items:center; gap:8px; }
.bn-card-meta i { color:var(--mlm-theme-color); }
.bn-empty { text-align:center; padding:60px 20px; background:var(--mlm-card-bg); border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.bn-empty i { font-size:38px; color:var(--mlm-page-text-muted); opacity:.3; display:block; margin-bottom:12px; }
.bn-empty p { color:var(--mlm-page-text-muted); font-size:13px; margin:0; }

/* ================================================================
   29b. BERITA DETAIL PAGE (bd-*)
   ================================================================ */
.bd-page-wrap { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--mlm-page-bg); }

.bd-cover {
    width:100%; max-height:240px; object-fit:cover; display:block;
    margin-top:72px;
}
.bd-cover-placeholder {
    width:100%; height:180px; margin-top:72px;
    background:linear-gradient(135deg, rgba(var(--mlm-theme-color-rgb),.15), rgba(var(--mlm-theme-color-rgb),.05));
    display:flex; align-items:center; justify-content:center;
    font-size:48px; color:rgba(var(--mlm-theme-color-rgb),.3);
}

.bd-wrap { padding:16px 18px 90px; }

.bd-meta-bar {
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
    font-size:11px; color:var(--mlm-page-text-muted); margin-bottom:10px;
}
.bd-meta-bar i { color:var(--mlm-theme-color); margin-right:4px; }

.bd-title {
    font-size:18px; font-weight:900; color:var(--mlm-page-text);
    line-height:1.45; margin:0 0 14px;
}

.bd-divider { height:2px; background:var(--mlm-card-border); border-radius:2px; margin-bottom:16px; }

.bd-content {
    font-size:14px; line-height:1.8; color:var(--mlm-page-text);
    word-break:break-word;
}
.bd-content p   { margin:0 0 14px; }
.bd-content img { max-width:100%; height:auto; border-radius:10px; margin:8px 0; }
.bd-content h1, .bd-content h2, .bd-content h3 {
    font-weight:800; color:var(--mlm-page-text); margin:18px 0 8px;
}
.bd-content a { color:var(--mlm-theme-color); }
.bd-content ul, .bd-content ol { padding-left:20px; margin:0 0 14px; }

.bd-back-btn {
    display:inline-flex; align-items:center; gap:8px;
    margin-top:28px; padding:10px 20px; border-radius:12px;
    background:rgba(var(--mlm-theme-color-rgb),.1);
    color:var(--mlm-theme-color); font-size:13px; font-weight:700;
    text-decoration:none; transition:background .18s;
}
.bd-back-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.2); color:var(--mlm-theme-color); text-decoration:none; }

.bd-not-found {
    display:flex; flex-direction:column; align-items:center; gap:12px;
    padding:60px 20px; text-align:center;
}
.bd-not-found i { font-size:42px; color:var(--mlm-page-text-muted); opacity:.25; }
.bd-not-found p { font-size:14px; color:var(--mlm-page-text-muted); margin:0; }

body.light-mode .bd-cover-placeholder { background:linear-gradient(135deg, #dbeafe, #bae6fd); color:#93c5fd; }

/* ================================================================
   30. STATUS MEMBER / PERINGKAT ACCORDION (sm-accordion)
   ================================================================ */
.item-reward { border:1px solid #ccc; border-radius:10px; }
.item-reward:hover { border:3px solid #1f0000; }
table.table-status tr td { padding:1.5rem; }
@media (max-width:1199.97px) { .accordion-title { display:none; } }
@media (min-width:1199.98px) {
    .accordion {
        --bs-gutter-x:1.5rem; --bs-gutter-y:0;
        display:flex; flex-wrap:wrap;
        margin-right:calc(var(--mlm-padding) * -1);
        margin-left:calc(var(--mlm-padding) * -1);
    }
    .accordion-item { flex:0 0 auto; width:12%; }
    .accordion-title { width:28%; }
    .accordion-flush .accordion-item:first-child { border-top:3px solid #ffffff; }
    .accordion-item.current-status { border-top:3px solid #15374c !important; }
    .accordion-item.another-status { border-top:3px solid #ffffff; }
    .accordion-item .collapse:not(.show) { display:block; }
    .accordion-button { padding:1rem; }
    .accordion-button::after { display:none !important; }
    .accordion-header { height:90px; }
    .accordion-header .size-18 { font-size:14px; }
    .accordion-body { padding:1rem 0; }
    .accordion-body .size-18 { font-size:12px; }
    .accordion-body .mt-4 { margin-top:20px; }
    .accordion-body .status-member { display:none; }
    table.table-status tr td:first-child { display:none; }
    table.table-status tr td:last-child { display:block; height:65px; width:100%; padding:20px 0; text-align:center; font-size:14px; }
    table.table-label tr td:last-child { display:flex; align-items:center; height:65px; width:100%; padding:0 20px; text-align:center; font-size:14px; }
    .height-100 { height:100%; }
    .accordion-title .accordion-header { padding-top:25px; padding-left:20px; padding-right:20px; }
    .accordion-title table tr td { padding-left:20px; padding-right:20px; text-align:left !important; }
    .collapsing { transition:none !important; }
    .label-status { display:none; }
    .accordion-header .row, .accordion-button { display:block; }
    .accordion-header .row .col-auto { padding:0 0 10px 0; margin:0 auto; text-align:center; }
    .accordion-header .row .col-auto .avatar { margin-right:0; }
    .accordion-header .row .col { padding:0 0 10px 0; margin:0 auto; text-align:center; }
}

/* ================================================================
   31. STAT CARDS & BONUS TABS & LEADERSHIP (st-*, bt-*, lws-*)
   ================================================================ */

/* ── Stats Swiper ── */
.st-swiper { overflow: hidden; padding-bottom: 6px; }
.st-swiper .swiper-slide { height: auto; }
.st-pagination { height: 3px; margin-top: 8px; border-radius: 2px; }
.st-pagination .swiper-pagination-progressbar-fill { background: var(--mlm-theme-color); border-radius: 2px; }

.st-card {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 16px; border-radius: 16px; height: 100%;
    background: var(--mlm-card-bg);
    border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39), .12);
    text-decoration: none; transition: border-color .22s, box-shadow .22s, transform .18s; min-height: 110px;
}
body.theme-gold-light .st-card, body.theme-blue-light .st-card, body.theme-green-light .st-card,
body.theme-purple-light .st-card, body.theme-red-light .st-card {
    border-color: rgba(var(--mlm-theme-color-rgb,201,162,39), .18);
}
.st-card:hover {
    border-color: rgba(var(--mlm-theme-color-rgb,201,162,39), .5);
    box-shadow: 0 0 22px rgba(var(--mlm-theme-color-rgb,201,162,39), .1);
    transform: translateY(-2px); text-decoration: none;
}
.st-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.st-label {
    font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.42); margin: 0; line-height: 1.3;
}
body.theme-gold-light .st-label, body.theme-blue-light .st-label, body.theme-green-light .st-label,
body.theme-purple-light .st-label, body.theme-red-light .st-label { color: rgba(0,0,0,.42); }
.st-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid; }
.st-icon i { font-size: 15px; }
.st-val { font-size: 18px; font-weight: 900; margin: 6px 0 0; line-height: 1.15; word-break: break-all; }
@media (min-width: 480px) { .st-val { font-size: 20px; } }
.st-sub { font-size: 9.5px; font-weight: 600; margin: 8px 0 0; display: flex; align-items: center; gap: 4px; }
.st-sub-row { justify-content: space-between; }

/* ── Shared section header (dw-sec-hd) ── */
.dw-sec-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.dw-sec-hd-left { display:flex; align-items:center; gap:10px; }
.dw-sec-hd-icon { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--mlm-theme-color-grad-1,#e2b93b),var(--mlm-theme-color-grad-2,#8a6c00)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; flex-shrink:0; box-shadow:0 4px 10px rgba(var(--mlm-theme-color-rgb,201,162,39),.3); }
.dw-sec-hd-title { font-size:14px; font-weight:800; color:var(--mlm-page-text); line-height:1.2; }
.dw-sec-hd-sub { font-size:10px; color:var(--mlm-page-text-muted); margin-top:1px; }
.dw-sec-hd-link { font-size:11px; font-weight:700; color:var(--mlm-theme-color); text-decoration:none; display:flex; align-items:center; gap:3px; flex-shrink:0; }
.dw-sec-hd-link:hover { opacity:.75; color:var(--mlm-theme-color); }

/* bt-* Bonus Tabs */
.bt-card {
    background: var(--mlm-card-bg);
    border: 1px solid var(--mlm-card-border);
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
}
.bt-card-header { padding: 16px 16px 0; }
.bt-head {
    display: flex; align-items: center; gap: 2px;
    border-bottom: 1px solid var(--mlm-card-border);
    overflow-x: auto; scrollbar-width: none;
    padding: 0 16px;
}
.bt-head::-webkit-scrollbar { display: none; }
.bt-tab {
    flex-shrink: 0; padding: 10px 14px 12px; font-size: 11px; font-weight: 700; letter-spacing: .03em;
    color: var(--mlm-page-text-muted); border: none; background: none; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .18s, border-color .18s; white-space: nowrap;
}
.bt-tab:hover { color: var(--mlm-page-text); }
.bt-tab.bt-active { color: var(--mlm-theme-color); border-bottom-color: var(--mlm-theme-color); }
.bt-panel { display: none; }
.bt-panel.bt-show { display: block; }

/* Bonus grid list */
.bt-bonus-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px 14px 6px; }
.bt-bonus-row {
    display:flex; flex-direction:row; gap:6px;
    background:rgba(var(--mlm-theme-color-rgb,201,162,39),.05);
    border:1px solid var(--mlm-card-border);
    border-radius:14px; padding:10px 12px;
    transition:border-color .18s, background .18s;
}
.bt-bonus-row:hover { border-color:rgba(var(--mlm-theme-color-rgb,201,162,39),.3); background:rgba(var(--mlm-theme-color-rgb,201,162,39),.09); }
.bt-bonus-left { display:flex; align-items:center; gap:8px; min-width:0; }
.bt-bonus-icon { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.bt-bonus-name { font-size:10.5px; font-weight:600; color:var(--mlm-page-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bt-bonus-val { font-size:14px; font-weight:800; color:var(--mlm-theme-color); white-space:nowrap; line-height:1; padding-left:2px; }

/* ── Top List (Sponsor & Income) ── */
.bt-top-list { padding: 10px 14px 6px; display: flex; flex-direction: column; gap: 6px; }
.bt-top-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.04); border: 1px solid var(--mlm-card-border); position: relative; overflow: hidden; }
.bt-top-row.r1 { background: linear-gradient(135deg,rgba(251,191,36,.12),rgba(251,191,36,.04)); border-color: rgba(251,191,36,.3); }
.bt-top-row.r2 { background: linear-gradient(135deg,rgba(156,163,175,.1),rgba(156,163,175,.03)); border-color: rgba(156,163,175,.25); }
.bt-top-row.r3 { background: linear-gradient(135deg,rgba(180,100,50,.1),rgba(180,100,50,.03)); border-color: rgba(180,100,50,.22); }
.bt-top-row-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.3); border-radius: 0 2px 2px 0; transition: width .6s ease; }
.bt-top-row.r1 .bt-top-row-bar { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.bt-top-row.r2 .bt-top-row-bar { background: linear-gradient(90deg,#9ca3af,#d1d5db); }
.bt-top-row.r3 .bt-top-row-bar { background: linear-gradient(90deg,#b45309,#d97706); }
.bt-rank { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; }
.bt-top-avatar-circle { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; text-transform: uppercase; }
.bt-top-row.r1 .bt-top-avatar-circle { background: linear-gradient(135deg,#f59e0b,#fbbf24); box-shadow: 0 2px 8px rgba(251,191,36,.35); }
.bt-top-row.r2 .bt-top-avatar-circle { background: linear-gradient(135deg,#6b7280,#9ca3af); }
.bt-top-row.r3 .bt-top-avatar-circle { background: linear-gradient(135deg,#92400e,#d97706); }
.bt-top-avatar-circle.rank-other { background: linear-gradient(135deg,rgba(var(--mlm-theme-color-rgb,201,162,39),.5),rgba(var(--mlm-theme-color-rgb,201,162,39),.3)); }
.bt-top-info { flex: 1; min-width: 0; }
.bt-top-name { font-size: 11.5px; font-weight: 700; color: var(--mlm-page-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-top-sub { font-size: 9.5px; color: var(--mlm-page-text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-top-stat { text-align: right; flex-shrink: 0; }
.bt-top-stat-val { font-size: 13px; font-weight: 800; color: var(--mlm-theme-color); line-height: 1.2; }
.bt-top-row.r1 .bt-top-stat-val { color: #f59e0b; }
.bt-top-row.r2 .bt-top-stat-val { color: #9ca3af; }
.bt-top-row.r3 .bt-top-stat-val { color: #d97706; }
.bt-top-stat-lbl { font-size: 9px; color: var(--mlm-page-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.bt-empty { padding: 32px 16px; text-align: center; font-size: 12px; color: var(--mlm-page-text-muted); }
/* light mode */
body.theme-gold-light .bt-top-row,
body.theme-blue-light .bt-top-row,
body.theme-green-light .bt-top-row,
body.theme-purple-light .bt-top-row,
body.theme-red-light .bt-top-row { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.08); }
body.theme-gold-light .bt-top-row.r1,
body.theme-blue-light .bt-top-row.r1,
body.theme-green-light .bt-top-row.r1,
body.theme-purple-light .bt-top-row.r1,
body.theme-red-light .bt-top-row.r1 { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.25); }
body.theme-gold-light .bt-top-row.r2,
body.theme-blue-light .bt-top-row.r2,
body.theme-green-light .bt-top-row.r2,
body.theme-purple-light .bt-top-row.r2,
body.theme-red-light .bt-top-row.r2 { background: rgba(156,163,175,.08); border-color: rgba(156,163,175,.2); }
body.theme-gold-light .bt-top-row.r3,
body.theme-blue-light .bt-top-row.r3,
body.theme-green-light .bt-top-row.r3,
body.theme-purple-light .bt-top-row.r3,
body.theme-red-light .bt-top-row.r3 { background: rgba(180,100,50,.07); border-color: rgba(180,100,50,.18); }

/* lws-* Leadership */
.lws-wrap { margin-bottom: 4px; }
.lws-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lws-header-left { display: flex; align-items: center; gap: 10px; }
.lws-header-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--mlm-theme-color); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(var(--mlm-theme-color-rgb,201,162,39),.35); }
.lws-header-title { font-size: 13px; font-weight: 800; color: var(--mlm-page-text,#e2e8f0); line-height: 1.2; }
.lws-header-sub { font-size: 10px; color: var(--mlm-footer-text,#9ca3af); margin-top: 2px; }
.lws-header-link { font-size: 11px; font-weight: 700; color: var(--mlm-theme-color,#c9a227); text-decoration: none; display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.lws-header-link:hover { opacity: .75; color: var(--mlm-theme-color,#c9a227); }
.lws-card-top { display: flex; align-items: center; gap: 12px; }
.lws-ring-wrap { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.lws-ring { width: 64px; height: 64px; transform: rotate(-90deg); }
.lws-ring-track { fill: none; stroke: rgba(var(--mlm-theme-color-rgb,201,162,39),.12); stroke-width: 5; }
.lws-ring-fill { fill: none; stroke: var(--mlm-theme-color,#c9a227); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.lws-ring-fill.done { stroke: #22c55e; }
.lws-ring-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lws-ring-pct { font-size: 11px; font-weight: 800; color: var(--mlm-page-text,#e2e8f0); line-height: 1; }
.lws-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lws-card-plan { font-size: 11px; font-weight: 800; color: var(--mlm-page-text,#e2e8f0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .04em; }
.lws-card-progress-txt { font-size: 10px; color: var(--mlm-footer-text,#9ca3af); display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }
.lws-poin { font-size: 16px; font-weight: 800; color: var(--mlm-theme-color,#c9a227); line-height: 1; }
.lws-poin-sep { opacity: .5; }
.lws-syarat { opacity: .75; }
.lws-status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 20px; letter-spacing: .03em; width: fit-content; }
.lws-status-badge.qualified { background: rgba(34,197,94,.15); color: #22c55e; }
.lws-status-badge.pending { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.12); color: var(--mlm-theme-color,#c9a227); }
.lws-status-badge.locked { background: rgba(148,163,184,.1); color: #94a3b8; }
.lws-bar-bg { height: 5px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); border-radius: 10px; overflow: hidden; }
.lws-bar-fill { height: 100%; background: linear-gradient(90deg, var(--mlm-theme-color-grad-2,#8a6c00), var(--mlm-theme-color-grad-1,#c9a227)); border-radius: 10px; transition: width .6s ease; }
.lws-bar-fill.done { background: linear-gradient(90deg,#16a34a,#22c55e); }
.lws-card-bottom { display: flex; align-items: center; justify-content: space-between; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.06); border-radius: 10px; padding: 8px 10px; }
.lws-nominal-label { font-size: 9px; color: var(--mlm-footer-text,#9ca3af); text-transform: uppercase; letter-spacing: .04em; }
.lws-nominal-val { font-size: 13px; font-weight: 800; color: var(--mlm-theme-color,#c9a227); }
.lws-generasi-list { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lws-generasi-item { font-size: 10px; color: var(--mlm-page-text,#e5e7eb); background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); border-radius: 6px; padding: 2px 7px; }
.lws-generasi-item b { color: var(--mlm-theme-color,#c9a227); }
.lws-upgrade-btn { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--mlm-theme-color,#c9a227); color: #000 !important; font-size: 10px; font-weight: 700; padding: 7px 10px; border-radius: 9px; text-decoration: none; transition: opacity .2s; letter-spacing: .02em; }
.lws-upgrade-btn:hover { opacity: .85; color: #000 !important; }
body.theme-gold-light .lws-wrap, body.theme-blue-light .lws-wrap, body.theme-green-light .lws-wrap, body.theme-purple-light .lws-wrap, body.theme-red-light .lws-wrap { background: transparent; }
body.theme-gold-light .lws-header, body.theme-blue-light .lws-header, body.theme-green-light .lws-header, body.theme-purple-light .lws-header, body.theme-red-light .lws-header { background: transparent; padding: 10px 4px 4px; }
body.theme-gold-light .lws-header-title, body.theme-blue-light .lws-header-title, body.theme-green-light .lws-header-title, body.theme-purple-light .lws-header-title, body.theme-red-light .lws-header-title { color: #111827; }
body.theme-gold-light .lws-header-sub, body.theme-blue-light .lws-header-sub, body.theme-green-light .lws-header-sub, body.theme-purple-light .lws-header-sub, body.theme-red-light .lws-header-sub { color: #6b7280; }
body.theme-gold-light .lws-card, body.theme-blue-light .lws-card, body.theme-green-light .lws-card, body.theme-purple-light .lws-card, body.theme-red-light .lws-card { background: #fff; border-color: rgba(0,0,0,.09); box-shadow: 0 2px 12px rgba(0,0,0,.07); }
body.theme-gold-light .lws-card::before, body.theme-blue-light .lws-card::before, body.theme-green-light .lws-card::before, body.theme-purple-light .lws-card::before, body.theme-red-light .lws-card::before { background: radial-gradient(circle, rgba(var(--mlm-theme-color-rgb,201,162,39),.08) 0%, transparent 70%); }
body.theme-gold-light .lws-card-plan, body.theme-blue-light .lws-card-plan, body.theme-green-light .lws-card-plan, body.theme-purple-light .lws-card-plan, body.theme-red-light .lws-card-plan,
body.theme-gold-light .lws-ring-pct, body.theme-blue-light .lws-ring-pct, body.theme-green-light .lws-ring-pct, body.theme-purple-light .lws-ring-pct, body.theme-red-light .lws-ring-pct { color: #111827; }
body.theme-gold-light .lws-card-progress-txt, body.theme-blue-light .lws-card-progress-txt, body.theme-green-light .lws-card-progress-txt, body.theme-purple-light .lws-card-progress-txt, body.theme-red-light .lws-card-progress-txt,
body.theme-gold-light .lws-nominal-label, body.theme-blue-light .lws-nominal-label, body.theme-green-light .lws-nominal-label, body.theme-purple-light .lws-nominal-label, body.theme-red-light .lws-nominal-label { color: #6b7280; }
body.theme-gold-light .lws-generasi-item, body.theme-blue-light .lws-generasi-item, body.theme-green-light .lws-generasi-item, body.theme-purple-light .lws-generasi-item, body.theme-red-light .lws-generasi-item { color: #374151; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.08); }
body.theme-gold-light .lws-ring-track, body.theme-blue-light .lws-ring-track, body.theme-green-light .lws-ring-track, body.theme-purple-light .lws-ring-track, body.theme-red-light .lws-ring-track { stroke: rgba(0,0,0,.08) !important; }
body.theme-gold-light .lws-bar-bg, body.theme-blue-light .lws-bar-bg, body.theme-green-light .lws-bar-bg, body.theme-purple-light .lws-bar-bg, body.theme-red-light .lws-bar-bg { background: rgba(0,0,0,.07) !important; }
body.theme-gold-light .lws-card-bottom, body.theme-blue-light .lws-card-bottom, body.theme-green-light .lws-card-bottom, body.theme-purple-light .lws-card-bottom, body.theme-red-light .lws-card-bottom { background: #f3f4f6; }
body.theme-gold-light .lws-status-badge.pending, body.theme-blue-light .lws-status-badge.pending, body.theme-green-light .lws-status-badge.pending, body.theme-purple-light .lws-status-badge.pending, body.theme-red-light .lws-status-badge.pending { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.15); }
body.theme-gold-light .lws-status-badge.locked, body.theme-blue-light .lws-status-badge.locked, body.theme-green-light .lws-status-badge.locked, body.theme-purple-light .lws-status-badge.locked, body.theme-red-light .lws-status-badge.locked { background: rgba(0,0,0,.07); color: #6b7280; }
body.theme-gold-light .lws-poin-sep, body.theme-blue-light .lws-poin-sep, body.theme-green-light .lws-poin-sep, body.theme-purple-light .lws-poin-sep, body.theme-red-light .lws-poin-sep,
body.theme-gold-light .lws-syarat, body.theme-blue-light .lws-syarat, body.theme-green-light .lws-syarat, body.theme-purple-light .lws-syarat, body.theme-red-light .lws-syarat { color: #6b7280; }

/* ================================================================
   32. POHON JARINGAN — tree layout, card-member, bg-* badges
   ================================================================ */
:root {
    --mitra:    #805ea4;
    --emerald:  #3faaad;
    --silver:   #aaaaaa;
    --gold-plan: #d88b40;
    --diamond:  #9c0b0b;
    --platinum: #1a73bd;
    --premium-plan: #c73192;
    --default:  #6b6b6b;
    --blank:    #f7f7f7;
    --red:      #9c0909;
    --border:   #e0e0e0;
}
.to-upline { color: #fd940d; }
.to-upline:hover { color: #f2961f; }
.to-upline h4 { font-size: 1em; font-weight: 600; margin-top: 0; }
.input-group-addon { padding: 0; border: none; }
.input-group-addon .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tree { display: block; padding: 0; margin: 0; min-height: 100vh; }
.tree ul { display: flex; justify-content: space-around !important; padding: 25px 0; position: relative; width: 100%; margin: 0; }
.tree li { text-align: center; list-style-type: none; position: relative; padding: 25px 5px; }
.tree ul li { width: 50%; }
.tree li::before, .tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid rgba(203,213,225,.8); width: 50%; height: 25px; }
.tree li::after { right: auto; left: 50%; border-left: 2px solid rgba(203,213,225,.8); }
.tree li:only-child::after, .tree li:only-child::before { display: none; }
.tree li:only-child { padding-top: 0; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; }
.tree li:last-child::before { border-right: 2px solid rgba(203,213,225,.8); border-radius: 0 5px 0 0; }
.tree li:first-child::after { border-radius: 5px 0 0 0; }
.tree ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid rgba(203,213,225,.8); width: 0; height: 25px; }
.card-member { display: block; width: 130px; margin: 0 auto; text-align: center; color: #000; border-radius: 14px; padding: 8px 0; font-size: 11px; transition: all .3s ease; overflow: hidden; position: relative; }
.card-member:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.card-member .card-member-header { width: 65px; height: 65px; border-radius: 50%; border: 3px solid #667eea; margin: 8px auto 6px; padding: 0; overflow: hidden; position: relative; background: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,.1); transition: all .3s ease; }
.card-member:hover .card-member-header { box-shadow: 0 4px 12px rgba(102,126,234,.3); transform: scale(1.05); }
.card-member .card-member-header a, .card-member .card-member-header span { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.card-member .card-member-header a img, .card-member .card-member-header span img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; transition: all .3s ease; }
.card-member .card-member-header h2 { display: block; width: 100px; padding: 8px; margin: 10px auto; border-radius: 25px; font-size: 1.2em; font-weight: 600; color: #000; text-align: center; }
.card-member .card-member-footer h2 { display: block; width: 100px; margin: 0 auto; font-size: .9em; font-weight: 600; color: #000; text-align: center; }
.card-member h4 { color: #2c3e50; padding: 0 !important; font-weight: 600; }
.card-member-body .member-info { display: flex; justify-content: space-between; align-items: center; color: #2c3e50; border-radius: 8px; text-align: center; margin: 5px 8px; padding: 0; background: #f8f9fa; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: all .2s ease; }
.card-member-body .member-info:hover { background: #fff; border-color: rgba(102,126,234,.2); }
.member-blank a { color: rgb(7,101,39); }
.member-blank .member-info, .member-blank h3, .member-blank h4, .member-blank h5 { color: #ccc; }
.member-info span { width: 22px; padding: 4px 0; display: inline-block; vertical-align: middle; font-size: 1.3em; color: #5a67d8; transition: all .2s ease; }
.member-info span:first-child, .member-info span:last-child { width: 44px; color: #ffffff; font-size: .9em; font-weight: 700; padding: 6px 4px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: all .2s ease; }
.member-blank-red .member-info span:first-child, .member-blank-red .member-info span:last-child { background-color: var(--red) !important; }
.member-blank .member-info span:first-child, .member-blank .member-info span:last-child { background-color: var(--blank) !important; color: #9ca3af !important; }
.member-platinum .member-info span:first-child, .member-platinum .member-info span:last-child { background-color: var(--platinum) !important; }
.member-gold .member-info span:first-child, .member-gold .member-info span:last-child { background-color: var(--gold-plan) !important; }
.member-silver .member-info span:first-child, .member-silver .member-info span:last-child { background-color: var(--silver) !important; }
.member-info span:last-child { border-radius: 3px 0 0 3px; }
.member-info span:first-child { border-radius: 0 3px 3px 0; }
.card-member-body .member-posting { display: flex; justify-content: space-around; align-items: stretch; background: #f5f3ff; color: #4c1d95; border-radius: 6px; text-align: center; padding: 4px 0; margin: 5px 8px 6px; border: 1px solid rgba(102,126,234,.08); transition: all .2s ease; }
.card-member-body .member-posting:hover { background: #ede9fe; }
.member-profile { margin: 2px 0; padding: 0 6px; }
.member-profile h3, .member-profile h4, .member-profile h5 { width: 100%; padding: 0; vertical-align: middle; font-weight: 600; color: #2c3e50; text-align: center; margin: 3px 0; line-height: 1.3; }
.member-profile h3 { padding: 0 8px; font-size: 1.05em; font-weight: 700; color: #1a202c; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.member-profile h4 { font-size: .95em; font-weight: 600; color: #4a5568; }
.member-profile h5 { font-size: .95em; font-weight: 500; color: #4a5568; background: rgba(0,0,0,.03); padding: 3px 8px; border-radius: 6px; display: inline-block; margin: 2px auto; }
.member-packet { width: 90px !important; padding: 4px 6px !important; margin: 0 auto 5px !important; border-radius: 16px; font-size: .9em !important; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; box-shadow: 0 2px 5px rgba(0,0,0,.12); transition: all .2s ease; }
.member-blank-red .member-packet { background-color: var(--red) !important; }
.member-blank .member-packet { background-color: var(--blank) !important; }
.member-platinum .member-packet { background-color: var(--platinum) !important; }
.member-gold .member-packet { background-color: var(--gold-plan) !important; }
.member-silver .member-packet { background-color: var(--silver) !important; }
.member-rank { width: 100px !important; padding: 0 5px !important; margin: 0 auto 5px !important; border-radius: 5px; font-size: .9em !important; }
.member-blank .card-member-header { background: #f8f9fa; border: 2px dashed #d1d5db; display: flex; align-items: center; justify-content: center; }
.member-blank .card-member-header a { display: flex; align-items: center; justify-content: center; text-decoration: none; width: 100%; height: 100%; }
.member-blank .blank-icon { display: flex; align-items: center; justify-content: center; font-size: 24px; color: #9ca3af; transition: all .3s ease; width: 100%; height: 100%; }
.member-blank .blank-text { text-align: center; font-size: .85em; font-weight: 600; color: #6b7280; padding: 8px; text-transform: uppercase; letter-spacing: .5px; }
.member-blank-lock .card-member-header { border-color: #dc2626; border-width: 3px; background: #fef2f2; }
.member-blank-lock .blank-icon { color: #dc2626; }
.member-blank-lock .blank-text { color: #991b1b; }
.member-blank-lock:hover .card-member-header { background: #fee2e2; border-color: #b91c1c; }
.member-blank-join .card-member-header { border-color: #10b981; background: #f0fdf4; }
.member-blank-join .blank-icon { color: #059669; }
.member-blank-join .blank-text { color: #047857; }
.member-blank-join:hover .card-member-header { background: #dcfce7; border-color: #059669; transform: scale(1.03); cursor: pointer; }
.member-blank-join:hover .blank-icon { color: #047857; transform: scale(1.1); }
.member-name-header { padding: 8px 8px 6px; margin-bottom: 6px; border-bottom: 2px solid rgba(102,126,234,.1); }
.member-name-header h3 { font-size: 1.1em; font-weight: 700; color: #1f2937; text-align: center; margin: 0; padding: 0; text-transform: uppercase; letter-spacing: .5px; }
.member-info-label { display: flex; justify-content: space-between; align-items: center; margin: 6px 8px 8px; padding: 5px 8px; background: #f8f9fa; border-radius: 6px; border: 1px solid rgba(0,0,0,.06); }
.member-info-label .info-label { font-size: .85em; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .3px; }
.member-info-label .info-value { font-size: .9em; font-weight: 700; color: #1f2937; }
.member-info-compact { display: flex; justify-content: space-between; align-items: center; padding: 4px 10px; margin: 3px 8px; background: #f8f9fa; border-radius: 6px; border: 1px solid rgba(0,0,0,.06); }
.member-info-compact.id-member-compact { flex-direction: column; align-items: center; gap: 4px; padding: 6px 10px; }
.info-label-compact { font-size: .75em; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .3px; }
.info-value-compact { font-size: .85em; font-weight: 700; color: #1f2937; }
.member-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 8px; }
.member-info-grid .member-info-compact { margin: 0; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; }
.member-info-grid .info-label-compact { font-size: .7em; margin-bottom: 2px; }
.member-info-grid .info-value-compact { font-size: .85em; text-align: center; }
.member-info-row { display: flex; flex-direction: column; margin: 6px 8px; padding: 6px 8px; background: #fff; border-radius: 6px; border: 1px solid rgba(0,0,0,.06); position: relative; }
.member-info-row.poin-detail { background: #fafbfc; margin-top: 4px; }
.member-info-row .info-value { font-size: .9em; font-weight: 700; color: #1f2937; padding: 4px 0; }
.info-label-main { font-size: .8em; font-weight: 600; color: #4b5563; text-align: center; line-height: 1.2; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(0,0,0,.06); }
.member-info-columns { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.member-info-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 4px; }
.member-info-item.center { display: none; }
.info-label-small { font-size: .75em; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.info-value-number { font-size: 1.1em; font-weight: 700; color: #1f2937; }
.card-member:hover .member-info-row { border-color: rgba(102,126,234,.15); }
.card-member:hover .member-info-label { border-color: rgba(102,126,234,.15); background: #f3f4f6; }
.card-member:hover .member-info-compact { border-color: rgba(102,126,234,.15); background: #f3f4f6; }
.card-member:hover .member-name-header { border-color: rgba(102,126,234,.3); }
.bg-premium  { background: linear-gradient(135deg,#6b0a0a,#9b1c1c 35%,#c0392b 65%,#8b1a1a); color: #f5c97a !important; box-shadow: 0 2px 8px rgba(139,26,26,.5); }
.bg-silver   { background: linear-gradient(135deg,#6e7580,#a8b0bc 45%,#d0d6de 75%,#8e96a2); color: #1a2030 !important; box-shadow: 0 2px 8px rgba(100,116,139,.35); }
.bg-mitra    { background: linear-gradient(135deg,#9333ea,#a855f7); color: #fff !important; }
.bg-emerald  { background: linear-gradient(135deg,#10b981,#34d399); color: #fff !important; }
/* pj-node-member plan grades */
.pj-node-member.bg-basic    { background:linear-gradient(160deg,#1e2d50 0%,#243260 55%,#1a2848 100%); border-color:rgba(160,175,210,.35); box-shadow:0 2px 10px rgba(20,30,70,.5), inset 0 1px 0 rgba(180,190,210,.2); }
.pj-node-member.bg-bronze   { background:linear-gradient(160deg,#1e2d50 0%,#243260 55%,#1a2848 100%); border-color:rgba(180,110,60,.5);   box-shadow:0 2px 12px rgba(160,100,50,.4),  inset 0 1px 0 rgba(210,150,90,.15); }
.pj-node-member.bg-gold     { background:linear-gradient(160deg,#1e2d50 0%,#243260 55%,#1a2848 100%); border-color:rgba(200,162,30,.55);  box-shadow:0 2px 12px rgba(180,140,10,.4),  inset 0 1px 0 rgba(230,195,60,.15); }
.pj-node-member.bg-diamond  { background:linear-gradient(160deg,#1e2d50 0%,#243260 55%,#1a2848 100%); border-color:rgba(190,215,245,.5);  box-shadow:0 3px 16px rgba(180,210,245,.35), inset 0 1px 0 rgba(220,235,255,.2); }
.pj-node-member.bg-platinum { background:linear-gradient(160deg,#1e2d50 0%,#243260 55%,#1a2848 100%); border-color:rgba(170,185,215,.45); box-shadow:0 2px 10px rgba(140,155,185,.35), inset 0 1px 0 rgba(200,210,230,.2); }
/* node text colors per grade */
.pj-node-member.bg-basic    .pj-node-name, .pj-node-member.bg-basic    .pj-node-id { color:#c8d0e0; }
.pj-node-member.bg-bronze   .pj-node-name, .pj-node-member.bg-bronze   .pj-node-id { color:#d4956a; }
.pj-node-member.bg-gold     .pj-node-name, .pj-node-member.bg-gold     .pj-node-id { color:#e8c84a; }
.pj-node-member.bg-diamond  .pj-node-name, .pj-node-member.bg-diamond  .pj-node-id { color:#c8e0f4; }
.pj-node-member.bg-platinum .pj-node-name, .pj-node-member.bg-platinum .pj-node-id { color:#c8cede; }
.pj-node-member.bg-basic    .pj-kiri-count, .pj-node-member.bg-basic    .pj-kanan-count { color:#a0b0d0; }
.pj-node-member.bg-bronze   .pj-kiri-count, .pj-node-member.bg-bronze   .pj-kanan-count { color:#d4956a; }
.pj-node-member.bg-gold     .pj-kiri-count, .pj-node-member.bg-gold     .pj-kanan-count { color:#e8c84a; }
.pj-node-member.bg-diamond  .pj-kiri-count, .pj-node-member.bg-diamond  .pj-kanan-count { color:#b8d8f8; }
.pj-node-member.bg-platinum .pj-kiri-count, .pj-node-member.bg-platinum .pj-kanan-count { color:#c8cede; }
.bg-default  { background: linear-gradient(135deg,#6b7280,#9ca3af); color: #fff !important; }
.text-default { color: #4f4f4f !important; }
.text-blue span { color: #243898 !important; }
.text-yellow span { color: #d5a728 !important; }
.text-purple span { color: #9c2984 !important; }
.text-red span { color: #d51111 !important; }
.plan-member { background: rgba(255,255,255,.2); padding: 4px 8px; border-radius: 12px; backdrop-filter: blur(10px); display: inline-block; margin: 4px 0; box-shadow: 0 2px 4px rgba(0,0,0,.1); }
@keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } }
.skeleton { background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size: 1000px 100%; animation: shimmer 2s infinite; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.page-title { font-size: 1.5rem; font-weight: 900; color: #312e81; text-transform: uppercase; letter-spacing: -.025em; margin: 0; }
.btn-search-toggle { background: linear-gradient(135deg,#667eea,#764ba2); color: white; border: none; padding: .5rem 1rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(102,126,234,.3); transition: all .3s ease; display: flex; align-items: center; gap: .5rem; font-weight: 500; cursor: pointer; font-size: 14px; }
.btn-search-toggle:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(102,126,234,.4); }
.btn-search-toggle:active { transform: translateY(0); }
.form-container { display: none; background: white; padding: 1.5rem; border-radius: 16px; box-shadow: 0 4px 8px rgba(0,0,0,.08); border: 1px solid #e5e7eb; margin-bottom: 2rem; }
.form-container.active { animation: slideDown .3s cubic-bezier(.4,0,.2,1) forwards; display: block; }
@keyframes slideDown { 0% { transform: translateY(-20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.mu-contact-form .form-group { position: relative; margin-bottom: 0; }
.mu-contact-form .form-group input { border-radius: 12px; color: #1f2937; font-size: 14px; border: 2px solid #e5e7eb; height: 48px; padding: 0 1.5rem; transition: all .3s ease; background: white; width: 100%; }
.mu-contact-form .form-group input:focus { border-color: #667eea; box-shadow: 0 0 0 4px rgba(102,126,234,.15); outline: none; }
.mu-contact-form .form-group input::placeholder { color: #9ca3af; }
.tree-container { background: white; padding: 2rem; border-radius: 16px; box-shadow: 0 4px 8px rgba(0,0,0,.08); border: 1px solid #f3f4f6; }
.btn-upline { background: linear-gradient(135deg,#667eea,#764ba2); color: white !important; padding: 10px 1.5rem; border-radius: 12px; display: inline-block; transition: all .3s ease; box-shadow: 0 4px 12px rgba(102,126,234,.3); text-decoration: none; border: none; font-weight: 600; min-width: 120px; text-align: center; cursor: pointer; }
.btn-upline:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(102,126,234,.4); color: white !important; }
.btn-upline:active { transform: translateY(0); }
.btn-upline i { font-size: 1.1em; }
.card-poin { max-height: 0; overflow: hidden; opacity: 0; transform: scaleY(0); transform-origin: top; transition: max-height .3s ease-out, opacity .3s ease-out, transform .3s ease-out, margin .3s ease-out; margin: 0; }
.card-poin.show { max-height: 600px; opacity: 1; transform: scaleY(1); }
.btn-toggle-poin { background: transparent; border: 1px solid rgba(0,0,0,.06); color: #4b5563; padding: 6px 12px; font-size: 10px; border-radius: 6px; }
@media (max-width: 768px) {
    .card-member { width: 120px; font-size: 10px; }
    .card-member .card-member-header { width: 60px; height: 60px; border: 2.5px solid #667eea; margin: 8px auto 5px; }
    .tree li { padding: 20px 2px; }
    .member-profile h3 { font-size: 1em; padding: 0 4px; }
    .member-info span:first-child, .member-info span:last-child { width: 40px; font-size: .85em; padding: 5px 2px; }
    .member-packet { width: 85px !important; padding: 3px 5px !important; font-size: .85em !important; }
    .member-info-label { margin: 4px 6px 6px; padding: 4px 6px; }
}
@media (max-width: 480px) {
    .card-member { width: 105px; font-size: 9px; }
    .card-member .card-member-header { width: 52px; height: 52px; border: 2px solid #667eea; margin: 5px auto 4px; }
    .tree li { padding: 15px 1px; }
    .member-info span:first-child, .member-info span:last-child { width: 35px; font-size: .8em; padding: 4px 2px; }
    .member-packet { width: 80px !important; font-size: .8em !important; }
}

/* ================================================================
   33. GENEALOGY LEVEL — gl-* components
   ================================================================ */
.gl-page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.gl-content { flex: 1; padding-bottom: 80px; }
.gl-page-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 0 10px; }
.gl-page-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gl-back-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); color: var(--mlm-theme-color,#c9a227); text-decoration: none; flex-shrink: 0; transition: background .18s; font-size: 12px; }
.gl-back-btn:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.2); color: var(--mlm-theme-color,#c9a227); text-decoration: none; }
.gl-page-title { font-size: 15px; font-weight: 800; color: var(--mlm-page-text,#fff); line-height: 1.2; }
body.theme-gold-light .gl-page-title, body.theme-blue-light .gl-page-title, body.theme-green-light .gl-page-title, body.theme-purple-light .gl-page-title, body.theme-red-light .gl-page-title { color: #111827; }
.gl-page-sub { font-size: 10px; color: rgba(148,163,184,.65); margin-top: 1px; }
body.theme-gold-light .gl-page-sub, body.theme-blue-light .gl-page-sub, body.theme-green-light .gl-page-sub, body.theme-purple-light .gl-page-sub, body.theme-red-light .gl-page-sub { color: rgba(71,85,105,.6); }
.gl-search-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); color: var(--mlm-theme-color,#c9a227); cursor: pointer; flex-shrink: 0; transition: background .18s; font-size: 12px; }
.gl-search-toggle:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.2); }
.gl-search-bar { margin-bottom: 10px; }
.gl-search-inner { position: relative; display: flex; align-items: center; }
.gl-search-icon { position: absolute; left: 12px; color: rgba(148,163,184,.5); font-size: 11px; pointer-events: none; }
body.theme-gold-light .gl-search-icon, body.theme-blue-light .gl-search-icon, body.theme-green-light .gl-search-icon, body.theme-purple-light .gl-search-icon, body.theme-red-light .gl-search-icon { color: rgba(71,85,105,.5); }
.gl-search-input { width: 100%; background: rgba(15,15,15,.7); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.18); border-radius: 12px; padding: 10px 36px 10px 34px; font-size: 12px; color: #fff; outline: none; transition: border-color .18s; box-sizing: border-box; }
body.theme-gold-light .gl-search-input, body.theme-blue-light .gl-search-input, body.theme-green-light .gl-search-input, body.theme-purple-light .gl-search-input, body.theme-red-light .gl-search-input { background: #fff; border-color: rgba(var(--mlm-theme-color-rgb,201,162,39),.25); color: #111827; }
.gl-search-input:focus { border-color: var(--mlm-theme-color,#c9a227); }
.gl-search-input::placeholder { color: rgba(148,163,184,.45); }
body.theme-gold-light .gl-search-input::placeholder, body.theme-blue-light .gl-search-input::placeholder, body.theme-green-light .gl-search-input::placeholder, body.theme-purple-light .gl-search-input::placeholder, body.theme-red-light .gl-search-input::placeholder { color: rgba(71,85,105,.45); }
.gl-search-clear { position: absolute; right: 10px; background: none; border: none; color: rgba(148,163,184,.5); cursor: pointer; padding: 4px; font-size: 11px; }
body.theme-gold-light .gl-search-clear, body.theme-blue-light .gl-search-clear, body.theme-green-light .gl-search-clear, body.theme-purple-light .gl-search-clear, body.theme-red-light .gl-search-clear { color: rgba(71,85,105,.5); }
.gl-stats { display: flex; align-items: stretch; background: linear-gradient(135deg,rgba(15,15,15,.9),rgba(5,5,5,.97)); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.14); border-radius: 16px; margin-bottom: 10px; overflow: hidden; }
body.theme-gold-light .gl-stats, body.theme-blue-light .gl-stats, body.theme-green-light .gl-stats, body.theme-purple-light .gl-stats, body.theme-red-light .gl-stats { background: linear-gradient(135deg,#fff,#fdfbf3); border-color: rgba(var(--mlm-theme-color-rgb,201,162,39),.2); box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.gl-stat-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 14px 8px; text-align: center; min-width: 0; }
.gl-stat-val { font-size: 19px; font-weight: 900; color: var(--mlm-theme-color,#c9a227); line-height: 1; }
.gl-stat-label { font-size: 9px; font-weight: 600; color: rgba(148,163,184,.65); text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; }
body.theme-gold-light .gl-stat-label, body.theme-blue-light .gl-stat-label, body.theme-green-light .gl-stat-label, body.theme-purple-light .gl-stat-label, body.theme-red-light .gl-stat-label { color: rgba(71,85,105,.6); }
.gl-stat-divider { width: 1px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); align-self: stretch; flex-shrink: 0; }
.gl-level-tabs-wrap { margin-bottom: 10px; overflow: hidden; }
.gl-level-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.gl-level-tabs::-webkit-scrollbar { display: none; }
.gl-level-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 12px; text-decoration: none; flex-shrink: 0; min-width: 44px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.07); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.13); transition: background .18s, border-color .18s; }
body.theme-gold-light .gl-level-tab, body.theme-blue-light .gl-level-tab, body.theme-green-light .gl-level-tab, body.theme-purple-light .gl-level-tab, body.theme-red-light .gl-level-tab { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.06); border-color: rgba(var(--mlm-theme-color-rgb,201,162,39),.18); }
.gl-level-tab:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.15); border-color: rgba(var(--mlm-theme-color-rgb,201,162,39),.35); text-decoration: none; }
.gl-level-tab.active { background: var(--mlm-theme-color,#c9a227); border-color: var(--mlm-theme-color,#c9a227); }
.gl-level-tab-num { font-size: 14px; font-weight: 900; color: var(--mlm-theme-color,#c9a227); line-height: 1; }
.gl-level-tab.active .gl-level-tab-num { color: #000; }
.gl-level-tab-count { font-size: 9px; font-weight: 700; color: rgba(148,163,184,.6); line-height: 1; }
body.theme-gold-light .gl-level-tab-count, body.theme-blue-light .gl-level-tab-count, body.theme-green-light .gl-level-tab-count, body.theme-purple-light .gl-level-tab-count, body.theme-red-light .gl-level-tab-count { color: rgba(71,85,105,.6); }
.gl-level-tab.active .gl-level-tab-count { color: rgba(0,0,0,.6); }
.gl-card { background: linear-gradient(135deg,rgba(15,15,15,.9),rgba(5,5,5,.97)); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.14); border-radius: 18px; overflow: hidden; margin-bottom: 10px; }
body.theme-gold-light .gl-card, body.theme-blue-light .gl-card, body.theme-green-light .gl-card, body.theme-purple-light .gl-card, body.theme-red-light .gl-card { background: linear-gradient(135deg,#fff,#fdfbf3); border-color: rgba(var(--mlm-theme-color-rgb,201,162,39),.2); box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.gl-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.1); }
.gl-card-head-icon { width: 32px; height: 32px; border-radius: 9px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.12); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); display: flex; align-items: center; justify-content: center; color: var(--mlm-theme-color,#c9a227); font-size: 13px; flex-shrink: 0; }
.gl-card-head-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gl-card-head-title { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.2; }
body.theme-gold-light .gl-card-head-title, body.theme-blue-light .gl-card-head-title, body.theme-green-light .gl-card-head-title, body.theme-purple-light .gl-card-head-title, body.theme-red-light .gl-card-head-title { color: #111827; }
.gl-card-head-sub { font-size: 10px; color: rgba(148,163,184,.6); }
body.theme-gold-light .gl-card-head-sub, body.theme-blue-light .gl-card-head-sub, body.theme-green-light .gl-card-head-sub, body.theme-purple-light .gl-card-head-sub, body.theme-red-light .gl-card-head-sub { color: rgba(71,85,105,.6); }
.gl-nav-pills { display: flex; gap: 5px; flex-shrink: 0; }
.gl-nav-pill { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.08); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.15); color: var(--mlm-theme-color,#c9a227); text-decoration: none; font-size: 10px; transition: background .18s; }
.gl-nav-pill:hover:not(.disabled) { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.2); color: var(--mlm-theme-color,#c9a227); text-decoration: none; }
.gl-nav-pill.disabled { opacity: .3; pointer-events: none; }
.gl-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.06); transition: background .15s; }
.gl-row:last-of-type { border-bottom: none; }
.gl-row:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.04); }
body.theme-gold-light .gl-row:hover, body.theme-blue-light .gl-row:hover, body.theme-green-light .gl-row:hover, body.theme-purple-light .gl-row:hover, body.theme-red-light .gl-row:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.05); }
.gl-avatar { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; flex-shrink: 0; color: #fff; letter-spacing: -.5px; }
.gl-avatar.kiri  { background: linear-gradient(135deg,#3b82f6,#1d4ed8); }
.gl-avatar.kanan { background: linear-gradient(135deg,#10b981,#047857); }
.gl-avatar:not(.kiri):not(.kanan) { background: linear-gradient(135deg,var(--mlm-theme-color,#c9a227),rgba(var(--mlm-theme-color-rgb,201,162,39),.45)); }
.gl-info { flex: 1; min-width: 0; }
.gl-name { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
body.theme-gold-light .gl-name, body.theme-blue-light .gl-name, body.theme-green-light .gl-name, body.theme-purple-light .gl-name, body.theme-red-light .gl-name { color: #111827; }
.gl-meta { display: flex; align-items: center; gap: 5px; margin-top: 1px; flex-wrap: wrap; }
.gl-id-text { font-size: 10px; color: rgba(148,163,184,.65); font-family: monospace; }
body.theme-gold-light .gl-id-text, body.theme-blue-light .gl-id-text, body.theme-green-light .gl-id-text, body.theme-purple-light .gl-id-text, body.theme-red-light .gl-id-text { color: rgba(71,85,105,.65); }
.gl-dot { font-size: 10px; color: rgba(148,163,184,.3); }
body.theme-gold-light .gl-dot, body.theme-blue-light .gl-dot, body.theme-green-light .gl-dot, body.theme-purple-light .gl-dot, body.theme-red-light .gl-dot { color: rgba(71,85,105,.3); }
.gl-date { font-size: 10px; color: rgba(148,163,184,.5); white-space: nowrap; }
body.theme-gold-light .gl-date, body.theme-blue-light .gl-date, body.theme-green-light .gl-date, body.theme-purple-light .gl-date, body.theme-red-light .gl-date { color: rgba(71,85,105,.45); }
.gl-pos-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; padding: 4px 9px; border-radius: 7px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .04em; }
.gl-pos-badge.kiri  { background: rgba(59,130,246,.14); color: #93c5fd; border: 1px solid rgba(59,130,246,.22); }
.gl-pos-badge.kanan { background: rgba(16,185,129,.14); color: #6ee7b7; border: 1px solid rgba(16,185,129,.22); }
body.theme-gold-light .gl-pos-badge.kiri, body.theme-blue-light .gl-pos-badge.kiri, body.theme-green-light .gl-pos-badge.kiri, body.theme-purple-light .gl-pos-badge.kiri, body.theme-red-light .gl-pos-badge.kiri { background: rgba(59,130,246,.1); color: #1d4ed8; border-color: rgba(59,130,246,.3); }
body.theme-gold-light .gl-pos-badge.kanan, body.theme-blue-light .gl-pos-badge.kanan, body.theme-green-light .gl-pos-badge.kanan, body.theme-purple-light .gl-pos-badge.kanan, body.theme-red-light .gl-pos-badge.kanan { background: rgba(16,185,129,.1); color: #047857; border-color: rgba(16,185,129,.3); }
.gl-empty { padding: 40px 20px; text-align: center; color: rgba(148,163,184,.5); font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
body.theme-gold-light .gl-empty, body.theme-blue-light .gl-empty, body.theme-green-light .gl-empty, body.theme-purple-light .gl-empty, body.theme-red-light .gl-empty { color: rgba(71,85,105,.5); }
.gl-empty i { font-size: 28px; opacity: .4; }
.gl-empty p { margin: 0; }
.gl-bottom-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0 8px; }
.gl-bottom-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 12px; font-size: 11.5px; font-weight: 700; text-decoration: none; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.08); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.18); color: var(--mlm-theme-color,#c9a227); transition: background .18s, border-color .18s; }
.gl-bottom-btn:hover:not(.disabled) { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.18); border-color: var(--mlm-theme-color,#c9a227); text-decoration: none; color: var(--mlm-theme-color,#c9a227); }
.gl-bottom-btn.disabled { opacity: .28; pointer-events: none; }
.gl-bottom-info { display: flex; align-items: center; gap: 4px; font-size: 11px; color: rgba(148,163,184,.55); font-weight: 600; }
body.theme-gold-light .gl-bottom-info, body.theme-blue-light .gl-bottom-info, body.theme-green-light .gl-bottom-info, body.theme-purple-light .gl-bottom-info, body.theme-red-light .gl-bottom-info { color: rgba(71,85,105,.55); }
.gl-bottom-lv { font-size: 16px; font-weight: 900; color: var(--mlm-theme-color,#c9a227); line-height: 1; }
.gl-bottom-sep { font-size: 13px; color: rgba(148,163,184,.3); }
body.theme-gold-light .gl-bottom-sep, body.theme-blue-light .gl-bottom-sep, body.theme-green-light .gl-bottom-sep, body.theme-purple-light .gl-bottom-sep, body.theme-red-light .gl-bottom-sep { color: rgba(71,85,105,.3); }

/* ================================================================
   34. GENEALOGY SPONSOR — gs-* (page wrap + search + stats + nodes)
   ================================================================ */
.gs-page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.gs-content { flex: 1; padding-bottom: 80px; }
.gs-search-bar { padding: 14px 0 4px; }
.gs-search-inner { display: flex; align-items: center; gap: 8px; }
.gs-search-back-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); color: var(--mlm-theme-color,#c9a227); text-decoration: none; font-size: 13px; transition: background .18s; }
.gs-search-back-btn:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.2); color: var(--mlm-theme-color,#c9a227); text-decoration: none; }
.gs-search-wrap { flex: 1; position: relative; }
.gs-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(148,163,184,.5); font-size: 11px; pointer-events: none; }
body.theme-gold-light .gs-search-icon, body.theme-blue-light .gs-search-icon, body.theme-green-light .gs-search-icon, body.theme-purple-light .gs-search-icon, body.theme-red-light .gs-search-icon { color: rgba(71,85,105,.45); }
.gs-search-input { width: 100%; background: rgba(15,15,15,.7); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.18); border-radius: 12px; padding: 10px 36px 10px 32px; font-size: 12px; color: #fff; outline: none; box-sizing: border-box; transition: border-color .18s; }
body.theme-gold-light .gs-search-input, body.theme-blue-light .gs-search-input, body.theme-green-light .gs-search-input, body.theme-purple-light .gs-search-input, body.theme-red-light .gs-search-input { background: #fff; color: #111827; border-color: rgba(var(--mlm-theme-color-rgb,201,162,39),.25); }
.gs-search-input:focus { border-color: var(--mlm-theme-color,#c9a227); }
.gs-search-input::placeholder { color: rgba(148,163,184,.45); }
body.theme-gold-light .gs-search-input::placeholder, body.theme-blue-light .gs-search-input::placeholder, body.theme-green-light .gs-search-input::placeholder, body.theme-purple-light .gs-search-input::placeholder, body.theme-red-light .gs-search-input::placeholder { color: rgba(71,85,105,.4); }
.gs-search-submit { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--mlm-theme-color,#c9a227); cursor: pointer; padding: 4px; font-size: 12px; }
.gs-stats { display: flex; background: linear-gradient(135deg,rgba(15,15,15,.9),rgba(5,5,5,.97)); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.14); border-radius: 16px; margin-bottom: 10px; overflow: hidden; }
body.theme-gold-light .gs-stats, body.theme-blue-light .gs-stats, body.theme-green-light .gs-stats, body.theme-purple-light .gs-stats, body.theme-red-light .gs-stats { background: linear-gradient(135deg,#fff,#fdfbf3); border-color: rgba(var(--mlm-theme-color-rgb,201,162,39),.2); box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.gs-stat-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 14px 8px; text-align: center; }
.gs-stat-val { font-size: 19px; font-weight: 900; color: var(--mlm-theme-color,#c9a227); line-height: 1; }
.gs-stat-label { font-size: 9px; font-weight: 600; color: rgba(148,163,184,.65); text-transform: uppercase; letter-spacing: .04em; }
body.theme-gold-light .gs-stat-label, body.theme-blue-light .gs-stat-label, body.theme-green-light .gs-stat-label, body.theme-purple-light .gs-stat-label, body.theme-red-light .gs-stat-label { color: rgba(71,85,105,.6); }
.gs-stat-divider { width: 1px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); align-self: stretch; flex-shrink: 0; }
.gs-node { background: linear-gradient(135deg,rgba(15,15,15,.9),rgba(5,5,5,.97)); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.14); border-radius: 16px; margin-bottom: 6px; overflow: hidden; cursor: pointer; transition: border-color .18s, box-shadow .18s; }
body.theme-gold-light .gs-node, body.theme-blue-light .gs-node, body.theme-green-light .gs-node, body.theme-purple-light .gs-node, body.theme-red-light .gs-node { background: #fff; border-color: rgba(var(--mlm-theme-color-rgb,201,162,39),.18); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.gs-node:hover { border-color: rgba(var(--mlm-theme-color-rgb,201,162,39),.35); }
.gs-node.expanded { border-color: var(--mlm-theme-color,#c9a227); }
.gs-node-inner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.gs-lvl { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.12); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: var(--mlm-theme-color,#c9a227); }
.gs-mid { flex: 1; min-width: 0; }
.gs-id { font-size: 11px; font-weight: 700; color: rgba(148,163,184,.8); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.theme-gold-light .gs-id, body.theme-blue-light .gs-id, body.theme-green-light .gs-id, body.theme-purple-light .gs-id, body.theme-red-light .gs-id { color: rgba(71,85,105,.75); }
.gs-plan { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.12); color: var(--mlm-theme-color,#c9a227); margin-left: 4px; vertical-align: middle; }
.gs-name { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.theme-gold-light .gs-name, body.theme-blue-light .gs-name, body.theme-green-light .gs-name, body.theme-purple-light .gs-name, body.theme-red-light .gs-name { color: #111827; }
.gs-ro-active .gs-ro { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(61,186,120,.13); color: #3dba78; border: 1px solid rgba(61,186,120,.2); }
.gs-ro-last .gs-ro { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(245,158,11,.12); color: #f59e0b; border: 1px solid rgba(245,158,11,.2); }
.gs-ro-none .gs-ro { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(148,163,184,.08); color: rgba(148,163,184,.6); border: 1px solid rgba(148,163,184,.12); }
body.theme-gold-light .gs-ro-none .gs-ro, body.theme-blue-light .gs-ro-none .gs-ro, body.theme-green-light .gs-ro-none .gs-ro, body.theme-purple-light .gs-ro-none .gs-ro, body.theme-red-light .gs-ro-none .gs-ro { color: rgba(71,85,105,.55); }
.gs-right { text-align: right; flex-shrink: 0; }
.gs-date { font-size: 9.5px; color: rgba(148,163,184,.55); white-space: nowrap; margin-bottom: 3px; }
body.theme-gold-light .gs-date, body.theme-blue-light .gs-date, body.theme-green-light .gs-date, body.theme-purple-light .gs-date, body.theme-red-light .gs-date { color: rgba(71,85,105,.5); }
.gs-spon { font-size: 9.5px; color: rgba(148,163,184,.7); white-space: nowrap; }
body.theme-gold-light .gs-spon, body.theme-blue-light .gs-spon, body.theme-green-light .gs-spon, body.theme-purple-light .gs-spon, body.theme-red-light .gs-spon { color: rgba(71,85,105,.6); }
.gs-spon b { color: var(--mlm-theme-color,#c9a227); }
.gs-chevron { flex-shrink: 0; font-size: 10px; color: rgba(148,163,184,.4); transition: transform .22s; }
body.theme-gold-light .gs-chevron, body.theme-blue-light .gs-chevron, body.theme-green-light .gs-chevron, body.theme-purple-light .gs-chevron, body.theme-red-light .gs-chevron { color: rgba(71,85,105,.35); }
.gs-node.expanded .gs-chevron { transform: rotate(90deg); color: var(--mlm-theme-color,#c9a227); }
.gs-children { padding: 0 0 0 28px; }
.gs-root-node { background: linear-gradient(135deg,rgba(var(--mlm-theme-color-rgb,201,162,39),.18),rgba(var(--mlm-theme-color-rgb,201,162,39),.06)); border-color: rgba(var(--mlm-theme-color-rgb,201,162,39),.35); cursor: default; }
body.theme-gold-light .gs-root-node, body.theme-blue-light .gs-root-node, body.theme-green-light .gs-root-node, body.theme-purple-light .gs-root-node, body.theme-red-light .gs-root-node { background: linear-gradient(135deg,rgba(var(--mlm-theme-color-rgb,201,162,39),.1),rgba(var(--mlm-theme-color-rgb,201,162,39),.03)); }
.gs-root-node .gs-lvl { background: var(--mlm-theme-color,#c9a227); color: #000; border-color: var(--mlm-theme-color,#c9a227); font-size: 13px; }
.gs-root-node .gs-name { color: var(--mlm-theme-color,#c9a227); font-size: 14px; }
.gs-child-item { position: relative; padding-top: 6px; }
.gs-child-item::before { content: ''; position: absolute; top: 0; left: -14px; width: 14px; height: 26px; border-left: 2px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); border-bottom: 2px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); border-radius: 0 0 0 6px; }
.gs-loading { padding: 12px 14px 14px 28px; font-size: 11px; color: rgba(148,163,184,.5); display: flex; align-items: center; gap: 8px; }
body.theme-gold-light .gs-loading, body.theme-blue-light .gs-loading, body.theme-green-light .gs-loading, body.theme-purple-light .gs-loading, body.theme-red-light .gs-loading { color: rgba(71,85,105,.5); }
@keyframes gs-spin { to { transform: rotate(360deg); } }
.gs-spinner { width: 14px; height: 14px; flex-shrink: 0; border: 2px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); border-top-color: var(--mlm-theme-color,#c9a227); border-radius: 50%; animation: gs-spin .7s linear infinite; }
.gs-empty { padding: 40px 0; text-align: center; color: rgba(148,163,184,.45); font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
body.theme-gold-light .gs-empty, body.theme-blue-light .gs-empty, body.theme-green-light .gs-empty, body.theme-purple-light .gs-empty, body.theme-red-light .gs-empty { color: rgba(71,85,105,.45); }
.gs-empty i { font-size: 28px; opacity: .35; }

/* ================================================================
   35. PRODUCT DETAIL DISPLAY — legacy produk detail page classes
   ================================================================ */
.img-display { overflow: hidden; }
.img-select { display: flex; margin-top: 10px; gap: 10px; }
.img-item:hover { opacity: .8; }
.product-content { padding: 0; }
.product-content p { color: #464646; font-size: .9rem; font-weight: 400; }
.product-title { font-size: 1rem !important; font-weight: 700 !important; position: relative; color: #3B6790 !important; margin: 0; }
.product-title-cart { font-size: 1rem !important; font-weight: 600 !important; position: relative; color: #464646 !important; margin: 1rem 0; }
.product-link { text-decoration: none; text-transform: uppercase; font-weight: 400; font-size: .9rem; display: inline-block; margin-bottom: .5rem; background: #256eff; color: #fff; padding: 0 .3rem; transition: all .5s ease; }
.product-link:hover { opacity: .9; }
.product-rating { color: #ffc107; }
.product-rating span { font-weight: 600; color: #252525; }
.product-price { color: #464646 !important; font-size: 1rem !important; font-weight: 600 !important; }
.product-price-cart { color: #464646 !important; font-size: 1rem !important; font-weight: 400 !important; }
.last-price span { color: #f64749; text-decoration: line-through; }
.new-price span { color: #ee5b1e; }
.text-price { color: #ee5b1e !important; }
.product-detail h2 { text-transform: capitalize; color: #12263a; padding-bottom: .6rem; }
.product-detail p { font-size: .9rem; padding: 0; opacity: .8; }
.product-detail ul { margin: 1rem 0; font-size: .9rem; }
.product-detail ul li { margin: .4rem 0; list-style: none; padding-left: 1.7rem; font-weight: 600; opacity: .9; }
.product-detail ul li span { font-weight: 400; }
.purchase-info { margin: 1.5rem 0; display: flex; }
.purchase-info input, .purchase-info .btn { border: 1.5px solid #ddd; border-radius: 25px; text-align: center; padding: .45rem .8rem; outline: 0; margin-right: .2rem; margin-bottom: 1rem; }
.purchase-info input { width: 60px; }
.purchase-info .btn { cursor: pointer; color: #fff; }
.purchase-info .btn:first-of-type { background: #256eff; }
.purchase-info .btn:last-of-type { background: #f64749; }
.purchase-info .btn:hover { opacity: .9; }
.social-links { display: flex; align-items: center; }
.social-links a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: #000; border: none; margin: 0 .2rem; border-radius: 50%; text-decoration: none; font-size: .8rem; transition: all .5s ease; }

/* ================================================================
   36. FORM MEMBER CREATE / UPGRADE — mc-* page components
   ================================================================ */
.mc-page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
/* alert no PIN */
.mc-alert-no-pin { display: flex; align-items: center; gap: 10px; background: rgba(220,38,38,.1); border: 1px solid rgba(220,38,38,.2); border-radius: 14px; padding: 14px 16px; color: #f87171; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
body.theme-gold-light .mc-alert-no-pin,body.theme-blue-light .mc-alert-no-pin,body.theme-green-light .mc-alert-no-pin,body.theme-purple-light .mc-alert-no-pin,body.theme-red-light .mc-alert-no-pin { background: rgba(220,38,38,.06); color: #b91c1c; }
/* section label */
.mc-section-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--mlm-theme-color-rgb,201,162,39),.75); padding: 18px 0 8px; display: flex; align-items: center; gap: 7px; }
/* card container */
.mc-card { background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border); border-radius: 16px; padding: 16px; margin-bottom: 8px; }
/* input group — floating label style */
.mc-input-group { position: relative; margin-top: 14px; }
.mc-input-group label { position: absolute; top: 9px; left: 14px; font-size: 10px; font-weight: 700; color: rgba(var(--mlm-theme-color-rgb,201,162,39),.7); letter-spacing: .04em; text-transform: uppercase; pointer-events: none; z-index: 1; }
.mc-input-group .form-control,
.mc-input-group .form-select { background: rgba(255,255,255,.04); border: 1px solid var(--mlm-card-border); color: var(--mlm-page-text); border-radius: 12px; padding-top: 28px; }
body.theme-gold-light .mc-input-group .form-control,
body.theme-blue-light .mc-input-group .form-control,
body.theme-green-light .mc-input-group .form-control,
body.theme-purple-light .mc-input-group .form-control,
body.theme-red-light .mc-input-group .form-control,
body.theme-gold-light .mc-input-group .form-select,
body.theme-blue-light .mc-input-group .form-select,
body.theme-green-light .mc-input-group .form-select,
body.theme-purple-light .mc-input-group .form-select,
body.theme-red-light .mc-input-group .form-select { background: rgba(0,0,0,.04); }
/* hint text */
.mc-hint { font-size: 11px; color: rgba(148,163,184,.6); margin: 4px 0 0; padding: 0; }
body.theme-gold-light .mc-hint,body.theme-blue-light .mc-hint,body.theme-green-light .mc-hint,body.theme-purple-light .mc-hint,body.theme-red-light .mc-hint { color: rgba(71,85,105,.6); }
/* upline / posisi banner */
.mc-upline-banner { display: flex; align-items: center; gap: 12px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.07); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.15); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.mc-upline-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.15); display: flex; align-items: center; justify-content: center; color: var(--mlm-theme-color); font-size: 15px; }
.mc-upline-info { flex: 1; min-width: 0; }
.mc-upline-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(var(--mlm-theme-color-rgb,201,162,39),.65); }
.mc-upline-name { font-size: 14px; font-weight: 800; color: var(--mlm-page-text); }
.mc-upline-meta { font-size: 11px; color: rgba(148,163,184,.65); }
body.theme-gold-light .mc-upline-meta,body.theme-blue-light .mc-upline-meta,body.theme-green-light .mc-upline-meta,body.theme-purple-light .mc-upline-meta,body.theme-red-light .mc-upline-meta { color: rgba(71,85,105,.6); }
/* posisi badge */
.mc-pos-badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 8px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.14); color: var(--mlm-theme-color); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.25); }
/* ── mc pick modal (bottom-sheet) — sponsor & bank ── */
.mc-pick-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1080; align-items:center; justify-content:center; padding:16px; }
.mc-pick-overlay.open { display:flex; }
.mc-pick-sheet { background:var(--mlm-card-bg); border-radius:20px; width:100%; max-width:460px; max-height:82vh; display:flex; flex-direction:column; padding:0; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); }
body.theme-gold-light .mc-pick-sheet,body.theme-blue-light .mc-pick-sheet,body.theme-green-light .mc-pick-sheet,body.theme-purple-light .mc-pick-sheet,body.theme-red-light .mc-pick-sheet { background:#fff; }
.mc-pick-handle { display:none; }
.mc-pick-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; flex-shrink:0; }
.mc-pick-title { font-size:15px; font-weight:800; color:var(--mlm-page-text); }
.mc-pick-close { width:30px; height:30px; border-radius:50%; background:rgba(148,163,184,.15); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--mlm-page-text); font-size:14px; }
.mc-pick-search-wrap { position:relative; padding:10px 16px 12px; flex-shrink:0; border-bottom:1px solid var(--mlm-card-border); }
.mc-pick-search { width:100%; background:rgba(255,255,255,.06); border:1px solid var(--mlm-card-border); border-radius:12px; padding:10px 14px 10px 38px; font-size:13px; color:var(--mlm-page-text); outline:none; transition:border-color .15s; }
.mc-pick-search:focus { border-color:rgba(var(--mlm-theme-color-rgb,201,162,39),.5); }
body.theme-gold-light .mc-pick-search,body.theme-blue-light .mc-pick-search,body.theme-green-light .mc-pick-search,body.theme-purple-light .mc-pick-search,body.theme-red-light .mc-pick-search { background:rgba(0,0,0,.04); color:#1e293b; }
.mc-pick-search-icon { position:absolute; left:28px; top:50%; transform:translateY(-50%); color:rgba(148,163,184,.5); font-size:12px; pointer-events:none; }
.mc-pick-list { flex:1; overflow-y:auto; padding:4px 0 12px; }
.mc-pick-item { display:flex; align-items:center; gap:12px; padding:10px 16px; cursor:pointer; transition:background .13s; border-bottom:1px solid var(--mlm-card-border); }
.mc-pick-item:last-child { border-bottom:none; }
.mc-pick-item:hover,.mc-pick-item:active { background:rgba(var(--mlm-theme-color-rgb,201,162,39),.07); }
.mc-pick-item-icon { width:40px; height:40px; flex-shrink:0; border-radius:50%; background:rgba(var(--mlm-theme-color-rgb,201,162,39),.15); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; color:var(--mlm-theme-color); border:1.5px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.25); }
.mc-pick-item-name { font-size:13px; font-weight:700; color:var(--mlm-page-text); line-height:1.3; }
.mc-pick-item-sub { font-size:11px; color:rgba(148,163,184,.65); margin-top:2px; }
body.theme-gold-light .mc-pick-item-sub,body.theme-blue-light .mc-pick-item-sub,body.theme-green-light .mc-pick-item-sub,body.theme-purple-light .mc-pick-item-sub,body.theme-red-light .mc-pick-item-sub { color:rgba(71,85,105,.55); }
.mc-pick-item-check { margin-left:auto; flex-shrink:0; color:var(--mlm-theme-color); font-size:15px; display:none; }
.mc-pick-item.selected .mc-pick-item-check { display:block; }
.mc-pick-empty { text-align:center; padding:36px 16px; color:rgba(148,163,184,.5); font-size:13px; }
/* trigger button */
.mc-pick-trigger { display:flex; align-items:center; gap:10px; width:100%; background:rgba(255,255,255,.04); border:1px solid var(--mlm-card-border); border-radius:12px; padding:10px 14px; cursor:pointer; text-align:left; }
body.theme-gold-light .mc-pick-trigger,body.theme-blue-light .mc-pick-trigger,body.theme-green-light .mc-pick-trigger,body.theme-purple-light .mc-pick-trigger,body.theme-red-light .mc-pick-trigger { background:rgba(0,0,0,.04); }
.mc-pick-trigger-icon { width:36px; height:36px; flex-shrink:0; border-radius:10px; background:rgba(var(--mlm-theme-color-rgb,201,162,39),.12); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:var(--mlm-theme-color); }
.mc-pick-trigger-text { flex:1; min-width:0; }
.mc-pick-trigger-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:rgba(var(--mlm-theme-color-rgb,201,162,39),.7); }
.mc-pick-trigger-val { font-size:13px; font-weight:700; color:var(--mlm-page-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-pick-trigger-val.placeholder { color:rgba(148,163,184,.55); font-weight:400; }
body.theme-gold-light .mc-pick-trigger-val.placeholder,body.theme-blue-light .mc-pick-trigger-val.placeholder,body.theme-green-light .mc-pick-trigger-val.placeholder,body.theme-purple-light .mc-pick-trigger-val.placeholder,body.theme-red-light .mc-pick-trigger-val.placeholder { color:rgba(71,85,105,.4); }
.mc-pick-trigger-arrow { flex-shrink:0; color:rgba(148,163,184,.5); font-size:12px; }
/* selected card (sponsor) */
.mc-sponsor-selected { display:flex; align-items:center; gap:12px; background:rgba(var(--mlm-theme-color-rgb,201,162,39),.06); border:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.18); border-radius:12px; padding:10px 14px; }
.mc-sponsor-avatar { width:36px; height:36px; flex-shrink:0; border-radius:10px; background:rgba(var(--mlm-theme-color-rgb,201,162,39),.18); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:var(--mlm-theme-color); }
.mc-sponsor-name { font-size:13px; font-weight:800; color:var(--mlm-page-text); }
.mc-sponsor-meta { font-size:11px; color:rgba(148,163,184,.6); }
body.theme-gold-light .mc-sponsor-meta,body.theme-blue-light .mc-sponsor-meta,body.theme-green-light .mc-sponsor-meta,body.theme-purple-light .mc-sponsor-meta,body.theme-red-light .mc-sponsor-meta { color:rgba(71,85,105,.55); }
.mc-sponsor-change { margin-left:auto; flex-shrink:0; font-size:11px; font-weight:700; padding:5px 12px; border-radius:8px; background:rgba(var(--mlm-theme-color-rgb,201,162,39),.14); color:var(--mlm-theme-color); border:1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.22); cursor:pointer; }
/* submit btn */
.mc-submit-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border-radius: 14px; background: var(--mlm-theme-color); color: #000; font-size: 14px; font-weight: 800; border: none; cursor: pointer; margin-top: 16px; margin-bottom: 8px; transition: opacity .18s; }
.mc-submit-btn:hover { opacity: .88; }
/* PIN verify screen (single input) */
.mc-pin-wrap { display: flex; flex-direction: column; align-items: center; padding: 32px 24px 24px; text-align: center; }
.mc-pin-icon { width: 64px; height: 64px; border-radius: 20px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.12); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--mlm-theme-color); margin-bottom: 16px; }
.mc-pin-title { font-size: 18px; font-weight: 800; color: var(--mlm-page-text); margin-bottom: 6px; }
.mc-pin-sub { font-size: 12px; color: rgba(148,163,184,.7); margin-bottom: 20px; }
body.theme-gold-light .mc-pin-sub,body.theme-blue-light .mc-pin-sub,body.theme-green-light .mc-pin-sub,body.theme-purple-light .mc-pin-sub,body.theme-red-light .mc-pin-sub { color: rgba(71,85,105,.65); }
.mc-pin-input { width: 100%; max-width: 260px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--mlm-card-border); color: var(--mlm-page-text); font-size: 18px; font-weight: 800; text-align: center; letter-spacing: .25em; outline: none; transition: border-color .18s; }
body.theme-gold-light .mc-pin-input,body.theme-blue-light .mc-pin-input,body.theme-green-light .mc-pin-input,body.theme-purple-light .mc-pin-input,body.theme-red-light .mc-pin-input { background: rgba(0,0,0,.04); }
.mc-pin-input:focus { border-color: var(--mlm-theme-color); }
.mc-pin-error { font-size: 12px; font-weight: 600; color: #f87171; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.2); border-radius: 10px; padding: 8px 12px; margin: 10px 0; text-align: center; }
.mc-pin-btn { margin-top: 12px; padding: 12px 32px; border-radius: 12px; background: var(--mlm-theme-color); color: #000; font-size: 13px; font-weight: 800; border: none; cursor: pointer; transition: opacity .18s; }
.mc-pin-btn:hover { opacity: .88; }
.mc-pin-input-mask { -webkit-text-security: disc; text-security: disc; }
/* PIN screen (6-digit grid, used in upgrade) */
.mc-pin-screen { display: flex; flex-direction: column; align-items: center; padding: 32px 24px 16px; text-align: center; }
.mc-pin-desc { font-size: 12px; color: rgba(148,163,184,.7); margin-bottom: 24px; }
body.theme-gold-light .mc-pin-desc,body.theme-blue-light .mc-pin-desc,body.theme-green-light .mc-pin-desc,body.theme-purple-light .mc-pin-desc,body.theme-red-light .mc-pin-desc { color: rgba(71,85,105,.65); }
.mc-pin-inputs { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; }
.mc-pin-inputs .mc-pin-input { width: 44px; max-width: 44px; padding: 12px 0; font-size: 20px; letter-spacing: 0; border-radius: 12px; }

/* ================================================================
   37. STEP INDICATOR — mc-steps / mc-step / mc-step-line
   ================================================================ */
.mc-steps { display: flex; align-items: center; gap: 0; padding: 20px 0 18px; }
.mc-step { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.mc-step-circle { width: 34px; height: 34px; border-radius: 50%; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); border: 2px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgba(148,163,184,.5); transition: all .25s; }
body.theme-gold-light .mc-step-circle,body.theme-blue-light .mc-step-circle,body.theme-green-light .mc-step-circle,body.theme-purple-light .mc-step-circle,body.theme-red-light .mc-step-circle { color: rgba(71,85,105,.45); }
.mc-step-label { font-size: 9.5px; font-weight: 700; color: rgba(148,163,184,.55); letter-spacing: .03em; white-space: nowrap; }
body.theme-gold-light .mc-step-label,body.theme-blue-light .mc-step-label,body.theme-green-light .mc-step-label,body.theme-purple-light .mc-step-label,body.theme-red-light .mc-step-label { color: rgba(71,85,105,.5); }
.mc-step.active .mc-step-circle { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.18); border-color: var(--mlm-theme-color); color: var(--mlm-theme-color); }
.mc-step.active .mc-step-label { color: var(--mlm-theme-color); }
.mc-step.done .mc-step-circle { background: var(--mlm-theme-color); border-color: var(--mlm-theme-color); color: #000; }
.mc-step.done .mc-step-label { color: var(--mlm-theme-color); }
.mc-step-line { flex: 1; height: 2px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.14); border-radius: 2px; margin-bottom: 18px; transition: background .25s; }
.mc-step-line.done { background: var(--mlm-theme-color); }

/* ================================================================
   38. PAKET / PIN MODAL — mc-paket-*
   ================================================================ */
.mc-paket-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1060; display: none; align-items: flex-end; justify-content: center; }
.mc-paket-modal-backdrop.open { display: flex; }
@media (min-width: 540px) { .mc-paket-modal-backdrop.open { align-items: center; } }
.mc-paket-modal { background: var(--mlm-page-bg-2); border-radius: 20px 20px 0 0; width: 100%; max-width: 480px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 540px) { .mc-paket-modal { border-radius: 20px; } }
.mc-paket-modal-drag { width: 36px; height: 4px; border-radius: 4px; background: rgba(148,163,184,.25); margin: 10px auto 0; flex-shrink: 0; }
@media (min-width: 540px) { .mc-paket-modal-drag { display: none; } }
.mc-paket-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; border-bottom: 1px solid var(--mlm-card-border); flex-shrink: 0; }
.mc-paket-modal-title { font-size: 14px; font-weight: 800; color: var(--mlm-page-text); }
.mc-paket-modal-close { background: none; border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 9px; background: rgba(148,163,184,.1); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--mlm-page-text); }
.mc-paket-modal-body { flex: 1; overflow-y: auto; padding: 14px 16px 20px; }
.mc-paket-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.mc-paket-card { position: relative; background: var(--mlm-card-bg); border: 2px solid var(--mlm-card-border); border-radius: 14px; padding: 14px 12px 12px; cursor: pointer; transition: border-color .18s, box-shadow .18s; }
.mc-paket-card:hover { border-color: rgba(var(--mlm-theme-color-rgb,201,162,39),.4); }
.mc-paket-card.selected { border-color: var(--mlm-theme-color); box-shadow: 0 0 0 3px rgba(var(--mlm-theme-color-rgb,201,162,39),.18); }
.mc-paket-card.disabled { opacity: .5; cursor: default; pointer-events: none; }
.mc-paket-check { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--mlm-card-border); display: flex; align-items: center; justify-content: center; font-size: 9px; color: transparent; transition: all .18s; }
.mc-paket-card.selected .mc-paket-check { background: var(--mlm-theme-color); border-color: var(--mlm-theme-color); color: #000; }
.mc-paket-name { font-size: 13px; font-weight: 800; color: var(--mlm-page-text); margin-bottom: 4px; margin-right: 22px; }
.mc-paket-produk { font-size: 11px; color: rgba(148,163,184,.7); margin-bottom: 6px; }
body.theme-gold-light .mc-paket-produk,body.theme-blue-light .mc-paket-produk,body.theme-green-light .mc-paket-produk,body.theme-purple-light .mc-paket-produk,body.theme-red-light .mc-paket-produk { color: rgba(71,85,105,.6); }
.mc-paket-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mc-paket-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); color: var(--mlm-theme-color); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.18); }
.mc-paket-tag.reposisi { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.12); color: var(--mlm-theme-color); }
.mc-paket-tag.founder { background: rgba(250,204,21,.1); color: #facc15; border-color: rgba(250,204,21,.2); }
/* paket selected state (inline card) */
.mc-paket-selected-card { display: flex; align-items: center; gap: 12px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.07); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .18s; }
.mc-paket-selected-card:hover { border-color: rgba(var(--mlm-theme-color-rgb,201,162,39),.4); }
.mc-paket-selected-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.15); display: flex; align-items: center; justify-content: center; color: var(--mlm-theme-color); font-size: 15px; }
.mc-paket-selected-info { flex: 1; min-width: 0; }
.mc-paket-selected-name { font-size: 13px; font-weight: 800; color: var(--mlm-page-text); }
.mc-paket-selected-sub { font-size: 11px; color: rgba(148,163,184,.65); margin-top: 2px; }
body.theme-gold-light .mc-paket-selected-sub,body.theme-blue-light .mc-paket-selected-sub,body.theme-green-light .mc-paket-selected-sub,body.theme-purple-light .mc-paket-selected-sub,body.theme-red-light .mc-paket-selected-sub { color: rgba(71,85,105,.6); }
.mc-paket-selected-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mc-paket-ganti-btn { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 8px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.14); color: var(--mlm-theme-color); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.22); cursor: pointer; }
/* pick paket button (empty state) */
.mc-paket-pick-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border-radius: 14px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.08); border: 1.5px dashed rgba(var(--mlm-theme-color-rgb,201,162,39),.3); color: var(--mlm-theme-color); font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: 8px; transition: background .18s; }
.mc-paket-pick-btn:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.14); }
/* empty message in modal */
.mc-paket-empty { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #f59e0b; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.18); border-radius: 10px; padding: 10px 14px; margin-top: 4px; }

/* ================================================================
   39. CONFIRM CARD (upgrade) — tp-* components
   ================================================================ */
.tp-page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.tp-body { flex: 1; padding-bottom: 80px; }
.tp-confirm-card { background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border); border-radius: 16px; overflow: hidden; margin-bottom: 14px; }
.tp-confirm-card-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); border-bottom: 1px solid var(--mlm-card-border); }
.tp-confirm-card-head-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.18); display: flex; align-items: center; justify-content: center; color: var(--mlm-theme-color); font-size: 15px; flex-shrink: 0; }
.tp-confirm-card-head-title { font-size: 14px; font-weight: 800; color: var(--mlm-page-text); }
.tp-confirm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--mlm-card-border); }
.tp-confirm-row:last-child { border-bottom: none; }
.tp-confirm-label { font-size: 12px; color: rgba(148,163,184,.7); flex-shrink: 0; }
body.theme-gold-light .tp-confirm-label,body.theme-blue-light .tp-confirm-label,body.theme-green-light .tp-confirm-label,body.theme-purple-light .tp-confirm-label,body.theme-red-light .tp-confirm-label { color: rgba(71,85,105,.65); }
.tp-confirm-value { font-size: 13px; font-weight: 700; color: var(--mlm-page-text); text-align: right; }
.tp-confirm-value.accent { color: var(--mlm-theme-color); }

/* ================================================================
   40. SHARED PAGE COMPONENTS — pg-empty, pg-section-label, pg-btn-actions, pg-warn-box
   ================================================================ */
.pg-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; gap: 10px; }
.pg-empty-icon { width: 72px; height: 72px; border-radius: 22px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.18); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--mlm-theme-color); opacity: .8; }
.pg-empty-title { font-size: 16px; font-weight: 800; color: var(--mlm-page-text); }
.pg-empty-desc { font-size: 12px; color: rgba(148,163,184,.65); max-width: 260px; line-height: 1.6; }
body.theme-gold-light .pg-empty-desc,body.theme-blue-light .pg-empty-desc,body.theme-green-light .pg-empty-desc,body.theme-purple-light .pg-empty-desc,body.theme-red-light .pg-empty-desc { color: rgba(71,85,105,.6); }
.pg-section-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--mlm-theme-color-rgb,201,162,39),.75); padding: 18px 0 8px; display: flex; align-items: center; gap: 7px; }
.pg-btn-actions { display: flex; gap: 10px; margin-bottom: 12px; }
.pg-btn-primary { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 13px; background: var(--mlm-theme-color); color: #000; font-size: 13px; font-weight: 800; border: none; cursor: pointer; transition: opacity .18s; }
.pg-btn-primary:hover { opacity: .88; }
.pg-btn-primary:disabled { opacity: .4; cursor: default; }
.pg-btn-secondary { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 13px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); color: var(--mlm-theme-color); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.25); font-size: 13px; font-weight: 800; cursor: pointer; transition: background .18s; }
.pg-btn-secondary:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.16); }
.pg-warn-box { display: flex; align-items: flex-start; gap: 10px; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2); border-radius: 12px; padding: 12px 14px; font-size: 12px; color: #f59e0b; margin-bottom: 14px; line-height: 1.5; }
.pg-warn-box i { flex-shrink: 0; margin-top: 1px; }

/* ================================================================
   41. STOK PIN — sp-* components
   ================================================================ */
.sp-page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.sp-body { flex: 1; padding-bottom: 80px; }
/* summary bar */
.sp-summary { display: flex; align-items: center; gap: 14px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.09); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); border-radius: 16px; padding: 16px; margin: 16px 0 8px; }
.sp-summary-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.18); display: flex; align-items: center; justify-content: center; color: var(--mlm-theme-color); font-size: 20px; }
.sp-summary-info { flex: 1; }
.sp-summary-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgba(var(--mlm-theme-color-rgb,201,162,39),.7); }
.sp-summary-val { font-size: 26px; font-weight: 900; color: var(--mlm-theme-color); line-height: 1.1; }
.sp-summary-val-sub { font-size: 11px; color: rgba(148,163,184,.6); margin-top: 2px; }
body.theme-gold-light .sp-summary-val-sub,body.theme-blue-light .sp-summary-val-sub,body.theme-green-light .sp-summary-val-sub,body.theme-purple-light .sp-summary-val-sub,body.theme-red-light .sp-summary-val-sub { color: rgba(71,85,105,.55); }
/* section label */
.sp-section-label { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: rgba(var(--mlm-theme-color-rgb,201,162,39),.7); padding: 14px 0 8px; display: flex; align-items: center; gap: 7px; }
/* pin card */
.sp-pin-card { display: flex; align-items: center; gap: 12px; background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; transition: border-color .18s; }
.sp-pin-card:hover { border-color: rgba(var(--mlm-theme-color-rgb,201,162,39),.3); }
.sp-plan-img-wrap { width: 48px; height: 48px; flex-shrink: 0; border-radius: 13px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.15); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sp-plan-img-wrap img { width: 100%; height: 100%; object-fit: contain; }
.sp-pin-info { flex: 1; min-width: 0; }
.sp-pin-name { font-size: 13px; font-weight: 800; color: var(--mlm-page-text); margin-bottom: 4px; }
.sp-pin-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-pin-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); color: var(--mlm-theme-color); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.18); }
.sp-pin-tag.reposisi { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.12); }
.sp-pin-tag.berbayar { background: rgba(59,186,120,.1); color: #3dba78; border-color: rgba(59,186,120,.2); }
.sp-pin-tag.founder { background: rgba(250,204,21,.1); color: #facc15; border-color: rgba(250,204,21,.2); }
/* stock count */
.sp-pin-stok { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; min-width: 48px; text-align: center; }
.sp-pin-stok-num { font-size: 22px; font-weight: 900; color: var(--mlm-theme-color); line-height: 1; }
.sp-pin-stok-label { font-size: 9px; font-weight: 700; text-transform: uppercase; color: rgba(148,163,184,.55); letter-spacing: .04em; }
body.theme-gold-light .sp-pin-stok-label,body.theme-blue-light .sp-pin-stok-label,body.theme-green-light .sp-pin-stok-label,body.theme-purple-light .sp-pin-stok-label,body.theme-red-light .sp-pin-stok-label { color: rgba(71,85,105,.5); }
.sp-pin-stok.low .sp-pin-stok-num { color: #f59e0b; }
.sp-pin-stok.empty .sp-pin-stok-num { color: #f87171; }
/* empty state */
.sp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; gap: 10px; }
.sp-empty-icon { width: 72px; height: 72px; border-radius: 22px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.08); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.14); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--mlm-theme-color); opacity: .65; }
.sp-empty-title { font-size: 16px; font-weight: 800; color: var(--mlm-page-text); }
.sp-empty-sub { font-size: 12px; color: rgba(148,163,184,.6); max-width: 240px; line-height: 1.6; }
body.theme-gold-light .sp-empty-sub,body.theme-blue-light .sp-empty-sub,body.theme-green-light .sp-empty-sub,body.theme-purple-light .sp-empty-sub,body.theme-red-light .sp-empty-sub { color: rgba(71,85,105,.55); }
.social-links a:hover { background: #000; border-color: transparent; color: #fff; }
.img-showcase img { height: 150px; width: 150px; object-fit: cover; }
.img-item img { height: 70px !important; width: 70px !important; object-fit: cover; }

/* ================================================================
   42. MEMBER PROSPEK — mp-*
   ================================================================ */
.mp-page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.mp-body { flex: 1; padding-bottom: 80px; }
.mp-list { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }
.mp-item { display: flex; align-items: center; gap: 12px; background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border); border-radius: 14px; padding: 12px 14px; transition: border-color .18s; }
.mp-item:hover { border-color: rgba(var(--mlm-theme-color-rgb,201,162,39),.3); }
.mp-avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.18); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: var(--mlm-theme-color); }
.mp-mid { flex: 1; min-width: 0; }
.mp-name { font-size: 13px; font-weight: 800; color: var(--mlm-page-text); margin-bottom: 4px; }
.mp-meta { display: flex; flex-direction: column; gap: 3px; }
.mp-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(148,163,184,.7); }
body.theme-gold-light .mp-row,body.theme-blue-light .mp-row,body.theme-green-light .mp-row,body.theme-purple-light .mp-row,body.theme-red-light .mp-row { color: rgba(71,85,105,.6); }
.mp-row i { width: 12px; text-align: center; flex-shrink: 0; }
.mp-row a { color: inherit; text-decoration: none; }
.mp-row a:hover { color: var(--mlm-theme-color); }
.mp-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mp-tgl { font-size: 10px; color: rgba(148,163,184,.6); }
body.theme-gold-light .mp-tgl,body.theme-blue-light .mp-tgl,body.theme-green-light .mp-tgl,body.theme-purple-light .mp-tgl,body.theme-red-light .mp-tgl { color: rgba(71,85,105,.55); }
.mp-jam { font-size: 9.5px; color: rgba(148,163,184,.45); }
.mp-wa-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 8px; background: rgba(34,197,94,.12); color: #22c55e; border: 1px solid rgba(34,197,94,.2); text-decoration: none; }
.mp-wa-btn:hover { background: rgba(34,197,94,.2); color: #22c55e; }
.mp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 24px; color: rgba(148,163,184,.55); font-size: 14px; }
body.theme-gold-light .mp-empty,body.theme-blue-light .mp-empty,body.theme-green-light .mp-empty,body.theme-purple-light .mp-empty,body.theme-red-light .mp-empty { color: rgba(71,85,105,.5); }
.mp-empty i { font-size: 36px; opacity: .3; }
.mp-empty p { margin: 0; font-weight: 600; }

/* ================================================================
   43. RIWAYAT AKTIVASI — ra-*
   ================================================================ */
.ra-page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.ra-body { flex: 1; padding-bottom: 80px; }
.ra-list { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }
.ra-item { display: flex; align-items: center; gap: 12px; background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border); border-radius: 14px; padding: 12px 14px; }
.ra-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.12); display: flex; align-items: center; justify-content: center; color: var(--mlm-theme-color); font-size: 15px; }
.ra-mid { flex: 1; min-width: 0; }
.ra-plan { font-size: 13px; font-weight: 800; color: var(--mlm-page-text); margin-bottom: 5px; }
.ra-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ra-produk { font-size: 11px; color: rgba(148,163,184,.7); }
body.theme-gold-light .ra-produk,body.theme-blue-light .ra-produk,body.theme-green-light .ra-produk,body.theme-purple-light .ra-produk,body.theme-red-light .ra-produk { color: rgba(71,85,105,.6); }
.ra-dot { color: rgba(148,163,184,.4); font-size: 11px; }
.ra-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); color: var(--mlm-theme-color); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.18); }
.ra-badge.founder { background: rgba(250,204,21,.1); color: #facc15; border-color: rgba(250,204,21,.2); }
.ra-right { flex-shrink: 0; text-align: right; }
.ra-harga { font-size: 13px; font-weight: 800; color: var(--mlm-theme-color); }
.ra-tgl { font-size: 10px; color: rgba(148,163,184,.6); margin-top: 3px; }
body.theme-gold-light .ra-tgl,body.theme-blue-light .ra-tgl,body.theme-green-light .ra-tgl,body.theme-purple-light .ra-tgl,body.theme-red-light .ra-tgl { color: rgba(71,85,105,.55); }
.ra-jam { font-size: 9.5px; color: rgba(148,163,184,.45); }
.ra-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 24px; color: rgba(148,163,184,.5); }
body.theme-gold-light .ra-empty,body.theme-blue-light .ra-empty,body.theme-green-light .ra-empty,body.theme-purple-light .ra-empty,body.theme-red-light .ra-empty { color: rgba(71,85,105,.45); }
.ra-empty i { font-size: 36px; opacity: .3; }
.ra-empty p { font-size: 14px; font-weight: 600; margin: 0; }
.ra-empty span { font-size: 12px; opacity: .7; }

/* ================================================================
   44. RIWAYAT POIN PASANGAN LEVEL — rpl-*
   ================================================================ */
.rpl-page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.rpl-body { flex: 1; padding-bottom: 80px; }
.rpl-plan-card { display: flex; align-items: center; gap: 12px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.08); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.18); border-radius: 16px; padding: 14px; margin: 16px 0 8px; }
.rpl-plan-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.18); display: flex; align-items: center; justify-content: center; color: var(--mlm-theme-color); font-size: 16px; }
.rpl-plan-info { flex: 1; }
.rpl-plan-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(var(--mlm-theme-color-rgb,201,162,39),.7); }
.rpl-plan-name { font-size: 16px; font-weight: 800; color: var(--mlm-page-text); }
.rpl-section-head { display: flex; align-items: center; gap: 8px; padding: 12px 0 8px; }
.rpl-section-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); display: flex; align-items: center; justify-content: center; color: var(--mlm-theme-color); font-size: 11px; flex-shrink: 0; }
.rpl-section-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--mlm-page-text); flex: 1; }
.rpl-section-count { font-size: 11px; font-weight: 700; color: rgba(148,163,184,.6); }
body.theme-gold-light .rpl-section-count,body.theme-blue-light .rpl-section-count,body.theme-green-light .rpl-section-count,body.theme-purple-light .rpl-section-count,body.theme-red-light .rpl-section-count { color: rgba(71,85,105,.55); }
.rpl-card { background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border); border-radius: 16px; overflow: hidden; margin-bottom: 16px; }
.rpl-loading { display: flex; align-items: center; gap: 10px; padding: 28px 18px; font-size: 12px; color: rgba(148,163,184,.6); }
body.theme-gold-light .rpl-loading,body.theme-blue-light .rpl-loading,body.theme-green-light .rpl-loading,body.theme-purple-light .rpl-loading,body.theme-red-light .rpl-loading { color: rgba(71,85,105,.55); }
@keyframes rpl-spin { to { transform: rotate(360deg); } }
.rpl-spinner { width: 16px; height: 16px; flex-shrink: 0; border: 2px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); border-top-color: var(--mlm-theme-color); border-radius: 50%; animation: rpl-spin .7s linear infinite; }

/* ================================================================
   45. RIWAYAT WALLET CASH — rwc-*
   ================================================================ */
.rwc-page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.rwc-body { flex: 1; padding-bottom: 80px; }
.rwc-filter-wrap { padding: 14px 0 6px; }
.rwc-filter-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.rwc-filter-tabs::-webkit-scrollbar { display: none; }
.rwc-filter-tab { flex-shrink: 0; padding: 7px 16px; border-radius: 20px; border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); background: transparent; color: rgba(148,163,184,.75); font-size: 11px; font-weight: 700; cursor: pointer; transition: all .18s; }
body.theme-gold-light .rwc-filter-tab,body.theme-blue-light .rwc-filter-tab,body.theme-green-light .rwc-filter-tab,body.theme-purple-light .rwc-filter-tab,body.theme-red-light .rwc-filter-tab { color: rgba(71,85,105,.65); }
.rwc-filter-tab:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.08); color: var(--mlm-page-text); }
.rwc-filter-tab.active { background: var(--mlm-theme-color); border-color: var(--mlm-theme-color); color: #000; }
.rwc-list { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.rwc-load-more { text-align: center; padding: 12px 0 24px; }
.rwc-load-btn { padding: 10px 24px; border-radius: 12px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); color: var(--mlm-theme-color); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .18s; }
.rwc-load-btn:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.18); }

/* ================================================================
   46. TRANSFER PIN extras — tp-search, tp-stok-bar, tp-recipient
   (tp-confirm-card reuses Section 39 tp-* already defined)
   ================================================================ */
.tp-section-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--mlm-theme-color-rgb,201,162,39),.75); padding: 18px 0 8px; display: flex; align-items: center; gap: 7px; }
.tp-stok-bar { display: flex; align-items: center; gap: 10px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.08); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.18); border-radius: 13px; padding: 11px 14px; margin: 14px 0 4px; font-size: 12px; color: var(--mlm-page-text); }
.tp-stok-bar-icon { color: var(--mlm-theme-color); font-size: 14px; flex-shrink: 0; }
.tp-stok-bar-text strong { color: var(--mlm-theme-color); font-weight: 800; }
.tp-search-wrap { position: relative; margin-bottom: 6px; }
.tp-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(148,163,184,.45); font-size: 12px; pointer-events: none; }
body.theme-gold-light .tp-search-icon,body.theme-blue-light .tp-search-icon,body.theme-green-light .tp-search-icon,body.theme-purple-light .tp-search-icon,body.theme-red-light .tp-search-icon { color: rgba(71,85,105,.4); }
.tp-search-input { width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--mlm-card-border); border-radius: 13px; padding: 12px 14px 12px 38px; font-size: 13px; color: var(--mlm-page-text); outline: none; transition: border-color .18s; box-sizing: border-box; }
body.theme-gold-light .tp-search-input,body.theme-blue-light .tp-search-input,body.theme-green-light .tp-search-input,body.theme-purple-light .tp-search-input,body.theme-red-light .tp-search-input { background: rgba(0,0,0,.04); }
.tp-search-input:focus { border-color: var(--mlm-theme-color); }
.tp-search-input::placeholder { color: rgba(148,163,184,.4); }
body.theme-gold-light .tp-search-input::placeholder,body.theme-blue-light .tp-search-input::placeholder,body.theme-green-light .tp-search-input::placeholder,body.theme-purple-light .tp-search-input::placeholder,body.theme-red-light .tp-search-input::placeholder { color: rgba(71,85,105,.35); }
.tp-search-results { background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.2); display: none; }
.tp-search-results.open { display: block; }
.tp-recipient { display: flex; align-items: center; gap: 12px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.07); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.18); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.tp-recipient-avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.18); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--mlm-theme-color); }
.tp-recipient-name { font-size: 14px; font-weight: 800; color: var(--mlm-page-text); margin: 0 0 2px; }
.tp-recipient-id { font-size: 11px; color: rgba(148,163,184,.65); margin: 0; }
body.theme-gold-light .tp-recipient-id,body.theme-blue-light .tp-recipient-id,body.theme-green-light .tp-recipient-id,body.theme-purple-light .tp-recipient-id,body.theme-red-light .tp-recipient-id { color: rgba(71,85,105,.6); }
.tp-recipient-check { margin-left: auto; font-size: 18px; color: #22c55e; flex-shrink: 0; }
.tp-ganti { font-size: 11px; font-weight: 700; color: var(--mlm-theme-color); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 0 12px; }
.tp-no-pin { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; text-align: center; color: rgba(148,163,184,.6); font-size: 12px; }
body.theme-gold-light .tp-no-pin,body.theme-blue-light .tp-no-pin,body.theme-green-light .tp-no-pin,body.theme-purple-light .tp-no-pin,body.theme-red-light .tp-no-pin { color: rgba(71,85,105,.55); }
.tp-no-pin i { font-size: 26px; opacity: .3; }
.tp-no-pin p { margin: 0; }
.tp-btn-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.tp-btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border-radius: 14px; background: var(--mlm-theme-color); color: #000; font-size: 14px; font-weight: 800; border: none; cursor: pointer; transition: opacity .18s; }
.tp-btn-primary:hover { opacity: .88; }
.tp-btn-secondary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; border-radius: 14px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.08); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); color: var(--mlm-theme-color); font-size: 13px; font-weight: 700; text-decoration: none; text-align: center; }

/* ================================================================
   47. SPIN REWARD — sp-wheel
   ================================================================ */
/* Tabs */
.sp-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--mlm-card-border); background: var(--mlm-card-bg); }
.sp-tab { flex: 1; padding: 13px 10px; border: none; background: transparent; color: rgba(148,163,184,.7); font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; border-bottom: 2px solid transparent; transition: all .18s; margin-bottom: -1px; }
body.theme-gold-light .sp-tab,body.theme-blue-light .sp-tab,body.theme-green-light .sp-tab,body.theme-purple-light .sp-tab,body.theme-red-light .sp-tab { color: rgba(71,85,105,.6); }
.sp-tab.active { color: var(--mlm-theme-color); border-bottom-color: var(--mlm-theme-color); }
/* Wheel section */
.sp-wheel-section { display: flex; flex-direction: column; align-items: center; padding: 20px 16px 32px; }
.sp-saldo-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); border-radius: 20px; padding: 7px 18px; font-size: 13px; font-weight: 800; color: var(--mlm-page-text); margin-bottom: 16px; }
.sp-saldo-label { font-size: 10px; color: rgba(148,163,184,.7); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
body.theme-gold-light .sp-saldo-label,body.theme-blue-light .sp-saldo-label,body.theme-green-light .sp-saldo-label,body.theme-purple-light .sp-saldo-label,body.theme-red-light .sp-saldo-label { color: rgba(71,85,105,.6); }
/* Loading */
.sp-wheel-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 20px; color: rgba(148,163,184,.6); font-size: 12px; }
body.theme-gold-light .sp-wheel-loading,body.theme-blue-light .sp-wheel-loading,body.theme-green-light .sp-wheel-loading,body.theme-purple-light .sp-wheel-loading,body.theme-red-light .sp-wheel-loading { color: rgba(71,85,105,.55); }
@keyframes sp-rotate { to { transform: rotate(360deg); } }
.sp-wheel-loader { width: 36px; height: 36px; border: 3px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.15); border-top-color: var(--mlm-theme-color); border-radius: 50%; animation: sp-rotate .7s linear infinite; }
/* Spin button */
.sp-spin-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding: 14px 36px; border-radius: 14px; font-size: 14px; font-weight: 800; border: none; cursor: pointer; transition: all .18s; }
.sp-spin-btn.active { background: var(--mlm-theme-color); color: #000; box-shadow: 0 6px 20px rgba(var(--mlm-theme-color-rgb,201,162,39),.35); }
.sp-spin-btn.active:hover { opacity: .88; transform: translateY(-1px); }
.sp-spin-btn.disabled,.sp-spin-btn:disabled { background: rgba(148,163,184,.1); border: 1px solid rgba(148,163,184,.18); color: rgba(148,163,184,.45); cursor: default; transform: none; opacity: 1; }
.sp-harga-info { margin-top: 10px; font-size: 11px; color: rgba(148,163,184,.55); text-align: center; }
body.theme-gold-light .sp-harga-info,body.theme-blue-light .sp-harga-info,body.theme-green-light .sp-harga-info,body.theme-purple-light .sp-harga-info,body.theme-red-light .sp-harga-info { color: rgba(71,85,105,.5); }
/* History panel */
.sp-history-wrap { padding: 14px 0 110px; }
/* Result overlay */
.sp-result-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.8); z-index: 1080; display: none; align-items: center; justify-content: center; padding: 20px; }
.sp-result-overlay.open { display: flex; }
@keyframes sp-modal-in { from { transform: scale(.85) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.sp-result-modal { background: var(--mlm-page-bg-2); border: 1px solid var(--mlm-card-border); border-radius: 24px; padding: 32px 28px 24px; max-width: 320px; width: 100%; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: sp-modal-in .3s cubic-bezier(.34,1.56,.64,1) both; position: relative; overflow: hidden; }
.sp-result-confetti { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 60px; opacity: .15; pointer-events: none; }
.sp-result-icon { font-size: 48px; margin-bottom: 8px; position: relative; z-index: 1; }
.sp-result-title { font-size: 22px; font-weight: 900; color: var(--mlm-page-text); margin-bottom: 6px; }
.sp-result-img-wrap { margin: 12px auto; width: 110px; height: 110px; border-radius: 18px; overflow: hidden; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.08); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); display: flex; align-items: center; justify-content: center; }
.sp-result-img { width: 100%; height: 100%; object-fit: contain; }
.sp-result-reward-name { font-size: 16px; font-weight: 800; color: var(--mlm-theme-color); margin: 8px 0 4px; }
.sp-result-content { font-size: 12px; color: rgba(148,163,184,.7); margin-bottom: 20px; line-height: 1.5; }
body.theme-gold-light .sp-result-content,body.theme-blue-light .sp-result-content,body.theme-green-light .sp-result-content,body.theme-purple-light .sp-result-content,body.theme-red-light .sp-result-content { color: rgba(71,85,105,.65); }
.sp-result-close { display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; border-radius: 12px; background: var(--mlm-theme-color); color: #000; font-size: 13px; font-weight: 800; border: none; cursor: pointer; transition: opacity .18s; }
.sp-result-close:hover { opacity: .88; }
/* rs-* history cards */
.rs-page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.rs-body { flex: 1; padding-bottom: 80px; }
.rs-list { display: flex; flex-direction: column; gap: 8px; }
.rs-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 20px; color: rgba(148,163,184,.55); font-size: 13px; text-align: center; }
body.theme-gold-light .rs-empty,body.theme-blue-light .rs-empty,body.theme-green-light .rs-empty,body.theme-purple-light .rs-empty,body.theme-red-light .rs-empty { color: rgba(71,85,105,.5); }
.rs-empty i { font-size: 36px; display: block; margin-bottom: 4px; opacity: .35; }
.rs-load-more { text-align: center; padding: 12px 0; }
.rs-btn-more { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 20px; border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.3); background: transparent; color: var(--mlm-theme-color); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .18s; }
.rs-btn-more:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); }

/* ================================================================
   48. RIWAYAT ORDER AUTOSAVE — ras-*
   ================================================================ */
.ras-page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.ras-body { flex: 1; padding-bottom: 80px; }
.ras-filter-wrap { padding: 12px 0 6px; }
.ras-filter-tabs { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.ras-filter-tabs::-webkit-scrollbar { display: none; }
.ras-filter-tab { flex-shrink: 0; padding: 7px 14px; border-radius: 20px; border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); background: transparent; color: rgba(148,163,184,.7); font-size: 11px; font-weight: 700; cursor: pointer; transition: all .18s; white-space: nowrap; }
body.theme-gold-light .ras-filter-tab,body.theme-blue-light .ras-filter-tab,body.theme-green-light .ras-filter-tab,body.theme-purple-light .ras-filter-tab,body.theme-red-light .ras-filter-tab { color: rgba(71,85,105,.6); }
.ras-filter-tab:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.08); color: var(--mlm-page-text); }
.ras-filter-tab.active { background: var(--mlm-theme-color); border-color: var(--mlm-theme-color); color: #000; }
.ras-list { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.ras-item { background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border); border-radius: 14px; overflow: hidden; }
.ras-item-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--mlm-card-border); background: rgba(255,255,255,.02); }
body.theme-gold-light .ras-item-head,body.theme-blue-light .ras-item-head,body.theme-green-light .ras-item-head,body.theme-purple-light .ras-item-head,body.theme-red-light .ras-item-head { background: rgba(0,0,0,.02); }
.ras-order-date { font-size: 11px; color: rgba(148,163,184,.7); }
body.theme-gold-light .ras-order-date,body.theme-blue-light .ras-order-date,body.theme-green-light .ras-order-date,body.theme-purple-light .ras-order-date,body.theme-red-light .ras-order-date { color: rgba(71,85,105,.6); }
.ras-order-date a { color: inherit; text-decoration: none; }
.ras-order-date a:hover { color: var(--mlm-theme-color); }
.ras-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.ras-badge.pending { background: rgba(245,158,11,.12); color: #f59e0b; border: 1px solid rgba(245,158,11,.2); }
.ras-badge.processing,.ras-badge.diproses { background: rgba(59,130,246,.12); color: #3b82f6; border: 1px solid rgba(59,130,246,.2); }
.ras-badge.shipped,.ras-badge.dikirim { background: rgba(99,102,241,.12); color: #818cf8; border: 1px solid rgba(99,102,241,.2); }
.ras-badge.done,.ras-badge.selesai { background: rgba(34,197,94,.12); color: #22c55e; border: 1px solid rgba(34,197,94,.2); }
.ras-badge.rejected,.ras-badge.ditolak,.ras-badge.cancel,.ras-badge.dibatalkan { background: rgba(239,68,68,.12); color: #ef4444; border: 1px solid rgba(239,68,68,.2); }
.ras-badge.waiting,.ras-badge.menunggu { background: rgba(148,163,184,.1); color: rgba(148,163,184,.8); border: 1px solid rgba(148,163,184,.18); }
.ras-item-body { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.ras-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); display: flex; align-items: center; justify-content: center; color: var(--mlm-theme-color); font-size: 14px; }
.ras-mid { flex: 1; min-width: 0; }
.ras-nominal { font-size: 15px; font-weight: 800; color: var(--mlm-page-text); }
.ras-nominal-extra { font-size: 10.5px; color: rgba(148,163,184,.65); margin-top: 2px; }
body.theme-gold-light .ras-nominal-extra,body.theme-blue-light .ras-nominal-extra,body.theme-green-light .ras-nominal-extra,body.theme-purple-light .ras-nominal-extra,body.theme-red-light .ras-nominal-extra { color: rgba(71,85,105,.6); }
.ras-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.ras-updated { font-size: 10px; color: rgba(148,163,184,.55); }
body.theme-gold-light .ras-updated,body.theme-blue-light .ras-updated,body.theme-green-light .ras-updated,body.theme-purple-light .ras-updated,body.theme-red-light .ras-updated { color: rgba(71,85,105,.5); }
.ras-actions { display: flex; gap: 5px; }
.ras-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; transition: opacity .15s; }
.ras-btn.pay { background: var(--mlm-theme-color); color: #000; }
.ras-btn.cancel { background: rgba(239,68,68,.12); color: #ef4444; border: 1px solid rgba(239,68,68,.2); }
.ras-btn.confirm { background: rgba(34,197,94,.12); color: #22c55e; border: 1px solid rgba(34,197,94,.2); }
.ras-btn:hover { opacity: .82; }
.ras-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 24px; text-align: center; color: rgba(148,163,184,.5); font-size: 14px; }
body.theme-gold-light .ras-empty,body.theme-blue-light .ras-empty,body.theme-green-light .ras-empty,body.theme-purple-light .ras-empty,body.theme-red-light .ras-empty { color: rgba(71,85,105,.45); }
.ras-empty i { font-size: 36px; opacity: .3; }
.ras-empty p { margin: 0; font-weight: 600; }

/* ================================================================
   49. RIWAYAT TRANSFER PIN — tp-month-nav, tp-tab-pill, tp-rw-*
   ================================================================ */
/* Month navigator */
.tp-month-nav { display: flex; align-items: center; gap: 10px; padding: 16px 0 10px; }
.tp-month-btn { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); color: var(--mlm-theme-color); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s; }
.tp-month-btn:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.2); }
.tp-month-info { flex: 1; text-align: center; }
.tp-month-name { font-size: 15px; font-weight: 800; color: var(--mlm-page-text); line-height: 1.2; }
.tp-month-range { font-size: 11px; color: rgba(148,163,184,.6); margin-top: 2px; }
body.theme-gold-light .tp-month-range,body.theme-blue-light .tp-month-range,body.theme-green-light .tp-month-range,body.theme-purple-light .tp-month-range,body.theme-red-light .tp-month-range { color: rgba(71,85,105,.55); }
/* Tab pills */
.tp-tab-pills { display: flex; gap: 10px; margin-bottom: 14px; }
.tp-tab-pill { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--mlm-card-bg); border: 2px solid var(--mlm-card-border); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: border-color .18s, background .18s; }
.tp-tab-pill:hover { border-color: rgba(var(--mlm-theme-color-rgb,201,162,39),.3); }
.tp-tab-pill.active { border-color: var(--mlm-theme-color); background: rgba(var(--mlm-theme-color-rgb,201,162,39),.06); }
.tp-tab-pill-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.12); display: flex; align-items: center; justify-content: center; color: var(--mlm-theme-color); font-size: 13px; }
.tp-tab-pill-info { flex: 1; min-width: 0; }
.tp-tab-pill-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(148,163,184,.6); }
body.theme-gold-light .tp-tab-pill-label,body.theme-blue-light .tp-tab-pill-label,body.theme-green-light .tp-tab-pill-label,body.theme-purple-light .tp-tab-pill-label,body.theme-red-light .tp-tab-pill-label { color: rgba(71,85,105,.55); }
.tp-tab-pill-val { font-size: 14px; font-weight: 800; color: var(--mlm-page-text); line-height: 1.2; }
.tp-tab-pill-count { font-size: 10px; color: rgba(148,163,184,.6); margin-top: 1px; }
body.theme-gold-light .tp-tab-pill-count,body.theme-blue-light .tp-tab-pill-count,body.theme-green-light .tp-tab-pill-count,body.theme-purple-light .tp-tab-pill-count,body.theme-red-light .tp-tab-pill-count { color: rgba(71,85,105,.5); }
/* List + card */
.tp-riwayat-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.tp-rw-card { background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border); border-radius: 14px; overflow: hidden; }
.tp-rw-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; transition: background .15s; }
.tp-rw-head:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.04); }
.tp-rw-head.expanded { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.05); }
.tp-rw-avatar { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.tp-rw-avatar.kirim { background: rgba(99,102,241,.14); color: #818cf8; }
.tp-rw-avatar.member { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.14); color: var(--mlm-theme-color); }
.tp-rw-avatar.stokis { background: rgba(34,197,94,.12); color: #22c55e; }
.tp-rw-info { flex: 1; min-width: 0; }
.tp-rw-label { font-size: 10px; color: rgba(148,163,184,.6); font-weight: 600; }
body.theme-gold-light .tp-rw-label,body.theme-blue-light .tp-rw-label,body.theme-green-light .tp-rw-label,body.theme-purple-light .tp-rw-label,body.theme-red-light .tp-rw-label { color: rgba(71,85,105,.55); }
.tp-rw-name { font-size: 13px; font-weight: 800; color: var(--mlm-page-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-rw-right { flex-shrink: 0; text-align: right; }
.tp-rw-date { font-size: 10px; color: rgba(148,163,184,.6); margin-bottom: 4px; }
body.theme-gold-light .tp-rw-date,body.theme-blue-light .tp-rw-date,body.theme-green-light .tp-rw-date,body.theme-purple-light .tp-rw-date,body.theme-red-light .tp-rw-date { color: rgba(71,85,105,.55); }
.tp-rw-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 7px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); color: var(--mlm-theme-color); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.18); }
/* Detail section */
.tp-rw-detail-wrap { border-top: 1px solid var(--mlm-card-border); }
.tp-rw-detail { padding: 8px 14px 4px; }
.tp-rw-pin-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(var(--mlm-card-border-rgb,255,255,255),.06); }
.tp-rw-pin-row:last-child { border-bottom: none; }
.tp-rw-pin-num { width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: var(--mlm-theme-color); }
.tp-rw-pin-label { flex: 1; font-size: 12px; color: var(--mlm-page-text); }
.tp-rw-pin-harga { font-size: 11px; font-weight: 700; color: rgba(148,163,184,.7); flex-shrink: 0; }
body.theme-gold-light .tp-rw-pin-harga,body.theme-blue-light .tp-rw-pin-harga,body.theme-green-light .tp-rw-pin-harga,body.theme-purple-light .tp-rw-pin-harga,body.theme-red-light .tp-rw-pin-harga { color: rgba(71,85,105,.6); }
.tp-rw-total-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.06); border-top: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.1); font-size: 12px; font-weight: 800; color: var(--mlm-theme-color); }
/* Empty / loading state */
.tp-rw-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 24px; text-align: center; }
.tp-rw-empty-icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.08); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--mlm-theme-color); opacity: .7; }
.tp-rw-empty p { font-size: 13px; color: rgba(148,163,184,.6); margin: 0; }
body.theme-gold-light .tp-rw-empty p,body.theme-blue-light .tp-rw-empty p,body.theme-green-light .tp-rw-empty p,body.theme-purple-light .tp-rw-empty p,body.theme-red-light .tp-rw-empty p { color: rgba(71,85,105,.55); }

/* ================================================================
   50. MEMBER CREATE (binary) — misc mc-* belum ada
   ================================================================ */
.mc-body { flex: 1; padding-bottom: 80px; }
/* field label inline (di atas card, bukan floating) */
.mc-field-label { font-size: 11px; font-weight: 700; color: rgba(148,163,184,.7); margin: 0 0 8px; }
body.theme-gold-light .mc-field-label,body.theme-blue-light .mc-field-label,body.theme-green-light .mc-field-label,body.theme-purple-light .mc-field-label,body.theme-red-light .mc-field-label { color: rgba(71,85,105,.6); }
/* lock icon di upline banner */
.mc-upline-lock { font-size: 13px; color: rgba(148,163,184,.45); flex-shrink: 0; }
/* level badge dalam sponsor search result */
.mc-level-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.12); color: var(--mlm-theme-color); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); margin-left: 5px; vertical-align: middle; }
/* paket stok indicator (di dalam mc-paket-card) */
.mc-paket-stok { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; margin-top: 6px; padding: 2px 8px; border-radius: 6px; background: rgba(34,197,94,.1); color: #22c55e; border: 1px solid rgba(34,197,94,.18); }
.mc-paket-stok.low { background: rgba(245,158,11,.1); color: #f59e0b; border-color: rgba(245,158,11,.2); }
.mc-paket-stok.empty { background: rgba(239,68,68,.1); color: #ef4444; border-color: rgba(239,68,68,.2); }
/* paket kosong inline */
.mc-paket-none { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #f59e0b; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.18); border-radius: 10px; padding: 9px 12px; margin-top: 6px; }

/* ── Confirm sheet (bottom sheet) ── */
.mc-confirm-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1060; display: none; align-items: flex-end; justify-content: center; }
.mc-confirm-backdrop.open { display: flex; }
@media (min-width: 540px) { .mc-confirm-backdrop.open { align-items: center; } }
.mc-confirm-sheet { background: var(--mlm-page-bg-2); border-radius: 24px 24px 0 0; width: 100%; max-width: 500px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 540px) { .mc-confirm-sheet { border-radius: 20px; } }
.mc-confirm-handle { width: 36px; height: 4px; border-radius: 4px; background: rgba(148,163,184,.25); margin: 10px auto 0; flex-shrink: 0; }
@media (min-width: 540px) { .mc-confirm-handle { display: none; } }
.mc-confirm-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--mlm-card-border); flex-shrink: 0; }
.mc-confirm-head-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.14); display: flex; align-items: center; justify-content: center; color: var(--mlm-theme-color); font-size: 16px; }
.mc-confirm-head-title { font-size: 15px; font-weight: 800; color: var(--mlm-page-text); }
.mc-confirm-head-sub { font-size: 11px; color: rgba(148,163,184,.6); margin-top: 1px; }
body.theme-gold-light .mc-confirm-head-sub,body.theme-blue-light .mc-confirm-head-sub,body.theme-green-light .mc-confirm-head-sub,body.theme-purple-light .mc-confirm-head-sub,body.theme-red-light .mc-confirm-head-sub { color: rgba(71,85,105,.55); }
.mc-confirm-body { flex: 1; overflow-y: auto; padding: 14px 16px 4px; }
/* confirm groups */
.mc-confirm-group { background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border); border-radius: 14px; overflow: hidden; margin-bottom: 10px; }
.mc-confirm-group-title { display: flex; align-items: center; gap: 7px; padding: 10px 14px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: rgba(var(--mlm-theme-color-rgb,201,162,39),.75); border-bottom: 1px solid var(--mlm-card-border); background: rgba(var(--mlm-theme-color-rgb,201,162,39),.05); }
.mc-confirm-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--mlm-card-border); }
.mc-confirm-row:last-child { border-bottom: none; }
.mc-confirm-row-icon { width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); display: flex; align-items: center; justify-content: center; color: var(--mlm-theme-color); font-size: 10px; margin-top: 1px; }
.mc-confirm-row-body { flex: 1; min-width: 0; }
.mc-confirm-row-label { font-size: 10px; color: rgba(148,163,184,.6); margin-bottom: 1px; }
body.theme-gold-light .mc-confirm-row-label,body.theme-blue-light .mc-confirm-row-label,body.theme-green-light .mc-confirm-row-label,body.theme-purple-light .mc-confirm-row-label,body.theme-red-light .mc-confirm-row-label { color: rgba(71,85,105,.55); }
.mc-confirm-row-val { font-size: 13px; font-weight: 700; color: var(--mlm-page-text); }
.mc-confirm-row-val.accent { font-size: 11px; font-weight: 600; color: var(--mlm-theme-color); display: block; margin-top: 1px; }
/* notice in confirm body */
.mc-confirm-notice { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: #f59e0b; background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.18); border-radius: 11px; padding: 10px 12px; margin-top: 6px; margin-bottom: 14px; line-height: 1.5; }
/* confirm action buttons */
.mc-confirm-actions { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--mlm-card-border); flex-shrink: 0; }
.mc-confirm-cancel { flex: 1; padding: 12px; border-radius: 13px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); color: var(--mlm-theme-color); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .18s; }
.mc-confirm-cancel:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.18); }
.mc-confirm-ok { flex: 2; padding: 12px; border-radius: 13px; background: var(--mlm-theme-color); border: none; color: #000; font-size: 13px; font-weight: 800; cursor: pointer; transition: opacity .18s; }
.mc-confirm-ok:hover { opacity: .88; }

/* ── PIN dot indicator ── */
.mc-pin-dots { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; }
.mc-pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.3); background: transparent; transition: all .18s; }
.mc-pin-dot.filled { background: var(--mlm-theme-color); border-color: var(--mlm-theme-color); box-shadow: 0 0 0 3px rgba(var(--mlm-theme-color-rgb,201,162,39),.2); }
/* back button in PIN screen */
.mc-pin-back { display: block; margin-top: 14px; background: none; border: none; color: rgba(148,163,184,.7); font-size: 13px; cursor: pointer; }
body.theme-gold-light .mc-pin-back,body.theme-blue-light .mc-pin-back,body.theme-green-light .mc-pin-back,body.theme-purple-light .mc-pin-back,body.theme-red-light .mc-pin-back { color: rgba(71,85,105,.6); }
.mc-pin-back:hover { color: var(--mlm-theme-color); }

/* ── Error screen ── */
.mc-error-wrap { display: flex; flex-direction: column; min-height: 80vh; padding-top: 24px; }
.mc-error-icon { width: 72px; height: 72px; border-radius: 22px; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.2); display: flex; align-items: center; justify-content: center; font-size: 28px; color: #ef4444; margin: 0 auto 14px; }
.mc-error-title { font-size: 22px; font-weight: 900; color: var(--mlm-page-text); margin-bottom: 4px; }
.mc-error-subtitle { font-size: 13px; color: rgba(148,163,184,.7); margin-bottom: 20px; }
body.theme-gold-light .mc-error-subtitle,body.theme-blue-light .mc-error-subtitle,body.theme-green-light .mc-error-subtitle,body.theme-purple-light .mc-error-subtitle,body.theme-red-light .mc-error-subtitle { color: rgba(71,85,105,.6); }
.mc-error-msg { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #ef4444; background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.18); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; line-height: 1.6; }
.mc-error-hint { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: rgba(148,163,184,.7); line-height: 1.5; margin-bottom: 24px; }
body.theme-gold-light .mc-error-hint,body.theme-blue-light .mc-error-hint,body.theme-green-light .mc-error-hint,body.theme-purple-light .mc-error-hint,body.theme-red-light .mc-error-hint { color: rgba(71,85,105,.6); }
.mc-error-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border-radius: 14px; background: #ef4444; color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; margin-top: auto; transition: opacity .18s; }
.mc-error-btn:hover { opacity: .88; color: #fff; }

/* ── Success screen ── */
.mc-success-wrap { display: flex; flex-direction: column; min-height: 80vh; padding-top: 24px; }
.mc-success-icon { width: 72px; height: 72px; border-radius: 22px; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.2); display: flex; align-items: center; justify-content: center; font-size: 28px; color: #22c55e; margin: 0 auto 14px; }
.mc-success-title { font-size: 22px; font-weight: 900; color: var(--mlm-page-text); margin-bottom: 4px; }
.mc-success-subtitle { font-size: 13px; color: rgba(148,163,184,.7); margin-bottom: 20px; }
body.theme-gold-light .mc-success-subtitle,body.theme-blue-light .mc-success-subtitle,body.theme-green-light .mc-success-subtitle,body.theme-purple-light .mc-success-subtitle,body.theme-red-light .mc-success-subtitle { color: rgba(71,85,105,.6); }
.mc-success-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mlm-card-border); }
.mc-success-row:last-child { border-bottom: none; }
.mc-success-row-label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(148,163,184,.7); flex-shrink: 0; }
body.theme-gold-light .mc-success-row-label,body.theme-blue-light .mc-success-row-label,body.theme-green-light .mc-success-row-label,body.theme-purple-light .mc-success-row-label,body.theme-red-light .mc-success-row-label { color: rgba(71,85,105,.6); }
.mc-success-row-val { font-size: 13px; font-weight: 700; color: var(--mlm-page-text); text-align: right; word-break: break-all; }
.mc-success-row-val.warn { color: #f59e0b; font-family: monospace; font-size: 14px; }
.mc-success-row-val.danger { color: #f87171; font-family: monospace; font-size: 14px; }
.mc-success-notice { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #f59e0b; background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.18); border-radius: 12px; padding: 11px 14px; margin: 14px 0; line-height: 1.5; }

/* ================================================================
   51. RPL TABLE — rpl-table-head, rpl-row, rpl-badge, rpl-empty
       (rpl-page-wrap, rpl-body, rpl-plan-card, rpl-card, rpl-loading, rpl-spinner → §44)
   ================================================================ */
.rpl-table-head { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 0; padding: 8px 14px; border-bottom: 1px solid var(--mlm-card-border); }
.rpl-th { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: rgba(148,163,184,.55); }
body.theme-gold-light .rpl-th,body.theme-blue-light .rpl-th,body.theme-green-light .rpl-th,body.theme-purple-light .rpl-th,body.theme-red-light .rpl-th { color: rgba(71,85,105,.5); }
.rpl-th.center { text-align: center; }
.rpl-th.right  { text-align: right; }
.rpl-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 0; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--mlm-card-border); transition: background .15s; }
.rpl-row:last-child { border-bottom: none; }
.rpl-row:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.04); }
.rpl-level { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.12); border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); font-size: 12px; font-weight: 800; color: var(--mlm-theme-color); }
.rpl-poin { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rpl-poin-val { font-size: 13px; font-weight: 800; color: var(--mlm-page-text); line-height: 1.1; }
.rpl-poin-val.kiri  { color: #60a5fa; }
.rpl-poin-val.kanan { color: #f87171; }
.rpl-poin-sub { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: rgba(148,163,184,.5); }
body.theme-gold-light .rpl-poin-sub,body.theme-blue-light .rpl-poin-sub,body.theme-green-light .rpl-poin-sub,body.theme-purple-light .rpl-poin-sub,body.theme-red-light .rpl-poin-sub { color: rgba(71,85,105,.45); }
.rpl-status { display: flex; justify-content: flex-end; }
.rpl-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 7px; white-space: nowrap; }
.rpl-badge.terpasang { background: rgba(34,197,94,.12); color: #22c55e; border: 1px solid rgba(34,197,94,.2); }
.rpl-badge.pending   { background: rgba(245,158,11,.12); color: #f59e0b; border: 1px solid rgba(245,158,11,.2); }
.rpl-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 24px; text-align: center; color: rgba(148,163,184,.55); font-size: 13px; }
body.theme-gold-light .rpl-empty,body.theme-blue-light .rpl-empty,body.theme-green-light .rpl-empty,body.theme-purple-light .rpl-empty,body.theme-red-light .rpl-empty { color: rgba(71,85,105,.5); }
.rpl-empty i { font-size: 28px; opacity: .35; }

/* ================================================================
   UPGRADE RESULT SCREEN
   ================================================================ */
.ug-result { display: flex; flex-direction: column; align-items: center; padding: 36px 20px 80px; text-align: center; }
.ug-result-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; margin-bottom: 20px; }
.ug-result-icon.success { background: rgba(34,197,94,.12); color: #22c55e; border: 2px solid rgba(34,197,94,.2); }
.ug-result-icon.error   { background: rgba(239,68,68,.12);  color: #ef4444; border: 2px solid rgba(239,68,68,.2); }
.ug-result-title { font-size: 22px; font-weight: 800; color: var(--mlm-page-text); margin-bottom: 8px; }
.ug-result-paket { display: inline-block; font-size: 13px; font-weight: 700; padding: 4px 16px; border-radius: 20px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.12); color: var(--mlm-theme-color); margin-bottom: 12px; }
.ug-result-desc { font-size: 14px; color: rgba(148,163,184,.7); margin-bottom: 28px; line-height: 1.6; }
body.theme-gold-light .ug-result-desc,body.theme-blue-light .ug-result-desc,body.theme-green-light .ug-result-desc,body.theme-purple-light .ug-result-desc,body.theme-red-light .ug-result-desc { color: rgba(71,85,105,.6); }
.ug-result-btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 300px; padding: 14px 20px; border-radius: 14px; background: var(--mlm-theme-color); color: var(--mlm-theme-text); font-size: 14px; font-weight: 800; text-decoration: none; margin-bottom: 12px; border: none; cursor: pointer; }
.ug-result-btn-primary:hover { opacity: .88; color: var(--mlm-theme-text); }
.ug-result-btn-secondary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 300px; padding: 12px 20px; border-radius: 14px; background: rgba(148,163,184,.1); color: var(--mlm-page-text); font-size: 13px; font-weight: 700; text-decoration: none; border: 1px solid var(--mlm-card-border); cursor: pointer; }
.ug-result-btn-secondary:hover { background: rgba(148,163,184,.18); color: var(--mlm-page-text); }

/* ================================================================
   RIWAYAT SALDO WD
   ================================================================ */
.rsw-page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.rsw-body { flex: 1; padding-bottom: 80px; }
.rsw-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 18px; }
.rsw-summary-card { background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border); border-radius: 14px; padding: 14px 12px; text-align: center; }
body.theme-gold-light .rsw-summary-card,body.theme-blue-light .rsw-summary-card,body.theme-green-light .rsw-summary-card,body.theme-purple-light .rsw-summary-card,body.theme-red-light .rsw-summary-card { background: #fff; }
.rsw-summary-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(148,163,184,.6); margin-bottom: 6px; }
body.theme-gold-light .rsw-summary-label,body.theme-blue-light .rsw-summary-label,body.theme-green-light .rsw-summary-label,body.theme-purple-light .rsw-summary-label,body.theme-red-light .rsw-summary-label { color: rgba(71,85,105,.55); }
.rsw-summary-val { font-size: 13px; font-weight: 800; color: var(--mlm-page-text); line-height: 1.2; word-break: break-all; }
.rsw-summary-card.highlight .rsw-summary-val { color: var(--mlm-theme-color); }
.rsw-list { display: flex; flex-direction: column; gap: 0; }
.rsw-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--mlm-card-bg); border-bottom: 1px solid var(--mlm-card-border); }
body.theme-gold-light .rsw-item,body.theme-blue-light .rsw-item,body.theme-green-light .rsw-item,body.theme-purple-light .rsw-item,body.theme-red-light .rsw-item { background: #fff; }
.rsw-item:first-child { border-radius: 14px 14px 0 0; }
.rsw-item:last-child  { border-radius: 0 0 14px 14px; border-bottom: none; }
.rsw-item:only-child  { border-radius: 14px; border-bottom: none; }
.rsw-item-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.rsw-item-icon.debit  { background: rgba(34,197,94,.12);  color: #22c55e; }
.rsw-item-icon.kredit { background: rgba(239,68,68,.12);  color: #ef4444; }
.rsw-item-icon.other  { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.12); color: var(--mlm-theme-color); }
.rsw-item-body { flex: 1; min-width: 0; }
.rsw-item-keterangan { font-size: 12px; font-weight: 600; color: var(--mlm-page-text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsw-item-date { font-size: 10px; color: rgba(148,163,184,.6); margin-top: 2px; }
body.theme-gold-light .rsw-item-date,body.theme-blue-light .rsw-item-date,body.theme-green-light .rsw-item-date,body.theme-purple-light .rsw-item-date,body.theme-red-light .rsw-item-date { color: rgba(71,85,105,.5); }
.rsw-item-right { text-align: right; flex-shrink: 0; }
.rsw-item-nominal { font-size: 14px; font-weight: 800; }
.rsw-item-nominal.debit  { color: #22c55e; }
.rsw-item-nominal.kredit { color: #ef4444; }
.rsw-item-nominal.other  { color: var(--mlm-theme-color); }
.rsw-item-type { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin-top: 3px; display: inline-block; }
.rsw-item-type.d { background: rgba(34,197,94,.1);  color: #22c55e; }
.rsw-item-type.k { background: rgba(239,68,68,.1);  color: #ef4444; }
.rsw-load-more { margin: 14px 0; display: flex; justify-content: center; }
.rsw-load-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 12px; background: rgba(var(--mlm-theme-color-rgb,201,162,39),.1); color: var(--mlm-theme-color); font-size: 13px; font-weight: 700; border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.2); cursor: pointer; }
.rsw-load-btn:hover { background: rgba(var(--mlm-theme-color-rgb,201,162,39),.18); }
.rsw-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; text-align: center; color: rgba(148,163,184,.55); font-size: 13px; }
body.theme-gold-light .rsw-empty,body.theme-blue-light .rsw-empty,body.theme-green-light .rsw-empty,body.theme-purple-light .rsw-empty,body.theme-red-light .rsw-empty { color: rgba(71,85,105,.5); }
.rsw-empty i { font-size: 32px; opacity: .35; }
.rpl-empty p { margin: 0; font-weight: 600; }
.form-select,.form-control {font-size:12px}
.invalid-feedback {font-size:11px}

/* ================================================================
   RIWAYAT WALLET REWARD (rwr-*)
   ================================================================ */
.rwr-page-wrap { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--mlm-page-bg); }
.rwr-body { flex:1; padding:72px 0 90px; }

/* Filter tab */
.rwr-filter-wrap {
    display:flex; gap:8px; padding:14px 16px 10px; overflow-x:auto;
    scrollbar-width:none; position:sticky; top:72px; z-index:10;
    background:var(--mlm-page-bg);
}
.rwr-filter-wrap::-webkit-scrollbar { display:none; }
.rwr-filter-btn {
    flex-shrink:0; padding:6px 16px; border-radius:20px; font-size:12px; font-weight:700;
    border:1.5px solid var(--mlm-card-border); background:var(--mlm-card-bg);
    color:var(--mlm-page-text-muted); cursor:pointer; transition:all .2s;
}
.rwr-filter-btn.active {
    background:var(--mlm-theme-color); border-color:var(--mlm-theme-color);
    color:#000;
}

/* List */
.rwr-list { padding:4px 16px 0; }

/* Item */
.rwr-item {
    display:flex; align-items:center; gap:12px;
    padding:12px 0; border-bottom:1px solid var(--mlm-card-border);
}
.rwr-item:last-child { border-bottom:none; }
.rwr-icon {
    width:38px; height:38px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:14px;
}
.rwr-icon-masuk  { background:rgba(34,197,94,.12);  color:#22c55e; }
.rwr-icon-keluar { background:rgba(239,68,68,.12);  color:#ef4444; }
.rwr-mid { flex:1; min-width:0; }
.rwr-nominal { font-size:14px; font-weight:800; }
.rwr-nominal-masuk  { color:#22c55e; }
.rwr-nominal-keluar { color:#ef4444; }
.rwr-keterangan { font-size:11.5px; color:var(--mlm-page-text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rwr-right { text-align:right; flex-shrink:0; }
.rwr-tgl { font-size:10px; color:var(--mlm-page-text-muted); line-height:1.5; }
.rwr-badge {
    display:inline-flex; align-items:center; gap:4px;
    font-size:10px; font-weight:700; padding:2px 8px; border-radius:6px; margin-top:4px;
}
.rwr-badge-masuk  { background:rgba(34,197,94,.1);  color:#22c55e; }
.rwr-badge-keluar { background:rgba(239,68,68,.1);  color:#ef4444; }

/* Load more */
.rwr-loadmore { margin:14px 16px; }
.rwr-loadmore-btn {
    width:100%; padding:11px; border-radius:14px; font-size:13px; font-weight:700;
    border:1.5px solid rgba(var(--mlm-theme-color-rgb),.25);
    background:rgba(var(--mlm-theme-color-rgb),.07);
    color:var(--mlm-theme-color); cursor:pointer; transition:background .2s;
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.rwr-loadmore-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.15); }

/* Empty */
.rwr-empty {
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:56px 20px; text-align:center;
}
.rwr-empty i { font-size:36px; color:var(--mlm-page-text-muted); opacity:.35; }
.rwr-empty p { font-size:14px; font-weight:700; color:var(--mlm-page-text); margin:0; }
.rwr-empty span { font-size:12px; color:var(--mlm-page-text-muted); }

/* ================================================================
   RIWAYAT WALLET CASH (rwc-*)
   ================================================================ */
.rwc-page-wrap { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--mlm-page-bg); }
.rwc-body { flex:1; padding:72px 0 90px; }

.rwc-filter-wrap {
    position:sticky; top:72px; z-index:10;
    background:var(--mlm-page-bg);
    padding:12px 16px 10px;
}
.rwc-filter-tabs { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.rwc-filter-tabs::-webkit-scrollbar { display:none; }
.rwc-filter-tab {
    flex-shrink:0; padding:6px 16px; border-radius:20px; font-size:12px; font-weight:700;
    border:1.5px solid var(--mlm-card-border); background:var(--mlm-card-bg);
    color:var(--mlm-page-text-muted); cursor:pointer; transition:all .2s;
}
.rwc-filter-tab.active { background:var(--mlm-theme-color); border-color:var(--mlm-theme-color); color:#000; }

.rwc-list { padding:4px 16px 0; }

.rwc-item {
    display:flex; align-items:center; gap:12px;
    padding:13px 0; border-bottom:1px solid var(--mlm-card-border);
}
.rwc-item:last-child { border-bottom:none; }

.rwc-icon {
    width:38px; height:38px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:14px;
}
.rwc-icon.masuk  { background:rgba(34,197,94,.12);  color:#22c55e; }
.rwc-icon.keluar { background:rgba(239,68,68,.12);  color:#ef4444; }

.rwc-mid { flex:1; min-width:0; }
.rwc-nominal { font-size:14px; font-weight:800; }
.rwc-nominal.masuk  { color:#22c55e; }
.rwc-nominal.keluar { color:#ef4444; }
.rwc-keterangan { font-size:11.5px; color:var(--mlm-page-text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.rwc-right { text-align:right; flex-shrink:0; }
.rwc-date { font-size:10px; color:var(--mlm-page-text-muted); white-space:nowrap; }
.rwc-badge {
    display:inline-flex; align-items:center; gap:4px;
    font-size:10px; font-weight:700; padding:2px 8px; border-radius:6px; margin-top:4px;
}
.rwc-badge.masuk  { background:rgba(34,197,94,.1);  color:#22c55e; }
.rwc-badge.keluar { background:rgba(239,68,68,.1);  color:#ef4444; }

.rwc-load-more { margin:14px 16px; }
.rwc-load-btn {
    width:100%; padding:11px; border-radius:14px; font-size:13px; font-weight:700;
    border:1.5px solid rgba(var(--mlm-theme-color-rgb),.25);
    background:rgba(var(--mlm-theme-color-rgb),.07);
    color:var(--mlm-theme-color); cursor:pointer; transition:background .2s;
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.rwc-load-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.15); }

.rwc-empty {
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:56px 20px; text-align:center;
}
.rwc-empty i { font-size:36px; color:var(--mlm-page-text-muted); opacity:.35; }
.rwc-empty p { font-size:14px; font-weight:700; color:var(--mlm-page-text); margin:0; }

/* ================================================================
   CERTIFICATE (cert-*)
   ================================================================ */
.cert-page-wrap { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--mlm-page-bg); }
.cert-body { flex:1; padding:56px 0 100px; }
.cert-inner { max-width:480px; margin:0 auto; padding:10px 16px 24px; display:flex; flex-direction:column; gap:12px; }

/* Summary strip */
.cert-summary-strip { display:flex; align-items:center; justify-content:space-between; background:var(--mlm-card-bg); border:1px solid var(--mlm-card-border); border-radius:14px; padding:12px 16px; }
.cert-summary-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
.cert-summary-lbl { font-size:9px; color:var(--mlm-page-text-muted); text-transform:uppercase; letter-spacing:.04em; }
.cert-summary-val { font-size:12px; font-weight:800; color:var(--mlm-page-text); }
.cert-summary-val.cs-pending { color:#f59e0b; }
.cert-summary-val.cs-done { color:#22c55e; }
.cert-summary-divider { width:1px; height:28px; background:var(--mlm-card-border); flex-shrink:0; }

/* Frame & glow */
.cert-frame-wrap { position:relative; }
.cert-glow { position:absolute; inset:-8px; border-radius:22px; background:radial-gradient(ellipse at 50% 50%, rgba(var(--mlm-theme-color-rgb,201,162,39),.22) 0%, transparent 70%); pointer-events:none; z-index:0; }
.cert-container { position:relative; width:100%; border-radius:16px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(var(--mlm-theme-color-rgb,201,162,39),.2); z-index:1; }
.cert-img { width:100%; display:block; }

/* Overlays on certificate image */
.cert-overlay-name { position:absolute; top:45%; left:50%; transform:translate(-50%,-50%); text-align:center; width:72%; pointer-events:none; }
.cert-overlay-nama { display:block; font-size:clamp(10px,2.8vw,16px); font-weight:800; color:#7c4a03; line-height:1.3; text-shadow:0 1px 2px rgba(255,255,255,.6); }
.cert-overlay-id { display:block; font-size:clamp(8px,2.2vw,12px); font-weight:700; color:#7c4a03; opacity:.85; margin-top:2px; }
.cert-overlay-nominal { position:absolute; top:52.6%; left:50%; transform:translate(-50%,-50%); text-align:center; width:72%; pointer-events:none; }
.cert-overlay-nominal span { font-size:clamp(10px,2.6vw,16px); font-weight:900; color:#7c4a03; text-shadow:0 1px 2px rgba(255,255,255,.6); white-space:nowrap; }

/* Info card */
.cert-info-card { background:var(--mlm-card-bg); border:1px solid var(--mlm-card-border); border-radius:14px; overflow:hidden; }
.cert-info-row { display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--mlm-card-border); }
.cert-info-row-last { border-bottom:none; }
.cert-info-icon { width:30px; height:30px; border-radius:8px; background:rgba(var(--mlm-theme-color-rgb,201,162,39),.1); color:var(--mlm-theme-color); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.cert-info-icon-gold { background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(217,119,6,.15)); color:#f59e0b; }
.cert-info-body { flex:1; min-width:0; }
.cert-info-label { font-size:9.5px; color:var(--mlm-page-text-muted); text-transform:uppercase; letter-spacing:.04em; }
.cert-info-val { font-size:12px; font-weight:700; color:var(--mlm-page-text); margin-top:1px; }
.cert-info-val-gold { font-size:14px; font-weight:900; color:var(--mlm-theme-color); }

/* Actions */
.cert-actions { display:flex; gap:10px; }
.cert-btn-download { flex:1; padding:14px; border-radius:14px; font-size:13px; font-weight:700; background:linear-gradient(135deg,var(--mlm-theme-color-grad-1,#e2b93b),var(--mlm-theme-color-grad-2,#8a6c00)); color:#000; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 4px 16px rgba(var(--mlm-theme-color-rgb,201,162,39),.35); transition:opacity .2s; }
.cert-btn-download:hover { opacity:.88; }
.cert-btn-download:disabled { opacity:.6; cursor:not-allowed; }
.cert-btn-share { width:50px; height:50px; border-radius:14px; border:1px solid var(--mlm-card-border); background:var(--mlm-card-bg); color:var(--mlm-page-text); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; flex-shrink:0; }
.cert-btn-share:hover { background:rgba(var(--mlm-theme-color-rgb,201,162,39),.1); }

/* Hint */
.cert-hint { font-size:10px; color:var(--mlm-page-text-muted); text-align:center; line-height:1.6; display:flex; align-items:flex-start; justify-content:center; gap:5px; }
.cert-hint i { margin-top:2px; flex-shrink:0; }

/* light mode */
body.theme-gold-light .cert-summary-strip,
body.theme-blue-light .cert-summary-strip,
body.theme-green-light .cert-summary-strip,
body.theme-purple-light .cert-summary-strip,
body.theme-red-light .cert-summary-strip { background:#fff; }
body.theme-gold-light .cert-info-card,
body.theme-blue-light .cert-info-card,
body.theme-green-light .cert-info-card,
body.theme-purple-light .cert-info-card,
body.theme-red-light .cert-info-card { background:#fff; }
body.theme-gold-light .cert-btn-share,
body.theme-blue-light .cert-btn-share,
body.theme-green-light .cert-btn-share,
body.theme-purple-light .cert-btn-share,
body.theme-red-light .cert-btn-share { background:#f9fafb; border-color:#e5e7eb; color:#374151; }

/* ================================================================
   RIWAYAT POIN PASANGAN (rpp-*)
   ================================================================ */
.rpp-page-wrap { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--mlm-page-bg); }
.rpp-body { flex:1; padding:0px 0 90px; }
.rpp-page-wrap .bn-filter-bar { top:0; }

.rpp-list { padding:4px 16px 0; }

.rpp-item {
    display:flex; align-items:center; gap:12px;
    padding:12px 0; border-bottom:1px solid var(--mlm-card-border);
}
.rpp-item:last-child { border-bottom:none; }

/* Icon bulat di kiri — warna sesuai kategori */
.rpp-icon {
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:14px;
}
.rpp-item-masuk     .rpp-icon { background:rgba(34,197,94,.13);  color:#16a34a; }
.rpp-item-terpasang .rpp-icon { background:rgba(99,102,241,.13); color:#818cf8; }
.rpp-item-flushout  .rpp-icon { background:rgba(239,68,68,.1);  color:#f87171; }
.rpp-item-flushout  { opacity:.75; }

/* Tengah */
.rpp-mid { flex:1; min-width:0; }
.rpp-lbl {
    font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
    margin-bottom:2px;
}
.rpp-lbl-masuk-kiri   { color:#818cf8; }
.rpp-lbl-masuk-kanan  { color:var(--mlm-theme-color); }
.rpp-lbl-terpasang    { color:#22c55e; }
.rpp-lbl-flushout     { color:#f87171; }
.rpp-poin-val { font-size:15px; font-weight:900; color:var(--mlm-page-text); }
.rpp-sumber {
    font-size:11.5px; color:var(--mlm-page-text-muted); margin-top:3px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rpp-id   { font-size:10.5px; color:var(--mlm-page-text-muted); font-weight:400; }
.rpp-plan { font-size:11px; font-weight:700; color:var(--mlm-page-text); }
.rpp-note { font-size:10.5px; color:#f87171; margin-top:3px; }

/* Kanan */
.rpp-right { text-align:right; flex-shrink:0; }
.rpp-tgl { font-size:10px; color:var(--mlm-page-text-muted); line-height:1.6; }
.rpp-waktu { opacity:.7; }

body.light-mode .rpp-item-masuk .rpp-icon { background:rgba(22,163,74,.1); color:#15803d; }

.rpp-loadmore { margin:14px 16px; }
.rpp-loadmore-btn {
    width:100%; padding:11px; border-radius:14px; font-size:13px; font-weight:700;
    border:1.5px solid rgba(var(--mlm-theme-color-rgb),.25);
    background:rgba(var(--mlm-theme-color-rgb),.07);
    color:var(--mlm-theme-color); cursor:pointer; transition:background .2s;
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.rpp-loadmore-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.15); }

.rpp-empty {
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:56px 20px; text-align:center;
}
.rpp-empty i { font-size:36px; color:var(--mlm-page-text-muted); opacity:.35; }
.rpp-empty p { font-size:14px; font-weight:700; color:var(--mlm-page-text); margin:0; }
.rpp-empty span { font-size:12px; color:var(--mlm-page-text-muted); }

/* ── Riwayat Poin Reward ──────────────────────────────────── */
.rpr-page-wrap { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--mlm-page-bg); }
.rpr-body { flex:1; padding:0 0 90px; }
.rpr-page-wrap .bn-filter-bar { top:0; }

.rpr-list { padding:4px 16px 0; }

.rpr-item {
    display:flex; align-items:center; gap:12px;
    padding:12px 0; border-bottom:1px solid var(--mlm-card-border);
}
.rpr-item:last-child { border-bottom:none; }

.rpr-icon {
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:14px;
}
.rpr-item-masuk     .rpr-icon { background:rgba(245,158,11,.13); color:#f59e0b; }
.rpr-item-terpasang .rpr-icon { background:rgba(99,102,241,.13);  color:#818cf8; }
.rpr-item-flushout  .rpr-icon { background:rgba(239,68,68,.1);   color:#f87171; }
.rpr-item-flushout  { opacity:.75; }

.rpr-mid { flex:1; min-width:0; }
.rpr-lbl {
    font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
    margin-bottom:2px;
}
.rpr-lbl-masuk-kiri   { color:#818cf8; }
.rpr-lbl-masuk-kanan  { color:var(--mlm-theme-color); }
.rpr-lbl-terpasang    { color:#22c55e; }
.rpr-lbl-flushout     { color:#f87171; }
.rpr-poin-val { font-size:15px; font-weight:900; color:var(--mlm-page-text); }
.rpr-sumber {
    font-size:11.5px; color:var(--mlm-page-text-muted); margin-top:3px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rpr-id   { font-size:10.5px; color:var(--mlm-page-text-muted); font-weight:400; }
.rpr-note { font-size:10.5px; color:#f87171; margin-top:3px; }

.rpr-right { text-align:right; flex-shrink:0; }
.rpr-tgl { font-size:10px; color:var(--mlm-page-text-muted); line-height:1.6; }
.rpr-waktu { opacity:.7; }

.rpr-loadmore { margin:14px 16px; }
.rpr-loadmore-btn {
    width:100%; padding:11px; border-radius:14px; font-size:13px; font-weight:700;
    border:1.5px solid rgba(var(--mlm-theme-color-rgb),.25);
    background:rgba(var(--mlm-theme-color-rgb),.07);
    color:var(--mlm-theme-color); cursor:pointer; transition:background .2s;
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.rpr-loadmore-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.15); }

.rpr-empty {
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:56px 20px; text-align:center;
}
.rpr-empty i { font-size:36px; color:var(--mlm-page-text-muted); opacity:.35; }
.rpr-empty p { font-size:14px; font-weight:700; color:var(--mlm-page-text); margin:0; }
.rpr-empty span { font-size:12px; color:var(--mlm-page-text-muted); }

/* ================================================================
   RIWAYAT POSTING  (rpst-*)
   ================================================================ */
.rpst-page-wrap { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--mlm-page-bg); }
.rpst-body { flex:1; padding:72px 0 90px; }

.rpst-list { padding:4px 16px 0; }

.rpst-item {
    display:flex; align-items:center; gap:12px;
    padding:12px 0; border-bottom:1px solid var(--mlm-card-border);
}
.rpst-item:last-child { border-bottom:none; }

.rpst-icon {
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:15px;
    background:rgba(var(--mlm-theme-color-rgb),.13); color:var(--mlm-theme-color);
}

.rpst-mid { flex:1; min-width:0; }
.rpst-lbl {
    font-size:13px; font-weight:800; color:var(--mlm-page-text);
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
}
.rpst-harga { font-size:15px; font-weight:900; color:var(--mlm-theme-color); }
.rpst-member { font-size:11px; color:var(--mlm-page-text-muted); margin-top:2px; }
.rpst-id { opacity:.7; }
.rpst-produk { color:var(--mlm-page-text-muted); }

.rpst-badge {
    font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
    padding:2px 7px; border-radius:20px;
}
.rpst-badge-reposisi { background:rgba(99,102,241,.15); color:#818cf8; }
.rpst-badge-founder  { background:rgba(245,158,11,.15);  color:#f59e0b; }

.rpst-right { text-align:right; flex-shrink:0; }
.rpst-tgl   { font-size:10px; color:var(--mlm-page-text-muted); line-height:1.6; }
.rpst-waktu { opacity:.7; }

.rpst-empty {
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:56px 20px; text-align:center;
}
.rpst-empty i { font-size:36px; color:var(--mlm-page-text-muted); opacity:.35; }
.rpst-empty p { font-size:14px; font-weight:700; color:var(--mlm-page-text); margin:0; }
.rpst-empty span { font-size:12px; color:var(--mlm-page-text-muted); }

/* ================================================================
   MEMBER ORDER  (mo-*)
   ================================================================ */
.mo-page-wrap { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--mlm-page-bg); }
.mo-body { flex:1; padding:72px 0 90px; }

/* Stepper */
.mo-stepper {
    display:flex; margin:12px 14px 0; border-radius:12px; overflow:hidden;
    border:1px solid var(--mlm-card-border); background:var(--mlm-card-bg);
}
.mo-step {
    flex:1; display:flex; align-items:center; gap:8px; padding:11px 12px;
    border-right:1px solid var(--mlm-card-border); opacity:.4; transition:opacity .2s;
}
.mo-step:last-child { border-right:none; }
.mo-step.active { opacity:1; background:rgba(var(--mlm-theme-color-rgb),.06); }
.mo-step.done   { opacity:.75; }
.mo-step-num {
    width:26px; height:26px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; background:var(--mlm-card-border); color:var(--mlm-page-text-muted);
}
.mo-step.active .mo-step-num { background:var(--mlm-theme-color); color:#000; }
.mo-step.done   .mo-step-num { background:#22c55e; color:#fff; }
.mo-step-label strong { display:block; font-size:12px; font-weight:700; color:var(--mlm-page-text); }
.mo-step-label span   { font-size:10px; color:var(--mlm-page-text-muted); }

/* Two-column layout */
.mo-content {
    display:flex; gap:14px; padding:12px 14px 0; align-items:flex-start;
}
.mo-left  { flex:1; min-width:0; }
.mo-right { width:280px; flex-shrink:0; position:sticky; top:80px; }
@media (max-width:767px) {
    .mo-content { flex-direction:column; }
    .mo-right { width:100%; position:static; }
}

/* Panel */
.mo-panel {
    background:var(--mlm-card-bg); border:1px solid var(--mlm-card-border);
    border-radius:14px; overflow:hidden; margin-bottom:12px;
}
.mo-panel-head {
    padding:11px 14px; background:rgba(var(--mlm-theme-color-rgb),.06);
    border-bottom:1px solid var(--mlm-card-border);
    font-size:13px; font-weight:700; color:var(--mlm-page-text);
    display:flex; align-items:center; gap:8px;
}
.mo-panel-head i { color:var(--mlm-theme-color); }
.mo-panel-body { padding:13px 14px; }

/* Stokis selector */
.mo-btn-pilih-stokis {
    width:100%; padding:12px; border-radius:10px; border:1.5px dashed var(--mlm-card-border);
    background:rgba(var(--mlm-theme-color-rgb),.04); color:var(--mlm-theme-color);
    font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center;
    justify-content:center; gap:8px; transition:background .18s;
}
.mo-btn-pilih-stokis:hover { background:rgba(var(--mlm-theme-color-rgb),.1); }
.mo-stokis-selected {
    display:flex; align-items:center; gap:10px; justify-content:space-between;
}
.mo-stokis-info { display:flex; align-items:center; gap:10px; }
.mo-stokis-avatar {
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    background:rgba(var(--mlm-theme-color-rgb),.12); color:var(--mlm-theme-color);
    display:flex; align-items:center; justify-content:center; font-size:16px;
}
.mo-stokis-nama { font-size:13px; font-weight:700; color:var(--mlm-page-text); }
.mo-stokis-id   { font-size:11px; color:var(--mlm-page-text-muted); }
.mo-btn-ganti {
    padding:6px 12px; border-radius:8px; border:1px solid var(--mlm-card-border);
    background:transparent; color:var(--mlm-page-text-muted); font-size:11px;
    font-weight:700; cursor:pointer; flex-shrink:0;
}

/* Filter row */
.mo-filter-row { display:flex; gap:10px; flex-wrap:wrap; }
.mo-filter-field { display:flex; flex-direction:column; gap:4px; flex:1; min-width:120px; }
.mo-filter-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--mlm-page-text-muted); }
.mo-filter-label i { color:var(--mlm-theme-color); margin-right:3px; }
.mo-select {
    height:38px; border-radius:10px; padding:0 10px; font-size:13px;
    border:1.5px solid var(--mlm-card-border); background:var(--mlm-card-bg);
    color:var(--mlm-page-text); outline:none; cursor:pointer; width:100%;
}
.mo-select:focus { border-color:var(--mlm-theme-color); }
.mo-search-wrap { position:relative; }
.mo-search-wrap i { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--mlm-page-text-muted); font-size:13px; pointer-events:none; }
.mo-search-input {
    width:100%; height:38px; border-radius:10px; padding:0 12px 0 34px; font-size:13px;
    border:1.5px solid var(--mlm-card-border); background:var(--mlm-card-bg);
    color:var(--mlm-page-text); outline:none; box-sizing:border-box;
}
.mo-search-input:focus { border-color:var(--mlm-theme-color); }
.mo-search-input::placeholder { color:var(--mlm-page-text-muted); opacity:.45; }

/* Product grid */
.mo-grid {
    display:grid; grid-template-columns:repeat(2, 1fr);
    gap:10px; margin-top:12px;
}
@media (min-width:480px) { .mo-grid { grid-template-columns:repeat(3, 1fr); } }

.mo-card {
    background:var(--mlm-card-bg); border:1px solid var(--mlm-card-border);
    border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
    transition:transform .15s, box-shadow .15s;
}
.mo-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(var(--mlm-theme-color-rgb),.12); }
.mo-card-img-wrap { width:100%; aspect-ratio:1/1; overflow:hidden; background:rgba(var(--mlm-theme-color-rgb),.05); }
.mo-card-img { width:100%; height:100%; object-fit:cover; display:block; }
.mo-card-body { padding:9px 10px 4px; flex:1; }
.mo-card-jenis { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--mlm-theme-color); margin-bottom:2px; }
.mo-card-nama { font-size:11px; font-weight:700; color:var(--mlm-page-text); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:4px; }
.mo-card-harga { font-size:12px; font-weight:900; color:var(--mlm-theme-color); margin-bottom:6px; }
.mo-card-qty-wrap { display:flex; align-items:center; gap:4px; margin-bottom:4px; }
.mo-qty-btn {
    width:26px; height:26px; border-radius:6px; border:1px solid var(--mlm-card-border);
    background:var(--mlm-card-bg); color:var(--mlm-page-text-muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0;
}
.mo-qty-btn:hover { border-color:var(--mlm-theme-color); color:var(--mlm-theme-color); }
.mo-qty-input {
    flex:1; height:26px; text-align:center; border-radius:6px; font-size:12px; font-weight:700;
    border:1px solid var(--mlm-card-border); background:var(--mlm-card-bg); color:var(--mlm-page-text);
    outline:none; min-width:0;
}
.mo-card-btn {
    display:flex; align-items:center; justify-content:center; gap:5px;
    margin:0 10px 10px; padding:8px; border-radius:8px;
    background:rgba(var(--mlm-theme-color-rgb),.12); color:var(--mlm-theme-color);
    font-size:11px; font-weight:700; border:none; cursor:pointer; transition:background .18s;
}
.mo-card-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.22); }
.mo-grid-empty {
    grid-column:1/-1; display:flex; flex-direction:column; align-items:center;
    gap:10px; padding:48px 20px; text-align:center;
}
.mo-grid-empty i { font-size:36px; color:var(--mlm-page-text-muted); opacity:.3; }
.mo-grid-empty p { font-size:13px; font-weight:700; color:var(--mlm-page-text); margin:0; }
.mo-grid-empty span { font-size:11px; color:var(--mlm-page-text-muted); }

/* Cart */
.mo-cart {
    background:var(--mlm-card-bg); border:1px solid var(--mlm-card-border);
    border-radius:14px; overflow:hidden;
}
.mo-cart-head {
    padding:11px 14px; background:rgba(var(--mlm-theme-color-rgb),.06);
    border-bottom:1px solid var(--mlm-card-border);
    display:flex; align-items:center; justify-content:space-between;
    font-size:13px; font-weight:700; color:var(--mlm-page-text);
}
.mo-cart-head i { color:var(--mlm-theme-color); }
.mo-cart-clear {
    background:none; border:none; color:var(--mlm-page-text-muted); cursor:pointer;
    font-size:13px; padding:4px 6px; border-radius:6px;
}
.mo-cart-clear:hover { color:#ef4444; }
.mo-cart-stokis {
    padding:8px 14px; border-bottom:1px solid var(--mlm-card-border);
    background:rgba(var(--mlm-theme-color-rgb),.04);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px;
}
.mo-cart-stokis-lbl { font-size:10px; color:var(--mlm-page-text-muted); }
.mo-cart-stokis-val { font-size:12px; font-weight:700; color:var(--mlm-theme-color); }
.mo-cart-items { min-height:140px; max-height:320px; overflow-y:auto; padding:8px 12px; }
.mo-cart-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:32px 10px; text-align:center; }
.mo-cart-empty i { font-size:28px; color:var(--mlm-page-text-muted); opacity:.25; }
.mo-cart-empty p { font-size:12px; color:var(--mlm-page-text-muted); margin:0; }
.mo-cart-item {
    display:flex; align-items:center; gap:9px; padding:7px 0;
    border-bottom:1px solid var(--mlm-card-border);
}
.mo-cart-item:last-child { border-bottom:none; }
.mo-cart-item-img { width:36px; height:36px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--mlm-card-border); }
.mo-cart-item-info { flex:1; min-width:0; }
.mo-cart-item-nama { font-size:11px; font-weight:700; color:var(--mlm-page-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mo-cart-item-harga { font-size:11px; color:var(--mlm-theme-color); font-weight:700; }
.mo-cart-item-qty { font-size:10px; color:var(--mlm-page-text-muted); font-weight:400; }
.mo-cart-item-del { background:none; border:none; color:var(--mlm-page-text-muted); cursor:pointer; padding:4px; font-size:12px; flex-shrink:0; }
.mo-cart-item-del:hover { color:#ef4444; }
.mo-cart-footer { padding:12px 14px; border-top:1px solid var(--mlm-card-border); }
.mo-cart-total-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:12px; color:var(--mlm-page-text-muted); }
.mo-cart-total { font-size:18px; font-weight:900; color:var(--mlm-theme-color); }
.mo-btn-order {
    width:100%; padding:12px; border-radius:10px; border:none;
    background:var(--mlm-theme-color); color:#000; font-size:13px; font-weight:800;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
    transition:opacity .18s;
}
.mo-btn-order:hover { opacity:.88; }
.mo-btn-order:disabled { opacity:.5; cursor:not-allowed; }

/* Tip */
.mo-tip {
    margin-top:10px; padding:12px 14px; border-radius:12px;
    background:rgba(var(--mlm-theme-color-rgb),.06);
    border:1px solid rgba(var(--mlm-theme-color-rgb),.14);
    font-size:11px; color:var(--mlm-page-text-muted); line-height:1.8;
}
.mo-tip strong { display:block; margin-bottom:4px; color:var(--mlm-theme-color); }

/* Modal stokis */
.mo-modal-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
    z-index:1040; backdrop-filter:blur(2px);
}
.mo-modal-overlay.show { display:block; }
.mo-modal {
    display:none; position:fixed; left:50%; bottom:0; transform:translateX(-50%);
    width:100%; max-width:480px; max-height:75vh; z-index:1050;
    background:var(--mlm-card-bg); border-radius:20px 20px 0 0;
    flex-direction:column; overflow:hidden;
    box-shadow:0 -8px 40px rgba(0,0,0,.25);
}
.mo-modal.show { display:flex; }
.mo-modal-head {
    padding:14px 16px; border-bottom:1px solid var(--mlm-card-border);
    display:flex; align-items:center; justify-content:space-between;
    font-size:14px; font-weight:800; color:var(--mlm-page-text); flex-shrink:0;
}
.mo-modal-head i { color:var(--mlm-theme-color); }
.mo-modal-close { background:none; border:none; color:var(--mlm-page-text-muted); font-size:16px; cursor:pointer; padding:4px 8px; }
.mo-modal-search { padding:10px 14px; border-bottom:1px solid var(--mlm-card-border); position:relative; flex-shrink:0; }
.mo-modal-search i { position:absolute; left:24px; top:50%; transform:translateY(-50%); color:var(--mlm-page-text-muted); font-size:13px; pointer-events:none; }
.mo-modal-input {
    width:100%; height:38px; border-radius:10px; padding:0 12px 0 34px; font-size:13px;
    border:1.5px solid var(--mlm-card-border); background:var(--mlm-card-bg);
    color:var(--mlm-page-text); outline:none; box-sizing:border-box;
}
.mo-modal-input:focus { border-color:var(--mlm-theme-color); }
.mo-modal-list { overflow-y:auto; flex:1; }
.mo-stokis-item {
    display:flex; align-items:center; gap:12px; padding:12px 16px;
    border-bottom:1px solid var(--mlm-card-border); cursor:pointer; transition:background .12s;
}
.mo-stokis-item:last-child { border-bottom:none; }
.mo-stokis-item:hover { background:rgba(var(--mlm-theme-color-rgb),.06); }
.mo-stokis-item-av {
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    background:rgba(var(--mlm-theme-color-rgb),.12); color:var(--mlm-theme-color);
    display:flex; align-items:center; justify-content:center; font-size:15px;
}
.mo-stokis-item-info { flex:1; min-width:0; }
.mo-stokis-item-nama { font-size:13px; font-weight:700; color:var(--mlm-page-text); }
.mo-stokis-item-sub  { font-size:11px; color:var(--mlm-page-text-muted); }
.mo-stokis-item-arrow { color:var(--mlm-page-text-muted); opacity:.4; font-size:11px; }

/* ================================================================
   PEMBAYARAN (pay-*)
   ================================================================ */
.pay-page-wrap { display:flex; flex-direction:column; min-height:100vh; background:var(--mlm-page-bg); }
.pay-body { flex:1; padding:80px 0 100px; max-width:600px; margin:0 auto; width:100%; }

/* Nominal card */
.pay-nominal-card {
    margin:0 16px 16px;
    background:linear-gradient(135deg,var(--mlm-theme-color),rgba(var(--mlm-theme-color-rgb),.7));
    border-radius:16px; padding:20px 20px 18px; text-align:center;
}
.pay-nominal-label { font-size:12px; color:rgba(255,255,255,.8); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.pay-nominal-value { font-size:28px; font-weight:800; color:#fff; letter-spacing:-.5px; }
.pay-nominal-note { margin-top:10px; font-size:11px; color:rgba(255,255,255,.75); display:flex; align-items:center; justify-content:center; gap:5px; }

/* Sections */
.pay-section { margin:0 16px 14px; background:var(--mlm-card-bg); border-radius:14px; overflow:hidden; border:1px solid var(--mlm-card-border); }
.pay-section-title {
    padding:12px 16px; font-size:13px; font-weight:700; color:var(--mlm-page-text);
    border-bottom:1px solid var(--mlm-card-border); display:flex; align-items:center; gap:7px;
}
.pay-section-title i { color:var(--mlm-theme-color); }

/* Items */
.pay-items { padding:6px 0; }
.pay-item { display:flex; align-items:center; gap:12px; padding:10px 16px; }
.pay-item + .pay-item { border-top:1px solid var(--mlm-card-border); }
.pay-item-img { width:44px; height:44px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--mlm-page-bg); }
.pay-item-info { flex:1; min-width:0; }
.pay-item-nama { font-size:13px; font-weight:700; color:var(--mlm-page-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pay-item-sub { font-size:11px; color:var(--mlm-page-text-muted); margin-top:2px; }
.pay-item-sub-total { font-size:13px; font-weight:700; color:var(--mlm-theme-color); flex-shrink:0; }

/* Bank card */
.pay-bank-card { padding:14px 16px; }
.pay-bank-card + .pay-bank-card { border-top:1px solid var(--mlm-card-border); }
.pay-bank-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pay-bank-logo { height:28px; max-width:80px; object-fit:contain; }
.pay-bank-logo-placeholder {
    width:36px; height:28px; border-radius:6px; background:rgba(var(--mlm-theme-color-rgb),.12);
    color:var(--mlm-theme-color); display:flex; align-items:center; justify-content:center; font-size:14px;
}
.pay-bank-nama { font-size:14px; font-weight:700; color:var(--mlm-page-text); }
.pay-bank-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; }
.pay-bank-row + .pay-bank-row { border-top:1px solid var(--mlm-card-border); }
.pay-bank-lbl { font-size:12px; color:var(--mlm-page-text-muted); }
.pay-bank-val-wrap { display:flex; align-items:center; gap:6px; }
.pay-bank-val { font-size:13px; font-weight:600; color:var(--mlm-page-text); }
.pay-copy-btn {
    background:rgba(var(--mlm-theme-color-rgb),.12); border:none; color:var(--mlm-theme-color);
    width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
    font-size:12px; cursor:pointer; transition:background .15s;
}
.pay-copy-btn:hover { background:rgba(var(--mlm-theme-color-rgb),.22); }

/* Upload area */
.pay-upload-wrap {
    margin:14px 16px 10px; border:2px dashed var(--mlm-card-border); border-radius:14px;
    min-height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; cursor:pointer; transition:border-color .15s, background .15s;
}
.pay-upload-wrap:hover { border-color:var(--mlm-theme-color); background:rgba(var(--mlm-theme-color-rgb),.04); }
.pay-upload-icon { font-size:30px; color:var(--mlm-page-text-muted); }
.pay-upload-text { font-size:12px; color:var(--mlm-page-text-muted); }
.pay-preview-img { max-width:100%; max-height:220px; border-radius:12px; object-fit:contain; padding:10px; }

/* Actions */
.pay-actions { display:flex; gap:10px; padding:10px 16px 16px; }
.pay-btn-back {
    flex:1; height:44px; border-radius:12px; border:1.5px solid var(--mlm-card-border);
    background:none; color:var(--mlm-page-text); font-size:13px; font-weight:700;
    display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; transition:background .15s;
}
.pay-btn-back:hover { background:var(--mlm-card-border); }
.pay-btn-confirm {
    flex:2; height:44px; border-radius:12px; border:none;
    background:var(--mlm-theme-color); color:#fff; font-size:13px; font-weight:700;
    display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; transition:opacity .15s;
}
.pay-btn-confirm:hover { opacity:.88; }

/* No rekening */
.pay-no-rek { padding:28px 16px; text-align:center; }
.pay-no-rek i { font-size:32px; color:var(--mlm-page-text-muted); margin-bottom:10px; }
.pay-no-rek p { font-size:14px; font-weight:700; color:var(--mlm-page-text); margin:0 0 4px; }
.pay-no-rek span { font-size:12px; color:var(--mlm-page-text-muted); display:block; margin-bottom:14px; }
.pay-btn-wa {
    display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:12px;
    background:#25D366; color:#fff; font-size:13px; font-weight:700; text-decoration:none; transition:opacity .15s;
}
.pay-btn-wa:hover { opacity:.88; }

/* Light mode overrides */
body.light-mode .pay-nominal-card { box-shadow:0 4px 20px rgba(var(--mlm-theme-color-rgb),.25); }
body.light-mode .pay-section { box-shadow:0 2px 8px rgba(0,0,0,.06); }
body.light-mode .pay-upload-wrap { border-color:#d1d5db; }
body.light-mode .pay-upload-wrap:hover { border-color:var(--mlm-theme-color); }

/* ================================================================
   ERROR 404 PAGE (err404-*)
   ================================================================ */
.err404-wrap { display:flex; flex-direction:column; min-height:100vh; }
.err404-body {
    flex:1; display:flex; align-items:center; justify-content:center;
    padding:24px 20px 100px;
    background:var(--mlm-page-bg-2);
}
.err404-card {
    background:var(--mlm-card-bg);
    border:1px solid var(--mlm-card-border);
    border-radius:24px;
    padding:48px 32px 40px;
    max-width:360px; width:100%;
    text-align:center;
    box-shadow:0 4px 32px rgba(0,0,0,.10);
}
.err404-num {
    font-size:5rem; font-weight:900; line-height:1;
    background:linear-gradient(135deg, var(--mlm-theme-color), rgba(var(--mlm-theme-color-rgb),.5));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    letter-spacing:-3px; margin-bottom:6px;
}
.err404-divider {
    width:48px; height:3px;
    background:linear-gradient(90deg, var(--mlm-theme-color), rgba(var(--mlm-theme-color-rgb),.3));
    border-radius:99px; margin:0 auto 20px;
}
.err404-icon {
    font-size:2.2rem; color:var(--mlm-theme-color);
    opacity:.7; margin-bottom:14px;
}
.err404-title {
    font-size:1.15rem; font-weight:800;
    color:var(--mlm-page-text); margin-bottom:8px;
}
.err404-sub {
    font-size:.83rem; color:var(--mlm-page-text);
    opacity:.55; line-height:1.7; margin-bottom:28px;
}
.err404-btns { display:flex; gap:10px; justify-content:center; }
.err404-btn-home {
    display:inline-flex; align-items:center; gap:6px;
    padding:11px 20px; border-radius:12px;
    background:var(--mlm-theme-color); color:var(--mlm-theme-text);
    font-size:.83rem; font-weight:700; text-decoration:none;
    transition:opacity .18s, transform .18s;
}
.err404-btn-home:hover { opacity:.88; transform:translateY(-1px); color:var(--mlm-theme-text); text-decoration:none; }
.err404-btn-back {
    display:inline-flex; align-items:center; gap:6px;
    padding:11px 20px; border-radius:12px;
    background:var(--mlm-card-bg);
    border:1.5px solid var(--mlm-card-border);
    color:var(--mlm-page-text); font-size:.83rem; font-weight:600;
    text-decoration:none; transition:opacity .18s;
}
.err404-btn-back:hover { opacity:.75; color:var(--mlm-page-text); text-decoration:none; }

/* light mode */
body.theme-gold-light .err404-card,
body.theme-blue-light .err404-card,
body.theme-green-light .err404-card,
body.theme-purple-light .err404-card,
body.theme-red-light .err404-card { box-shadow:0 4px 20px rgba(0,0,0,.06); }


/* ── PWA Modal ─────────────────────────────────────────────────────────── */
.pwa-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
    animation: pwaFadeIn .2s ease;
}
.pwa-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    width: calc(100% - 32px);
    max-width: 380px;
    background: var(--mlm-card-bg);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid var(--mlm-card-border);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    animation: pwaScaleIn .25s ease;
}
.pwa-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.pwa-modal-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.pwa-modal-info { flex: 1; min-width: 0; }
.pwa-modal-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--mlm-page-text);
    margin-bottom: 2px;
}
.pwa-modal-sub {
    font-size: 12px;
    color: var(--mlm-page-text);
    opacity: .6;
}
.pwa-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(var(--mlm-theme-color-rgb, 201,162,39),.1);
    border: none;
    color: var(--mlm-page-text);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    transition: background .2s;
}
.pwa-modal-close:hover { background: rgba(var(--mlm-theme-color-rgb, 201,162,39),.2); }

.pwa-modal-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px;
    background: rgba(var(--mlm-theme-color-rgb, 201,162,39),.06);
    border-radius: 12px;
    border: 1px solid var(--mlm-card-border);
}
.pwa-modal-feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--mlm-page-text);
}
.pwa-modal-feat i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(var(--mlm-theme-color-rgb, 201,162,39),.15);
    color: var(--mlm-theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.pwa-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.pwa-modal-btn-install {
    width: 100%;
    padding: 13px;
    background: var(--mlm-theme-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity .2s;
}
.pwa-modal-btn-install:hover { opacity: .88; }
.pwa-modal-notif-row { text-align: center; }
.pwa-modal-btn-notif {
    background: transparent;
    border: 1px solid var(--mlm-card-border);
    color: var(--mlm-page-text);
    opacity: .7;
    border-radius: 10px;
    padding: 9px 20px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color .2s, color .2s, opacity .2s;
    width: 100%;
    justify-content: center;
}
.pwa-modal-btn-notif:hover {
    border-color: var(--mlm-theme-color);
    color: var(--mlm-theme-color);
    opacity: 1;
}

/* iOS steps */
.pwa-modal-ios { top: auto; bottom: 16px; transform: translateX(-50%); }
.pwa-ios-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.pwa-ios-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--mlm-page-text);
}
.pwa-ios-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mlm-theme-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}
.pwa-ios-arrow { text-align: center; font-size: 18px; color: var(--mlm-theme-color); }

@keyframes pwaFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pwaScaleIn { from { opacity: 0; transform: translate(-50%,-50%) scale(.92); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes pwaSlideDown {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ================================================================
   HALAMAN NOTIFIKASI (nf-*)
   ================================================================ */
.nf-page-wrap { padding-bottom: 80px; }

.nf-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; gap: 8px;
    border-bottom: 1px solid var(--mlm-card-border);
    background: var(--mlm-card-bg);
    position: sticky; top: 0; z-index: 10;
}
.nf-toolbar-count { font-size: 12px; color: var(--mlm-page-text-muted); }
.nf-toolbar-actions { display: flex; gap: 4px; align-items: center; }

.nf-btn-text {
    display: flex; align-items: center; gap: 5px;
    background: none; border: 1px solid transparent;
    font-size: 12px; color: var(--mlm-theme-color);
    cursor: pointer; padding: 5px 10px; border-radius: 8px;
    transition: background .15s, border-color .15s; white-space: nowrap;
}
.nf-btn-text:hover { background: rgba(var(--mlm-theme-color-rgb),.1); border-color: rgba(var(--mlm-theme-color-rgb),.2); }
.nf-btn-text:disabled { opacity: .35; cursor: default; }
.nf-btn-text.nf-btn-danger { color: #f87171; }
.nf-btn-text.nf-btn-danger:hover { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.25); }

.nf-list { padding: 32px 16px; display: flex; flex-direction: column; gap: 8px; }

.nf-item {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px;
    background: var(--mlm-card-bg);
    border: 1px solid var(--mlm-card-border);
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s, transform .1s;
    position: relative; overflow: hidden;
}
.nf-item:hover { background: rgba(var(--mlm-theme-color-rgb),.06); transform: translateX(2px); }
.nf-item.nf-read { opacity: .6; }

.nf-item:not(.nf-read)::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.nf-item-info:not(.nf-read)::before    { background: #60a5fa; }
.nf-item-success:not(.nf-read)::before { background: #4ade80; }
.nf-item-warning:not(.nf-read)::before { background: #fbbf24; }
.nf-item-danger:not(.nf-read)::before  { background: #f87171; }

.nf-item-icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.nfi-info    { background: rgba(96,165,250,.15);  color: #60a5fa; }
.nfi-success { background: rgba(74,222,128,.15);  color: #4ade80; }
.nfi-warning { background: rgba(251,191,36,.15);  color: #fbbf24; }
.nfi-danger  { background: rgba(248,113,113,.15); color: #f87171; }

.nf-item-body { flex: 1; min-width: 0; }
.nf-item-row {
    display: flex; align-items: baseline;
    justify-content: space-between; gap: 8px; margin-bottom: 3px;
}
.nf-item-title {
    font-weight: 600; font-size: 13px; color: var(--mlm-page-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
}
.nf-item-time {
    font-size: 10px; color: var(--mlm-page-text-muted);
    white-space: nowrap; flex-shrink: 0;
}
.nf-item-msg {
    font-size: 12px; color: var(--mlm-page-text-muted); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; overflow: hidden;
}
.nf-item-chevron { flex-shrink: 0; font-size: 10px; color: var(--mlm-page-text-muted); opacity: .5; }
.nf-item-del {
    position: absolute; right: 10px; top: 8px;
    width: 24px; height: 24px; border-radius: 50%;
    border: none; background: rgba(248,113,113,.12); color: #f87171;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 10px; opacity: 0; transition: opacity .15s, background .15s; z-index: 2;
}
.nf-item:hover .nf-item-del { opacity: 1; }
.nf-item-del:hover { background: rgba(248,113,113,.3); }

.nf-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 60px 20px; gap: 12px;
    color: var(--mlm-page-text-muted);
}
.nf-empty-icon { font-size: 48px; opacity: .25; }
.nf-empty p { font-size: 14px; margin: 0; }

.nf-loading { text-align: center; padding: 24px; color: var(--mlm-page-text-muted); font-size: 22px; }
.nf-load-more { text-align: center; padding: 14px; }
.nf-load-more button {
    background: none; border: 1px solid var(--mlm-card-border);
    color: var(--mlm-theme-color); border-radius: 20px;
    padding: 8px 24px; font-size: 13px; cursor: pointer; transition: background .15s;
}
.nf-load-more button:hover { background: rgba(var(--mlm-theme-color-rgb),.08); }

/* ── MODAL DETAIL NOTIFIKASI (nfm-*) ── */
.nfm-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; animation: nfmFadeIn .15s ease;
}
@keyframes nfmFadeIn { from { opacity: 0; } to { opacity: 1; } }

.nfm-box {
    width: 100%; max-width: 440px;
    background: var(--mlm-card-bg);
    border: 1px solid var(--mlm-card-border);
    border-radius: 16px; overflow: hidden;
    animation: nfmPopIn .2s ease;
    max-height: calc(100vh - 80px);
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
@keyframes nfmPopIn {
    from { transform: scale(.93); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.nfm-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--mlm-card-border);
    border-left: 4px solid transparent;
    flex-shrink: 0; gap: 10px;
}
.nfm-head-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.nfm-icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.nfm-title { font-weight: 700; font-size: 14px; color: var(--mlm-page-text); line-height: 1.35; }
.nfm-time  { font-size: 11px; color: var(--mlm-page-text-muted); margin-top: 2px; }
.nfm-close {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    border: none; background: rgba(var(--mlm-theme-color-rgb),.1);
    color: var(--mlm-page-text-muted);
    font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; transition: background .15s, color .15s;
}
.nfm-close:hover { background: rgba(248,113,113,.2); color: #f87171; }
.nfm-body {
    flex: 1; overflow-y: auto; padding: 16px;
    font-size: 13px; color: var(--mlm-page-text);
    line-height: 1.75; word-break: break-word;
}
.nfm-foot { padding: 12px 16px; border-top: 1px solid var(--mlm-card-border); flex-shrink: 0; }
.nfm-btn-goto {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; width: 100%; padding: 11px; border-radius: 10px;
    background: rgba(var(--mlm-theme-color-rgb),.15);
    color: var(--mlm-theme-color);
    font-size: 13px; font-weight: 600;
    text-decoration: none; transition: background .15s;
}
.nfm-btn-goto:hover { background: rgba(var(--mlm-theme-color-rgb),.28); }

/* ================================================================
   NOTIFIKASI DROPDOWN (nfd-*)
   ================================================================ */
#nfDropdownBackdrop {
    position: fixed;
    inset: 0;
    z-index: 99988;
}
.nfd-wrap {
    position: fixed;
    top: 56px;
    right: 12px;
    width: min(340px, calc(100vw - 24px));
    max-height: 480px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: nfdSlideIn .18s ease;
}
@keyframes nfdSlideIn {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.nfd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.nfd-title { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.nfd-mark-all {
    background: none;
    border: none;
    font-size: 11px;
    color: var(--text-accent);
    cursor: pointer;
    padding: 0;
}
.nfd-mark-all:hover { text-decoration: underline; }

.nfd-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* skeleton loader */
.nfd-skeleton { padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }
.nfd-sk-item {
    height: 54px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.06) 75%);
    background-size: 200% 100%;
    animation: nfdSkShimmer 1.2s infinite;
}
@keyframes nfdSkShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* item */
.nfd-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background .15s;
    position: relative;
}
.nfd-item:last-child { border-bottom: none; }
.nfd-item:hover { background: rgba(var(--mlm-theme-color-rgb), .06); }
.nfd-item.nfd-unread { background: rgba(var(--mlm-theme-color-rgb), .05); }
.nfd-item.nfd-unread::before {
    content: '';
    position: absolute;
    left: 4px; top: 50%; transform: translateY(-50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--text-accent);
}

.nfd-icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    background: rgba(var(--mlm-theme-color-rgb), .12);
    color: var(--text-accent);
}
.nfd-icon.nfd-success { background: rgba(74,222,128,.12);  color: #4ade80; }
.nfd-icon.nfd-warning { background: rgba(251,191,36,.12);  color: #fbbf24; }
.nfd-icon.nfd-danger  { background: rgba(248,113,113,.12); color: #f87171; }

.nfd-body { flex: 1; min-width: 0; }
.nfd-item-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nfd-item-msg {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nfd-item-time { font-size: 10px; color: var(--text-muted); margin-top: 3px; opacity: .7; }

.nfd-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 13px;
}
.nfd-empty i { display: block; font-size: 28px; opacity: .3; margin-bottom: 8px; }

.nfd-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-accent);
    text-decoration: none;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    transition: background .15s;
}
.nfd-footer:hover { background: rgba(var(--mlm-theme-color-rgb), .08); }

/* light mode */
.theme-gold-light .nfd-wrap,
.theme-blue-light .nfd-wrap,
.theme-green-light .nfd-wrap,
.theme-purple-light .nfd-wrap,
.theme-red-light .nfd-wrap {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.theme-gold-light .nfd-sk-item,
.theme-blue-light .nfd-sk-item,
.theme-green-light .nfd-sk-item,
.theme-purple-light .nfd-sk-item,
.theme-red-light .nfd-sk-item {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
}

/* =============================================================================
   16. CAR OWNERSHIP PROGRAM (cop-*)
   ============================================================================= */

/* Klaim Sertifikat Button */
.cop-klaim-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--mlm-theme-color);
    color: #000; border: none; border-radius: 20px;
    font-size: 12px; font-weight: 700; padding: 6px 16px;
    cursor: pointer; transition: opacity .15s, transform .15s;
    white-space: nowrap;
}
.cop-klaim-btn:hover { opacity: .85; transform: translateY(-1px); }

/* Klaim status badge (setelah pengajuan aktif) */
.cop-klaim-status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 20px; font-size: 12px; font-weight: 700;
    padding: 6px 14px; white-space: nowrap;
}
.cop-klaim-pending { background: rgba(255,193,7,.15); color: #ffc107; border: 1px solid rgba(255,193,7,.3); }
.cop-klaim-approved { background: rgba(25,135,84,.15); color: #198754; border: 1px solid rgba(25,135,84,.3); }
body.theme-gold-light .cop-klaim-pending,body.theme-blue-light .cop-klaim-pending,body.theme-green-light .cop-klaim-pending,body.theme-purple-light .cop-klaim-pending,body.theme-red-light .cop-klaim-pending { color: #a07800; }
body.theme-gold-light .cop-klaim-approved,body.theme-blue-light .cop-klaim-approved,body.theme-green-light .cop-klaim-approved,body.theme-purple-light .cop-klaim-approved,body.theme-red-light .cop-klaim-approved { color: #0a6640; }

/* ── Riwayat COP ─────────────────────────────────────────────────────────── */
.cop-riwayat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--mlm-page-text-muted); }

.cop-riwayat-list { display: flex; flex-direction: column; gap: 8px; }
.cop-riwayat-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border); }
.cop-riwayat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.cop-riwayat-motor { background: rgba(255,193,7,.15); color: #ffc107; }
.cop-riwayat-mobil { background: rgba(13,202,240,.15); color: #0dcaf0; }
.cop-riwayat-body { flex: 1; min-width: 0; }
.cop-riwayat-title { font-size: 13px; font-weight: 700; color: var(--mlm-page-text); }
.cop-riwayat-date { font-size: 11px; color: var(--mlm-page-text-muted); margin-top: 2px; }
.cop-riwayat-note { font-size: 11px; color: #f87171; margin-top: 3px; }
.cop-riwayat-nominal { font-weight: 700; color: var(--mlm-theme-color); }
.cop-riwayat-bulan-ke { font-size: 10px; font-weight: 600; background: rgba(var(--mlm-theme-color-rgb),.1); color: var(--mlm-theme-color); border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.cop-riwayat-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; border-radius: 20px; padding: 4px 10px; white-space: nowrap; flex-shrink: 0; }
.cop-riwayat-status-pending  { background: rgba(255,193,7,.12); color: #ffc107; border: 1px solid rgba(255,193,7,.3); }
.cop-riwayat-status-approved { background: rgba(25,135,84,.12); color: #198754; border: 1px solid rgba(25,135,84,.3); }
.cop-riwayat-status-rejected { background: rgba(220,53,69,.1); color: #dc3545; border: 1px solid rgba(220,53,69,.2); }
body.theme-gold-light .cop-riwayat-status-pending,body.theme-blue-light .cop-riwayat-status-pending,body.theme-green-light .cop-riwayat-status-pending,body.theme-purple-light .cop-riwayat-status-pending,body.theme-red-light .cop-riwayat-status-pending { color: #a07800; }
body.theme-gold-light .cop-riwayat-status-approved,body.theme-blue-light .cop-riwayat-status-approved,body.theme-green-light .cop-riwayat-status-approved,body.theme-purple-light .cop-riwayat-status-approved,body.theme-red-light .cop-riwayat-status-approved { color: #0a6640; }
body.theme-gold-light .cop-riwayat-status-rejected,body.theme-blue-light .cop-riwayat-status-rejected,body.theme-green-light .cop-riwayat-status-rejected,body.theme-purple-light .cop-riwayat-status-rejected,body.theme-red-light .cop-riwayat-status-rejected { color: #9e1c28; }

/* MOU card */
.cop-mou-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border); }
.cop-mou-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(var(--mlm-theme-color-rgb),.12); color: var(--mlm-theme-color); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.cop-mou-info { flex: 1; min-width: 0; }
.cop-mou-title { font-size: 12px; font-weight: 700; color: var(--mlm-page-text); }
.cop-mou-progress-text { font-size: 10px; color: var(--mlm-page-text-muted); margin-bottom: 4px; }
.cop-mou-bar-wrap { height: 4px; background: rgba(var(--mlm-theme-color-rgb),.12); border-radius: 4px; overflow: hidden; }
.cop-mou-bar-fill { height: 100%; background: var(--mlm-theme-color); border-radius: 4px; transition: width .5s; }
.cop-mou-status { font-size: 10px; font-weight: 700; border-radius: 20px; padding: 3px 9px; flex-shrink: 0; }
.cop-mou-aktif  { background: rgba(var(--mlm-theme-color-rgb),.12); color: var(--mlm-theme-color); }
.cop-mou-selesai { background: rgba(25,135,84,.12); color: #198754; }
body.theme-gold-light .cop-mou-selesai,body.theme-blue-light .cop-mou-selesai,body.theme-green-light .cop-mou-selesai,body.theme-purple-light .cop-mou-selesai,body.theme-red-light .cop-mou-selesai { color: #0a6640; }

/* Klaim Modal */
.cop-klaim-hero {
    display: flex; flex-direction: column; align-items: center;
    padding: 20px 0 16px;
    border-radius: 12px;
    background: var(--mlm-card-bg);
    border: 1px solid var(--mlm-card-border);
    margin-bottom: 20px;
}
.cop-klaim-icon {
    width: 68px; height: 68px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px; font-size: 26px;
}
.cop-klaim-title { font-size: 18px; font-weight: 800; color: var(--mlm-page-text); margin-bottom: 3px; }
.cop-klaim-subtitle { font-size: 12px; color: var(--mlm-page-text-muted); }

.cop-klaim-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.cop-klaim-step {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--mlm-card-bg);
    border: 1px solid var(--mlm-card-border);
    border-radius: 10px; padding: 10px 12px;
}
.cop-klaim-step-num {
    min-width: 24px; height: 24px; border-radius: 50%;
    background: var(--mlm-theme-color);
    color: #000; font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cop-klaim-step-text { font-size: 12px; color: var(--mlm-page-text); line-height: 1.5; }
.cop-klaim-info {
    display: flex; align-items: flex-start; gap: 8px;
    background: rgba(var(--mlm-theme-color-rgb),.08);
    border-left: 3px solid var(--mlm-theme-color);
    border-radius: 0 8px 8px 0;
    padding: 10px 14px; font-size: 12px;
    color: var(--mlm-page-text-muted); margin-bottom: 4px;
}

/* SweetAlert themed popup */
.swal-themed { background: var(--mlm-card-bg) !important; color: var(--mlm-page-text) !important; }
.swal2-popup.swal-themed { border: 1px solid var(--mlm-card-border); }

/* Progress Tracker */
.cop-tracker {
    background: var(--mlm-card-bg);
    border: 1px solid var(--mlm-card-border);
    border-radius: 16px;
    padding: 16px 20px;
    color: var(--mlm-page-text);
}
.cop-tracker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 35px; }
.cop-tracker-me { display: flex; align-items: center; gap: 12px; }
.cop-tracker-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: rgba(var(--mlm-theme-color-rgb),.18);
    color: var(--mlm-theme-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.cop-tracker-name { font-size: 14px; font-weight: 700; color: var(--mlm-page-text); }
.cop-tracker-id { font-size: 11px; color: var(--mlm-page-text-muted); }
.cop-tracker-count { text-align: right; }
.cop-tracker-num { font-size: 28px; font-weight: 900; color: var(--mlm-theme-color); line-height: 1; }
.cop-tracker-denom { font-size: 14px; color: var(--mlm-page-text-muted); }
.cop-tracker-label { font-size: 10px; color: var(--mlm-page-text-muted); text-transform: uppercase; letter-spacing: .04em; }

.cop-progress-wrap { padding: 0 4px; }
.cop-progress-track {
    position: relative;
    height: 8px;
    background: rgba(var(--mlm-theme-color-rgb),.12);
    border-radius: 8px;
    margin-bottom: 28px;
}
.cop-progress-fill {
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--mlm-theme-color), rgba(var(--mlm-theme-color-rgb),.55));
    transition: width .5s ease;
}
.cop-milestone {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.cop-milestone-dot {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--mlm-card-bg);
    border: 2px solid var(--mlm-card-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--mlm-page-text-muted);
    transition: all .3s;
}
.cop-milestone-dot.cop-milestone-done {
    background: rgba(var(--mlm-theme-color-rgb),.15);
    border-color: var(--mlm-theme-color);
    color: var(--mlm-theme-color);
}
.cop-milestone-dot.cop-milestone-claimed {
    background: rgba(25,135,84,.2) !important;
    border-color: #198754 !important;
    color: #198754 !important;
    box-shadow: 0 0 0 3px rgba(25,135,84,.15);
}
.cop-progress-fill.cop-progress-fill-claimed {
    background: linear-gradient(90deg, #198754, rgba(25,135,84,.6));
}
.cop-milestone-label {
    font-size: 9px; font-weight: 700;
    color: var(--mlm-page-text-muted);
    white-space: nowrap;
    margin-top: 14px;
}

/* Reward Cards */
.cop-reward-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--mlm-card-border);
    background: var(--mlm-card-bg);
    transition: border-color .2s, box-shadow .2s;
    height: 100%;
    color: var(--mlm-page-text);
}
.cop-reward-card.cop-reward-unlocked {
    border-color: rgba(var(--mlm-theme-color-rgb),.5);
    box-shadow: 0 0 0 3px rgba(var(--mlm-theme-color-rgb),.07);
}
.cop-reward-icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.cop-reward-motor { background: rgba(255,193,7,.12); color: #ffc107; }
.cop-reward-mobil { background: rgba(13,202,240,.12); color: #0dcaf0; }
.cop-reward-body { flex: 1; min-width: 0; }
.cop-reward-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--mlm-page-text); }
.cop-reward-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cop-reward-bar {
    flex: 1; height: 5px; border-radius: 5px;
    background: rgba(var(--mlm-theme-color-rgb),.12);
    overflow: hidden;
}
.cop-reward-bar-fill { height: 100%; border-radius: 5px; transition: width .5s ease; }
.cop-reward-pct { font-size: 11px; font-weight: 700; color: var(--mlm-page-text-muted); white-space: nowrap; }
.cop-reward-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.cop-reward-meta span { font-size: 11px; color: var(--mlm-page-text-muted); }
.cop-reward-meta span i { margin-right: 3px; }
.cop-reward-badge { flex-shrink: 0; }

/* Downline Tree Swiper */
.cop-tree-swiper { width: 100%; overflow: hidden; }
.cop-tree-swiper .swiper-slide {
    width: calc(50% - 6px);
}
@media (min-width: 480px) {
    .cop-tree-swiper .swiper-slide { width: calc(33.33% - 7px); }
}
@media (min-width: 768px) {
    .cop-tree-swiper .swiper-slide { width: calc(12.5% - 9px); }
}

.cop-node {
    display: flex; flex-direction: column; align-items: center;
    gap: 7px; padding: 14px 10px 12px;
    border-radius: 16px;
    border: 1px solid var(--mlm-card-border);
    background: var(--mlm-page-bg-2, var(--mlm-card-bg));
    transition: border-color .2s, transform .15s, box-shadow .2s;
    text-align: center; width: 100%;
}
.cop-node:hover { border-color: var(--mlm-theme-color); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(var(--mlm-theme-color-rgb),.12); }
.cop-node-active { border-color: rgba(var(--mlm-theme-color-rgb),.45); }
.cop-node-slot {
    font-size: 10px; font-weight: 700;
    color: var(--mlm-theme-color);
    background: rgba(var(--mlm-theme-color-rgb),.1);
    border-radius: 20px; padding: 2px 10px;
}
.cop-node-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(var(--mlm-theme-color-rgb),.12);
    border: 2px solid rgba(var(--mlm-theme-color-rgb),.25);
    color: var(--mlm-theme-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800;
}
.cop-node-active .cop-node-avatar {
    border-color: var(--mlm-theme-color);
    background: rgba(var(--mlm-theme-color-rgb),.2);
}
.cop-node-name {
    font-size: 12px; font-weight: 700; line-height: 1.3;
    word-break: break-word; color: var(--mlm-page-text); width: 100%;
}
.cop-node-ro-badge {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    width: 100%;
    background: rgba(var(--mlm-theme-color-rgb),.08);
    border-radius: 8px; padding: 4px 6px;
}
.cop-node-ro-label { font-size: 9px; font-weight: 500; color: var(--mlm-page-text-muted); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.cop-node-ro-val { font-size: 12px; font-weight: 800; color: var(--mlm-theme-color); }
.cop-node-ro-empty-badge {
    font-size: 10px; font-weight: 600;
    color: var(--mlm-page-text-muted);
    opacity: .7;
}

/* Dot progress duplikasi */
.cop-node-dup { width: auto; }
.cop-node-dup-label { font-size: 10px; color: var(--mlm-page-text-muted); margin-bottom: 5px; }
.cop-node-dup-count { font-weight: 700; color: var(--mlm-theme-color); }
.cop-node-dots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    justify-items: center;
}
.cop-dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: rgba(var(--mlm-theme-color-rgb),.12);
    border: 1.5px solid rgba(var(--mlm-theme-color-rgb),.25);
    transition: background .2s;
}
.cop-dot-on {
    background: var(--mlm-theme-color);
    border-color: var(--mlm-theme-color);
    box-shadow: 0 0 4px rgba(var(--mlm-theme-color-rgb),.45);
}

/* Node action buttons */
.cop-node-actions { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; width: 100%; }
.cop-node-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 11px; font-weight: 600; padding: 6px 8px;
    border-radius: 20px; text-decoration: none; transition: opacity .15s;
    border: none; cursor: pointer; width: 100%;
}
.cop-node-btn:hover { opacity: .82; text-decoration: none; }
.cop-node-btn-ro {
    background: rgba(var(--mlm-theme-color-rgb),.15);
    color: var(--mlm-theme-color);
    border: 1px solid rgba(var(--mlm-theme-color-rgb),.3);
}
.cop-node-btn-tree {
    background: transparent;
    color: var(--mlm-page-text-muted);
    border: 1px solid var(--mlm-card-border);
}
.cop-breadcrumb-back {
    font-size: 11px; font-weight: 600;
    color: var(--mlm-theme-color);
    text-decoration: none;
    opacity: .8;
}
.cop-breadcrumb-back:hover { opacity: 1; text-decoration: none; }
.cop-id-chip {
    display: inline-block;
    font-size: 10px; font-weight: 600;
    padding: 1px 7px; border-radius: 20px;
    background: rgba(var(--mlm-theme-color-rgb),.12);
    color: var(--mlm-theme-color);
    border: 1px solid rgba(var(--mlm-theme-color-rgb),.2);
    vertical-align: middle;
    margin-left: 4px;
}
.cop-section {
    background: var(--mlm-card-bg);
    border: 1px solid var(--mlm-card-border);
    border-radius: 12px;
    color: var(--mlm-page-text);
}
.cop-section-body { padding: 16px; }

/* ================================================================
   KUPON UNDIAN — uk-*
   ================================================================ */
.uk-section { background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.uk-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.uk-section-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(var(--mlm-theme-color-rgb),.12); color: var(--mlm-theme-color); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.uk-section-info { flex: 1; min-width: 0; }
.uk-section-title { font-size: 14px; font-weight: 800; color: var(--mlm-page-text); }
.uk-section-meta { font-size: 11px; color: var(--mlm-page-text-muted); margin-top: 2px; }
.uk-section-badge { text-align: right; flex-shrink: 0; }
.uk-count-badge { display: block; font-size: 26px; font-weight: 900; line-height: 1; color: var(--mlm-theme-color); }
.uk-count-label { font-size: 10px; color: var(--mlm-page-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.uk-no-kupon { font-size: 12px; color: var(--mlm-page-text-muted); background: rgba(var(--mlm-theme-color-rgb),.05); border: 1px dashed var(--mlm-card-border); border-radius: 10px; padding: 12px 14px; text-align: center; }
.uk-kupon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 400px) { .uk-kupon-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 600px) { .uk-kupon-grid { grid-template-columns: repeat(5, 1fr); } }
.uk-kupon-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 6px 8px; border-radius: 10px; background: rgba(var(--mlm-theme-color-rgb),.06); border: 1.5px dashed rgba(var(--mlm-theme-color-rgb),.3); position: relative; overflow: hidden; }
.uk-kupon-item::before,.uk-kupon-item::after { content: ''; position: absolute; width: 10px; height: 10px; background: var(--mlm-page-bg); border-radius: 50%; top: 50%; transform: translateY(-50%); }
.uk-kupon-item::before { left: -5px; }
.uk-kupon-item::after { right: -5px; }
.uk-kupon-code { font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--mlm-theme-color); font-family: 'Courier New', monospace; }
.uk-kupon-label { font-size: 9px; font-weight: 600; color: var(--mlm-page-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.uk-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; }
.uk-empty-icon { font-size: 48px; color: var(--mlm-page-text-muted); opacity: .3; margin-bottom: 16px; }
.uk-empty-title { font-size: 16px; font-weight: 700; color: var(--mlm-page-text); margin-bottom: 6px; }
.uk-empty-sub { font-size: 12px; color: var(--mlm-page-text-muted); }

/* ================================================================
   PEMENANG UNDIAN — up-*
   ================================================================ */
.up-section { background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.up-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.up-section-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,193,7,.12); color: #ffc107; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.up-section-info { flex: 1; min-width: 0; }
.up-section-title { font-size: 14px; font-weight: 800; color: var(--mlm-page-text); }
.up-section-meta { font-size: 11px; color: var(--mlm-page-text-muted); margin-top: 2px; }
.up-no-data { font-size: 12px; color: var(--mlm-page-text-muted); background: rgba(var(--mlm-theme-color-rgb),.05); border: 1px dashed var(--mlm-card-border); border-radius: 10px; padding: 12px 14px; text-align: center; }
.up-list { display: flex; flex-direction: column; gap: 8px; }
.up-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--mlm-page-bg); border: 1px solid var(--mlm-card-border); }
.up-item:first-child { border-color: rgba(255,193,7,.4); background: rgba(255,193,7,.05); }
.up-item:nth-child(2) { border-color: rgba(148,163,184,.3); background: rgba(148,163,184,.04); }
.up-item:nth-child(3) { border-color: rgba(205,127,50,.3); background: rgba(205,127,50,.04); }
.up-rank { min-width: 24px; height: 24px; border-radius: 50%; background: rgba(var(--mlm-theme-color-rgb),.1); color: var(--mlm-page-text-muted); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.up-item:first-child .up-rank { background: rgba(255,193,7,.2); color: #ffc107; }
.up-item:nth-child(2) .up-rank { background: rgba(148,163,184,.2); color: #94a3b8; }
.up-item:nth-child(3) .up-rank { background: rgba(205,127,50,.2); color: #cd7f32; }
.up-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--mlm-theme-color-rgb),.12); color: var(--mlm-theme-color); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.up-info { flex: 1; min-width: 0; }
.up-name { font-size: 13px; font-weight: 700; color: var(--mlm-page-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-id { font-size: 10px; color: var(--mlm-page-text-muted); margin-top: 1px; }
.up-kupon { text-align: right; flex-shrink: 0; }
.up-kupon-code { font-size: 13px; font-weight: 800; color: var(--mlm-theme-color); font-family: 'Courier New', monospace; letter-spacing: .04em; }
.up-kupon-label { font-size: 9px; color: var(--mlm-page-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 1px; }
.up-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; }
.up-empty-icon { font-size: 48px; color: #ffc107; opacity: .3; margin-bottom: 16px; }
.up-empty-title { font-size: 16px; font-weight: 700; color: var(--mlm-page-text); margin-bottom: 6px; }
.up-empty-sub { font-size: 12px; color: var(--mlm-page-text-muted); }

/* ================================================================
   BONUS GAJIAN dashboard override — bgs-*
   ================================================================ */
.bgs-ring-fill { stroke: #22c55e; }
.bgs-ring-fill.done { stroke: #4ade80; }
.bgs-bar-fill { background: linear-gradient(90deg,#16a34a,#4ade80); }
.bgs-bar-fill.done { background: linear-gradient(90deg,#15803d,#86efac); }
.bgs-nominal-val { color: #4ade80 !important; }
body.theme-gold-light .bgs-nominal-val,body.theme-blue-light .bgs-nominal-val,body.theme-green-light .bgs-nominal-val,body.theme-purple-light .bgs-nominal-val,body.theme-red-light .bgs-nominal-val { color: #16a34a !important; }

/* ================================================================
   BIRTHDAY MODAL
   ================================================================ */
.bday-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    opacity: 0; transition: opacity .32s ease;
}
.bday-modal-overlay.bday-visible { opacity: 1; }
.bday-modal-overlay.bday-visible .bday-modal { transform: translateY(0) scale(1); }

.bday-modal {
    position: relative; width: 100%; max-width: 360px;
    border-radius: 24px; overflow: hidden;
    background: var(--mlm-card-bg); border: 1px solid var(--mlm-card-border);
    box-shadow: 0 24px 64px rgba(0,0,0,.45);
    transform: translateY(32px) scale(.95); transition: transform .36s cubic-bezier(.34,1.56,.64,1);
}
.bday-canvas {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    border-radius: 24px;
}

/* ── header ── */
.bday-header {
    position: relative; z-index: 1;
    background: linear-gradient(135deg,#f59e0b 0%,#ef4444 50%,#8b5cf6 100%);
    padding: 28px 20px 18px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.bday-cake { font-size: 52px; line-height: 1; filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)); }
.bday-balloons { font-size: 22px; letter-spacing: 4px; }

/* ── body ── */
.bday-body { position: relative; z-index: 1; padding: 20px 22px 4px; text-align: center; }
.bday-from { font-size: 11px; font-weight: 600; color: var(--mlm-page-text-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.bday-title { font-size: 22px; font-weight: 900; color: var(--mlm-page-text); line-height: 1.2; margin-bottom: 8px; }
.bday-wish { font-size: 12.5px; color: var(--mlm-page-text-muted); line-height: 1.6; margin-bottom: 18px; }

.bday-info {
    background: rgba(var(--mlm-theme-color-rgb,201,162,39),.07);
    border: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.15);
    border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; text-align: left;
}
.bday-info-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
.bday-info-row + .bday-info-row { border-top: 1px solid rgba(var(--mlm-theme-color-rgb,201,162,39),.1); }
.bday-info-label { font-size: 11px; color: var(--mlm-page-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.bday-info-val { font-size: 13px; font-weight: 700; color: var(--mlm-page-text); }

.bday-noshowall {
    display: flex; align-items: center; gap: 7px; justify-content: center;
    font-size: 12px; color: var(--mlm-page-text-muted); cursor: pointer;
    margin-bottom: 18px; user-select: none;
}
.bday-noshowall input { accent-color: var(--mlm-theme-color); width: 15px; height: 15px; cursor: pointer; }

/* ── footer ── */
.bday-footer { position: relative; z-index: 1; padding: 0 22px 22px; }
.bday-btn {
    width: 100%; padding: 13px; border-radius: 14px;
    background: linear-gradient(135deg,#f59e0b,#ef4444);
    color: #fff; font-size: 14px; font-weight: 800; border: none; cursor: pointer;
    transition: opacity .18s; box-shadow: 0 4px 16px rgba(239,68,68,.35);
}
.bday-btn:hover { opacity: .88; }

/* light mode */
body.theme-gold-light .bday-info,body.theme-blue-light .bday-info,
body.theme-green-light .bday-info,body.theme-purple-light .bday-info,
body.theme-red-light .bday-info { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); }