/*
 * 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 [DEPRECATED — Moved to p2p.css]
   ======================================== */
/*
.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 [DEPRECATED — Moved to p2p.css]
   ======================================== */
/*
.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-4 { grid-template-columns: repeat(4, 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; }
.stats-vault.vault-6 {
    grid-template-columns: repeat(6, 1fr);
}
.stats-vault.vault-6 .vault-stat {
    padding: 10px 6px 8px;
}
.stats-vault.vault-6 .vault-val {
    font-size: 20px;
}
.stats-vault.vault-6 .vault-label {
    font-size: 9px;
    letter-spacing: 0.5px;
}

@media (max-width: 1200px) {
    .stats-vault.vault-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 640px) {
    .stats-vault.vault-6 {
        grid-template-columns: repeat(2, 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; }
}

.idx-v-tag-inactive {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* -- 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-tag-inactive {
    background: rgba(239, 68, 68, 0.06);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.25);
}

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: var(--news-color);
    padding: 2px 7px;
    border: 1px solid rgba(var(--news-color-rgb), 0.28);
    background: rgba(var(--news-color-rgb), 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: var(--news-color);
    background: rgba(var(--news-color-rgb), 0.04);
}

.snn-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid rgba(var(--news-color-rgb), 0.18);
    background: linear-gradient(180deg, transparent 0%, rgba(var(--news-color-rgb), 0.05) 100%);
    color: var(--news-color);
    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(var(--news-color-rgb), 0.22), transparent);
    transition: left 0.7s ease;
    pointer-events: none;
}

.snn-footer:hover {
    color: #fff;
    background: linear-gradient(180deg, transparent 0%, rgba(var(--news-color-rgb), 0.14) 100%);
    border-top-color: var(--news-color);
    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(var(--news-color-rgb), 0.04);
    border-bottom-color: rgba(var(--news-color-rgb), 0.2);
    border-left-color: var(--news-color);
}

body.light-theme .snn-title {
    color: var(--news-color);
}

body.light-theme .snn-title:hover {
    color: var(--news-color-dim);
}

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

body.light-theme .snn-count {
    color: var(--news-color);
    background: rgba(var(--news-color-rgb), 0.06);
    border-color: rgba(var(--news-color-rgb), 0.28);
}

body.light-theme .snn-list .news:hover {
    background: rgba(var(--news-color-rgb), 0.05);
    border-left-color: var(--news-color);
}

body.light-theme .snn-footer {
    color: var(--news-color);
    border-top-color: rgba(var(--news-color-rgb), 0.2);
    background: linear-gradient(180deg, transparent 0%, rgba(var(--news-color-rgb), 0.06) 100%);
}

body.light-theme .snn-footer:hover {
    color: var(--news-color-dim);
    background: linear-gradient(180deg, transparent 0%, rgba(var(--news-color-rgb), 0.14) 100%);
    border-top-color: var(--news-color);
}

body.light-theme .snn-footer::before {
    background: linear-gradient(90deg, transparent, rgba(var(--news-color-rgb), 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;
    }
}

/* ========================================
   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, var(--news-color) 0%, rgba(var(--news-color-rgb), 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: 80px 1fr 100px 50px 55px 70px 85px;
    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: 80px 1fr 100px 50px 55px 70px 85px;
    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 [DEPRECATED — Moved to p2p.css]
   ======================================== */
/*
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.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: modal-fade-in 0.2s ease-out;
}

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

.modal-box {
    background: #0d0d0d !important;
    border: 2px solid var(--gold) !important;
    border-radius: 0 !important;
    padding: 24px !important;
    width: 100%;
    max-width: 440px !important;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    font-family: 'Anonymous Pro', monospace !important;
    box-shadow: 0 0 30px rgba(212, 160, 23, 0.2) !important;
    animation: modal-slide-up 0.2s ease-out;
}

/* Subtle dot matrix texture on modals */
.modal-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(212, 160, 23, 0.035) 1.5px, transparent 1.5px);
    background-size: 8px 8px;
    pointer-events: none;
    z-index: 0;
}

.modal-box > * {
    position: relative;
    z-index: 1;
}

.modal-box.modal-accent-amber {
    border-color: #f59e0b !important;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.25) !important;
}

.modal-box.modal-accent-amber::after {
    background-image: radial-gradient(rgba(245, 158, 11, 0.04) 1.5px, transparent 1.5px);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px !important;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 12px;
    background: rgba(212, 160, 23, 0.04);
    margin-top: -24px !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 14px !important;
    border-radius: 0 !important;
}

.modal-box.modal-accent-amber .modal-header {
    border-bottom-color: #f59e0b;
    background: rgba(245, 158, 11, 0.04);
}

.modal-title {
    font-size: 13px !important;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Anonymous Pro', monospace !important;
    margin: 0 !important;
}

.modal-box.modal-accent-amber .modal-title {
    color: #f59e0b !important;
}

.modal-close {
    background: none !important;
    border: none !important;
    color: var(--text-3) !important;
    width: auto !important;
    height: auto !important;
    cursor: pointer;
    font-size: 18px !important;
    display: inline-block !important;
    line-height: 1 !important;
    transition: color 0.2s, text-shadow 0.2s;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.modal-close:hover {
    color: #fff !important;
    text-shadow: 0 0 8px var(--gold);
}

.modal-box.modal-accent-amber .modal-close:hover {
    text-shadow: 0 0 8px #f59e0b;
}

.modal-text {
    font-size: 12px !important;
    color: var(--text-2) !important;
    margin-bottom: 14px;
    line-height: 1.6 !important;
}

.modal-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.modal-step {
    padding: 10px 14px !important;
    background: #050505 !important;
    border: 1px solid #1a1a1a !important;
    border-left: 3px solid rgba(245, 158, 11, 0.4) !important;
    margin-bottom: 0 !important;
    font-size: 11px !important;
    color: var(--text) !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    transition: border-left-color 0.2s, background 0.2s;
}

.modal-step:hover {
    border-left-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.03) !important;
}

.modal-step-num {
    color: #f59e0b !important;
    font-weight: 700;
    font-family: 'Anonymous Pro', monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.5px;
}

.modal-warning {
    background: rgba(239, 68, 68, 0.06) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    border-left: 3px solid #ef4444 !important;
    padding: 12px 16px !important;
    text-align: left !important;
    margin-top: 16px;
    border-radius: 0 !important;
}

.modal-warning-title {
    font-size: 11px !important;
    font-weight: 700;
    color: #ef4444 !important;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-warning-text {
    font-size: 11px !important;
    color: rgba(239, 68, 68, 0.8) !important;
    line-height: 1.5 !important;
}

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

@keyframes modal-slide-up {
    from { transform: translateY(-15px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

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

body.light-theme .modal-box {
    background: #ffffff !important;
    border-color: #b45309 !important;
    box-shadow: 0 10px 25px rgba(180, 83, 9, 0.15) !important;
}

body.light-theme .modal-box.modal-accent-amber {
    border-color: #d97706 !important;
    box-shadow: 0 10px 25px rgba(217, 119, 6, 0.15) !important;
}

body.light-theme .modal-box .modal-header {
    border-bottom-color: #b45309;
    background: rgba(180, 83, 9, 0.04);
}

body.light-theme .modal-box.modal-accent-amber .modal-header {
    border-bottom-color: #d97706;
    background: rgba(217, 119, 6, 0.04);
}

body.light-theme .modal-title {
    color: #b45309 !important;
}

body.light-theme .modal-box.modal-accent-amber .modal-title {
    color: #d97706 !important;
}

body.light-theme .modal-close {
    color: #6b7280 !important;
}

body.light-theme .modal-close:hover {
    color: #111827 !important;
    text-shadow: 0 0 8px #b45309;
}

body.light-theme .modal-step {
    background: #fafafa !important;
    border-color: #e5e7eb !important;
    border-left-color: rgba(217, 119, 6, 0.4) !important;
}

body.light-theme .modal-step:hover {
    border-left-color: #d97706 !important;
    background: rgba(217, 119, 6, 0.02) !important;
}

body.light-theme .modal-step-num {
    color: #d97706 !important;
}

body.light-theme .modal-warning {
    background: rgba(220, 38, 38, 0.04) !important;
    border-color: rgba(220, 38, 38, 0.1) !important;
    border-left-color: #dc2626 !important;
}

body.light-theme .modal-warning-title,
body.light-theme .modal-warning-text {
    color: #dc2626 !important;
}

/* Modal footer buttons layout & styling inside general modal-box */
.modal-box .modal-footer {
    padding: 14px 0 0 !important;
    margin-top: 20px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal-box .modal-footer button,
.modal-box .modal-footer .btn {
    font-family: 'Anonymous Pro', monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    height: auto !important;
    line-height: 1.5 !important;
}

.modal-box .modal-footer button:not(.btn-danger):not(.api-btn-red),
.modal-box .modal-footer .btn:not(.btn-danger) {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #a3a3a3 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.modal-box .modal-footer button:not(.btn-danger):not(.api-btn-red):hover,
.modal-box .modal-footer .btn:not(.btn-danger):hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.modal-box .modal-footer button.btn-danger,
.modal-box .modal-footer .btn.btn-danger {
    background: #ef4444 !important;
    color: #fff !important;
    box-shadow: none !important;
}

.modal-box .modal-footer button.btn-danger:hover,
.modal-box .modal-footer .btn.btn-danger:hover {
    background: #fff !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.45) !important;
}

/* Light Theme overrides for modal footer buttons */
body.light-theme .modal-box .modal-footer {
    border-top-color: #f3f4f6;
}

body.light-theme .modal-box .modal-footer button:not(.btn-danger):not(.api-btn-red),
body.light-theme .modal-box .modal-footer .btn:not(.btn-danger) {
    background: #f3f4f6 !important;
    color: #4b5563 !important;
    border: 1px solid #e5e7eb !important;
}

body.light-theme .modal-box .modal-footer button:not(.btn-danger):not(.api-btn-red):hover,
body.light-theme .modal-box .modal-footer .btn:not(.btn-danger):hover {
    background: #e5e7eb !important;
    color: #1a1a1a !important;
}

body.light-theme .modal-box .modal-footer button.btn-danger,
body.light-theme .modal-box .modal-footer .btn.btn-danger {
    background: #dc2626 !important;
    color: #fff !important;
}

body.light-theme .modal-box .modal-footer button.btn-danger:hover,
body.light-theme .modal-box .modal-footer .btn.btn-danger:hover {
    background: #b91c1c !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2) !important;
}

/* ========================================
   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;
}

/* Index Tiles - compact 2-column alerts grid */
.idx-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 12px;
}
.idx-tile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-left: 2px solid var(--border);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.2s;
    min-height: 36px;
}
.idx-tile-icon {
    font-size: 13px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}
.idx-tile-text {
    font-size: 11px;
    color: var(--text-2);
    line-height: 1.3;
    flex: 1;
}
.idx-tile-text a {
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.15s;
}
.idx-tile-text a:hover { color: var(--gold); }
.idx-tile-text strong { color: var(--text); }
.idx-tile-gold { color: var(--gold) !important; }
.idx-tile-arrow {
    font-size: 11px;
    color: var(--text-3);
    flex-shrink: 0;
    transition: color 0.15s;
}
a.idx-tile:hover .idx-tile-arrow { color: var(--gold); }

/* Mirror links tile - multi-item with dividers */
.idx-tile-links {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    background: linear-gradient(135deg, var(--bg-1) 0%, rgba(212, 160, 23, 0.03) 100%);
    border: 1px solid rgba(212, 160, 23, 0.25);
    border-left: 2px solid var(--gold);
    box-shadow: 0 0 8px rgba(212, 160, 23, 0.08);
}
.idx-tile-link-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    flex: 1;
    transition: background 0.2s;
}
.idx-tile-link-item:hover {
    background: rgba(212, 160, 23, 0.06);
}
.idx-tile-divider {
    width: 1px;
    height: 20px;
    background: linear-gradient(180deg, transparent, rgba(212, 160, 23, 0.4), transparent);
    flex-shrink: 0;
}
.idx-tile-links .idx-tile-icon {
    font-size: 14px;
    text-shadow: 0 0 6px rgba(212, 160, 23, 0.5);
    animation: idx-icon-glow 3s ease-in-out infinite;
}
@keyframes idx-icon-glow {
    0%, 100% { text-shadow: 0 0 6px rgba(212, 160, 23, 0.4); }
    50% { text-shadow: 0 0 12px rgba(212, 160, 23, 0.8); }
}
.idx-tile-tg-icon {
    font-size: 10px !important;
    font-weight: 900;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 3px;
    padding: 1px 3px;
    text-shadow: 0 0 6px rgba(56, 189, 248, 0.6) !important;
    animation: idx-tg-pulse 2s ease-in-out infinite !important;
}
@keyframes idx-tg-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(56, 189, 248, 0.3); }
    50% { box-shadow: 0 0 10px rgba(56, 189, 248, 0.7); }
}
.idx-tile-rss-icon {
    color: #f59e0b;
    font-size: 15px !important;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.6) !important;
    animation: idx-rss-pulse 2s ease-in-out infinite !important;
}
@keyframes idx-rss-pulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(245, 158, 11, 0.5); }
    50% { opacity: 0.6; text-shadow: 0 0 14px rgba(245, 158, 11, 0.9); }
}

