:root {
    --accent: #C5A059;          /* Champagne Gold: Luxury & Sophistication */
    --accent-glow: rgba(197, 160, 89, 0.2);
    --bg-black: #040814;        /* Deep Midnight Navy */
    --bg: #060C1F;
    --navy-deep: #020612;
    --text-main: #F5F5F7;       /* Soft White */
    --text-dim: rgba(245, 245, 247, 0.6);
    --transition-slow: 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-mid: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    --text: var(--text-main);
    
    --bg-light: #FBFBFD;
    --text-light: #1D1D1F;
    --accent-light: #C5A059;
    
    --fs-nav: 0.8rem;
    --transition-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
    --text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
    
    --transition-fast: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    
    --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: 'Outfit', serif; /* Would ideally use a serif font for medical luxury */
    
    /* Typographic Scale - Ultra Refined */
    --fs-h1: clamp(4rem, 12vw, 10rem);
    --fs-h2: clamp(2.5rem, 8vw, 5rem);
    --fs-h3: clamp(1.8rem, 5vw, 3.5rem);
    --fs-body: clamp(1rem, 1.2vw, 1.3rem);
    --user-panel-bg: #FFF6E9;
    --user-panel-bg-2: #FFF2DE;
    --user-panel-bg-3: #FDF7EF;
    --user-panel-surface: #FFFFFF;
    --user-panel-surface-strong: #FFFDF8;
    --user-panel-border: rgba(255, 255, 255, 0.86);
    --user-panel-border-soft: rgba(31, 41, 51, 0.08);
    --user-panel-text: #1F2933;
    --user-panel-muted: #6B7280;
    --user-panel-pink: #F75F7A;
    --user-panel-teal: #20C7B5;
    --user-panel-orange: #FF9F1C;
    --user-panel-yellow: #FFC947;
    --user-panel-purple: #8B6DFF;
    --user-panel-blue: #4A8CFF;
    --user-panel-green: #65C466;
    --user-panel-shadow: 0 18px 44px rgba(88, 64, 42, 0.14);
    --user-panel-soft-shadow: 0 10px 26px rgba(75, 72, 102, 0.1);
}

/* Admin Panel User Panel parity polish for inline-heavy admin markup. */
#admin-login-section,
#admin-section {
    --admin-app-bg: #FFF6E9;
    --admin-app-bg-2: #FFF2DE;
    --admin-app-surface: rgba(255, 255, 255, 0.78);
    --admin-app-surface-strong: rgba(255, 253, 248, 0.94);
    --admin-app-surface-blue: rgba(238, 247, 255, 0.86);
    --admin-app-text: #1F2933;
    --admin-app-muted: #667085;
    --admin-app-border: rgba(31, 41, 51, 0.08);
    --admin-app-border-strong: rgba(255, 255, 255, 0.88);
    --admin-app-pink: #F75F7A;
    --admin-app-teal: #20C7B5;
    --admin-app-orange: #FF9F1C;
    --admin-app-yellow: #FFC947;
    --admin-app-purple: #8B6DFF;
    --admin-app-blue: #4A8CFF;
    --admin-app-green: #65C466;
    --admin-app-danger: #E84D67;
    --admin-app-shadow: 0 18px 44px rgba(88, 64, 42, 0.14);
    --admin-app-soft-shadow: 0 10px 26px rgba(75, 72, 102, 0.1);
    color: var(--admin-app-text) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 201, 71, 0.28), transparent 28%),
        radial-gradient(circle at 96% 8%, rgba(32, 199, 181, 0.18), transparent 30%),
        linear-gradient(135deg, var(--admin-app-bg) 0%, #FDF7EF 46%, #EEF7FF 100%) !important;
}

#admin-login-section::before,
#admin-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.42), transparent 24%, rgba(255, 255, 255, 0.26) 76%, transparent),
        radial-gradient(circle at 70% 100%, rgba(139, 109, 255, 0.14), transparent 34%);
}

#admin-login-section > div {
    position: relative;
    max-width: 430px !important;
    padding: 2.2rem !important;
    border: 1px solid var(--admin-app-border-strong);
    border-radius: 28px;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 201, 71, 0.22), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 253, 248, 0.74)) !important;
    box-shadow: var(--admin-app-shadow);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

#admin-login-section h2,
#admin-section h1,
#admin-section h2,
#admin-section h3,
#admin-section h4 {
    color: var(--admin-app-text) !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    text-transform: none !important;
}

#admin-login-section h2,
#admin-section h2 {
    font-size: clamp(1.55rem, 3vw, 2.15rem) !important;
    line-height: 1.08 !important;
    font-weight: 950 !important;
}

#admin-section h3 {
    font-weight: 900 !important;
}

#admin-section p,
#admin-section label,
#admin-section small,
#admin-section span,
#admin-section div[style*="opacity: 0.5"],
#admin-section div[style*="opacity:0.5"],
#admin-section div[style*="opacity: 0.6"],
#admin-section div[style*="opacity:0.6"],
#admin-section p[style*="opacity"],
#admin-section label[style*="opacity"] {
    color: var(--admin-app-muted) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

#admin-section strong,
#admin-section .val,
#admin-section [style*="color: #fff"],
#admin-section [style*="color:#fff"] {
    color: var(--admin-app-text) !important;
    text-shadow: none !important;
}

#admin-section [style*="var(--accent)"],
#admin-section .gold-text {
    color: var(--admin-app-pink) !important;
}

#admin-login-section .modal-input,
#admin-section .modal-input,
#admin-section input,
#admin-section select,
#admin-section textarea {
    min-height: 44px !important;
    color: var(--admin-app-text) !important;
    -webkit-text-fill-color: var(--admin-app-text) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--admin-app-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 18px rgba(31, 41, 51, 0.06) !important;
    font-weight: 760 !important;
    outline: none !important;
}

#admin-login-section .modal-input::placeholder,
#admin-section input::placeholder,
#admin-section textarea::placeholder {
    color: #98A2B3 !important;
    opacity: 1 !important;
}

#admin-login-section .modal-input:focus,
#admin-section .modal-input:focus,
#admin-section input:focus,
#admin-section select:focus,
#admin-section textarea:focus {
    border-color: rgba(74, 140, 255, 0.46) !important;
    box-shadow: 0 0 0 4px rgba(74, 140, 255, 0.14), 0 10px 22px rgba(31, 41, 51, 0.08) !important;
}

#admin-captcha-img {
    border-color: var(--admin-app-border) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 8px 18px rgba(31, 41, 51, 0.06) !important;
}

#admin-section .admin-sidebar {
    color: var(--admin-app-text) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 201, 71, 0.16), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 253, 248, 0.74)) !important;
    border-right: 1px solid var(--admin-app-border-strong) !important;
    box-shadow: 14px 0 36px rgba(88, 64, 42, 0.1) !important;
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

#admin-section .admin-sidebar::-webkit-scrollbar-thumb {
    background: rgba(74, 140, 255, 0.22) !important;
}

#admin-section .admin-sidebar h1 {
    color: var(--admin-app-text) !important;
    font-weight: 950 !important;
}

#admin-section .admin-nav-item {
    min-height: 42px !important;
    color: var(--admin-app-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#admin-section .admin-nav-item span {
    color: inherit !important;
    opacity: 0.95 !important;
}

#admin-section .admin-nav-item:hover {
    color: var(--admin-app-blue) !important;
    background: rgba(74, 140, 255, 0.09) !important;
    border-color: rgba(74, 140, 255, 0.16) !important;
    transform: translateX(2px);
}

#admin-section .admin-nav-item.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--admin-app-pink), var(--admin-app-orange)) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 24px rgba(247, 95, 122, 0.24) !important;
}

#admin-section .admin-nav-item.active span {
    color: #fff !important;
}

#admin-section #admin-logout-btn {
    color: var(--admin-app-danger) !important;
    background: rgba(232, 77, 103, 0.08) !important;
    border: 1px solid rgba(232, 77, 103, 0.22) !important;
    border-radius: 999px !important;
    letter-spacing: 0 !important;
    font-weight: 900 !important;
    text-transform: none !important;
}

#admin-section .admin-main-content {
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 201, 71, 0.2), transparent 30%),
        radial-gradient(circle at 100% 16%, rgba(32, 199, 181, 0.16), transparent 32%),
        linear-gradient(135deg, rgba(255, 246, 233, 0.98), rgba(253, 247, 239, 0.96) 48%, rgba(238, 247, 255, 0.96)) !important;
}

#admin-section .admin-tab-content > div:first-child {
    margin-bottom: 1.7rem !important;
}

#admin-section .admin-tab-content > div:first-child p {
    max-width: 680px;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
}

#admin-section .glass-card,
#admin-section .admin-tab-content > div[style*="background: rgba(255,255,255,0.01)"],
#admin-section .admin-tab-content > div[style*="background:rgba(255,255,255,0.01)"],
#admin-section #rp-search-result-area > div,
#admin-section #rp-grant-preview-card {
    color: var(--admin-app-text) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 201, 71, 0.14), transparent 38%),
        linear-gradient(145deg, var(--admin-app-surface-strong), rgba(255, 255, 255, 0.72)) !important;
    border: 1px solid var(--admin-app-border-strong) !important;
    border-radius: 24px !important;
    box-shadow: var(--admin-app-soft-shadow) !important;
    backdrop-filter: blur(16px) saturate(132%);
    -webkit-backdrop-filter: blur(16px) saturate(132%);
}

#admin-tab-dashboard > div:nth-of-type(2) {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
}

#admin-tab-dashboard > div:nth-of-type(2) .glass-card {
    min-height: 138px;
    padding: 1.35rem !important;
    border-left: 0 !important;
    overflow: hidden;
    position: relative;
}

#admin-tab-dashboard > div:nth-of-type(2) .glass-card::after {
    content: "";
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(32, 199, 181, 0.16), rgba(74, 140, 255, 0.16));
}

#admin-tab-dashboard > div:nth-of-type(2) .glass-card:nth-child(3n+1)::after {
    background: linear-gradient(135deg, rgba(247, 95, 122, 0.16), rgba(255, 159, 28, 0.18));
}

#admin-tab-dashboard > div:nth-of-type(2) .glass-card:nth-child(3n+2)::after {
    background: linear-gradient(135deg, rgba(32, 199, 181, 0.18), rgba(74, 140, 255, 0.16));
}

#admin-tab-dashboard > div:nth-of-type(2) .glass-card:nth-child(3n+3)::after {
    background: linear-gradient(135deg, rgba(139, 109, 255, 0.16), rgba(247, 95, 122, 0.14));
}

#admin-tab-dashboard .val,
#admin-section .glass-card .val {
    color: var(--admin-app-text) !important;
    font-size: clamp(1.45rem, 2.2vw, 1.95rem) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
}

#admin-section .admin-table-wrapper {
    width: 100%;
    color: var(--admin-app-text) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    border: 1px solid var(--admin-app-border-strong) !important;
    border-radius: 24px !important;
    box-shadow: var(--admin-app-soft-shadow) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

#admin-section .admin-table {
    min-width: 760px;
    color: var(--admin-app-text) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
}

#admin-section .admin-table th {
    color: var(--admin-app-muted) !important;
    background: rgba(238, 247, 255, 0.82) !important;
    border-bottom: 1px solid var(--admin-app-border) !important;
    opacity: 1 !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04rem !important;
    padding: 1rem 1.1rem !important;
    text-transform: uppercase !important;
    white-space: nowrap;
}

#admin-section .admin-table td {
    color: var(--admin-app-text) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    border-bottom: 1px solid rgba(31, 41, 51, 0.06) !important;
    padding: 1rem 1.1rem !important;
    vertical-align: middle;
}

#admin-section .admin-table tr:hover td {
    background: rgba(238, 247, 255, 0.9) !important;
}

#admin-section .cta-btn,
#admin-login-section .cta-btn,
#admin-section button.cta-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 42px !important;
    padding: 0.65rem 1.15rem !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--admin-app-teal), var(--admin-app-blue)) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 22px rgba(32, 199, 181, 0.22) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
}

#admin-section .cta-btn:hover,
#admin-login-section .cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(32, 199, 181, 0.28) !important;
}

#admin-section .cta-btn.small {
    min-height: 34px !important;
    padding: 0.45rem 0.85rem !important;
    font-size: 0.72rem !important;
}

#admin-section .cta-btn.secondary,
#admin-section .cta-btn[style*="rgba(255,255,255"],
#admin-section .cta-btn[style*="rgba(255, 255, 255"],
#admin-section button[style*="rgba(255,255,255"],
#admin-section button[style*="rgba(255, 255, 255"] {
    color: var(--admin-app-blue) !important;
    background: rgba(74, 140, 255, 0.1) !important;
    border: 1px solid rgba(74, 140, 255, 0.2) !important;
    box-shadow: none !important;
}

#admin-section button[style*="#ff"],
#admin-section button[style*="255, 94, 94"],
#admin-section button[style*="255,0,0"],
#admin-section button[style*="255, 0, 0"] {
    color: #fff !important;
    background: linear-gradient(135deg, var(--admin-app-danger), var(--admin-app-orange)) !important;
    border: 0 !important;
    box-shadow: 0 12px 22px rgba(232, 77, 103, 0.22) !important;
}

#admin-section .active-audit-tab,
#admin-section #audit-subtabs .active-audit-tab {
    color: #fff !important;
    background: linear-gradient(135deg, var(--admin-app-purple), var(--admin-app-blue)) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 22px rgba(139, 109, 255, 0.22) !important;
}

#admin-section .status-badge,
#admin-section .status-pill,
#admin-login-analytics-detail-modal .status-badge,
#admin-user-modal .status-badge,
#admin-order-modal .status-badge,
#admin-redemption-modal .status-badge,
#admin-product-modal .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.28rem 0.64rem !important;
    border-radius: 999px !important;
    font-size: 0.62rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.03rem !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
}

#admin-section .status-badge.completed,
#admin-section .status-badge.approved,
#admin-section .status-badge.confirmed,
#admin-login-analytics-detail-modal .status-badge.completed,
#admin-user-modal .status-badge.completed,
#admin-order-modal .status-badge.completed,
#admin-redemption-modal .status-badge.completed,
#admin-product-modal .status-badge.completed {
    color: #0B6B4F !important;
    background: rgba(101, 196, 102, 0.16) !important;
    border: 1px solid rgba(101, 196, 102, 0.34) !important;
}

#admin-section .status-badge.pending,
#admin-login-analytics-detail-modal .status-badge.pending,
#admin-user-modal .status-badge.pending,
#admin-order-modal .status-badge.pending,
#admin-redemption-modal .status-badge.pending,
#admin-product-modal .status-badge.pending {
    color: #A15C00 !important;
    background: rgba(255, 201, 71, 0.22) !important;
    border: 1px solid rgba(255, 159, 28, 0.32) !important;
}

#admin-section .status-badge.active,
#admin-section .status-badge.processing,
#admin-login-analytics-detail-modal .status-badge.active,
#admin-user-modal .status-badge.active,
#admin-order-modal .status-badge.active,
#admin-redemption-modal .status-badge.active,
#admin-product-modal .status-badge.active {
    color: #1662C4 !important;
    background: rgba(74, 140, 255, 0.14) !important;
    border: 1px solid rgba(74, 140, 255, 0.28) !important;
}

#admin-section .status-badge.failed,
#admin-section .status-badge.rejected,
#admin-section .status-badge.cancelled,
#admin-login-analytics-detail-modal .status-badge.failed,
#admin-user-modal .status-badge.failed,
#admin-order-modal .status-badge.failed,
#admin-redemption-modal .status-badge.failed,
#admin-product-modal .status-badge.failed {
    color: #B4233E !important;
    background: rgba(247, 95, 122, 0.15) !important;
    border: 1px solid rgba(232, 77, 103, 0.28) !important;
}

#admin-section div[style*="border: 1px dashed"],
#admin-section div[style*="border:1px dashed"],
#admin-section div[style*="background: rgba(212, 175, 55"],
#admin-section div[style*="background:rgba(212,175,55"],
#admin-section div[style*="background: rgba(255, 94, 94"],
#admin-section div[style*="background:rgba(255,94,94"] {
    border-radius: 20px !important;
}

#admin-section #uat-business-date-active-banner,
#admin-section #uat-reset-warning,
#admin-section #agent-logistics-export-warning {
    border-radius: 18px !important;
    background: rgba(255, 248, 222, 0.82) !important;
    color: #8A4B00 !important;
    border-color: rgba(255, 159, 28, 0.24) !important;
}

#admin-login-analytics-detail-modal .modal-content,
#admin-user-modal .modal-content,
#admin-order-modal .modal-content,
#admin-redemption-modal .modal-content,
#admin-product-modal .modal-content {
    max-width: min(92vw, 860px) !important;
    max-height: min(88vh, 780px) !important;
    overflow-y: auto !important;
}

#admin-login-analytics-detail-modal .modal-content div[style*="color:#f3d67a"],
#admin-login-analytics-detail-modal .modal-content div[style*="color: #f3d67a"],
#admin-user-modal .modal-content div[style*="color:#f3d67a"],
#admin-user-modal .modal-content div[style*="color: #f3d67a"],
#admin-order-modal .modal-content div[style*="color:#f3d67a"],
#admin-order-modal .modal-content div[style*="color: #f3d67a"],
#admin-redemption-modal .modal-content div[style*="color:#f3d67a"],
#admin-redemption-modal .modal-content div[style*="color: #f3d67a"],
#admin-product-modal .modal-content div[style*="color:#f3d67a"],
#admin-product-modal .modal-content div[style*="color: #f3d67a"] {
    color: #8A4B00 !important;
    background: rgba(255, 248, 222, 0.82) !important;
    border-color: rgba(255, 159, 28, 0.24) !important;
}

#admin-section #uat-business-date-controls,
#admin-section #uat-reset-controls,
#admin-section #operation-control-card > div:last-child {
    align-items: end !important;
}

@media (max-width: 900px) {
    #admin-section .admin-main-content {
        padding: 1.3rem !important;
    }

    #admin-section #uat-business-date-controls,
    #admin-section #uat-reset-controls,
    #admin-section #operation-control-card > div:last-child,
    #admin-section div[style*="grid-template-columns: 1.2fr 0.8fr"],
    #admin-section div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    #admin-tab-dashboard > div:nth-of-type(2) {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    #admin-section {
        background:
            linear-gradient(135deg, var(--admin-app-bg) 0%, #EEF7FF 100%) !important;
    }

    #admin-section .admin-sidebar {
        background: rgba(255, 255, 255, 0.88) !important;
        border-bottom: 1px solid var(--admin-app-border-strong) !important;
        border-right: 0 !important;
        border-radius: 0 0 24px 24px;
    }

    #admin-section .admin-nav-scroll {
        padding: 0.2rem 0 0.65rem !important;
    }

    #admin-section .admin-nav-item {
        min-width: max-content;
        min-height: 40px !important;
        padding: 0.58rem 0.9rem !important;
        border-radius: 999px !important;
    }

    #admin-section .admin-nav-item:hover {
        transform: none;
    }

    #admin-section .admin-tab-content > div:first-child {
        margin-bottom: 1.3rem !important;
    }

    #admin-section h2 {
        font-size: 1.42rem !important;
    }

    #admin-section .admin-table-wrapper {
        padding: 0.65rem !important;
        border-radius: 20px !important;
    }

    #admin-section .admin-table th,
    #admin-section .admin-table td {
        padding: 0.85rem 0.75rem !important;
        font-size: 0.72rem !important;
    }
}

@media (max-width: 480px) {
    #admin-login-section {
        padding: 1rem !important;
    }

    #admin-login-section > div {
        padding: 1.35rem !important;
        border-radius: 24px !important;
    }

    #admin-login-section > div > div {
        flex-direction: column !important;
    }

    #admin-captcha-img {
        width: 100% !important;
        max-width: 180px;
        flex-basis: auto !important;
        align-self: center;
    }

    #admin-section .admin-main-content {
        padding: 1rem 0.85rem !important;
    }

    #admin-tab-dashboard > div:nth-of-type(2) {
        grid-template-columns: 1fr !important;
    }

    #admin-section .glass-card,
    #admin-section .admin-table-wrapper,
    #admin-section .admin-tab-content > div[style*="background: rgba(255,255,255,0.01)"],
    #admin-section .admin-tab-content > div[style*="background:rgba(255,255,255,0.01)"] {
        border-radius: 18px !important;
    }

    #admin-section .cta-btn,
    #admin-section button.cta-btn {
        width: auto !important;
        min-width: 92px;
    }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: none;
}

html::-webkit-scrollbar { display: none; }

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-main);
    overflow-x: hidden;
    transition: background-color var(--transition-cinematic), color var(--transition-cinematic);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body.theme-light {
    --bg: var(--bg-light);
    --text: var(--text-light);
    --accent: var(--accent-light);
}

/* Luxury Grain & Noise */
.noise {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: 0.05;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJuIihmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjY1IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+');
}

/* Scroll Indicator */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--accent);
    width: 0%;
    z-index: 1000001;
}

/* Loader - Minimalist Luxury */
.loader {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 2000000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 1.2s cubic-bezier(0.86, 0, 0.07, 1);
}

.loader.hidden {
    transform: translateY(-100%);
}

.loader-logo {
    display: flex;
    flex-direction: column; /* Stack vertically on mobile */
    align-items: center;
    gap: 1.5rem;
    color: #fff;
    text-align: center;
}

@media (min-width: 769px) {
    .loader-logo {
        flex-direction: row;
        gap: 2rem;
    }
}

.loader-zh {
    display: flex;
    gap: 1rem;
    font-size: 1.8rem; /* Reduced from 3.5rem */
    font-weight: 300;
    letter-spacing: 0.5rem;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .loader-zh {
        order: 2; /* Move to bottom */
        font-size: 1rem;
        letter-spacing: 0.8rem;
        margin-top: 1rem;
        opacity: 0.5;
        font-weight: 300;
    }
}

.loader-sep {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
    .loader-sep {
        display: none; /* Hide separator on mobile */
    }
}

.loader-en {
    display: flex;
    gap: 0.5rem;
    font-size: 3.5rem; /* Increased from 1.8rem */
    font-weight: 200;
    letter-spacing: 0.8rem;
}

@media (max-width: 768px) {
    .loader-en {
        order: 1; /* Move to top */
        font-size: 1.8rem;
        letter-spacing: 0.5rem;
        margin-top: 0;
        opacity: 1;
        font-weight: 400;
    }
}

.loader-logo span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: letterReveal 0.6s forwards;
}

@keyframes letterReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation Delays for Chinese */
.loader-zh span:nth-child(1) { animation-delay: 0.8s; }
.loader-zh span:nth-child(2) { animation-delay: 0.9s; }

/* Animation Delays for English */
.loader-en span:nth-child(1) { animation-delay: 0.1s; }
.loader-en span:nth-child(2) { animation-delay: 0.2s; }
.loader-en span:nth-child(3) { animation-delay: 0.3s; }
.loader-en span:nth-child(4) { animation-delay: 0.4s; }
.loader-en span:nth-child(5) { animation-delay: 0.5s; }
.loader-en span:nth-child(6) { animation-delay: 0.6s; }

@media (min-width: 769px) {
    .loader-zh span:nth-child(1) { animation-delay: 0.1s; }
    .loader-zh span:nth-child(2) { animation-delay: 0.3s; }
    .loader-en span:nth-child(1) { animation-delay: 0.6s; }
    .loader-en span:nth-child(2) { animation-delay: 0.7s; }
    .loader-en span:nth-child(3) { animation-delay: 0.8s; }
    .loader-en span:nth-child(4) { animation-delay: 0.9s; }
    .loader-en span:nth-child(5) { animation-delay: 1.0s; }
    .loader-en span:nth-child(6) { animation-delay: 1.1s; }
}

.navbar {
    position: fixed;
    top: 1.5rem;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.nav-container {
    width: 95%;
    max-width: 1200px;
    height: 70px;
    background: rgba(4, 8, 20, 0.95);
    border: 1px solid rgba(197, 160, 89, 0.15);
    border-radius: 0; /* Luxury often uses sharp or very subtle curves */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2.5rem;
    pointer-events: auto;
    box-shadow: 0 25px 80px rgba(0,0,0,0.6);
}

.nav-left { 
    display: flex; 
    align-items: center; 
    flex-shrink: 0;
}
.nav-center { 
    display: flex; 
    justify-content: center;
    flex-grow: 1;
}
.nav-right { 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
    gap: 1.2rem; 
    flex-shrink: 0; 
}

.logo {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    color: var(--accent);
}

.nav-links.desktop-only {
    display: flex;
    gap: 1.4rem;
}

/* Hamburger Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    width: 30px;
    height: 20px;
    position: relative;
    z-index: 10001;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--text);
    position: absolute;
    transition: all 0.3s ease;
}

.menu-toggle span:first-child { top: 0; }
.menu-toggle span:last-child { bottom: 0; }

.menu-toggle.active span:first-child {
    transform: translateY(10px) rotate(45deg);
}
.menu-toggle.active span:last-child {
    transform: translateY(-9px) rotate(-45deg);
}

/* Mobile Overlay Menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
    backdrop-filter: blur(20px);
}

.mobile-menu.active {
    transform: translateY(0);
}

.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 2rem;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

.mobile-menu.active .mobile-nav-links a {
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-links h2 {
    font-size: var(--fs-h2);
    line-height: 1;
    font-weight: 800;
    margin-bottom: 3.5rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    text-shadow: 0 4px 20px rgba(0,0,0,1);
}

.mobile-nav-links a {
    font-size: 1.5rem;
    font-weight: 400;
    text-decoration: none;
    color: inherit;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.mobile-menu.active .mobile-nav-links a:nth-child(1) { transition-delay: 0.3s; }
.mobile-menu.active .mobile-nav-links a:nth-child(2) { transition-delay: 0.4s; }
.mobile-menu.active .mobile-nav-links a:nth-child(3) { transition-delay: 0.5s; }
.mobile-menu.active .mobile-nav-links a:nth-child(4) { transition-delay: 0.6s; }

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-right: 1rem;
}

.lang-item {
    font-size: 0.65rem;
    text-decoration: none;
    color: inherit;
    opacity: 0.3;
    letter-spacing: 0.1rem;
    transition: opacity 0.3s ease;
    font-weight: 500;
}

.lang-item.active {
    opacity: 1;
}

.lang-item:hover {
    opacity: 1;
}

.lang-switcher .sep {
    font-size: 0.6rem;
    opacity: 0.15;
    font-weight: 200;
}

/* Update mobile menu for lang */
.mobile-lang {
    margin-top: 2rem;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

.mobile-lang .lang-item {
    font-size: 0.8rem;
    opacity: 0.5;
}

.mobile-lang .lang-item.active {
    opacity: 1;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    font-weight: 500;
    opacity: 0.75;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-links a:hover { 
    opacity: 1; 
    color: var(--accent);
    transform: translateY(-2px);
}

.whitelist-btn {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #000;
    padding: 0.7rem 1.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 0;
}

.whitelist-btn:hover {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.2);
}

/* Modal System */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 20000;
    justify-content: center;
    align-items: flex-start; /* Fix: Start from top to prevent cutting off the title */
    overflow-y: auto;
    padding: 4rem 1.5rem; /* Give some breathing room at top and bottom */
}

.modal.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: rgba(15, 15, 15, 0.65);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 4rem 3rem;
    width: 95%;
    max-width: 1100px;
    position: relative;
    border-radius: 4px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    transition: all 0.5s ease;
}

.modal-content.panel-active {
    padding: 0 !important;
    overflow: hidden !important;
    max-width: 1100px !important;
    width: 95% !important;
}

.mobile-only { display: none !important; }
@media (max-width: 992px) {
    .mobile-only { display: block !important; }
}

.modal-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    opacity: 0.5;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: all 0.3s ease;
    border-radius: 50%;
}

.modal-close:hover {
    opacity: 1;
    background: rgba(255,255,255,0.05);
}

#portal-modal .modal-content.panel-active > .modal-close {
    display: none;
}

.modal-step {
    display: none;
    animation: fadeIn 0.5s ease forwards;
}

.modal-step.active {
    display: block;
}

.modal-step h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
}

.modal-step p {
    font-size: 0.85rem;
    opacity: 0.7;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.body-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 4px 15px rgba(0,0,0,1);
}

.tier-card.active {
    border-color: #fff;
    background: #fff;
    color: #000;
}

.tier-card.active span {
    color: #000;
    opacity: 0.8;
}

.tier-card.active .tier-rewards {
    border-top-color: rgba(0,0,0,0.1);
}

.tier-card.active .tier-rewards p {
    color: #000 !important;
}

.modal-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    margin-bottom: 2rem;
    outline: none;
}

.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .tier-grid { grid-template-columns: 1fr; }
}

.tier-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 140px;
}

.tier-card span {
    display: inline;
    font-size: 0.6rem;
    opacity: 0.5;
    margin-left: 0.2rem;
    font-weight: 400;
    text-transform: uppercase;
}

.tier-benefits {
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tier-benefits span {
    display: block !important;
    font-size: 0.65rem !important;
    opacity: 0.7 !important;
    margin: 0 !important;
    letter-spacing: 0.05rem;
}

.tier-card.active .tier-benefits {
    border-top-color: rgba(0,0,0,0.1);
}

.tier-card.active .tier-benefits span {
    color: #000 !important;
    opacity: 0.8 !important;
}

.portal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2rem;
}

.portal-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    text-align: left;
    border-radius: 4px;
}

.portal-stat label {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    opacity: 0.4;
    margin-bottom: 0.5rem;
}

#portal-status-title {
    font-size: 2.2rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    margin-bottom: 2rem;
    font-weight: 800;
    text-shadow: 0 0 20px rgba(0, 255, 102, 0.2);
}

.portal-stat .val {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.admin-table-wrapper {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1rem;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    color: #fff;
}

.admin-table th {
    text-align: left;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.5;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}

.admin-table td {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'Inter', sans-serif;
}

.admin-dashboard {
    background: #000 !important;
    color: #fff !important;
    z-index: 50;
    position: relative;
}

.status-pill {
    font-size: 0.6rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .admin-table th, .admin-table td {
        padding: 1rem 0.5rem;
        font-size: 0.7rem;
    }
}

.payment-box {
    background: #000;
    padding: 1.5rem;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    margin-bottom: 1rem;
}

.payment-box .label {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: 0.5rem;
}

.payment-box code {
    display: block;
    font-size: 0.75rem;
    word-break: break-all;
    margin-bottom: 1rem;
    color: var(--accent);
}

.admin-access-btn {
    font-size: 0.7rem;
    color: #fff !important;
    text-decoration: none;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.8rem 2rem;
    border-radius: 4px;
    letter-spacing: 0.3rem;
    transition: all 0.3s ease;
    display: block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.admin-access-btn:hover {
    background: #222;
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.3);
}

.copy-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Sections */
section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12rem 10%;
    overflow: hidden;
    background: #000; /* Fallback */
}

.hero {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding-top: 10rem !important;
    padding-bottom: 4rem !important;
    overflow: hidden !important;
}

@media (max-width: 768px) {
    .hero {
        padding-top: 13rem !important;
        padding-bottom: 3rem !important;
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
    }
    .hero h1 {
        font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
        line-height: 1.2 !important;
        margin-top: 0.5rem !important;
    }
    .hero .subtitle {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }
    #means .bg-media img {
        object-position: center !important;
    }
}

#building .bg-media img {
    object-position: 28% center !important;
}

#model .bg-media img {
    object-position: 72% center !important;
}

.bg-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(circle at center, #1a2530 0%, #0a0f14 100%); /* Fallback moved here */
}

.bg-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.1); /* Start zoomed for parallax */
    transition: opacity 1.2s var(--transition-cinematic);
    will-change: transform;
    filter: brightness(1.2) contrast(1.1); /* Brighter and vivid background */
}

.hero .bg-media img {
    transform: scale(1) !important;
    filter: brightness(1.1) contrast(1.15); /* Slightly less dark for hero */
}

.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0.25) 0%, 
        rgba(0, 0, 0, 0.1) 30%, 
        rgba(0, 0, 0, 0.1) 70%, 
        rgba(0, 0, 0, 0.35) 100%);
    z-index: 1;
}

section {
    background: transparent; /* Ensure section is transparent to show bg-media */
}

/* Specific overlay for hero to ensure bottom transition is deep */
.hero .overlay {
    background: linear-gradient(to bottom, 
        rgba(0,0,0,0.5) 0%, 
        rgba(0,0,0,0.2) 40%, 
        rgba(0,0,0,0.6) 100%);
}

.content {
    position: relative;
    z-index: 10;
    max-width: 1200px;
}

.hero .content {
    max-width: 750px;
}

@media (max-width: 1024px) {
    .hero .content {
        max-width: 85%;
    }
}

.hero h1 {
    font-size: clamp(2.5rem, 4.8vw, 4.8rem);
    line-height: 1.1;
    letter-spacing: 0.05rem;
}

/* Lang-based scaling for hero text */
html[lang="en"] .hero h1,
html[lang="jp"] .hero h1,
html[lang="kr"] .hero h1,
html[lang="zh-hk"] .hero h1 {
    font-size: clamp(2rem, 3.2vw, 3.2rem) !important;
}

html[lang="en"] .hero .subtitle,
html[lang="jp"] .hero .subtitle,
html[lang="kr"] .hero .subtitle,
html[lang="zh-hk"] .hero .subtitle {
    font-size: clamp(1.1rem, 1.3vw, 1.4rem) !important;
    margin-bottom: 2.5rem !important;
}

html[lang="en"] .hero .body-text p,
html[lang="jp"] .hero .body-text p,
html[lang="kr"] .hero .body-text p,
html[lang="zh-hk"] .hero .body-text p {
    font-size: clamp(0.9rem, 1.1vw, 1.1rem) !important;
}

/* Typography Hierarchy */
h1 {
    font-size: var(--fs-h1);
    line-height: 1.1; /* Increased from 0.85 to prevent overlapping on wrap */
    font-weight: 800;
    letter-spacing: 0.1em; /* Reduced slightly for better fit */
    margin-bottom: 2rem;
    margin-left: -0.05em;
    color: #ffffff;
    text-shadow: 0 10px 40px rgba(0,0,0,1), 0 0 20px rgba(0,0,0,0.8);
    text-transform: uppercase;
}

.title-sub {
    font-size: 0.45em; /* Make the Chinese part smaller */
    vertical-align: middle;
    opacity: 0.7;
    margin-left: 0.5rem;
    font-weight: 300;
    letter-spacing: 0.2rem;
}

/* Ensure Chinese font stack */
[lang="zh-hk"] body {
    font-family: "Outfit", "PingFang SC", "Microsoft YaHei", sans-serif;
}

h2 {
    font-size: var(--fs-h2);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 3rem;
    text-shadow: var(--text-shadow);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.subtitle {
    font-size: 1.8rem;
    font-weight: 200;
    letter-spacing: 0.1em;
    opacity: 0.9;
    color: #ffffff;
    margin-bottom: 4rem;
    text-shadow: 0 4px 20px rgba(0,0,0,1);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.body-text {
    font-size: var(--fs-body);
    font-weight: 300;
    max-width: 650px;
    opacity: 0.8;
    line-height: 1.8;
}

.emphasis {
    font-weight: 500;
    color: var(--accent);
}

/* Hero Special */
.constants-bar {
    display: flex;
    gap: 4rem;
    margin: 5rem 0;
}

.constant-item {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.4rem;
    opacity: 1;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 4px 20px rgba(0,0,0,1);
    position: relative;
}

.constant-item::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.8s var(--transition-cinematic);
}

.constant-item.active::after { width: 100%; }

/* Shift UI - More Dynamic */
.shift-grid {
    display: grid;
    gap: 4rem;
    margin-top: 6rem;
}

/* Narrative - Compact Technical Layout */
.shift-grid {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 6rem;
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.shift-card {
    display: grid;
    grid-template-columns: 1fr 150px 1fr;
    align-items: center;
    position: relative;
    width: 100%;
}

.shift-card::before {
    content: '';
    position: absolute;
    top: -2rem;
    left: 50%;
    height: 1px;
    width: 200px;
    background: linear-gradient(to right, transparent, var(--accent), transparent);
    transform: translateX(-50%);
    opacity: 0.3;
}

.shift-card .label {
    grid-column: 1 / -1;
    font-size: 0.65rem;
    letter-spacing: 0.6rem;
    text-transform: uppercase;
    opacity: 0.4;
    margin-bottom: 0.8rem;
    text-align: center;
    color: var(--accent);
    font-weight: 400;
}

.shift-card .val {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: 0.15rem;
    text-shadow: 0 6px 25px rgba(0,0,0,1);
    transition: all 0.6s ease;
}

.shift-card .val:first-of-type {
    text-align: right;
    color: #ffffff;
    padding-right: 2rem;
}

.shift-card .val.emphasis {
    text-align: left;
    color: var(--accent);
    padding-left: 2rem;
}

.shift-card .arrow {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--accent), transparent);
    position: relative;
    opacity: 0.6;
}

.shift-card .arrow::after {
    content: '→';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    color: var(--accent);
    text-shadow: 0 0 15px var(--accent);
}

.lang-zh .shift-card .val {
    letter-spacing: 0.4rem;
}

/* Dual Core - Monolithic Pillars */
.dual-core-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.pillar {
    position: relative;
    padding: 10rem 10% 8rem;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    transition: flex 1s var(--transition-cinematic);
    overflow: hidden;
}

.pillar:hover { flex: 1.15; }

.pillar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2;
    transition: opacity 0.8s ease;
}

.pillar:hover::before { opacity: 0.4; }

.pillar .bg-media img { transform: scale(1.15); }
.pillar:hover .bg-media img { transform: scale(1.05); }

/* Value Loop - Pulsing Circle */
.loop-container {
    position: relative;
    width: 600px;
    height: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid var(--accent);
    border-radius: 50%;
    opacity: 0.2;
    animation: pulse 4s infinite;
}

.loop-inner-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: none;
    backdrop-filter: none;
    padding: 0;
}

.loop-inner-text p {
    font-size: 1.4rem;
    letter-spacing: 0.4rem;
    text-transform: uppercase;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 5px 25px rgba(0,0,0,1);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.loop-inner-text p:hover {
    opacity: 1;
    transform: scale(1.1);
}

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.2; }
    50% { transform: scale(1.05); opacity: 0.4; }
    100% { transform: scale(0.95); opacity: 0.2; }
}

/* CTA Button - Ultra Premium */
.cta-btn {
    display: inline-block;
    margin-top: 4rem;
    padding: 1rem 2.8rem;
    background: transparent;
    color: inherit;
    border: 1px solid var(--text);
    border-radius: 100px;
    text-decoration: none;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.12rem;
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease;
    font-weight: 500;
}

.cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--text);
    transition: left 0.5s var(--transition-cinematic);
    z-index: -1;
}

.cta-btn:hover { 
    color: var(--bg-black); 
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}
.cta-btn:hover::before { left: 0; }

/* Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.5s var(--transition-cinematic), transform 1.5s var(--transition-cinematic);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.stagger-reveal span {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s var(--transition-cinematic), transform 1s var(--transition-cinematic);
}

.stagger-reveal.active span {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Fixes */
@media (max-width: 1024px) {
    .navbar { width: 95%; padding: 1rem 2rem; top: 1rem; }
    .desktop-only { display: none !important; }
    .menu-toggle { display: block; }
    
    .dual-core-container { grid-template-columns: 1fr; position: relative; height: auto; }
    .pillar { height: 70vh; padding: 10rem 10% 5rem; }
    .loop-container { width: 350px; height: 350px; }

    section { padding: 8rem 5%; }
    h1 { font-size: clamp(4rem, 15vw, 8rem); }
}

@media (max-width: 768px) {
    h1 { font-size: 3.5rem; }
    h2 { font-size: 2.2rem; }
    .shift-card .val { font-size: 1.8rem; }
    .shift-card { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
        gap: 1rem; 
    }
    .shift-card .val:first-of-type, .shift-card .val.emphasis {
        text-align: center;
        padding: 0;
    }
    .shift-card .arrow { 
        width: 1px; 
        height: 40px; 
        background: linear-gradient(to bottom, transparent, var(--accent), transparent);
        margin: 1rem 0; 
    }
    .shift-card .arrow::after {
        content: '↓';
        transform: translate(-50%, -50%);
    }
    
    .constants-bar { 
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1rem;
        justify-items: center;
    }
    .constant-item {
        font-size: 0.7rem;
        letter-spacing: 0.2rem;
    }
}
@media (max-width: 768px) {
    #origin .bg-media img {
        object-position: 15% center; /* Shift focus to the left to see the sapling */
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .modal {
        align-items: flex-start !important; /* Start from top, not center */
        overflow-y: auto !important;
    }
    .mobile-only-spacer {
        display: block !important;
    }
    .modal-content {
        padding: 2rem 1.5rem 5rem !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: block !important;
    }
}

/* App Feedback: Toasts, Inline Messages, and Banners */
.toast-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1000002;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
    width: min(420px, calc(100vw - 2rem));
}

.toast {
    pointer-events: auto;
    width: 100%;
    min-width: 0;
    padding: 0.92rem 1rem 0.92rem 1.05rem;
    color: #1f2933;
    border-radius: 20px;
    font-size: 0.88rem;
    line-height: 1.45;
    letter-spacing: 0;
    box-shadow: 0 18px 44px rgba(75, 72, 102, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.75rem;
    overflow: hidden;
    position: relative;
    animation: toast-slide-in 0.36s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.toast::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.96;
    z-index: -1;
}

.toast::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85rem;
    bottom: 0.85rem;
    width: 4px;
    border-radius: 0 999px 999px 0;
}

.app-toast-icon {
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 950;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px rgba(31, 41, 51, 0.12);
}

.app-toast-message {
    flex: 1;
    padding-top: 0.2rem;
    overflow-wrap: anywhere;
    font-weight: 800;
}

.toast.success::before { background: linear-gradient(145deg, rgba(239, 255, 245, 0.96), rgba(255, 255, 255, 0.78)); }
.toast.error::before { background: linear-gradient(145deg, rgba(255, 239, 243, 0.98), rgba(255, 255, 255, 0.8)); }
.toast.warning::before { background: linear-gradient(145deg, rgba(255, 248, 222, 0.98), rgba(255, 255, 255, 0.8)); }
.toast.info::before { background: linear-gradient(145deg, rgba(238, 247, 255, 0.98), rgba(255, 255, 255, 0.78)); }
.toast.loading::before { background: linear-gradient(145deg, rgba(243, 240, 255, 0.98), rgba(255, 255, 255, 0.78)); }

.toast.success { border: 1px solid rgba(101, 196, 102, 0.3); }
.toast.error { border: 1px solid rgba(232, 77, 103, 0.3); }
.toast.warning { border: 1px solid rgba(255, 159, 28, 0.34); }
.toast.info { border: 1px solid rgba(74, 140, 255, 0.3); }
.toast.loading { border: 1px solid rgba(139, 109, 255, 0.3); }

.toast.success::after { background: linear-gradient(180deg, var(--user-panel-green), var(--user-panel-teal)); }
.toast.error::after { background: linear-gradient(180deg, var(--user-panel-pink), #E84D67); }
.toast.warning::after { background: linear-gradient(180deg, var(--user-panel-yellow), var(--user-panel-orange)); }
.toast.info::after { background: linear-gradient(180deg, var(--user-panel-blue), var(--user-panel-teal)); }
.toast.loading::after { background: linear-gradient(180deg, var(--user-panel-purple), var(--user-panel-blue)); }

.toast.success .app-toast-icon { background: linear-gradient(135deg, #65C466, #20C7B5); }
.toast.error .app-toast-icon { background: linear-gradient(135deg, #E84D67, #F75F7A); }
.toast.warning .app-toast-icon { background: linear-gradient(135deg, #FF9F1C, #FFC947); color: #3a2a00; }
.toast.info .app-toast-icon { background: linear-gradient(135deg, #4A8CFF, #20C7B5); }
.toast.loading .app-toast-icon { background: linear-gradient(135deg, #8B6DFF, #4A8CFF); }

.toast.fade-out {
    opacity: 0;
    transform: translateX(22px) translateY(-4px);
}

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

.app-message,
#user-operation-banner,
#uat-business-date-active-banner,
#uat-reset-warning,
#agent-logistics-export-warning {
    border-radius: 18px !important;
    padding: 0.9rem 1rem !important;
    border: 1px solid rgba(74, 140, 255, 0.18) !important;
    background: linear-gradient(145deg, rgba(238, 247, 255, 0.9), rgba(255, 255, 255, 0.68)) !important;
    color: #1f2933 !important;
    box-shadow: 0 12px 28px rgba(75, 72, 102, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    font-weight: 800 !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.app-message.success,
#uat-business-date-active-banner {
    border-color: rgba(101, 196, 102, 0.32) !important;
    background: linear-gradient(145deg, rgba(239, 255, 245, 0.94), rgba(255, 255, 255, 0.72)) !important;
}

.app-message.error,
#uat-reset-warning {
    border-color: rgba(232, 77, 103, 0.32) !important;
    background: linear-gradient(145deg, rgba(255, 239, 243, 0.96), rgba(255, 255, 255, 0.72)) !important;
}

.app-message.warning,
#user-operation-banner,
#agent-logistics-export-warning {
    border-color: rgba(255, 159, 28, 0.34) !important;
    background: linear-gradient(145deg, rgba(255, 248, 222, 0.96), rgba(255, 255, 255, 0.72)) !important;
}

#reg-success-card,
#user-panel-layout #reg-success-card {
    border-radius: 22px !important;
    border-color: rgba(101, 196, 102, 0.32) !important;
    background: linear-gradient(145deg, rgba(239, 255, 245, 0.94), rgba(255, 255, 255, 0.7)) !important;
    box-shadow: var(--user-panel-soft-shadow) !important;
}

#reg-success-card #build-success-title,
#user-panel-layout #reg-success-card #build-success-title {
    color: #218a4b !important;
}

#user-panel-shutdown-notice {
    border-radius: 26px !important;
    border-color: rgba(232, 77, 103, 0.24) !important;
    background: linear-gradient(145deg, rgba(255, 239, 243, 0.96), rgba(255, 255, 255, 0.76)) !important;
    color: var(--user-panel-text) !important;
    box-shadow: 0 18px 44px rgba(75, 72, 102, 0.16) !important;
}

#user-panel-shutdown-notice h2,
#user-panel-shutdown-notice p,
#user-panel-shutdown-reason {
    letter-spacing: 0 !important;
}

@media (max-width: 768px) {
    .toast-container {
        top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        max-height: min(40vh, 240px);
        overflow-y: auto;
    }
    .toast {
        border-radius: 18px;
        padding: 0.85rem;
        font-size: 0.82rem;
    }
    #user-panel-shutdown-notice {
        border-radius: 20px !important;
    }
    #user-panel-shutdown-notice h2 {
        font-size: 1.35rem !important;
    }
}

/* Additional Premium Styles for Ukakg Sections */
.ukakg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-top: 4rem;
    width: 100%;
}

.ukakg-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3rem 2rem;
    border-radius: 8px;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
}

.ukakg-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, var(--accent-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.ukakg-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

.ukakg-card:hover::before {
    opacity: 0.15;
}

.ukakg-card * {
    position: relative;
    z-index: 1;
}

.ukakg-card h3 {
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: #fff;
}

.ukakg-card p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

.ukakg-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    margin-top: 4.5rem;
}

.flow-step {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem 2.5rem;
    border-radius: 6px;
    text-align: center;
    min-width: 220px;
    flex: 1;
    transition: all 0.5s ease;
}

.flow-step:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--accent);
}

.flow-step h4 {
    color: var(--accent);
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    margin-bottom: 0.5rem;
}

.flow-arrow {
    font-size: 1.5rem;
    color: var(--accent);
    opacity: 0.6;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 5rem;
}

@media (max-width: 868px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }
}

.comp-col {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 3.5rem 2.5rem;
    border-radius: 8px;
}

.comp-col.highlight {
    border-color: rgba(0, 210, 255, 0.3);
    background: rgba(0, 210, 255, 0.02);
    box-shadow: 0 10px 40px rgba(0, 210, 255, 0.05);
}

.comp-col h3 {
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
}

.comp-col.highlight h3 {
    color: var(--accent);
    border-bottom-color: rgba(0, 210, 255, 0.3);
}

.comp-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.comp-col ul li {
    font-size: 1.1rem;
    opacity: 0.8;
    position: relative;
    padding-left: 2rem;
}

.comp-col ul li::before {
    content: '•';
    position: absolute;
    left: 0.2rem;
    color: var(--accent);
    font-size: 1.5rem;
    top: -0.2rem;
}

.comp-col.highlight ul li::before {
    color: var(--accent);
}

/* User Panel Styles */
.user-panel-header {
    text-align: center;
    margin-bottom: 1rem;
}

.user-panel-tabs {
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    margin: 1.5rem 0;
    background: rgba(255,255,255,0.03);
    padding: 0.3rem;
    border-radius: 4px;
}

.panel-tab {
    background: none;
    border: none;
    color: #fff;
    opacity: 0.4;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    cursor: pointer;
    padding: 0.6rem 0.8rem;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.panel-tab.active {
    opacity: 1;
    background: rgba(255,255,255,0.07);
    color: var(--accent);
}

.tab-content {
    display: none;
    padding: 1rem 0;
    min-height: 200px;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.4s ease forwards;
}

.org-list::-webkit-scrollbar {
    width: 4px;
}

.org-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}

.org-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
}

/* Extended User Panel Styles */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.info-item {
    background: rgba(255,255,255,0.03);
    padding: 0.8rem;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.05);
}

.info-item label {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    opacity: 0.4;
    margin-bottom: 0.2rem;
}

.info-item span {
    font-size: 0.85rem;
    font-weight: 500;
}

.pv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.pv-card {
    background: linear-gradient(135deg, rgba(255,215,0,0.05), rgba(255,255,255,0.02));
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid rgba(255,215,0,0.1);
    text-align: center;
}

.pv-card label {
    font-size: 0.55rem;
    text-transform: uppercase;
    opacity: 0.5;
    display: block;
    margin-bottom: 0.4rem;
}

.pv-card .val {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent);
}

.points-summary-row {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.pt-box {
    flex: 1;
    background: rgba(255,255,255,0.02);
    padding: 0.6rem;
    border-radius: 4px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.05);
}

.pt-box label {
    font-size: 0.5rem;
    display: block;
    opacity: 0.4;
    text-transform: uppercase;
}

.pt-box span {
    font-size: 0.9rem;
    font-weight: 500;
}

.table-wrapper {
    overflow-x: auto;
    margin-top: 1rem;
}

.panel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.panel-table th {
    text-align: left;
    padding: 0.8rem 0.5rem;
    opacity: 0.4;
    text-transform: uppercase;
    font-size: 0.6rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.panel-table td {
    padding: 0.8rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.panel-table.small {
    font-size: 0.7rem;
}

.rewards-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.reward-box {
    background: rgba(255,255,255,0.02);
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.05);
}

.reward-box.highlight {
    background: rgba(255,215,0,0.03);
    border-color: rgba(255,215,0,0.2);
}

.reward-box label {
    font-size: 0.6rem;
    opacity: 0.5;
    display: block;
    margin-bottom: 0.3rem;
}

.reward-box .val {
    font-size: 1.2rem;
    font-weight: 600;
}

/* Mock Tree View Styles */
.mock-tree-view {
    padding: 2rem 0;
    display: flex;
    justify-content: center;
}

.tree-node {
    text-align: center;
    position: relative;
    padding: 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    min-width: 120px;
}

.tree-node .node-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
}

.tree-node .node-sub {
    font-size: 0.6rem;
    opacity: 0.5;
}

.tree-connectors {
    height: 30px;
    position: relative;
}

.connector {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.connector.left { left: 0; border-right: 1px solid rgba(255,255,255,0.1); border-top-left-radius: 10px; }
.connector.right { right: 0; border-left: 1px solid rgba(255,255,255,0.1); border-top-right-radius: 10px; }

.tree-children {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.tree-children .tree-node {
    padding: 0.6rem;
    min-width: 100px;
}

/* Points Styles */
.points-ledger-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.point-tab {
    flex: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    color: #fff;
    font-size: 0.6rem;
    padding: 0.5rem;
    cursor: pointer;
    text-transform: uppercase;
}

.point-tab.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}

.point-sub-view { display: none; }
.point-sub-view.active { display: block; }

.point-balance-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0));
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 1.5rem;
}

.point-balance-card label {
    font-size: 0.7rem;
    opacity: 0.5;
}

.point-balance-card .val {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
}

/* Settings Styles */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255,255,255,0.02);
    border-radius: 4px;
}

.setting-item label {
    font-size: 0.65rem;
    opacity: 0.4;
    display: block;
}

.setting-item span {
    font-size: 0.8rem;
}

.mini-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-size: 0.6rem;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
}

.accent-text { color: var(--accent); }
.status-active { color: #00ff88; font-size: 0.7rem; text-transform: uppercase; }
.status-inactive { color: #ff4444; font-size: 0.7rem; text-transform: uppercase; }

.reg-calc-box {
    margin: 1rem 0;
    background: rgba(255,215,0,0.05);
    padding: 1rem;
    border-radius: 4px;
}

.calc-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin-bottom: 0.4rem;
}

@media (max-width: 768px) {
    .info-grid, .pv-grid, .rewards-summary-grid {
        grid-template-columns: 1fr;
    }

    .user-panel-global-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .user-panel-global-title {
        flex: 1 1 210px;
        font-size: 1.25rem;
        letter-spacing: 0.08rem;
    }

    .user-panel-global-logout {
        max-width: 100%;
        padding-inline: 0.85rem;
        white-space: nowrap;
    }
}

/* Premium Sidebar Layout */
.panel-layout {
    display: flex;
    min-height: 85vh;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
}

.panel-sidebar {
    width: 240px;
    background: rgba(255,255,255,0.02);
    border-right: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    padding: 2rem 0;
    position: relative;
    z-index: 10;
}

.sidebar-header {
    padding: 0 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: var(--accent);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.user-meta .u-name { display: block; font-size: 0.9rem; font-weight: 600; color: #fff; }
.user-meta .u-id { display: block; font-size: 0.65rem; opacity: 0.5; }

.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.side-tab {
    background: none;
    border: none;
    color: #fff;
    padding: 1.2rem 1.5rem;
    text-align: left;
    font-size: 0.75rem;
    letter-spacing: 0.1rem;
    opacity: 0.4;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.side-tab .icon { font-size: 1rem; }
.side-tab:hover { opacity: 0.7; background: rgba(255,255,255,0.02); }
.side-tab.active {
    opacity: 1;
    background: rgba(255,215,0,0.05);
    border-right: 2px solid var(--accent);
    color: var(--accent);
}

.sidebar-footer { padding: 1rem 1.5rem; }
.logout-link {
    background: none;
    border: none;
    color: #ff4444;
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
    cursor: pointer;
    opacity: 0.7;
}

.user-panel-global-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.user-panel-global-title {
    margin: 0;
    min-width: 0;
    color: var(--accent);
    font-size: 1.8rem;
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.user-panel-global-logout {
    flex: 0 0 auto;
    border: 1px solid rgba(212, 175, 55, 0.58);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--accent);
    min-height: 36px;
    padding: 0.55rem 1rem;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08rem;
    text-transform: none;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.user-panel-global-logout:hover,
.user-panel-global-logout:focus-visible {
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(240, 205, 120, 0.92);
    color: #ffe7aa;
    transform: translateY(-1px);
    outline: none;
}

.user-panel-global-logout:active {
    transform: translateY(0);
}

.user-panel-global-source-title {
    display: none !important;
}

/* Main Content Area */
.panel-main {
    flex: 1;
    padding: 3rem;
    overflow-y: auto;
    position: relative;
}

.section-title {
    font-size: 1.8rem;
    letter-spacing: 0.3rem;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 2.5rem;
}

/* Overview Cards */
.info-card { padding: 1.5rem; margin-bottom: 2rem; }
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.85rem;
}
.info-row label { opacity: 0.5; font-size: 0.7rem; text-transform: uppercase; }

.stats-row, .balances-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card, .balance-card {
    background: rgba(255,255,255,0.03);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}
.stat-card label, .balance-card label { display: block; font-size: 0.6rem; opacity: 0.4; margin-bottom: 0.5rem; text-transform: uppercase; }
.stat-card .val, .balance-card .val { font-size: 1.4rem; font-weight: 700; color: #fff; }

.pv-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.pv-summary-card {
    min-width: 0;
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid rgba(197, 160, 89, 0.14);
    background: linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 45px rgba(0,0,0,0.22);
    overflow: hidden;
}

.pv-summary-card-cycle {
    border-color: rgba(197, 160, 89, 0.26);
    background: linear-gradient(145deg, rgba(197,160,89,0.11), rgba(255,255,255,0.025));
}

.pv-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 2rem;
    margin-bottom: 1.2rem;
}

.pv-summary-head h4 {
    margin: 0;
    color: rgba(245,245,247,0.72);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08rem;
    line-height: 1.35;
    text-transform: uppercase;
}

.pv-leg-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.pv-leg-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.32rem 0.5rem;
    border: 1px solid rgba(197,160,89,0.18);
    border-radius: 999px;
    background: rgba(0,0,0,0.2);
    white-space: nowrap;
}

.pv-leg-badge small {
    color: rgba(245,245,247,0.45);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
}

.pv-leg-badge strong {
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

.pv-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.pv-metric {
    min-width: 0;
    padding: 0.9rem 0.8rem;
    border-radius: 6px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.055);
}

.pv-side-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.pv-side-status-note {
    margin: 0.85rem 0 0;
    color: rgba(220, 239, 255, 0.62);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.45;
}

.pv-side-status-card {
    min-width: 0;
    min-height: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.95rem;
    border-radius: 8px;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.06);
}

.pv-side-status-card.is-weak {
    border-color: rgba(197, 160, 89, 0.28);
    background: linear-gradient(145deg, rgba(197,160,89,0.13), rgba(0,0,0,0.22));
}

.pv-side-status-card.is-strong {
    border-color: rgba(93, 190, 255, 0.24);
    background: linear-gradient(145deg, rgba(93,190,255,0.12), rgba(0,0,0,0.22));
}

.pv-side-status-card.is-balanced {
    border-color: rgba(176, 203, 232, 0.22);
    background: linear-gradient(145deg, rgba(176,203,232,0.08), rgba(0,0,0,0.22));
}

.pv-side-status-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.pv-side-status-card label,
.pv-side-status-row span {
    color: rgba(245,245,247,0.5);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04rem;
    line-height: 1.35;
    text-transform: uppercase;
}

.pv-side-status-row strong {
    min-width: 0;
    color: #fff;
    font-weight: 900;
    line-height: 1.05;
    overflow-wrap: anywhere;
    font-size: 1.45rem;
}

.pv-side-status-row strong.is-weak { color: #E9D18B; }
.pv-side-status-row strong.is-strong { color: #6BE4FF; }
.pv-side-status-row strong.is-balanced { color: #DCEFFF; }

.pv-metric label,
.pv-status-row label {
    display: block;
    color: rgba(245,245,247,0.48);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04rem;
    line-height: 1.35;
    text-transform: uppercase;
}

.pv-value {
    margin-top: 0.35rem;
    color: #fff;
    font-size: clamp(1.25rem, 1.4vw, 1.65rem);
    font-weight: 800;
    line-height: 1.08;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pv-status-strip {
    grid-column: 1 / -1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(197, 160, 89, 0.14);
    background: linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 12px 26px rgba(0,0,0,0.16);
}

.pv-status-strip-head {
    flex: 0 0 auto;
    min-width: 0;
}

.pv-status-strip-head h4 {
    margin: 0;
    color: rgba(245,245,247,0.68);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.08rem;
    line-height: 1.35;
    text-transform: uppercase;
}

.pv-status-list {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pv-status-pill {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.065);
    background: rgba(0,0,0,0.18);
}

.pv-status-pill.is-warning {
    border-color: rgba(233, 209, 139, 0.36);
    background: rgba(197,160,89,0.12);
}

.pv-status-pill span {
    min-width: 0;
    color: rgba(245,245,247,0.5);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04rem;
    line-height: 1.25;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.pv-status-value {
    min-width: 0;
    color: rgba(245,245,247,0.9);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.02rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.pv-status-value.is-normal {
    color: rgba(220, 239, 255, 0.9);
}

.pv-status-value.is-warning,
.pv-status-value.is-accent {
    color: #F8EAB4;
}

/* Rewards Hero */
.rewards-hero {
    background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,255,255,0.02));
    padding: 2.5rem;
    border-radius: 12px;
    margin-bottom: 2.5rem;
    border: 1px solid rgba(255,215,0,0.1);
}
.hero-stat.main label { display: block; font-size: 0.8rem; opacity: 0.6; margin-bottom: 0.5rem; }
.hero-stat.main .val { font-size: 3rem; font-weight: 800; color: var(--accent); }

.hero-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.h-stat label { display: block; font-size: 0.6rem; opacity: 0.4; margin-bottom: 0.2rem; }
.h-stat span { font-size: 1.1rem; font-weight: 600; }

/* Network Secondary Tabs */
.network-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 1rem;
}

.net-sub-tab {
    background: none;
    border: none;
    color: #fff;
    font-size: 0.7rem;
    opacity: 0.4;
    cursor: pointer;
    text-transform: uppercase;
}
.net-sub-tab.active { opacity: 1; color: var(--accent); }

.net-section { display: none; animation: fadeIn 0.4s ease; }
.net-section.active { display: block; }

/* Premium Table */
.premium-table {
    width: 100%;
    border-collapse: collapse;
}
.premium-table th { text-align: left; padding: 1rem; font-size: 0.6rem; opacity: 0.4; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.1); }
.premium-table td { padding: 1rem; font-size: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.03); }

/* Mobile Adaptations */
@media (max-width: 992px) {
    .panel-layout { flex-direction: column; }
    .panel-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 1rem 0; }
    .sidebar-nav { flex-direction: row; justify-content: space-around; }
    .side-tab { padding: 1rem; flex-direction: column; gap: 0.3rem; font-size: 0.5rem; text-align: center; }
    .side-tab.active { border-right: none; border-bottom: 2px solid var(--accent); }
    .sidebar-header, .sidebar-footer { display: none; }
    .panel-main { padding: 1.5rem; }
    .section-title { font-size: 1.2rem; margin-bottom: 1.5rem; }
    .stats-row, .balances-row, .hero-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .pv-dashboard-grid { grid-template-columns: 1fr; }
    .pv-summary-card { padding: 1rem; }
    .pv-summary-head { align-items: flex-start; margin-bottom: 1rem; }
}

@media (min-width: 993px) and (max-width: 1440px) {
    .pv-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv-summary-card:last-child { grid-column: span 2; }
    .pv-value { font-size: clamp(1.45rem, 2vw, 2rem); }
}

@media (max-width: 520px) {
    .pv-metric-grid { grid-template-columns: 1fr; }
    .pv-summary-head { flex-direction: column; }
    .pv-leg-badges { justify-content: flex-start; }
    .pv-value { font-size: 1.75rem; }
    .pv-side-status-grid { grid-template-columns: 1fr; }
    .pv-status-strip { align-items: flex-start; flex-direction: column; }
    .pv-status-list { width: 100%; align-items: stretch; }
    .pv-status-pill { flex: 1 1 100%; justify-content: space-between; border-radius: 8px; }
}

@media (max-width: 600px) {
    .register-placement-grid {
        grid-template-columns: 1fr !important;
        gap: 0.9rem !important;
    }

    .register-placement-lookup-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    #reg-placement-id,
    #reg-placement-bu,
    #reg-placement-side {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    #build-lookup-btn {
        width: 100% !important;
        min-height: 42px !important;
        padding: 0.75rem 1rem !important;
        align-self: stretch !important;
    }

    #build-side-label {
        margin-top: 0.9rem !important;
    }

}

#admin-login-analytics-detail-modal,
#admin-user-modal,
#admin-order-modal,
#admin-redemption-modal,
#admin-product-modal {
    --admin-bg: #FFF6E9;
    --admin-bg-2: #FFF2DE;
    --admin-surface: rgba(255, 255, 255, 0.78);
    --admin-surface-strong: rgba(255, 253, 248, 0.92);
    --admin-text: #1F2933;
    --admin-muted: #6B7280;
    --admin-border: rgba(255, 255, 255, 0.9);
    --admin-border-soft: rgba(31, 41, 51, 0.08);
    --admin-pink: #F75F7A;
    --admin-teal: #20C7B5;
    --admin-orange: #FF9F1C;
    --admin-blue: #4A8CFF;
    --admin-green: #65C466;
    --admin-danger: #E84D67;
    --admin-shadow: 0 18px 44px rgba(88, 64, 42, 0.14);
    --admin-soft-shadow: 0 10px 26px rgba(75, 72, 102, 0.1);
}

#admin-login-analytics-detail-modal .modal-content,
#admin-user-modal .modal-content,
#admin-order-modal .modal-content,
#admin-redemption-modal .modal-content,
#admin-product-modal .modal-content {
    overflow-x: hidden;
    color: var(--admin-text) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 201, 71, 0.28) 0 96px, transparent 97px),
        radial-gradient(circle at 100% 8%, rgba(247, 95, 122, 0.16) 0 124px, transparent 125px),
        linear-gradient(145deg, var(--admin-surface-strong) 0%, #FDF7EF 58%, var(--admin-bg-2) 100%) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 28px !important;
    box-shadow: var(--admin-shadow) !important;
    backdrop-filter: blur(18px);
}

#admin-login-analytics-detail-modal .modal-content *,
#admin-user-modal .modal-content *,
#admin-order-modal .modal-content *,
#admin-redemption-modal .modal-content *,
#admin-product-modal .modal-content * {
    letter-spacing: 0 !important;
}

#admin-login-analytics-detail-modal h2,
#admin-user-modal h2,
#admin-order-modal h2,
#admin-redemption-modal h2,
#admin-product-modal h2 {
    margin: 0 0 1rem !important;
    color: var(--admin-text) !important;
    font-size: clamp(1.45rem, 4vw, 2rem) !important;
    line-height: 1.08 !important;
    font-weight: 950 !important;
    text-transform: none !important;
}

#admin-login-analytics-detail-modal h3,
#admin-login-analytics-detail-modal h4,
#admin-user-modal h3,
#admin-user-modal h4,
#admin-order-modal h3,
#admin-order-modal h4,
#admin-redemption-modal h3,
#admin-redemption-modal h4,
#admin-product-modal h3,
#admin-product-modal h4 {
    color: var(--admin-text) !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    text-transform: none !important;
}

#admin-login-analytics-detail-modal label,
#admin-login-analytics-detail-modal small,
#admin-login-analytics-detail-modal [style*="opacity:0.5"],
#admin-login-analytics-detail-modal [style*="opacity: 0.5"],
#admin-user-modal label,
#admin-user-modal small,
#admin-user-modal [style*="opacity:0.5"],
#admin-user-modal [style*="opacity: 0.5"],
#admin-order-modal label,
#admin-order-modal small,
#admin-order-modal [style*="opacity:0.5"],
#admin-order-modal [style*="opacity: 0.5"],
#admin-redemption-modal label,
#admin-redemption-modal small,
#admin-redemption-modal [style*="opacity:0.5"],
#admin-redemption-modal [style*="opacity: 0.5"],
#admin-product-modal label,
#admin-product-modal small,
#admin-product-modal [style*="opacity:0.5"],
#admin-product-modal [style*="opacity: 0.5"] {
    color: var(--admin-muted) !important;
    opacity: 1 !important;
    font-weight: 750 !important;
}

#admin-login-analytics-detail-modal strong,
#admin-login-analytics-detail-modal span,
#admin-login-analytics-detail-modal [style*="color:#fff"],
#admin-login-analytics-detail-modal [style*="color: #fff"],
#admin-user-modal strong,
#admin-user-modal span,
#admin-user-modal [style*="color:#fff"],
#admin-user-modal [style*="color: #fff"],
#admin-order-modal strong,
#admin-order-modal span,
#admin-order-modal [style*="color:#fff"],
#admin-order-modal [style*="color: #fff"],
#admin-redemption-modal strong,
#admin-redemption-modal span,
#admin-redemption-modal [style*="color:#fff"],
#admin-redemption-modal [style*="color: #fff"],
#admin-product-modal strong,
#admin-product-modal span,
#admin-product-modal [style*="color:#fff"],
#admin-product-modal [style*="color: #fff"] {
    color: var(--admin-text) !important;
    text-shadow: none !important;
}

#admin-login-analytics-detail-modal [style*="var(--accent)"],
#admin-login-analytics-detail-modal .gold-text,
#admin-user-modal [style*="var(--accent)"],
#admin-user-modal .gold-text,
#admin-order-modal [style*="var(--accent)"],
#admin-order-modal .gold-text,
#admin-redemption-modal [style*="var(--accent)"],
#admin-redemption-modal .gold-text,
#admin-product-modal [style*="var(--accent)"],
#admin-product-modal .gold-text {
    color: var(--admin-pink) !important;
}

#admin-login-analytics-detail-modal .modal-input,
#admin-user-modal .modal-input,
#admin-order-modal .modal-input,
#admin-redemption-modal .modal-input,
#admin-product-modal .modal-input {
    min-height: 44px;
    color: var(--admin-text) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--admin-border-soft) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 18px rgba(31, 41, 51, 0.06) !important;
    font-size: 0.92rem !important;
    font-weight: 750 !important;
}

#admin-login-analytics-detail-modal .cta-btn,
#admin-user-modal .cta-btn,
#admin-order-modal .cta-btn,
#admin-redemption-modal .cta-btn,
#admin-product-modal .cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--admin-teal), var(--admin-blue)) !important;
    box-shadow: 0 12px 22px rgba(32, 199, 181, 0.22) !important;
    font-weight: 900 !important;
    text-transform: none !important;
}

#admin-login-analytics-detail-modal [style*="background:rgba(255,255,255,0.05)"],
#admin-login-analytics-detail-modal [style*="background: rgba(255,255,255,0.05)"],
#admin-user-modal [style*="background:rgba(255,255,255,0.05)"],
#admin-user-modal [style*="background: rgba(255,255,255,0.05)"],
#admin-order-modal [style*="background:rgba(255,255,255,0.05)"],
#admin-order-modal [style*="background: rgba(255,255,255,0.05)"],
#admin-redemption-modal [style*="background:rgba(255,255,255,0.05)"],
#admin-redemption-modal [style*="background: rgba(255,255,255,0.05)"],
#admin-product-modal [style*="background:rgba(255,255,255,0.05)"],
#admin-product-modal [style*="background: rgba(255,255,255,0.05)"] {
    color: var(--admin-blue) !important;
    background: rgba(74, 140, 255, 0.1) !important;
    border: 1px solid rgba(74, 140, 255, 0.18) !important;
    box-shadow: none !important;
}

#admin-login-analytics-detail-modal [style*="rgba(255,0,0"],
#admin-login-analytics-detail-modal [style*="rgba(255, 0, 0"],
#admin-user-modal [style*="rgba(255,0,0"],
#admin-user-modal [style*="rgba(255, 0, 0"],
#admin-order-modal [style*="rgba(255,0,0"],
#admin-order-modal [style*="rgba(255, 0, 0"],
#admin-redemption-modal [style*="rgba(255,0,0"],
#admin-redemption-modal [style*="rgba(255, 0, 0"],
#admin-product-modal [style*="rgba(255,0,0"],
#admin-product-modal [style*="rgba(255, 0, 0"] {
    color: #fff !important;
    background: linear-gradient(135deg, var(--admin-danger), var(--admin-orange)) !important;
    border: 0 !important;
    box-shadow: 0 12px 22px rgba(232, 77, 103, 0.22) !important;
}

#admin-login-analytics-detail-modal .modal-content div[style*="background"],
#admin-user-modal .modal-content div[style*="background"],
#admin-order-modal .modal-content div[style*="background"],
#admin-redemption-modal .modal-content div[style*="background"],
#admin-product-modal .modal-content div[style*="background"] {
    background: rgba(255, 255, 255, 0.74) !important;
    border-color: var(--admin-border-soft) !important;
    border-radius: 18px !important;
}

#admin-login-analytics-detail-modal .admin-table-wrapper,
#admin-user-modal .admin-table-wrapper,
#admin-order-modal .admin-table-wrapper,
#admin-redemption-modal .admin-table-wrapper,
#admin-product-modal .admin-table-wrapper {
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 20px !important;
}

#admin-login-analytics-detail-modal .modal-close,
#admin-user-modal .modal-close,
#admin-order-modal .modal-close,
#admin-redemption-modal .modal-close,
#admin-product-modal .modal-close {
    color: var(--admin-text) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid var(--admin-border-soft) !important;
    border-radius: 16px !important;
    box-shadow: var(--admin-soft-shadow);
    opacity: 0.85;
}

@media (max-width: 600px) {
    #admin-login-analytics-detail-modal .modal-content,
    #admin-user-modal .modal-content,
    #admin-order-modal .modal-content,
    #admin-redemption-modal .modal-content,
    #admin-product-modal .modal-content {
        width: min(94vw, 650px) !important;
        padding: 1.4rem !important;
        border-radius: 24px !important;
    }
}

/* Assets Page Optimizations */
.cta-btn.x-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.6rem;
    letter-spacing: 0.05rem;
}

#asset-agent-center {
    overflow-x: hidden;
}

#asset-yiyang-ecosystem {
    overflow-x: hidden;
}

.yiyang-ecosystem-view {
    color: #f7f2df;
}

.yiyang-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 0.9rem;
    color: rgba(247,242,223,0.58);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1rem;
}

.yiyang-back-btn {
    margin-bottom: 0;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(233,209,139,0.28) !important;
}

.yiyang-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1fr);
    min-height: 390px;
    padding: clamp(1rem, 1.65vw, 1.45rem);
    gap: clamp(1rem, 2vw, 1.65rem);
    align-items: center;
    justify-content: stretch;
    overflow: hidden;
    border: 1px solid rgba(233,209,139,0.28);
    border-radius: 8px;
    background:
        linear-gradient(120deg, rgba(5,18,40,0.98), rgba(8,35,48,0.98) 54%, rgba(37,35,16,0.96));
    box-shadow: 0 18px 42px rgba(0,0,0,0.3);
}

.yiyang-hero-media {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(233,209,139,0.24);
    border-radius: 8px;
    background: rgba(5,18,40,0.44);
    box-shadow: 0 14px 32px rgba(0,0,0,0.28);
}

.yiyang-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5,18,40,0.12), transparent 38%, rgba(5,18,40,0.18));
    pointer-events: none;
}

.yiyang-hero-media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.yiyang-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.yiyang-hero-content {
    align-self: center;
    min-width: 0;
    max-width: 540px;
    padding: clamp(0.75rem, 2.2vw, 1.75rem);
    z-index: 1;
}

.yiyang-kicker,
.yiyang-panel-label,
.yiyang-section-head span {
    display: block;
    color: #e9d18b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14rem;
}

.yiyang-hero h2 {
    margin: 0.7rem 0 1rem;
    color: #fff8df;
    font-size: clamp(2.45rem, 3.65vw, 3.9rem);
    line-height: 0.98;
    font-weight: 950;
}

.yiyang-title-line {
    display: block;
    white-space: nowrap;
}

html[lang="en"] .yiyang-hero h2 {
    font-size: clamp(2.2rem, 3.15vw, 3.25rem);
    line-height: 1.03;
}

.yiyang-hero p {
    max-width: 500px;
    color: rgba(247,242,223,0.82);
    font-size: clamp(0.95rem, 1.05vw, 1.08rem);
    line-height: 1.68;
}

.yiyang-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.yiyang-hero-tags span {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 32px;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(233,209,139,0.34);
    border-radius: 8px;
    background: rgba(233,209,139,0.09);
    color: #f8e5a8;
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1.25;
    white-space: nowrap;
}

.yiyang-hero-line {
    display: grid;
    gap: 0.25rem;
    max-width: 520px;
    margin-top: 1.1rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(233,209,139,0.22);
}

.yiyang-hero-line strong {
    color: #fff8df;
    font-size: 0.98rem;
}

.yiyang-hero-line span {
    color: rgba(247,242,223,0.66);
    font-size: 0.82rem;
    line-height: 1.55;
}

.yiyang-core-grid,
.yiyang-card-grid,
.yiyang-flow {
    display: grid;
    gap: 1rem;
}

.yiyang-core-section {
    display: block;
    min-height: 0;
    justify-content: initial;
    margin-top: 1.1rem;
    padding: 0;
    overflow: visible;
    background: transparent;
}

.yiyang-core-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.yiyang-core-card,
.yiyang-feature-card,
.yiyang-phase-note,
.yiyang-flow-step {
    border: 1px solid rgba(233,209,139,0.22);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(11,34,57,0.88), rgba(7,55,38,0.76));
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

.yiyang-core-card {
    padding: 1.2rem;
}

.yiyang-core-card.primary {
    background:
        linear-gradient(145deg, rgba(11,34,57,0.92), rgba(12,68,49,0.84));
    border-color: rgba(233,209,139,0.38);
}

.yiyang-core-card.secondary {
    background:
        linear-gradient(145deg, rgba(7,42,53,0.88), rgba(47,54,22,0.78));
}

.yiyang-image-card {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    isolation: isolate;
}

.yiyang-image-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 88% 8%, rgba(233,209,139,0.18), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.07), transparent 38%);
}

.yiyang-image-card > * {
    position: relative;
    z-index: 1;
}

.yiyang-bg-card {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(108deg, rgba(3,12,30,0.84) 0%, rgba(6,21,43,0.54) 46%, rgba(5,18,40,0.18) 100%),
        linear-gradient(180deg, rgba(3,12,30,0.1), rgba(3,12,30,0.56)),
        var(--yiyang-card-bg) !important;
    background-size: cover !important;
    background-position: var(--yiyang-card-bg-position, center) !important;
    background-repeat: no-repeat !important;
}

.yiyang-bg-card::before {
    z-index: 1;
    background:
        radial-gradient(circle at 88% 8%, rgba(233,209,139,0.12), transparent 34%),
        linear-gradient(108deg, rgba(3,12,30,0.8) 0%, rgba(6,21,43,0.5) 44%, rgba(5,18,40,0.08) 100%);
}

.yiyang-card-bg-img {
    position: absolute;
    inset: 0;
    z-index: 0 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--yiyang-card-bg-position, center);
    opacity: 0.78;
    filter: saturate(1.08) contrast(1.05);
    pointer-events: none;
}

.yiyang-bg-card > :not(.yiyang-card-bg-img) {
    position: relative;
    z-index: 2;
}

.yiyang-image-card h3,
.yiyang-image-card h4,
.yiyang-image-card p,
.yiyang-image-card li,
.yiyang-image-card span {
    text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}

.yiyang-card-jiujie-core {
    background:
        linear-gradient(112deg, rgba(3,12,30,0.82) 0%, rgba(6,21,43,0.58) 52%, rgba(5,18,40,0.28) 100%),
        linear-gradient(180deg, rgba(3,12,30,0.16), rgba(3,12,30,0.62)),
        url("/assets/yiyang-card-jiujie-core.jpeg") center 56% / cover no-repeat;
}

.yiyang-card-wellness-products-core {
    background:
        linear-gradient(112deg, rgba(3,12,30,0.82) 0%, rgba(6,21,43,0.56) 52%, rgba(5,18,40,0.26) 100%),
        linear-gradient(180deg, rgba(3,12,30,0.14), rgba(3,12,30,0.6)),
        url("/assets/yiyang-card-wellness-products-core.jpeg") center 48% / cover no-repeat;
}

.yiyang-card-jiujie-service {
    background:
        linear-gradient(112deg, rgba(3,12,30,0.84) 0%, rgba(6,21,43,0.58) 48%, rgba(5,18,40,0.28) 100%),
        linear-gradient(180deg, rgba(3,12,30,0.16), rgba(3,12,30,0.62)),
        url("/assets/yiyang-card-jiujie-service.jpeg") center 44% / cover no-repeat;
}

.yiyang-card-wellness-products {
    background:
        linear-gradient(112deg, rgba(3,12,30,0.78) 0%, rgba(6,21,43,0.5) 50%, rgba(5,18,40,0.22) 100%),
        linear-gradient(180deg, rgba(3,12,30,0.12), rgba(3,12,30,0.58)),
        url("/assets/yiyang-card-wellness-products.jpeg") center 50% / cover no-repeat;
}

.yiyang-core-card h3,
.yiyang-section-head h3,
.yiyang-feature-card h4 {
    margin: 0.35rem 0 0.6rem;
    color: #fff8df;
    line-height: 1.22;
}

.yiyang-core-card h3 {
    font-size: clamp(1.45rem, 2vw, 2rem);
}

.yiyang-feature-card p,
.yiyang-flow-step p,
.yiyang-phase-note p {
    color: rgba(247,242,223,0.72);
    font-size: 0.86rem;
    line-height: 1.62;
}

.yiyang-core-card ul {
    display: grid;
    gap: 0.5rem;
    margin: 0.95rem 0 0;
    padding: 0;
    list-style: none;
}

.yiyang-core-card li {
    position: relative;
    padding-left: 1.05rem;
    color: rgba(247,242,223,0.78);
    font-size: 0.86rem;
    line-height: 1.45;
}

.yiyang-core-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e9d18b;
}

.yiyang-card-title-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.yiyang-card-icon,
.yiyang-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(233,209,139,0.42);
    border-radius: 8px;
    background: rgba(233,209,139,0.12);
    color: #f8e5a8;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.yiyang-card-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
}

.yiyang-section {
    display: block;
    min-height: 0;
    justify-content: initial;
    margin-top: 1.15rem;
    padding: 0;
    overflow: visible;
    background: transparent;
}

.yiyang-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.65rem;
}

.yiyang-section-head.compact {
    margin-bottom: 0.7rem;
}

.yiyang-section-head h3 {
    margin-bottom: 0;
}

.yiyang-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.yiyang-feature-card {
    min-height: 132px;
    padding: 1rem;
}

.yiyang-feature-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
}

.yiyang-section-head p {
    max-width: 660px;
    margin: 0.45rem 0 0;
    color: rgba(247,242,223,0.72);
    font-size: 0.86rem;
    line-height: 1.62;
}

.yiyang-mall-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: clamp(1rem, 1.9vw, 1.35rem);
    border: 1px solid rgba(233,209,139,0.22);
    border-radius: 8px;
    background:
        radial-gradient(circle at 12% 0%, rgba(42,93,168,0.24), transparent 34%),
        linear-gradient(140deg, rgba(5,18,40,0.97), rgba(7,24,48,0.92) 58%, rgba(27,30,45,0.94));
    box-shadow: 0 18px 42px rgba(0,0,0,0.28);
}

.yiyang-mall-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.9rem, 1.5vw, 1.15rem);
    width: 100%;
    min-width: 0;
}

.yiyang-mall-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 188px;
    padding: 0.9rem;
    overflow: hidden;
    border: 1px solid rgba(233,209,139,0.2);
    border-radius: 8px;
    background:
        linear-gradient(155deg, rgba(9,26,54,0.92), rgba(6,16,34,0.92));
    box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}

.yiyang-mall-card.featured {
    min-height: 282px;
    padding: clamp(1.05rem, 1.7vw, 1.35rem);
    background:
        radial-gradient(circle at 14% 14%, rgba(233,209,139,0.14), transparent 28%),
        linear-gradient(145deg, rgba(10,36,65,0.98), rgba(5,18,40,0.95) 64%, rgba(39,35,24,0.86));
    border-color: rgba(233,209,139,0.36);
    box-shadow: 0 18px 34px rgba(0,0,0,0.26);
}

.yiyang-mall-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent 38%);
    opacity: 0.55;
}

.yiyang-mall-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(233,209,139,0.34);
    border-radius: 8px;
    background:
        radial-gradient(circle at 34% 24%, rgba(255,248,223,0.22), transparent 28%),
        linear-gradient(145deg, rgba(233,209,139,0.18), rgba(8,30,66,0.64));
}

.yiyang-mall-card.featured .yiyang-mall-visual {
    width: 68px;
    height: 68px;
    margin-bottom: 0.9rem;
}

.yiyang-mall-visual::before,
.yiyang-mall-visual::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(233,209,139,0.2);
}

.yiyang-mall-visual::before {
    width: 24px;
    height: 34px;
    border-radius: 8px 8px 6px 6px;
    background: rgba(255,248,223,0.08);
}

.yiyang-mall-visual::after {
    right: 9px;
    bottom: 9px;
    width: 20px;
    height: 15px;
    border-radius: 6px;
    background: rgba(6,24,43,0.36);
}

.yiyang-mall-visual.tcm::before,
.yiyang-mall-visual.consult::before,
.yiyang-mall-visual.service::before {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(233,209,139,0.1);
}

.yiyang-mall-visual.tcm::after,
.yiyang-mall-visual.consult::after,
.yiyang-mall-visual.service::after {
    right: 13px;
    bottom: 13px;
    width: 24px;
    height: 5px;
    border-radius: 999px;
    transform: rotate(-24deg);
    background: rgba(233,209,139,0.24);
}

.yiyang-mall-visual span {
    position: relative;
    z-index: 1;
    color: #f8e5a8;
    font-size: 0.72rem;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    overflow-wrap: anywhere;
}

.yiyang-mall-card.featured .yiyang-mall-visual span {
    font-size: 0.82rem;
}

.yiyang-mall-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.yiyang-mall-copy h4 {
    margin: 0 0 0.38rem;
    color: #fff8df;
    font-size: 0.98rem;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.yiyang-mall-card.featured .yiyang-mall-copy h4 {
    font-size: clamp(1.16rem, 1.65vw, 1.36rem);
}

.yiyang-mall-copy p {
    margin: 0;
    color: rgba(247,242,223,0.72);
    font-size: 0.78rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.yiyang-mall-card.featured .yiyang-mall-copy p {
    font-size: 0.86rem;
    max-width: 34rem;
}

.yiyang-mall-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
    margin: 0.8rem 0 0;
    padding: 0;
}

.yiyang-mall-points span {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.32rem 0.56rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.045);
    color: rgba(247,242,223,0.82);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.2;
}

.yiyang-mall-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.36rem;
    margin: 0.75rem 0 0.85rem;
}

.yiyang-mall-tags span {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 24px;
    padding: 0.25rem 0.48rem;
    border: 1px solid rgba(233,209,139,0.26);
    border-radius: 999px;
    background: rgba(233,209,139,0.08);
    color: #f8e5a8;
    font-size: 0.66rem;
    font-weight: 850;
    line-height: 1.2;
    white-space: normal;
}

.yiyang-preview-btn {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    min-height: 34px;
    margin-top: auto;
    padding: 0.42rem 0.68rem;
    border: 1px solid rgba(233,209,139,0.34);
    border-radius: 8px;
    background: rgba(233,209,139,0.12);
    color: #fff8df;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.2;
    cursor: default;
}

.yiyang-mall-card-link {
    cursor: pointer;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.yiyang-mall-card-link:hover,
.yiyang-mall-card-link:focus-visible {
    border-color: rgba(233,209,139,0.58);
    box-shadow: 0 20px 38px rgba(0,0,0,0.34), 0 0 0 1px rgba(233,209,139,0.1);
    transform: translateY(-2px);
    outline: none;
}

.yiyang-mall-card-link .yiyang-preview-btn {
    position: relative;
    z-index: 3;
    cursor: pointer;
}

.yiyang-preview-btn.secondary {
    min-height: 30px;
    padding: 0.36rem 0.6rem;
    border-color: rgba(233,209,139,0.22);
    background: rgba(255,255,255,0.04);
    color: rgba(255,248,223,0.86);
    font-size: 0.68rem;
}

.yiyang-usage-preview {
    margin-top: 1rem;
    padding: 0.85rem;
    border: 1px solid rgba(233,209,139,0.2);
    border-radius: 8px;
    background: rgba(6,24,43,0.62);
}

.yiyang-usage-preview h4 {
    margin: 0 0 0.7rem;
    color: #fff8df;
    font-size: 0.92rem;
}

.yiyang-usage-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.yiyang-usage-step {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    min-height: 54px;
    padding: 0.65rem;
    border: 1px solid rgba(233,209,139,0.18);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
}

.yiyang-usage-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    height: 34px;
    border: 1px solid rgba(233,209,139,0.34);
    border-radius: 50%;
    color: #e9d18b;
    font-size: 0.72rem;
    font-weight: 950;
}

.yiyang-usage-step strong {
    min-width: 0;
    color: #fff8df;
    font-size: 0.8rem;
    line-height: 1.35;
}

.yiyang-mall-note {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.85rem;
    padding: 0.68rem 0.78rem;
    border: 1px solid rgba(233,209,139,0.18);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
}

.yiyang-mall-note strong {
    flex: 0 0 auto;
    color: #e9d18b;
    font-size: 0.78rem;
    white-space: nowrap;
}

.yiyang-mall-note p {
    margin: 0;
    color: rgba(247,242,223,0.68);
    font-size: 0.72rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.yiyang-supplement-mall-view {
    display: block;
    width: 100%;
    min-width: 0;
    color: #f8fbff;
}

.yiyang-supplement-hero,
.yiyang-supplement-section,
.yiyang-supplement-join {
    border: 1px solid rgba(233,209,139,0.24);
    border-radius: 8px;
    background:
        radial-gradient(circle at 12% 0%, rgba(42,93,168,0.24), transparent 34%),
        linear-gradient(140deg, rgba(5,18,40,0.97), rgba(7,24,48,0.92) 58%, rgba(27,30,45,0.94));
    box-shadow: 0 18px 42px rgba(0,0,0,0.28);
}

.yiyang-supplement-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: clamp(1rem, 2vw, 1.45rem);
    align-items: stretch;
    padding: clamp(1rem, 2.3vw, 1.55rem);
    overflow: hidden;
}

.yiyang-supplement-hero-copy {
    min-width: 0;
    padding: 0.25rem 0;
}

.yiyang-supplement-title {
    margin: 0.7rem 0 0.85rem;
    color: #fff8df;
    font-size: clamp(2rem, 3.15vw, 3.15rem);
    line-height: 1.05;
    font-weight: 950;
}

.yiyang-supplement-title span {
    display: block;
    white-space: nowrap;
}

.yiyang-supplement-title-en {
    margin: 0 0 0.85rem;
    color: rgba(233,209,139,0.78);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: uppercase;
}

.yiyang-supplement-hero-copy p,
.yiyang-supplement-join p {
    max-width: 650px;
    color: rgba(247,242,223,0.76);
    font-size: 0.96rem;
    line-height: 1.68;
}

.yiyang-supplement-hero-visual {
    position: relative;
    min-height: 260px;
    border: 1px solid rgba(233,209,139,0.26);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(108deg, rgba(3,12,30,0.78), rgba(6,21,43,0.38)),
        var(--yiyang-card-bg);
}

.yiyang-supplement-shelf {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 2;
    padding: 0.9rem;
    border: 1px solid rgba(233,209,139,0.24);
    border-radius: 8px;
    background: rgba(4,13,31,0.68);
    backdrop-filter: blur(12px);
}

.yiyang-supplement-shelf span,
.yiyang-supplement-shelf small {
    display: block;
    color: rgba(233,209,139,0.86);
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.4;
}

.yiyang-supplement-shelf strong {
    display: block;
    margin: 0.25rem 0;
    color: #fff8df;
    font-size: 1.05rem;
    line-height: 1.25;
}

.yiyang-supplement-section {
    padding: clamp(1rem, 1.9vw, 1.35rem);
}

.yiyang-brand-grid,
.yiyang-product-grid {
    display: grid;
    min-width: 0;
    gap: 0.85rem;
}

.yiyang-brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.yiyang-brand-card,
.yiyang-product-card {
    min-width: 0;
    border: 1px solid rgba(233,209,139,0.2);
    border-radius: 8px;
    background:
        radial-gradient(circle at 16% 0%, rgba(233,209,139,0.11), transparent 32%),
        linear-gradient(155deg, rgba(9,26,54,0.92), rgba(6,16,34,0.92));
    box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}

.yiyang-brand-card {
    display: flex;
    flex-direction: column;
    min-height: 235px;
    padding: 0.95rem;
}

.yiyang-brand-badge {
    align-self: flex-start;
    max-width: 100%;
    min-height: 24px;
    padding: 0.25rem 0.52rem;
    border: 1px solid rgba(233,209,139,0.28);
    border-radius: 999px;
    background: rgba(233,209,139,0.08);
    color: #f8e5a8;
    font-size: 0.66rem;
    font-weight: 850;
    line-height: 1.2;
}

.yiyang-brand-badge.recommended {
    border-color: rgba(92,214,179,0.32);
    color: #a9f2d9;
    background: rgba(92,214,179,0.08);
}

.yiyang-brand-badge.pending {
    border-color: rgba(255,248,223,0.24);
    color: rgba(255,248,223,0.78);
    background: rgba(255,255,255,0.05);
}

.yiyang-brand-card h4,
.yiyang-product-card h4,
.yiyang-supplement-join h3 {
    margin: 0.75rem 0 0.45rem;
    color: #fff8df;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.yiyang-brand-card h4 {
    font-size: 1.05rem;
}

.yiyang-brand-card p,
.yiyang-product-card p,
.yiyang-brand-meta {
    color: rgba(247,242,223,0.72);
    font-size: 0.78rem;
    line-height: 1.52;
    overflow-wrap: anywhere;
}

.yiyang-brand-card p {
    margin: 0;
}

.yiyang-brand-meta {
    margin: 0.8rem 0 0.85rem;
    padding-top: 0.72rem;
    border-top: 1px solid rgba(233,209,139,0.14);
}

.yiyang-category-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.yiyang-category-chip-row span,
.yiyang-product-tags span {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border-radius: 999px;
    font-weight: 850;
    line-height: 1.2;
}

.yiyang-category-chip-row span {
    min-height: 30px;
    padding: 0.35rem 0.68rem;
    border: 1px solid rgba(233,209,139,0.26);
    background: rgba(233,209,139,0.08);
    color: #f8e5a8;
    font-size: 0.74rem;
}

.yiyang-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.yiyang-product-card {
    display: flex;
    flex-direction: column;
    min-height: 292px;
    padding: 0.82rem;
}

.yiyang-product-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 116px;
    border: 1px solid rgba(233,209,139,0.22);
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(circle at 52% 24%, rgba(255,248,223,0.22), transparent 22%),
        linear-gradient(145deg, rgba(15,66,83,0.82), rgba(5,18,40,0.94));
}

.yiyang-product-visual::before {
    content: "";
    position: absolute;
    width: 44px;
    height: 64px;
    border: 1px solid rgba(233,209,139,0.34);
    border-radius: 12px 12px 8px 8px;
    background: linear-gradient(180deg, rgba(255,248,223,0.18), rgba(233,209,139,0.08));
    box-shadow: 42px 16px 0 -13px rgba(233,209,139,0.16), -36px 20px 0 -16px rgba(92,214,179,0.12);
}

.yiyang-product-visual span {
    position: relative;
    z-index: 1;
    color: #fff8df;
    font-size: 0.8rem;
    font-weight: 950;
}

.yiyang-product-visual.nutrition { background: linear-gradient(145deg, rgba(56,83,126,0.82), rgba(5,18,40,0.94)); }
.yiyang-product-visual.sleep { background: linear-gradient(145deg, rgba(49,63,102,0.84), rgba(5,18,40,0.94)); }
.yiyang-product-visual.digestion { background: linear-gradient(145deg, rgba(37,86,66,0.82), rgba(5,18,40,0.94)); }
.yiyang-product-visual.women { background: linear-gradient(145deg, rgba(96,55,86,0.82), rgba(5,18,40,0.94)); }
.yiyang-product-visual.senior { background: linear-gradient(145deg, rgba(91,75,38,0.82), rgba(5,18,40,0.94)); }
.yiyang-product-visual.home { background: linear-gradient(145deg, rgba(60,76,83,0.82), rgba(5,18,40,0.94)); }
.yiyang-product-visual.tea { background: linear-gradient(145deg, rgba(31,83,79,0.82), rgba(5,18,40,0.94)); }

.yiyang-product-card h4 {
    font-size: 0.96rem;
}

.yiyang-product-card p {
    margin: 0;
}

.yiyang-product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    margin: 0.72rem 0 0.85rem;
}

.yiyang-product-tags span {
    min-height: 24px;
    padding: 0.24rem 0.48rem;
    border: 1px solid rgba(233,209,139,0.24);
    background: rgba(233,209,139,0.08);
    color: #f8e5a8;
    font-size: 0.64rem;
}

.yiyang-brand-card .yiyang-preview-btn,
.yiyang-product-card .yiyang-preview-btn {
    margin-top: auto;
    cursor: pointer;
}

.yiyang-supplement-join {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.15rem;
    padding: clamp(1rem, 2vw, 1.35rem);
}

.yiyang-supplement-join h3 {
    margin-top: 0.35rem;
    font-size: clamp(1.28rem, 2vw, 1.7rem);
}

.yiyang-supplement-join-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

.yiyang-supplement-mall-view .yiyang-section {
    margin-top: 0.9rem;
}

.yiyang-supplement-return-btn {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.42rem;
    min-height: 36px;
    margin: 0 0 0.85rem;
    padding: 0.42rem 0.72rem;
    border: 1px solid rgba(233,209,139,0.38);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(233,209,139,0.18), rgba(255,255,255,0.04));
    color: #fff8df;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0,0,0,0.2);
}

.yiyang-supplement-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr);
    min-height: 0;
    padding: clamp(0.95rem, 1.8vw, 1.25rem);
}

.yiyang-supplement-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.yiyang-supplement-title {
    max-width: 620px;
    margin: 0.5rem 0 0.72rem;
    font-size: clamp(2rem, 2.85vw, 2.8rem);
}

.yiyang-supplement-hero-copy p {
    max-width: 620px;
    margin: 0;
}

.yiyang-supplement-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.58rem;
    margin-top: 1rem;
}

.yiyang-supplement-hero-stats div {
    min-width: 0;
    min-height: 76px;
    padding: 0.68rem;
    border: 1px solid rgba(233,209,139,0.2);
    border-radius: 8px;
    background: rgba(255,255,255,0.045);
}

.yiyang-supplement-hero-stats strong,
.yiyang-supplement-hero-stats span {
    display: block;
    line-height: 1.24;
}

.yiyang-supplement-hero-stats strong {
    color: #fff8df;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 950;
}

.yiyang-supplement-hero-stats span {
    margin-top: 0.28rem;
    color: rgba(247,242,223,0.7);
    font-size: 0.72rem;
    font-weight: 800;
}

.yiyang-supplement-hero-visual {
    min-height: 0;
    height: clamp(240px, 28vw, 320px);
    background:
        radial-gradient(circle at 12% 12%, rgba(233,209,139,0.2), transparent 28%),
        linear-gradient(145deg, rgba(7,26,56,0.96), rgba(6,16,34,0.96));
}

.yiyang-supplement-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 52%;
    opacity: 0.56;
    filter: saturate(1.06) contrast(1.06);
}

.yiyang-supplement-mall-view img.image-load-failed {
    display: none !important;
}

.yiyang-supplement-shelf {
    top: 1rem;
    right: 1rem;
    bottom: auto;
    left: auto;
    width: min(82%, 270px);
}

.yiyang-supplement-hero-product-row {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.9rem;
    min-height: 110px;
    padding: 0.7rem;
    border: 1px solid rgba(233,209,139,0.16);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(4,13,31,0.18), rgba(4,13,31,0.62));
}

.yiyang-supplement-hero-product-row img {
    position: relative;
    z-index: 1;
    width: 68px;
    height: 86px;
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(233,209,139,0.32);
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    box-shadow: 0 16px 24px rgba(0,0,0,0.28);
}

.yiyang-supplement-hero-product-row img:nth-child(2) {
    width: 78px;
    height: 104px;
}

.mall-pack {
    display: block;
    border: 1px solid rgba(233,209,139,0.35);
    background: linear-gradient(150deg, rgba(255,248,223,0.84), rgba(233,209,139,0.4));
    box-shadow: 0 16px 24px rgba(0,0,0,0.26);
}

.mall-pack.box {
    width: 70px;
    height: 76px;
    border-radius: 8px 8px 5px 5px;
}

.mall-pack.bottle {
    width: 44px;
    height: 92px;
    border-radius: 16px 16px 8px 8px;
    background: linear-gradient(150deg, rgba(92,214,179,0.52), rgba(233,209,139,0.36));
}

.mall-pack.sachet {
    width: 54px;
    height: 68px;
    border-radius: 12px 12px 7px 7px;
    background: linear-gradient(150deg, rgba(96,55,86,0.52), rgba(233,209,139,0.34));
}

.yiyang-supplement-value-section {
    padding: clamp(1rem, 1.9vw, 1.35rem);
    border: 1px solid rgba(233,209,139,0.2);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(5,18,40,0.94), rgba(9,38,51,0.88));
}

.yiyang-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.yiyang-value-card {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid rgba(233,209,139,0.18);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
}

.yiyang-value-card span {
    display: inline-flex;
    margin-bottom: 0.45rem;
    color: #e9d18b;
    font-size: 0.72rem;
    font-weight: 950;
}

.yiyang-value-card strong {
    display: block;
    color: #fff8df;
    font-size: 0.9rem;
    line-height: 1.3;
}

.yiyang-value-card p {
    margin: 0.38rem 0 0;
    color: rgba(247,242,223,0.68);
    font-size: 0.74rem;
    line-height: 1.5;
}

.yiyang-supplement-section.compact {
    padding-bottom: 1rem;
}

.yiyang-brand-card {
    position: relative;
    min-height: 0;
    padding: 0.78rem;
    overflow: hidden;
}

.yiyang-brand-cover {
    position: relative;
    min-height: 112px;
    margin-bottom: 0.8rem;
    overflow: hidden;
    border: 1px solid rgba(233,209,139,0.18);
    border-radius: 8px;
    background:
        radial-gradient(circle at 82% 18%, rgba(233,209,139,0.2), transparent 28%),
        linear-gradient(145deg, rgba(20,72,73,0.86), rgba(6,16,34,0.92));
}

.yiyang-brand-cover.herbal { background: linear-gradient(145deg, rgba(34,88,68,0.86), rgba(6,16,34,0.92)); }
.yiyang-brand-cover.nutrition { background: linear-gradient(145deg, rgba(46,69,114,0.88), rgba(6,16,34,0.92)); }
.yiyang-brand-cover.home { background: linear-gradient(145deg, rgba(83,77,55,0.86), rgba(6,16,34,0.92)); }

.yiyang-brand-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    opacity: 0.82;
    filter: saturate(1.04) contrast(1.04);
}

.yiyang-brand-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4,13,31,0.12), rgba(4,13,31,0.72)),
        radial-gradient(circle at 10% 8%, rgba(233,209,139,0.24), transparent 26%);
}

.yiyang-brand-logo {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(233,209,139,0.4);
    border-radius: 50%;
    background: rgba(4,13,31,0.66);
    color: #fff8df;
    font-size: 1rem;
    font-weight: 950;
    z-index: 2;
}

.brand-product-mini-row {
    position: absolute;
    right: 0.7rem;
    bottom: 0.7rem;
    display: flex;
    align-items: flex-end;
    gap: 0.38rem;
    z-index: 2;
}

.brand-product-mini-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 24px;
    padding: 0.24rem 0.36rem;
    border: 1px solid rgba(233,209,139,0.28);
    border-radius: 999px;
    background: rgba(4,13,31,0.62);
    color: rgba(255,248,223,0.88);
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 16px rgba(0,0,0,0.26);
}

.brand-product-mini-row span:nth-child(2) {
    min-width: 34px;
}

.brand-product-mini-row span:nth-child(3) {
    min-width: 34px;
}

.yiyang-brand-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.yiyang-brand-title-row h4 {
    margin-top: 0;
}

.yiyang-brand-title-row .yiyang-brand-badge {
    flex: 0 0 auto;
}

.yiyang-brand-products {
    display: flex;
    flex-wrap: wrap;
    gap: 0.34rem;
    margin: 0 0 0.8rem;
}

.yiyang-brand-products span {
    min-height: 22px;
    padding: 0.22rem 0.44rem;
    border: 1px solid rgba(233,209,139,0.18);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: rgba(247,242,223,0.74);
    font-size: 0.62rem;
    font-weight: 800;
}

.yiyang-category-chip-row {
    display: none;
}

.yiyang-category-nav {
    display: flex;
    gap: 0.48rem;
    max-width: 100%;
    padding: 0.35rem;
    overflow-x: auto;
    border: 1px solid rgba(233,209,139,0.18);
    border-radius: 999px;
    background: rgba(4,13,31,0.52);
}

.yiyang-category-nav button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0.38rem 0.78rem;
    border: 1px solid rgba(233,209,139,0.18);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: rgba(247,242,223,0.76);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.2;
    cursor: default;
}

.yiyang-category-nav button.active {
    border-color: rgba(233,209,139,0.48);
    background: linear-gradient(135deg, rgba(233,209,139,0.88), rgba(255,248,223,0.68));
    color: #061222;
}

.yiyang-product-card {
    min-height: 318px;
    padding: 0.78rem;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.yiyang-product-card:hover {
    transform: translateY(-2px);
    border-color: rgba(233,209,139,0.36);
    box-shadow: 0 18px 32px rgba(0,0,0,0.28);
}

.yiyang-product-visual {
    min-height: 0;
    height: 168px;
    padding: 0.42rem;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,248,223,0.26), transparent 24%),
        linear-gradient(145deg, rgba(15,66,83,0.82), rgba(5,18,40,0.94));
}

.yiyang-product-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border: 1px solid rgba(233,209,139,0.18);
    border-radius: 7px;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,248,223,0.18), transparent 28%),
        rgba(4,13,31,0.38);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 12px 22px rgba(0,0,0,0.24);
}

.yiyang-product-visual::before {
    display: none;
}

.product-pack {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 94px;
    border: 1px solid rgba(233,209,139,0.38);
    border-radius: 10px 10px 6px 6px;
    background: linear-gradient(160deg, rgba(255,248,223,0.86), rgba(233,209,139,0.36));
    color: #071226;
    box-shadow: 0 18px 26px rgba(0,0,0,0.28);
}

.yiyang-product-visual .product-pack {
    position: absolute;
    right: 0.68rem;
    bottom: 0.68rem;
    width: 54px;
    height: 42px;
    min-width: 0;
    border-radius: 8px;
    opacity: 0.9;
    pointer-events: none;
    box-shadow: 0 10px 18px rgba(0,0,0,0.24);
}

.yiyang-product-visual .product-pack::after {
    display: none;
}

.yiyang-product-visual .product-pack i {
    width: 24px;
    height: 3px;
    margin-bottom: 0.18rem;
}

.yiyang-product-visual .product-pack b {
    font-size: 0.48rem;
}

.yiyang-product-visual .product-pack small {
    max-width: 44px;
    margin-top: 0.12rem;
    font-size: 0.34rem;
}

.product-pack::after {
    content: "";
    position: absolute;
    right: -16px;
    bottom: -8px;
    width: 34px;
    height: 46px;
    border: 1px solid rgba(233,209,139,0.22);
    border-radius: 8px 8px 5px 5px;
    background: rgba(4,13,31,0.32);
}

.product-pack i {
    display: block;
    width: 34px;
    height: 4px;
    margin-bottom: 0.42rem;
    border-radius: 999px;
    background: rgba(4,13,31,0.42);
}

.product-pack b,
.product-pack small {
    position: relative;
    z-index: 1;
    line-height: 1.15;
    text-align: center;
}

.product-pack b {
    font-size: 0.74rem;
    font-weight: 950;
}

.product-pack small {
    max-width: 60px;
    margin-top: 0.25rem;
    color: rgba(7,18,38,0.72);
    font-size: 0.48rem;
    font-weight: 900;
}

.product-pack.pouch {
    width: 78px;
    height: 96px;
    border-radius: 18px 18px 8px 8px;
    background: linear-gradient(160deg, rgba(197,222,255,0.86), rgba(92,140,214,0.38));
}

.product-pack.sachet-pack {
    width: 88px;
    height: 76px;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(220,216,255,0.82), rgba(96,55,86,0.36));
}

.product-pack.bottle-pack {
    width: 54px;
    height: 104px;
    border-radius: 18px 18px 8px 8px;
    background: linear-gradient(160deg, rgba(202,244,224,0.84), rgba(37,86,66,0.34));
}

.product-pack.bottle-pack.slim {
    background: linear-gradient(160deg, rgba(255,224,240,0.84), rgba(96,55,86,0.34));
}

.product-pack.tablet-box {
    background: linear-gradient(160deg, rgba(255,232,190,0.86), rgba(91,75,38,0.34));
}

.product-pack.care-kit {
    width: 94px;
    height: 72px;
    border-radius: 10px;
    background: linear-gradient(160deg, rgba(225,236,238,0.84), rgba(60,76,83,0.34));
}

.product-pack.narrow {
    width: 62px;
    height: 98px;
}

.yiyang-product-visual .product-pack,
.yiyang-product-visual .product-pack.pouch,
.yiyang-product-visual .product-pack.sachet-pack,
.yiyang-product-visual .product-pack.bottle-pack,
.yiyang-product-visual .product-pack.bottle-pack.slim,
.yiyang-product-visual .product-pack.tablet-box,
.yiyang-product-visual .product-pack.care-kit,
.yiyang-product-visual .product-pack.narrow {
    width: 54px;
    height: 42px;
    border-radius: 8px;
}

.yiyang-supplement-join {
    display: block;
    min-height: 0;
    justify-content: initial;
    margin-top: 1.15rem;
    padding: clamp(1rem, 1.8vw, 1.3rem);
    overflow: hidden;
}

.yiyang-join-hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.72fr);
    gap: 1rem;
    align-items: center;
}

.yiyang-supplement-join-copy {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.yiyang-join-image-collage {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-rows: repeat(2, 82px);
    gap: 0.48rem;
    min-width: 0;
}

.yiyang-join-image-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(233,209,139,0.2);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    box-shadow: 0 12px 24px rgba(0,0,0,0.24);
}

.yiyang-join-image-collage img:first-child {
    grid-row: 1 / span 2;
}

.yiyang-join-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0.7rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(233,209,139,0.16);
}

.yiyang-join-value-list,
.yiyang-join-process {
    min-width: 0;
    padding: 0.74rem;
    border: 1px solid rgba(233,209,139,0.16);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
}

.yiyang-supplement-join-copy h3 {
    margin: 0.35rem 0 0.5rem;
}

.yiyang-supplement-join-copy p {
    margin: 0;
}

.yiyang-supplement-join-actions {
    justify-content: flex-start;
    margin-top: 0.85rem;
}

.yiyang-join-value-list,
.yiyang-join-process {
    display: block;
}

.yiyang-join-value-list strong,
.yiyang-join-process strong {
    color: #fff8df;
    font-size: 0.86rem;
}

.yiyang-join-value-list span,
.yiyang-join-process span {
    color: rgba(247,242,223,0.72);
    font-size: 0.72rem;
    line-height: 1.45;
}

.yiyang-join-pill-grid,
.yiyang-join-process-row {
    display: grid;
    gap: 0.42rem;
    margin-top: 0.55rem;
}

.yiyang-join-pill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.yiyang-join-process-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.yiyang-join-pill-grid span,
.yiyang-join-process-row span {
    min-width: 0;
    min-height: 36px;
    padding: 0.42rem 0.5rem;
    border: 1px solid rgba(233,209,139,0.14);
    border-radius: 8px;
    background: rgba(4,13,31,0.28);
}

.yiyang-join-process em {
    display: inline-flex;
    justify-content: center;
    min-width: 28px;
    margin-right: 0.42rem;
    color: #e9d18b;
    font-style: normal;
    font-weight: 950;
}

.yiyang-bottom-back-btn {
    flex: 0 0 auto;
    margin-left: auto;
    cursor: pointer;
}

.yiyang-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(233,209,139,0.22);
    border-radius: 8px;
    background: rgba(6,24,43,0.72);
}

.yiyang-flow-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 92px;
    padding: 0.95rem 1.05rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.yiyang-flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 24%;
    right: 0;
    width: 1px;
    height: 52%;
    background: rgba(233,209,139,0.24);
}

.yiyang-flow-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    height: 42px;
    border: 1px solid rgba(233,209,139,0.42);
    border-radius: 50%;
    color: #e9d18b;
    font-weight: 900;
}

.yiyang-flow-step strong {
    color: #fff8df;
    font-size: 0.94rem;
}

.yiyang-flow-step p {
    margin: 0.28rem 0 0;
    font-size: 0.76rem;
}

.yiyang-phase-note {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    min-height: 0;
    justify-content: initial;
    overflow: visible;
    margin-top: 1.15rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(145deg, rgba(87,66,18,0.42), rgba(8,33,55,0.82));
}

.yiyang-phase-note strong {
    display: block;
    margin-bottom: 0;
    color: #e9d18b;
    font-size: 0.82rem;
    white-space: nowrap;
}

.yiyang-phase-note p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
}

.agent-rule-card-grid,
.agent-balance-grid,
.agent-info-grid {
    display: grid;
    gap: 1rem;
    width: 100%;
}

.agent-rule-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1.5rem;
}

.agent-rule-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
    padding: 1.15rem 1.2rem;
}

.agent-rule-card-badge {
    flex: 0 0 auto;
    min-width: 4.6rem;
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.06rem;
    text-align: center;
    white-space: nowrap;
}

.agent-rule-card-title {
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.05rem;
    line-height: 1.3;
}

.agent-rule-card-body {
    margin-top: 0.55rem;
    font-size: 0.76rem;
    line-height: 1.65;
}

.agent-balance-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1.5rem;
}

.agent-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agent-restock-form-grid,
.agent-restock-breakdown-grid {
    display: grid;
    gap: 1rem;
    width: 100%;
}

.agent-restock-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-restock-breakdown-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1.25rem;
}

@media (max-width: 992px) {
    .yiyang-hero {
        grid-template-columns: 1fr;
    }

    .yiyang-hero-media {
        min-height: 260px;
    }

    .yiyang-hero-media img {
        min-height: 260px;
    }

    .yiyang-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yiyang-mall-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yiyang-brand-grid,
    .yiyang-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yiyang-supplement-hero,
    .yiyang-supplement-join,
    .yiyang-value-grid {
        grid-template-columns: 1fr;
    }

    .yiyang-supplement-hero-visual {
        height: 280px;
    }

    .yiyang-join-hero-row,
    .yiyang-join-detail-grid {
        grid-template-columns: 1fr;
    }

    .yiyang-join-image-collage {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: 110px;
    }

    .yiyang-join-image-collage img:first-child {
        grid-row: auto;
    }

    .yiyang-mall-card.featured {
        grid-column: span 1;
    }

    .yiyang-usage-flow {
        grid-template-columns: 1fr;
    }

    .agent-balance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-rule-card-grid {
        grid-template-columns: 1fr;
    }

    .agent-info-grid {
        grid-template-columns: 1fr;
    }

    .agent-restock-breakdown-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .assets-grid {
        grid-template-columns: 1fr !important;
    }

    .yiyang-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .yiyang-hero-content {
        padding: 1.15rem;
    }

    .yiyang-hero h2,
    html[lang="en"] .yiyang-hero h2 {
        font-size: clamp(2rem, 12vw, 2.85rem);
    }

    .yiyang-hero p {
        font-size: 0.94rem;
        line-height: 1.62;
    }

    .yiyang-hero-tags span {
        white-space: normal;
    }

    .yiyang-hero-media {
        min-height: 210px;
    }

    .yiyang-hero-media img {
        min-height: 210px;
    }

    .yiyang-core-grid,
    .yiyang-card-grid,
    .yiyang-mall-grid,
    .yiyang-supplement-hero,
    .yiyang-supplement-join,
    .yiyang-value-grid,
    .yiyang-brand-grid,
    .yiyang-product-grid {
        grid-template-columns: 1fr;
    }

    .yiyang-flow {
        grid-template-columns: 1fr;
    }

    .yiyang-flow-step:not(:last-child)::after {
        top: auto;
        right: 1rem;
        bottom: 0;
        left: 1rem;
        width: auto;
        height: 1px;
    }

    .yiyang-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .yiyang-phase-note {
        align-items: flex-start;
        flex-direction: column;
    }

    .yiyang-mall-section {
        padding: 0.85rem;
    }

    .yiyang-mall-section,
    .yiyang-mall-section *,
    .yiyang-section-head > div {
        max-width: 100%;
        min-width: 0;
    }

    .yiyang-mall-card {
        width: 100%;
        min-height: 0;
    }

    .yiyang-mall-card.featured {
        min-height: 0;
    }

    .yiyang-mall-note {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .yiyang-supplement-title {
        font-size: clamp(1.8rem, 10vw, 2.45rem);
    }

    .yiyang-supplement-return-btn {
        width: fit-content;
        min-height: 38px;
    }

    .yiyang-supplement-hero {
        gap: 0.85rem;
        padding: 0.9rem;
    }

    .yiyang-supplement-hero-stats {
        grid-template-columns: 1fr;
        gap: 0.42rem;
    }

    .yiyang-supplement-hero-stats div {
        min-height: 0;
        padding: 0.55rem 0.62rem;
    }

    .yiyang-supplement-hero-visual {
        min-height: 0;
        height: 218px;
    }

    .yiyang-supplement-shelf {
        top: 0.7rem;
        right: 0.7rem;
        width: min(86%, 230px);
        padding: 0.65rem;
    }

    .yiyang-supplement-hero-product-row {
        right: 0.65rem;
        bottom: 0.65rem;
        left: 0.65rem;
        min-height: 82px;
        padding: 0.45rem;
    }

    .yiyang-supplement-hero-product-row img {
        width: 52px;
        height: 64px;
    }

    .yiyang-supplement-hero-product-row img:nth-child(2) {
        width: 60px;
        height: 78px;
    }

    .mall-pack.box {
        width: 54px;
        height: 58px;
    }

    .mall-pack.bottle {
        width: 34px;
        height: 72px;
    }

    .mall-pack.sachet {
        width: 42px;
        height: 54px;
    }

    .yiyang-category-nav {
        border-radius: 8px;
        padding: 0.32rem;
    }

    .yiyang-brand-cover {
        min-height: 104px;
    }

    .brand-product-mini-row {
        right: 0.5rem;
        bottom: 0.5rem;
        gap: 0.25rem;
    }

    .brand-product-mini-row span {
        min-width: 0;
        min-height: 22px;
        padding: 0.22rem 0.3rem;
        font-size: 0.54rem;
    }

    .yiyang-product-card {
        min-height: 0;
    }

    .yiyang-product-visual {
        height: 152px;
    }

    .yiyang-product-visual .product-pack {
        right: 0.55rem;
        bottom: 0.55rem;
        width: 48px;
        height: 38px;
    }

    .yiyang-supplement-join {
        align-items: flex-start;
        gap: 0.65rem;
        padding: 0.85rem;
    }

    .yiyang-join-hero-row,
    .yiyang-join-detail-grid,
    .yiyang-join-pill-grid {
        grid-template-columns: 1fr;
    }

    .yiyang-join-process-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yiyang-join-image-collage {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: 72px;
    }

    .yiyang-supplement-join-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .yiyang-supplement-join-actions .yiyang-preview-btn {
        flex: 1 1 150px;
    }

    .yiyang-join-value-list,
    .yiyang-join-process,
    .yiyang-supplement-join-copy {
        padding: 0;
    }

    .yiyang-join-detail-grid {
        gap: 0.5rem;
        margin-top: 0.65rem;
        padding-top: 0.65rem;
    }

    .yiyang-join-value-list,
    .yiyang-join-process {
        padding: 0.6rem;
    }

    .yiyang-join-pill-grid,
    .yiyang-join-process-row {
        gap: 0.3rem;
        margin-top: 0.42rem;
    }

    .yiyang-join-pill-grid span,
    .yiyang-join-process-row span {
        min-height: 30px;
        padding: 0.32rem 0.4rem;
        font-size: 0.68rem;
    }

    .yiyang-bottom-back-btn {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }

    .agent-balance-grid,
    .agent-info-grid {
        grid-template-columns: 1fr;
    }

    .agent-restock-form-grid,
    .agent-restock-breakdown-grid {
        grid-template-columns: 1fr;
    }
}

/* Health supplement mall premium editorial direction */
.yiyang-supplement-mall-view {
    --mall-gold: #e9d18b;
    --mall-cream: #fff8df;
    --mall-soft: rgba(247,242,223,0.72);
}

.yiyang-supplement-mall-view .yiyang-section,
.yiyang-supplement-hero,
.yiyang-supplement-section,
.yiyang-supplement-join {
    margin-top: clamp(1.35rem, 3vw, 2.3rem);
}

.yiyang-supplement-hero {
    grid-template-columns: minmax(0, 0.78fr) minmax(360px, 1.22fr);
    gap: clamp(1.4rem, 4vw, 3rem);
    align-items: center;
    min-height: clamp(520px, 62vh, 680px);
    padding: clamp(1.3rem, 4vw, 3rem);
    border-color: rgba(233,209,139,0.2);
    background:
        radial-gradient(circle at 78% 10%, rgba(233,209,139,0.18), transparent 28%),
        linear-gradient(132deg, rgba(3,12,30,0.98), rgba(5,23,47,0.94) 56%, rgba(16,47,55,0.9));
}

.yiyang-supplement-hero-copy {
    max-width: 600px;
}

.yiyang-supplement-title {
    max-width: 620px;
    margin: clamp(0.8rem, 2vw, 1.35rem) 0 0.8rem;
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 1.02;
}

.yiyang-supplement-title-en {
    margin-top: -0.2rem;
    margin-bottom: 0.85rem;
    font-size: clamp(0.72rem, 0.9vw, 0.82rem);
}

.yiyang-supplement-hero-copy p {
    max-width: 440px;
    color: rgba(247,242,223,0.78);
    font-size: clamp(0.98rem, 1.4vw, 1.12rem);
    line-height: 1.72;
}

.yiyang-supplement-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.72rem;
    margin-top: 1.35rem;
}

.yiyang-supplement-hero-actions .yiyang-preview-btn {
    min-height: 42px;
    padding: 0.72rem 1.05rem;
    text-decoration: none;
}

.yiyang-supplement-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.2rem;
}

.yiyang-supplement-hero-stats div {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 0;
    padding: 0.45rem 0.62rem;
    border-color: rgba(233,209,139,0.18);
    border-radius: 999px;
    background: rgba(255,255,255,0.035);
}

.yiyang-supplement-hero-stats strong {
    font-size: 0.74rem;
    white-space: nowrap;
}

.yiyang-supplement-hero-stats span {
    margin-top: 0;
    font-size: 0.64rem;
}

.yiyang-supplement-hero-visual {
    height: clamp(420px, 52vw, 620px);
    border-color: rgba(233,209,139,0.22);
    width: min(100%, 540px);
    max-width: 100%;
    justify-self: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(233,209,139,0.16), transparent 30%),
        linear-gradient(145deg, rgba(248,244,232,0.98), rgba(224,214,190,0.92));
    box-shadow: 0 24px 54px rgba(0,0,0,0.34);
}

.yiyang-supplement-hero-img {
    opacity: 1;
    object-fit: contain;
    object-position: center;
    filter: saturate(1.02) contrast(1.02);
}

.yiyang-supplement-shelf {
    top: auto;
    right: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;
    width: auto;
    padding: 1rem 1.1rem;
    background: rgba(4,13,31,0.54);
}

.yiyang-supplement-shelf strong {
    font-size: clamp(1.2rem, 2vw, 1.7rem);
}

.yiyang-supplement-hero-product-row {
    top: 1.1rem;
    right: 1.1rem;
    bottom: auto;
    left: auto;
    justify-content: flex-end;
    width: min(48%, 250px);
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.yiyang-supplement-hero-product-row img {
    width: 82px;
    height: 112px;
    border-color: rgba(233,209,139,0.36);
}

.yiyang-supplement-hero-product-row img:nth-child(2) {
    width: 96px;
    height: 136px;
}

.yiyang-section-head {
    margin-bottom: clamp(0.95rem, 2vw, 1.45rem);
}

.yiyang-section-head h3 {
    font-size: clamp(1.35rem, 2.7vw, 2rem);
}

.yiyang-section-head p {
    max-width: 460px;
}

.yiyang-brand-grid {
    gap: clamp(1rem, 2vw, 1.45rem);
}

.yiyang-brand-card {
    padding: clamp(0.74rem, 1.2vw, 0.95rem);
    border-color: rgba(233,209,139,0.16);
    background: rgba(4,13,31,0.62);
}

.yiyang-brand-cover {
    min-height: clamp(300px, 28vw, 390px);
    margin-bottom: 1rem;
}

.yiyang-brand-cover-img {
    opacity: 0.92;
}

.yiyang-brand-logo {
    width: 50px;
    height: 50px;
    background: rgba(4,13,31,0.72);
}

.brand-product-mini-row,
.yiyang-brand-meta,
.yiyang-brand-products {
    display: none;
}

.yiyang-brand-title-row {
    align-items: center;
    gap: 0.5rem;
}

.yiyang-brand-title-row h4 {
    margin: 0;
    font-size: clamp(1.05rem, 1.3vw, 1.18rem);
}

.yiyang-brand-title-row .yiyang-brand-badge {
    font-size: 0.58rem;
}

.yiyang-brand-card p {
    margin: 0.55rem 0 0.92rem;
    min-height: 0;
    font-size: 0.76rem;
}

.yiyang-brand-card .yiyang-preview-btn,
.yiyang-product-card .yiyang-preview-btn {
    min-height: 34px;
    padding: 0.5rem 0.68rem;
    font-size: 0.66rem;
}

.yiyang-category-nav {
    padding: 0.28rem;
    border-color: rgba(233,209,139,0.14);
    background: rgba(4,13,31,0.36);
}

.yiyang-category-nav button {
    min-height: 32px;
    padding: 0.34rem 0.72rem;
    font-size: 0.68rem;
}

.yiyang-product-grid {
    gap: clamp(1rem, 2.2vw, 1.65rem);
}

.yiyang-product-card {
    min-height: 0;
    padding: clamp(0.76rem, 1.2vw, 1rem);
    border-color: rgba(233,209,139,0.15);
    background: rgba(4,13,31,0.58);
}

.yiyang-product-visual {
    height: clamp(430px, 34vw, 520px);
    padding: 0;
    border-color: rgba(233,209,139,0.16);
    background: rgba(255,255,255,0.025);
}

.yiyang-product-img {
    border: 0;
    border-radius: 8px;
    object-fit: cover;
    background: transparent;
    box-shadow: none;
}

.yiyang-product-visual .product-pack {
    display: none;
}

.yiyang-product-card h4 {
    margin: 0.95rem 0 0.24rem;
    font-size: clamp(1.05rem, 1.35vw, 1.18rem);
}

.yiyang-product-card p {
    color: rgba(247,242,223,0.58);
    font-size: 0.72rem;
}

.yiyang-product-tags {
    margin: 0.62rem 0 0.78rem;
}

.yiyang-product-tags span {
    min-height: 22px;
    padding: 0.2rem 0.46rem;
    border-color: rgba(233,209,139,0.18);
    background: rgba(233,209,139,0.06);
    font-size: 0.6rem;
}

.yiyang-supplement-join {
    padding: clamp(1.2rem, 3.4vw, 2.4rem);
    border-color: rgba(233,209,139,0.22);
    background:
        radial-gradient(circle at 74% 16%, rgba(233,209,139,0.18), transparent 28%),
        linear-gradient(135deg, rgba(4,13,31,0.98), rgba(11,37,50,0.9));
}

.yiyang-join-hero-row {
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
    gap: clamp(1rem, 3vw, 2rem);
}

.yiyang-supplement-join-copy h3 {
    max-width: 520px;
    margin: 0.45rem 0 0.65rem;
    font-size: clamp(2rem, 3.6vw, 3.35rem);
    line-height: 1.06;
}

.yiyang-supplement-join-copy h3 span {
    display: block;
    white-space: nowrap;
}

.yiyang-supplement-join-copy p {
    max-width: 520px;
    font-size: 0.92rem;
}

.yiyang-join-image-collage {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.82fr);
    grid-template-rows: repeat(2, clamp(145px, 14vw, 205px));
    gap: 0.72rem;
}

.yiyang-join-image-collage img {
    border-color: rgba(233,209,139,0.15);
    box-shadow: 0 18px 34px rgba(0,0,0,0.28);
}

.yiyang-join-image-collage img:first-child {
    grid-row: 1 / span 2;
}

.yiyang-join-image-collage img:nth-child(2) {
    object-position: center 38%;
}

.yiyang-join-image-collage img:nth-child(3) {
    object-position: center 44%;
}

.yiyang-join-detail-grid {
    gap: clamp(0.9rem, 2vw, 1.3rem);
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top-color: rgba(233,209,139,0.1);
}

.yiyang-join-value-list,
.yiyang-join-process {
    padding: 0;
    border: 0;
    background: transparent;
}

.yiyang-join-pill-grid,
.yiyang-join-process-row {
    gap: 0.48rem;
}

.yiyang-join-pill-grid span,
.yiyang-join-process-row span {
    min-height: 32px;
    padding: 0.38rem 0.5rem;
    border-color: rgba(233,209,139,0.1);
    background: linear-gradient(135deg, rgba(233,209,139,0.055), rgba(255,255,255,0.018));
    font-size: 0.68rem;
}

.yiyang-join-process-row span {
    align-items: center;
    background: transparent;
    border-color: transparent;
    padding-inline: 0;
}

@media (max-width: 992px) {
    .yiyang-supplement-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .yiyang-supplement-hero-visual {
        height: clamp(340px, 62vw, 520px);
        width: min(100%, 500px);
    }

    .yiyang-brand-cover,
    .yiyang-product-visual {
        height: auto;
        min-height: 260px;
    }

    .yiyang-join-hero-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .yiyang-supplement-mall-view .yiyang-section,
    .yiyang-supplement-hero,
    .yiyang-supplement-section,
    .yiyang-supplement-join {
        margin-top: 1rem;
    }

    .yiyang-supplement-hero {
        padding: 1rem;
    }

    .yiyang-supplement-title {
        font-size: clamp(2.45rem, 10.5vw, 2.9rem);
        line-height: 1.04;
    }

    .yiyang-supplement-hero-actions .yiyang-preview-btn {
        flex: 1 1 132px;
        justify-content: center;
    }

    .yiyang-supplement-hero-stats {
        gap: 0.4rem;
    }

    .yiyang-supplement-hero-stats div {
        padding: 0.38rem 0.52rem;
    }

    .yiyang-supplement-hero-visual {
        height: clamp(320px, 92vw, 390px);
    }

    .yiyang-supplement-shelf {
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
    }

    .yiyang-supplement-hero-product-row {
        top: 0.75rem;
        right: 0.75rem;
        width: auto;
        gap: 0.45rem;
    }

    .yiyang-supplement-hero-product-row img {
        width: 52px;
        height: 70px;
    }

    .yiyang-supplement-hero-product-row img:nth-child(2) {
        width: 60px;
        height: 84px;
    }

    .yiyang-brand-cover,
    .yiyang-product-visual {
        min-height: 280px;
    }

    .yiyang-brand-card p {
        min-height: 0;
    }

    .yiyang-category-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .yiyang-supplement-join-copy h3 {
        font-size: clamp(1.95rem, 8.5vw, 2.55rem);
    }

    .yiyang-join-image-collage {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 168px 104px;
        gap: 0.62rem;
    }

    .yiyang-join-image-collage img:first-child {
        grid-column: 1 / span 2;
        grid-row: auto;
        object-position: center 42%;
    }

    .yiyang-join-image-collage img:nth-child(2) {
        object-position: center 62%;
    }

    .yiyang-join-image-collage img:nth-child(3) {
        object-position: center center;
    }

    .yiyang-join-process-row {
        grid-template-columns: 1fr;
    }

    .yiyang-join-value-list,
    .yiyang-join-process {
        padding: 0;
    }
}

/* Mobile-only Bonus Point Actions Optimization */
@media (max-width: 600px) {
    .asset-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem !important;
    }
    .asset-actions button {
        width: 100% !important;
        padding: 0.8rem 0.2rem !important;
        font-size: 0.65rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .asset-actions button:last-child {
        grid-column: span 2;
    }
}

/* Asset History Status Badges */
.status-badge {
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
}
.status-badge.completed {
    background: rgba(0, 255, 0, 0.1);
    color: #00ff00;
    border: 1px solid rgba(0, 255, 0, 0.3);
}
.status-badge.pending {
    background: rgba(255, 165, 0, 0.1);
    color: #ffa500;
    border: 1px solid rgba(255, 165, 0, 0.3);
}

@media (max-width: 768px) {
    #asset-bonus-convert .glass-card,
    #asset-bonus-withdraw .glass-card {
        max-width: 100% !important;
    }
}

/* Security section Mobile-only Logout button */
.mobile-logout-btn-security {
    display: none;
}

@media (max-width: 992px) {
    .mobile-logout-btn-security {
        display: block !important;
        background: none;
        border: 1px solid rgba(255, 68, 68, 0.3);
        color: #ff4444;
        padding: 0.8rem 1.5rem;
        font-size: 0.7rem;
        border-radius: 4px;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
        transition: all 0.3s ease;
        text-align: center;
        font-weight: 500;
        font-family: inherit;
    }
    .mobile-logout-btn-security:hover {
        background: rgba(255, 68, 68, 0.1);
        border-color: #ff4444;
    }
}

/* Modern Compact Binary Tree Organization Styles */
#binary-tree-container {
    display: flex;
    justify-content: safe center;
    align-items: flex-start;
    width: 100%;
    overflow-x: auto;
    padding: 1.5rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.binary-tree-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.binary-tree-node-wrapper {
    position: relative;
    padding-bottom: 20px;
    z-index: 2;
}

/* Symmetrical thin line going down from parent wrapper */
.binary-tree-branch:not(:only-child) > .binary-tree-node-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1.5px;
    height: 20px;
    background: rgba(255, 215, 0, 0.25);
    transform: translateX(-50%);
}

.binary-tree-children {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    gap: 30px;
    z-index: 1;
}

/* Thin horizontal connecting bar between children */
.binary-tree-children::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 1.5px;
    background: rgba(255, 215, 0, 0.25);
}

/* Symmetrical thin line going down into child */
.binary-tree-child {
    position: relative;
    padding-top: 20px;
}

.binary-tree-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1.5px;
    height: 20px;
    background: rgba(255, 215, 0, 0.25);
    transform: translateX(-50%);
}

/* Compact Premium Card Styles */
.bu-tree-card {
    background: rgba(15, 15, 15, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(10px);
}

/* Card Sizing hierarchy */
.bu-tree-card.root-node {
    width: 320px;
}

.bu-tree-card.child-node {
    width: 250px;
}

.bu-tree-card.deep-child-node {
    width: 210px;
}

.bu-tree-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.15);
}

.bu-tree-card.current-user {
    border-color: rgba(255, 215, 0, 0.35);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.03), rgba(0, 0, 0, 0.6));
}

/* Card Header */
.bu-tree-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 5px;
    margin-bottom: 6px;
}

.bu-tree-card .username-section {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bu-tree-card .username {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.bu-tree-card.root-node .username {
    font-size: 14px;
}

.bu-tree-card.deep-child-node .username {
    font-size: 12px;
}

.bu-tree-card .id-badge {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 4px;
    border-radius: 4px;
}

.bu-tree-card .status-badge {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 0.04em;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(255, 215, 0, 0.05);
}

.bu-tree-card .status-badge.registration {
    color: #38ef7d;
    background: rgba(56, 239, 125, 0.05);
}

.bu-tree-card .status-badge.auto_expansion {
    color: #00f2fe;
    background: rgba(0, 242, 254, 0.05);
}

/* Card PV Section */
.bu-tree-card-pv {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bu-tree-card .pv-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 16px;
}

.bu-tree-card .pv-label {
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
    letter-spacing: 0.03em;
}

.bu-tree-card .pv-value {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.bu-tree-card.deep-child-node .pv-value {
    font-size: 10.5px;
}

/* Symmetrical and beautiful empty slots */
.binary-tree-empty-slot {
    width: 140px;
    height: 50px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.01);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.binary-tree-empty-slot:hover {
    border-color: rgba(255, 215, 0, 0.25);
    background: rgba(255, 215, 0, 0.01);
}

.binary-tree-empty-slot .slot-side-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.25);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.binary-tree-empty-slot .slot-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 1px;
}

/* Final User Panel daylight contrast overrides. Keep this block last so inline-heavy panels stay readable. */
#portal-modal .modal-content.panel-active {
    background: var(--user-panel-bg);
    border-color: var(--user-panel-border);
}

#user-panel-layout {
    background: radial-gradient(circle at top left, rgba(197, 160, 89, 0.1), transparent 34%), var(--user-panel-bg);
    border-color: var(--user-panel-border);
}

#user-panel-layout .panel-sidebar {
    background: linear-gradient(180deg, #1a1d25, #131720);
    border-color: rgba(236, 205, 133, 0.22);
}

#user-panel-layout .panel-main {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0));
}

#user-panel-layout .glass-card,
#user-panel-layout .stat-card,
#user-panel-layout .balance-card,
#user-panel-layout .pv-summary-card,
#user-panel-layout .pv-metric,
#user-panel-layout .info-item,
#user-panel-layout .pt-box,
#user-panel-layout .reward-box,
#user-panel-layout .point-balance-card,
#user-panel-layout .setting-item,
#user-panel-layout .bu-tree-card,
#user-panel-layout #binary-tree-container,
#user-panel-layout .binary-tree-empty-slot {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.088), rgba(255, 255, 255, 0.045)) !important;
    border-color: var(--user-panel-border-soft) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#user-panel-layout .pv-summary-card-cycle,
#user-panel-layout .rewards-hero,
#user-panel-layout .point-balance-card,
#user-panel-layout .reward-box.highlight,
#user-panel-layout .bu-tree-card.current-user {
    background: linear-gradient(145deg, rgba(197, 160, 89, 0.16), rgba(255, 255, 255, 0.05)) !important;
    border-color: var(--user-panel-border) !important;
}

#user-panel-layout .section-title {
    color: var(--accent);
    font-weight: 850;
}

#user-panel-layout .sub-title,
#user-panel-layout .pv-summary-head h4,
#user-panel-layout .rewards-hero h3,
#user-panel-layout .bu-tree-card .username {
    color: #ffe7aa !important;
    opacity: 1 !important;
    font-weight: 850;
}

#user-panel-layout label,
#user-panel-layout small,
#user-panel-layout p,
#user-panel-layout .pv-metric label,
#user-panel-layout .pv-status-row label,
#user-panel-layout .pv-leg-badge small,
#user-panel-layout .premium-table th,
#user-panel-layout .panel-table th,
#user-panel-layout .bu-tree-card .pv-label,
#user-panel-layout .binary-tree-empty-slot .slot-side-label,
#user-panel-layout .binary-tree-empty-slot .slot-text {
    color: var(--user-panel-muted) !important;
    opacity: 1 !important;
    font-weight: 750;
}

#user-panel-layout .pv-value,
#user-panel-layout .pv-status-value,
#user-panel-layout .pv-leg-badge strong,
#user-panel-layout .balance-card .val,
#user-panel-layout .stat-card .val,
#user-panel-layout .reward-box .val,
#user-panel-layout .point-balance-card .val,
#user-panel-layout .hero-stat.main .val,
#user-panel-layout .h-stat span,
#user-panel-layout .info-row span,
#user-panel-layout .pt-box span,
#user-panel-layout .bu-tree-card .pv-value,
#user-panel-layout .val {
    color: var(--user-panel-text) !important;
    font-weight: 850;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

#user-panel-layout .pv-status-value.is-accent,
#user-panel-layout [style*="var(--accent)"],
#user-panel-layout .accent-text {
    color: #f1c96f !important;
}

#user-panel-layout .side-tab {
    color: var(--user-panel-text);
    opacity: 0.88;
    font-weight: 850;
}

#user-panel-layout .side-tab .icon {
    color: #ffe7aa;
    opacity: 1;
}

#user-panel-layout .side-tab.active {
    color: #ffe7aa;
    opacity: 1;
    background: linear-gradient(90deg, rgba(197, 160, 89, 0.22), rgba(197, 160, 89, 0.08));
    border-right-color: #e7c16b;
    box-shadow: inset 3px 0 0 rgba(255, 231, 170, 0.72);
}

#user-panel-layout .modal-input,
#user-panel-layout input.modal-input,
#user-panel-layout select.modal-input,
#user-panel-layout textarea.modal-input {
    min-height: 48px;
    background: #242833 !important;
    border: 1px solid rgba(236, 205, 133, 0.4) !important;
    color: var(--user-panel-text) !important;
    font-size: 0.95rem;
    font-weight: 650;
    border-radius: 6px !important;
}

#user-panel-layout .modal-input::placeholder,
#user-panel-layout input::placeholder,
#user-panel-layout textarea::placeholder {
    color: rgba(255, 250, 240, 0.64);
    opacity: 1;
}

#user-panel-layout .modal-input:focus,
#user-panel-layout input:focus,
#user-panel-layout select:focus,
#user-panel-layout textarea:focus {
    border-color: #f0cd78 !important;
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#user-panel-layout .cta-btn,
#user-panel-layout .btn-primary,
#user-panel-layout .mini-btn,
#user-panel-layout .point-tab {
    background: rgba(197, 160, 89, 0.16) !important;
    border-color: rgba(236, 205, 133, 0.6) !important;
    color: #ffe7aa !important;
    font-weight: 850;
}

#user-panel-layout .point-tab.active {
    background: var(--accent) !important;
    color: #07090d !important;
}

#user-panel-layout .premium-table th,
#user-panel-layout .panel-table th {
    border-bottom-color: rgba(236, 205, 133, 0.28);
}

#user-panel-layout .premium-table td,
#user-panel-layout .panel-table td {
    color: rgba(255, 250, 240, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 992px) {
    #user-panel-layout .panel-sidebar {
        background: #1a1d25;
        border-bottom-color: rgba(236, 205, 133, 0.24);
    }

    #user-panel-layout .side-tab {
        min-height: 58px;
        padding: 0.85rem 0.45rem;
        font-size: 0.62rem;
        letter-spacing: 0.055rem;
    }

    #user-panel-layout .side-tab.active {
        border-bottom-color: #e7c16b;
        box-shadow: inset 0 -3px 0 rgba(255, 231, 170, 0.72);
    }
}

@media (max-width: 600px) {
    #portal-modal .modal-content.panel-active {
        width: 100% !important;
    }

    #user-panel-layout .panel-main {
        padding: 1.25rem;
    }

    #user-panel-layout .section-title {
        font-size: 1.25rem;
        letter-spacing: 0.12rem;
        margin-bottom: 1.35rem;
    }

    #user-panel-layout .glass-card,
    #user-panel-layout .stat-card,
    #user-panel-layout .balance-card,
    #user-panel-layout .pv-summary-card {
        padding: 1rem !important;
    }

    #user-panel-layout .modal-input,
    #user-panel-layout input.modal-input,
    #user-panel-layout select.modal-input,
    #user-panel-layout textarea.modal-input {
        min-height: 50px;
        font-size: 1rem;
    }

    #user-panel-layout .cta-btn,
    #user-panel-layout .btn-primary {
        min-height: 44px;
        padding: 0.8rem 1rem !important;
        font-size: 0.72rem;
        letter-spacing: 0.07rem;
    }

    #user-panel-layout .pv-value {
        font-size: 1.85rem;
    }
}

/* Mobile User Panel form containment and binary tree scrolling */
#user-panel-layout,
#user-panel-layout .panel-main,
#user-panel-layout .glass-card,
#user-panel-layout .form-group {
    min-width: 0;
}

#user-panel-layout .modal-input,
#user-panel-layout input.modal-input,
#user-panel-layout select.modal-input,
#user-panel-layout textarea.modal-input,
#user-panel-layout .cta-btn.full-width,
#user-panel-layout .mobile-logout-btn-security {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#user-panel-layout .user-security-card {
    overflow-x: hidden;
}

#user-panel-layout .user-security-grid {
    width: 100%;
    max-width: 100%;
}

#user-panel-layout .user-security-form {
    width: 100%;
    max-width: 400px;
    min-width: 0;
}

#user-panel-layout #home-current-email {
    overflow-wrap: anywhere;
    word-break: break-word;
}

#user-panel-layout #binary-tree-container.binary-tree-scroll {
    display: block;
    justify-content: initial;
    align-items: initial;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
}

#user-panel-layout .binary-tree-render-shell,
#user-panel-layout .binary-tree-stage {
    box-sizing: border-box;
}

#user-panel-layout .binary-tree-render-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    min-width: 100%;
    margin: 0 auto;
}

#user-panel-layout .binary-tree-stage {
    display: flex;
    justify-content: center;
    width: max-content;
    min-width: 100%;
    padding: 0.5rem 1rem;
}

@media (max-width: 600px) {
    #user-panel-layout .user-security-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    #user-panel-layout .user-security-form {
        max-width: 100% !important;
    }

    #user-panel-layout .user-security-form .modal-input {
        margin-bottom: 1rem;
    }

    #user-panel-layout .user-security-form .cta-btn,
    #user-panel-layout .user-security-form .mobile-logout-btn-security {
        display: block;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #user-panel-layout #binary-tree-container.binary-tree-scroll {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        padding: 1rem 0.25rem;
        border-radius: 8px;
    }

    #user-panel-layout .binary-tree-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    #user-panel-layout .binary-tree-bu-selector,
    #user-panel-layout .binary-tree-bu-select {
        width: 100%;
    }

    #user-panel-layout .binary-tree-stage {
        padding: 0.35rem 1rem 0.5rem;
    }
}
/* Admin Panel colorful app theme. UI-only overrides scoped to Admin screens. */
#admin-login-section,
#admin-section {
    --admin-bg: #FFF6E9;
    --admin-bg-2: #FFF2DE;
    --admin-surface: rgba(255, 255, 255, 0.78);
    --admin-surface-strong: rgba(255, 253, 248, 0.92);
    --admin-text: #1F2933;
    --admin-muted: #6B7280;
    --admin-border: rgba(255, 255, 255, 0.9);
    --admin-border-soft: rgba(31, 41, 51, 0.08);
    --admin-pink: #F75F7A;
    --admin-teal: #20C7B5;
    --admin-orange: #FF9F1C;
    --admin-yellow: #FFC947;
    --admin-purple: #8B6DFF;
    --admin-blue: #4A8CFF;
    --admin-green: #65C466;
    --admin-danger: #E84D67;
    --admin-shadow: 0 18px 44px rgba(88, 64, 42, 0.14);
    --admin-soft-shadow: 0 10px 26px rgba(75, 72, 102, 0.1);
    color: var(--admin-text) !important;
    letter-spacing: 0 !important;
}

#admin-login-section {
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 201, 71, 0.36) 0 118px, transparent 119px),
        radial-gradient(circle at 92% 10%, rgba(247, 95, 122, 0.2) 0 142px, transparent 143px),
        radial-gradient(circle at 78% 100%, rgba(32, 199, 181, 0.18) 0 170px, transparent 171px),
        linear-gradient(145deg, var(--admin-bg) 0%, #FDF7EF 52%, var(--admin-bg-2) 100%) !important;
}

#admin-login-section > div {
    max-width: 430px !important;
    padding: clamp(2rem, 5vw, 3rem) !important;
    border: 1px solid var(--admin-border);
    border-radius: 30px;
    background: var(--admin-surface-strong);
    box-shadow: var(--admin-shadow);
    backdrop-filter: blur(18px);
}

#admin-login-section h2 {
    color: var(--admin-text) !important;
    font-size: clamp(1.65rem, 5vw, 2.25rem) !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#admin-login-section #admin-auth-btn {
    width: 100%;
    min-height: 52px;
}

#admin-login-section #admin-captcha-img {
    border-color: var(--admin-border-soft) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: var(--admin-soft-shadow);
}

#admin-section.admin-dashboard,
#admin-section {
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 201, 71, 0.34) 0 130px, transparent 131px),
        radial-gradient(circle at 96% 7%, rgba(139, 109, 255, 0.18) 0 150px, transparent 151px),
        radial-gradient(circle at 82% 100%, rgba(32, 199, 181, 0.2) 0 180px, transparent 181px),
        linear-gradient(145deg, var(--admin-bg) 0%, #FDF7EF 52%, var(--admin-bg-2) 100%) !important;
}

#admin-section,
#admin-section * {
    letter-spacing: 0 !important;
}

#admin-section .admin-sidebar {
    background: rgba(255, 253, 248, 0.78) !important;
    border-right: 1px solid var(--admin-border) !important;
    box-shadow: inset -1px 0 0 rgba(31, 41, 51, 0.04), var(--admin-soft-shadow) !important;
    backdrop-filter: blur(18px);
}

#admin-section .admin-sidebar::-webkit-scrollbar-thumb {
    background: rgba(74, 140, 255, 0.28) !important;
    border-radius: 999px !important;
}

#admin-section .admin-sidebar h1 {
    color: var(--admin-text) !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

#admin-section .admin-sidebar p {
    color: var(--admin-muted) !important;
    opacity: 1 !important;
}

#admin-section .admin-nav-scroll {
    gap: 0.55rem !important;
}

#admin-section .admin-nav-item {
    min-height: 48px;
    border: 0 !important;
    border-radius: 999px !important;
    color: #806F5A !important;
    background: transparent !important;
    opacity: 1 !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    box-shadow: none !important;
}

#admin-section .admin-nav-item span {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 12px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--admin-purple), var(--admin-blue));
    box-shadow: 0 8px 16px rgba(74, 140, 255, 0.18);
}

#admin-section .admin-nav-item:nth-child(4n + 1) span {
    background: linear-gradient(135deg, var(--admin-pink), var(--admin-orange));
}

#admin-section .admin-nav-item:nth-child(4n + 2) span {
    background: linear-gradient(135deg, var(--admin-teal), var(--admin-blue));
}

#admin-section .admin-nav-item:nth-child(4n + 3) span {
    background: linear-gradient(135deg, var(--admin-purple), var(--admin-pink));
}

#admin-section .admin-nav-item:nth-child(4n) span {
    background: linear-gradient(135deg, var(--admin-orange), var(--admin-yellow));
}

#admin-section .admin-nav-item:hover {
    color: var(--admin-text) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: var(--admin-soft-shadow) !important;
}

#admin-section .admin-nav-item.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--admin-pink), var(--admin-orange)) !important;
    border-left: 0 !important;
    box-shadow: 0 14px 24px rgba(247, 95, 122, 0.26) !important;
    transform: translateY(-1px);
}

#admin-section .admin-nav-item.active span {
    background: rgba(255, 255, 255, 0.26) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32) !important;
}

#admin-section #admin-logout-btn {
    min-height: 44px;
    border: 1px solid rgba(247, 95, 122, 0.24) !important;
    border-radius: 999px !important;
    color: var(--admin-pink) !important;
    background: rgba(247, 95, 122, 0.08) !important;
    font-weight: 900 !important;
}

#admin-section .admin-main-content {
    position: relative;
    width: calc(100% - 280px) !important;
    background: transparent !important;
    padding: clamp(1.35rem, 3vw, 3rem) clamp(1.2rem, 4vw, 4rem) !important;
}

#admin-section .admin-main-content::before {
    content: "UK AKG";
    position: fixed;
    top: clamp(1rem, 4vw, 3rem);
    right: clamp(0.75rem, 4vw, 3rem);
    z-index: 0;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    color: rgba(151, 111, 132, 0.12);
    font-size: clamp(6rem, 12vw, 12rem);
    font-weight: 950;
    line-height: 0.82;
    text-transform: uppercase;
    transform: rotate(-7deg);
    transform-origin: 70% 20%;
}

#admin-section .admin-main-content > * {
    position: relative;
    z-index: 1;
}

#admin-section h2,
#admin-section h3,
#admin-section h4,
#admin-section .section-title,
#admin-section .sub-title {
    color: var(--admin-text) !important;
    opacity: 1 !important;
    font-weight: 950 !important;
    text-transform: none !important;
}

#admin-section h2 {
    font-size: clamp(1.45rem, 2.6vw, 2.2rem) !important;
    line-height: 1.05;
}

#admin-section h3 {
    font-size: 1.05rem !important;
}

#admin-section p,
#admin-section label,
#admin-section small,
#admin-section [style*="opacity: 0.3"],
#admin-section [style*="opacity:0.3"],
#admin-section [style*="opacity: 0.4"],
#admin-section [style*="opacity:0.4"],
#admin-section [style*="opacity: 0.5"],
#admin-section [style*="opacity:0.5"],
#admin-section [style*="opacity: 0.6"],
#admin-section [style*="opacity:0.6"],
#admin-section [style*="rgba(255,255,255,0.6)"] {
    color: var(--admin-muted) !important;
    opacity: 1 !important;
    font-weight: 750 !important;
}

#admin-section .val,
#admin-section strong,
#admin-section [style*="color: #fff"],
#admin-section [style*="color:#fff"] {
    color: var(--admin-text) !important;
    text-shadow: none !important;
}

#admin-section [style*="var(--accent)"],
#admin-section .gold-text {
    color: var(--admin-pink) !important;
}

#admin-section .glass-card,
#admin-section .admin-tab-content > div[style*="background"],
#admin-section #rp-grant-preview-card,
#admin-section #rp-search-result-area > div,
#admin-section #admin-user-detail-card > div,
#admin-section #admin-order-detail-card > div,
#admin-section #admin-redemption-detail-card > div,
#admin-section .admin-table-wrapper {
    background: var(--admin-surface) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--admin-soft-shadow) !important;
    color: var(--admin-text) !important;
    backdrop-filter: blur(14px);
}

#admin-section .admin-tab-content > div[style*="border: 1px dashed"],
#admin-section #user-panel-shutdown-card,
#admin-section #uat-test-reset-card {
    border-style: solid !important;
    border-color: rgba(232, 77, 103, 0.24) !important;
    background: linear-gradient(135deg, rgba(232, 77, 103, 0.1), rgba(255, 255, 255, 0.8)) !important;
}

#admin-section #admin-tab-dashboard > div:nth-of-type(2) .glass-card,
#admin-section .rp-metrics-grid > div,
#admin-section [style*="grid-template-columns:repeat(3, 1fr)"] > div {
    border-left-width: 0 !important;
    min-height: 110px;
}

#admin-section #admin-tab-dashboard > div:nth-of-type(2) .glass-card:nth-child(6n + 1) {
    background: linear-gradient(135deg, rgba(247, 95, 122, 0.16), rgba(255, 255, 255, 0.8)) !important;
}

#admin-section #admin-tab-dashboard > div:nth-of-type(2) .glass-card:nth-child(6n + 2) {
    background: linear-gradient(135deg, rgba(32, 199, 181, 0.16), rgba(255, 255, 255, 0.8)) !important;
}

#admin-section #admin-tab-dashboard > div:nth-of-type(2) .glass-card:nth-child(6n + 3) {
    background: linear-gradient(135deg, rgba(74, 140, 255, 0.16), rgba(255, 255, 255, 0.8)) !important;
}

#admin-section #admin-tab-dashboard > div:nth-of-type(2) .glass-card:nth-child(6n + 4) {
    background: linear-gradient(135deg, rgba(255, 159, 28, 0.17), rgba(255, 255, 255, 0.8)) !important;
}

#admin-section #admin-tab-dashboard > div:nth-of-type(2) .glass-card:nth-child(6n + 5) {
    background: linear-gradient(135deg, rgba(139, 109, 255, 0.15), rgba(255, 255, 255, 0.8)) !important;
}

#admin-section #admin-tab-dashboard > div:nth-of-type(2) .glass-card:nth-child(6n) {
    background: linear-gradient(135deg, rgba(101, 196, 102, 0.16), rgba(255, 255, 255, 0.8)) !important;
}

#admin-section #operation-control-card {
    background: linear-gradient(135deg, rgba(255, 201, 71, 0.18), rgba(255, 255, 255, 0.86)) !important;
    border-color: rgba(255, 159, 28, 0.3) !important;
}

#admin-section #operation-control-mode {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    max-width: min(100%, 260px);
    padding: 0.35rem 0.78rem;
    border: 1px solid rgba(255, 159, 28, 0.38);
    border-radius: 999px;
    color: #653900 !important;
    background: rgba(255, 201, 71, 0.28);
    box-shadow: 0 8px 18px rgba(255, 159, 28, 0.16);
    font-size: 0.72rem !important;
    font-weight: 950;
    line-height: 1.2;
    opacity: 1 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

#admin-section #operation-control-summary {
    margin-bottom: 1rem !important;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(74, 140, 255, 0.18);
    border-left: 4px solid var(--admin-orange);
    border-radius: 16px;
    color: #243041 !important;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 22px rgba(75, 72, 102, 0.08);
    font-size: 0.78rem !important;
    font-weight: 850;
    line-height: 1.75 !important;
    opacity: 1 !important;
    overflow-wrap: anywhere;
}

#admin-section #operation-control-card label {
    color: #273241 !important;
    opacity: 1 !important;
    font-weight: 850;
}

#admin-section #operation-control-card input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

#admin-section .modal-input,
#admin-login-section .modal-input,
#admin-section input.modal-input,
#admin-section select.modal-input,
#admin-section textarea.modal-input {
    min-height: 44px;
    color: var(--admin-text) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--admin-border-soft) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 18px rgba(31, 41, 51, 0.06) !important;
    font-size: 0.92rem !important;
    font-weight: 750 !important;
}

#admin-section .modal-input::placeholder,
#admin-login-section .modal-input::placeholder {
    color: #A5ACB7 !important;
    opacity: 1 !important;
}

#admin-section .modal-input:focus,
#admin-login-section .modal-input:focus,
#admin-section input:focus,
#admin-section select:focus,
#admin-section textarea:focus {
    border-color: rgba(74, 140, 255, 0.52) !important;
    box-shadow: 0 0 0 4px rgba(74, 140, 255, 0.14), 0 10px 20px rgba(31, 41, 51, 0.08) !important;
    outline: none;
}

#admin-section .cta-btn,
#admin-login-section .cta-btn,
#admin-section button.cta-btn,
#admin-section .active-audit-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--admin-teal), var(--admin-blue)) !important;
    box-shadow: 0 12px 22px rgba(32, 199, 181, 0.22) !important;
    font-weight: 900 !important;
    text-transform: none !important;
}

#admin-section .cta-btn:hover,
#admin-login-section .cta-btn:hover {
    transform: translateY(-1px);
}

#admin-section .cta-btn.secondary,
#admin-section #btn-user-reset,
#admin-section #btn-order-reset,
#admin-section #btn-redemption-reset,
#admin-section #btn-sys-reset,
#admin-section #btn-rp-reset,
#admin-section #btn-rp-search-reset,
#admin-section #btn-clear-uat-business-date,
#admin-section #btn-uat-reset-preview,
#admin-section #audit-subtabs .cta-btn:not(.active-audit-tab),
#admin-section [style*="background: rgba(255,255,255,0.05)"],
#admin-section [style*="background:rgba(255,255,255,0.05)"] {
    color: var(--admin-blue) !important;
    background: rgba(74, 140, 255, 0.1) !important;
    border: 1px solid rgba(74, 140, 255, 0.18) !important;
    box-shadow: none !important;
}

#admin-section #admin-user-modal .cta-btn,
#admin-section #admin-order-modal .cta-btn,
#admin-section #admin-redemption-modal .cta-btn,
#admin-section #admin-product-modal .cta-btn {
    width: auto;
}

#admin-section [style*="rgba(255,0,0"],
#admin-section [style*="rgba(255, 0, 0"],
#admin-section #btn-uat-reset-execute,
#admin-section #btn-user-panel-shutdown,
#admin-section #btn-reset-user-password {
    color: #fff !important;
    background: linear-gradient(135deg, var(--admin-danger), var(--admin-orange)) !important;
    border: 0 !important;
    box-shadow: 0 12px 22px rgba(232, 77, 103, 0.22) !important;
}

#admin-section .admin-table-wrapper {
    padding: 0.3rem !important;
    overflow-x: auto;
}

#admin-section .admin-table {
    min-width: 760px;
    color: var(--admin-text) !important;
    border-collapse: separate;
    border-spacing: 0;
}

#admin-section .admin-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.95rem 1rem !important;
    color: #7A6B5F !important;
    background: rgba(255, 250, 242, 0.96) !important;
    border-bottom: 1px solid var(--admin-border-soft) !important;
    opacity: 1 !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    text-transform: uppercase;
}

#admin-section .admin-table td {
    padding: 0.95rem 1rem !important;
    color: var(--admin-text) !important;
    border-bottom: 1px solid var(--admin-border-soft) !important;
    font-size: 0.82rem !important;
    vertical-align: top;
}

#admin-section .admin-table tbody tr {
    transition: background 0.2s ease;
}

#admin-section .admin-table tbody tr:hover {
    background: rgba(74, 140, 255, 0.06);
}

#admin-section .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0.28rem 0.7rem !important;
    border-radius: 999px !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    white-space: nowrap;
}

#admin-section .status-badge.completed,
#admin-section .status-badge.approved,
#admin-section .status-badge.success {
    color: #138F62 !important;
    background: rgba(101, 196, 102, 0.14) !important;
    border: 1px solid rgba(101, 196, 102, 0.34) !important;
}

#admin-section .status-badge.pending,
#admin-section .status-badge.submitted,
#admin-section .status-badge.warning {
    color: #A95F00 !important;
    background: rgba(255, 159, 28, 0.14) !important;
    border: 1px solid rgba(255, 159, 28, 0.34) !important;
}

#admin-section .status-badge.active,
#admin-section .status-badge.processing,
#admin-section .status-badge.info {
    color: #2563EB !important;
    background: rgba(74, 140, 255, 0.13) !important;
    border: 1px solid rgba(74, 140, 255, 0.28) !important;
}

#admin-section .status-badge.failed,
#admin-section .status-badge.rejected,
#admin-section .status-badge.cancelled,
#admin-section .status-badge.danger {
    color: #B4233E !important;
    background: rgba(232, 77, 103, 0.13) !important;
    border: 1px solid rgba(232, 77, 103, 0.32) !important;
}

#admin-login-analytics-detail-modal .modal-content,
#admin-user-modal .modal-content,
#admin-order-modal .modal-content,
#admin-redemption-modal .modal-content,
#admin-product-modal .modal-content {
    color: var(--admin-text) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 201, 71, 0.28) 0 96px, transparent 97px),
        radial-gradient(circle at 100% 8%, rgba(247, 95, 122, 0.16) 0 124px, transparent 125px),
        linear-gradient(145deg, var(--admin-surface-strong) 0%, #FDF7EF 58%, var(--admin-bg-2) 100%) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 28px !important;
    box-shadow: var(--admin-shadow) !important;
    backdrop-filter: blur(18px);
}

#admin-login-analytics-detail-modal .modal-close,
#admin-user-modal .modal-close,
#admin-order-modal .modal-close,
#admin-redemption-modal .modal-close,
#admin-product-modal .modal-close {
    color: var(--admin-text) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid var(--admin-border-soft) !important;
    border-radius: 16px !important;
    box-shadow: var(--admin-soft-shadow);
    opacity: 0.8;
}

#admin-section code,
#admin-section [style*="font-family:monospace"] {
    color: var(--admin-text) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#admin-section .admin-tab-content,
#admin-section .admin-table-wrapper,
#admin-section .glass-card {
    min-width: 0;
}

@media (max-width: 992px) {
    #admin-section {
        min-height: 100vh;
    }

    #admin-section .admin-sidebar {
        position: sticky !important;
        top: 0;
        z-index: 20;
        border-bottom: 1px solid rgba(31, 41, 51, 0.07) !important;
    }

    #admin-section .admin-nav-scroll {
        display: flex !important;
        padding: 0.35rem !important;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.74);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.86), 0 12px 28px rgba(31, 41, 51, 0.08);
    }

    #admin-section .admin-nav-item {
        justify-content: center;
        min-height: 44px;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.62rem !important;
    }

    #admin-section .admin-nav-item span {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        border-radius: 10px;
        font-size: 0.75rem !important;
    }

    #admin-section .admin-main-content {
        width: 100% !important;
        padding: 1rem !important;
    }

    #admin-section .admin-main-content::before {
        top: 5.25rem;
        right: auto;
        left: 3rem;
        font-size: clamp(6rem, 32vw, 10rem);
    }
}

@media (max-width: 600px) {
    #admin-login-section > div {
        width: min(94vw, 430px) !important;
        padding: 2rem 1.25rem !important;
        border-radius: 26px;
    }

    #admin-login-section > div > div {
        flex-direction: column;
    }

    #admin-login-section #admin-captcha-img {
        width: 100% !important;
        max-width: 180px;
        flex-basis: auto !important;
        align-self: center;
    }

    #admin-section .admin-nav-item {
        gap: 0.35rem !important;
    }

    #admin-section .admin-table {
        min-width: 680px;
    }

    #admin-section .admin-table th,
    #admin-section .admin-table td {
        padding: 0.75rem 0.55rem !important;
        font-size: 0.72rem !important;
    }

    #admin-section .glass-card,
    #admin-section .admin-table-wrapper,
    #admin-section .admin-tab-content > div[style*="background"] {
        border-radius: 18px !important;
    }
}

#user-panel-layout .rewards-hero,
#user-panel-layout .rewards-hero *,
#user-panel-layout #assets-main-view > .glass-card:first-of-type,
#user-panel-layout #assets-main-view > .glass-card:first-of-type *,
#user-panel-layout .point-balance-card,
#user-panel-layout .point-balance-card * {
    color: #fff !important;
    text-shadow: none !important;
}

/* User Panel colorful app theme preview. Keep this last so inline-heavy panels render as a light mobile app UI. */
#portal-modal .modal-content:not(.panel-active) {
    max-width: 480px !important;
    width: min(94vw, 480px) !important;
    padding: clamp(2.1rem, 5vw, 3.25rem) !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 30px !important;
    color: var(--user-panel-text) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 201, 71, 0.34) 0 92px, transparent 93px),
        radial-gradient(circle at 100% 6%, rgba(247, 95, 122, 0.2) 0 124px, transparent 125px),
        radial-gradient(circle at 76% 100%, rgba(32, 199, 181, 0.16) 0 150px, transparent 151px),
        linear-gradient(145deg, var(--user-panel-surface-strong) 0%, var(--user-panel-bg-3) 58%, var(--user-panel-bg-2) 100%) !important;
    box-shadow: var(--user-panel-shadow) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#portal-modal .modal-content:not(.panel-active)::before {
    content: "UK AKG";
    position: absolute;
    top: 0.7rem;
    right: -1rem;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    color: rgba(151, 111, 132, 0.08);
    font-size: clamp(3.8rem, 12vw, 5.8rem);
    font-weight: 950;
    line-height: 0.85;
    letter-spacing: 0 !important;
    transform: rotate(-8deg);
}

#portal-modal .login-modal-header {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto clamp(1.1rem, 3vw, 1.45rem);
}

#portal-modal .modal-content.panel-active .login-modal-header {
    display: none;
}

#portal-modal .modal-content:not(.panel-active) .login-modal-header .modal-close {
    position: static;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: var(--user-panel-text) !important;
    opacity: 0.72;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(31, 41, 51, 0.06);
    box-shadow: var(--user-panel-soft-shadow);
}

#portal-modal .modal-content:not(.panel-active) .login-modal-header .modal-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.9);
}

#portal-modal .login-lang-switcher {
    position: static;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 36px;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(31, 41, 51, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.66);
    box-shadow: var(--user-panel-soft-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#portal-modal .login-lang-switcher .lang-item {
    color: var(--user-panel-muted);
    font-size: 0.72rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0 !important;
    text-decoration: none;
    opacity: 1;
    padding: 0.36rem 0.48rem;
    border-radius: 999px;
}

#portal-modal .login-lang-switcher .lang-item.active {
    color: #fff;
    background: linear-gradient(135deg, var(--user-panel-pink), var(--user-panel-orange));
    box-shadow: 0 8px 18px rgba(247, 95, 122, 0.22);
}

#portal-modal .login-lang-switcher .sep {
    color: rgba(107, 114, 128, 0.45);
    font-weight: 800;
}

#portal-modal .modal-content:not(.panel-active) #portal-login,
#portal-modal .modal-content:not(.panel-active) #portal-forgot-password {
    position: relative;
    z-index: 1;
    max-width: 400px !important;
    color: var(--user-panel-text) !important;
}

#portal-modal .modal-content:not(.panel-active) #portal-login h2,
#portal-modal .modal-content:not(.panel-active) #forgot-password-title {
    margin: 0 0 1.5rem !important;
    color: var(--user-panel-text) !important;
    font-size: clamp(1.75rem, 7vw, 2.45rem) !important;
    font-weight: 950 !important;
    line-height: 1;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#portal-modal .modal-content:not(.panel-active) #forgot-password-body {
    color: var(--user-panel-muted) !important;
    opacity: 1 !important;
}

#portal-modal .modal-content:not(.panel-active) .modal-input {
    height: 52px;
    margin: 0 !important;
    color: var(--user-panel-text) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    border: 1px solid rgba(31, 41, 51, 0.09) !important;
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

#portal-modal .modal-content:not(.panel-active) .modal-input::placeholder {
    color: rgba(107, 114, 128, 0.86) !important;
}

#portal-modal .modal-content:not(.panel-active) .modal-input:focus {
    border-color: rgba(32, 199, 181, 0.45) !important;
    box-shadow: 0 0 0 4px rgba(32, 199, 181, 0.13) !important;
}

#portal-modal .modal-content:not(.panel-active) #login-captcha-img {
    height: 58px !important;
    border: 1px solid rgba(31, 41, 51, 0.08) !important;
    border-radius: 16px !important;
    background: #101010 !important;
    box-shadow: var(--user-panel-soft-shadow);
}

#portal-modal .modal-content:not(.panel-active) #login-captcha-answer {
    min-width: 0;
    flex: 1 1 auto;
}

#portal-modal .modal-content:not(.panel-active) #login-captcha-img {
    flex: 0 0 132px !important;
    max-width: 38vw;
}

#portal-modal .modal-content:not(.panel-active) #forgot-password-link {
    color: var(--user-panel-pink) !important;
    opacity: 1 !important;
    font-weight: 900;
    letter-spacing: 0.02rem !important;
}

#portal-modal .modal-content:not(.panel-active) #portal-check-btn,
#portal-modal .modal-content:not(.panel-active) #forgot-password-submit-btn {
    width: 100%;
    min-height: 52px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--user-panel-pink), var(--user-panel-orange)) !important;
    box-shadow: 0 14px 26px rgba(247, 95, 122, 0.25) !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#portal-modal .modal-content:not(.panel-active) #forgot-password-back-btn {
    min-height: 52px;
    border-radius: 999px !important;
    color: var(--user-panel-blue) !important;
    background: rgba(74, 140, 255, 0.1) !important;
    border: 1px solid rgba(74, 140, 255, 0.18) !important;
    box-shadow: none !important;
}

#portal-modal .modal-content.panel-active {
    background:
        radial-gradient(circle at 12% 4%, rgba(255, 201, 71, 0.36) 0 88px, transparent 89px),
        radial-gradient(circle at 90% 0%, rgba(247, 95, 122, 0.2) 0 112px, transparent 113px),
        linear-gradient(180deg, var(--user-panel-surface-strong) 0%, var(--user-panel-bg) 62%, var(--user-panel-bg-2) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.88) !important;
    color: var(--user-panel-text) !important;
}

#portal-modal:has(#user-panel-layout) {
    background: rgba(255, 246, 233, 0.72) !important;
}

#user-panel-layout {
    color: var(--user-panel-text) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 201, 71, 0.34) 0 130px, transparent 131px),
        radial-gradient(circle at 96% 7%, rgba(139, 109, 255, 0.18) 0 150px, transparent 151px),
        radial-gradient(circle at 80% 100%, rgba(32, 199, 181, 0.2) 0 180px, transparent 181px),
        linear-gradient(145deg, var(--user-panel-bg) 0%, var(--user-panel-bg-3) 52%, var(--user-panel-bg-2) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 30px !important;
    box-shadow: var(--user-panel-shadow) !important;
}

#user-panel-layout,
#user-panel-layout * {
    letter-spacing: 0 !important;
}

#user-panel-layout .panel-sidebar {
    background: rgba(255, 253, 248, 0.74) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: inset -1px 0 0 rgba(31, 41, 51, 0.04);
    backdrop-filter: blur(18px);
}

#user-panel-layout .sidebar-header {
    padding-bottom: 1.35rem;
}

#user-panel-layout .user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--user-panel-pink), var(--user-panel-orange)) !important;
    box-shadow: 0 12px 22px rgba(247, 95, 122, 0.28);
}

#user-panel-layout .user-meta .u-name,
#user-panel-layout .user-meta .u-id {
    color: var(--user-panel-text) !important;
    opacity: 1 !important;
}

#user-panel-layout .user-meta .u-id {
    color: var(--user-panel-muted) !important;
}

#user-panel-layout .sidebar-nav {
    gap: 0.55rem;
    padding: 0 0.9rem;
}

#user-panel-layout .side-tab {
    min-height: 52px;
    border: 0 !important;
    border-radius: 999px !important;
    color: #806f5a !important;
    background: transparent !important;
    opacity: 1 !important;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: none !important;
}

#user-panel-layout .side-tab:hover {
    color: var(--user-panel-text) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: var(--user-panel-soft-shadow) !important;
}

#user-panel-layout .side-tab .icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 12px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--user-panel-purple), var(--user-panel-blue));
    box-shadow: 0 8px 16px rgba(74, 140, 255, 0.18);
}

#user-panel-layout .side-tab[data-tab="home"] .icon {
    background: linear-gradient(135deg, var(--user-panel-pink), var(--user-panel-orange));
}

#user-panel-layout .side-tab[data-tab="build"] .icon {
    background: linear-gradient(135deg, var(--user-panel-teal), var(--user-panel-blue));
}

#user-panel-layout .side-tab[data-tab="earn"] .icon {
    background: linear-gradient(135deg, var(--user-panel-purple), var(--user-panel-pink));
}

#user-panel-layout .side-tab[data-tab="assets"] .icon {
    background: linear-gradient(135deg, var(--user-panel-orange), var(--user-panel-yellow));
}

#user-panel-layout .side-tab.active {
    color: #fff !important;
    transform: translateY(-1px);
}

#user-panel-layout .side-tab[data-tab="home"].active {
    background: linear-gradient(135deg, var(--user-panel-pink), var(--user-panel-orange)) !important;
    box-shadow: 0 14px 24px rgba(247, 95, 122, 0.26) !important;
}

#user-panel-layout .side-tab[data-tab="build"].active {
    background: linear-gradient(135deg, var(--user-panel-teal), var(--user-panel-blue)) !important;
    box-shadow: 0 14px 24px rgba(32, 199, 181, 0.24) !important;
}

#user-panel-layout .side-tab[data-tab="earn"].active {
    background: linear-gradient(135deg, var(--user-panel-purple), var(--user-panel-pink)) !important;
    box-shadow: 0 14px 24px rgba(139, 109, 255, 0.24) !important;
}

#user-panel-layout .side-tab[data-tab="assets"].active {
    background: linear-gradient(135deg, var(--user-panel-orange), var(--user-panel-yellow)) !important;
    box-shadow: 0 14px 24px rgba(255, 159, 28, 0.24) !important;
}

#user-panel-layout .side-tab.active .icon {
    background: rgba(255, 255, 255, 0.26) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32) !important;
}

#user-panel-layout .logout-link,
#user-panel-layout .mobile-logout-btn-security {
    border: 1px solid rgba(247, 95, 122, 0.22) !important;
    border-radius: 999px !important;
    color: var(--user-panel-pink) !important;
    background: rgba(247, 95, 122, 0.08) !important;
    font-weight: 900;
}

#user-panel-layout .panel-main {
    position: relative;
    overflow: hidden;
    background: transparent !important;
    padding: clamp(1.1rem, 3vw, 2.5rem) !important;
}

#user-panel-layout .panel-main::before {
    content: "UK AKG";
    position: absolute;
    top: clamp(0.5rem, 3vw, 2.4rem);
    right: clamp(0.5rem, 3vw, 2.25rem);
    z-index: 0;
    width: max-content;
    box-sizing: border-box;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    color: rgba(151, 111, 132, 0.12);
    font-size: clamp(6.75rem, 13vw, 13rem);
    font-weight: 950;
    line-height: 0.82;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    transform: rotate(-7deg);
    transform-origin: 70% 20%;
    text-shadow: 0 14px 42px rgba(255, 201, 71, 0.09);
}

#user-panel-layout .panel-main > * {
    position: relative;
    z-index: 1;
}

#user-panel-layout .section-title {
    margin-bottom: 1.2rem !important;
    color: var(--user-panel-text) !important;
    font-size: clamp(1.35rem, 2.6vw, 2.1rem) !important;
    font-weight: 950 !important;
    line-height: 1.05;
    text-transform: none !important;
}

#user-panel-layout .sub-title,
#user-panel-layout h3,
#user-panel-layout h4,
#user-panel-layout .pv-summary-head h4,
#user-panel-layout .rewards-hero h3,
#user-panel-layout .bu-tree-card .username {
    color: var(--user-panel-text) !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    text-transform: none !important;
}

#user-panel-layout .sub-title {
    margin: 1.15rem 0 0.8rem !important;
    font-size: 1rem !important;
}

#user-panel-layout .glass-card,
#user-panel-layout .stat-card,
#user-panel-layout .balance-card,
#user-panel-layout .pv-summary-card,
#user-panel-layout .pv-metric,
#user-panel-layout .info-item,
#user-panel-layout .pt-box,
#user-panel-layout .reward-box,
#user-panel-layout .point-balance-card,
#user-panel-layout .setting-item,
#user-panel-layout .bu-tree-card,
#user-panel-layout #binary-tree-container,
#user-panel-layout .binary-tree-empty-slot,
#user-panel-layout .table-wrapper {
    background: rgba(255, 255, 255, 0.76) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 24px !important;
    box-shadow: var(--user-panel-soft-shadow) !important;
    color: var(--user-panel-text) !important;
    backdrop-filter: blur(14px);
}

#user-panel-layout .glass-card:hover,
#user-panel-layout .balance-card:hover,
#user-panel-layout .pv-summary-card:hover,
#user-panel-layout .reward-box:hover,
#user-panel-layout .point-balance-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(75, 72, 102, 0.14) !important;
}

#user-panel-layout #tab-home > .glass-card:first-of-type,
#user-panel-layout .pv-summary-card-cycle {
    background: linear-gradient(135deg, rgba(32, 199, 181, 0.14), rgba(74, 140, 255, 0.1), rgba(255, 255, 255, 0.8)) !important;
}

#user-panel-layout .rewards-hero {
    position: relative;
    overflow: hidden;
    color: #fff !important;
    background: linear-gradient(135deg, var(--user-panel-purple), var(--user-panel-pink), var(--user-panel-orange)) !important;
    border-color: rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    box-shadow: 0 20px 38px rgba(139, 109, 255, 0.22) !important;
}

#user-panel-layout .rewards-hero::before,
#user-panel-layout .point-balance-card::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -58px;
    top: -62px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

#user-panel-layout .rewards-hero label,
#user-panel-layout .rewards-hero .val,
#user-panel-layout .rewards-hero span {
    color: #fff !important;
    text-shadow: none !important;
}

#user-panel-layout #assets-main-view > .glass-card:first-of-type,
#user-panel-layout .point-balance-card {
    position: relative;
    overflow: hidden;
    color: #fff !important;
    background: linear-gradient(135deg, var(--user-panel-orange), var(--user-panel-yellow), var(--user-panel-green)) !important;
    border-color: rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    box-shadow: 0 20px 38px rgba(255, 159, 28, 0.22) !important;
}

#user-panel-layout #assets-main-view > .glass-card:first-of-type h3,
#user-panel-layout #assets-main-view > .glass-card:first-of-type span,
#user-panel-layout #assets-main-view > .glass-card:first-of-type .val,
#user-panel-layout .point-balance-card label,
#user-panel-layout .point-balance-card .val {
    color: #fff !important;
    text-shadow: none !important;
}

#user-panel-layout #assets-agent-center-entry,
#user-panel-layout #asset-agent-center > .glass-card,
#user-panel-layout #agent-order-payment-reference-group > .glass-card,
#user-panel-layout .agent-info-grid .glass-card {
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 26px !important;
    box-shadow: var(--user-panel-soft-shadow) !important;
    color: var(--user-panel-text) !important;
}

#user-panel-layout #assets-agent-center-entry {
    background:
        radial-gradient(circle at 8% 0%, rgba(32, 199, 181, 0.18), transparent 46%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 246, 233, 0.76)) !important;
}

#user-panel-layout #asset-agent-center > .glass-card:first-of-type {
    overflow: hidden;
    background: linear-gradient(135deg, var(--user-panel-teal), var(--user-panel-green)) !important;
    border-color: rgba(255, 255, 255, 0.76) !important;
    box-shadow: 0 20px 38px rgba(32, 199, 181, 0.22) !important;
    color: #fff !important;
}

#user-panel-layout #asset-agent-center > .glass-card:first-of-type *,
#user-panel-layout #asset-agent-center > .glass-card:first-of-type .status-badge {
    color: #fff !important;
    text-shadow: none !important;
}

#user-panel-layout #asset-agent-center > .glass-card:first-of-type .status-badge {
    background: rgba(255, 255, 255, 0.24) !important;
    border: 1px solid rgba(255, 255, 255, 0.44) !important;
}

#user-panel-layout #assets-agent-center-title,
#user-panel-layout #agent-restock-title,
#user-panel-layout #agent-order-business-total,
#user-panel-layout #agent-order-minimum-status,
#user-panel-layout #agent-order-total-sets {
    color: var(--user-panel-teal) !important;
}

#user-panel-layout #assets-agent-center-note,
#user-panel-layout #agent-center-status-desc,
#user-panel-layout #agent-restock-subtitle,
#user-panel-layout #agent-restock-pv-note,
#user-panel-layout #agent-order-payment-hint,
#user-panel-layout #agent-order-payment-note,
#user-panel-layout #agent-order-footnote,
#user-panel-layout .agent-info-grid [id$="-body"] {
    color: var(--user-panel-muted) !important;
    opacity: 1 !important;
}

#user-panel-layout #asset-agent-center [id$="-label"],
#user-panel-layout #asset-agent-center label,
#user-panel-layout .agent-info-grid [id$="-title"] {
    color: var(--user-panel-muted) !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.04rem !important;
}

#user-panel-layout .agent-balance-grid .glass-card,
#user-panel-layout .agent-restock-breakdown-grid .glass-card {
    min-height: 104px;
    border-radius: 22px !important;
}

#user-panel-layout .agent-restock-breakdown-grid .glass-card:nth-child(3n + 1) {
    background: linear-gradient(135deg, rgba(32, 199, 181, 0.15), rgba(255, 255, 255, 0.82)) !important;
}

#user-panel-layout .agent-restock-breakdown-grid .glass-card:nth-child(3n + 2) {
    background: linear-gradient(135deg, rgba(255, 159, 28, 0.16), rgba(255, 255, 255, 0.82)) !important;
}

#user-panel-layout .agent-restock-breakdown-grid .glass-card:nth-child(3n) {
    background: linear-gradient(135deg, rgba(139, 109, 255, 0.15), rgba(255, 255, 255, 0.82)) !important;
}

#user-panel-layout #agent-order-payment-reference-group {
    padding: 1rem;
    border-radius: 24px;
    background: rgba(255, 250, 242, 0.72);
    border: 1px solid rgba(31, 41, 51, 0.06);
}

#user-panel-layout #agent-order-wallet-address {
    color: var(--user-panel-text) !important;
    background: rgba(255, 255, 255, 0.62);
    border-radius: 16px;
    padding: 0.75rem;
}

#user-panel-layout #agent-center-back-btn,
#user-panel-layout #assets-agent-center-btn,
#user-panel-layout #agent-order-copy-wallet-btn {
    background: rgba(74, 140, 255, 0.1) !important;
    border: 1px solid rgba(74, 140, 255, 0.18) !important;
    color: var(--user-panel-blue) !important;
    box-shadow: none !important;
}

#user-panel-layout #agent-order-submit-btn {
    background: linear-gradient(135deg, var(--user-panel-pink), var(--user-panel-orange)) !important;
    box-shadow: 0 14px 26px rgba(247, 95, 122, 0.24) !important;
}

#user-panel-layout #asset-agent-center .modal-input:disabled,
#user-panel-layout #asset-agent-center .modal-input[readonly],
#user-panel-layout #asset-agent-center button:disabled {
    opacity: 0.72 !important;
    cursor: not-allowed;
}

#user-panel-layout .balance-card:nth-child(1),
#user-panel-layout .agent-balance-grid .glass-card:nth-child(2) {
    background: linear-gradient(135deg, rgba(247, 95, 122, 0.14), rgba(255, 255, 255, 0.78)) !important;
}

#user-panel-layout .balance-card:nth-child(2),
#user-panel-layout .agent-balance-grid .glass-card:nth-child(1) {
    background: linear-gradient(135deg, rgba(32, 199, 181, 0.14), rgba(255, 255, 255, 0.78)) !important;
}

#user-panel-layout .balance-card:nth-child(3),
#user-panel-layout .agent-balance-grid .glass-card:nth-child(3) {
    background: linear-gradient(135deg, rgba(74, 140, 255, 0.14), rgba(255, 255, 255, 0.78)) !important;
}

#user-panel-layout .balance-card:nth-child(4),
#user-panel-layout .agent-balance-grid .glass-card:nth-child(4) {
    background: linear-gradient(135deg, rgba(255, 159, 28, 0.16), rgba(255, 255, 255, 0.78)) !important;
}

#user-panel-layout .balance-card:nth-child(5),
#user-panel-layout .agent-balance-grid .glass-card:nth-child(5) {
    background: linear-gradient(135deg, rgba(139, 109, 255, 0.14), rgba(255, 255, 255, 0.78)) !important;
}

#user-panel-layout .balance-card:nth-child(6),
#user-panel-layout .agent-balance-grid .glass-card:nth-child(6) {
    background: linear-gradient(135deg, rgba(101, 196, 102, 0.14), rgba(255, 255, 255, 0.78)) !important;
}

#user-panel-layout label,
#user-panel-layout small,
#user-panel-layout p,
#user-panel-layout .pv-metric label,
#user-panel-layout .pv-status-row label,
#user-panel-layout .pv-leg-badge small,
#user-panel-layout .premium-table th,
#user-panel-layout .panel-table th,
#user-panel-layout .bu-tree-card .pv-label,
#user-panel-layout .binary-tree-empty-slot .slot-side-label,
#user-panel-layout .binary-tree-empty-slot .slot-text,
#user-panel-layout [style*="opacity: 0.5"],
#user-panel-layout [style*="opacity:0.5"],
#user-panel-layout [style*="opacity: 0.6"],
#user-panel-layout [style*="opacity:0.6"],
#user-panel-layout [style*="rgba(255,255,255,0.6)"] {
    color: var(--user-panel-muted) !important;
    opacity: 1 !important;
    font-weight: 750 !important;
}

#user-panel-layout .pv-value,
#user-panel-layout .pv-status-value,
#user-panel-layout .pv-leg-badge strong,
#user-panel-layout .balance-card .val,
#user-panel-layout .stat-card .val,
#user-panel-layout .reward-box .val,
#user-panel-layout .point-balance-card .val,
#user-panel-layout .hero-stat.main .val,
#user-panel-layout .h-stat span,
#user-panel-layout .info-row span,
#user-panel-layout .pt-box span,
#user-panel-layout .bu-tree-card .pv-value,
#user-panel-layout .val,
#user-panel-layout [style*="color: #fff"],
#user-panel-layout [style*="color:#fff"] {
    color: var(--user-panel-text) !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

#user-panel-layout .hero-stat.main .val,
#user-panel-layout .point-balance-card .val,
#user-panel-layout #asset-bonus-bal {
    font-size: clamp(2rem, 7vw, 3.2rem) !important;
    line-height: 1;
}

#user-panel-layout .pv-status-value.is-accent,
#user-panel-layout [style*="var(--accent)"],
#user-panel-layout .accent-text {
    color: var(--user-panel-pink) !important;
}

#user-panel-layout .pv-leg-badge,
#user-panel-layout .status-badge,
#user-panel-layout .reg-calc-box,
#user-panel-layout #subtree-fallback-container {
    border-color: rgba(31, 41, 51, 0.08) !important;
    background: rgba(255, 255, 255, 0.68) !important;
    border-radius: 18px !important;
    color: var(--user-panel-text) !important;
}

#user-panel-layout .build-subtabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0 0 1.25rem;
    padding: 0.35rem;
    border: 1px solid rgba(31, 41, 51, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 22px rgba(31, 41, 51, 0.06);
}

#user-panel-layout .build-subtab-btn {
    min-height: 42px;
    padding: 0.65rem 0.9rem;
    border: 0;
    border-radius: 14px;
    color: var(--user-panel-blue);
    background: transparent;
    font-size: 0.82rem;
    font-weight: 900;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

#user-panel-layout .build-subtab-btn.active {
    color: #fff;
    background: linear-gradient(135deg, var(--user-panel-teal), var(--user-panel-blue));
    box-shadow: 0 12px 22px rgba(32, 199, 181, 0.22);
}

#user-panel-layout .build-subtab-panel {
    display: none;
}

#user-panel-layout .build-subtab-panel.active {
    display: block;
}

#user-panel-layout .status-badge.completed,
#user-panel-layout .status-badge.active {
    color: #138f62 !important;
    border-color: rgba(101, 196, 102, 0.34) !important;
    background: rgba(101, 196, 102, 0.14) !important;
}

#user-panel-layout .status-badge.pending,
#user-panel-layout .status-badge.submitted {
    color: #a95f00 !important;
    border-color: rgba(255, 159, 28, 0.34) !important;
    background: rgba(255, 159, 28, 0.14) !important;
}

#user-panel-layout .modal-input,
#user-panel-layout input.modal-input,
#user-panel-layout select.modal-input,
#user-panel-layout textarea.modal-input,
#user-panel-layout #home-current-email {
    min-height: 50px;
    color: var(--user-panel-text) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(31, 41, 51, 0.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 18px rgba(31, 41, 51, 0.06) !important;
    font-size: 0.95rem;
    font-weight: 750;
}

#user-panel-layout select.modal-input {
    cursor: pointer;
}

#user-panel-layout .modal-input::placeholder,
#user-panel-layout input::placeholder,
#user-panel-layout textarea::placeholder {
    color: #A5ACB7 !important;
    opacity: 1 !important;
}

#user-panel-layout .modal-input:focus,
#user-panel-layout input:focus,
#user-panel-layout select:focus,
#user-panel-layout textarea:focus {
    border-color: rgba(74, 140, 255, 0.52) !important;
    box-shadow: 0 0 0 4px rgba(74, 140, 255, 0.14), 0 10px 20px rgba(31, 41, 51, 0.08) !important;
}

#user-panel-layout .cta-btn,
#user-panel-layout .btn-primary,
#user-panel-layout .mini-btn,
#user-panel-layout .point-tab,
#user-panel-layout button.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--user-panel-pink), var(--user-panel-orange)) !important;
    box-shadow: 0 12px 22px rgba(247, 95, 122, 0.22) !important;
    font-weight: 900 !important;
    text-transform: none !important;
}

#user-panel-layout .btn-primary,
#user-panel-layout #build-lookup-btn,
#user-panel-layout #confirm-register-btn,
#user-panel-layout #agent-order-submit-btn {
    background: linear-gradient(135deg, var(--user-panel-teal), var(--user-panel-blue)) !important;
    box-shadow: 0 12px 22px rgba(32, 199, 181, 0.22) !important;
}

#user-panel-layout #success-btn-view-org,
#user-panel-layout #success-btn-go-earn,
#user-panel-layout .point-tab,
#user-panel-layout [style*="background:rgba(255,255,255,0.05)"] {
    color: var(--user-panel-blue) !important;
    background: rgba(74, 140, 255, 0.1) !important;
    border: 1px solid rgba(74, 140, 255, 0.18) !important;
    box-shadow: none !important;
}

#user-panel-layout .point-tab.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--user-panel-purple), var(--user-panel-blue)) !important;
    box-shadow: 0 12px 22px rgba(139, 109, 255, 0.22) !important;
}

#user-panel-layout .info-row,
#user-panel-layout .premium-table th,
#user-panel-layout .premium-table td,
#user-panel-layout .panel-table th,
#user-panel-layout .panel-table td,
#user-panel-layout .pv-status-row {
    border-color: rgba(31, 41, 51, 0.08) !important;
}

#user-panel-layout .premium-table,
#user-panel-layout .panel-table {
    color: var(--user-panel-text) !important;
}

#user-panel-layout .table-wrapper {
    padding: 0.3rem;
}

#user-panel-layout .premium-table th,
#user-panel-layout .panel-table th {
    color: #7A6B5F !important;
}

#user-panel-layout .premium-table td,
#user-panel-layout .panel-table td {
    color: var(--user-panel-text) !important;
}

#user-panel-layout #binary-tree-container {
    background: rgba(255, 253, 248, 0.76) !important;
}

#user-panel-layout .binary-tree-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

#user-panel-layout .binary-tree-header .sub-title {
    margin-bottom: 0 !important;
}

#user-panel-layout .binary-tree-bu-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#user-panel-layout .binary-tree-bu-label {
    color: var(--user-panel-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#user-panel-layout .binary-tree-bu-select,
#user-panel-layout .binary-tree-bu-single {
    min-height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(74, 140, 255, 0.22);
    background: linear-gradient(135deg, rgba(74, 140, 255, 0.1), rgba(32, 199, 181, 0.08)), rgba(255, 255, 255, 0.84);
    color: var(--user-panel-text);
    box-shadow: var(--user-panel-soft-shadow);
    font-size: 0.78rem;
    font-weight: 700;
}

#user-panel-layout .binary-tree-bu-select {
    padding: 0.35rem 2rem 0.35rem 0.7rem;
    cursor: pointer;
}

#user-panel-layout .binary-tree-bu-single {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
}

#user-panel-layout .binary-tree-depth-note,
#user-panel-layout .binary-tree-more-hint {
    color: var(--user-panel-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}

#user-panel-layout .binary-tree-depth-note {
    margin-bottom: 0.5rem;
}

#user-panel-layout .binary-tree-more-hint {
    margin-top: 0.4rem;
    color: var(--user-panel-blue);
}

#user-panel-layout .binary-tree-branch:not(:only-child) > .binary-tree-node-wrapper::after,
#user-panel-layout .binary-tree-children::before,
#user-panel-layout .binary-tree-child::before {
    background: rgba(74, 140, 255, 0.26) !important;
}

#user-panel-layout .bu-tree-card.current-user {
    background: linear-gradient(135deg, rgba(255, 159, 28, 0.18), rgba(255, 255, 255, 0.8)) !important;
    border-color: rgba(255, 159, 28, 0.28) !important;
}

#user-panel-layout .assets-grid .glass-card {
    border-left-width: 0 !important;
}

#user-panel-layout .assets-grid .glass-card:nth-child(1) {
    background: linear-gradient(135deg, rgba(32, 199, 181, 0.16), rgba(255, 255, 255, 0.8)) !important;
}

#user-panel-layout .assets-grid .glass-card:nth-child(2) {
    background: linear-gradient(135deg, rgba(74, 140, 255, 0.16), rgba(255, 255, 255, 0.8)) !important;
}

#user-panel-layout .assets-grid .glass-card:nth-child(3) {
    background: linear-gradient(135deg, rgba(255, 201, 71, 0.2), rgba(255, 255, 255, 0.8)) !important;
}

#user-panel-layout .assets-grid .glass-card:nth-child(4) {
    background: linear-gradient(135deg, rgba(247, 95, 122, 0.16), rgba(255, 255, 255, 0.8)) !important;
}

#user-panel-layout .assets-grid .glass-card:nth-child(5) {
    background: linear-gradient(135deg, rgba(101, 196, 102, 0.16), rgba(255, 255, 255, 0.8)) !important;
}

#user-panel-layout,
#user-panel-layout .panel-main,
#user-panel-layout .glass-card,
#user-panel-layout .form-group,
#user-panel-layout .tab-content,
#user-panel-layout .assets-grid,
#user-panel-layout .agent-restock-form-grid,
#user-panel-layout .agent-restock-breakdown-grid,
#user-panel-layout .register-placement-grid {
    min-width: 0;
}

#user-panel-layout .modal-input,
#user-panel-layout input.modal-input,
#user-panel-layout select.modal-input,
#user-panel-layout textarea.modal-input,
#user-panel-layout .cta-btn.full-width,
#user-panel-layout .mobile-logout-btn-security {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#user-panel-layout .user-security-card {
    overflow-x: hidden;
}

#user-panel-layout .user-security-grid {
    width: 100%;
    max-width: 100%;
}

#user-panel-layout .user-security-form {
    width: 100%;
    max-width: 400px;
    min-width: 0;
}

#user-panel-layout #home-current-email,
#user-panel-layout #agent-order-wallet-address,
#user-panel-layout .pv-status-value {
    overflow-wrap: anywhere;
    word-break: break-word;
}

#user-panel-layout #binary-tree-container.binary-tree-scroll {
    display: block;
    justify-content: initial;
    align-items: initial;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
}

#user-panel-layout .binary-tree-render-shell,
#user-panel-layout .binary-tree-stage {
    box-sizing: border-box;
}

#user-panel-layout .binary-tree-render-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    min-width: 100%;
    margin: 0 auto;
}

#user-panel-layout .binary-tree-stage {
    display: flex;
    justify-content: center;
    width: max-content;
    min-width: 100%;
    padding: 0.5rem 1rem;
}

@media (max-width: 992px) {
    #user-panel-layout {
        min-height: 100vh;
        border-radius: 0 !important;
        border-width: 0 !important;
    }

    #user-panel-layout .panel-sidebar {
        position: sticky;
        top: 0;
        z-index: 20;
        padding: 0.75rem 0.75rem 0.85rem !important;
        border-bottom: 1px solid rgba(31, 41, 51, 0.07) !important;
    }

    #user-panel-layout .sidebar-nav {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.35rem;
        padding: 0.35rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.74);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.86), 0 12px 28px rgba(31, 41, 51, 0.08);
    }

    #user-panel-layout .side-tab {
        min-height: 44px;
        justify-content: center;
        padding: 0.5rem 0.2rem !important;
        gap: 0.25rem;
        font-size: 0.58rem;
        line-height: 1;
    }

    #user-panel-layout .side-tab .icon {
        width: 22px;
        height: 22px;
        border-radius: 9px;
        font-size: 0.75rem;
    }

    #user-panel-layout .side-tab.active {
        border: 0 !important;
        box-shadow: 0 10px 18px rgba(31, 41, 51, 0.14) !important;
    }

    #user-panel-layout .panel-main {
        padding: 1rem !important;
    }

    #user-panel-layout .panel-main::before {
        content: "UK\A AKG";
        top: 4.05rem;
        right: auto;
        left: 3.75rem;
        color: rgba(151, 111, 132, 0.16);
        font-size: clamp(6.4rem, 34vw, 10.5rem);
        line-height: 0.72;
        white-space: pre-line;
        text-align: left;
        transform: rotate(-9deg);
        transform-origin: 20% 20%;
        text-shadow: 0 12px 36px rgba(255, 201, 71, 0.12);
    }

    #user-panel-layout .stats-row,
    #user-panel-layout .balances-row,
    #user-panel-layout .hero-stat-grid,
    #user-panel-layout .assets-grid,
    #user-panel-layout .agent-balance-grid,
    #user-panel-layout .agent-info-grid,
    #user-panel-layout .agent-restock-form-grid,
    #user-panel-layout .agent-restock-breakdown-grid {
        grid-template-columns: 1fr !important;
    }

    #user-panel-layout .bu-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    #portal-modal .modal-content.panel-active {
        width: 100% !important;
        min-height: 100vh;
        border-radius: 0 !important;
    }

    #portal-modal .modal-content:not(.panel-active) {
        width: min(94vw, 430px) !important;
        padding: 1.25rem 1.25rem 2rem !important;
        border-radius: 26px !important;
    }

    #portal-modal .login-modal-header {
        margin-bottom: 1.25rem;
    }

    #portal-modal .login-lang-switcher {
        min-height: 34px;
        padding: 0.3rem 0.6rem;
    }

    #portal-modal .modal-content:not(.panel-active) .login-modal-header .modal-close {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    #portal-modal .modal-content:not(.panel-active) #login-captcha-img {
        flex-basis: 112px !important;
    }

    #user-panel-layout .tab-content.active {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    #user-panel-layout .section-title {
        margin-bottom: 1rem !important;
        font-size: 1.32rem !important;
    }

    #user-panel-layout .glass-card,
    #user-panel-layout .stat-card,
    #user-panel-layout .balance-card,
    #user-panel-layout .pv-summary-card {
        background: rgba(255, 255, 255, 0.68) !important;
        padding: 1rem !important;
        backdrop-filter: blur(10px);
    }

    #user-panel-layout #tab-home > .glass-card:first-of-type,
    #user-panel-layout .pv-summary-card-cycle {
        background: linear-gradient(135deg, rgba(32, 199, 181, 0.18), rgba(74, 140, 255, 0.13), rgba(255, 255, 255, 0.56)) !important;
    }

    #user-panel-layout #tab-home .pv-summary-card:not(.pv-summary-card-cycle) {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 246, 233, 0.5)) !important;
    }

    #user-panel-layout #tab-home .pv-metric {
        background: rgba(255, 255, 255, 0.78) !important;
    }

    #user-panel-layout .balance-card:nth-child(1) {
        background: linear-gradient(135deg, rgba(247, 95, 122, 0.1), rgba(255, 255, 255, 0.66)) !important;
    }

    #user-panel-layout .balance-card:nth-child(2) {
        background: linear-gradient(135deg, rgba(32, 199, 181, 0.1), rgba(255, 255, 255, 0.66)) !important;
    }

    #user-panel-layout .balance-card:nth-child(3) {
        background: linear-gradient(135deg, rgba(74, 140, 255, 0.1), rgba(255, 255, 255, 0.66)) !important;
    }

    #user-panel-layout .balance-card:nth-child(4) {
        background: linear-gradient(135deg, rgba(255, 159, 28, 0.12), rgba(255, 255, 255, 0.66)) !important;
    }

    #user-panel-layout .balance-card:nth-child(5) {
        background: linear-gradient(135deg, rgba(139, 109, 255, 0.1), rgba(255, 255, 255, 0.66)) !important;
    }

    #user-panel-layout .balance-card:nth-child(6) {
        background: linear-gradient(135deg, rgba(101, 196, 102, 0.1), rgba(255, 255, 255, 0.66)) !important;
    }

    #user-panel-layout .rewards-hero {
        background: linear-gradient(135deg, rgba(139, 109, 255, 0.76), rgba(247, 95, 122, 0.68), rgba(255, 159, 28, 0.6)) !important;
    }

    #user-panel-layout #assets-main-view > .glass-card:first-of-type,
    #user-panel-layout .point-balance-card {
        background: linear-gradient(135deg, rgba(255, 159, 28, 0.72), rgba(247, 95, 122, 0.56), rgba(101, 196, 102, 0.48)) !important;
    }

    #user-panel-layout #tab-build #reg-form-card {
        background: linear-gradient(135deg, rgba(139, 109, 255, 0.13), rgba(247, 95, 122, 0.08), rgba(255, 255, 255, 0.58)) !important;
    }

    #user-panel-layout #tab-build #build-tree-panel > .glass-card,
    #user-panel-layout #tab-build #binary-tree-container {
        background: linear-gradient(135deg, rgba(32, 199, 181, 0.1), rgba(255, 255, 255, 0.6)) !important;
    }

    #user-panel-layout #tab-build #subtree-fallback-container,
    #user-panel-layout #build-points-summary {
        background: rgba(255, 255, 255, 0.7) !important;
    }

    #user-panel-layout .assets-grid .glass-card:nth-child(1) {
        background: linear-gradient(135deg, rgba(32, 199, 181, 0.11), rgba(255, 255, 255, 0.66)) !important;
    }

    #user-panel-layout .assets-grid .glass-card:nth-child(2) {
        background: linear-gradient(135deg, rgba(74, 140, 255, 0.11), rgba(255, 255, 255, 0.66)) !important;
    }

    #user-panel-layout .assets-grid .glass-card:nth-child(3) {
        background: linear-gradient(135deg, rgba(255, 201, 71, 0.14), rgba(255, 255, 255, 0.66)) !important;
    }

    #user-panel-layout .assets-grid .glass-card:nth-child(4) {
        background: linear-gradient(135deg, rgba(247, 95, 122, 0.11), rgba(255, 255, 255, 0.66)) !important;
    }

    #user-panel-layout .assets-grid .glass-card:nth-child(5) {
        background: linear-gradient(135deg, rgba(101, 196, 102, 0.11), rgba(255, 255, 255, 0.66)) !important;
    }

    #user-panel-layout .pv-metric-grid,
    #user-panel-layout .register-placement-grid,
    #user-panel-layout .user-security-grid,
    #user-panel-layout #reg-form-card [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 0.9rem !important;
    }

    #user-panel-layout .register-placement-lookup-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    #user-panel-layout .build-subtabs {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    #user-panel-layout #build-points-summary {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.9rem;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.66) !important;
    }

    #user-panel-layout #tab-home.tab-content.active > .glass-card:first-of-type,
    #user-panel-layout #tab-home.tab-content.active .pv-summary-card-cycle {
        background: linear-gradient(135deg, rgba(32, 199, 181, 0.32), rgba(74, 140, 255, 0.24), rgba(255, 255, 255, 0.64)) !important;
        backdrop-filter: none;
    }

    #user-panel-layout #tab-home.tab-content.active .pv-summary-card:not(.pv-summary-card-cycle) {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 246, 233, 0.58)) !important;
        backdrop-filter: none;
    }

    #user-panel-layout #tab-home.tab-content.active .balance-card {
        background-blend-mode: normal;
        backdrop-filter: none;
    }

    #user-panel-layout #tab-build.tab-content.active #reg-form-card {
        background: linear-gradient(135deg, rgba(139, 109, 255, 0.26), rgba(247, 95, 122, 0.16), rgba(255, 255, 255, 0.66)) !important;
        backdrop-filter: none;
    }

    #user-panel-layout #tab-build.tab-content.active #build-tree-panel > .glass-card,
    #user-panel-layout #tab-build.tab-content.active #binary-tree-container {
        background: linear-gradient(135deg, rgba(32, 199, 181, 0.18), rgba(255, 255, 255, 0.66)) !important;
        backdrop-filter: none;
    }

    #user-panel-layout #tab-assets.tab-content.active #assets-main-view > .glass-card:first-of-type,
    #user-panel-layout #tab-assets.tab-content.active .point-balance-card {
        background: linear-gradient(135deg, rgba(255, 159, 28, 0.74), rgba(247, 95, 122, 0.58), rgba(255, 201, 71, 0.5)) !important;
        backdrop-filter: none;
    }

    #user-panel-layout .asset-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem !important;
    }

    #user-panel-layout .asset-actions button {
        width: 100% !important;
        min-height: 44px !important;
        padding: 0.75rem 0.5rem !important;
        font-size: 0.68rem !important;
        white-space: normal;
        line-height: 1.15;
    }

    #user-panel-layout .asset-actions button:last-child {
        grid-column: span 2;
    }

    #user-panel-layout .hero-stat-grid {
        gap: 0.75rem;
        border-top-color: rgba(255, 255, 255, 0.26) !important;
    }

    #user-panel-layout .h-stat span {
        display: block;
        font-size: 0.95rem;
        overflow-wrap: anywhere;
    }

    #user-panel-layout .table-wrapper {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        border-radius: 18px !important;
    }

    #user-panel-layout .premium-table th,
    #user-panel-layout .premium-table td {
        padding: 0.75rem 0.55rem;
        font-size: 0.72rem;
    }

    #user-panel-layout #binary-tree-container.binary-tree-scroll {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        padding: 1rem 0.25rem;
        border-radius: 18px !important;
    }

    #user-panel-layout .binary-tree-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    #user-panel-layout .binary-tree-bu-selector,
    #user-panel-layout .binary-tree-bu-select {
        width: 100%;
    }

    #user-panel-layout .binary-tree-stage {
        padding: 0.35rem 1rem 0.5rem;
    }
}

/* Preview EOF override: keep User Login and User Panel aligned with UK AKG black/gold/blue brand colors. */
#portal-modal {
    --user-panel-bg: #071126;
    --user-panel-bg-2: #0B1730;
    --user-panel-bg-3: #102549;
    --user-panel-surface: #F7FAFF;
    --user-panel-surface-strong: #FFFFFF;
    --user-panel-border: rgba(197, 160, 89, 0.46);
    --user-panel-border-soft: rgba(12, 29, 57, 0.14);
    --user-panel-text: #071126;
    --user-panel-muted: #334155;
    --user-panel-pink: #C5A059;
    --user-panel-teal: #00D4FF;
    --user-panel-orange: #C5A059;
    --user-panel-yellow: #F0CD78;
    --user-panel-purple: #1E5BFF;
    --user-panel-blue: #00A7FF;
    --user-panel-green: #17A76B;
    --user-panel-shadow: 0 22px 58px rgba(0, 6, 18, 0.42);
    --user-panel-soft-shadow: 0 14px 30px rgba(0, 12, 32, 0.16);
}

#portal-modal:has(#portal-login),
#portal-modal:has(#portal-forgot-password),
#portal-modal:has(#user-panel-layout) {
    background: linear-gradient(rgba(2, 6, 18, 0.68), rgba(2, 6, 18, 0.74)) !important;
}

#portal-modal .modal-content:not(.panel-active) {
    color: #F8FAFC !important;
    border-color: rgba(197, 160, 89, 0.56) !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(0, 167, 255, 0.26) 0 92px, transparent 94px),
        radial-gradient(circle at 100% 5%, rgba(197, 160, 89, 0.24) 0 118px, transparent 120px),
        linear-gradient(145deg, #050A16 0%, #08152D 58%, #10264B 100%) !important;
    box-shadow: 0 28px 70px rgba(0, 5, 16, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#portal-modal .modal-content:not(.panel-active)::before {
    color: rgba(0, 167, 255, 0.1) !important;
}

#portal-modal .modal-content:not(.panel-active) #portal-login,
#portal-modal .modal-content:not(.panel-active) #portal-forgot-password,
#portal-modal .modal-content:not(.panel-active) #portal-login h2,
#portal-modal .modal-content:not(.panel-active) #forgot-password-title {
    color: #F8FAFC !important;
}

#portal-modal .modal-content:not(.panel-active) .login-modal-header .modal-close,
#portal-modal .login-lang-switcher {
    background: rgba(5, 10, 22, 0.9) !important;
    border-color: rgba(197, 160, 89, 0.44) !important;
    box-shadow: 0 10px 24px rgba(0, 5, 16, 0.34) !important;
}

#portal-modal .modal-content:not(.panel-active) .login-modal-header .modal-close,
#portal-modal .login-lang-switcher .lang-item,
#portal-modal .login-lang-switcher .sep {
    color: #DCE8F7 !important;
}

#portal-modal .login-lang-switcher .lang-item.active,
#portal-modal .modal-content:not(.panel-active) #portal-check-btn,
#portal-modal .modal-content:not(.panel-active) #forgot-password-submit-btn {
    color: #071126 !important;
    background: linear-gradient(135deg, #F0CD78, #C5A059) !important;
    box-shadow: 0 14px 28px rgba(197, 160, 89, 0.3) !important;
}

#portal-modal .modal-content:not(.panel-active) .modal-input {
    color: #071126 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(197, 160, 89, 0.48) !important;
    font-weight: 800 !important;
}

#portal-modal .modal-content:not(.panel-active) .modal-input::placeholder,
#user-panel-layout .modal-input::placeholder,
#user-panel-layout input::placeholder,
#user-panel-layout textarea::placeholder {
    color: #526174 !important;
    opacity: 1 !important;
}

#portal-modal .modal-content:not(.panel-active) .modal-input:focus {
    border-color: #00D4FF !important;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.24), 0 12px 24px rgba(0, 5, 16, 0.28) !important;
}

#portal-modal .modal-content:not(.panel-active) #login-captcha-img {
    background: #050505 !important;
    border-color: rgba(240, 205, 120, 0.62) !important;
}

#portal-modal .modal-content:not(.panel-active) #forgot-password-link {
    color: #F0CD78 !important;
    opacity: 1 !important;
}

#portal-modal .modal-content.panel-active,
#user-panel-layout {
    background:
        radial-gradient(circle at 10% 0%, rgba(0, 167, 255, 0.2) 0 132px, transparent 134px),
        radial-gradient(circle at 96% 7%, rgba(197, 160, 89, 0.2) 0 148px, transparent 150px),
        linear-gradient(145deg, #06101F 0%, #0A1A36 58%, #102B55 100%) !important;
    border-color: rgba(197, 160, 89, 0.5) !important;
}

#user-operation-banner {
    color: #06101F !important;
    background: linear-gradient(135deg, #F6DE9D, #C5A059) !important;
    border-color: rgba(255, 236, 180, 0.92) !important;
    box-shadow: 0 14px 30px rgba(0, 6, 18, 0.22) !important;
    font-weight: 950 !important;
}

#user-panel-layout .panel-sidebar,
#user-panel-layout .sidebar-nav {
    background: linear-gradient(180deg, #030711, #08152B 58%, #06101F) !important;
    border-color: rgba(197, 160, 89, 0.34) !important;
}

#user-panel-layout .user-meta .u-name,
#user-panel-layout .section-title {
    color: #FFFFFF !important;
    text-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}

#user-panel-layout .user-meta .u-id,
#user-panel-layout .logout-link,
#user-panel-layout .mobile-logout-btn-security,
#user-panel-layout .side-tab {
    color: #DCE8F7 !important;
}

#user-panel-layout .user-panel-global-header {
    position: sticky;
    top: 0;
    z-index: 12;
    padding: 0.35rem 0 0.85rem;
    margin-bottom: 1.2rem;
    background: linear-gradient(180deg, rgba(6, 16, 31, 0.94), rgba(6, 16, 31, 0.72) 70%, rgba(6, 16, 31, 0));
    backdrop-filter: blur(10px);
}

#user-panel-layout .user-panel-global-title {
    color: #FFFFFF !important;
    text-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}

#user-panel-layout .user-panel-global-logout {
    background: rgba(6, 16, 31, 0.58) !important;
    border-color: rgba(240, 205, 120, 0.62) !important;
    color: #F0CD78 !important;
    box-shadow: 0 12px 24px rgba(0, 6, 18, 0.22), inset 0 0 0 1px rgba(255, 236, 180, 0.08);
}

#user-panel-layout .user-panel-global-logout:hover,
#user-panel-layout .user-panel-global-logout:focus-visible {
    background: rgba(240, 205, 120, 0.16) !important;
    border-color: rgba(255, 236, 180, 0.9) !important;
    color: #FFE7AA !important;
}

#user-panel-layout .side-tab {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: transparent !important;
}

#user-panel-layout .side-tab:hover {
    color: #FFFFFF !important;
    background: rgba(0, 167, 255, 0.15) !important;
    border-color: rgba(0, 212, 255, 0.32) !important;
}

#user-panel-layout .user-avatar,
#user-panel-layout .side-tab.active,
#user-panel-layout .side-tab[data-tab].active {
    color: #071126 !important;
    background: linear-gradient(135deg, #F0CD78, #C5A059) !important;
    border-color: rgba(255, 236, 180, 0.72) !important;
    box-shadow: 0 14px 28px rgba(197, 160, 89, 0.28) !important;
}

#user-panel-layout .side-tab .icon,
#user-panel-layout .side-tab[data-tab] .icon {
    color: #071126 !important;
    background: linear-gradient(135deg, #00D4FF, #00A7FF) !important;
}

#user-panel-layout .side-tab.active .icon {
    color: #FFFFFF !important;
    background: #071126 !important;
}

#user-panel-layout .glass-card,
#user-panel-layout .stat-card,
#user-panel-layout .balance-card,
#user-panel-layout .pv-summary-card,
#user-panel-layout .pv-metric,
#user-panel-layout .info-item,
#user-panel-layout .pt-box,
#user-panel-layout .reward-box,
#user-panel-layout .setting-item,
#user-panel-layout .bu-tree-card,
#user-panel-layout #binary-tree-container,
#user-panel-layout .binary-tree-empty-slot,
#user-panel-layout .table-wrapper,
#user-panel-layout #tab-home.tab-content.active .pv-summary-card:not(.pv-summary-card-cycle),
#user-panel-layout #tab-build.tab-content.active #reg-form-card,
#user-panel-layout #tab-build.tab-content.active #build-tree-panel > .glass-card,
#user-panel-layout #tab-build.tab-content.active #binary-tree-container,
#user-panel-layout .assets-grid .glass-card,
#user-panel-layout .agent-info-grid .glass-card {
    color: #071126 !important;
    background: rgba(247, 250, 255, 0.98) !important;
    border-color: rgba(197, 160, 89, 0.34) !important;
    box-shadow: 0 16px 34px rgba(0, 6, 18, 0.18) !important;
    backdrop-filter: none !important;
}

#user-panel-layout #tab-home > .glass-card:first-of-type,
#user-panel-layout #tab-home.tab-content.active > .glass-card:first-of-type,
#user-panel-layout .pv-summary-card-cycle,
#user-panel-layout #tab-home.tab-content.active .pv-summary-card-cycle,
#user-panel-layout .bu-tree-card.current-user {
    background: linear-gradient(135deg, rgba(232, 244, 255, 0.98), rgba(255, 249, 235, 0.98)) !important;
    border-color: rgba(0, 167, 255, 0.3) !important;
}

#user-panel-layout .rewards-hero,
#user-panel-layout #assets-main-view > .glass-card:first-of-type,
#user-panel-layout .point-balance-card,
#user-panel-layout #tab-assets.tab-content.active #assets-main-view > .glass-card:first-of-type,
#user-panel-layout #tab-assets.tab-content.active .point-balance-card {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #071126, #0A2B57 52%, #00A7FF) !important;
    border-color: rgba(240, 205, 120, 0.5) !important;
}

#user-panel-layout .rewards-hero *,
#user-panel-layout #assets-main-view > .glass-card:first-of-type *,
#user-panel-layout .point-balance-card * {
    color: #FFFFFF !important;
}

#user-panel-layout .sub-title,
#user-panel-layout h3,
#user-panel-layout h4,
#user-panel-layout .pv-summary-head h4,
#user-panel-layout .bu-tree-card .username,
#user-panel-layout .pv-value,
#user-panel-layout .pv-status-value,
#user-panel-layout .pv-leg-badge strong,
#user-panel-layout .balance-card .val,
#user-panel-layout .stat-card .val,
#user-panel-layout .reward-box .val,
#user-panel-layout .hero-stat.main .val,
#user-panel-layout .h-stat span,
#user-panel-layout .info-row span,
#user-panel-layout .pt-box span,
#user-panel-layout .bu-tree-card .pv-value,
#user-panel-layout .val {
    color: #071126 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

#user-panel-layout label,
#user-panel-layout small,
#user-panel-layout p,
#user-panel-layout .pv-metric label,
#user-panel-layout .pv-status-row label,
#user-panel-layout .pv-leg-badge small,
#user-panel-layout .premium-table th,
#user-panel-layout .panel-table th,
#user-panel-layout .bu-tree-card .pv-label,
#user-panel-layout .binary-tree-empty-slot .slot-side-label,
#user-panel-layout .binary-tree-empty-slot .slot-text,
#user-panel-layout [style*="opacity: 0.5"],
#user-panel-layout [style*="opacity:0.5"],
#user-panel-layout [style*="opacity: 0.6"],
#user-panel-layout [style*="opacity:0.6"] {
    color: #334155 !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

#user-panel-layout .pv-status-value.is-accent,
#user-panel-layout [style*="var(--accent)"],
#user-panel-layout .accent-text {
    color: #8A6400 !important;
}

#user-panel-layout .modal-input,
#user-panel-layout input.modal-input,
#user-panel-layout select.modal-input,
#user-panel-layout textarea.modal-input,
#user-panel-layout #home-current-email,
#user-panel-layout .binary-tree-bu-select,
#user-panel-layout .binary-tree-bu-single {
    color: #071126 !important;
    background: #FFFFFF !important;
    border-color: rgba(11, 31, 63, 0.26) !important;
    box-shadow: 0 8px 18px rgba(0, 12, 32, 0.08) !important;
    font-weight: 800 !important;
}

#user-panel-layout .cta-btn,
#user-panel-layout .btn-primary,
#user-panel-layout .mini-btn,
#user-panel-layout .point-tab,
#user-panel-layout button.cta-btn,
#user-panel-layout #agent-order-submit-btn {
    color: #071126 !important;
    background: linear-gradient(135deg, #F0CD78, #C5A059) !important;
    border-color: rgba(255, 236, 180, 0.76) !important;
    box-shadow: 0 12px 24px rgba(197, 160, 89, 0.24) !important;
    font-weight: 950 !important;
}

#user-panel-layout .btn-primary,
#user-panel-layout #build-lookup-btn,
#user-panel-layout #confirm-register-btn,
#user-panel-layout .point-tab.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #071126, #005BC7 58%, #00A7FF) !important;
    border-color: rgba(0, 212, 255, 0.44) !important;
}

#user-panel-layout .premium-table,
#user-panel-layout .panel-table {
    color: #071126 !important;
    background: #FFFFFF !important;
}

#user-panel-layout .premium-table th,
#user-panel-layout .panel-table th {
    color: #23334A !important;
    background: #EAF4FF !important;
}

#user-panel-layout .premium-table td,
#user-panel-layout .panel-table td {
    color: #071126 !important;
    background: #FFFFFF !important;
}

#user-panel-layout .tab-content > .sub-title {
    color: #FFFFFF !important;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.42) !important;
}

#user-panel-layout .assets-grid .glass-card:nth-child(1),
#user-panel-layout .assets-grid .glass-card:nth-child(2),
#user-panel-layout .assets-grid .glass-card:nth-child(3),
#user-panel-layout .assets-grid .glass-card:nth-child(4),
#user-panel-layout .assets-grid .glass-card:nth-child(5),
#user-panel-layout .assets-grid .glass-card:nth-child(6),
#user-panel-layout .agent-balance-grid .glass-card:nth-child(1),
#user-panel-layout .agent-balance-grid .glass-card:nth-child(2),
#user-panel-layout .agent-balance-grid .glass-card:nth-child(3),
#user-panel-layout .agent-balance-grid .glass-card:nth-child(4),
#user-panel-layout .agent-balance-grid .glass-card:nth-child(5),
#user-panel-layout .agent-balance-grid .glass-card:nth-child(6) {
    color: #071126 !important;
    background: rgba(247, 250, 255, 0.98) !important;
    border-color: rgba(197, 160, 89, 0.34) !important;
    box-shadow: 0 16px 34px rgba(0, 6, 18, 0.18) !important;
}

#user-panel-layout .assets-grid .glass-card:nth-child(n) *,
#user-panel-layout .agent-balance-grid .glass-card:nth-child(n) * {
    color: #071126 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

#user-panel-layout .rewards-hero .hero-stat.main .val,
#user-panel-layout .rewards-hero .hero-stat .val,
#user-panel-layout .rewards-hero .h-stat span,
#user-panel-layout .point-balance-card .val,
#user-panel-layout #assets-main-view > .glass-card:first-of-type .val {
    color: #FFFFFF !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

#user-panel-layout .rewards-hero,
#user-panel-layout .rewards-hero *,
#user-panel-layout #assets-main-view > .glass-card:first-of-type,
#user-panel-layout #assets-main-view > .glass-card:first-of-type *,
#user-panel-layout .point-balance-card,
#user-panel-layout .point-balance-card * {
    color: #FFFFFF !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Follow-up preview: replace white user-panel cards with dark UK AKG navy surfaces. */
#portal-modal {
    --user-panel-text: #F8FBFF;
    --user-panel-muted: #C4D7EA;
    --user-panel-border-soft: rgba(93, 190, 255, 0.28);
    --user-panel-shadow: 0 24px 62px rgba(0, 6, 18, 0.46);
    --user-panel-soft-shadow: 0 16px 34px rgba(0, 7, 20, 0.32);
}

#portal-modal .modal-content:not(.panel-active) {
    border-color: rgba(197, 160, 89, 0.62) !important;
}

#portal-modal .modal-content:not(.panel-active) #portal-login h2,
#portal-modal .modal-content:not(.panel-active) #forgot-password-title {
    color: #FFFFFF !important;
}

#portal-modal .modal-content:not(.panel-active) .modal-input {
    color: #071126 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(240, 205, 120, 0.54) !important;
}

#portal-modal .modal-content:not(.panel-active) .modal-input::placeholder {
    color: #465569 !important;
}

#portal-modal .modal-content:not(.panel-active) #portal-check-btn,
#portal-modal .modal-content:not(.panel-active) #forgot-password-submit-btn,
#user-panel-layout .cta-btn,
#user-panel-layout .btn-primary,
#user-panel-layout .mini-btn,
#user-panel-layout .point-tab,
#user-panel-layout button.cta-btn,
#user-panel-layout #agent-order-submit-btn,
#user-panel-layout .asset-actions button {
    color: #06101F !important;
    background: linear-gradient(135deg, #F2D88D 0%, #C5A059 100%) !important;
    border-color: rgba(255, 236, 180, 0.76) !important;
    box-shadow: 0 14px 26px rgba(197, 160, 89, 0.25) !important;
    font-weight: 950 !important;
}

#portal-modal .modal-content.panel-active,
#user-panel-layout {
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 174, 255, 0.28) 0 150px, transparent 154px),
        radial-gradient(circle at 94% 8%, rgba(197, 160, 89, 0.16) 0 170px, transparent 174px),
        radial-gradient(circle at 80% 100%, rgba(0, 83, 181, 0.28) 0 240px, transparent 246px),
        linear-gradient(145deg, #030812 0%, #07162D 45%, #0A2348 100%) !important;
    border-color: rgba(197, 160, 89, 0.46) !important;
    color: #F8FBFF !important;
}

#user-panel-layout .panel-main {
    background:
        linear-gradient(180deg, rgba(0, 212, 255, 0.05), rgba(0, 0, 0, 0)),
        transparent !important;
}

#user-panel-layout .panel-sidebar,
#user-panel-layout .sidebar-nav {
    background: linear-gradient(180deg, rgba(2, 7, 17, 0.98), rgba(6, 16, 34, 0.98) 58%, rgba(3, 8, 18, 0.98)) !important;
    border-color: rgba(197, 160, 89, 0.36) !important;
}

#user-panel-layout .side-tab {
    color: #EAF6FF !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(93, 190, 255, 0.08) !important;
}

#user-panel-layout .side-tab:hover {
    color: #FFFFFF !important;
    background: rgba(0, 167, 255, 0.16) !important;
    border-color: rgba(0, 212, 255, 0.38) !important;
}

#user-panel-layout .side-tab.active,
#user-panel-layout .side-tab[data-tab].active {
    color: #06101F !important;
    background: linear-gradient(135deg, #F2D88D, #C5A059) !important;
    border-color: rgba(255, 236, 180, 0.78) !important;
    box-shadow: 0 14px 30px rgba(197, 160, 89, 0.3) !important;
}

#user-panel-layout .side-tab .icon,
#user-panel-layout .side-tab[data-tab] .icon {
    color: #05101F !important;
    background: linear-gradient(135deg, #6BE4FF, #00A7FF) !important;
}

#user-panel-layout .side-tab.active .icon {
    color: #FFFFFF !important;
    background: #06101F !important;
}

#user-panel-layout .user-meta .u-name,
#user-panel-layout .section-title,
#user-panel-layout .tab-content > .sub-title {
    color: #FFFFFF !important;
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.52) !important;
}

#user-panel-layout .user-meta .u-id {
    color: #C9DBEE !important;
}

#user-operation-banner {
    color: #06101F !important;
    background: linear-gradient(135deg, #F8E7B7 0%, #D2AF65 100%) !important;
    border-color: rgba(255, 238, 187, 0.95) !important;
    box-shadow: 0 14px 30px rgba(0, 6, 18, 0.3) !important;
}

#user-panel-layout .glass-card,
#user-panel-layout .stat-card,
#user-panel-layout .balance-card,
#user-panel-layout .pv-summary-card,
#user-panel-layout .pv-metric,
#user-panel-layout .info-item,
#user-panel-layout .pt-box,
#user-panel-layout .reward-box,
#user-panel-layout .setting-item,
#user-panel-layout .bu-tree-card,
#user-panel-layout #binary-tree-container,
#user-panel-layout .binary-tree-empty-slot,
#user-panel-layout .table-wrapper,
#user-panel-layout #tab-home.tab-content.active > .glass-card:first-of-type,
#user-panel-layout #tab-home.tab-content.active .pv-summary-card,
#user-panel-layout #tab-home.tab-content.active .pv-summary-card:not(.pv-summary-card-cycle),
#user-panel-layout #tab-build.tab-content.active #reg-form-card,
#user-panel-layout #tab-build.tab-content.active #build-tree-panel > .glass-card,
#user-panel-layout #tab-build.tab-content.active #binary-tree-container,
#user-panel-layout .assets-grid .glass-card,
#user-panel-layout .assets-grid .glass-card:nth-child(1),
#user-panel-layout .assets-grid .glass-card:nth-child(2),
#user-panel-layout .assets-grid .glass-card:nth-child(3),
#user-panel-layout .assets-grid .glass-card:nth-child(4),
#user-panel-layout .assets-grid .glass-card:nth-child(5),
#user-panel-layout .assets-grid .glass-card:nth-child(6),
#user-panel-layout .agent-info-grid .glass-card,
#user-panel-layout .agent-balance-grid .glass-card,
#user-panel-layout .agent-restock-breakdown-grid .glass-card {
    color: #F8FBFF !important;
    background:
        linear-gradient(145deg, rgba(13, 34, 67, 0.97) 0%, rgba(7, 20, 43, 0.96) 58%, rgba(4, 12, 28, 0.98) 100%) !important;
    border: 1px solid rgba(93, 190, 255, 0.26) !important;
    box-shadow: 0 18px 42px rgba(0, 6, 18, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: none !important;
}

#user-panel-layout #tab-home > .glass-card:first-of-type,
#user-panel-layout .pv-summary-card-cycle,
#user-panel-layout #tab-home.tab-content.active .pv-summary-card-cycle,
#user-panel-layout .bu-tree-card.current-user {
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 212, 255, 0.16), transparent 42%),
        linear-gradient(145deg, rgba(15, 45, 86, 0.98), rgba(7, 20, 43, 0.98) 62%, rgba(4, 12, 28, 0.98)) !important;
    border-color: rgba(0, 212, 255, 0.34) !important;
}

/* Build tabs theme polish: align the sub-navigation with the navy / blue-gold User Panel shell. */
#portal-modal #user-panel-layout #tab-build .build-subtabs,
#user-panel-layout #tab-build .build-subtabs {
    padding: 0.42rem !important;
    border: 1px solid rgba(240, 205, 120, 0.28) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(240, 205, 120, 0.16), transparent 38%),
        linear-gradient(145deg, rgba(7, 20, 43, 0.92), rgba(3, 10, 24, 0.96)) !important;
    box-shadow: 0 18px 42px rgba(0, 6, 18, 0.38), inset 0 1px 0 rgba(255, 236, 180, 0.08) !important;
    backdrop-filter: blur(16px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
}

#portal-modal #user-panel-layout #tab-build .build-subtab-btn,
#user-panel-layout #tab-build .build-subtab-btn {
    min-height: 48px !important;
    border: 1px solid rgba(93, 190, 255, 0.1) !important;
    border-radius: 16px !important;
    color: #C9DBEE !important;
    background: rgba(255, 255, 255, 0.035) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    text-shadow: none !important;
}

#portal-modal #user-panel-layout #tab-build .build-subtab-btn:hover,
#portal-modal #user-panel-layout #tab-build .build-subtab-btn:focus-visible,
#user-panel-layout #tab-build .build-subtab-btn:hover,
#user-panel-layout #tab-build .build-subtab-btn:focus-visible {
    color: #F8FBFF !important;
    background: rgba(240, 205, 120, 0.1) !important;
    border-color: rgba(240, 205, 120, 0.42) !important;
    box-shadow: 0 10px 22px rgba(0, 6, 18, 0.2), inset 0 1px 0 rgba(255, 236, 180, 0.08) !important;
    outline: none;
}

#portal-modal #user-panel-layout #tab-build .build-subtab-btn.active,
#portal-modal #user-panel-layout #tab-build .build-subtab-btn[aria-selected="true"],
#user-panel-layout #tab-build .build-subtab-btn.active,
#user-panel-layout #tab-build .build-subtab-btn[aria-selected="true"] {
    color: #06101F !important;
    background:
        linear-gradient(135deg, #F8E7B7 0%, #D2AF65 54%, #A9823B 100%) !important;
    border-color: rgba(255, 236, 180, 0.82) !important;
    box-shadow: 0 16px 30px rgba(197, 160, 89, 0.28), inset 0 1px 0 rgba(255, 249, 222, 0.36) !important;
}

@media (max-width: 600px) {
    #portal-modal #user-panel-layout #tab-build .build-subtabs,
    #user-panel-layout #tab-build .build-subtabs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.4rem !important;
        margin-bottom: 0.9rem !important;
        padding: 0.34rem !important;
    }

    #portal-modal #user-panel-layout #tab-build .build-subtab-btn,
    #user-panel-layout #tab-build .build-subtab-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 0.55rem 0.35rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }
}

#user-panel-layout .rewards-hero,
#user-panel-layout #assets-main-view > .glass-card:first-of-type,
#user-panel-layout .point-balance-card,
#user-panel-layout #tab-assets.tab-content.active #assets-main-view > .glass-card:first-of-type,
#user-panel-layout #tab-assets.tab-content.active .point-balance-card {
    color: #FFFFFF !important;
    background:
        radial-gradient(circle at 92% 6%, rgba(107, 228, 255, 0.28), transparent 24%),
        linear-gradient(135deg, #06101F 0%, #0A2B57 52%, #0078D8 100%) !important;
    border-color: rgba(240, 205, 120, 0.52) !important;
    box-shadow: 0 20px 44px rgba(0, 24, 62, 0.4) !important;
}

#user-panel-layout .sub-title,
#user-panel-layout h3,
#user-panel-layout h4,
#user-panel-layout .pv-summary-head h4,
#user-panel-layout .bu-tree-card .username,
#user-panel-layout .premium-table td,
#user-panel-layout .panel-table td {
    color: #F8FBFF !important;
    opacity: 1 !important;
}

#user-panel-layout label,
#user-panel-layout small,
#user-panel-layout p,
#user-panel-layout .pv-metric label,
#user-panel-layout .pv-status-row label,
#user-panel-layout .pv-leg-badge small,
#user-panel-layout .premium-table th,
#user-panel-layout .panel-table th,
#user-panel-layout .bu-tree-card .pv-label,
#user-panel-layout .binary-tree-empty-slot .slot-side-label,
#user-panel-layout .binary-tree-empty-slot .slot-text,
#user-panel-layout [style*="opacity: 0.5"],
#user-panel-layout [style*="opacity:0.5"],
#user-panel-layout [style*="opacity: 0.6"],
#user-panel-layout [style*="opacity:0.6"] {
    color: #C4D7EA !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

#user-panel-layout .pv-value,
#user-panel-layout .pv-status-value,
#user-panel-layout .pv-leg-badge strong,
#user-panel-layout .balance-card .val,
#user-panel-layout .stat-card .val,
#user-panel-layout .reward-box .val,
#user-panel-layout .hero-stat.main .val,
#user-panel-layout .h-stat span,
#user-panel-layout .info-row span,
#user-panel-layout .pt-box span,
#user-panel-layout .bu-tree-card .pv-value,
#user-panel-layout .val,
#user-panel-layout .assets-grid .glass-card:nth-child(n) *,
#user-panel-layout .agent-balance-grid .glass-card:nth-child(n) * {
    color: #FFFFFF !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

#user-panel-layout .pv-status-value.is-accent,
#user-panel-layout [style*="var(--accent)"],
#user-panel-layout .accent-text {
    color: #F2D88D !important;
}

#user-panel-layout .balance-card {
    color: #F8FBFF !important;
    background: linear-gradient(145deg, rgba(8, 29, 61, 0.98), rgba(4, 13, 31, 0.98)) !important;
    border: 1px solid rgba(93, 190, 255, 0.34) !important;
    box-shadow: 0 18px 36px rgba(0, 6, 18, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#user-panel-layout .cta-btn,
#user-panel-layout button.cta-btn,
#user-panel-layout .btn-primary {
    color: #06111F !important;
    background: linear-gradient(135deg, #F6E6A7 0%, #C99D3E 100%) !important;
    border: 1px solid rgba(255, 229, 153, 0.86) !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

#user-panel-layout .cta-btn[style*="rgba(255,255,255"],
#user-panel-layout .cta-btn[style*="rgba(255, 255, 255"],
#user-panel-layout button[style*="rgba(255,255,255"],
#user-panel-layout button[style*="rgba(255, 255, 255"] {
    color: #F8FBFF !important;
    background: linear-gradient(145deg, rgba(9, 26, 54, 0.98), rgba(4, 13, 31, 0.98)) !important;
    border: 1px solid rgba(93, 190, 255, 0.42) !important;
    box-shadow: 0 12px 24px rgba(0, 7, 18, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#user-panel-layout .modal-input,
#user-panel-layout input.modal-input,
#user-panel-layout select.modal-input,
#user-panel-layout textarea.modal-input,
#user-panel-layout #home-current-email,
#user-panel-layout .binary-tree-bu-select,
#user-panel-layout .binary-tree-bu-single {
    color: #F8FBFF !important;
    background: rgba(4, 14, 31, 0.96) !important;
    border: 1px solid rgba(93, 190, 255, 0.38) !important;
    box-shadow: 0 10px 22px rgba(0, 6, 18, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    font-weight: 800 !important;
}

#user-panel-layout .modal-input::placeholder,
#user-panel-layout input::placeholder,
#user-panel-layout textarea::placeholder {
    color: #AFC2D8 !important;
    opacity: 1 !important;
}

#user-panel-layout .modal-input:focus,
#user-panel-layout input:focus,
#user-panel-layout select:focus,
#user-panel-layout textarea:focus {
    border-color: #6BE4FF !important;
    box-shadow: 0 0 0 4px rgba(0, 167, 255, 0.24), 0 12px 24px rgba(0, 6, 18, 0.28) !important;
}

#user-panel-layout .premium-table,
#user-panel-layout .panel-table {
    color: #F8FBFF !important;
    background: rgba(4, 14, 31, 0.96) !important;
}

#user-panel-layout .premium-table th,
#user-panel-layout .panel-table th {
    color: #D7E9FA !important;
    background: rgba(10, 35, 72, 0.98) !important;
}

#user-panel-layout .premium-table td,
#user-panel-layout .panel-table td {
    color: #F8FBFF !important;
    background: rgba(5, 18, 40, 0.92) !important;
}

#user-panel-layout .mobile-user-identity-bar {
    display: none;
}

/* User Panel menu icon gold theme polish. */
#portal-modal #user-panel-layout .side-tab:hover,
#portal-modal #user-panel-layout .side-tab:focus-visible,
#user-panel-layout .side-tab:hover,
#user-panel-layout .side-tab:focus-visible {
    color: #FFFFFF !important;
    background: rgba(240, 205, 120, 0.1) !important;
    border-color: rgba(240, 205, 120, 0.34) !important;
    outline: none !important;
}

#portal-modal #user-panel-layout .side-tab .icon,
#portal-modal #user-panel-layout .side-tab[data-tab] .icon,
#user-panel-layout .side-tab .icon,
#user-panel-layout .side-tab[data-tab] .icon {
    color: #F2D88D !important;
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 236, 180, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(9, 23, 48, 0.98), rgba(3, 8, 19, 0.98)) !important;
    border: 1px solid rgba(240, 205, 120, 0.42) !important;
    box-shadow: 0 8px 18px rgba(0, 7, 22, 0.32), inset 0 0 0 1px rgba(255, 236, 180, 0.08) !important;
    text-shadow: 0 0 10px rgba(240, 205, 120, 0.24) !important;
}

#portal-modal #user-panel-layout .side-tab:hover .icon,
#portal-modal #user-panel-layout .side-tab:focus-visible .icon,
#user-panel-layout .side-tab:hover .icon,
#user-panel-layout .side-tab:focus-visible .icon {
    color: #FFE7AA !important;
    border-color: rgba(255, 236, 180, 0.62) !important;
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 236, 180, 0.24), transparent 36%),
        linear-gradient(145deg, rgba(15, 31, 58, 0.98), rgba(5, 13, 30, 0.98)) !important;
    box-shadow: 0 10px 22px rgba(0, 7, 22, 0.36), 0 0 18px rgba(240, 205, 120, 0.1), inset 0 0 0 1px rgba(255, 236, 180, 0.12) !important;
}

#portal-modal #user-panel-layout .side-tab.active .icon,
#portal-modal #user-panel-layout .side-tab[data-tab].active .icon,
#user-panel-layout .side-tab.active .icon,
#user-panel-layout .side-tab[data-tab].active .icon {
    color: #F8EAB4 !important;
    background: linear-gradient(145deg, #071126, #020817) !important;
    border-color: rgba(255, 236, 180, 0.68) !important;
    box-shadow: 0 10px 22px rgba(0, 7, 22, 0.34), inset 0 0 0 1px rgba(255, 236, 180, 0.14) !important;
    text-shadow: 0 0 12px rgba(248, 234, 180, 0.26) !important;
}

@media (max-width: 992px) {
    #user-panel-layout .sidebar-nav {
        background:
            radial-gradient(circle at 12% 0%, rgba(240, 205, 120, 0.1), transparent 34%),
            rgba(4, 12, 28, 0.98) !important;
        border: 1px solid rgba(240, 205, 120, 0.28) !important;
    }

    #user-panel-layout .mobile-user-identity-bar:not([hidden]) {
        display: flex;
        align-items: center;
        min-height: 48px;
        margin: 0.75rem 0.85rem 0;
        padding: 0.45rem 0.7rem;
        gap: 0.65rem;
        border: 1px solid rgba(240, 205, 120, 0.36);
        border-radius: 14px;
        background:
            linear-gradient(135deg, rgba(93, 190, 255, 0.12), rgba(197, 160, 89, 0.1)),
            rgba(4, 12, 28, 0.92);
        box-shadow: 0 12px 28px rgba(0, 6, 18, 0.28), inset 0 0 0 1px rgba(93, 190, 255, 0.08);
        backdrop-filter: blur(14px);
    }

    #user-panel-layout .mobile-user-identity-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        color: #06101F;
        background: linear-gradient(135deg, #F6E6A7 0%, #C5A059 100%);
        box-shadow: 0 8px 18px rgba(197, 160, 89, 0.32);
        font-size: 0.72rem;
        font-weight: 950;
        line-height: 1;
    }

    #user-panel-layout .mobile-user-identity-copy {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 0.45rem;
        color: #F8FBFF;
        font-size: 0.78rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    #user-panel-layout .mobile-user-identity-name {
        min-width: 0;
        max-width: 34vw;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 900;
    }

    #user-panel-layout .mobile-user-identity-separator {
        color: rgba(240, 205, 120, 0.86);
        font-weight: 900;
    }

    #user-panel-layout .mobile-user-identity-id {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #D7E9FA;
        font-size: 0.72rem;
        font-weight: 750;
    }
}

@media (max-width: 600px) {
    #user-panel-layout .glass-card,
    #user-panel-layout .stat-card,
    #user-panel-layout .balance-card,
    #user-panel-layout .pv-summary-card,
    #user-panel-layout .pv-metric,
    #user-panel-layout .pv-side-status-card,
    #user-panel-layout .table-wrapper,
    #user-panel-layout #tab-home.tab-content.active .pv-summary-card:not(.pv-summary-card-cycle) {
        background: linear-gradient(145deg, rgba(13, 34, 67, 0.98), rgba(5, 16, 36, 0.98)) !important;
        border-color: rgba(93, 190, 255, 0.3) !important;
    }

    #user-panel-layout .pv-side-status-card {
        min-height: 5.2rem;
        padding: 0.8rem;
        gap: 0.65rem;
    }

    #user-panel-layout .pv-side-status-row {
        gap: 0.35rem;
    }

    #user-panel-layout .pv-side-status-row strong {
        font-size: 1.18rem;
    }

    #user-panel-layout .pv-side-status-note {
        margin-top: 0.7rem;
        font-size: 0.66rem;
        color: rgba(220, 239, 255, 0.74);
    }
}

#portal-modal #user-panel-layout #tab-home.tab-content.active .balance-card,
#portal-modal #user-panel-layout .balances-row .balance-card {
    background: linear-gradient(145deg, rgba(8, 29, 61, 0.99), rgba(4, 13, 31, 0.99)) !important;
    border-color: rgba(93, 190, 255, 0.38) !important;
    color: #F8FBFF !important;
}

#portal-modal #user-panel-layout .asset-actions .cta-btn:not([style*="rgba"]),
#portal-modal #user-panel-layout .assets-grid .glass-card .cta-btn:not([style*="rgba"]),
#portal-modal #user-panel-layout .rewards-hero .cta-btn:not([style*="rgba"]),
#portal-modal #user-panel-layout button.cta-btn:not([style*="rgba"]):not([style*="none"]) {
    color: #06111F !important;
    background: linear-gradient(135deg, #F6E6A7 0%, #C99D3E 100%) !important;
    border-color: rgba(255, 229, 153, 0.88) !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

#portal-modal #user-panel-layout .asset-actions .cta-btn[style*="rgba"],
#portal-modal #user-panel-layout .assets-grid .glass-card .cta-btn[style*="rgba"],
#portal-modal #user-panel-layout .rewards-hero .cta-btn[style*="rgba"] {
    color: #F8FBFF !important;
    background: linear-gradient(145deg, rgba(9, 26, 54, 0.99), rgba(4, 13, 31, 0.99)) !important;
    border-color: rgba(93, 190, 255, 0.44) !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

#user-panel-layout #asset-yiyang-ecosystem {
    color: #F8FBFF !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-hero,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-core-card,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-feature-card,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-mall-section,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-mall-card,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-usage-preview,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-usage-step,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-mall-note,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-phase-note,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-flow {
    border-color: rgba(233, 209, 139, 0.28) !important;
    color: #F8FBFF !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-hero {
    background:
        linear-gradient(120deg, rgba(5, 18, 40, 0.98), rgba(8, 35, 48, 0.98) 54%, rgba(37, 35, 16, 0.96)) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3) !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-core-card,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-feature-card,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-mall-card {
    background: linear-gradient(155deg, rgba(9, 26, 54, 0.92), rgba(6, 16, 34, 0.92)) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-mall-section {
    background:
        radial-gradient(circle at 12% 0%, rgba(42, 93, 168, 0.24), transparent 34%),
        linear-gradient(140deg, rgba(5, 18, 40, 0.97), rgba(7, 24, 48, 0.92) 58%, rgba(27, 30, 45, 0.94)) !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-mall-card.featured {
    background:
        radial-gradient(circle at 14% 14%, rgba(233, 209, 139, 0.14), transparent 28%),
        linear-gradient(145deg, rgba(10, 36, 65, 0.98), rgba(5, 18, 40, 0.95) 64%, rgba(39, 35, 24, 0.86)) !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-flow {
    background: rgba(6, 24, 43, 0.72) !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-usage-preview {
    background: rgba(6, 24, 43, 0.56) !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-flow-step {
    background: transparent !important;
    box-shadow: none !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-core-card.primary {
    background: linear-gradient(145deg, rgba(10, 36, 65, 0.96), rgba(5, 18, 40, 0.94)) !important;
    border-color: rgba(233, 209, 139, 0.38) !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-core-card.secondary {
    background: linear-gradient(145deg, rgba(8, 30, 61, 0.92), rgba(27, 30, 45, 0.9)) !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-phase-note {
    background: linear-gradient(145deg, rgba(87, 66, 18, 0.55), rgba(8, 33, 55, 0.88)) !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-mall-note {
    background: rgba(255, 255, 255, 0.035) !important;
}

#user-panel-layout #asset-yiyang-ecosystem h2,
#user-panel-layout #asset-yiyang-ecosystem h3,
#user-panel-layout #asset-yiyang-ecosystem h4,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-hero-line strong,
#user-panel-layout #asset-yiyang-ecosystem strong {
    color: #FFF8DF !important;
}

#user-panel-layout #asset-yiyang-ecosystem p {
    color: rgba(247, 242, 223, 0.74) !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-kicker,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-panel-label,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-section-head span,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-flow-step span,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-hero-tags span,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-card-icon,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-feature-icon,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-mall-visual span,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-mall-tags span,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-usage-step span,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-phase-note strong,
#user-panel-layout #asset-yiyang-ecosystem .yiyang-mall-note strong {
    color: #E9D18B !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-back-btn {
    color: #F8FBFF !important;
    background: linear-gradient(145deg, rgba(9, 26, 54, 0.99), rgba(4, 13, 31, 0.99)) !important;
    border-color: rgba(233, 209, 139, 0.36) !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-image-card {
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-card-jiujie-core {
    background:
        linear-gradient(112deg, rgba(3, 12, 30, 0.82) 0%, rgba(6, 21, 43, 0.58) 52%, rgba(5, 18, 40, 0.28) 100%),
        linear-gradient(180deg, rgba(3, 12, 30, 0.16), rgba(3, 12, 30, 0.62)),
        url("/assets/yiyang-card-jiujie-core.jpeg") center 56% / cover no-repeat !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-card-wellness-products-core {
    background:
        linear-gradient(112deg, rgba(3, 12, 30, 0.82) 0%, rgba(6, 21, 43, 0.56) 52%, rgba(5, 18, 40, 0.26) 100%),
        linear-gradient(180deg, rgba(3, 12, 30, 0.14), rgba(3, 12, 30, 0.6)),
        url("/assets/yiyang-card-wellness-products-core.jpeg") center 48% / cover no-repeat !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-card-jiujie-service {
    background:
        linear-gradient(112deg, rgba(3, 12, 30, 0.84) 0%, rgba(6, 21, 43, 0.58) 48%, rgba(5, 18, 40, 0.28) 100%),
        linear-gradient(180deg, rgba(3, 12, 30, 0.16), rgba(3, 12, 30, 0.62)),
        url("/assets/yiyang-card-jiujie-service.jpeg") center 44% / cover no-repeat !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-card-wellness-products {
    background:
        linear-gradient(112deg, rgba(3, 12, 30, 0.78) 0%, rgba(6, 21, 43, 0.5) 50%, rgba(5, 18, 40, 0.22) 100%),
        linear-gradient(180deg, rgba(3, 12, 30, 0.12), rgba(3, 12, 30, 0.58)),
        url("/assets/yiyang-card-wellness-products.jpeg") center 50% / cover no-repeat !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-bg-card {
    position: relative !important;
    overflow: hidden !important;
    background-image:
        linear-gradient(108deg, rgba(3, 12, 30, 0.84) 0%, rgba(6, 21, 43, 0.54) 46%, rgba(5, 18, 40, 0.18) 100%),
        linear-gradient(180deg, rgba(3, 12, 30, 0.1), rgba(3, 12, 30, 0.56)),
        var(--yiyang-card-bg) !important;
    background-size: cover !important;
    background-position: var(--yiyang-card-bg-position, center) !important;
    background-repeat: no-repeat !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-bg-card::before {
    z-index: 1 !important;
    background:
        radial-gradient(circle at 88% 8%, rgba(233, 209, 139, 0.12), transparent 34%),
        linear-gradient(108deg, rgba(3, 12, 30, 0.8) 0%, rgba(6, 21, 43, 0.5) 44%, rgba(5, 18, 40, 0.08) 100%) !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-card-bg-img {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: var(--yiyang-card-bg-position, center) !important;
    opacity: 0.78 !important;
    filter: saturate(1.08) contrast(1.05) !important;
    pointer-events: none !important;
}

#user-panel-layout #asset-yiyang-ecosystem .yiyang-bg-card > :not(.yiyang-card-bg-img) {
    position: relative !important;
    z-index: 2 !important;
}

/* Follow-up preview: dark glass login fields and unified navy portal surfaces. */
#portal-modal .modal-content:not(.panel-active) {
    background:
        radial-gradient(circle at 14% 0%, rgba(63, 173, 255, 0.2), transparent 26%),
        radial-gradient(circle at 92% 2%, rgba(214, 175, 75, 0.16), transparent 24%),
        linear-gradient(145deg, rgba(4, 13, 31, 0.94), rgba(7, 22, 48, 0.96) 58%, rgba(2, 8, 20, 0.98)) !important;
    border: 1px solid rgba(93, 190, 255, 0.36) !important;
    box-shadow: 0 28px 60px rgba(0, 6, 20, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#portal-modal .modal-content:not(.panel-active) #portal-login h2,
#portal-modal .modal-content:not(.panel-active) #forgot-password-title {
    color: #FFFFFF !important;
    text-shadow: 0 2px 18px rgba(58, 186, 255, 0.24) !important;
}

#portal-modal .modal-content:not(.panel-active) .modal-input,
#portal-modal .modal-content:not(.panel-active) input.modal-input,
#portal-modal .modal-content:not(.panel-active) #login-captcha-answer,
#portal-modal .modal-content:not(.panel-active) #forgot-password-identifier {
    color: #F8FBFF !important;
    caret-color: #6BE4FF !important;
    background:
        linear-gradient(145deg, rgba(12, 36, 74, 0.9), rgba(4, 15, 35, 0.94)) !important;
    border: 1px solid rgba(107, 228, 255, 0.56) !important;
    box-shadow:
        0 14px 28px rgba(0, 7, 22, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(214, 175, 75, 0.08) !important;
    font-weight: 900 !important;
    backdrop-filter: blur(16px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
}

#portal-modal .modal-content:not(.panel-active) .modal-input::placeholder,
#portal-modal .modal-content:not(.panel-active) input::placeholder {
    color: #DCEFFF !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}

#portal-modal .modal-content:not(.panel-active) .modal-input:focus,
#portal-modal .modal-content:not(.panel-active) input.modal-input:focus,
#portal-modal .modal-content:not(.panel-active) #login-captcha-answer:focus,
#portal-modal .modal-content:not(.panel-active) #forgot-password-identifier:focus {
    border-color: #83ECFF !important;
    background:
        linear-gradient(145deg, rgba(16, 48, 94, 0.96), rgba(5, 18, 42, 0.98)) !important;
    box-shadow:
        0 0 0 4px rgba(0, 167, 255, 0.24),
        0 16px 32px rgba(0, 7, 22, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
}

#portal-modal .modal-content:not(.panel-active) input:-webkit-autofill,
#portal-modal .modal-content:not(.panel-active) input:-webkit-autofill:hover,
#portal-modal .modal-content:not(.panel-active) input:-webkit-autofill:focus {
    -webkit-text-fill-color: #F8FBFF !important;
    box-shadow: 0 0 0 1000px rgba(8, 29, 61, 0.98) inset, 0 0 0 4px rgba(0, 167, 255, 0.18) !important;
    caret-color: #6BE4FF !important;
}

#portal-modal .modal-content:not(.panel-active) #login-captcha-img {
    background: #050B14 !important;
    border: 1px solid rgba(240, 205, 120, 0.62) !important;
    box-shadow: 0 12px 26px rgba(0, 7, 22, 0.36), 0 0 0 1px rgba(107, 228, 255, 0.14) !important;
}

#portal-modal .modal-content:not(.panel-active) #forgot-password-link {
    color: #F6E6A7 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 10px rgba(0, 7, 22, 0.6) !important;
}

#portal-modal .modal-content:not(.panel-active) .login-modal-header .modal-close,
#portal-modal .modal-content:not(.panel-active) .login-lang-switcher {
    background: rgba(4, 13, 31, 0.78) !important;
    border-color: rgba(107, 228, 255, 0.32) !important;
    color: #F8FBFF !important;
    box-shadow: 0 12px 26px rgba(0, 7, 22, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#portal-modal .modal-content:not(.panel-active) .login-lang-switcher .lang-item,
#portal-modal .modal-content:not(.panel-active) .login-lang-switcher .sep {
    color: #DCEFFF !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}

#portal-modal .modal-content:not(.panel-active) .login-lang-switcher .lang-item.active {
    color: #06111F !important;
    background: linear-gradient(135deg, #F6E6A7 0%, #C99D3E 100%) !important;
}

#portal-modal .modal-content:not(.panel-active) #portal-check-btn,
#portal-modal .modal-content:not(.panel-active) #forgot-password-submit-btn {
    color: #06111F !important;
    background: linear-gradient(135deg, #F8EAB4 0%, #D6AF4B 54%, #B88424 100%) !important;
    border: 1px solid rgba(255, 232, 168, 0.88) !important;
    box-shadow: 0 18px 34px rgba(214, 175, 75, 0.26), 0 10px 26px rgba(0, 7, 22, 0.32) !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

#portal-modal .modal-content:not(.panel-active) #forgot-password-back-btn {
    color: #F8FBFF !important;
    background: linear-gradient(145deg, rgba(9, 26, 54, 0.96), rgba(4, 13, 31, 0.98)) !important;
    border: 1px solid rgba(107, 228, 255, 0.42) !important;
}

#portal-modal #user-operation-banner {
    color: #06111F !important;
    background: linear-gradient(135deg, #F8EAB4 0%, #D6AF4B 100%) !important;
    border: 1px solid rgba(255, 238, 184, 0.95) !important;
    box-shadow: 0 14px 30px rgba(0, 7, 22, 0.28) !important;
    font-weight: 900 !important;
    opacity: 1 !important;
}

#portal-modal #user-panel-layout .glass-card,
#portal-modal #user-panel-layout .stat-card,
#portal-modal #user-panel-layout .balance-card,
#portal-modal #user-panel-layout .pv-summary-card,
#portal-modal #user-panel-layout .pv-metric,
#portal-modal #user-panel-layout .pv-side-status-card,
#portal-modal #user-panel-layout .assets-grid .glass-card,
#portal-modal #user-panel-layout .table-wrapper {
    backdrop-filter: blur(14px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
    border-color: rgba(107, 228, 255, 0.34) !important;
}

#portal-modal #user-panel-layout .pv-summary-card-legs,
#user-panel-layout .pv-summary-card-legs {
    background:
        radial-gradient(circle at 12% 0%, rgba(214, 175, 75, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(8, 29, 61, 0.99), rgba(4, 13, 31, 0.99)) !important;
}

#portal-modal #user-panel-layout .pv-side-status-card,
#user-panel-layout .pv-side-status-card {
    background: linear-gradient(145deg, rgba(7, 23, 49, 0.82), rgba(2, 9, 22, 0.72)) !important;
}

#portal-modal #user-panel-layout .pv-side-status-card.is-weak,
#user-panel-layout .pv-side-status-card.is-weak {
    border-color: rgba(233, 209, 139, 0.42) !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(246, 230, 167, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(46, 34, 13, 0.36), rgba(2, 9, 22, 0.74)) !important;
    box-shadow: 0 14px 30px rgba(0, 7, 22, 0.3), inset 0 0 0 1px rgba(246, 230, 167, 0.06) !important;
}

#portal-modal #user-panel-layout .pv-side-status-card.is-strong,
#user-panel-layout .pv-side-status-card.is-strong {
    border-color: rgba(107, 228, 255, 0.34) !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(107, 228, 255, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(7, 34, 68, 0.5), rgba(2, 9, 22, 0.74)) !important;
    box-shadow: 0 14px 30px rgba(0, 7, 22, 0.3), inset 0 0 0 1px rgba(107, 228, 255, 0.08) !important;
}

#portal-modal #user-panel-layout .pv-side-status-card.is-balanced,
#user-panel-layout .pv-side-status-card.is-balanced {
    border-color: rgba(220, 239, 255, 0.22) !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(220, 239, 255, 0.1), transparent 34%),
        linear-gradient(145deg, rgba(13, 31, 56, 0.42), rgba(2, 9, 22, 0.74)) !important;
}

#portal-modal #user-panel-layout .pv-side-status-card label,
#portal-modal #user-panel-layout .pv-side-status-row span,
#user-panel-layout .pv-side-status-card label,
#user-panel-layout .pv-side-status-row span {
    color: rgba(220, 239, 255, 0.78) !important;
    opacity: 1 !important;
}

#portal-modal #user-panel-layout .pv-side-status-row strong,
#user-panel-layout .pv-side-status-row strong {
    color: #FFFFFF !important;
}

#portal-modal #user-panel-layout .pv-side-status-row strong.is-weak,
#user-panel-layout .pv-side-status-row strong.is-weak {
    color: #F8EAB4 !important;
    text-shadow: 0 0 14px rgba(246, 230, 167, 0.28) !important;
}

#portal-modal #user-panel-layout .pv-side-status-row strong.is-strong,
#user-panel-layout .pv-side-status-row strong.is-strong {
    color: #6BE4FF !important;
    text-shadow: 0 0 14px rgba(107, 228, 255, 0.28) !important;
}

#portal-modal #user-panel-layout .pv-side-status-row strong.is-balanced,
#user-panel-layout .pv-side-status-row strong.is-balanced {
    color: #DCEFFF !important;
}

#portal-modal #user-panel-layout .pv-status-strip,
#user-panel-layout .pv-status-strip {
    background:
        radial-gradient(circle at 8% 0%, rgba(214, 175, 75, 0.08), transparent 32%),
        linear-gradient(145deg, rgba(7, 23, 49, 0.78), rgba(2, 9, 22, 0.66)) !important;
    border-color: rgba(107, 228, 255, 0.22) !important;
    backdrop-filter: blur(14px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
}

#portal-modal #user-panel-layout .pv-status-strip-head h4,
#portal-modal #user-panel-layout .pv-status-pill span,
#user-panel-layout .pv-status-strip-head h4,
#user-panel-layout .pv-status-pill span {
    color: rgba(220, 239, 255, 0.76) !important;
    opacity: 1 !important;
}

#portal-modal #user-panel-layout .pv-status-pill,
#user-panel-layout .pv-status-pill {
    background: rgba(1, 10, 25, 0.48) !important;
    border-color: rgba(220, 239, 255, 0.1) !important;
}

#portal-modal #user-panel-layout .pv-status-pill.is-warning,
#user-panel-layout .pv-status-pill.is-warning {
    border-color: rgba(248, 234, 180, 0.44) !important;
    background: rgba(197, 160, 89, 0.12) !important;
}

#portal-modal #user-panel-layout .pv-status-value.is-normal,
#user-panel-layout .pv-status-value.is-normal {
    color: #DCEFFF !important;
}

#portal-modal #user-panel-layout .pv-status-value.is-warning,
#portal-modal #user-panel-layout .pv-status-value.is-accent,
#user-panel-layout .pv-status-value.is-warning,
#user-panel-layout .pv-status-value.is-accent {
    color: #F8EAB4 !important;
}

#portal-modal #user-panel-layout .home-asset-balances,
#user-panel-layout .home-asset-balances {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
}

#portal-modal #user-panel-layout .home-yiyang-card,
#user-panel-layout .home-yiyang-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    cursor: pointer;
    border-color: rgba(222, 190, 106, 0.58) !important;
    background:
        linear-gradient(135deg, rgba(45, 107, 70, 0.72), rgba(7, 25, 42, 0.98)),
        radial-gradient(circle at top right, rgba(242, 216, 141, 0.22), transparent 34%) !important;
    box-shadow: 0 22px 42px rgba(0, 8, 22, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;
}

#portal-modal #user-panel-layout .home-yiyang-card label,
#user-panel-layout .home-yiyang-card label {
    color: #F8EAB4 !important;
    opacity: 1 !important;
}

#portal-modal #user-panel-layout .home-yiyang-card .val,
#user-panel-layout .home-yiyang-card .val {
    color: #FFFFFF !important;
    font-size: 1.85rem !important;
}

#portal-modal #user-panel-layout .home-yiyang-card p,
#user-panel-layout .home-yiyang-card p {
    max-width: 28rem;
    margin: 0.55rem 0 0;
    color: rgba(248, 251, 255, 0.78) !important;
    font-size: 0.72rem;
    line-height: 1.55;
}

#portal-modal #user-panel-layout #home-yiyang-btn,
#user-panel-layout #home-yiyang-btn {
    flex: 0 0 auto;
    min-width: 132px;
    margin: 0 !important;
    white-space: normal;
    text-align: center;
    background: linear-gradient(135deg, #F8EAB4 0%, #D6AF4B 100%) !important;
    color: #06111F !important;
    border-color: rgba(255, 238, 184, 0.95) !important;
}

@media (max-width: 900px) {
    #portal-modal #user-panel-layout .home-asset-balances,
    #user-panel-layout .home-asset-balances {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #portal-modal #user-panel-layout .home-yiyang-card,
    #user-panel-layout .home-yiyang-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    #portal-modal #user-panel-layout .home-asset-balances,
    #user-panel-layout .home-asset-balances {
        grid-template-columns: 1fr !important;
    }

    #portal-modal #user-panel-layout .home-yiyang-card,
    #user-panel-layout .home-yiyang-card {
        grid-column: auto;
        align-items: flex-start;
        flex-direction: column;
    }

    #portal-modal #user-panel-layout #home-yiyang-btn,
    #user-panel-layout #home-yiyang-btn {
        width: 100%;
        min-width: 0;
    }
}

#portal-modal #user-panel-layout .kyc-entry-card,
#user-panel-layout .kyc-entry-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid rgba(197, 160, 89, 0.24);
    background: linear-gradient(135deg, rgba(197,160,89,0.08), rgba(0,0,0,0.48));
}

#portal-modal #user-panel-layout .kyc-entry-copy,
#user-panel-layout .kyc-entry-copy {
    min-width: 0;
}

#portal-modal #user-panel-layout .kyc-entry-kicker,
#user-panel-layout .kyc-entry-kicker {
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08rem;
    line-height: 1.35;
    text-transform: uppercase;
}

#portal-modal #user-panel-layout .kyc-entry-card h3,
#user-panel-layout .kyc-entry-card h3,
#portal-modal #user-panel-layout .kyc-form-head h3,
#user-panel-layout .kyc-form-head h3 {
    margin: 0.45rem 0 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08rem;
    line-height: 1.3;
    text-transform: uppercase;
}

#portal-modal #user-panel-layout .kyc-entry-status-row,
#user-panel-layout .kyc-entry-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
}

#portal-modal #user-panel-layout .kyc-entry-status-row span,
#user-panel-layout .kyc-entry-status-row span,
#portal-modal #user-panel-layout .kyc-form-status span,
#user-panel-layout .kyc-form-status span {
    color: rgba(255,255,255,0.56);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
}

#portal-modal #user-panel-layout .kyc-entry-status-row strong,
#user-panel-layout .kyc-entry-status-row strong,
#portal-modal #user-panel-layout .kyc-form-status strong,
#user-panel-layout .kyc-form-status strong {
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.03rem;
    text-transform: uppercase;
}

#portal-modal #user-panel-layout .kyc-entry-card p,
#user-panel-layout .kyc-entry-card p,
#portal-modal #user-panel-layout .kyc-form-head p,
#user-panel-layout .kyc-form-head p {
    max-width: 760px;
    margin: 0.75rem 0 0;
    color: rgba(255,255,255,0.72);
    font-size: 0.76rem;
    line-height: 1.7;
}

#portal-modal #user-panel-layout .kyc-form-card,
#user-panel-layout .kyc-form-card {
    padding: 2rem;
    border: 1px solid rgba(197,160,89,0.18);
}

#portal-modal #user-panel-layout .kyc-back-btn,
#user-panel-layout .kyc-back-btn {
    margin-bottom: 1.5rem;
    background: rgba(255,255,255,0.08);
}

#portal-modal #user-panel-layout .kyc-form-head,
#user-panel-layout .kyc-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.6rem;
}

#portal-modal #user-panel-layout .kyc-form-status,
#user-panel-layout .kyc-form-status {
    flex: 0 0 auto;
    min-width: 150px;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(197,160,89,0.16);
    border-radius: 6px;
    background: rgba(0,0,0,0.22);
    text-align: right;
}

#portal-modal #user-panel-layout .kyc-form-status span,
#user-panel-layout .kyc-form-status span,
#portal-modal #user-panel-layout .kyc-form-status strong,
#user-panel-layout .kyc-form-status strong {
    display: block;
}

#portal-modal #user-panel-layout .kyc-form-status strong,
#user-panel-layout .kyc-form-status strong {
    margin-top: 0.3rem;
}

#portal-modal #user-panel-layout .kyc-form-grid,
#user-panel-layout .kyc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

#portal-modal #user-panel-layout .kyc-form-grid label,
#user-panel-layout .kyc-form-grid label {
    display: block;
    margin-bottom: 0.4rem;
    color: rgba(255,255,255,0.58);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
}

#portal-modal #user-panel-layout .kyc-form-grid textarea.modal-input,
#user-panel-layout .kyc-form-grid textarea.modal-input {
    min-height: 96px;
    resize: vertical;
}

#portal-modal #user-panel-layout .kyc-span-2,
#user-panel-layout .kyc-span-2 {
    grid-column: 1 / -1;
}

#portal-modal #user-panel-layout .kyc-upload-note,
#user-panel-layout .kyc-upload-note {
    padding: 0.9rem 1rem;
    border: 1px dashed rgba(197,160,89,0.24);
    border-radius: 6px;
    color: rgba(255,255,255,0.68);
    background: rgba(197,160,89,0.05);
    font-size: 0.75rem;
    line-height: 1.6;
}

#portal-modal #user-panel-layout .kyc-form-actions,
#user-panel-layout .kyc-form-actions {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

#portal-modal #user-panel-layout .kyc-form-actions .cta-btn,
#user-panel-layout .kyc-form-actions .cta-btn {
    margin: 0;
}

#portal-modal #user-panel-layout .cta-btn.secondary,
#user-panel-layout .cta-btn.secondary {
    background: rgba(255,255,255,0.06);
    color: #fff;
    border-color: rgba(255,255,255,0.12);
}

#portal-modal #user-panel-layout .dashboard-entry-section,
#user-panel-layout .dashboard-entry-section {
    margin-top: 2rem;
}

#portal-modal #user-panel-layout .dashboard-entry-grid,
#user-panel-layout .dashboard-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

#portal-modal #user-panel-layout .dashboard-entry-card,
#user-panel-layout .dashboard-entry-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-height: 178px;
    margin: 0;
    padding: 1.15rem;
    overflow: hidden;
    border: 1px solid rgba(197,160,89,0.22);
    border-radius: 8px;
    background:
        radial-gradient(circle at 15% 0%, rgba(74,140,255,0.16), transparent 34%),
        linear-gradient(135deg, rgba(197,160,89,0.08), rgba(0,0,0,0.48));
    box-shadow: 0 18px 45px rgba(0,0,0,0.22);
}

#portal-modal #user-panel-layout .account-security-entry-card,
#user-panel-layout .account-security-entry-card {
    border-color: rgba(74,140,255,0.26);
    background:
        radial-gradient(circle at 85% 0%, rgba(197,160,89,0.16), transparent 32%),
        linear-gradient(135deg, rgba(74,140,255,0.10), rgba(0,0,0,0.50));
}

#portal-modal #user-panel-layout .dashboard-entry-copy,
#user-panel-layout .dashboard-entry-copy {
    min-width: 0;
}

#portal-modal #user-panel-layout .dashboard-entry-kicker,
#user-panel-layout .dashboard-entry-kicker {
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08rem;
    line-height: 1.35;
    text-transform: uppercase;
}

#portal-modal #user-panel-layout .dashboard-entry-card h3,
#user-panel-layout .dashboard-entry-card h3 {
    margin: 0.45rem 0 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08rem;
    line-height: 1.3;
    text-transform: uppercase;
}

#portal-modal #user-panel-layout .dashboard-entry-card p,
#user-panel-layout .dashboard-entry-card p {
    margin: 0.75rem 0 0;
    color: rgba(255,255,255,0.72);
    font-size: 0.76rem;
    line-height: 1.6;
}

#portal-modal #user-panel-layout .dashboard-entry-card .cta-btn,
#user-panel-layout .dashboard-entry-card .cta-btn {
    min-height: 44px;
    margin: auto 0 0;
    white-space: normal;
}

#portal-modal #user-panel-layout .dashboard-entry-grid .kyc-entry-card,
#user-panel-layout .dashboard-entry-grid .kyc-entry-card {
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 0;
    padding: 1.15rem;
}

#portal-modal #user-panel-layout .user-security-panel,
#user-panel-layout .user-security-panel {
    margin-top: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(197,160,89,0.20);
}

#portal-modal #user-panel-layout #tab-account-security .user-security-panel,
#user-panel-layout #tab-account-security .user-security-panel {
    margin-top: 0;
    max-width: 960px;
}

#portal-modal #user-panel-layout .user-security-panel-head,
#user-panel-layout .user-security-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

#portal-modal #user-panel-layout .user-security-panel-head .sub-title,
#user-panel-layout .user-security-panel-head .sub-title {
    margin: 0;
}

@media (max-width: 700px) {
    #portal-modal #user-panel-layout .dashboard-entry-grid,
    #user-panel-layout .dashboard-entry-grid {
        grid-template-columns: 1fr;
    }

    #portal-modal #user-panel-layout .dashboard-entry-card,
    #user-panel-layout .dashboard-entry-card {
        min-height: 0;
    }

    #portal-modal #user-panel-layout .dashboard-entry-card .cta-btn,
    #user-panel-layout .dashboard-entry-card .cta-btn,
    #portal-modal #user-panel-layout #home-account-security-btn,
    #user-panel-layout #home-account-security-btn {
        width: 100%;
    }

    #portal-modal #user-panel-layout .user-security-panel-head,
    #user-panel-layout .user-security-panel-head {
        align-items: stretch;
        flex-direction: column;
    }

    #portal-modal #user-panel-layout .kyc-entry-card,
    #user-panel-layout .kyc-entry-card,
    #portal-modal #user-panel-layout .kyc-form-head,
    #user-panel-layout .kyc-form-head {
        align-items: stretch;
        flex-direction: column;
    }

    #portal-modal #user-panel-layout .kyc-form-card,
    #user-panel-layout .kyc-form-card {
        padding: 1.2rem;
    }

    #portal-modal #user-panel-layout .kyc-form-status,
    #user-panel-layout .kyc-form-status {
        min-width: 0;
        text-align: left;
    }

    #portal-modal #user-panel-layout .kyc-form-grid,
    #user-panel-layout .kyc-form-grid {
        grid-template-columns: 1fr;
    }

    #portal-modal #user-panel-layout .kyc-form-actions .cta-btn,
    #user-panel-layout .kyc-form-actions .cta-btn,
    #portal-modal #user-panel-layout #home-kyc-btn,
    #user-panel-layout #home-kyc-btn {
        width: 100%;
    }
}

@media (max-width: 600px) {
    #portal-modal .modal-content:not(.panel-active) .modal-input,
    #portal-modal .modal-content:not(.panel-active) input.modal-input,
    #portal-modal .modal-content:not(.panel-active) #login-captcha-answer {
        min-height: 52px !important;
        border-color: rgba(107, 228, 255, 0.6) !important;
    }

    #portal-modal .modal-content:not(.panel-active) #login-captcha-img {
        border-color: rgba(240, 205, 120, 0.74) !important;
    }
}

/* Build tab binary tree dark glass cleanup. */

#portal-modal #user-panel-layout #tab-build #subtree-fallback-container {
    color: #F8FBFF !important;
    background:
        radial-gradient(circle at 4% 0%, rgba(246, 230, 167, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(37, 27, 8, 0.82), rgba(5, 15, 34, 0.98)) !important;
    border: 1px solid rgba(246, 230, 167, 0.42) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 30px rgba(0, 7, 22, 0.32) !important;
}

#portal-modal #user-panel-layout #tab-build #subtree-fallback-container label,
#portal-modal #user-panel-layout #tab-build #subtree-fallback-label {
    color: #F6E6A7 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}

#portal-modal #user-panel-layout #tab-build #binary-tree-container {
    color: #F8FBFF !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 167, 255, 0.12), transparent 38%),
        linear-gradient(145deg, rgba(5, 19, 44, 0.98), rgba(2, 9, 24, 0.99)) !important;
    border: 1px solid rgba(107, 228, 255, 0.32) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 40px rgba(0, 6, 18, 0.34) !important;
}

#portal-modal #user-panel-layout #tab-build .binary-tree-render-shell,
#portal-modal #user-panel-layout #tab-build .binary-tree-stage {
    color: #F8FBFF !important;
}

#portal-modal #user-panel-layout #tab-build .binary-tree-branch:not(:only-child) > .binary-tree-node-wrapper::after,
#portal-modal #user-panel-layout #tab-build .binary-tree-children::before,
#portal-modal #user-panel-layout #tab-build .binary-tree-child::before {
    background: #57D8FF !important;
    box-shadow: 0 0 10px rgba(87, 216, 255, 0.42) !important;
}

#portal-modal #user-panel-layout #tab-build .bu-tree-card {
    color: #F8FBFF !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(87, 216, 255, 0.12), transparent 42%),
        linear-gradient(145deg, rgba(10, 32, 67, 0.98), rgba(4, 13, 31, 0.99)) !important;
    border: 1px solid rgba(87, 216, 255, 0.44) !important;
    box-shadow: 0 16px 32px rgba(0, 7, 22, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(14px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
}

#portal-modal #user-panel-layout #tab-build .bu-tree-card.root-node,
#portal-modal #user-panel-layout #tab-build .bu-tree-card.current-user {
    background:
        radial-gradient(circle at 0% 0%, rgba(246, 230, 167, 0.2), transparent 42%),
        linear-gradient(145deg, rgba(24, 37, 64, 0.98), rgba(5, 15, 34, 0.99)) !important;
    border-color: rgba(246, 230, 167, 0.68) !important;
    box-shadow: 0 18px 36px rgba(0, 7, 22, 0.4), 0 0 0 1px rgba(246, 230, 167, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#portal-modal #user-panel-layout #tab-build .bu-tree-card.child-node,
#portal-modal #user-panel-layout #tab-build .bu-tree-card.deep-child-node {
    border-color: rgba(87, 216, 255, 0.5) !important;
}

#portal-modal #user-panel-layout #tab-build .bu-tree-card-header {
    border-bottom-color: rgba(107, 228, 255, 0.18) !important;
}

#portal-modal #user-panel-layout #tab-build .bu-tree-card .username,
#portal-modal #user-panel-layout #tab-build .bu-tree-card .pv-value {
    color: #FFFFFF !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}

#portal-modal #user-panel-layout #tab-build .bu-tree-card .id-badge,
#portal-modal #user-panel-layout #tab-build .bu-tree-card .pv-label {
    color: #C4D7EA !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

#portal-modal #user-panel-layout #tab-build .bu-tree-card .id-badge {
    background: rgba(107, 228, 255, 0.1) !important;
    border: 1px solid rgba(107, 228, 255, 0.2) !important;
}

#portal-modal #user-panel-layout #tab-build .bu-tree-card .status-badge {
    color: #F6E6A7 !important;
    background: rgba(246, 230, 167, 0.12) !important;
    border: 1px solid rgba(246, 230, 167, 0.24) !important;
    opacity: 1 !important;
}

#portal-modal #user-panel-layout #tab-build .bu-tree-card .status-badge.registration {
    color: #8CF5B4 !important;
    background: rgba(42, 220, 126, 0.14) !important;
    border-color: rgba(140, 245, 180, 0.26) !important;
}

#portal-modal #user-panel-layout #tab-build .bu-tree-card .status-badge.auto_expansion {
    color: #7EEBFF !important;
    background: rgba(0, 167, 255, 0.14) !important;
    border-color: rgba(126, 235, 255, 0.26) !important;
}

#portal-modal #user-panel-layout #tab-build .binary-tree-empty-slot {
    color: #DCEFFF !important;
    background:
        linear-gradient(145deg, rgba(8, 25, 54, 0.72), rgba(3, 11, 27, 0.86)) !important;
    border: 1px dashed rgba(107, 228, 255, 0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#portal-modal #user-panel-layout #tab-build .binary-tree-empty-slot:hover {
    border-color: rgba(246, 230, 167, 0.52) !important;
    background:
        linear-gradient(145deg, rgba(27, 31, 48, 0.82), rgba(4, 13, 31, 0.9)) !important;
}

#portal-modal #user-panel-layout #tab-build .binary-tree-empty-slot .slot-side-label {
    color: #9FC9EA !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}

#portal-modal #user-panel-layout #tab-build .binary-tree-empty-slot .slot-text {
    color: #DCEFFF !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

#portal-modal #user-panel-layout #tab-build .binary-tree-depth-note,
#portal-modal #user-panel-layout #tab-build .binary-tree-more-hint,
#portal-modal #user-panel-layout #tab-build #build-binary-org-loading,
#portal-modal #user-panel-layout #tab-build #binary-tree-container [style*="opacity: 0.5"] {
    color: #C4D7EA !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

#portal-modal #user-panel-layout #tab-build .binary-tree-more-hint {
    color: #7EEBFF !important;
}

#portal-modal #user-panel-layout #tab-build .btn-tree-view-more,
#portal-modal #user-panel-layout #tab-build .btn-tree-nav {
    color: #06111F !important;
    background: linear-gradient(135deg, #F6E6A7 0%, #C99D3E 100%) !important;
    border: 1px solid rgba(255, 229, 153, 0.86) !important;
    box-shadow: 0 10px 22px rgba(0, 7, 22, 0.26), 0 0 0 1px rgba(107, 228, 255, 0.08) !important;
    font-weight: 900 !important;
}

#portal-modal #user-panel-layout #tab-build #binary-tree-container div[style*="rgba(255,255,255,0.86)"] {
    color: #F8FBFF !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(87, 216, 255, 0.14), transparent 42%),
        linear-gradient(145deg, rgba(10, 32, 67, 0.99), rgba(4, 13, 31, 0.99)) !important;
    border: 1px solid rgba(87, 216, 255, 0.52) !important;
    box-shadow: 0 16px 32px rgba(0, 7, 22, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#portal-modal #user-panel-layout #tab-build #binary-tree-container div[style*="rgba(255,159,28,0.18)"] {
    color: #F8FBFF !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(246, 230, 167, 0.22), transparent 42%),
        linear-gradient(145deg, rgba(26, 38, 66, 0.99), rgba(5, 15, 34, 0.99)) !important;
    border: 1px solid rgba(246, 230, 167, 0.72) !important;
    box-shadow: 0 18px 36px rgba(0, 7, 22, 0.42), 0 0 0 1px rgba(246, 230, 167, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#portal-modal #user-panel-layout #tab-build #binary-tree-container div[style*="var(--user-panel-text)"] {
    color: #FFFFFF !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}

#portal-modal #user-panel-layout #tab-build #binary-tree-container div[style*="var(--user-panel-orange)"] {
    color: #F6E6A7 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}

#portal-modal #user-panel-layout #tab-build #binary-tree-container div[style*="var(--user-panel-muted)"] {
    color: #C4D7EA !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

#portal-modal #user-panel-layout #tab-build #binary-tree-container div[style*="background: rgba(74,140,255,0.26)"] {
    background: #57D8FF !important;
    box-shadow: 0 0 10px rgba(87, 216, 255, 0.45) !important;
}

#portal-modal #user-panel-layout #tab-build #binary-tree-container div[style*="rgba(74,140,255,0.04)"],
#portal-modal #user-panel-layout #tab-build #binary-tree-container div[style*="rgba(247,95,122,0.04)"] {
    color: #DCEFFF !important;
    background:
        linear-gradient(145deg, rgba(8, 25, 54, 0.78), rgba(3, 11, 27, 0.9)) !important;
    border: 1px dashed rgba(107, 228, 255, 0.34) !important;
    opacity: 1 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Desktop User Panel dashboard polish: readable BU selector and Current Cycle PV surfaces. */
@media (min-width: 641px) {
    #portal-modal #user-panel-layout #tab-home #home-bu-selector,
    #portal-modal #user-panel-layout #tab-home select#home-bu-selector.modal-input {
        min-width: 180px !important;
        color: #F8FBFF !important;
        -webkit-text-fill-color: #F8FBFF !important;
        background:
            linear-gradient(145deg, rgba(12, 36, 74, 0.98), rgba(4, 15, 35, 0.98)) !important;
        border: 1px solid rgba(107, 228, 255, 0.48) !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 26px rgba(0, 7, 22, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        color-scheme: dark;
        font-weight: 900 !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    #portal-modal #user-panel-layout #tab-home #home-bu-selector:focus {
        border-color: #83ECFF !important;
        box-shadow:
            0 0 0 4px rgba(0, 167, 255, 0.22),
            0 14px 30px rgba(0, 7, 22, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
        outline: none !important;
    }

    #portal-modal #user-panel-layout #tab-home #home-bu-selector option {
        color: #F8FBFF !important;
        background: #06111F !important;
        font-weight: 800;
    }

    #portal-modal #user-panel-layout #tab-home.tab-content.active .pv-summary-card-cycle {
        color: #F8FBFF !important;
        background:
            radial-gradient(circle at 0% 0%, rgba(107, 228, 255, 0.2), transparent 42%),
            linear-gradient(145deg, rgba(13, 40, 78, 0.98), rgba(4, 14, 33, 0.98)) !important;
        border-color: rgba(107, 228, 255, 0.44) !important;
        box-shadow: 0 20px 44px rgba(0, 7, 22, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    }

    #portal-modal #user-panel-layout #tab-home.tab-content.active .pv-summary-card-cycle .pv-summary-head h4 {
        color: #F8FBFF !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    #portal-modal #user-panel-layout #tab-home.tab-content.active .pv-summary-card-cycle .pv-metric {
        color: #F8FBFF !important;
        background:
            linear-gradient(145deg, rgba(9, 29, 61, 0.98), rgba(3, 12, 29, 0.98)) !important;
        border: 1px solid rgba(107, 228, 255, 0.36) !important;
        box-shadow: 0 14px 30px rgba(0, 7, 22, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    }

    #portal-modal #user-panel-layout #tab-home.tab-content.active .pv-summary-card-cycle .pv-metric label,
    #portal-modal #user-panel-layout #tab-home.tab-content.active .pv-summary-card-cycle .pv-leg-badge small {
        color: #DCEFFF !important;
        opacity: 1 !important;
        font-weight: 850 !important;
        text-shadow: none !important;
    }

    #portal-modal #user-panel-layout #tab-home.tab-content.active .pv-summary-card-cycle .pv-value {
        color: #F8EAB4 !important;
        opacity: 1 !important;
        font-weight: 950 !important;
        text-shadow: 0 2px 14px rgba(0, 7, 22, 0.36) !important;
    }

    #portal-modal #user-panel-layout #tab-home.tab-content.active .pv-summary-card-cycle .pv-leg-badge {
        color: #F8FBFF !important;
        background:
            linear-gradient(145deg, rgba(8, 29, 61, 0.96), rgba(3, 12, 29, 0.98)) !important;
        border: 1px solid rgba(246, 230, 167, 0.44) !important;
        box-shadow: 0 10px 22px rgba(0, 7, 22, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    }

    #portal-modal #user-panel-layout #tab-home.tab-content.active .pv-summary-card-cycle .pv-leg-badge strong {
        color: #F8EAB4 !important;
        opacity: 1 !important;
        font-weight: 950 !important;
    }
}

/* Mobile User Panel polish: keep high-specificity overrides last to prevent legacy light mobile cards. */
@media (max-width: 640px) {
    #portal-modal #user-panel-layout #tab-home.tab-content.active .pv-summary-card,
    #portal-modal #user-panel-layout #tab-home.tab-content.active .pv-summary-card:not(.pv-summary-card-cycle),
    #portal-modal #user-panel-layout #tab-home.tab-content.active .pv-metric,
    #portal-modal #user-panel-layout #tab-build.tab-content.active #build-points-summary {
        color: #F8FBFF !important;
        background:
            radial-gradient(circle at 0% 0%, rgba(107, 228, 255, 0.14), transparent 44%),
            linear-gradient(145deg, rgba(11, 32, 66, 0.98), rgba(4, 13, 31, 0.98)) !important;
        border: 1px solid rgba(107, 228, 255, 0.34) !important;
        box-shadow: 0 18px 38px rgba(0, 7, 22, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
        opacity: 1 !important;
        backdrop-filter: blur(14px) saturate(135%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
    }

    #portal-modal #user-panel-layout #tab-home.tab-content.active .pv-summary-card-cycle {
        background:
            radial-gradient(circle at 0% 0%, rgba(107, 228, 255, 0.22), transparent 44%),
            linear-gradient(145deg, rgba(15, 45, 86, 0.98), rgba(5, 17, 39, 0.98)) !important;
        border-color: rgba(107, 228, 255, 0.46) !important;
    }

    #portal-modal #user-panel-layout #tab-home.tab-content.active .pv-summary-head h4,
    #portal-modal #user-panel-layout #tab-home.tab-content.active .pv-metric label,
    #portal-modal #user-panel-layout #tab-build.tab-content.active #build-points-summary,
    #portal-modal #user-panel-layout #tab-build.tab-content.active #build-points-summary span {
        color: #DCEFFF !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    #portal-modal #user-panel-layout #tab-home.tab-content.active .pv-value,
    #portal-modal #user-panel-layout #tab-build.tab-content.active #build-points-summary #reg-current-bal,
    #portal-modal #user-panel-layout #tab-build.tab-content.active #build-points-summary [style*="var(--accent)"] {
        color: #F6E6A7 !important;
        opacity: 1 !important;
        font-weight: 900 !important;
    }

    #portal-modal #user-panel-layout #tab-build.tab-content.active #build-points-summary {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
        padding: 1rem !important;
        border-radius: 18px !important;
        margin: 1rem 0 !important;
    }

}

/* P0 login CAPTCHA visibility guard and Admin dark premium correction. */
#portal-modal .modal-content:not(.panel-active) #login-captcha-img,
#admin-login-section #admin-captcha-img {
    display: block !important;
    width: 132px !important;
    min-width: 132px !important;
    height: 58px !important;
    min-height: 58px !important;
    flex: 0 0 132px !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
    position: relative !important;
    z-index: 2 !important;
    overflow: hidden !important;
    cursor: pointer !important;
    background: #050B14 !important;
    border: 1px solid rgba(246, 230, 167, 0.64) !important;
    border-radius: 14px !important;
    box-shadow:
        0 12px 26px rgba(0, 7, 22, 0.38),
        0 0 0 1px rgba(107, 228, 255, 0.14) !important;
}

#portal-modal .modal-content:not(.panel-active) #login-captcha-img[data-captcha-status="loading"],
#admin-login-section #admin-captcha-img[data-captcha-status="loading"] {
    background:
        linear-gradient(90deg, rgba(5, 11, 20, 0.96), rgba(11, 32, 66, 0.96), rgba(5, 11, 20, 0.96)) !important;
}

#admin-login-section.admin-ui-parity,
#admin-section.admin-ui-parity {
    --admin-app-bg: #030A16;
    --admin-app-bg-2: #071B38;
    --admin-app-surface: rgba(8, 29, 61, 0.8);
    --admin-app-surface-strong: rgba(4, 15, 35, 0.92);
    --admin-app-surface-blue: rgba(11, 39, 78, 0.86);
    --admin-app-text: #F8FBFF;
    --admin-app-muted: #BBD4EC;
    --admin-app-soft: #DCEFFF;
    --admin-app-border: rgba(107, 228, 255, 0.22);
    --admin-app-border-strong: rgba(246, 230, 167, 0.34);
    --admin-app-gold: #F6E6A7;
    --admin-app-gold-strong: #C99D3E;
    --admin-app-blue: #6BE4FF;
    --admin-app-cyan: #20C7B5;
    --admin-app-pink: #F75F7A;
    --admin-app-green: #5FE0A0;
    --admin-app-danger: #FF6B88;
    --admin-app-shadow: 0 24px 70px rgba(0, 7, 22, 0.5);
    --admin-app-soft-shadow: 0 18px 42px rgba(0, 7, 22, 0.34);
    color: var(--admin-app-text) !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(107, 228, 255, 0.2), transparent 30%),
        radial-gradient(circle at 94% 8%, rgba(246, 230, 167, 0.18), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(247, 95, 122, 0.1), transparent 34%),
        linear-gradient(135deg, #030A16 0%, #061527 48%, #0A2B57 100%) !important;
}

#admin-login-section.admin-ui-parity::before,
#admin-section.admin-ui-parity::before {
    background:
        linear-gradient(90deg, rgba(107, 228, 255, 0.08), transparent 26%, rgba(246, 230, 167, 0.08) 78%, transparent),
        radial-gradient(circle at 76% 92%, rgba(32, 199, 181, 0.12), transparent 35%) !important;
}

#admin-login-section.admin-ui-parity > div {
    color: var(--admin-app-text) !important;
    border: 1px solid var(--admin-app-border-strong) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(107, 228, 255, 0.18), transparent 40%),
        linear-gradient(145deg, rgba(12, 36, 74, 0.92), rgba(4, 15, 35, 0.96)) !important;
    box-shadow: var(--admin-app-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(22px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}

#admin-login-section.admin-ui-parity h2,
#admin-section.admin-ui-parity h1,
#admin-section.admin-ui-parity h2,
#admin-section.admin-ui-parity h3,
#admin-section.admin-ui-parity h4 {
    color: var(--admin-app-text) !important;
    text-shadow: 0 2px 18px rgba(58, 186, 255, 0.2) !important;
}

#admin-login-section.admin-ui-parity h2 {
    color: var(--admin-app-gold) !important;
    letter-spacing: 0.18rem !important;
}

#admin-login-section.admin-ui-parity .modal-input,
#admin-section.admin-ui-parity .modal-input,
#admin-section.admin-ui-parity input,
#admin-section.admin-ui-parity select,
#admin-section.admin-ui-parity textarea {
    color: var(--admin-app-text) !important;
    -webkit-text-fill-color: var(--admin-app-text) !important;
    background:
        linear-gradient(145deg, rgba(12, 36, 74, 0.9), rgba(4, 15, 35, 0.94)) !important;
    border: 1px solid rgba(107, 228, 255, 0.42) !important;
    border-radius: 16px !important;
    box-shadow:
        0 14px 28px rgba(0, 7, 22, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#admin-login-section.admin-ui-parity .modal-input::placeholder,
#admin-section.admin-ui-parity input::placeholder,
#admin-section.admin-ui-parity textarea::placeholder {
    color: #DCEFFF !important;
    opacity: 0.86 !important;
}

#admin-login-section.admin-ui-parity .modal-input:focus,
#admin-section.admin-ui-parity .modal-input:focus,
#admin-section.admin-ui-parity input:focus,
#admin-section.admin-ui-parity select:focus,
#admin-section.admin-ui-parity textarea:focus {
    border-color: #83ECFF !important;
    box-shadow:
        0 0 0 4px rgba(0, 167, 255, 0.22),
        0 16px 32px rgba(0, 7, 22, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

#admin-section.admin-ui-parity .admin-sidebar {
    color: var(--admin-app-text) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(246, 230, 167, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(5, 18, 42, 0.96), rgba(3, 10, 22, 0.98)) !important;
    border-right: 1px solid rgba(107, 228, 255, 0.18) !important;
    box-shadow: 18px 0 44px rgba(0, 7, 22, 0.34) !important;
}

#admin-section.admin-ui-parity .admin-sidebar h1 {
    color: var(--admin-app-gold) !important;
    text-shadow: 0 0 22px rgba(246, 230, 167, 0.28) !important;
}

#admin-section.admin-ui-parity .admin-sidebar p,
#admin-section.admin-ui-parity p,
#admin-section.admin-ui-parity label,
#admin-section.admin-ui-parity small,
#admin-section.admin-ui-parity div[style*="opacity: 0.5"],
#admin-section.admin-ui-parity div[style*="opacity:0.5"],
#admin-section.admin-ui-parity div[style*="opacity: 0.6"],
#admin-section.admin-ui-parity div[style*="opacity:0.6"] {
    color: var(--admin-app-muted) !important;
    opacity: 1 !important;
}

#admin-section.admin-ui-parity .admin-nav-item {
    color: var(--admin-app-muted) !important;
    min-height: 42px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 850 !important;
}

#admin-section.admin-ui-parity .admin-nav-item:hover {
    color: var(--admin-app-text) !important;
    background: rgba(107, 228, 255, 0.1) !important;
    border-color: rgba(107, 228, 255, 0.22) !important;
}

#admin-section.admin-ui-parity .admin-nav-item.active {
    color: #07111F !important;
    background: linear-gradient(135deg, #F6E6A7, #6BE4FF) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 14px 28px rgba(0, 167, 255, 0.18), 0 0 24px rgba(246, 230, 167, 0.14) !important;
}

#admin-section.admin-ui-parity .admin-nav-item span,
#admin-section.admin-ui-parity .admin-nav-item.active span {
    color: inherit !important;
    opacity: 1 !important;
}

#admin-section.admin-ui-parity #admin-logout-btn {
    color: #FFD9E1 !important;
    background: rgba(255, 107, 136, 0.08) !important;
    border: 1px solid rgba(255, 107, 136, 0.28) !important;
    border-radius: 999px !important;
}

#admin-section.admin-ui-parity .admin-main-content {
    background:
        radial-gradient(circle at 10% 0%, rgba(107, 228, 255, 0.16), transparent 32%),
        radial-gradient(circle at 96% 8%, rgba(246, 230, 167, 0.14), transparent 30%),
        linear-gradient(135deg, rgba(3, 10, 22, 0.98), rgba(6, 21, 39, 0.98) 48%, rgba(10, 43, 87, 0.96)) !important;
}

#admin-section.admin-ui-parity .glass-card,
#admin-section.admin-ui-parity .admin-tab-content > div[style*="background: rgba(255,255,255,0.01)"],
#admin-section.admin-ui-parity .admin-tab-content > div[style*="background:rgba(255,255,255,0.01)"],
#admin-section.admin-ui-parity #rp-search-result-area > div,
#admin-section.admin-ui-parity #rp-grant-preview-card {
    color: var(--admin-app-text) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(107, 228, 255, 0.12), transparent 42%),
        linear-gradient(145deg, rgba(12, 36, 74, 0.84), rgba(4, 15, 35, 0.92)) !important;
    border: 1px solid rgba(107, 228, 255, 0.22) !important;
    border-radius: 24px !important;
    box-shadow: var(--admin-app-soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}

#admin-section.admin-ui-parity #admin-tab-dashboard > div:nth-of-type(2) .glass-card {
    min-height: 138px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(246, 230, 167, 0.13), transparent 38%),
        radial-gradient(circle at 0% 100%, rgba(107, 228, 255, 0.11), transparent 34%),
        linear-gradient(145deg, rgba(13, 43, 84, 0.9), rgba(4, 15, 35, 0.96)) !important;
    border-left: 1px solid rgba(246, 230, 167, 0.24) !important;
    border-color: rgba(107, 228, 255, 0.28) !important;
    box-shadow:
        0 22px 50px rgba(0, 7, 22, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#admin-section.admin-ui-parity #admin-tab-dashboard > div:nth-of-type(2) .glass-card::after {
    background:
        linear-gradient(135deg, rgba(246, 230, 167, 0.2), rgba(107, 228, 255, 0.16)) !important;
    opacity: 0.9 !important;
}

#admin-section.admin-ui-parity #admin-tab-dashboard > div:nth-of-type(2) .glass-card label,
#admin-section.admin-ui-parity #admin-tab-dashboard > div:nth-of-type(2) .glass-card small {
    color: #BBD4EC !important;
}

#admin-section.admin-ui-parity #admin-tab-dashboard > div:nth-of-type(2) .glass-card .val {
    color: #F8FBFF !important;
    text-shadow: 0 0 24px rgba(107, 228, 255, 0.18) !important;
}

#admin-section.admin-ui-parity .val,
#admin-section.admin-ui-parity .glass-card .val,
#admin-section.admin-ui-parity strong,
#admin-section.admin-ui-parity [style*="color: #fff"],
#admin-section.admin-ui-parity [style*="color:#fff"] {
    color: var(--admin-app-text) !important;
}

#admin-section.admin-ui-parity [style*="var(--accent)"],
#admin-section.admin-ui-parity .gold-text {
    color: var(--admin-app-gold) !important;
}

#admin-section.admin-ui-parity .admin-table-wrapper {
    color: var(--admin-app-text) !important;
    background:
        linear-gradient(145deg, rgba(6, 22, 47, 0.88), rgba(3, 12, 29, 0.94)) !important;
    border: 1px solid rgba(107, 228, 255, 0.2) !important;
    border-radius: 24px !important;
    box-shadow: var(--admin-app-soft-shadow) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

#admin-section.admin-ui-parity .admin-table {
    min-width: 760px;
    color: var(--admin-app-text) !important;
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#admin-section.admin-ui-parity .admin-table th {
    color: var(--admin-app-gold) !important;
    background: rgba(6, 25, 55, 0.94) !important;
    border-bottom: 1px solid rgba(246, 230, 167, 0.2) !important;
}

#admin-section.admin-ui-parity .admin-table td {
    color: var(--admin-app-soft) !important;
    background: rgba(8, 29, 61, 0.5) !important;
    border-bottom: 1px solid rgba(107, 228, 255, 0.12) !important;
}

#admin-section.admin-ui-parity .admin-table tr:hover td {
    background: rgba(14, 47, 92, 0.72) !important;
}

#admin-section.admin-ui-parity .cta-btn,
#admin-login-section.admin-ui-parity .cta-btn,
#admin-section.admin-ui-parity button.cta-btn {
    color: #07111F !important;
    background: linear-gradient(135deg, #F6E6A7, #6BE4FF) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 14px 26px rgba(0, 167, 255, 0.2), 0 0 22px rgba(246, 230, 167, 0.14) !important;
    text-shadow: none !important;
}

#admin-section.admin-ui-parity .cta-btn.secondary,
#admin-section.admin-ui-parity .cta-btn[style*="rgba(255,255,255"],
#admin-section.admin-ui-parity .cta-btn[style*="rgba(255, 255, 255"],
#admin-section.admin-ui-parity button[style*="rgba(255,255,255"],
#admin-section.admin-ui-parity button[style*="rgba(255, 255, 255"] {
    color: var(--admin-app-soft) !important;
    background: rgba(107, 228, 255, 0.1) !important;
    border: 1px solid rgba(107, 228, 255, 0.24) !important;
    box-shadow: none !important;
}

#admin-section.admin-ui-parity button[style*="#ff"],
#admin-section.admin-ui-parity button[style*="255, 94, 94"],
#admin-section.admin-ui-parity button[style*="255,0,0"],
#admin-section.admin-ui-parity button[style*="255, 0, 0"] {
    color: #fff !important;
    background: linear-gradient(135deg, #FF6B88, #C99D3E) !important;
    box-shadow: 0 14px 24px rgba(255, 107, 136, 0.2) !important;
}

#admin-section.admin-ui-parity .status-badge.completed,
#admin-section.admin-ui-parity .status-badge.approved,
#admin-section.admin-ui-parity .status-badge.confirmed {
    color: #D8FFE9 !important;
    background: rgba(95, 224, 160, 0.14) !important;
    border: 1px solid rgba(95, 224, 160, 0.34) !important;
}

#admin-section.admin-ui-parity .status-badge.pending {
    color: #FFF0BD !important;
    background: rgba(246, 230, 167, 0.14) !important;
    border: 1px solid rgba(246, 230, 167, 0.34) !important;
}

#admin-section.admin-ui-parity .status-badge.processing,
#admin-section.admin-ui-parity .status-badge.active {
    color: #DCEFFF !important;
    background: rgba(107, 228, 255, 0.12) !important;
    border: 1px solid rgba(107, 228, 255, 0.34) !important;
}

#admin-section.admin-ui-parity .status-badge.failed,
#admin-section.admin-ui-parity .status-badge.rejected,
#admin-section.admin-ui-parity .status-badge.cancelled {
    color: #FFD9E1 !important;
    background: rgba(255, 107, 136, 0.14) !important;
    border: 1px solid rgba(255, 107, 136, 0.34) !important;
}

#admin-login-analytics-detail-modal .modal-content,
#admin-user-modal .modal-content,
#admin-order-modal .modal-content,
#admin-redemption-modal .modal-content,
#admin-product-modal .modal-content {
    color: var(--admin-app-text, #F8FBFF) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(107, 228, 255, 0.14), transparent 38%),
        linear-gradient(145deg, rgba(12, 36, 74, 0.96), rgba(4, 15, 35, 0.98)) !important;
    border: 1px solid rgba(107, 228, 255, 0.28) !important;
    border-radius: 24px !important;
    box-shadow: 0 28px 80px rgba(0, 7, 22, 0.62) !important;
}

#admin-login-analytics-detail-modal .modal-content h2,
#admin-user-modal .modal-content h2,
#admin-order-modal .modal-content h2,
#admin-redemption-modal .modal-content h2,
#admin-product-modal .modal-content h2 {
    color: #F6E6A7 !important;
}

#admin-login-analytics-detail-modal .modal-content p,
#admin-user-modal .modal-content p,
#admin-order-modal .modal-content p,
#admin-redemption-modal .modal-content p,
#admin-product-modal .modal-content p,
#admin-login-analytics-detail-modal .modal-content label,
#admin-user-modal .modal-content label,
#admin-order-modal .modal-content label,
#admin-redemption-modal .modal-content label,
#admin-product-modal .modal-content label {
    color: #BBD4EC !important;
}

@media (max-width: 768px) {
    #admin-section.admin-ui-parity .admin-sidebar {
        background:
            linear-gradient(180deg, rgba(5, 18, 42, 0.98), rgba(3, 10, 22, 0.96)) !important;
        border-bottom: 1px solid rgba(107, 228, 255, 0.2) !important;
        border-right: 0 !important;
    }

    #admin-section.admin-ui-parity .admin-main-content {
        padding: 1.15rem !important;
    }
}

@media (max-width: 480px) {
    #portal-modal .modal-content:not(.panel-active) #login-captcha-img,
    #admin-login-section #admin-captcha-img {
        width: 100% !important;
        max-width: 180px !important;
        min-width: 0 !important;
        flex: 0 1 180px !important;
        align-self: center !important;
    }
}

/* User Panel Agent Center theme sync: dark navy / blue-gold glass surfaces. */
#portal-modal #user-panel-layout #asset-agent-center,
#user-panel-layout #asset-agent-center {
    color: #F8FBFF !important;
}

#portal-modal #user-panel-layout .agent-entry-card,
#user-panel-layout .agent-entry-card,
#portal-modal #user-panel-layout #asset-agent-center .agent-status-card,
#user-panel-layout #asset-agent-center .agent-status-card,
#portal-modal #user-panel-layout #asset-agent-center .agent-rule-card,
#user-panel-layout #asset-agent-center .agent-rule-card,
#portal-modal #user-panel-layout #asset-agent-center .agent-restock-card,
#user-panel-layout #asset-agent-center .agent-restock-card,
#portal-modal #user-panel-layout #asset-agent-center .agent-balance-pill,
#user-panel-layout #asset-agent-center .agent-balance-pill,
#portal-modal #user-panel-layout #asset-agent-center .agent-wallet-card,
#user-panel-layout #asset-agent-center .agent-wallet-card,
#portal-modal #user-panel-layout #asset-agent-center .agent-core-result-card,
#user-panel-layout #asset-agent-center .agent-core-result-card,
#portal-modal #user-panel-layout #asset-agent-center .agent-info-grid .glass-card,
#user-panel-layout #asset-agent-center .agent-info-grid .glass-card,
#portal-modal #user-panel-layout #asset-agent-center .agent-balance-grid .glass-card,
#user-panel-layout #asset-agent-center .agent-balance-grid .glass-card,
#portal-modal #user-panel-layout #asset-agent-center .agent-restock-breakdown-grid .glass-card,
#user-panel-layout #asset-agent-center .agent-restock-breakdown-grid .glass-card {
    color: #F8FBFF !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(107, 228, 255, 0.13), transparent 36%),
        linear-gradient(145deg, rgba(11, 33, 70, 0.97), rgba(4, 14, 33, 0.98) 62%, rgba(2, 8, 21, 0.99)) !important;
    border: 1px solid rgba(107, 228, 255, 0.32) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 46px rgba(0, 7, 22, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(14px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
}

#portal-modal #user-panel-layout .agent-entry-card,
#user-panel-layout .agent-entry-card,
#portal-modal #user-panel-layout #asset-agent-center .agent-status-card,
#user-panel-layout #asset-agent-center .agent-status-card {
    background:
        radial-gradient(circle at 92% 0%, rgba(246, 230, 167, 0.2), transparent 28%),
        radial-gradient(circle at 0% 0%, rgba(107, 228, 255, 0.2), transparent 38%),
        linear-gradient(145deg, rgba(9, 31, 67, 0.98), rgba(5, 17, 39, 0.98)) !important;
    border-color: rgba(246, 230, 167, 0.46) !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-rule-card,
#user-panel-layout #asset-agent-center .agent-rule-card {
    min-height: 150px;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-rule-card-warning,
#user-panel-layout #asset-agent-center .agent-rule-card-warning {
    background:
        radial-gradient(circle at 8% 0%, rgba(246, 230, 167, 0.18), transparent 38%),
        linear-gradient(145deg, rgba(19, 34, 56, 0.98), rgba(5, 17, 39, 0.99)) !important;
    border-color: rgba(246, 230, 167, 0.48) !important;
    box-shadow: 0 22px 48px rgba(0, 7, 22, 0.42), 0 0 24px rgba(246, 230, 167, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-rule-card-info,
#user-panel-layout #asset-agent-center .agent-rule-card-info {
    background:
        radial-gradient(circle at 8% 0%, rgba(107, 228, 255, 0.18), transparent 38%),
        linear-gradient(145deg, rgba(9, 31, 67, 0.98), rgba(4, 14, 33, 0.99)) !important;
    border-color: rgba(107, 228, 255, 0.44) !important;
    box-shadow: 0 22px 48px rgba(0, 7, 22, 0.42), 0 0 24px rgba(107, 228, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-rule-card-warning .agent-rule-card-badge,
#user-panel-layout #asset-agent-center .agent-rule-card-warning .agent-rule-card-badge {
    color: #261D05 !important;
    background: linear-gradient(135deg, #F6E6A7, #D9A441) !important;
    box-shadow: 0 10px 24px rgba(246, 230, 167, 0.2) !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-rule-card-info .agent-rule-card-badge,
#user-panel-layout #asset-agent-center .agent-rule-card-info .agent-rule-card-badge {
    color: #022133 !important;
    background: linear-gradient(135deg, #A9F1FF, #42CFEF) !important;
    box-shadow: 0 10px 24px rgba(107, 228, 255, 0.2) !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-balance-strip,
#user-panel-layout #asset-agent-center .agent-balance-strip {
    display: flex !important;
    gap: 0.65rem !important;
    margin: 0 0 1.2rem !important;
    overflow-x: auto;
    padding: 0.1rem 0 0.4rem !important;
    scrollbar-width: thin;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-balance-pill,
#user-panel-layout #asset-agent-center .agent-balance-pill {
    flex: 1 0 132px;
    min-width: 132px;
    padding: 0.7rem 0.85rem !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 26px rgba(0, 7, 22, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-balance-pill [id$="-label"],
#user-panel-layout #asset-agent-center .agent-balance-pill [id$="-label"] {
    display: block;
    font-size: 0.56rem !important;
    line-height: 1.25;
    margin-bottom: 0.28rem;
    white-space: nowrap;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-balance-pill .val,
#user-panel-layout #asset-agent-center .agent-balance-pill .val {
    font-size: clamp(0.92rem, 1.45vw, 1.08rem) !important;
    margin: 0 !important;
    overflow-wrap: anywhere;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-checkout-section,
#user-panel-layout #asset-agent-center .agent-checkout-section {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(107, 228, 255, 0.18);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(246, 230, 167, 0.08), transparent 32%),
        linear-gradient(145deg, rgba(5, 18, 42, 0.72), rgba(2, 8, 21, 0.82));
}

#portal-modal #user-panel-layout #asset-agent-center .agent-checkout-section-head,
#user-panel-layout #asset-agent-center .agent-checkout-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-step-kicker,
#user-panel-layout #asset-agent-center .agent-step-kicker {
    flex: 0 0 auto;
    color: #06111F;
    background: linear-gradient(135deg, #F8EAB4, #D6AF4B);
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    font-size: 0.58rem;
    font-weight: 950;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-checkout-title,
#user-panel-layout #asset-agent-center .agent-checkout-title {
    flex: 1 1 auto;
    color: #F8EAB4 !important;
    font-size: 0.9rem;
    font-weight: 950;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-amount-grid,
#user-panel-layout #asset-agent-center .agent-amount-grid {
    grid-template-columns: repeat(5, minmax(128px, 1fr)) !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-amount-grid > div,
#user-panel-layout #asset-agent-center .agent-amount-grid > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-amount-grid label,
#user-panel-layout #asset-agent-center .agent-amount-grid label {
    display: flex !important;
    min-height: 2.35rem;
    align-items: flex-end;
    margin-bottom: 0.55rem !important;
    line-height: 1.25 !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-amount-grid .modal-input,
#user-panel-layout #asset-agent-center .agent-amount-grid .modal-input {
    margin-top: auto !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-core-result-grid,
#user-panel-layout #asset-agent-center .agent-core-result-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    align-items: stretch;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-core-result-card,
#user-panel-layout #asset-agent-center .agent-core-result-card {
    display: flex;
    min-height: 126px;
    min-width: 0;
    flex-direction: column;
    border-radius: 18px !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-core-result-card [id$="-label"],
#user-panel-layout #asset-agent-center .agent-core-result-card [id$="-label"] {
    display: flex;
    min-height: 1.75rem;
    align-items: flex-start;
    line-height: 1.25 !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-core-result-card .val,
#user-panel-layout #asset-agent-center .agent-core-result-card .val {
    display: flex;
    min-height: 2.55rem;
    align-items: flex-end;
    margin-top: auto !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
}

#portal-modal #user-panel-layout #asset-agent-center #agent-order-minimum-status,
#user-panel-layout #asset-agent-center #agent-order-minimum-status {
    font-size: clamp(0.78rem, 1.05vw, 0.95rem) !important;
    line-height: 1.25 !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-shipping-grid,
#user-panel-layout #asset-agent-center .agent-shipping-grid,
#portal-modal #user-panel-layout #asset-agent-center .agent-payment-input-grid,
#user-panel-layout #asset-agent-center .agent-payment-input-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-shipping-address-field,
#user-panel-layout #asset-agent-center .agent-shipping-address-field {
    grid-column: 1 / -1;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-invoice-panel,
#user-panel-layout #asset-agent-center .agent-invoice-panel {
    border: 1px solid rgba(107, 228, 255, 0.24);
    border-radius: 18px;
    background: rgba(2, 8, 21, 0.62);
    overflow: hidden;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-invoice-totals,
#user-panel-layout #asset-agent-center .agent-invoice-totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    background: linear-gradient(135deg, rgba(246, 230, 167, 0.12), rgba(107, 228, 255, 0.08));
    border-bottom: 1px solid rgba(107, 228, 255, 0.18);
}

#portal-modal #user-panel-layout #asset-agent-center .agent-invoice-totals span,
#user-panel-layout #asset-agent-center .agent-invoice-totals span,
#portal-modal #user-panel-layout #asset-agent-center .agent-invoice-row span,
#user-panel-layout #asset-agent-center .agent-invoice-row span {
    display: block;
    color: #DCEFFF;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-invoice-totals strong,
#user-panel-layout #asset-agent-center .agent-invoice-totals strong {
    display: block;
    margin-top: 0.28rem;
    color: #F8EAB4;
    font-size: 1.25rem;
    font-weight: 950;
    overflow-wrap: anywhere;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-invoice-row,
#user-panel-layout #asset-agent-center .agent-invoice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.68rem 1rem;
    border-bottom: 1px solid rgba(107, 228, 255, 0.12);
}

#portal-modal #user-panel-layout #asset-agent-center .agent-invoice-row:last-child,
#user-panel-layout #asset-agent-center .agent-invoice-row:last-child {
    border-bottom: 0;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-invoice-row strong,
#user-panel-layout #asset-agent-center .agent-invoice-row strong {
    color: #FFFFFF;
    font-size: 0.92rem;
    font-weight: 950;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-hidden-preview-values,
#user-panel-layout #asset-agent-center .agent-hidden-preview-values {
    display: none !important;
}

#portal-modal #user-panel-layout #assets-agent-center-title,
#user-panel-layout #assets-agent-center-title,
#portal-modal #user-panel-layout #agent-center-title,
#user-panel-layout #agent-center-title,
#portal-modal #user-panel-layout #asset-agent-center .agent-rule-card-title,
#user-panel-layout #asset-agent-center .agent-rule-card-title,
#portal-modal #user-panel-layout #agent-restock-title,
#user-panel-layout #agent-restock-title,
#portal-modal #user-panel-layout #agent-order-business-total,
#user-panel-layout #agent-order-business-total,
#portal-modal #user-panel-layout #agent-order-minimum-status,
#user-panel-layout #agent-order-minimum-status,
#portal-modal #user-panel-layout #agent-order-total-sets,
#user-panel-layout #agent-order-total-sets {
    color: #F6E6A7 !important;
    opacity: 1 !important;
    text-shadow: 0 2px 14px rgba(0, 7, 22, 0.34) !important;
}

#portal-modal #user-panel-layout #asset-agent-center label,
#user-panel-layout #asset-agent-center label,
#portal-modal #user-panel-layout #asset-agent-center [id$="-label"],
#user-panel-layout #asset-agent-center [id$="-label"],
#portal-modal #user-panel-layout #asset-agent-center .agent-info-grid [id$="-title"],
#user-panel-layout #asset-agent-center .agent-info-grid [id$="-title"] {
    color: #DCEFFF !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.06rem !important;
    text-shadow: none !important;
}

#portal-modal #user-panel-layout #assets-agent-center-note,
#user-panel-layout #assets-agent-center-note,
#portal-modal #user-panel-layout #agent-center-status-desc,
#user-panel-layout #agent-center-status-desc,
#portal-modal #user-panel-layout #agent-restock-subtitle,
#user-panel-layout #agent-restock-subtitle,
#portal-modal #user-panel-layout #agent-restock-pv-note,
#user-panel-layout #agent-restock-pv-note,
#portal-modal #user-panel-layout #agent-order-payment-hint,
#user-panel-layout #agent-order-payment-hint,
#portal-modal #user-panel-layout #agent-order-payment-note,
#user-panel-layout #agent-order-payment-note,
#portal-modal #user-panel-layout #agent-order-footnote,
#user-panel-layout #agent-order-footnote,
#portal-modal #user-panel-layout #asset-agent-center .agent-rule-card-body,
#user-panel-layout #asset-agent-center .agent-rule-card-body,
#portal-modal #user-panel-layout #asset-agent-center .agent-info-grid [id$="-body"],
#user-panel-layout #asset-agent-center .agent-info-grid [id$="-body"] {
    color: #C4D7EA !important;
    opacity: 1 !important;
    font-weight: 760 !important;
}

#portal-modal #user-panel-layout #asset-agent-center .val,
#user-panel-layout #asset-agent-center .val,
#portal-modal #user-panel-layout #asset-agent-center .agent-balance-grid .glass-card *,
#user-panel-layout #asset-agent-center .agent-balance-grid .glass-card *,
#portal-modal #user-panel-layout #asset-agent-center .agent-restock-breakdown-grid .glass-card *,
#user-panel-layout #asset-agent-center .agent-restock-breakdown-grid .glass-card * {
    color: #FFFFFF !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-balance-grid .glass-card .val,
#user-panel-layout #asset-agent-center .agent-balance-grid .glass-card .val,
#portal-modal #user-panel-layout #asset-agent-center .agent-restock-breakdown-grid .glass-card .val,
#user-panel-layout #asset-agent-center .agent-restock-breakdown-grid .glass-card .val {
    color: #F8EAB4 !important;
    line-height: 1.15 !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-balance-grid .glass-card:nth-child(odd),
#user-panel-layout #asset-agent-center .agent-balance-grid .glass-card:nth-child(odd),
#portal-modal #user-panel-layout #asset-agent-center .agent-restock-breakdown-grid .glass-card:nth-child(odd),
#user-panel-layout #asset-agent-center .agent-restock-breakdown-grid .glass-card:nth-child(odd) {
    border-color: rgba(246, 230, 167, 0.38) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(246, 230, 167, 0.14), transparent 36%),
        linear-gradient(145deg, rgba(17, 33, 56, 0.98), rgba(4, 14, 33, 0.99)) !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-restock-card,
#user-panel-layout #asset-agent-center .agent-restock-card {
    padding: clamp(1.05rem, 2.5vw, 1.65rem) !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-restock-form-grid > div,
#user-panel-layout #asset-agent-center .agent-restock-form-grid > div {
    min-width: 0;
}

#portal-modal #user-panel-layout #asset-agent-center .modal-input,
#user-panel-layout #asset-agent-center .modal-input,
#portal-modal #user-panel-layout #asset-agent-center input.modal-input,
#user-panel-layout #asset-agent-center input.modal-input,
#portal-modal #user-panel-layout #asset-agent-center select.modal-input,
#user-panel-layout #asset-agent-center select.modal-input,
#portal-modal #user-panel-layout #asset-agent-center textarea.modal-input,
#user-panel-layout #asset-agent-center textarea.modal-input {
    min-height: 50px !important;
    width: 100% !important;
    color: #F8FBFF !important;
    -webkit-text-fill-color: #F8FBFF !important;
    background: rgba(4, 14, 31, 0.96) !important;
    border: 1px solid rgba(107, 228, 255, 0.46) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 24px rgba(0, 7, 22, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color-scheme: dark;
    font-weight: 850 !important;
}

#portal-modal #user-panel-layout #asset-agent-center select.modal-input option,
#user-panel-layout #asset-agent-center select.modal-input option {
    color: #F8FBFF !important;
    background: #06111F !important;
}

#portal-modal #user-panel-layout #asset-agent-center .modal-input::placeholder,
#user-panel-layout #asset-agent-center .modal-input::placeholder {
    color: #AFCBE4 !important;
    opacity: 1 !important;
}

#portal-modal #user-panel-layout #asset-agent-center .modal-input:focus,
#user-panel-layout #asset-agent-center .modal-input:focus,
#portal-modal #user-panel-layout #asset-agent-center input:focus,
#user-panel-layout #asset-agent-center input:focus,
#portal-modal #user-panel-layout #asset-agent-center select:focus,
#user-panel-layout #asset-agent-center select:focus,
#portal-modal #user-panel-layout #asset-agent-center textarea:focus,
#user-panel-layout #asset-agent-center textarea:focus {
    border-color: #83ECFF !important;
    outline: none !important;
    box-shadow:
        0 0 0 4px rgba(0, 167, 255, 0.22),
        0 14px 30px rgba(0, 7, 22, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

#portal-modal #user-panel-layout #asset-agent-center .modal-input[readonly],
#user-panel-layout #asset-agent-center .modal-input[readonly],
#portal-modal #user-panel-layout #asset-agent-center .modal-input:disabled,
#user-panel-layout #asset-agent-center .modal-input:disabled {
    color: #DCEFFF !important;
    -webkit-text-fill-color: #DCEFFF !important;
    background:
        linear-gradient(145deg, rgba(13, 34, 67, 0.88), rgba(4, 14, 31, 0.9)) !important;
    border-color: rgba(246, 230, 167, 0.34) !important;
    opacity: 1 !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-wallet-section,
#user-panel-layout #asset-agent-center .agent-wallet-section {
    padding: 1rem !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(246, 230, 167, 0.12), transparent 32%),
        linear-gradient(145deg, rgba(7, 23, 50, 0.82), rgba(2, 8, 21, 0.92)) !important;
    border: 1px solid rgba(107, 228, 255, 0.24) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#portal-modal #user-panel-layout #asset-agent-center #agent-order-wallet-address,
#user-panel-layout #asset-agent-center #agent-order-wallet-address {
    display: block;
    max-width: 100%;
    margin-top: 0.55rem !important;
    padding: 0.9rem 1rem !important;
    color: #F8FBFF !important;
    background: rgba(2, 8, 21, 0.78) !important;
    border: 1px solid rgba(107, 228, 255, 0.34) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.78rem !important;
    font-weight: 800;
    line-height: 1.6 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#portal-modal #user-panel-layout #asset-agent-center #agent-center-back-btn,
#user-panel-layout #asset-agent-center #agent-center-back-btn {
    color: #F8FBFF !important;
    background: linear-gradient(145deg, rgba(9, 26, 54, 0.99), rgba(4, 13, 31, 0.99)) !important;
    border: 1px solid rgba(107, 228, 255, 0.48) !important;
    box-shadow: 0 12px 24px rgba(0, 7, 22, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#portal-modal #user-panel-layout .agent-entry-card #assets-agent-center-btn,
#user-panel-layout .agent-entry-card #assets-agent-center-btn,
#portal-modal #user-panel-layout #asset-agent-center #agent-order-copy-wallet-btn,
#user-panel-layout #asset-agent-center #agent-order-copy-wallet-btn,
#portal-modal #user-panel-layout #asset-agent-center #agent-order-submit-btn,
#user-panel-layout #asset-agent-center #agent-order-submit-btn {
    color: #06111F !important;
    background: linear-gradient(135deg, #F8EAB4 0%, #D6AF4B 54%, #B88424 100%) !important;
    border: 1px solid rgba(255, 232, 168, 0.9) !important;
    box-shadow: 0 18px 34px rgba(214, 175, 75, 0.24), 0 10px 26px rgba(0, 7, 22, 0.3) !important;
    text-shadow: none !important;
}

#portal-modal #user-panel-layout #asset-agent-center #agent-order-copy-wallet-btn:disabled,
#user-panel-layout #asset-agent-center #agent-order-copy-wallet-btn:disabled {
    color: #9DB5CC !important;
    background: rgba(9, 26, 54, 0.68) !important;
    border-color: rgba(107, 228, 255, 0.22) !important;
    cursor: not-allowed;
}

#portal-modal #user-panel-layout #asset-agent-center .status-badge.completed,
#user-panel-layout #asset-agent-center .status-badge.completed {
    color: #9AF7C7 !important;
    background: rgba(42, 220, 126, 0.14) !important;
    border: 1px solid rgba(154, 247, 199, 0.32) !important;
}

#portal-modal #user-panel-layout #asset-agent-center .agent-restock-submit-row,
#user-panel-layout #asset-agent-center .agent-restock-submit-row {
    align-items: center !important;
}

#portal-modal #user-panel-layout #asset-agent-center #agent-order-payment-note,
#user-panel-layout #asset-agent-center #agent-order-payment-note {
    flex: 1 1 320px;
    min-width: 0;
}

@media (max-width: 720px) {
    #portal-modal #user-panel-layout #asset-agent-center .agent-rule-card-grid,
    #user-panel-layout #asset-agent-center .agent-rule-card-grid,
    #portal-modal #user-panel-layout #asset-agent-center .agent-balance-grid,
    #user-panel-layout #asset-agent-center .agent-balance-grid,
    #portal-modal #user-panel-layout #asset-agent-center .agent-info-grid,
    #user-panel-layout #asset-agent-center .agent-info-grid,
    #portal-modal #user-panel-layout #asset-agent-center .agent-restock-form-grid,
    #user-panel-layout #asset-agent-center .agent-restock-form-grid,
    #portal-modal #user-panel-layout #asset-agent-center .agent-restock-breakdown-grid,
    #user-panel-layout #asset-agent-center .agent-restock-breakdown-grid {
        grid-template-columns: 1fr !important;
    }

    #portal-modal #user-panel-layout #asset-agent-center .agent-status-card,
    #user-panel-layout #asset-agent-center .agent-status-card,
    #portal-modal #user-panel-layout #asset-agent-center .agent-rule-card,
    #user-panel-layout #asset-agent-center .agent-rule-card,
    #portal-modal #user-panel-layout #asset-agent-center .agent-restock-card,
    #user-panel-layout #asset-agent-center .agent-restock-card {
        border-radius: 20px !important;
    }

    #portal-modal #user-panel-layout #asset-agent-center .agent-restock-submit-row,
    #user-panel-layout #asset-agent-center .agent-restock-submit-row {
        align-items: stretch !important;
        flex-direction: column;
    }

    #portal-modal #user-panel-layout #asset-agent-center #agent-order-payment-note,
    #user-panel-layout #asset-agent-center #agent-order-payment-note {
        flex: 0 1 auto;
        width: 100%;
    }

    #portal-modal #user-panel-layout #asset-agent-center #agent-order-submit-btn,
    #user-panel-layout #asset-agent-center #agent-order-submit-btn,
    #portal-modal #user-panel-layout .agent-entry-card #assets-agent-center-btn,
    #user-panel-layout .agent-entry-card #assets-agent-center-btn,
    #portal-modal #user-panel-layout #asset-agent-center #agent-order-copy-wallet-btn,
    #user-panel-layout #asset-agent-center #agent-order-copy-wallet-btn {
        flex: 1 1 100%;
        width: 100%;
        white-space: normal;
    }
}

@media (max-width: 420px) {
    #portal-modal #user-panel-layout .agent-entry-card,
    #user-panel-layout .agent-entry-card,
    #portal-modal #user-panel-layout #asset-agent-center .agent-status-card,
    #user-panel-layout #asset-agent-center .agent-status-card,
    #portal-modal #user-panel-layout #asset-agent-center .agent-rule-card,
    #user-panel-layout #asset-agent-center .agent-rule-card,
    #portal-modal #user-panel-layout #asset-agent-center .agent-restock-card,
    #user-panel-layout #asset-agent-center .agent-restock-card,
    #portal-modal #user-panel-layout #asset-agent-center .agent-wallet-section,
    #user-panel-layout #asset-agent-center .agent-wallet-section {
        padding: 1rem !important;
    }

    #portal-modal #user-panel-layout #asset-agent-center #agent-order-wallet-address,
    #user-panel-layout #asset-agent-center #agent-order-wallet-address {
        font-size: 0.72rem !important;
    }
}

@media (max-width: 900px) {
    #portal-modal #user-panel-layout #asset-agent-center .agent-amount-grid,
    #user-panel-layout #asset-agent-center .agent-amount-grid,
    #portal-modal #user-panel-layout #asset-agent-center .agent-core-result-grid,
    #user-panel-layout #asset-agent-center .agent-core-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    #portal-modal #user-panel-layout #asset-agent-center .agent-amount-grid,
    #user-panel-layout #asset-agent-center .agent-amount-grid,
    #portal-modal #user-panel-layout #asset-agent-center .agent-core-result-grid,
    #user-panel-layout #asset-agent-center .agent-core-result-grid,
    #portal-modal #user-panel-layout #asset-agent-center .agent-shipping-grid,
    #user-panel-layout #asset-agent-center .agent-shipping-grid,
    #portal-modal #user-panel-layout #asset-agent-center .agent-payment-input-grid,
    #user-panel-layout #asset-agent-center .agent-payment-input-grid,
    #portal-modal #user-panel-layout #asset-agent-center .agent-invoice-totals,
    #user-panel-layout #asset-agent-center .agent-invoice-totals {
        grid-template-columns: 1fr !important;
    }

    #portal-modal #user-panel-layout #asset-agent-center .agent-checkout-section,
    #user-panel-layout #asset-agent-center .agent-checkout-section {
        padding: 0.85rem;
        border-radius: 16px;
    }

    #portal-modal #user-panel-layout #asset-agent-center .agent-checkout-section-head,
    #user-panel-layout #asset-agent-center .agent-checkout-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }

    #portal-modal #user-panel-layout #asset-agent-center .agent-invoice-row,
    #user-panel-layout #asset-agent-center .agent-invoice-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* Build binary organization summary: keep the team totals visible without pushing the tree down. */
#portal-modal #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child,
#user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child {
    display: grid !important;
    grid-template-columns: minmax(112px, 0.55fr) repeat(3, minmax(118px, 1fr)) !important;
    align-items: center !important;
    gap: 0.45rem !important;
    padding: 0.72rem 0.9rem !important;
    border-color: rgba(107, 228, 255, 0.32) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(246, 230, 167, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(8, 29, 61, 0.98), rgba(4, 13, 31, 0.99)) !important;
    box-shadow: 0 12px 28px rgba(0, 6, 18, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

#portal-modal #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child + .glass-card,
#user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child + .glass-card {
    margin-top: 0.8rem !important;
}

#portal-modal #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .sub-title,
#user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .sub-title {
    margin: 0 !important;
    color: #F8EAB4 !important;
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
    letter-spacing: 0.08rem !important;
}

#portal-modal #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .info-row,
#user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .info-row {
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    padding: 0.42rem 0.58rem !important;
    border: 1px solid rgba(107, 228, 255, 0.18) !important;
    border-radius: 12px !important;
    background: rgba(107, 228, 255, 0.055) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#portal-modal #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .info-row label,
#user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .info-row label {
    color: #C4D7EA !important;
    font-size: 0.62rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
}

#portal-modal #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .info-row span,
#user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .info-row span {
    color: #FFFFFF !important;
    font-size: 0.86rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 760px) {
    #portal-modal #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child,
    #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        padding: 0.68rem !important;
    }

    #portal-modal #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .sub-title,
    #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .sub-title {
        grid-column: 1 / -1;
    }

    #portal-modal #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .info-row,
    #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .info-row {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
        padding: 0.42rem 0.48rem !important;
    }

    #portal-modal #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .info-row span,
    #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .info-row span {
        text-align: left;
    }
}

@media (max-width: 420px) {
    #portal-modal #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child,
    #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child {
        grid-template-columns: 1fr !important;
        gap: 0.38rem !important;
    }

    #portal-modal #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .info-row,
    #user-panel-layout #tab-build #build-tree-panel > .glass-card:first-child .info-row {
        align-items: center !important;
        flex-direction: row !important;
    }
}

/* Points C group consolidation: keep the first-level card compact and move C1-C3 actions into the subpage. */
#portal-modal #user-panel-layout .c-points-overview-card,
#user-panel-layout .c-points-overview-card,
#portal-modal #user-panel-layout #asset-c-points .c-point-detail-card,
#user-panel-layout #asset-c-points .c-point-detail-card {
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 212, 255, 0.14), transparent 42%),
        linear-gradient(145deg, rgba(8, 25, 54, 0.98), rgba(4, 13, 30, 0.98)) !important;
    border-color: rgba(240, 205, 120, 0.34) !important;
    color: #F8FBFF !important;
}

#portal-modal #user-panel-layout .c-points-summary,
#user-panel-layout .c-points-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin-bottom: 1rem;
}

#portal-modal #user-panel-layout .c-points-summary div,
#user-panel-layout .c-points-summary div {
    min-width: 0;
    padding: 0.58rem 0.5rem;
    border: 1px solid rgba(240, 205, 120, 0.22);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    text-align: center;
}

#portal-modal #user-panel-layout .c-points-summary span,
#user-panel-layout .c-points-summary span {
    display: block;
    color: #9FC5E8;
    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1;
}

#portal-modal #user-panel-layout .c-points-summary strong,
#user-panel-layout .c-points-summary strong {
    display: block;
    margin-top: 0.32rem;
    color: #F8FBFF;
    font-size: clamp(0.82rem, 1.5vw, 1rem);
    font-weight: 950;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

#portal-modal #user-panel-layout #asset-c-points,
#user-panel-layout #asset-c-points {
    min-width: 0;
}

#portal-modal #user-panel-layout #asset-c-points .c-points-detail-grid,
#user-panel-layout #asset-c-points .c-points-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

#portal-modal #user-panel-layout #asset-c-points .c-point-detail-card .val,
#user-panel-layout #asset-c-points .c-point-detail-card .val {
    color: #F0CD78 !important;
}

@media (max-width: 900px) {
    #portal-modal #user-panel-layout #asset-c-points .c-points-detail-grid,
    #user-panel-layout #asset-c-points .c-points-detail-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 420px) {
    #portal-modal #user-panel-layout .c-points-summary,
    #user-panel-layout .c-points-summary {
        gap: 0.35rem;
    }

    #portal-modal #user-panel-layout .c-points-summary div,
    #user-panel-layout .c-points-summary div {
        padding: 0.5rem 0.35rem;
    }
}

/* Home PV and BU strength integrated card polish. */
#portal-modal #user-panel-layout #tab-home .pv-summary-card-integrated,
#user-panel-layout #tab-home .pv-summary-card-integrated {
    grid-column: 1 / -1;
}

#portal-modal #user-panel-layout #tab-home .pv-summary-card-integrated .pv-summary-head,
#user-panel-layout #tab-home .pv-summary-card-integrated .pv-summary-head {
    align-items: flex-start;
    margin-bottom: 0.9rem;
}

#portal-modal #user-panel-layout #tab-home .pv-summary-card-integrated .pv-side-status-note,
#user-panel-layout #tab-home .pv-summary-card-integrated .pv-side-status-note {
    max-width: 24rem;
    margin: 0;
    text-align: right;
}

#portal-modal #user-panel-layout #tab-home .pv-cycle-strength-grid,
#user-panel-layout #tab-home .pv-cycle-strength-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem;
}

#portal-modal #user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-card,
#user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-card {
    min-height: 0;
    gap: 0.75rem;
}

#portal-modal #user-panel-layout #tab-home .pv-cycle-pv-block,
#user-panel-layout #tab-home .pv-cycle-pv-block {
    min-width: 0;
    padding: 0.65rem 0.7rem;
    border: 1px solid rgba(107, 228, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
}

#portal-modal #user-panel-layout #tab-home .pv-cycle-pv-block span,
#user-panel-layout #tab-home .pv-cycle-pv-block span {
    display: block;
    color: #DCEFFF;
    font-size: 0.58rem;
    font-weight: 850;
    line-height: 1.25;
    text-transform: uppercase;
}

#portal-modal #user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-row,
#user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-row {
    gap: 0.32rem;
}

#portal-modal #user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-row strong,
#user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-row strong {
    font-size: clamp(1rem, 1.8vw, 1.28rem);
}

@media (max-width: 640px) {
    #portal-modal #user-panel-layout #tab-home .pv-summary-card-integrated,
    #user-panel-layout #tab-home .pv-summary-card-integrated {
        padding: 0.8rem !important;
    }

    #portal-modal #user-panel-layout #tab-home .pv-summary-card-integrated .pv-summary-head,
    #user-panel-layout #tab-home .pv-summary-card-integrated .pv-summary-head {
        gap: 0.35rem;
        margin-bottom: 0.65rem;
    }

    #portal-modal #user-panel-layout #tab-home .pv-summary-card-integrated .pv-side-status-note,
    #user-panel-layout #tab-home .pv-summary-card-integrated .pv-side-status-note {
        max-width: none;
        text-align: left;
        font-size: 0.6rem;
    }

    #portal-modal #user-panel-layout #tab-home .pv-cycle-strength-grid,
    #user-panel-layout #tab-home .pv-cycle-strength-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.42rem !important;
    }

    #portal-modal #user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-card,
    #user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-card {
        padding: 0.55rem !important;
        gap: 0.48rem !important;
    }

    #portal-modal #user-panel-layout #tab-home .pv-cycle-pv-block,
    #user-panel-layout #tab-home .pv-cycle-pv-block {
        padding: 0.48rem 0.42rem;
    }

    #portal-modal #user-panel-layout #tab-home .pv-cycle-pv-block span,
    #portal-modal #user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-card label,
    #portal-modal #user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-row span,
    #user-panel-layout #tab-home .pv-cycle-pv-block span,
    #user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-card label,
    #user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-row span {
        font-size: 0.5rem !important;
        line-height: 1.2 !important;
    }

    #portal-modal #user-panel-layout #tab-home .pv-cycle-strength-grid .pv-value,
    #user-panel-layout #tab-home .pv-cycle-strength-grid .pv-value {
        font-size: clamp(0.96rem, 5vw, 1.22rem) !important;
        white-space: nowrap;
    }

    #portal-modal #user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-row strong,
    #user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-row strong {
        font-size: clamp(0.82rem, 4.4vw, 1.02rem) !important;
    }
}

@media (max-width: 380px) {
    #portal-modal #user-panel-layout #tab-home .pv-cycle-strength-grid,
    #user-panel-layout #tab-home .pv-cycle-strength-grid {
        gap: 0.32rem !important;
    }

    #portal-modal #user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-card,
    #user-panel-layout #tab-home .pv-cycle-strength-grid .pv-side-status-card {
        padding: 0.45rem 0.38rem !important;
    }
}

/* User Panel in-app language selector. */
#portal-modal #user-panel-layout .user-panel-global-actions,
#user-panel-layout .user-panel-global-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 0;
    gap: 0.5rem;
}

#portal-modal #user-panel-layout .user-panel-lang-toggle,
#user-panel-layout .user-panel-lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 34px;
    max-width: 100%;
    gap: 0.16rem;
    padding: 0.24rem 0.28rem;
    border: 1px solid rgba(107, 228, 255, 0.26);
    border-radius: 999px;
    background: rgba(6, 16, 31, 0.58);
    color: #DCEFFF;
    box-shadow: 0 12px 24px rgba(0, 6, 18, 0.18), inset 0 0 0 1px rgba(255, 236, 180, 0.06);
}

#portal-modal #user-panel-layout .user-panel-lang-toggle .lang-item,
#user-panel-layout .user-panel-lang-toggle .lang-item {
    flex: 0 0 auto;
    min-width: 2rem;
    padding: 0.32rem 0.48rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #DCEFFF;
    font-size: 0.66rem;
    font-weight: 850;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

#portal-modal #user-panel-layout .user-panel-lang-toggle .lang-item.active,
#user-panel-layout .user-panel-lang-toggle .lang-item.active {
    background: linear-gradient(135deg, #F0CD78, #C5A059);
    border-color: rgba(255, 236, 180, 0.78);
    color: #071126;
    box-shadow: 0 8px 18px rgba(197, 160, 89, 0.26);
}

#portal-modal #user-panel-layout .user-panel-lang-toggle .lang-item:hover,
#portal-modal #user-panel-layout .user-panel-lang-toggle .lang-item:focus-visible,
#user-panel-layout .user-panel-lang-toggle .lang-item:hover,
#user-panel-layout .user-panel-lang-toggle .lang-item:focus-visible {
    border-color: rgba(107, 228, 255, 0.38);
    color: #FFFFFF;
    outline: none;
}

#portal-modal #user-panel-layout .user-panel-lang-toggle .lang-item.active:hover,
#portal-modal #user-panel-layout .user-panel-lang-toggle .lang-item.active:focus-visible,
#user-panel-layout .user-panel-lang-toggle .lang-item.active:hover,
#user-panel-layout .user-panel-lang-toggle .lang-item.active:focus-visible {
    color: #071126;
    border-color: rgba(255, 236, 180, 0.9);
}

#portal-modal #user-panel-layout .user-panel-lang-toggle .sep,
#user-panel-layout .user-panel-lang-toggle .sep {
    color: rgba(159, 197, 232, 0.55);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
}

@media (max-width: 640px) {
    #portal-modal #user-panel-layout .user-panel-global-header,
    #user-panel-layout .user-panel-global-header {
        gap: 0.65rem;
    }

    #portal-modal #user-panel-layout .user-panel-global-actions,
    #user-panel-layout .user-panel-global-actions {
        width: 100%;
        align-self: stretch;
        justify-content: space-between;
        gap: 0.75rem;
    }

    #portal-modal #user-panel-layout .user-panel-lang-toggle,
    #user-panel-layout .user-panel-lang-toggle {
        flex: 0 0 auto;
        min-width: 0;
        min-height: 30px;
        gap: 0.12rem;
        padding: 0.16rem 0.2rem;
        border-color: rgba(107, 228, 255, 0.18);
        background: rgba(6, 16, 31, 0.38);
        box-shadow: inset 0 0 0 1px rgba(255, 236, 180, 0.04);
    }

    #portal-modal #user-panel-layout .user-panel-lang-toggle .lang-item,
    #user-panel-layout .user-panel-lang-toggle .lang-item {
        min-width: 1.72rem;
        padding: 0.28rem 0.38rem;
        font-size: 0.62rem;
    }

    #portal-modal #user-panel-layout .user-panel-lang-toggle .sep,
    #user-panel-layout .user-panel-lang-toggle .sep {
        font-size: 0.58rem;
    }

    #portal-modal #user-panel-layout .user-panel-global-logout,
    #user-panel-layout .user-panel-global-logout {
        flex: 0 0 auto;
        padding-inline: 0.78rem !important;
    }
}

@media (max-width: 380px) {
    #portal-modal #user-panel-layout .user-panel-global-actions,
    #user-panel-layout .user-panel-global-actions {
        gap: 0.45rem;
    }

    #portal-modal #user-panel-layout .user-panel-lang-toggle .lang-item,
    #user-panel-layout .user-panel-lang-toggle .lang-item {
        min-width: 1.55rem;
        padding-inline: 0.32rem;
    }
}

/* Keep the health supplement mall editorial treatment above broad User Panel contrast overrides. */
#portal-modal #user-panel-layout #asset-yiyang-supplement-mall,
#user-panel-layout #asset-yiyang-supplement-mall {
    color: #f8fbff !important;
}

#portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-supplement-title,
#user-panel-layout #asset-yiyang-supplement-mall .yiyang-supplement-title {
    color: #fff8df !important;
    font-size: clamp(3rem, 5vw, 5rem) !important;
    font-weight: 950 !important;
    line-height: 1.02 !important;
}

#portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-supplement-title span,
#user-panel-layout #asset-yiyang-supplement-mall .yiyang-supplement-title span,
#portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-join-title span,
#user-panel-layout #asset-yiyang-supplement-mall .yiyang-join-title span {
    display: block !important;
    white-space: nowrap !important;
}

#portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-supplement-title-en,
#user-panel-layout #asset-yiyang-supplement-mall .yiyang-supplement-title-en {
    color: rgba(233,209,139,0.78) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

#portal-modal #user-panel-layout #asset-yiyang-supplement-mall h3,
#portal-modal #user-panel-layout #asset-yiyang-supplement-mall h4,
#user-panel-layout #asset-yiyang-supplement-mall h3,
#user-panel-layout #asset-yiyang-supplement-mall h4 {
    color: #fff8df !important;
    font-weight: 900 !important;
}

#portal-modal #user-panel-layout #asset-yiyang-supplement-mall p,
#portal-modal #user-panel-layout #asset-yiyang-supplement-mall small,
#user-panel-layout #asset-yiyang-supplement-mall p,
#user-panel-layout #asset-yiyang-supplement-mall small {
    color: rgba(247,242,223,0.72) !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

#portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-supplement-hero,
#portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-supplement-section,
#portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-supplement-join,
#user-panel-layout #asset-yiyang-supplement-mall .yiyang-supplement-hero,
#user-panel-layout #asset-yiyang-supplement-mall .yiyang-supplement-section,
#user-panel-layout #asset-yiyang-supplement-mall .yiyang-supplement-join {
    border-color: rgba(233,209,139,0.22) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.28) !important;
}

#portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-brand-card,
#portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-product-card,
#user-panel-layout #asset-yiyang-supplement-mall .yiyang-brand-card,
#user-panel-layout #asset-yiyang-supplement-mall .yiyang-product-card {
    border-color: rgba(233,209,139,0.15) !important;
    background: rgba(4,13,31,0.58) !important;
}

#portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-brand-grid,
#user-panel-layout #asset-yiyang-supplement-mall .yiyang-brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(1rem, 2vw, 1.45rem) !important;
}

#portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-brand-cover,
#user-panel-layout #asset-yiyang-supplement-mall .yiyang-brand-cover {
    min-height: clamp(300px, 28vw, 390px) !important;
}

#portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-product-grid,
#user-panel-layout #asset-yiyang-supplement-mall .yiyang-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(1rem, 2.2vw, 1.65rem) !important;
}

#portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-product-card,
#user-panel-layout #asset-yiyang-supplement-mall .yiyang-product-card {
    padding: clamp(0.76rem, 1.2vw, 1rem) !important;
}

#portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-product-visual,
#user-panel-layout #asset-yiyang-supplement-mall .yiyang-product-visual {
    height: clamp(430px, 34vw, 520px) !important;
}

@media (max-width: 768px) {
    #portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-supplement-title,
    #user-panel-layout #asset-yiyang-supplement-mall .yiyang-supplement-title {
        font-size: clamp(2.45rem, 10.5vw, 2.9rem) !important;
        line-height: 1.04 !important;
    }

    #portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-product-grid,
    #user-panel-layout #asset-yiyang-supplement-mall .yiyang-product-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    #portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-brand-grid,
    #user-panel-layout #asset-yiyang-supplement-mall .yiyang-brand-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    #portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-brand-cover,
    #user-panel-layout #asset-yiyang-supplement-mall .yiyang-brand-cover {
        min-height: clamp(300px, 78vw, 360px) !important;
    }

    #portal-modal #user-panel-layout #asset-yiyang-supplement-mall .yiyang-product-visual,
    #user-panel-layout #asset-yiyang-supplement-mall .yiyang-product-visual {
        height: clamp(330px, 86vw, 390px) !important;
    }
}