/* Barengin Store — unified dark appearance and bedroom pull-cord control */
:root {
    --br-night-0: #060512;
    --br-night-1: #070620;
    --br-night-2: #0b0a2d;
    --br-night-3: #0f0f3c;
    --br-night-4: #15174e;
    --br-night-card: rgba(10, 9, 43, .86);
    --br-night-card-solid: #0b0b33;
    --br-night-card-soft: rgba(14, 14, 57, .78);
    --br-night-line: rgba(137, 151, 255, .16);
    --br-night-line-strong: rgba(137, 151, 255, .28);
    --br-night-text: #edeeff;
    --br-night-text-soft: #c2c2e9;
    --br-night-muted: #9293c0;
    --br-night-cyan: #7994ff;
    --br-night-blue: #7871ff;
    --br-night-yellow: #ffd979;
    --br-night-pink: #ff9dcc;
    --br-night-green: #64e4b2;
    --br-night-danger: #ff8298;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --gray-900: #f2f2fc;
    --gray-800: #e3e5f8;
    --gray-700: #c7c8e9;
    --gray-600: #aaabd1;
    --gray-500: #9091bb;
    --gray-400: #7777a5;
    --gray-300: #393966;
    --gray-200: #262652;
    --gray-100: #12123b;
    --primary: #6384fc;
    --primary-dark: #90a7ff;
    --primary-light: #3d63f3;
    --primary-bg: rgba(52, 91, 244, .13);
    --secondary: #7f9ffc;
    --dark: #06051e;
    --dark-soft: #0c0c36;
    --success: #5ce0ac;
    --warning: #ffd166;
    --danger: #ff7891;
    --info: #6e8bf8;
    --gradient-navbar: linear-gradient(110deg, rgba(6, 5, 30, .95), rgba(10, 11, 47, .94) 48%, rgba(7, 17, 63, .92));
    --gradient-hero: linear-gradient(135deg, #060520 0%, #081342 52%, #14103b 100%);
    --shadow-sm: 0 2px 7px rgba(0, 0, 0, .2);
    --shadow: 0 10px 28px rgba(0, 0, 0, .26);
    --shadow-md: 0 18px 44px rgba(0, 0, 0, .32);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, .42);
    --shadow-xl: 0 36px 100px rgba(0, 0, 0, .55);

    /* Page-specific design tokens */
    --ink: var(--br-night-text) !important;
    --muted: var(--br-night-muted) !important;
    --paper: var(--br-night-card) !important;
    --cream: #080725 !important;
    --sky: #070620 !important;
    --sky-2: #0f103e !important;
    --bg: #070620 !important;
    --bg-main: #070620 !important;
    --bg-page: #070620 !important;
    --surface: var(--br-night-card-solid) !important;
    --bg-surface: var(--br-night-card-solid) !important;
    --card: var(--br-night-card) !important;
    --text: var(--br-night-text) !important;
    --text-main: var(--br-night-text) !important;
    --text-strong: var(--br-night-text) !important;
    --text-base: var(--br-night-text-soft) !important;
    --text-muted: var(--br-night-muted) !important;
    --text-light: #8d8eba !important;
    --border-color: var(--br-night-line) !important;
    --line: var(--br-night-line) !important;

    --pd-ink: var(--br-night-text) !important;
    --pd-muted: var(--br-night-muted) !important;
    --pd-paper: var(--br-night-card) !important;
    --pd-line: var(--br-night-line) !important;
    --pd-blue-dark: var(--br-night-cyan) !important;

    --co-ink: var(--br-night-text) !important;
    --co-muted: var(--br-night-muted) !important;
    --co-paper: var(--br-night-card) !important;
    --co-line: var(--br-night-line) !important;
    --co-blue-dark: var(--br-night-cyan) !important;

    --brg-ink: var(--br-night-text) !important;
    --brg-muted: var(--br-night-muted) !important;
    --brg-soft: #0a092b !important;
    --brg-paper: var(--br-night-card) !important;
    --brg-white: #0f0f3c !important;
    --brg-blue-dark: var(--br-night-cyan) !important;
    --brg-line: var(--br-night-line) !important;
    --brg-shadow: 0 30px 80px rgba(0, 0, 0, .42) !important;
    --brg-soft-shadow: 0 16px 38px rgba(0, 0, 0, .3) !important;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--br-night-1) !important;
}

html[data-theme="dark"] body {
    color: var(--br-night-text-soft) !important;
    background-image:
        radial-gradient(ellipse 78% 56% at 8% 4%, rgba(30, 60, 200, .30), transparent 64%),
        radial-gradient(ellipse 64% 52% at 92% 12%, rgba(120, 70, 220, .24), transparent 67%),
        radial-gradient(ellipse 58% 48% at 15% 92%, rgba(160, 50, 160, .17), transparent 70%),
        radial-gradient(ellipse 48% 38% at 82% 84%, rgba(20, 70, 160, .16), transparent 72%),
        linear-gradient(155deg, #05041a 0%, #070826 44%, #0a0828 100%) !important;
    background-attachment: fixed !important;
}

.br-theme-backdrop {
    display: none;
}

html[data-theme="dark"] .br-theme-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    pointer-events: none;
    opacity: .48;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='260' viewBox='0 0 360 260'%3E%3Cg fill='none' stroke='%2379e5ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='.18'%3E%3Cpath d='M34 42c13-12 23 6 9 14s-22-7-9-14Zm253 19 6 13 14 2-10 10 3 14-13-7-13 7 3-14-10-10 14-2 6-13ZM63 194c18-16 40-6 42 11-18 13-35 11-42-11Zm8 2c4 7 12 8 18 2M286 202c-8-12-24-10-29 2 8 12 24 10 29-2Zm-16-8v-11m-5 3 5-4 5 4M171 76c9-9 20-6 23 5-10 8-20 6-23-5Zm7-1c2 4 6 5 10 2'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(circle at 50% 50%, rgba(120, 113, 255, .08) 0 1px, transparent 1.5px);
    background-size: 360px 260px, 28px 28px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,.25));
}

html[data-theme="dark"] :where(.products-page, .terms-page, .ic-page, .chat-page, .payment-container, .rp-bg, .invoice-page, .app-container, .cart-wrapper) {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--br-night-text-soft) !important;
}

html[data-theme="dark"] :where(h1, h2, h3, h4, h5, h6, .page-title, .section-title, .product-name, .product-title, .card-title, .p-title, .g-name, .m-title, .clean-title, .related-title-main, .related-text h3, .terms-section h2, .legal-section h2, .faq-question-text, .profile-header h1, .chat-header-info h3) {
    color: var(--br-night-text) !important;
}

html[data-theme="dark"] :where(.desc, .page-subtitle, .section-desc, .product-info, .product-excerpt, .card-excerpt, .pd-lead, .p-meta, .g-type, .text-muted, .form-hint, .clean-meta, .related-subtitle, .info-desc, .terms-content, .legal-content p, .chat-message-time, .stat-label, .category-count, small) {
    color: var(--br-night-muted) !important;
}