/* Tile variants - left border accent */
.idx-tile-mirror { border-left-color: var(--gold); }
.idx-tile-warn { border-left-color: #ef4444; }
.idx-tile-warn .idx-tile-text { color: var(--text-3); font-size: 10px; }
.idx-tile-premium { border-left-color: #f59e0b; }
.idx-tile-wheel { border-left-color: #a78bfa; }
.idx-tile-security { border-left-color: #3b82f6; }
.idx-tile-bonus { border-left-color: #10b981; }
.idx-tile-bonus .idx-tile-text strong { color: #10b981; }
.idx-tile-referral { border-left-color: #f472b6; }
.idx-tile-referral .idx-tile-text strong { color: #f472b6; }
.idx-tile-vip { border-left-color: #a78bfa; }
.idx-tile-vip-locked { border-left-color: var(--text-3); opacity: 0.7; }
.idx-tile-vip-locked:hover { opacity: 1; }

/* Pulsing dot for important tiles */
.idx-tile-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    animation: idx-dot-pulse 1.5s ease-in-out infinite;
}
.idx-tile-wheel .idx-tile-dot { background: #a78bfa; }
.idx-tile-bonus .idx-tile-dot { background: #10b981; }
@keyframes idx-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.6); }
}

/* Gradient border for promo tiles */
.idx-tile-gradient {
    border-left: none;
    border-image: linear-gradient(180deg, #f59e0b, #ef4444) 1;
    border-image-slice: 1;
    border-left-width: 2px;
    border-left-style: solid;
}

/* Animated glow on hover for all clickable tiles */
a.idx-tile:hover {
    border-left-color: var(--gold);
    background: rgba(212, 160, 23, 0.03);
    box-shadow: 0 0 8px rgba(212, 160, 23, 0.15);
}
a.idx-tile-bonus:hover { box-shadow: 0 0 8px rgba(16, 185, 129, 0.2); }
a.idx-tile-wheel:hover { box-shadow: 0 0 8px rgba(167, 139, 250, 0.2); }
a.idx-tile-referral:hover { box-shadow: 0 0 8px rgba(244, 114, 182, 0.2); }
a.idx-tile-premium:hover { box-shadow: 0 0 8px rgba(245, 158, 11, 0.2); }

/* Blinking icon for urgent tiles */
.idx-tile-blink {
    animation: idx-icon-blink 2s step-start infinite;
}
@keyframes idx-icon-blink {
    0%, 80%, 100% { opacity: 1; }
    40%, 60% { opacity: 0.3; }
}

/* Light theme */
body.light-theme .idx-tile {
    background: #fff;
}
body.light-theme a.idx-tile:hover {
    background: rgba(212, 160, 23, 0.04);
    box-shadow: 0 0 6px rgba(212, 160, 23, 0.1);
}

/* Last tile spans full width if odd count */
.idx-tiles > .idx-tile:last-child:nth-child(odd) {
    grid-column: span 2;
}

/* Responsive: single column on mobile */
@media (max-width: 600px) {
    .idx-tiles { grid-template-columns: 1fr; }
    .idx-tile { padding: 7px 10px; }
    .idx-tiles > .idx-tile:last-child:nth-child(odd) { grid-column: span 1; }
    .idx-tile-links { flex-wrap: wrap; }
    .idx-tile-link-item { flex: 1 1 100%; padding: 6px 12px; }
    .idx-tile-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.3), transparent); }
}

/* ========================================
   idx-panel - Unified tile-style blocks
   ======================================== */
.idx-panel {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-left: 2px solid var(--gold);
    padding: 10px 14px;
    margin-bottom: 8px;
}
.idx-panel-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.idx-panel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    animation: idx-dot-pulse 2s ease-in-out infinite;
}
.idx-panel-dot-fire { background: #ef4444; }
.idx-panel-dot-live { background: #10b981; }
.idx-panel-title {
    font-family: 'Anonymous Pro', monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text);
}
.idx-panel-sub {
    font-family: 'Anonymous Pro', monospace;
    font-size: 10px;
    color: var(--text-3);
}
.idx-panel-badge {
    font-size: 9px;
    font-weight: 700;
    color: var(--gold);
    border: 1px solid rgba(212, 160, 23, 0.3);
    padding: 1px 5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-left: auto;
}
.idx-panel-badge-fire {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    animation: idx-icon-blink 2s step-start infinite;
}
.idx-panel-timer {
    font-family: 'Anonymous Pro', monospace;
    font-size: 11px;
    color: #ef4444;
    font-weight: 700;
    margin-left: 8px;
}

/* Vault grid cells */
.idx-panel-grid {
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}
.idx-panel-cell {
    background: var(--bg-2);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: relative;
    transition: background 0.2s;
}
.idx-panel-cell:hover {
    background: rgba(212, 160, 23, 0.03);
}
.idx-pc-label {
    font-size: 9px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}
.idx-pc-val {
    font-family: 'Anonymous Pro', monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.idx-pc-val-green { color: #10b981; text-shadow: 0 0 8px rgba(16, 185, 129, 0.3); }
.idx-pc-val-muted { color: var(--text-3); font-size: 11px; }
.idx-pc-val-ok { color: #10b981; font-size: 12px; }
.idx-pc-tags {
    display: flex;
    gap: 3px;
    margin-top: 2px;
    flex-wrap: wrap;
    justify-content: center;
}
.idx-pc-tag {
    font-size: 8px;
    font-weight: 700;
    padding: 1px 5px;
    letter-spacing: 0.3px;
}
.idx-pc-tag-gold { color: var(--gold); border: 1px solid rgba(212, 160, 23, 0.3); background: rgba(212, 160, 23, 0.05); }
.idx-pc-tag-vip { color: #a78bfa; border: 1px solid rgba(167, 139, 250, 0.3); background: rgba(167, 139, 250, 0.05); }
.idx-pc-tag-new { color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.05); }
.idx-pc-claim {
    font-family: 'Anonymous Pro', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.4);
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.2s;
    animation: idx-dot-pulse 2s ease-in-out infinite;
}
.idx-pc-claim:hover {
    background: rgba(16, 185, 129, 0.2);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}
.idx-pc-sub {
    font-size: 9px;
    color: var(--text-3);
}
.idx-pc-tag-inactive { color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.05); }

/* Your Stats compact cell */
.idx-pc-stats-cell {
    padding: 6px 10px;
}
.idx-pc-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
}
.idx-pc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    position: relative;
}
/* Thin elegant vertical separators via border */
.idx-pc-stat:not(:nth-child(3n)) {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}
/* Light theme separators */
body.light-theme .idx-pc-stat:not(:nth-child(3n)) {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.idx-pc-stat-l {
    font-size: 8px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.idx-pc-stat-v {
    font-family: 'Anonymous Pro', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
}

/* Vault grid rows */
.idx-panel-grid-top { grid-template-columns: repeat(5, 1fr); }

/* Top Sellers inside panel cell */
.idx-pc-sellers { width: 100%; }
.idx-pc-seller-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    font-size: 10px;
}
.idx-pc-seller-rank {
    color: var(--text-3);
    font-weight: 700;
    font-size: 9px;
    width: 16px;
}
.idx-pc-seller-name {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}
.idx-pc-seller-name:hover { color: var(--gold); }
.idx-pc-seller-badge {
    font-size: 8px;
    font-weight: 700;
}
.idx-pc-seller-rating {
    font-size: 9px;
    color: var(--text-3);
    margin-left: auto;
}
.idx-pc-seller-new {
    color: var(--text-3);
    font-style: italic;
}
.idx-pc-seller-empty { opacity: 0.5; }
.idx-pc-seller-become {
    color: var(--text-3);
    text-decoration: none;
    font-size: 9px;
    transition: color 0.15s;
}
.idx-pc-seller-become:hover { color: var(--gold); }

/* Flash Sale items */
.idx-panel-flash {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, var(--bg-1) 0%, rgba(239, 68, 68, 0.02) 100%);
}
.idx-panel-flash-items {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.idx-flash-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    padding: 10px 14px;
    border: 1px solid rgba(239, 68, 68, 0.2);
    background: var(--bg-2);
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    overflow: hidden;
}
.idx-flash-item:hover {
    border-color: #ef4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.2), inset 0 0 20px rgba(239, 68, 68, 0.02);
    background: rgba(239, 68, 68, 0.03);
}
.idx-flash-name {
    font-size: 11px;
    color: var(--text);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}
.idx-flash-stock {
    font-size: 9px;
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
}
.idx-flash-discount {
    font-size: 10px;
    font-weight: 700;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    padding: 2px 6px;
    flex-shrink: 0;
    white-space: nowrap;
    animation: idx-icon-blink 3s step-start infinite;
}
.idx-flash-price {
    font-family: 'Anonymous Pro', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #10b981;
    text-shadow: 0 0 6px rgba(16, 185, 129, 0.3);
}
.idx-flash-cat {
    font-size: 9px;
    color: var(--text-3);
    white-space: nowrap;
}
.idx-flash-prices {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
.idx-flash-old {
    font-size: 10px;
    color: var(--text-3);
    text-decoration: line-through;
}
.idx-flash-buy {
    font-size: 10px;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
    padding: 2px 8px;
    border: 1px solid rgba(212, 160, 23, 0.3);
    flex-shrink: 0;
    transition: background 0.15s, box-shadow 0.2s;
}
.idx-flash-item:hover .idx-flash-buy {
    background: rgba(212, 160, 23, 0.1);
    box-shadow: 0 0 6px rgba(212, 160, 23, 0.2);
}
.idx-flash-sold {
    opacity: 0.35;
    pointer-events: none;
}
.idx-flash-sold-tag {
    font-size: 9px;
    font-weight: 700;
    color: #ef4444;
    text-transform: uppercase;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 1px 5px;
}

/* Live Orders chips */
.idx-panel-orders { border-left-color: #10b981; }
.idx-panel-orders-track {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.idx-order-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 5px 9px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.2s;
}
.idx-order-chip:hover {
    border-color: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.15);
}
.idx-order-icon { font-size: 12px; }
.idx-order-name {
    font-size: 10px;
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}
.idx-order-time {
    font-size: 9px;
    color: var(--text-3);
    white-space: nowrap;
}
.idx-order-status {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}
.idx-order-mode {
    font-size: 8px;
    color: var(--text-3);
}
.idx-order-mode-auc { color: #a78bfa; }
.idx-order-empty {
    color: var(--text-3);
    font-size: 10px;
    pointer-events: none;
}

/* idx-panel light theme */
body.light-theme .idx-panel { background: #fff; }
body.light-theme .idx-panel-flash { background: linear-gradient(135deg, #fff 0%, rgba(239, 68, 68, 0.02) 100%); }
body.light-theme .idx-panel-cell { background: #f9fafb; }
body.light-theme .idx-panel-cell:hover { background: rgba(212, 160, 23, 0.03); }
body.light-theme .idx-panel-section { background: #f9fafb; }
body.light-theme .idx-flash-item { background: #fafafa; }
body.light-theme .idx-flash-item:hover { background: rgba(239, 68, 68, 0.03); }
body.light-theme .idx-order-chip { background: #f9fafb; }

/* ========================================
   idx-panel-reseller - big highlighted block
   Rose-orange gradient accent (unique on page)
   ======================================== */
a.idx-panel-reseller {
    display: block;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(135deg, var(--bg-1) 0%, rgba(244, 63, 94, 0.07) 50%, rgba(245, 158, 11, 0.05) 100%);
    border: 1px solid rgba(244, 63, 94, 0.3);
    border-left: 3px solid #f43f5e;
    padding: 14px 18px;
    margin-bottom: 12px;
    box-shadow: 0 0 14px rgba(244, 63, 94, 0.1);
    transition: border-color 0.2s, box-shadow 0.25s, transform 0.15s, background 0.2s;
    position: relative;
    overflow: hidden;
}
a.idx-panel-reseller::before {
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(244, 63, 94, 0.14), rgba(245, 158, 11, 0.06) 50%, transparent 70%);
    pointer-events: none;
    transition: opacity 0.25s;
}
a.idx-panel-reseller:hover {
    border-color: rgba(244, 63, 94, 0.6);
    box-shadow: 0 0 26px rgba(244, 63, 94, 0.25);
    background: linear-gradient(135deg, var(--bg-1) 0%, rgba(244, 63, 94, 0.12) 50%, rgba(245, 158, 11, 0.08) 100%);
    transform: translateY(-1px);
}
.idx-panel-reseller .idx-panel-head { margin-bottom: 12px; }
.idx-panel-reseller .idx-panel-dot {
    background: #f43f5e;
    box-shadow: 0 0 6px rgba(244, 63, 94, 0.5);
    animation: idx-dot-pulse 1.8s ease-in-out infinite;
}
.idx-panel-badge-reseller {
    color: #f43f5e !important;
    border: 1px solid rgba(244, 63, 94, 0.4) !important;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.1), rgba(245, 158, 11, 0.06)) !important;
    animation: idx-reseller-badge-glow 2.5s ease-in-out infinite;
}
@keyframes idx-reseller-badge-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(244, 63, 94, 0.25); }
    50% { box-shadow: 0 0 12px rgba(244, 63, 94, 0.55); }
}

/* Reseller body - 3-column layout: text | stats | cta */
.idx-reseller-body {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.idx-reseller-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 320px;
    min-width: 0;
}
.idx-reseller-headline {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.25;
    letter-spacing: -0.2px;
}
.idx-reseller-sub {
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.5;
}

/* Stats inline */
.idx-reseller-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.idx-reseller-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.idx-reseller-stat-val {
    font-family: 'Anonymous Pro', monospace;
    font-size: 18px;
    font-weight: 800;
    background: linear-gradient(135deg, #f43f5e, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.idx-reseller-stat-label {
    font-size: 9px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}
.idx-reseller-stat-sep {
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, transparent, rgba(244, 63, 94, 0.45), transparent);
    flex-shrink: 0;
}
.idx-reseller-hint {
    font-size: 10px;
    color: var(--text-3);
    font-style: italic;
    line-height: 1.4;
    margin-top: 2px;
    opacity: 0.85;
}

/* CTA pill */
.idx-reseller-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f43f5e 0%, #f59e0b 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 10px 18px;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 0 14px rgba(244, 63, 94, 0.3);
    transition: transform 0.15s, box-shadow 0.2s, filter 0.15s;
    letter-spacing: 0.3px;
}
a.idx-panel-reseller:hover .idx-reseller-cta {
    transform: translateX(2px);
    box-shadow: 0 0 20px rgba(244, 63, 94, 0.45);
    filter: brightness(1.1);
}
.idx-reseller-cta-arrow { font-size: 14px; transition: transform 0.15s; }
a.idx-panel-reseller:hover .idx-reseller-cta-arrow { transform: translateX(3px); }

/* Light theme */
body.light-theme a.idx-panel-reseller {
    background: linear-gradient(135deg, #fff 0%, rgba(244, 63, 94, 0.05) 50%, rgba(245, 158, 11, 0.03) 100%);
}
body.light-theme a.idx-panel-reseller:hover {
    background: linear-gradient(135deg, #fff 0%, rgba(244, 63, 94, 0.1) 50%, rgba(245, 158, 11, 0.06) 100%);
}

/* Responsive */
@media (max-width: 760px) {
    .idx-reseller-body { flex-direction: column; align-items: flex-start; gap: 14px; }
    .idx-reseller-text { flex: 1 1 100%; }
    .idx-reseller-stats { width: 100%; justify-content: space-between; gap: 8px; }
    .idx-reseller-cta { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
    a.idx-panel-reseller { padding: 12px 14px; }
    .idx-reseller-headline { font-size: 14px; }
    .idx-reseller-stat-val { font-size: 16px; }
    .idx-reseller-stat-sep { display: none; }
    .idx-reseller-stats { gap: 6px; }
}

/* idx-panel responsive */
@media (max-width: 768px) {
    .idx-panel-grid-top { grid-template-columns: repeat(2, 1fr); }
    .idx-pc-stats-cell { grid-column: span 2; }
}
@media (max-width: 480px) {
    .idx-panel-grid-top { grid-template-columns: 1fr; }
    .idx-pc-stats-cell { grid-column: span 1; }
    .idx-flash-item { flex: 1 1 100%; padding: 8px 10px; }
    .idx-order-chip { padding: 4px 7px; }
}

/* Welcome Quick Start bar for new users */
.idx-welcome {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-left: 2px solid #10b981;
    padding: 10px 14px;
    margin-bottom: 12px;
}
.idx-welcome-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.idx-welcome-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    animation: idx-welcome-pulse 2s ease-in-out infinite;
}
@keyframes idx-welcome-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.idx-welcome-title {
    font-family: 'Anonymous Pro', monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text);
}
.idx-welcome-sub {
    font-family: 'Anonymous Pro', monospace;
    font-size: 10px;
    color: var(--text-3);
}
.idx-welcome-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.idx-wnav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-2);
    text-decoration: none;
    padding: 4px 9px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.idx-wnav:hover {
    border-color: var(--gold);
    color: var(--text);
    background: rgba(212, 160, 23, 0.05);
}
.idx-wnav-deposit {
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
}
.idx-wnav-deposit:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
    color: #34d399;
}
body.light-theme .idx-welcome { background: #fff; }
body.light-theme .idx-wnav { background: #f9fafb; }
body.light-theme .idx-wnav:hover { background: rgba(212, 160, 23, 0.04); }
@media (max-width: 480px) {
    .idx-welcome-nav { gap: 5px; }
    .idx-wnav { padding: 4px 7px; font-size: 9px; }
}

/* 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;
}

/* Prominent Warning Alert - Credit Card Store */
.theme-cc .idx-alert-warning {
    position: relative;
    overflow: hidden;
    border-color: rgba(245, 158, 11, 0.6);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(239, 68, 68, 0.06) 50%, var(--bg-1) 100%);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
    margin-bottom: 24px;
}
.theme-cc .idx-alert-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #f59e0b, #ef4444);
}
.theme-cc .idx-alert-warning .idx-alert-icon {
    color: #f59e0b;
    font-size: 22px;
    animation: idx-warn-pulse 2s ease-in-out infinite;
}
.theme-cc .idx-alert-warning .idx-alert-title {
    color: #f59e0b;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.theme-cc .idx-alert-warning .idx-alert-text {
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.5;
}
.theme-cc .idx-alert-warning .idx-alert-text strong {
    color: #ef4444;
    font-weight: 700;
}

body.light-theme.theme-cc .idx-alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(239, 68, 68, 0.08) 50%, var(--bg-1) 100%);
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.12);
}
body.light-theme.theme-cc .idx-alert-warning .idx-alert-title {
    color: #d97706;
}
body.light-theme.theme-cc .idx-alert-warning .idx-alert-text strong {
    color: #dc2626;
}

@media (max-width: 768px) {
    .theme-cc .idx-alert-warning {
        padding: 10px 12px;
        gap: 10px;
    }
    .theme-cc .idx-alert-warning .idx-alert-icon {
        font-size: 18px;
    }
    .theme-cc .idx-alert-warning .idx-alert-title {
        font-size: 11px;
    }
    .theme-cc .idx-alert-warning .idx-alert-text {
        font-size: 10px;
    }
}

/* 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);
}

/* ========================================
   Active Auctions List Grid & Item Styling
   ======================================== */
.prod-head.auction-grid,
.prod.auction-grid {
    grid-template-columns: minmax(0, 1.8fr) 95px 110px 60px 95px 80px;
    gap: 12px;
    align-items: center;
}

.prod.auction-grid {
    padding: 12px 16px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

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

.auc-item-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.auc-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.auc-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 800;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    line-height: 1;
}

.auc-badge-dot {
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    animation: auc-pulse 2s infinite;
}

.auc-badge-blitz {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 800;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    line-height: 1;
}

.auc-item-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.auc-item-sub {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    opacity: 0.85;
}

/* Auction Columns */
.prod.auction-grid .prod-price {
    font-size: 14px;
    font-weight: 800;
    color: var(--gold);
    text-align: right;
    letter-spacing: -0.3px;
}

.prod.auction-grid .prod-stock {
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    color: var(--text-2);
}

.prod.auction-grid .prod-stock.ok {
    color: #10b981;
}

.prod.auction-grid .prod-time {
    font-size: 11px;
    font-weight: 700;
    font-family: 'Anonymous Pro', Monaco, monospace;
    color: #ef4444;
    text-align: center;
    white-space: nowrap;
}

.prod.auction-grid .prod-buy {
    font-size: 11px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 4px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    border: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
    transition: all 0.2s ease;
    justify-self: end;
}

.prod.auction-grid .prod-buy:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
    text-decoration: none;
    color: #ffffff;
}

/* Light Theme Overrides for Auction Grid */
body.light-theme .auc-badge-live {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.25);
}

body.light-theme .auc-badge-dot {
    background: #dc2626;
}

body.light-theme .auc-badge-blitz {
    color: #b45309;
    background: rgba(217, 119, 6, 0.08);
    border-color: rgba(217, 119, 6, 0.25);
}

body.light-theme .auc-item-title {
    color: #1a1a1a;
}

body.light-theme .auc-item-sub {
    color: #606060;
}

body.light-theme .prod.auction-grid .prod-price {
    color: #b45309;
}

body.light-theme .prod.auction-grid .prod-time {
    color: #dc2626;
}

body.light-theme .prod.auction-grid .prod-buy {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2);
}

body.light-theme .prod.auction-grid .prod-buy:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.35);
}

/* ========================================
   Active Auctions Card Grid (5 per row)
   Beautiful, adaptive, dark/light aware
   ======================================== */
.auc-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
}

.auc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.2s ease, background-color 0.2s ease,
                box-shadow 0.2s ease, transform 0.15s ease;
}

.auc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #ef4444, #f59e0b);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.auc-card:hover {
    border-color: rgba(239, 68, 68, 0.4);
    background: var(--bg-3);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.12);
    text-decoration: none;
}

.auc-card:hover::before {
    opacity: 1;
}

.auc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 18px;
}

.auc-card-badges {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex-wrap: wrap;
}

.auc-card-badges .prod-type {
    font-size: 8.5px;
    padding: 2px 6px;
    border-radius: 3px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auc-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.auc-card-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.auc-card-sub {
    font-size: 10.5px;
    color: var(--text-3);
    line-height: 1.3;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auc-card-timer {
    font-size: 11px;
    font-weight: 700;
    font-family: 'Anonymous Pro', Monaco, monospace;
    color: #ef4444;
    white-space: nowrap;
}

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

.auc-card-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}

.auc-card-price-label {
    font-size: 8.5px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auc-card-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: -0.3px;
}

.auc-card-bids {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-3);
    white-space: nowrap;
}

.auc-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 7px 10px;
    border-radius: 4px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
    transition: all 0.2s ease;
    margin-top: auto;
}

.auc-card:hover .auc-card-btn {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

/* Light Theme Overrides for Auction Cards */
body.light-theme .auc-card {
    background: #fdfbf7;
    border-color: #e2e8f0;
}

body.light-theme .auc-card:hover {
    background: #ffffff;
    border-color: rgba(220, 38, 38, 0.4);
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.1);
}

