/*
 * PM Shop V85 - Balanced Purple + Metallic Gold Theme
 * Fixes V84 which looked mostly purple/magenta on the live UI.
 *
 * Safety rules:
 * - Never changes img/picture/video/canvas visibility or dimensions.
 * - Never clears product/background images.
 * - Status colors (red/green/orange) remain functional.
 */

:root {
    --pm85-purple-950: #120318;
    --pm85-purple-900: #22062d;
    --pm85-purple-850: #31083e;
    --pm85-purple-800: #470d59;
    --pm85-purple-700: #611477;
    --pm85-purple-600: #7e1f98;
    --pm85-purple-500: #9c31b7;
    --pm85-purple-400: #bb54cf;

    --pm85-gold-900: #6f4308;
    --pm85-gold-800: #8d5a0d;
    --pm85-gold-700: #ad761c;
    --pm85-gold-600: #cc9630;
    --pm85-gold-500: #e0b344;
    --pm85-gold-400: #f0cf67;
    --pm85-gold-300: #f9df84;
    --pm85-gold-200: #ffedaa;

    --pm85-dark: #07020a;
    --pm85-surface: #14071c;
    --pm85-surface-2: #21102a;
    --pm85-text: #fffaf0;
    --pm85-muted: #cbbfd0;

    --pm85-purple-gold: linear-gradient(115deg,
        #4b0d5c 0%,
        #7e1f98 34%,
        #bd8427 68%,
        #f0cf67 100%
    );
    --pm85-purple-gold-hover: linear-gradient(115deg,
        #631578 0%,
        #a13bc0 34%,
        #d39d37 68%,
        #ffe28a 100%
    );
    --pm85-gold-metal: linear-gradient(135deg,
        #79500f 0%,
        #b57d1e 31%,
        #e8bf51 67%,
        #ffeb9d 100%
    );
    --pm85-gold-purple-text: linear-gradient(90deg,
        #ffe89a 0%,
        #e2b54b 34%,
        #b34dcc 67%,
        #792197 100%
    );
    --pm85-card-dark: linear-gradient(145deg,
        rgba(19, 6, 27, .98) 0%,
        rgba(31, 10, 42, .97) 68%,
        rgba(61, 36, 12, .88) 100%
    );
    --pm85-border: rgba(224, 179, 68, .34);
    --pm85-border-strong: rgba(240, 207, 103, .58);
    --pm85-shadow: 0 16px 38px rgba(70, 13, 86, .24), 0 6px 18px rgba(173, 118, 28, .12);

    --primary: var(--pm85-purple-600);
    --primary-2: var(--pm85-gold-500);
    --accent: var(--pm85-gold-500);
    --ss-primary: var(--pm85-purple-600);
    --ss-primary-2: var(--pm85-gold-500);
    --pmam-accent: var(--pm85-purple-600);
    --pmam-accent-2: var(--pm85-gold-500);
    --pm-primary: var(--pm85-purple-600);
    --pm-primary-2: var(--pm85-gold-500);
    --pm-accent: var(--pm85-gold-500);
}

html,
html.dark,
html.theme-dark,
html.dark-mode {
    accent-color: var(--pm85-gold-500);
}

html:not(.pm-light) body {
    background-color: var(--pm85-dark) !important;
    color: var(--pm85-text);
}

/* --------------------------------------------------------------------------
   FRONTEND HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
body .premium-header {
    border-color: var(--pm85-border) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.34), 0 0 30px rgba(224,179,68,.08) !important;
}
body .premium-header::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(224,179,68,.72), rgba(156,49,183,.78), transparent);
    pointer-events: none;
}

body .nav-btn,
body .theme-toggle-btn {
    border-color: rgba(224,179,68,.25) !important;
}
body .nav-btn:hover,
body .theme-toggle-btn:hover {
    border-color: var(--pm85-border-strong) !important;
    box-shadow: 0 10px 24px rgba(173,118,28,.12) !important;
}

/* Top Produk: metallic gold, with deep-purple readable text. */
body .nav-orange {
    background: var(--pm85-gold-metal) !important;
    background-image: var(--pm85-gold-metal) !important;
    border-color: rgba(255,237,170,.68) !important;
    color: #25102d !important;
    text-shadow: none !important;
    box-shadow: 0 13px 30px rgba(173,118,28,.24), inset 0 1px 0 rgba(255,255,255,.42) !important;
}
body .nav-orange :is(span, strong, i, svg) {
    color: #25102d !important;
    -webkit-text-fill-color: #25102d !important;
}

