/*
 * LCN Black Market Layout
 * Layout, Grid, Components, UI Structure
 * Extracted from template-blackmarket.html
 */

/* ========================================
   Global Scrollbar
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-1);
    border-radius: 0;
}

::-webkit-scrollbar-thumb {
    background: #fbbf24;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: #f59e0b;
}

::-webkit-scrollbar-corner {
    background: var(--bg-1);
}

* {
    scrollbar-width: thin;
    scrollbar-color: #fbbf24 var(--bg-1);
}

body.light-theme ::-webkit-scrollbar-track {
    background: #f3f4f6;
}

body.light-theme ::-webkit-scrollbar-thumb {
    background: #d97706;
}

body.light-theme ::-webkit-scrollbar-thumb:hover {
    background: #b45309;
}

body.light-theme * {
    scrollbar-color: #d97706 #f3f4f6;
}

/* ========================================
   Container & Wrapper
   ======================================== */
.wrap {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ========================================
   Warning Top Bar
   ======================================== */
.warn-bar {
    padding: 6px 12px;
    text-align: center;
}

.warn-bar-secure {
    background: repeating-linear-gradient(45deg, #001a00, #001a00 10px, #0a0a0a 10px, #0a0a0a 20px);
    border-bottom: 2px solid #10b981;
}

.warn-bar-secure .warn-text {
    color: #10b981;
}

.warn-bar-warning {
    background: repeating-linear-gradient(45deg, #1a0a00, #1a0a00 10px, #0a0a0a 10px, #0a0a0a 20px);
    border-bottom: 2px solid #ef4444;
    animation: warn-pulse 2s ease-in-out infinite;
}

@keyframes warn-pulse {
    0%, 100% { background-color: transparent; box-shadow: none; }
    50% { background-color: rgba(239, 68, 68, 0.1); box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.2); }
}

.warn-bar-warning .warn-text {
    color: #ef4444;
    animation: warn-text-pulse 2s ease-in-out infinite;
}

@keyframes warn-text-pulse {
    0%, 100% { opacity: 1; text-shadow: none; }
    50% { opacity: 0.8; text-shadow: 0 0 8px rgba(239, 68, 68, 0.6); }
}

.warn-text {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

body.light-theme .warn-bar-secure {
    background: repeating-linear-gradient(45deg, #ecfdf5, #ecfdf5 10px, #f0fdf4 10px, #f0fdf4 20px);
    border-bottom-color: #059669;
}
body.light-theme .warn-bar-secure .warn-text { color: #059669; }

body.light-theme .warn-bar-warning {
    background: repeating-linear-gradient(45deg, #fef2f2, #fef2f2 10px, #fff1f2 10px, #fff1f2 20px);
    border-bottom-color: #dc2626;
    animation: warn-pulse-light 2s ease-in-out infinite;
}
@keyframes warn-pulse-light {
    0%, 100% { background-color: transparent; box-shadow: none; }
    50% { background-color: rgba(220, 38, 38, 0.08); box-shadow: inset 0 0 20px rgba(220, 38, 38, 0.15); }
}
body.light-theme .warn-bar-warning .warn-text { color: #dc2626; }

/* ========================================
   VIP Promo Bar
   ======================================== */
.vip-promo-bar {
    background: linear-gradient(90deg, rgba(212, 160, 23, 0.12) 0%, rgba(212, 160, 23, 0.06) 50%, rgba(212, 160, 23, 0.12) 100%);
    border-bottom: 1px solid rgba(212, 160, 23, 0.3);
    padding: 8px 16px;
    position: relative;
    overflow: hidden;
}
.vip-promo-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.08), transparent);
    animation: vip-shimmer 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes vip-shimmer {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}
.vip-promo-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}
.vip-promo-text {
    font-size: 12px;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.vip-promo-text strong {
    color: var(--gold);
}
.vip-promo-price {
    font-weight: 700;
    color: #10b981;
    font-size: 14px;
}
.vip-promo-next {
    color: var(--text-3);
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
    font-weight: 600;
}
.vip-promo-perks {
    color: var(--text-3);
    font-size: 11px;
}
.vip-promo-btn {
    padding: 5px 16px;
    background: var(--gold);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.vip-promo-btn:hover {
    opacity: 0.85;
}
.vip-promo-close {
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.15s;
}
.vip-promo-close:hover {
    color: var(--text);
}

/* VIP Promo - Light Theme */
body.light-theme .vip-promo-bar {
    background: linear-gradient(90deg, rgba(212, 160, 23, 0.08) 0%, rgba(212, 160, 23, 0.03) 50%, rgba(212, 160, 23, 0.08) 100%);
    border-bottom-color: rgba(212, 160, 23, 0.2);
}
body.light-theme .vip-promo-price {
    color: #059669;
}
body.light-theme .vip-promo-next {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.15);
    color: #dc2626;
}
body.light-theme .vip-promo-btn {
    background: #d4a017;
    color: #fff;
}

/* VIP Promo - Mobile */
@media (max-width: 768px) {
    .vip-promo-inner {
        gap: 10px;
    }
    .vip-promo-text {
        font-size: 11px;
        gap: 4px;
    }
    .vip-promo-perks {
        display: none;
    }
    .vip-promo-btn {
        padding: 4px 12px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .vip-promo-bar {
        padding: 6px 10px;
    }
    .vip-promo-next {
        display: none;
    }
}

/* ========================================
   Header
   ======================================== */
.header {
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-vault {
    width: 40px;
    height: 40px;
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--gold);
    position: relative;
}

.logo-vault::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid var(--gold);
    opacity: 0.5;
}

.logo-text {
    font-weight: 700;
    font-size: 18px;
    color: var(--gold);
    letter-spacing: 2px;
}

.logo-sub {
    font-size: 9px;
    color: var(--text-3);
    letter-spacing: 1px;
    margin-top: 2px;
}

/* ========================================
   Navigation
   ======================================== */
.nav {
    display: flex;
    align-items: center;
    gap: 0;
}

.nav-link {
    padding: 10px 14px;
    font-size: 11px;
    color: var(--text-2);
    border-left: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-link:last-child {
    border-right: 1px solid var(--border);
}

.nav-link:hover {
    color: var(--gold);
    background: var(--bg-2);
}

.nav-link.active {
    color: var(--gold);
    background: var(--bg-2);
}

/* Navigation Dropdown */
.nav-drop {
    position: relative;
    cursor: pointer;
}

.nav-drop:hover .nav-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nav-menu {
    position: absolute;
    top: 100%;
    left: -1px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 50;
}

.nav-menu-item {
    display: block;
    padding: 10px 14px;
    font-size: 10px;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-menu-item:last-child {
    border-bottom: none;
}

.nav-menu-item:hover {
    background: var(--bg-3);
    color: var(--gold);
}

/* ========================================
   Header Actions
   ======================================== */
.header-acts {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Buttons */
.btn {
    height: 32px;
    padding: 0 14px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.btn.gold {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
}

.btn.gold:hover {
    background: var(--gold-dim);
}

.btn.balance {
    color: var(--green);
    border-color: var(--green);
}

.user-tag {
    font-size: 9px;
    color: var(--text-3);
    padding-left: 10px;
    border-left: 1px solid var(--border);
}
.user-tag-gold {
    color: #f59e0b;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}
.user-tag-vip {
    font-weight: 700;
    background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: vip-rainbow 3s ease infinite;
    background-size: 200% auto;
}
@keyframes vip-rainbow {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

.mobile-btn {
    display: none;
    width: 32px;
    height: 32px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}

/* ========================================
   Main Content
   ======================================== */
main {
    padding: 20px 0;
}

/* ========================================
   Premium Banner
   ======================================== */
.premium-banner {
    background: var(--bg-1);
    border: 1px solid var(--gold);
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.banner-icon {
    font-size: 24px;
    color: var(--gold);
}

.banner-content {
    flex: 1;
}

.banner-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.banner-text {
    font-size: 11px;
    color: var(--text-2);
}

.banner-link {
    font-size: 10px;
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid var(--gold);
    padding: 8px 16px;
}

.banner-link:hover {
    background: var(--gold);
    color: #000;
}

/* ========================================
   Stats Vault
   ======================================== */
.stats-vault {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.stats-vault.vault-5 { grid-template-columns: repeat(5, 1fr); }
.stats-vault.vault-3 { grid-template-columns: repeat(3, 1fr); }
.stats-vault.vault-2 { grid-template-columns: repeat(2, 1fr); }
.stats-vault.vault-1 { grid-template-columns: 1fr; }

.vault-stat {
    position: relative;
    padding: 12px 14px 10px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    text-align: center;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.vault-label {
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 6px;
    font-weight: 600;
}

.vault-val {
    font-size: 28px;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.vault-sub {
    font-size: 10px;
    color: var(--text-3);
    margin-top: 5px;
    line-height: 1.4;
}

.vault-sub span:not(.idx-v-tag) {
    color: var(--green);
    font-weight: 600;
}

/* Light theme */
body.light-theme .vault-stat {
    background: #fff;
    border-color: #e5e7eb;
}
body.light-theme .vault-label {
    color: #6b7280;
}
body.light-theme .vault-sub {
    color: #9ca3af;
}

/* ========================================
   Index Page - Stats Vault (Premium)
   ======================================== */
.idx-vault {
    gap: 0;
    border: 1px solid var(--border);
    overflow: hidden;
}
.idx-vault .vault-stat {
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 12px 12px;
}
.idx-vault .vault-label {
    font-size: 9px;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
.idx-vault .vault-val {
    font-size: 22px;
}
.idx-vault .vault-sub {
    margin-top: 4px;
}
.idx-vault .vault-stat:last-child {
    border-right: none;
}

/* -- Shimmer animation -- */
@keyframes idxShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* -- Members block -- */
.idx-v-members {
    background:
        linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.04) 40%, rgba(59, 130, 246, 0.08) 50%, rgba(59, 130, 246, 0.04) 60%, transparent 100%),
        var(--bg-1);
    background-size: 200% 100%, 100% 100%;
    animation: idxShimmer 8s ease-in-out infinite;
    border-bottom: 2px solid rgba(59, 130, 246, 0.5);
}
.idx-v-members .vault-val {
    color: #e2e8f0;
    text-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}

/* Member tags */
.idx-v-tag {
    display: inline-block;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 3px 2px 0;
}
.idx-v-tag-gold {
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.2), rgba(234, 179, 8, 0.1));
    color: var(--gold);
    border: 1px solid rgba(212, 160, 23, 0.4);
    text-shadow: 0 0 8px rgba(212, 160, 23, 0.3);
}
.idx-v-tag-vip {
    position: relative;
    border: 1px solid rgba(139, 92, 246, 0.4);
    background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.idx-v-tag-vip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.12), rgba(139, 92, 246, 0.08));
    z-index: -1;
}
.idx-v-tag-new {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(52, 211, 153, 0.1));
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
    animation: idxNewPulse 2s ease-in-out infinite;
}
@keyframes idxNewPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* -- Sales block -- */
.idx-v-sales {
    background:
        linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.04) 40%, rgba(16, 185, 129, 0.08) 50%, rgba(16, 185, 129, 0.04) 60%, transparent 100%),
        var(--bg-1);
    background-size: 200% 100%, 100% 100%;
    animation: idxShimmer 8s ease-in-out infinite;
    animation-delay: -2s;
    border-bottom: 2px solid rgba(16, 185, 129, 0.5);
}
.idx-v-sales .vault-val {
    color: #34d399;
}
.idx-v-sales .vault-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Live pulse dot */
.idx-v-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
    animation: idxPulseDot 1.5s ease-in-out infinite;
}
@keyframes idxPulseDot {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px #10b981; }
    50% { opacity: 0.4; box-shadow: 0 0 12px #10b981; }
}

/* -- Bonus block -- */
.idx-v-bonus {
    background:
        linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.03) 40%, rgba(245, 158, 11, 0.07) 50%, rgba(245, 158, 11, 0.03) 60%, transparent 100%),
        var(--bg-1);
    background-size: 200% 100%, 100% 100%;
    animation: idxShimmer 8s ease-in-out infinite;
    animation-delay: -4s;
    border-bottom: 2px solid rgba(245, 158, 11, 0.5);
}
.idx-v-locked {
    color: #78716c !important;
    font-size: 14px !important;
}
.idx-v-claimed {
    color: var(--text-3) !important;
    font-size: 18px !important;
}
.idx-v-form {
    width: 100%;
}
.idx-v-claim-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}
.idx-v-claim-btn:hover {
    background: linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

/* -- 5-column index vault -- */
.idx-vault-5 { grid-template-columns: repeat(5, 1fr); }

/* -- Top P2P Sellers block -- */
.idx-v-topsellers {
    background:
        linear-gradient(90deg, transparent 0%, rgba(6, 182, 212, 0.03) 40%, rgba(6, 182, 212, 0.07) 50%, rgba(6, 182, 212, 0.03) 60%, transparent 100%),
        var(--bg-1);
    background-size: 200% 100%, 100% 100%;
    animation: idxShimmer 8s ease-in-out infinite;
    animation-delay: -5s;
    border-bottom: 2px solid rgba(6, 182, 212, 0.5);
}
.idx-ts-list {
    width: 100%;
    margin-top: 4px;
    text-align: left;
}
.idx-ts-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.idx-ts-row:last-child { border-bottom: none; }
.idx-ts-rank {
    font-size: 11px;
    font-weight: 800;
    min-width: 18px;
    letter-spacing: -0.5px;
}
.idx-ts-row:nth-child(1) .idx-ts-rank {
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}
.idx-ts-row:nth-child(2) .idx-ts-rank {
    color: #94a3b8;
    text-shadow: 0 0 6px rgba(148, 163, 184, 0.3);
}
.idx-ts-row:nth-child(3) .idx-ts-rank {
    color: #d97706;
    text-shadow: 0 0 6px rgba(217, 119, 6, 0.3);
}
.idx-ts-name {
    font-size: 11px;
    font-weight: 600;
    color: #f8fafc;
    text-decoration: none;
    transition: color 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.idx-ts-name:hover {
    color: #22d3ee;
    text-decoration: underline;
}
.idx-ts-rank-label {
    font-size: 9px;
    font-style: italic;
    white-space: nowrap;
    opacity: 0.85;
}
.idx-ts-rating {
    font-size: 10px;
    color: var(--text-3);
    white-space: nowrap;
    margin-left: auto;
}
.idx-ts-star {
    color: #fbbf24;
    font-size: 11px;
}
.idx-ts-reviews {
    font-size: 9px;
    color: var(--text-3);
    font-style: italic;
    opacity: 0.7;
}
.idx-ts-new {
    font-size: 9px;
    color: var(--text-3);
    font-style: italic;
}
.idx-ts-become {
    font-size: 10px;
    color: rgba(6, 182, 212, 0.7);
    text-decoration: none;
    transition: color 0.2s;
}
.idx-ts-become:hover {
    color: #22d3ee;
    text-decoration: underline;
}
.idx-ts-empty .idx-ts-rank {
    opacity: 0.4;
}

/* -- Profile / Your Stats block -- */
.idx-v-profile {
    background:
        linear-gradient(90deg, transparent 0%, rgba(168, 85, 247, 0.03) 40%, rgba(168, 85, 247, 0.07) 50%, rgba(168, 85, 247, 0.03) 60%, transparent 100%),
        var(--bg-1);
    background-size: 200% 100%, 100% 100%;
    animation: idxShimmer 8s ease-in-out infinite;
    animation-delay: -6s;
    border-bottom: 2px solid rgba(168, 85, 247, 0.5);
}
.idx-v-profile .vault-user-item {
    border-color: rgba(168, 85, 247, 0.12);
}

/* ---- Light theme overrides for index vault ---- */
body.light-theme .idx-vault {
    border-color: #e5e7eb;
}
body.light-theme .idx-vault .vault-stat {
    border-right-color: rgba(0, 0, 0, 0.06);
}

body.light-theme .idx-v-members {
    background:
        linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.05) 40%, rgba(59, 130, 246, 0.1) 50%, rgba(59, 130, 246, 0.05) 60%, transparent 100%),
        #fff;
    background-size: 200% 100%, 100% 100%;
    border-bottom-color: rgba(59, 130, 246, 0.6);
}
body.light-theme .idx-v-members .vault-val {
    color: #1e293b;
    text-shadow: none;
}
body.light-theme .idx-v-tag-gold {
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.12), rgba(234, 179, 8, 0.06));
    color: #b45309;
    border-color: rgba(212, 160, 23, 0.35);
    text-shadow: none;
}
body.light-theme .idx-v-tag-vip {
    background: linear-gradient(90deg, #db2777, #7c3aed, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border-color: rgba(139, 92, 246, 0.35);
}
body.light-theme .idx-v-tag-vip::before {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(139, 92, 246, 0.05));
}
body.light-theme .idx-v-tag-new {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.05));
    color: #059669;
    border-color: rgba(16, 185, 129, 0.3);
    text-shadow: none;
}

body.light-theme .idx-v-sales {
    background:
        linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.05) 40%, rgba(16, 185, 129, 0.1) 50%, rgba(16, 185, 129, 0.05) 60%, transparent 100%),
        #fff;
    background-size: 200% 100%, 100% 100%;
    border-bottom-color: rgba(16, 185, 129, 0.6);
}
body.light-theme .idx-v-sales .vault-val {
    color: #059669;
}
body.light-theme .idx-v-pulse {
    background: #059669;
    box-shadow: 0 0 6px #059669;
}

body.light-theme .idx-v-bonus {
    background:
        linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.04) 40%, rgba(245, 158, 11, 0.09) 50%, rgba(245, 158, 11, 0.04) 60%, transparent 100%),
        #fff;
    background-size: 200% 100%, 100% 100%;
    border-bottom-color: rgba(245, 158, 11, 0.6);
}
body.light-theme .idx-v-locked {
    color: #a3a3a3 !important;
}
body.light-theme .idx-v-claimed {
    color: #6b7280 !important;
}

body.light-theme .idx-v-topsellers {
    background:
        linear-gradient(90deg, transparent 0%, rgba(6, 182, 212, 0.04) 40%, rgba(6, 182, 212, 0.09) 50%, rgba(6, 182, 212, 0.04) 60%, transparent 100%),
        #fff;
    background-size: 200% 100%, 100% 100%;
    border-bottom-color: rgba(6, 182, 212, 0.6);
}
body.light-theme .idx-ts-row {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light-theme .idx-ts-name {
    color: #1e293b;
}
body.light-theme .idx-ts-name:hover {
    color: #0891b2;
}
body.light-theme .idx-ts-row:nth-child(1) .idx-ts-rank {
    color: #ca8a04;
    text-shadow: none;
}
body.light-theme .idx-ts-row:nth-child(2) .idx-ts-rank {
    color: #64748b;
    text-shadow: none;
}
body.light-theme .idx-ts-row:nth-child(3) .idx-ts-rank {
    color: #b45309;
    text-shadow: none;
}
body.light-theme .idx-ts-become {
    color: rgba(8, 145, 178, 0.7);
}
body.light-theme .idx-ts-become:hover {
    color: #0891b2;
}

body.light-theme .idx-v-profile {
    background:
        linear-gradient(90deg, transparent 0%, rgba(168, 85, 247, 0.04) 40%, rgba(168, 85, 247, 0.09) 50%, rgba(168, 85, 247, 0.04) 60%, transparent 100%),
        #fff;
    background-size: 200% 100%, 100% 100%;
    border-bottom-color: rgba(168, 85, 247, 0.6);
}
body.light-theme .idx-v-profile .vault-user-item {
    border-color: rgba(168, 85, 247, 0.12);
}

/* ---- Index vault responsive ---- */
@media (max-width: 1280px) {
    .idx-vault-5 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 1024px) {
    .idx-vault {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .idx-vault .vault-stat {
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }
    body.light-theme .idx-vault .vault-stat {
        border-bottom-color: rgba(0, 0, 0, 0.06);
    }
}
@media (max-width: 580px) {
    .idx-vault {
        grid-template-columns: 1fr !important;
    }
    .idx-vault .vault-stat {
        border-right: none;
    }
}

/* ========================================
   Layout Grid
   ======================================== */
.layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
}

/* ========================================
   Panel Component
   ======================================== */
.panel {
    background: var(--bg-1);
    border: 1px solid var(--border);
    margin-bottom: 20px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}

.panel-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold);
}

.panel-link {
    font-size: 11px;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    transition: all 0.2s ease;
    text-decoration: none;
}

.panel-link:hover {
    color: #fff;
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.4);
    transform: translateX(2px);
}

body.light-theme .panel-link {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.15);
}

body.light-theme .panel-link:hover {
    color: #059669;
    background: rgba(16, 185, 129, 0.15);
}

/* ========================================
   Featured Inventory Panel
   Compact, terminal-styled header with live
   stats, row accent hover, and footer CTA.
   Tailored to LCN brutalist monospace UI.
   ======================================== */
.panel-featured {
    position: relative;
    border-color: rgba(212, 160, 23, 0.22);
    background: var(--bg-1);
}

.panel-featured::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 140px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold) 0%, rgba(212, 160, 23, 0) 100%);
    pointer-events: none;
}

/* Compact header row */
.inv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 16px 11px 14px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    border-left: 2px solid var(--gold);
    flex-wrap: wrap;
}

.inv-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--gold);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
    transition: color 0.2s ease;
    min-width: 0;
}

.inv-title:hover {
    color: #fff;
    text-decoration: none;
}

.inv-title-dot {
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
    animation: inv-pulse 2.2s ease-out infinite;
    flex-shrink: 0;
}

@keyframes inv-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.inv-title-sub {
    color: var(--text-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.65;
}

.inv-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inv-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
    position: relative;
}

.inv-stat + .inv-stat::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background: var(--border);
}

.inv-stat-val {
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    font-family: 'Anonymous Pro', monospace;
}

.inv-stat-fresh .inv-stat-val {
    color: #10b981;
}

.inv-stat-auto {
    color: var(--text-2);
    opacity: 0.75;
}

.inv-stat-tick {
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #10b981;
    border-radius: 50%;
    margin-right: 3px;
    animation: inv-tick 1.6s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes inv-tick {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.95; }
}

/* Product rows inside featured panel - gold accent hover */
.panel-featured .prod {
    border-left: 2px solid transparent;
    transition: background 0.18s ease, border-left-color 0.18s ease;
}

.panel-featured .prod:hover {
    background: rgba(212, 160, 23, 0.035);
    border-left-color: var(--gold);
}

/* Footer CTA band */
.inv-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 16px;
    border-top: 1px solid rgba(212, 160, 23, 0.18);
    background: linear-gradient(180deg, transparent 0%, rgba(212, 160, 23, 0.05) 100%);
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.inv-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.22), transparent);
    transition: left 0.7s ease;
    pointer-events: none;
}

.inv-footer:hover {
    color: #fff;
    background: linear-gradient(180deg, transparent 0%, rgba(212, 160, 23, 0.14) 100%);
    border-top-color: var(--gold);
    text-decoration: none;
}

.inv-footer:hover::before {
    left: 100%;
}

.inv-footer-count {
    color: var(--gold);
    font-weight: 800;
    margin: 0 2px;
}

.inv-footer:hover .inv-footer-count {
    color: #fff;
}

.inv-footer-arrow {
    display: inline-block;
    font-weight: 900;
    transition: transform 0.2s ease;
}

.inv-footer:hover .inv-footer-arrow {
    transform: translateX(4px);
}

/* Light theme */
body.light-theme .panel-featured {
    border-color: rgba(212, 160, 23, 0.3);
    background: #fff;
}

body.light-theme .panel-featured::before {
    background: linear-gradient(90deg, #b45309 0%, rgba(180, 83, 9, 0) 100%);
}

body.light-theme .inv-header {
    background: rgba(212, 160, 23, 0.04);
    border-left-color: #b45309;
}

body.light-theme .inv-title {
    color: #b45309;
}

body.light-theme .inv-title:hover {
    color: #78350f;
}

body.light-theme .inv-title-sub {
    color: #737373;
}

body.light-theme .inv-stats {
    color: #737373;
}

body.light-theme .inv-stat-val {
    color: #b45309;
}

body.light-theme .inv-stat-fresh .inv-stat-val {
    color: #059669;
}

body.light-theme .inv-stat + .inv-stat::before {
    background: #e5e5e5;
}

body.light-theme .panel-featured .prod:hover {
    background: rgba(212, 160, 23, 0.05);
    border-left-color: #b45309;
}

body.light-theme .inv-footer {
    color: #b45309;
    border-top-color: rgba(212, 160, 23, 0.22);
    background: linear-gradient(180deg, transparent 0%, rgba(212, 160, 23, 0.06) 100%);
}

body.light-theme .inv-footer:hover {
    color: #78350f;
    background: linear-gradient(180deg, transparent 0%, rgba(212, 160, 23, 0.14) 100%);
    border-top-color: #b45309;
}

body.light-theme .inv-footer-count {
    color: #b45309;
}

body.light-theme .inv-footer:hover .inv-footer-count {
    color: #78350f;
}

body.light-theme .inv-footer::before {
    background: linear-gradient(90deg, transparent, rgba(180, 83, 9, 0.18), transparent);
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .inv-header {
        padding: 10px 14px 10px 12px;
        gap: 10px;
        row-gap: 8px;
    }
    .inv-title {
        font-size: 11px;
        letter-spacing: 1.2px;
    }
    .inv-title-sub {
        display: none;
    }
    .inv-stats {
        gap: 12px;
        font-size: 9px;
    }
    .inv-stat-val {
        font-size: 11px;
    }
}

/* Responsive - Small mobile */
@media (max-width: 480px) {
    .inv-header {
        justify-content: flex-start;
    }
    .inv-stats {
        width: 100%;
        justify-content: flex-start;
        gap: 12px;
        padding-top: 2px;
        border-top: 1px dashed var(--border);
        margin-top: 4px;
        padding-top: 8px;
    }
    .inv-stat-auto {
        display: none;
    }
    .inv-footer {
        padding: 12px 14px;
        font-size: 10.5px;
        letter-spacing: 1.1px;
    }
}

body.light-theme .inv-stats {
    border-top-color: #e5e5e5;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .inv-title-dot,
    .inv-stat-tick {
        animation: none;
    }
    .inv-footer::before,
    .inv-footer-arrow,
    .panel-featured .prod {
        transition: none;
    }
}

/* ========================================
   Live Orders Bar - Green Live Accent
   Unique: horizontal ticker, green live pulse,
   dim mono subtitle, minimal compact head.
   ======================================== */
.live-orders-bar {
    border-left: 2px solid rgba(16, 185, 129, 0.85);
    padding-left: 14px;
}

.live-orders-bar-head .lob-title {
    color: #10b981;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
}

.live-orders-bar-head .lob-sub {
    color: var(--text-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.65;
    text-transform: uppercase;
}

.live-orders-bar-head .lob-count {
    font-size: 10px;
    color: #10b981;
    padding: 2px 7px;
    border: 1px solid rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.08);
    font-weight: 700;
    font-family: 'Anonymous Pro', monospace;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

body.light-theme .live-orders-bar {
    border-left-color: #059669;
}

body.light-theme .live-orders-bar-head .lob-title {
    color: #059669;
}

body.light-theme .live-orders-bar-head .lob-count {
    color: #059669;
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.25);
}

/* ========================================
   Side Panel - Exclusive Offer (SOF)
   Unique: amber/gold promo accent, limited
   time badge, claim offer CTA footer.
   ======================================== */
.sof-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px 11px 12px;
    background: rgba(212, 160, 23, 0.05);
    border-bottom: 1px solid rgba(212, 160, 23, 0.18);
    border-left: 2px solid var(--gold);
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.sof-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
    min-width: 0;
}

.sof-title-dot {
    width: 7px;
    height: 7px;
    background: #fbbf24;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.55);
    animation: sof-pulse 2.2s ease-out infinite;
    flex-shrink: 0;
}

@keyframes sof-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(251, 191, 36, 0); }
    100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}

.sof-title-sub {
    color: var(--text-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.65;
    text-transform: uppercase;
}

.sof-badge {
    font-size: 9px;
    color: #fbbf24;
    font-weight: 700;
    padding: 3px 7px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
    white-space: nowrap;
}

.sof-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid rgba(212, 160, 23, 0.18);
    background: linear-gradient(180deg, transparent 0%, rgba(212, 160, 23, 0.06) 100%);
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.sof-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.22), transparent);
    transition: left 0.7s ease;
    pointer-events: none;
}

.sof-footer:hover {
    color: #fff;
    background: linear-gradient(180deg, transparent 0%, rgba(212, 160, 23, 0.14) 100%);
    border-top-color: var(--gold);
    text-decoration: none;
}

.sof-footer:hover::before {
    left: 100%;
}

.sof-footer-arrow {
    display: inline-block;
    font-weight: 900;
    transition: transform 0.2s ease;
}

.sof-footer:hover .sof-footer-arrow {
    transform: translateX(4px);
}

/* SOF - Light theme */
body.light-theme .sof-header {
    background: rgba(212, 160, 23, 0.04);
    border-left-color: #b45309;
    border-bottom-color: rgba(212, 160, 23, 0.2);
}

body.light-theme .sof-title {
    color: #b45309;
}

body.light-theme .sof-title-sub {
    color: #737373;
}

body.light-theme .sof-badge {
    color: #d97706;
    background: rgba(212, 160, 23, 0.08);
    border-color: rgba(212, 160, 23, 0.3);
}

body.light-theme .sof-footer {
    color: #b45309;
    border-top-color: rgba(212, 160, 23, 0.2);
    background: linear-gradient(180deg, transparent 0%, rgba(212, 160, 23, 0.06) 100%);
}

body.light-theme .sof-footer:hover {
    color: #78350f;
    background: linear-gradient(180deg, transparent 0%, rgba(212, 160, 23, 0.14) 100%);
    border-top-color: #b45309;
}

body.light-theme .sof-footer::before {
    background: linear-gradient(90deg, transparent, rgba(180, 83, 9, 0.18), transparent);
}

/* ========================================
   Side Panel - News (SNN)
   Unique: blue/cyan information accent,
   news item left-border hover, read-all CTA.
   ======================================== */
.snn-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px 11px 12px;
    background: rgba(59, 130, 246, 0.05);
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
    border-left: 2px solid #3b82f6;
    flex-wrap: wrap;
}

.snn-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #60a5fa;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
    transition: color 0.2s ease;
    min-width: 0;
}

.snn-title:hover {
    color: #fff;
    text-decoration: none;
}

.snn-title-dot {
    width: 7px;
    height: 7px;
    background: #3b82f6;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);
    animation: snn-pulse 2.4s ease-out infinite;
    flex-shrink: 0;
}

@keyframes snn-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.snn-title-sub {
    color: var(--text-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.65;
    text-transform: uppercase;
}

.snn-count {
    font-size: 10px;
    color: #60a5fa;
    padding: 2px 7px;
    border: 1px solid rgba(59, 130, 246, 0.28);
    background: rgba(59, 130, 246, 0.08);
    font-weight: 700;
    font-family: 'Anonymous Pro', monospace;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

.snn-list .news {
    border-left: 2px solid transparent;
    transition: border-left-color 0.15s ease, background 0.15s ease;
}

.snn-list .news:hover {
    border-left-color: #3b82f6;
    background: rgba(59, 130, 246, 0.04);
}

.snn-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid rgba(59, 130, 246, 0.18);
    background: linear-gradient(180deg, transparent 0%, rgba(59, 130, 246, 0.05) 100%);
    color: #60a5fa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.snn-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.22), transparent);
    transition: left 0.7s ease;
    pointer-events: none;
}

.snn-footer:hover {
    color: #fff;
    background: linear-gradient(180deg, transparent 0%, rgba(59, 130, 246, 0.14) 100%);
    border-top-color: #3b82f6;
    text-decoration: none;
}

.snn-footer:hover::before {
    left: 100%;
}

.snn-footer-arrow {
    display: inline-block;
    font-weight: 900;
    transition: transform 0.2s ease;
}

.snn-footer:hover .snn-footer-arrow {
    transform: translateX(4px);
}

/* SNN - Light theme */
body.light-theme .snn-header {
    background: rgba(59, 130, 246, 0.04);
    border-bottom-color: rgba(59, 130, 246, 0.2);
    border-left-color: #2563eb;
}

body.light-theme .snn-title {
    color: #2563eb;
}

body.light-theme .snn-title:hover {
    color: #1d4ed8;
}

body.light-theme .snn-title-sub {
    color: #737373;
}

body.light-theme .snn-count {
    color: #2563eb;
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.28);
}

body.light-theme .snn-list .news:hover {
    background: rgba(59, 130, 246, 0.05);
    border-left-color: #2563eb;
}

body.light-theme .snn-footer {
    color: #2563eb;
    border-top-color: rgba(59, 130, 246, 0.2);
    background: linear-gradient(180deg, transparent 0%, rgba(59, 130, 246, 0.06) 100%);
}

body.light-theme .snn-footer:hover {
    color: #1d4ed8;
    background: linear-gradient(180deg, transparent 0%, rgba(59, 130, 246, 0.14) 100%);
    border-top-color: #2563eb;
}

body.light-theme .snn-footer::before {
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.18), transparent);
}

/* Shared responsive - SOF/SNN */
@media (max-width: 768px) {
    .sof-header,
    .snn-header {
        padding: 10px 12px 10px 10px;
    }
    .sof-title,
    .snn-title {
        font-size: 11px;
        letter-spacing: 1.1px;
    }
    .sof-badge,
    .snn-count {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .sof-title-sub,
    .snn-title-sub {
        display: none;
    }
}

/* Reduce motion - LOB/SOF/SNN */
@media (prefers-reduced-motion: reduce) {
    .sof-title-dot,
    .snn-title-dot {
        animation: none;
    }
    .sof-footer::before,
    .snn-footer::before,
    .sof-footer-arrow,
    .snn-footer-arrow,
    .snn-list .news {
        transition: none;
    }
}

/* ========================================
   Live Auctions Bar - Red Urgency Accent
   Unique: red stripe for bidding urgency,
   dim mono subtitle, count chip, CTA button.
   ======================================== */
.live-auctions-bar {
    border-left: 2px solid rgba(239, 68, 68, 0.75);
    padding-left: 18px;
}

.live-auctions-bar::before {
    background: linear-gradient(90deg, #ef4444, #f97316, #ef4444);
}

.live-auctions-bar-head .live-auc-pulse {
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    animation-name: lab-pulse;
}

@keyframes lab-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.live-auctions-bar-head .lab-title {
    color: #ef4444;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
}

.live-auctions-bar-head .lab-sub {
    color: var(--text-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.65;
    text-transform: uppercase;
}

.live-auctions-bar-head .lab-count {
    font-size: 10px;
    color: #ef4444;
    padding: 2px 7px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.08);
    font-weight: 700;
    font-family: 'Anonymous Pro', monospace;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.live-auctions-bar-head .lab-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
    padding: 6px 12px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.06);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.live-auctions-bar-head .lab-all:hover {
    color: #fff;
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.55);
    text-decoration: none;
}

.live-auctions-bar-head .lab-all-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
    font-weight: 900;
}

.live-auctions-bar-head .lab-all:hover .lab-all-arrow {
    transform: translateX(3px);
}

/* LAB - Light theme */
body.light-theme .live-auctions-bar {
    border-left-color: #dc2626;
}

body.light-theme .live-auctions-bar-head .lab-title {
    color: #dc2626;
}

body.light-theme .live-auctions-bar-head .lab-count {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.07);
    border-color: rgba(239, 68, 68, 0.3);
}

body.light-theme .live-auctions-bar-head .lab-all {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.3);
}

body.light-theme .live-auctions-bar-head .lab-all:hover {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.5);
}

/* ========================================
   Flash Sale Block - Orange Fire Accent
   Unique: orange stripe, pulsing fire dot,
   inline timer in mono style.
   ======================================== */
.flash-sale-block {
    border-left: 2px solid rgba(249, 115, 22, 0.85);
    padding-left: 14px;
}

.fs-block-header .fsb-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.fs-block-header .fsb-dot {
    width: 7px;
    height: 7px;
    background: #f97316;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55);
    animation: fsb-pulse 1.8s ease-out infinite;
    flex-shrink: 0;
}

@keyframes fsb-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(249, 115, 22, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

.fs-block-header .fsb-title {
    color: #f97316;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
}

.fs-block-header .fsb-sub {
    color: var(--text-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.65;
    text-transform: uppercase;
}

.fs-block-header .fsb-badge {
    font-size: 9px;
    color: #f97316;
    font-weight: 700;
    padding: 3px 7px;
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.3);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
    background-image: none;
    color: #f97316;
    border-radius: 0;
}

/* FSB - Light theme */
body.light-theme .flash-sale-block {
    border-left-color: #ea580c;
}

body.light-theme .fs-block-header .fsb-title {
    color: #ea580c;
}

body.light-theme .fs-block-header .fsb-badge {
    color: #c2410c;
    background: rgba(249, 115, 22, 0.08);
    border-color: rgba(249, 115, 22, 0.3);
}

/* ========================================
   Stats Vault Master Header (SVL)
   Unique: purple analytics accent, spans
   all vault columns.
   ======================================== */
.idx-vault .svl-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px 10px 12px;
    background: rgba(139, 92, 246, 0.05);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    border-left: 2px solid #8b5cf6;
    flex-wrap: wrap;
}

.svl-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #a78bfa;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
    min-width: 0;
}

.svl-title-dot {
    width: 7px;
    height: 7px;
    background: #8b5cf6;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.55);
    animation: svl-pulse 2.6s ease-out infinite;
    flex-shrink: 0;
}

@keyframes svl-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(139, 92, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}

.svl-title-sub {
    color: var(--text-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.65;
    text-transform: uppercase;
}

.svl-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.svl-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    color: #a78bfa;
    font-weight: 700;
    padding: 3px 7px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.28);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
    white-space: nowrap;
}

.svl-badge-tick {
    width: 5px;
    height: 5px;
    background: #8b5cf6;
    border-radius: 50%;
    animation: svl-tick 1.5s ease-in-out infinite;
}

@keyframes svl-tick {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* SVL - Light theme */
body.light-theme .idx-vault .svl-header {
    background: rgba(139, 92, 246, 0.04);
    border-bottom-color: rgba(139, 92, 246, 0.22);
    border-left-color: #7c3aed;
}

body.light-theme .svl-title {
    color: #7c3aed;
}

body.light-theme .svl-title-sub {
    color: #737373;
}

body.light-theme .svl-badge {
    color: #7c3aed;
    background: rgba(139, 92, 246, 0.06);
    border-color: rgba(139, 92, 246, 0.28);
}

/* Responsive - LAB/FSB/SVL */
@media (max-width: 768px) {
    .live-auctions-bar {
        padding-left: 14px;
    }
    .live-auctions-bar-head .lab-title,
    .fs-block-header .fsb-title,
    .svl-title {
        font-size: 11px;
        letter-spacing: 1.1px;
    }
    .live-auctions-bar-head .lab-all,
    .fs-block-header .fsb-badge,
    .svl-badge {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .live-auctions-bar-head .lab-sub,
    .fs-block-header .fsb-sub,
    .svl-title-sub {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-auctions-bar-head .live-auc-pulse,
    .fs-block-header .fsb-dot,
    .svl-title-dot,
    .svl-badge-tick {
        animation: none;
    }
    .live-auctions-bar-head .lab-all-arrow {
        transition: none;
    }
}

/* ========================================
   Universal Corner Accents
   Short top-left color fade on every
   block matching its unique accent.
   ======================================== */
.live-orders-bar,
.flash-sale-block,
.idx-vault,
.side-panel-news,
.side-panel-offer {
    position: relative;
}

.live-orders-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 2px;
    background: linear-gradient(90deg, #10b981 0%, rgba(16, 185, 129, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

.flash-sale-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 2px;
    background: linear-gradient(90deg, #f97316 0%, rgba(249, 115, 22, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

/* Override the existing full-width animated top border with a 140px corner fade */
.live-auctions-bar::before {
    width: 140px !important;
    background: linear-gradient(90deg, #ef4444 0%, rgba(239, 68, 68, 0) 100%) !important;
    animation: none !important;
    background-size: auto !important;
}

.idx-vault::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 2px;
    background: linear-gradient(90deg, #8b5cf6 0%, rgba(139, 92, 246, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

.side-panel-news::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6 0%, rgba(59, 130, 246, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

.side-panel-offer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold) 0%, rgba(212, 160, 23, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

/* ========================================
   idx-alerts: simple flex column container.
   Each alert is its own card with unique
   variant accent. Per-card styling lives
   in the FINAL OVERRIDES section at end.
   ======================================== */
.idx-alerts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.idx-alert-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-family: 'Anonymous Pro', monospace;
    margin-bottom: 3px;
}

.idx-alert-text {
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-2);
}

/* Unified CTA button style for all alerts */
.idx-alert-action {
    font-family: 'Anonymous Pro', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-2);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0;
}

.idx-alert-action:hover {
    transform: translateX(2px);
    text-decoration: none;
}

/* Variant left stripes + matching CTA hover */
.idx-alert-warn { border-left-color: #f59e0b; }

.idx-alert-premium { border-left-color: #d4a017; }
.idx-action-premium {
    color: #d4a017;
    border-color: rgba(212, 160, 23, 0.4);
    background: rgba(212, 160, 23, 0.08);
}
.idx-action-premium:hover {
    color: #fff;
    background: rgba(212, 160, 23, 0.25);
    border-color: #d4a017;
}

.idx-alert-telegram { border-left-color: #3b82f6; }
.idx-action-tg, .idx-action-rss {
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.08);
}
.idx-action-tg:hover, .idx-action-rss:hover {
    color: #fff;
    background: rgba(59, 130, 246, 0.25);
    border-color: #3b82f6;
}

.idx-alert-wheel { border-left-color: #10b981; }
.idx-action-wheel {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.08);
}
.idx-action-wheel:hover {
    color: #fff;
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
}

.idx-alert-newuser { border-left-color: #10b981; }

.idx-alert-security { border-left-color: #ef4444; }
.idx-action-sec {
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
}
.idx-action-sec:hover {
    color: #fff;
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
}

.idx-alert-notify { border-left-color: #8b5cf6; }
.idx-action-notify {
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.08);
}
.idx-action-notify:hover {
    color: #fff;
    background: rgba(139, 92, 246, 0.25);
    border-color: #8b5cf6;
}

.idx-alert-vip { border-left-color: #ec4899; }
.idx-action-vip {
    color: #f472b6;
    border-color: rgba(236, 72, 153, 0.4);
    background: rgba(236, 72, 153, 0.08);
}
.idx-action-vip:hover {
    color: #fff;
    background: rgba(236, 72, 153, 0.25);
    border-color: #ec4899;
}

/* Light theme - idx-alerts CTA tweaks */
body.light-theme .idx-action-premium { color: #92700c; }
body.light-theme .idx-action-premium:hover { color: #fff; }
body.light-theme .idx-action-tg,
body.light-theme .idx-action-rss { color: #2563eb; }
body.light-theme .idx-action-wheel { color: #059669; }
body.light-theme .idx-action-wheel:hover { color: #fff; }
body.light-theme .idx-action-sec { color: #dc2626; }
body.light-theme .idx-action-sec:hover { color: #fff; }
body.light-theme .idx-action-notify { color: #7c3aed; }
body.light-theme .idx-action-notify:hover { color: #fff; }
body.light-theme .idx-action-vip { color: #be185d; }
body.light-theme .idx-action-vip:hover { color: #fff; }

@media (max-width: 480px) {
    .idx-alert {
        padding: 10px 12px;
        gap: 10px;
    }
    .idx-alert-title { font-size: 10.5px; letter-spacing: 1px; }
    .idx-alert-text { font-size: 10.5px; }
    .idx-alert-action { padding: 6px 10px; font-size: 9.5px; }
}

/* ========================================
   Navigation - Elegant Underline Reveal
   Monospace typography, animated gold
   underline on hover/active, dropdown
   gold top accent + left stripe on items.
   ======================================== */
.nav-link {
    font-family: 'Anonymous Pro', monospace;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 1.4px;
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width 0.25s ease;
    transform: translateX(-50%);
    pointer-events: none;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 70%;
}

.nav-menu {
    border-top: 2px solid var(--gold);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    min-width: 180px;
}

.nav-menu-item {
    position: relative;
    font-family: 'Anonymous Pro', monospace;
    font-weight: 600;
    letter-spacing: 1.1px;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.18s ease;
    overflow: hidden;
}

.nav-menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--gold);
    transition: width 0.2s ease;
    pointer-events: none;
}

.nav-menu-item:hover::before {
    width: 2px;
}

.nav-menu-item:hover {
    padding-left: 18px;
}

/* Light theme - nav */
body.light-theme .nav-menu {
    border-top-color: #b45309;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

body.light-theme .nav-menu-item::before {
    background: #b45309;
}

body.light-theme .nav-link::after {
    background: #b45309;
}

/* Reduce motion - nav/alerts */
@media (prefers-reduced-motion: reduce) {
    .nav-link::after,
    .nav-menu-item::before,
    .nav-menu-item,
    .idx-alert-action {
        transition: none;
    }
}

.panel-body {
    padding: 16px;
}

.panel-count {
    font-size: 11px;
    color: var(--text-3);
}

/* ========================================
   Products List
   ======================================== */
.prod-head {
    display: grid;
    grid-template-columns: 50px 1fr 70px 50px 55px 70px 60px;
    gap: 10px;
    padding: 8px 16px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    font-size: 9px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prod {
    display: grid;
    grid-template-columns: 50px 1fr 70px 50px 55px 70px 60px;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

.prod:hover {
    background: var(--bg-2);
}

.prod:last-child {
    border-bottom: none;
}

.prod-id {
    font-size: 10px;
    color: var(--text-3);
}

.prod-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.prod-sub {
    font-size: 10px;
    color: var(--text-3);
    margin-top: 2px;
}

.prod-type {
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    background: var(--bg-3);
    color: var(--gold);
    text-transform: uppercase;
    text-align: center;
}

.prod-type-p2p {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.12);
}

body.light-theme .prod-type-p2p {
    color: #7c3aed;
    background: rgba(139, 92, 246, 0.1);
}

.prod-stock {
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.prod-stock.ok {
    color: var(--green);
}

.prod-stock.low {
    color: var(--red);
}

.prod-time {
    font-size: 10px;
    color: var(--text-3);
    text-align: center;
}

.prod-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--green);
    text-align: right;
}

.prod-buy {
    height: 28px;
    padding: 0 12px;
    background: var(--gold);
    border: none;
    color: #000;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.prod-buy:hover {
    background: var(--gold-dim);
}

/* Order Page Variants - Flexible Layouts */
.prod-head.orders-5col,
.prod.orders-5col {
    grid-template-columns: 1fr 100px 80px 70px 80px;
}

.prod-head.orders-6col,
.prod.orders-6col {
    grid-template-columns: 40% 7% 12% 15% 10% 11%;
}

/* CC Purchases Grid - ID 20%, Card 40%, Exp 10%, Price 10%, Date 10%, Action 10% */
.prod-head.cc-purchases-grid,
.prod.cc-purchases-grid {
    grid-template-columns: 20% 30% 10% 10% 10% 10%;
}

/* SSN Purchases Grid - ID 20%, Name 30%, SSN 20%, Price 10%, Date 10%, Action 10% */
.prod-head.ssn-purchases-grid,
.prod.ssn-purchases-grid {
    grid-template-columns: 15% 25% 20% 10% 10% 10%;
}

/* Leak Purchases Grid - ID 20%, Query 20%, Type 20%, Records 10%, Price 10%, Date 10%, Action 10% */
.prod-head.leak-purchases-grid,
.prod.leak-purchases-grid {
    grid-template-columns: 15% 15% 20% 10% 10% 10% 10%;
}

/* Sales Grid - Product 30%, Buyer 20%, Value 20%, Category 10%, Status 10% */
.prod-head.sales-grid,
.prod.sales-grid {
    grid-template-columns: 20% 20% 20% 10% 20%;
}

/* Goods match indicator for search results */
.prod-goods-match {
    margin-top: 4px;
    padding: 4px 8px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 4px;
    font-size: 11px;
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 4px;
}
.prod-goods-match .goods-icon { font-size: 12px; }
.prod-goods-match .goods-text { 
    color: #a3a3a3; 
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.light-theme .prod-goods-match { background: rgba(16, 185, 129, 0.08); }
body.light-theme .prod-goods-match .goods-text { color: #6b7280; }

/* Products Grid - Product 30%, Category 20%, Price 20%, Created 10%, Status 10%, Actions 10% */
.prod-head.products-grid,
.prod.products-grid {
    grid-template-columns: 20% 20% 20% 10% 10% 10%;
}

.prod-head.proxy-orders,
.prod.proxy-orders {
    grid-template-columns: 1fr 100px 60px 70px 70px;
}

.prod-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.prod-btn-dispute {
    padding: 4px 8px;
    background: rgba(239, 68, 68, 0.15);
    border: none;
    color: #f87171;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
}

.prod-btn-dispute:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

.prod-badge.badge-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.prod-badge.badge-refunded {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

body.light-theme .prod-btn-dispute {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

body.light-theme .prod-badge.badge-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

body.light-theme .prod-badge.badge-refunded {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

/* ========================================
   Sidebar Panel
   ======================================== */
.side-panel {
    background: var(--bg-1);
    border: 1px solid var(--border);
    margin-bottom: 16px;
}

.side-head {
    padding: 12px 14px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold);
}

.side-body {
    padding: 14px;
}

.side-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-list li {
    font-size: 12px;
    color: var(--text-2);
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.side-list li:last-child {
    border-bottom: none;
}

.side-limit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-2);
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.side-limit-row:last-child {
    border-bottom: none;
}

.side-limit-row span:last-child {
    font-weight: 600;
    color: var(--text-1);
}

body.light-theme .side-body { color: #374151; }
body.light-theme .side-list li { color: #4b5563; border-color: rgba(0,0,0,0.06); }
body.light-theme .side-limit-row { color: #4b5563; border-color: rgba(0,0,0,0.06); }
body.light-theme .side-limit-row span:last-child { color: #111827; }

/* ========================================
   Auctions
   ======================================== */
.auc {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.auc:last-child {
    border-bottom: none;
}

.auc:hover {
    background: var(--bg-2);
}

.auc-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.auc-name {
    font-size: 11px;
    font-weight: 700;
}

.auc-bids {
    font-size: 9px;
    color: var(--text-3);
}

.auc-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.auc-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--gold);
}

.auc-timer {
    font-size: 11px;
    font-weight: 700;
    color: var(--red);
}

/* ========================================
   News
   ======================================== */
.news {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

.news:last-child {
    border-bottom: none;
}

.news:hover {
    background: var(--bg-2);
}

.news-title {
    font-size: 11px;
    color: var(--text-2);
    margin-bottom: 2px;
}

.news:hover .news-title {
    color: var(--text);
}

.news-time {
    font-size: 9px;
    color: var(--text-3);
}

.news.new .news-title {
    color: var(--gold);
    font-weight: 700;
}

/* ========================================
   Telegram Section
   ======================================== */
.tg-body {
    padding: 16px 14px;
    text-align: center;
}

.tg-txt {
    font-size: 9px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.tg-btn {
    display: inline-block;
    padding: 10px 20px;
    background: var(--gold);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tg-btn:hover {
    background: var(--gold-dim);
}

/* ========================================
   Footer
   ======================================== */
footer {
    background: var(--bg-1);
    border-top: 2px solid var(--gold);
    padding: 20px 0;
    text-align: center;
}

.ft-brand {
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.ft-text {
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 1px;
}

.ft-dev {
    font-size: 9px;
    color: var(--text-3);
    margin-top: 8px;
    letter-spacing: 0.5px;
}

.ft-dev-link {
    color: #8b5cf6;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.ft-dev-link:hover {
    background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   Mobile Menu Overlay
   ======================================== */
.mob {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 200;
    overflow-y: auto;
    padding: 16px;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.25s ease, visibility 0.3s;
}

.mob.on {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.mob-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.mob-close {
    width: 32px;
    height: 32px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
}

.mob-sec {
    font-size: 9px;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 0 6px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
}

.mob-sec:first-of-type {
    border-top: none;
    margin-top: 0;
}

.mob-link {
    display: block;
    padding: 10px 0;
    font-size: 12px;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mob-link:hover {
    color: var(--gold);
}
.mob-link.active {
    color: var(--gold);
    border-left: 2px solid var(--gold);
    padding-left: 10px;
}
body.light-theme .mob-link.active {
    color: #b45309;
    border-left-color: #d97706;
}

/* ========================================
   Auth Page Styles
   ======================================== */
.auth-page {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.auth-box {
    width: 100%;
    max-width: 380px;
}

/* Auth Security Warning */
.auth-warn {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 18px;
    margin-bottom: 12px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.25);
    animation: auth-warn-glow 3s ease-in-out infinite;
}
.auth-warn-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #f59e0b, #ef4444, #f59e0b);
    background-size: 100% 200%;
    animation: auth-warn-slide 2s linear infinite;
}
@keyframes auth-warn-glow {
    0%, 100% { box-shadow: 0 0 6px rgba(245, 158, 11, 0.1); }
    50% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.25); }
}
@keyframes auth-warn-slide {
    0% { background-position: 0 0; }
    100% { background-position: 0 200%; }
}
.auth-warn-icon {
    font-size: 16px;
    color: #f59e0b;
    flex-shrink: 0;
    animation: auth-warn-pulse 2s ease-in-out infinite;
}
@keyframes auth-warn-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.auth-warn-text {
    font-size: 10px;
    color: var(--text-3);
    line-height: 1.5;
}
.auth-warn-text strong {
    color: #ef4444;
}
.auth-warn-link {
    color: #60a5fa;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed rgba(96, 165, 250, 0.3);
}
.auth-warn-link:hover {
    color: #93bbfd;
}
body.light-theme .auth-warn {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}
body.light-theme .auth-warn-text {
    color: #64748b;
}
body.light-theme .auth-warn-link {
    color: #2563eb;
}

.auth-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    padding: 32px 24px;
}

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
    text-decoration: none;
}

.auth-logo-vault {
    width: 48px;
    height: 48px;
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    color: var(--gold);
    position: relative;
}

.auth-logo-vault::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid var(--gold);
    opacity: 0.5;
}

.auth-logo-info {
    text-align: left;
}

.auth-logo-text {
    font-weight: 700;
    font-size: 20px;
    color: var(--gold);
    letter-spacing: 2px;
}

.auth-logo-ver {
    font-size: 10px;
    color: var(--green);
    font-weight: 400;
}

.auth-logo-sub {
    font-size: 9px;
    color: var(--text-3);
    letter-spacing: 1px;
}

.auth-logo-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border: 2px solid var(--gold);
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: var(--gold);
}

.auth-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gold);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.auth-subtitle {
    font-size: 11px;
    color: var(--text-3);
    text-align: center;
    margin-bottom: 24px;
}

.auth-field {
    margin-bottom: 16px;
}

.auth-label {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-3);
    margin-bottom: 6px;
}

.auth-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}

.auth-input:focus {
    outline: none;
    border-color: var(--gold);
}

.auth-input::placeholder {
    color: var(--text-3);
}

.auth-alert {
    padding: 10px 12px;
    font-size: 11px;
    margin-bottom: 16px;
    border: 1px solid;
}

.auth-alert-success {
    background: rgba(46, 204, 64, 0.1);
    border-color: var(--green);
    color: var(--green);
}

.auth-alert-error {
    background: rgba(255, 65, 54, 0.1);
    border-color: var(--red);
    color: var(--red);
}

/* Maintenance Banner on Login */
.maintenance-banner {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
    border: 1px solid var(--red);
    padding: 20px;
    margin-bottom: 24px;
    text-align: center;
}

.maintenance-banner-icon {
    font-size: 32px;
    color: var(--red);
    margin-bottom: 8px;
}

.maintenance-banner-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--red);
    margin-bottom: 12px;
}

.maintenance-banner-msg {
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 12px;
    line-height: 1.5;
}

.maintenance-banner-time {
    font-size: 11px;
    color: var(--text-3);
    margin-bottom: 8px;
}

.maintenance-banner-time strong {
    color: var(--gold);
    display: block;
    margin-top: 4px;
    font-size: 13px;
}

.maintenance-banner-note {
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 12px;
}

body.light-theme .maintenance-banner {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
}

body.light-theme .maintenance-banner-note {
    border-top-color: rgba(0,0,0,0.1);
}

.maintenance-banner-tg {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 16px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--gold);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 1px;
    transition: border-color 0.2s;
}

.maintenance-banner-tg:hover {
    border-color: var(--gold);
}

.auth-btn {
    width: 100%;
    height: 40px;
    background: var(--gold);
    border: none;
    color: #000;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    margin-bottom: 16px;
}

.auth-btn:hover {
    background: var(--gold-dim);
}

.auth-footer {
    text-align: center;
    font-size: 11px;
    color: var(--text-3);
}

.auth-footer a {
    color: var(--gold);
    font-weight: 700;
}

.auth-footer a:hover {
    text-decoration: underline;
}
.auth-showcase-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--text-2) !important;
    font-weight: 400 !important;
    font-size: 11px;
}
.auth-showcase-link:hover {
    color: var(--gold) !important;
}

.auth-info-box {
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 12px;
    font-size: 11px;
    color: var(--text-3);
    text-align: center;
    margin-bottom: 16px;
}

/* Auth Secret Input (blur effect) */
.auth-secret-wrapper {
    position: relative;
}

.auth-secret-input {
    filter: blur(5px);
    transition: filter 0.3s ease;
}

.auth-secret-wrapper:hover .auth-secret-input,
.auth-secret-input:focus {
    filter: blur(0);
}

.auth-secret-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-1);
    padding: 4px 10px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.auth-secret-wrapper:hover .auth-secret-hint,
.auth-secret-input:focus ~ .auth-secret-hint {
    opacity: 0;
}

/* Auth Captcha */
.auth-captcha {
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 12px;
    margin-bottom: 16px;
    text-align: center;
}

.auth-captcha-hint {
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 10px;
    line-height: 1.5;
}

.captcha-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    max-width: 200px;
    margin: 0 auto;
}

.captcha-tile {
    width: 44px;
    height: 44px;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-size: 18px;
}

.captcha-tile:hover {
    transform: scale(1.05);
}

.captcha-tile.selected {
    border-color: var(--gold);
    box-shadow: 0 0 6px rgba(212, 160, 23, 0.5);
}

.auth-captcha-refresh {
    margin-top: 8px;
    padding: 4px 10px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text-3);
    font-family: inherit;
    font-size: 9px;
    cursor: pointer;
}

.auth-captcha-refresh:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.auth-captcha-help {
    font-size: 8px;
    color: var(--text-3);
    margin-top: 6px;
}

/* ========================================
   Responsive - Tablet (1024px)
   ======================================== */
@media (max-width: 1024px) {
    .nav {
        display: none;
    }
    
    .warn-bar {
        padding: 4px 8px;
    }
    
    .warn-bar .warn-text {
        font-size: 8px;
        letter-spacing: 1px;
    }
    
    .mobile-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .layout {
        grid-template-columns: 1fr;
    }
    
    .user-tag {
        display: none;
    }
}

/* ========================================
   Responsive - Mobile (768px)
   ======================================== */
@media (max-width: 768px) {
    .stats-vault {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .prod-head {
        display: none;
    }
    
    .prod {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    .prod-id {
        display: none;
    }
    
    .premium-banner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}

/* ========================================
   Responsive - Small Mobile (480px)
   ======================================== */
@media (max-width: 480px) {
    .stats-vault {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    .vault-stat {
        padding: 16px 14px 14px;
    }
    
    .vault-val {
        font-size: 24px;
    }
    
    .header-acts {
        gap: 4px;
    }
    
    .btn {
        height: 28px;
        padding: 0 10px;
        font-size: 9px;
    }
    
    .auth-box {
        max-width: 100%;
    }
    
    .auth-card {
        padding: 24px 16px;
    }
}

/* ========================================
   Modal Overlay
   ======================================== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-overlay.active {
    display: flex;
}

.modal-box {
    background: var(--bg-1);
    border: 1px solid var(--border);
    padding: 20px;
    width: 100%;
    max-width: 360px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.modal-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modal-close {
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.modal-text {
    font-size: 10px;
    color: var(--text-2);
    margin-bottom: 14px;
    line-height: 1.5;
}

.modal-step {
    padding: 8px 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    margin-bottom: 4px;
    font-size: 10px;
    color: var(--text);
}

.modal-step-num {
    color: var(--gold);
    font-weight: 700;
}

.modal-warning {
    background: rgba(255, 65, 54, 0.1);
    border: 1px solid var(--red);
    padding: 10px;
    text-align: center;
    margin-top: 14px;
}

.modal-warning-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--red);
    margin-bottom: 4px;
}

.modal-warning-text {
    font-size: 9px;
    color: var(--red);
    line-height: 1.4;
}

/* Light Theme - Modal */
body.light-theme .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

body.light-theme .modal-box {
    background: var(--bg-1);
    border-color: var(--border);
}

body.light-theme .modal-step {
    background: var(--bg-2);
}

/* ========================================
   TG Ban Modal - Stylish compact one-time notice
   ======================================== */
.tg-ban-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: tg-ban-fade-in 0.25s ease-out;
}

.tg-ban-modal-overlay.tg-ban-modal-closing {
    animation: tg-ban-fade-out 0.22s ease-in forwards;
}

@keyframes tg-ban-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tg-ban-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.tg-ban-modal {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.10) 0%, rgba(232, 119, 14, 0.05) 100%), var(--bg-1);
    border: 1px solid rgba(59, 130, 246, 0.35);
    padding: 22px 22px 20px 28px;
    overflow: hidden;
    animation: tg-ban-slide-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

@keyframes tg-ban-slide-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.tg-ban-modal-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #60a5fa 0%, #e8770e 100%);
    animation: tg-ban-accent-glow 2.5s ease-in-out infinite;
}

@keyframes tg-ban-accent-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(96, 165, 250, 0.7); }
    50% { box-shadow: 0 0 18px rgba(232, 119, 14, 0.6); }
}

.tg-ban-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-3);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.tg-ban-modal-close:hover {
    border-color: rgba(239, 68, 68, 0.6);
    color: #ef4444;
}

.tg-ban-modal-icon {
    font-size: 22px;
    margin-bottom: 8px;
    animation: tg-ban-icon-pulse 2.5s ease-in-out infinite;
}

@keyframes tg-ban-icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.tg-ban-modal-title {
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(90deg, #60a5fa 0%, #e8770e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tg-ban-modal-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    animation: tg-ban-dot-blink 1.4s ease-in-out infinite;
    -webkit-text-fill-color: initial;
}

@keyframes tg-ban-dot-blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(239, 68, 68, 0.9); }
    50% { opacity: 0.25; box-shadow: 0 0 1px rgba(239, 68, 68, 0.2); }
}

.tg-ban-modal-text {
    font-size: 11px;
    color: var(--text-2);
    line-height: 1.55;
    margin-bottom: 14px;
}

.tg-ban-modal-text b {
    color: var(--text);
    font-weight: 700;
}

.tg-ban-modal-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.tg-ban-modal-option {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    text-decoration: none;
    transition: all 0.2s ease;
}

.tg-ban-opt-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.tg-ban-opt-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    word-break: break-all;
}

.tg-ban-opt-tg .tg-ban-opt-label {
    color: #60a5fa;
}

.tg-ban-opt-tg:hover {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.08);
    transform: translateY(-1px);
}

.tg-ban-opt-rss .tg-ban-opt-label {
    color: #e8770e;
}

.tg-ban-opt-rss:hover {
    border-color: rgba(232, 119, 14, 0.5);
    background: rgba(232, 119, 14, 0.08);
    transform: translateY(-1px);
}

.tg-ban-modal-confirm {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, rgba(232, 119, 14, 0.12) 100%);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tg-ban-modal-confirm:hover {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.25) 0%, rgba(232, 119, 14, 0.2) 100%);
    border-color: rgba(232, 119, 14, 0.5);
}

/* Light Theme */
body.light-theme .tg-ban-modal {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(232, 119, 14, 0.04) 100%), var(--bg-1);
}

body.light-theme .tg-ban-modal-title {
    background: linear-gradient(90deg, #2563eb 0%, #c46200 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-theme .tg-ban-opt-tg .tg-ban-opt-label {
    color: #2563eb;
}

body.light-theme .tg-ban-opt-rss .tg-ban-opt-label {
    color: #c46200;
}

@media (max-width: 480px) {
    .tg-ban-modal {
        padding: 18px 16px 16px 22px;
    }
    .tg-ban-modal-options {
        grid-template-columns: 1fr;
    }
    .tg-ban-modal-icon {
        font-size: 20px;
    }
    .tg-ban-modal-title {
        font-size: 13px;
    }
}

/* ========================================
   Uniquecode Page
   ======================================== */
.uc-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--gold);
}

.uc-icon.error {
    border-color: var(--red);
    color: var(--red);
}

.uc-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.uc-title.error {
    color: var(--red);
}

.uc-subtitle {
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.uc-code-label {
    font-size: 9px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    text-align: center;
}

.uc-code-input {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--gold);
    border-color: var(--gold);
    cursor: pointer;
}

.uc-warning {
    background: rgba(255, 65, 54, 0.1);
    border: 1px solid var(--red);
    padding: 12px;
    margin-bottom: 16px;
}

.uc-warning-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.uc-warning-text {
    font-size: 10px;
    color: var(--red);
    line-height: 1.5;
}

.uc-header {
    text-align: center;
    margin-bottom: 20px;
}

.uc-code-wrap {
    margin-bottom: 16px;
}

.uc-btn-full {
    width: 100%;
    justify-content: center;
    text-decoration: none;
    margin-bottom: 16px;
}
.uc-btn-download {
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    margin-bottom: 16px;
}
.uc-btn-download:hover {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
}
body.light-theme .uc-btn-download {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #1a1a1a;
}
body.light-theme .uc-btn-download:hover {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
}

.uc-mb {
    margin-bottom: 10px;
}

/* ========================================
   Index Page - Your Stats Section
   ======================================== */
.idx-your-stats {
    background: var(--bg-1);
    border: 1px solid var(--gold);
    padding: 16px;
    margin-bottom: 16px;
}

.idx-stats-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.idx-stats-icon {
    font-size: 14px;
    color: var(--gold);
}

.idx-stats-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.idx-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.idx-stat-item {
    text-align: center;
    padding: 10px 8px;
    background: var(--bg-2);
    border: 1px solid var(--border);
}

.idx-stat-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.idx-stat-lbl {
    font-size: 9px;
    color: var(--text-3);
    text-transform: uppercase;
}

.idx-stat-vip {
    color: #ec4899;
}

.idx-stat-gold {
    color: var(--gold);
}

.idx-stat-user {
    color: var(--text-2);
}

.idx-stat-discount {
    color: var(--green);
}

.idx-stat-gold-exp {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
}

.idx-stat-gold-exp .idx-stat-lbl {
    color: var(--gold);
}

/* ========================================
   Sidebar - User Stats Panel
   ======================================== */
.side-panel-stats {
    border-color: var(--gold);
}

.side-panel-stats .side-head {
    color: var(--gold);
}

.user-stats-body {
    padding: 12px;
}

.user-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.user-stats-row:last-child {
    border-bottom: none;
}

.user-stats-lbl {
    font-size: 11px;
    color: var(--text-3);
}

.user-stats-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.user-stats-vip {
    color: #ec4899;
}

.user-stats-gold {
    color: var(--gold);
}

.user-stats-user {
    color: var(--text-2);
}

.user-stats-green {
    color: var(--green);
}

.user-stats-gold-row {
    background: rgba(212, 175, 55, 0.08);
    margin: 0 -12px;
    padding: 8px 12px;
    border-bottom: none;
}

.user-stats-gold-row .user-stats-lbl {
    color: var(--gold);
}

/* Light Theme - User Stats */
body.light-theme .side-panel-stats {
    border-color: var(--gold);
}

body.light-theme .user-stats-gold-row {
    background: rgba(212, 175, 55, 0.1);
}

/* ========================================
   Index Page - Alerts Section
   ======================================== */
.idx-alerts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.idx-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-1);
    border: 1px solid var(--border);
}

.idx-alert-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.idx-alert-body {
    flex: 1;
    min-width: 0;
}

.idx-alert-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.idx-alert-text {
    font-size: 10px;
    color: var(--text-3);
}

.idx-alert-action {
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* Security Warning Alert - Animated */
.idx-alert-warn {
    position: relative;
    overflow: hidden;
    border-color: rgba(245, 158, 11, 0.6);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(239, 68, 68, 0.04) 50%, var(--bg-1) 100%);
    animation: idx-warn-glow 3s ease-in-out infinite;
}
.idx-alert-warn-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #f59e0b, #ef4444, #f59e0b);
    background-size: 100% 200%;
    animation: idx-warn-slide 2s linear infinite;
}
@keyframes idx-warn-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.15); }
    50% { box-shadow: 0 0 16px rgba(245, 158, 11, 0.3); }
}
@keyframes idx-warn-slide {
    0% { background-position: 0 0; }
    100% { background-position: 0 200%; }
}
.idx-alert-warn .idx-alert-icon {
    color: #f59e0b;
    font-size: 20px;
    animation: idx-warn-pulse 2s ease-in-out infinite;
}
@keyframes idx-warn-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}
.idx-alert-warn .idx-alert-title {
    color: #f59e0b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.idx-alert-warn .idx-alert-text {
    color: var(--text-2);
    font-size: 11px;
    line-height: 1.5;
}
.idx-alert-warn .idx-alert-text strong {
    color: #ef4444;
}
.idx-warn-link {
    color: #60a5fa;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed rgba(96, 165, 250, 0.4);
}
.idx-warn-link:hover {
    color: #93bbfd;
    border-bottom-color: #93bbfd;
}

body.light-theme .idx-alert-warn {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(239, 68, 68, 0.05) 50%, var(--bg-1) 100%);
}
body.light-theme .idx-alert-warn .idx-alert-text {
    color: var(--text-2);
}
body.light-theme .idx-warn-link {
    color: #2563eb;
}

/* Premium Alert - Gold */
.idx-alert-premium {
    border-color: rgba(212, 175, 55, 0.4);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, var(--bg-1) 100%);
}

.idx-action-premium {
    background: rgba(212, 175, 55, 0.15);
    color: var(--gold);
    border-color: rgba(212, 175, 55, 0.3);
}

.idx-action-premium:hover {
    background: rgba(212, 175, 55, 0.25);
}

/* Telegram Alert - Stylish Compact */
.idx-alert-telegram {
    position: relative;
    overflow: hidden;
    border-color: rgba(59, 130, 246, 0.35);
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, rgba(232, 119, 14, 0.04) 100%), var(--bg-1);
}

.idx-alert-telegram::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #60a5fa 0%, #e8770e 100%);
    animation: idx-tg-stripe 2.5s ease-in-out infinite;
}

@keyframes idx-tg-stripe {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(96, 165, 250, 0.6); }
    50% { opacity: 0.85; box-shadow: 0 0 14px rgba(232, 119, 14, 0.5); }
}

.idx-alert-telegram .idx-alert-icon {
    font-size: 16px;
    animation: idx-tg-pulse 2.5s ease-in-out infinite;
}

@keyframes idx-tg-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.idx-alert-telegram .idx-alert-title {
    font-size: 12px;
    font-weight: 700;
    background: linear-gradient(90deg, #60a5fa 0%, #e8770e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.idx-alert-telegram .idx-alert-title::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    animation: idx-tg-dot 1.5s ease-in-out infinite;
    -webkit-text-fill-color: initial;
}

@keyframes idx-tg-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(239, 68, 68, 0.8); }
    50% { opacity: 0.3; box-shadow: 0 0 2px rgba(239, 68, 68, 0.3); }
}

.idx-alert-telegram .idx-alert-text {
    font-size: 10px;
    color: var(--text-3);
}

.idx-action-tg {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
    transition: all 0.2s ease;
}

.idx-action-tg:hover {
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-1px);
}

.idx-action-rss {
    margin-left: 6px;
    background: rgba(232, 119, 14, 0.12);
    color: #e8770e;
    border-color: rgba(232, 119, 14, 0.3);
    transition: all 0.2s ease;
}

.idx-action-rss:hover {
    background: rgba(232, 119, 14, 0.22);
    border-color: rgba(232, 119, 14, 0.5);
    transform: translateY(-1px);
}

body.light-theme .idx-action-rss {
    background: rgba(232, 119, 14, 0.1);
    color: #c46200;
    border-color: rgba(232, 119, 14, 0.25);
}

body.light-theme .idx-action-rss:hover {
    background: rgba(232, 119, 14, 0.2);
}

/* Security Alert - Red */
.idx-alert-security {
    border-color: rgba(239, 68, 68, 0.4);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, var(--bg-1) 100%);
}

.idx-action-sec {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

.idx-action-sec:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* Notify Alert - Purple */
.idx-alert-notify {
    border-color: rgba(139, 92, 246, 0.4);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, var(--bg-1) 100%);
}

.idx-action-notify {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.3);
}

.idx-action-notify:hover {
    background: rgba(139, 92, 246, 0.25);
}

/* VIP Domain Alert - Pink */
.idx-alert-vip {
    border-color: rgba(236, 72, 153, 0.4);
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.05) 0%, var(--bg-1) 100%);
}

.idx-action-vip {
    background: rgba(236, 72, 153, 0.15);
    color: #f472b6;
    border-color: rgba(236, 72, 153, 0.3);
    font-weight: 700;
}

.idx-action-vip:hover {
    background: rgba(236, 72, 153, 0.25);
}

/* Staking Alert - Purple/Indigo */
.idx-alert-staking {
    border-color: rgba(139, 92, 246, 0.4);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(99, 102, 241, 0.03) 50%, var(--bg-1) 100%);
}

.idx-alert-staking .idx-alert-icon {
    color: #a78bfa;
}

.idx-alert-staking .idx-alert-title {
    color: #a78bfa;
    display: flex;
    align-items: center;
    gap: 8px;
}

.idx-staking-completed {
    font-size: 9px;
    font-weight: 700;
    color: #34d399;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.idx-staking-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--text-3);
    margin-bottom: 6px;
}

.idx-staking-days {
    color: var(--text-2);
    font-weight: 600;
}

.idx-staking-sep {
    color: var(--text-3);
    opacity: 0.4;
}

.idx-staking-bar {
    height: 3px;
    background: var(--border);
    overflow: hidden;
    width: 100%;
}

.idx-staking-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #6366f1);
    transition: width 0.3s ease;
}

.idx-staking-pct {
    font-size: 14px;
    font-weight: 700;
    color: #a78bfa;
    flex-shrink: 0;
    font-family: 'Space Grotesk', monospace;
}

.idx-action-staking {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.3);
}

.idx-action-staking:hover {
    background: rgba(139, 92, 246, 0.25);
}

/* Staking Promo Alert */
.idx-alert-staking-promo {
    border-color: rgba(139, 92, 246, 0.3);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.04) 0%, var(--bg-1) 100%);
}

.idx-alert-staking-promo .idx-alert-icon {
    color: #a78bfa;
}

.idx-alert-staking-promo .idx-alert-title {
    color: #a78bfa;
}

body.light-theme .idx-alert-staking {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.04) 50%, var(--bg-1) 100%);
}

body.light-theme .idx-alert-staking .idx-alert-title {
    color: #7c3aed;
}

body.light-theme .idx-staking-pct {
    color: #7c3aed;
}

body.light-theme .idx-staking-days {
    color: var(--text);
}

body.light-theme .idx-staking-bar {
    background: var(--border);
}

body.light-theme .idx-alert-staking-promo {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, var(--bg-1) 100%);
}

body.light-theme .idx-alert-staking-promo .idx-alert-title {
    color: #7c3aed;
}

/* Lucky Wheel Alert - Animated Green/Emerald */
.idx-alert-wheel {
    position: relative;
    overflow: hidden;
    border-color: rgba(16, 185, 129, 0.5);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.04) 50%, var(--bg-1) 100%);
    animation: idx-wheel-glow 2.5s ease-in-out infinite;
}

.idx-alert-wheel-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.08), transparent);
    animation: idx-wheel-shine 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes idx-wheel-shine {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

@keyframes idx-wheel-glow {
    0%, 100% { border-color: rgba(16, 185, 129, 0.5); box-shadow: 0 0 8px rgba(16, 185, 129, 0.1); }
    50% { border-color: rgba(52, 211, 153, 0.7); box-shadow: 0 0 16px rgba(16, 185, 129, 0.15); }
}

.idx-wheel-icon {
    font-size: 22px !important;
    animation: idx-wheel-spin 4s ease-in-out infinite;
}

@keyframes idx-wheel-spin {
    0%, 80%, 100% { transform: rotate(0deg); }
    85% { transform: rotate(15deg); }
    90% { transform: rotate(-10deg); }
    95% { transform: rotate(5deg); }
}

.idx-alert-wheel .idx-alert-title {
    color: #10b981;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.idx-alert-wheel .idx-alert-text {
    color: var(--text-2);
    font-size: 11px;
}

.idx-action-wheel {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399 !important;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.idx-action-wheel:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

body.light-theme .idx-alert-wheel {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(52, 211, 153, 0.03) 50%, var(--bg-1) 100%);
}

body.light-theme .idx-alert-wheel .idx-alert-title {
    color: #059669;
}

body.light-theme .idx-alert-wheel .idx-alert-text {
    color: var(--text-2);
}

body.light-theme .idx-action-wheel {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #059669 !important;
}

body.light-theme .idx-action-wheel:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
}

/* ========================================
   Index Page - Vault Stats Additions
   ======================================== */
.vault-new {
    color: var(--green);
    font-weight: 600;
    margin-left: 6px;
}

.vault-green {
    color: var(--green);
}

/* ========================================
   Index Page - News Navigation
   ======================================== */
.side-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.news-nav-btn {
    width: 22px;
    height: 22px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-nav-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.news-nav-counter {
    font-size: 9px;
    color: var(--text-3);
    min-width: 24px;
    text-align: center;
}

.news-pages {
    position: relative;
}

.news-page {
    display: none;
}

.news-page.active {
    display: block;
}

/* ========================================
   Index Page - Product Buttons
   ======================================== */
.prod-sub-locked {
    display: flex;
    align-items: center;
    gap: 8px;
}
.prod-locked-timer {
    font-size: 10px;
    font-weight: 600;
    color: #f59e0b;
    font-family: 'Roboto Mono', monospace;
}
.prod-locked-link {
    font-size: 10px;
    color: #f59e0b;
    text-decoration: none;
    transition: all 0.2s;
}
.prod-locked-link:hover {
    color: #fbbf24;
    text-decoration: underline;
}
.prod-btn-locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 10px;
    height: 28px;
    color: #737373;
    background: rgba(115, 115, 115, 0.1);
    border: 1px solid rgba(115, 115, 115, 0.2);
    border-radius: 6px;
    text-decoration: none;
}
body.light-theme .prod-locked-timer { color: #d97706; }
body.light-theme .prod-locked-link { color: #d97706; }
body.light-theme .prod-btn-locked { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: #6b7280; }

.prod-name .prod-badge {
    margin-left: 2px !important;
    font-size: 11px !important;
    display: inline !important;
    padding: 0 !important;
    line-height: 1 !important;
    background: none !important;
    border-radius: 0 !important;
}

.prod-btn-sold {
    font-size: 9px;
    height: 28px;
    color: var(--red);
}

.prod-btn-view {
    font-size: 9px;
    height: 28px;
}

.prod-btn-lowbal {
    font-size: 9px;
    height: 28px;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

/* Auction List Grid - Item(flex) Type(80px) Price(100px) Bids(55px) Time(90px) Action(70px) */
.prod-head.auction-grid,
.prod.auction-grid {
    grid-template-columns: 1fr 80px 100px 55px 90px 70px;
}

/* Auction Wins Grid - Item(flex) Type(95px) Price(110px) Won(95px) Action(80px) */
.prod-head.auction-wins-grid,
.prod.auction-wins-grid {
    grid-template-columns: minmax(0, 1fr) 95px 110px 95px 80px;
    gap: 14px;
    align-items: center;
}

.prod.auction-wins-grid {
    padding: 14px 16px;
}

.prod.auction-wins-grid .prod-item {
    min-width: 0;
}

.prod.auction-wins-grid .prod-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    white-space: normal;
    line-height: 1.45;
    font-size: 12.5px;
}

.prod.auction-wins-grid .prod-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    white-space: normal;
    line-height: 1.4;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-3);
}

.prod.auction-wins-grid .prod-type {
    justify-self: center;
    width: max-content;
    max-width: 100%;
    padding: 4px 9px;
    font-size: 9.5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prod.auction-wins-grid .prod-time {
    text-align: center;
    font-size: 11px;
    line-height: 1.35;
    white-space: normal;
}

.prod.auction-wins-grid .prod-price {
    text-align: right;
    font-size: 13.5px;
}

.prod.auction-wins-grid .prod-buy {
    justify-self: end;
}

/* Tablet */
@media (max-width: 900px) {
    .prod-head.auction-wins-grid,
    .prod.auction-wins-grid {
        grid-template-columns: minmax(0, 1fr) 80px 95px 75px;
        gap: 10px;
    }
    .prod-head.auction-wins-grid .prod-col-action,
    .prod.auction-wins-grid .prod-buy {
        grid-column: 4 / 5;
    }
}

/* Mobile - card layout */
@media (max-width: 640px) {
    .prod-head.auction-wins-grid {
        display: none;
    }
    .prod.auction-wins-grid {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "item    type"
            "item    price"
            "footer  footer";
        gap: 6px 10px;
        padding: 12px 14px;
    }
    .prod.auction-wins-grid .prod-item    { grid-area: item; }
    .prod.auction-wins-grid .prod-type    { grid-area: type; justify-self: end; }
    .prod.auction-wins-grid .prod-price   { grid-area: price; text-align: right; align-self: start; }
    .prod.auction-wins-grid .prod-time,
    .prod.auction-wins-grid .prod-buy     { grid-area: footer; }
    .prod.auction-wins-grid .prod-time {
        text-align: left;
        align-self: center;
    }
    .prod.auction-wins-grid .prod-buy {
        justify-self: end;
        align-self: center;
    }
    .prod.auction-wins-grid > .prod-time,
    .prod.auction-wins-grid > .prod-buy {
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }
    .prod.auction-wins-grid .prod-name {
        -webkit-line-clamp: 3;
    }
}

/* ========================================
   Product Table - Center Columns
   ======================================== */
.prod-type,
.prod-stock,
.prod-time,
.prod-price {
    text-align: center;
}

.prod-head span:nth-child(3),
.prod-head span:nth-child(4),
.prod-head span:nth-child(5),
.prod-head span:nth-child(6) {
    text-align: center;
}

/* ========================================
   Sidebar - Exclusive Offer Panel
   ======================================== */
.side-panel-offer {
    border: 1px solid rgba(212, 160, 23, 0.35);
    background: var(--bg-1);
    box-shadow: 0 0 20px rgba(212, 160, 23, 0.08);
    position: relative;
    overflow: hidden;
}

.side-panel-offer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top center, rgba(212, 160, 23, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.side-panel-offer.offer-active {
    border-color: rgba(212, 160, 23, 0.5);
    box-shadow: 0 0 24px rgba(212, 160, 23, 0.12);
}

.side-panel-offer .side-head {
    color: var(--gold);
    background: rgba(212, 160, 23, 0.06);
    border-bottom: 1px solid rgba(212, 160, 23, 0.15);
    font-size: 13px;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.offer-body {
    padding: 14px;
    position: relative;
    z-index: 1;
}

.offer-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.3;
}

.offer-desc {
    font-size: 11px;
    color: var(--text-2);
    line-height: 1.5;
    margin-bottom: 12px;
}

.offer-timer {
    font-size: 11px;
    color: #10b981;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Light Theme - Exclusive Offer */
body.light-theme .side-panel-offer {
    background: #fff;
    border-color: rgba(212, 160, 23, 0.3);
    box-shadow: 0 2px 16px rgba(212, 160, 23, 0.08);
}
body.light-theme .side-panel-offer::before {
    background: radial-gradient(ellipse at top center, rgba(212, 160, 23, 0.06) 0%, transparent 70%);
}
body.light-theme .side-panel-offer.offer-active {
    border-color: rgba(212, 160, 23, 0.45);
    box-shadow: 0 2px 20px rgba(212, 160, 23, 0.12);
}
body.light-theme .side-panel-offer .side-head {
    background: rgba(212, 160, 23, 0.05);
    color: #92700c;
    border-bottom-color: rgba(212, 160, 23, 0.12);
}
body.light-theme .offer-title {
    color: #1a1a1a;
}
body.light-theme .offer-desc {
    color: #6b7280;
}

/* ========================================
   Index Page - Light Theme
   ======================================== */
body.light-theme .idx-your-stats {
    background: var(--bg-1);
    border-color: var(--gold);
}

body.light-theme .idx-stat-item {
    background: var(--bg-2);
}

body.light-theme .idx-alert {
    background: var(--bg-1);
}

body.light-theme .idx-alert-premium {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, var(--bg-1) 100%);
}

body.light-theme .idx-alert-telegram {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.06) 0%, rgba(232, 119, 14, 0.03) 100%), var(--bg-1);
}

body.light-theme .idx-alert-telegram .idx-alert-title {
    background: linear-gradient(90deg, #2563eb 0%, #c46200 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-theme .idx-alert-telegram .idx-alert-text {
    color: var(--text-2);
}

body.light-theme .idx-alert-security {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, var(--bg-1) 100%);
}

/* New User Welcome CTA - Cyan */
.idx-alert-newuser {
    border-color: rgba(6, 182, 212, 0.4);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, var(--bg-1) 100%);
}
.idx-alert-newuser .idx-alert-icon {
    color: #06b6d4;
}
.idx-alert-newuser .idx-alert-title {
    color: #06b6d4;
}
.idx-action-start {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.3);
    color: #06b6d4;
}
.idx-action-start:hover {
    background: rgba(6, 182, 212, 0.25);
    border-color: rgba(6, 182, 212, 0.5);
}
body.light-theme .idx-alert-newuser {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.06) 0%, var(--bg-1) 100%);
}
body.light-theme .idx-alert-newuser .idx-alert-icon,
body.light-theme .idx-alert-newuser .idx-alert-title {
    color: #0891b2;
}
body.light-theme .idx-action-start {
    background: rgba(6, 182, 212, 0.1);
    color: #0891b2;
}

/* Welcome Buttons Inline */
.welcome-btn {
    height: 20px;
    padding: 0 8px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid;
    transition: all 0.2s;
    margin-left: 4px;
    vertical-align: middle;
}
/* Accounts - Blue */
.wb-accounts {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    color: #3b82f6;
}
.wb-accounts:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.6);
}
/* Proxy - Purple */
.wb-proxy {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
    color: #8b5cf6;
}
.wb-proxy:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.6);
}
/* Cards - Rose */
.wb-cc {
    background: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.4);
    color: #f43f5e;
}
.wb-cc:hover {
    background: rgba(244, 63, 94, 0.25);
    border-color: rgba(244, 63, 94, 0.6);
}
/* SSN - Orange */
.wb-ssn {
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.4);
    color: #f97316;
}
.wb-ssn:hover {
    background: rgba(249, 115, 22, 0.25);
    border-color: rgba(249, 115, 22, 0.6);
}
/* Leak Lookup - Teal */
.wb-leak {
    background: rgba(20, 184, 166, 0.15);
    border-color: rgba(20, 184, 166, 0.4);
    color: #14b8a6;
}
.wb-leak:hover {
    background: rgba(20, 184, 166, 0.25);
    border-color: rgba(20, 184, 166, 0.6);
}
/* Profile - Indigo */
.wb-profile {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: #6366f1;
}
.wb-profile:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.6);
}
/* Wallet/Deposit - Green */
.wb-wallet {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
}
.wb-wallet:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.6);
}
/* Rules - Slate */
.wb-rules {
    background: rgba(100, 116, 139, 0.15);
    border-color: rgba(100, 116, 139, 0.4);
    color: #64748b;
}
.wb-rules:hover {
    background: rgba(100, 116, 139, 0.25);
    border-color: rgba(100, 116, 139, 0.6);
}
/* Light theme */
body.light-theme .wb-accounts { color: #2563eb; }
body.light-theme .wb-proxy { color: #7c3aed; }
body.light-theme .wb-cc { color: #e11d48; }
body.light-theme .wb-ssn { color: #ea580c; }
body.light-theme .wb-leak { color: #0d9488; }
body.light-theme .wb-profile { color: #4f46e5; }
body.light-theme .wb-wallet { color: #059669; }
body.light-theme .wb-rules { color: #475569; }

body.light-theme .idx-alert-notify {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, var(--bg-1) 100%);
}

body.light-theme .idx-alert-vip {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, var(--bg-1) 100%);
}

body.light-theme .idx-alert-title {
    color: var(--text);
}

body.light-theme .news-nav-btn {
    background: var(--bg-2);
}

/* ========================================
   Index Page - Responsive
   ======================================== */
@media (max-width: 1024px) {
    .idx-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .idx-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .idx-alert {
        flex-wrap: wrap;
    }
    
    .idx-alert-action {
        width: 100%;
        text-align: center;
        margin-top: 8px;
    }
}

@media (max-width: 480px) {
    .idx-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ========================================
   Logo Version Superscript
   ======================================== */
.logo-ver {
    font-size: 9px;
    color: var(--green);
    font-weight: 400;
    vertical-align: super;
    margin-left: 2px;
}

/* ========================================
   Message Badge & Button States
   ======================================== */
.msg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--green);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    margin-left: 6px;
}

.btn-pgp.has-unread,
.btn-dispute.has-unread {
    border-color: var(--green);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.btn-dispute {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.btn-dispute.has-unread {
    border-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

/* Support Online Status Indicator */
.btn-pgp {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.support-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.support-status.online {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
    animation: pulse-online 2s infinite;
}
.support-status.offline {
    background: #6b7280;
}
@keyframes pulse-online {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
body.light-theme .support-status.online {
    background: #16a34a;
    box-shadow: 0 0 6px rgba(22, 163, 74, 0.6);
}
body.light-theme .support-status.offline {
    background: #9ca3af;
}

/* ========================================
   Message Notification Popup (Project Style)
   ======================================== */
.msg-notify {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: all 0.3s ease;
}

.msg-notify.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.msg-notify-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-1);
    border: 1px solid var(--green);
    border-left: 3px solid var(--green);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    max-width: 320px;
    min-width: 280px;
}

.msg-notify-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.15);
        font-size: 16px;
    flex-shrink: 0;
}

.msg-notify-content {
    flex: 1;
    min-width: 0;
}

.msg-notify-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.msg-notify-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.msg-notify-close {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-3);
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.msg-notify-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.msg-notify-text {
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 10px;
}

.msg-notify-text strong {
    color: var(--text);
}

.msg-notify-btn {
    display: inline-block;
    padding: 6px 14px;
    background: var(--green);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

.msg-notify-btn:hover {
    background: #0ea472;
}

/* Light Theme */
body.light-theme .msg-notify-box {
    background: var(--bg-1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

body.light-theme .msg-notify-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

@media (max-width: 480px) {
    .msg-notify {
        top: auto;
        bottom: 20px;
        right: 12px;
        left: 12px;
    }
    
    .msg-notify-box {
        max-width: none;
    }
}

/* ========================================
   Dispute Notification Popup (Orange Style)
   Same as msg-notify but orange color
   ======================================== */
.dispute-notify {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: all 0.3s ease;
}

.dispute-notify.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.dispute-notify-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-1);
    border: 1px solid #f59e0b;
    border-left: 3px solid #f59e0b;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    max-width: 320px;
    min-width: 280px;
}

.dispute-notify-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: rgba(245, 158, 11, 0.15);
    flex-shrink: 0;
}

.dispute-notify-content {
    flex: 1;
    min-width: 0;
}

.dispute-notify-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.dispute-notify-title {
    font-size: 12px;
    font-weight: 700;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dispute-notify-close {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-3);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.dispute-notify-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.dispute-notify-text {
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 10px;
}

.dispute-notify-text strong {
    color: var(--text);
}

.dispute-notify-btn {
    display: inline-block;
    padding: 6px 14px;
    background: #f59e0b;
    color: #000;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.2s;
}

.dispute-notify-btn:hover {
    background: #d97706;
}

/* Light Theme */
body.light-theme .dispute-notify-box {
    background: var(--bg-1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

body.light-theme .dispute-notify-close:hover {
    background: rgba(0, 0, 0, 0.05);
}

@media (max-width: 480px) {
    .dispute-notify {
        top: auto;
        bottom: 20px;
        right: 12px;
        left: 12px;
    }
    
    .dispute-notify-box {
        max-width: none;
    }
}

/* ========================================
   Purchase Toast (Live Orders Popup)
   ======================================== */
.purchase-toast-container {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 996;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 320px;
}

.purchase-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.08) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: toastSlideIn 0.3s ease-out;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.purchase-toast.hiding {
    animation: toastSlideOut 0.3s ease-in forwards;
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}

.purchase-toast-icon {
    font-size: 18px;
}

.purchase-toast-content {
    flex: 1;
    min-width: 0;
}

.purchase-toast-user {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.purchase-toast-product {
    font-size: 12px;
    color: #d1d5db;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.purchase-toast-time {
    font-size: 10px;
    color: #6b7280;
    white-space: nowrap;
}

body.light-theme .purchase-toast {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.04) 100%);
    border-color: rgba(16, 185, 129, 0.2);
}

body.light-theme .purchase-toast-product {
    color: #4b5563;
}

@media (max-width: 480px) {
    .purchase-toast-container {
        left: 12px;
        right: 12px;
        max-width: none;
        bottom: 70px;
    }
}

/* ========================================
   Standardized Status Colors
   ======================================== */
.status-member,
.status-user {
    color: #737373;
}

.status-support {
    color: #ef4444;
}

.status-gold {
    color: var(--gold);
}

.status-vip {
    background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* User Stats Status Colors */
.user-stats-user {
    color: #737373;
}

.user-stats-gold {
    color: var(--gold);
}

.user-stats-vip {
    background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* ========================================
   Live Orders Sidebar Panel
   ======================================== */
.side-panel-orders {
    border: 1px solid rgba(16, 185, 129, 0.4);
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, var(--bg-1) 100%);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.08);
}

.side-panel-orders .side-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

body.light-theme .side-panel-orders {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, var(--bg-1) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}
body.light-theme .side-panel-orders .side-head {
    background: rgba(16, 185, 129, 0.06);
    color: #059669;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: var(--green);
    border-radius: 50%;
    animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
}

.live-orders-body {
    padding: 8px;
}

.live-order {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
        transition: background 0.2s;
}

.live-order:hover {
    background: rgba(255, 255, 255, 0.03);
}

.live-order-icon {
    font-size: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    }

.live-order-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.live-order-status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-order-row {
    display: flex;
    align-items: center;
    gap: 3px;
}

.live-order-mode {
    font-style: italic;
    font-weight: 400;
    font-size: 9px;
    color: var(--text-3);
    text-transform: lowercase;
}

.live-order-product {
    font-size: 11px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-order-time {
    font-size: 10px;
    color: var(--text-3);
    white-space: nowrap;
}

.live-orders-empty {
    text-align: center;
    color: var(--text-3);
    font-size: 11px;
    padding: 16px;
}

/* ========================================
   Improved Exclusive Offer Block
   ======================================== */
.offer-icon {
    display: inline-block;
    margin-right: 4px;
    animation: offer-icon-bounce 2s ease-in-out infinite;
}
.side-panel-offer .side-head {
    justify-content: flex-start;
}

@keyframes offer-icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.offer-badge {
    display: inline-block;
    padding: 3px 8px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    margin-bottom: 12px;
}

.offer-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 10px 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
}

.countdown-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 42px;
    padding: 8px 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
}

.countdown-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
    font-family: 'Anonymous Pro', monospace;
    line-height: 1.2;
}

.countdown-label {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: 0.5px;
    margin-top: 3px;
    text-transform: uppercase;
}

.countdown-sep {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-3);
    line-height: 1;
    margin-bottom: 12px;
}

.offer-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: var(--gold);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.15s;
}

.offer-btn:hover {
    background: var(--gold-dim);
    opacity: 0.9;
}

/* Light Theme - Offer Countdown & Button */
body.light-theme .offer-badge {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.2);
}

body.light-theme .offer-countdown {
    background: #f9fafb;
    border-color: var(--border);
}

body.light-theme .countdown-block {
    background: #fff;
    border-color: var(--border);
}

body.light-theme .countdown-value {
    color: #92700c;
}

body.light-theme .countdown-label {
    color: #9ca3af;
}

body.light-theme .countdown-sep {
    color: #d1d5db;
}

body.light-theme .offer-btn {
    background: #d4a017;
    color: #fff;
}

body.light-theme .offer-btn:hover {
    background: #b8860b;
}

.offer-empty-wrap {
    text-align: center;
    padding: 20px 10px;
}

.offer-empty-icon {
    font-size: 32px;
    margin-bottom: 10px;
    opacity: 0.5;
}

.offer-empty {
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    padding: 0;
}

.offer-empty-sub {
    color: var(--text-3);
    font-size: 11px;
}
.offer-empty-notice {
    color: var(--text-3);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.offer-vip-promo {
    text-align: left;
}
.offer-vip-title {
    color: #ec4899;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}
.offer-vip-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.offer-vip-item {
    font-size: 10px;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 6px;
}
.offer-vip-item .vip-check {
    color: #10b981;
    font-size: 9px;
}
.offer-vip-btn {
    display: block;
    margin-top: 12px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(236, 72, 153, 0.3);
    color: #ec4899;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s;
}
.offer-vip-btn:hover {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(168, 85, 247, 0.25));
    border-color: rgba(236, 72, 153, 0.5);
}
body.light-theme .offer-empty-notice {
    color: #9ca3af;
    border-color: #e5e7eb;
}
body.light-theme .offer-vip-title {
    color: #db2777;
}
body.light-theme .offer-vip-item {
    color: #6b7280;
}
body.light-theme .offer-vip-btn {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(168, 85, 247, 0.1));
    border-color: rgba(236, 72, 153, 0.2);
    color: #db2777;
}

/* Mobile meta row - hidden on desktop */
.prod-meta-mobile {
    display: none;
}

/* ========================================
   Mobile Product Layout - Horizontal Meta Line
   ======================================== */
@media (max-width: 768px) {
    .prod-head {
        display: none;
    }
    
    .prod {
        display: block;
        padding: 12px;
    }
    
    .prod-id {
        display: none;
    }
    
    .prod-item {
        display: block;
        width: 100%;
        margin-bottom: 4px;
    }
    
    .prod-name {
        white-space: normal;
        word-break: break-word;
        font-size: 13px;
        font-weight: 500;
    }
    
    /* Hide desktop meta on mobile */
    .prod-type,
    .prod-stock,
    .prod-time,
    .prod-price {
        display: none;
    }
    
    /* Show mobile meta row */
    .prod-meta-mobile {
        display: block;
        font-size: 11px;
        color: var(--text-2);
        margin-bottom: 8px;
    }
    
    .prod-meta-mobile .sep {
        color: var(--text-3);
        margin: 0 6px;
    }
    
    .prod-meta-mobile .price {
        color: var(--green);
        font-weight: 600;
    }
    
    .prod-buy,
    .prod-btn-locked,
    .prod-btn-sold,
    .prod-btn-view,
    .prod-btn-lowbal {
        display: block;
        width: 100%;
        text-align: center;
        padding: 8px 12px;
    }
    
    /* Badges on mobile */
    .prod-badge {
        font-size: 8px;
        padding: 1px 4px;
        margin-left: 4px;
    }
}

/* ========================================
   Live Orders Horizontal Bar
   ======================================== */
.live-orders-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}

.live-orders-bar::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, #10b981, transparent);
}

.live-orders-bar-head {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.live-orders-bar-head span:last-child {
    color: var(--text-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.live-dot {
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #10b981 30%, rgba(16, 185, 129, 0.3) 70%);
    border-radius: 50%;
    animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

.live-orders-bar-track {
    flex: 1;
    overflow: hidden;
    mask-image: linear-gradient(90deg, #000 0%, #000 97%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 97%, transparent);
}

.live-orders-bar-inner {
    display: flex;
    gap: 16px;
    animation: live-orders-scroll 120s linear infinite;
    width: max-content;
}

@keyframes live-orders-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.live-orders-bar:hover .live-orders-bar-inner {
    animation-play-state: paused;
}

.live-order-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
    color: var(--text-3);
}

.live-order-item:hover {
    color: var(--text);
}

.live-order-item::after {
    content: '';
    width: 3px;
    height: 3px;
    background: #10b981;
    border-radius: 50%;
    margin-left: 6px;
    opacity: 0.5;
}

.live-order-item:last-child::after {
    display: none;
}

.live-order-icon {
    display: none;
}

.live-order-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.live-order-status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #10b981;
}

.live-order-status.status-user { color: #a78bfa; }
.live-order-status.status-member { color: #a78bfa; }
.live-order-status.status-gold { color: #fbbf24; }
.live-order-status.status-vip { color: #f472b6; }

.live-order-row {
    display: flex;
    align-items: center;
    gap: 3px;
}

.live-order-mode {
    font-style: italic;
    font-weight: 400;
    font-size: 9px;
    color: var(--text-3);
    text-transform: lowercase;
}

.live-order-mode.live-order-mode-auction {
    color: #f59e0b;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-shadow: 0 0 6px rgba(245, 158, 11, 0.35);
}

body.light-theme .live-order-mode.live-order-mode-auction {
    color: #b45309;
    text-shadow: none;
}

.live-order-text {
    font-size: 12px;
    color: var(--text);
    font-weight: 500;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-order-time {
    font-size: 10px;
    color: #333;
    padding: 0;
    background: transparent;
    margin-left: 4px;
}

.live-order-item.live-order-empty {
    color: var(--text-3);
    font-size: 12px;
    padding: 10px 20px;
}

/* Light Theme */
body.light-theme .live-orders-bar {
    border-bottom-color: #e5e5e5;
}

body.light-theme .live-order-item {
    color: #737373;
}

body.light-theme .live-order-item:hover {
    color: #171717;
}

body.light-theme .live-order-time {
    color: #a3a3a3;
}

@media (max-width: 768px) {
    .live-orders-bar {
        gap: 12px;
        padding: 12px 0;
    }
    
    .live-orders-bar-track {
        width: 100%;
    }
}

/* ========================================
   Live Auctions Bar
   ======================================== */
.live-auctions-bar {
    padding: 20px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(16,185,129,0.06) 0%, rgba(59,130,246,0.04) 100%);
    position: relative;
}

.live-auctions-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #10b981, #3b82f6, #10b981);
    background-size: 200% 100%;
    animation: auc-bar-shine 4s linear infinite;
}

@keyframes auc-bar-shine {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

.live-auctions-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.live-auctions-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-auc-pulse {
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
    animation: auc-pulse 2s ease-in-out infinite;
}

@keyframes auc-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.live-auctions-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.live-auctions-count {
    font-size: 10px;
    font-weight: 600;
    color: #10b981;
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.25);
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.04em;
}

.live-auctions-all {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-decoration: none;
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 6px;
    transition: all 0.2s;
}

.live-auctions-all:hover {
    color: #10b981;
    border-color: #10b981;
    background: rgba(16,185,129,0.06);
}

.live-auctions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.live-auc-card {
    display: block;
    padding: 18px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.live-auc-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #10b981, #3b82f6);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.live-auc-card:hover {
    transform: translateY(-2px);
    border-color: rgba(16,185,129,0.4);
    box-shadow: 0 8px 24px rgba(16,185,129,0.1), 0 2px 8px rgba(0,0,0,0.15);
}

.live-auc-card:hover::after {
    transform: scaleX(1);
}

.live-auc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.live-auc-type {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #60a5fa;
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.2);
    padding: 3px 8px;
    border-radius: 4px;
}

.live-auc-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.4;
    word-break: break-word;
}

.live-auc-price {
    font-size: 26px;
    font-weight: 800;
    color: var(--gold);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.live-auc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.live-auc-timer-wrap {
    font-size: 12px;
    font-weight: 700;
    color: #ef4444;
    font-family: 'SF Mono', Monaco, monospace;
    display: flex;
    align-items: center;
    gap: 4px;
}

.live-auc-bids {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 500;
}

.live-auc-blitz {
    font-size: 10px;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.3);
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

/* Light Theme */
body.light-theme .live-auctions-bar {
    background: linear-gradient(135deg, rgba(16,185,129,0.05) 0%, rgba(59,130,246,0.03) 100%);
    border-color: #e5e5e5;
}

body.light-theme .live-auc-card {
    background: #fff;
    border-color: #e5e5e5;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

body.light-theme .live-auc-card:hover {
    box-shadow: 0 8px 24px rgba(16,185,129,0.12), 0 2px 8px rgba(0,0,0,0.08);
}

body.light-theme .live-auctions-heading {
    color: #171717;
}

body.light-theme .live-auc-title {
    color: #171717;
}

@media (max-width: 768px) {
    .live-auctions-grid {
        grid-template-columns: 1fr;
    }
    .live-auc-price {
        font-size: 22px;
    }
}

/* ========================================
   Accounts Store Page
   ======================================== */
.acc-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.acc-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 250px;
}

.acc-search-wrap {
    flex: 1;
    position: relative;
}

.acc-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--text-3);
}

.acc-search-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
}

.acc-search-input:focus {
    outline: none;
    border-color: var(--gold);
}

.acc-search-btn {
    padding: 10px 20px;
    background: var(--green);
    border: none;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.acc-search-btn:hover {
    background: #0ea472;
}

.acc-clear-btn {
    padding: 10px 16px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.acc-clear-btn:hover {
    background: var(--bg-3);
    color: var(--text);
}

.acc-filter-wrap {
    min-width: 180px;
}

.acc-filter-select {
    width: 100%;
    padding: 10px 32px 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.acc-filter-select:focus {
    outline: none;
    border-color: var(--gold);
}

.acc-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.acc-nav-link {
    padding: 8px 16px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.acc-nav-link:hover {
    background: var(--bg-3);
    color: var(--text);
}

.acc-nav-link.active {
    background: var(--green);
    border-color: var(--green);
    color: #000;
}

/* Profile Nav Dropdown */
.acc-nav-drop {
    position: relative;
    display: inline-flex;
}

.acc-nav-trigger {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.acc-nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s, visibility 0.15s;
}

.acc-nav-drop:hover .acc-nav-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.acc-nav-menu-item {
    display: block;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-2);
    text-decoration: none;
    transition: all 0.15s;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.acc-nav-menu-item:last-child {
    border-bottom: none;
}

.acc-nav-menu-item:hover {
    background: var(--bg-2);
    color: var(--text);
}

.acc-nav-menu-item.active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--green);
}

.acc-nav-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.acc-nav-menu-header {
    padding: 6px 14px;
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-2);
}

body.light-theme .acc-nav-menu {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.light-theme .acc-nav-menu-header {
    background: #f5f5f5;
}

.acc-search-results {
    padding: 10px 14px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
        font-size: 13px;
    color: var(--text-2);
    margin-bottom: 16px;
}

.acc-results-count {
    color: var(--green);
    font-weight: 600;
}

/* Panel count badge */
.panel-count {
    font-size: 11px;
    color: var(--green);
    font-weight: 500;
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.1);
}

/* Product empty state */
.prod-empty {
    text-align: center;
    padding: 60px 20px;
}

.prod-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.prod-empty-text {
    font-size: 14px;
    color: var(--text-3);
}

/* Lock timer in button */
.lock-timer {
    font-family: 'Anonymous Pro', monospace;
    font-size: 11px;
}

/* Product Badges - Icon style */
.prod-badge {
    display: inline-block;
    font-size: 9px;
    margin-left: 2px;
    vertical-align: middle;
    line-height: 1;
}

.badge-live {
    background: #10b981;
    color: #fff;
    animation: badgePulse 2s infinite;
}

.badge-blitz {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

/* WON Badge - vibrant animated trophy badge */
.prod-name .prod-badge.badge-won,
.prod-badge.badge-won {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 7px;
    margin-right: 6px;
    margin-left: 0 !important;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: 0.9px;
    line-height: 1;
    border-radius: 3px;
    text-transform: uppercase;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.55),
        0 0 6px rgba(0, 0, 0, 0.35);
    box-shadow:
        0 0 0 1px rgba(251, 191, 36, 0.7),
        0 2px 6px rgba(217, 119, 6, 0.5),
        0 0 18px rgba(245, 158, 11, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    overflow: hidden;
    isolation: isolate;
    vertical-align: middle;
    animation: wonGlow 2.4s ease-in-out infinite;
}

.prod-badge.badge-won::before {
    content: '\1F3C6';
    font-size: 11px;
    line-height: 1;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.3));
    animation: wonTrophy 2.4s ease-in-out infinite;
}

.prod-badge.badge-won::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    animation: wonShimmer 2.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes wonGlow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(251, 191, 36, 0.7),
            0 2px 6px rgba(217, 119, 6, 0.5),
            0 0 18px rgba(245, 158, 11, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(252, 211, 77, 0.95),
            0 2px 10px rgba(217, 119, 6, 0.7),
            0 0 28px rgba(252, 211, 77, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.55),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    }
}

@keyframes wonShimmer {
    0%   { left: -60%; }
    55%  { left: 130%; }
    100% { left: 130%; }
}

@keyframes wonTrophy {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25%      { transform: rotate(-8deg) scale(1.06); }
    75%      { transform: rotate(8deg) scale(1.06); }
}

/* Light theme - softer gold, darker text for contrast */
body.light-theme .prod-badge.badge-won {
    background: linear-gradient(135deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%);
    color: #5b3a08 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    box-shadow:
        0 0 0 1px rgba(245, 158, 11, 0.4),
        0 2px 5px rgba(245, 158, 11, 0.25),
        0 0 14px rgba(251, 191, 36, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body.light-theme .prod-badge.badge-won::after {
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.85) 50%,
        transparent 100%
    );
}

body.light-theme .prod-badge.badge-won {
    animation-name: wonGlowLight;
}

@keyframes wonGlowLight {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(245, 158, 11, 0.4),
            0 2px 5px rgba(245, 158, 11, 0.25),
            0 0 14px rgba(251, 191, 36, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(245, 158, 11, 0.65),
            0 3px 8px rgba(245, 158, 11, 0.4),
            0 0 22px rgba(251, 191, 36, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }
}

/* Mobile - slightly smaller */
@media (max-width: 640px) {
    .prod-badge.badge-won {
        padding: 2px 7px 2px 6px;
        font-size: 9px !important;
        gap: 3px;
        margin-right: 5px;
    }
    .prod-badge.badge-won::before {
        font-size: 10px;
    }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .prod-badge.badge-won,
    .prod-badge.badge-won::before,
    .prod-badge.badge-won::after {
        animation: none !important;
    }
    .prod-badge.badge-won::after {
        display: none;
    }
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Vault orange color */
.vault-orange {
    color: #f59e0b !important;
}

.vault-yellow {
    color: #fbbf24 !important;
}

.vault-muted {
    color: var(--text-3) !important;
}

/* Group Badges - VIP/GOLD/USER */
.group-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 4px;
}

.group-vip {
    background: linear-gradient(90deg, rgba(236, 72, 153, 0.15), rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.15));
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.group-gold {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.group-user, .group-member {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

body.light-theme .group-vip {
    background: linear-gradient(90deg, rgba(236, 72, 153, 0.1), rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
    color: #7c3aed;
}

body.light-theme .group-gold {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

body.light-theme .group-user, body.light-theme .group-member {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* Product action button (centered, neutral) */
.prod-action {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 14px;
    background: var(--bg-3);
    color: var(--text);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.2s;
}

.prod-action:hover {
    background: var(--bg-4);
    color: var(--text);
}

body.light-theme .prod-action {
    background: #e5e7eb;
    color: #374151;
}

body.light-theme .prod-action:hover {
    background: #d1d5db;
}

/* Empty state button */
.prod-empty-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 24px;
    background: var(--gold);
    color: #000;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
        transition: all 0.2s;
}

.prod-empty-btn:hover {
    background: var(--gold-dim);
    color: #000;
}

/* Vault blue color */
.vault-blue {
    color: #3b82f6 !important;
}

/* Vault red color */
.vault-red {
    color: #ef4444 !important;
}

/* Product description */
.prod-desc {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
}

/* Goods box for displaying data */
.goods-box {
    padding: 16px;
    background: var(--bg-2);
    max-height: 350px;
    overflow-y: auto;
}

.goods-text {
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    color: var(--green);
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    line-height: 1.6;
}

/* Copy button */
.copy-btn {
    padding: 6px 14px;
    background: rgba(16, 185, 129, 0.15);
    border: none;
        color: var(--green);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-btn:hover {
    background: rgba(16, 185, 129, 0.25);
}

/* Side button */
.side-btn {
    display: block;
    padding: 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
}

.side-btn:hover {
    background: var(--bg-3);
    color: var(--text);
}

/* Layout full width (no sidebar) */
.layout-full {
    display: block;
}

.layout-full > div {
    max-width: 100%;
}

/* CC Info Grid for credit card details */
.cc-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
}

.cc-info-box {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    cursor: default;
    transition: all 0.2s;
}

.cc-info-box.cp {
    cursor: pointer;
}

.cc-info-box.cp:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
}

.cc-info-box.full {
    grid-column: span 2;
}

.cc-lbl {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.cc-val {
    font-size: 13px;
    color: var(--text);
    word-break: break-all;
}

.cc-val.mono {
    font-family: 'Monaco', 'Consolas', monospace;
    color: #3b82f6;
}

@media (max-width: 640px) {
    .cc-info-grid {
        grid-template-columns: 1fr;
    }
    .cc-info-box.full {
        grid-column: span 1;
    }
}

/* Form Components */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

.form-hint {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 6px;
}

.form-submit-btn {
    width: 100%;
    padding: 14px 20px;
    background: var(--green);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.form-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.form-submit-btn.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

.form-submit-btn.btn-danger:hover {
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

/* Alert variants */
.idx-alert-success {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.idx-alert-success .idx-alert-icon {
    color: #10b981;
}

.idx-alert-danger {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.idx-alert-danger .idx-alert-icon,
.idx-alert-danger .idx-alert-title {
    color: #ef4444;
}

/* Light theme form styles */
body.light-theme .form-input,
body.light-theme .form-textarea {
    background: #fff;
    border-color: #d1d5db;
}

body.light-theme .form-input:focus,
body.light-theme .form-textarea:focus {
    border-color: var(--green);
}

/* Category panel spacing */
.category-panel {
    margin-bottom: 16px;
}

.category-panel:last-child {
    margin-bottom: 0;
}

/* Sidebar panels for accounts */
.side-panel-upgrade {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, var(--bg-1) 100%);
}

.upgrade-body {
    padding: 16px;
}

.upgrade-perks {
    margin-bottom: 14px;
}

.upgrade-perk {
    font-size: 12px;
    color: var(--text-2);
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.upgrade-perk:last-child {
    border-bottom: none;
}

.upgrade-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
        transition: all 0.2s;
}

.upgrade-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.side-panel-balance {
    border-color: rgba(16, 185, 129, 0.3);
}

.balance-body {
    padding: 20px 16px;
    text-align: center;
}

.balance-amount {
    font-size: 28px;
    font-weight: 700;
    color: var(--green);
    margin-bottom: 12px;
}

.balance-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: var(--green);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
        transition: all 0.2s;
}

.balance-btn:hover {
    background: #0ea472;
}

/* Category list in sidebar */
.cat-list {
    padding: 0;
}

.cat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}

.cat-item:last-child {
    border-bottom: none;
}

.cat-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.cat-item.active {
    background: rgba(16, 185, 129, 0.08);
    border-left: 2px solid var(--green);
}

.cat-name {
    font-size: 12px;
    color: var(--text-2);
}

.cat-item.active .cat-name {
    color: var(--text);
    font-weight: 500;
}

.cat-count {
    font-size: 11px;
    color: var(--green);
    font-weight: 600;
    padding: 2px 8px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 10px;
}

/* Info list */
.info-list {
    padding: 0;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-2);
}

.info-item:last-child {
    border-bottom: none;
}

.info-icon {
    font-size: 14px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    line-height: 1.4;
}

/* Vault link */
.vault-link {
    color: var(--green);
    text-decoration: none;
    font-weight: 500;
}

.vault-link:hover {
    text-decoration: underline;
}

/* -- Accounts Stats Vault -- */
.acc-stats-vault {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 16px;
}
.acc-stats-vault .vault-stat {
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 12px 12px;
}
.acc-stats-vault .vault-stat:last-child {
    border-right: none;
}
.acc-stats-vault .vault-val {
    font-size: 22px;
}

/* -- Accounts Alert Gap (replaces inline style) -- */
.acc-alert-gap {
    margin-bottom: 12px;
}

/* -- Accounts Category Tabs -- */
.acc-cat-tabs {
    display: flex;
    gap: 6px;
    padding: 0 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.acc-cat-tabs::-webkit-scrollbar {
    display: none;
}
.acc-cat-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
}
.acc-cat-tab:hover {
    border-color: var(--green);
    background: var(--bg-2);
}
.acc-cat-tab.active {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--green);
}
.acc-cat-tab-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    transition: color 0.2s;
}
.acc-cat-tab.active .acc-cat-tab-name {
    color: var(--text);
    font-weight: 600;
}
.acc-cat-tab-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--green);
    padding: 1px 6px;
    background: rgba(16, 185, 129, 0.12);
    border-radius: 8px;
}

/* -- Accounts Empty State -- */
.acc-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-1);
    border: 1px solid var(--border);
}
.acc-empty-icon {
    font-size: 48px;
    margin-bottom: 14px;
    opacity: 0.5;
}
.acc-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.acc-empty-text {
    font-size: 12px;
    color: var(--text-3);
}

/* -- Accounts Info Bar (bottom) -- */
.acc-info-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    margin-top: 16px;
    flex-wrap: wrap;
}
.acc-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
}
.acc-info-icon {
    font-size: 13px;
    flex-shrink: 0;
}
.acc-info-upgrade {
    margin-left: auto;
    padding: 5px 14px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.acc-info-upgrade:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);
}

/* -- Accounts Light Theme -- */
body.light-theme .acc-toolbar {
    background: var(--bg-1);
}
body.light-theme .acc-search-input,
body.light-theme .acc-filter-select {
    background: #fff;
}
body.light-theme .acc-stats-vault .vault-stat {
    border-right-color: rgba(0, 0, 0, 0.06);
}
body.light-theme .acc-cat-tab {
    background: #fff;
    border-color: #e5e7eb;
}
body.light-theme .acc-cat-tab:hover {
    background: #f9fafb;
}
body.light-theme .acc-cat-tab.active {
    background: rgba(16, 185, 129, 0.08);
    border-color: #059669;
}
body.light-theme .acc-cat-tab-name {
    color: #6b7280;
}
body.light-theme .acc-cat-tab.active .acc-cat-tab-name {
    color: #1f2937;
}
body.light-theme .acc-empty {
    background: #fff;
    border-color: #e5e7eb;
}
body.light-theme .acc-empty-title {
    color: #1f2937;
}
body.light-theme .acc-info-bar {
    background: #fff;
    border-color: #e5e7eb;
}
body.light-theme .acc-info-item {
    color: #9ca3af;
}
body.light-theme .cat-item:hover {
    background: rgba(0, 0, 0, 0.03);
}
body.light-theme .cat-item.active {
    background: rgba(16, 185, 129, 0.06);
}


/* -- Accounts Showing Count -- */
.acc-showing-count {
    font-size: 10px;
    color: var(--text-3);
    padding: 6px 14px;
    border-bottom: 1px solid var(--border);
}
.acc-showing-count span {
    color: var(--green);
    font-weight: 600;
}

body.light-theme .acc-showing-count {
    color: #9ca3af;
}

/* -- Accounts Responsive -- */
@media (max-width: 1024px) {
    .acc-stats-vault {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .acc-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .acc-search-form {
        width: 100%;
        flex-wrap: wrap;
    }
    .acc-search-wrap {
        width: 100%;
        min-width: 0;
    }
    .acc-filter-wrap {
        width: 100%;
    }
    .acc-nav-links {
        width: 100%;
        margin-left: 0;
    }
    .acc-nav-link {
        flex: 1;
        text-align: center;
    }
    .acc-cat-tabs {
        gap: 4px;
        padding-bottom: 10px;
    }
    .acc-cat-tab {
        padding: 6px 10px;
    }
    .acc-cat-tab-name {
        font-size: 11px;
    }
    .acc-cat-tab-count {
        font-size: 9px;
        padding: 1px 5px;
    }
    .acc-info-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .acc-info-upgrade {
        margin-left: 0;
        width: 100%;
        text-align: center;
        padding: 8px 14px;
    }
}
@media (max-width: 480px) {
    .acc-stats-vault {
        grid-template-columns: repeat(2, 1fr);
    }
    .acc-stats-vault .vault-val {
        font-size: 18px;
    }
}

/* ========================================
   Auction Detail Page (New Style)
   ======================================== */
.auc-detail-content {
    padding: 20px;
}

.auc-timer-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(239,68,68,0.03));
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    margin-bottom: 16px;
}

.auc-timer-icon {
    font-size: 24px;
}

.auc-timer-info {
    flex: 1;
}

.auc-timer-label {
    display: block;
    font-size: 11px;
    color: var(--text-3);
    margin-bottom: 4px;
}

.auc-timer-value {
    font-size: 22px;
    font-weight: 700;
    color: #ef4444;
    font-family: 'SF Mono', Monaco, monospace;
}

.auc-leader-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-2);
    border-radius: 8px;
    margin-bottom: 16px;
}

.auc-leader-label {
    font-size: 12px;
    color: var(--text-3);
}

.auc-leader-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.auc-you-badge {
    background: var(--green);
    color: #000;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.auc-no-leader {
    font-size: 13px;
    color: var(--text-3);
    font-style: italic;
}

.auc-description {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-2);
    border-radius: 8px;
}

.auc-desc-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.auc-desc-text {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0;
}

.auc-bidding {
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

.auc-bid-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.auc-bid-form {
    display: flex;
    flex-direction: column;
}

.auc-bid-custom {
    flex-direction: row;
    gap: 8px;
}

.auc-btn-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.auc-btn-step:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.auc-btn-step:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.auc-btn-label {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.8;
}

.auc-btn-amount {
    font-size: 18px;
    font-weight: 700;
    margin-top: 2px;
}

.auc-input-group {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    transition: border-color 0.2s;
}

.auc-input-group:focus-within {
    border-color: var(--green);
}

.auc-input-prefix {
    color: var(--text-3);
    font-weight: 500;
    margin-right: 6px;
}

.auc-input-group input {
    flex: 1;
    padding: 14px 0;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 14px;
    outline: none;
}

.auc-btn-custom {
    padding: 14px 20px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.auc-btn-custom:hover:not(:disabled) {
    background: #2563eb;
}

.auc-btn-custom:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.auc-proxy-section {
    padding: 16px;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    margin-bottom: 16px;
}

.auc-proxy-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.auc-proxy-title {
    font-size: 12px;
    font-weight: 600;
    color: #60a5fa;
}

.auc-proxy-active {
    font-size: 11px;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.15);
    padding: 4px 10px;
    border-radius: 4px;
}

.auc-proxy-form {
    display: flex;
    gap: 10px;
}

.auc-btn-proxy {
    padding: 12px 18px;
    background: #3b82f6;
    color: #fff;
    border: none;
        font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.auc-btn-proxy:hover:not(:disabled) {
    background: #2563eb;
}

.auc-btn-proxy:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.auc-proxy-cancel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0 2px;
}

.auc-proxy-cancel-note {
    font-size: 11px;
    color: #60a5fa;
    flex: 1;
}

.auc-btn-cancel-proxy {
    flex-shrink: 0;
    padding: 8px 14px;
    background: transparent;
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.auc-btn-cancel-proxy:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

body.light-theme .auc-proxy-cancel-note {
    color: #2563eb;
}

.auc-blitz-form {
    margin-top: 16px;
}

.auc-btn-blitz {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.auc-btn-blitz:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.auc-btn-blitz:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.auc-blitz-icon {
    font-size: 18px;
}

.auc-ended-box {
    text-align: center;
    padding: 40px 20px;
    background: var(--bg-2);
    border-radius: 10px;
}

.auc-ended-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.auc-ended-text {
    font-size: 14px;
    color: var(--text-3);
    margin: 0;
}

.auc-ended-text strong {
    color: var(--green);
}

/* Bid History */
.auc-bid-history {
    max-height: 350px;
    overflow-y: auto;
}

.auc-bid-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.auc-bid-item:last-child {
    border-bottom: none;
}

.auc-bid-item:hover {
    background: rgba(255,255,255,0.02);
}

.auc-bid-item.leading {
    background: linear-gradient(90deg, rgba(16,185,129,0.1), transparent);
    border-left: 3px solid var(--green);
    margin-left: -1px;
}

.auc-bid-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auc-bid-type {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 700;
    text-transform: uppercase;
}

.auc-bid-type.blitz {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.auc-bid-type.proxy {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.auc-bid-info {
    text-align: right;
}

.auc-bid-amount {
    display: block;
    font-weight: 700;
    color: var(--text);
    font-size: 13px;
}

.auc-bid-time {
    font-size: 10px;
    color: var(--text-3);
}

.auc-no-bids {
    text-align: center;
    padding: 30px 16px;
    color: var(--text-3);
    font-size: 13px;
}

/* Light theme */
body.light-theme .auc-timer-box {
    background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(239,68,68,0.02));
}

body.light-theme .auc-leader-box,
body.light-theme .auc-description,
body.light-theme .auc-ended-box {
    background: #f9fafb;
}

body.light-theme .auc-input-group {
    background: #fff;
    border-color: #d1d5db;
}

body.light-theme .auc-input-group input {
    color: #1f2937;
}

body.light-theme .auc-bid-item:hover {
    background: rgba(0,0,0,0.02);
}

body.light-theme .auc-bid-item.leading {
    background: linear-gradient(90deg, rgba(16,185,129,0.08), transparent);
}

/* Responsive */
@media (max-width: 768px) {
    .auc-bid-grid {
        grid-template-columns: 1fr;
    }
    
    .auc-bid-custom {
        flex-direction: column;
    }
    
    .auc-btn-custom {
        width: 100%;
    }
    
    .auc-proxy-form {
        flex-direction: column;
    }
    
    .auc-btn-proxy {
        width: 100%;
    }
}

/* ==================== Free CC Page ==================== */
.free-content {
    padding: 16px;
}

.free-grid {
    display: grid;
    gap: 12px;
}

.free-grid-2 { grid-template-columns: repeat(2, 1fr); }
.free-grid-3 { grid-template-columns: repeat(3, 1fr); }

.free-card-box {
    background: var(--bg-2);
    border: 1px solid var(--border);
        padding: 14px;
}

.free-card-box code {
    display: block;
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    color: var(--green);
    word-break: break-all;
    line-height: 1.5;
}

.free-locked-box {
    text-align: center;
    padding: 30px 20px;
    background: var(--bg-2);
    }

.free-locked-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.free-locked-text {
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .free-grid-2, .free-grid-3 { grid-template-columns: 1fr; }
}

/* ==================== Leak Lookup Page ==================== */
.ll-search-body, .ll-results-body, .ll-example-body {
    padding: 16px;
}

.ll-form-row {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 12px;
    margin-bottom: 16px;
}

.ll-form-field { display: flex; flex-direction: column; gap: 6px; }

.ll-search-btn, .ll-purchase-btn {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ll-results-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ll-results-count {
    font-size: 32px;
    font-weight: 700;
    color: var(--green);
}

.ll-results-label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
}

.ll-results-avail {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-3);
}

.ll-purchase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.ll-purchase-box {
    background: var(--bg-2);
    border: 1px solid var(--border);
        padding: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.ll-purchase-box:hover { border-color: var(--gold); }
.ll-purchase-box.selected { border-color: var(--gold); background: rgba(245, 158, 11, 0.1); }

.ll-box-title { font-size: 10px; color: var(--text-3); text-transform: uppercase; margin-bottom: 4px; }
.ll-box-count { font-size: 20px; font-weight: 700; color: var(--text-1); }
.ll-box-price { font-size: 12px; color: var(--green); font-weight: 600; }

.ll-example-row {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.ll-example-row:last-child { border-bottom: none; }
.ll-example-label { color: var(--text-3); min-width: 80px; }
.ll-example-row code { color: var(--green); font-family: 'Roboto Mono', monospace; }

.ll-pricing-list { padding: 0; }

.ll-pricing-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.ll-pricing-item:last-child { border-bottom: none; }
.ll-pricing-val { font-size: 14px; font-weight: 700; color: var(--green); }
.ll-pricing-gold { color: var(--gold); }
.ll-pricing-vip { color: var(--pink); }

@media (max-width: 768px) {
    .ll-form-row { grid-template-columns: 1fr; }
    .ll-purchase-grid { grid-template-columns: 1fr; }
    .ll-results-avail { margin-left: 0; width: 100%; }
}

/* ==================== Premium Proxy Page ==================== */
.pp-filters-body {
    padding: 16px;
}

.pp-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.pp-filter-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pp-filter-btn {
    justify-content: flex-end;
}

.pp-filter-btn .prod-buy {
    height: 38px;
}

.pp-page-btn {
    padding: 8px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
        color: var(--text-3);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.pp-page-btn:hover {
    border-color: var(--green);
    color: var(--green);
}

.pp-page-btn.active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

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

/* Premium Proxy Columns */
.pp-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pp-col-ip {
    flex: 0 0 120px;
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
}

.pp-col-country {
    flex: 0 0 50px;
    font-size: 11px;
}

.pp-col-city {
    flex: 0 0 80px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-col-isp {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-col-type {
    flex: 0 0 50px;
    text-align: center;
}

.pp-col-speed {
    flex: 0 0 70px;
    font-size: 11px;
    color: var(--text-3);
    text-align: right;
}

.pp-col-price {
    flex: 0 0 70px;
    color: var(--green);
    font-weight: 600;
    text-align: right;
}

.pp-col-action {
    flex: 0 0 60px;
    text-align: right;
}

@media (max-width: 992px) {
    .pp-row .pp-col-city, .pp-row .pp-col-isp, .pp-row .pp-col-speed { display: none; }
    .pp-col-ip { flex: 1; }
}

/* Pagination Wrapper */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding: 16px 0;
}

.pagination-wrapper .pagination {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination-wrapper .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
        color: var(--text-2);
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}

.pagination-wrapper .page-item .page-link:hover {
    background: var(--bg-3);
    border-color: var(--green);
    color: var(--green);
}

.pagination-wrapper .page-item.active .page-link {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.pagination-wrapper .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== SSN Card Visual ==================== */
.ssn-card-visual {
    padding: 16px;
    margin: 12px;
    border-radius: 10px;
    min-height: 120px;
    background: linear-gradient(135deg, #1e1e3f 0%, #0d0d1f 100%);
    border: 1px solid rgba(236, 72, 153, 0.2);
}

.ssn-visual-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ssn-badge {
    font-size: 10px;
    font-weight: 800;
    color: #ec4899;
    background: rgba(236, 72, 153, 0.2);
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
}

.ssn-gender {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}

.ssn-gender.male {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.2);
}

.ssn-gender.female {
    color: #f472b6;
    background: rgba(244, 114, 182, 0.2);
}

.ssn-number {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    font-family: 'Roboto Mono', monospace;
    margin-bottom: 6px;
}

.ssn-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 12px;
}

.ssn-visual-bottom {
    display: flex;
    gap: 16px;
}

.ssn-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ssn-field-label {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.ssn-field-val {
    font-size: 12px;
    color: #fff;
    font-weight: 600;
}

body.light-theme .ssn-card-visual {
    background: linear-gradient(135deg, #f0f0ff 0%, #e8e8f8 100%);
    border-color: rgba(236, 72, 153, 0.15);
}

body.light-theme .ssn-number,
body.light-theme .ssn-name,
body.light-theme .ssn-field-val {
    color: #1f2937;
}

body.light-theme .ssn-field-label {
    color: rgba(0, 0, 0, 0.4);
}

/* ==================== Profile Navigation ==================== */
.profile-nav-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 16px 20px;
    margin-bottom: 24px;
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.pnav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-3);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pnav-item:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--border);
    color: var(--text-1);
    transform: translateY(-1px);
}

.pnav-item.active {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    border-color: #ec4899;
    color: #fff;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
}

.pnav-item.pnav-gold:not(.active) {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.pnav-item.pnav-gold:not(.active):hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
}

.pnav-icon {
    font-size: 14px;
    line-height: 1;
}

.pnav-text {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .profile-nav-modern { padding: 12px; gap: 4px; }
    .pnav-item { padding: 8px 12px; font-size: 12px; }
    .pnav-icon { font-size: 12px; }
}

@media (max-width: 480px) {
    .pnav-item {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        padding: 10px 8px;
    }
}

body.light-theme .profile-nav-modern {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border-color: #e5e5e5;
}

body.light-theme .pnav-item {
    background: rgba(0,0,0,0.02);
    color: #6b7280;
}

body.light-theme .pnav-item:hover {
    background: rgba(0,0,0,0.05);
    border-color: #d1d5db;
    color: #1f2937;
}

body.light-theme .pnav-item.pnav-gold:not(.active) {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

/* ==================== Profile Page Hero ==================== */
.prf-hero {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.08) 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    padding: 24px 0;
    margin-bottom: 24px;
}

.prf-hero-content { display: flex; align-items: center; gap: 16px; }

.prf-hero-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.prf-hero-text { flex: 1; }
.prf-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.prf-hero-subtitle { font-size: 13px; color: var(--text-3); margin: 0; }
.prf-hero-stats { display: flex; gap: 16px; }

.prf-hero-stat {
    text-align: center;
    padding: 10px 20px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
}

.prf-hero-stat-num { display: block; font-size: 22px; font-weight: 700; color: #60a5fa; }
.prf-hero-stat-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; }

body.light-theme .prf-hero {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
    border-color: rgba(59, 130, 246, 0.15);
}

body.light-theme .prf-hero-title { color: #1a1a1a; }

@media (max-width: 768px) {
    .prf-hero-content { flex-direction: column; align-items: flex-start; }
    .prf-hero-icon { width: 48px; height: 48px; font-size: 24px; }
    .prf-hero-title { font-size: 20px; }
    .prf-hero-stats { width: 100%; }
}

/* ==================== Profile Sections ==================== */
.profile-section {
    background: var(--bg-1);
    border: 1px solid var(--border);
    padding: 28px;
    margin-bottom: 20px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid #1a1a1a;
}

.section-icon {
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}

.section-icon.icon-success { background: rgba(16, 185, 129, 0.15); }
.section-icon.icon-warning { background: rgba(245, 158, 11, 0.15); }
.section-icon.icon-info { background: rgba(59, 130, 246, 0.15); }
.section-icon.icon-danger { background: rgba(239, 68, 68, 0.15); }

.section-title { font-size: 16px; font-weight: 600; color: #fafafa; flex: 1; }

.settings-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.settings-row .profile-section { margin-bottom: 0; }

.status-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.success { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.status-badge.warning { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.status-badge.neutral { background: rgba(115, 115, 115, 0.15); color: #a3a3a3; }

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.info-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid #1a1a1a;
    border-radius: 10px;
    padding: 16px;
}

.info-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #737373;
    margin-bottom: 8px;
}

.info-value { font-size: 15px; font-weight: 600; color: #fafafa; }
.info-value.code { font-family: 'Roboto Mono', monospace; font-size: 13px; color: #10b981; }
.info-value.balance { color: #10b981; font-size: 18px; }
.info-value.status-active { color: #34d399; }
.info-value.status-vip { color: #ec4899; }
.info-value.status-inactive { color: #525252; }

.form-row { margin-bottom: 20px; }

.form-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #a3a3a3;
    margin-bottom: 10px;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    color: #fafafa;
    font-size: 14px;
    transition: all 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.input-with-prefix {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s;
}

.input-with-prefix:focus-within {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.input-prefix { padding: 14px 0 14px 16px; color: #525252; font-size: 14px; }
.form-input.with-prefix { border: none; background: transparent; padding-left: 4px; }
.form-input.with-prefix:focus { background: transparent; }

.info-box {
    display: flex;
    gap: 14px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.info-box-icon { font-size: 20px; }
.info-box-title { font-size: 13px; font-weight: 600; color: #93c5fd; margin-bottom: 4px; }
.info-box-text { font-size: 13px; color: #737373; line-height: 1.5; }

.requirements-box {
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.req-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #737373;
    margin-bottom: 10px;
}

.req-list { display: flex; flex-wrap: wrap; gap: 8px; }

.req-item {
    padding: 4px 10px;
    background: rgba(255,255,255,0.05);
        font-size: 12px;
    color: #a3a3a3;
}

.setup-steps {
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.step-title { font-size: 13px; font-weight: 600; color: #a78bfa; margin-bottom: 16px; }
.steps-list { display: flex; flex-direction: column; gap: 12px; }
.step { display: flex; align-items: flex-start; gap: 12px; }

.step-num {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 50%;
    font-size: 12px; font-weight: 600;
    color: #a78bfa;
    flex-shrink: 0;
}

.step-text { font-size: 13px; color: #a3a3a3; line-height: 1.5; }
.step-text a { color: #8b5cf6; text-decoration: none; font-weight: 500; }
.step-text code { padding: 2px 6px; background: rgba(255,255,255,0.1); border-radius: 4px; font-family: monospace; color: #fafafa; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
}

.recovery-section.recovery-disabled { opacity: 0.6; }

.recovery-text { font-size: 14px; color: #a3a3a3; line-height: 1.6; margin-bottom: 16px; }

.warning-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    font-size: 13px;
    color: #fca5a5;
    margin-bottom: 20px;
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-danger:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35); }

.btn-disabled {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    color: #525252;
    font-size: 13px;
    font-weight: 600;
    cursor: not-allowed;
}

.btn-price {
    padding: 4px 10px;
    background: rgba(255,255,255,0.1);
        font-size: 12px;
}

@media (max-width: 1024px) {
    .settings-row { grid-template-columns: 1fr; }
    .settings-row .profile-section { margin-bottom: 0; }
}

@media (max-width: 640px) {
    .profile-section { padding: 20px; }
    .section-header { flex-wrap: wrap; }
    .profile-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-list { gap: 10px; }
}

body.light-theme .profile-section {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border-color: #e5e5e5;
}

body.light-theme .section-header { border-bottom-color: #e5e5e5; }
body.light-theme .section-title { color: #1a1a1a; }
body.light-theme .section-icon { background: rgba(0,0,0,0.05); }
body.light-theme .section-icon.icon-success { background: rgba(16, 185, 129, 0.12); }
body.light-theme .section-icon.icon-warning { background: rgba(245, 158, 11, 0.12); }
body.light-theme .section-icon.icon-info { background: rgba(59, 130, 246, 0.12); }
body.light-theme .section-icon.icon-danger { background: rgba(239, 68, 68, 0.12); }

body.light-theme .status-badge.success { background: rgba(16, 185, 129, 0.12); color: #059669; }
body.light-theme .status-badge.warning { background: rgba(245, 158, 11, 0.12); color: #d97706; }
body.light-theme .status-badge.neutral { background: rgba(0, 0, 0, 0.06); color: #6b7280; }

body.light-theme .info-card { background: rgba(0,0,0,0.02); border-color: #e5e5e5; }
body.light-theme .info-label { color: #6b7280; }
body.light-theme .info-value { color: #1a1a1a; }
body.light-theme .info-value.code { color: #059669; }
body.light-theme .info-value.balance { color: #059669; }
body.light-theme .info-value.status-active { color: #059669; }
body.light-theme .info-value.status-vip { color: #db2777; }
body.light-theme .info-value.status-inactive { color: #9ca3af; }
body.light-theme .form-label { color: #374151; }

body.light-theme .form-input {
    background: #ffffff;
    border-color: #d1d5db;
    color: #1a1a1a;
}

body.light-theme .form-input:focus {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.03);
}

body.light-theme .form-input::placeholder { color: #9ca3af; }

body.light-theme .input-with-prefix { background: #ffffff; border-color: #d1d5db; }
body.light-theme .input-with-prefix:focus-within { border-color: #10b981; background: rgba(16, 185, 129, 0.03); }
body.light-theme .input-prefix { color: #9ca3af; }

body.light-theme .info-box { background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.15); }
body.light-theme .info-box-title { color: #2563eb; }
body.light-theme .info-box-text { color: #6b7280; }

body.light-theme .requirements-box { background: rgba(0,0,0,0.02); }
body.light-theme .req-title { color: #6b7280; }
body.light-theme .req-item { background: rgba(0,0,0,0.04); color: #374151; }

body.light-theme .setup-steps { background: rgba(139, 92, 246, 0.04); border-color: rgba(139, 92, 246, 0.12); }
body.light-theme .step-title { color: #7c3aed; }
body.light-theme .step-num { background: rgba(139, 92, 246, 0.15); color: #7c3aed; }
body.light-theme .step-text { color: #6b7280; }
body.light-theme .step-text a { color: #7c3aed; }
body.light-theme .step-text code { background: rgba(0,0,0,0.06); color: #1a1a1a; }

body.light-theme .recovery-text { color: #6b7280; }
body.light-theme .warning-box { background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.15); color: #dc2626; }
body.light-theme .btn-disabled { background: #f3f4f6; border-color: #e5e5e5; color: #9ca3af; }
body.light-theme .btn-price { background: rgba(0,0,0,0.06); }
body.light-theme .secret-hint { background: rgba(255, 255, 255, 0.85); color: #6b7280; }

/* ==================== My Purchases Hero ==================== */
.mp-hero {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.08) 100%);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
    padding: 24px 0;
    margin-bottom: 24px;
}

.mp-hero-content { display: flex; align-items: center; gap: 16px; }

.mp-hero-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.mp-hero-text { flex: 1; }
.mp-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.mp-hero-subtitle { font-size: 13px; color: #a3a3a3; margin: 0; }
.mp-hero-stats { display: flex; gap: 16px; }

.mp-hero-stat {
    text-align: center;
    padding: 10px 20px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 10px;
}

.mp-hero-stat-num { display: block; font-size: 22px; font-weight: 700; color: #34d399; }
.mp-hero-stat-label { font-size: 11px; color: #a3a3a3; text-transform: uppercase; }

body.light-theme .mp-hero { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%); border-color: rgba(16, 185, 129, 0.15); }
body.light-theme .mp-hero-title { color: #1a1a1a; }
body.light-theme .mp-hero-subtitle { color: #6b7280; }
body.light-theme .mp-hero-stat { background: rgba(16, 185, 129, 0.08); }

.mp-nav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.mp-nav-link { padding: 8px 16px; font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.2s; }
.mp-nav-link.active { background: #10b981; color: #fff; }
.mp-nav-link:not(.active) { background: #262626; color: #a3a3a3; }
.mp-nav-link:not(.active):hover { background: #333; color: #fafafa; }
body.light-theme .mp-nav-link:not(.active) { background: #f3f4f6; color: #6b7280; }
body.light-theme .mp-nav-link:not(.active):hover { background: #e5e7eb; color: #1f2937; }

.mp-section { background: #171717; border: 1px solid #262626; border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.mp-table-wrap { overflow-x: auto; }
.mp-table { width: 100%; border-collapse: collapse; }
.mp-table th { padding: 14px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #737373; text-transform: uppercase; background: #0a0a0a; }
.mp-table td { padding: 14px 16px; font-size: 13px; color: #a3a3a3; border-bottom: 1px solid #262626; }
.mp-table tr:last-child td { border-bottom: none; }
.mp-cell-product { color: #fafafa; font-weight: 500; }
.mp-cell-price { color: #10b981; font-weight: 600; }
.mp-cell-seller { font-family: monospace; color: #34d399; font-size: 12px; }
.mp-cell-date { color: #737373; }
.mp-cell-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-badge-cat { padding: 4px 10px; background: rgba(16, 185, 129, 0.15); color: #34d399; border-radius: 4px; font-size: 10px; font-weight: 600; }

.mp-badge { padding: 4px 10px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.mp-badge.processing { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.mp-badge.delivered { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.mp-badge.completed { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.mp-badge.disputed { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.mp-badge.refunded { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }

.mp-btn-view { padding: 6px 12px; background: linear-gradient(135deg, #10b981, #059669); color: #fff; border-radius: 5px; font-size: 11px; font-weight: 500; text-decoration: none; }
.mp-btn-view:hover { opacity: 0.9; color: #fff; }
.mp-btn-disabled { padding: 6px 12px; background: #262626; color: #525252; border-radius: 5px; font-size: 11px; font-weight: 500; }
.mp-btn-dispute { padding: 6px 12px; background: rgba(239, 68, 68, 0.15); color: #f87171; border-radius: 5px; font-size: 11px; font-weight: 500; text-decoration: none; border: 1px solid rgba(239, 68, 68, 0.3); }
.mp-btn-dispute:hover { background: rgba(239, 68, 68, 0.25); color: #f87171; }

.mp-empty { text-align: center; padding: 60px 20px; background: #171717; border: 1px solid #262626; border-radius: 12px; }
.mp-empty-icon { font-size: 48px; margin-bottom: 16px; }
.mp-empty h3 { font-size: 18px; color: #fafafa; margin: 0 0 8px 0; }
.mp-empty p { font-size: 13px; color: #737373; margin: 0 0 20px 0; }
.mp-btn-browse { display: inline-block; padding: 12px 28px; background: linear-gradient(135deg, #10b981, #059669); color: #fff; border-radius: 8px; font-weight: 600; text-decoration: none; }

body.light-theme .mp-section { background: #fff; border-color: #e5e7eb; }
body.light-theme .mp-table th { background: #f9fafb; }
body.light-theme .mp-table td { border-color: #e5e7eb; }
body.light-theme .mp-cell-product { color: #1a1a1a; }
body.light-theme .mp-empty { background: #fff; border-color: #e5e7eb; }
body.light-theme .mp-empty h3 { color: #1a1a1a; }
body.light-theme .mp-btn-disabled { background: #f3f4f6; color: #9ca3af; }

@media (max-width: 640px) {
    .mp-hero-content { flex-direction: column; align-items: flex-start; }
    .mp-hero-icon { width: 48px; height: 48px; font-size: 24px; }
    .mp-hero-title { font-size: 20px; }
    .mp-hero-stats { width: 100%; }
}

/* ==================== Membership Page ==================== */
.mem-hero {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(168, 85, 247, 0.08) 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    padding: 24px 0;
    margin-bottom: 24px;
}

.mem-hero-content { display: flex; align-items: center; gap: 16px; }

.mem-hero-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.mem-hero-text { flex: 1; }
.mem-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.mem-hero-subtitle { font-size: 13px; color: #a3a3a3; margin: 0; }
.mem-hero-stats { display: flex; gap: 12px; }

.mem-hero-stat {
    text-align: center;
    padding: 10px 16px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 10px;
}

.mem-hero-stat.gold { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.2); }
.mem-hero-stat.vip { background: rgba(236, 72, 153, 0.1); border-color: rgba(236, 72, 153, 0.2); }

.mem-hero-stat-num { display: block; font-size: 18px; font-weight: 700; color: #a78bfa; }
.mem-hero-stat.gold .mem-hero-stat-num { color: #fbbf24; }
.mem-hero-stat.vip .mem-hero-stat-num { color: #f472b6; }
.mem-hero-stat-label { font-size: 10px; color: #a3a3a3; text-transform: uppercase; }

body.light-theme .mem-hero { background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%); border-color: rgba(139, 92, 246, 0.15); }
body.light-theme .mem-hero-title { color: #1a1a1a; }

@media (max-width: 768px) {
    .mem-hero-content { flex-direction: column; align-items: flex-start; }
    .mem-hero-stats { width: 100%; }
}

.membership-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.member-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.member-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
}

.member-card.gold::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.member-card.vip::before { background: linear-gradient(90deg, #ec4899, #8b5cf6); }
.member-card:hover { transform: translateY(-4px); border-color: #2a2a2a; }

.member-badge {
    display: inline-block;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.member-badge.gold { background: linear-gradient(135deg, #f59e0b, #d97706); color: #000; }
.member-badge.vip { background: linear-gradient(135deg, #ec4899, #8b5cf6); color: #fff; }

.member-discount-badge {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
        margin-bottom: 12px;
    animation: pulse-discount 2s infinite;
}

@keyframes pulse-discount { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.member-price { margin-bottom: 24px; }
.price-old { font-size: 24px; color: #525252; text-decoration: line-through; margin-right: 8px; font-weight: 400; }
.price-currency { font-size: 20px; color: #737373; vertical-align: top; }
.price-value { font-size: 48px; font-weight: 700; color: #fafafa; line-height: 1; }
.price-period { font-size: 14px; color: #737373; }

.member-features { list-style: none; padding: 0; margin: 0 0 28px 0; }
.member-features li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 13px; color: #a3a3a3; border-bottom: 1px solid #1a1a1a; }
.member-features li:last-child { border-bottom: none; }
.member-features .check { color: #10b981; font-weight: 700; flex-shrink: 0; }

.member-btn {
    display: block;
    width: 100%;
    padding: 16px 24px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.member-btn.gold { background: linear-gradient(135deg, #f59e0b, #d97706); color: #000; box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3); }
.member-btn.gold:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(245, 158, 11, 0.4); }
.member-btn.vip { background: linear-gradient(135deg, #ec4899, #8b5cf6); color: #fff; box-shadow: 0 4px 20px rgba(236, 72, 153, 0.3); }
.member-btn.vip:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(236, 72, 153, 0.4); }
.member-btn.disabled { background: #1a1a1a; color: #525252; cursor: not-allowed; box-shadow: none; }

@media (max-width: 768px) {
    .membership-row { gap: 16px; }
    .member-card { padding: 24px; }
    .price-value { font-size: 36px; }
    .member-features li { font-size: 12px; padding: 8px 0; }
}

body.light-theme .member-card { background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); border-color: #e5e5e5; }
body.light-theme .member-card:hover { border-color: #d1d5db; }
body.light-theme .price-value { color: #1a1a1a; }
body.light-theme .price-currency, body.light-theme .price-period { color: #9ca3af; }
body.light-theme .member-features li { color: #4b5563; border-bottom-color: #f3f4f6; }
body.light-theme .member-btn.disabled { background: #f3f4f6; color: #9ca3af; }

/* ==================== Premium Membership Page ==================== */
@keyframes mem-fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mem-glow-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes mem-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes mem-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.mem-premium-hero {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    border: 1px solid #262626;
    padding: 48px 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    animation: mem-fade-in 0.6s ease-out;
}
.mem-premium-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at top center, rgba(139, 92, 246, 0.1) 0%, transparent 60%);
    pointer-events: none;
    animation: mem-glow-pulse 4s ease-in-out infinite;
}
.mem-hero-content { position: relative; z-index: 1; text-align: center; }
.mem-hero-badge { margin-bottom: 20px; animation: mem-fade-in 0.6s ease-out 0.1s both; }
.mem-status-badge {
    display: inline-block;
    padding: 8px 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: transform 0.3s, box-shadow 0.3s;
}
.mem-status-badge:hover { transform: scale(1.05); }
.mem-status-badge.vip { background: linear-gradient(135deg, #ec4899, #8b5cf6); color: #fff; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3); }
.mem-status-badge.gold { background: linear-gradient(135deg, #f59e0b, #d97706); color: #000; box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3); }
.mem-status-badge.standard { background: #262626; color: #737373; border: 1px solid #404040; }
.mem-hero-title {
    font-size: 32px;
    font-weight: 700;
    color: #fafafa;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    animation: mem-fade-in 0.6s ease-out 0.2s both;
}
.mem-hero-subtitle {
    font-size: 15px;
    color: #737373;
    margin-bottom: 32px;
    animation: mem-fade-in 0.6s ease-out 0.3s both;
}
.mem-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 32px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #262626;
    padding: 20px 40px;
    animation: mem-fade-in 0.6s ease-out 0.4s both;
    transition: border-color 0.3s, background 0.3s;
}
.mem-hero-stats:hover { border-color: #404040; background: rgba(0, 0, 0, 0.5); }
.mem-hero-stat { text-align: center; }
.mem-hero-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #10b981;
    margin-bottom: 4px;
    transition: transform 0.3s;
}
.mem-hero-stat:hover .mem-hero-stat-value { transform: scale(1.1); }
.mem-hero-stat-label {
    font-size: 11px;
    color: #737373;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.mem-hero-stat-divider {
    width: 1px;
    height: 40px;
    background: #262626;
}
.mem-plans-container { max-width: 900px; margin: 0 auto 32px; }
.mem-plans-header { text-align: center; margin-bottom: 32px; }
.mem-plans-title {
    font-size: 24px;
    font-weight: 700;
    color: #fafafa;
    margin-bottom: 8px;
}
.mem-plans-subtitle {
    font-size: 14px;
    color: #737373;
}
.mem-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
}
.mem-plans-grid.mem-plans-2col {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) {
    .mem-plans-grid.mem-plans-2col {
        grid-template-columns: repeat(2, 1fr);
    }
    .mem-plans-grid.mem-plans-2col .mem-plan-card.seller {
        grid-column: 1 / -1;
        max-width: 500px;
        margin: 0 auto;
    }
}
@media (max-width: 768px) {
    .mem-plans-grid.mem-plans-2col {
        grid-template-columns: 1fr;
    }
    .mem-plans-grid.mem-plans-2col .mem-plan-card,
    .mem-plans-grid.mem-plans-2col .mem-plan-card.seller {
        width: 100%;
        max-width: 100%;
    }
}
.mem-plan-card {
    background: #0a0a0a;
    border: 1px solid #262626;
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mem-plan-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: mem-border-shimmer 4s ease-in-out infinite;
}
@keyframes mem-border-shimmer {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}
.mem-plan-card:hover {
    border-color: #404040;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.mem-plan-card.gold { background: linear-gradient(180deg, rgba(245, 158, 11, 0.03) 0%, #0a0a0a 30%); }
.mem-plan-card.gold::before { background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.4), transparent); }
.mem-plan-card.gold:hover { border-color: rgba(245, 158, 11, 0.4); box-shadow: 0 20px 40px rgba(245, 158, 11, 0.15); }
.mem-plan-card.vip { border-color: rgba(139, 92, 246, 0.3); background: linear-gradient(180deg, rgba(139, 92, 246, 0.03) 0%, #0a0a0a 30%); }
.mem-plan-card.vip::before { background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.5), transparent); animation-delay: 2s; }
.mem-plan-card.vip:hover { border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 20px 40px rgba(139, 92, 246, 0.15); }
.mem-plan-card.seller { border-color: rgba(16, 185, 129, 0.3); background: linear-gradient(180deg, rgba(16, 185, 129, 0.03) 0%, #0a0a0a 30%); }
.mem-plan-card.seller::before { background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.5), transparent); animation-delay: 1s; }
.mem-plan-card.seller:hover { border-color: rgba(16, 185, 129, 0.5); box-shadow: 0 20px 40px rgba(16, 185, 129, 0.15); }
.mem-plan-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.mem-plan-card:hover .mem-plan-glow { opacity: 1; }
.mem-plan-glow.gold { background: radial-gradient(circle at center, rgba(245, 158, 11, 0.08) 0%, transparent 50%); }
.mem-plan-glow.vip { background: radial-gradient(circle at center, rgba(139, 92, 246, 0.1) 0%, transparent 50%); }
.mem-plan-glow.seller { background: radial-gradient(circle at center, rgba(16, 185, 129, 0.1) 0%, transparent 50%); }
.mem-plan-popular {
    position: absolute;
    top: 24px;
    right: -42px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 8px 55px;
    transform: rotate(45deg);
    text-align: center;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.4);
    animation: mem-glow-pulse 2s ease-in-out infinite;
    white-space: nowrap;
}
.mem-plan-header { text-align: center; margin-bottom: 24px; position: relative; z-index: 1; }
.mem-plan-icon { 
    font-size: 40px; 
    margin-bottom: 12px; 
    display: inline-block;
    animation: mem-float 3s ease-in-out infinite;
}
.mem-plan-name {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 4px;
}
.mem-plan-card.gold .mem-plan-name { color: #f59e0b; }
.mem-plan-card.vip .mem-plan-name { background: linear-gradient(135deg, #ec4899, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.mem-plan-card.seller .mem-plan-name { color: #10b981; }
.mem-plan-icon.seller { color: #10b981; }
.mem-price-main.seller { color: #10b981; }
.mem-plan-tagline {
    font-size: 12px;
    color: #737373;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.mem-plan-sale {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}
.mem-sale-badge {
    background: #10b981;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 4px 8px;
    letter-spacing: 1px;
}
.mem-sale-badge.vip { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.mem-sale-percent {
    font-size: 16px;
    font-weight: 700;
    color: #10b981;
}
.mem-sale-percent.vip { color: #a855f7; }
.mem-plan-pricing { text-align: center; margin-bottom: 28px; position: relative; z-index: 1; }
.mem-price-old {
    font-size: 18px;
    color: #525252;
    text-decoration: line-through;
    margin-bottom: 4px;
}
.mem-price-main { display: flex; align-items: flex-start; justify-content: center; gap: 2px; }
.mem-price-currency {
    font-size: 24px;
    font-weight: 600;
    color: #737373;
    margin-top: 8px;
}
.mem-price-amount {
    font-size: 56px;
    font-weight: 700;
    color: #fafafa;
    line-height: 1;
}
.mem-price-main.vip .mem-price-amount { 
    background: linear-gradient(135deg, #ec4899, #8b5cf6, #ec4899); 
    background-size: 200% 100%;
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text;
    animation: mem-gradient-shift 3s ease-in-out infinite;
}
@keyframes mem-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.mem-price-period {
    font-size: 13px;
    color: #737373;
    margin-top: 8px;
}
.mem-vip-next-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 12px 0 8px;
    padding: 10px 14px;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.2);
}
.mem-next-label {
    font-size: 11px;
    color: #737373;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mem-next-value {
    font-size: 18px;
    font-weight: 700;
    color: #a855f7;
}
.mem-next-hint {
    font-size: 10px;
    color: #525252;
    text-align: center;
}
.mem-plan-features {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}
.mem-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 13px;
    color: #a3a3a3;
    border-bottom: 1px solid #1a1a1a;
}
.mem-feature:last-child { border-bottom: none; }
.mem-feature.highlight { color: #fafafa; }
.mem-feature-icon {
    flex-shrink: 0;
    width: 18px;
    font-size: 12px;
    color: #10b981;
    text-align: center;
}
.mem-feature-icon.vip { color: #a855f7; }
.mem-plan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.mem-plan-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-25deg);
    animation: mem-btn-shine 4s ease-in-out infinite;
}
@keyframes mem-btn-shine {
    0%, 100% { left: -100%; }
    50%, 55% { left: 150%; }
}
.mem-plan-btn.gold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    box-shadow: 0 4px 24px rgba(245, 158, 11, 0.25);
}
.mem-plan-btn.gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.35);
}
.mem-plan-btn.vip {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 24px rgba(139, 92, 246, 0.25);
}
.mem-plan-btn.vip::after { animation-delay: 2s; }
.mem-plan-btn.vip:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.35);
}
.mem-plan-btn.seller {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 4px 24px rgba(16, 185, 129, 0.25);
}
.mem-plan-btn.seller::after { animation-delay: 1s; }
.mem-plan-btn.seller:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.35);
}
.mem-seller-ranks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
    margin: 0 -4px 12px;
    background: rgba(16, 185, 129, 0.04);
    border: 1px solid rgba(16, 185, 129, 0.1);
}
.mem-seller-rank-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 3px 8px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
}
.mem-seller-rank-name {
    font-weight: 700;
    font-size: 11px;
}
.mem-seller-rank-info {
    color: var(--text-2);
    font-size: 10px;
}
.mem-seller-rules-link {
    display: block;
    text-align: center;
    padding: 8px;
    margin-bottom: 12px;
    color: #10b981;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px dashed rgba(16, 185, 129, 0.3);
    transition: all 0.15s;
}
.mem-seller-rules-link:hover {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.5);
}
body.light-theme .mem-seller-ranks {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.15);
}
body.light-theme .mem-seller-rank-item {
    background: #fff;
    border-color: #dee2e6;
}
body.light-theme .mem-seller-rank-info {
    color: #6c757d;
}
.mem-plan-btn.disabled {
    background: #1a1a1a;
    color: #525252;
    cursor: not-allowed;
    box-shadow: none;
}
.mem-plan-btn.disabled::after { display: none; }
.mem-btn-arrow { font-size: 16px; transition: transform 0.2s; }
.mem-plan-btn:hover .mem-btn-arrow { transform: translateX(4px); }
.mem-chat-access {
    max-width: 600px;
    margin: 0 auto 32px;
    background: #0a0a0a;
    border: 1px solid #262626;
    overflow: hidden;
}
.mem-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
    border-bottom: 1px solid #262626;
}
.mem-chat-icon { font-size: 20px; }
.mem-chat-title {
    font-size: 14px;
    font-weight: 600;
    color: #fafafa;
}
.mem-chat-body { padding: 24px; text-align: center; }
.mem-chat-desc {
    font-size: 14px;
    color: #a3a3a3;
    margin-bottom: 20px;
}
.mem-chat-code-box {
    background: #050505;
    border: 1px solid #262626;
    padding: 20px;
    margin-bottom: 16px;
}
.mem-chat-code-label {
    font-size: 11px;
    color: #737373;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.mem-chat-code-value {
    font-family: 'Roboto Mono', monospace;
    font-size: 24px;
    font-weight: 700;
    color: #a855f7;
    letter-spacing: 3px;
    margin-bottom: 16px;
}
.mem-chat-copy-btn {
    padding: 10px 24px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}
.mem-chat-copy-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3); }
.mem-chat-note {
    font-size: 12px;
    color: #737373;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .mem-premium-hero { padding: 40px 24px; }
    .mem-hero-stats { gap: 24px; padding: 16px 32px; }
    .mem-plans-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .mem-premium-hero { padding: 32px 16px; }
    .mem-hero-title { font-size: 22px; }
    .mem-hero-subtitle { font-size: 13px; margin-bottom: 24px; }
    .mem-hero-stats { flex-direction: column; gap: 16px; padding: 16px; width: 100%; }
    .mem-hero-stat-value { font-size: 24px; }
    .mem-hero-stat-divider { width: 60px; height: 1px; }
    .mem-plans-header { margin-bottom: 24px; }
    .mem-plans-title { font-size: 20px; }
    .mem-plans-grid { grid-template-columns: 1fr; gap: 16px; }
    .mem-plan-card { padding: 24px 20px; }
    .mem-plan-icon { font-size: 32px; }
    .mem-plan-name { font-size: 20px; letter-spacing: 2px; }
    .mem-price-amount { font-size: 42px; }
    .mem-price-currency { font-size: 20px; }
    .mem-feature { font-size: 12px; padding: 8px 0; gap: 10px; }
    .mem-plan-btn { padding: 14px 20px; font-size: 13px; }
    .mem-chat-access { margin: 0 0 24px; }
    .mem-chat-body { padding: 20px 16px; }
    .mem-chat-code-value { font-size: 18px; letter-spacing: 2px; }
}

/* Responsive - Small Mobile */
@media (max-width: 480px) {
    .mem-premium-hero { padding: 24px 12px; margin-bottom: 16px; }
    .mem-hero-title { font-size: 18px; }
    .mem-hero-subtitle { font-size: 12px; }
    .mem-hero-stats { padding: 12px; }
    .mem-hero-stat-value { font-size: 20px; }
    .mem-hero-stat-label { font-size: 10px; }
    .mem-plans-container { margin-bottom: 20px; }
    .mem-plan-card { padding: 20px 16px; }
    .mem-plan-popular { font-size: 8px; padding: 5px 45px; top: 18px; right: -38px; }
    .mem-price-amount { font-size: 36px; }
    .mem-feature { font-size: 11px; }
}

/* Light Theme */
body.light-theme .mem-premium-hero { background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 50%, #f9fafb 100%); border-color: #e5e7eb; }
body.light-theme .mem-premium-hero::before { background: radial-gradient(ellipse at top center, rgba(139, 92, 246, 0.05) 0%, transparent 60%); }
body.light-theme .mem-hero-title { color: #111827; }
body.light-theme .mem-hero-subtitle { color: #6b7280; }
body.light-theme .mem-hero-stats { background: rgba(255, 255, 255, 0.8); border-color: #e5e7eb; }
body.light-theme .mem-hero-stats:hover { background: rgba(255, 255, 255, 0.95); border-color: #d1d5db; }
body.light-theme .mem-hero-stat-value { color: #059669; }
body.light-theme .mem-hero-stat-divider { background: #e5e7eb; }
body.light-theme .mem-status-badge.standard { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }
body.light-theme .mem-plans-title { color: #111827; }
body.light-theme .mem-plans-subtitle { color: #6b7280; }
body.light-theme .mem-plan-card { background: #fff; border-color: #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
body.light-theme .mem-plan-card:hover { border-color: #d1d5db; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
body.light-theme .mem-plan-card.gold:hover { border-color: rgba(245, 158, 11, 0.4); box-shadow: 0 10px 30px rgba(245, 158, 11, 0.1); }
body.light-theme .mem-plan-card.vip { border-color: rgba(139, 92, 246, 0.2); }
body.light-theme .mem-plan-card.vip:hover { border-color: rgba(139, 92, 246, 0.4); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.1); }
body.light-theme .mem-plan-card.seller { border-color: rgba(16, 185, 129, 0.2); }
body.light-theme .mem-plan-card.seller:hover { border-color: rgba(16, 185, 129, 0.4); box-shadow: 0 10px 30px rgba(16, 185, 129, 0.1); }
body.light-theme .mem-plan-tagline { color: #9ca3af; }
body.light-theme .mem-price-old { color: #9ca3af; }
body.light-theme .mem-price-amount { color: #111827; }
body.light-theme .mem-price-currency { color: #9ca3af; }
body.light-theme .mem-price-period { color: #9ca3af; }
body.light-theme .mem-vip-next-price { background: rgba(139, 92, 246, 0.06); border-color: rgba(139, 92, 246, 0.15); }
body.light-theme .mem-next-label { color: #9ca3af; }
body.light-theme .mem-next-value { color: #7c3aed; }
body.light-theme .mem-next-hint { color: #9ca3af; }
body.light-theme .mem-feature { color: #6b7280; border-bottom-color: #f3f4f6; }
body.light-theme .mem-feature.highlight { color: #111827; }
body.light-theme .mem-feature-icon { color: #10b981; }
body.light-theme .mem-plan-btn.disabled { background: #f3f4f6; color: #9ca3af; }
body.light-theme .mem-chat-access { background: #fff; border-color: #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
body.light-theme .mem-chat-header { background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(236, 72, 153, 0.05)); border-color: #e5e7eb; }
body.light-theme .mem-chat-title { color: #111827; }
body.light-theme .mem-chat-desc { color: #6b7280; }
body.light-theme .mem-chat-code-box { background: #f9fafb; border-color: #e5e7eb; }
body.light-theme .mem-chat-code-label { color: #9ca3af; }
body.light-theme .mem-chat-note { color: #9ca3af; }

/* ==================== Auction History Columns ==================== */
.auc-hist-head,
.auc-hist-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auc-col-id {
    flex: 0 0 50px;
    font-size: 12px;
    color: var(--text-3);
}

.auc-col-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auc-col-status {
    flex: 0 0 70px;
    text-align: center;
}

.auc-col-date {
    flex: 0 0 90px;
    font-size: 11px;
    color: var(--text-3);
}

.auc-col-type {
    flex: 0 0 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--text-3);
}

.auc-col-price {
    flex: 0 0 80px;
    color: var(--green);
    font-weight: 600;
    text-align: right;
}

.auc-col-bids {
    flex: 0 0 50px;
    text-align: center;
}

.auc-col-winner {
    flex: 0 0 60px;
    text-align: center;
}

@media (max-width: 992px) {
    .auc-hist-head { display: none; }
    .auc-hist-row { flex-wrap: wrap; }
    .auc-col-id { flex: 0 0 50px; }
    .auc-col-name { flex: 1; }
    .auc-col-status, .auc-col-date, .auc-col-type, .auc-col-price, .auc-col-bids, .auc-col-winner { display: none; }
}

/* ==================== Credit Card Store ==================== */
/* Search Body */
.cc-search-body {
    padding: 16px;
}

.cc-hero-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cc-hero-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

.cc-hero-text { flex: 1; }

.cc-hero-title {
    font-size: 24px;
    font-weight: 700;
    color: #fafafa;
    margin: 0 0 4px 0;
}

.cc-hero-subtitle {
    font-size: 14px;
    color: #737373;
    margin: 0;
}

.cc-hero-stats { display: flex; gap: 24px; }

.cc-hero-stat {
    text-align: center;
    padding: 12px 20px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
}

.cc-hero-stat-num {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #3b82f6;
}

.cc-hero-stat-label {
    font-size: 11px;
    color: #737373;
    text-transform: uppercase;
}

/* CC Navigation */
.cc-nav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.cc-nav-link { padding: 8px 16px; font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.2s; }
.cc-nav-link.active { background: #3b82f6; color: #fff; }
.cc-nav-link:not(.active) { background: #262626; color: #a3a3a3; }
.cc-nav-link:not(.active):hover { background: #333; color: #fafafa; }

/* CC Main Grid */
.cc-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
}

.cc-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* CC Search Card */
.cc-search-card {
    background: #171717;
    border: 1px solid #262626;
    border-radius: 12px;
    padding: 16px;
}

.cc-search-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.cc-search-field label {
    display: block;
    font-size: 11px;
    color: #737373;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.cc-search-field input,
.cc-search-field select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-1);
    font-size: 13px;
}

.cc-search-field input:focus,
.cc-search-field select:focus {
    outline: none;
    border-color: var(--gold);
}

.cc-search-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.cc-btn-search {
    padding: 10px 24px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: 1px solid #3b82f6;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.cc-btn-search:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.cc-btn-clear {
    padding: 10px 20px;
    background: #262626;
    border: 1px solid #404040;
    color: #a3a3a3;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}

.cc-btn-clear:hover {
    background: #333;
    color: #fafafa;
}

/* CC Alert */
.cc-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #171717;
    border: 1px solid #262626;
    border-radius: 10px;
}

.cc-alert-warning {
    border-left: 3px solid #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, #171717 100%);
}

.cc-alert-icon { font-size: 18px; }
.cc-alert-content { font-size: 13px; color: #a3a3a3; }
.cc-alert-content strong { color: #f87171; }

/* CC Cards Grid */
.cc-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Credit Card Item */
.cc-card-item {
    background: #171717;
    border: 1px solid #262626;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.cc-card-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Card Design - Credit Card Look */
.cc-card-design {
    padding: 16px;
    border-radius: 10px;
    margin: 12px;
    min-height: 140px;
    position: relative;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
}

.cc-card-item.visa .cc-card-design {
    background: linear-gradient(135deg, #1a1f71 0%, #0d1347 100%);
}

.cc-card-item.mastercard .cc-card-design {
    background: linear-gradient(135deg, #eb001b 0%, #990012 50%, #f79e1b 100%);
}

.cc-card-item.american .cc-card-design,
.cc-card-item.amex .cc-card-design {
    background: linear-gradient(135deg, #006fcf 0%, #004a8f 100%);
}

.cc-card-item.discover .cc-card-design {
    background: linear-gradient(135deg, #ff6000 0%, #cc4d00 100%);
}

.cc-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.cc-card-type-icon span {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
}

.cc-visa { color: #fff; }
.cc-mastercard { color: #fff; }
.cc-amex { color: #fff; }
.cc-discover { color: #fff; }
.cc-unknown { color: #a3a3a3; }

.cc-card-level {
    font-size: 9px;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.2);
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.cc-card-chip {
    width: 36px;
    height: 26px;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    border-radius: 4px;
    margin-bottom: 14px;
}

.cc-card-number {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
    margin-bottom: 14px;
}

.cc-card-bottom {
    display: flex;
    justify-content: space-between;
}

.cc-card-holder,
.cc-card-exp {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cc-card-label {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cc-card-value {
    font-size: 11px;
    color: #fff;
    font-weight: 600;
}

/* Card Info */
.cc-card-info {
    padding: 12px 16px 16px;
}

.cc-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.cc-meta-item {
    font-size: 11px;
    color: #737373;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cc-meta-base { color: #3b82f6; font-weight: 500; }

.cc-meta-icon { font-size: 10px; }

.cc-card-extras {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    min-height: 22px;
}

.cc-extra-badge {
    font-size: 9px;
    font-weight: 600;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.cc-extra-badge.cc-extra-email {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
}

.cc-extra-badge.cc-extra-phone {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.15);
}

.cc-extra-badge.cc-extra-ssn {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

.cc-extra-badge.cc-extra-blue {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.15);
}

.cc-card-body {
    padding: 12px 16px 16px;
}

.cc-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #262626;
}

.cc-card-price {
    font-size: 20px;
    font-weight: 700;
    color: #3b82f6;
}

.cc-btn-buy {
    padding: 8px 16px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
        transition: all 0.2s;
}

.cc-btn-buy:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* No Results */
.cc-no-results {
    grid-column: span 3;
    text-align: center;
    padding: 60px 20px;
    background: #171717;
    border: 1px solid #262626;
    border-radius: 12px;
}

.cc-no-results-icon { font-size: 48px; margin-bottom: 16px; }
.cc-no-results h3 { font-size: 18px; color: #fafafa; margin: 0 0 8px 0; }
.cc-no-results p { font-size: 14px; color: #737373; margin: 0 0 20px 0; }

.cc-btn-reset {
    display: inline-block;
    padding: 10px 24px;
    background: #262626;
    color: #fafafa;
    font-size: 13px;
    text-decoration: none;
    }

/* CC Pagination */
.cc-pagination {
    margin-top: 20px;
}

/* CC Sidebar */
.cc-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.cc-sidebar-card {
    background: #171717;
    border: 1px solid #262626;
    border-radius: 12px;
    overflow: hidden;
}

.cc-sidebar-title {
    font-size: 12px;
    font-weight: 600;
    color: #fafafa;
    padding: 14px 16px;
    margin: 0;
    background: #1a1a1a;
    border-bottom: 1px solid #262626;
    text-transform: uppercase;
}

/* Balance Card */
.cc-balance-card {
    border-color: rgba(59, 130, 246, 0.3);
    text-align: center;
    padding: 20px;
}

.cc-balance-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: #737373;
    margin-bottom: 8px;
}

.cc-balance-value {
    font-size: 32px;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 14px;
}

.cc-deposit-btn {
    display: block;
    padding: 12px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s;
}

.cc-deposit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* CC Info List */
.cc-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cc-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #262626;
    font-size: 12px;
    color: #a3a3a3;
}

.cc-info-list li:last-child { border-bottom: none; }
.cc-info-icon { font-size: 14px; }

/* Discount Card */
.cc-discount-card {
    border-color: rgba(168, 85, 247, 0.3);
    text-align: center;
    padding: 16px;
}

.cc-discount-badge {
    font-size: 11px;
    color: #a855f7;
    margin-bottom: 6px;
}

.cc-discount-value {
    font-size: 24px;
    font-weight: 700;
    color: #a855f7;
    margin-bottom: 4px;
}

.cc-discount-note {
    font-size: 11px;
    color: #525252;
}

/* CC Light Theme */
body.light-theme .cc-hero {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
    border-color: rgba(59, 130, 246, 0.15);
}

body.light-theme .cc-hero-title { color: #1f2937; }

body.light-theme .cc-nav-link:not(.active) { background: #f3f4f6; color: #6b7280; }
body.light-theme .cc-nav-link:not(.active):hover { background: #e5e7eb; color: #1f2937; }

body.light-theme .cc-search-card,
body.light-theme .cc-alert,
body.light-theme .cc-card-item,
body.light-theme .cc-sidebar-card,
body.light-theme .cc-no-results {
    background: #fff;
    border-color: #e5e7eb;
}

body.light-theme .cc-search-field input,
body.light-theme .cc-search-field select {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #1f2937;
}

body.light-theme .cc-sidebar-title {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #1f2937;
}

body.light-theme .cc-card-info {
    background: #fff;
}

body.light-theme .cc-card-footer {
    border-color: #e5e7eb;
}

body.light-theme .cc-no-results h3 { color: #1f2937; }
body.light-theme .cc-meta-base { color: #2563eb; }

/* CC Responsive */
@media (max-width: 1024px) {
    .cc-hero-content { flex-wrap: wrap; }
    .cc-hero-stats { width: 100%; margin-top: 12px; }
    
    .cc-main-grid { grid-template-columns: 1fr; }
    
    .cc-sidebar {
        order: -1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .cc-main { order: 1; }
    
    .cc-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .cc-no-results { grid-column: span 2; }
}

@media (max-width: 768px) {
    .cc-hero-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cc-hero-stats { justify-content: center; }
    
    .cc-search-grid { grid-template-columns: repeat(2, 1fr); }
    
    .cc-sidebar { grid-template-columns: 1fr; }
    
    .cc-cards-grid { grid-template-columns: 1fr; }
    .cc-no-results { grid-column: span 1; }
}

@media (max-width: 480px) {
    .cc-search-grid { grid-template-columns: 1fr; }
    .cc-search-actions { flex-direction: column; }
    .cc-btn-search, .cc-btn-clear { width: 100%; text-align: center; }
}

/* ==================== My Purchases Page ==================== */
.mp-hero {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.08) 100%);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
    padding: 24px 0;
    margin-bottom: 24px;
}
.mp-hero-content { display: flex; align-items: center; gap: 16px; }
.mp-hero-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.mp-hero-text { flex: 1; }
.mp-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.mp-hero-subtitle { font-size: 13px; color: #a3a3a3; margin: 0; }
.mp-hero-stats { display: flex; gap: 16px; }
.mp-hero-stat {
    text-align: center; padding: 10px 20px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 10px;
}
.mp-hero-stat-num { display: block; font-size: 22px; font-weight: 700; color: #34d399; }
.mp-hero-stat-label { font-size: 11px; color: #a3a3a3; text-transform: uppercase; }

body.light-theme .mp-hero { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%); border-color: rgba(16, 185, 129, 0.15); }
body.light-theme .mp-hero-title { color: #1a1a1a; }
body.light-theme .mp-hero-subtitle { color: #6b7280; }
body.light-theme .mp-hero-stat { background: rgba(16, 185, 129, 0.08); }

/* Purchases Navigation */
.mp-nav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.mp-nav-link { padding: 8px 16px; font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.2s; }
.mp-nav-link.active { background: #10b981; color: #fff; }
.mp-nav-link:not(.active) { background: #262626; color: #a3a3a3; }
.mp-nav-link:not(.active):hover { background: #333; color: #fafafa; }
body.light-theme .mp-nav-link:not(.active) { background: #f3f4f6; color: #6b7280; }
body.light-theme .mp-nav-link:not(.active):hover { background: #e5e7eb; color: #1f2937; }

/* Purchases Section */
.mp-section { background: #171717; border: 1px solid #262626; border-radius: 12px; overflow: hidden; margin-bottom: 20px; }

/* Purchases Table */
.mp-table-wrap { overflow-x: auto; }
.mp-table { width: 100%; border-collapse: collapse; }
.mp-table th { padding: 14px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #737373; text-transform: uppercase; background: #0a0a0a; }
.mp-table td { padding: 14px 16px; font-size: 13px; color: #a3a3a3; border-bottom: 1px solid #262626; }
.mp-table tr:last-child td { border-bottom: none; }
.mp-cell-product { color: #fafafa; font-weight: 500; }
.mp-cell-price { color: #10b981; font-weight: 600; }
.mp-cell-seller { font-family: monospace; color: #34d399; font-size: 12px; }
.mp-cell-date { color: #737373; }
.mp-cell-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-badge-cat { padding: 4px 10px; background: rgba(16, 185, 129, 0.15); color: #34d399; border-radius: 4px; font-size: 10px; font-weight: 600; }

/* Purchases Status Badges */
.mp-badge { padding: 4px 10px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.mp-badge.processing { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.mp-badge.delivered { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.mp-badge.completed { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.mp-badge.disputed { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.mp-badge.refunded { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }

/* Purchases Buttons */
.mp-btn-view { padding: 6px 12px; background: linear-gradient(135deg, #10b981, #059669); color: #fff; border-radius: 5px; font-size: 11px; font-weight: 500; text-decoration: none; }
.mp-btn-view:hover { opacity: 0.9; color: #fff; }
.mp-btn-disabled { padding: 6px 12px; background: #262626; color: #525252; border-radius: 5px; font-size: 11px; font-weight: 500; }
.mp-btn-dispute { padding: 6px 12px; background: rgba(239, 68, 68, 0.15); color: #f87171; border-radius: 5px; font-size: 11px; font-weight: 500; text-decoration: none; border: 1px solid rgba(239, 68, 68, 0.3); }
.mp-btn-dispute:hover { background: rgba(239, 68, 68, 0.25); color: #f87171; }

/* Purchases Empty */
.mp-empty { text-align: center; padding: 60px 20px; background: #171717; border: 1px solid #262626; border-radius: 12px; }
.mp-empty-icon { font-size: 48px; margin-bottom: 16px; }
.mp-empty h3 { font-size: 18px; color: #fafafa; margin: 0 0 8px 0; }
.mp-empty p { font-size: 13px; color: #737373; margin: 0 0 20px 0; }
.mp-btn-browse { display: inline-block; padding: 12px 28px; background: linear-gradient(135deg, #10b981, #059669); color: #fff; border-radius: 8px; font-weight: 600; text-decoration: none; }

/* Purchases Light Theme */
body.light-theme .mp-section { background: #fff; border-color: #e5e7eb; }
body.light-theme .mp-table th { background: #f9fafb; }
body.light-theme .mp-table td { border-color: #e5e7eb; }
body.light-theme .mp-cell-product { color: #1a1a1a; }
body.light-theme .mp-empty { background: #fff; border-color: #e5e7eb; }
body.light-theme .mp-empty h3 { color: #1a1a1a; }
body.light-theme .mp-btn-disabled { background: #f3f4f6; color: #9ca3af; }

@media (max-width: 640px) {
    .mp-hero-content { flex-direction: column; align-items: flex-start; }
    .mp-hero-icon { width: 48px; height: 48px; font-size: 24px; }
    .mp-hero-title { font-size: 20px; }
    .mp-hero-stats { width: 100%; }
}

/* ==================== Referrals Page ==================== */
.ref-hero {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.08) 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    padding: 24px 0;
    margin-bottom: 24px;
}
.ref-hero-content { display: flex; align-items: center; gap: 16px; }
.ref-hero-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.ref-hero-text { flex: 1; }
.ref-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.ref-hero-subtitle { font-size: 13px; color: #a3a3a3; margin: 0; }
.ref-hero-stats { display: flex; gap: 16px; }
.ref-hero-stat {
    text-align: center; padding: 10px 20px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 10px;
}
.ref-hero-stat-num { display: block; font-size: 20px; font-weight: 700; color: #a78bfa; }
.ref-hero-stat-label { font-size: 11px; color: #a3a3a3; text-transform: uppercase; }

/* Referrals Main Grid */
.ref-main-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; }
.ref-main { min-width: 0; }
.ref-sidebar { display: flex; flex-direction: column; gap: 16px; }

/* Referral Link Card */
.ref-link-card {
    background: #171717;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}
.ref-link-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ref-link-label { font-size: 12px; color: #a3a3a3; text-transform: uppercase; letter-spacing: 0.5px; }
.ref-code-badge { padding: 4px 12px; background: rgba(139, 92, 246, 0.2);  font-size: 13px; font-weight: 700; color: #a78bfa; font-family: monospace; }
.ref-link-row { display: flex; gap: 10px; }
.ref-link-input {
    flex: 1; padding: 12px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #fafafa;
    font-size: 12px;
    font-family: monospace;
}
.ref-copy-btn {
    padding: 12px 20px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border: none;
    color: #fff; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
    white-space: nowrap;
}
.ref-copy-btn:hover { box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); }

/* Referral Stats Grid */
.ref-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.ref-stat-card {
    background: #171717;
    border: 1px solid #262626;
    border-radius: 10px;
    padding: 16px;
    display: flex; align-items: center; gap: 12px;
}
.ref-stat-icon { font-size: 24px; }
.ref-stat-info { display: flex; flex-direction: column; }
.ref-stat-value { font-size: 18px; font-weight: 700; }
.ref-stat-value.green { color: #10b981; }
.ref-stat-value.purple { color: #a78bfa; }
.ref-stat-value.blue { color: #60a5fa; }
.ref-stat-label { font-size: 11px; color: #737373; }

/* Referral Sections */
.ref-section {
    background: #171717;
    border: 1px solid #262626;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}
.ref-section-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #262626;
}
.ref-section-title { font-size: 14px; font-weight: 600; color: #fafafa; margin: 0; }
.ref-section-count { font-size: 12px; color: #737373; }

/* Referral Table */
.ref-table-wrap { overflow-x: auto; }
.ref-table { width: 100%; border-collapse: collapse; }
.ref-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #737373; text-transform: uppercase; background: #0a0a0a; }
.ref-table td { padding: 14px 16px; font-size: 13px; color: #a3a3a3; border-bottom: 1px solid #262626; }
.ref-table tr:last-child td { border-bottom: none; }
.ref-cell-user { font-family: monospace; color: #a78bfa; }
.ref-cell-date { color: #737373; }
.ref-cell-earnings { color: #10b981; font-weight: 600; }

/* Referral Badges */
.ref-badge { padding: 4px 10px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.ref-badge.active { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.ref-badge.pending { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.ref-badge.bonus { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
.ref-badge.purchase { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }

/* Referral Empty State */
.ref-empty { text-align: center; padding: 40px 20px; color: #737373; }
.ref-empty-icon { font-size: 40px; margin-bottom: 12px; }

/* Referral Sidebar */
.ref-sidebar-card {
    background: #171717;
    border: 1px solid #262626;
    border-radius: 12px;
    padding: 16px;
}
.ref-info-card { border-color: rgba(139, 92, 246, 0.3); }
.ref-sidebar-title { font-size: 14px; font-weight: 600; color: #fafafa; margin: 0 0 14px 0; padding-bottom: 12px; border-bottom: 1px solid #262626; }

.ref-info-list { display: flex; flex-direction: column; gap: 14px; }
.ref-info-item { display: flex; gap: 10px; align-items: flex-start; }
.ref-info-icon { font-size: 18px; width: 24px; text-align: center; }
.ref-info-text strong { display: block; font-size: 12px; color: #a78bfa; margin-bottom: 2px; }
.ref-info-text p { font-size: 11px; color: #737373; margin: 0; }

.ref-active-info { font-size: 12px; color: #a3a3a3; }
.ref-active-info ul { margin: 10px 0; padding-left: 20px; }
.ref-active-info li { margin-bottom: 6px; }
.ref-bonus-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid #262626; }
.ref-bonus-amount { color: #10b981; font-weight: 700; }

/* Referrals Light Theme */
body.light-theme .ref-hero { background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%); border-color: rgba(139, 92, 246, 0.15); }
body.light-theme .ref-hero-title { color: #1a1a1a; }
body.light-theme .ref-hero-subtitle { color: #6b7280; }
body.light-theme .ref-hero-stat { background: rgba(139, 92, 246, 0.08); }
body.light-theme .ref-link-card, body.light-theme .ref-stat-card, body.light-theme .ref-section, body.light-theme .ref-sidebar-card { background: #fff; border-color: #e5e7eb; }
body.light-theme .ref-link-card { border-color: rgba(139, 92, 246, 0.3); }
body.light-theme .ref-info-card { border-color: rgba(139, 92, 246, 0.3); }
body.light-theme .ref-link-input { background: #f9fafb; border-color: #d1d5db; color: #1a1a1a; }
body.light-theme .ref-section-header, body.light-theme .ref-sidebar-title { border-color: #e5e7eb; }
body.light-theme .ref-section-title, body.light-theme .ref-sidebar-title { color: #1a1a1a; }
body.light-theme .ref-table th { background: #f9fafb; }
body.light-theme .ref-table td { border-color: #e5e7eb; }
body.light-theme .ref-stat-label { color: #6b7280; }

/* Referrals Responsive */
@media (max-width: 1024px) {
    .ref-main-grid { grid-template-columns: 1fr; }
    .ref-sidebar { order: -1; }
    .ref-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ref-hero-content { flex-direction: column; align-items: flex-start; }
    .ref-hero-icon { width: 48px; height: 48px; font-size: 24px; }
    .ref-hero-title { font-size: 20px; }
    .ref-hero-stats { width: 100%; }
    .ref-stats-grid { grid-template-columns: 1fr 1fr; }
    .ref-link-row { flex-direction: column; }
}

/* ==================== Sales Page ==================== */
.sales-hero {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.08) 100%);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
    padding: 24px 0; margin-bottom: 24px;
}
.sales-hero-content { display: flex; align-items: center; gap: 16px; }
.sales-hero-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #10b981, #059669); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.sales-hero-text { flex: 1; }
.sales-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.sales-hero-subtitle { font-size: 13px; color: #a3a3a3; margin: 0; }
.sales-hero-stats { display: flex; gap: 12px; }
.sales-hero-stat { text-align: center; padding: 10px 16px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 10px; }
.sales-hero-stat-num { display: block; font-size: 18px; font-weight: 700; color: #34d399; }
.sales-hero-stat-label { font-size: 10px; color: #a3a3a3; text-transform: uppercase; }

body.light-theme .sales-hero { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%); border-color: rgba(16, 185, 129, 0.15); }
body.light-theme .sales-hero-title { color: #1a1a1a; }

@media (max-width: 768px) {
    .sales-hero-content { flex-direction: column; align-items: flex-start; }
    .sales-hero-stats { width: 100%; }
}

.goods-match { margin-top: 6px; padding: 6px 10px; background: rgba(139, 92, 246, 0.1);  font-size: 11px; }
.goods-match-label { color: #a78bfa; font-weight: 600; }
.goods-match-text { color: #d4d4d4; font-family: monospace; word-break: break-all; }

body.light-theme .goods-match { background: rgba(139, 92, 246, 0.08); }
body.light-theme .goods-match-label { color: #7c3aed; }
body.light-theme .goods-match-text { color: #4b5563; }

/* ==================== Wallet Page ==================== */
.wlt-hero {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.08) 100%);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
    padding: 24px 0; margin-bottom: 24px;
}
.wlt-hero-content { display: flex; align-items: center; gap: 16px; }
.wlt-hero-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #10b981, #059669); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.wlt-hero-text { flex: 1; }
.wlt-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.wlt-hero-subtitle { font-size: 13px; color: #a3a3a3; margin: 0; }
.wlt-hero-stats { display: flex; gap: 12px; }
.wlt-hero-stat { text-align: center; padding: 10px 16px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 10px; }
.wlt-hero-stat-num { display: block; font-size: 20px; font-weight: 700; color: #34d399; }
.wlt-hero-stat-label { font-size: 10px; color: #a3a3a3; text-transform: uppercase; }

/* Wallet Balance Card */
.wlt-balance-card { display: flex; align-items: center; justify-content: space-between; background: #171717; border: 1px solid #262626; border-radius: 12px; padding: 20px 24px; margin-bottom: 20px; }
.wlt-balance-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #737373; margin-bottom: 4px; }
.wlt-balance-amount { font-size: 28px; font-weight: 700; color: #10b981; }
.wlt-btn-deposit { padding: 12px 24px; background: linear-gradient(135deg, #10b981, #059669); border: none; border-radius: 8px; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.wlt-btn-deposit:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3); }

/* Wallet Light Theme */
body.light-theme .wlt-hero { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%); border-color: rgba(16, 185, 129, 0.15); }
body.light-theme .wlt-hero-title { color: #1a1a1a; }
body.light-theme .wlt-balance-card { background: #fff; border-color: #e5e7eb; }
body.light-theme .wlt-balance-label { color: #9ca3af; }

/* Wallet Transaction Status Badges */
.badge-status-completed { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.badge-status-pending { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.badge-status-cancelled { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.badge-status-expired { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }
.badge-status-confirming { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.badge-status-partial { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.badge-status-other { background: rgba(115, 115, 115, 0.15); color: #a3a3a3; }

body.light-theme .badge-status-completed { background: rgba(16, 185, 129, 0.12); color: #059669; }
body.light-theme .badge-status-pending { background: rgba(245, 158, 11, 0.12); color: #d97706; }
body.light-theme .badge-status-cancelled { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
body.light-theme .badge-status-expired { background: rgba(107, 114, 128, 0.12); color: #6b7280; }
body.light-theme .badge-status-confirming { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
body.light-theme .badge-status-partial { background: rgba(168, 85, 247, 0.12); color: #9333ea; }
body.light-theme .badge-status-other { background: rgba(0, 0, 0, 0.06); color: #6b7280; }

/* Wallet Bonus Grid */
.bonus-grid { display: flex; gap: 12px; }
.bonus-card { flex: 1; min-width: 0; padding: 20px 16px; border-radius: 12px; text-align: center; transition: all 0.2s; }
.bonus-card:hover { transform: translateY(-2px); }
.bonus-percent { font-size: 26px; font-weight: 700; margin-bottom: 6px; }
.bonus-desc { font-size: 12px; line-height: 1.4; opacity: 0.85; }
@media (max-width: 600px) { .bonus-grid { flex-wrap: wrap; } .bonus-card { flex: 1 1 calc(50% - 6px); } }

/* Bonus Tiers - Progressive colors (darker to brighter) */
.bonus-tier-1 { background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(107, 114, 128, 0.1) 100%); border: 1px solid rgba(107, 114, 128, 0.3); }
.bonus-tier-1 .bonus-percent { color: #9ca3af; }
.bonus-tier-1 .bonus-desc { color: #9ca3af; }

.bonus-tier-2 { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%); border: 1px solid rgba(59, 130, 246, 0.3); }
.bonus-tier-2 .bonus-percent { color: #60a5fa; }
.bonus-tier-2 .bonus-desc { color: #93c5fd; }

.bonus-tier-3 { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%); border: 1px solid rgba(16, 185, 129, 0.3); }
.bonus-tier-3 .bonus-percent { color: #34d399; }
.bonus-tier-3 .bonus-desc { color: #6ee7b7; }

.bonus-tier-4 { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%); border: 1px solid rgba(245, 158, 11, 0.3); }
.bonus-tier-4 .bonus-percent { color: #fbbf24; }
.bonus-tier-4 .bonus-desc { color: #fcd34d; }

.bonus-tier-5 { background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(249, 115, 22, 0.1) 100%); border: 1px solid rgba(249, 115, 22, 0.3); }
.bonus-tier-5 .bonus-percent { color: #fb923c; }
.bonus-tier-5 .bonus-desc { color: #fdba74; }

.bonus-tier-6 { background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(236, 72, 153, 0.1) 100%); border: 1px solid rgba(236, 72, 153, 0.3); }
.bonus-tier-6 .bonus-percent { color: #f472b6; }
.bonus-tier-6 .bonus-desc { color: #f9a8d4; }

.bonus-tier-7 { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.1) 100%); border: 1px solid rgba(168, 85, 247, 0.3); }
.bonus-tier-7 .bonus-percent { color: #c084fc; }
.bonus-tier-7 .bonus-desc { color: #d8b4fe; }

.bonus-tier-8 { background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.12) 100%); border: 1px solid rgba(239, 68, 68, 0.4); }
.bonus-tier-8 .bonus-percent { color: #f87171; }
.bonus-tier-8 .bonus-desc { color: #fca5a5; }

.bonus-tier-9 { background: linear-gradient(135deg, rgba(251, 191, 36, 0.3) 0%, rgba(245, 158, 11, 0.15) 100%); border: 1px solid rgba(251, 191, 36, 0.5); box-shadow: 0 0 20px rgba(251, 191, 36, 0.2); }
.bonus-tier-9 .bonus-percent { color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, 0.5); }
.bonus-tier-9 .bonus-desc { color: #fcd34d; }

/* Light Theme Bonuses */
body.light-theme .bonus-tier-1 { background: linear-gradient(135deg, rgba(107, 114, 128, 0.15) 0%, rgba(107, 114, 128, 0.08) 100%); }
body.light-theme .bonus-tier-1 .bonus-percent { color: #6b7280; }
body.light-theme .bonus-tier-2 { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%); }
body.light-theme .bonus-tier-2 .bonus-percent { color: #2563eb; }
body.light-theme .bonus-tier-3 { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%); }
body.light-theme .bonus-tier-3 .bonus-percent { color: #059669; }
body.light-theme .bonus-tier-4 { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%); }
body.light-theme .bonus-tier-4 .bonus-percent { color: #d97706; }
body.light-theme .bonus-tier-5 { background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(249, 115, 22, 0.08) 100%); }
body.light-theme .bonus-tier-5 .bonus-percent { color: #ea580c; }
body.light-theme .bonus-tier-6 { background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(236, 72, 153, 0.08) 100%); }
body.light-theme .bonus-tier-6 .bonus-percent { color: #db2777; }
body.light-theme .bonus-tier-7 { background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.08) 100%); }
body.light-theme .bonus-tier-7 .bonus-percent { color: #9333ea; }
body.light-theme .bonus-tier-8 { background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%); }
body.light-theme .bonus-tier-8 .bonus-percent { color: #dc2626; }
body.light-theme .bonus-tier-9 { background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%); }
body.light-theme .bonus-tier-9 .bonus-percent { color: #b45309; }

/* Wallet Responsive */
@media (max-width: 768px) {
    .wlt-hero-content { flex-direction: column; align-items: flex-start; }
    .wlt-hero-stats { width: 100%; }
    .wlt-balance-card { flex-direction: column; gap: 16px; text-align: center; }
    .bonus-card { min-width: 100px; max-width: none; flex: 1 1 calc(33% - 8px); }
}

/* ==================== API Key Page ==================== */
.api-hero {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(79, 70, 229, 0.08) 100%);
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    padding: 24px 0; margin-bottom: 24px;
}
.api-hero-content { display: flex; align-items: center; gap: 16px; }
.api-hero-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #6366f1, #4f46e5); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); }
.api-hero-text { flex: 1; }
.api-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.api-hero-subtitle { font-size: 13px; color: #a3a3a3; margin: 0; }
.api-hero-stats { display: flex; gap: 12px; }
.api-hero-stat { text-align: center; padding: 10px 16px; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 10px; }
.api-hero-stat-num { display: block; font-size: 18px; font-weight: 700; color: #818cf8; }
.api-hero-stat-label { font-size: 10px; color: #a3a3a3; text-transform: uppercase; }

body.light-theme .api-hero { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(79, 70, 229, 0.05) 100%); border-color: rgba(99, 102, 241, 0.15); }
body.light-theme .api-hero-title { color: #1a1a1a; }

@media (max-width: 768px) {
    .api-hero-content { flex-direction: column; align-items: flex-start; }
    .api-hero-stats { width: 100%; }
}

.api-page { padding: 0 0 30px 0; max-width: 700px; margin: 0 auto; }
.api-card { background: var(--bg-1); border: 1px solid var(--border); padding: 24px; margin-bottom: 16px; }
.api-card-title { font-size: 16px; font-weight: 600; color: #fafafa; margin-bottom: 16px; }
.api-alert-success { padding: 12px 16px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); color: #34d399; font-size: 13px; margin-bottom: 16px; }
.api-alert-error { padding: 12px 16px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: #f87171; font-size: 13px; margin-bottom: 16px; }
.api-key-box { display: flex; align-items: center; gap: 10px; background: #050505; border: 1px solid #262626; padding: 12px; margin-bottom: 16px; font-family: monospace; font-size: 12px; color: #fafafa; word-break: break-all; }
.api-copy-btn { padding: 6px 12px; background: rgba(16, 185, 129, 0.15); border: none; color: #34d399; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.api-stats { display: flex; gap: 12px; margin-bottom: 16px; }
.api-stat { flex: 1; background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; padding: 12px; text-align: center; }
.api-stat-value { font-size: 18px; font-weight: 700; color: #10b981; }
.api-stat-label { font-size: 10px; color: #525252; text-transform: uppercase; margin-top: 4px; }
.api-info { font-size: 13px; color: #a3a3a3; margin-bottom: 16px; line-height: 1.6; }
.api-btn { display: inline-block; padding: 10px 20px; font-size: 12px; font-weight: 600; cursor: pointer; margin-right: 8px; margin-bottom: 8px; border: none; }
.api-btn-green { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.api-btn-gray { background: rgba(107, 114, 128, 0.15); color: #a3a3a3; }
.api-btn-red { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.api-req { padding: 8px 12px; border-left: 3px solid #262626; margin-bottom: 8px; font-size: 12px; color: #a3a3a3; }
.api-req.met { border-left-color: #10b981; color: #34d399; }
.api-req.not-met { border-left-color: #ef4444; color: #f87171; }

/* API Documentation Styles */
.api-section-title { color: #fafafa; font-size: 14px; font-weight: 600; margin: 24px 0 16px; }
.endpoint-item { background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; padding: 16px; margin-bottom: 12px; }
.endpoint-method { display: inline-block; padding: 4px 10px; background: rgba(16, 185, 129, 0.15); color: #34d399; font-size: 10px; font-weight: 700; text-transform: uppercase; margin-right: 10px; }
.endpoint-method.post { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.endpoint-path { font-family: monospace; font-size: 13px; color: #fafafa; }
.code-block { background: #050505; border: 1px solid #262626; padding: 16px; font-family: monospace; font-size: 12px; color: #a3e635; line-height: 1.6; overflow-x: auto; margin-bottom: 16px; white-space: pre-wrap; word-break: break-word; }
.api-info code { background: rgba(16, 185, 129, 0.15); color: #34d399; padding: 2px 6px; font-family: monospace; font-size: 11px; }
.api-info strong { color: #fafafa; }
.api-info ul { margin: 12px 0; padding-left: 20px; }
.api-info ul li { margin-bottom: 6px; }

body.light-theme .api-title { color: #1a1a1a; }
body.light-theme .api-card { background: linear-gradient(180deg, #fff 0%, #fafafa 100%); border-color: #e5e5e5; }
body.light-theme .api-card-title { color: #1a1a1a; }
body.light-theme .api-key-box { background: #f9fafb; border-color: #d1d5db; color: #1a1a1a; }
body.light-theme .api-stat { background: rgba(0,0,0,0.02); border-color: #e5e5e5; }
body.light-theme .api-stat-label { color: #6b7280; }
body.light-theme .api-info { color: #4b5563; }
body.light-theme .api-info strong { color: #1a1a1a; }
body.light-theme .api-info code { background: rgba(16, 185, 129, 0.1); color: #059669; }
body.light-theme .api-section-title { color: #1a1a1a; }
body.light-theme .api-card-header { color: #1a1a1a; }
body.light-theme .api-title { color: #1a1a1a; }
body.light-theme .api-subtitle { color: #6b7280; }
body.light-theme .endpoint-item { background: rgba(0,0,0,0.02); border-color: #e5e5e5; }
body.light-theme .endpoint-path { color: #1a1a1a; }
body.light-theme .api-info-title { color: #1a1a1a; }
body.light-theme .api-doc-title { color: #1a1a1a; }
body.light-theme .code-block { background: #f9fafb; border-color: #e5e5e5; color: #15803d; }
body.light-theme .api-copy-btn { background: rgba(16, 185, 129, 0.1); color: #059669; }
body.light-theme .api-btn-gray { background: rgba(107, 114, 128, 0.1); color: #6b7280; }
body.light-theme .api-btn-red { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
body.light-theme .api-req { border-left-color: #d1d5db; color: #6b7280; }
body.light-theme .api-info ul li { color: #4b5563; }
body.light-theme .api-stat-value { color: #059669; }

/* API Stats Table */
.api-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.api-stats-table th {
    text-align: left;
    padding: 8px 12px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.api-stats-table th:last-child,
.api-stats-table td:last-child {
    text-align: right;
}

.api-stats-table th:nth-child(2),
.api-stats-table td:nth-child(2) {
    text-align: center;
}

.api-stats-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.api-stats-table tbody tr:hover {
    background: var(--bg-2);
}

.api-stats-table tfoot td {
    padding: 10px 12px;
    background: var(--bg-2);
    border-top: 2px solid var(--gold);
    color: var(--gold);
    font-weight: 700;
}

body.light-theme .api-stats-table th {
    background: #f3f4f6;
}

body.light-theme .api-stats-table tbody tr:hover {
    background: #f9fafb;
}

body.light-theme .api-stats-table tfoot td {
    background: #f3f4f6;
}

/* =======================================================
   API Purchase Stats - Period Switcher
   Toggle group (All Time / 30d / 7d / Today) with gold
   active state, mono typography, spinner during AJAX load.
   ======================================================= */
.api-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.api-card-head .api-card-title {
    margin-bottom: 0;
}

.api-period-switch {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border);
    background: var(--bg-2);
    padding: 2px;
    position: relative;
}

.api-period-btn {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--text-3, #a3a3a3);
    font-family: 'Anonymous Pro', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    padding: 6px 12px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    line-height: 1.2;
}

.api-period-btn:hover:not(:disabled):not(.active) {
    color: #fafafa;
    background: rgba(255, 255, 255, 0.04);
}

.api-period-btn.active {
    color: #1a1a1a;
    background: var(--gold, #d4a017);
}

.api-period-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.api-period-spinner {
    width: 12px;
    height: 12px;
    margin-left: 6px;
    border: 2px solid rgba(212, 160, 23, 0.25);
    border-top-color: var(--gold, #d4a017);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.api-card.is-loading .api-period-spinner {
    opacity: 1;
    animation: api-period-spin 0.7s linear infinite;
}

@keyframes api-period-spin {
    to { transform: rotate(360deg); }
}

.api-card.is-loading [data-stat] {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

/* Light theme overrides */
body.light-theme .api-period-switch {
    background: #f3f4f6;
    border-color: #e5e5e5;
}

body.light-theme .api-period-btn {
    color: #6b7280;
}

body.light-theme .api-period-btn:hover:not(:disabled):not(.active) {
    color: #1a1a1a;
    background: rgba(0, 0, 0, 0.04);
}

body.light-theme .api-period-btn.active {
    color: #1a1a1a;
    background: #d4a017;
}

/* Mobile - stack head, wrap buttons */
@media (max-width: 600px) {
    .api-card-head {
        flex-direction: column;
        align-items: stretch;
    }
    .api-period-switch {
        align-self: flex-start;
        flex-wrap: wrap;
    }
    .api-period-btn {
        padding: 6px 10px;
        font-size: 10px;
        letter-spacing: 0.5px;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .api-card.is-loading .api-period-spinner { animation: none; }
    .api-card.is-loading [data-stat] { transition: none; }
}

/* ==================== Membership Page ==================== */
.mem-hero {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(168, 85, 247, 0.08) 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    padding: 24px 0; margin-bottom: 24px;
}
.mem-hero-content { display: flex; align-items: center; gap: 16px; }
.mem-hero-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #8b5cf6, #a855f7); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); }
.mem-hero-text { flex: 1; }
.mem-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.mem-hero-subtitle { font-size: 13px; color: #a3a3a3; margin: 0; }
.mem-hero-stats { display: flex; gap: 12px; }
.mem-hero-stat { text-align: center; padding: 10px 16px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 10px; }
.mem-hero-stat.gold { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.2); }
.mem-hero-stat.vip { background: rgba(236, 72, 153, 0.1); border-color: rgba(236, 72, 153, 0.2); }
.mem-hero-stat-num { display: block; font-size: 18px; font-weight: 700; color: #a78bfa; }
.mem-hero-stat.gold .mem-hero-stat-num { color: #fbbf24; }
.mem-hero-stat.vip .mem-hero-stat-num { color: #f472b6; }
.mem-hero-stat-label { font-size: 10px; color: #a3a3a3; text-transform: uppercase; }

body.light-theme .mem-hero { background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%); border-color: rgba(139, 92, 246, 0.15); }
body.light-theme .mem-hero-title { color: #1a1a1a; }

@media (max-width: 768px) {
    .mem-hero-content { flex-direction: column; align-items: flex-start; }
    .mem-hero-stats { width: 100%; }
}

/* ==================== Products Page ==================== */
.prod-hero {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(13, 148, 136, 0.08) 100%);
    border-bottom: 1px solid rgba(20, 184, 166, 0.2);
    padding: 24px 0; margin-bottom: 24px;
}
.prod-hero-content { display: flex; align-items: center; gap: 16px; }
.prod-hero-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #14b8a6, #0d9488); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3); }
.prod-hero-text { flex: 1; }
.prod-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.prod-hero-subtitle { font-size: 13px; color: #a3a3a3; margin: 0; }
.prod-hero-stats { display: flex; gap: 12px; }
.prod-hero-stat { text-align: center; padding: 10px 16px; background: rgba(20, 184, 166, 0.1); border: 1px solid rgba(20, 184, 166, 0.2); border-radius: 10px; }
.prod-hero-stat-num { display: block; font-size: 18px; font-weight: 700; color: #2dd4bf; }
.prod-hero-stat-label { font-size: 10px; color: #a3a3a3; text-transform: uppercase; }

body.light-theme .prod-hero { background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(13, 148, 136, 0.05) 100%); border-color: rgba(20, 184, 166, 0.15); }
body.light-theme .prod-hero-title { color: #1a1a1a; }

@media (max-width: 768px) {
    .prod-hero-content { flex-direction: column; align-items: flex-start; }
    .prod-hero-stats { width: 100%; }
}

/* ==================== Edit Product Page ==================== */
.edit-hero {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(234, 88, 12, 0.08) 100%);
    border-bottom: 1px solid rgba(249, 115, 22, 0.2);
    padding: 24px 0; margin-bottom: 24px;
}
.edit-hero-content { display: flex; align-items: center; gap: 16px; }
.edit-hero-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #f97316, #ea580c); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3); }
.edit-hero-text { flex: 1; }
.edit-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.edit-hero-subtitle { font-size: 13px; color: #a3a3a3; margin: 0; }
.edit-hero-stats { display: flex; gap: 12px; }
.edit-hero-stat { text-align: center; padding: 10px 16px; background: rgba(249, 115, 22, 0.1); border: 1px solid rgba(249, 115, 22, 0.2); border-radius: 10px; }
.edit-hero-stat-num { display: block; font-size: 18px; font-weight: 700; color: #fb923c; }
.edit-hero-stat-label { font-size: 10px; color: #a3a3a3; text-transform: uppercase; }

body.light-theme .edit-hero { background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.05) 100%); border-color: rgba(249, 115, 22, 0.15); }
body.light-theme .edit-hero-title { color: #1a1a1a; }

@media (max-width: 768px) {
    .edit-hero-content { flex-direction: column; align-items: flex-start; }
    .edit-hero-stats { width: 100%; }
}

.form-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-textarea { min-height: 100px; resize: vertical; }
.form-hint { font-size: 11px; color: #525252; margin-top: 6px; }

.checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #f59e0b; }
.checkbox-text { color: #f59e0b; font-size: 13px; font-weight: 500; }

.btn-primary-form {
    flex: 1; padding: 14px 24px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none; border-radius: 10px;
    color: #fff; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
}
.btn-primary-form:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3); }

.btn-secondary-form {
    padding: 14px 24px;
    background: rgba(255,255,255,0.05);
    border: 1px solid #2a2a2a; border-radius: 10px;
    color: #a3a3a3; font-size: 13px; font-weight: 600;
    text-decoration: none; text-align: center;
    transition: all 0.2s;
}
.btn-secondary-form:hover { background: rgba(255,255,255,0.08); border-color: #3a3a3a; }

@media (max-width: 640px) { .form-row-grid { grid-template-columns: 1fr; } }

body.light-theme .form-hint { color: #9ca3af; }
body.light-theme .btn-secondary-form { background: #f9fafb; border-color: #e5e5e5; color: #6b7280; }
body.light-theme .btn-secondary-form:hover { background: #f3f4f6; }

/* ==================== Deposit Address Page ==================== */
.dep-hero {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.08) 100%);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
    padding: 24px 0; margin-bottom: 24px;
}
.dep-hero-content { display: flex; align-items: center; gap: 16px; }
.dep-hero-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #10b981, #059669); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.dep-hero-text { flex: 1; }
.dep-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.dep-hero-subtitle { font-size: 13px; color: #a3a3a3; margin: 0; }
.dep-hero-stats { display: flex; gap: 12px; }
.dep-hero-stat { text-align: center; padding: 10px 16px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 10px; }
.dep-hero-stat-num { display: block; font-size: 20px; font-weight: 700; color: #34d399; }
.dep-hero-stat-label { font-size: 10px; color: #a3a3a3; text-transform: uppercase; }

/* Deposit Navigation */
.dep-nav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.dep-nav-link { padding: 8px 16px;  font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.2s; }
.dep-nav-link.active { background: #10b981; color: #fff; }
.dep-nav-link:not(.active) { background: #262626; color: #a3a3a3; }
.dep-nav-link:not(.active):hover { background: #333; color: #fafafa; }

/* Deposit Bonus Banner */
.bonus-banner { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); border-radius: 16px; padding: 24px; margin-bottom: 20px; display: flex; align-items: center; gap: 20px; }
.bonus-banner-icon { font-size: 40px; }
.bonus-banner-title { font-size: 11px; font-weight: 700; color: #000; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.bonus-banner-value { font-size: 36px; font-weight: 700; color: #000; line-height: 1; }
.bonus-banner-text { font-size: 12px; color: #1a1a1a; margin-top: 4px; }
.bonus-grid-deposit { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; }
.bonus-item-deposit { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2); border-radius: 10px; padding: 16px; text-align: center; }
.bonus-item-percent { font-size: 20px; font-weight: 700; color: #10b981; }
.bonus-item-text { font-size: 11px; color: #737373; margin-top: 4px; }
.form-hint-deposit { font-size: 11px; color: #525252; margin-top: 8px; }
.calc-box { background: #050505; border: 1px solid #1a1a1a; border-radius: 10px; padding: 16px; margin: 16px 0; display: none; }
.calc-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #10b981; margin-bottom: 12px; font-weight: 600; }
.calc-row { display: flex; justify-content: space-between; font-size: 13px; color: #a3a3a3; padding: 4px 0; }
.calc-row.calc-total { border-top: 1px solid #1a1a1a; margin-top: 8px; padding-top: 8px; }
.btn-generate-deposit { width: 100%; padding: 16px 24px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border: none; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 16px; transition: all 0.2s; }
.btn-generate-deposit:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(16,185,129,0.3); }
.btn-back-deposit { display: inline-block; padding: 12px 24px; background: rgba(255,255,255,0.05); border: 1px solid #2a2a2a; border-radius: 10px; color: #a3a3a3; font-size: 13px; text-decoration: none; }
.btn-back-deposit:hover { background: rgba(255,255,255,0.08); }

/* Deposit Light Theme */
body.light-theme .dep-hero { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%); border-color: rgba(16, 185, 129, 0.15); }
body.light-theme .dep-hero-title { color: #1a1a1a; }
body.light-theme .dep-nav-link:not(.active) { background: #f3f4f6; color: #6b7280; }
body.light-theme .bonus-item-deposit { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.15); }
body.light-theme .calc-box { background: #f9fafb; border-color: #e5e5e5; }
body.light-theme .calc-row { color: #6b7280; }
body.light-theme .calc-row.calc-total { border-top-color: #e5e5e5; }
body.light-theme .btn-back-deposit { background: #f9fafb; border-color: #e5e5e5; color: #6b7280; }
body.light-theme .form-hint-deposit { color: #9ca3af; }

/* Deposit Responsive */
@media (max-width: 768px) {
    .dep-hero-content { flex-direction: column; align-items: flex-start; }
    .dep-hero-stats { width: 100%; }
}
@media (max-width: 640px) { .bonus-banner { flex-direction: column; text-align: center; } .bonus-banner-value { font-size: 28px; } }

/* ==================== Invoice Page ==================== */
.inv-hero {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.08) 100%);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
    padding: 24px 0; margin-bottom: 24px;
}
.inv-hero-content { display: flex; align-items: center; gap: 16px; }
.inv-hero-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #f59e0b, #d97706); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
.inv-hero-text { flex: 1; }
.inv-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.inv-hero-subtitle { font-size: 13px; color: #a3a3a3; margin: 0; font-family: monospace; }
.inv-hero-stats { display: flex; gap: 12px; }
.inv-hero-stat { text-align: center; padding: 10px 16px; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: 10px; }
.inv-hero-stat-num { display: block; font-size: 20px; font-weight: 700; color: #fbbf24; }
.inv-hero-stat-label { font-size: 10px; color: #a3a3a3; text-transform: uppercase; }

/* Invoice Navigation */
.inv-nav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.inv-nav-link { padding: 8px 16px;  font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.2s; }
.inv-nav-link.active { background: #f59e0b; color: #fff; }
.inv-nav-link:not(.active) { background: #262626; color: #a3a3a3; }
.inv-nav-link:not(.active):hover { background: #333; color: #fafafa; }

/* Invoice Status Card */
.inv-status-card { background: #171717; border: 1px solid #262626; border-radius: 12px; padding: 24px; text-align: center; margin-bottom: 20px; }
.inv-status-icon { font-size: 40px; margin-bottom: 12px; }
.inv-status-text { font-size: 18px; font-weight: 700; color: #fbbf24; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.inv-countdown { font-size: 28px; font-weight: 700; color: #ef4444; }

/* Invoice Grid & Items */
.invoice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.invoice-item { background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; border-radius: 10px; padding: 16px; }
.invoice-item.full { grid-column: span 2; }
.invoice-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: #525252; margin-bottom: 8px; }
.invoice-value { font-size: 14px; color: #fafafa; word-break: break-all; }
.invoice-value.highlight { color: #10b981; font-size: 18px; font-weight: 700; }
.invoice-value.clickable, .invoice-address.clickable, .invoice-value-lg.clickable { cursor: pointer; transition: all 0.2s; }
.invoice-value.clickable:hover, .invoice-address.clickable:hover, .invoice-value-lg.clickable:hover { color: #10b981; }
.invoice-value-lg { font-size: 20px; font-weight: 700; color: #10b981; }
.invoice-address { font-family: monospace; font-size: 13px; color: #fafafa; background: #050505; padding: 12px; border-radius: 8px; word-break: break-all; }
.copy-btns { display: flex; gap: 8px; }
.copy-btn-inv { padding: 6px 14px; background: rgba(16,185,129,0.15); border: none;  color: #34d399; font-size: 11px; font-weight: 600; cursor: pointer; }
.copy-btn-inv:hover { background: rgba(16,185,129,0.25); }
.copy-btn-addr { padding: 6px 14px; background: rgba(59,130,246,0.15); border: none;  color: #60a5fa; font-size: 11px; font-weight: 600; cursor: pointer; }
.copy-btn-addr:hover { background: rgba(59,130,246,0.25); }
.crypto-tag { color: #fbbf24 !important; font-weight: 600; }
.invoice-warning { margin-top: 10px; padding: 10px 12px; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2); border-radius: 8px; font-size: 11px; color: #fbbf24; }
.btn-back-inv { display: inline-block; padding: 12px 24px; background: rgba(255,255,255,0.05); border: 1px solid #2a2a2a; border-radius: 10px; color: #a3a3a3; font-size: 13px; text-decoration: none; }
.btn-back-inv:hover { background: rgba(255,255,255,0.08); }

/* Invoice Light Theme */
body.light-theme .inv-hero { background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%); border-color: rgba(245, 158, 11, 0.15); }
body.light-theme .inv-hero-title { color: #1a1a1a; }
body.light-theme .inv-nav-link:not(.active) { background: #f3f4f6; color: #6b7280; }
body.light-theme .inv-status-card { background: #fff; border-color: #e5e7eb; }
body.light-theme .invoice-item { background: rgba(0,0,0,0.02); border-color: #e5e5e5; }
body.light-theme .invoice-label { color: #9ca3af; }
body.light-theme .invoice-value { color: #1a1a1a; }
body.light-theme .invoice-address { background: #f9fafb; color: #1a1a1a; }
body.light-theme .btn-back-inv { background: #f9fafb; border-color: #e5e5e5; color: #6b7280; }
body.light-theme .copy-btn-inv { background: rgba(16,185,129,0.1); color: #059669; }
body.light-theme .copy-btn-addr { background: rgba(59,130,246,0.1); color: #2563eb; }
body.light-theme .crypto-tag { color: #d97706 !important; }
body.light-theme .invoice-warning { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.15); color: #d97706; }

/* Invoice Responsive */
@media (max-width: 768px) {
    .inv-hero-content { flex-direction: column; align-items: flex-start; }
    .inv-hero-stats { width: 100%; }
}
@media (max-width: 640px) { .invoice-grid { grid-template-columns: 1fr; } .invoice-item.full { grid-column: span 1; } }

/* ==================== Profile Pages (New Design) ==================== */
/* Panel Badge */
.panel-badge { padding: 4px 10px; border-radius: 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.panel-badge-success { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.panel-badge-warning { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.panel-badge-neutral { background: rgba(115, 115, 115, 0.15); color: #a3a3a3; }
body.light-theme .panel-badge-success { background: rgba(16, 185, 129, 0.12); color: #059669; }
body.light-theme .panel-badge-warning { background: rgba(245, 158, 11, 0.12); color: #d97706; }
body.light-theme .panel-badge-neutral { background: rgba(0, 0, 0, 0.06); color: #6b7280; }

/* Profile Info Grid */
.prf-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; padding: 16px; }
.prf-info-item { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; }
.prf-info-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #737373; }
.prf-info-value { font-size: 14px; font-weight: 600; color: #fafafa; }
.prf-val-green { color: #34d399; }
.prf-val-gold { color: #fbbf24; }
.prf-val-vip { color: #ec4899; }
.prf-val-muted { color: #525252; }
body.light-theme .prf-info-item { background: rgba(0,0,0,0.02); border-color: #e5e5e5; }
body.light-theme .prf-info-label { color: #6b7280; }
body.light-theme .prf-info-value { color: #1a1a1a; }
body.light-theme .prf-val-green { color: #059669; }
body.light-theme .prf-val-gold { color: #d97706; }
body.light-theme .prf-val-vip { color: #db2777; }
body.light-theme .prf-val-muted { color: #9ca3af; }

/* Profile Secret Value */
.prf-secret { position: relative; cursor: pointer; }
.prf-secret .prf-secret-val { filter: blur(5px); transition: filter 0.2s; font-family: monospace; color: #10b981; }
.prf-secret .prf-secret-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 9px; color: #737373; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(10,10,10,0.8); padding: 2px 6px; border-radius: 3px; pointer-events: none; transition: opacity 0.2s; }
.prf-secret.revealed .prf-secret-val { filter: none; }
.prf-secret.revealed .prf-secret-hint { opacity: 0; }
body.light-theme .prf-secret .prf-secret-hint { background: rgba(255,255,255,0.9); color: #6b7280; }
body.light-theme .prf-secret .prf-secret-val { color: #059669; }

/* Profile Form */
.prf-form { padding: 16px; }
.prf-form-row { margin-bottom: 16px; }
.prf-form-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #a3a3a3; margin-bottom: 8px; }
.prf-form-help { font-size: 11px; color: #525252; margin-top: 6px; }
.prf-input { width: 100%; padding: 12px 14px; background: rgba(255,255,255,0.03); border: 1px solid #2a2a2a; color: #fafafa; font-size: 13px; transition: all 0.2s; }
.prf-input:focus { outline: none; border-color: #10b981; background: rgba(16, 185, 129, 0.05); }
.prf-input::placeholder { color: #525252; }
body.light-theme .prf-form-label { color: #374151; }
body.light-theme .prf-form-help { color: #9ca3af; }
body.light-theme .prf-input { background: #fff; border-color: #d1d5db; color: #1a1a1a; }
body.light-theme .prf-input:focus { border-color: #10b981; background: rgba(16, 185, 129, 0.03); }
body.light-theme .prf-input::placeholder { color: #9ca3af; }

/* Profile Input with Secret */
.prf-input-wrap { position: relative; }
.prf-input-wrap.has-secret .prf-input-secret { filter: blur(5px); transition: filter 0.2s; }
.prf-input-wrap.has-secret:hover .prf-input-secret,
.prf-input-wrap.has-secret .prf-input-secret:focus { filter: none; }
.prf-input-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; color: #737373; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(10,10,10,0.7); padding: 3px 8px; border-radius: 4px; pointer-events: none; transition: opacity 0.2s; }
.prf-input-wrap.has-secret:hover .prf-input-hint,
.prf-input-wrap.has-secret .prf-input-secret:focus ~ .prf-input-hint { opacity: 0; }
body.light-theme .prf-input-hint { background: rgba(255,255,255,0.85); color: #6b7280; }

/* Profile Input with Prefix */
.prf-input-prefix-wrap { display: flex; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid #2a2a2a; overflow: hidden; transition: all 0.2s; }
.prf-input-prefix-wrap:focus-within { border-color: #10b981; background: rgba(16, 185, 129, 0.05); }
.prf-input-prefix { padding: 12px 0 12px 14px; color: #525252; font-size: 13px; }
.prf-input-prefix-wrap .prf-input { border: none; background: transparent; padding-left: 4px; }
.prf-input-prefix-wrap .prf-input:focus { background: transparent; }
body.light-theme .prf-input-prefix-wrap { background: #fff; border-color: #d1d5db; }
body.light-theme .prf-input-prefix-wrap:focus-within { border-color: #10b981; background: rgba(16, 185, 129, 0.03); }
body.light-theme .prf-input-prefix { color: #9ca3af; }

/* Profile Info Box */
.prf-info-box { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.15); font-size: 12px; color: #a3a3a3; line-height: 1.5; margin-bottom: 16px; }
.prf-info-box-icon { font-size: 16px; flex-shrink: 0; }
body.light-theme .prf-info-box { background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.12); color: #6b7280; }

/* Profile Steps */
.prf-steps { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(139, 92, 246, 0.06); border: 1px solid rgba(139, 92, 246, 0.12); margin-bottom: 16px; }
.prf-step { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #a3a3a3; }
.prf-step-num { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: rgba(139, 92, 246, 0.2); border-radius: 50%; font-size: 11px; font-weight: 600; color: #a78bfa; flex-shrink: 0; }
.prf-step a { color: #8b5cf6; text-decoration: none; }
.prf-step code { padding: 1px 5px; background: rgba(255,255,255,0.1); border-radius: 3px; font-family: monospace; font-size: 11px; color: #fafafa; }
body.light-theme .prf-steps { background: rgba(139, 92, 246, 0.04); border-color: rgba(139, 92, 246, 0.1); }
body.light-theme .prf-step { color: #6b7280; }
body.light-theme .prf-step-num { background: rgba(139, 92, 246, 0.15); color: #7c3aed; }
body.light-theme .prf-step a { color: #7c3aed; }
body.light-theme .prf-step code { background: rgba(0,0,0,0.06); color: #1a1a1a; }

/* Profile Buttons */
.prf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; }
.prf-btn-primary { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; }
.prf-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.prf-btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #fff; width: 100%; }
.prf-btn-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }
.prf-btn-disabled { background: #1a1a1a; border: 1px solid #2a2a2a; color: #525252; cursor: not-allowed; width: 100%; }
body.light-theme .prf-btn-disabled { background: #f3f4f6; border-color: #e5e5e5; color: #9ca3af; }

/* Profile Actions */
.prf-actions { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.prf-action-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.2s; }
.prf-action-deposit { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); color: #34d399; }
.prf-action-deposit:hover { background: rgba(16, 185, 129, 0.15); }
.prf-action-shop { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); color: #60a5fa; }
.prf-action-shop:hover { background: rgba(59, 130, 246, 0.15); }
.prf-action-upgrade { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); color: #fbbf24; }
.prf-action-upgrade:hover { background: rgba(245, 158, 11, 0.15); }
.prf-action-api { background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2); color: #a78bfa; }
.prf-action-api:hover { background: rgba(139, 92, 246, 0.15); }
body.light-theme .prf-action-deposit { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.15); color: #059669; }
body.light-theme .prf-action-shop { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.15); color: #2563eb; }
body.light-theme .prf-action-upgrade { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.15); color: #d97706; }
body.light-theme .prf-action-api { background: rgba(139, 92, 246, 0.08); border-color: rgba(139, 92, 246, 0.15); color: #7c3aed; }

/* Profile Security List */
.prf-security-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.prf-security-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; font-size: 12px; }
.prf-security-item.secure { border-color: rgba(16, 185, 129, 0.3); }
.prf-security-item.warning { border-color: rgba(245, 158, 11, 0.3); }
.prf-security-item.neutral { border-color: #2a2a2a; }
.prf-security-icon { font-size: 14px; }
.prf-security-text { flex: 1; color: #a3a3a3; }
.prf-security-status { font-weight: 600; }
.prf-security-item.secure .prf-security-status { color: #34d399; }
.prf-security-item.warning .prf-security-status { color: #fbbf24; }
.prf-security-item.neutral .prf-security-status { color: #737373; }
body.light-theme .prf-security-item { background: rgba(0,0,0,0.02); border-color: #e5e5e5; }
body.light-theme .prf-security-item.secure { border-color: rgba(16, 185, 129, 0.25); }
body.light-theme .prf-security-item.warning { border-color: rgba(245, 158, 11, 0.25); }
body.light-theme .prf-security-text { color: #6b7280; }
body.light-theme .prf-security-item.secure .prf-security-status { color: #059669; }
body.light-theme .prf-security-item.warning .prf-security-status { color: #d97706; }
body.light-theme .prf-security-item.neutral .prf-security-status { color: #9ca3af; }

/* Profile Recovery */
.prf-recovery { padding: 12px; }
.prf-recovery-text { font-size: 12px; color: #a3a3a3; line-height: 1.5; margin-bottom: 12px; }
.prf-recovery-warning { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.15);  font-size: 11px; color: #fca5a5; margin-bottom: 12px; }
body.light-theme .prf-recovery-text { color: #6b7280; }
body.light-theme .prf-recovery-warning { background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.12); color: #dc2626; }

/* Profile API Link */
.prf-api-link { padding: 12px; }
.prf-api-link p { font-size: 12px; color: #a3a3a3; margin-bottom: 12px; }
body.light-theme .prf-api-link p { color: #6b7280; }

/* Panel Disabled State */
.panel-disabled { opacity: 0.6; }
.side-panel.panel-disabled { opacity: 0.6; }

/* Profile Responsive */
@media (max-width: 640px) {
    .prf-info-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== Wallet Page Components ==================== */
.wlt-bonus-grid { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; justify-content: center; }
.wlt-bonus-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 20px; border: 1px solid; flex: 1; min-width: 100px; max-width: 150px; }
.wlt-bonus-percent { font-size: 18px; font-weight: 700; }
.wlt-bonus-min { font-size: 12px; margin-top: 4px; opacity: 0.8; }
.wlt-bonus-sub { color: #34d399 !important; }

/* Bonus tier colors - from small to large */
.wlt-bonus-item.tier-1 { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.25); }
.wlt-bonus-item.tier-1 .wlt-bonus-percent { color: #34d399; }
.wlt-bonus-item.tier-1 .wlt-bonus-min { color: #34d399; }

.wlt-bonus-item.tier-2 { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.25); }
.wlt-bonus-item.tier-2 .wlt-bonus-percent { color: #60a5fa; }
.wlt-bonus-item.tier-2 .wlt-bonus-min { color: #60a5fa; }

.wlt-bonus-item.tier-3 { background: rgba(139, 92, 246, 0.08); border-color: rgba(139, 92, 246, 0.25); }
.wlt-bonus-item.tier-3 .wlt-bonus-percent { color: #a78bfa; }
.wlt-bonus-item.tier-3 .wlt-bonus-min { color: #a78bfa; }

.wlt-bonus-item.tier-4 { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.25); }
.wlt-bonus-item.tier-4 .wlt-bonus-percent { color: #fbbf24; }
.wlt-bonus-item.tier-4 .wlt-bonus-min { color: #fbbf24; }

.wlt-bonus-item.tier-5 { background: rgba(236, 72, 153, 0.08); border-color: rgba(236, 72, 153, 0.25); }
.wlt-bonus-item.tier-5 .wlt-bonus-percent { color: #f472b6; }
.wlt-bonus-item.tier-5 .wlt-bonus-min { color: #f472b6; }

.wlt-bonus-item.tier-6 { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.25); }
.wlt-bonus-item.tier-6 .wlt-bonus-percent { color: #f87171; }
.wlt-bonus-item.tier-6 .wlt-bonus-min { color: #f87171; }

body.light-theme .wlt-bonus-item.tier-1 { background: rgba(16, 185, 129, 0.06); }
body.light-theme .wlt-bonus-item.tier-1 .wlt-bonus-percent { color: #059669; }
body.light-theme .wlt-bonus-item.tier-2 { background: rgba(59, 130, 246, 0.06); }
body.light-theme .wlt-bonus-item.tier-2 .wlt-bonus-percent { color: #2563eb; }
body.light-theme .wlt-bonus-item.tier-3 { background: rgba(139, 92, 246, 0.06); }
body.light-theme .wlt-bonus-item.tier-3 .wlt-bonus-percent { color: #7c3aed; }
body.light-theme .wlt-bonus-item.tier-4 { background: rgba(245, 158, 11, 0.06); }
body.light-theme .wlt-bonus-item.tier-4 .wlt-bonus-percent { color: #d97706; }
body.light-theme .wlt-bonus-item.tier-5 { background: rgba(236, 72, 153, 0.06); }
body.light-theme .wlt-bonus-item.tier-5 .wlt-bonus-percent { color: #db2777; }
body.light-theme .wlt-bonus-item.tier-6 { background: rgba(239, 68, 68, 0.06); }
body.light-theme .wlt-bonus-item.tier-6 .wlt-bonus-percent { color: #dc2626; }
body.light-theme .wlt-bonus-sub { color: #059669 !important; }

/* Badge variants for transactions/purchases */
.prod-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.badge-pending { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.badge-cancelled { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.badge-expired { background: rgba(115, 115, 115, 0.15); color: #a3a3a3; }
.badge-refunded { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.badge-new { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.badge-available { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.badge-sold { background: rgba(115, 115, 115, 0.15); color: #a3a3a3; }
.badge-delivered { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.badge-completed { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.badge-hot { background: rgba(239, 68, 68, 0.15); color: #f87171; animation: badge-pulse 2s ease-in-out infinite; }
.badge-disputed { background: rgba(245, 158, 11, 0.15); color: #fbbf24; animation: badge-pulse 2s ease-in-out infinite; }
@keyframes badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
body.light-theme .badge-pending { background: rgba(245, 158, 11, 0.12); color: #d97706; }
body.light-theme .badge-cancelled { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
body.light-theme .badge-expired { background: rgba(0, 0, 0, 0.06); color: #6b7280; }
body.light-theme .badge-refunded { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
body.light-theme .badge-new { background: rgba(16, 185, 129, 0.12); color: #059669; }
body.light-theme .badge-available { background: rgba(16, 185, 129, 0.12); color: #059669; }
body.light-theme .badge-sold { background: rgba(0, 0, 0, 0.06); color: #6b7280; }
body.light-theme .badge-delivered { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
body.light-theme .badge-completed { background: rgba(16, 185, 129, 0.12); color: #059669; }
body.light-theme .badge-hot { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
body.light-theme .badge-disputed { background: rgba(245, 158, 11, 0.12); color: #d97706; }

/* Dispute button */
.prod-btn-dispute { display: inline-block; padding: 4px 10px; background: rgba(239, 68, 68, 0.15); border: none;  color: #f87171; font-size: 10px; font-weight: 600; text-decoration: none; margin-left: 6px; }
.prod-btn-dispute:hover { background: rgba(239, 68, 68, 0.25); }
body.light-theme .prod-btn-dispute { background: rgba(239, 68, 68, 0.1); color: #dc2626; }

/* Prod actions container */
.prod-actions { display: flex; align-items: center; gap: 6px; }

/* Referral Link Box */
.ref-link-box { padding: 16px; }

/* Boost button */
.prod-btn-boost { display: inline-block; padding: 4px 10px; background: rgba(245, 158, 11, 0.15); border: none;  color: #fbbf24; font-size: 10px; font-weight: 600; cursor: pointer; margin-left: 6px; }
.prod-btn-boost:hover { background: rgba(245, 158, 11, 0.25); }
body.light-theme .prod-btn-boost { background: rgba(245, 158, 11, 0.1); color: #d97706; }

/* Primary action button (highlighted) */
.prod-btn-primary { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.4); color: #10b981; }
.prod-btn-primary:hover { background: rgba(16, 185, 129, 0.3); border-color: rgba(16, 185, 129, 0.6); }
body.light-theme .prod-btn-primary { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.3); color: #059669; }

/* Form grid and textarea */
.prf-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.prf-textarea {
    width: 100%;
    min-height: 120px;
    padding: 14px 16px;
    background: var(--bg-2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.2s;
}
.prf-textarea:focus {
    outline: none;
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.prf-textarea::placeholder { color: var(--text-3); }
body.light-theme .prf-textarea {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
}
body.light-theme .prf-textarea:focus {
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
}
.prf-textarea-tall { min-height: 150px; }
.prf-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: #d4d4d4; }
.prf-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: #10b981; }
.prf-form-actions { display: flex; gap: 12px; padding: 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 8px; }
.prf-btn-secondary { background: rgba(255, 255, 255, 0.06); color: #a3a3a3; border: 1px solid rgba(255, 255, 255, 0.1); padding: 10px 20px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.15s; }
.prf-btn-secondary:hover { background: rgba(255, 255, 255, 0.1); color: #fafafa; }
body.light-theme .prf-checkbox-label { color: #374151; }
body.light-theme .prf-form-actions { border-color: rgba(0, 0, 0, 0.06); }
body.light-theme .prf-btn-secondary { background: rgba(0, 0, 0, 0.04); color: #6b7280; border-color: rgba(0, 0, 0, 0.1); }
body.light-theme .prf-btn-secondary:hover { background: rgba(0, 0, 0, 0.08); color: #111827; }
@media (max-width: 640px) { .prf-form-grid { grid-template-columns: 1fr; } }

/* ==================== Deposit Page Components ==================== */
.vault-gold { color: #fbbf24 !important; }
body.light-theme .vault-gold { color: #d97706 !important; }
.vault-pink { color: #f472b6 !important; }
body.light-theme .vault-pink { color: #f472b6 !important; }
.vault-blue { color: #60a5fa !important; }
body.light-theme .vault-blue { color: #2563eb !important; }
.vault-cyan { color: #22d3ee !important; }
body.light-theme .vault-cyan { color: #0891b2 !important; }
.vault-purple { color: #a855f7 !important; }
body.light-theme .vault-purple { color: #7c3aed !important; }
.vault-red { color: #ef4444 !important; }
body.light-theme .vault-red { color: #dc2626 !important; }

/* Proxy String Box */
.proxy-string-box { display: flex; align-items: center; gap: 8px; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2);  padding: 8px 12px; }
.proxy-string { font-family: monospace; font-size: 12px; color: #a855f7; word-break: break-all; flex: 1; }
.proxy-copy-btn { padding: 4px 10px; background: rgba(168, 85, 247, 0.15); border: none; color: #a855f7; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.proxy-copy-btn:hover { background: rgba(168, 85, 247, 0.25); }
body.light-theme .proxy-string-box { background: rgba(168, 85, 247, 0.05); border-color: rgba(168, 85, 247, 0.15); }
body.light-theme .proxy-string { color: #7c3aed; }
body.light-theme .proxy-copy-btn { background: rgba(168, 85, 247, 0.1); color: #7c3aed; }

/* Deposit Calculator */
.dep-calc-box { background: rgba(16, 185, 129, 0.05); border: 1px solid rgba(16, 185, 129, 0.15); border-radius: 8px; padding: 16px; margin: 0 16px 16px; }
.dep-calc-title { font-size: 13px; font-weight: 600; color: #d4d4d4; margin-bottom: 12px; }
.dep-calc-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; color: #a3a3a3; }
.dep-calc-row strong { color: #fafafa; }
.dep-calc-total { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 8px; padding-top: 12px; font-size: 14px; }
.dep-calc-blue { color: #60a5fa !important; }
.dep-calc-gold { color: #fbbf24 !important; }
.dep-calc-green { color: #34d399 !important; }
body.light-theme .dep-calc-box { background: rgba(16, 185, 129, 0.04); border-color: rgba(16, 185, 129, 0.12); }
body.light-theme .dep-calc-title { color: #374151; }
body.light-theme .dep-calc-row { color: #6b7280; }
body.light-theme .dep-calc-row strong { color: #111827; }
body.light-theme .dep-calc-total { border-color: rgba(0, 0, 0, 0.08); }
body.light-theme .dep-calc-blue { color: #2563eb !important; }
body.light-theme .dep-calc-gold { color: #d97706 !important; }
body.light-theme .dep-calc-green { color: #059669 !important; }

/* Deposit Promo Panel */
.side-panel-promo { background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(234, 179, 8, 0.08)); border-color: rgba(245, 158, 11, 0.2); }
.dep-promo-body { padding: 16px; text-align: center; }
.dep-promo-value { font-size: 32px; font-weight: 700; color: #fbbf24; }
.dep-promo-text { font-size: 12px; color: #a3a3a3; margin-top: 4px; }
body.light-theme .side-panel-promo { background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(234, 179, 8, 0.04)); border-color: rgba(245, 158, 11, 0.15); }
body.light-theme .dep-promo-value { color: #d97706; }
body.light-theme .dep-promo-text { color: #6b7280; }

/* ==================== Invoice Page Components ==================== */
.inv-clickable { cursor: pointer; transition: color 0.15s; }
.inv-clickable:hover { color: #34d399; }
.inv-payment-body { padding: 16px; }
.inv-amount-box, .inv-address-box { background: rgba(16, 185, 129, 0.05); border: 1px solid rgba(16, 185, 129, 0.15); border-radius: 8px; padding: 16px; margin-bottom: 12px; text-align: center; }
.inv-amount-label, .inv-address-label { font-size: 12px; color: #737373; margin-bottom: 8px; }
.inv-amount-value { font-size: 24px; font-weight: 700; color: #34d399; font-family: monospace; margin-bottom: 12px; word-break: break-all; }
.inv-address-value { font-size: 12px; font-weight: 500; color: #fafafa; font-family: monospace; margin-bottom: 12px; word-break: break-all; line-height: 1.5; }
.inv-status-body { padding: 20px; text-align: center; }
.inv-status-icon { font-size: 32px; margin-bottom: 8px; }
.inv-status-text { font-size: 16px; font-weight: 600; color: #fbbf24; }
.inv-status-countdown { font-size: 14px; color: #a3a3a3; margin-top: 4px; }
body.light-theme .inv-clickable:hover { color: #059669; }
body.light-theme .inv-amount-box, body.light-theme .inv-address-box { background: rgba(16, 185, 129, 0.04); border-color: rgba(16, 185, 129, 0.12); }
body.light-theme .inv-amount-value { color: #059669; }
body.light-theme .inv-address-value { color: #111827; }
body.light-theme .inv-status-text { color: #d97706; }
body.light-theme .inv-status-countdown { color: #6b7280; }

/* ==================== Tools Page Components ==================== */
.tl-form-row { display: flex; gap: 12px; margin-bottom: 16px; }
.tl-form-field { flex: 1; }
.tl-form-sm { flex: 0 0 100px; }
.tl-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tl-preset { padding: 10px 16px; background: rgba(255, 255, 255, 0.02); border: 1px solid #333; border-radius: 8px; font-size: 12px; font-weight: 500; color: #a3a3a3; cursor: pointer; transition: all 0.2s; }
.tl-preset span { font-weight: 400; color: #525252; margin-left: 6px; }
.tl-preset:hover { border-color: #525252; color: #fafafa; background: rgba(255, 255, 255, 0.05); }
.tl-preset.active { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08)); border-color: #10b981; color: #34d399; }
.tl-preset.active span { color: #34d399; }
.tl-submit-btn { width: 100%; padding: 12px 20px; }
.tl-results { padding: 0; }
.tl-result-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #262626; }
.tl-result-item:last-child { border-bottom: none; }
.tl-result-main { flex: 1; font-family: monospace; font-size: 14px; font-weight: 600; color: #fafafa; letter-spacing: 0.5px; }
.tl-result-meta { display: flex; gap: 12px; font-size: 12px; color: #737373; }
.tl-result-meta span { background: rgba(255, 255, 255, 0.03); padding: 4px 8px; border-radius: 4px; }
.tl-result-copy { padding: 6px 12px; background: rgba(16, 185, 129, 0.1); border: none; color: #34d399; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.tl-result-copy:hover { background: rgba(16, 185, 129, 0.2); }
.tl-textarea { width: 100%; min-height: 120px; padding: 12px; background: rgba(255, 255, 255, 0.02); border: 1px solid #262626; border-radius: 8px; color: #fafafa; font-size: 13px; font-family: monospace; resize: vertical; }
.tl-textarea:focus { outline: none; border-color: #10b981; }
body.light-theme .tl-preset { background: #fff; border-color: #e5e7eb; color: #6b7280; }
body.light-theme .tl-preset span { color: #9ca3af; }
body.light-theme .tl-preset:hover { border-color: #d1d5db; color: #374151; }
body.light-theme .tl-preset.active { background: rgba(16, 185, 129, 0.1); border-color: #10b981; color: #059669; }
body.light-theme .tl-preset.active span { color: #059669; }
body.light-theme .tl-result-item { border-color: #e5e5e5; }
body.light-theme .tl-result-main { color: #111827; }
body.light-theme .tl-result-meta { color: #6b7280; }
body.light-theme .tl-result-meta span { background: rgba(0, 0, 0, 0.03); }
body.light-theme .tl-result-copy { background: rgba(16, 185, 129, 0.08); color: #059669; }
body.light-theme .tl-textarea { background: #fff; border-color: #e5e5e5; color: #111827; }
@media (max-width: 640px) {
    .tl-form-row { flex-direction: column; gap: 12px; }
    .tl-form-sm { flex: 1; }
    .tl-result-item { flex-wrap: wrap; }
    .tl-result-main { width: 100%; margin-bottom: 8px; }
}

/* BIN Checker Results */
.bin-result { background: rgba(255, 255, 255, 0.02); border: 1px solid #262626; border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.bin-result:last-child { margin-bottom: 0; }
.bin-result.valid { border-color: rgba(16, 185, 129, 0.3); }
.bin-result.invalid { border-color: rgba(239, 68, 68, 0.3); opacity: 0.7; }
.bin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.bin-number { font-family: monospace; font-size: 18px; font-weight: 700; color: #fafafa; }
.bin-status { padding: 4px 10px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.bin-status.status-valid { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.bin-status.status-invalid { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.brand-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; margin-left: 10px; }
.brand-visa { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.brand-mastercard { background: rgba(249, 115, 22, 0.15); color: #fb923c; }
.brand-amex { background: rgba(34, 211, 238, 0.15); color: #22d3ee; }
.brand-discover { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.brand-other { background: rgba(156, 163, 175, 0.15); color: #9ca3af; }
.bin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bin-field { padding: 8px 10px; background: rgba(0, 0, 0, 0.2);  }
.bin-field-label { font-size: 10px; color: #525252; margin-bottom: 4px; text-transform: uppercase; }
.bin-field-value { font-size: 12px; color: #d4d4d4; font-weight: 500; }
.stats-row { display: flex; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #262626; }
.stat-item { font-size: 11px; color: #737373; }
body.light-theme .bin-result { background: #fff; border-color: #e5e5e5; }
body.light-theme .bin-result.valid { border-color: rgba(16, 185, 129, 0.4); }
body.light-theme .bin-number { color: #111827; }
body.light-theme .bin-field { background: rgba(0, 0, 0, 0.03); }
body.light-theme .bin-field-value { color: #374151; }
body.light-theme .stats-row { border-color: #e5e5e5; }
@media (max-width: 768px) {
    .bin-grid { grid-template-columns: repeat(2, 1fr); }
}

/* OSINT Platforms */
.osint-platforms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.osint-platform { padding: 6px 12px; background: rgba(255, 255, 255, 0.02); border: 1px solid #262626;  font-size: 11px; color: #a3a3a3; cursor: pointer; transition: all 0.15s; }
.osint-platform.selected { background: rgba(16, 185, 129, 0.15); border-color: #10b981; color: #34d399; }
.osint-quick-btns { display: flex; gap: 8px; margin-bottom: 10px; }
.osint-quick-btn { padding: 6px 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid #262626;  color: #737373; font-size: 11px; cursor: pointer; transition: all 0.15s; }
.osint-quick-btn:hover { border-color: #10b981; color: #10b981; }
.osint-result { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #262626; }
.osint-result:last-child { border-bottom: none; }
.osint-result.found { background: rgba(16, 185, 129, 0.05); }
.osint-result.not-found { opacity: 0.5; }
.osint-result-icon { font-size: 18px; }
.osint-result-name { font-size: 12px; font-weight: 600; color: #fafafa; flex: 1; }
.osint-result-status { font-size: 10px; padding: 4px 8px; border-radius: 4px; font-weight: 600; }
.osint-result-status.found { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.osint-result-status.not-found { background: rgba(107, 114, 128, 0.15); color: #737373; }
body.light-theme .osint-platform { background: rgba(0, 0, 0, 0.02); border-color: #e5e5e5; color: #6b7280; }
body.light-theme .osint-result { border-color: #e5e5e5; }
body.light-theme .osint-result-name { color: #111827; }

/* Proxy Parser */
.proxy-update-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 8px; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.proxy-status { display: flex; align-items: center; gap: 8px; }
.proxy-status-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.proxy-status-text { font-size: 12px; color: #34d399; }
.proxy-time { font-size: 11px; color: #525252; }
.proxy-refresh-btn { padding: 6px 14px; background: linear-gradient(135deg, #10b981, #059669); border: none;  color: #fff; font-size: 11px; font-weight: 600; cursor: pointer; }
.proxy-limit-banner { padding: 16px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: 8px; margin-bottom: 16px; text-align: center; }
.proxy-limit-banner h3 { font-size: 14px; color: #fbbf24; margin: 0 0 8px 0; }
.proxy-limit-banner p { font-size: 12px; color: #d4d4d4; margin: 0; }
.proxy-upgrade-btn { display: inline-block; margin-top: 12px; padding: 8px 20px; background: linear-gradient(135deg, #f59e0b, #d97706);  color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; }
.proxy-filter-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.proxy-filter-tab { padding: 8px 14px; background: rgba(255, 255, 255, 0.02); border: 1px solid #262626;  color: #737373; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.proxy-filter-tab:hover { border-color: #404040; color: #fafafa; }
.proxy-filter-tab.active { background: linear-gradient(135deg, #10b981, #059669); border-color: #10b981; color: #fff; }
.proxy-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.proxy-column { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 8px; padding: 12px; }
.proxy-column-header { font-size: 11px; color: #525252; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #1a1a1a; }
.proxy-item { font-size: 12px; font-family: monospace; color: #d4d4d4; padding: 4px 0; }
body.light-theme .proxy-update-bar { background: rgba(16, 185, 129, 0.05); }
body.light-theme .proxy-limit-banner { background: rgba(245, 158, 11, 0.05); }
body.light-theme .proxy-column { background: #fff; border-color: #e5e5e5; }
body.light-theme .proxy-item { color: #4b5563; }
@media (max-width: 768px) {
    .proxy-columns { grid-template-columns: 1fr; }
    .proxy-update-bar { flex-direction: column; text-align: center; }
}

/* ==================== Proxy Parser New ==================== */
.pp-tool-hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 60px 0 40px; margin-bottom: 40px; text-align: center; }
.pp-tool-title { font-size: 36px; font-weight: 700; margin-bottom: 12px; }
.pp-tool-subtitle { font-size: 16px; color: rgba(255,255,255,0.9); }
.pp-update-bar { background: #0a0a0a; padding: 16px 24px; margin-bottom: 24px; border: 1px solid #1a1a1a; display: flex; justify-content: space-between; align-items: center; }
.pp-update-status { display: flex; align-items: center; gap: 12px; }
.pp-status-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: pulse 2s infinite; }
.pp-update-text { font-size: 13px; color: #a3a3a3; }
.pp-update-time { font-size: 12px; color: #737373; }
.pp-limit-banner { background: linear-gradient(135deg, #f59e0b, #ef4444); padding: 20px; margin-bottom: 24px; text-align: center; }
.pp-limit-banner h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.pp-limit-banner p { font-size: 14px; opacity: 0.95; margin-bottom: 12px; }
.pp-upgrade-btn { background: #000; color: #fff; padding: 10px 24px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; display: inline-block; }
.pp-tool-card { background: #0a0a0a; border: 1px solid #1a1a1a; padding: 32px; margin-bottom: 24px; }
.pp-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
.pp-stat-card { background: #050505; padding: 20px; border: 1px solid #1a1a1a; text-align: center; }
.pp-stat-value { font-size: 32px; font-weight: 700; color: #fafafa; }
.pp-stat-label { font-size: 11px; color: #737373; text-transform: uppercase; margin-top: 4px; letter-spacing: 0.5px; }
.pp-filter-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.pp-filter-tab { background: #1a1a1a; color: #737373; padding: 10px 20px; font-size: 13px; border: 1px solid #262626; cursor: pointer; transition: all 0.2s; }
.pp-filter-tab:hover { background: #262626; color: #a3a3a3; }
.pp-filter-tab.active { background: #667eea; color: #fff; border-color: #667eea; }
.pp-proxy-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pp-proxy-column { background: #050505; border: 1px solid #262626; padding: 16px; height: 600px; overflow-y: auto; }
.pp-proxy-column::-webkit-scrollbar { width: 6px; }
.pp-proxy-column::-webkit-scrollbar-track { background: #1a1a1a; }
.pp-proxy-column::-webkit-scrollbar-thumb { background: #404040; }
.pp-column-header { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #737373; margin-bottom: 12px; font-weight: 600; padding: 8px; background: #0a0a0a; }
.pp-proxy-item { background: #0a0a0a; padding: 10px; margin-bottom: 8px; border: 1px solid #1a1a1a; display: flex; justify-content: space-between; align-items: center; font-size: 12px; cursor: pointer; transition: all 0.2s; }
.pp-proxy-item:hover { background: #0f0f0f; border-color: #667eea; }
.pp-proxy-ip { font-family: 'Courier New', monospace; color: #10b981; font-weight: 600; }
.pp-proxy-meta { display: flex; align-items: center; gap: 8px; }
.pp-proxy-type { padding: 2px 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.pp-type-http { background: #3b82f6; color: #fff; }
.pp-type-https { background: #10b981; color: #fff; }
.pp-type-socks4 { background: #f59e0b; color: #000; }
.pp-type-socks5 { background: #ef4444; color: #fff; }
.pp-country-flag { font-size: 14px; }
.pp-copy-btn { background: none; border: none; color: #667eea; cursor: pointer; padding: 4px; }
.pp-copy-btn:hover { color: #8b5cf6; }
.pp-pagination-bar { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 24px; }
.pp-page-btn { background: #1a1a1a; color: #a3a3a3; padding: 8px 12px; border: 1px solid #262626; cursor: pointer; font-size: 12px; min-width: 36px; text-align: center; }
.pp-page-btn:hover { background: #262626; color: #fafafa; }
.pp-page-btn.active { background: #667eea; color: #fff; border-color: #667eea; }
.pp-page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pp-page-info { font-size: 13px; color: #737373; margin: 0 16px; }
.pp-export-section { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 20px; }
.pp-export-btn { background: #1a1a1a; color: #a3a3a3; padding: 10px 20px; font-size: 12px; border: 1px solid #262626; cursor: pointer; }
.pp-export-btn:hover { background: #262626; color: #fafafa; }
.pp-refresh-btn { background: #667eea; color: #fff; padding: 6px 14px; font-size: 12px; border: none; cursor: pointer; font-weight: 600; }
.pp-refresh-btn:hover { background: #5a67d8; }
body.light-theme .pp-update-bar { background: #f9fafb; border-color: #e5e7eb; }
body.light-theme .pp-update-text { color: #6b7280; }
body.light-theme .pp-tool-card { background: #fff; border-color: #e5e7eb; }
body.light-theme .pp-stat-card { background: #f9fafb; border-color: #e5e7eb; }
body.light-theme .pp-stat-value { color: #111827; }
body.light-theme .pp-filter-tab { background: #f3f4f6; border-color: #e5e7eb; color: #6b7280; }
body.light-theme .pp-filter-tab:hover { background: #e5e7eb; color: #374151; }
body.light-theme .pp-proxy-column { background: #fff; border-color: #e5e7eb; }
body.light-theme .pp-proxy-item { background: #f9fafb; border-color: #e5e7eb; }
body.light-theme .pp-column-header { background: #f3f4f6; color: #6b7280; }
body.light-theme .pp-page-btn { background: #f3f4f6; border-color: #e5e7eb; color: #6b7280; }
body.light-theme .pp-export-btn { background: #f3f4f6; border-color: #e5e7eb; color: #6b7280; }
@media (max-width: 768px) { .pp-proxy-columns { grid-template-columns: 1fr; } }

/* ==================== Tool Result Cards ==================== */
.tl-results { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.tl-result-card { background: rgba(0, 0, 0, 0.3); border: 1px solid #262626; border-radius: 10px; padding: 16px; transition: all 0.2s; }
.tl-result-card:hover { border-color: #404040; }
.tl-result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #262626; }
.tl-result-title { font-size: 14px; font-weight: 600; color: #fafafa; }
.tl-result-badge { padding: 4px 10px; background: rgba(16, 185, 129, 0.15); color: #34d399; font-size: 10px; font-weight: 600; border-radius: 4px; text-transform: uppercase; }
.tl-result-body { font-size: 12px; color: #a3a3a3; line-height: 1.7; }
.tl-result-row { display: flex; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.tl-result-row:last-child { border-bottom: none; }
.tl-result-label { width: 120px; color: #525252; font-size: 11px; text-transform: uppercase; }
.tl-result-value { flex: 1; color: #d4d4d4; font-size: 12px; }
.tl-result-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #262626; }
body.light-theme .tl-result-card { background: #fff; border-color: #e5e7eb; }
body.light-theme .tl-result-card:hover { border-color: #d1d5db; }
body.light-theme .tl-result-header { border-color: #f3f4f6; }
body.light-theme .tl-result-title { color: #111827; }
body.light-theme .tl-result-body { color: #6b7280; }
body.light-theme .tl-result-label { color: #9ca3af; }
body.light-theme .tl-result-value { color: #374151; }
body.light-theme .tl-result-actions { border-color: #f3f4f6; }

/* ==================== Tool Action Buttons ==================== */
.tl-btn { padding: 8px 14px;  font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; border: none; }
.tl-btn-primary { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.tl-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.tl-btn-secondary { background: rgba(255, 255, 255, 0.05); border: 1px solid #333; color: #a3a3a3; }
.tl-btn-secondary:hover { border-color: #525252; color: #fafafa; }
.tl-btn-copy { background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.3); color: #a855f7; }
.tl-btn-copy:hover { background: rgba(168, 85, 247, 0.2); }
.tl-btn-copy.copied { background: rgba(16, 185, 129, 0.15); border-color: #10b981; color: #34d399; }
body.light-theme .tl-btn-secondary { background: #f9fafb; border-color: #e5e7eb; color: #6b7280; }
body.light-theme .tl-btn-copy { background: rgba(168, 85, 247, 0.08); }

/* ==================== Address Cards ==================== */
.addr-card { background: rgba(0, 0, 0, 0.3); border: 1px solid #262626; border-radius: 10px; padding: 16px; }
.addr-card-name { font-size: 14px; font-weight: 600; color: #fafafa; margin-bottom: 10px; }
.addr-card-details { font-size: 12px; color: #a3a3a3; line-height: 1.8; }
.addr-card-actions { display: flex; gap: 8px; margin-top: 12px; }
body.light-theme .addr-card { background: #fff; border-color: #e5e7eb; }
body.light-theme .addr-card-name { color: #111827; }
body.light-theme .addr-card-details { color: #6b7280; }

/* ==================== OSINT Result Cards ==================== */
.osint-result-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(0, 0, 0, 0.2); border: 1px solid #262626; border-radius: 8px; transition: all 0.15s; }
.osint-result-card.found { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.3); }
.osint-result-card.not-found { opacity: 0.5; }
.osint-icon { font-size: 20px; width: 32px; text-align: center; }
.osint-info { flex: 1; }
.osint-platform-name { font-size: 13px; font-weight: 600; color: #fafafa; }
.osint-platform-status { font-size: 11px; color: #525252; margin-top: 2px; }
.osint-link { padding: 6px 12px; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.3); color: #3b82f6; font-size: 11px; font-weight: 600;  text-decoration: none; transition: all 0.15s; }
.osint-link:hover { background: rgba(59, 130, 246, 0.2); }
body.light-theme .osint-result-card { background: #fff; border-color: #e5e7eb; }
body.light-theme .osint-result-card.found { background: rgba(16, 185, 129, 0.04); }
body.light-theme .osint-platform-name { color: #111827; }

/* ==================== Product View & Buy Pages ==================== */
.pv-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
.pv-card { background: var(--bg-1); border: 1px solid var(--border); margin-bottom: 16px; }
.pv-status { padding: 12px 16px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; background: rgba(16,185,129,0.1); color: #10b981; border-bottom: 1px solid var(--border); }
.pv-status-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: pvPulse 2s infinite; }
@keyframes pvPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.pv-warning { background: rgba(239,68,68,0.1); color: #fca5a5; }
.pv-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); border-bottom: 1px solid var(--border); }
.pv-price-item { background: var(--bg-2); padding: 16px 12px; text-align: center; border-right: 1px solid var(--border); }
.pv-price-item:last-child { border-right: none; }
.pv-price-item.main { background: rgba(16,185,129,0.08); }
.pv-price-item.discount { background: rgba(139,92,246,0.08); }
.pv-price-label { display: block; font-size: 10px; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; letter-spacing: 0.3px; }
.pv-price-value { font-size: 18px; font-weight: 700; color: var(--text); }
.pv-price-item.main .pv-price-value { color: #10b981; }
.pv-price-item.discount .pv-price-value { color: #a78bfa; }
.pv-section { padding: 20px; border-bottom: 1px solid var(--border); }
.pv-section:last-child { border-bottom: none; }
.pv-section-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.pv-desc { color: var(--text-2); line-height: 1.7; font-size: 14px; }
.pv-balance { font-size: 13px; color: var(--text-2); margin-bottom: 16px; padding: 12px 14px; background: var(--bg-2); }
.pv-balance.insufficient { color: #ef4444; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); }
.pv-btn-buy { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 16px; background: linear-gradient(135deg, #10b981, #059669); border: none; color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; transition: all 0.2s; margin-bottom: 12px; }
.pv-btn-buy:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); color: #fff; }
.pv-btn-buy:disabled { background: #262626; color: #525252; cursor: not-allowed; }
.pv-btn-label { font-size: 14px; }
.pv-btn-price { font-size: 18px; }
.pv-btn-deposit { display: block; width: 100%; padding: 12px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); color: #60a5fa; font-size: 13px; font-weight: 600; text-decoration: none; text-align: center; margin-bottom: 12px; transition: all 0.2s; }
.pv-btn-deposit:hover { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.pv-escrow { text-align: center; font-size: 12px; color: #10b981; font-weight: 500; }
.pv-back { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--bg-1); border: 1px solid var(--border); color: var(--text-2); text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.2s; margin-top: 20px; }
.pv-back:hover { background: var(--bg-2); color: #10b981; border-color: #10b981; }

/* Product Buy Page Extras */
.pv-qty-wrap { margin-bottom: 16px; }
.pv-qty-input { width: 100%; padding: 12px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font-size: 14px; text-align: center; }
.pv-qty-slider { width: 100%; margin-top: 8px; }
.pv-promo-wrap { display: flex; gap: 8px; margin-bottom: 12px; }
.pv-promo-input { flex: 1; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; }
.pv-promo-btn { padding: 10px 16px; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; font-size: 12px; font-weight: 600; cursor: pointer; }
.pv-promo-btn:hover { background: rgba(16, 185, 129, 0.25); }
.pv-promo-msg { font-size: 12px; margin-top: 8px; }
.pv-promo-msg.success { color: #10b981; }
.pv-promo-msg.error { color: #ef4444; }
.pv-breakdown { margin-top: 12px; padding: 12px; background: var(--bg-2); border: 1px solid var(--border); font-size: 12px; }
.pv-breakdown-row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--text-2); }
.pv-breakdown-row.final { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; font-weight: 700; color: #10b981; }
.pv-total { text-align: center; padding: 20px; background: rgba(16, 185, 129, 0.05); border: 1px solid rgba(16, 185, 129, 0.2); margin-bottom: 16px; }
.pv-total-label { font-size: 11px; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.pv-total-value { font-size: 28px; font-weight: 700; color: #10b981; }
.pv-alert { padding: 12px 16px; font-size: 13px; margin-bottom: 16px; }
.pv-alert-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; }
.pv-alert-success { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #34d399; }

/* Upsell Card */
.pv-upsell { background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.05)); border: 1px solid rgba(139, 92, 246, 0.2); padding: 16px; margin-bottom: 16px; }
.pv-upsell-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #a78bfa; margin-bottom: 12px; }
.pv-upsell-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pv-upsell-opt { text-align: center; padding: 12px; background: rgba(0,0,0,0.2); border: 1px solid rgba(139,92,246,0.2); }
.pv-upsell-opt.vip { border-color: rgba(236, 72, 153, 0.3); background: rgba(236, 72, 153, 0.05); }
.pv-upsell-tier { font-size: 11px; font-weight: 700; color: #fbbf24; text-transform: uppercase; margin-bottom: 4px; }
.pv-upsell-opt.vip .pv-upsell-tier { color: #f472b6; }
.pv-upsell-save { font-size: 16px; font-weight: 700; color: #10b981; }
.pv-upsell-link { display: block; margin-top: 8px; padding: 6px; background: rgba(139,92,246,0.15); color: #a78bfa; font-size: 11px; font-weight: 600; text-decoration: none; }
.pv-upsell-opt.vip .pv-upsell-link { background: rgba(236, 72, 153, 0.15); color: #f472b6; }

/* Recording Modal */
.rec-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 9999; }
.rec-modal-overlay.active { display: flex; }
.rec-modal { background: var(--bg-1); border: 1px solid var(--border); max-width: 420px; padding: 24px; text-align: center; }
.rec-modal-icon { font-size: 48px; margin-bottom: 16px; color: #ef4444; }
.rec-modal-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.rec-modal-text { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-bottom: 20px; }
.rec-modal-btns { display: flex; flex-direction: column; gap: 8px; }
.rec-modal-confirm { padding: 14px; background: linear-gradient(135deg, #10b981, #059669); border: none; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.rec-modal-back { padding: 12px; background: transparent; border: 1px solid var(--border); color: var(--text-2); font-size: 12px; cursor: pointer; }

body.light-theme .pv-card { background: #fff; border-color: #e5e7eb; }
body.light-theme .pv-status { background: rgba(16,185,129,0.08); }
body.light-theme .pv-price-item { background: #f9fafb; border-color: #e5e7eb; }
body.light-theme .pv-price-value { color: #1f2937; }
body.light-theme .pv-section { border-color: #e5e7eb; }
body.light-theme .pv-section-title { color: #1f2937; }
body.light-theme .pv-desc { color: #6b7280; }
body.light-theme .pv-balance { background: #f3f4f6; color: #6b7280; }
body.light-theme .pv-back { background: #fff; border-color: #e5e7eb; color: #6b7280; }
body.light-theme .pv-back:hover { background: #f9fafb; }
body.light-theme .pv-qty-input { background: #fff; border-color: #d1d5db; color: #1a1a1a; }
body.light-theme .pv-promo-input { background: #fff; border-color: #d1d5db; color: #1a1a1a; }
body.light-theme .pv-breakdown { background: #f9fafb; border-color: #e5e7eb; }
body.light-theme .pv-total { background: rgba(16, 185, 129, 0.03); border-color: rgba(16, 185, 129, 0.15); }
body.light-theme .rec-modal { background: #fff; border-color: #e5e7eb; }
body.light-theme .rec-modal-title { color: #1a1a1a; }
body.light-theme .rec-modal-text { color: #6b7280; }

/* Light Theme - Upsell Card */
body.light-theme .pv-upsell { background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(236, 72, 153, 0.03)); border-color: rgba(139, 92, 246, 0.15); }
body.light-theme .pv-upsell-head { color: #7c3aed; }
body.light-theme .pv-upsell-opt { background: rgba(139, 92, 246, 0.04); border-color: rgba(139, 92, 246, 0.15); }
body.light-theme .pv-upsell-opt.vip { background: rgba(236, 72, 153, 0.04); border-color: rgba(236, 72, 153, 0.15); }
body.light-theme .pv-upsell-tier { color: #d97706; }
body.light-theme .pv-upsell-opt.vip .pv-upsell-tier { color: #db2777; }
body.light-theme .pv-upsell-save { color: #059669; }
body.light-theme .pv-upsell-link { background: rgba(139, 92, 246, 0.1); color: #7c3aed; }
body.light-theme .pv-upsell-opt.vip .pv-upsell-link { background: rgba(236, 72, 153, 0.1); color: #db2777; }

/* Light Theme - Side Panel */
body.light-theme .side-panel { background: #fff; border-color: #e5e7eb; }
body.light-theme .side-head { background: #f9fafb; border-color: #e5e7eb; color: #1f2937; }
body.light-theme .info-list { background: transparent; }
body.light-theme .info-item { border-color: #f3f4f6; color: #6b7280; }

/* Deposit Bonus Calculator */
.dep-calc-box { background: #0a0a0a; border: 1px solid #262626; padding: 16px; margin: 16px 0; }
.dep-calc-title { font-size: 13px; font-weight: 600; color: #fafafa; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.dep-calc-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; color: #a3a3a3; border-bottom: 1px solid #1a1a1a; }
.dep-calc-row:last-child { border-bottom: none; }
.dep-calc-total { border-top: 1px solid #333; margin-top: 8px; padding-top: 12px; }
.dep-calc-total span { color: #fafafa; font-weight: 600; }
.dep-calc-blue { color: #3b82f6 !important; }
.dep-calc-gold { color: #fbbf24 !important; }
.dep-calc-green { color: #10b981 !important; }
body.light-theme .dep-calc-box { background: #f9fafb; border-color: #e5e7eb; }
body.light-theme .dep-calc-title { color: #1f2937; }
body.light-theme .dep-calc-row { color: #6b7280; border-color: #e5e7eb; }
body.light-theme .dep-calc-total span { color: #1f2937; }

/* Message Pages Styles */
.orders-4col { grid-template-columns: 1fr 2fr 120px 80px; }
.prod-sender { font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.prod-preview { color: var(--text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-time { color: var(--text-3); font-size: 11px; }
.prod-unread { background: rgba(239, 68, 68, 0.05); }
.prod-badge-red { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.prod-badge-purple { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
.prod-badge-pink { background: rgba(236, 72, 153, 0.15); color: #f472b6; }
.msg-from-system { color: #a78bfa; font-weight: 600; }
.msg-from-support { color: #10b981; font-weight: 600; }
.vault-red { color: #ef4444; }

/* Message View Page */
.msg-view-meta { display: flex; gap: 24px; padding: 16px 20px; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.msg-view-field { display: flex; gap: 8px; }
.msg-view-label { color: var(--text-3); font-size: 12px; }
.msg-view-value { color: var(--text); font-size: 12px; font-weight: 500; }
.msg-view-content { padding: 20px; font-size: 14px; color: var(--text-2); line-height: 1.7; white-space: pre-wrap; min-height: 150px; }
.msg-view-actions { display: flex; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--border); justify-content: center; flex-wrap: wrap; }
.msg-system-notice { padding: 12px 16px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2); color: #a78bfa; font-size: 12px; text-align: center; width: 100%; }
.msg-send-actions { display: flex; gap: 12px; padding: 16px 0 0; justify-content: center; }

/* Alert margin utility */
.alert-mb { margin-bottom: 16px; }

/* Full width button */
.prf-btn-full { width: 100%; }

body.light-theme .msg-view-meta { background: #f9fafb; }
body.light-theme .msg-view-label { color: #6b7280; }
body.light-theme .msg-view-value { color: #1f2937; }
body.light-theme .msg-view-content { color: #4b5563; }
body.light-theme .prod-unread { background: rgba(239, 68, 68, 0.03); }
body.light-theme .msg-from-system { color: #7c3aed; }
body.light-theme .msg-from-support { color: #059669; }

@media (max-width: 768px) {
    .orders-4col { grid-template-columns: 1fr; }
    .msg-view-meta { flex-direction: column; gap: 8px; }
}

@media (max-width: 900px) {
    .pv-grid { grid-template-columns: 1fr; }
    .pv-price-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== Fullz Profile Cards ==================== */
.fullz-card { background: rgba(0, 0, 0, 0.3); border: 1px solid #262626; border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.fullz-card-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid #262626; }
.fullz-card-name { font-size: 15px; font-weight: 600; color: #fafafa; }
.fullz-card-actions { display: flex; gap: 6px; }
.fullz-section { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.fullz-section:last-child { border-bottom: none; }
.fullz-section-title { font-size: 10px; color: #fbbf24; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; font-weight: 600; }
.fullz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fullz-field { margin-bottom: 4px; }
.fullz-field-label { font-size: 10px; color: #525252; text-transform: uppercase; margin-bottom: 2px; }
.fullz-field-value { font-size: 12px; color: #d4d4d4; font-weight: 500; }
.fullz-field-value.highlight { color: #10b981; font-family: monospace; }
body.light-theme .fullz-card { background: #fff; border-color: #e5e7eb; }
body.light-theme .fullz-card-header { background: #f9fafb; border-color: #f3f4f6; }
body.light-theme .fullz-card-name { color: #111827; }
body.light-theme .fullz-section { border-color: #f3f4f6; }
body.light-theme .fullz-field-value { color: #374151; }
@media (max-width: 640px) {
    .fullz-grid { grid-template-columns: 1fr; }
}

/* ==================== Export Buttons Row ==================== */
.tl-export-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tl-export-btn { padding: 8px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid #333;  color: #a3a3a3; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.tl-export-btn:hover { border-color: #525252; color: #fafafa; background: rgba(255, 255, 255, 0.06); }
body.light-theme .tl-export-btn { background: #fff; border-color: #e5e7eb; color: #6b7280; }
body.light-theme .tl-export-btn:hover { border-color: #d1d5db; color: #374151; }

/* ==================== Proxy Export Buttons ==================== */
.proxy-export { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.proxy-export-btn { padding: 8px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid #333;  color: #a3a3a3; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.proxy-export-btn:hover { border-color: #525252; color: #fafafa; }
body.light-theme .proxy-export-btn { background: #fff; border-color: #e5e7eb; color: #6b7280; }

/* ==================== Proxy Pagination ==================== */
.proxy-pagination { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #262626; }
.proxy-page-btn { width: 32px; height: 32px; background: rgba(255, 255, 255, 0.03); border: 1px solid #333;  color: #a3a3a3; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.proxy-page-btn:hover { border-color: #525252; color: #fafafa; }
.proxy-page-info { font-size: 11px; color: #525252; margin-left: auto; }
body.light-theme .proxy-page-btn { background: #fff; border-color: #e5e7eb; }
body.light-theme .proxy-pagination { border-color: #e5e7eb; }

/* ==================== Proxy Item Display ==================== */
.proxy-list { display: flex; flex-direction: column; gap: 6px; }
.proxy-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(0, 0, 0, 0.2); border: 1px solid #262626;  font-family: monospace; font-size: 12px; }
.proxy-row:hover { border-color: #404040; }
.proxy-ip { flex: 1; color: #fafafa; font-weight: 500; }
.proxy-type { padding: 3px 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.proxy-type.http { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.proxy-type.https { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.proxy-type.socks4 { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.proxy-type.socks5 { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.proxy-country { font-size: 11px; color: #737373; min-width: 40px; }
.proxy-speed { font-size: 10px; color: #525252; }
.proxy-copy { padding: 4px 10px; background: rgba(16, 185, 129, 0.1); border: none; color: #10b981; font-size: 10px; cursor: pointer; transition: all 0.15s; }
.proxy-copy:hover { background: rgba(16, 185, 129, 0.2); }
body.light-theme .proxy-row { background: #fff; border-color: #e5e7eb; }
body.light-theme .proxy-ip { color: #111827; }

/* ==================== Error Pages ==================== */
.error-container { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 40px 20px; }
.error-content { text-align: center; max-width: 500px; }
.error-code { font-size: 120px; font-weight: 700; line-height: 1; margin-bottom: 20px; font-family: 'Roboto Mono', monospace; }
.error-code-red { color: #ef4444; text-shadow: 0 0 30px rgba(239, 68, 68, 0.3); }
.error-code-green { color: #10b981; text-shadow: 0 0 30px rgba(16, 185, 129, 0.3); }
.error-code-cyan { color: #06b6d4; text-shadow: 0 0 30px rgba(6, 182, 212, 0.3); }
.error-code-amber { color: #f59e0b; text-shadow: 0 0 30px rgba(245, 158, 11, 0.3); }
.error-code-purple { color: #8b5cf6; text-shadow: 0 0 30px rgba(139, 92, 246, 0.3); }
.error-title { font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.error-message { font-size: 14px; color: var(--text-2); line-height: 1.7; margin-bottom: 24px; }
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.btn-error { padding: 12px 24px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.btn-error.btn-primary { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.btn-error.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); }
.btn-error.btn-secondary { background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2); }
.btn-error.btn-secondary:hover { background: var(--bg-3); color: var(--text); }
.error-decoration { font-size: 12px; color: var(--text-3); }
.error-decoration p { margin: 0; }

body.light-theme .error-title { color: #1f2937; }
body.light-theme .error-message { color: #6b7280; }
body.light-theme .btn-error.btn-secondary { background: #fff; border-color: #e5e7eb; color: #6b7280; }
body.light-theme .btn-error.btn-secondary:hover { background: #f9fafb; color: #1f2937; }
body.light-theme .error-decoration { color: #9ca3af; }

@media (max-width: 640px) {
    .error-code { font-size: 80px; }
    .error-title { font-size: 20px; }
    .error-actions { flex-direction: column; }
    .btn-error { width: 100%; text-align: center; }
}

/* ==================== News Pages ==================== */

/* -- Featured (latest) news card -- */
.nw-featured {
    display: block;
    position: relative;
    background: var(--bg-1);
    border: 1px solid var(--border);
    padding: 28px 28px 20px;
    margin-bottom: 16px;
    text-decoration: none;
    transition: border-color 0.25s, box-shadow 0.25s;
    overflow: hidden;
}
.nw-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green), var(--gold));
}
.nw-featured:hover {
    border-color: var(--green);
    box-shadow: 0 4px 24px rgba(16, 185, 129, 0.1);
}
.nw-featured-badge {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(16, 185, 129, 0.15);
    color: var(--green);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
}
.nw-featured-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 10px;
    line-height: 1.35;
    transition: color 0.2s;
}
.nw-featured:hover .nw-featured-title {
    color: var(--green);
}
.nw-featured-excerpt {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.7;
    margin: 0 0 14px;
    max-width: 720px;
}
.nw-featured-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-3);
}
.nw-featured-date,
.nw-featured-time {
    color: var(--text-3);
}
.nw-featured-dot {
    opacity: 0.4;
}
.nw-featured-read {
    margin-left: auto;
    color: var(--green);
    font-weight: 600;
    font-size: 12px;
    transition: transform 0.2s;
}
.nw-featured:hover .nw-featured-read {
    transform: translateX(3px);
}

/* -- News list items -- */
.nw-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 20px;
}
.nw-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.nw-item:hover {
    border-color: var(--green);
    background: var(--bg-2);
}
.nw-item-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
    flex-shrink: 0;
}
.nw-item-day {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
}
.nw-item-month {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.nw-item-body {
    flex: 1;
    min-width: 0;
}
.nw-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 3px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}
.nw-item:hover .nw-item-title {
    color: var(--green);
}
.nw-item-excerpt {
    font-size: 12px;
    color: var(--text-3);
    margin: 0;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nw-item-arrow {
    font-size: 14px;
    color: var(--text-3);
    flex-shrink: 0;
    transition: color 0.2s, transform 0.2s;
}
.nw-item:hover .nw-item-arrow {
    color: var(--green);
    transform: translateX(3px);
}

/* -- Empty state -- */
.nw-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-1);
    border: 1px solid var(--border);
}
.nw-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}
.nw-empty h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
}
.nw-empty p {
    font-size: 13px;
    color: var(--text-2);
    margin: 0;
}

/* -- News article view -- */
.nv-article {
    background: var(--bg-1);
    border: 1px solid var(--border);
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto;
}
.nv-header {
    padding: 24px 28px 20px;
    border-bottom: 1px solid var(--border);
}
.nv-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.nv-category {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(16, 185, 129, 0.15);
    color: var(--green);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.nv-date {
    font-size: 12px;
    color: var(--text-3);
}
.nv-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.35;
}
.nv-content {
    padding: 24px 28px;
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.8;
    word-wrap: break-word;
}
.nv-footer {
    padding: 16px 28px;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.nv-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-2);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
}
.nv-btn-back:hover {
    border-color: var(--green);
    color: var(--green);
}
.nv-back-arrow {
    font-size: 14px;
    transition: transform 0.2s;
}
.nv-btn-back:hover .nv-back-arrow {
    transform: translateX(-2px);
}
.nv-share-btn {
    padding: 8px 16px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.nv-share-btn:hover {
    background: var(--green);
    border-color: var(--green);
    color: #000;
}

/* -- News light theme -- */
body.light-theme .nw-featured {
    background: #fff;
    border-color: #e5e7eb;
}
body.light-theme .nw-featured:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
body.light-theme .nw-featured-title {
    color: #1f2937;
}
body.light-theme .nw-featured-excerpt {
    color: #6b7280;
}
body.light-theme .nw-featured-meta {
    color: #9ca3af;
}
body.light-theme .nw-item {
    background: #fff;
    border-color: #e5e7eb;
}
body.light-theme .nw-item:hover {
    background: #f9fafb;
}
body.light-theme .nw-item-day {
    color: #1f2937;
}
body.light-theme .nw-item-title {
    color: #1f2937;
}
body.light-theme .nw-item-excerpt {
    color: #9ca3af;
}
body.light-theme .nw-empty {
    background: #fff;
    border-color: #e5e7eb;
}
body.light-theme .nw-empty h3 {
    color: #1f2937;
}
body.light-theme .nv-article {
    background: #fff;
    border-color: #e5e7eb;
}
body.light-theme .nv-header {
    border-color: #e5e7eb;
}
body.light-theme .nv-title {
    color: #1f2937;
}
body.light-theme .nv-content {
    color: #374151;
}
body.light-theme .nv-footer {
    background: #f9fafb;
    border-color: #e5e7eb;
}
body.light-theme .nv-btn-back {
    border-color: #e5e7eb;
    color: #6b7280;
}
body.light-theme .nv-btn-back:hover {
    border-color: #059669;
    color: #059669;
}
body.light-theme .nv-share-btn {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #6b7280;
}
body.light-theme .nv-share-btn:hover {
    background: #059669;
    border-color: #059669;
    color: #fff;
}

/* -- News responsive -- */
@media (max-width: 768px) {
    .nw-featured {
        padding: 20px 18px 16px;
    }
    .nw-featured-title {
        font-size: 18px;
    }
    .nw-featured-excerpt {
        font-size: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .nw-item {
        padding: 12px 14px;
        gap: 12px;
    }
    .nw-item-day {
        font-size: 16px;
    }
    .nw-item-title {
        font-size: 13px;
    }
    .nw-item-excerpt {
        display: none;
    }
    .nv-article {
        max-width: 100%;
    }
    .nv-header {
        padding: 18px 16px 14px;
    }
    .nv-title {
        font-size: 19px;
    }
    .nv-content {
        padding: 18px 16px;
        font-size: 13px;
    }
    .nv-footer {
        padding: 14px 16px;
        flex-wrap: wrap;
    }
}
@media (max-width: 480px) {
    .nw-featured-meta {
        flex-wrap: wrap;
        gap: 4px;
    }
    .nw-featured-read {
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
    }
    .nw-item-date {
        min-width: 34px;
    }
    .nw-item-day {
        font-size: 15px;
    }
    .nv-title {
        font-size: 17px;
    }
    .nv-content {
        font-size: 13px;
        line-height: 1.7;
    }
}

/* ==================== Dispute Pages ==================== */
/* Dispute Hero - Orange Theme */
.dispute-hero { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.08) 100%); border-bottom: 1px solid rgba(245, 158, 11, 0.2); padding: 24px 0; margin-bottom: 24px; }
.dispute-hero-content { display: flex; align-items: center; gap: 16px; }
.dispute-hero-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #f59e0b, #d97706); display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
.dispute-hero-text { flex: 1; }
.dispute-hero-title { font-size: 24px; font-weight: 700; color: var(--text); margin: 0 0 4px 0; }
.dispute-hero-subtitle { font-size: 13px; color: var(--text-2); margin: 0; }
.dispute-hero-stats { display: flex; gap: 12px; }
.dispute-hero-stat { text-align: center; padding: 10px 16px; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); }
.dispute-hero-stat.won { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.2); }
.dispute-hero-stat.won .dispute-hero-stat-num { color: #34d399; }
.dispute-hero-stat.lost { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); }
.dispute-hero-stat.lost .dispute-hero-stat-num { color: #f87171; }
.dispute-hero-stat-num { display: block; font-size: 18px; font-weight: 700; color: #fbbf24; }
.dispute-hero-stat-label { font-size: 10px; color: var(--text-2); text-transform: uppercase; }

/* Dispute Navigation */
.dispute-nav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center; }
.dispute-nav-link { padding: 8px 16px; font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.2s; }
.dispute-nav-link.active { background: #f59e0b; color: #000; }
.dispute-nav-link:not(.active) { background: var(--bg-2); color: var(--text-2); }
.dispute-nav-link:not(.active):hover { background: var(--bg-3); color: var(--text); }

/* Dispute Card */
.dispute-card { background: var(--bg-1); border: 1px solid var(--border); padding: 32px; margin-bottom: 20px; }
.dispute-product { background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.2); padding: 16px; margin-bottom: 20px; text-align: center; }
.dispute-product-label { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.dispute-product-name { font-size: 16px; font-weight: 600; color: #60a5fa; }
.dispute-warning { background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.2); padding: 16px; margin-bottom: 20px; }
.dispute-warning-title { font-size: 14px; font-weight: 600; color: #fbbf24; margin-bottom: 8px; }
.dispute-warning-text { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.dispute-rules { background: var(--bg-2); border: 1px solid var(--border); padding: 16px; margin-bottom: 20px; font-size: 12px; color: var(--text-2); line-height: 1.7; max-height: 150px; overflow-y: auto; }
.dispute-field { margin-bottom: 20px; }
.dispute-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.dispute-textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--border); padding: 12px 14px; color: var(--text); font-size: 14px; min-height: 120px; resize: vertical; transition: all 0.2s; }
.dispute-textarea:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); }
.dispute-btn-create { width: 100%; padding: 14px; background: linear-gradient(135deg, #f59e0b, #d97706); border: none; color: #000; font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: 12px; transition: all 0.2s; }
.dispute-btn-create:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3); }
.dispute-btn-back { display: block; text-align: center; padding: 12px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2); font-size: 13px; text-decoration: none; transition: all 0.2s; }
.dispute-btn-back:hover { background: var(--bg-3); color: var(--text); }
.dispute-alert { padding: 14px 18px; margin-bottom: 20px; font-size: 13px; }
.dispute-alert-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; }
.dispute-alert-success { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #34d399; }
.dispute-alert-warning { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); color: #fbbf24; text-align: center; }

/* Dispute View */
.dispute-section-title { font-size: 14px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.dispute-reply { background: var(--bg-2); border: 1px solid var(--border); padding: 16px; margin-bottom: 12px; }
.dispute-reply-from { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; padding: 4px 10px; display: inline-block; }
.dispute-reply-from.admin { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.dispute-reply-from.buyer { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.dispute-reply-from.seller { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.dispute-reply-content { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.dispute-btn { padding: 12px 24px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-right: 8px; margin-bottom: 8px; text-decoration: none; display: inline-block; }
.dispute-btn-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
.dispute-btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }
.dispute-btn-success { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.dispute-btn-secondary { background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2); }
.dispute-btn:hover { transform: translateY(-2px); }
.dispute-admin-section { margin-top: 32px; padding-top: 24px; border-top: 2px solid var(--border); }
.dispute-admin-title { font-size: 14px; font-weight: 600; color: #ef4444; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; text-align: center; }
.dispute-resolved { text-align: center; padding: 40px; }
.dispute-resolved-text { font-size: 18px; font-weight: 600; color: #10b981; margin-bottom: 20px; }

/* Dispute Result */
.dispute-result-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 36px; font-weight: 700; }
.dispute-result-icon.won { background: rgba(16, 185, 129, 0.15); border: 2px solid #10b981; color: #10b981; }
.dispute-result-icon.lost { background: rgba(239, 68, 68, 0.15); border: 2px solid #ef4444; color: #ef4444; }
.dispute-decision { padding: 14px 20px; margin-bottom: 16px; font-size: 14px; font-weight: 600; }
.dispute-decision.buyer { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #34d399; }
.dispute-decision.seller { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; }
.dispute-status { font-size: 14px; margin-bottom: 24px; }
.dispute-status.won { color: #10b981; }
.dispute-status.lost { color: #ef4444; }
.dispute-help { font-size: 13px; color: var(--text-2); margin-bottom: 24px; line-height: 1.6; }
.dispute-help a { color: #3b82f6; text-decoration: underline; }

body.light-theme .dispute-hero { background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%); border-color: rgba(245, 158, 11, 0.15); }
body.light-theme .dispute-hero-title { color: #1a1a1a; }
body.light-theme .dispute-nav-link:not(.active) { background: #f3f4f6; color: #6b7280; }
body.light-theme .dispute-card { background: #fff; border-color: #e5e7eb; }
body.light-theme .dispute-textarea, body.light-theme .dispute-rules, body.light-theme .dispute-reply { background: #f9fafb; border-color: #e5e7eb; }
body.light-theme .dispute-textarea { color: #1a1a1a; }
body.light-theme .dispute-label { color: #6b7280; }
body.light-theme .dispute-reply-content { color: #374151; }
body.light-theme .dispute-section-title { color: #1a1a1a; border-color: #e5e7eb; }

@media (max-width: 768px) {
    .dispute-hero-content { flex-direction: column; align-items: flex-start; }
    .dispute-hero-stats { width: 100%; }
}

/* ==================== Select Dark Theme Fix ==================== */
select.prf-input,
.prf-input option,
.cc-search-field select,
.cc-search-field select option {
    background-color: var(--bg-2);
    color: var(--text);
}
select.prf-input option,
.cc-search-field select option {
    background-color: #1a1a1a;
    color: #fafafa;
    padding: 8px;
}
body.light-theme select.prf-input,
body.light-theme .prf-input option,
body.light-theme .cc-search-field select,
body.light-theme .cc-search-field select option {
    background-color: #fff;
    color: #1a1a1a;
}

/* ==================== News Sidebar Fix (Smaller Text) ==================== */
.side-panel .news-title {
    font-size: 10px;
    line-height: 1.3;
}
.side-panel .news {
    padding: 8px 12px;
}
.side-panel .news-time {
    font-size: 8px;
}
.side-link {
    display: block;
    padding: 10px 12px;
    font-size: 11px;
    color: var(--text-3);
    text-decoration: none;
    border-top: 1px solid var(--border);
    text-align: center;
    transition: all 0.2s;
}
.side-link:hover {
    color: var(--gold);
    background: var(--bg-2);
}
body.light-theme .side-link {
    color: #6b7280;
    border-color: #e5e7eb;
}
body.light-theme .side-link:hover {
    color: #d97706;
    background: #f9fafb;
}

/* ==================== Your Stats Block in Stats Vault ==================== */
.vault-stat-user {
    min-width: 240px;
}
.vault-user-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 8px;
    margin-top: 4px;
    width: 100%;
}
.vault-user-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: center;
}
.vault-user-label {
    font-size: 8px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.vault-user-val {
    font-size: 10px;
    font-weight: 600;
    color: var(--text);
}
.vault-user-val.status-vip {
    background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.vault-user-val.status-gold {
    color: #f59e0b;
}
.vault-user-val.status-user {
    color: var(--text-2);
}
body.light-theme .vault-user-label { color: #9ca3af; }
body.light-theme .vault-user-val { color: #1f2937; }
body.light-theme .vault-user-val.status-user { color: #6b7280; }

@media (max-width: 1024px) {
    .vault-stat-user { min-width: auto; }
    .vault-user-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .vault-user-grid { grid-template-columns: repeat(3, 1fr); gap: 3px 6px; }
    .vault-user-label { font-size: 7px; }
    .vault-user-val { font-size: 9px; }
}

/* ==================== Auto-Buy Add Rule Button ==================== */
.autobuy-add-btn {
    padding: 8px 16px;
    background: var(--gold);
    color: #000;
    border: 1px solid var(--gold);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    margin-left: 10px;
}
.autobuy-add-btn:hover {
    background: var(--gold-dim);
    border-color: var(--gold-dim);
}
body.light-theme .autobuy-add-btn {
    background: var(--gold);
    color: #000;
}

/* ==================== Auto-Buy Button in Accounts Nav ==================== */
.acc-nav-autobuy {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
    animation: autobuy-glow 2s ease-in-out infinite;
}
.acc-nav-autobuy:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    transform: translateY(-1px);
}
@keyframes autobuy-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.3); }
    50% { box-shadow: 0 0 15px rgba(6, 182, 212, 0.5); }
}
body.light-theme .acc-nav-autobuy {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
}

/* ==================== Daily Bonus in Stats Vault ==================== */
.vault-stat-bonus {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.vault-stat-bonus form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.vault-bonus-btn {
    margin-top: 6px;
    padding: 5px 14px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.vault-bonus-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
}
body.light-theme .vault-bonus-btn {
    background: linear-gradient(135deg, #059669, #047857);
}

/* ==================== Theme Toggle Button Fix ==================== */
.theme-toggle-btn {
    font-size: 16px !important;
    padding: 6px 10px !important;
    min-width: 36px;
    height: 36px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--bg-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.theme-toggle-btn:hover {
    background: var(--bg-3) !important;
    border-color: var(--gold) !important;
}

/* Theme icons with smooth animation */
.theme-icon-dark,
.theme-icon-light {
    position: absolute;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.theme-icon-dark {
    color: #fbbf24;
    transform: rotate(0deg) scale(1);
    opacity: 1;
}

.theme-icon-light {
    color: #6366f1;
    transform: rotate(90deg) scale(0);
    opacity: 0;
}

/* Light theme - swap icons with rotation */
body.light-theme .theme-icon-dark {
    transform: rotate(-90deg) scale(0);
    opacity: 0;
}

body.light-theme .theme-icon-light {
    transform: rotate(0deg) scale(1);
    opacity: 1;
}

body.light-theme .theme-toggle-btn {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
}
body.light-theme .theme-toggle-btn:hover {
    background: #e5e7eb !important;
    border-color: #d97706 !important;
}

/* ==================== FAQ Page Styles ==================== */
.faq-modern { padding: 30px 0; }
.faq-header { text-align: center; margin-bottom: 40px; }
.faq-title { font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.faq-subtitle { font-size: 14px; color: var(--text-3); max-width: 500px; margin: 0 auto; }

.faq-item { background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; transition: border-color 0.2s; }
.faq-item:hover { border-color: var(--text-3); }
.faq-item-header { display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; }
.faq-num { width: 32px; height: 32px; background: linear-gradient(135deg, #ec4899, #db2777); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.faq-q { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.faq-toggle { width: 24px; height: 24px; background: rgba(255,255,255,0.05); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 12px; transition: all 0.2s; }
.faq-item.open .faq-toggle { background: rgba(236, 72, 153, 0.2); color: #ec4899; transform: rotate(180deg); }
.faq-a { padding: 0 20px 20px 68px; font-size: 13px; color: var(--text-2); line-height: 1.7; display: none; }
.faq-item.open .faq-a { display: block; }
.faq-a p { margin-bottom: 12px; }
.faq-a ul { margin: 12px 0; padding-left: 20px; }
.faq-a li { margin-bottom: 6px; }
.faq-a a { color: #ec4899; text-decoration: none; }

body.light-theme .faq-title { color: #1a1a1a; }
body.light-theme .faq-item { background: linear-gradient(180deg, #fff 0%, #fafafa 100%); border-color: #e5e5e5; }
body.light-theme .faq-item:hover { border-color: #d1d5db; }
body.light-theme .faq-q { color: #1a1a1a; }
body.light-theme .faq-a { color: #6b7280; }
body.light-theme .faq-toggle { background: rgba(0,0,0,0.05); }

/* ==================== Goods View Page (gd-*) ==================== */
.gd-container { max-width: 900px; }
.gd-hero { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.08) 100%); border-bottom: 1px solid rgba(16, 185, 129, 0.2); padding: 24px 0; margin-bottom: 24px; }
.gd-hero-content { display: flex; align-items: center; gap: 16px; }
.gd-hero-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #10b981, #059669); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.gd-hero-text { flex: 1; }
.gd-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.gd-hero-subtitle { font-size: 13px; color: #a3a3a3; margin: 0; }
.gd-hero-stats { display: flex; gap: 12px; }
.gd-hero-stat { text-align: center; padding: 10px 16px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 10px; }
.gd-hero-stat-num { display: block; font-size: 20px; font-weight: 700; color: #34d399; }
.gd-hero-stat-label { font-size: 10px; color: #a3a3a3; text-transform: uppercase; }

.gd-nav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.gd-nav-link { padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.2s; }
.gd-nav-link.active { background: #10b981; color: #fff; }
.gd-nav-link:not(.active) { background: #262626; color: #a3a3a3; }
.gd-nav-link:not(.active):hover { background: #333; color: #fafafa; }

.gd-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; }
.gd-alert-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: #f87171; }
.gd-alert-success { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); color: #34d399; }

.gd-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
.gd-main { display: flex; flex-direction: column; gap: 16px; }

.gd-section { background: #171717; border: 1px solid #262626; border-radius: 12px; overflow: hidden; }
.gd-section-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #0a0a0a; border-bottom: 1px solid #262626; }
.gd-section-title { font-size: 14px; font-weight: 600; color: #fafafa; display: flex; align-items: center; gap: 8px; }
.gd-section-icon { font-size: 16px; }
.gd-copy-btn { padding: 6px 12px; background: rgba(16, 185, 129, 0.15); border: none; color: #34d399; font-size: 12px; font-weight: 500; cursor: pointer; }
.gd-copy-btn:hover { background: rgba(16, 185, 129, 0.25); }

.gd-textarea { width: 100%; min-height: 250px; padding: 16px; background: #0a0a0a; border: none; border-radius: 0; color: #10b981; font-family: 'Monaco', 'Consolas', monospace; font-size: 13px; line-height: 1.6; resize: vertical; }
.gd-textarea:focus { outline: none; }

.gd-actions { display: flex; gap: 12px; }
.gd-action-form { flex: 1; }
.gd-btn-confirm { width: 100%; padding: 14px; background: linear-gradient(135deg, #10b981, #059669); border: none; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.gd-btn-confirm:hover { opacity: 0.9; }
.gd-btn-dispute { padding: 14px 20px; background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 8px; color: #f87171; font-size: 14px; font-weight: 600; text-decoration: none; text-align: center; }
.gd-btn-dispute:hover { background: rgba(239, 68, 68, 0.25); color: #f87171; }

.gd-sidebar { display: flex; flex-direction: column; gap: 16px; }
.gd-sidebar-card { background: #171717; border: 1px solid #262626; border-radius: 12px; padding: 16px; }
.gd-sidebar-title { font-size: 14px; font-weight: 600; color: #fafafa; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #262626; }
.gd-info-list { display: flex; flex-direction: column; gap: 10px; }
.gd-info-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.gd-info-label { font-size: 12px; color: #737373; }
.gd-info-value { font-size: 12px; color: #fafafa; text-align: right; word-break: break-all; }
.gd-mono { font-family: monospace; color: #34d399; }
.gd-price { color: #10b981; font-weight: 600; }

.gd-badge { padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.gd-badge.processing { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.gd-badge.delivered { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.gd-badge.completed { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.gd-badge.disputed { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.gd-badge.refunded { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }

.gd-back-wrap { margin-top: auto; }
.gd-btn-back { display: block; padding: 12px; background: #262626; border-radius: 8px; color: #a3a3a3; font-size: 13px; font-weight: 500; text-decoration: none; text-align: center; }
.gd-btn-back:hover { background: #333; color: #fafafa; }

body.light-theme .gd-hero { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%); border-color: rgba(16, 185, 129, 0.15); }
body.light-theme .gd-hero-title { color: #1a1a1a; }
body.light-theme .gd-nav-link:not(.active) { background: #f3f4f6; color: #6b7280; }
body.light-theme .gd-section { background: #fff; border-color: #e5e7eb; }
body.light-theme .gd-section-header { background: #f9fafb; border-color: #e5e7eb; }
body.light-theme .gd-section-title { color: #1a1a1a; }
body.light-theme .gd-textarea { background: #f9fafb; color: #059669; }
body.light-theme .gd-sidebar-card { background: #fff; border-color: #e5e7eb; }
body.light-theme .gd-sidebar-title { color: #1a1a1a; border-color: #e5e7eb; }
body.light-theme .gd-info-value { color: #1a1a1a; }
body.light-theme .gd-btn-back { background: #f3f4f6; color: #6b7280; }

@media (max-width: 768px) {
    .gd-hero-content { flex-direction: column; align-items: flex-start; }
    .gd-hero-stats { width: 100%; }
    .gd-grid { grid-template-columns: 1fr; }
    .gd-actions { flex-direction: column; }
}

/* ==================== Leak Purchase View Page (lpv-*) ==================== */
.lpv-container { max-width: 1000px; }
.lpv-hero { background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(8, 145, 178, 0.08) 100%); border-bottom: 1px solid rgba(6, 182, 212, 0.2); padding: 24px 0; margin-bottom: 24px; }
.lpv-hero-content { display: flex; align-items: center; gap: 16px; }
.lpv-hero-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #06b6d4, #0891b2); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3); }
.lpv-hero-text { flex: 1; }
.lpv-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.lpv-hero-subtitle { font-size: 13px; color: #a3a3a3; margin: 0; font-family: monospace; }
.lpv-hero-stats { display: flex; gap: 12px; }
.lpv-hero-stat { text-align: center; padding: 10px 16px; background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.2); border-radius: 10px; }
.lpv-hero-stat-num { display: block; font-size: 20px; font-weight: 700; color: #22d3ee; }
.lpv-hero-stat-label { font-size: 10px; color: #a3a3a3; text-transform: uppercase; }

.lpv-nav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.lpv-nav-link { padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.2s; }
.lpv-nav-link.active { background: #06b6d4; color: #fff; }
.lpv-nav-link:not(.active) { background: #262626; color: #a3a3a3; }
.lpv-nav-link:not(.active):hover { background: #333; color: #fafafa; }

.lpv-section { background: #171717; border: 1px solid #262626; border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.lpv-section-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #0a0a0a; border-bottom: 1px solid #262626; }
.lpv-section-title { font-size: 13px; font-weight: 600; color: #fafafa; }
.lpv-export-btn { padding: 6px 14px; background: rgba(6, 182, 212, 0.15); border: none; border-radius: 6px; color: #22d3ee; font-size: 11px; font-weight: 500; cursor: pointer; }
.lpv-export-btn:hover { background: rgba(6, 182, 212, 0.25); }

.lpv-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #262626; }
.lpv-info-box { background: #171717; padding: 14px 16px; }
.lpv-lbl { font-size: 10px; text-transform: uppercase; color: #525252; margin-bottom: 4px; }
.lpv-val { font-size: 13px; color: #fafafa; word-break: break-all; }
.lpv-val.mono { font-family: monospace; color: #22d3ee; }
.lpv-val.price { color: #10b981; font-weight: 600; }

.lpv-records { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.lpv-record { background: #0a0a0a; border: 1px solid #262626; border-radius: 10px; padding: 14px; display: flex; gap: 14px; }
.lpv-record-num { background: rgba(6, 182, 212, 0.15); color: #22d3ee; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; height: fit-content; }
.lpv-record-fields { flex: 1; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.lpv-field { font-size: 12px; }
.lpv-field-key { color: #525252; }
.lpv-field-val { color: #fafafa; word-break: break-all; }

.lpv-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px; border-top: 1px solid #262626; }
.lpv-pg-btn { padding: 8px 16px; background: #262626; border-radius: 6px; color: #a3a3a3; font-size: 12px; text-decoration: none; }
.lpv-pg-btn:hover { background: #333; color: #fafafa; }
.lpv-pg-info { font-size: 12px; color: #525252; }

.lpv-btn-back { display: block; padding: 12px; background: #262626; border-radius: 8px; color: #a3a3a3; font-size: 13px; font-weight: 500; text-decoration: none; text-align: center; margin-top: 16px; }
.lpv-btn-back:hover { background: #333; color: #fafafa; }

body.light-theme .lpv-hero { background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(8, 145, 178, 0.05) 100%); border-color: rgba(6, 182, 212, 0.15); }
body.light-theme .lpv-hero-title { color: #1a1a1a; }
body.light-theme .lpv-nav-link:not(.active) { background: #f3f4f6; color: #6b7280; }
body.light-theme .lpv-section { background: #fff; border-color: #e5e7eb; }
body.light-theme .lpv-section-header { background: #f9fafb; border-color: #e5e7eb; }
body.light-theme .lpv-section-title { color: #1a1a1a; }
body.light-theme .lpv-info-grid { background: #e5e7eb; }
body.light-theme .lpv-info-box { background: #fff; }
body.light-theme .lpv-val { color: #1a1a1a; }
body.light-theme .lpv-record { background: #f9fafb; border-color: #e5e7eb; }
body.light-theme .lpv-field-val { color: #1a1a1a; }
body.light-theme .lpv-pg-btn { background: #f3f4f6; color: #6b7280; }
body.light-theme .lpv-btn-back { background: #f3f4f6; color: #6b7280; }

@media (max-width: 768px) {
    .lpv-hero-content { flex-direction: column; align-items: flex-start; }
    .lpv-hero-stats { width: 100%; }
    .lpv-info-grid { grid-template-columns: repeat(2, 1fr); }
    .lpv-record { flex-direction: column; gap: 10px; }
}
@media (max-width: 480px) {
    .lpv-info-grid { grid-template-columns: 1fr; }
}

/* ==================== Utility Classes ==================== */
.mb-16 { margin-bottom: 16px; }

/* ==================== Goods View Page ==================== */
.goods-content { padding: 0; }
.goods-textarea { width: 100%; min-height: 300px; padding: 20px; background: var(--bg-2); border: none; color: #10b981; font-family: 'Monaco', 'Consolas', monospace; font-size: 13px; line-height: 1.7; resize: vertical; }
.goods-textarea:focus { outline: none; }
.goods-actions { display: flex; gap: 12px; padding: 20px; }
.goods-action-form { flex: 1; }

body.light-theme .goods-textarea { background: #f9fafb; color: #059669; }

/* ==================== Leak View Page ==================== */
.leak-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); }
.leak-info-item { background: var(--bg-1); padding: 16px 20px; }
.leak-info-label { display: block; font-size: 10px; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.leak-info-value { font-size: 14px; color: var(--text); word-break: break-all; }
.leak-mono { font-family: monospace; color: #22d3ee; }
.leak-green { color: #10b981; font-weight: 600; }

.leak-records { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.leak-record { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; gap: 14px; }
.leak-record-num { background: rgba(6, 182, 212, 0.15); color: #22d3ee; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; height: fit-content; }
.leak-record-fields { flex: 1; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.leak-field { font-size: 12px; }
.leak-field-key { color: var(--text-3); }
.leak-field-val { color: var(--text); word-break: break-all; }

.pagination-btn { padding: 8px 16px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text-2); font-size: 12px; text-decoration: none; }
.pagination-btn:hover { background: var(--bg-3); color: var(--text); }
.pagination-info { font-size: 12px; color: var(--text-3); }

body.light-theme .leak-info-grid { background: #e5e7eb; }
body.light-theme .leak-info-item { background: #fff; }
body.light-theme .leak-record { background: #f9fafb; border-color: #e5e7eb; }
body.light-theme .pagination-btn { background: #f3f4f6; border-color: #e5e7eb; }

@media (max-width: 768px) {
    .leak-info-grid { grid-template-columns: repeat(2, 1fr); }
    .leak-record { flex-direction: column; gap: 10px; }
}
@media (max-width: 480px) {
    .leak-info-grid { grid-template-columns: 1fr; }
}

/* ==================== Panel Head Button ==================== */
.panel-head-btn { padding: 8px 14px; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.panel-head-btn:hover { background: rgba(16, 185, 129, 0.25); border-color: rgba(16, 185, 129, 0.5); }
body.light-theme .panel-head-btn { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.2); color: #059669; }
body.light-theme .panel-head-btn:hover { background: rgba(16, 185, 129, 0.2); }

/* ==================== Side Panel Button ==================== */
.side-panel-btn { display: block; padding: 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text-2); font-size: 13px; font-weight: 500; text-decoration: none; text-align: center; margin-top: 12px; transition: all 0.2s; }
.side-panel-btn:hover { background: var(--bg-3); color: var(--text); border-color: var(--green); }
body.light-theme .side-panel-btn { background: #f3f4f6; border-color: #e5e7eb; color: #6b7280; }
body.light-theme .side-panel-btn:hover { background: #e5e7eb; color: #1a1a1a; }

/* ==================== Danger Button ==================== */
.prf-btn-danger { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; }
.prf-btn-danger:hover { background: rgba(239, 68, 68, 0.25); }

/* ==================== SSN Store ==================== */
.ssn-hero { background: linear-gradient(135deg, #0f0f0f 0%, #171717 50%, #0f0f0f 100%); border-bottom: 1px solid #262626; padding: 28px 0; margin-bottom: 24px; }
.ssn-hero-content { display: flex; align-items: center; gap: 20px; }
.ssn-hero-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #ec4899, #db2777); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 20px rgba(236, 72, 153, 0.3); }
.ssn-hero-text { flex: 1; }
.ssn-hero-title { font-size: 24px; font-weight: 700; color: #fafafa; margin: 0 0 4px 0; }
.ssn-hero-subtitle { font-size: 14px; color: #737373; margin: 0; }
.ssn-hero-stats { display: flex; gap: 24px; }
.ssn-hero-stat { text-align: center; padding: 12px 20px; background: rgba(236, 72, 153, 0.08); border: 1px solid rgba(236, 72, 153, 0.2); border-radius: 10px; }
.ssn-hero-stat-num { display: block; font-size: 22px; font-weight: 700; color: #ec4899; }
.ssn-hero-stat-label { font-size: 11px; color: #737373; text-transform: uppercase; }
.ssn-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
.ssn-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ssn-search-card { background: #171717; border: 1px solid #262626; border-radius: 12px; padding: 16px; }
.ssn-search-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ssn-search-field label { display: block; font-size: 11px; color: #737373; margin-bottom: 6px; text-transform: uppercase; }
.ssn-search-field input, .ssn-search-field select { width: 100%; padding: 10px 12px; background: #0f0f0f; border: 1px solid #333; border-radius: 6px; color: #fafafa; font-size: 13px; }
.ssn-search-field input:focus, .ssn-search-field select:focus { outline: none; border-color: #ec4899; }
.ssn-search-actions { display: flex; gap: 10px; margin-top: 14px; }
.ssn-btn-search { padding: 10px 24px; background: linear-gradient(135deg, #ec4899, #db2777); border: none; border-radius: 6px; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.ssn-btn-search:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3); }
.ssn-btn-clear { padding: 10px 20px; background: #262626; border: 1px solid #404040; border-radius: 6px; color: #a3a3a3; font-size: 13px; text-decoration: none; transition: all 0.2s; }
.ssn-btn-clear:hover { background: #333; color: #fafafa; }
.ssn-alert { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #171717; border: 1px solid #262626; border-radius: 10px; }
.ssn-alert-warning { border-left: 3px solid #ec4899; background: linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, #171717 100%); }
.ssn-alert-icon { font-size: 18px; }
.ssn-alert-content { font-size: 13px; color: #a3a3a3; }
.ssn-alert-content strong { color: #f472b6; }
.ssn-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ssn-card-item { background: #171717; border: 1px solid #262626; border-radius: 12px; overflow: hidden; transition: all 0.2s; }
.ssn-card-item:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); }
.ssn-card-design { padding: 16px; border-radius: 10px; margin: 12px; min-height: 130px; position: relative; background: linear-gradient(135deg, #1e1e3f 0%, #0d0d1f 100%); border: 1px solid rgba(236, 72, 153, 0.2); }
.ssn-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.ssn-card-badge { font-size: 10px; font-weight: 800; color: #ec4899; background: rgba(236, 72, 153, 0.2); padding: 3px 8px; border-radius: 4px; letter-spacing: 1px; }
.ssn-card-gender { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.ssn-card-gender.male { color: #3b82f6; background: rgba(59, 130, 246, 0.2); }
.ssn-card-gender.female { color: #f472b6; background: rgba(244, 114, 182, 0.2); }
.ssn-card-ssn { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: 2px; font-family: 'Courier New', monospace; margin-bottom: 8px; }
.ssn-card-name { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.8); margin-bottom: 12px; }
.ssn-card-bottom { display: flex; gap: 16px; }
.ssn-card-dob, .ssn-card-age, .ssn-card-state { display: flex; flex-direction: column; gap: 2px; }
.ssn-card-label { font-size: 8px; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 0.5px; }
.ssn-card-value { font-size: 12px; color: #fff; font-weight: 600; }
.ssn-card-info { padding: 12px 16px 16px; }
.ssn-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ssn-meta-item { font-size: 11px; color: #737373; display: flex; align-items: center; gap: 4px; }
.ssn-meta-icon { font-size: 10px; }
.ssn-card-extras { display: flex; gap: 6px; margin-bottom: 12px; min-height: 22px; }
.ssn-extra-badge { font-size: 9px; font-weight: 600; color: #10b981; background: rgba(16, 185, 129, 0.15); padding: 3px 8px; border-radius: 4px; }
.ssn-extra-badge.dl { color: #3b82f6; background: rgba(59, 130, 246, 0.15); }
.ssn-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #262626; }
.ssn-card-price { font-size: 20px; font-weight: 700; color: #ec4899; }
.ssn-btn-buy { padding: 8px 16px; background: linear-gradient(135deg, #ec4899, #db2777); color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.ssn-btn-buy:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3); }
.ssn-no-results { grid-column: span 3; text-align: center; padding: 60px 20px; background: #171717; border: 1px solid #262626; border-radius: 12px; }
.ssn-no-results-icon { font-size: 48px; margin-bottom: 16px; }
.ssn-no-results h3 { font-size: 18px; color: #fafafa; margin: 0 0 8px 0; }
.ssn-no-results p { font-size: 14px; color: #737373; margin: 0 0 20px 0; }
.ssn-btn-reset { display: inline-block; padding: 10px 24px; background: #262626; color: #fafafa; font-size: 13px; text-decoration: none; border-radius: 6px; }
.ssn-pagination { margin-top: 20px; }
.ssn-sidebar { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ssn-sidebar-card { background: #171717; border: 1px solid #262626; border-radius: 12px; overflow: hidden; }
.ssn-sidebar-title { font-size: 12px; font-weight: 600; color: #fafafa; padding: 14px 16px; margin: 0; background: #1a1a1a; border-bottom: 1px solid #262626; text-transform: uppercase; }
.ssn-balance-card { border-color: rgba(236, 72, 153, 0.3); text-align: center; padding: 20px; }
.ssn-balance-header { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: #737373; margin-bottom: 8px; }
.ssn-balance-value { font-size: 32px; font-weight: 700; color: #ec4899; margin-bottom: 14px; }
.ssn-deposit-btn { display: block; padding: 12px; background: linear-gradient(135deg, #ec4899, #db2777); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; border-radius: 8px; transition: all 0.2s; }
.ssn-deposit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3); }
.ssn-info-list { list-style: none; padding: 0; margin: 0; }
.ssn-info-list li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #262626; font-size: 12px; color: #a3a3a3; }
.ssn-info-list li:last-child { border-bottom: none; }
.ssn-info-icon { font-size: 14px; }
.ssn-discount-card { border-color: rgba(168, 85, 247, 0.3); text-align: center; padding: 16px; }
.ssn-discount-badge { font-size: 11px; color: #a855f7; margin-bottom: 6px; }
.ssn-discount-value { font-size: 24px; font-weight: 700; color: #a855f7; margin-bottom: 4px; }
.ssn-discount-note { font-size: 11px; color: #525252; }

/* SSN Store - Light Theme */
body.light-theme .ssn-hero { background: linear-gradient(135deg, #f9fafb 0%, #fff 50%, #f9fafb 100%); border-color: #e5e7eb; }
body.light-theme .ssn-hero-title { color: #1f2937; }
body.light-theme .ssn-search-card, body.light-theme .ssn-alert, body.light-theme .ssn-card-item, body.light-theme .ssn-sidebar-card, body.light-theme .ssn-no-results { background: #fff; border-color: #e5e7eb; }
body.light-theme .ssn-search-field input, body.light-theme .ssn-search-field select { background: #f9fafb; border-color: #d1d5db; color: #1f2937; }
body.light-theme .ssn-sidebar-title { background: #f9fafb; border-color: #e5e7eb; color: #1f2937; }
body.light-theme .ssn-card-info { background: #fff; }
body.light-theme .ssn-card-footer { border-color: #e5e7eb; }
body.light-theme .ssn-no-results h3 { color: #1f2937; }

/* SSN Store - Responsive */
@media (max-width: 1024px) {
    .ssn-hero-content { flex-wrap: wrap; }
    .ssn-hero-stats { width: 100%; margin-top: 12px; }
    .ssn-main-grid { grid-template-columns: 1fr; }
    .ssn-sidebar { order: -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .ssn-main { order: 1; }
    .ssn-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .ssn-no-results { grid-column: span 2; }
}
@media (max-width: 768px) {
    .ssn-hero-content { flex-direction: column; text-align: center; }
    .ssn-hero-stats { justify-content: center; }
    .ssn-search-grid { grid-template-columns: repeat(2, 1fr); }
    .ssn-sidebar { grid-template-columns: 1fr; }
    .ssn-cards-grid { grid-template-columns: 1fr; }
    .ssn-no-results { grid-column: span 1; }
}
@media (max-width: 480px) {
    .ssn-search-grid { grid-template-columns: 1fr; }
    .ssn-search-actions { flex-direction: column; }
    .ssn-btn-search, .ssn-btn-clear { width: 100%; text-align: center; }
}

/* ==================== MOBILE RESPONSIVE FIXES ==================== */

/* Messages Page Mobile */
@media (max-width: 768px) {
    .orders-4col {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .orders-4col.prod-head {
        display: none;
    }
    .orders-4col.prod {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 14px 16px;
    }
    .orders-4col .prod-sender {
        font-size: 14px;
        margin-bottom: 4px;
    }
    .orders-4col .prod-preview {
        white-space: normal;
        line-height: 1.4;
    }
    .orders-4col .prod-time {
        display: none;
    }
    .orders-4col .prod-meta-mobile {
        display: block;
        font-size: 11px;
        color: var(--text-3);
        margin-bottom: 8px;
    }
    .orders-4col > span:last-child {
        margin-top: 4px;
    }
}

/* Credit Card Store Mobile */
@media (max-width: 1024px) {
    .cc-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .cc-search-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cc-cards-grid {
        grid-template-columns: 1fr;
    }
    .cc-no-results {
        grid-column: span 1;
    }
}
@media (max-width: 480px) {
    .cc-search-grid {
        grid-template-columns: 1fr;
    }
    .cc-search-actions {
        flex-direction: column;
    }
    .cc-btn-search, .cc-btn-clear {
        width: 100%;
        text-align: center;
    }
}

/* Wallet Page Mobile - Sidebar ABOVE main content */
@media (max-width: 768px) {
    .layout {
        display: flex;
        flex-direction: column;
    }
    .layout > div:last-child {
        order: -1;
        margin-bottom: 16px;
    }
    .layout > div:first-child {
        order: 1;
    }
}

/* My Products Mobile */
@media (max-width: 768px) {
    .prod-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
}

/* Stats Vault Mobile */
@media (max-width: 640px) {
    .stats-vault {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .stats-vault.vault-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-vault.vault-3 {
        grid-template-columns: 1fr;
    }
    .stats-vault.vault-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .stats-vault,
    .stats-vault.vault-2,
    .stats-vault.vault-3,
    .stats-vault.vault-5 {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* Toolbar Mobile */
@media (max-width: 768px) {
    .acc-toolbar {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    .acc-search-form {
        width: 100%;
    }
    .acc-nav-links {
        justify-content: center;
        flex-wrap: wrap;
    }
    .acc-filter-wrap {
        width: 100%;
    }
    .acc-filter-select {
        width: 100%;
    }
}

/* Flash Sale Styles */
.prod-flash-sale {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(239, 68, 68, 0.05));
    border-left: 3px solid #f59e0b;
}
.prod-badge-flash {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    margin-left: 6px;
    animation: flash-pulse 1.5s ease-in-out infinite;
}
@keyframes flash-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.prod-price-flash {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.prod-price-old {
    font-size: 11px;
    color: var(--text-2);
    text-decoration: line-through;
}
.prod-price-new {
    font-size: 14px;
    font-weight: 700;
    color: #10b981;
}
.prod-discount-badge {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
}
.prod-price-flash-mobile {
    color: #10b981;
    font-weight: 600;
}
.prod-price-flash-mobile s {
    color: var(--text-2);
    font-weight: 400;
    margin-right: 4px;
}
.prod-buy-flash {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #f59e0b;
}
.prod-buy-flash:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
}
body.light-theme .prod-flash-sale {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(239, 68, 68, 0.03));
}
body.light-theme .prod-price-flash-mobile s {
    color: #9ca3af;
}

/* Product View Flash Sale Styles */
.pv-flash-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(239, 68, 68, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 16px 16px;
    animation: flash-glow 2s ease-in-out infinite alternate;
}
@keyframes flash-glow {
    from { box-shadow: 0 0 5px rgba(245, 158, 11, 0.2); }
    to { box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
}
.pv-flash-icon {
    font-size: 24px;
    animation: flash-bounce 0.6s ease-in-out infinite alternate;
}
@keyframes flash-bounce {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}
.pv-flash-text {
    font-size: 14px;
    font-weight: 700;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pv-flash-discount {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}
.pv-price-item.flash-price {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.pv-price-old {
    font-size: 12px;
    color: var(--text-2);
    text-decoration: line-through;
    margin-bottom: 2px;
}
.pv-price-flash {
    color: #10b981 !important;
}
body.light-theme .pv-flash-banner {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(239, 68, 68, 0.05));
}
body.light-theme .pv-price-item.flash-price {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(16, 185, 129, 0.05));
}

/* Flash Sale Block (Homepage) */
.flash-sale-block {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(239, 68, 68, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 0;
    padding: 16px;
    margin-bottom: 20px;
    animation: fs-block-glow 2s ease-in-out infinite alternate;
}
@keyframes fs-block-glow {
    from { box-shadow: 0 0 5px rgba(245, 158, 11, 0.2); }
    to { box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }
}
.fs-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.fs-block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #f59e0b;
}
.fs-block-icon {
    font-size: 20px;
    animation: fs-block-fire 0.5s ease-in-out infinite alternate;
}
@keyframes fs-block-fire {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}
.fs-block-badge {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    padding: 3px 8px;
    border-radius: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.fs-block-timer {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 12px;
    border-radius: 0;
}
.fs-block-timer-icon { font-size: 14px; }
.fs-block-timer-text {
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #f59e0b;
}
.fs-block-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.fs-block-product {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.fs-block-product:hover:not(.fs-block-product-sold) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.fs-block-product-sold { opacity: 0.7; }
.fs-block-sold-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.fs-block-sold-text {
    background: #ef4444;
    color: #fff;
    padding: 6px 16px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    transform: rotate(-5deg);
}
.fs-block-product-info { flex: 1; }
.fs-block-product-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 4px;
    line-height: 1.4;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.fs-block-product-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--text-2);
}
.fs-block-stock { color: #10b981; }
.fs-block-product-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.fs-block-price-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.fs-block-price-old {
    font-size: 12px;
    color: var(--text-2);
    text-decoration: line-through;
}
.fs-block-discount {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    padding: 2px 5px;
    border-radius: 0;
    font-size: 10px;
    font-weight: 700;
}
.fs-block-price-new {
    font-size: 18px;
    font-weight: 700;
    color: #10b981;
}
.fs-block-buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    padding: 8px 12px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.fs-block-buy-btn:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #fff;
}
.fs-block-buy-btn-sold {
    background: var(--bg-3);
    color: var(--text-2);
    cursor: not-allowed;
}
.fs-block-buy-btn-sold:hover {
    background: var(--bg-3);
    color: var(--text-2);
}
@media (max-width: 600px) {
    .fs-block-products { grid-template-columns: 1fr; }
    .fs-block-header { flex-direction: column; align-items: flex-start; }
}
body.light-theme .flash-sale-block {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(239, 68, 68, 0.08));
}
body.light-theme .fs-block-product { background: #fff; }
body.light-theme .fs-block-timer { background: rgba(0, 0, 0, 0.05); }

/* ========================================
   Auto-Buy Tags UI
   ======================================== */
.ab-tags-section {
    padding: 16px;
}
.ab-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    min-height: 36px;
}
.ab-tags-empty {
    color: var(--text-3);
    font-size: 13px;
    padding: 8px 0;
}
.ab-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    background: var(--bg-2);
    border: 1px solid var(--bg-3);
    transition: all 0.2s;
}
.ab-tag-keyword {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
}
.ab-tag-exclusion {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}
.ab-tag-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ab-tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s;
}
.ab-tag-remove:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}
.ab-tag-form {
    display: flex;
    gap: 10px;
    align-items: center;
}
.ab-tag-form .prf-input {
    flex: 1;
    max-width: 300px;
}
/* User selectable tags */
.ab-select-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: var(--bg-2);
    border-radius: 8px;
    min-height: 44px;
}
.ab-select-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    user-select: none;
}
.ab-select-tag-available {
    background: var(--bg-3);
    color: var(--text-2);
}
.ab-select-tag-available:hover {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}
.ab-select-tag-selected {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.4);
}
.ab-select-tag-selected .ab-select-tag-x {
    display: inline-flex;
}
.ab-select-tag-x {
    display: none;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    font-size: 14px;
    font-weight: 700;
    opacity: 0.7;
}
.ab-select-tag-exclusion.ab-select-tag-selected {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}
.ab-select-tag-exclusion:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}
.ab-selected-display {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.ab-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}
.ab-selected-chip-keyword {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.ab-selected-chip-exclusion {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.ab-selected-chip-category {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.ab-select-tag-category.ab-select-tag-selected {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.4);
}
.ab-select-tag-category:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
}
.ab-select-tag-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.ab-kw-chance {
    font-size: 10px;
    font-weight: 600;
    margin-left: 2px;
}
/* Auto-buy form labels spacing */
.prf-form .prf-field .prf-label {
    margin-bottom: 12px;
    display: block;
}

/* Admin mini tags for rules table */
.ab-mini-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
    max-width: 200px;
}
.ab-mini-tag {
    display: inline-block;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 600;
    border: 1px solid;
    white-space: nowrap;
}
.ab-mini-tag-kw {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.4);
}
.ab-mini-tag-ex {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}
body.light-theme .ab-mini-tag-kw {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.3);
}
body.light-theme .ab-mini-tag-ex {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Admin Tables (.tbl) */
.tbl-wrap {
    overflow-x: auto;
}
.tbl {
    width: 100%;
    border-collapse: collapse;
}
.tbl th {
    padding: 12px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-3);
    border-bottom: 1px solid var(--border);
}
.tbl td {
    padding: 12px 14px;
    font-size: 12px;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.tbl tr:last-child td {
    border-bottom: none;
}
.tbl tr:hover td {
    background: var(--bg-2);
}
.tbl-user-id {
    font-weight: 600;
    color: var(--text-1);
}
.tbl-sub {
    font-size: 10px;
    color: var(--text-3);
    font-family: monospace;
    margin-top: 2px;
}
.tbl-muted {
    color: var(--text-3);
}
body.light-theme .tbl th {
    background: #f3f4f6;
}
body.light-theme .tbl tr:hover td {
    background: #f9fafb;
}

/* Price Range Block */
.ab-price-range {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.ab-price-input {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ab-price-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-3);
    font-weight: 600;
}
.ab-price-field {
    display: flex;
    align-items: center;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.ab-price-currency {
    padding: 8px 10px;
    background: var(--bg-3);
    color: var(--text-2);
    font-weight: 600;
    font-size: 13px;
    border-right: 1px solid var(--border);
}
.ab-price-value {
    width: 80px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    color: var(--text-1);
    font-size: 13px;
    font-weight: 500;
}
.ab-price-value:focus {
    outline: none;
}
.ab-price-separator {
    color: var(--text-3);
    font-size: 16px;
    padding: 0 4px;
}
.ab-price-limit {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-3);
    background: var(--bg-3);
    padding: 6px 10px;
    border-radius: 4px;
}
/* Rule Action Buttons */
.ab-rule-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ab-rule-btn-active {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.ab-rule-btn-active:hover {
    background: rgba(16, 185, 129, 0.25);
}
.ab-rule-btn-inactive {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
}
.ab-rule-btn-inactive:hover {
    background: rgba(107, 114, 128, 0.25);
}
.ab-rule-btn-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.ab-rule-btn-delete:hover {
    background: rgba(239, 68, 68, 0.2);
}
.ab-rule-btn-locked {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
    cursor: not-allowed;
    opacity: 0.7;
}
@media (max-width: 640px) {
    .ab-price-range { gap: 8px; padding: 10px; }
    .ab-price-value { width: 60px; padding: 6px 8px; font-size: 12px; }
    .ab-price-limit { margin-left: 0; width: 100%; text-align: center; margin-top: 4px; }
}
.ab-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 50%;
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
}
.ab-chip-remove:hover {
    background: rgba(0, 0, 0, 0.3);
}
.ab-limit-info {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 8px;
}
.ab-limit-warn {
    color: #f59e0b;
}
@media (max-width: 600px) {
    .ab-tag-form {
        flex-direction: column;
        align-items: stretch;
    }
    .ab-tag-form .prf-input {
        max-width: 100%;
    }
    .ab-select-tags {
        gap: 6px;
    }
    .ab-select-tag {
        padding: 5px 10px;
        font-size: 11px;
    }
}
body.light-theme .ab-tag {
    background: #f3f4f6;
    border-color: #e5e7eb;
}
body.light-theme .ab-tag-keyword {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
}
body.light-theme .ab-tag-exclusion {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
}
body.light-theme .ab-select-tags {
    background: #f9fafb;
}
body.light-theme .ab-select-tag-available {
    background: #e5e7eb;
    color: #374151;
}
body.light-theme .ab-chip-remove {
    background: rgba(0, 0, 0, 0.1);
}
body.light-theme .ab-chip-remove:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* ========================================
   Unified Message System - Chat Dialog
   ======================================== */
.msg-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    border: 1px solid var(--border);
    background: var(--bg-1);
}

/* Sidebar */
.msg-sidebar {
    background: var(--bg-2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: flex-start;
}
.msg-sidebar-head {
    padding: 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.msg-sidebar-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
}
.msg-new-btn {
    width: 32px;
    height: 32px;
    background: #f59e0b;
    border: none;
    color: #050505;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    transition: background 0.2s;
}
.msg-new-btn:hover {
    background: #d97706;
}
.msg-alert {
    padding: 8px 16px;
    font-size: 11px;
    border-bottom: 1px solid var(--border);
}
.msg-alert-success {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}
.msg-alert-error {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.msg-conversations {
    flex: 0 1 auto;
    overflow-y: auto;
    max-height: calc(100% - 60px);
}
.msg-conv {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    border-top: none;
    margin: 0;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    background: var(--bg-2);
}
.msg-conv:hover {
    background: var(--bg-3);
}
.msg-conv.active {
    background: var(--bg-3);
    border-left: 3px solid #f59e0b;
}
.msg-conv.unread {
    background: rgba(239, 68, 68, 0.08);
}
.msg-conv.closed {
    opacity: 0.7;
}
.msg-avatar {
    width: 40px;
    height: 40px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-3);
    flex-shrink: 0;
}
.msg-avatar.support {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #f59e0b;
    color: #050505;
}
.msg-avatar.system {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border-color: #8b5cf6;
    color: #fff;
}
.msg-avatar.gold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #f59e0b;
    color: #050505;
}
.msg-avatar.vip {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-color: #ec4899;
    color: #fff;
}
.msg-conv-info {
    flex: 1;
    min-width: 0;
}
.msg-conv-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-1);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.msg-conv-badge {
    font-size: 9px;
    padding: 2px 6px;
    background: #f59e0b;
    color: #050505;
    font-weight: 700;
}
.msg-conv-badge.system {
    background: #8b5cf6;
    color: #fff;
}
.msg-conv-badge.closed {
    background: var(--bg-3);
    color: var(--text-3);
    border: 1px solid var(--border);
}
.msg-conv-subject {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-2);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-conv-preview {
    font-size: 10px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px;
}
.msg-conv-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.msg-conv-time {
    font-size: 10px;
    color: var(--text-3);
}
.msg-unread-dot {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
}
.msg-empty-sidebar {
    padding: 40px 20px;
    text-align: center;
}
.msg-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}
.msg-empty-sidebar p {
    color: var(--text-3);
    font-size: 13px;
    margin-bottom: 16px;
}
.msg-start-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #f59e0b;
    color: #050505;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.msg-start-btn:hover {
    background: #d97706;
}

/* Chat Area */
.msg-chat {
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
    min-height: 0;
}
.msg-chat-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.msg-chat-avatar {
    width: 36px;
    height: 36px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
}
.msg-chat-avatar.support {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #f59e0b;
    color: #050505;
}
.msg-chat-avatar.system {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border-color: #8b5cf6;
    color: #fff;
}
.msg-chat-info {
    flex: 1;
}
.msg-chat-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
    display: flex;
    align-items: center;
    gap: 8px;
}
.msg-chat-subject {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
}
.msg-chat-actions {
    display: flex;
    gap: 8px;
}
.msg-action-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.2s;
}
.msg-action-btn:hover {
    background: var(--bg-3);
}
.msg-action-btn.close {
    border-color: #ef4444;
    color: #ef4444;
}
.msg-action-btn.close:hover {
    background: rgba(239, 68, 68, 0.1);
}
.msg-action-btn.reopen {
    border-color: #10b981;
    color: #10b981;
}
.msg-action-btn.reopen:hover {
    background: rgba(16, 185, 129, 0.1);
}
.msg-closed-label {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-3);
    color: var(--text-3);
    border: 1px solid var(--border);
}

/* Messages */
.msg-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 300px;
    max-height: 400px;
}
.msg-bubble {
    max-width: 75%;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
}
.msg-bubble.incoming {
    background: var(--bg-2);
    border: 1px solid var(--border);
    align-self: flex-start;
}
.msg-bubble.outgoing {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    align-self: flex-end;
}
.msg-bubble-from {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    margin-bottom: 6px;
}
.msg-bubble-text {
    color: var(--text-1);
    word-wrap: break-word;
}
.msg-bubble-time {
    font-size: 10px;
    color: var(--text-3);
    margin-top: 8px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.msg-read-status {
    font-size: 11px;
    letter-spacing: -2px;
}
.msg-read-status.unread {
    color: var(--text-3);
}
.msg-read-status.read {
    color: #4ade80;
}
body.light-theme .msg-read-status.read {
    color: #16a34a;
}

/* Reply Area */
.msg-reply-area {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    margin-top: auto;
}
.msg-reply-form {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.msg-reply-input {
    flex: 1;
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 8px 12px;
    color: var(--text-1);
    font-size: 13px;
    resize: vertical;
    min-height: 36px;
    max-height: 200px;
    font-family: inherit;
    line-height: 20px;
}
.msg-reply-input:focus {
    outline: none;
    border-color: var(--gold);
}
.msg-send-btn {
    padding: 8px 16px;
    background: var(--gold);
    border: 1px solid var(--gold);
    color: #000;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    height: 36px;
}
.msg-send-btn:hover {
    background: var(--gold-dim);
    border-color: var(--gold-dim);
}
.msg-no-reply {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 12px;
    color: var(--text-3);
    background: var(--bg-2);
    flex-shrink: 0;
    margin-top: auto;
}
.msg-no-reply span {
    margin-right: 6px;
}

/* No Selection State */
.msg-no-selection {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}
.msg-no-selection-icon {
    font-size: 64px;
    opacity: 0.2;
    margin-bottom: 20px;
}
.msg-no-selection h3 {
    font-size: 18px;
    color: var(--text-1);
    margin-bottom: 8px;
}
.msg-no-selection p {
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: 24px;
}

/* Create Message Page */
.msg-create-container {
    max-width: 700px;
    margin: 0 auto;
}
.msg-create-header {
    margin-bottom: 24px;
}
.msg-back-btn {
    display: inline-block;
    font-size: 12px;
    color: var(--text-3);
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.2s;
}
.msg-back-btn:hover {
    color: var(--text-1);
}
.msg-create-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-1);
}
.msg-create-form-wrap {
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 24px;
}
.msg-create-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.msg-form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.msg-form-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.msg-form-static {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-3);
    border: 1px solid var(--border);
}
.msg-recipient-avatar {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #050505;
}
.msg-recipient-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-1);
}
.msg-recipient-badge {
    font-size: 9px;
    padding: 2px 6px;
    background: #f59e0b;
    color: #050505;
    font-weight: 700;
}
.msg-form-input {
    background: var(--bg-1);
    border: 1px solid var(--border);
    padding: 12px 16px;
    color: var(--text-1);
    font-size: 13px;
    font-family: inherit;
}
.msg-form-input:focus {
    outline: none;
    border-color: #f59e0b;
}
.msg-form-textarea {
    background: var(--bg-1);
    border: 1px solid var(--border);
    padding: 12px 16px;
    color: var(--text-1);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
}
.msg-form-textarea:focus {
    outline: none;
    border-color: #f59e0b;
}
.msg-form-hint {
    font-size: 10px;
    color: var(--text-3);
}
.msg-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}
.msg-form-btn {
    padding: 12px 24px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}
.msg-form-btn.cancel {
    background: var(--bg-3);
    color: var(--text-2);
    border: 1px solid var(--border);
}
.msg-form-btn.cancel:hover {
    background: var(--bg-1);
}
.msg-form-btn.submit {
    background: #f59e0b;
    color: #050505;
}
.msg-form-btn.submit:hover {
    background: #d97706;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .msg-container {
        display: flex;
        flex-direction: column;
        max-height: none;
        min-height: auto;
        border: none;
    }
    .msg-sidebar {
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--border);
        order: 1;
    }
    .msg-conversations {
        max-height: 250px;
    }
    .msg-chat {
        min-height: 350px;
        order: 2;
    }
    .msg-messages {
        max-height: 250px;
    }
    .msg-bubble {
        max-width: 95%;
        padding: 10px 12px;
    }
    .msg-bubble-text {
        font-size: 13px;
    }
    .msg-reply-form {
        flex-direction: row;
        gap: 8px;
    }
    .msg-reply-input {
        height: 36px;
        min-height: 36px;
        max-height: 36px;
        font-size: 13px;
    }
    .msg-send-btn {
        width: auto;
        padding: 8px 14px;
        flex-shrink: 0;
    }
    .msg-chat-head {
        flex-wrap: wrap;
        padding: 12px;
    }
    .msg-chat-avatar {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .msg-chat-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
    }
    .msg-conv {
        padding: 10px 12px;
    }
    .msg-avatar {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
    .msg-sidebar-head {
        padding: 12px;
    }
    .msg-pagination {
        padding: 10px 12px;
    }
    .msg-no-reply,
    .msg-reply-area {
        padding: 12px;
    }
}

/* Light Theme */
body.light-theme .msg-container {
    border-color: #e5e7eb;
}
body.light-theme .msg-sidebar {
    background: #f9fafb;
    border-color: #e5e7eb;
}
body.light-theme .msg-conv:hover,
body.light-theme .msg-conv.active {
    background: #f3f4f6;
}
body.light-theme .msg-conv.unread {
    background: rgba(239, 68, 68, 0.05);
}
body.light-theme .msg-avatar {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #6b7280;
}
body.light-theme .msg-avatar.support {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #f59e0b;
    color: #050505;
}
body.light-theme .msg-avatar.system {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border-color: #8b5cf6;
    color: #fff;
}
body.light-theme .msg-avatar.gold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #f59e0b;
    color: #050505;
}
body.light-theme .msg-avatar.vip {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-color: #ec4899;
    color: #fff;
}
body.light-theme .msg-bubble.incoming {
    background: #f3f4f6;
    border-color: #e5e7eb;
}
body.light-theme .msg-bubble.outgoing {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}
body.light-theme .msg-reply-input {
    background: #fff;
    border-color: #e5e7eb;
}
body.light-theme .msg-form-input,
body.light-theme .msg-form-textarea {
    background: #fff;
    border-color: #e5e7eb;
}
body.light-theme .msg-create-form-wrap {
    background: #f9fafb;
    border-color: #e5e7eb;
}

/* Pagination for conversations */
.msg-pagination {
    padding: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
    background: var(--bg-2);
}
.msg-page-btn {
    padding: 6px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 12px;
    text-decoration: none;
    transition: all 0.15s;
}
.msg-page-btn:hover {
    background: #f59e0b;
    color: #050505;
    border-color: #f59e0b;
}
.msg-page-info {
    font-size: 12px;
    color: var(--text-3);
}
body.light-theme .msg-page-btn {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #6b7280;
}
body.light-theme .msg-page-btn:hover {
    background: #f59e0b;
    color: #050505;
}

/* ==================== Theme Toggle Mobile Responsive ==================== */
@media (max-width: 768px) {
    .theme-toggle-btn {
        min-width: 32px;
        height: 32px;
        font-size: 14px !important;
        padding: 4px 8px !important;
    }
}

@media (max-width: 480px) {
    .theme-toggle-btn {
        min-width: 28px;
        height: 28px;
        font-size: 12px !important;
        padding: 3px 6px !important;
    }
}

/* Exclusive Offer Panel - Mobile */
@media (max-width: 768px) {
    .offer-body {
        padding: 10px;
    }
}

/* ========================================
   Flood Service Styles
   ======================================== */
.flood-tabs {
    display: flex;
    gap: 8px;
}
.flood-tab {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.flood-tab:hover {
    color: var(--text-1);
    border-color: var(--text-2);
}
.flood-tab.active {
    color: var(--gold);
    border-color: var(--gold);
    background: transparent;
}
.flood-tab-icon {
    font-size: 13px;
}
.flood-tab-content {
    display: none;
    padding: 20px;
}
.flood-tab-content.active {
    display: block;
}
.flood-form {
    max-width: 500px;
    margin: 0 auto;
}
.flood-info {
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 16px;
    margin-bottom: 20px;
}
.flood-info-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 8px;
}
.flood-info-desc {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
    margin-bottom: 12px;
}
.flood-info-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.flood-stat-item {
    font-size: 12px;
    color: var(--text-2);
}
.flood-stat-item strong {
    color: var(--text-1);
}
.flood-stat-warning {
    color: #f59e0b;
}
.flood-order-form .auth-field {
    margin-bottom: 16px;
}
.flood-price-calc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    margin-bottom: 16px;
    font-size: 14px;
}
.flood-total-price {
    font-size: 18px;
    font-weight: 700;
    color: #10b981;
}
.flood-submit-btn {
    width: 100%;
    height: 36px;
    padding: 0 16px;
    background: var(--gold);
    border: 1px solid var(--gold);
    color: #000;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.flood-submit-btn:hover {
    background: var(--gold-dim);
}
.flood-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.flood-orders-table {
    overflow-x: auto;
}
.flood-orders-table .tbl {
    width: 100%;
    min-width: 700px;
}
.flood-progress-bar {
    position: relative;
    height: 20px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    overflow: hidden;
    min-width: 100px;
}
.flood-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    transition: width 0.3s;
}
.flood-progress-text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-1);
}
.flood-progress-lg {
    height: 28px;
}
.flood-progress-lg .flood-progress-text {
    font-size: 13px;
}
.flood-order-details {
    max-width: 600px;
}
.flood-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.flood-detail-row:last-child {
    border-bottom: none;
}
.flood-detail-label {
    color: var(--text-2);
    font-size: 14px;
}
.flood-detail-value {
    color: var(--text-1);
    font-size: 14px;
    font-weight: 500;
    text-align: right;
}
.flood-detail-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}
@media (max-width: 600px) {
    .flood-tabs {
        flex-wrap: wrap;
    }
    .flood-tab {
        flex: 1;
        min-width: 80px;
        justify-content: center;
    }
    .flood-detail-row {
        flex-direction: column;
        gap: 4px;
    }
    .flood-detail-value {
        text-align: left;
    }
}
body.light-theme .flood-tab:hover {
    background: #f3f4f6;
}
body.light-theme .flood-tab.active {
    background: #f3f4f6;
}
body.light-theme .flood-info {
    background: #f9fafb;
}
body.light-theme .flood-price-calc {
    background: #f3f4f6;
}
body.light-theme .flood-progress-bar {
    background: #e5e7eb;
}

/* ========================================
   Public Showcase Page
   ======================================== */

/* Buttons */
.sc-btn {
    display: inline-block;
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.15s;
    font-family: inherit;
    cursor: pointer;
    border: none;
}
.sc-btn-primary {
    background: var(--gold);
    color: #000;
}
.sc-btn-primary:hover {
    opacity: 0.85;
}
.sc-btn-outline {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}
.sc-btn-outline:hover {
    border-color: var(--gold);
    color: var(--gold);
}
.sc-btn-lg {
    padding: 12px 32px;
    font-size: 13px;
}
.sc-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-3);
}

/* Hero */
.sc-hero {
    padding: 48px 24px;
    text-align: center;
    background: linear-gradient(180deg, rgba(212, 160, 23, 0.06) 0%, transparent 100%);
    border-bottom: 1px solid var(--border);
}
.sc-hero-inner {
    max-width: 700px;
    margin: 0 auto;
}
.sc-hero-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--gold);
    margin: 0 0 10px;
    letter-spacing: 1px;
}
.sc-hero-sub {
    font-size: 14px;
    color: var(--text-2);
    margin: 0 0 28px;
}
.sc-hero-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
}
.sc-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sc-hero-stat-val {
    font-size: 24px;
    font-weight: 700;
    color: #10b981;
}
.sc-hero-stat-lbl {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* Sections */
.sc-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px;
}
.sc-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sc-section-sub {
    font-size: 12px;
    color: var(--text-3);
    margin: 0 0 20px;
}

/* Categories Grid */
.sc-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 16px;
}
.sc-cat-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    padding: 16px;
    text-align: center;
    transition: border-color 0.15s;
}
.sc-cat-card:hover {
    border-color: var(--gold);
}
.sc-cat-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.sc-cat-count {
    font-size: 11px;
    color: var(--text-3);
}

/* Products Table */
.sc-products-table,
.sc-sales-table {
    border: 1px solid var(--border);
    background: var(--bg-1);
    margin-top: 16px;
}
.sc-table-head {
    display: flex;
    padding: 10px 16px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    gap: 12px;
}
.sc-th {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sc-table-row {
    display: flex;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
    align-items: center;
    transition: background 0.1s;
}
.sc-table-row:last-child {
    border-bottom: none;
}
.sc-table-row:hover {
    background: rgba(212, 160, 23, 0.03);
}
.sc-row-featured {
    background: rgba(212, 160, 23, 0.04);
}
.sc-td {
    font-size: 12px;
}
.sc-th-name, .sc-td-name { flex: 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-th-cat, .sc-td-cat { flex: 1.5; color: var(--text-2); }
.sc-th-price, .sc-td-price { flex: 0.8; text-align: right; }
.sc-th-stock, .sc-td-stock { flex: 0.6; text-align: center; color: var(--text-3); }
.sc-th-qty, .sc-td-qty { flex: 0.4; text-align: center; color: var(--text-3); }
.sc-th-time, .sc-td-time { flex: 1; text-align: right; color: var(--text-3); font-size: 11px; }
.sc-th-action, .sc-td-action { flex: 1; text-align: right; }

.sc-td-price {
    font-weight: 700;
    color: #10b981;
}
.sc-featured-badge {
    margin-right: 4px;
}
.sc-buy-link {
    font-size: 11px;
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
}
.sc-buy-link:hover {
    text-decoration: underline;
}
/* Pagination */
.sc-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px 0 8px;
    flex-wrap: wrap;
}
.sc-page-btn {
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--text-2);
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--bg-1);
    transition: all 0.15s;
    font-family: inherit;
}
.sc-page-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}
.sc-page-active {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
    font-weight: 700;
}
.sc-page-active:hover {
    color: #000;
}
.sc-page-dots {
    font-size: 12px;
    color: var(--text-3);
    padding: 0 4px;
}

/* CTA */
.sc-cta {
    text-align: center;
    padding: 48px 24px;
    background: linear-gradient(180deg, transparent 0%, rgba(212, 160, 23, 0.06) 100%);
    border-top: 1px solid var(--border);
}
.sc-cta-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gold);
    margin: 0 0 8px;
}
.sc-cta-text {
    font-size: 13px;
    color: var(--text-2);
    margin: 0 0 24px;
}
.sc-cta-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Linked rows & cards */
.sc-table-row-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.sc-table-row-link:hover {
    background: rgba(212, 160, 23, 0.06);
}
.sc-cat-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.sc-cat-card-link:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}
.sc-td-empty {
    flex: 1;
    text-align: center;
    color: var(--text-3);
}

/* Breadcrumb */
.sc-breadcrumb {
    font-size: 12px;
    color: var(--text-3);
    padding: 16px 0 8px;
}
.sc-breadcrumb a {
    color: var(--gold);
    text-decoration: none;
}
.sc-breadcrumb a:hover {
    text-decoration: underline;
}

/* Sidebar + Content Layout */
.sc-layout {
    display: flex;
    gap: 24px;
    padding: 16px 0 32px;
}
.sc-sidebar {
    width: 200px;
    flex-shrink: 0;
}
.sc-sidebar-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 12px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--border);
}
.sc-sidebar-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-2);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.15s;
}
.sc-sidebar-link:hover {
    color: var(--gold);
    border-left-color: var(--gold);
    background: rgba(212, 160, 23, 0.04);
}
.sc-sidebar-active {
    color: var(--gold);
    border-left-color: var(--gold);
    font-weight: 700;
}
.sc-sidebar-count {
    font-size: 10px;
    color: var(--text-3);
    background: var(--bg-2);
    padding: 2px 6px;
    border-radius: 3px;
}
.sc-sidebar-back {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    border-left: none;
}
.sc-content {
    flex: 1;
    min-width: 0;
}

/* Category Hero */
.sc-cat-hero {
    padding: 24px 0 16px;
}
.sc-cat-hero-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}
.sc-cat-hero-sub {
    font-size: 13px;
    color: var(--text-2);
    margin: 0;
    line-height: 1.6;
}

/* Section margin-top utility */
.sc-mt {
    margin-top: 32px;
}

/* Product Detail Card */
.sc-prod-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    padding: 24px;
}
.sc-prod-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.sc-prod-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.sc-prod-badge {
    font-size: 11px;
    color: var(--gold);
    padding: 3px 8px;
    border: 1px solid var(--gold);
}
.sc-prod-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-0);
    border: 1px solid var(--border);
}
.sc-prod-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sc-prod-meta-label {
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sc-prod-meta-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.sc-prod-price {
    color: var(--gold);
    font-size: 20px;
}
.sc-prod-cat-link {
    color: var(--gold);
    text-decoration: none;
}
.sc-prod-cat-link:hover {
    text-decoration: underline;
}
.sc-prod-desc {
    margin-bottom: 20px;
}
.sc-prod-desc h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}
.sc-prod-desc p {
    font-size: 13px;
    color: var(--text-2);
    margin: 0;
    line-height: 1.6;
}

/* Product CTA */
.sc-prod-cta {
    text-align: center;
    padding: 24px;
    background: linear-gradient(180deg, transparent 0%, rgba(212, 160, 23, 0.06) 100%);
    border: 1px solid var(--border);
    margin-top: 16px;
}
.sc-prod-cta-text {
    font-size: 14px;
    color: var(--text);
    margin: 0 0 16px;
}
.sc-prod-cta-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.sc-prod-cta-note {
    font-size: 11px;
    color: var(--text-3);
    margin: 12px 0 0;
}

/* CTA compact */
.sc-cta-compact {
    padding: 24px;
    border-top: none;
    margin-top: 32px;
}

/* Related Products Grid */
.sc-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.sc-related-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
    min-height: 70px;
}
.sc-related-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}
.sc-related-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.4;
}
.sc-related-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sc-related-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
}
.sc-related-stock {
    font-size: 10px;
    color: var(--text-3);
}

/* FAQ Section */
.sc-faq {
    margin-top: 8px;
}
.sc-faq-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.sc-faq-item:last-child {
    border-bottom: none;
}
.sc-faq-q {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}
.sc-faq-a {
    font-size: 12px;
    color: var(--text-2);
    margin: 0;
    line-height: 1.6;
}

/* SEO Text Block */
.sc-seo-text {
    margin-top: 32px;
    padding: 20px;
    background: var(--bg-1);
    border: 1px solid var(--border);
}
.sc-seo-text h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 10px;
}
.sc-seo-text p {
    font-size: 12px;
    color: var(--text-2);
    margin: 0 0 8px;
    line-height: 1.7;
}
.sc-seo-text p:last-child {
    margin-bottom: 0;
}

/* Light theme overrides */
body.light-theme .sc-prod-card {
    background: #fff;
}
body.light-theme .sc-prod-meta {
    background: #f8f9fa;
}
body.light-theme .sc-related-card {
    background: #fff;
}
body.light-theme .sc-seo-text {
    background: #f8f9fa;
}
body.light-theme .sc-sidebar-count {
    background: #e9ecef;
}
body.light-theme .sc-table-row-link:hover {
    background: rgba(212, 160, 23, 0.04);
}

/* SEO Footer Links */
.sc-footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 32px 0 24px;
    border-top: 1px solid var(--border);
    margin-bottom: 24px;
}
.sc-footer-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sc-footer-heading {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px;
}
.sc-footer-link {
    font-size: 12px;
    color: var(--text-2);
    text-decoration: none;
    transition: color 0.15s;
    line-height: 1.6;
}
.sc-footer-link:hover {
    color: var(--gold);
}
.sc-footer-active {
    color: var(--gold);
    font-weight: 700;
}
.sc-footer-text {
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.7;
    margin: 0;
}

/* Showcase - Keep nav visible (main site hides it at 1024px for hamburger) */
@media (max-width: 1024px) {
    .sc-page .nav {
        display: flex;
    }
}
@media (max-width: 768px) {
    .sc-page .header-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .sc-page .nav {
        order: 3;
        width: 100%;
        border-top: 1px solid var(--border);
        margin-top: 4px;
        padding-top: 4px;
    }
    .sc-page .nav-link {
        flex: 1;
        text-align: center;
        padding: 8px 6px;
        font-size: 10px;
    }
    .sc-page .nav-link:last-child {
        border-right: none;
    }
    .sc-page .header-acts .btn {
        padding: 0 12px;
        font-size: 10px;
    }
}

/* Showcase - Overflow protection */
.sc-breadcrumb,
.sc-prod-card,
.sc-prod-cta,
.sc-faq,
.sc-seo-text,
.sc-related-grid,
.sc-footer-links {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Showcase - Tablet */
@media (max-width: 1024px) {
    .sc-layout {
        flex-direction: column;
    }
    .sc-sidebar {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .sc-sidebar-title {
        width: 100%;
    }
    .sc-sidebar-link {
        padding: 6px 10px;
        border-left: none;
        border: 1px solid var(--border);
        font-size: 11px;
    }
    .sc-sidebar-active {
        border-color: var(--gold);
    }
    .sc-sidebar-back {
        margin-top: 0;
        padding-top: 6px;
        border-top: none;
    }
    .sc-sidebar-count {
        display: none;
    }
    .sc-footer-links {
        grid-template-columns: 1fr 1fr;
    }
}

/* Showcase - Mobile */
@media (max-width: 768px) {
    .sc-hero {
        padding: 32px 16px;
    }
    .sc-hero-title {
        font-size: 22px;
    }
    .sc-hero-stats {
        gap: 20px;
        flex-wrap: wrap;
    }
    .sc-hero-stat-val {
        font-size: 20px;
    }
    .sc-cats-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .sc-table-head {
        display: none;
    }
    .sc-table-row {
        flex-wrap: wrap;
        padding: 12px 14px;
        gap: 6px;
    }
    .sc-td-name {
        flex: 100%;
        font-weight: 700;
        white-space: normal;
        word-break: break-word;
    }
    .sc-td-cat {
        flex: 1;
        font-size: 11px;
    }
    .sc-td-price {
        flex: 0 0 auto;
        text-align: left;
    }
    .sc-td-stock, .sc-td-qty {
        flex: 0 0 auto;
    }
    .sc-td-action {
        flex: 0 0 auto;
    }
    .sc-td-time {
        flex: 1;
        text-align: left;
    }
    .sc-cta-btns {
        flex-direction: column;
        align-items: stretch;
    }
    .sc-pagination {
        gap: 3px;
    }
    .sc-page-btn {
        padding: 5px 8px;
        font-size: 11px;
    }
    .sc-prod-card {
        padding: 16px;
    }
    .sc-prod-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .sc-prod-title {
        font-size: 18px;
        word-break: break-word;
    }
    .sc-prod-meta {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .sc-prod-meta-item {
        padding: 10px;
    }
    .sc-prod-price {
        font-size: 16px;
    }
    .sc-prod-cta {
        padding: 16px;
    }
    .sc-prod-cta-text {
        font-size: 13px;
        word-break: break-word;
    }
    .sc-btn {
        word-break: break-word;
        white-space: normal;
        text-align: center;
    }
    .sc-btn-lg {
        padding: 10px 16px;
        font-size: 12px;
    }
    .sc-faq-q, .sc-faq-a {
        word-break: break-word;
    }
    .sc-seo-text {
        padding: 16px;
    }
    .sc-seo-text h2 {
        font-size: 14px;
        word-break: break-word;
    }
    .sc-seo-text p {
        word-break: break-word;
    }
    .sc-breadcrumb {
        word-break: break-word;
    }
    .sc-footer-links {
        grid-template-columns: 1fr;
    }
    .sc-footer-text {
        word-break: break-word;
    }
    .sc-section-title {
        font-size: 14px;
        word-break: break-word;
    }
    .sc-section-sub {
        word-break: break-word;
    }
}

/* Showcase - Small Mobile */
@media (max-width: 400px) {
    .sc-prod-meta {
        grid-template-columns: 1fr;
    }
    .sc-related-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ========================================
   News Modal
   ======================================== */
.news-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.news-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.news-modal {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s ease;
    overflow: hidden;
}
.news-modal-overlay.visible .news-modal {
    transform: translateY(0) scale(1);
}
.news-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.news-modal-badge {
    display: inline-block;
    background: var(--gold);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 3px;
    flex-shrink: 0;
}
.news-modal-title {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news-modal-close {
    background: none;
    border: none;
    color: var(--text-2);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.news-modal-close:hover {
    color: var(--text);
}
.news-modal-body {
    padding: 16px 20px;
}
.news-modal-text {
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.6;
}
.news-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    gap: 12px;
}
.news-modal-link {
    color: var(--gold);
    font-size: 12px;
    text-decoration: none;
    font-weight: 700;
}
.news-modal-link:hover {
    text-decoration: underline;
}
.news-modal-dismiss {
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
}
.news-modal-dismiss:hover {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
}

/* Tablet */
@media (max-width: 768px) {
    .news-modal {
        max-width: 360px;
    }
    .news-modal-header {
        padding: 14px 16px;
    }
    .news-modal-body {
        padding: 14px 16px;
    }
    .news-modal-footer {
        padding: 10px 16px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .news-modal {
        width: 94%;
        max-width: none;
        border-radius: 6px;
    }
    .news-modal-title {
        font-size: 13px;
    }
    .news-modal-text {
        font-size: 12px;
    }
}

/* ========================================
   Game Modal
   ======================================== */
.game-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text-3);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    letter-spacing: 0.5px;
}
.game-btn:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(212, 160, 23, 0.05);
}
.game-btn-icon {
    font-size: 14px;
}
.game-btn-prominent {
    margin-top: 10px;
    padding: 8px 18px;
    border-color: var(--gold);
    color: var(--gold);
    font-size: 12px;
    animation: gameGlow 2.5s ease-in-out infinite;
}
.game-btn-prominent:hover {
    background: rgba(212, 160, 23, 0.12);
    box-shadow: 0 0 12px rgba(212, 160, 23, 0.3);
}
@keyframes gameGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(212, 160, 23, 0.1); }
    50% { box-shadow: 0 0 10px rgba(212, 160, 23, 0.25); }
}
.game-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.game-modal-overlay.active {
    display: flex;
}
.game-modal-box {
    position: relative;
    width: 100%;
    max-width: 840px;
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
}
.game-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #111;
    border-bottom: 1px solid #2a2a2a;
}
.game-modal-title {
    font-size: 12px;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 1px;
}
.game-modal-close {
    background: none;
    border: 1px solid #2a2a2a;
    color: #707070;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 8px;
    font-family: inherit;
    transition: all 0.2s;
}
.game-modal-close:hover {
    color: var(--red);
    border-color: var(--red);
}
.game-modal-iframe {
    width: 100%;
    height: 340px;
    border: none;
    display: block;
}
@media (max-width: 600px) {
    .game-modal-iframe {
        height: 280px;
    }
}
body.light-theme .game-btn {
    background: #f0f0f0;
    border-color: #ddd;
    color: #555;
}
body.light-theme .game-btn:hover {
    color: #b8860b;
    border-color: #b8860b;
    background: rgba(184, 134, 11, 0.05);
}

/* ========================================
   Lucky Wheel Page
   ======================================== */
.stats-vault.vault-4 { grid-template-columns: repeat(4, 1fr); }
.vault-vip { color: #f472b6; }
.vault-gold { color: var(--gold); }

/* Wheel Area */
.lw-wheel-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lw-wheel-wrap {
    position: relative;
    width: 380px;
    height: 380px;
    margin-bottom: 20px;
}

.lw-wheel-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    pointer-events: none;
    animation: lwGlow 3s ease-in-out infinite;
}

@keyframes lwGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.lw-pointer {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    color: #8b5cf6;
    z-index: 10;
    filter: drop-shadow(0 2px 6px rgba(139, 92, 246, 0.5));
    line-height: 1;
}

.lw-wheel {
    width: 380px;
    height: 380px;
}

#lwCanvas {
    display: block;
}

/* Spin Button */
.lw-spin-area {
    text-align: center;
    margin-bottom: 20px;
}

.lw-spin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 48px;
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
    border: 2px solid #8b5cf6;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.lw-spin-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%);
    animation: lwShine 2.5s infinite;
}

@keyframes lwShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.lw-spin-btn:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #4f46e5 100%);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
    transform: scale(1.02);
}

.lw-spin-btn:active {
    transform: scale(0.98);
}

.lw-spin-icon {
    font-size: 18px;
}

.lw-spin-disabled {
    background: var(--bg-2);
    border-color: var(--border);
    color: var(--text-3);
    cursor: not-allowed;
    opacity: 0.6;
}

.lw-spin-disabled::before {
    display: none;
}

.lw-spin-disabled:hover {
    background: var(--bg-2);
    box-shadow: none;
    transform: none;
}

.lw-spin-active {
    animation: lwPulse 0.6s ease-in-out infinite;
}

@keyframes lwPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(139, 92, 246, 0.3); }
    50% { box-shadow: 0 0 25px rgba(139, 92, 246, 0.6); }
}

.lw-spin-note {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 8px;
}

.lw-note-dim {
    opacity: 0.5;
}

.lw-countdown {
    color: #a78bfa;
    font-weight: 700;
    font-family: 'Anonymous Pro', monospace;
}

.lw-val-vip { color: #f472b6; }
.lw-val-gold { color: var(--gold); }
.lw-val-green { color: var(--green); }
.lw-val-blue { color: #60a5fa; }

/* Chances */
.lw-chances {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lw-chance-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lw-chance-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.lw-dot-product { background: #7c3aed; }
.lw-dot-coupon { background: #2563eb; }
.lw-dot-balance { background: #d97706; }
.lw-dot-nothing { background: var(--text-3); opacity: 0.3; }

.lw-chance-name {
    flex: 1;
    font-size: 12px;
    color: var(--text-2);
}

.lw-chance-pct {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    font-family: 'Anonymous Pro', monospace;
}

/* Stats Grid */
.lw-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
}

.lw-stat {
    background: var(--bg-1);
    padding: 14px 8px;
    text-align: center;
}

.lw-stat-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    font-family: 'Anonymous Pro', monospace;
}

.lw-stat-label {
    font-size: 9px;
    color: var(--text-3);
    text-transform: uppercase;
    margin-top: 2px;
}

/* History */
.lw-history {
    max-height: 300px;
    overflow-y: auto;
}

.lw-history-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
}

.lw-history-row:last-child {
    border-bottom: none;
}

.lw-history-type {
    flex-shrink: 0;
    font-size: 14px;
}

.lw-history-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-2);
}

.lw-ht-win { color: var(--green); font-weight: 600; }
.lw-ht-lose { color: var(--text-3); }

.lw-history-time {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text-3);
}

/* Prize Modal */
.lw-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lw-modal-active {
    display: flex;
}

.lw-modal {
    background: var(--bg-1);
    border: 2px solid var(--border);
    padding: 32px 40px;
    text-align: center;
    max-width: 380px;
    width: 100%;
    position: relative;
    animation: lwModalIn 0.3s ease-out;
}

@keyframes lwModalIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.lw-modal-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.lw-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
}

.lw-modal-win { color: var(--green); }
.lw-modal-lose { color: var(--text-3); }

.lw-modal-text {
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 12px;
}

.lw-modal-prize {
    font-size: 14px;
    font-weight: 700;
    padding: 10px 16px;
    margin-bottom: 20px;
    word-break: break-all;
    user-select: all;
}

.lw-prize-balance {
    color: var(--gold);
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    font-size: 20px;
}

.lw-prize-product {
    color: #a78bfa;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.lw-prize-coupon {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.lw-prize-data {
    font-family: 'Anonymous Pro', monospace;
    font-size: 13px;
    line-height: 1.6;
    word-break: break-all;
    user-select: all;
    padding: 8px 0 10px;
}
.lw-prize-copy {
    display: inline-block;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #a78bfa;
    transition: background 0.2s, border-color 0.2s;
}
.lw-prize-copy:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: #a78bfa;
}
.lw-prize-coupon .lw-prize-copy {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}
.lw-prize-coupon .lw-prize-copy:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: #60a5fa;
}
body.light-theme .lw-prize-copy {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.25);
    color: #7c3aed;
}
body.light-theme .lw-prize-copy:hover {
    background: rgba(124, 58, 237, 0.18);
}
.lw-ht-val {
    font-family: 'Anonymous Pro', monospace;
    font-size: 11px;
    color: var(--text);
    word-break: break-all;
}
.lw-ht-copy {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    padding: 0 4px;
    opacity: 0.5;
    transition: opacity 0.2s;
    flex-shrink: 0;
}
.lw-ht-copy:hover {
    opacity: 1;
}

.lw-modal-btn {
    padding: 10px 32px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    font-family: 'Anonymous Pro', monospace;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.lw-modal-btn:hover {
    background: #8b5cf6;
    color: #fff;
    border-color: #8b5cf6;
}

/* Admin checkbox */
.lw-admin-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 12px;
    cursor: pointer;
}

/* Description */
.lw-desc {
    padding: 14px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.6;
}

.lw-desc p {
    margin-bottom: 8px;
}

.lw-desc p:last-child {
    margin-bottom: 0;
}

.lw-desc strong {
    color: var(--text);
}

/* Rules */
.lw-rules {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lw-rule {
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.4;
}

/* Benefits */
.lw-benefits {
    padding: 14px;
}

.lw-benefit-group {
    margin-bottom: 14px;
}

.lw-benefit-group:last-of-type {
    margin-bottom: 0;
}

.lw-benefit-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    font-family: 'Anonymous Pro', monospace;
}

.lw-benefit-item {
    font-size: 12px;
    color: var(--text-2);
    padding: 3px 0;
    padding-left: 4px;
}

.lw-upgrade-btn {
    display: block;
    text-align: center;
    padding: 10px 20px;
    margin-top: 14px;
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.2s;
}

.lw-upgrade-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Light Theme */
body.light-theme .lw-wheel-glow {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
}

body.light-theme .lw-pointer {
    color: #7c3aed;
}

body.light-theme .lw-spin-btn {
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
}

body.light-theme .lw-modal {
    border-color: #d4d4d4;
}

body.light-theme .lw-upgrade-btn {
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
}

/* Responsive */
@media (max-width: 480px) {
    .lw-wheel-wrap {
        width: 300px;
        height: 300px;
    }

    .lw-wheel {
        width: 300px;
        height: 300px;
    }

    #lwCanvas {
        width: 300px;
        height: 300px;
    }

    .lw-spin-btn {
        padding: 12px 36px;
        font-size: 14px;
    }

    .lw-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lw-modal {
        padding: 24px 20px;
    }

    .stats-vault.vault-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   Spending Analytics Page
   ======================================== */
.stats-vault.vault-6 { grid-template-columns: repeat(6, 1fr); }

/* Analytics Sidebar - Quick Stats Panel */
.sa-panel-stats {
    border-color: rgba(139, 92, 246, 0.3);
}

.sa-panel-stats .side-head {
    color: #a78bfa;
    background: rgba(139, 92, 246, 0.06);
    border-bottom-color: rgba(139, 92, 246, 0.15);
}

.sa-quick-grid {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sa-quick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background 0.15s;
}

.sa-quick-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.sa-quick-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.sa-qi-status { background: rgba(139, 92, 246, 0.12); }
.sa-qi-discount { background: rgba(16, 185, 129, 0.12); }
.sa-qi-balance { background: rgba(52, 211, 153, 0.12); }
.sa-qi-member { background: rgba(59, 130, 246, 0.12); }
.sa-qi-spend { background: rgba(245, 158, 11, 0.12); }

.sa-quick-info {
    flex: 1;
    min-width: 0;
}

.sa-quick-label {
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    margin-bottom: 3px;
}

.sa-quick-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    font-family: 'Anonymous Pro', monospace;
}

.sa-val-green { color: #34d399; }
.sa-status-user { color: var(--text-3); }
.sa-status-vip { color: #f472b6; }
.sa-status-gold { color: var(--gold); }

/* Analytics Sidebar - Top Category Panel */
.sa-panel-top {
    border-color: rgba(99, 102, 241, 0.3);
}

.sa-panel-top .side-head {
    color: #818cf8;
    background: rgba(99, 102, 241, 0.06);
    border-bottom-color: rgba(99, 102, 241, 0.15);
}

.sa-top-body {
    padding: 20px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.sa-top-ring {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}

.sa-top-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.sa-top-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #a78bfa;
    font-family: 'Anonymous Pro', monospace;
}

.sa-top-details {
    flex: 1;
    min-width: 0;
}

.sa-top-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.sa-top-amount {
    font-size: 13px;
    font-weight: 600;
    color: #a78bfa;
    font-family: 'Anonymous Pro', monospace;
    margin-bottom: 2px;
}

.sa-top-orders {
    font-size: 11px;
    color: var(--text-3);
}

/* Analytics Sidebar - Savings Panel */
.sa-panel-savings {
    border-color: rgba(16, 185, 129, 0.3);
}

.sa-panel-savings .side-head {
    color: #34d399;
    background: rgba(16, 185, 129, 0.06);
    border-bottom-color: rgba(16, 185, 129, 0.15);
}

.sa-savings-body {
    padding: 20px 16px;
    text-align: center;
}

.sa-savings-amount {
    font-size: 26px;
    font-weight: 700;
    color: #34d399;
    font-family: 'Anonymous Pro', monospace;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.sa-savings-bar-wrap {
    height: 6px;
    background: var(--bg-2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.sa-savings-bar-fill {
    height: 100%;
    width: var(--pct, 0%);
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 3px;
    transition: width 0.8s ease;
}

.sa-savings-desc {
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.5;
}

.sa-savings-tier {
    color: #34d399;
    font-weight: 600;
}

/* Light Theme - Analytics Sidebar */
body.light-theme .sa-panel-stats {
    border-color: rgba(139, 92, 246, 0.2);
}
body.light-theme .sa-panel-stats .side-head {
    color: #7c3aed;
    background: rgba(139, 92, 246, 0.05);
}
body.light-theme .sa-quick-item:hover {
    background: rgba(0, 0, 0, 0.02);
}
body.light-theme .sa-val-green { color: #059669; }
body.light-theme .sa-status-vip { color: #db2777; }
body.light-theme .sa-status-gold { color: #b45309; }

body.light-theme .sa-panel-top {
    border-color: rgba(99, 102, 241, 0.2);
}
body.light-theme .sa-panel-top .side-head {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
}
body.light-theme .sa-top-pct { color: #7c3aed; }
body.light-theme .sa-top-amount { color: #7c3aed; }

body.light-theme .sa-panel-savings {
    border-color: rgba(16, 185, 129, 0.2);
}
body.light-theme .sa-panel-savings .side-head {
    color: #059669;
    background: rgba(16, 185, 129, 0.05);
}
body.light-theme .sa-savings-amount { color: #059669; }
body.light-theme .sa-savings-tier { color: #059669; }
body.light-theme .sa-savings-bar-wrap { background: #e5e7eb; }

/* Analytics Sidebar - Upgrade Savings Hint */
.sa-panel-upgrade-hint {
    border-color: rgba(245, 158, 11, 0.3);
}

.sa-panel-upgrade-hint .side-head {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.06);
    border-bottom-color: rgba(245, 158, 11, 0.15);
}

.sa-upgrade-body {
    padding: 14px;
}

.sa-upgrade-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.sa-upgrade-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.sa-upgrade-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.sa-badge-gold {
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--gold);
}

.sa-badge-vip {
    background: rgba(236, 72, 153, 0.12);
    border: 1px solid rgba(236, 72, 153, 0.3);
    color: #f472b6;
}

.sa-upgrade-info {
    flex: 1;
    min-width: 0;
}

.sa-upgrade-amount {
    font-size: 16px;
    font-weight: 700;
    color: #fbbf24;
    font-family: 'Anonymous Pro', monospace;
    line-height: 1.2;
}

.sa-upgrade-vip .sa-upgrade-amount {
    color: #f472b6;
}

.sa-upgrade-hint {
    font-size: 10px;
    color: var(--text-3);
    margin-top: 2px;
}

.sa-upgrade-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 10px;
}

.sa-upgrade-btn {
    display: block;
    margin-top: 12px;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

.sa-upgrade-btn:hover {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

/* Light Theme - Upgrade Hint */
body.light-theme .sa-panel-upgrade-hint {
    border-color: rgba(245, 158, 11, 0.2);
}
body.light-theme .sa-panel-upgrade-hint .side-head {
    color: #d97706;
    background: rgba(245, 158, 11, 0.05);
}
body.light-theme .sa-upgrade-row:hover {
    background: rgba(0, 0, 0, 0.02);
}
body.light-theme .sa-badge-gold {
    background: rgba(212, 175, 55, 0.1);
    color: #b45309;
}
body.light-theme .sa-badge-vip {
    background: rgba(236, 72, 153, 0.08);
    color: #db2777;
}
body.light-theme .sa-upgrade-amount {
    color: #d97706;
}
body.light-theme .sa-upgrade-vip .sa-upgrade-amount {
    color: #db2777;
}
body.light-theme .sa-upgrade-btn {
    color: #d97706;
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
}
body.light-theme .sa-upgrade-btn:hover {
    background: rgba(245, 158, 11, 0.15);
}

/* Bar Chart */
.sa-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 160px;
    padding-top: 10px;
}

.sa-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.sa-bar {
    width: 100%;
    max-width: 32px;
    background: linear-gradient(180deg, #8b5cf6, #6366f1);
    min-height: 2px;
    transition: height 0.5s ease;
    position: relative;
}

.sa-bar-val {
    font-size: 8px;
    color: var(--text-3);
    margin-bottom: 2px;
    text-align: center;
    font-family: 'Anonymous Pro', monospace;
}

.sa-bar-label {
    font-size: 8px;
    color: var(--text-3);
    margin-top: 4px;
    text-transform: uppercase;
}

/* Category Breakdown */
.sa-cats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sa-cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sa-cat-name {
    font-size: 11px;
    color: var(--text-2);
    width: 90px;
    flex-shrink: 0;
}

.sa-cat-bar-wrap {
    flex: 1;
    height: 16px;
    background: var(--bg-2);
    overflow: hidden;
    position: relative;
}

.sa-stat-val {
    width: auto;
    flex-shrink: 0;
}

.sa-cat-bar-fill {
    height: 100%;
    transition: width 0.5s ease;
}

.sa-cat-bar-fill.sa-c-accounts { background: #8b5cf6; }
.sa-cat-bar-fill.sa-c-cc { background: #ef4444; }
.sa-cat-bar-fill.sa-c-ssn { background: #f59e0b; }
.sa-cat-bar-fill.sa-c-proxy { background: #3b82f6; }
.sa-cat-bar-fill.sa-c-flood { background: #10b981; }
.sa-cat-bar-fill.sa-c-leak { background: #ec4899; }
.sa-cat-bar-fill.sa-c-auction { background: #06b6d4; }
.sa-cat-bar-fill.sa-c-p2p { background: #f97316; }
.sa-cat-bar-fill.sa-c-membership { background: #a855f7; }

.sa-cat-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    width: 60px;
    text-align: right;
    flex-shrink: 0;
    font-family: 'Anonymous Pro', monospace;
}

.sa-cat-count {
    font-size: 10px;
    color: var(--text-3);
    width: 40px;
    text-align: right;
    flex-shrink: 0;
}

/* Recent Transactions Table */
.sa-tx-table {
    width: 100%;
}

.sa-tx-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
}

.sa-tx-row:last-child {
    border-bottom: none;
}

.sa-tx-type {
    font-size: 14px;
    flex-shrink: 0;
}

.sa-tx-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-2);
}

.sa-tx-amount {
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
    font-family: 'Anonymous Pro', monospace;
}

.sa-tx-time {
    color: var(--text-3);
    flex-shrink: 0;
    font-size: 10px;
    width: 50px;
    text-align: right;
}

/* Empty State */
.sa-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-3);
    font-size: 12px;
}

.sa-empty-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

/* Light Theme - Analytics */
body.light-theme .sa-cat-bar-wrap {
    background: #f3f4f6;
}

/* Responsive - Analytics vault */
@media (max-width: 768px) {
    .stats-vault.vault-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .stats-vault.vault-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive */
@media (max-width: 600px) {
    .sa-bars {
        height: 120px;
    }

    .sa-cat-name {
        width: 60px;
        font-size: 10px;
    }

    .sa-cat-val {
        width: 50px;
    }

    .sa-cat-count {
        display: none;
    }
}

/* ========================================
   Back to Top Button
   ======================================== */
.btt {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    color: var(--gold);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s, visibility 0.25s, transform 0.25s, background 0.2s;
}
.btt.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.btt:hover {
    background: var(--bg-2);
    border-color: var(--gold);
}
body.light-theme .btt {
    background: #fff;
    border-color: #e5e7eb;
    color: #b45309;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
body.light-theme .btt:hover {
    background: #f9fafb;
    border-color: #d97706;
}
@media (max-width: 768px) {
    .btt {
        bottom: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

/* ========================================
   Vault Stat Hover Effects
   ======================================== */
.vault-stat:hover {
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.08);
}
.vault-stat:hover .vault-val {
    transform: scale(1.04);
}
.vault-val {
    transition: transform 0.2s ease;
}
body.light-theme .vault-stat:hover {
    border-color: rgba(217, 119, 6, 0.25);
    box-shadow: 0 0 12px rgba(217, 119, 6, 0.06);
}

/* ========================================
   Enhanced Product Row Hover
   ======================================== */
.prod {
    transition: background 0.15s, box-shadow 0.15s;
}
.prod:hover {
    box-shadow: inset 3px 0 0 var(--gold);
}
body.light-theme .prod:hover {
    background: #f9fafb;
    box-shadow: inset 3px 0 0 #d97706;
}

/* ========================================
   Similar Products Block
   ======================================== */
.similar-products {
    margin-top: 16px;
}
.similar-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.similar-item:last-child {
    border-bottom: none;
}
.similar-item:hover {
    background: var(--bg-2);
}
.similar-info {
    flex: 1;
    min-width: 0;
}
.similar-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.similar-meta {
    font-size: 9px;
    color: var(--text-3);
    margin-top: 2px;
}
.similar-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
    white-space: nowrap;
    margin-left: 10px;
}
.similar-empty {
    padding: 14px;
    font-size: 11px;
    color: var(--text-3);
    text-align: center;
}
body.light-theme .similar-item:hover {
    background: #f9fafb;
}
body.light-theme .similar-name {
    color: #1e293b;
}
body.light-theme .similar-meta {
    color: #9ca3af;
}

/* ========================================
   Scroll Progress Bar
   ======================================== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, var(--gold), #f59e0b);
    z-index: 9999;
    transition: none;
    pointer-events: none;
}
body.light-theme .scroll-progress {
    background: linear-gradient(90deg, #b45309, #d97706);
}

/* ========================================
   Global Toast Notifications
   ======================================== */
.toast-container {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    max-width: 380px;
    width: calc(100% - 32px);
}
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-3);
    font-size: 12px;
    color: var(--text);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    cursor: default;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.toast.toast-show {
    opacity: 1;
    transform: translateX(0);
}
.toast.toast-hide {
    opacity: 0;
    transform: translateX(40px);
}
.toast-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.toast-msg {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
    word-break: break-word;
}
.toast-close {
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0 2px;
    line-height: 1;
}
.toast-close:hover {
    color: var(--text);
}
.toast-success {
    border-left-color: var(--green);
}
.toast-error {
    border-left-color: var(--red);
}
.toast-warning {
    border-left-color: #f59e0b;
}
.toast-info {
    border-left-color: var(--blue);
}
body.light-theme .toast {
    background: #fff;
    border-color: #e5e7eb;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
body.light-theme .toast-close:hover {
    color: #1e293b;
}
@media (max-width: 480px) {
    .toast-container {
        top: 8px;
        right: 8px;
        max-width: 100%;
        width: calc(100% - 16px);
    }
    .toast {
        padding: 10px 12px;
        font-size: 11px;
    }
}

/* =======================================================
   FINAL DESIGN LANGUAGE OVERRIDES
   These come last to defeat earlier legacy declarations.
   ======================================================= */

/* --- idx-alerts: each alert is its own card with own accent --- */
.idx-alert {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 14px !important;
    padding: 12px 14px !important;
    background: var(--bg-1) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    border-left: 2px solid var(--border) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    animation: none !important;
    box-shadow: none !important;
    overflow: hidden;
}

/* Hide legacy decorative elements that conflict with new design */
.idx-alert-warn-border,
.idx-alert-wheel-glow {
    display: none !important;
}

/* Variant left-stripe colors (override legacy border-color shorthand) */
.idx-alert-warn      { border-left-color: #f59e0b !important; }
.idx-alert-premium   { border-left-color: #d4a017 !important; }
.idx-alert-telegram  { border-left-color: #3b82f6 !important; }
.idx-alert-wheel     { border-left-color: #10b981 !important; }
.idx-alert-newuser   { border-left-color: #10b981 !important; }
.idx-alert-security  { border-left-color: #ef4444 !important; }
.idx-alert-notify    { border-left-color: #8b5cf6 !important; }
.idx-alert-vip       { border-left-color: #ec4899 !important; }
.idx-alert-staking   { border-left-color: #8b5cf6 !important; }
.idx-alert-staking-promo { border-left-color: #a78bfa !important; }

/* Per-variant corner-fade accent (140px x 2px top-left, matching Latest Inventory style) */
.idx-alert-warn::before,
.idx-alert-premium::before,
.idx-alert-telegram::before,
.idx-alert-wheel::before,
.idx-alert-newuser::before,
.idx-alert-security::before,
.idx-alert-notify::before,
.idx-alert-vip::before,
.idx-alert-staking::before,
.idx-alert-staking-promo::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 140px !important;
    height: 2px !important;
    pointer-events: none !important;
    z-index: 3 !important;
    animation: none !important;
    display: block !important;
    box-shadow: none !important;
}

.idx-alert-warn::before      { background: linear-gradient(90deg, #f59e0b 0%, rgba(245, 158, 11, 0) 100%) !important; }
.idx-alert-premium::before   { background: linear-gradient(90deg, #d4a017 0%, rgba(212, 160, 23, 0) 100%) !important; }
.idx-alert-telegram::before  { background: linear-gradient(90deg, #3b82f6 0%, rgba(59, 130, 246, 0) 100%) !important; }
.idx-alert-wheel::before     { background: linear-gradient(90deg, #10b981 0%, rgba(16, 185, 129, 0) 100%) !important; }
.idx-alert-newuser::before   { background: linear-gradient(90deg, #10b981 0%, rgba(16, 185, 129, 0) 100%) !important; }
.idx-alert-security::before  { background: linear-gradient(90deg, #ef4444 0%, rgba(239, 68, 68, 0) 100%) !important; }
.idx-alert-notify::before    { background: linear-gradient(90deg, #8b5cf6 0%, rgba(139, 92, 246, 0) 100%) !important; }
.idx-alert-vip::before       { background: linear-gradient(90deg, #ec4899 0%, rgba(236, 72, 153, 0) 100%) !important; }
.idx-alert-staking::before   { background: linear-gradient(90deg, #8b5cf6 0%, rgba(139, 92, 246, 0) 100%) !important; }
.idx-alert-staking-promo::before { background: linear-gradient(90deg, #a78bfa 0%, rgba(167, 139, 250, 0) 100%) !important; }

/* Title/text typography in new language */
.idx-alert-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    font-family: 'Anonymous Pro', monospace !important;
    margin-bottom: 3px !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
}

.idx-alert-text {
    font-size: 11px !important;
    line-height: 1.45 !important;
    color: var(--text-2) !important;
}

/* Variant title colors (match stripe) */
.idx-alert-warn       .idx-alert-title { color: #f59e0b !important; }
.idx-alert-premium    .idx-alert-title { color: #d4a017 !important; }
.idx-alert-telegram   .idx-alert-title { color: #60a5fa !important; }
.idx-alert-wheel      .idx-alert-title { color: #10b981 !important; }
.idx-alert-newuser    .idx-alert-title { color: #10b981 !important; }
.idx-alert-security   .idx-alert-title { color: #f87171 !important; }
.idx-alert-notify     .idx-alert-title { color: #a78bfa !important; }
.idx-alert-vip        .idx-alert-title { color: #f472b6 !important; }
.idx-alert-staking    .idx-alert-title { color: #a78bfa !important; }
.idx-alert-staking-promo .idx-alert-title { color: #a78bfa !important; }

body.light-theme .idx-alert-warn       .idx-alert-title { color: #d97706 !important; }
body.light-theme .idx-alert-premium    .idx-alert-title { color: #92700c !important; }
body.light-theme .idx-alert-telegram   .idx-alert-title { color: #2563eb !important; }
body.light-theme .idx-alert-wheel      .idx-alert-title { color: #059669 !important; }
body.light-theme .idx-alert-newuser    .idx-alert-title { color: #059669 !important; }
body.light-theme .idx-alert-security   .idx-alert-title { color: #dc2626 !important; }
body.light-theme .idx-alert-notify     .idx-alert-title { color: #7c3aed !important; }
body.light-theme .idx-alert-vip        .idx-alert-title { color: #be185d !important; }
body.light-theme .idx-alert-staking    .idx-alert-title { color: #7c3aed !important; }
body.light-theme .idx-alert-staking-promo .idx-alert-title { color: #7c3aed !important; }

/* Icon stays compact, variant-tinted */
.idx-alert-icon {
    font-size: 18px !important;
    flex-shrink: 0;
}

/* Unified CTA button across all alerts */
.idx-alert-action {
    font-family: 'Anonymous Pro', monospace !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 10px !important;
    padding: 7px 12px !important;
    border: 1px solid var(--border) !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--text-2);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.idx-alert-action:hover {
    transform: translateX(2px);
    text-decoration: none;
}

/* Per-variant CTA accent (color + hover fill) */
.idx-action-premium { color: #d4a017 !important; border-color: rgba(212, 160, 23, 0.4) !important; background: rgba(212, 160, 23, 0.08) !important; }
.idx-action-premium:hover { color: #fff !important; background: rgba(212, 160, 23, 0.25) !important; border-color: #d4a017 !important; }

.idx-action-tg,
.idx-action-rss { color: #60a5fa !important; border-color: rgba(59, 130, 246, 0.4) !important; background: rgba(59, 130, 246, 0.08) !important; }
.idx-action-tg:hover,
.idx-action-rss:hover { color: #fff !important; background: rgba(59, 130, 246, 0.25) !important; border-color: #3b82f6 !important; }

.idx-action-wheel { color: #10b981 !important; border-color: rgba(16, 185, 129, 0.4) !important; background: rgba(16, 185, 129, 0.08) !important; }
.idx-action-wheel:hover { color: #fff !important; background: rgba(16, 185, 129, 0.25) !important; border-color: #10b981 !important; }

.idx-action-sec { color: #f87171 !important; border-color: rgba(239, 68, 68, 0.4) !important; background: rgba(239, 68, 68, 0.08) !important; }
.idx-action-sec:hover { color: #fff !important; background: rgba(239, 68, 68, 0.25) !important; border-color: #ef4444 !important; }

.idx-action-notify { color: #a78bfa !important; border-color: rgba(139, 92, 246, 0.4) !important; background: rgba(139, 92, 246, 0.08) !important; }
.idx-action-notify:hover { color: #fff !important; background: rgba(139, 92, 246, 0.25) !important; border-color: #8b5cf6 !important; }

.idx-action-vip { color: #f472b6 !important; border-color: rgba(236, 72, 153, 0.4) !important; background: rgba(236, 72, 153, 0.08) !important; }
.idx-action-vip:hover { color: #fff !important; background: rgba(236, 72, 153, 0.25) !important; border-color: #ec4899 !important; }

/* VIP feature locked state — for non-VIP users (no domain leaked, upgrade CTA) */
.idx-alert-vip-locked { opacity: 0.85; }
.idx-alert-vip-locked .idx-alert-icon { filter: grayscale(0.5); opacity: 0.7; }
.idx-alert-vip-locked .idx-alert-title { color: var(--text-2) !important; }

.idx-action-vip-locked {
    color: var(--text-3) !important;
    border: 1px solid var(--border) !important;
    background: rgba(115, 115, 115, 0.06) !important;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
}
.idx-action-vip-locked:hover {
    color: #ec4899 !important;
    border-color: rgba(236, 72, 153, 0.5) !important;
    background: rgba(236, 72, 153, 0.1) !important;
    text-decoration: none;
}

body.light-theme .idx-alert-vip-locked .idx-alert-title { color: #525252 !important; }
body.light-theme .idx-action-vip-locked {
    color: #6b7280 !important;
    border-color: #d4d4d4 !important;
    background: rgba(115, 115, 115, 0.04) !important;
}
body.light-theme .idx-action-vip-locked:hover {
    color: #be185d !important;
    border-color: rgba(190, 24, 93, 0.5) !important;
    background: rgba(190, 24, 93, 0.08) !important;
}

/* Kill legacy telegram title red dot (noisy now) */
.idx-alert-telegram .idx-alert-title::after {
    display: none !important;
}

/* =======================================================
   NAVIGATION - Dramatic Redesign
   Remove cell separators, add top glowing gold bar,
   bottom animated underline, soft gradient bg on hover,
   monospace typography. Dropdown gets gold top accent
   and left stripe reveal on items.
   ======================================================= */

.nav {
    align-items: stretch;
    height: 100%;
    gap: 0;
}

.nav-link {
    border-left: none !important;
    border-right: none !important;
    padding: 9px 14px !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    position: relative;
    color: var(--text-3) !important;
    font-family: 'Anonymous Pro', monospace !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase;
    transition: color 0.22s ease, background 0.22s ease !important;
    background: transparent;
}

.nav-link:last-child {
    border-right: none !important;
}

/* Top 2px glowing gold bar - slides in on hover/active */
.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(212, 160, 23, 0.65);
    transition: width 0.28s ease;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
}

/* Bottom 1px thinner underline - staggers in after top bar */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width 0.28s ease 0.05s;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
}

.nav-link:hover::before,
.nav-link.active::before {
    width: 60%;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 60%;
}

.nav-link:hover {
    color: var(--gold) !important;
    background: linear-gradient(180deg, rgba(212, 160, 23, 0.1) 0%, rgba(212, 160, 23, 0) 100%) !important;
}

.nav-link.active {
    color: var(--gold) !important;
    background: linear-gradient(180deg, rgba(212, 160, 23, 0.14) 0%, rgba(212, 160, 23, 0.02) 100%) !important;
}

.nav-drop {
    cursor: pointer;
}

/* Dropdown menu */
.nav-menu {
    border: 1px solid var(--border) !important;
    border-top: 2px solid var(--gold) !important;
    background: var(--bg-2) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    min-width: 190px;
    padding: 2px 0;
}

.nav-menu-item {
    position: relative;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--border);
    font-family: 'Anonymous Pro', monospace !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase;
    color: var(--text-2) !important;
    transition: background 0.18s ease, color 0.18s ease, padding-left 0.2s ease !important;
    overflow: hidden;
    display: block;
}

.nav-menu-item:last-child {
    border-bottom: none;
}

.nav-menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--gold);
    transition: width 0.2s ease;
    pointer-events: none;
}

.nav-menu-item:hover::before {
    width: 2px;
}

.nav-menu-item:hover {
    color: var(--gold) !important;
    background: var(--bg-3) !important;
    padding-left: 18px !important;
}

/* Light theme - nav */
body.light-theme .nav-link::before,
body.light-theme .nav-link::after {
    background: #b45309;
    box-shadow: 0 0 8px rgba(180, 83, 9, 0.5);
}

body.light-theme .nav-link:hover,
body.light-theme .nav-link.active {
    color: #b45309 !important;
    background: linear-gradient(180deg, rgba(180, 83, 9, 0.08) 0%, rgba(180, 83, 9, 0) 100%) !important;
}

body.light-theme .nav-menu {
    border-top-color: #b45309 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .nav-menu-item::before {
    background: #b45309;
}

body.light-theme .nav-menu-item:hover {
    color: #b45309 !important;
}

/* Responsive - nav */
@media (max-width: 1024px) {
    .nav-link::before,
    .nav-link::after {
        display: none;
    }
}

/* Reduce motion - nav/alerts */
@media (prefers-reduced-motion: reduce) {
    .nav-link::before,
    .nav-link::after,
    .nav-link,
    .nav-menu-item,
    .nav-menu-item::before,
    .idx-alert-action {
        transition: none !important;
    }
}

/* =======================================================
   AUTH PAGES - DESIGN LANGUAGE OVERRIDES
   Login / Register / 2FA / UniqueCode + Recovery Modal
   Each page uses an accent variant: gold / green / red /
   amber. Card gets corner-fade accent + 2px left stripe,
   pulsing dot in head, monospace mono titles, // sub.
   ======================================================= */

/* Card base - corner accent + left stripe (gold default) */
.auth-card {
    position: relative;
    overflow: hidden;
    border-left: 2px solid var(--gold) !important;
    padding: 22px 22px 24px !important;
}

.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold) 0%, rgba(212, 160, 23, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

/* Accent variants */
.auth-card.auth-accent-gold { border-left-color: var(--gold) !important; }

.auth-card.auth-accent-green { border-left-color: #10b981 !important; }
.auth-card.auth-accent-green::before {
    background: linear-gradient(90deg, #10b981 0%, rgba(16, 185, 129, 0) 100%);
}

.auth-card.auth-accent-red { border-left-color: #ef4444 !important; }
.auth-card.auth-accent-red::before {
    background: linear-gradient(90deg, #ef4444 0%, rgba(239, 68, 68, 0) 100%);
}

.auth-card.auth-accent-amber { border-left-color: #f59e0b !important; }
.auth-card.auth-accent-amber::before {
    background: linear-gradient(90deg, #f59e0b 0%, rgba(245, 158, 11, 0) 100%);
}

/* Head: pulsing dot + mono title + // sub */
.auth-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 4px;
    flex-wrap: wrap;
    min-width: 0;
}

.auth-head-dot {
    width: 7px;
    height: 7px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.55);
    animation: auth-pulse-gold 2s ease-out infinite;
    flex-shrink: 0;
}

.auth-card.auth-accent-green .auth-head-dot {
    background: #10b981;
    animation-name: auth-pulse-green;
}
.auth-card.auth-accent-red .auth-head-dot {
    background: #ef4444;
    animation-name: auth-pulse-red;
}
.auth-card.auth-accent-amber .auth-head-dot {
    background: #f59e0b;
    animation-name: auth-pulse-amber;
}

@keyframes auth-pulse-gold {
    0%   { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.6); }
    70%  { box-shadow: 0 0 0 7px rgba(212, 160, 23, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0); }
}
@keyframes auth-pulse-green {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes auth-pulse-red {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@keyframes auth-pulse-amber {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.auth-head-title {
    margin: 0;
    font-family: 'Anonymous Pro', monospace;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--gold);
    line-height: 1.3;
}

.auth-card.auth-accent-green .auth-head-title { color: #10b981; }
.auth-card.auth-accent-red .auth-head-title { color: #f87171; }
.auth-card.auth-accent-amber .auth-head-title { color: #f59e0b; }

body.light-theme .auth-card.auth-accent-green .auth-head-title { color: #059669; }
body.light-theme .auth-card.auth-accent-red .auth-head-title { color: #dc2626; }
body.light-theme .auth-card.auth-accent-amber .auth-head-title { color: #d97706; }

.auth-head-sub {
    color: var(--text-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.65;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
}

/* Subtitle */
.auth-subtitle {
    font-size: 11px !important;
    color: var(--text-3) !important;
    margin-bottom: 20px !important;
    margin-top: 6px;
    line-height: 1.55;
}

/* Legacy h1.auth-title - mono fallback for any remaining usage */
.auth-title {
    font-family: 'Anonymous Pro', monospace;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

/* Field labels - mono */
.auth-label {
    font-family: 'Anonymous Pro', monospace !important;
    letter-spacing: 1.2px !important;
    font-size: 9.5px !important;
    color: var(--text-3) !important;
    text-transform: uppercase;
}

/* Input - flat with accent focus */
.auth-input {
    border-radius: 0 !important;
    background: var(--bg-2);
    border: 1px solid var(--border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 0.6px;
}

.auth-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.15);
    background: var(--bg-1);
}

.auth-card.auth-accent-green .auth-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}
.auth-card.auth-accent-red .auth-input:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}
.auth-card.auth-accent-amber .auth-input:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}

/* Auth primary button - sweeping shine on hover */
.auth-btn {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 0 !important;
    font-family: 'Anonymous Pro', monospace !important;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 700;
    height: 42px !important;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.05s ease;
    width: 100%;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px !important;
    text-decoration: none;
}

.auth-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 1;
}

.auth-btn:hover::before {
    left: 100%;
}

.auth-btn:hover {
    filter: brightness(1.08);
    text-decoration: none;
}

.auth-btn:active {
    transform: translateY(1px);
}

.auth-btn > * {
    position: relative;
    z-index: 2;
}

/* Variant button colors */
.auth-card.auth-accent-green .auth-btn {
    background: #10b981;
    color: #fff;
}
.auth-card.auth-accent-red .auth-btn {
    background: #ef4444;
    color: #fff;
}
.auth-card.auth-accent-amber .auth-btn {
    background: #f59e0b;
    color: #000;
}

/* Auth ghost button (secondary action) */
.auth-btn-ghost {
    width: 100%;
    height: 38px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--border);
    border-left: 2px solid var(--text-3);
    color: var(--text-2);
    font-family: 'Anonymous Pro', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 10.5px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    border-radius: 0;
}

.auth-btn-ghost-icon {
    font-size: 12px;
    flex-shrink: 0;
    color: #f59e0b;
}

.auth-btn-ghost-arrow {
    margin-left: auto;
    font-size: 13px;
    transition: transform 0.2s ease;
}

.auth-btn-ghost:hover {
    color: var(--gold);
    border-color: rgba(212, 160, 23, 0.5);
    border-left-color: var(--gold);
    background: rgba(212, 160, 23, 0.06);
    text-decoration: none;
}

.auth-btn-ghost:hover .auth-btn-ghost-arrow {
    transform: translateX(3px);
}

.auth-card.auth-accent-green .auth-btn-ghost:hover {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.45);
    border-left-color: #10b981;
    background: rgba(16, 185, 129, 0.06);
}
.auth-card.auth-accent-red .auth-btn-ghost:hover {
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.45);
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}
.auth-card.auth-accent-amber .auth-btn-ghost:hover {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.45);
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.06);
}

/* "Lost Access" specifically - amber stripe to draw attention */
#forgot-access-btn {
    border-left-color: #f59e0b !important;
}
#forgot-access-btn:hover {
    color: #f59e0b !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    background: rgba(245, 158, 11, 0.06) !important;
}

/* Auth alerts */
.auth-alert {
    border-radius: 0 !important;
    border-left-width: 2px !important;
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 0.6px;
    font-size: 10.5px !important;
    padding: 9px 12px !important;
}

/* Auth captcha */
.auth-captcha {
    border-radius: 0 !important;
    border-left: 2px solid var(--border) !important;
}

.auth-captcha-hint {
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 0.5px;
    font-size: 11px !important;
    text-transform: uppercase;
}

.auth-captcha-help {
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 0.5px;
}

.auth-captcha-refresh {
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 0;
}

/* Footer */
.auth-footer {
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 0.5px;
    font-size: 10.5px !important;
}

.auth-footer a {
    letter-spacing: 1px;
}

/* Auth Warning Banner refinements */
.auth-warn {
    border-radius: 0 !important;
    border-left: 2px solid #f59e0b !important;
    padding: 10px 12px !important;
}

.auth-warn-text {
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 0.4px;
}

/* Auth Info Box (used on 2fa page) */
.auth-info-box {
    border-radius: 0 !important;
    border: 1px solid var(--border) !important;
    border-left: 2px solid var(--border) !important;
    background: var(--bg-2);
    padding: 10px 12px !important;
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 0.5px;
    font-size: 10.5px !important;
    color: var(--text-2) !important;
    margin-bottom: 16px !important;
}

.auth-card.auth-accent-red .auth-info-box {
    border-left-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05) !important;
}
.auth-card.auth-accent-green .auth-info-box {
    border-left-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.05) !important;
}
.auth-card.auth-accent-amber .auth-info-box {
    border-left-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.05) !important;
}

/* =======================================================
   RECOVERY MODAL - new style (amber accent)
   ======================================================= */
.modal-box {
    position: relative;
    border-radius: 0 !important;
    overflow: hidden;
    border-left: 2px solid var(--gold) !important;
    padding: 18px 18px 16px !important;
}

.modal-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold) 0%, rgba(212, 160, 23, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

.modal-box.modal-accent-amber {
    border-left-color: #f59e0b !important;
}
.modal-box.modal-accent-amber::before {
    background: linear-gradient(90deg, #f59e0b 0%, rgba(245, 158, 11, 0) 100%);
}

.modal-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    min-width: 0;
}

.modal-title-dot {
    width: 7px;
    height: 7px;
    background: #f59e0b;
    border-radius: 50%;
    animation: auth-pulse-amber 2s ease-out infinite;
    flex-shrink: 0;
}

.modal-title {
    font-family: 'Anonymous Pro', monospace;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: #f59e0b !important;
    font-size: 12px !important;
}

body.light-theme .modal-title {
    color: #d97706 !important;
}

.modal-title-sub {
    color: var(--text-3);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.65;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
}

.modal-close {
    border-radius: 0 !important;
}

.modal-text {
    font-size: 11px !important;
    line-height: 1.55 !important;
    color: var(--text-2) !important;
}

.modal-steps {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}

.modal-step {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 12px !important;
    background: var(--bg-2);
    border: 1px solid var(--border) !important;
    border-left: 2px solid rgba(245, 158, 11, 0.5) !important;
    transition: border-left-color 0.2s ease, background 0.2s ease;
    margin-bottom: 0 !important;
    border-radius: 0;
}

.modal-step:hover {
    border-left-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.04);
}

.modal-step-num {
    font-family: 'Anonymous Pro', monospace;
    font-weight: 700;
    color: #f59e0b !important;
    font-size: 11px;
    letter-spacing: 1px;
    min-width: 22px;
    flex-shrink: 0;
}

.modal-step > span:last-child {
    font-size: 11px;
    color: var(--text-2);
    line-height: 1.4;
}

/* Modal warning */
.modal-warning {
    border-radius: 0;
    border-left-width: 2px !important;
    border-left-color: #ef4444 !important;
    padding: 10px 12px !important;
}

.modal-warning-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 1.5px;
    font-size: 10.5px !important;
}

.modal-warning-dot {
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    animation: auth-pulse-red 2s ease-out infinite;
    flex-shrink: 0;
}

.modal-warning-text {
    font-size: 10.5px !important;
    line-height: 1.5 !important;
}

/* =======================================================
   UNIQUE CODE PAGE - additional refinements
   ======================================================= */
.uc-code-wrap {
    margin-bottom: 14px;
    margin-top: 4px;
}

.uc-code-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
    font-family: 'Anonymous Pro', monospace;
}

.auth-card.auth-accent-red .uc-code-label { color: #f87171; }

.uc-code-label-dot {
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    animation: auth-pulse-gold 2s ease-out infinite;
    flex-shrink: 0;
}

.uc-code-input {
    height: 46px !important;
    text-align: center;
    font-family: 'Anonymous Pro', monospace !important;
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: 2px !important;
    color: var(--gold) !important;
    background: var(--bg-2) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.1);
}

.uc-code-input:focus {
    box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.25) !important;
}

/* uc-warning - amber */
.uc-warning {
    border-radius: 0;
    border-left: 2px solid #f59e0b !important;
    background: rgba(245, 158, 11, 0.06) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    padding: 10px 12px !important;
    margin-top: 4px;
    margin-bottom: 14px;
}

.uc-warning-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #f59e0b !important;
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 1.5px;
    font-size: 10.5px !important;
}

.uc-warning-dot {
    width: 6px;
    height: 6px;
    background: #f59e0b;
    border-radius: 50%;
    animation: auth-pulse-amber 2s ease-out infinite;
    flex-shrink: 0;
}

.uc-warning-text {
    color: var(--text-2) !important;
    font-size: 10.5px !important;
    line-height: 1.5 !important;
    margin-top: 4px;
}

body.light-theme .uc-warning {
    background: rgba(245, 158, 11, 0.08) !important;
}

body.light-theme .uc-warning-title {
    color: #d97706 !important;
}

.uc-btn-full {
    width: 100% !important;
    margin-bottom: 8px;
}

/* Reduce motion - auth */
@media (prefers-reduced-motion: reduce) {
    .auth-head-dot,
    .modal-title-dot,
    .modal-warning-dot,
    .uc-warning-dot,
    .uc-code-label-dot {
        animation: none !important;
    }
    .auth-btn::before,
    .auth-btn-ghost,
    .auth-input {
        transition: none !important;
    }
}

/* Mobile auth tweaks */
@media (max-width: 480px) {
    .auth-card { padding: 18px 16px 20px !important; }
    .auth-head-title { font-size: 13px; letter-spacing: 1.2px; }
    .auth-head-sub { font-size: 9.5px; }
    .auth-btn { height: 40px !important; }
    .auth-btn-ghost { height: 36px; font-size: 10px; }
    .modal-step { padding: 8px 10px !important; }
}

/* =======================================================
   FRESH P2P DROPS BAR — index page section under live-orders
   Lime/chartreuse accent (#a3e635) - distinct from gold,
   emerald, red, purple, pink, cyan blocks already on the page.
   Corner-fade + 2px left stripe, pulsing dot, mono uppercase
   head, responsive auto-fill grid, dark/light theme support.
   ======================================================= */
.p2p-fresh-bar {
    position: relative;
    margin: 0 0 14px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-left: 2px solid #a3e635;
    overflow: hidden;
}

.p2p-fresh-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 2px;
    background: linear-gradient(90deg, #a3e635 0%, rgba(163, 230, 53, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

.p2p-fresh-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(163, 230, 53, 0.04);
    flex-wrap: wrap;
}

.p2p-fresh-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    min-width: 0;
}

.p2p-fresh-pulse {
    width: 7px;
    height: 7px;
    background: #a3e635;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(163, 230, 53, 0.55);
    animation: p2pf-pulse 2s ease-out infinite;
    flex-shrink: 0;
}

@keyframes p2pf-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(163, 230, 53, 0.6); }
    70%  { box-shadow: 0 0 0 7px rgba(163, 230, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(163, 230, 53, 0); }
}

.p2pf-title {
    font-family: 'Anonymous Pro', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #a3e635;
}

.p2pf-sub {
    color: var(--text-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.7;
    font-family: 'Anonymous Pro', monospace;
}

.p2pf-count {
    font-size: 10px;
    color: #a3e635;
    padding: 2px 7px;
    border: 1px solid rgba(163, 230, 53, 0.35);
    background: rgba(163, 230, 53, 0.08);
    font-weight: 700;
    font-family: 'Anonymous Pro', monospace;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

.p2pf-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-3);
    font-family: 'Anonymous Pro', monospace;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.p2pf-all:hover {
    color: #a3e635;
    text-decoration: none;
}

.p2pf-all-arrow {
    transition: transform 0.2s ease;
    font-size: 13px;
}

.p2pf-all:hover .p2pf-all-arrow {
    transform: translateX(3px);
}

.p2pf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: 10px;
    padding: 12px;
}

.p2pf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 2px solid rgba(163, 230, 53, 0.4);
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.05s ease;
    min-height: 110px;
    overflow: hidden;
}

.p2pf-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 2px;
    background: linear-gradient(90deg, #a3e635 0%, rgba(163, 230, 53, 0) 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.p2pf-card:hover {
    border-color: rgba(163, 230, 53, 0.5);
    border-left-color: #a3e635;
    background: rgba(163, 230, 53, 0.04);
    text-decoration: none;
    color: inherit;
}

.p2pf-card:hover::before {
    opacity: 1;
}

.p2pf-card:active {
    transform: translateY(1px);
}

.p2pf-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}

.p2pf-tag {
    font-family: 'Anonymous Pro', monospace;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid rgba(163, 230, 53, 0.4);
    background: rgba(163, 230, 53, 0.1);
    color: #a3e635;
    flex-shrink: 0;
    line-height: 1;
}

.p2pf-cat {
    font-family: 'Anonymous Pro', monospace;
    font-size: 9px;
    color: var(--text-3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.p2pf-new {
    font-family: 'Anonymous Pro', monospace;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 5px;
    background: #ec4899;
    color: #fff;
    flex-shrink: 0;
    line-height: 1;
    animation: p2pf-new-blink 2s ease-in-out infinite;
}

@keyframes p2pf-new-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

.p2pf-time {
    font-family: 'Anonymous Pro', monospace;
    font-size: 9px;
    color: var(--text-3);
    letter-spacing: 0.5px;
    flex-shrink: 0;
    margin-left: auto;
}

.p2pf-title-line {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-1);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    word-break: break-word;
}

.p2pf-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0 8px;
    opacity: 0.6;
}

.p2pf-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.p2pf-price {
    font-family: 'Anonymous Pro', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #a3e635;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.p2pf-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Anonymous Pro', monospace;
    font-size: 9.5px;
    color: var(--text-3);
    letter-spacing: 0.4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

.p2pf-seller {
    color: var(--text-2);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90px;
}

.p2pf-rating {
    color: var(--gold);
    font-size: 9.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.p2pf-stock {
    color: var(--text-2);
    font-weight: 700;
    flex-shrink: 0;
}

/* Light theme overrides — lime-700 #4d7c0f for proper contrast on white */
body.light-theme .p2p-fresh-head {
    background: rgba(101, 163, 13, 0.06);
}

body.light-theme .p2pf-title,
body.light-theme .p2pf-count,
body.light-theme .p2pf-tag,
body.light-theme .p2pf-price {
    color: #4d7c0f;
}

body.light-theme .p2pf-tag {
    border-color: rgba(77, 124, 15, 0.4);
    background: rgba(101, 163, 13, 0.1);
}

body.light-theme .p2pf-count {
    border-color: rgba(77, 124, 15, 0.4);
    background: rgba(101, 163, 13, 0.08);
}

body.light-theme .p2pf-card:hover {
    border-color: rgba(77, 124, 15, 0.5);
    border-left-color: #4d7c0f;
    background: rgba(101, 163, 13, 0.05);
}

body.light-theme .p2pf-card::before {
    background: linear-gradient(90deg, #4d7c0f 0%, rgba(77, 124, 15, 0) 100%);
}

body.light-theme .p2p-fresh-bar {
    border-left-color: #4d7c0f;
}

body.light-theme .p2p-fresh-bar::before {
    background: linear-gradient(90deg, #4d7c0f 0%, rgba(77, 124, 15, 0) 100%);
}

body.light-theme .p2p-fresh-pulse {
    background: #4d7c0f;
    box-shadow: 0 0 0 0 rgba(77, 124, 15, 0.55);
}

body.light-theme .p2pf-all:hover {
    color: #4d7c0f;
}

body.light-theme .p2pf-new {
    background: #be185d;
    color: #fff;
}

/* Tablet */
@media (max-width: 900px) {
    .p2pf-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 8px;
        padding: 10px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .p2p-fresh-head {
        padding: 9px 12px;
    }
    .p2pf-title { font-size: 11.5px; letter-spacing: 1.2px; }
    .p2pf-sub { font-size: 9.5px; }
    .p2pf-all { font-size: 9.5px; letter-spacing: 1px; }
    .p2pf-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px;
    }
    .p2pf-card {
        min-height: 105px;
        padding: 9px 10px;
    }
    .p2pf-title-line { font-size: 11.5px; }
    .p2pf-price { font-size: 13px; }
    .p2pf-card-top { gap: 5px; }
    .p2pf-cat { font-size: 8.5px; }
    .p2pf-time { font-size: 8.5px; }
}

@media (max-width: 380px) {
    .p2pf-grid {
        grid-template-columns: 1fr;
    }
    .p2pf-card {
        min-height: 95px;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .p2p-fresh-pulse,
    .p2pf-new {
        animation: none !important;
    }
    .p2pf-card,
    .p2pf-all,
    .p2pf-all-arrow,
    .p2pf-card::before {
        transition: none !important;
    }
}

/* =======================================================
   P2P SELLER BALANCE BUTTON — header nav
   Transparent background + gold outline, with shimmering
   gold text gradient applied only to the dollar amount.
   Distinct from green .btn.balance (main wallet) and
   solid .btn.gold (Exit). Shown only for is_seller users
   with seller_balance > 0.
   ======================================================= */
.btn.balance-seller {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid #d4a017;
    color: #fbbf24;
    font-weight: 700;
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 0.3px;
    text-decoration: none;
    box-shadow: 0 0 6px rgba(212, 160, 23, 0.18);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.06s ease;
}

.btn.balance-seller .bs-icon {
    color: #fbbf24;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}

.btn.balance-seller .bs-text {
    background: linear-gradient(110deg,
        #b45309 0%,
        #d4a017 18%,
        #fbbf24 36%,
        #fef08a 50%,
        #fbbf24 64%,
        #d4a017 82%,
        #b45309 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: balance-seller-shimmer 3.5s linear infinite;
}

.btn.balance-seller:hover {
    border-color: #fbbf24;
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.45);
    text-decoration: none;
    color: #fef08a;
}

.btn.balance-seller:hover .bs-icon {
    color: #fef08a;
}

.btn.balance-seller:active {
    transform: translateY(1px);
}

@keyframes balance-seller-shimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Light theme — darker amber border for contrast on white */
body.light-theme .btn.balance-seller {
    border-color: #b45309;
    color: #b45309;
    box-shadow: 0 0 6px rgba(180, 83, 9, 0.25);
}

body.light-theme .btn.balance-seller .bs-icon {
    color: #b45309;
}

body.light-theme .btn.balance-seller:hover {
    border-color: #92400e;
    box-shadow: 0 0 14px rgba(180, 83, 9, 0.45);
    color: #92400e;
}

body.light-theme .btn.balance-seller:hover .bs-icon {
    color: #92400e;
}

/* Mobile compact */
@media (max-width: 600px) {
    .btn.balance-seller {
        padding: 6px 9px;
        font-size: 12px;
        letter-spacing: 0.2px;
        gap: 4px;
    }
    .btn.balance-seller .bs-icon {
        font-size: 12px;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .btn.balance-seller .bs-text {
        animation: none !important;
        background-position: 50% 50%;
    }
}