body.light-theme .auc-card-title {
    color: #1a1a1a;
}

body.light-theme .auc-card-sub {
    color: #606060;
}

body.light-theme .auc-card-timer {
    color: #dc2626;
}

body.light-theme .auc-card-price {
    color: #b45309;
}

body.light-theme .auc-card-footer {
    border-top-color: #e2e8f0;
}

body.light-theme .auc-card-btn {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2);
}

body.light-theme .auc-card:hover .auc-card-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
}

/* Responsive Breakpoints for Auction Cards */
@media (max-width: 720px) {
    .auc-cards-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .auc-cards-grid {
        gap: 10px;
        padding: 10px;
    }
    .auc-card-title {
        font-size: 12px;
    }
    .auc-card-price {
        font-size: 14px;
    }
}

/* 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;
    white-space: pre-line;
}

.offer-promo-box {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
    background: rgba(212, 160, 23, 0.04);
    border: 1px solid rgba(212, 160, 23, 0.18);
    border-radius: 4px;
    margin-bottom: 10px;
}

.offer-promo-header {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(212, 160, 23, 0.18);
}

.offer-tier-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(212, 160, 23, 0.14);
    border-radius: 3px;
    font-size: 10.5px;
    font-family: 'Anonymous Pro', monospace;
    transition: all 0.15s ease;
}

.offer-tier-row:hover {
    border-color: rgba(212, 160, 23, 0.4);
    background: rgba(212, 160, 23, 0.08);
}

.offer-tier-cond {
    color: #f4f4f5;
    font-weight: 600;
}

.offer-tier-arrow {
    color: var(--gold);
    font-weight: 700;
    font-size: 11px;
}

.offer-tier-reward {
    color: #10b981;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.1);
    padding: 1px 6px;
    border-radius: 2px;
    border: 1px solid rgba(16, 185, 129, 0.25);
    white-space: nowrap;
}

.offer-tier-full {
    color: #e4e4e7;
    font-size: 10px;
    line-height: 1.3;
}

.offer-promo-line {
    font-size: 9.5px;
    color: var(--text-3);
    line-height: 1.3;
    padding-top: 2px;
}

.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;
}
body.light-theme .offer-promo-box {
    background: #fdfaf3;
    border-color: rgba(212, 160, 23, 0.25);
}
body.light-theme .offer-promo-header {
    color: #b45309;
    border-bottom-color: rgba(212, 160, 23, 0.2);
}
body.light-theme .offer-tier-row {
    background: #ffffff;
    border-color: rgba(212, 160, 23, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
body.light-theme .offer-tier-row:hover {
    border-color: rgba(212, 160, 23, 0.4);
    background: #fefce8;
}
body.light-theme .offer-tier-cond {
    color: #27272a;
}
body.light-theme .offer-tier-arrow {
    color: #b45309;
}
body.light-theme .offer-tier-reward {
    color: #059669;
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
}
body.light-theme .offer-tier-full {
    color: #374151;
}
body.light-theme .offer-promo-line {
    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);
    text-decoration: none;
    cursor: pointer;
}

.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 & Cards
   ======================================== */
.live-auctions-bar {
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-left: 2px solid #ef4444;
    background: var(--bg-1);
    position: relative;
    border-radius: 6px;
    margin-bottom: 16px;
}

.live-auctions-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 140px; height: 2px;
    background: linear-gradient(90deg, #ef4444 0%, rgba(239, 68, 68, 0) 100%);
    pointer-events: none;
    z-index: 2;
}

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

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

.live-auc-pulse {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    animation: lab-pulse 2s ease-in-out infinite;
}

@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.2px;
    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: 0.8px;
    opacity: 0.7;
    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;
    border-radius: 4px;
}

.live-auctions-bar-head .lab-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ef4444;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Anonymous Pro', monospace;
    padding: 4px 10px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.06);
    border-radius: 4px;
    text-decoration: none;
    transition: all 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-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.live-auc-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
    overflow: hidden;
}

.live-auc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: #ef4444;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.live-auc-card:hover {
    border-color: rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
    text-decoration: none;
}

.live-auc-card:hover::before {
    opacity: 1;
}

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

.live-auc-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-auc-type {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 2px 6px;
    border-radius: 3px;
}

.live-auc-blitz {
    font-size: 9px;
    font-weight: 700;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.03em;
}

.live-auc-timer-wrap {
    font-size: 11px;
    font-weight: 700;
    color: #ef4444;
    font-family: 'Anonymous Pro', Monaco, monospace;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.live-auc-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.live-auc-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.live-auc-price-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-auc-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: -0.3px;
}

.live-auc-bids-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.live-auc-btn {
    font-size: 10px;
    font-weight: 700;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.live-auc-card:hover .live-auc-btn {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

/* Light Theme Overrides for Live Auctions Bar */
body.light-theme .live-auctions-bar {
    background: #ffffff;
    border-color: #e2e8f0;
    border-left-color: #dc2626;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

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

body.light-theme .live-auctions-bar-head .lab-count {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.25);
}

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

body.light-theme .live-auctions-bar-head .lab-all:hover {
    color: #ffffff;
    background: #dc2626;
    border-color: #dc2626;
}

body.light-theme .live-auc-card {
    background: #fdfbf7;
    border-color: #e2e8f0;
}

body.light-theme .live-auc-card:hover {
    background: #ffffff;
    border-color: rgba(220, 38, 38, 0.4);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.1);
}

body.light-theme .live-auc-type {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.2);
}

body.light-theme .live-auc-blitz {
    color: #d97706;
    background: rgba(217, 119, 6, 0.08);
    border-color: rgba(217, 119, 6, 0.25);
}

body.light-theme .live-auc-timer-wrap {
    color: #dc2626;
}

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

body.light-theme .live-auc-footer {
    border-top-color: #e2e8f0;
}

body.light-theme .live-auc-btn {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.25);
}

body.light-theme .live-auc-card:hover .live-auc-btn {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

/* Responsive Mobile Styles */
@media (max-width: 576px) {
    .live-auctions-bar {
        padding: 10px 12px;
    }
    .live-auctions-grid {
        grid-template-columns: 1fr;
    }
    .live-auc-title {
        font-size: 11px;
    }
}

/* ========================================
   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 - Terminal Style
   ======================================== */
.auc-detail-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Timer Box */
.auc-timer-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 3px solid #ef4444;
    border-radius: 5px;
}

.auc-timer-icon {
    font-size: 18px;
    color: #ef4444;
}

.auc-timer-info {
    flex: 1;
}

.auc-timer-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
}

.auc-timer-value {
    font-size: 20px;
    font-weight: 800;
    color: #ef4444;
    font-family: 'Anonymous Pro', Monaco, monospace;
    letter-spacing: -0.3px;
}

/* Current Leader Box */
.auc-leader-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 5px;
}

.auc-leader-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auc-leader-amount {
    font-size: 15px;
    font-weight: 800;
    color: var(--gold);
}

.auc-you-badge {
    background: #10b981;
    color: #000;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auc-no-leader {
    font-size: 12px;
    color: var(--text-3);
    font-style: italic;
}

/* Description Section */
.auc-description {
    padding: 14px 16px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 5px;
}

.auc-desc-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}

.auc-desc-text {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.6;
    margin: 0;
    white-space: pre-line;
    word-break: break-word;
}

/* Bidding Controls Section */
.auc-bidding {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auc-bid-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.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: 10px 14px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
}

.auc-btn-step:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.auc-btn-step:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.auc-btn-label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.9;
}

.auc-btn-amount {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

/* Input Fields */
.auc-input-group {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0 10px;
    transition: border-color 0.2s ease;
}

.auc-input-group:focus-within {
    border-color: #10b981;
}

.auc-input-prefix {
    color: var(--text-3);
    font-weight: 700;
    font-size: 13px;
    margin-right: 4px;
}

.auc-input-group input {
    flex: 1;
    padding: 10px 0;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    font-family: 'Anonymous Pro', Monaco, monospace;
    outline: none;
}

.auc-btn-custom {
    padding: 10px 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auc-btn-custom:hover:not(:disabled) {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    transform: translateY(-1px);
}

.auc-btn-custom:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Proxy / Auto Bid Section */
.auc-proxy-section {
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 3px solid #3b82f6;
    border-radius: 5px;
}

.auc-proxy-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.auc-proxy-title {
    font-size: 11px;
    font-weight: 700;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auc-proxy-active {
    font-size: 10px;
    font-weight: 700;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.12);
    padding: 2px 8px;
    border-radius: 3px;
}

.auc-proxy-form {
    display: flex;
    gap: 8px;
}

.auc-btn-proxy {
    padding: 10px 16px;
    background: #3b82f6;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.auc-btn-proxy:hover:not(:disabled) {
    background: #2563eb;
    transform: translateY(-1px);
}

.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-top: 4px;
}

.auc-proxy-cancel-note {
    font-size: 11px;
    color: var(--text-3);
    flex: 1;
}

.auc-btn-cancel-proxy {
    flex-shrink: 0;
    padding: 6px 12px;
    background: transparent;
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auc-btn-cancel-proxy:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: #ef4444;
}

/* Blitz Buy Button */
.auc-blitz-form {
    margin-top: 4px;
}

.auc-btn-blitz {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.25);
    transition: all 0.2s ease;
}

.auc-btn-blitz:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.auc-btn-blitz:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.auc-blitz-icon {
    font-size: 15px;
}

.auc-ended-box {
    text-align: center;
    padding: 30px 20px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 5px;
}

.auc-ended-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.auc-ended-text {
    font-size: 13px;
    color: var(--text-3);
    margin: 0;
}

/* Light Theme Overrides for Auction Detail */
body.light-theme .auc-timer-box {
    background: #ffffff;
    border-color: #e2e8f0;
    border-left-color: #dc2626;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

body.light-theme .auc-timer-icon {
    color: #dc2626;
}

body.light-theme .auc-timer-value {
    color: #dc2626;
}

body.light-theme .auc-leader-box {
    background: #ffffff;
    border-color: #e2e8f0;
}

body.light-theme .auc-leader-amount {
    color: #b45309;
}

body.light-theme .auc-description {
    background: #ffffff;
    border-color: #e2e8f0;
}

body.light-theme .auc-desc-title {
    border-bottom-color: #e2e8f0;
}

body.light-theme .auc-desc-text {
    color: #1a1a1a;
}

body.light-theme .auc-input-group {
    background: #ffffff;
    border-color: #cbd5e1;
}

body.light-theme .auc-input-group input {
    color: #1a1a1a;
}

body.light-theme .auc-btn-step,
body.light-theme .auc-btn-custom {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

body.light-theme .auc-btn-step:hover:not(:disabled),
body.light-theme .auc-btn-custom:hover:not(:disabled) {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

body.light-theme .auc-proxy-section {
    background: #f8fafc;
    border-color: #e2e8f0;
    border-left-color: #2563eb;
}

body.light-theme .auc-proxy-title,
body.light-theme .auc-proxy-active {
    color: #1e40af;
}

body.light-theme .auc-proxy-active {
    background: rgba(37, 99, 235, 0.08);
}

body.light-theme .auc-btn-blitz {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

body.light-theme .auc-btn-blitz:hover:not(:disabled) {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

body.light-theme .auc-ended-box {
    background: #ffffff;
    border-color: #e2e8f0;
}

@media (max-width: 640px) {
    .auc-bid-grid {
        grid-template-columns: 1fr;
    }
    .auc-proxy-form {
        flex-direction: column;
    }
}

.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(--news-color), var(--news-color-dim));
}
.nw-featured:hover {
    border-color: var(--news-color);
    box-shadow: 0 4px 24px rgba(var(--news-color-rgb), 0.1);
}
.nw-featured-badge {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(var(--news-color-rgb), 0.15);
    color: var(--news-color);
    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(--news-color);
}
.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(--news-color);
    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(--news-color);
    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(--news-color);
}
.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(--news-color);
    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(var(--news-color-rgb), 0.15);
    color: var(--news-color);
    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(--news-color);
    color: var(--news-color);
}
.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(--news-color);
    border-color: var(--news-color);
    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;
}

/* ==================== Sound Toggle Button ==================== */
.sound-toggle-btn {
    font-size: 16px !important;
    padding: 6px 10px !important;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.sound-toggle-btn:hover {
    background: var(--bg-3) !important;
    border-color: var(--gold) !important;
}

.sound-toggle-btn.sound-off {
    opacity: 0.6;
}

.sound-toggle-btn.sound-off .sound-icon-on {
    display: none;
}

.sound-toggle-btn:not(.sound-off) .sound-icon-off {
    display: none;
}

.sound-icon-on, .sound-icon-off {
    display: inline;
}

body.light-theme .sound-toggle-btn {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
}

body.light-theme .sound-toggle-btn:hover {
    background: #e5e7eb !important;
    border-color: #d97706 !important;
}

/* Mobile responsive for sound toggle */
@media (max-width: 768px) {
    .sound-toggle-btn {
        min-width: 32px;
        height: 32px;
        font-size: 14px !important;
        padding: 4px 8px !important;
    }
}

@media (max-width: 480px) {
    .sound-toggle-btn {
        min-width: 28px;
        height: 28px;
        font-size: 12px !important;
        padding: 4px 6px !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.06);
    border-left: 3px solid #ef4444;
    box-shadow: inset 0 0 12px rgba(239, 68, 68, 0.04);
    animation: msg-unread-glow 3s ease-in-out infinite;
}
.msg-conv.unread .msg-conv-name {
    color: var(--text);
    font-weight: 800;
}
.msg-conv.unread .msg-conv-preview {
    color: var(--text-2);
    font-weight: 600;
}
@keyframes msg-unread-glow {
    0%, 100% { background: rgba(239, 68, 68, 0.06); }
    50% { background: rgba(239, 68, 68, 0.12); }
}
.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-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
    animation: msg-badge-pulse 2s ease-in-out infinite;
}
@keyframes msg-badge-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); }
    50% { transform: scale(1.1); box-shadow: 0 0 14px rgba(239, 68, 68, 0.8); }
}
.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: 520px;
}
.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;
}

/* Date Separator */
.msg-date-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-3);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 4px 0;
}
.msg-date-sep::before,
.msg-date-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* LCN System Bubble (self-messages) */
.msg-bubble.system-lcn {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.25);
    align-self: center;
    max-width: 90%;
    width: 100%;
}
.msg-bubble.system-lcn .msg-bubble-from {
    color: #a78bfa;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.msg-bubble.system-lcn .msg-bubble-text {
    font-family: monospace;
    font-size: 12px;
    color: var(--text-2);
    white-space: pre-wrap;
}
.msg-bubble.system-lcn .msg-bubble-time {
    text-align: left;
}

/* System message prefix highlight */
.msg-bubble.is-system-msg .msg-bubble-text {
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 12px;
}

/* Mobile tab bar - hidden on desktop */
.msg-mobile-tabs {
    display: none;
}
.msg-tab-btn {
    flex: 1;
    padding: 12px;
    background: var(--bg-2);
    border: none;
    border-bottom: 2px solid var(--border);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.msg-tab-btn.active {
    color: #f59e0b;
    border-bottom-color: #f59e0b;
    background: var(--bg-1);
}

/* Back to list button - hidden on desktop */
.msg-back-to-list {
    display: none;
    width: 32px;
    height: 32px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 16px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}
.msg-back-to-list:hover {
    background: var(--bg-1);
    color: var(--text-1);
}
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-mobile-tabs {
        display: flex;
        border-bottom: 1px solid var(--border);
        background: var(--bg-2);
        flex-shrink: 0;
    }
    .msg-back-to-list {
        display: flex;
    }
    .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-sidebar.msg-mobile-hidden {
        display: none;
    }
    .msg-chat.msg-mobile-hidden {
        display: none;
    }
    .msg-conversations {
        max-height: calc(100vh - 200px);
    }
    .msg-chat {
        min-height: calc(100vh - 120px);
        order: 2;
    }
    .msg-messages {
        max-height: calc(100vh - 280px);
        min-height: 200px;
    }
    .msg-bubble {
        max-width: 95%;
        padding: 10px 12px;
    }
    .msg-bubble.system-lcn {
        max-width: 100%;
    }
    .msg-bubble-text {
        font-size: 13px;
    }
    .msg-reply-form {
        flex-direction: row;
        gap: 8px;
    }
    .msg-reply-input {
        height: 40px;
        min-height: 40px;
        max-height: 120px;
        font-size: 13px;
    }
    .msg-send-btn {
        width: auto;
        padding: 8px 14px;
        flex-shrink: 0;
    }
    .msg-chat-head {
        flex-wrap: nowrap;
        padding: 10px 12px;
        gap: 8px;
    }
    .msg-chat-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .msg-chat-actions {
        flex-shrink: 0;
    }
    .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 - date separator */
body.light-theme .msg-date-sep {
    color: #9ca3af;
}
body.light-theme .msg-date-sep::before,
body.light-theme .msg-date-sep::after {
    background: #e5e7eb;
}
/* Light Theme - system bubble */
body.light-theme .msg-bubble.system-lcn {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.2);
}
body.light-theme .msg-bubble.system-lcn .msg-bubble-text {
    color: #4c1d95 !important;
}
body.light-theme .msg-bubble.system-lcn .msg-bubble-from {
    color: #6d28d9 !important;
}
body.light-theme .msg-bubble-text {
    color: #1f2937 !important;
}
body.light-theme .msg-bubble-from {
    color: #4b5563 !important;
}
body.light-theme .msg-bubble.is-system-msg .msg-bubble-text {
    color: #111827 !important;
}
/* Light Theme - mobile tabs */
body.light-theme .msg-mobile-tabs {
    background: #f9fafb;
    border-color: #e5e7eb;
}
body.light-theme .msg-tab-btn {
    background: #f9fafb;
    color: #6b7280;
    border-bottom-color: #e5e7eb;
}
body.light-theme .msg-tab-btn.active {
    background: #fff;
    color: #d97706;
    border-bottom-color: #d97706;
}
body.light-theme .msg-back-to-list {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #6b7280;
}

/* 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);
    border-left-color: #ef4444;
    box-shadow: inset 0 0 12px rgba(239, 68, 68, 0.03);
}
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;
}

/* Messages Navigation (navigation.blade.php) */
.messages-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.messages-nav .nav-btn {
    flex: 1;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-3);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}
