/*
 * PM Shop Nebula Purple UI V28
 * UI-only override. Tidak mengubah route, form action, field, JavaScript,
 * permission, database, maupun alur fitur.
 */

:root {
    --pm-purple-50: #faf5ff;
    --pm-purple-200: #e9d5ff;
    --pm-purple-300: #d8b4fe;
    --pm-purple-400: #c084fc;
    --pm-purple-500: #a855f7;
    --pm-purple-600: #9333ea;
    --pm-purple-700: #7e22ce;
    --pm-purple-800: #6b21a8;
    --pm-purple-900: #581c87;
    --pm-violet: #8b5cf6;
    --pm-magenta: #d946ef;
    --pm-ink: #09070f;
    --pm-ink-soft: #0f0a18;
    --pm-panel: #151020;
    --pm-panel-2: #1b1429;
    --pm-line: rgba(192, 132, 252, .22);
    --pm-line-strong: rgba(216, 180, 254, .42);
    --pm-text: #faf7ff;
    --pm-muted: #b9adc9;
    --pm-shadow: 0 20px 55px rgba(3, 1, 8, .46);
    --pm-glow: 0 0 0 1px rgba(168, 85, 247, .18), 0 18px 42px rgba(88, 28, 135, .24);
}

html:not(.pm-light) {
    color-scheme: dark;
    accent-color: var(--pm-purple-500);
}

