:root,
html[data-theme="dark"] {
    color-scheme: dark;
    scrollbar-gutter: stable;
    --bg-primary: #0f0e16;
    --bg-secondary: #12111b;
    --surface: #171520;
    --surface-elevated: #1c1830;
    --surface-muted: #12111b;
    --border: #352d45;
    --border-strong: #55466f;
    --text-primary: #f6f3fb;
    --text-secondary: #aaa2b5;
    --accent: #8d72d9;
    --accent-hover: #a58ceb;
    --accent-soft: rgba(141, 114, 217, .14);
    --focus-ring: rgba(165, 140, 235, .26);
    --shadow-soft: 0 12px 34px rgba(5, 4, 10, .30);
    --shadow-elevated: 0 28px 76px rgba(5, 4, 10, .46);
    --success: #62d5a3;
    --danger: #ef8294;
    --pay-bg: var(--bg-primary);
    --pay-card: var(--surface);
    --pay-text: var(--text-primary);
    --pay-muted: var(--text-secondary);
    --pay-line: var(--border);
    --pay-accent: var(--accent);
    --pay-green: var(--success);

    /* Compatibility aliases for the existing component styles. */
    --bg: var(--bg-primary);
    --card: var(--surface);
    --card2: var(--surface-elevated);
    --line: var(--border);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
    --purple: var(--accent);
    --green: var(--success);
    --soft: var(--accent-soft);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg-primary: #ecebf1;
    --bg-secondary: #e6e4ec;
    --surface: #f3f1f5;
    --surface-elevated: #f7f5f8;
    --surface-muted: #e8e6ee;
    --border: #d0ccda;
    --border-strong: #b8b1c8;
    --text-primary: #272431;
    --text-secondary: #686474;
    --accent: #7958d2;
    --accent-hover: #6847c2;
    --accent-soft: rgba(121, 88, 210, .12);
    --focus-ring: rgba(121, 88, 210, .22);
    --shadow-soft: 0 10px 28px rgba(55, 45, 76, .10);
    --shadow-elevated: 0 24px 58px rgba(55, 45, 76, .16);
    --success: #21875f;
    --danger: #b94c62;
    --pay-bg: var(--bg-primary);
    --pay-card: var(--surface);
    --pay-text: var(--text-primary);
    --pay-muted: var(--text-secondary);
    --pay-line: var(--border);
    --pay-accent: var(--accent);
    --pay-green: var(--success);
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

html[data-theme="dark"] body {
    background:
        radial-gradient(
            ellipse 72% 54% at 86% 2%,
            rgba(91, 63, 168, .22) 0%,
            rgba(40, 32, 68, .10) 42%,
            transparent 72%
        ),
        radial-gradient(
            ellipse 58% 46% at 10% 82%,
            rgba(40, 32, 68, .24) 0%,
            rgba(28, 24, 48, .10) 46%,
            transparent 74%
        ),
        radial-gradient(
            ellipse 48% 36% at 48% 44%,
            rgba(118, 87, 200, .055) 0%,
            transparent 72%
        ),
        linear-gradient(180deg, #12111b 0%, #0f0e16 56%, #0d0c13 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    color: var(--text-primary);
}

@keyframes site-page-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes catalog-item-enter {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes menu-enter {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes modal-overlay-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-card-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

html.site-preferences-ready body > header,
html.site-preferences-ready body > main,
html.site-preferences-ready body > footer {
    animation: site-page-enter 360ms cubic-bezier(.22, .8, .3, 1) both;
}

/* Theme colors move together without animating layout properties. */
body,
body > header,
body > main,
body > footer,
.top,
.site-header,
.store-profile,
.about-hero,
.announcement,
.product,
.product-body,
.reviews,
.reviews article,
.support,
.footer,
.account-card,
.account-orders-panel,
.account-order-card,
.profile-dropdown,
.faq-modal-card,
input,
textarea,
select,
button,
a {
    transition-property: background-color, color, border-color, box-shadow, filter, transform;
    transition-duration: 300ms;
    transition-timing-function: ease;
}

/* Product and catalog motion. */
.product,
.nebula-cart-product {
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease,
        background-color 300ms ease, color 300ms ease;
}

.product:hover,
.nebula-cart-product:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
    box-shadow: 0 15px 30px rgba(55, 45, 76, .14);
}

html.site-preferences-ready .product-grid .product {
    animation: catalog-item-enter 340ms cubic-bezier(.22, .8, .3, 1) both;
}

html.site-preferences-ready .product-grid .product:nth-child(2) { animation-delay: 35ms; }
html.site-preferences-ready .product-grid .product:nth-child(3) { animation-delay: 70ms; }
html.site-preferences-ready .product-grid .product:nth-child(4) { animation-delay: 105ms; }
html.site-preferences-ready .product-grid .product:nth-child(5) { animation-delay: 140ms; }
html.site-preferences-ready .product-grid .product:nth-child(n+6) { animation-delay: 175ms; }

button:not(.site-theme-toggle),
.primary-btn,
.support-btn,
.support-button,
.about-actions a,
.basket,
.account-nav,
.cart-link,
[type="submit"] {
    transition: transform 180ms ease, filter 180ms ease, background-color 180ms ease,
        border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

button:not(.site-theme-toggle):hover,
.primary-btn:hover,
.support-btn:hover,
.support-button:hover,
.about-actions a:hover,
.basket:hover,
.account-nav:hover,
.cart-link:hover,
[type="submit"]:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

button:not(.site-theme-toggle):active,
.primary-btn:active,
.support-btn:active,
.support-button:active,
.about-actions a:active,
.basket:active,
.account-nav:active,
.cart-link:active,
[type="submit"]:active {
    transform: scale(.98);
}

.profile-dropdown.open,
.mobile-menu.open,
.top nav.open {
    animation: menu-enter 180ms ease both;
}

/* Modal motion intentionally avoids zoom and long staged entrances. */
.auth-modal {
    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgba(10, 10, 20, .50) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    animation: modal-overlay-enter 220ms ease both !important;
}

.auth-modal-card {
    box-sizing: border-box;
    max-width: calc(100vw - 56px);
    animation: modal-card-enter 280ms cubic-bezier(.22, .8, .3, 1) both !important;
}

.auth-modal-card iframe {
    box-sizing: border-box;
    overflow: hidden;
}

.auth-modal-copy,
.auth-modal-card iframe {
    animation: none !important;
}

html.site-preferences-ready .pay-panel,
html.site-preferences-ready .pay-help {
    animation: none;
}

.site-theme-toggle {
    position: fixed;
    z-index: 120;
    left: max(18px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 104px;
    height: 42px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-elevated) 94%, transparent);
    color: var(--text-primary);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font: 700 11px/1 Inter, Manrope, Arial, sans-serif;
    letter-spacing: .15px;
    cursor: pointer;
    transition: background-color 220ms ease, border-color 220ms ease,
        color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.site-theme-toggle:hover {
    border-color: var(--accent);
    background: var(--surface-elevated);
    box-shadow: 0 14px 34px rgba(55, 45, 76, .16);
    transform: translateY(-2px);
}

.site-theme-toggle:active { transform: scale(.97); }

.site-theme-toggle:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.site-theme-toggle__icon {
    display: grid;
    flex: 0 0 22px;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 15px;
    line-height: 1;
    transition: transform 300ms ease, background-color 300ms ease, color 300ms ease;
}

.site-theme-toggle__icon::before { content: '☾'; }
.site-theme-toggle__label::before { content: 'Oscuro'; }

html[data-theme="light"] .site-theme-toggle__icon { transform: rotate(180deg); }
html[data-theme="light"] .site-theme-toggle__icon::before { content: '☀'; }
html[data-theme="light"] .site-theme-toggle__label::before { content: 'Claro'; }

html[data-theme="light"] .site-theme-toggle {
    border-color: #817893 !important;
    background: rgba(225, 221, 232, .97) !important;
    color: #282331 !important;
    box-shadow: 0 10px 30px rgba(55, 45, 76, .18);
}

html[data-theme="light"] .site-theme-toggle:hover {
    border-color: var(--accent);
    background: #d8d1e4 !important;
}

/* Shared Nebula atmosphere for dark mode. */
html[data-theme="dark"] .top,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .pay-top,
html[data-theme="dark"] .terms-top,
html[data-theme="dark"] .support-top {
    border-color: rgba(165, 140, 235, .12) !important;
    background: rgba(15, 14, 22, .88) !important;
    box-shadow: 0 10px 34px rgba(5, 4, 10, .22);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html[data-theme="dark"] .product,
html[data-theme="dark"] .reviews article,
html[data-theme="dark"] .store-trust article,
html[data-theme="dark"] .help-categories a,
html[data-theme="dark"] .faq-section details,
html[data-theme="dark"] .selected-services,
html[data-theme="dark"] .request-form,
html[data-theme="dark"] .success,
html[data-theme="dark"] .nebula-cart-panel,
html[data-theme="dark"] .nebula-cart-item,
html[data-theme="dark"] .account-orders-panel,
html[data-theme="dark"] .account-order-card,
html[data-theme="dark"] .pay-panel,
html[data-theme="dark"] .method,
html[data-theme="dark"] .pay-help {
    border-color: rgba(141, 114, 217, .18) !important;
    background:
        linear-gradient(
            155deg,
            rgba(28, 24, 48, .94),
            rgba(18, 17, 27, .97) 62%
        ) !important;
    color: var(--text-primary) !important;
    box-shadow:
        0 20px 54px rgba(5, 4, 10, .22),
        inset 0 1px 0 rgba(184, 164, 245, .025) !important;
}

html[data-theme="dark"] .product:hover,
html[data-theme="dark"] .store-trust article:hover,
html[data-theme="dark"] .help-categories a:hover,
html[data-theme="dark"] .method:hover,
html[data-theme="dark"] .method.active {
    border-color: rgba(165, 140, 235, .44) !important;
    box-shadow:
        0 22px 58px rgba(5, 4, 10, .30),
        0 0 0 1px rgba(141, 114, 217, .055) !important;
}

html[data-theme="dark"] .profile-dropdown,
html[data-theme="dark"] .faq-modal-card,
html[data-theme="dark"] .faq-modal details {
    border-color: rgba(141, 114, 217, .24) !important;
    background: linear-gradient(155deg, #1c1830, #12111b) !important;
    box-shadow: var(--shadow-elevated) !important;
}

html[data-theme="dark"] .product footer,
html[data-theme="dark"] .pay-steps,
html[data-theme="dark"] .pay-panel form,
html[data-theme="dark"] .terms-shell section,
html[data-theme="dark"] .account-profile-actions,
html[data-theme="dark"] .account-order-identity,
html[data-theme="dark"] .account-order-summary {
    border-color: rgba(165, 140, 235, .10) !important;
}

html[data-theme="dark"] .request-form input,
html[data-theme="dark"] .request-form textarea,
html[data-theme="dark"] .pay-panel input,
html[data-theme="dark"] .account-card input {
    border-color: #40364f !important;
    background: linear-gradient(180deg, #12101a, #0f0e16) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .request-form input:focus,
html[data-theme="dark"] .request-form textarea:focus,
html[data-theme="dark"] .pay-panel input:focus,
html[data-theme="dark"] .account-card input:focus {
    border-color: var(--accent-hover) !important;
    background: #15131f !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

html[data-theme="dark"] .primary-btn,
html[data-theme="dark"] .checkout-action-btn,
html[data-theme="dark"] .nebula-cart-checkout,
html[data-theme="dark"] .pay-panel form button,
html[data-theme="dark"] .notify-payment-button {
    border-color: rgba(184, 164, 245, .38) !important;
    background: linear-gradient(135deg, #9a7de2, #7657c8 58%, #5b3fa8) !important;
    color: #fbf9ff !important;
    box-shadow: 0 11px 28px rgba(91, 63, 168, .30) !important;
}

html[data-theme="dark"] .product-status,
html[data-theme="dark"] .nm-checkout-step,
html[data-theme="dark"] .nm-checkout-badge,
html[data-theme="dark"] .method-icon,
html[data-theme="dark"] .method i,
html[data-theme="dark"] .account-orders-icon,
html[data-theme="dark"] .account-order-package-icon {
    border-color: rgba(165, 140, 235, .22) !important;
    background: rgba(91, 63, 168, .16) !important;
    color: #b8a4f5 !important;
}

/* Order information adopts the same depth as the payment experience. */
html[data-theme="dark"] body.nm-checkout-page {
    background:
        radial-gradient(
            ellipse 74% 58% at 84% 0%,
            rgba(91, 63, 168, .26) 0%,
            rgba(40, 32, 68, .12) 42%,
            transparent 72%
        ),
        radial-gradient(
            ellipse 62% 48% at 10% 82%,
            rgba(40, 32, 68, .26) 0%,
            rgba(28, 24, 48, .10) 48%,
            transparent 76%
        ),
        radial-gradient(
            ellipse 46% 34% at 52% 48%,
            rgba(118, 87, 200, .065) 0%,
            transparent 74%
        ),
        linear-gradient(180deg, #12111b 0%, #0f0e16 58%, #0d0c13 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] body.nm-checkout-page .site-header {
    border-bottom-color: rgba(165, 140, 235, .13) !important;
    background: rgba(15, 14, 22, .88) !important;
}

html[data-theme="dark"] .nm-checkout-back {
    border-color: rgba(141, 114, 217, .24) !important;
    background: rgba(28, 24, 48, .66) !important;
    color: #dcd4eb !important;
    box-shadow: 0 8px 22px rgba(5, 4, 10, .16);
}

html[data-theme="dark"] .nm-checkout-back:hover {
    border-color: rgba(165, 140, 235, .60) !important;
    background: rgba(40, 32, 68, .78) !important;
    color: #fbf9ff !important;
}

html[data-theme="dark"] .nm-checkout-step {
    border-color: rgba(165, 140, 235, .30) !important;
    background: rgba(91, 63, 168, .13) !important;
    color: #b8a4f5 !important;
}

html[data-theme="dark"] .nm-checkout-form {
    border-color: rgba(141, 114, 217, .22) !important;
    background:
        linear-gradient(
            160deg,
            rgba(28, 24, 48, .96) 0%,
            rgba(21, 19, 31, .98) 44%,
            rgba(15, 14, 22, .985) 100%
        ) !important;
    box-shadow:
        0 30px 80px rgba(5, 4, 10, .36),
        inset 0 1px 0 rgba(184, 164, 245, .035) !important;
}

html[data-theme="dark"] .nm-checkout-kicker {
    color: #a58ceb !important;
}

html[data-theme="dark"] .nm-checkout-badge {
    border-color: rgba(165, 140, 235, .28) !important;
    background: rgba(91, 63, 168, .16) !important;
    color: #c7b6f4 !important;
}

html[data-theme="dark"] .nm-checkout-optional,
html[data-theme="dark"] .nm-checkout-security {
    border-color: rgba(141, 114, 217, .12) !important;
    background: rgba(15, 14, 22, .62) !important;
}

html[data-theme="dark"] .nm-checkout-field input,
html[data-theme="dark"] .nm-checkout-field select,
html[data-theme="dark"] .nm-checkout-field textarea {
    border-color: #40364f !important;
    background-color: #100f17 !important;
    color: #f6f3fb !important;
    -webkit-text-fill-color: #f6f3fb !important;
}

html[data-theme="dark"] .nm-checkout-field select {
    background-image:
        linear-gradient(45deg, transparent 50%, #a58ceb 50%),
        linear-gradient(135deg, #a58ceb 50%, transparent 50%) !important;
}

html[data-theme="dark"] .nm-checkout-field select option {
    background: #15131f !important;
    color: #f6f3fb !important;
}

html[data-theme="dark"] .nm-checkout-field input:hover,
html[data-theme="dark"] .nm-checkout-field select:hover,
html[data-theme="dark"] .nm-checkout-field textarea:hover {
    border-color: #55466f !important;
}

html[data-theme="dark"] .nm-checkout-field input:focus,
html[data-theme="dark"] .nm-checkout-field select:focus,
html[data-theme="dark"] .nm-checkout-field textarea:focus {
    border-color: #a58ceb !important;
    background: #15131f !important;
    box-shadow: 0 0 0 3px rgba(165, 140, 235, .13) !important;
}

html[data-theme="dark"] .nm-checkout-email input {
    background: #15131f !important;
    color: #c6bfce !important;
    -webkit-text-fill-color: #c6bfce !important;
}

html[data-theme="dark"] .nm-checkout-divider {
    background: rgba(165, 140, 235, .11) !important;
}

html[data-theme="dark"] .nm-checkout-submit {
    border-color: rgba(184, 164, 245, .44) !important;
    background: linear-gradient(135deg, #9a7de2, #7657c8 58%, #5b3fa8) !important;
    box-shadow: 0 12px 30px rgba(91, 63, 168, .32) !important;
}

html[data-theme="light"] .site-theme-toggle__icon {
    background: #cec2ea !important;
    color: #5f3cae !important;
}

html[data-theme="light"] .site-theme-toggle__label {
    color: #282331 !important;
    font-weight: 800;
}

/* Premium light component mapping. No component owns an independent light palette. */
html[data-theme="light"] .about-hero {
    border-color: var(--border);
    background:
        radial-gradient(circle at 78% 18%, rgba(121, 88, 210, .11), transparent 34%),
        linear-gradient(135deg, var(--surface), var(--bg-primary));
}

html[data-theme="light"] .about-copy h1,
html[data-theme="light"] .about-values strong,
html[data-theme="light"] .support h2,
html[data-theme="light"] .store-trust strong {
    color: var(--text-primary);
}

html[data-theme="light"] .top .brand span,
html[data-theme="light"] .brand span,
html[data-theme="light"] .about-copy > p,
html[data-theme="light"] .about-copy h1 em,
html[data-theme="light"] .products-head > p,
html[data-theme="light"] .product-body > p,
html[data-theme="light"] .product footer em {
    color: var(--accent) !important;
}

html[data-theme="light"] .about-actions a {
    border-color: var(--border-strong) !important;
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

html[data-theme="light"] .about-actions a:first-child {
    border-color: var(--accent) !important;
    background: linear-gradient(135deg, #8969dc, var(--accent)) !important;
    color: #f8f6fb !important;
    box-shadow: 0 9px 22px rgba(104, 71, 194, .20);
}

html[data-theme="light"] body .shop-layout aside button.selected {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border)) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-hover) !important;
    box-shadow: 0 5px 14px rgba(81, 58, 137, .09) !important;
}

html[data-theme="light"] body .shop-layout aside button.selected b {
    background: color-mix(in srgb, var(--accent) 17%, var(--surface)) !important;
    color: var(--accent-hover) !important;
}

html[data-theme="light"] .about-copy > span,
html[data-theme="light"] .about-values span,
html[data-theme="light"] .store-trust span,
html[data-theme="light"] .support div span {
    color: var(--text-secondary);
}

html[data-theme="light"] .about-values article,
html[data-theme="light"] .store-trust article {
    border-color: var(--border);
    background: color-mix(in srgb, var(--surface-elevated) 92%, transparent);
    box-shadow: var(--shadow-soft);
}

html[data-theme="light"] .about-values b,
html[data-theme="light"] .store-trust article::before {
    background: var(--accent-soft);
    color: var(--accent);
}

html[data-theme="light"] .support {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
    background:
        radial-gradient(circle at 14% 0, rgba(121, 88, 210, .14), transparent 34%),
        linear-gradient(135deg, #e9e4f3, #ded7ec);
    box-shadow: var(--shadow-soft);
}

html[data-theme="light"] .support p { color: var(--accent); }

html[data-theme="light"] .support-btn {
    border-color: var(--accent);
    background: #332a45;
    color: #f8f6fb;
}

html[data-theme="light"] .profile-dropdown {
    border-color: var(--border);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-elevated);
}

html[data-theme="light"] .profile-dropdown a,
html[data-theme="light"] .profile-dropdown button {
    color: var(--text-primary) !important;
}

html[data-theme="light"] .profile-dropdown a:hover,
html[data-theme="light"] .profile-dropdown button:hover,
html[data-theme="light"] .profile-dropdown a:focus-visible,
html[data-theme="light"] .profile-dropdown button:focus-visible {
    background: var(--surface-muted);
    color: var(--accent-hover) !important;
}

html[data-theme="light"] .auth-modal {
    background: rgba(18, 15, 28, .48) !important;
}

html[data-theme="light"] .auth-modal-card {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    background: var(--surface);
    box-shadow: var(--shadow-elevated);
}

html[data-theme="light"] .auth-modal-card iframe {
    background: var(--surface);
}

html[data-theme="light"] .auth-modal-copy {
    background:
        radial-gradient(circle at 18% 12%, rgba(168, 137, 255, .18), transparent 34%),
        linear-gradient(145deg, #2d2050, #1d1830);
    color: #f8f6fb;
}

html[data-theme="light"] .auth-close {
    border-color: #948aa5 !important;
    background: #e2dee8 !important;
    color: #332d3d !important;
    box-shadow: 0 5px 16px rgba(55, 45, 76, .14);
    font-weight: 700;
    text-shadow: none;
}

html[data-theme="light"] .auth-close:hover {
    border-color: var(--accent) !important;
    background: #d8d1e4 !important;
    color: var(--accent-hover) !important;
}

html[data-theme="light"] .faq-trigger,
html[data-theme="light"] .faq-modal-card,
html[data-theme="light"] .faq-modal details {
    border-color: var(--border);
    background: var(--surface-elevated);
    color: var(--text-primary);
}

html[data-theme="light"] .faq-modal h2,
html[data-theme="light"] .faq-modal summary {
    color: var(--text-primary);
}

html[data-theme="light"] .faq-modal .faq-heading span,
html[data-theme="light"] .faq-modal details p {
    color: var(--text-secondary);
}

html[data-theme="light"] .site-header {
    border-color: var(--border) !important;
    background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
}

html[data-theme="light"] .site-header .logo,
html[data-theme="light"] .site-header .account,
html[data-theme="light"] .back {
    color: var(--text-primary) !important;
}

html[data-theme="light"] .site-header .account,
html[data-theme="light"] .back,
html[data-theme="light"] .nm-checkout-back {
    border-color: var(--border) !important;
    background: var(--surface) !important;
}

html[data-theme="light"] .selected-services,
html[data-theme="light"] .request-form,
html[data-theme="light"] .success,
html[data-theme="light"] .nm-checkout-form,
html[data-theme="light"] .pay-panel,
html[data-theme="light"] .payment-account,
html[data-theme="light"] .method,
html[data-theme="light"] .pay-help {
    border-color: var(--border) !important;
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-soft) !important;
}

html[data-theme="light"] .request-form input,
html[data-theme="light"] .request-form textarea,
html[data-theme="light"] .nm-checkout-field input,
html[data-theme="light"] .nm-checkout-field select,
html[data-theme="light"] .nm-checkout-field textarea,
html[data-theme="light"] .pay-panel input {
    border-color: var(--border-strong) !important;
    background: var(--surface-muted) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

html[data-theme="light"] .request-form input:focus,
html[data-theme="light"] .request-form textarea:focus,
html[data-theme="light"] .nm-checkout-field input:focus,
html[data-theme="light"] .nm-checkout-field select:focus,
html[data-theme="light"] .nm-checkout-field textarea:focus,
html[data-theme="light"] .pay-panel input:focus {
    border-color: var(--accent) !important;
    background: var(--surface-elevated) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* Account profile also follows the shared surfaces despite its older !important rules. */
html[data-theme="light"] .account-page .site-header {
    border-color: var(--border) !important;
    background: var(--surface) !important;
}

html[data-theme="light"] .account-profile-title,
html[data-theme="light"] .account-orders-heading h2,
html[data-theme="light"] .account-order-identity strong,
html[data-theme="light"] .account-order-summary strong,
html[data-theme="light"] .account-orders-empty strong {
    color: var(--text-primary) !important;
}

html[data-theme="light"] .account-profile-description,
html[data-theme="light"] .account-orders-heading p,
html[data-theme="light"] .account-order-identity small,
html[data-theme="light"] .account-order-description,
html[data-theme="light"] .account-order-summary span,
html[data-theme="light"] .account-orders-empty p {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .account-profile-actions,
html[data-theme="light"] .account-order-identity,
html[data-theme="light"] .account-order-summary {
    border-color: var(--border) !important;
}

html[data-theme="light"] .account-orders-panel {
    border-color: var(--border) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-soft) !important;
}

html[data-theme="light"] .account-order-card,
html[data-theme="light"] .account-orders-empty {
    border-color: var(--border) !important;
    background: var(--surface-elevated) !important;
    box-shadow: 0 9px 26px rgba(55, 45, 76, .08) !important;
}

html[data-theme="light"] .account-order-identity {
    background: var(--surface-muted) !important;
}

html[data-theme="light"] .account-order-package-icon,
html[data-theme="light"] .account-orders-icon,
html[data-theme="light"] .account-orders-empty > span {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border)) !important;
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

html[data-theme="light"] .account-profile-back {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border)) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-hover) !important;
}

html[data-theme="light"] body.cart-page,
html[data-theme="light"] body.nm-checkout-page,
html[data-theme="light"] body.support-public,
html[data-theme="light"] body:has(.pay-shell) {
    background:
        radial-gradient(circle at 82% 4%, rgba(121, 88, 210, .09), transparent 31%),
        var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

html[data-theme="light"] .nebula-cart-panel,
html[data-theme="light"] .nebula-cart-item,
html[data-theme="light"] .nebula-cart-footer,
html[data-theme="light"] .nebula-cart-empty {
    border-color: var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-soft) !important;
}

html[data-theme="light"] .nebula-cart-product,
html[data-theme="light"] .cart .cart-item-row,
html[data-theme="light"] .cart .cart-footer-bar {
    border-color: var(--border) !important;
    background: var(--surface-muted) !important;
}

html[data-theme="light"] .nebula-cart-product-info small,
html[data-theme="light"] .nebula-cart-meta,
html[data-theme="light"] .nebula-cart-footer-info,
html[data-theme="light"] .cart .cart-item-row .item-info small,
html[data-theme="light"] .cart .cart-summary-total span {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .nebula-cart-checkout,
html[data-theme="light"] .checkout-action-btn,
html[data-theme="light"] .nm-checkout-submit,
html[data-theme="light"] .pay-panel form button {
    border-color: var(--accent) !important;
    background: linear-gradient(135deg, #8969dc, var(--accent)) !important;
    color: #f8f6fb !important;
    box-shadow: 0 10px 24px rgba(104, 71, 194, .22) !important;
}

html[data-theme="light"] .nm-checkout-step,
html[data-theme="light"] .nm-checkout-badge,
html[data-theme="light"] .nm-checkout-optional,
html[data-theme="light"] .nm-checkout-security,
html[data-theme="light"] .method-icon,
html[data-theme="light"] .method i {
    border-color: var(--border) !important;
    background: var(--surface-muted) !important;
    color: var(--accent) !important;
}

html[data-theme="light"] .nm-checkout-kicker,
html[data-theme="light"] .pay-eyebrow,
html[data-theme="light"] .pay-panel header p,
html[data-theme="light"] .pay-brand span {
    color: var(--accent) !important;
}

html[data-theme="light"] .nm-checkout-hero h1,
html[data-theme="light"] .nm-checkout-section-heading h2,
html[data-theme="light"] .pay-shell > h1,
html[data-theme="light"] .pay-panel h2,
html[data-theme="light"] .pay-brand {
    color: var(--text-primary) !important;
}

html[data-theme="light"] .nm-checkout-hero p,
html[data-theme="light"] .nm-checkout-section-heading p,
html[data-theme="light"] .nm-checkout-helper,
html[data-theme="light"] .nm-checkout-note,
html[data-theme="light"] .pay-lead,
html[data-theme="light"] .pay-panel header small {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .terms-top,
html[data-theme="light"] .support-top {
    border-color: var(--border) !important;
    background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
}

html[data-theme="light"] .terms-shell section,
html[data-theme="light"] .terms-shell footer,
html[data-theme="light"] .help-categories a,
html[data-theme="light"] .faq-section details,
html[data-theme="light"] .support-search {
    border-color: var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-soft);
}

html[data-theme="light"] .terms-shell section p,
html[data-theme="light"] .terms-lead,
html[data-theme="light"] .terms-shell footer p,
html[data-theme="light"] .help-categories p,
html[data-theme="light"] .faq-section details p,
html[data-theme="light"] .support-hero > span {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .terms-eyebrow,
html[data-theme="light"] .terms-shell aside p,
html[data-theme="light"] .support-hero > p,
html[data-theme="light"] .section-heading p,
html[data-theme="light"] .help-categories a > span,
html[data-theme="light"] .faq-section summary small {
    color: var(--accent) !important;
}

html[data-theme="light"] .terms-support,
html[data-theme="light"] .support-button {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-hover) !important;
}

@media (max-width: 560px) {
    .auth-modal-card {
        max-width: calc(100vw - 24px);
    }

    .site-theme-toggle {
        left: max(12px, env(safe-area-inset-left));
        bottom: max(12px, env(safe-area-inset-bottom));
        width: 42px;
        padding: 0;
    }

    .site-theme-toggle__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (max-width: 800px) {
    html[data-theme="dark"] body,
    html[data-theme="dark"] body.nm-checkout-page {
        background-attachment: scroll !important;
    }
}

.account-embed .site-theme-toggle { display: none; }

html:not(.known-auth) .top .basket,
html:not(.known-auth) .site-header .cart-link {
    visibility: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: .01ms !important;
    }
}