.messages-nav .nav-btn:hover {
    border-color: var(--text-3);
    color: var(--text-1);
}
.messages-nav .nav-btn.active {
    background: var(--text-1);
    color: var(--bg-1);
    border-color: var(--text-1);
}
body.light-theme .messages-nav {
    border-color: #e5e7eb;
}
body.light-theme .messages-nav .nav-btn {
    border-color: #e5e7eb;
    color: #9ca3af;
}
body.light-theme .messages-nav .nav-btn:hover {
    border-color: #6b7280;
    color: #374151;
}
body.light-theme .messages-nav .nav-btn.active {
    background: #111827;
    color: #fff;
    border-color: #111827;
}
@media (max-width: 480px) {
    .messages-nav {
        gap: 6px;
    }
    .messages-nav .nav-btn {
        padding: 8px 12px;
        font-size: 11px;
    }
}

/* Message Search Input */
.msg-search-wrap {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}
.msg-search-input {
    flex: 1;
    background: var(--bg-1);
    border: 1px solid var(--border);
    padding: 7px 32px 7px 12px;
    color: var(--text-1);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
    width: 100%;
}
.msg-search-input:focus {
    border-color: #f59e0b;
}
.msg-search-input::placeholder {
    color: var(--text-3);
}
.msg-search-clear {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    font-size: 12px;
    text-decoration: none;
    line-height: 1;
    padding: 2px 4px;
    transition: color 0.2s;
}
.msg-search-clear:hover {
    color: var(--text-1);
}
body.light-theme .msg-search-wrap {
    border-color: #e5e7eb;
}
body.light-theme .msg-search-input {
    background: #fff;
    border-color: #e5e7eb;
    color: #1f2937;
}
body.light-theme .msg-search-input::placeholder {
    color: #9ca3af;
}
body.light-theme .msg-search-clear {
    color: #9ca3af;
}
body.light-theme .msg-search-clear:hover {
    color: #374151;
}

/* Search result count */
.msg-search-result-info {
    padding: 6px 14px;
    font-size: 10px;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
    font-weight: 600;
    letter-spacing: 0.3px;
}
body.light-theme .msg-search-result-info {
    color: #d97706;
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.15);
}

/* Empty state stats */
.msg-no-sel-stats {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin: 12px 0 16px;
}
.msg-no-sel-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.msg-no-sel-val {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1;
}
.msg-no-sel-val.unread {
    color: #ef4444;
}
.msg-no-sel-lbl {
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
body.light-theme .msg-no-sel-val {
    color: #1f2937;
}
body.light-theme .msg-no-sel-lbl {
    color: #9ca3af;
}

/* Redirect notice (for legacy pages) */
.msg-redirect-notice {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-3);
    font-size: 13px;
}
.msg-redirect-notice a {
    color: #f59e0b;
    text-decoration: none;
}
.msg-redirect-notice a:hover {
    text-decoration: underline;
}
body.light-theme .msg-redirect-notice {
    color: #6b7280;
}

/* ==================== 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;
}

/* Registration notice bar */
.sc-reg-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 6px;
    border: 1px solid;
    margin-bottom: 16px;
    font-size: 13px;
    flex-wrap: wrap;
}
.sc-reg-open {
    background: rgba(16, 185, 129, 0.07);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--text);
}
.sc-reg-closed {
    background: rgba(212, 160, 23, 0.08);
    border-color: rgba(212, 160, 23, 0.35);
    color: var(--text);
}
.sc-reg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
    animation: sc-pulse 2s infinite;
}
.sc-reg-dot-amber {
    background: var(--gold);
    animation: sc-pulse 2s infinite;
}
@keyframes sc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.sc-reg-notice > span:nth-child(2) {
    flex: 1;
}
.sc-reg-btn {
    display: inline-block;
    padding: 6px 14px;
    background: #10b981;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.sc-reg-btn:hover { opacity: 0.85; }
.sc-reg-btn-amber {
    background: var(--gold);
    color: #1a1a1a;
}
.sc-reg-btn-amber:hover {
    opacity: 0.85;
}

/* CTA */
.sc-cta {
    text-align: center;
    padding: 56px 24px;
    background: linear-gradient(180deg, transparent 0%, rgba(212, 160, 23, 0.08) 100%);
    border-top: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 8px;
}
.sc-cta-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(212, 160, 23, 0.12);
    border: 1px solid rgba(212, 160, 23, 0.35);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.sc-cta-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--gold);
    margin: 0 0 10px;
}
.sc-cta-text {
    font-size: 14px;
    color: var(--text-2);
    margin: 0 0 20px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.sc-cta-features {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    margin-bottom: 28px;
    text-align: left;
}
.sc-cta-feat {
    font-size: 13px;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 6px;
}
.sc-cta-feat-icon {
    flex-shrink: 0;
}
.sc-cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.sc-btn-xl {
    padding: 14px 32px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
}
.sc-cta-note {
    margin-top: 16px;
    font-size: 11px;
    color: var(--text-3);
}

@media (max-width: 600px) {
    .sc-cta-features {
        grid-template-columns: 1fr;
    }
    .sc-cta-title { font-size: 20px; }
    .sc-btn-xl { padding: 12px 20px !important; font-size: 14px !important; }
    .sc-reg-notice { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* 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;
}

/* ========================================
   Featured Product Row (Priority in category)
   ======================================== */
.prod-featured {
    background: rgba(212, 160, 23, 0.04);
    box-shadow:
        inset 3px 0 0 var(--gold),
        inset 0 0 0 1px rgba(212, 160, 23, 0.35);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.prod-featured:hover {
    background: rgba(212, 160, 23, 0.08);
    box-shadow:
        inset 3px 0 0 var(--gold),
        inset 0 0 0 1px rgba(212, 160, 23, 0.55),
        0 0 12px rgba(212, 160, 23, 0.08);
}

.prod-featured-badge {
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    color: var(--gold);
    vertical-align: middle;
    filter: drop-shadow(0 0 4px rgba(212, 160, 23, 0.45));
    line-height: 1;
}

body.light-theme .prod-featured {
    background: rgba(180, 83, 9, 0.04);
    box-shadow:
        inset 3px 0 0 #d97706,
        inset 0 0 0 1px rgba(180, 83, 9, 0.28);
}

body.light-theme .prod-featured:hover {
    background: rgba(180, 83, 9, 0.08);
    box-shadow:
        inset 3px 0 0 #b45309,
        inset 0 0 0 1px rgba(180, 83, 9, 0.48),
        0 0 12px rgba(180, 83, 9, 0.06);
}

body.light-theme .prod-featured-badge {
    color: #d97706;
    filter: drop-shadow(0 0 4px rgba(180, 83, 9, 0.25));
}

/* Responsive featured product row */
@media (max-width: 768px) {
    .prod-featured {
        margin: 2px 0;
    }

    .prod-featured-badge {
        margin-left: 4px;
        font-size: 11px;
    }
}

/* ========================================
   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;
}

/* Registration status line on login/register pages */
.auth-reg-line {
    text-align: center;
    font-size: 11px;
    padding: 7px 12px;
    border-radius: 4px;
    margin-bottom: 14px;
    letter-spacing: 0.2px;
    line-height: 1.45;
}
.auth-reg-line-open {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #10b981;
}
.auth-reg-line-paid {
    background: rgba(212, 160, 23, 0.08);
    border: 1px solid rgba(212, 160, 23, 0.25);
    color: var(--gold);
}
body.light-theme .auth-reg-line-open {
    background: rgba(16, 185, 129, 0.06);
    color: #059669;
}
body.light-theme .auth-reg-line-paid {
    background: rgba(212, 160, 23, 0.06);
    color: #b8860b;
}

/* 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;
}

/* Keep the captcha challenge label readable for any color (white, yellow, cyan) on any theme */
#captchaChallenge,
#captchaChallenge span {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.5);
}

/* Enlarge the shape icon in the challenge hint so it is clearly readable */
.captcha-challenge-icon {
    display: inline-block;
    font-size: 1.55em;
    line-height: 1;
    vertical-align: middle;
    margin-left: 2px;
}

.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 HELPER COMPONENTS
   ======================================================= */
.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-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;
}

/* =======================================================
   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;
    }
}

/* =======================================================
   Unified Panel Header — shared by P2P Drops, Latest
   Inventory, Exclusive Offer, News. Matches idx-panel-head
   style: gradient bg, pulsing dot, mono title, sub + badge.
   ======================================================= */
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    position: relative;
}
.panel-head::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 1px;
    background: var(--panel-accent, var(--gold));
    opacity: 0.6;
}
.panel-head-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.panel-head-left:hover { color: var(--panel-accent, var(--gold)); text-decoration: none; }
.panel-head-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--panel-accent, var(--gold));
    flex-shrink: 0;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--panel-accent, var(--gold)) 55%, transparent);
    animation: ph-dot-pulse 2.2s ease-out infinite;
}
@keyframes ph-dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(212,160,23,0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(212,160,23,0); }
    100% { box-shadow: 0 0 0 0 rgba(212,160,23,0); }
}
.panel-head-dot-lime  { background: #a3e635; animation: ph-dot-pulse-lime  2.2s ease-out infinite; }
.panel-head-dot-blue  { background: #3b82f6; animation: ph-dot-pulse-blue  2.2s ease-out infinite; }
.panel-head-dot-amber { background: #fbbf24; animation: ph-dot-pulse-amber 2.2s ease-out infinite; }
.panel-head-dot-green { background: #10b981; animation: ph-dot-pulse-green 2.2s ease-out infinite; }
@keyframes ph-dot-pulse-lime  { 0%{box-shadow:0 0 0 0 rgba(163,230,53,.55)}  70%{box-shadow:0 0 0 7px rgba(163,230,53,0)}  100%{box-shadow:0 0 0 0 rgba(163,230,53,0)} }
@keyframes ph-dot-pulse-blue  { 0%{box-shadow:0 0 0 0 rgba(59,130,246,.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)} }
@keyframes ph-dot-pulse-amber { 0%{box-shadow:0 0 0 0 rgba(251,191,36,.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)} }
@keyframes ph-dot-pulse-green { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.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)} }
.panel-head-title {
    font-family: 'Anonymous Pro', monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text);
    white-space: nowrap;
}
.panel-head-left:hover .panel-head-title { color: var(--panel-accent, var(--gold)); }
.panel-head-sub {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: 0.8px;
    opacity: 0.65;
    white-space: nowrap;
}
.panel-head-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid rgba(212,160,23,0.35);
    color: var(--gold);
    background: rgba(212,160,23,0.07);
    white-space: nowrap;
}
.panel-head-badge-lime  { border-color: rgba(163,230,53,.35); color: #a3e635; background: rgba(163,230,53,.07); }
.panel-head-badge-blue  { border-color: rgba(59,130,246,.35); color: #60a5fa; background: rgba(59,130,246,.07); }
.panel-head-badge-amber { border-color: rgba(251,191,36,.35); color: #fbbf24; background: rgba(251,191,36,.07); }
.panel-head-badge-green { border-color: rgba(16,185,129,.35); color: #10b981; background: rgba(16,185,129,.07); }
.panel-head-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.panel-head-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Anonymous Pro', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-3);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}
.panel-head-right:hover { color: var(--panel-accent, var(--gold)); text-decoration: none; }
.panel-head-arrow { transition: transform 0.2s; }
.panel-head-right:hover .panel-head-arrow { transform: translateX(3px); }

/* Light theme */
body.light-theme .panel-head { background: rgba(212,160,23,0.03); }
body.light-theme .panel-head-title { color: #1a1a1a; }
body.light-theme .panel-head-left:hover .panel-head-title { color: #b45309; }

/* Responsive */
@media (max-width: 480px) {
    .panel-head-sub { display: none; }
    .panel-head { padding: 9px 12px; }
}

/* =======================================================
   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%;
    }
}

/* =======================================================
   CYBER-NOIR INTERACTIVE EFFECTS & THEME REFINEMENTS
   ======================================================= */

/* 1. Cyberpunk Dual-Layer Mesh Background Grid */
body {
    background-image: 
        linear-gradient(rgba(212, 160, 23, 0.035) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(212, 160, 23, 0.035) 1.5px, transparent 1.5px),
        linear-gradient(rgba(212, 160, 23, 0.015) 2px, transparent 2px),
        linear-gradient(90deg, rgba(212, 160, 23, 0.015) 2px, transparent 2px);
    background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
    background-attachment: fixed;
}

body.light-theme {
    background-image: 
        linear-gradient(rgba(180, 83, 9, 0.02) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(180, 83, 9, 0.02) 1.5px, transparent 1.5px),
        linear-gradient(rgba(180, 83, 9, 0.008) 2px, transparent 2px),
        linear-gradient(90deg, rgba(180, 83, 9, 0.008) 2px, transparent 2px);
}

/* 2. CRT Glass Monitor Overlay (Static Scanlines) */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.16) 50%
    );
    background-size: 100% 4px;
    z-index: 99999;
    pointer-events: none;
    opacity: 0.55;
}

body.light-theme::before {
    background: linear-gradient(
        rgba(255, 255, 255, 0) 50%, 
        rgba(0, 0, 0, 0.03) 50%
    );
    background-size: 100% 4px;
    opacity: 0.4;
}

/* 3. Tactical Micro-Dot Matrix Card Texture */
.vault-stat, .idx-alert, .p2pf-card, .live-order-item {
    background-image: radial-gradient(rgba(212, 160, 23, 0.018) 1.5px, transparent 1.5px) !important;
    background-size: 8px 8px !important;
}

body.light-theme .vault-stat, 
body.light-theme .idx-alert, 
body.light-theme .p2pf-card, 
body.light-theme .live-order-item {
    background-image: radial-gradient(rgba(180, 83, 9, 0.012) 1.5px, transparent 1.5px) !important;
    background-size: 8px 8px !important;
}

/* 4. Logo Glitch Hover Animation */
@keyframes logo-text-glitch {
    0% {
        text-shadow: 2px 0 0 rgba(239, 68, 68, 0.8),
                    -1.5px -2px 0 rgba(16, 185, 129, 0.8),
                    1.5px 2px 0 rgba(59, 130, 246, 0.8);
    }
    14% {
        text-shadow: 2px 0 0 rgba(239, 68, 68, 0.8),
                    -1.5px -2px 0 rgba(16, 185, 129, 0.8),
                    1.5px 2px 0 rgba(59, 130, 246, 0.8);
    }
    15% {
        text-shadow: -2px -1.5px 0 rgba(239, 68, 68, 0.8),
                    1.5px 1.5px 0 rgba(16, 185, 129, 0.8),
                    -2px -2px 0 rgba(59, 130, 246, 0.8);
    }
    49% {
        text-shadow: -2px -1.5px 0 rgba(239, 68, 68, 0.8),
                    1.5px 1.5px 0 rgba(16, 185, 129, 0.8),
                    -2px -2px 0 rgba(59, 130, 246, 0.8);
    }
    50% {
        text-shadow: 1.5px 2px 0 rgba(239, 68, 68, 0.8),
                    2px 0 0 rgba(16, 185, 129, 0.8),
                    0 -2px 0 rgba(59, 130, 246, 0.8);
    }
    99% {
        text-shadow: 1.5px 2px 0 rgba(239, 68, 68, 0.8),
                    2px 0 0 rgba(16, 185, 129, 0.8),
                    0 -2px 0 rgba(59, 130, 246, 0.8);
    }
    100% {
        text-shadow: none;
    }
}

.logo:hover .logo-text {
    animation: logo-text-glitch 0.4s cubic-bezier(.25, .46, .45, .94) both;
}

/* 5. Terminal Blinking Cursor */
.logo-sub::after {
    content: '_';
    font-weight: 700;
    color: var(--gold);
    animation: terminal-cursor-blink 1s step-start infinite;
    display: inline-block;
    margin-left: 2px;
}

@keyframes terminal-cursor-blink {
    50% { opacity: 0; }
}

body.light-theme .logo-sub::after {
    color: #b45309;
}

/* 6. Glowing Navigation Underline */
.nav-link:hover::after,
.nav-link.active::after {
    box-shadow: 0 0 12px var(--gold);
}

body.light-theme .nav-link:hover::after,
body.light-theme .nav-link.active::after {
    box-shadow: 0 0 10px #b45309;
}

/* 7. Futuristic Corner Bracket Corners on Hover (Cyber Brackets) */
.vault-stat, .idx-alert, .p2pf-card, .live-order-item {
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.vault-stat:hover, .idx-alert:hover, .p2pf-card:hover, .live-order-item:hover {
    transform: translateY(-2.5px);
    border-color: var(--gold) !important;
    box-shadow: 0 0 15px rgba(212, 160, 23, 0.25);
    background-color: rgba(212, 160, 23, 0.04) !important;
}

body.light-theme .vault-stat:hover, 
body.light-theme .idx-alert:hover, 
body.light-theme .p2pf-card:hover, 
body.light-theme .live-order-item:hover {
    border-color: #b45309 !important;
    box-shadow: 0 0 15px rgba(180, 83, 9, 0.18);
    background-color: rgba(180, 83, 9, 0.02) !important;
}

/* Draw Cyber Corner Brackets via Clean background gradients (No clip-path bugs!) */
.vault-stat::before, .idx-alert::before, .p2pf-card::before, .live-order-item::before {
    content: "";
    position: absolute;
    inset: -12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, inset 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: 
        linear-gradient(to right, var(--gold) 2px, transparent 2px) 0 0,
        linear-gradient(to bottom, var(--gold) 2px, transparent 2px) 0 0,
        linear-gradient(to left, var(--gold) 2px, transparent 2px) 100% 0,
        linear-gradient(to bottom, var(--gold) 2px, transparent 2px) 100% 0,
        linear-gradient(to right, var(--gold) 2px, transparent 2px) 0 100%,
        linear-gradient(to top, var(--gold) 2px, transparent 2px) 0 100%,
        linear-gradient(to left, var(--gold) 2px, transparent 2px) 100% 100%,
        linear-gradient(to top, var(--gold) 2px, transparent 2px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 8px 8px;
    z-index: 10;
}

body.light-theme .vault-stat::before, 
body.light-theme .idx-alert::before, 
body.light-theme .p2pf-card::before, 
body.light-theme .live-order-item::before {
    background: 
        linear-gradient(to right, #b45309 2px, transparent 2px) 0 0,
        linear-gradient(to bottom, #b45309 2px, transparent 2px) 0 0,
        linear-gradient(to left, #b45309 2px, transparent 2px) 100% 0,
        linear-gradient(to bottom, #b45309 2px, transparent 2px) 100% 0,
        linear-gradient(to right, #b45309 2px, transparent 2px) 0 100%,
        linear-gradient(to top, #b45309 2px, transparent 2px) 0 100%,
        linear-gradient(to left, #b45309 2px, transparent 2px) 100% 100%,
        linear-gradient(to top, #b45309 2px, transparent 2px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 8px 8px;
}

.vault-stat:hover::before, .idx-alert:hover::before, .p2pf-card:hover::before, .live-order-item:hover::before {
    opacity: 1;
    inset: -4px;
}

/* 8. Flowing Neon Security Bar at Card Bottom on Hover */
.vault-stat::after, .idx-alert::after, .p2pf-card::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.25;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.vault-stat:hover::after, .idx-alert:hover::after, .p2pf-card:hover::after {
    opacity: 1;
    background: linear-gradient(90deg, transparent, var(--gold), var(--green), var(--gold), transparent);
    background-size: 200% 100%;
    animation: decrypt-flow-pulse 2s linear infinite;
}

@keyframes decrypt-flow-pulse {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

body.light-theme .vault-stat::after, 
body.light-theme .idx-alert::after, 
body.light-theme .p2pf-card::after {
    background: linear-gradient(90deg, transparent, #b45309, transparent);
}

body.light-theme .vault-stat:hover::after, 
body.light-theme .idx-alert:hover::after, 
body.light-theme .p2pf-card:hover::after {
    background: linear-gradient(90deg, transparent, #b45309, #059669, #b45309, transparent);
}

/* 9. Noticeable Neon Pulse on Special Panels */
.idx-alert-wheel {
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
    animation: wheel-neon-pulse 3s infinite alternate;
}

@keyframes wheel-neon-pulse {
    0% { box-shadow: 0 0 8px rgba(16, 185, 129, 0.1); }
    100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.35); border-color: rgba(16, 185, 129, 0.7); }
}

.user-tag-vip {
    animation: vip-glow-pulse 3s ease-in-out infinite;
    transition: text-shadow 0.3s ease;
}

@keyframes vip-glow-pulse {
    0%, 100% {
        text-shadow: 0 0 4px rgba(236, 72, 153, 0.2), 0 0 10px rgba(139, 92, 246, 0.1);
    }
    50% {
        text-shadow: 0 0 8px rgba(236, 72, 153, 0.6), 0 0 18px rgba(139, 92, 246, 0.4);
    }
}

.user-tag-gold {
    transition: text-shadow 0.3s ease;
}

.user-tag-gold:hover {
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.85);
}

/* 10. Fluid Micro-interactions on Buttons */
.btn {
    position: relative;
    overflow: hidden;
}

.btn:not(.btn-disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.btn.gold:not(.btn-disabled):hover {
    box-shadow: 0 0 12px rgba(212, 160, 23, 0.45);
}

.btn.balance:not(.btn-disabled):hover {
    box-shadow: 0 0 12px rgba(46, 204, 64, 0.45);
}

body.light-theme .btn:not(.btn-disabled):hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

body.light-theme .btn.gold:not(.btn-disabled):hover {
    box-shadow: 0 0 12px rgba(180, 83, 9, 0.35);
}

body.light-theme .btn.balance:not(.btn-disabled):hover {
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}

/* 11. Scanline Shine effect for VIP Promo Button */
.vip-promo-btn {
    position: relative;
    overflow: hidden;
}

.vip-promo-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-20deg);
    animation: button-shine-sweep 4s ease-in-out infinite;
}

@keyframes button-shine-sweep {
    0% { left: -100%; }
    15%, 100% { left: 150%; }
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
    body { background-image: none !important; }
    body::before { display: none !important; }
    .logo:hover .logo-text { animation: none !important; }
    .logo-sub::after { animation: none !important; }
    .user-tag-vip { animation: none !important; }
    .vip-promo-btn::after { animation: none !important; }
    .btn:not(.btn-disabled):hover { transform: none !important; }
    .vault-stat:hover, .idx-alert:hover, .p2pf-card:hover, .live-order-item:hover { transform: none !important; }
    .vault-stat::before, .idx-alert::before, .p2pf-card::before, .live-order-item::before { display: none !important; }
    .vault-stat::after, .idx-alert::after, .p2pf-card::after { display: none !important; }
}

/* ========================================
   Empty State Component
   ======================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.empty-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.empty-text {
    font-size: 13px;
    color: var(--text-3);
    max-width: 360px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--gold);
    color: #000;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0;
    transition: all 0.2s ease;
}

.empty-btn:hover {
    background: var(--gold-hover, #d97706);
    transform: translateY(-1px);
}

body.light-theme .empty-btn {
    background: #b45309;
    color: #fff;
}

body.light-theme .empty-btn:hover {
    background: #92400e;
}

/* ========================================
   Sound Toggle Switch
   ======================================== */
.prf-sound-toggle {
    padding: 16px;
}

.prf-toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.prf-toggle-label input {
    display: none;
}

.prf-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--bg-3);
    border-radius: 12px;
    transition: background 0.2s ease;
}

.prf-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--text);
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.prf-toggle-label input:checked + .prf-toggle-switch {
    background: var(--gold);
}

.prf-toggle-label input:checked + .prf-toggle-switch::after {
    transform: translateX(20px);
    background: #000;
}

.prf-toggle-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.prf-toggle-help {
    margin: 8px 0 0 56px;
    font-size: 12px;
    color: var(--text-3);
}

body.light-theme .prf-toggle-switch {
    background: #e5e7eb;
}

body.light-theme .prf-toggle-switch::after {
    background: #fff;
}

body.light-theme .prf-toggle-label input:checked + .prf-toggle-switch {
    background: #d97706;
}

/* ========================================
   TG Bonus Banner - home page alert
   ======================================== */
.idx-alert-tgbonus {
    position: relative;
    overflow: hidden;
    border-color: rgba(16, 185, 129, 0.35);
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, rgba(212, 160, 23, 0.04) 100%), var(--bg-1);
    border-left-color: #10b981 !important;
}

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

.idx-alert-tgbonus .idx-alert-title {
    color: #10b981 !important;
}

.idx-action-tgbonus {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.4);
    white-space: nowrap;
    flex-shrink: 0;
    padding: 7px 14px;
    border: 1px solid rgba(16, 185, 129, 0.4);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.idx-action-tgbonus:hover {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.7);
    color: #34d399;
}

body.light-theme .idx-alert-tgbonus {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, rgba(212, 160, 23, 0.03) 100%), var(--bg-1);
}

body.light-theme .idx-alert-tgbonus .idx-alert-title {
    color: #059669 !important;
}

body.light-theme .idx-action-tgbonus {
    color: #059669;
    border-color: rgba(5, 150, 105, 0.4);
}

body.light-theme .idx-action-tgbonus:hover {
    background: rgba(5, 150, 105, 0.08);
    border-color: rgba(5, 150, 105, 0.7);
    color: #047857;
}


/* ========================================
   TG Prompt Modal - first-login connect prompt
   ======================================== */
.tg-prompt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: tg-prompt-fade-in 0.25s ease-out;
}

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

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

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

.tg-prompt-modal {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: auto;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(212, 160, 23, 0.04) 100%), var(--bg-1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-left: 3px solid #10b981;
    padding: 24px 22px 20px 26px;
    animation: tg-prompt-slide-in 0.28s ease-out;
}

.tg-prompt-modal::-webkit-scrollbar {
    width: 6px;
}

.tg-prompt-modal::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.4);
}

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

.tg-prompt-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #10b981 0%, rgba(212, 160, 23, 0.6) 60%, rgba(16, 185, 129, 0) 100%);
    animation: tg-prompt-accent-pulse 2.8s ease-in-out infinite;
}

@keyframes tg-prompt-accent-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 0 18px rgba(16, 185, 129, 0.6); }
}

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

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

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

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