html:not(.pm-light) body {
    background-color: var(--pm-ink) !important;
    background-image:
        linear-gradient(rgba(168, 85, 247, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, .028) 1px, transparent 1px),
        radial-gradient(circle at 7% 5%, rgba(126, 34, 206, .30), transparent 27%),
        radial-gradient(circle at 94% 20%, rgba(217, 70, 239, .13), transparent 25%),
        linear-gradient(145deg, #08050d 0%, #100918 45%, #09060f 100%) !important;
    background-size: 32px 32px, 32px 32px, auto, auto, auto !important;
    color: var(--pm-text) !important;
}

html:not(.pm-light) ::selection {
    color: #fff;
    background: rgba(168, 85, 247, .75);
}

html:not(.pm-light) :focus-visible {
    outline: 3px solid rgba(192, 132, 252, .55) !important;
    outline-offset: 2px !important;
}

/* ================================================================
   FRONTEND SHELL
   ================================================================ */
html:not(.pm-light) .premium-header-wrap {
    top: 0 !important;
    padding: 0 !important;
    background: rgba(8, 5, 13, .72);
    border-bottom: 1px solid rgba(192, 132, 252, .12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

html:not(.pm-light) .premium-header {
    width: min(100%, 1280px) !important;
    min-height: 70px;
    margin: 0 auto !important;
    padding: 10px 20px !important;
    border: 0 !important;
    border-left: 3px solid var(--pm-purple-500) !important;
    border-right: 1px solid rgba(192, 132, 252, .10) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(90deg, rgba(126, 34, 206, .12), transparent 30%),
        rgba(13, 8, 20, .94) !important;
    box-shadow: none !important;
}

html:not(.pm-light) .brand-logo,
html:not(.pm-light) .brand-fallback {
    border-radius: 13px !important;
    border: 1px solid rgba(216, 180, 254, .32) !important;
    background: linear-gradient(145deg, #2b123d, #7e22ce 55%, #d946ef) !important;
    box-shadow: 0 10px 28px rgba(126, 34, 206, .38) !important;
}

html:not(.pm-light) .brand-name {
    color: #fff !important;
    letter-spacing: -.035em !important;
    text-shadow: 0 0 24px rgba(192, 132, 252, .10);
}

html:not(.pm-light) .brand-accent {
    color: var(--pm-purple-300) !important;
}

html:not(.pm-light) .nav-btn,
html:not(.pm-light) .front-menu-toggle,
html:not(.pm-light) .front-menu-close,
html:not(.pm-light) .theme-toggle-btn {
    min-height: 42px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(192, 132, 252, .20) !important;
    background: #171020 !important;
    color: #f8f1ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html:not(.pm-light) .nav-btn:hover,
html:not(.pm-light) .front-menu-toggle:hover,
html:not(.pm-light) .front-menu-close:hover,
html:not(.pm-light) .theme-toggle-btn:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(216, 180, 254, .48) !important;
    background: #221431 !important;
    box-shadow: 0 10px 28px rgba(88, 28, 135, .24) !important;
}

html:not(.pm-light) .nav-primary {
    border-color: rgba(216, 180, 254, .38) !important;
    background: linear-gradient(135deg, #6d28d9, #9333ea 55%, #c026d3) !important;
    box-shadow: 0 12px 28px rgba(126, 34, 206, .30) !important;
}

html:not(.pm-light) .nav-orange {
    border-color: rgba(244, 114, 182, .34) !important;
    background: linear-gradient(135deg, #7e22ce, #c026d3 58%, #db2777) !important;
    box-shadow: 0 12px 28px rgba(192, 38, 211, .24) !important;
}

html:not(.pm-light) .front-menu-overlay {
    background: rgba(4, 2, 8, .78) !important;
    backdrop-filter: blur(6px) !important;
}

html:not(.pm-light) .front-side-menu {
    border-left: 1px solid rgba(216, 180, 254, .28) !important;
    border-radius: 24px 0 0 24px !important;
    background:
        linear-gradient(180deg, rgba(126, 34, 206, .18), transparent 22%),
        #0e0915 !important;
    box-shadow: -28px 0 70px rgba(3, 1, 8, .56) !important;
}

html:not(.pm-light) .front-side-head {
    border-bottom: 1px solid rgba(192, 132, 252, .17) !important;
    background: rgba(19, 11, 28, .88) !important;
}

html:not(.pm-light) .front-menu-label {
    color: var(--pm-purple-300) !important;
    letter-spacing: .15em !important;
}

html:not(.pm-light) .front-menu-link {
    position: relative;
    border: 1px solid rgba(192, 132, 252, .13) !important;
    border-radius: 13px !important;
    background: rgba(24, 15, 34, .84) !important;
    color: #f8f3ff !important;
    overflow: hidden;
}

html:not(.pm-light) .front-menu-link::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: transparent;
    transition: background .18s ease;
}

html:not(.pm-light) .front-menu-link:hover {
    transform: translateX(-3px) !important;
    border-color: rgba(216, 180, 254, .38) !important;
    background: #21142e !important;
}

html:not(.pm-light) .front-menu-link:hover::before,
html:not(.pm-light) .front-menu-cta::before,
html:not(.pm-light) .front-menu-highlight::before {
    background: linear-gradient(180deg, var(--pm-purple-400), var(--pm-magenta));
}

html:not(.pm-light) .front-menu-link small {
    color: var(--pm-muted) !important;
}

html:not(.pm-light) .front-menu-link .left > i,
html:not(.pm-light) .front-menu-link > i {
    color: var(--pm-purple-300) !important;
}

html:not(.pm-light) .premium-main {
    background: transparent !important;
}

html:not(.pm-light) .premium-footer {
    border-top: 1px solid rgba(192, 132, 252, .14) !important;
    background: linear-gradient(180deg, rgba(13, 8, 20, .62), rgba(7, 4, 11, .95)) !important;
}

html:not(.pm-light) .premium-footer-links,
html:not(.pm-light) .premium-footer-links a,
html:not(.pm-light) .footer-copy {
    color: var(--pm-muted) !important;
}

html:not(.pm-light) .premium-footer-links a:hover,
html:not(.pm-light) .footer-category-link:hover {
    color: var(--pm-purple-300) !important;
}

/* ================================================================
   HOMEPAGE, CATALOG, PUBLIC CARDS
   ================================================================ */
html:not(.pm-light) .hero-grid {
    position: relative;
    border: 1px solid rgba(192, 132, 252, .17) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(120deg, rgba(126, 34, 206, .19), transparent 42%),
        linear-gradient(160deg, rgba(23, 14, 33, .97), rgba(11, 7, 17, .97)) !important;
    box-shadow: var(--pm-shadow) !important;
    overflow: hidden;
}

html:not(.pm-light) .hero-grid::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -72px;
    top: -72px;
    border: 26px solid rgba(192, 132, 252, .08);
    transform: rotate(18deg);
    pointer-events: none;
}

html:not(.pm-light) .eyebrow,
html:not(.pm-light) .small-title,
html:not(.pm-light) .product-category,
html:not(.pm-light) .stat-label {
    color: var(--pm-purple-300) !important;
}

html:not(.pm-light) .hero-title,
html:not(.pm-light) .section-title,
html:not(.pm-light) .product-name,
html:not(.pm-light) .category-name,
html:not(.pm-light) .latest-name {
    color: #fff !important;
}

html:not(.pm-light) .subtitle,
html:not(.pm-light) .section-copy,
html:not(.pm-light) .category-sub,
html:not(.pm-light) .latest-meta {
    color: var(--pm-muted) !important;
}

html:not(.pm-light) .primary-cta,
html:not(.pm-light) .product-action-buy,
html:not(.pm-light) .wallet-btn {
    border: 1px solid rgba(216, 180, 254, .35) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #6d28d9, #9333ea 55%, #c026d3) !important;
    color: #fff !important;
    box-shadow: 0 14px 32px rgba(126, 34, 206, .30) !important;
}

html:not(.pm-light) .primary-cta:hover,
html:not(.pm-light) .product-action-buy:hover,
html:not(.pm-light) .wallet-btn:hover {
    filter: brightness(1.10);
    transform: translateY(-2px) !important;
}

html:not(.pm-light) .secondary-cta,
html:not(.pm-light) .product-action-cart,
html:not(.pm-light) .section-link {
    border: 1px solid rgba(192, 132, 252, .24) !important;
    border-radius: 12px !important;
    background: #1a1125 !important;
    color: #eee6f7 !important;
}

html:not(.pm-light) .secondary-cta:hover,
html:not(.pm-light) .product-action-cart:hover,
html:not(.pm-light) .section-link:hover {
    border-color: rgba(216, 180, 254, .50) !important;
    background: #281638 !important;
    color: #fff !important;
}

html:not(.pm-light) .stat-card,
html:not(.pm-light) .category-card,
html:not(.pm-light) .feature-card,
html:not(.pm-light) .work-card,
html:not(.pm-light) .product-card,
html:not(.pm-light) .review-card,
html:not(.pm-light) .info-card,
html:not(.pm-light) .transparency-card,
html:not(.pm-light) .wallet-card,
html:not(.pm-light) .order-card,
html:not(.pm-light) .service-item,
html:not(.pm-light) .faq-list,
html:not(.pm-light) .latest-toast {
    border: 1px solid rgba(192, 132, 252, .16) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, rgba(30, 19, 43, .94), rgba(16, 10, 24, .96)) !important;
    box-shadow: 0 14px 36px rgba(3, 1, 8, .28) !important;
}

html:not(.pm-light) .product-card,
html:not(.pm-light) .category-card,
html:not(.pm-light) .feature-card,
html:not(.pm-light) .work-card {
    position: relative;
    overflow: hidden;
}

html:not(.pm-light) .product-card::before,
html:not(.pm-light) .category-card::before,
html:not(.pm-light) .feature-card::before,
html:not(.pm-light) .work-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(192,132,252,.95), rgba(217,70,239,.18));
    opacity: .72;
}

html:not(.pm-light) .product-card:hover,
html:not(.pm-light) .category-card:hover,
html:not(.pm-light) .feature-card:hover,
html:not(.pm-light) .work-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(216, 180, 254, .40) !important;
    box-shadow: 0 22px 48px rgba(88, 28, 135, .24) !important;
}