/* Cek Pesanan, Menu and other primary navigation: real purple-to-gold. */
body .nav-primary,
body .front-menu-toggle,
body #frontMenuOpen {
    background: var(--pm85-purple-gold) !important;
    background-image: var(--pm85-purple-gold) !important;
    border-color: rgba(255,237,170,.58) !important;
    color: #fff !important;
    box-shadow: var(--pm85-shadow) !important;
}
body :is(.nav-primary, .front-menu-toggle, #frontMenuOpen) :is(span, strong, i, svg) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
body :is(.nav-primary, .front-menu-toggle, #frontMenuOpen):hover {
    background: var(--pm85-purple-gold-hover) !important;
    background-image: var(--pm85-purple-gold-hover) !important;
}

/* --------------------------------------------------------------------------
   LANDING PAGE: fix the screenshot shown by the user
   -------------------------------------------------------------------------- */
body .hero-title span {
    background: var(--pm85-gold-purple-text) !important;
    background-image: var(--pm85-gold-purple-text) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 8px 20px rgba(173,118,28,.08));
}

body #hero-primary-cta,
body .primary-cta,
body .product-action-buy,
body .pm-physical-submit,
body .pm-submit-button,
body .premium-btn-primary,
body .premium-button-primary,
body .btn-primary:not(.btn-danger):not(.btn-success):not(.btn-warning) {
    background: var(--pm85-purple-gold) !important;
    background-image: var(--pm85-purple-gold) !important;
    border: 1px solid rgba(255,237,170,.56) !important;
    color: #fff !important;
    box-shadow: var(--pm85-shadow) !important;
    text-shadow: 0 1px 1px rgba(24,5,29,.46) !important;
}
body :is(#hero-primary-cta, .primary-cta, .product-action-buy, .pm-physical-submit, .pm-submit-button, .premium-btn-primary, .premium-button-primary) :is(span, strong, i, svg) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
body :is(#hero-primary-cta, .primary-cta, .product-action-buy, .pm-physical-submit, .pm-submit-button, .premium-btn-primary, .premium-button-primary):hover {
    background: var(--pm85-purple-gold-hover) !important;
    background-image: var(--pm85-purple-gold-hover) !important;
    border-color: rgba(255,237,170,.82) !important;
}

/* Secondary controls are dark purple with visible gold edge. */
body .secondary-cta,
body .wallet-btn,
body .product-action-cart,
body .section-link,
body .pm-print-btn.secondary {
    border-color: rgba(224,179,68,.42) !important;
    color: var(--pm85-gold-300) !important;
    background-color: rgba(27,8,36,.84) !important;
    box-shadow: inset 0 1px 0 rgba(255,237,170,.06) !important;
}
body :is(.secondary-cta, .wallet-btn, .product-action-cart, .section-link, .pm-print-btn.secondary) :is(span, strong, i, svg) {
    color: inherit !important;
}
body :is(.secondary-cta, .wallet-btn, .product-action-cart, .section-link, .pm-print-btn.secondary):hover {
    border-color: var(--pm85-border-strong) !important;
    background-color: rgba(48,12,60,.92) !important;
}

body .eyebrow,
body .product-category,
body .section-label,
body .kicker,
body .premium-label,
body .dashboard-label {
    color: var(--pm85-gold-300) !important;
    border-color: rgba(224,179,68,.30) !important;
}
body .eyebrow .dot {
    box-shadow: 0 0 0 6px rgba(240,207,103,.10) !important;
}
body .work-num,
body .work-icon,
body .service-item i,
body .category-icon {
    background: var(--pm85-gold-metal) !important;
    background-image: var(--pm85-gold-metal) !important;
    border-color: rgba(255,237,170,.50) !important;
    color: #25102d !important;
}
body :is(.work-num, .work-icon, .service-item i, .category-icon) :is(i, span, svg) {
    color: #25102d !important;
}
body .transparency-card h3,
body .section-link,
body .product-price,
body .stat-value {
    color: var(--pm85-gold-300) !important;
}

/* Cards keep purple surfaces, but receive real gold accents. */
body :is(.info-card, .stat-card, .wallet-card, .transparency-card, .category-card, .product-card, .review-card, .faq-item) {
    border-color: rgba(224,179,68,.30) !important;
}
body :is(.info-card, .wallet-card, .transparency-card):hover,
body :is(.category-card, .product-card, .review-card):hover {
    border-color: rgba(240,207,103,.58) !important;
    box-shadow: 0 18px 44px rgba(70,13,86,.16), 0 8px 22px rgba(173,118,28,.08) !important;
}

/* Notification / toast: purple surface with gold line, not magenta-only. */
body :is(.notification, .notification-card, .toast, .toast-card, [class*="notification-card"], [class*="transaction-notification"]) {
    border-color: rgba(224,179,68,.42) !important;
    box-shadow: 0 20px 46px rgba(0,0,0,.35), 0 0 24px rgba(224,179,68,.08) !important;
}
body :is(.notification, .notification-card, .toast, .toast-card) :is(.eyebrow, .label, small) {
    color: var(--pm85-gold-300) !important;
}

/* --------------------------------------------------------------------------
   GENERIC BUTTONS / TAILWIND CONTROLS ACROSS ALL PAGES
   -------------------------------------------------------------------------- */
body :is(button, input[type="submit"], input[type="button"], a, [role="button"]):is(
    [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"],
    [class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-indigo-700"],
    [class~="bg-violet-500"], [class~="bg-violet-600"], [class~="bg-violet-700"],
    [class~="bg-purple-500"], [class~="bg-purple-600"], [class~="bg-purple-700"],
    [class~="bg-fuchsia-500"], [class~="bg-fuchsia-600"], [class~="bg-fuchsia-700"],
    [class~="bg-sky-500"], [class~="bg-sky-600"], [class~="bg-cyan-500"], [class~="bg-cyan-600"]
) {
    background: var(--pm85-purple-gold) !important;
    background-image: var(--pm85-purple-gold) !important;
    border-color: rgba(255,237,170,.54) !important;
    color: #fff !important;
    box-shadow: var(--pm85-shadow) !important;
}
body :is(button, input[type="submit"], input[type="button"], a, [role="button"]):is(
    [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"],
    [class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-indigo-700"],
    [class~="bg-violet-500"], [class~="bg-violet-600"], [class~="bg-violet-700"],
    [class~="bg-purple-500"], [class~="bg-purple-600"], [class~="bg-purple-700"],
    [class~="bg-fuchsia-500"], [class~="bg-fuchsia-600"], [class~="bg-fuchsia-700"]
) :is(span, strong, i, svg) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Gradient utilities become visibly purple + gold. */
body :is([class*="from-blue-"], [class*="from-indigo-"], [class*="from-violet-"], [class*="from-purple-"], [class*="from-fuchsia-"]) {
    --tw-gradient-from: #611477 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(97,20,119,0) var(--tw-gradient-to-position) !important;
}
body :is([class*="via-blue-"], [class*="via-indigo-"], [class*="via-violet-"], [class*="via-purple-"], [class*="via-fuchsia-"]) {
    --tw-gradient-via: #ad761c var(--tw-gradient-via-position) !important;
}
body :is([class*="to-blue-"], [class*="to-indigo-"], [class*="to-violet-"], [class*="to-purple-"], [class*="to-fuchsia-"]) {
    --tw-gradient-to: #f0cf67 var(--tw-gradient-to-position) !important;
}

/* Accent text and links. Body paragraphs remain neutral for readability. */
body :is(a:not(.btn-danger):not(.btn-success):not(.btn-warning), .link-primary, .text-primary) {
    --pm85-link-color: var(--pm85-gold-300);
}
html:not(.pm-light) body :is(.text-blue-300, .text-blue-400, .text-indigo-300, .text-indigo-400, .text-violet-300, .text-violet-400, .text-purple-300, .text-purple-400, .text-fuchsia-300, .text-fuchsia-400) {
    color: var(--pm85-gold-300) !important;
}
html.pm-light body :is(.text-blue-500, .text-blue-600, .text-indigo-500, .text-indigo-600, .text-violet-500, .text-violet-600, .text-purple-500, .text-purple-600, .text-fuchsia-500, .text-fuchsia-600) {
    color: var(--pm85-purple-700) !important;
}

/* Inputs and checkboxes throughout frontend/admin. */
body :is(input, textarea, select):focus {
    border-color: var(--pm85-gold-500) !important;
    box-shadow: 0 0 0 3px rgba(224,179,68,.15), 0 0 0 6px rgba(126,31,152,.10) !important;
    outline: none !important;
}
body :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--pm85-gold-500) !important;
}

/* --------------------------------------------------------------------------
   ADMIN DRAWER + DASHBOARD
   -------------------------------------------------------------------------- */
body .admin-drawer {
    border-left-color: rgba(224,179,68,.34) !important;
}
body .admin-drawer-header,
body .admin-drawer-footer {
    border-color: rgba(224,179,68,.24) !important;
}
body :is(.drawer-menu-link.is-active, .drawer-sub-link.is-active, .drawer-nested-link.is-active) {
    background: var(--pm85-purple-gold) !important;
    background-image: var(--pm85-purple-gold) !important;
    border-color: rgba(255,237,170,.56) !important;
    color: #fff !important;
    box-shadow: var(--pm85-shadow) !important;
}
body :is(.drawer-menu-link.is-active, .drawer-sub-link.is-active, .drawer-nested-link.is-active) :is(span, strong, i, svg) {
    color: #fff !important;
}
body :is(.drawer-group-summary, .drawer-menu-link, .drawer-sub-link, .drawer-nested-link):hover {
    border-color: rgba(224,179,68,.38) !important;
}
body .drawer-icon-box,
body .drawer-sub-icon,
body .drawer-nested-icon {
    border-color: rgba(224,179,68,.24) !important;
    color: var(--pm85-gold-300) !important;
}

body :is(.dashboard-card, .admin-card, .stat-card, .summary-card, .metric-card, .panel, .premium-card, [class*="dashboard-card"], [class*="admin-card"], [class*="metric-card"]) {
    border-color: rgba(224,179,68,.25) !important;
}
body :is(.dashboard-card, .admin-card, .stat-card, .summary-card, .metric-card).active,
body :is(.dashboard-card, .admin-card, .stat-card, .summary-card, .metric-card).is-highlighted {
    background: var(--pm85-card-dark) !important;
    background-image: var(--pm85-card-dark) !important;
    border-color: rgba(240,207,103,.52) !important;
}
body :is(.dashboard-title, .admin-title, .page-title, .section-title) {
    color: var(--pm85-text) !important;
}
body :is(.dashboard-label, .admin-label, .metric-label, .stat-label, .section-label) {
    color: var(--pm85-gold-300) !important;
}

/* Tables: gold header rule, no garish purple fill. */
body table thead,
body table th {
    border-color: rgba(224,179,68,.30) !important;
}
body table tbody tr:hover {
    background-color: rgba(126,31,152,.08) !important;
}

/* --------------------------------------------------------------------------
   LIGHT MODE
   -------------------------------------------------------------------------- */
html.pm-light body {
    background-color: #fffaf2 !important;
    color: #28102f !important;
}
html.pm-light body .premium-header {
    background-color: rgba(255,255,255,.96) !important;
    border-color: rgba(173,118,28,.26) !important;
}
html.pm-light body .nav-btn:not(.nav-orange):not(.nav-primary),
html.pm-light body .theme-toggle-btn {
    background-color: #fff !important;
    color: #35133f !important;
    border-color: rgba(173,118,28,.28) !important;
}
html.pm-light body .secondary-cta,
html.pm-light body .wallet-btn,
html.pm-light body .product-action-cart,
html.pm-light body .pm-print-btn.secondary {
    background-color: #fff !important;
    color: #6f4308 !important;
    border-color: rgba(173,118,28,.42) !important;
}
html.pm-light body :is(.info-card, .stat-card, .wallet-card, .transparency-card, .category-card, .product-card, .review-card, .faq-item, .dashboard-card, .admin-card, .summary-card, .metric-card) {
    border-color: rgba(173,118,28,.22) !important;
}
html.pm-light body :is(.hero-title, .section-title, .work-card h2, .wallet-card h3, .product-name, .category-name) {
    color: #28102f !important;
}
html.pm-light body :is(.hero-copy, .section-copy, .work-step p, .wallet-card p, .category-sub) {
    color: #66566a !important;
}

/* Explicitly preserve functional semantic colors. */
body :is(.btn-danger, .danger-button, [class*="bg-red-"], [class*="bg-rose-"]) {
    background-image: none !important;
}
body :is(.btn-success, .success-button, [class*="bg-green-"], [class*="bg-emerald-"]) {
    background-image: none !important;
}
body :is(.btn-warning, .warning-button, [class*="bg-orange-"], [class*="bg-amber-"]) {
    background-image: none !important;
}

/* ========================================================================
   PM SHOP V86 - TARGETED SIX ELEMENT COLOR MAP
   Bukan gambar/mockup. Ini aturan CSS langsung untuk komponen website.
   1. Ikon petir: emas
   2. Ikon headset: ungu
   3. Tombol keranjang: gradasi ungu + emas
   4. Teks hero: gradasi emas + ungu
   5. Tombol Lihat Produk: gradasi ungu + emas
   6. Kartu saldo VIP/Miracle: kombinasi emas + ungu
   ======================================================================== */

:root {
    --pm86-gold-solid: linear-gradient(145deg, #7a4700 0%, #b87508 36%, #e9b936 70%, #ffe58a 100%);
    --pm86-purple-solid: linear-gradient(145deg, #24103f 0%, #4c1678 42%, #7c2ac8 75%, #a54bea 100%);
    --pm86-purple-gold: linear-gradient(112deg, #3b0d61 0%, #6d20a6 36%, #b56a20 72%, #f4cb58 100%);
    --pm86-gold-purple: linear-gradient(105deg, #f6d365 0%, #dba73a 28%, #ad4cc9 64%, #6c22b8 100%);
    --pm86-gold-text: #ffe69a;
    --pm86-purple-deep: #2a0a43;
}

/* 1. Petir menjadi emas. Mencakup ikon feature dan ikon Cara Kerja. */
body .feature-grid .feature-card:first-child .feature-icon,
body .feature-grid .feature-card:nth-child(1) .feature-icon,
body .feature-icon:has(.bi-lightning-charge-fill),
body .work-icon {
    background: var(--pm86-gold-solid) !important;
    background-image: var(--pm86-gold-solid) !important;
    border-color: rgba(255, 229, 138, .72) !important;
    color: #321b00 !important;
    box-shadow: 0 10px 26px rgba(217, 161, 41, .28), inset 0 1px 0 rgba(255,255,255,.42) !important;
}
body .feature-grid .feature-card:first-child .feature-icon :is(i,svg),
body .feature-grid .feature-card:nth-child(1) .feature-icon :is(i,svg),
body .feature-icon:has(.bi-lightning-charge-fill) :is(i,svg),
body .work-icon :is(i,svg) {
    color: #fff2b8 !important;
    -webkit-text-fill-color: #fff2b8 !important;
    filter: drop-shadow(0 2px 4px rgba(73,39,0,.45));
}

/* 2. Headset tetap khusus ungu, tidak ikut emas. */
body .feature-grid .feature-card:nth-child(4) .feature-icon,
body .feature-icon:has(.bi-headset),
body .support-contact-icon {
    background: var(--pm86-purple-solid) !important;
    background-image: var(--pm86-purple-solid) !important;
    border-color: rgba(184, 117, 255, .58) !important;
    color: #f6ebff !important;
    box-shadow: 0 10px 26px rgba(116, 34, 190, .26), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
body .feature-grid .feature-card:nth-child(4) .feature-icon :is(i,svg),
body .feature-icon:has(.bi-headset) :is(i,svg),
body .support-contact-icon :is(i,svg) {
    color: #f8edff !important;
    -webkit-text-fill-color: #f8edff !important;
}

/* 3. Floating cart benar-benar gradasi ungu dan emas. */
body #floating-cart-button {
    background: var(--pm86-purple-gold) !important;
    background-image: var(--pm86-purple-gold) !important;
    border: 1px solid rgba(255, 225, 128, .72) !important;
    color: #fff !important;
    box-shadow: 0 16px 34px rgba(91, 22, 143, .34), 0 7px 20px rgba(203, 145, 35, .20), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
body #floating-cart-button :is(span,i,svg) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
body #floating-cart-button > span:last-child,
body #floating-cart-button [class*="rounded-full"] {
    background: linear-gradient(145deg, #fff1b7, #e3b63e) !important;
    background-image: linear-gradient(145deg, #fff1b7, #e3b63e) !important;
    color: #3a0d59 !important;
    -webkit-text-fill-color: #3a0d59 !important;
    border-color: rgba(255,255,255,.42) !important;
}
body #floating-cart-button:hover {
    background: linear-gradient(112deg, #53117e 0%, #8f2dcc 38%, #d48f2d 72%, #ffe27a 100%) !important;
    background-image: linear-gradient(112deg, #53117e 0%, #8f2dcc 38%, #d48f2d 72%, #ffe27a 100%) !important;
}

/* 4. Teks headline emas ke ungu. */
body .hero-title span {
    background: var(--pm86-gold-purple) !important;
    background-image: var(--pm86-gold-purple) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 8px 20px rgba(187, 120, 35, .15)) !important;
}

/* 5. Tombol Lihat Produk ungu + emas, bukan ungu polos. */
body #hero-primary-cta,
body .hero-actions .primary-cta,
body a.primary-cta {
    background: var(--pm86-purple-gold) !important;
    background-image: var(--pm86-purple-gold) !important;
    border: 1px solid rgba(255, 225, 128, .76) !important;
    color: #fff !important;
    box-shadow: 0 17px 36px rgba(91, 22, 143, .30), 0 8px 22px rgba(203,145,35,.16), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
body :is(#hero-primary-cta, .hero-actions .primary-cta, a.primary-cta) :is(span,strong,i,svg) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
body :is(#hero-primary-cta, .hero-actions .primary-cta, a.primary-cta):hover {
    background: linear-gradient(112deg, #571184 0%, #922fd0 37%, #d59832 72%, #ffe585 100%) !important;
    background-image: linear-gradient(112deg, #571184 0%, #922fd0 37%, #d59832 72%, #ffe585 100%) !important;
}

/* 6. Kartu saldo mitra: dua warna logo terlihat jelas. */
body .dashboard-provider-card {
    border-width: 1px !important;
    border-color: rgba(255, 218, 105, .62) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.28), 0 0 26px rgba(145, 51, 194, .13), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
body .dashboard-provider-card--vip {
    background: linear-gradient(112deg, #714400 0%, #b47b19 28%, #6c247f 68%, #36104d 100%) !important;
    background-image: linear-gradient(112deg, #714400 0%, #b47b19 28%, #6c247f 68%, #36104d 100%) !important;
}
body .dashboard-provider-card--miracle {
    background: linear-gradient(112deg, #35104f 0%, #6b22a0 42%, #a76524 74%, #e0b245 100%) !important;
    background-image: linear-gradient(112deg, #35104f 0%, #6b22a0 42%, #a76524 74%, #e0b245 100%) !important;
}
body .dashboard-provider-card :is(.dashboard-provider-title,.dashboard-provider-amount,.dashboard-provider-eye) {
    color: #fffaf0 !important;
    -webkit-text-fill-color: #fffaf0 !important;
}
body .dashboard-provider-card--vip .dashboard-provider-watermark {
    color: #ffe070 !important;
    opacity: .18 !important;
}
body .dashboard-provider-card--miracle .dashboard-provider-watermark {
    color: #f1d06c !important;
    opacity: .16 !important;
}

/* Light mode tetap mengikuti pembagian enam elemen yang sama. */
html.pm-light body .feature-grid .feature-card:first-child .feature-icon,
html.pm-light body .feature-grid .feature-card:nth-child(1) .feature-icon,
html.pm-light body .feature-icon:has(.bi-lightning-charge-fill),
html.pm-light body .work-icon {
    background: var(--pm86-gold-solid) !important;
    background-image: var(--pm86-gold-solid) !important;
}
html.pm-light body .feature-grid .feature-card:nth-child(4) .feature-icon,
html.pm-light body .feature-icon:has(.bi-headset),
html.pm-light body .support-contact-icon {
    background: var(--pm86-purple-solid) !important;
    background-image: var(--pm86-purple-solid) !important;
}
html.pm-light body .dashboard-provider-card--vip {
    background: linear-gradient(112deg, #fff8dd 0%, #f2ce6d 34%, #c58ade 72%, #7c33a7 100%) !important;
    background-image: linear-gradient(112deg, #fff8dd 0%, #f2ce6d 34%, #c58ade 72%, #7c33a7 100%) !important;
}
html.pm-light body .dashboard-provider-card--miracle {
    background: linear-gradient(112deg, #7c33a7 0%, #bd78d7 42%, #efc75f 78%, #fff3bd 100%) !important;
    background-image: linear-gradient(112deg, #7c33a7 0%, #bd78d7 42%, #efc75f 78%, #fff3bd 100%) !important;
}
html.pm-light body .dashboard-provider-card :is(.dashboard-provider-title,.dashboard-provider-amount,.dashboard-provider-eye) {
    color: #271033 !important;
    -webkit-text-fill-color: #271033 !important;
}