.tg-prompt-title {
    font-size: 14px;
    font-weight: 700;
    color: #10b981;
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tg-prompt-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    animation: tg-prompt-dot-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes tg-prompt-dot-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 3px rgba(239, 68, 68, 0.5); }
    50% { opacity: 0.25; box-shadow: 0 0 1px rgba(239, 68, 68, 0.2); }
}

.tg-prompt-steps {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 14px;
}

.tg-prompt-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 11px;
    color: var(--text-2);
    line-height: 1.5;
}

.tg-prompt-step-num {
    font-size: 10px;
    font-weight: 700;
    font-family: 'Anonymous Pro', monospace;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 1px 5px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    line-height: 1.6;
}

.tg-prompt-reward {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(16, 185, 129, 0.07);
    border: 1px solid rgba(16, 185, 129, 0.2);
    margin-bottom: 14px;
    font-size: 11px;
    color: var(--text-2);
    line-height: 1.5;
}

.tg-prompt-reward strong {
    color: #10b981;
    font-weight: 700;
}

.tg-prompt-reward-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.tg-prompt-also {
    margin-bottom: 16px;
}

.tg-prompt-also-title {
    font-size: 10px;
    font-family: 'Anonymous Pro', monospace;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.tg-prompt-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

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

.tg-prompt-option:hover {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.05);
}

.tg-prompt-opt-label {
    font-size: 9px;
    font-family: 'Anonymous Pro', monospace;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.tg-prompt-opt-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.tg-prompt-opt-tg:hover .tg-prompt-opt-value { color: #60a5fa; }
.tg-prompt-opt-rss:hover .tg-prompt-opt-value { color: #f59e0b; }

.tg-prompt-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tg-prompt-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid rgba(16, 185, 129, 0.45);
    color: #10b981;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.tg-prompt-btn-primary:hover {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.7);
    color: #34d399;
}

.tg-prompt-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-3);
    font-size: 11px;
    font-weight: 600;
    font-family: 'Anonymous Pro', monospace;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.tg-prompt-btn-secondary:hover {
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

/* Light theme */
body.light-theme .tg-prompt-modal {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(212, 160, 23, 0.03) 100%), var(--bg-1);
}

body.light-theme .tg-prompt-title {
    color: #059669;
}

body.light-theme .tg-prompt-step-num {
    color: #059669;
    background: rgba(5, 150, 105, 0.08);
    border-color: rgba(5, 150, 105, 0.2);
}

body.light-theme .tg-prompt-reward {
    background: rgba(5, 150, 105, 0.05);
    border-color: rgba(5, 150, 105, 0.18);
}

body.light-theme .tg-prompt-reward strong {
    color: #059669;
}

body.light-theme .tg-prompt-btn-primary {
    color: #059669;
    border-color: rgba(5, 150, 105, 0.4);
}

body.light-theme .tg-prompt-btn-primary:hover {
    background: rgba(5, 150, 105, 0.08);
    border-color: rgba(5, 150, 105, 0.7);
    color: #047857;
}

/* Tablets - let the modal use available width */
@media (max-width: 600px) {
    .tg-prompt-modal {
        max-width: 100%;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .tg-prompt-overlay {
        padding: 12px;
    }
    .tg-prompt-modal {
        padding: 20px 16px 16px 20px;
    }
    .tg-prompt-options,
    .tg-prompt-actions {
        grid-template-columns: 1fr;
    }
    .tg-prompt-icon {
        font-size: 20px;
        margin-bottom: 6px;
    }
    .tg-prompt-title {
        font-size: 13px;
        margin-bottom: 12px;
    }
    .tg-prompt-steps {
        gap: 6px;
        margin-bottom: 12px;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .tg-prompt-modal {
        padding: 16px 12px 12px 16px;
    }
    .tg-prompt-title {
        font-size: 12px;
        letter-spacing: 0.5px;
    }
    .tg-prompt-step {
        gap: 8px;
    }
    .tg-prompt-step-num {
        padding: 1px 4px;
    }
}

/* Short viewports (landscape phones / low height) - pin to top and scroll */
@media (max-height: 640px) {
    .tg-prompt-overlay {
        align-items: flex-start;
        padding: 10px;
    }
    .tg-prompt-modal {
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        padding-top: 16px;
        padding-bottom: 14px;
    }
    .tg-prompt-icon {
        font-size: 18px;
        margin-bottom: 4px;
    }
    .tg-prompt-title {
        margin-bottom: 10px;
    }
    .tg-prompt-steps {
        gap: 5px;
        margin-bottom: 10px;
    }
    .tg-prompt-reward {
        padding: 8px 10px;
        margin-bottom: 10px;
    }
    .tg-prompt-also {
        margin-bottom: 12px;
    }
}

/* ========================================
   Telegram Panel - Profile page additions
   ======================================== */
.tg-bonus-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(16, 185, 129, 0.07);
    border: 1px solid rgba(16, 185, 129, 0.2);
    margin-bottom: 14px;
    font-size: 11px;
    color: var(--text-2);
    line-height: 1.55;
}

.tg-bonus-hint strong {
    color: #10b981;
    font-weight: 700;
}

.tg-bonus-hint-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.tg-verify-msg {
    padding: 9px 12px;
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 10px;
    border: 1px solid var(--border);
}

.tg-verify-msg-success {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.tg-verify-msg-error {
    background: rgba(239, 68, 68, 0.07);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.tg-verified-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
    font-size: 11px;
    color: #10b981;
    font-weight: 600;
    margin-top: 12px;
}

body.light-theme .tg-bonus-hint {
    background: rgba(5, 150, 105, 0.05);
    border-color: rgba(5, 150, 105, 0.18);
}

body.light-theme .tg-bonus-hint strong {
    color: #059669;
}

body.light-theme .tg-verify-msg-success {
    background: rgba(5, 150, 105, 0.06);
    border-color: rgba(5, 150, 105, 0.25);
    color: #059669;
}

body.light-theme .tg-verify-msg-error {
    background: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.25);
    color: #dc2626;
}

body.light-theme .tg-verified-badge {
    background: rgba(5, 150, 105, 0.05);
    border-color: rgba(5, 150, 105, 0.18);
    color: #059669;
}

/* Telegram panel scroll target + highlight when reached from the connect prompt */
#tgPanel {
    scroll-margin-top: 20px;
}

.tg-panel-focus {
    animation: tg-panel-focus-pulse 2.4s ease-out;
}

@keyframes tg-panel-focus-pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    15% { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.55), 0 0 18px rgba(16, 185, 129, 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Activation gate steps */
.activate-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}
.activate-step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-2);
}
.activate-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(212, 160, 23, 0.15);
    border: 1px solid rgba(212, 160, 23, 0.4);
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Activation page footer links */
.act-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.act-link {
    font-size: 11px;
    color: var(--text-2);
    text-decoration: none;
    transition: color 0.15s;
}
.act-link:hover { color: var(--text); }
.act-link-tg { color: var(--gold); font-weight: 600; }
.act-link-tg:hover { color: #e8b828; }
.act-link-muted { color: var(--text-3); }
.act-link-muted:hover { color: var(--text-2); }
.act-link-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-3);
    opacity: 0.4;
    flex-shrink: 0;
}

/* panel-badge-danger for admin registration toggle */
.panel-badge-danger {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.3);
}
body.light-theme .panel-badge-danger {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.25);
}

/* Responsive (cache bust trigger) */
@media (max-width: 480px) {
    .activate-step { font-size: 12px; }
    .act-links { gap: 10px; }
    .act-link { font-size: 10px; }
}

/* Custom Deposit Success Toast Notification styling */
.toast-deposit {
    border-left-color: var(--green) !important;
    box-shadow: 0 0 15px rgba(46, 204, 64, 0.25) !important;
    background: rgba(46, 204, 64, 0.05) !important;
}
body.light-theme .toast-deposit {
    background: rgba(46, 204, 64, 0.05) !important;
    border-color: rgba(46, 204, 64, 0.2) !important;
}

/* ==========================================================================
   Multi-Category Colored Badge & Panel Themes (12 Beautiful Palettes)
   ========================================================================== */

/* 1. Activated Accounts (emerald) */
.prod-type.cat-activated, .prod-meta-mobile span.cat-activated {
    border-color: rgba(16, 185, 129, 0.25) !important;
    background: rgba(16, 185, 129, 0.08) !important;
    color: #10b981 !important;
}
body.light-theme .prod-type.cat-activated, body.light-theme .prod-meta-mobile span.cat-activated {
    border-color: rgba(5, 150, 105, 0.3) !important;
    background: rgba(5, 150, 105, 0.06) !important;
    color: #059669 !important;
}
.panel.panel-cat-activated {
    border-left: 2px solid #10b981 !important;
}
.panel.panel-cat-activated .panel-title {
    color: #10b981 !important;
}
body.light-theme .panel.panel-cat-activated {
    border-left-color: #059669 !important;
}
body.light-theme .panel.panel-cat-activated .panel-title {
    color: #059669 !important;
}
.cat-item.cat-item-activated.active {
    background: rgba(16, 185, 129, 0.08) !important;
    border-left: 2px solid #10b981 !important;
}
.cat-item.cat-item-activated.active .cat-name {
    color: #10b981 !important;
}
body.light-theme .cat-item.cat-item-activated.active {
    background: rgba(5, 150, 105, 0.06) !important;
    border-left-color: #059669 !important;
}
body.light-theme .cat-item.cat-item-activated.active .cat-name {
    color: #059669 !important;
}