html:not(.pm-light) .category-icon,
html:not(.pm-light) .feature-icon,
html:not(.pm-light) .work-icon,
html:not(.pm-light) .order-num,
html:not(.pm-light) .latest-icon {
    border: 1px solid rgba(216, 180, 254, .25) !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, rgba(126, 34, 206, .34), rgba(217, 70, 239, .14)) !important;
    color: var(--pm-purple-200) !important;
}

html:not(.pm-light) .product-media,
html:not(.pm-light) .product-media-fallback {
    background: linear-gradient(145deg, #20112d, #100918) !important;
    border-bottom: 1px solid rgba(192, 132, 252, .14) !important;
}

html:not(.pm-light) .product-tag,
html:not(.pm-light) .badge,
html:not(.pm-light) .partner-badge {
    border-color: rgba(216, 180, 254, .24) !important;
    background: rgba(126, 34, 206, .20) !important;
    color: var(--pm-purple-200) !important;
}

html:not(.pm-light) .badge-promo,
html:not(.pm-light) .badge-best {
    background: linear-gradient(135deg, #7e22ce, #c026d3) !important;
    color: #fff !important;
}

html:not(.pm-light) .real-price,
html:not(.pm-light) .stat-value {
    color: #f3e8ff !important;
}

html:not(.pm-light) .fake-price {
    color: #776b84 !important;
}

html:not(.pm-light) .faq-answer,
html:not(.pm-light) .latest-body {
    color: var(--pm-muted) !important;
}

html:not(.pm-light) .latest-close {
    color: #fff !important;
    background: #241631 !important;
    border-color: rgba(192,132,252,.22) !important;
}

/* ================================================================
   ADMIN / MEMBER SHELL
   ================================================================ */
html:not(.pm-light) body > .min-h-screen,
html:not(.pm-light) .min-h-screen.bg-gray-100,
html:not(.pm-light) .min-h-screen.dark\:bg-gray-900 {
    background: transparent !important;
}

html:not(.pm-light) nav.sticky.top-0,
html:not(.pm-light) nav.bg-white\/95,
html:not(.pm-light) nav.dark\:bg-gray-800\/95 {
    border-bottom: 1px solid rgba(192, 132, 252, .16) !important;
    background:
        linear-gradient(90deg, rgba(126, 34, 206, .13), transparent 35%),
        rgba(13, 8, 20, .94) !important;
    box-shadow: 0 12px 38px rgba(3, 1, 8, .25) !important;
}

html:not(.pm-light) #adminMenuOpen,
html:not(.pm-light) .header-theme-toggle {
    border: 1px solid rgba(192, 132, 252, .24) !important;
    border-radius: 11px !important;
    background: #1b1226 !important;
    color: #f8f3ff !important;
}

html:not(.pm-light) #adminMenuOpen:hover,
html:not(.pm-light) .header-theme-toggle:hover {
    border-color: rgba(216, 180, 254, .48) !important;
    background: #2a173b !important;
}

html:not(.pm-light) .admin-drawer-overlay {
    background: rgba(4, 2, 8, .78) !important;
    backdrop-filter: blur(6px) !important;
}

html:not(.pm-light) .admin-drawer {
    border-right: 1px solid rgba(216, 180, 254, .25) !important;
    background:
        linear-gradient(180deg, rgba(126, 34, 206, .20), transparent 18%),
        #0d0814 !important;
    box-shadow: 28px 0 70px rgba(3, 1, 8, .52) !important;
}

html:not(.pm-light) .admin-drawer-header,
html:not(.pm-light) .admin-drawer-footer {
    border-color: rgba(192, 132, 252, .15) !important;
    background: rgba(19, 11, 28, .88) !important;
}

html:not(.pm-light) .drawer-user-card,
html:not(.pm-light) .drawer-group,
html:not(.pm-light) .drawer-nested-group {
    border-color: rgba(192, 132, 252, .14) !important;
    background: rgba(26, 16, 37, .88) !important;
}

html:not(.pm-light) .drawer-menu-link,
html:not(.pm-light) .drawer-group-summary,
html:not(.pm-light) .drawer-sub-link,
html:not(.pm-light) .drawer-nested-summary,
html:not(.pm-light) .drawer-nested-link,
html:not(.pm-light) .drawer-user-action {
    color: #eee7f6 !important;
    border-radius: 11px !important;
}

html:not(.pm-light) .drawer-menu-link:hover,
html:not(.pm-light) .drawer-group-summary:hover,
html:not(.pm-light) .drawer-sub-link:hover,
html:not(.pm-light) .drawer-nested-summary:hover,
html:not(.pm-light) .drawer-nested-link:hover,
html:not(.pm-light) .drawer-user-action:hover {
    background: #281638 !important;
    color: #fff !important;
}

html:not(.pm-light) .drawer-menu-link.is-active,
html:not(.pm-light) .drawer-sub-link.is-active,
html:not(.pm-light) .drawer-nested-link.is-active,
html:not(.pm-light) .is-active.drawer-group-summary {
    border: 1px solid rgba(216, 180, 254, .30) !important;
    background: linear-gradient(135deg, rgba(109, 40, 217, .90), rgba(192, 38, 211, .76)) !important;
    color: #fff !important;
}

html:not(.pm-light) .drawer-icon-box,
html:not(.pm-light) .drawer-sub-icon,
html:not(.pm-light) .drawer-nested-icon {
    border-color: rgba(216, 180, 254, .20) !important;
    background: rgba(126, 34, 206, .22) !important;
    color: var(--pm-purple-200) !important;
}

html:not(.pm-light) .drawer-logout-btn {
    border-color: rgba(244, 114, 182, .26) !important;
    background: rgba(131, 24, 67, .22) !important;
    color: #fbcfe8 !important;
}

html:not(.pm-light) main {
    color: var(--pm-text);
}

html:not(.pm-light) main > .py-12,
html:not(.pm-light) main > .py-6,
html:not(.pm-light) main > section {
    background: transparent !important;
}

html:not(.pm-light) header.bg-white,
html:not(.pm-light) header.dark\:bg-gray-800 {
    border-bottom: 1px solid rgba(192, 132, 252, .14) !important;
    background: rgba(20, 12, 29, .90) !important;
    box-shadow: none !important;
}

/* Generic panels. Deliberately excludes colored status badges/buttons. */
html:not(.pm-light) main .bg-white:not(button):not(a),
html:not(.pm-light) main .dark\:bg-gray-800:not(button):not(a),
html:not(.pm-light) main .bg-gray-800\/50:not(button):not(a),
html:not(.pm-light) main .bg-gray-900:not(button):not(a),
html:not(.pm-light) main .bg-slate-800:not(button):not(a),
html:not(.pm-light) main .bg-slate-900:not(button):not(a),
html:not(.pm-light) main .card,
html:not(.pm-light) main .panel,
html:not(.pm-light) main .box,
html:not(.pm-light) .modal,
html:not(.pm-light) [role="dialog"] {
    border-color: rgba(192, 132, 252, .16) !important;
    background-color: rgba(23, 14, 33, .96) !important;
    background-image: linear-gradient(145deg, rgba(36, 21, 51, .72), rgba(15, 9, 23, .78)) !important;
    color: var(--pm-text) !important;
    box-shadow: var(--pm-shadow) !important;
}

html:not(.pm-light) main .rounded-lg,
html:not(.pm-light) main .rounded-xl,
html:not(.pm-light) main .rounded-2xl,
html:not(.pm-light) [role="dialog"] {
    border-radius: 16px !important;
}

html:not(.pm-light) main h1,
html:not(.pm-light) main h2,
html:not(.pm-light) main h3,
html:not(.pm-light) main h4,
html:not(.pm-light) main .text-gray-900,
html:not(.pm-light) main .dark\:text-white {
    color: #fff !important;
}

html:not(.pm-light) main .text-gray-500,
html:not(.pm-light) main .text-gray-600,
html:not(.pm-light) main .text-gray-700,
html:not(.pm-light) main .text-slate-400,
html:not(.pm-light) main .dark\:text-gray-300,
html:not(.pm-light) main .dark\:text-gray-400 {
    color: var(--pm-muted) !important;
}

html:not(.pm-light) main a:not([class*="bg-"]):not([class*="from-"]) {
    color: var(--pm-purple-300);
}

html:not(.pm-light) main a:not([class*="bg-"]):not([class*="from-"]):hover {
    color: #f0dcff;
}

/* ================================================================
   FORMS, TABLES, MODALS
   ================================================================ */
html:not(.pm-light) input:not([type="checkbox"]):not([type="radio"]),
html:not(.pm-light) select,
html:not(.pm-light) textarea {
    border: 1px solid rgba(192, 132, 252, .22) !important;
    border-radius: 11px !important;
    background: #100a18 !important;
    color: #faf7ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

html:not(.pm-light) input::placeholder,
html:not(.pm-light) textarea::placeholder {
    color: #7f738d !important;
}

html:not(.pm-light) input:focus,
html:not(.pm-light) select:focus,
html:not(.pm-light) textarea:focus {
    border-color: rgba(216, 180, 254, .68) !important;
    box-shadow: 0 0 0 4px rgba(147, 51, 234, .16) !important;
}

html:not(.pm-light) input[type="checkbox"],
html:not(.pm-light) input[type="radio"] {
    border-color: rgba(216, 180, 254, .52) !important;
    background-color: #100a18 !important;
    color: var(--pm-purple-600) !important;
}

html:not(.pm-light) label {
    color: #e9e1f2;
}

html:not(.pm-light) table {
    overflow: hidden;
    border: 1px solid rgba(192, 132, 252, .16) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 14px !important;
    background: rgba(18, 11, 27, .95) !important;
    color: #f7f1fc !important;
}

html:not(.pm-light) thead,
html:not(.pm-light) th {
    border-color: rgba(192, 132, 252, .18) !important;
    background: linear-gradient(180deg, #2a1739, #20132d) !important;
    color: #f3e8ff !important;
}

html:not(.pm-light) tbody,
html:not(.pm-light) tr,
html:not(.pm-light) td {
    border-color: rgba(192, 132, 252, .11) !important;
    background-color: transparent !important;
    color: #e9e1f2 !important;
}

html:not(.pm-light) tbody tr:hover {
    background: rgba(126, 34, 206, .10) !important;
}

html:not(.pm-light) button[class*="bg-indigo"],
html:not(.pm-light) a[class*="bg-indigo"],
html:not(.pm-light) button[class*="bg-purple"],
html:not(.pm-light) a[class*="bg-purple"],
html:not(.pm-light) button[class*="from-indigo"],
html:not(.pm-light) a[class*="from-indigo"] {
    border-color: rgba(216, 180, 254, .34) !important;
    background-image: linear-gradient(135deg, #6d28d9, #9333ea 55%, #c026d3) !important;
    background-color: #7e22ce !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(126, 34, 206, .26) !important;
}

html:not(.pm-light) button[class*="bg-gray"],
html:not(.pm-light) a[class*="bg-gray"],
html:not(.pm-light) button[class*="bg-slate"],
html:not(.pm-light) a[class*="bg-slate"] {
    border-color: rgba(192, 132, 252, .18) !important;
    background-color: #20142d !important;
    color: #f5effa !important;
}

html:not(.pm-light) .fixed.inset-0.bg-gray-500,
html:not(.pm-light) .fixed.inset-0.bg-black,
html:not(.pm-light) [x-show].fixed.inset-0 {
    background-color: rgba(4, 2, 8, .78) !important;
    backdrop-filter: blur(7px);
}

html:not(.pm-light) button[aria-label="Close"],
html:not(.pm-light) button[aria-label="close"],
html:not(.pm-light) button[aria-label="Tutup"],
html:not(.pm-light) .modal-close,
html:not(.pm-light) .popup-close,
html:not(.pm-light) .close-modal,
html:not(.pm-light) .btn-close,
html:not(.pm-light) [data-modal-close],
html:not(.pm-light) [data-popup-close] {
    border: 1px solid rgba(216, 180, 254, .24) !important;
    background: #281638 !important;
    color: #fff !important;
}

/* ================================================================
   AUTH / GUEST
   ================================================================ */
html:not(.pm-light) body > .min-h-screen.flex.flex-col.bg-\[\#0f172a\] {
    background:
        linear-gradient(rgba(168, 85, 247, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, .035) 1px, transparent 1px),
        radial-gradient(circle at 12% 10%, rgba(126,34,206,.35), transparent 29%),
        #09060f !important;
    background-size: 34px 34px, 34px 34px, auto, auto !important;
}

html:not(.pm-light) .auth-nav-link,
html:not(.pm-light) .auth-theme-toggle {
    border-color: rgba(192, 132, 252, .22) !important;
    border-radius: 11px !important;
    background: #1a1125 !important;
    color: #f7f0fc !important;
}

html:not(.pm-light) .auth-nav-link:hover,
html:not(.pm-light) .auth-theme-toggle:hover {
    background: #2a173b !important;
    border-color: rgba(216,180,254,.42) !important;
}

html:not(.pm-light) main .max-w-2xl.bg-gray-800\/50 {
    border: 1px solid rgba(216, 180, 254, .22) !important;
    border-left: 4px solid var(--pm-purple-500) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, rgba(36, 21, 51, .94), rgba(14, 8, 21, .97)) !important;
    box-shadow: 0 28px 70px rgba(3, 1, 8, .48) !important;
}

html:not(.pm-light) main .max-w-2xl.bg-gray-800\/50 > .bg-gradient-to-r {
    background: linear-gradient(90deg, transparent, var(--pm-purple-400), var(--pm-magenta), transparent) !important;
}

/* Theme popup created by the existing script */
html[data-theme="dark"] .pm-theme-menu-v4,
html:not(.pm-light) .pm-theme-menu-v4 {
    border-color: rgba(216,180,254,.25) !important;
    border-radius: 14px !important;
    background: #160e20 !important;
    color: #f8f2fc !important;
    box-shadow: 0 22px 58px rgba(3,1,8,.52) !important;
}

html[data-theme="dark"] .pm-theme-option-v4:hover,
html:not(.pm-light) .pm-theme-option-v4:hover {
    background: rgba(147,51,234,.18) !important;
}

html[data-theme="dark"] .pm-theme-option-v4[aria-checked="true"],
html:not(.pm-light) .pm-theme-option-v4[aria-checked="true"] {
    background: linear-gradient(135deg, #6d28d9, #9333ea 55%, #c026d3) !important;
}

/* ================================================================
   MOBILE
   ================================================================ */
@media (max-width: 900px) {
    html:not(.pm-light) .premium-header {
        min-height: 62px;
        padding: 9px 12px !important;
        border-left-width: 2px !important;
    }

    html:not(.pm-light) .hero-grid {
        border-radius: 20px !important;
    }
}

@media (max-width: 640px) {
    html:not(.pm-light) .premium-header-wrap {
        padding: 0 !important;
    }

    html:not(.pm-light) .premium-header {
        border-radius: 0 !important;
    }

    html:not(.pm-light) .nav-btn,
    html:not(.pm-light) .front-menu-toggle,
    html:not(.pm-light) .theme-toggle-btn {
        min-height: 39px !important;
        border-radius: 10px !important;
    }

    html:not(.pm-light) .front-side-menu {
        width: min(94vw, 390px) !important;
        border-radius: 20px 0 0 20px !important;
    }

    html:not(.pm-light) .product-card,
    html:not(.pm-light) .category-card,
    html:not(.pm-light) .feature-card,
    html:not(.pm-light) .work-card,
    html:not(.pm-light) .review-card {
        border-radius: 15px !important;
    }
}