html[data-theme="dark"] :where(
    .card, .panel, .brand, .bubble, .pill, .proof span, .mobile-mascot,
    .auth-form-container, .auth-right, .steps, .info-box,
    .product-card, .product-card-modern, .cat-card, .category-card,
    .step-card, .testi-card, .stat-card, .slider-card, .live-box, .gp-card,
    .proof, .talk, .promo-points span, .feature-mini, .stats-grid,
    .product-chip, .gp-filter-btn, .gp-img-ph, .gp-status, .rating-bar,
    .service-disclaimer, .app-logo-item, .ppob-stats-card, .duration-box,
    .pd-panel, .pd-blob-card, .controls-bar, .empty-state,
    .cart-items-container, .order-summary, .cart-item,
    .co-card, .co-customer, .co-method, .co-proof-box, .co-va-box,
    .payment-card, .order-item, .countdown-container, .qris-image,
    .payment-success-wrap, .celeb-btn.outline,
    #receiptCard, .rc-section, .rc-note, .rp-btn-back, .invoice-shell, .invoice-preview,
    .modern-card, .clean-article-wrapper, .related-card, .related-card-inner,
    .info-header, .faq-item, .terms-card, .terms-highlight, .legal-section,
    .chat-card, .chat-input-area, .chat-input-wrapper, .profile-card,
    .chat-modal-box, .review-prompt, .notification-prompt,
    .dl-step, .dl-phone-frame, .dl-feature, .dl-phone-screen,
    .dl-box, .token-card, .video-wrap,
    .img-card, .hero-layout > div:last-child, .mod-section, .detail-wrap,
    .rel-wrap, .group-card, .variant-picker, .feat-card, .r-card, .desc-box
) {
    color: var(--br-night-text-soft) !important;
    background-color: var(--br-night-card) !important;
    border-color: var(--br-night-line) !important;
    box-shadow: 0 22px 58px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html[data-theme="dark"] :where(.product-media, .product-image-wrapper, .product-image, .product-thumb, .img-box, .card-img-wrapper, .related-media, .clean-image-wrap, .px-main-wrap) {
    background: linear-gradient(145deg, rgba(16, 18, 66, .92), rgba(8, 7, 41, .96)) !important;
    border-color: var(--br-night-line) !important;
}

html[data-theme="dark"] :where(.product-footer, .card-footer, .cart-item-bottom, .modal-header, .modal-body, .profile-card-body, .card-header, .card-body, .g-content) {
    color: var(--br-night-text-soft) !important;
    background-color: rgba(11, 11, 51, .92) !important;
    border-color: var(--br-night-line) !important;
}

html[data-theme="dark"] :where(.docked-bottom-bar, .app-crumb, .tag-brand, #pxLightbox .px-thumbs, #pxLightbox .px-arrow) {
    color: var(--br-night-text-soft) !important;
    background: rgba(7, 7, 41, .96) !important;
    border-color: var(--br-night-line-strong) !important;
    box-shadow: 0 -12px 36px rgba(0, 0, 0, .3) !important;
}

html[data-theme="dark"] .hero-layout::before {
    background: rgba(11, 11, 52, .76) !important;
    border-color: var(--br-night-line) !important;
}

html[data-theme="dark"] body:has(.clean-article-wrapper) .container {
    background: transparent !important;
    background-color: transparent !important;
}

html[data-theme="dark"] body:has(.app-container)::before {
    background:
        radial-gradient(circle at 10% 5%, rgba(30, 70, 250, .18), transparent 24rem),
        radial-gradient(circle at 90% 8%, rgba(139,92,246,.14), transparent 23rem),
        linear-gradient(180deg, #070620, #070825 52%, #06051e) !important;
}

html[data-theme="dark"] body:has(.app-container)::after {
    opacity: .28 !important;
    background-image: radial-gradient(circle, rgba(121, 148, 255, .22) 1px, transparent 1.4px) !important;
    background-size: 30px 30px !important;
}

html[data-theme="dark"] :where(input, textarea, select, .form-control, .search-container input, .sort-select, .qty-input, .chat-ui-input-box, .chat-input-wrapper) {
    color: var(--br-night-text) !important;
    background: rgba(4, 3, 26, .74) !important;
    border-color: var(--br-night-line-strong) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

html[data-theme="dark"] :where(.bg-white, .bg-white\/80, .bg-slate-50, .bg-green-50, .bg-yellow-50) {
    background-color: var(--br-night-card-solid) !important;
    border-color: var(--br-night-line) !important;
}

html[data-theme="dark"] :where(.text-slate-800, .text-slate-700, .text-slate-600) {
    color: var(--br-night-text-soft) !important;
}

html[data-theme="dark"] :where(.border-white, .border-slate-100, .border-slate-200, .border-slate-300) {
    border-color: var(--br-night-line-strong) !important;
}

/* Tailwind-based extension guide has two inline, fixed light backdrops. */
html[data-theme="dark"] body > .relative.min-h-screen {
    color: var(--br-night-text-soft) !important;
    background: transparent !important;
}

html[data-theme="dark"] body > .relative.min-h-screen > .fixed.inset-0.z-0:first-child {
    opacity: 1 !important;
    background:
        radial-gradient(ellipse 72% 48% at 4% 2%, rgba(15, 51, 195, .28), transparent 66%),
        radial-gradient(ellipse 60% 44% at 96% 22%, rgba(103, 63, 183, .2), transparent 70%),
        radial-gradient(ellipse 58% 45% at 48% 100%, rgba(16, 123, 113, .15), transparent 72%),
        #070620 !important;
}

html[data-theme="dark"] body > .relative.min-h-screen > .fixed.inset-0.z-0:nth-child(2) {
    opacity: .22 !important;
    background-image: radial-gradient(rgba(121, 148, 255, .55) 1px, transparent 1.5px) !important;
}

html[data-theme="dark"] :where(input, textarea, select, .form-control):focus {
    border-color: rgba(121, 148, 255, .64) !important;
    box-shadow: 0 0 0 4px rgba(62, 99, 244, .12) !important;
    outline: none !important;
}

html[data-theme="dark"] :where(input, textarea)::placeholder {
    color: #70719f !important;
    opacity: 1;
}

html[data-theme="dark"] :where(table, thead, tbody, tr, th, td) {
    border-color: var(--br-night-line) !important;
}

html[data-theme="dark"] :where(th) {
    color: var(--br-night-text-soft) !important;
    background: rgba(19, 20, 70, .9) !important;
}

html[data-theme="dark"] :where(td) {
    color: var(--br-night-text-soft) !important;
    background: rgba(8, 8, 43, .78) !important;
}

html[data-theme="dark"] :where(.navbar, nav.navbar#navbar) {
    background: var(--gradient-navbar) !important;
    border-color: rgba(121, 148, 255, .15) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .3) !important;
}

html[data-theme="dark"] :where(.nav-link, .nav-logo, .nav-logo span, .nav-logo .site-name, .nav-user, .nav-icon, .nav-toggle, .nav-btn-login) {
    color: var(--br-night-cyan) !important;
}

html[data-theme="dark"] nav.navbar#navbar :where(.nav-user, .nav-toggle) {
    background: rgba(121, 148, 255, .08) !important;
    border-color: rgba(121, 148, 255, .2) !important;
}

html[data-theme="dark"] nav.navbar#navbar .dropdown-menu {
    background: rgba(7, 7, 38, .97) !important;
    border-color: var(--br-night-line-strong) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.48) !important;
}

html[data-theme="dark"] nav.navbar#navbar .dropdown-menu a {
    color: var(--br-night-text-soft) !important;
    border-color: var(--br-night-line) !important;
}

html[data-theme="dark"] nav.navbar#navbar .dropdown-menu a:hover {
    color: var(--br-night-cyan) !important;
    background: rgba(121, 148, 255, .09) !important;
}

html[data-theme="dark"] :where(.category-pill, .pill-btn, .page-btn, .qty-btn, .btn-outline, .btn-secondary, .btn-back, .chat-back-btn) {
    color: var(--br-night-cyan) !important;
    background: rgba(121, 148, 255, .07) !important;
    border-color: rgba(121, 148, 255, .22) !important;
}

html[data-theme="dark"] :where(.category-pill:hover, .category-pill.active, .pill-btn:hover, .page-btn:hover, .page-btn.active) {
    color: #060520 !important;
    background: var(--br-night-cyan) !important;
}

html[data-theme="dark"] :where(.product-category-tag, .card-badge, .section-badge, .eyebrow, .pd-badge, .m-chip, .ui-tag, .status-badge) {
    color: var(--br-night-cyan) !important;
    background: rgba(71, 104, 243, .12) !important;
    border-color: rgba(121, 148, 255, .22) !important;
}

html[data-theme="dark"] :where(.price-current, .product-price, .stat-number, .rc-total-val, .amount, .value) {
    color: var(--br-night-yellow) !important;
}

html[data-theme="dark"] :where(.modal-overlay, .media-lightbox, .payment-confirming) {
    background: rgba(2, 2, 14, .78) !important;
    backdrop-filter: blur(12px) !important;
}

html[data-theme="dark"] :where(.modal, .media-preview-modal, .payment-confirming-card, .rv-modal, .px-dialog, .broadcast-box, .broadcast-item, .barengin-campaign-card) {
    color: var(--br-night-text-soft) !important;
    background: linear-gradient(145deg, rgba(13, 14, 55, .98), rgba(7, 6, 36, .98)) !important;
    border-color: var(--br-night-line-strong) !important;
}

html[data-theme="dark"] :where(.chat-message.received .chat-message-bubble, .chat-bubble.received) {
    color: var(--br-night-text-soft) !important;
    background: #10113f !important;
    border-color: var(--br-night-line) !important;
}

html[data-theme="dark"] :where(.chat-ui-header, .chat-ui-input, .chat-header, .co-methods-label, .co-notes, .co-payment-hint, .co-head-bubble, .co-payment-talk, .celeb-talk, .co-proof-picker, .co-crossborder, .co-proof-contact button) {
    color: var(--br-night-text-soft) !important;
    background: rgba(9, 9, 45, .92) !important;
    border-color: var(--br-night-line-strong) !important;
}

html[data-theme="dark"] :where(.co-qr, .co-qr-barengin) {
    background: #f8f9ff !important;
    border-color: rgba(121, 148, 255, .34) !important;
}