/* 2. Seller Accounts (indigo) */
.prod-type.cat-seller, .prod-meta-mobile span.cat-seller {
    border-color: rgba(99, 102, 241, 0.25) !important;
    background: rgba(99, 102, 241, 0.08) !important;
    color: #818cf8 !important;
}
body.light-theme .prod-type.cat-seller, body.light-theme .prod-meta-mobile span.cat-seller {
    border-color: rgba(79, 70, 229, 0.3) !important;
    background: rgba(79, 70, 229, 0.06) !important;
    color: #4f46e5 !important;
}
.panel.panel-cat-seller {
    border-left: 2px solid #6366f1 !important;
}
.panel.panel-cat-seller .panel-title {
    color: #818cf8 !important;
}
body.light-theme .panel.panel-cat-seller {
    border-left-color: #4f46e5 !important;
}
body.light-theme .panel.panel-cat-seller .panel-title {
    color: #4f46e5 !important;
}
.cat-item.cat-item-seller.active {
    background: rgba(99, 102, 241, 0.08) !important;
    border-left: 2px solid #6366f1 !important;
}
.cat-item.cat-item-seller.active .cat-name {
    color: #818cf8 !important;
}
body.light-theme .cat-item.cat-item-seller.active {
    background: rgba(79, 70, 229, 0.06) !important;
    border-left-color: #4f46e5 !important;
}
body.light-theme .cat-item.cat-item-seller.active .cat-name {
    color: #4f46e5 !important;
}

/* 3. Forum Accounts (pink) */
.prod-type.cat-forum, .prod-meta-mobile span.cat-forum {
    border-color: rgba(236, 72, 153, 0.25) !important;
    background: rgba(236, 72, 153, 0.08) !important;
    color: #f472b6 !important;
}
body.light-theme .prod-type.cat-forum, body.light-theme .prod-meta-mobile span.cat-forum {
    border-color: rgba(219, 39, 119, 0.3) !important;
    background: rgba(219, 39, 119, 0.06) !important;
    color: #db2777 !important;
}
.panel.panel-cat-forum {
    border-left: 2px solid #ec4899 !important;
}
.panel.panel-cat-forum .panel-title {
    color: #f472b6 !important;
}
body.light-theme .panel.panel-cat-forum {
    border-left-color: #db2777 !important;
}
body.light-theme .panel.panel-cat-forum .panel-title {
    color: #db2777 !important;
}
.cat-item.cat-item-forum.active {
    background: rgba(236, 72, 153, 0.08) !important;
    border-left: 2px solid #ec4899 !important;
}
.cat-item.cat-item-forum.active .cat-name {
    color: #f472b6 !important;
}
body.light-theme .cat-item.cat-item-forum.active {
    background: rgba(219, 39, 119, 0.06) !important;
    border-left-color: #db2777 !important;
}
body.light-theme .cat-item.cat-item-forum.active .cat-name {
    color: #db2777 !important;
}

/* 4. CC/DUMPS Shop (amber) */
.prod-type.cat-ccdumps, .prod-meta-mobile span.cat-ccdumps {
    border-color: rgba(245, 158, 11, 0.25) !important;
    background: rgba(245, 158, 11, 0.08) !important;
    color: #fbbf24 !important;
}
body.light-theme .prod-type.cat-ccdumps, body.light-theme .prod-meta-mobile span.cat-ccdumps {
    border-color: rgba(217, 119, 6, 0.3) !important;
    background: rgba(217, 119, 6, 0.06) !important;
    color: #b45309 !important;
}
.panel.panel-cat-ccdumps {
    border-left: 2px solid #f59e0b !important;
}
.panel.panel-cat-ccdumps .panel-title {
    color: #fbbf24 !important;
}
body.light-theme .panel.panel-cat-ccdumps {
    border-left-color: #d97706 !important;
}
body.light-theme .panel.panel-cat-ccdumps .panel-title {
    color: #b45309 !important;
}
.cat-item.cat-item-ccdumps.active {
    background: rgba(245, 158, 11, 0.08) !important;
    border-left: 2px solid #f59e0b !important;
}
.cat-item.cat-item-ccdumps.active .cat-name {
    color: #fbbf24 !important;
}
body.light-theme .cat-item.cat-item-ccdumps.active {
    background: rgba(217, 119, 6, 0.06) !important;
    border-left-color: #d97706 !important;
}
body.light-theme .cat-item.cat-item-ccdumps.active .cat-name {
    color: #b45309 !important;
}

/* 5. Security (blue) */
.prod-type.cat-security, .prod-meta-mobile span.cat-security {
    border-color: rgba(59, 130, 246, 0.25) !important;
    background: rgba(59, 130, 246, 0.08) !important;
    color: #60a5fa !important;
}
body.light-theme .prod-type.cat-security, body.light-theme .prod-meta-mobile span.cat-security {
    border-color: rgba(37, 99, 235, 0.3) !important;
    background: rgba(37, 99, 235, 0.06) !important;
    color: #1d4ed8 !important;
}
.panel.panel-cat-security {
    border-left: 2px solid #3b82f6 !important;
}
.panel.panel-cat-security .panel-title {
    color: #60a5fa !important;
}
body.light-theme .panel.panel-cat-security {
    border-left-color: #2563eb !important;
}
body.light-theme .panel.panel-cat-security .panel-title {
    color: #1d4ed8 !important;
}
.cat-item.cat-item-security.active {
    background: rgba(59, 130, 246, 0.08) !important;
    border-left: 2px solid #3b82f6 !important;
}
.cat-item.cat-item-security.active .cat-name {
    color: #60a5fa !important;
}
body.light-theme .cat-item.cat-item-security.active {
    background: rgba(37, 99, 235, 0.06) !important;
    border-left-color: #2563eb !important;
}
body.light-theme .cat-item.cat-item-security.active .cat-name {
    color: #1d4ed8 !important;
}

/* 6. Banks shop (gold) */
.prod-type.cat-banks, .prod-meta-mobile span.cat-banks {
    border-color: rgba(234, 179, 8, 0.25) !important;
    background: rgba(234, 179, 8, 0.08) !important;
    color: #facc15 !important;
}
body.light-theme .prod-type.cat-banks, body.light-theme .prod-meta-mobile span.cat-banks {
    border-color: rgba(202, 138, 4, 0.3) !important;
    background: rgba(202, 138, 4, 0.06) !important;
    color: #a16207 !important;
}
.panel.panel-cat-banks {
    border-left: 2px solid #eab308 !important;
}
.panel.panel-cat-banks .panel-title {
    color: #facc15 !important;
}
body.light-theme .panel.panel-cat-banks {
    border-left-color: #ca8a04 !important;
}
body.light-theme .panel.panel-cat-banks .panel-title {
    color: #a16207 !important;
}
.cat-item.cat-item-banks.active {
    background: rgba(234, 179, 8, 0.08) !important;
    border-left: 2px solid #eab308 !important;
}
.cat-item.cat-item-banks.active .cat-name {
    color: #facc15 !important;
}
body.light-theme .cat-item.cat-item-banks.active {
    background: rgba(202, 138, 4, 0.06) !important;
    border-left-color: #ca8a04 !important;
}
body.light-theme .cat-item.cat-item-banks.active .cat-name {
    color: #a16207 !important;
}

/* 7. SSN/DOB Shop (cyan) */
.prod-type.cat-ssndob, .prod-meta-mobile span.cat-ssndob {
    border-color: rgba(6, 182, 212, 0.25) !important;
    background: rgba(6, 182, 212, 0.08) !important;
    color: #22d3ee !important;
}
body.light-theme .prod-type.cat-ssndob, body.light-theme .prod-meta-mobile span.cat-ssndob {
    border-color: rgba(8, 145, 178, 0.3) !important;
    background: rgba(8, 145, 178, 0.06) !important;
    color: #0e7490 !important;
}
.panel.panel-cat-ssndob {
    border-left: 2px solid #06b6d4 !important;
}
.panel.panel-cat-ssndob .panel-title {
    color: #22d3ee !important;
}
body.light-theme .panel.panel-cat-ssndob {
    border-left-color: #0891b2 !important;
}
body.light-theme .panel.panel-cat-ssndob .panel-title {
    color: #0e7490 !important;
}
.cat-item.cat-item-ssndob.active {
    background: rgba(6, 182, 212, 0.08) !important;
    border-left: 2px solid #06b6d4 !important;
}
.cat-item.cat-item-ssndob.active .cat-name {
    color: #22d3ee !important;
}
body.light-theme .cat-item.cat-item-ssndob.active {
    background: rgba(8, 145, 178, 0.06) !important;
    border-left-color: #0891b2 !important;
}
body.light-theme .cat-item.cat-item-ssndob.active .cat-name {
    color: #0e7490 !important;
}

/* 8. H4cker services (red) */
.prod-type.cat-hacker, .prod-meta-mobile span.cat-hacker {
    border-color: rgba(239, 68, 68, 0.25) !important;
    background: rgba(239, 68, 68, 0.08) !important;
    color: #f87171 !important;
}
body.light-theme .prod-type.cat-hacker, body.light-theme .prod-meta-mobile span.cat-hacker {
    border-color: rgba(220, 38, 38, 0.3) !important;
    background: rgba(220, 38, 38, 0.06) !important;
    color: #b91c1c !important;
}
.panel.panel-cat-hacker {
    border-left: 2px solid #ef4444 !important;
}
.panel.panel-cat-hacker .panel-title {
    color: #f87171 !important;
}
body.light-theme .panel.panel-cat-hacker {
    border-left-color: #dc2626 !important;
}
body.light-theme .panel.panel-cat-hacker .panel-title {
    color: #b91c1c !important;
}
.cat-item.cat-item-hacker.active {
    background: rgba(239, 68, 68, 0.08) !important;
    border-left: 2px solid #ef4444 !important;
}
.cat-item.cat-item-hacker.active .cat-name {
    color: #f87171 !important;
}
body.light-theme .cat-item.cat-item-hacker.active {
    background: rgba(220, 38, 38, 0.06) !important;
    border-left-color: #dc2626 !important;
}
body.light-theme .cat-item.cat-item-hacker.active .cat-name {
    color: #b91c1c !important;
}

/* 9. Checker CC/DUMP (rose) */
.prod-type.cat-checker, .prod-meta-mobile span.cat-checker {
    border-color: rgba(244, 63, 94, 0.25) !important;
    background: rgba(244, 63, 94, 0.08) !important;
    color: #fb7185 !important;
}
body.light-theme .prod-type.cat-checker, body.light-theme .prod-meta-mobile span.cat-checker {
    border-color: rgba(225, 29, 72, 0.3) !important;
    background: rgba(225, 29, 72, 0.06) !important;
    color: #be123c !important;
}
.panel.panel-cat-checker {
    border-left: 2px solid #f43f5e !important;
}
.panel.panel-cat-checker .panel-title {
    color: #fb7185 !important;
}
body.light-theme .panel.panel-cat-checker {
    border-left-color: #e11d48 !important;
}
body.light-theme .panel.panel-cat-checker .panel-title {
    color: #be123c !important;
}
.cat-item.cat-item-checker.active {
    background: rgba(244, 63, 94, 0.08) !important;
    border-left: 2px solid #f43f5e !important;
}
.cat-item.cat-item-checker.active .cat-name {
    color: #fb7185 !important;
}
body.light-theme .cat-item.cat-item-checker.active {
    background: rgba(225, 29, 72, 0.06) !important;
    border-left-color: #e11d48 !important;
}
body.light-theme .cat-item.cat-item-checker.active .cat-name {
    color: #be123c !important;
}

/* 10. Other (slate) */
.prod-type.cat-other, .prod-meta-mobile span.cat-other {
    border-color: rgba(148, 163, 184, 0.25) !important;
    background: rgba(148, 163, 184, 0.08) !important;
    color: #cbd5e1 !important;
}
body.light-theme .prod-type.cat-other, body.light-theme .prod-meta-mobile span.cat-other {
    border-color: rgba(100, 116, 139, 0.3) !important;
    background: rgba(100, 116, 139, 0.06) !important;
    color: #475569 !important;
}
.panel.panel-cat-other {
    border-left: 2px solid #94a3b8 !important;
}
.panel.panel-cat-other .panel-title {
    color: #cbd5e1 !important;
}
body.light-theme .panel.panel-cat-other {
    border-left-color: #64748b !important;
}
body.light-theme .panel.panel-cat-other .panel-title {
    color: #475569 !important;
}
.cat-item.cat-item-other.active {
    background: rgba(148, 163, 184, 0.08) !important;
    border-left: 2px solid #94a3b8 !important;
}
.cat-item.cat-item-other.active .cat-name {
    color: #cbd5e1 !important;
}
body.light-theme .cat-item.cat-item-other.active {
    background: rgba(100, 116, 139, 0.06) !important;
    border-left-color: #64748b !important;
}
body.light-theme .cat-item.cat-item-other.active .cat-name {
    color: #475569 !important;
}

/* 11. Weekly Picks (lime) */
.prod-type.cat-weekly, .prod-meta-mobile span.cat-weekly {
    border-color: rgba(132, 204, 22, 0.25) !important;
    background: rgba(132, 204, 22, 0.08) !important;
    color: #a3e635 !important;
}
body.light-theme .prod-type.cat-weekly, body.light-theme .prod-meta-mobile span.cat-weekly {
    border-color: rgba(101, 163, 13, 0.3) !important;
    background: rgba(101, 163, 13, 0.06) !important;
    color: #4d7c0f !important;
}
.panel.panel-cat-weekly {
    border-left: 2px solid #84cc16 !important;
}
.panel.panel-cat-weekly .panel-title {
    color: #a3e635 !important;
}
body.light-theme .panel.panel-cat-weekly {
    border-left-color: #65a30d !important;
}
body.light-theme .panel.panel-cat-weekly .panel-title {
    color: #4d7c0f !important;
}
.cat-item.cat-item-weekly.active {
    background: rgba(132, 204, 22, 0.08) !important;
    border-left: 2px solid #84cc16 !important;
}
.cat-item.cat-item-weekly.active .cat-name {
    color: #a3e635 !important;
}
body.light-theme .cat-item.cat-item-weekly.active {
    background: rgba(101, 163, 13, 0.06) !important;
    border-left-color: #65a30d !important;
}
body.light-theme .cat-item.cat-item-weekly.active .cat-name {
    color: #4d7c0f !important;
}

/* 12. DarkForge.PRO | Products (violet) */
.prod-type.cat-darkforge, .prod-meta-mobile span.cat-darkforge {
    border-color: rgba(139, 92, 246, 0.25) !important;
    background: rgba(139, 92, 246, 0.08) !important;
    color: #a78bfa !important;
}
body.light-theme .prod-type.cat-darkforge, body.light-theme .prod-meta-mobile span.cat-darkforge {
    border-color: rgba(124, 58, 237, 0.3) !important;
    background: rgba(124, 58, 237, 0.06) !important;
    color: #6d28d9 !important;
}
.panel.panel-cat-darkforge {
    border-left: 2px solid #8b5cf6 !important;
}
.panel.panel-cat-darkforge .panel-title {
    color: #a78bfa !important;
}
body.light-theme .panel.panel-cat-darkforge {
    border-left-color: #7c3aed !important;
}
body.light-theme .panel.panel-cat-darkforge .panel-title {
    color: #6d28d9 !important;
}
.cat-item.cat-item-darkforge.active {
    background: rgba(139, 92, 246, 0.08) !important;
    border-left: 2px solid #8b5cf6 !important;
}
.cat-item.cat-item-darkforge.active .cat-name {
    color: #a78bfa !important;
}
body.light-theme .cat-item.cat-item-darkforge.active {
    background: rgba(124, 58, 237, 0.06) !important;
    border-left-color: #7c3aed !important;
}
body.light-theme .cat-item.cat-item-darkforge.active .cat-name {
    color: #6d28d9 !important;
}

/* ==========================================================================
   Advanced Accounts Sidebar Categories Coloring (Hover & Badges)
   ========================================================================== */

.cat-item {
    border-left: 3px solid transparent !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 1. Activated Accounts */
.cat-item-activated .cat-count {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
}
body.light-theme .cat-item-activated .cat-count {
    background: rgba(5, 150, 105, 0.08) !important;
    color: #059669 !important;
}
.cat-item-activated:hover {
    background: rgba(16, 185, 129, 0.04) !important;
    border-left-color: rgba(16, 185, 129, 0.5) !important;
}
.cat-item-activated:hover .cat-name {
    color: #10b981 !important;
}
body.light-theme .cat-item-activated:hover {
    background: rgba(5, 150, 105, 0.03) !important;
    border-left-color: rgba(5, 150, 105, 0.4) !important;
}
body.light-theme .cat-item-activated:hover .cat-name {
    color: #059669 !important;
}
.cat-item-activated.active .cat-count {
    background: #10b981 !important;
    color: #ffffff !important;
}
body.light-theme .cat-item-activated.active .cat-count {
    background: #059669 !important;
    color: #ffffff !important;
}

/* 2. Seller Accounts */
.cat-item-seller .cat-count {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #818cf8 !important;
}
body.light-theme .cat-item-seller .cat-count {
    background: rgba(79, 70, 229, 0.08) !important;
    color: #4f46e5 !important;
}
.cat-item-seller:hover {
    background: rgba(99, 102, 241, 0.04) !important;
    border-left-color: rgba(99, 102, 241, 0.5) !important;
}
.cat-item-seller:hover .cat-name {
    color: #818cf8 !important;
}
body.light-theme .cat-item-seller:hover {
    background: rgba(79, 70, 229, 0.03) !important;
    border-left-color: rgba(79, 70, 229, 0.4) !important;
}
body.light-theme .cat-item-seller:hover .cat-name {
    color: #4f46e5 !important;
}
.cat-item-seller.active .cat-count {
    background: #6366f1 !important;
    color: #ffffff !important;
}
body.light-theme .cat-item-seller.active .cat-count {
    background: #4f46e5 !important;
    color: #ffffff !important;
}

/* 3. Forum Accounts */
.cat-item-forum .cat-count {
    background: rgba(236, 72, 153, 0.1) !important;
    color: #f472b6 !important;
}
body.light-theme .cat-item-forum .cat-count {
    background: rgba(219, 39, 119, 0.08) !important;
    color: #db2777 !important;
}
.cat-item-forum:hover {
    background: rgba(236, 72, 153, 0.04) !important;
    border-left-color: rgba(236, 72, 153, 0.5) !important;
}
.cat-item-forum:hover .cat-name {
    color: #f472b6 !important;
}
body.light-theme .cat-item-forum:hover {
    background: rgba(219, 39, 119, 0.03) !important;
    border-left-color: rgba(219, 39, 119, 0.4) !important;
}
body.light-theme .cat-item-forum:hover .cat-name {
    color: #db2777 !important;
}
.cat-item-forum.active .cat-count {
    background: #ec4899 !important;
    color: #ffffff !important;
}
body.light-theme .cat-item-forum.active .cat-count {
    background: #db2777 !important;
    color: #ffffff !important;
}

/* 4. CC/DUMPS Shop */
.cat-item-ccdumps .cat-count {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #fbbf24 !important;
}
body.light-theme .cat-item-ccdumps .cat-count {
    background: rgba(217, 119, 6, 0.08) !important;
    color: #b45309 !important;
}
.cat-item-ccdumps:hover {
    background: rgba(245, 158, 11, 0.04) !important;
    border-left-color: rgba(245, 158, 11, 0.5) !important;
}
.cat-item-ccdumps:hover .cat-name {
    color: #fbbf24 !important;
}
body.light-theme .cat-item-ccdumps:hover {
    background: rgba(217, 119, 6, 0.03) !important;
    border-left-color: rgba(217, 119, 6, 0.4) !important;
}
body.light-theme .cat-item-ccdumps:hover .cat-name {
    color: #b45309 !important;
}
.cat-item-ccdumps.active .cat-count {
    background: #f59e0b !important;
    color: #ffffff !important;
}
body.light-theme .cat-item-ccdumps.active .cat-count {
    background: #d97706 !important;
    color: #ffffff !important;
}

/* 5. Security */
.cat-item-security .cat-count {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
}
body.light-theme .cat-item-security .cat-count {
    background: rgba(37, 99, 235, 0.08) !important;
    color: #1d4ed8 !important;
}
.cat-item-security:hover {
    background: rgba(59, 130, 246, 0.04) !important;
    border-left-color: rgba(59, 130, 246, 0.5) !important;
}
.cat-item-security:hover .cat-name {
    color: #60a5fa !important;
}
body.light-theme .cat-item-security:hover {
    background: rgba(37, 99, 235, 0.03) !important;
    border-left-color: rgba(37, 99, 235, 0.4) !important;
}
body.light-theme .cat-item-security:hover .cat-name {
    color: #1d4ed8 !important;
}
.cat-item-security.active .cat-count {
    background: #3b82f6 !important;
    color: #ffffff !important;
}
body.light-theme .cat-item-security.active .cat-count {
    background: #2563eb !important;
    color: #ffffff !important;
}

/* 6. Banks shop */
.cat-item-banks .cat-count {
    background: rgba(234, 179, 8, 0.1) !important;
    color: #facc15 !important;
}
body.light-theme .cat-item-banks .cat-count {
    background: rgba(202, 138, 4, 0.08) !important;
    color: #a16207 !important;
}
.cat-item-banks:hover {
    background: rgba(234, 179, 8, 0.04) !important;
    border-left-color: rgba(234, 179, 8, 0.5) !important;
}
.cat-item-banks:hover .cat-name {
    color: #facc15 !important;
}
body.light-theme .cat-item-banks:hover {
    background: rgba(202, 138, 4, 0.03) !important;
    border-left-color: rgba(202, 138, 4, 0.4) !important;
}
body.light-theme .cat-item-banks:hover .cat-name {
    color: #a16207 !important;
}
.cat-item-banks.active .cat-count {
    background: #eab308 !important;
    color: #ffffff !important;
}
body.light-theme .cat-item-banks.active .cat-count {
    background: #ca8a04 !important;
    color: #ffffff !important;
}

/* 7. SSN/DOB Shop */
.cat-item-ssndob .cat-count {
    background: rgba(6, 182, 212, 0.1) !important;
    color: #22d3ee !important;
}
body.light-theme .cat-item-ssndob .cat-count {
    background: rgba(8, 145, 178, 0.08) !important;
    color: #0e7490 !important;
}
.cat-item-ssndob:hover {
    background: rgba(6, 182, 212, 0.04) !important;
    border-left-color: rgba(6, 182, 212, 0.5) !important;
}
.cat-item-ssndob:hover .cat-name {
    color: #22d3ee !important;
}
body.light-theme .cat-item-ssndob:hover {
    background: rgba(8, 145, 178, 0.03) !important;
    border-left-color: rgba(8, 145, 178, 0.4) !important;
}
body.light-theme .cat-item-ssndob:hover .cat-name {
    color: #0e7490 !important;
}
.cat-item-ssndob.active .cat-count {
    background: #06b6d4 !important;
    color: #ffffff !important;
}
body.light-theme .cat-item-ssndob.active .cat-count {
    background: #0891b2 !important;
    color: #ffffff !important;
}

/* 8. H4cker services */
.cat-item-hacker .cat-count {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important;
}
body.light-theme .cat-item-hacker .cat-count {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #b91c1c !important;
}
.cat-item-hacker:hover {
    background: rgba(239, 68, 68, 0.04) !important;
    border-left-color: rgba(239, 68, 68, 0.5) !important;
}
.cat-item-hacker:hover .cat-name {
    color: #f87171 !important;
}
body.light-theme .cat-item-hacker:hover {
    background: rgba(220, 38, 38, 0.03) !important;
    border-left-color: rgba(220, 38, 38, 0.4) !important;
}
body.light-theme .cat-item-hacker:hover .cat-name {
    color: #b91c1c !important;
}
.cat-item-hacker.active .cat-count {
    background: #ef4444 !important;
    color: #ffffff !important;
}
body.light-theme .cat-item-hacker.active .cat-count {
    background: #dc2626 !important;
    color: #ffffff !important;
}

/* 9. Checker CC/DUMP */
.cat-item-checker .cat-count {
    background: rgba(244, 63, 94, 0.1) !important;
    color: #fb7185 !important;
}
body.light-theme .cat-item-checker .cat-count {
    background: rgba(225, 29, 72, 0.08) !important;
    color: #be123c !important;
}
.cat-item-checker:hover {
    background: rgba(244, 63, 94, 0.04) !important;
    border-left-color: rgba(244, 63, 94, 0.5) !important;
}
.cat-item-checker:hover .cat-name {
    color: #fb7185 !important;
}
body.light-theme .cat-item-checker:hover {
    background: rgba(225, 29, 72, 0.03) !important;
    border-left-color: rgba(225, 29, 72, 0.4) !important;
}
body.light-theme .cat-item-checker:hover .cat-name {
    color: #be123c !important;
}
.cat-item-checker.active .cat-count {
    background: #f43f5e !important;
    color: #ffffff !important;
}
body.light-theme .cat-item-checker.active .cat-count {
    background: #e11d48 !important;
    color: #ffffff !important;
}

/* 10. Other */
.cat-item-other .cat-count {
    background: rgba(148, 163, 184, 0.1) !important;
    color: #cbd5e1 !important;
}
body.light-theme .cat-item-other .cat-count {
    background: rgba(100, 116, 139, 0.08) !important;
    color: #475569 !important;
}
.cat-item-other:hover {
    background: rgba(148, 163, 184, 0.04) !important;
    border-left-color: rgba(148, 163, 184, 0.5) !important;
}
.cat-item-other:hover .cat-name {
    color: #cbd5e1 !important;
}
body.light-theme .cat-item-other:hover {
    background: rgba(100, 116, 139, 0.03) !important;
    border-left-color: rgba(100, 116, 139, 0.4) !important;
}
body.light-theme .cat-item-other:hover .cat-name {
    color: #475569 !important;
}
.cat-item-other.active .cat-count {
    background: #94a3b8 !important;
    color: #ffffff !important;
}
body.light-theme .cat-item-other.active .cat-count {
    background: #64748b !important;
    color: #ffffff !important;
}

/* 11. Weekly Picks */
.cat-item-weekly .cat-count {
    background: rgba(132, 204, 22, 0.1) !important;
    color: #a3e635 !important;
}
body.light-theme .cat-item-weekly .cat-count {
    background: rgba(101, 163, 13, 0.08) !important;
    color: #4d7c0f !important;
}
.cat-item-weekly:hover {
    background: rgba(132, 204, 22, 0.04) !important;
    border-left-color: rgba(132, 204, 22, 0.5) !important;
}
.cat-item-weekly:hover .cat-name {
    color: #a3e635 !important;
}
body.light-theme .cat-item-weekly:hover {
    background: rgba(101, 163, 13, 0.03) !important;
    border-left-color: rgba(101, 163, 13, 0.4) !important;
}
body.light-theme .cat-item-weekly:hover .cat-name {
    color: #4d7c0f !important;
}
.cat-item-weekly.active .cat-count {
    background: #84cc16 !important;
    color: #ffffff !important;
}
body.light-theme .cat-item-weekly.active .cat-count {
    background: #65a30d !important;
    color: #ffffff !important;
}

/* 12. DarkForge.PRO | Products */
.cat-item-darkforge .cat-count {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #a78bfa !important;
}
body.light-theme .cat-item-darkforge .cat-count {
    background: rgba(124, 58, 237, 0.08) !important;
    color: #6d28d9 !important;
}
.cat-item-darkforge:hover {
    background: rgba(139, 92, 246, 0.04) !important;
    border-left-color: rgba(139, 92, 246, 0.5) !important;
}
.cat-item-darkforge:hover .cat-name {
    color: #a78bfa !important;
}
body.light-theme .cat-item-darkforge:hover {
    background: rgba(124, 58, 237, 0.03) !important;
    border-left-color: rgba(124, 58, 237, 0.4) !important;
}
body.light-theme .cat-item-darkforge:hover .cat-name {
    color: #6d28d9 !important;
}
.cat-item-darkforge.active .cat-count {
    background: #8b5cf6 !important;
    color: #ffffff !important;
}
body.light-theme .cat-item-darkforge.active .cat-count {
    background: #7c3aed !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Category Page Branding Themes (Variables and Class overrides)
   ========================================================================== */

/* --- ACCOUNTS THEME (GREEN: #10b981) --- */
body.theme-accounts {
    --gold: #10b981 !important;
    --gold-dim: #059669 !important;
    --theme-color-rgb: 16, 185, 129;
}
body.light-theme.theme-accounts {
    --gold: #059669 !important;
    --gold-dim: #047857 !important;
    --theme-color-rgb: 5, 150, 105;
}
body.theme-accounts .stats-vault, body.theme-accounts .stats-vault-pro {
    border-left-color: #10b981 !important;
}
body.light-theme.theme-accounts .stats-vault, body.light-theme.theme-accounts .stats-vault-pro {
    border-left-color: #059669 !important;
}
body.theme-accounts .pv-dot {
    background: #10b981 !important;
    box-shadow: 0 0 6px #10b981 !important;
}
body.theme-accounts .vault-link {
    color: #10b981 !important;
}
body.theme-accounts .vault-link:hover {
    color: #059669 !important;
}

/* --- P2P THEME (PURPLE: #8b5cf6) --- */
body.theme-p2p {
    --gold: #8b5cf6 !important;
    --gold-dim: #7c3aed !important;
    --theme-color-rgb: 139, 92, 246;
}
body.light-theme.theme-p2p {
    --gold: #6d28d9 !important;
    --gold-dim: #5b21b6 !important;
    --theme-color-rgb: 124, 58, 237;
}
body.theme-p2p .stats-vault, body.theme-p2p .stats-vault-pro, body.theme-p2p .p2p-stats {
    border-left-color: #8b5cf6 !important;
}
body.light-theme.theme-p2p .stats-vault, body.light-theme.theme-p2p .stats-vault-pro, body.light-theme.theme-p2p .p2p-stats {
    border-left-color: #6d28d9 !important;
}
body.theme-p2p .pv-dot, body.theme-p2p .p2p-dot {
    background: #8b5cf6 !important;
    box-shadow: 0 0 6px #8b5cf6 !important;
}
body.theme-p2p .vault-link, body.theme-p2p .p2p-link {
    color: #8b5cf6 !important;
}
body.theme-p2p .vault-link:hover, body.theme-p2p .p2p-link:hover {
    color: #7c3aed !important;
}
body.theme-p2p .p2p-stat-value.gold,
body.theme-p2p .p2p-stat-value.green {
    color: #8b5cf6 !important;
}

/* --- CREDIT CARDS THEME (AMBER: #f59e0b) --- */
body.theme-cc {
    --gold: #f59e0b !important;
    --gold-dim: #d97706 !important;
    --theme-color-rgb: 245, 158, 11;
}
body.light-theme.theme-cc {
    --gold: #b45309 !important;
    --gold-dim: #92400e !important;
    --theme-color-rgb: 217, 119, 6;
}
body.theme-cc .stats-vault, body.theme-cc .stats-vault-pro {
    border-left-color: #f59e0b !important;
}
body.light-theme.theme-cc .stats-vault, body.light-theme.theme-cc .stats-vault-pro {
    border-left-color: #b45309 !important;
}
body.theme-cc .pv-dot {
    background: #f59e0b !important;
    box-shadow: 0 0 6px #f59e0b !important;
}
body.theme-cc .vault-link {
    color: #f59e0b !important;
}
body.theme-cc .vault-link:hover {
    color: #d97706 !important;
}

/* --- SSN / FULLZ THEME (BLUE: #3b82f6) --- */
body.theme-ssn {
    --gold: #3b82f6 !important;
    --gold-dim: #2563eb !important;
    --theme-color-rgb: 59, 130, 246;
}
body.light-theme.theme-ssn {
    --gold: #1d4ed8 !important;
    --gold-dim: #1e40af !important;
    --theme-color-rgb: 37, 99, 235;
}
body.theme-ssn .stats-vault, body.theme-ssn .stats-vault-pro {
    border-left-color: #3b82f6 !important;
}
body.light-theme.theme-ssn .stats-vault, body.light-theme.theme-ssn .stats-vault-pro {
    border-left-color: #1d4ed8 !important;
}
body.theme-ssn .pv-dot {
    background: #3b82f6 !important;
    box-shadow: 0 0 6px #3b82f6 !important;
}
body.theme-ssn .vault-link {
    color: #3b82f6 !important;
}
body.theme-ssn .vault-link:hover {
    color: #2563eb !important;
}

body.theme-news {
    --gold: var(--news-color) !important;
    --gold-dim: var(--news-color-dim) !important;
    --theme-color-rgb: var(--news-color-rgb);
}
body.light-theme.theme-news {
    --gold: var(--news-color) !important;
    --gold-dim: var(--news-color-dim) !important;
    --theme-color-rgb: var(--news-color-rgb);
}


/* --- GENERAL COMPONENT COLOR OVERRIDES UNDER THEMED PAGES --- */

/* Buttons */
body[class*="theme-"] .btn-primary,
body[class*="theme-"] .prod-buy,
body[class*="theme-"] .upgrade-btn,
body[class*="theme-"] .empty-btn,
body[class*="theme-"] .submit-btn,
body[class*="theme-"] .p2p-btn-action,
body[class*="theme-"] .p2pf-btn,
body[class*="theme-"] .acc-search-btn,
body[class*="theme-"] .p2p-btn,
body[class*="theme-"] .rules-btn,
body[class*="theme-"] .become-btn,
body[class*="theme-"] .msg-form-btn.submit {
    background: var(--gold-dim) !important;
    border-color: var(--gold) !important;
    color: #ffffff !important;
}

body[class*="theme-"] .btn-primary:hover,
body[class*="theme-"] .prod-buy:hover,
body[class*="theme-"] .upgrade-btn:hover,
body[class*="theme-"] .empty-btn:hover,
body[class*="theme-"] .submit-btn:hover,
body[class*="theme-"] .p2p-btn-action:hover,
body[class*="theme-"] .p2pf-btn:hover,
body[class*="theme-"] .acc-search-btn:hover,
body[class*="theme-"] .p2p-btn:hover,
body[class*="theme-"] .rules-btn:hover,
body[class*="theme-"] .become-btn:hover,
body[class*="theme-"] .msg-form-btn.submit:hover {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(var(--theme-color-rgb), 0.25) !important;
}

/* Form controls on focus */
body[class*="theme-"] input:focus,
body[class*="theme-"] select:focus,
body[class*="theme-"] textarea:focus,
body[class*="theme-"] .acc-search-wrap:focus-within,
body[class*="theme-"] .p2p-search-wrap:focus-within {
    border-color: var(--gold) !important;
    box-shadow: 0 0 8px rgba(var(--theme-color-rgb), 0.15) !important;
}

/* Headers & titles */
body[class*="theme-"] .panel-head,
body[class*="theme-"] .side-head,
body[class*="theme-"] .p2pf-head {
    border-bottom-color: var(--gold-dim) !important;
}
body[class*="theme-"] .panel-title,
body[class*="theme-"] .side-head,
body[class*="theme-"] .p2pf-title {
    color: var(--gold) !important;
}

/* Alerts */
body[class*="theme-"] .idx-alert-premium {
    border-left-color: var(--gold) !important;
}
body[class*="theme-"] .idx-alert-premium::before {
    background: linear-gradient(90deg, var(--gold) 0%, rgba(var(--theme-color-rgb), 0) 100%) !important;
}
body[class*="theme-"] .idx-alert-premium .idx-alert-title {
    color: var(--gold) !important;
}
body[class*="theme-"] .idx-action-premium {
    color: var(--gold) !important;
    border-color: rgba(var(--theme-color-rgb), 0.4) !important;
    background: rgba(var(--theme-color-rgb), 0.08) !important;
}
body[class*="theme-"] .idx-action-premium:hover {
    color: #fff !important;
    background: var(--gold-dim) !important;
    border-color: var(--gold) !important;
}

/* Active HUD Highlights & Tabs */
body[class*="theme-"] .acc-nav-link.active,
body[class*="theme-"] .p2p-nav-link.active,
body[class*="theme-"] .nav-link.active {
    color: var(--gold) !important;
    background: rgba(var(--theme-color-rgb), 0.04) !important;
    border: 1px solid rgba(var(--theme-color-rgb), 0.1) !important;
}

/* ==========================================================================
   Additional Theme-Specific UI Component Overrides
   ========================================================================== */

/* --- P2P DETAIL PAGE --- */
body.theme-p2p .p2p-buy-btn,
body.theme-p2p .p2p-buy-btn:not(.disabled) {
    background: var(--gold) !important;
    color: #ffffff !important;
}
body.theme-p2p .p2p-buy-btn:hover:not(.disabled) {
    background: var(--gold-dim) !important;
}

body.theme-p2p .p2p-view-price {
    color: var(--gold) !important;
}
body.theme-p2p .p2p-view-stock strong {
    color: var(--gold) !important;
}

body.theme-p2p .p2p-panel-title,
body.theme-p2p .p2p-view-section-title {
    color: var(--gold) !important;
}

body.theme-p2p .p2p-seller-verified {
    color: var(--gold) !important;
}

body.theme-p2p .p2p-footer {
    color: var(--gold) !important;
}
body.theme-p2p .p2p-footer:hover {
    color: var(--gold-dim) !important;
}

/* --- ACCOUNTS PRODUCT/BUY PAGES --- */
body.theme-accounts .pv-btn-deposit {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
}
body.theme-accounts .pv-btn-deposit:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #ffffff !important;
}
body.light-theme.theme-accounts .pv-btn-deposit {
    background: rgba(5, 150, 105, 0.1) !important;
    border-color: rgba(5, 150, 105, 0.3) !important;
    color: #059669 !important;
}
body.light-theme.theme-accounts .pv-btn-deposit:hover {
    background: rgba(5, 150, 105, 0.2) !important;
    color: #ffffff !important;
}

body.theme-accounts .pv-upsell-link {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
}
body.theme-accounts .pv-upsell-link:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #ffffff !important;
}
body.light-theme.theme-accounts .pv-upsell-link {
    background: rgba(5, 150, 105, 0.1) !important;
    border-color: rgba(5, 150, 105, 0.3) !important;
    color: #059669 !important;
}
body.light-theme.theme-accounts .pv-upsell-link:hover {
    background: rgba(5, 150, 105, 0.2) !important;
}