html[data-theme="dark"] :where(.chat-message.sent .chat-message-bubble, .chat-bubble.sent) {
    color: #eef1ff !important;
    background: linear-gradient(135deg, #0422a2, #130eab) !important;
}

html[data-theme="dark"] :where(.faq-answer, .clean-content, .legal-content, .terms-content, .rc-row, .co-row, .product-info-wrap) {
    color: var(--br-night-text-soft) !important;
}

html[data-theme="dark"] :where(hr, .divider, .detail-divider, .sep) {
    border-color: var(--br-night-line) !important;
    background-color: var(--br-night-line) !important;
}

html[data-theme="dark"] [style*="color:#67638c"],
html[data-theme="dark"] [style*="color: #67638c"],
html[data-theme="dark"] [style*="color:#4a466a"],
html[data-theme="dark"] [style*="color: #4a466a"],
html[data-theme="dark"] [style*="color:#363256"],
html[data-theme="dark"] [style*="color: #363256"],
html[data-theme="dark"] [style*="color:#140e2b"],
html[data-theme="dark"] [style*="color: #140e2b"] {
    color: var(--br-night-text-soft) !important;
}

html[data-theme="dark"] :where(main, .main-content, .modal, .section) [style*="background: white"]:not(.btn),
html[data-theme="dark"] :where(main, .main-content, .modal, .section) [style*="background:#fff"]:not(.btn),
html[data-theme="dark"] :where(main, .main-content, .modal, .section)[style*="background-color: #ffffff"],
html[data-theme="dark"] :where(main, .main-content, .modal, .section) [style*="background-color: #ffffff"] {
    color: var(--br-night-text-soft) !important;
    background: var(--br-night-card) !important;
    background-color: var(--br-night-card-solid) !important;
    border-color: var(--br-night-line) !important;
}

html[data-theme="dark"] .app-container::before,
html[data-theme="dark"] .products-page::before,
html[data-theme="dark"] .pd-hero::before {
    filter: saturate(.78) brightness(.62) !important;
    opacity: .8 !important;
}

html[data-theme="dark"] .site-footer {
    background: linear-gradient(155deg, #040310, #070628 54%, #080e32) !important;
    border-top: 1px solid rgba(121, 148, 255, .13) !important;
}

html[data-theme="dark"] .site-footer :where(p, li, span, a) {
    color: #abadd6 !important;
}

html[data-theme="dark"] .site-footer :where(h3, h4) {
    color: #f1f3ff !important;
}

html[data-theme="dark"] ::selection {
    color: #030419;
    background: #7994ff;
}

/* Pull-cord switch */
.br-theme-pull {
    --br-pull-y: 0px;
    --br-pull-angle: 0deg;
    position: fixed !important;
    top: 0;
    right: max(12px, env(safe-area-inset-right));
    z-index: 2400;
    width: 54px;
    height: 144px;
    margin: 0;
    padding: 0;
    color: #1f214a;
    background: transparent !important;
    border: 0 !important;
    outline: 0;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    filter: drop-shadow(0 5px 7px rgba(5, 6, 31, .2));
}

.br-theme-pull:active,
.br-theme-pull.is-pulling {
    cursor: grabbing;
}

.br-pull-ceiling {
    position: absolute;
    top: -4px;
    left: 50%;
    width: 24px;
    height: 15px;
    transform: translateX(-50%);
    border-radius: 0 0 11px 11px;
    background: linear-gradient(90deg, #6b7280, #e3e2f0 47%, #67638c);
    border: 1px solid rgba(20, 14, 43, .38);
    box-shadow: inset 0 -3px 4px rgba(20, 14, 43, .26), 0 2px 4px rgba(0,0,0,.16);
}

.br-pull-ceiling span {
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 7px;
    height: 7px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #363256;
}

.br-cord-assembly {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 34px;
    height: 126px;
    transform-origin: 50% 0;
    transform: translateX(-50%) translateY(var(--br-pull-y)) rotate(var(--br-pull-angle));
    transition: transform 70ms linear;
}

.br-theme-pull.is-pulling .br-cord-assembly {
    transition: none;
}

.br-theme-pull.is-released .br-cord-assembly {
    animation: br-cord-settle 1s cubic-bezier(.22,.72,.18,1);
}

.br-cord {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 82px;
    transform: translateX(-50%);
    overflow: hidden;
    border-radius: 99px;
    background: repeating-linear-gradient(160deg, #8a7255 0 3px, #d6bb8b 3px 6px, #715a42 6px 8px);
    box-shadow: inset 1px 0 rgba(255,255,255,.38), 1px 0 2px rgba(0,0,0,.22);
}

.br-cord-thread {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(18deg, transparent 0 5px, rgba(255,255,255,.27) 5px 6px, transparent 6px 9px);
}

.br-cord-bead {
    position: absolute;
    top: 77px;
    left: 50%;
    width: 9px;
    height: 13px;
    transform: translateX(-50%);
    border-radius: 48%;
    background: linear-gradient(90deg, #70543b, #c59b68 48%, #63462f);
    box-shadow: inset 1px 0 rgba(255,255,255,.28), 0 2px 3px rgba(0,0,0,.25);
}

.br-pull-handle {
    position: absolute;
    top: 87px;
    left: 50%;
    width: 32px;
    height: 38px;
    transform: translateX(-50%);
}

.br-bulb-cap {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: 18px;
    height: 9px;
    transform: translateX(-50%);
    border-radius: 3px 3px 6px 6px;
    background: repeating-linear-gradient(0deg, #52526d 0 2px, #b7b8ca 2px 3px);
    border: 1px solid rgba(20, 14, 43, .45);
}

.br-bulb-glass {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 31px;
    height: 31px;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(27, 36, 101, .38);
    border-radius: 49% 49% 45% 45% / 54% 54% 43% 43%;
    color: #373d77;
    background: radial-gradient(circle at 36% 29%, #fff 0 9%, #dfe6ff 23%, #a3b6f7 65%, #546dcc 100%);
    box-shadow: inset -5px -6px 8px rgba(13, 28, 93, .2), 0 4px 9px rgba(1, 19, 92, .2);
    transition: color .45s ease, background .45s ease, box-shadow .45s ease, border-color .45s ease;
}

.br-bulb-glass i {
    position: absolute;
    font-size: 12px;
    transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}

.br-theme-sun {
    opacity: 0;
    transform: scale(.45) rotate(-50deg);
}

.br-theme-moon {
    opacity: 1;
    transform: scale(1) rotate(-12deg);
}

html[data-theme="dark"] .br-theme-pull {
    filter: drop-shadow(0 8px 11px rgba(0, 0, 0, .48));
}

html[data-theme="dark"] .br-bulb-glass {
    color: #805d04;
    border-color: rgba(255, 224, 130, .72);
    background: radial-gradient(circle at 36% 29%, #fffde5 0 10%, #ffe99d 27%, #ffd166 67%, #e5a914 100%);
    box-shadow: inset -5px -6px 8px rgba(145, 91, 0, .19), 0 0 9px rgba(255, 211, 102, .72), 0 0 27px rgba(255, 201, 68, .5), 0 0 64px rgba(255, 197, 54, .24);
}

html[data-theme="dark"] .br-theme-sun {
    opacity: 1;
    transform: scale(1) rotate(0);
}

html[data-theme="dark"] .br-theme-moon {
    opacity: 0;
    transform: scale(.45) rotate(45deg);
}

.br-pull-tooltip {
    position: absolute;
    top: 104px;
    right: 47px;
    width: max-content;
    max-width: 210px;
    padding: 7px 10px;
    border: 1px solid rgba(17, 29, 100, .14);
    border-radius: 11px 11px 3px 11px;
    color: #131a4e;
    background: rgba(239, 242, 255, .96);
    box-shadow: 0 10px 24px rgba(3, 9, 50, .16);
    font: 750 11px/1.25 'Inter', system-ui, sans-serif;
    letter-spacing: .01em;
    white-space: nowrap;
    opacity: 0;
    transform: translate(5px, -2px) scale(.96);
    transform-origin: 100% 50%;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.br-pull-tooltip::before {
    content: attr(data-label);
}

.br-theme-pull .br-pull-tooltip::after {
    content: attr(data-tip);
}

.br-theme-pull:hover .br-pull-tooltip,
.br-theme-pull:focus-visible .br-pull-tooltip {
    opacity: 1;
    transform: translate(0, -2px) scale(1);
}

.br-theme-pull::after {
    content: attr(data-tip);
    position: absolute;
    top: 103px;
    right: 48px;
    width: max-content;
    max-width: 210px;
    padding: 7px 10px;
    border: 1px solid rgba(17, 29, 100, .14);
    border-radius: 11px 11px 3px 11px;
    color: #131a4e;
    background: rgba(239, 242, 255, .96);
    box-shadow: 0 10px 24px rgba(3, 9, 50, .16);
    font: 750 11px/1.25 'Inter', system-ui, sans-serif;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(5px) scale(.96);
    transform-origin: 100% 50%;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.br-theme-pull:hover::after,
.br-theme-pull:focus-visible::after {
    opacity: 1;
    transform: translateX(0) scale(1);
}

html[data-theme="dark"] .br-theme-pull::after {
    color: #dfe3ff;
    background: rgba(7, 8, 43, .96);
    border-color: rgba(121, 148, 255, .22);
}

.br-theme-pull:focus-visible .br-bulb-glass {
    outline: 3px solid rgba(7, 33, 240, .42);
    outline-offset: 4px;
}

.br-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@keyframes br-cord-settle {
    0%   { transform: translateX(-50%) translateY(0) rotate(var(--br-pull-angle)); }
    12%  { transform: translateX(-50%) translateY(-3px) rotate(-11deg); }
    28%  { transform: translateX(-50%) translateY(1px) rotate(8deg); }
    46%  { transform: translateX(-50%) translateY(0) rotate(-5deg); }
    65%  { transform: translateX(-50%) translateY(0) rotate(3deg); }
    82%  { transform: translateX(-50%) translateY(0) rotate(-1.2deg); }
    100% { transform: translateX(-50%) translateY(0) rotate(0); }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .54s;
    animation-timing-function: cubic-bezier(.2,.8,.2,1);
}

@media (max-width: 900px) {
    nav.navbar#navbar .nav-actions { padding-right: 33px; }
    .br-theme-pull {
        right: max(4px, env(safe-area-inset-right));
        width: 44px;
        height: 124px;
        transform: scale(.88);
        transform-origin: top right;
    }
    .br-cord { height: 70px; }
    .br-cord-bead { top: 65px; }
    .br-pull-handle { top: 75px; }
    .br-pull-tooltip,
    .br-theme-pull::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html *, html *::before, html *::after {
        scroll-behavior: auto !important;
    }
    .br-cord-assembly,
    .br-theme-pull.is-released .br-cord-assembly,
    .br-bulb-glass,
    .br-bulb-glass i {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* Homepage theme button: lives inside the header's right action area. */
.global-theme-orbit {
    position: relative !important;
    z-index: auto !important;
    top: auto !important;
    right: auto !important;
    flex: 0 0 42px;
    width: 42px !important;
    height: 42px !important;
    margin: 0 0 0 4px;
    pointer-events: none !important;
    filter: drop-shadow(0 4px 8px rgba(6, 13, 72, .12));
}

.global-theme-orbit__button {
    position: relative !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #131a4e !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    user-select: none !important;
    pointer-events: auto !important;
    transition: transform .22s ease, border-color .4s ease, box-shadow .4s ease, background .4s ease !important;
    -webkit-tap-highlight-color: transparent;
}

.global-theme-orbit__button:hover {
    transform: translateY(-2px) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.global-theme-orbit__button.is-pressed {
    transform: translateY(0) scale(.96) !important;
}

.global-theme-orbit__button:focus-visible {
    outline: 3px solid rgba(13, 57, 224, .42) !important;
    outline-offset: 4px !important;
}

.global-theme-orbit__sky {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background .55s cubic-bezier(.22, .72, .18, 1), box-shadow .55s ease !important;
}

.global-theme-orbit__sky::after {
    content: "";
    position: absolute;
    z-index: 8;
    inset: -12px auto -12px -34px;
    width: 32px;
    opacity: 0;
    transform: skewX(-14deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
    pointer-events: none;
}

.global-theme-orbit.is-switching .global-theme-orbit__sky::after {
    animation: globalOrbitSweep .72s ease both;
}

.global-theme-orbit__ring {
    display: none !important;
}

.global-theme-orbit__sun,
.global-theme-orbit__moon {
    position: absolute !important;
    z-index: 5 !important;
    top: 6px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    transition: transform .68s cubic-bezier(.18, .84, .2, 1), opacity .45s ease, filter .55s ease !important;
}

.global-theme-orbit__sun {
    left: 6px !important;
    opacity: 1;
    transform: rotate(0) scale(1);
    background: radial-gradient(circle at 36% 30%, #fffce0 0 9%, #ffe780 30%, #ffc33d 72%, #ee9f17 100%) !important;
    box-shadow: 0 0 0 4px rgba(255, 219, 98, .2), 0 0 16px rgba(255, 190, 45, .6), inset -4px -5px 7px rgba(182, 100, 4, .16) !important;
}

.global-theme-orbit__moon {
    left: 6px !important;
    right: auto !important;
    opacity: 0;
    transform: rotate(-65deg) scale(.58);
    pointer-events: none;
    background: radial-gradient(circle at 34% 28%, #fff 0 8%, #e5e8ff 27%, #b4b8ef 72%, #787dc8 100%) !important;
    box-shadow: 0 0 0 4px rgba(174, 178, 255, .13), inset -5px -5px 8px rgba(36, 41, 129, .2) !important;
}

.global-theme-orbit__moon i {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: rgba(68, 75, 161, .22);
    box-shadow: inset 1px 1px 1px rgba(33, 36, 110, .16);
}

.global-theme-orbit__moon i:nth-child(1) { width: 7px; height: 7px; left: 6px; top: 7px; }
.global-theme-orbit__moon i:nth-child(2) { width: 5px; height: 5px; right: 6px; top: 13px; }
.global-theme-orbit__moon i:nth-child(3) { width: 4px; height: 4px; left: 12px; bottom: 5px; }

.global-theme-orbit__stars,
.global-theme-orbit__clouds { display: none !important; }

.global-theme-orbit__stars {
    position: absolute;
    z-index: 3;
    inset: 0;
    opacity: 0;
    transform: translateY(5px) scale(.82);
    transition: opacity .45s ease .08s, transform .62s cubic-bezier(.2, .8, .2, 1) !important;
}

.global-theme-orbit__stars i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #dfe4ff;
    box-shadow: 0 0 6px rgba(169, 180, 255, .9);
}

.global-theme-orbit__stars i:nth-child(1) { left: 17px; top: 9px; }
.global-theme-orbit__stars i:nth-child(2) { left: 35px; top: 25px; width: 2px; height: 2px; }
.global-theme-orbit__stars i:nth-child(3) { right: 16px; top: 8px; width: 2px; height: 2px; }

.global-theme-orbit__clouds {
    position: absolute;
    z-index: 4;
    inset: 0;
    opacity: .84;
    transform: translateX(0);
    transition: opacity .38s ease, transform .62s cubic-bezier(.2, .8, .2, 1) !important;
}

.global-theme-orbit__clouds i {
    position: absolute;
    display: block;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 2px 5px rgba(53, 69, 173, .12);
}

.global-theme-orbit__clouds i:first-child { width: 22px; right: 8px; bottom: 7px; }
.global-theme-orbit__clouds i:last-child { width: 14px; left: 34px; top: 8px; opacity: .68; }

.global-theme-orbit__button::after {
    content: attr(data-tip);
    position: absolute;
    top: 56px;
    right: 0;
    width: max-content;
    max-width: 190px;
    padding: 7px 10px;
    border: 1px solid rgba(17, 29, 100, .14);
    border-radius: 11px 3px 11px 11px;
    color: #131a4e;
    background: rgba(239, 242, 255, .98);
    box-shadow: 0 10px 24px rgba(3, 9, 50, .16);
    font: 750 11px/1.25 'Inter', system-ui, sans-serif;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-4px) scale(.96);
    transform-origin: 100% 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.global-theme-orbit__button:hover::after,
.global-theme-orbit__button:focus-visible::after {
    opacity: 1;
    transform: translateY(0) scale(1);
}

html[data-theme="dark"] .global-theme-orbit {
    filter: none !important;
}

html[data-theme="dark"] .global-theme-orbit__button {
    border: 0 !important;
    border-color: transparent !important;
    color: #dfe3ff !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .global-theme-orbit__button:hover {
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .global-theme-orbit__sky {
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .global-theme-orbit__ring {
    border-color: rgba(154, 162, 255, .24) !important;
    transform: rotate(170deg) !important;
}

html[data-theme="dark"] .global-theme-orbit__sun {
    opacity: 0;
    transform: rotate(125deg) scale(.58);
    pointer-events: none;
    filter: saturate(.72);
}

html[data-theme="dark"] .global-theme-orbit__moon {
    opacity: 1;
    transform: rotate(0) scale(1);
    filter: drop-shadow(0 0 8px rgba(151, 159, 255, .52));
}

html[data-theme="dark"] .global-theme-orbit__stars {
    opacity: 1;
    transform: translateY(0) scale(1);
}

html[data-theme="dark"] .global-theme-orbit__clouds {
    opacity: 0;
    transform: translateX(14px);
}

html[data-theme="dark"] .global-theme-orbit__button::after {
    color: #dfe3ff;
    background: rgba(7, 8, 43, .98);
    border-color: rgba(121, 148, 255, .22);
}

html[data-theme="dark"] :where(.btn-primary, .buy-btn, .pd-buy-btn, .btn-beli, .co-btn, .celeb-btn.primary, .rv-btn-submit, .rp-btn-dl, .chat-send-btn) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

@keyframes globalOrbitSweep {
    0% { left: -34px; opacity: 0; }
    22% { opacity: .72; }
    72% { opacity: .42; }
    100% { left: 98px; opacity: 0; }
}

@media (max-width: 760px) {
    .global-theme-orbit {
        top: auto !important;
        right: auto !important;
        transform: none;
        transform-origin: center !important;
    }
    .global-theme-orbit__button::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .global-theme-orbit *,
    .global-theme-orbit *::before,
    .global-theme-orbit *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* Production-page contrast fixes discovered during cross-page QA. Keep these
   selectors scoped to dark mode so the established light UI stays unchanged. */
html[data-theme="dark"] body .app-container {
    background: transparent !important;
    color: var(--br-night-text-soft) !important;
}

html[data-theme="dark"] body .app-container :where(.p-title, .g-name, .r-title, h1, h2, h3) {
    color: var(--br-night-text) !important;
}

html[data-theme="dark"] body .app-crumb .active {
    color: var(--br-night-text) !important;
}

html[data-theme="dark"] body .brg-faq-page {
    color: var(--br-night-text-soft) !important;
    background:
        radial-gradient(ellipse 62% 34% at 10% 2%, rgba(15, 51, 195, .23), transparent 68%),
        radial-gradient(ellipse 48% 30% at 94% 8%, rgba(92, 82, 190, .18), transparent 70%),
        linear-gradient(160deg, #070620 0%, #0a092b 50%, #060621 100%) !important;
}

html[data-theme="dark"] body .brg-faq-page .brg-faq-hero {
    color: var(--br-night-text-soft) !important;
    border-color: var(--br-night-line) !important;
}

html[data-theme="dark"] body .brg-faq-page .brg-faq-kicker {
    color: var(--br-night-cyan) !important;
}

html[data-theme="dark"] body .brg-faq-page .brg-faq-title,
html[data-theme="dark"] body .brg-faq-page .brg-faq-section h2 {
    color: var(--br-night-text) !important;
}

html[data-theme="dark"] body .brg-faq-page :where(.brg-faq-lede, .brg-faq-section > p) {
    color: var(--br-night-text-soft) !important;
}

html[data-theme="dark"] body .brg-faq-page .brg-faq-item {
    color: var(--br-night-text-soft) !important;
    background: linear-gradient(145deg, rgba(15, 16, 63, .94), rgba(8, 8, 44, .96)) !important;
    border-color: var(--br-night-line-strong) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .035) !important;
}

html[data-theme="dark"] body .brg-faq-page .brg-faq-item summary {
    color: var(--br-night-text) !important;
}

html[data-theme="dark"] body .brg-faq-page .brg-faq-item :where(p, li) {
    color: var(--br-night-text-soft) !important;
}

html[data-theme="dark"] body .brg-faq-page .brg-faq-item strong {
    color: var(--br-night-cyan) !important;
}

html[data-theme="dark"] body .gp-card .gp-btn {
    color: #030320 !important;
    background: linear-gradient(135deg, #7994ff, #5f6cff) !important;
    border-color: rgba(207, 218, 255, .78) !important;
    box-shadow: 0 8px 22px rgba(31, 73, 230, .19) !important;
}

html[data-theme="dark"] body .bi-channel-message strong,
html[data-theme="dark"] body .bi-channel-mark {
    color: var(--br-night-cyan) !important;
}

html[data-theme="dark"] body .av-more {
    color: #161239 !important;
    -webkit-text-fill-color: #161239 !important;
}

html[data-theme="dark"] body .pd-talk {
    color: var(--br-night-text-soft) !important;
    background: linear-gradient(135deg, rgba(16, 18, 66, .96), rgba(8, 8, 46, .96)) !important;
    border-color: var(--br-night-line) !important;
}

html[data-theme="dark"] body .pd-talk small {
    color: var(--br-night-text-soft) !important;
}

html[data-theme="dark"] body .page-btn.active {
    color: #030320 !important;
    -webkit-text-fill-color: #030320 !important;
}

html[data-theme="dark"] body .step-circle.pending {
    color: var(--br-night-text-soft) !important;
    background: #13144a !important;
    border-color: var(--br-night-line-strong) !important;
}

html[data-theme="dark"] body .card-body a {
    color: var(--br-night-cyan) !important;
}

html[data-theme="dark"] body .card-body .required,
html[data-theme="dark"] body .card-body [aria-hidden="true"]:where(.required, .text-danger) {
    color: var(--br-night-danger) !important;
}

html[data-theme="dark"] body .card-body span[style*="--error"] {
    color: var(--br-night-danger) !important;
}

html[data-theme="dark"] body .google-signin-btn,
html[data-theme="dark"] body .google-signin-btn span {
    color: #202124 !important;
    -webkit-text-fill-color: #202124 !important;
}

html[data-theme="dark"] body :where(.text-green-600, .text-green-700, .text-green-800) {
    color: #75e6ad !important;
}

html[data-theme="dark"] body :where(.text-blue-500, .text-blue-600, .text-blue-700) {
    color: var(--br-night-blue) !important;
}

html[data-theme="dark"] body .feat-text {
    color: var(--br-night-text-soft) !important;
}

html[data-theme="dark"] body .disc-badge {
    color: #ffb0c0 !important;
    background: linear-gradient(135deg, rgba(255, 130, 152, .18), rgba(255, 217, 121, .13)) !important;
    border-color: rgba(255, 157, 204, .32) !important;
}

html[data-theme="dark"] body .app-container .hero-layout > div:last-child {
    color: var(--br-night-text-soft) !important;
    background: linear-gradient(145deg, rgba(15, 16, 63, .94), rgba(8, 8, 44, .96)) !important;
    border-color: var(--br-night-line-strong) !important;
    box-shadow: 0 22px 58px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .035) !important;
}

/* Customer reviews: never combine the dark-theme text palette with the
   original translucent white cards. */
html[data-theme="dark"] body .review-card {
    color: var(--br-night-text-soft) !important;
    background:
        radial-gradient(circle at 100% 0, rgba(121, 148, 255, .11), transparent 11rem),
        linear-gradient(145deg, rgba(16, 17, 65, .98), rgba(7, 7, 43, .98)) !important;
    border-color: rgba(121, 148, 255, .22) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

html[data-theme="dark"] body .review-card .review-name {
    color: var(--br-night-text) !important;
}

html[data-theme="dark"] body .review-card .review-comment {
    color: #cecff2 !important;
}

html[data-theme="dark"] body .review-card .review-verified {
    color: var(--br-night-cyan) !important;
}

html[data-theme="dark"] body .review-card .review-foot {
    color: #9d9ecc !important;
}

html[data-theme="dark"] body .review-card .review-score strong {
    color: var(--br-night-yellow) !important;
}

html[data-theme="dark"] body .review-card .review-avatar {
    color: #060520 !important;
    border-color: rgba(203, 213, 255, .82) !important;
    background: linear-gradient(145deg, #7994ff, #665bff) !important;
    box-shadow: 0 10px 24px rgba(41, 75, 228, .2) !important;
}

/* Product detail: coordinated navy/cyan surfaces replace the inherited pale
   paper gradient, while the warm price accent preserves visual hierarchy. */
html[data-theme="dark"] body .app-container .img-card {
    color: var(--br-night-text-soft) !important;
    background:
        radial-gradient(circle at 100% 100%, rgba(255, 217, 121, .09), transparent 13rem),
        linear-gradient(145deg, #101244, #07072d) !important;
    border-color: rgba(121, 148, 255, .42) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 217, 121, .08), inset 0 1px rgba(255, 255, 255, .05) !important;
}

html[data-theme="dark"] body .app-container .img-box {
    background: linear-gradient(145deg, #0c0d3f, #050526) !important;
    border-color: rgba(121, 148, 255, .2) !important;
}

html[data-theme="dark"] body .app-container .gallery-thumb {
    background: #090932 !important;
    border-color: rgba(121, 148, 255, .18) !important;
}

html[data-theme="dark"] body .app-container .gallery-thumb.active {
    border-color: var(--br-night-cyan) !important;
    box-shadow: 0 0 0 2px rgba(121, 148, 255, .13), 0 8px 18px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] body .app-container .price-wrap {
    color: var(--br-night-text-soft) !important;
    background:
        radial-gradient(circle at 92% 16%, rgba(255, 217, 121, .13), transparent 10rem),
        linear-gradient(135deg, #10134a, #090a34) !important;
    border-color: rgba(121, 148, 255, .3) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .27), inset 0 1px rgba(255, 255, 255, .045) !important;
}

html[data-theme="dark"] body .app-container .price-current {
    color: var(--br-night-yellow) !important;
    -webkit-text-fill-color: var(--br-night-yellow) !important;
    text-shadow: 0 4px 20px rgba(255, 217, 121, .13) !important;
}

/* Article index: the page's own late light gradient and frosted white controls
   need full-background overrides, not color-only token substitutions. */
html[data-theme="dark"] body .modern-section {
    color: var(--br-night-text-soft) !important;
    background:
        radial-gradient(ellipse 66% 42% at 7% 2%, rgba(11, 45, 182, .24), transparent 68%),
        radial-gradient(ellipse 50% 38% at 96% 9%, rgba(84, 73, 183, .18), transparent 70%),
        radial-gradient(ellipse 44% 34% at 20% 96%, rgba(131, 54, 123, .12), transparent 72%),
        linear-gradient(158deg, #06051e 0%, #070729 48%, #070620 100%) !important;
}

html[data-theme="dark"] body .modern-section .header-content::before {
    color: var(--br-night-cyan) !important;
    background: rgba(121, 148, 255, .08) !important;
    border-color: rgba(121, 148, 255, .28) !important;
}

html[data-theme="dark"] body .modern-section .header-content h1 {
    color: var(--br-night-text) !important;
}

html[data-theme="dark"] body .modern-section .header-content p {
    color: var(--br-night-text-soft) !important;
}

html[data-theme="dark"] body .modern-section .article-search-form,
html[data-theme="dark"] body .modern-section .category-pills {
    color: var(--br-night-text-soft) !important;
    background: rgba(9, 10, 46, .9) !important;
    border-color: var(--br-night-line-strong) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .035) !important;
}

html[data-theme="dark"] body .modern-section .article-search-form button {
    color: #060520 !important;
    background: linear-gradient(135deg, var(--br-night-cyan), #6966ff) !important;
}

html[data-theme="dark"] body .modern-section .modern-card {
    background: linear-gradient(145deg, rgba(15, 16, 63, .97), rgba(7, 7, 43, .98)) !important;
    border-color: var(--br-night-line-strong) !important;
}

/* Homepage hero dark surface and readable typography. */
html[data-theme="dark"] #sorotan,
html[data-theme="dark"] #sorotan .stage-grid,
html[data-theme="dark"] #cara-order,
html[data-theme="dark"] #kategori,
html[data-theme="dark"] #produk,
html[data-theme="dark"] #grup-patungan,
html[data-theme="dark"] #live {
    color: var(--br-night-text-soft) !important;
    background: linear-gradient(158deg, #06051e 0%, #070729 50%, #0a0a36 100%) !important;
}
html[data-theme="dark"] #sorotan .stage-patungan-label,
html[data-theme="dark"] #sorotan .eyebrow { color: var(--br-night-cyan) !important; background: rgba(11, 11, 58, .88) !important; border-color: var(--br-night-line-strong) !important; }
html[data-theme="dark"] #sorotan .hero-title,
html[data-theme="dark"] #sorotan .typed-prefix { color: var(--br-night-text) !important; -webkit-text-fill-color: var(--br-night-text) !important; }
html[data-theme="dark"] #sorotan .typed-highlight { color: var(--br-night-cyan) !important; -webkit-text-fill-color: var(--br-night-cyan) !important; }
html[data-theme="dark"] #sorotan .stage-lede { color: var(--br-night-text-soft) !important; -webkit-text-fill-color: var(--br-night-text-soft) !important; }
html[data-theme="dark"] #sorotan .btn-white { color: var(--br-night-text) !important; background: var(--br-night-card-solid) !important; border-color: var(--br-night-line-strong) !important; }
html[data-theme="dark"] #sorotan .proof { color: var(--br-night-text-soft) !important; background: var(--br-night-card) !important; border-color: var(--br-night-line-strong) !important; }
html[data-theme="dark"] #sorotan .proof-copy,
html[data-theme="dark"] #sorotan .proof-copy strong,
html[data-theme="dark"] #sorotan .float-card b { color: var(--br-night-text) !important; }
html[data-theme="dark"] #sorotan .float-card span { color: var(--br-night-muted) !important; }
html[data-theme="dark"] #cara-order .section-head .title,
html[data-theme="dark"] #kategori .section-head .title,
html[data-theme="dark"] #produk .section-head .title,
html[data-theme="dark"] #grup-patungan .section-head .title,
html[data-theme="dark"] #live .section-head .title { color: var(--br-night-text) !important; }
html[data-theme="dark"] #cara-order .section-head .desc,
html[data-theme="dark"] #kategori .section-head .desc,
html[data-theme="dark"] #produk .section-head .desc,
html[data-theme="dark"] #grup-patungan .section-head .desc,
html[data-theme="dark"] #live .section-head .desc { color: var(--br-night-text-soft) !important; }


html[data-theme="dark"] body .modern-section .modern-card .card-body,
html[data-theme="dark"] body .modern-section .modern-card .card-footer {
    background: transparent !important;
}

/* Final cascade: all homepage surfaces and text remain readable in dark mode. */
html[data-theme="dark"] body:has(#sorotan) .scene,
html[data-theme="dark"] body:has(#sorotan) .scene--light,
html[data-theme="dark"] body:has(#sorotan) .scene--mist,
html[data-theme="dark"] body:has(#sorotan) .stage {
    color: var(--br-night-text-soft) !important;
    /* One continuous dark mesh — no hard black hero rectangle. */
    background:
        radial-gradient(62rem 38rem at -8% -10%, rgba(25, 184, 224, .34), transparent 62%),
        radial-gradient(48rem 34rem at 108% 6%, rgba(120, 92, 255, .34), transparent 64%),
        radial-gradient(42rem 30rem at 52% 105%, rgba(255, 207, 92, .16), transparent 67%),
        linear-gradient(145deg, #091945 0%, #102a63 47%, #25165b 100%) !important;
}

/* The hero grid is a layout wrapper, not a visual card. A previous dark
   rule painted it near-black, creating the rectangular box in the hero. */
html[data-theme="dark"] #sorotan .stage-grid {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
html[data-theme="dark"] #sorotan .stage-copy {
    background: transparent !important;
}
html[data-theme="dark"] #sorotan .aurora { opacity: .96 !important; }
html[data-theme="dark"] #sorotan .aurora i:nth-child(1) { background:#32d5f4 !important; opacity:.42 !important; }
html[data-theme="dark"] #sorotan .aurora i:nth-child(2) { background:#8870ff !important; opacity:.34 !important; }
html[data-theme="dark"] #sorotan .aurora i:nth-child(3) { background:#ffd166 !important; opacity:.18 !important; }
html[data-theme="dark"] #sorotan .stage-patungan-label { background:rgba(19,57,111,.56)!important; }

/* Primary signup CTA needs a solid surface in the dark hero; the inherited
   translucent white button made its dark label disappear into the mesh. */
html[data-theme="dark"] #sorotan .stage-actions .btn.btn-white {
    color:#061a33!important;
    -webkit-text-fill-color:#061a33!important;
    background:linear-gradient(135deg,#72ecff 0%,#32cdf5 52%,#ffcF66 132%)!important;
    border:1px solid rgba(220,251,255,.9)!important;
    box-shadow:0 14px 30px rgba(26,200,242,.30),inset 0 1px 0 rgba(255,255,255,.58)!important;
}
html[data-theme="dark"] #sorotan .stage-actions .btn.btn-white i {
    color:#06436a!important;
    -webkit-text-fill-color:#06436a!important;
}
html[data-theme="dark"] #sorotan .stage-actions .btn.btn-white:hover,
html[data-theme="dark"] #sorotan .stage-actions .btn.btn-white:focus-visible {
    color:#04162c!important;
    background:linear-gradient(135deg,#a6f6ff 0%,#4edaf8 48%,#ffda82 130%)!important;
    border-color:#fff!important;
    box-shadow:0 18px 38px rgba(26,200,242,.42),0 0 0 4px rgba(114,236,255,.18)!important;
}

html[data-theme="dark"] body:has(#sorotan) .step,
html[data-theme="dark"] body:has(#sorotan) .assurance-item,
html[data-theme="dark"] body:has(#sorotan) .cat-card,
html[data-theme="dark"] body:has(#sorotan) .product-card,
html[data-theme="dark"] body:has(#sorotan) .gp-card,
html[data-theme="dark"] body:has(#sorotan) .live-box,
html[data-theme="dark"] body:has(#sorotan) .social-connect-card,
html[data-theme="dark"] body:has(#sorotan) .proof,
html[data-theme="dark"] body:has(#sorotan) .float-card {
    color: var(--br-night-text-soft) !important;
    background: linear-gradient(145deg, rgba(14, 15, 64, .98), rgba(7, 7, 44, .98)) !important;
    border-color: var(--br-night-line-strong) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28) !important;
}
html[data-theme="dark"] body:has(#sorotan) .step h3,
html[data-theme="dark"] body:has(#sorotan) .assurance-item b,
html[data-theme="dark"] body:has(#sorotan) .cat-name,
html[data-theme="dark"] body:has(#sorotan) .product-name,
html[data-theme="dark"] body:has(#sorotan) .gp-name,
html[data-theme="dark"] body:has(#sorotan) .live-head,
html[data-theme="dark"] body:has(#sorotan) .social-connect-card h3,
html[data-theme="dark"] body:has(#sorotan) .float-card b {
    color: var(--br-night-text) !important;
    -webkit-text-fill-color: var(--br-night-text) !important;
}
html[data-theme="dark"] body:has(#sorotan) .step p,
html[data-theme="dark"] body:has(#sorotan) .assurance-item span,
html[data-theme="dark"] body:has(#sorotan) .cat-count,
html[data-theme="dark"] body:has(#sorotan) .product-meta,
html[data-theme="dark"] body:has(#sorotan) .gp-cat,
html[data-theme="dark"] body:has(#sorotan) .gp-member,
html[data-theme="dark"] body:has(#sorotan) .gp-date,
html[data-theme="dark"] body:has(#sorotan) .live-box .desc,
html[data-theme="dark"] body:has(#sorotan) .social-connect-card p,
html[data-theme="dark"] body:has(#sorotan) .float-card span {
    color: var(--br-night-text-soft) !important;
    -webkit-text-fill-color: var(--br-night-text-soft) !important;
}
html[data-theme="dark"] body:has(#sorotan) .digital-category-heading,
html[data-theme="dark"] body:has(#sorotan) .section-head .hl,
html[data-theme="dark"] body:has(#sorotan) .group-subheading {
    color: var(--br-night-cyan) !important;
    -webkit-text-fill-color: var(--br-night-cyan) !important;
}
html[data-theme="dark"] body:has(#sorotan) .cat-icon,
html[data-theme="dark"] body:has(#sorotan) .float-icon {
    background: rgba(121, 148, 255, .12) !important;
    color: var(--br-night-cyan) !important;
}

/* Transparent day/night control: sun rises on the left, moon sets on the right. */
.global-theme-orbit,
.global-theme-orbit__button,
.global-theme-orbit__sky {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.global-theme-orbit__button:focus-visible { outline: 2px solid rgba(121, 148, 255, .72) !important; outline-offset: 5px !important; }
.global-theme-orbit__sun { left: 4px !important; right: auto !important; }
.global-theme-orbit__moon { right: 4px !important; left: auto !important; }
.global-theme-orbit.to-light .global-theme-orbit__sun { animation: brSunriseLeft .82s cubic-bezier(.16, .84, .22, 1) both; }
.global-theme-orbit.to-light .global-theme-orbit__moon { animation: brMoonsetRight .68s cubic-bezier(.55, .08, .72, .24) both; }
.global-theme-orbit.to-dark .global-theme-orbit__sun { animation: brSunsetLeft .68s cubic-bezier(.55, .08, .72, .24) both; }
.global-theme-orbit.to-dark .global-theme-orbit__moon { animation: brMoonriseRight .82s cubic-bezier(.16, .84, .22, 1) both; }
@keyframes brSunriseLeft { 0% { opacity: 0; transform: translate(-22px, 14px) scale(.35); filter: blur(3px) saturate(.7); } 58% { opacity: 1; transform: translate(3px, -3px) scale(1.1); filter: blur(0) saturate(1.15); } 100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0) saturate(1); } }
@keyframes brSunsetLeft { 0% { opacity: 1; transform: translateX(0) scale(1); } 100% { opacity: .22; transform: translate(25px, 13px) scale(.5); filter: blur(2px) saturate(.7); } }
@keyframes brMoonriseRight { 0% { opacity: .18; transform: translate(25px, 13px) scale(.5); filter: blur(2px); } 60% { opacity: 1; transform: translate(-2px, -3px) scale(1.08); filter: blur(0); } 100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } }
@keyframes brMoonsetRight { 0% { opacity: 1; transform: translateX(0) scale(1); } 100% { opacity: .18; transform: translate(25px, 13px) scale(.5); filter: blur(2px); } }
html[data-theme="dark"] body:has(#sorotan) .global-theme-orbit__button::after,
html[data-theme="dark"] body:has(#sorotan) .global-theme-orbit__button:hover::after,
html[data-theme="dark"] body:has(#sorotan) .global-theme-orbit__button:focus-visible::after {
    color: var(--br-night-text) !important;
    background: rgba(7, 8, 43, .98) !important;
    border-color: transparent !important;
}

/* White CTAs keep a readable dark ink in dark mode. */
html[data-theme="dark"] body :where(.btn-white, .btn-light, .button-white, .btn-outline-light) {
    color: #070a32 !important;
    -webkit-text-fill-color: #070a32 !important;
    background: #f3f4ff !important;
    border-color: rgba(137, 151, 255, .5) !important;
}
html[data-theme="dark"] body :where(.btn-white, .btn-light, .button-white, .btn-outline-light) i,
html[data-theme="dark"] body :where(.btn-white, .btn-light, .button-white, .btn-outline-light) svg {
    color: #042895 !important;
    fill: currentColor;
}
html[data-theme="dark"] body :where(.btn-white, .btn-light, .button-white, .btn-outline-light):hover {
    color: #050824 !important;
    background: #dfe4ff !important;
    border-color: var(--br-night-cyan) !important;
}
html[data-theme="dark"] body .cta-box .btn-white,
html[data-theme="dark"] body .cta-box .btn-white i {
    color: #070a32 !important;
    -webkit-text-fill-color: #070a32 !important;
}
@media (prefers-reduced-motion: reduce) { .global-theme-orbit.to-light .global-theme-orbit__sun, .global-theme-orbit.to-light .global-theme-orbit__moon, .global-theme-orbit.to-dark .global-theme-orbit__sun, .global-theme-orbit.to-dark .global-theme-orbit__moon { animation: none !important; } }

/* Full-width transparent horizon: sun at left, moon at right. */
.global-theme-orbit {
    left: 0 !important;
    right: auto !important;
    top: calc(var(--br-header-height, var(--home-header-height, 62px)) + 10px) !important;
    width: 100vw !important;
    height: 44px !important;
    transform: none !important;
    filter: none !important;
}
.global-theme-orbit__button {
    width: 100vw !important;
    height: 44px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.global-theme-orbit__sky { width: 100vw !important; height: 44px !important; }
.global-theme-orbit__sun { left: max(16px, env(safe-area-inset-left)) !important; }
.global-theme-orbit__moon {
    right: max(16px, env(safe-area-inset-right)) !important;
    width: 32px !important;
    height: 32px !important;
    background: #dfe3ff !important;
    box-shadow: 0 0 14px rgba(151, 159, 255, .42) !important;
    -webkit-mask: radial-gradient(circle at 66% 34%, transparent 0 48%, #000 50% 100%) !important;
    mask: radial-gradient(circle at 66% 34%, transparent 0 48%, #000 50% 100%) !important;
}
.global-theme-orbit__moon i { display: none !important; }
.global-theme-orbit__button::after { display: none !important; }
@media (max-width: 760px) {
    .global-theme-orbit { top: calc(var(--br-header-height, var(--home-header-height, 62px)) + 8px) !important; width: 100vw !important; }
    .global-theme-orbit__button, .global-theme-orbit__sky { width: 100vw !important; }
    .global-theme-orbit__sun { left: max(10px, env(safe-area-inset-left)) !important; }
    .global-theme-orbit__moon { right: max(10px, env(safe-area-inset-right)) !important; }
}

/* Final homepage control contract: it belongs in the navbar's right actions,
   never as a full-width horizon over the hero. */
nav.navbar#navbar .nav-actions .global-theme-orbit {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 0 0 4px !important;
    transform: none !important;
    filter: drop-shadow(0 4px 8px rgba(6, 13, 72, .12)) !important;
}
nav.navbar#navbar .nav-actions .global-theme-orbit__button,
nav.navbar#navbar .nav-actions .global-theme-orbit__sky {
    width: 42px !important;
    height: 42px !important;
}
nav.navbar#navbar .nav-actions .global-theme-orbit__sun {
    left: 6px !important;
    right: auto !important;
    opacity: 1 !important;
    transform: rotate(0) scale(1) !important;
}
nav.navbar#navbar .nav-actions .global-theme-orbit__moon {
    left: 6px !important;
    right: auto !important;
    opacity: 0 !important;
    transform: rotate(-65deg) scale(.58) !important;
}
html[data-theme="dark"] nav.navbar#navbar .nav-actions .global-theme-orbit__sun {
    opacity: 0 !important;
    transform: rotate(125deg) scale(.58) !important;
}
html[data-theme="dark"] nav.navbar#navbar .nav-actions .global-theme-orbit__moon {
    opacity: 1 !important;
    transform: rotate(0) scale(1) !important;
}
@media (max-width: 760px) {
    nav.navbar#navbar .nav-actions .global-theme-orbit,
    nav.navbar#navbar .nav-actions .global-theme-orbit__button,
    nav.navbar#navbar .nav-actions .global-theme-orbit__sky { width:42px !important; height:42px !important; }
}

/* Dedicated dark mesh for the signed-in dashboard. */
html[data-theme="dark"] body:has(.unified-hero-section),
html[data-theme="dark"] body:has(.unified-hero-section) :where(main.main-content, .page-content, .main-wrapper) {
    color: var(--br-night-text-soft) !important;
    background:
        radial-gradient(ellipse 76% 58% at 8% 2%, rgba(22, 66, 220, .20), transparent 62%),
        radial-gradient(ellipse 58% 46% at 94% 10%, rgba(83, 91, 214, .18), transparent 68%),
        radial-gradient(ellipse 54% 42% at 52% 92%, rgba(17, 159, 133, .12), transparent 72%),
        linear-gradient(160deg, #05041e 0%, #06062b 48%, #090a31 100%) !important;
}
html[data-theme="dark"] body:has(.unified-hero-section) .unified-hero-section {
    background:
        radial-gradient(circle at 17% 22%, rgba(97, 128, 255, .23), transparent 25%),
        radial-gradient(circle at 83% 13%, rgba(122, 114, 255, .20), transparent 29%),
        linear-gradient(135deg, #05062b 0%, #090f52 48%, #1e144d 100%) !important;
}
html[data-theme="dark"] body:has(.unified-hero-section) .unified-blurred-bg { opacity: .12 !important; mix-blend-mode: screen; }
html[data-theme="dark"] body:has(.unified-hero-section) .section { background: transparent !important; }
html[data-theme="dark"] body:has(.unified-hero-section) :where(.ppob-stats-card, .category-card, .product-card, .testimonial-card, .order-card, .section-card) {
    color: var(--br-night-text-soft) !important;
    background: linear-gradient(145deg, rgba(13, 14, 62, .96), rgba(8, 7, 41, .98)) !important;
    border-color: var(--br-night-line-strong) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28) !important;
}
html[data-theme="dark"] body:has(.unified-hero-section) :where(.stat-number, .section-title, .category-name, .product-title, .product-name, .card-title) {
    color: var(--br-night-text) !important;
    -webkit-text-fill-color: var(--br-night-text) !important;
}
html[data-theme="dark"] body:has(.unified-hero-section) :where(.stat-label, .section-desc, .category-count, .product-desc, .product-meta, .text-muted) {
    color: var(--br-night-text-soft) !important;
    -webkit-text-fill-color: var(--br-night-text-soft) !important;
}
html[data-theme="dark"] body:has(.unified-hero-section) .stat-item.divider { border-color: var(--br-night-line) !important; }
html[data-theme="dark"] body:has(.unified-hero-section) .btn-hero-glow { color: #070a32 !important; background: #f3f4ff !important; }
html[data-theme="dark"] body:has(.unified-hero-section) .btn-hero-outline { color: var(--br-night-text) !important; background: rgba(121, 148, 255, .09) !important; border-color: var(--br-night-line-strong) !important; }

/* User dashboard section and testimonial wall: remove every remaining light canvas. */
html[data-theme="dark"] body:has(.unified-hero-section) #categories,
html[data-theme="dark"] body:has(.unified-hero-section) #live-transactions,
html[data-theme="dark"] body:has(.unified-hero-section) #testimonials,
html[data-theme="dark"] body:has(.unified-hero-section) .section {
    background:
        radial-gradient(circle at 9% 12%, rgba(59, 96, 241, .10), transparent 23%),
        radial-gradient(circle at 92% 74%, rgba(117, 76, 224, .10), transparent 26%),
        linear-gradient(160deg, #060523 0%, #07072e 54%, #09082a 100%) !important;
}
html[data-theme="dark"] body:has(.unified-hero-section) #testimonials::before {
    border-color: rgba(121, 148, 255, .16) !important;
    opacity: .5 !important;
}
html[data-theme="dark"] body:has(.unified-hero-section) .testi-card {
    color: var(--br-night-text-soft) !important;
    background: linear-gradient(145deg, #121344 0%, #0a0a38 100%) !important;
    border-color: var(--br-night-line-strong) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .32) !important;
}
html[data-theme="dark"] body:has(.unified-hero-section) .testi-card::before { border-color: rgba(121, 148, 255, .22) !important; }
html[data-theme="dark"] body:has(.unified-hero-section) .testi-user { border-color: var(--br-night-line-strong) !important; }
html[data-theme="dark"] body:has(.unified-hero-section) .testi-name { color: var(--br-night-text) !important; -webkit-text-fill-color: var(--br-night-text) !important; }
html[data-theme="dark"] body:has(.unified-hero-section) .testi-quote { color: var(--br-night-text-soft) !important; -webkit-text-fill-color: var(--br-night-text-soft) !important; }
html[data-theme="dark"] body:has(.unified-hero-section) .testi-live { color: var(--br-night-green) !important; }
html[data-theme="dark"] body:has(.unified-hero-section) .testi-quote-icon { color: rgba(121, 148, 255, .11) !important; }
html[data-theme="dark"] body:has(.unified-hero-section) .digital-category-heading { color: var(--br-night-cyan) !important; }

/* Orders list and order detail: explicit dark palette for inline legacy colors. */
html[data-theme="dark"] .orders-page {
    color: var(--br-night-text-soft) !important;
    background:
        radial-gradient(circle at 8% 4%, rgba(28, 73, 241, .14), transparent 25%),
        radial-gradient(circle at 94% 18%, rgba(99, 102, 241, .12), transparent 28%),
        linear-gradient(160deg, #060523 0%, #07072e 55%, #060622 100%) !important;
}
html[data-theme="dark"] .orders-page > .container > h1,
html[data-theme="dark"] .orders-page .order-list-card strong,
html[data-theme="dark"] .orders-page .order-list-card [style*="color: #211d3c"],
html[data-theme="dark"] .orders-page .order-list-card [style*="color: #140e2b"] {
    color: var(--br-night-text) !important;
    -webkit-text-fill-color: var(--br-night-text) !important;
}
html[data-theme="dark"] .orders-page :where(.card, .card-body, .order-list-card) {
    color: var(--br-night-text-soft) !important;
    background: linear-gradient(145deg, #101043 0%, #090934 100%) !important;
    border-color: var(--br-night-line-strong) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] .orders-page [style*="color: #67638c"],
html[data-theme="dark"] .orders-page [style*="color: #363256"],
html[data-theme="dark"] .orders-page [style*="color: var(--gray-500)"],
html[data-theme="dark"] .orders-page [style*="color: var(--gray-700)"] {
    color: var(--br-night-text-soft) !important;
    -webkit-text-fill-color: var(--br-night-text-soft) !important;
}
html[data-theme="dark"] .orders-page [style*="border-bottom"] { border-color: var(--br-night-line) !important; }
html[data-theme="dark"] .orders-page .btn-outline {
    color: var(--br-night-cyan) !important;
    background: rgba(121, 148, 255, .07) !important;
    border-color: var(--br-night-line-strong) !important;
}
html[data-theme="dark"] .orders-page span[style*="#dcfce7"] { color: #a8f0c7 !important; background: rgba(39, 145, 91, .24) !important; }
html[data-theme="dark"] .orders-page span[style*="#fef9c3"] { color: #ffe497 !important; background: rgba(166, 118, 18, .25) !important; }
html[data-theme="dark"] .orders-page span[style*="#dedaff"] { color: #9ba2ff !important; background: rgba(27, 29, 171, .25) !important; }
html[data-theme="dark"] .orders-page span[style*="#fee2e2"] { color: #ffb1bd !important; background: rgba(167, 49, 68, .25) !important; }
html[data-theme="dark"] .orders-page span[style*="#f1f1f9"] { color: var(--br-night-text-soft) !important; background: rgba(115, 115, 165, .20) !important; }

html[data-theme="dark"] #orderModal.modal-overlay { background: rgba(2, 2, 15, .82) !important; }
html[data-theme="dark"] #orderModal .modal,
html[data-theme="dark"] #orderModal .modal-body { color: var(--br-night-text-soft) !important; background: #08082e !important; border-color: var(--br-night-line-strong) !important; }
html[data-theme="dark"] #orderModal .order-detail-header {
    color: var(--br-night-text) !important;
    background: linear-gradient(135deg, #0e1047 0%, #090935 62%, #17114d 100%) !important;
    border-color: var(--br-night-line) !important;
}
html[data-theme="dark"] #orderModal .modal-title,
html[data-theme="dark"] #orderModal .order-detail-meta strong,
html[data-theme="dark"] #orderModal .order-detail-meta span:last-child,
html[data-theme="dark"] #orderModal .order-item-heading,
html[data-theme="dark"] #orderModal .order-item-panel strong {
    color: var(--br-night-text) !important;
    -webkit-text-fill-color: var(--br-night-text) !important;
}
html[data-theme="dark"] #orderModal .modal-close { color: var(--br-night-text) !important; background: rgba(121, 148, 255, .08) !important; border-color: var(--br-night-line-strong) !important; }
html[data-theme="dark"] #orderModal .order-detail-meta,
html[data-theme="dark"] #orderModal .order-item-panel > .d-flex:first-child { border-color: var(--br-night-line-strong) !important; }
html[data-theme="dark"] #orderModal .order-detail-meta span:first-child,
html[data-theme="dark"] #orderModal .order-item-panel p,
html[data-theme="dark"] #orderModal .order-item-panel p strong { color: var(--br-night-text-soft) !important; -webkit-text-fill-color: var(--br-night-text-soft) !important; }
html[data-theme="dark"] #orderModal .order-item-panel { color: var(--br-night-text-soft) !important; background: transparent !important; }
html[data-theme="dark"] #orderModal .access-panel {
    color: var(--br-night-text-soft) !important;
    background: linear-gradient(145deg, rgba(9, 34, 71, .96), rgba(7, 15, 53, .98)) !important;
    border-color: rgba(100, 228, 178, .42) !important;
}
html[data-theme="dark"] #orderModal .access-panel > p { color: #8cf0c1 !important; -webkit-text-fill-color: #8cf0c1 !important; }
html[data-theme="dark"] #orderModal .access-values {
    color: var(--br-night-text) !important;
    background: rgba(2, 5, 30, .70) !important;
    border-color: rgba(100, 228, 178, .28) !important;
}
html[data-theme="dark"] #orderModal .access-values :where(div, span, strong, a, code) { color: var(--br-night-text) !important; -webkit-text-fill-color: var(--br-night-text) !important; }
html[data-theme="dark"] #orderModal .access-values a { color: var(--br-night-cyan) !important; -webkit-text-fill-color: var(--br-night-cyan) !important; }
html[data-theme="dark"] #orderModal .duration-box,
html[data-theme="dark"] #orderModal .access-dates { color: var(--br-night-text-soft) !important; background: #090a34 !important; border-color: var(--br-night-line-strong) !important; }
html[data-theme="dark"] #orderModal .access-dates strong,
html[data-theme="dark"] #orderModal .dur-value { color: var(--br-night-text) !important; }

/* About page: purpose-built night editorial palette. */
html[data-theme="dark"] .about-page {
    --ink: var(--br-night-text) !important;
    --muted: var(--br-night-text-soft) !important;
    --blue: var(--br-night-cyan) !important;
    --teal: #76e8d0 !important;
    --paper: #07072a !important;
    --line: var(--br-night-line-strong) !important;
    color: var(--br-night-text-soft) !important;
    background:
        radial-gradient(ellipse 72% 52% at 6% 4%, rgba(18, 62, 217, .17), transparent 62%),
        radial-gradient(ellipse 56% 44% at 94% 18%, rgba(86, 88, 210, .14), transparent 66%),
        linear-gradient(160deg, #04041e 0%, #07072b 50%, #070623 100%) !important;
}
html[data-theme="dark"] .about-hero {
    background:
        radial-gradient(circle at 15% 18%, rgba(93, 127, 255, .18), transparent 27%),
        radial-gradient(circle at 83% 14%, rgba(132, 112, 255, .18), transparent 29%),
        linear-gradient(135deg, #05062a 0%, #090f54 50%, #19124b 100%) !important;
}
html[data-theme="dark"] .about-section--white,
html[data-theme="dark"] .about-section--paper,
html[data-theme="dark"] .about-section--blue { background: transparent !important; }
html[data-theme="dark"] .about-heading,
html[data-theme="dark"] .about-copy strong,
html[data-theme="dark"] .about-value h3,
html[data-theme="dark"] .about-step h3,
html[data-theme="dark"] .about-mini-card h3,
html[data-theme="dark"] .about-mission h3,
html[data-theme="dark"] .about-six h3 { color: var(--br-night-text) !important; -webkit-text-fill-color: var(--br-night-text) !important; }
html[data-theme="dark"] .about-copy,
html[data-theme="dark"] .about-value p,
html[data-theme="dark"] .about-step p,
html[data-theme="dark"] .about-list li,
html[data-theme="dark"] .about-mini-card p,
html[data-theme="dark"] .about-mission ul,
html[data-theme="dark"] .about-six p { color: var(--br-night-text-soft) !important; -webkit-text-fill-color: var(--br-night-text-soft) !important; }
html[data-theme="dark"] :where(.about-note, .about-disclosure) {
    color: var(--br-night-text-soft) !important;
    background: linear-gradient(145deg, #0b1944 0%, #080f39 100%) !important;
    border-color: rgba(118,232,208,.42) !important;
    box-shadow: 8px 8px 0 rgba(247, 201, 72, .46) !important;
}
html[data-theme="dark"] .about-note p,
html[data-theme="dark"] .about-disclosure .about-heading,
html[data-theme="dark"] .about-note small { color: var(--br-night-text) !important; }
html[data-theme="dark"] :where(.about-quote, .about-value, .about-mini-card, .about-mission, .about-six article) {
    color: var(--br-night-text-soft) !important;
    background: linear-gradient(145deg, #101246 0%, #090935 100%) !important;
    border-color: var(--br-night-line-strong) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] .about-quote { border-left-color: var(--br-night-yellow) !important; color: var(--br-night-text) !important; }
html[data-theme="dark"] .about-step { border-color: var(--br-night-line-strong) !important; }
html[data-theme="dark"] .about-flow-ring { border-color: rgba(118,232,208,.48) !important; }
html[data-theme="dark"] .about-value-icon,
html[data-theme="dark"] .about-six h3 span { color: #070a32 !important; border-color: rgba(121, 148, 255, .38) !important; }
html[data-theme="dark"] .about-closing { background: linear-gradient(135deg, #090c4c, #071c63 54%, #1e1553) !important; }
html[data-theme="dark"] .about-button { color: #070a32 !important; background: #f3f4ff !important; border-color: #f3f4ff !important; }

/* Cara Order: dark journey, steps, support panels, and CTA. */
html[data-theme="dark"] .order-page {
    color: var(--br-night-text-soft) !important;
    background:
        radial-gradient(ellipse 70% 50% at 7% 2%, rgba(20, 66, 234, .16), transparent 62%),
        radial-gradient(ellipse 58% 46% at 95% 15%, rgba(136, 85, 224, .14), transparent 67%),
        linear-gradient(160deg, #04041e 0%, #07072c 50%, #070623 100%) !important;
}
html[data-theme="dark"] .order-hero {
    background:
        radial-gradient(circle at 16% 18%, rgba(102, 133, 255, .17), transparent 25%),
        radial-gradient(circle at 85% 14%, rgba(133,111,255,.18), transparent 28%),
        linear-gradient(135deg, #05052c 0%, #081257 48%, #1f1652 100%) !important;
}
html[data-theme="dark"] .order-section-title,
html[data-theme="dark"] .order-step h3,
html[data-theme="dark"] .order-page h2,
html[data-theme="dark"] .order-page h3 { color: var(--br-night-text) !important; -webkit-text-fill-color: var(--br-night-text) !important; }
html[data-theme="dark"] .order-section-desc,
html[data-theme="dark"] .order-step p,
html[data-theme="dark"] .order-page p,
html[data-theme="dark"] .order-page li { color: var(--br-night-text-soft) !important; -webkit-text-fill-color: var(--br-night-text-soft) !important; }
html[data-theme="dark"] :where(.order-step, .order-tip, .order-info, .order-faq-item, .order-card, .order-notice, .order-payment-card, .order-help-card) {
    color: var(--br-night-text-soft) !important;
    background: linear-gradient(145deg, #101246 0%, #090935 100%) !important;
    border-color: var(--br-night-line-strong) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] .order-step-icon { color: var(--br-night-cyan) !important; background: rgba(121, 148, 255, .12) !important; }
html[data-theme="dark"] .order-step-number { border-color: #090935 !important; }
html[data-theme="dark"] .order-eyebrow { color: var(--br-night-cyan) !important; }
html[data-theme="dark"] .order-page :where(hr, .divider, .order-divider) { border-color: var(--br-night-line) !important; background-color: var(--br-night-line) !important; }
html[data-theme="dark"] .order-page :where(.btn, .order-button, .order-cta) { border-color: var(--br-night-line-strong); }
html[data-theme="dark"] .order-page :where(.btn-white, .order-btn-light) { color: #070a32 !important; background: #f3f4ff !important; }

/* Final order-detail timeline palette: no light note, track, or badge remains. */
html[data-theme="dark"] #orderModal .access-timeline {
    color: var(--br-night-text-soft) !important;
    background: #090a34 !important;
    border: 1px solid var(--br-night-line-strong) !important;
    border-top-color: var(--br-night-line-strong) !important;
    border-radius: 16px !important;
    padding: 20px 16px 16px !important;
}
html[data-theme="dark"] #orderModal .access-timeline::before {
    background: linear-gradient(90deg, var(--br-night-cyan), var(--br-night-green)) !important;
}
html[data-theme="dark"] #orderModal .access-timeline :where(div, span, p) {
    color: var(--br-night-text-soft) !important;
    -webkit-text-fill-color: var(--br-night-text-soft) !important;
}
html[data-theme="dark"] #orderModal .access-timeline .dur-value,
html[data-theme="dark"] #orderModal .access-timeline .dur-value span,
html[data-theme="dark"] #orderModal .access-date-row strong {
    color: var(--br-night-text) !important;
    -webkit-text-fill-color: var(--br-night-text) !important;
}
html[data-theme="dark"] #orderModal .access-timeline .dur-warning { color: #ff9cab !important; -webkit-text-fill-color: #ff9cab !important; }
html[data-theme="dark"] #orderModal .progress-bg {
    background: rgba(121, 148, 255, .16) !important;
    border: 1px solid rgba(121, 148, 255, .16) !important;
}
html[data-theme="dark"] #orderModal .progress-bar.prog-green { background: linear-gradient(90deg, #35d9a3, #70f0c1) !important; }
html[data-theme="dark"] #orderModal .progress-bar.prog-yellow { background: linear-gradient(90deg, #f4b942, #ffe28a) !important; }
html[data-theme="dark"] #orderModal .progress-bar.prog-red { background: linear-gradient(90deg, #ff7187, #ffadb9) !important; }
html[data-theme="dark"] #orderModal .status-badge.active { color: #a8f0c7 !important; background: rgba(39, 145, 91, .26) !important; border: 1px solid rgba(100, 228, 178, .30) !important; }
html[data-theme="dark"] #orderModal .status-badge.expired { color: #ffb3be !important; background: rgba(169, 53, 72, .28) !important; border: 1px solid rgba(255, 130, 152, .34) !important; }
html[data-theme="dark"] #orderModal .access-dates,
html[data-theme="dark"] #orderModal .access-date-row {
    color: var(--br-night-text-soft) !important;
    background: transparent !important;
    border-color: var(--br-night-line-strong) !important;
}
html[data-theme="dark"] #orderModal .access-timeline > p {
    color: #cacef3 !important;
    -webkit-text-fill-color: #cacef3 !important;
    background: rgba(121, 148, 255, .09) !important;
    border: 1px solid rgba(121, 148, 255, .18) !important;
}
html[data-theme="dark"] #orderModal .access-timeline > p i { color: var(--br-night-cyan) !important; }