/* --- CREDIT CARDS THEME SPECIFIC OVERRIDES --- */
body.theme-cc .cc-btn-search {
    background: linear-gradient(135deg, #f59e0b, #b45309) !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}
body.theme-cc .cc-btn-search:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}
body.light-theme.theme-cc .cc-btn-search {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    border-color: #d97706 !important;
}

body.theme-cc .cc-btn-clear,
body.theme-cc .cc-btn-reset {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
}
body.theme-cc .cc-btn-clear:hover,
body.theme-cc .cc-btn-reset:hover {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #ffffff !important;
}
body.light-theme.theme-cc .cc-btn-clear,
body.light-theme.theme-cc .cc-btn-reset {
    background: rgba(217, 119, 6, 0.1) !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
    color: #d97706 !important;
}
body.light-theme.theme-cc .cc-btn-clear:hover,
body.light-theme.theme-cc .cc-btn-reset:hover {
    background: rgba(217, 119, 6, 0.2) !important;
}

body.theme-cc .cc-btn-buy {
    background: linear-gradient(135deg, #f59e0b, #b45309) !important;
    color: #ffffff !important;
}
body.theme-cc .cc-btn-buy:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}
body.light-theme.theme-cc .cc-btn-buy {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
}

body.theme-cc .cc-card-price,
body.theme-cc .cc-balance-value {
    color: #f59e0b !important;
}
body.light-theme.theme-cc .cc-card-price,
body.light-theme.theme-cc .cc-balance-value {
    color: #d97706 !important;
}

body.theme-cc .cc-deposit-btn {
    background: linear-gradient(135deg, #f59e0b, #b45309) !important;
}
body.theme-cc .cc-deposit-btn:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}
body.light-theme.theme-cc .cc-deposit-btn {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
}

body.theme-cc .cc-search-field input:focus,
body.theme-cc .cc-search-field select:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.15) !important;
}
body.light-theme.theme-cc .cc-search-field input:focus,
body.light-theme.theme-cc .cc-search-field select:focus {
    border-color: #d97706 !important;
    box-shadow: 0 0 8px rgba(217, 119, 6, 0.15) !important;
}

body.theme-cc .cc-card-item:hover {
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15) !important;
}
body.light-theme.theme-cc .cc-card-item:hover {
    border-color: rgba(217, 119, 6, 0.5) !important;
    box-shadow: 0 8px 25px rgba(217, 119, 6, 0.15) !important;
}

body.theme-cc .cc-extra-badge.cc-extra-blue {
    color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.15) !important;
}
body.light-theme.theme-cc .cc-extra-badge.cc-extra-blue {
    color: #d97706 !important;
    background: rgba(217, 119, 6, 0.15) !important;
}

body.theme-cc .cc-nav-link.active,
body.theme-cc .acc-nav-link.active {
    color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.04) !important;
    border: 1px solid rgba(245, 158, 11, 0.1) !important;
}
body.light-theme.theme-cc .cc-nav-link.active,
body.light-theme.theme-cc .acc-nav-link.active {
    color: #d97706 !important;
    background: rgba(217, 119, 6, 0.04) !important;
    border: 1px solid rgba(217, 119, 6, 0.1) !important;
}

/* --- SSN / FULLZ THEME SPECIFIC OVERRIDES --- */
body.theme-ssn .cc-btn-search {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}
body.theme-ssn .cc-btn-search:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}
body.light-theme.theme-ssn .cc-btn-search {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    border-color: #2563eb !important;
}

body.theme-ssn .cc-btn-clear,
body.theme-ssn .cc-btn-reset {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #60a5fa !important;
}
body.theme-ssn .cc-btn-clear:hover,
body.theme-ssn .cc-btn-reset:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #ffffff !important;
}
body.light-theme.theme-ssn .cc-btn-clear,
body.light-theme.theme-ssn .cc-btn-reset {
    background: rgba(37, 99, 235, 0.1) !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
    color: #2563eb !important;
}
body.light-theme.theme-ssn .cc-btn-clear:hover,
body.light-theme.theme-ssn .cc-btn-reset:hover {
    background: rgba(37, 99, 235, 0.2) !important;
}

body.theme-ssn .cc-btn-buy {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #ffffff !important;
}
body.theme-ssn .cc-btn-buy:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}
body.light-theme.theme-ssn .cc-btn-buy {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
}

body.theme-ssn .cc-card-price,
body.theme-ssn .cc-balance-value {
    color: #3b82f6 !important;
}
body.light-theme.theme-ssn .cc-card-price,
body.light-theme.theme-ssn .cc-balance-value {
    color: #2563eb !important;
}

body.theme-ssn .cc-deposit-btn {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
}
body.theme-ssn .cc-deposit-btn:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}
body.light-theme.theme-ssn .cc-deposit-btn {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
}

body.theme-ssn .cc-search-field input:focus,
body.theme-ssn .cc-search-field select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.15) !important;
}
body.light-theme.theme-ssn .cc-search-field input:focus,
body.light-theme.theme-ssn .cc-search-field select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.15) !important;
}

body.theme-ssn .cc-card-item:hover {
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15) !important;
}
body.light-theme.theme-ssn .cc-card-item:hover {
    border-color: rgba(37, 99, 235, 0.5) !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.15) !important;
}

body.theme-ssn .cc-nav-link.active,
body.theme-ssn .acc-nav-link.active {
    color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.04) !important;
    border: 1px solid rgba(59, 130, 246, 0.1) !important;
}
body.light-theme.theme-ssn .cc-nav-link.active,
body.light-theme.theme-ssn .acc-nav-link.active {
    color: #2563eb !important;
    background: rgba(37, 99, 235, 0.04) !important;
    border: 1px solid rgba(37, 99, 235, 0.1) !important;
}

/* --- GENERIC SIDEBAR / FILTER BUTTONS --- */
body[class*="theme-"] .filter-btn,
body[class*="theme-"] .prod-empty-btn,
body[class*="theme-"] .copy-btn,
body[class*="theme-"] .side-btn,
body[class*="theme-"] .filter-btn-reset {
    background: var(--gold-dim) !important;
    border-color: var(--gold) !important;
    color: #ffffff !important;
}
body[class*="theme-"] .filter-btn:hover,
body[class*="theme-"] .prod-empty-btn:hover,
body[class*="theme-"] .copy-btn:hover,
body[class*="theme-"] .side-btn:hover,
body[class*="theme-"] .filter-btn-reset:hover {
    background: var(--gold) !important;
}

.tg-broadcast-alert { margin-bottom: 16px; }

.tg-broadcast-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.38fr);
    gap: 16px;
    align-items: start;
}

.tg-broadcast-form,
.tg-broadcast-help-body { padding: 16px; }

.tg-broadcast-label {
    display: block;
    margin: 0 0 8px;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.tg-broadcast-message {
    width: 100%;
    min-height: 180px;
    resize: vertical;
    line-height: 1.55;
}

.tg-broadcast-file {
    display: block;
    width: 100%;
    padding: 10px;
    color: var(--text-2);
    background: var(--bg-2);
    border: 1px dashed var(--border);
    font: inherit;
}

.tg-broadcast-file::file-selector-button {
    margin-right: 10px;
    padding: 6px 10px;
    border: 1px solid rgba(6, 182, 212, 0.5);
    background: rgba(6, 182, 212, 0.12);
    color: #22d3ee;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.tg-broadcast-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin: 7px 0 18px;
    color: var(--text-3);
    font-size: 10px;
}

.tg-broadcast-preview {
    margin: -6px 0 18px;
    padding: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
}

.tg-broadcast-preview-media {
    display: block;
    width: 100%;
    max-width: 360px;
    max-height: 250px;
    object-fit: contain;
    background: #000;
}

.tg-broadcast-warning {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-left: 3px solid #f59e0b;
    background: rgba(245, 158, 11, 0.06);
    color: var(--text-2);
    font-size: 11px;
    line-height: 1.5;
}

.tg-broadcast-warning strong {
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.tg-broadcast-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.tg-broadcast-submit {
    min-width: 260px;
    padding: 12px 18px;
}

.tg-broadcast-help-body { display: grid; }

.tg-broadcast-help-row {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-3);
    font-size: 11px;
    line-height: 1.45;
}

.tg-broadcast-help-row:last-child { border-bottom: 0; }

.tg-broadcast-help-row strong {
    color: var(--text-1);
    font-size: 11px;
}

body.light-theme .tg-broadcast-file,
body.light-theme .tg-broadcast-preview {
    background: #f9fafb;
    border-color: #d1d5db;
}

body.light-theme .tg-broadcast-file::file-selector-button {
    border-color: rgba(8, 145, 178, 0.4);
    background: rgba(8, 145, 178, 0.08);
    color: #0e7490;
}

body.light-theme .tg-broadcast-warning {
    border-color: rgba(217, 119, 6, 0.3);
    background: rgba(245, 158, 11, 0.06);
    color: #4b5563;
}

body.light-theme .tg-broadcast-warning strong { color: #b45309; }

@media (max-width: 800px) {
    .tg-broadcast-layout { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .tg-broadcast-form,
    .tg-broadcast-help-body { padding: 12px; }

    .tg-broadcast-actions { justify-content: stretch; }

    .tg-broadcast-submit {
        width: 100%;
        min-width: 0;
    }
}

.mob-link-btn {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.auth-page {
    overflow-x: hidden;
}

.auth-box {
    min-width: 0;
}

.auth-secret-wrapper {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.auth-secret-input {
    width: 100%;
    max-width: 100%;
}

.auth-secret-hint {
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.auth-captcha-hint {
    overflow-wrap: anywhere;
}

.captcha-grid {
    width: min(100%, 200px);
}

.msg-container {
    min-height: 0;
}

.msg-sidebar {
    min-width: 0;
}

.msg-chat-info {
    min-width: 0;
}

.msg-chat-name {
    flex-wrap: wrap;
}

.msg-chat-subject {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-create-form-wrap {
    min-width: 0;
}

@media (max-width: 768px) {
    .msg-mobile-tabs {
        position: sticky;
        top: 0;
        z-index: 3;
    }

    .msg-container {
        min-height: calc(100vh - 150px);
        min-height: calc(100dvh - 150px);
        border: 1px solid var(--border);
        overflow: hidden;
    }

    .msg-sidebar {
        min-height: 0;
    }

    .msg-conversations {
        max-height: calc(100vh - 250px);
        max-height: calc(100dvh - 250px);
        min-height: 0;
    }

    .msg-chat {
        min-height: calc(100vh - 150px);
        min-height: calc(100dvh - 150px);
        height: calc(100vh - 150px);
        height: calc(100dvh - 150px);
    }

    .msg-messages {
        max-height: none;
        min-height: 0;
        padding: 14px 12px;
    }

    .msg-reply-form {
        flex-direction: column;
        gap: 10px;
    }

    .msg-reply-input {
        width: 100%;
        height: auto;
        min-height: 88px;
        max-height: 160px;
    }

    .msg-send-btn {
        width: 100%;
        padding: 10px 14px;
    }

    .msg-chat-head {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 12px;
        gap: 10px;
    }

    .msg-chat-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .msg-conv {
        padding: 12px;
        align-items: flex-start;
    }

    .msg-avatar {
        width: 38px;
        height: 38px;
    }

    .msg-conv-meta {
        align-items: flex-start;
        gap: 4px;
    }

    .msg-pagination {
        flex-wrap: wrap;
    }

    .msg-create-form-wrap {
        padding: 16px;
    }

    .msg-form-static {
        flex-wrap: wrap;
    }

    .msg-form-actions {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .msg-form-btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .auth-page {
        padding: 24px 0;
    }

    .auth-secret-hint {
        font-size: 8px;
        padding: 4px 8px;
    }
}

@media (max-width: 1024px) {
    .header-acts {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .header-acts .btn.balance,
    .header-acts .balance-seller {
        order: 1;
    }

    .header-acts .sound-toggle-btn,
    .header-acts .theme-toggle-btn,
    .header-acts .btn-pgp,
    .header-acts .btn.gold {
        order: 2;
    }

    .header-acts .mobile-btn {
        order: 3;
        margin-left: 4px;
    }

    .header-acts .btn-pgp,
    .header-acts .btn.gold {
        min-width: 32px;
        padding: 0 10px;
    }
}

@media (max-width: 768px) {
    .header-acts {
        gap: 6px;
    }

    .header-acts .btn.balance,
    .header-acts .balance-seller {
        padding: 0 10px;
        font-size: 9px;
    }

    .header-acts .btn-pgp,
    .header-acts .btn.gold,
    .header-acts .sound-toggle-btn,
    .header-acts .theme-toggle-btn,
    .header-acts .mobile-btn {
        width: 32px;
        min-width: 32px;
        padding: 0;
        justify-content: center;
        font-size: 0;
        position: relative;
    }

    .header-acts .btn-pgp {
        border-color: rgba(212, 160, 23, 0.38);
        color: var(--gold);
        box-shadow: inset 0 0 0 1px rgba(212, 160, 23, 0.08);
    }

    .header-acts .btn.gold {
        background: rgba(212, 160, 23, 0.12);
        color: var(--gold);
    }

    .header-acts .sound-toggle-btn .sound-icon-on,
    .header-acts .sound-toggle-btn .sound-icon-off,
    .header-acts .theme-toggle-btn .theme-icon-dark,
    .header-acts .theme-toggle-btn .theme-icon-light {
        font-size: 14px;
    }

    .header-acts .btn-pgp::before {
        content: '\1F4AC';
        font-size: 14px;
        line-height: 1;
    }

    .header-acts .btn.gold::before {
        content: '\27A2';
        font-size: 14px;
        line-height: 1;
    }

    .header-acts .btn-pgp .support-status {
        position: absolute;
        top: 6px;
        left: 6px;
    }

    .header-acts .btn-pgp .msg-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        margin: 0;
    }
}

@media (max-width: 480px) {
    .header-acts .btn.balance,
    .header-acts .balance-seller {
        max-width: calc(100vw - 86px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 1024px) {
    .header-acts .header-support-btn,
    .header-acts .header-exit-btn {
        order: 2;
        min-width: 32px;
        padding: 0 10px;
    }
}

@media (max-width: 768px) {
    .header-acts .btn.gold:not(.header-exit-btn) {
        width: auto;
        min-width: 0;
        padding: 0 14px;
        justify-content: center;
        font-size: 10px;
        position: static;
    }

    .header-acts .btn.gold:not(.header-exit-btn)::before {
        content: none;
    }

    .header-acts .header-support-btn,
    .header-acts .header-exit-btn {
        width: 32px;
        min-width: 32px;
        padding: 0;
        justify-content: center;
        font-size: 0;
        position: relative;
    }

    .header-acts .header-support-btn {
        border-color: rgba(212, 160, 23, 0.38);
        color: var(--gold);
        box-shadow: inset 0 0 0 1px rgba(212, 160, 23, 0.08);
    }

    .header-acts .header-exit-btn {
        background: rgba(212, 160, 23, 0.12);
        color: var(--gold);
    }

    .header-acts .header-support-btn::before {
        content: '\1F4AC';
        font-size: 14px;
        line-height: 1;
    }

    .header-acts .header-exit-btn::before {
        content: '\27A2';
        font-size: 14px;
        line-height: 1;
    }

    .header-acts .header-support-btn .support-status {
        position: absolute;
        top: 6px;
        left: 6px;
    }

    .header-acts .header-support-btn .msg-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        margin: 0;
    }
}

/* P2P items in Latest Inventory */
.prod-p2p-row {
    border-left: 2px solid #8b5cf6;
}

.prod-name-p2p {
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
}

.prod-p2p-badge {
    display: inline-block;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 0 4px rgba(139, 92, 246, 0.4);
}

.prod-p2p-badge-mob {
    display: inline-block;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.prod-sub-p2p {
    font-size: 10px;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}

.prod-p2p-seller {
    color: var(--text-2);
}

.prod-p2p-rating {
    color: #fbbf24;
    font-size: 10px;
}

.prod-type.cat-p2p {
    color: #a855f7;
}

.prod-buy-p2p {
    background: linear-gradient(135deg, #8b5cf6, #a855f7) !important;
    color: #fff !important;
}

.prod-buy-p2p:hover {
    background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

body.light-theme .prod-p2p-row {
    border-left-color: #8b5cf6;
}

body.light-theme .prod-p2p-badge,
body.light-theme .prod-p2p-badge-mob {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: #fff;
}

body.light-theme .prod-sub-p2p {
    color: #6b7280;
}

body.light-theme .prod-p2p-seller {
    color: #6b7280;
}

body.light-theme .prod-type.cat-p2p {
    color: #7c3aed;
}