/* css/boutique-theme.css - Unified Lemon Squeezy & Framer Boutique Design System */
/* Fonts are loaded asynchronously via head link tags to prevent render blocking */

/* ============================================================
   1. GLOBAL TOKENS & RESET FOR BOUTIQUE THEME
   ============================================================ */
:root,
body,
body.ai-future-theme,
body.boutique-store-body,
body.account-store-body,
body.proxy-store-body,
body.my-proxies-body,
body.contact-page,
body.settings-page,
body.balance-page,
body.vietshare-store-body,
body.qr-page,
body.web-consult-page,
body.service-detail-page,
body.bank-transfer-page,
body.bank-channel-page,
body.crypto-transfer-page,
body.binance-transfer-page {
    /* Canvas & Surfaces */
    --bq-canvas: #fbfbfa;
    --bq-surface: #ffffff;
    --bq-surface-soft: #f4f3ef;
    --bq-surface-elevated: #ffffff;
    --bq-surface-card: #ffffff;
    --bq-border: rgba(24, 24, 27, 0.08);
    --bq-border-strong: rgba(24, 24, 27, 0.14);
    --bq-border-hover: rgba(112, 71, 235, 0.35);

    /* Brand Accents (Lemon Squeezy signature) */
    --bq-primary: #7047eb;
    --bq-primary-hover: #5d35d9;
    --bq-primary-active: #4a25c4;
    --bq-primary-soft: #f5f2fe;
    --bq-primary-glow: rgba(112, 71, 235, 0.18);

    /* Functional Accents */
    --bq-coral: #f43f5e;
    --bq-coral-soft: #fff1f2;
    --bq-mint: #10b981;
    --bq-mint-soft: #ecfdf5;
    --bq-amber: #f59e0b;
    --bq-amber-soft: #fffbeb;
    --bq-cyan: #06b6d4;
    --bq-cyan-soft: #ecfeff;

    /* Text Colors - High Contrast Charcoal/Slate */
    --bq-text-title: #18181b;
    --bq-text-body: #374151;
    --bq-text-muted: #64748b;
    --bq-text-faint: #94a3b8;
    --bq-text-white: #ffffff;

    /* Shadows & Radii */
    --bq-radius-card: 20px;
    --bq-radius-inner: 14px;
    --bq-radius-sm: 10px;
    --bq-radius-pill: 999px;
    
    --bq-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --bq-shadow-card: 0 2px 6px -1px rgba(15, 23, 42, 0.04), 0 10px 24px -4px rgba(15, 23, 42, 0.05);
    --bq-shadow-card-hover: 0 20px 40px -12px rgba(112, 71, 235, 0.18), 0 8px 16px -4px rgba(15, 23, 42, 0.04);
    --bq-shadow-dropdown: 0 16px 36px -6px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.04);

    /* Typography */
    --font-bq-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-bq-serif: 'Instrument Serif', Georgia, serif;
    --font-bq-mono: 'JetBrains Mono', monospace;

    /* Overriding legacy dashboard CSS vars globally */
    --primary: var(--bq-primary) !important;
    --primary-dark: var(--bq-primary-hover) !important;
    --primary-light: #9d80f5 !important;
    --primary-50: var(--bq-primary-soft) !important;
    --success: var(--bq-mint) !important;
    --warning: var(--bq-amber) !important;
    --danger: var(--bq-coral) !important;
    --info: #6366f1 !important;
    --bg-body: var(--bq-canvas) !important;
    --bg-card: var(--bq-surface) !important;
    --bg-header: rgba(255, 255, 255, 0.9) !important;
    --bg-hover: var(--bq-surface-soft) !important;
    --bg-input: #ffffff !important;
    --border-color: var(--bq-border) !important;
    --text-primary: #18181b !important;
    --text-secondary: #374151 !important;
    --text-muted: #64748b !important;
    --text-light: #64748b !important;
    --text-tertiary: #94a3b8 !important;

    /* Account Store Overrides */
    --acc-bg: #fbfbfa !important;
    --acc-surface: #ffffff !important;
    --acc-surface-raised: #ffffff !important;
    --acc-border: rgba(24, 24, 27, 0.08) !important;
    --acc-border-strong: rgba(112, 71, 235, 0.35) !important;
    --acc-text: #18181b !important;
    --acc-muted: #64748b !important;

    /* Proxy Store Overrides */
    --px-bg: #fbfbfa !important;
    --px-surface: #ffffff !important;
    --px-surface-raised: #ffffff !important;
    --px-border: rgba(24, 24, 27, 0.08) !important;
    --px-border-strong: rgba(112, 71, 235, 0.35) !important;
    --px-text: #18181b !important;
    --px-muted: #64748b !important;

    /* VietShare Store Overrides */
    --vs-bg: #fbfbfa !important;
    --vs-surface: #ffffff !important;
    --vs-surface-raised: #ffffff !important;
    --vs-border: rgba(24, 24, 27, 0.08) !important;
    --vs-border-strong: rgba(112, 71, 235, 0.35) !important;
    --vs-text: #18181b !important;
    --vs-muted: #64748b !important;

    /* Settings Page Overrides */
    --settings-bg: #fbfbfa !important;
    --settings-surface: #ffffff !important;
    --settings-surface-raised: #ffffff !important;
    --settings-surface-muted: #f4f3ef !important;
    --settings-border: rgba(24, 24, 27, 0.08) !important;
    --settings-border-strong: rgba(112, 71, 235, 0.35) !important;
    --settings-text: #18181b !important;
    --settings-text-muted: #64748b !important;
    --settings-text-soft: #94a3b8 !important;
    --settings-accent: #7047eb !important;

    /* Contact Page Overrides */
    --contact-bg: #fbfbfa !important;
    --contact-surface: #ffffff !important;
    --contact-surface-soft: #f4f3ef !important;
    --contact-surface-raised: #ffffff !important;
    --contact-border: rgba(24, 24, 27, 0.08) !important;
    --contact-border-strong: rgba(112, 71, 235, 0.35) !important;
    --contact-text: #18181b !important;
    --contact-muted: #64748b !important;
    --contact-faint: #94a3b8 !important;
    --contact-accent: #7047eb !important;
    --contact-accent-strong: #5d35d9 !important;

    /* Balance Page Overrides */
    --balance-bg: #fbfbfa !important;
    --balance-surface: #ffffff !important;
    --balance-surface-strong: #ffffff !important;
    --balance-line: rgba(24, 24, 27, 0.08) !important;
    --balance-text: #18181b !important;
    --balance-muted: #64748b !important;
    --balance-soft: #64748b !important;
    --balance-accent: #7047eb !important;
    --balance-income: #10b981 !important;
    --balance-expense: #f43f5e !important;

    /* Bank & Deposit Overrides */
    --transfer-bg: #fbfbfa !important;
    --transfer-surface: #ffffff !important;
    --transfer-surface-raised: #ffffff !important;
    --transfer-surface-muted: #f4f3ef !important;
    --transfer-border: rgba(24, 24, 27, 0.08) !important;
    --transfer-border-strong: rgba(112, 71, 235, 0.35) !important;
    --transfer-text: #18181b !important;
    --transfer-text-muted: #64748b !important;
    --transfer-text-soft: #94a3b8 !important;
    --transfer-accent: #7047eb !important;
    --transfer-accent-strong: #5d35d9 !important;
    --transfer-accent-soft: #f5f2fe !important;
}

/* ============================================================
   2. OVERRIDE AI-FUTURE-THEME & BASE BODY STYLES
   ============================================================ */
body,
body.ai-future-theme,
body.boutique-store-body,
body.account-store-body,
body.proxy-store-body,
body.my-proxies-body,
body.contact-page,
body.settings-page,
body.balance-page,
body.vietshare-store-body,
body.qr-page,
body.web-consult-page,
body.service-detail-page,
body.bank-transfer-page,
body.bank-channel-page,
body.crypto-transfer-page,
body.binance-transfer-page {
    background-color: var(--bq-canvas) !important;
    background-image: none !important;
    color: var(--bq-text-body) !important;
    font-family: var(--font-bq-sans) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Disable harsh dark grid scanlines & ambient glows */
body::before,
body.ai-future-theme::before,
body.boutique-store-body::before,
body.contact-page::before,
body.settings-page::before,
body.balance-page::before,
.acc-ambient-glow,
.ambient-glow,
.ambient-glow-emerald {
    display: none !important;
}

.dashboard-container,
body.ai-future-theme .dashboard-container,
body.boutique-store-body .dashboard-container {
    background: var(--bq-canvas) !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    min-height: 100vh !important;
    overflow: visible !important;
}

.main-content,
body.ai-future-theme .main-content,
body.boutique-store-body .main-content,
body.account-store-body .main-content,
body.proxy-store-body .main-content,
body.my-proxies-body .main-content,
body.contact-page .main-content,
body.settings-page .main-content,
body.balance-page .main-content {
    background: var(--bq-canvas) !important;
    width: calc(100% - 260px) !important;
    max-width: calc(100% - 260px) !important;
    margin-left: 260px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    overflow: visible !important;
}

@media (max-width: 1024px) {
    .main-content,
    body.ai-future-theme .main-content,
    body.boutique-store-body .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* Full-width stretch to edges across all wrappers */
.content-wrapper,
body.ai-future-theme .content-wrapper,
body.boutique-store-body .content-wrapper,
.acc-store-wrapper,
.px-store-wrapper,
body.ai-future-theme .acc-store-wrapper,
body.ai-future-theme .px-store-wrapper,
.acc-wrap,
.px-wrap,
.vietshare-wrap,
.qr-shell,
.ai-consult-shell,
.settings-content,
.settings-shell,
.settings-container,
.balance-page-content,
.orders-table-container,
.deposit-container,
.service-detail-container,
.service-detail-page .content-wrapper,
.buff-container,
.admin-page-container,
.admin-page-shell,
.admin-main-wrap,
.bot-container,
.cron-content,
.report-page .content-wrapper,
.firewall-container,
.manage-orders-container,
.orders-container,
.contact-info-container,
.contact-page .content-wrapper,
.settings-page .content-wrapper.settings-content,
.bank-transfer-content,
.bank-transfer-page .bank-transfer-content,
.product-detail-container,
.captcha-shell,
.wrap,
.shell {
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 32px 60px !important;
    box-sizing: border-box !important;
}

/* ============================================================
   3. SIDEBAR - MODERN BOUTIQUE PORCELAIN & PURPLE
   ============================================================ */
.sidebar,
body.ai-future-theme .sidebar,
.admin-sidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(24, 24, 27, 0.08) !important;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.03) !important;
    color: #18181b !important;
}

.sidebar::before,
.sidebar::after,
.admin-sidebar::before,
.admin-sidebar::after {
    display: none !important;
}

/* Sidebar Logo */
.sidebar .sidebar-logo,
.sidebar-logo,
body.ai-future-theme .sidebar-logo {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(24, 24, 27, 0.06) !important;
    padding: 24px 20px 20px !important;
}

.sidebar .sidebar-logo h2,
.sidebar-logo h2,
body.ai-future-theme .sidebar-logo h2 {
    font-family: var(--font-bq-sans) !important;
    font-weight: 800 !important;
    font-size: 21px !important;
    letter-spacing: -0.02em !important;
    color: #18181b !important;
    -webkit-text-fill-color: #18181b !important;
    background: none !important;
    text-shadow: none !important;
}

.sidebar .sidebar-logo .logo-subtitle,
body.ai-future-theme .logo-subtitle {
    font-family: var(--font-bq-sans) !important;
    font-size: 11.5px !important;
    color: #71717a !important;
    letter-spacing: 0.01em !important;
    margin-top: 4px !important;
}

/* Sidebar Nav Links */
.sidebar-menu a,
body.ai-future-theme .sidebar-menu a,
.admin-sidebar .admin-nav-link {
    font-family: var(--font-bq-sans) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #52525b !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}

.sidebar-menu a i,
body.ai-future-theme .sidebar-menu a i,
.admin-sidebar .admin-nav-link i {
    color: #71717a !important;
}

.sidebar-menu a:hover,
body.ai-future-theme .sidebar-menu a:hover,
.admin-sidebar .admin-nav-link:hover {
    color: #18181b !important;
    background: #f4f4f5 !important;
    transform: translateX(2px) !important;
}

.sidebar-menu a:hover i,
body.ai-future-theme .sidebar-menu a:hover i,
.admin-sidebar .admin-nav-link:hover i {
    color: #18181b !important;
}

.sidebar-menu a.active,
body.ai-future-theme .sidebar-menu a.active,
.admin-sidebar .admin-nav-link.active {
    color: #7047eb !important;
    background: #f3effe !important;
    border: 1px solid rgba(112, 71, 235, 0.22) !important;
    box-shadow: 0 2px 8px rgba(112, 71, 235, 0.08) !important;
    font-weight: 700 !important;
}

.sidebar-menu a.active i,
body.ai-future-theme .sidebar-menu a.active i,
.admin-sidebar .admin-nav-link.active i {
    color: #7047eb !important;
}

/* Menu Badges */
.menu-badge,
.nav-badge,
body.ai-future-theme .menu-badge,
body.ai-future-theme .nav-badge {
    border-radius: var(--bq-radius-pill) !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}

/* Submenu */
.sidebar .sidebar-menu .submenu,
body.ai-future-theme .sidebar .sidebar-menu .submenu {
    background: #faf9f6 !important;
    border-radius: 10px !important;
    padding: 4px 6px !important;
    margin: 4px 0 4px 10px !important;
    border-left: 2px solid rgba(112, 71, 235, 0.3) !important;
}

.sidebar .sidebar-menu .submenu a,
body.ai-future-theme .sidebar .sidebar-menu .submenu a {
    color: #71717a !important;
    font-size: 12.5px !important;
    padding: 7px 11px !important;
}

.sidebar .sidebar-menu .submenu a:hover,
body.ai-future-theme .sidebar .sidebar-menu .submenu a:hover {
    color: #18181b !important;
    background: rgba(24, 24, 27, 0.05) !important;
}

.sidebar .sidebar-menu .submenu a.active,
body.ai-future-theme .sidebar .sidebar-menu .submenu a.active {
    color: #7047eb !important;
    background: #ffffff !important;
    border-color: rgba(112, 71, 235, 0.25) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Sidebar Footer / User section */
.sidebar-footer,
.sidebar .sidebar-footer,
body.ai-future-theme .sidebar-footer {
    background: #ffffff !important;
    border-top: 1px solid rgba(24, 24, 27, 0.06) !important;
    padding: 14px 14px 16px !important;
}

.sidebar-footer .user-info,
.sidebar .user-info,
body.ai-future-theme .user-info {
    background: #faf9f6 !important;
    border: 1px solid rgba(24, 24, 27, 0.06) !important;
    border-radius: 13px !important;
    padding: 8px 10px !important;
}

.sidebar-footer .user-name,
.sidebar .user-name,
body.ai-future-theme .user-name {
    color: #18181b !important;
    font-weight: 700 !important;
}

.sidebar-footer .user-role,
.sidebar .user-role,
body.ai-future-theme .user-role {
    color: #059669 !important;
    font-weight: 600 !important;
}

.sidebar-footer .logout-btn,
.sidebar .logout-btn,
body.ai-future-theme .logout-btn {
    background: #ffffff !important;
    border: 1px solid rgba(24, 24, 27, 0.08) !important;
    color: #71717a !important;
}

.sidebar-footer .logout-btn:hover,
.sidebar .logout-btn:hover,
body.ai-future-theme .logout-btn:hover {
    background: #fef2f2 !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

/* ============================================================
   4. TOP NAVBAR - BOUTIQUE GLASSMORPHISM
   ============================================================ */
.top-navbar,
body.ai-future-theme .top-navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--bq-border) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04) !important;
    height: 68px !important;
    padding: 0 28px !important;
    transform: translateZ(0);
    will-change: transform;
    contain: layout style;
}

.top-navbar .search-input,
body.ai-future-theme .top-navbar .search-input {
    background: var(--bq-surface-soft) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: var(--bq-radius-pill) !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 13.5px !important;
    color: var(--bq-text-title) !important;
    padding: 8px 18px 8px 40px !important;
}

.top-navbar .search-input:focus,
body.ai-future-theme .top-navbar .search-input:focus {
    background: #ffffff !important;
    border-color: var(--bq-primary) !important;
    box-shadow: 0 0 0 3px var(--bq-primary-glow) !important;
}

.top-navbar .search-icon,
body.ai-future-theme .top-navbar .search-icon {
    color: var(--bq-text-faint) !important;
}

/* Profile Pill */
.nav-profile-btn,
body.ai-future-theme .nav-profile-btn {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    color: var(--bq-text-title) !important;
    border-radius: var(--bq-radius-pill) !important;
    padding: 4px 14px 4px 5px !important;
    box-shadow: var(--bq-shadow-sm) !important;
    transition: all 0.2s ease !important;
}

.nav-profile-btn:hover,
body.ai-future-theme .nav-profile-btn:hover {
    background: var(--bq-surface-soft) !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
}

.nav-avatar,
body.ai-future-theme .nav-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--bq-primary) 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
}

.nav-profile-name,
body.ai-future-theme .nav-profile-name {
    color: var(--bq-text-title) !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
}

.nav-profile-balance,
body.ai-future-theme .nav-profile-balance {
    color: var(--bq-mint) !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}

/* Profile Dropdown */
.nav-dropdown,
body.ai-future-theme .nav-dropdown {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--bq-shadow-dropdown) !important;
    padding: 8px !important;
}

.nav-dropdown-item,
body.ai-future-theme .nav-dropdown-item {
    color: var(--bq-text-title) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 9px 12px !important;
    transition: all 0.18s ease !important;
}

.nav-dropdown-item:hover,
body.ai-future-theme .nav-dropdown-item:hover {
    background: var(--bq-surface-soft) !important;
    color: var(--bq-primary) !important;
}

/* ============================================================
   5. CARDS, STATS & BANNERS (BOUTIQUE UPGRADE)
   ============================================================ */
/* Stat Cards */
.stat-card,
body.ai-future-theme .stat-card {
    background: var(--bq-surface) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: var(--bq-radius-card) !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 22px !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.stat-card:hover,
body.ai-future-theme .stat-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--bq-shadow-card-hover) !important;
    border-color: var(--bq-border-hover) !important;
}

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

.stat-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bq-text-muted) !important;
    text-transform: none !important;
}

.stat-icon,
body.ai-future-theme .stat-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--bq-radius-pill) !important;
    background: var(--bq-surface-soft) !important;
    color: var(--bq-primary) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 14px !important;
}

.stat-value,
body.ai-future-theme .stat-value {
    font-family: var(--font-bq-sans) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--bq-text-title) !important;
    letter-spacing: -0.02em !important;
}

.stat-trend {
    font-size: 12px !important;
    color: var(--bq-text-faint) !important;
    margin-top: 8px !important;
}

/* Welcome Banner (Dashboard) */
.welcome-banner,
body.ai-future-theme .welcome-banner {
    position: relative !important;
    background: linear-gradient(135deg, #ffffff 0%, #faf8f5 55%, #f4f0ec 100%) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 32px 36px !important;
    color: var(--bq-text-title) !important;
    overflow: hidden !important;
}

.welcome-banner::before {
    content: '' !important;
    position: absolute !important;
    top: -40px !important;
    right: -40px !important;
    width: 220px !important;
    height: 220px !important;
    background: radial-gradient(circle, rgba(112, 71, 235, 0.12) 0%, transparent 70%) !important;
    pointer-events: none !important;
    filter: blur(24px) !important;
}

.banner-title,
body.ai-future-theme .banner-title {
    font-family: var(--font-bq-sans) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--bq-text-title) !important;
    letter-spacing: -0.02em !important;
}

.banner-subtitle,
body.ai-future-theme .banner-subtitle {
    color: var(--bq-text-muted) !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
}

/* Section Title & Headers */
.section-title,
.table-title,
body.ai-future-theme .section-title,
body.ai-future-theme .table-title {
    font-family: var(--font-bq-sans) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--bq-text-title) !important;
    letter-spacing: -0.02em !important;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

/* ============================================================
   6. MASTER BOUTIQUE TABLE DESIGN SYSTEM (UNIVERSAL & HIGH CONTRAST)
   ============================================================ */

/* 6.1 Table Containers, Wrappers & Cards */
.table-container,
.orders-table-container,
.service-table-container,
.table-wrap,
.data-table-wrap,
.table-responsive,
.overflow-x-auto,
.overflow-auto,
.px-table-wrapper,
.acc-table-wrap,
.report-table,
.cp-table-wrap,
.recent-panel,
.voucher-table-wrap,
.service-table-wrap,
.history-table-wrap,
.panel:has(table),
.section-card:has(table),
body.ai-future-theme .table-container,
body.ai-future-theme .orders-table-container,
body.ai-future-theme .table-wrap,
body.ai-future-theme .overflow-x-auto {
    background: #ffffff !important;
    border: 1px solid rgba(24, 24, 27, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03), 0 10px 24px -4px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 24px !important;
}

/* 6.2 Table Header Bar (Above Table) */
.table-header,
.panel-header,
.orders-header,
.report-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(24, 24, 27, 0.06) !important;
    padding: 20px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.table-title,
.panel-title,
.orders-title,
.section-title,
body.ai-future-theme .table-title {
    margin: 0 !important;
    font-family: var(--font-bq-sans), 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #18181b !important;
    letter-spacing: -0.025em !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.table-title small,
.table-title span,
.panel-subtitle {
    font-family: var(--font-bq-sans), 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    letter-spacing: normal !important;
}

/* 6.3 Master Table Root */
table,
.table,
.data-table,
.orders-table,
.tx-table,
.px-data-table,
.acc-table,
.admin-table,
.table-admin,
.cp-table,
.service-table,
.service-order-table,
.report-table table,
.voucher-table,
.product-table,
.history-table,
.settings-table,
.vs-table,
.review-table,
.transaction-table,
.proxy-table,
.pmc-table,
.cost-table,
.bank-table,
body.ai-future-theme table,
body.ai-future-theme .data-table,
body.ai-future-theme .orders-table,
body.ai-future-theme .tx-table,
body.ai-future-theme .px-data-table,
body.ai-future-theme .admin-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    text-align: left !important;
    font-family: var(--font-bq-sans), 'Plus Jakarta Sans', sans-serif !important;
    background: #ffffff !important;
}

/* 6.4 Column Headers (thead th) */
table thead,
.data-table thead,
.orders-table thead,
.tx-table thead,
.px-data-table thead,
.acc-table thead,
.admin-table thead,
.table-admin thead,
.cp-table thead,
.service-table thead,
.product-table thead,
.history-table thead,
.settings-table thead,
.vs-table thead {
    background: #fafaf9 !important;
}

table thead th,
table th,
.data-table th,
.orders-table th,
.tx-table th,
.px-data-table th,
.acc-table th,
.admin-table th,
.table-admin th,
.cp-table th,
.service-table th,
.service-order-table th,
.report-table table th,
.voucher-table th,
.product-table th,
.history-table th,
.settings-table th,
.vs-table th,
.review-table th,
.transaction-table th,
.proxy-table th,
.pmc-table th,
.cost-table th,
.bank-table th,
body.ai-future-theme table th,
body.ai-future-theme .data-table th,
body.ai-future-theme .orders-table th,
body.ai-future-theme .tx-table th,
body.ai-future-theme .admin-table th {
    background: #fafaf9 !important;
    color: #475569 !important;
    font-family: var(--font-bq-sans), 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid rgba(24, 24, 27, 0.08) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    text-align: left !important;
}

/* 6.5 Table Data Cells (tbody td) */
table tbody td,
table td,
.data-table td,
.orders-table td,
.tx-table td,
.px-data-table td,
.acc-table td,
.admin-table td,
.table-admin td,
.cp-table td,
.service-table td,
.service-order-table td,
.report-table table td,
.voucher-table td,
.product-table td,
.history-table td,
.settings-table td,
.vs-table td,
.review-table td,
.transaction-table td,
.proxy-table td,
.pmc-table td,
.cost-table td,
.bank-table td,
body.ai-future-theme table td,
body.ai-future-theme .data-table td,
body.ai-future-theme .orders-table td,
body.ai-future-theme .tx-table td,
body.ai-future-theme .admin-table td {
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(24, 24, 27, 0.06) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    color: #18181b !important;
    font-family: var(--font-bq-sans), 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    background: transparent !important;
}

/* 6.6 Row Hover & Selected States */
table tbody tr,
.data-table tbody tr,
.orders-table tbody tr,
.tx-table tbody tr,
.px-data-table tbody tr,
.acc-table tbody tr,
.admin-table tbody tr,
.table-admin tbody tr,
.cp-table tbody tr,
.service-table tbody tr,
.product-table tbody tr,
.history-table tbody tr,
.settings-table tbody tr,
.vs-table tbody tr {
    transition: background-color 0.15s ease !important;
    background: transparent !important;
}

table tbody tr:hover td,
.data-table tbody tr:hover td,
.orders-table tbody tr:hover td,
.tx-table tbody tr:hover td,
.px-data-table tbody tr:hover td,
.acc-table tbody tr:hover td,
.admin-table tbody tr:hover td,
.table-admin tbody tr:hover td,
.cp-table tbody tr:hover td,
.service-table tbody tr:hover td,
.product-table tbody tr:hover td,
.history-table tbody tr:hover td,
.settings-table tbody tr:hover td,
.vs-table tbody tr:hover td,
table tbody tr:hover,
.data-table tbody tr:hover,
.orders-table tbody tr:hover,
.tx-table tbody tr:hover {
    background: #fbfbfa !important;
}

table tbody tr.selected td,
.px-data-table tr.selected td {
    background: #f5f2fe !important;
}

table tbody tr:last-child td,
.data-table tbody tr:last-child td,
.orders-table tbody tr:last-child td,
.tx-table tbody tr:last-child td,
.px-data-table tbody tr:last-child td,
.acc-table tbody tr:last-child td,
.admin-table tbody tr:last-child td,
.table-admin tbody tr:last-child td,
.service-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* 6.7 Badges & Status Pills in Tables */
.status-badge,
.badge,
.transaction-kind,
.px-status-badge,
.order-status,
.chip,
.badge-status,
.cp-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 11px !important;
    border-radius: 999px !important;
    font-family: var(--font-bq-sans), 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

/* Active / Success / Income / Completed */
.status-badge.active,
.status-badge.completed,
.status-badge.success,
.status-active,
.badge-success,
.transaction-kind.income,
.badge.badge-success,
.chip.active,
.chip.success,
.cp-tag.green {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

/* Warning / Pending / Waiting */
.status-badge.pending,
.status-pending,
.badge-pending,
.badge.badge-warning,
.chip.pending,
.chip.warning,
.cp-tag.amber {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

/* Danger / Expired / Failed / Cancelled / Expense */
.status-badge.expired,
.status-badge.failed,
.status-badge.cancelled,
.status-expired,
.badge-failed,
.badge-danger,
.transaction-kind.expense,
.badge.badge-danger,
.chip.danger,
.chip.expired,
.cp-tag.red {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid rgba(244, 63, 94, 0.25) !important;
}

/* Permanent / Lifetime / Primary / Info */
.status-permanent,
.badge-primary,
.badge-info,
.chip.primary,
.cp-tag.blue {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
}

/* Neutral */
.transaction-kind.neutral,
.badge-neutral,
.chip.neutral {
    background: #f4f3ef !important;
    color: #475569 !important;
    border: 1px solid rgba(24, 24, 27, 0.1) !important;
}

/* 6.8 Codes, Transaction IDs, License Keys & Endpoints */
.license-key,
.transaction-id,
.mono,
.acc-table-code,
.endpoint-chip,
.cp-copy-code,
.code-cell,
table code {
    font-family: var(--font-bq-mono), 'JetBrains Mono', monospace !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #18181b !important;
    background: #f4f3ef !important;
    border: 1px solid rgba(24, 24, 27, 0.08) !important;
    border-radius: 8px !important;
    padding: 3px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    vertical-align: middle !important;
}

.transaction-id {
    color: #7047eb !important;
    background: #f5f2fe !important;
    border-color: rgba(112, 71, 235, 0.16) !important;
}

.note-preview-inline {
    font-family: var(--font-bq-sans), 'Plus Jakarta Sans', sans-serif !important;
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    display: inline-block !important;
    max-width: 220px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

/* 6.9 Product Cells & User Cells in Tables */
.product-cell,
.user-cell {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.product-cell img,
.user-cell img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    border: 1px solid rgba(24, 24, 27, 0.08) !important;
    flex-shrink: 0 !important;
}

.product-cell span,
.product-name {
    font-weight: 700 !important;
    color: #18181b !important;
    font-size: 0.9rem !important;
}

.transaction-amount {
    font-family: var(--font-bq-sans), 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.94rem !important;
    white-space: nowrap !important;
}

.transaction-amount.income { color: #059669 !important; }
.transaction-amount.expense { color: #e11d48 !important; }
.transaction-amount.neutral { color: #64748b !important; }

/* 6.10 Action Buttons in Tables */
table .action-btn,
.action-btn.compact,
.btn-admin-sm,
.btn-action,
.btn-action-view {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-family: var(--font-bq-sans), 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    border: 1px solid rgba(24, 24, 27, 0.1) !important;
    background: #ffffff !important;
    color: #18181b !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

table .action-btn:hover,
.action-btn.compact:hover,
.btn-admin-sm:hover,
.btn-action:hover {
    background: #f4f3ef !important;
    border-color: rgba(24, 24, 27, 0.22) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08) !important;
    color: #18181b !important;
}

table .action-btn.primary,
.action-btn.compact.primary,
.btn-admin-primary {
    background: #7047eb !important;
    color: #ffffff !important;
    border-color: #7047eb !important;
    box-shadow: 0 2px 4px rgba(112, 71, 235, 0.2) !important;
}

table .action-btn.primary:hover,
.action-btn.compact.primary:hover,
.btn-admin-primary:hover {
    background: #5d35d9 !important;
    color: #ffffff !important;
    border-color: #5d35d9 !important;
}

/* 6.11 Table Empty States */
.no-orders,
.no-data,
.order-empty,
.empty-state {
    padding: 56px 24px !important;
    text-align: center !important;
    background: #ffffff !important;
}

.no-orders i,
.no-data i,
.order-empty i,
.empty-state i {
    font-size: 2.75rem !important;
    color: #7047eb !important;
    opacity: 0.85 !important;
    margin-bottom: 16px !important;
    display: inline-block !important;
}

.no-orders h3,
.no-data h3,
.order-empty h3,
.empty-state h3 {
    font-family: var(--font-bq-sans), 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #18181b !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 8px !important;
}

.no-orders p,
.no-data p,
.order-empty p,
.empty-state p {
    font-size: 0.92rem !important;
    color: #64748b !important;
    max-width: 440px !important;
    margin: 0 auto 20px !important;
    line-height: 1.6 !important;
}

/* 6.12 Table Responsive Controls & Thin Scrollbars */
.overflow-x-auto::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.px-table-wrapper::-webkit-scrollbar,
.acc-table-wrap::-webkit-scrollbar {
    height: 6px !important;
}

.overflow-x-auto::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.px-table-wrapper::-webkit-scrollbar-track,
.acc-table-wrap::-webkit-scrollbar-track {
    background: #f4f3ef !important;
    border-radius: 3px !important;
}

.overflow-x-auto::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.px-table-wrapper::-webkit-scrollbar-thumb,
.acc-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(24, 24, 27, 0.15) !important;
    border-radius: 3px !important;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.px-table-wrapper::-webkit-scrollbar-thumb:hover,
.acc-table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(112, 71, 235, 0.45) !important;
}

/* ============================================================
   7. BUTTONS & TACTILE CONTROLS (LEMON SQUEEZY STYLE)
   ============================================================ */
.action-btn,
.btn-primary,
.cta-btn,
body.ai-future-theme .action-btn.primary,
body.ai-future-theme .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 18px !important;
    border-radius: var(--bq-radius-pill) !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: var(--bq-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--bq-primary) !important;
    box-shadow: 0 4px 14px rgba(112, 71, 235, 0.25) !important;
}

.action-btn:hover,
.btn-primary:hover,
.cta-btn:hover,
body.ai-future-theme .action-btn.primary:hover,
body.ai-future-theme .btn-primary:hover {
    background: var(--bq-primary-hover) !important;
    border-color: var(--bq-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(112, 71, 235, 0.35) !important;
}

/* Secondary / Ghost button */
.action-btn:not(.primary),
.btn-secondary {
    background: #ffffff !important;
    color: var(--bq-text-title) !important;
    border: 1px solid var(--bq-border) !important;
    box-shadow: var(--bq-shadow-sm) !important;
}

.action-btn:not(.primary):hover,
.btn-secondary:hover {
    background: var(--bq-surface-soft) !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
    color: var(--bq-text-title) !important;
    transform: translateY(-1px) !important;
}

/* Form Inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea,
.filter-input {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 14px !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 13.5px !important;
    color: var(--bq-text-title) !important;
    padding: 10px 16px !important;
    transition: all 0.2s ease !important;
    box-shadow: var(--bq-shadow-sm) !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--bq-primary) !important;
    box-shadow: 0 0 0 3px var(--bq-primary-glow) !important;
}

/* ============================================================
   8. MODALS & POPUPS
   ============================================================ */
.modal-content,
.rental-popup,
.notification-popup,
body.ai-future-theme .modal-content,
body.ai-future-theme .rental-popup,
body.ai-future-theme .notification-popup {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.22) !important;
    color: var(--bq-text-title) !important;
}

.modal-header {
    border-bottom: 1px solid var(--bq-border) !important;
    padding: 20px 24px !important;
}

.modal-title {
    font-family: var(--font-bq-sans) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bq-text-title) !important;
}

.modal-footer {
    border-top: 1px solid var(--bq-border) !important;
    padding: 16px 24px !important;
}

/* ============================================================
   9. QUICK LINKS & INSIGHT CARDS
   ============================================================ */
.quick-link-card,
.insight-card,
body.ai-future-theme .quick-link-card,
body.ai-future-theme .insight-card {
    background: var(--bq-surface) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: var(--bq-radius-card) !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 20px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.quick-link-card:hover,
.insight-card:hover,
body.ai-future-theme .quick-link-card:hover,
body.ai-future-theme .insight-card:hover {
    transform: translateY(-3px) !important;
    border-color: var(--bq-border-hover) !important;
    box-shadow: var(--bq-shadow-card-hover) !important;
}

.quick-link-icon,
body.ai-future-theme .quick-link-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--bq-radius-inner) !important;
    background: var(--bq-primary-soft) !important;
    color: var(--bq-primary) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 18px !important;
}

.quick-link-title {
    color: var(--bq-text-title) !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
}

.quick-link-desc {
    color: var(--bq-text-muted) !important;
    font-size: 12.5px !important;
}

/* ============================================================
   10. ACCOUNT STORE & PROXY STORE SPECIALIZED STYLING
   ============================================================ */
/* Account Store */
.acc-ambient-glow,
.ambient-glow {
    display: none !important;
}

body.account-store-body,
body.proxy-store-body {
    background: var(--bq-canvas) !important;
}

.acc-card,
.account-card,
.px-card,
.proxy-card {
    background: var(--bq-surface) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: var(--bq-radius-card) !important;
    box-shadow: var(--bq-shadow-card) !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.acc-card:hover,
.account-card:hover,
.px-card:hover,
.proxy-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--bq-shadow-card-hover) !important;
    border-color: var(--bq-border-hover) !important;
}

.acc-card-title,
.px-card-title,
.account-title,
.proxy-title {
    color: var(--bq-text-title) !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 700 !important;
}

.acc-card-desc,
.px-card-desc,
.account-desc,
.proxy-desc {
    color: var(--bq-text-muted) !important;
    font-size: 13px !important;
}

.acc-btn-buy,
.px-btn-buy,
.btn-buy-account,
.btn-buy-proxy {
    background: var(--bq-primary) !important;
    color: #ffffff !important;
    border-radius: var(--bq-radius-pill) !important;
    border: 1px solid var(--bq-primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(112, 71, 235, 0.25) !important;
    transition: all 0.2s ease !important;
}

.acc-btn-buy:hover,
.px-btn-buy:hover,
.btn-buy-account:hover,
.btn-buy-proxy:hover {
    background: var(--bq-primary-hover) !important;
    border-color: var(--bq-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(112, 71, 235, 0.35) !important;
}

/* ============================================================
   11. DEPOSIT & PAYMENT CHANNELS STYLING
   ============================================================ */
.deposit-container,
.bank-transfer-container,
.binance-transfer-container,
.crypto-transfer-container {
    background: var(--bq-surface) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 32px !important;
}

.bank-tab-btn,
.deposit-channel-btn {
    border-radius: var(--bq-radius-pill) !important;
    font-weight: 600 !important;
    border: 1px solid var(--bq-border) !important;
    background: #ffffff !important;
    color: var(--bq-text-title) !important;
    transition: all 0.2s ease !important;
}

.bank-tab-btn.active,
.deposit-channel-btn.active {
    background: var(--bq-primary) !important;
    border-color: var(--bq-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(112, 71, 235, 0.25) !important;
}

.qr-code-wrapper,
.vietqr-box {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 20px !important;
}

.qr-code-wrapper img,
.vietqr-box img {
    border-radius: 12px !important;
}

/* ============================================================
   12. ORDERS & LICENSE KEYS STYLING
   ============================================================ */
.orders-table-container,
.order-history-card {
    background: var(--bq-surface) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: var(--bq-radius-card) !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 24px !important;
}

.license-key-wrapper,
.order-key-code {
    font-family: var(--font-bq-mono) !important;
    background: var(--bq-surface-soft) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    color: var(--bq-text-title) !important;
    font-weight: 600 !important;
}

.badge-status-completed,
.badge-status-paid {
    background: var(--bq-mint-soft) !important;
    color: #065f46 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-radius: var(--bq-radius-pill) !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
}

.badge-status-pending {
    background: var(--bq-amber-soft) !important;
    color: #92400e !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    border-radius: var(--bq-radius-pill) !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
}

/* ============================================================
   13. DASHBOARD HERO DECK & PLATFORM SERVICES (BOUTIQUE OVERHAUL)
   ============================================================ */
/* Neural Hero Deck -> Boutique Command Center */
.neural-hero-deck,
body.ai-future-theme .neural-hero-deck {
    background-color: #ffffff !important;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(112, 71, 235, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 90% 15%, rgba(244, 63, 94, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, #ffffff 0%, #faf8f5 60%, #f4f0ec 100%) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 26px !important;
    box-shadow: var(--bq-shadow-card) !important;
    color: var(--bq-text-title) !important;
}

.neural-deck-badge,
body.ai-future-theme .neural-deck-badge {
    background: var(--bq-primary-soft) !important;
    border: 1px solid rgba(112, 71, 235, 0.22) !important;
    color: var(--bq-primary) !important;
    font-family: var(--font-bq-sans) !important;
    letter-spacing: 0.04em !important;
    border-radius: var(--bq-radius-pill) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
}

.neural-deck-title,
body.ai-future-theme .neural-deck-title {
    color: var(--bq-text-title) !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    font-size: 30px !important;
}

.neural-deck-subtitle,
body.ai-future-theme .neural-deck-subtitle {
    color: var(--bq-text-muted) !important;
    font-size: 14.5px !important;
}

.neural-btn--primary,
body.ai-future-theme .neural-btn--primary {
    background: var(--bq-primary) !important;
    border: 1px solid var(--bq-primary) !important;
    color: #ffffff !important;
    border-radius: var(--bq-radius-pill) !important;
    box-shadow: 0 4px 14px rgba(112, 71, 235, 0.28) !important;
    font-weight: 700 !important;
}

.neural-btn--primary:hover,
body.ai-future-theme .neural-btn--primary:hover {
    background: var(--bq-primary-hover) !important;
    border-color: var(--bq-primary-hover) !important;
    box-shadow: 0 6px 20px rgba(112, 71, 235, 0.38) !important;
    transform: translateY(-1px) !important;
}

.neural-btn--secondary,
body.ai-future-theme .neural-btn--secondary {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    color: var(--bq-text-title) !important;
    border-radius: var(--bq-radius-pill) !important;
    box-shadow: var(--bq-shadow-sm) !important;
    font-weight: 600 !important;
}

.neural-btn--secondary:hover,
body.ai-future-theme .neural-btn--secondary:hover {
    background: var(--bq-surface-soft) !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
    transform: translateY(-1px) !important;
}

.neural-stat-box,
body.ai-future-theme .neural-stat-box {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--bq-shadow-sm) !important;
}

.neural-stat-box:hover,
body.ai-future-theme .neural-stat-box:hover {
    border-color: var(--bq-border-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--bq-shadow-card) !important;
}

.neural-stat-val,
body.ai-future-theme .neural-stat-val {
    font-family: var(--font-bq-sans) !important;
    font-size: 23px !important;
    font-weight: 800 !important;
    color: var(--bq-text-title) !important;
    letter-spacing: -0.02em !important;
}

.neural-stat-lbl,
body.ai-future-theme .neural-stat-lbl {
    color: var(--bq-text-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.neural-status-panel,
body.ai-future-theme .neural-status-panel {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-sm) !important;
}

.neural-status-title,
body.ai-future-theme .neural-status-title {
    color: var(--bq-text-title) !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

.neural-role-badge,
body.ai-future-theme .neural-role-badge {
    background: var(--bq-primary-soft) !important;
    border: 1px solid rgba(112, 71, 235, 0.25) !important;
    color: var(--bq-primary) !important;
    border-radius: var(--bq-radius-pill) !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 700 !important;
}

.neural-pulse-dot,
body.ai-future-theme .neural-pulse-dot {
    background: var(--bq-primary) !important;
    box-shadow: 0 0 6px var(--bq-primary) !important;
}

.neural-metric-tile,
body.ai-future-theme .neural-metric-tile {
    background: var(--bq-surface-soft) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
}

.neural-metric-val,
body.ai-future-theme .neural-metric-val {
    font-family: var(--font-bq-sans) !important;
    font-weight: 800 !important;
    font-size: 21px !important;
    color: var(--bq-text-title) !important;
}

.neural-metric-lbl,
body.ai-future-theme .neural-metric-lbl {
    color: var(--bq-text-muted) !important;
    font-size: 11.5px !important;
}

.neural-check-item,
body.ai-future-theme .neural-check-item {
    color: var(--bq-text-body) !important;
    font-size: 13px !important;
}

.neural-check-item i,
body.ai-future-theme .neural-check-item i {
    color: var(--bq-mint) !important;
}

.neural-check-item strong,
body.ai-future-theme .neural-check-item strong {
    color: var(--bq-text-title) !important;
}

/* ============================================================
   14. PLATFORM SERVICES CARDS (BOUTIQUE BENTO UPGRADE)
   ============================================================ */
.platform-service-card,
body.ai-future-theme .platform-service-card {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 24px !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.28s ease !important;
    color: var(--bq-text-body) !important;
}

.platform-service-card::before,
body.ai-future-theme .platform-service-card::before {
    display: none !important;
}

.platform-service-card:hover,
body.ai-future-theme .platform-service-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--bq-shadow-card-hover) !important;
    border-color: var(--bq-border-hover) !important;
}

.platform-service-icon,
body.ai-future-theme .platform-service-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 20px !important;
    background: var(--bq-surface-soft) !important;
    border: 1px solid var(--bq-border) !important;
    box-shadow: var(--bq-shadow-sm) !important;
}

.card-proxy .platform-service-icon {
    background: #f5f2fe !important;
    color: #7047eb !important;
}

.card-account .platform-service-icon {
    background: #ecfdf5 !important;
    color: #10b981 !important;
}

.card-source .platform-service-icon {
    background: #ecfeff !important;
    color: #0891b2 !important;
}

.card-tools .platform-service-icon {
    background: #fff1f2 !important;
    color: #f43f5e !important;
}

.platform-service-badge,
body.ai-future-theme .platform-service-badge {
    background: var(--bq-surface-soft) !important;
    color: var(--bq-text-muted) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: var(--bq-radius-pill) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
}

.platform-service-body h3,
body.ai-future-theme .platform-service-body h3 {
    color: var(--bq-text-title) !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 14px 0 8px !important;
    letter-spacing: -0.01em !important;
}

.platform-service-body p,
body.ai-future-theme .platform-service-body p {
    color: var(--bq-text-muted) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.ps-feature-tag,
body.ai-future-theme .ps-feature-tag {
    background: var(--bq-surface-soft) !important;
    color: var(--bq-text-body) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: var(--bq-radius-pill) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
}

.platform-service-foot,
body.ai-future-theme .platform-service-foot {
    color: var(--bq-primary) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border-top: 1px solid var(--bq-border) !important;
    padding-top: 14px !important;
    margin-top: 18px !important;
}

.platform-service-foot i,
body.ai-future-theme .platform-service-foot i {
    transition: transform 0.2s ease !important;
}

.platform-service-card:hover .platform-service-foot i {
    transform: translateX(3px) !important;
}

/* ============================================================
   15. PRODUCTS CAROUSEL & CARDS ON DASHBOARD (.mn-product-card)
   ============================================================ */
.mn-product-card,
body.ai-future-theme .mn-product-card {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 14px !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.28s ease !important;
}

.mn-product-card:hover,
body.ai-future-theme .mn-product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--bq-shadow-card-hover) !important;
    border-color: var(--bq-border-hover) !important;
}

.mn-card-media,
body.ai-future-theme .mn-card-media {
    background: var(--bq-surface-soft) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    height: 160px !important;
}

.mn-card-media img,
body.ai-future-theme .mn-card-media img {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.06)) !important;
}

.mn-badge-id,
body.ai-future-theme .mn-badge-id {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--bq-text-muted) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: var(--bq-radius-pill) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

.mn-badge-pin,
body.ai-future-theme .mn-badge-pin {
    background: var(--bq-mint-soft) !important;
    color: #065f46 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-radius: var(--bq-radius-pill) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

.mn-badge-discount,
body.ai-future-theme .mn-badge-discount {
    background: var(--bq-coral) !important;
    color: #ffffff !important;
    border-radius: var(--bq-radius-pill) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 10px rgba(244, 63, 94, 0.3) !important;
}

.mn-card-title,
body.ai-future-theme .mn-card-title {
    color: var(--bq-text-title) !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.mn-product-card:hover .mn-card-title,
body.ai-future-theme .mn-product-card:hover .mn-card-title {
    color: var(--bq-primary) !important;
}

.mn-price-current,
body.ai-future-theme .mn-price-current {
    color: var(--bq-text-title) !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
}

.mn-price-sale,
body.ai-future-theme .mn-price-sale {
    color: var(--bq-coral) !important;
}

.mn-nav-btn,
body.ai-future-theme .mn-nav-btn {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    color: var(--bq-text-title) !important;
    border-radius: 50% !important;
    box-shadow: var(--bq-shadow-sm) !important;
}

.mn-nav-btn:hover,
body.ai-future-theme .mn-nav-btn:hover {
    background: var(--bq-surface-soft) !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
    color: var(--bq-primary) !important;
}

.mn-accent-bar,
body.ai-future-theme .mn-accent-bar {
    background: var(--bq-primary) !important;
    width: 4px !important;
    border-radius: 4px !important;
}

.mn-view-all-btn,
body.ai-future-theme .mn-view-all-btn {
    border-radius: var(--bq-radius-pill) !important;
}

/* ============================================================
   16. MMO SERVICES CARDS (.mmo-service-card)
   ============================================================ */
.mmo-service-card,
body.ai-future-theme .mmo-service-card {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-card) !important;
    overflow: hidden !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.28s ease !important;
}

.mmo-service-card:hover,
body.ai-future-theme .mmo-service-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--bq-shadow-card-hover) !important;
    border-color: var(--bq-border-hover) !important;
}

.mmo-card-body,
body.ai-future-theme .mmo-card-body {
    background: #ffffff !important;
    padding: 16px 20px !important;
}

.mmo-service-title,
body.ai-future-theme .mmo-service-title {
    color: var(--bq-text-title) !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.mmo-btn-detail,
body.ai-future-theme .mmo-btn-detail {
    color: var(--bq-primary) !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

.mmo-btn-detail i {
    transition: transform 0.2s ease;
}

.mmo-service-card:hover .mmo-btn-detail i {
    transform: translateX(3px);
}

/* Section Titles & Eyebrows */
.section-eyebrow,
body.ai-future-theme .section-eyebrow {
    color: var(--bq-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.section-title,
body.ai-future-theme .section-title,
.mn-section-title,
body.ai-future-theme .mn-section-title {
    color: var(--bq-text-title) !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* ============================================================
   17. FULL-WIDTH EDGE-TO-EDGE EXPANSION (NO BOXED CONSTRAINTS)
   ============================================================ */
.neural-hero-deck,
body.ai-future-theme .neural-hero-deck {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.platform-services-grid,
body.ai-future-theme .platform-services-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 32px !important;
}

@media (max-width: 1280px) {
    .platform-services-grid,
    body.ai-future-theme .platform-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .platform-services-grid,
    body.ai-future-theme .platform-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

/* Ensure all store & product wrappers fill edge-to-edge */
.boutique-hero-banner,
.boutique-controls-bar,
.boutique-grid,
.orders-table-container,
.deposit-container,
.product-detail-container,
.table-container,
.mn-products-wrapper,
.mmo-services-grid,
.acc-store-wrapper,
.px-store-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.mmo-services-grid,
body.ai-future-theme .mmo-services-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* ============================================================
   18. UNIVERSAL HIGH-CONTRAST TYPOGRAPHY & DATA TABLES
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.page-title, .section-title, .table-title, .card-title,
.panel-title, .modal-title, .banner-title,
body.ai-future-theme h1,
body.ai-future-theme h2,
body.ai-future-theme h3,
body.ai-future-theme h4,
body.ai-future-theme h5,
body.ai-future-theme h6 {
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    letter-spacing: -0.02em !important;
}

/* Universal Form Controls */
label,
.form-label,
.input-label,
.settings-label {
    color: #18181b !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    margin-bottom: 6px !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
select,
textarea,
.form-control {
    background: #ffffff !important;
    color: #18181b !important;
    border: 1px solid rgba(24, 24, 27, 0.12) !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 13.5px !important;
}

input::placeholder,
textarea::placeholder {
    color: #94a3b8 !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    background: #ffffff !important;
    border-color: #7047eb !important;
    box-shadow: 0 0 0 3px rgba(112, 71, 235, 0.18) !important;
    outline: none !important;
}

/* Monospace / Code blocks */
code,
pre,
.license-key,
.transaction-id,
.order-id,
.order-code,
.key-box,
.proxy-ip,
.font-mono {
    font-family: var(--font-bq-mono) !important;
    background: #f4f3ef !important;
    color: #18181b !important;
    border: 1px solid rgba(24, 24, 27, 0.08) !important;
    border-radius: 8px !important;
}

/* ============================================================
   19. CONTACT PAGE BOUTIQUE OVERRIDES (css/contact.css)
   ============================================================ */
body.contact-page,
body.contact-page.ai-future-theme {
    background: var(--bq-canvas) !important;
    color: #18181b !important;
}

body.contact-page.ai-future-theme::before {
    display: none !important;
}

.contact-info-container,
body.contact-page .contact-info-container,
.contact-card,
.support-card {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 28px !important;
}

.contact-item,
body.contact-page .contact-item {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--bq-shadow-sm) !important;
    padding: 18px !important;
    transition: all 0.22s ease !important;
}

.contact-item:hover {
    transform: translateY(-2px) !important;
    border-color: var(--bq-border-hover) !important;
    box-shadow: var(--bq-shadow-card-hover) !important;
}

.contact-icon,
body.contact-page .contact-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: var(--bq-primary-soft) !important;
    color: var(--bq-primary) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 18px !important;
}

.contact-title,
.contact-label,
body.contact-page .contact-title {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.contact-value,
body.contact-page .contact-value {
    color: #18181b !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* Chat container inside contact page */
.live-chat-panel,
.chat-container,
.chat-window,
body.contact-page .chat-container {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-card) !important;
    overflow: hidden !important;
}

.chat-header,
body.contact-page .chat-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--bq-border) !important;
    padding: 16px 20px !important;
    color: #18181b !important;
}

.chat-messages,
body.contact-page .chat-messages {
    background: #fbfbfa !important;
    padding: 20px !important;
}

.chat-message.incoming,
.message-incoming {
    background: #ffffff !important;
    color: #18181b !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--bq-shadow-sm) !important;
}

.chat-message.outgoing,
.message-outgoing {
    background: var(--bq-primary) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(112, 71, 235, 0.25) !important;
}

.chat-input-wrapper,
body.contact-page .chat-input-wrapper {
    background: #ffffff !important;
    border-top: 1px solid var(--bq-border) !important;
    padding: 16px 20px !important;
}

/* ============================================================
   20. SETTINGS PAGE BOUTIQUE OVERRIDES (css/settings.css)
   ============================================================ */
body.settings-page,
body.settings-page.ai-future-theme {
    background: var(--bq-canvas) !important;
    color: #18181b !important;
}

body.settings-page::before {
    display: none !important;
}

.settings-nav,
.settings-menu,
.settings-sidebar,
body.settings-page .settings-sidebar {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 16px !important;
}

.settings-nav a,
.settings-nav-item,
body.settings-page .settings-nav a {
    color: #4b5563 !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
}

.settings-nav a:hover,
.settings-nav-item:hover {
    background: var(--bq-surface-soft) !important;
    color: var(--bq-primary) !important;
    transform: translateX(2px) !important;
}

.settings-nav a.active,
.settings-nav-item.active {
    background: var(--bq-primary-soft) !important;
    color: var(--bq-primary) !important;
    font-weight: 700 !important;
    box-shadow: inset 0 0 0 1px rgba(112, 71, 235, 0.25) !important;
}

.settings-panel,
.settings-card,
.settings-section,
body.settings-page .settings-panel {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 28px !important;
    margin-bottom: 24px !important;
}

.settings-panel-title,
.settings-title,
body.settings-page .settings-panel-title {
    color: #18181b !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
}

.settings-panel-desc,
.settings-desc,
body.settings-page .settings-panel-desc {
    color: #64748b !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
}

.settings-card-header {
    border-bottom: 1px solid var(--bq-border) !important;
    padding-bottom: 16px !important;
    margin-bottom: 20px !important;
}

/* ============================================================
   21. BALANCE PAGE BOUTIQUE OVERRIDES (css/balance-page.css)
   ============================================================ */
body.balance-page,
body.balance-page.ai-future-theme {
    background: var(--bq-canvas) !important;
    color: #18181b !important;
}

body.balance-page::before {
    display: none !important;
}

.balance-hero {
    background: linear-gradient(135deg, #ffffff 0%, #faf8f5 55%, #f4f0ec 100%) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--bq-shadow-card) !important;
    color: #18181b !important;
}

.balance-title {
    color: #18181b !important;
}

.balance-subtitle,
.balance-account {
    color: #64748b !important;
}

.balance-amount-card {
    border-left: 1px solid var(--bq-border) !important;
}

.balance-amount-label {
    color: #64748b !important;
}

.balance-amount-value {
    color: var(--bq-primary) !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 800 !important;
}

.balance-action {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    color: #18181b !important;
    border-radius: var(--bq-radius-pill) !important;
    box-shadow: var(--bq-shadow-sm) !important;
}

.balance-action:hover {
    background: var(--bq-surface-soft) !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
    color: var(--bq-primary) !important;
}

.balance-action.primary {
    background: var(--bq-primary) !important;
    color: #ffffff !important;
    border-color: var(--bq-primary) !important;
    box-shadow: 0 4px 14px rgba(112, 71, 235, 0.25) !important;
}

.balance-action.primary:hover {
    background: var(--bq-primary-hover) !important;
    border-color: var(--bq-primary-hover) !important;
}

.balance-page .stat-card {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--bq-shadow-card) !important;
}

.balance-page .stat-card .label {
    color: #64748b !important;
}

.balance-page .stat-card .value {
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 800 !important;
}

.balance-page .panel {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-card) !important;
}

.balance-page .panel-header {
    border-bottom: 1px solid var(--bq-border) !important;
}

.balance-page .panel-title {
    color: #18181b !important;
}

.balance-page .panel-subtitle {
    color: #64748b !important;
}

/* ============================================================
   22. QR GENERATOR & AI CONSULTANT BOUTIQUE OVERRIDES
   ============================================================ */
.qr-hero,
.ai-consult-hero {
    background: linear-gradient(135deg, #ffffff 0%, #faf8f5 55%, #f4f0ec 100%) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--bq-shadow-card) !important;
    color: #18181b !important;
    padding: 32px !important;
}

.qr-hero-title,
.ai-hero-title {
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 800 !important;
}

.qr-hero-subtitle,
.ai-hero-subtitle {
    color: #64748b !important;
}

.qr-card,
.qr-preview-box,
.qr-control-panel,
.ai-consult-card,
.ai-step-card,
.ai-card {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-card) !important;
    color: #18181b !important;
    padding: 24px !important;
}

/* ============================================================
   23. SERVICE DETAIL & PRODUCT DETAIL BOUTIQUE OVERRIDES
   ============================================================ */
.service-detail-container,
.product-detail-container,
.product-detail-card {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--bq-shadow-card) !important;
    color: #18181b !important;
}

.service-title,
.product-name,
.detail-title {
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 800 !important;
}

.service-desc,
.product-description,
.detail-desc {
    color: #4b5563 !important;
    line-height: 1.6 !important;
}

.pricing-tier-card,
.pricing-option {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--bq-shadow-sm) !important;
    transition: all 0.22s ease !important;
}

.pricing-tier-card:hover,
.pricing-option:hover {
    border-color: var(--bq-border-hover) !important;
    box-shadow: var(--bq-shadow-card-hover) !important;
}

.pricing-tier-card.selected,
.pricing-option.active {
    border: 2px solid var(--bq-primary) !important;
    background: var(--bq-primary-soft) !important;
}

.price-val,
.detail-price {
    color: var(--bq-coral) !important;
    font-weight: 800 !important;
}

/* ============================================================
   24. PROXY STORE & ACCOUNT STORE EXTENSIVE FIXES
   ============================================================ */
.acc-category-title,
.px-category-title,
.category-heading {
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 800 !important;
}

.acc-category-pill,
.px-filter-btn,
.category-pill {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    color: #4b5563 !important;
    border-radius: var(--bq-radius-pill) !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    transition: all 0.2s ease !important;
}

.acc-category-pill:hover,
.px-filter-btn:hover {
    background: var(--bq-surface-soft) !important;
    color: #18181b !important;
}

.acc-category-pill.active,
.px-filter-btn.active {
    background: var(--bq-primary) !important;
    color: #ffffff !important;
    border-color: var(--bq-primary) !important;
    box-shadow: 0 4px 12px rgba(112, 71, 235, 0.25) !important;
}

.acc-card-name,
.px-card-name,
.acc-product-title,
.px-product-title {
    color: #18181b !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

.acc-card-meta,
.px-card-meta,
.acc-stock-text,
.px-stock-text {
    color: #64748b !important;
    font-size: 12.5px !important;
}

.acc-price-value,
.px-price-value {
    color: #18181b !important;
    font-weight: 800 !important;
    font-size: 18px !important;
}

.acc-tag,
.px-tag,
.chip-item {
    background: var(--bq-surface-soft) !important;
    color: #4b5563 !important;
    border: 1px solid rgba(24, 24, 27, 0.08) !important;
    border-radius: var(--bq-radius-pill) !important;
}

/* ============================================================
   25. BUFF ĐƠN & LINK BOT BOUTIQUE STYLING
   ============================================================ */
.buff-card,
.bot-card,
.link-card {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-card) !important;
    color: #18181b !important;
    padding: 28px !important;
}

.buff-title,
.bot-title,
.link-title {
    color: #18181b !important;
    font-weight: 800 !important;
}

.buff-desc,
.bot-desc,
.link-desc {
    color: #64748b !important;
}


/* ============================================================
   26. COMPREHENSIVE BOUTIQUE OVERRIDES FOR ACCOUNT STORE & PROXY STORE
   ============================================================ */
/* Heroes */
.acc-hero,
.px-hero {
    background: linear-gradient(135deg, #ffffff 0%, #faf8f5 55%, #f4f0ec 100%) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--bq-shadow-card) !important;
    color: #18181b !important;
    margin-bottom: 28px !important;
}

.acc-hero-copy h1,
.px-hero-copy h1 {
    color: #18181b !important;
    background: none !important;
    -webkit-text-fill-color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.acc-hero-copy p,
.px-hero-copy p {
    color: #4b5563 !important;
}

.acc-pill-item,
.px-pill-item {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    color: #4b5563 !important;
    box-shadow: var(--bq-shadow-sm) !important;
}

.acc-pill-item i,
.px-pill-item i {
    color: var(--bq-primary) !important;
}

/* Balance Cards in Store */
.acc-balance-card,
.px-balance-card {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-card) !important;
    color: #18181b !important;
}

.acc-balance-amount,
.px-balance-amount {
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 800 !important;
}

.acc-balance-head,
.px-balance-head span {
    color: #64748b !important;
}

/* Tabs & Toolbars */
.acc-nav-bar,
.px-nav-bar {
    border-bottom: 1px solid var(--bq-border) !important;
}

.acc-tab-link,
.px-tab-link {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    color: #4b5563 !important;
    box-shadow: var(--bq-shadow-sm) !important;
    border-radius: 12px !important;
}

.acc-tab-link:hover,
.px-tab-link:hover {
    background: var(--bq-surface-soft) !important;
    color: var(--bq-primary) !important;
    border-color: var(--bq-border-hover) !important;
}

.acc-tab-link.active,
.px-tab-link.active {
    background: var(--bq-primary-soft) !important;
    color: var(--bq-primary) !important;
    border-color: var(--bq-primary) !important;
    box-shadow: 0 4px 12px rgba(112, 71, 235, 0.2) !important;
}

.acc-toolbar,
.px-category-tabs {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--bq-shadow-sm) !important;
}

.acc-search-input,
.px-search-input {
    background: #ffffff !important;
    border: 1px solid rgba(24, 24, 27, 0.12) !important;
    color: #18181b !important;
    border-radius: 12px !important;
}

.acc-filter-chip,
.px-cat-btn {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    color: #4b5563 !important;
    border-radius: 10px !important;
}

.acc-filter-chip.active,
.px-cat-btn.active {
    background: var(--bq-primary) !important;
    border-color: var(--bq-primary) !important;
    color: #ffffff !important;
}

/* Product Cards */
.acc-card,
.px-card {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-card) !important;
    color: #18181b !important;
}

.acc-card:hover,
.px-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--bq-border-hover) !important;
    box-shadow: var(--bq-shadow-card-hover) !important;
}

.acc-card-title,
.px-pkg-title {
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 700 !important;
    font-size: 17px !important;
}

.acc-card-desc,
.px-pkg-desc {
    color: #64748b !important;
    font-size: 13px !important;
}

.acc-card-desc b,
.acc-card-desc strong,
#modalProdDesc b,
#modalProdDesc strong {
    color: #18181b !important;
}

#modalProdDesc {
    background: #f8fafc !important;
    border: 1px solid var(--bq-border) !important;
    color: #374151 !important;
}

.acc-card-price-row,
.px-price-container {
    background: var(--bq-surface-soft) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 14px !important;
}

.acc-price-val,
.px-price-container .val {
    color: var(--bq-coral) !important;
    font-weight: 800 !important;
}

.acc-price-unit,
.px-price-container .per {
    color: #64748b !important;
}

.px-features-list li {
    color: #374151 !important;
}

.px-card.selected {
    background: #ffffff !important;
    border-color: var(--bq-primary) !important;
    box-shadow: 0 10px 30px rgba(112, 71, 235, 0.15) !important;
}

.px-order-panel,
.acc-panel {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--bq-shadow-card) !important;
    color: #18181b !important;
}

.px-panel-header,
.acc-panel-title {
    border-bottom: 1px solid var(--bq-border) !important;
}

.acc-panel-title h2,
.px-panel-header h2 {
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 800 !important;
}

.acc-table th,
.px-table th {
    background: var(--bq-surface-soft) !important;
    color: #475569 !important;
    border-bottom: 1px solid var(--bq-border) !important;
}

.acc-table td,
.px-table td {
    color: #18181b !important;
    border-bottom: 1px solid var(--bq-border) !important;
}

.acc-table-code {
    background: var(--bq-surface-soft) !important;
    color: #18181b !important;
    border: 1px solid var(--bq-border) !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
}

.acc-modal-card {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    box-shadow: var(--bq-shadow-dropdown) !important;
    color: #18181b !important;
}

.acc-modal-card h2,
.acc-modal-card h3 {
    color: #18181b !important;
}


/* ============================================================
   27. GLOBAL FULL-WIDTH EDGE-TO-EDGE ENFORCEMENT (ALL SUBPAGES)
   ============================================================ */
.acc-wrap,
.proxy-store-wrap,
.vietshare-wrap,
.balance-page-content,
.settings-content,
.settings-page .content-wrapper.settings-content,
.contact-page .content-wrapper,
.content-wrapper,
.main-content .content-wrapper,
.dashboard-container,
.bank-transfer-container,
.deposit-container,
.crypto-transfer-container,
.binance-transfer-container,
.service-detail-container,
.product-detail-container,
.orders-table-container,
.table-container,
.boutique-grid,
.boutique-hero-banner,
.boutique-controls-bar,
.qr-shell,
.ai-consult-shell,
.captcha-shell,
.api-tester-page .utility-shell,
.webhook-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.main-content {
    width: calc(100% - 260px) !important;
    max-width: calc(100% - 260px) !important;
    margin-left: 260px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 1024px) {
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}


/* ============================================================
   28. PRODUCT DETAIL COMPREHENSIVE BOUTIQUE REDESIGN (FIXING IMAGE 1)
   ============================================================ */
.product-detail-container,
body.ai-future-theme .product-detail-container {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 32px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 28px !important;
}

.product-detail-container::before {
    display: none !important;
}

.product-detail-grid {
    display: grid !important;
    grid-template-columns: minmax(360px, 0.9fr) minmax(460px, 1.1fr) !important;
    gap: 32px !important;
    align-items: start !important;
}

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

/* Left Column: Showcase Card */
.product-showcase-card,
body.ai-future-theme .product-showcase-card {
    background: #fbfbfa !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-sm) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.showcase-window-bar,
body.ai-future-theme .showcase-window-bar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--bq-border) !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.window-title-text {
    color: #18181b !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.window-title-text i {
    color: var(--bq-primary) !important;
}

.window-status-pill {
    background: var(--bq-mint-soft) !important;
    color: #065f46 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-radius: var(--bq-radius-pill) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.window-status-pill .pulse-dot {
    background: #10b981 !important;
    box-shadow: 0 0 6px #10b981 !important;
}

.product-media-viewport {
    background: #fbfbfa !important;
    padding: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid var(--bq-border) !important;
}

.product-image-zoomable {
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    max-height: 380px !important;
    object-fit: contain !important;
}

.media-category-badge {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--bq-primary) !important;
    border: 1px solid var(--bq-border) !important;
    box-shadow: var(--bq-shadow-sm) !important;
    border-radius: var(--bq-radius-pill) !important;
    font-weight: 700 !important;
}

/* Specs Matrix */
.showcase-specs-matrix {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 20px !important;
    background: #ffffff !important;
}

.showcase-spec-cell {
    background: #f8fafc !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.spec-cell-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    color: var(--bq-primary) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 15px !important;
}

.spec-cell-label {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.spec-cell-val {
    color: #18181b !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}

/* Guarantees */
.showcase-guarantees {
    padding: 16px 20px !important;
    border-top: 1px solid var(--bq-border) !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.guarantee-row {
    color: #4b5563 !important;
    font-size: 12.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.guarantee-row i {
    color: var(--bq-mint) !important;
}

/* Right Column: Information & Actions */
.meta-tag-badges {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 12px !important;
}

.meta-pill {
    border-radius: var(--bq-radius-pill) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 5px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.pill-category {
    background: var(--bq-primary-soft) !important;
    color: var(--bq-primary) !important;
    border: 1px solid rgba(112, 71, 235, 0.25) !important;
}

.pill-version {
    background: #f4f3ef !important;
    color: #4b5563 !important;
    border: 1px solid var(--bq-border) !important;
}

.pill-status {
    background: var(--bq-mint-soft) !important;
    color: #065f46 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.public-preview-link {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    color: var(--bq-text-title) !important;
    border-radius: var(--bq-radius-pill) !important;
    box-shadow: var(--bq-shadow-sm) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
}

.product-headline {
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-size: clamp(24px, 3vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 12px 0 20px !important;
}

/* Price Hero Card (Right Column) */
.price-hero-card {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.price-section-tag {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.final-price-value {
    color: var(--bq-primary) !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.price-usd-note {
    background: #f8fafc !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 12px !important;
    padding: 8px 14px !important;
    color: #4b5563 !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.price-usd-note strong {
    color: var(--bq-primary) !important;
    font-weight: 800 !important;
}

/* User Wallet Quick Bar */
.user-wallet-quick-bar {
    background: #f8fafc !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 16px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.wallet-icon {
    color: var(--bq-primary) !important;
    font-size: 18px !important;
}

.wallet-label {
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}

.wallet-amount {
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.wallet-badge.badge-enough {
    background: var(--bq-mint-soft) !important;
    color: #065f46 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-radius: var(--bq-radius-pill) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
}

.wallet-badge.badge-topup {
    background: var(--bq-amber-soft) !important;
    color: #92400e !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    border-radius: var(--bq-radius-pill) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
}

/* Price Options / Tiers */
.price-options-container {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.price-options-title {
    color: #18181b !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
}

.price-options-subtitle {
    color: #64748b !important;
}

.price-option {
    background: #ffffff !important;
    border: 1.5px solid var(--bq-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--bq-shadow-sm) !important;
    transition: all 0.22s ease !important;
    padding: 16px !important;
}

.price-option:hover {
    border-color: var(--bq-border-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--bq-shadow-card-hover) !important;
}

.price-option.selected {
    border-color: var(--bq-primary) !important;
    background: var(--bq-primary-soft) !important;
    box-shadow: 0 4px 16px rgba(112, 71, 235, 0.15) !important;
}

.price-type {
    color: #18181b !important;
    font-weight: 700 !important;
}

.price-value {
    color: var(--bq-primary) !important;
    font-weight: 800 !important;
}

.price-unit {
    color: #64748b !important;
}

/* Tier Summary */
.selected-tier-summary {
    background: #f8fafc !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

.summary-label {
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.summary-val {
    color: #18181b !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    margin-top: 2px !important;
}

/* Action Buttons */
.product-actions form {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 14px !important;
}

.btn-apply-voucher {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: var(--bq-radius-pill) !important;
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 14px 22px !important;
    box-shadow: var(--bq-shadow-sm) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.btn-apply-voucher:hover {
    background: var(--bq-surface-soft) !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
    transform: translateY(-1px) !important;
}

.btn-buy-now {
    background: var(--bq-primary) !important;
    border: 1px solid var(--bq-primary) !important;
    border-radius: var(--bq-radius-pill) !important;
    color: #ffffff !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 14px 28px !important;
    box-shadow: 0 6px 20px rgba(112, 71, 235, 0.35) !important;
    transition: all 0.22s ease !important;
    cursor: pointer !important;
}

.btn-buy-now:hover {
    background: var(--bq-primary-hover) !important;
    border-color: var(--bq-primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(112, 71, 235, 0.45) !important;
}

/* Product Description Container */
.product-description-container {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 28px !important;
    margin-top: 32px !important;
    color: #18181b !important;
}

.description-header {
    border-bottom: 1px solid var(--bq-border) !important;
    padding-bottom: 18px !important;
    margin-bottom: 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.description-header-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: var(--bq-primary-soft) !important;
    color: var(--bq-primary) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 18px !important;
}

.description-title-group h2 {
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin: 0 !important;
}

.description-title-group p {
    color: #64748b !important;
    font-size: 13px !important;
    margin: 4px 0 0 !important;
}

.description-content,
.product-description-container .description-body,
.product-description-container {
    color: #374151 !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
}

/* ============================================================
   29. BANK TRANSFER & DEPOSIT CHANNELS BOUTIQUE REDESIGN (FIXING IMAGE 2)
   ============================================================ */
body.bank-transfer-page,
body.bank-channel-page,
body.crypto-transfer-page,
body.binance-transfer-page {
    background: var(--bq-canvas) !important;
    color: #18181b !important;
}

body.bank-transfer-page::before {
    display: none !important;
}

/* Bank Transfer Hero */
.bank-transfer-hero {
    background: linear-gradient(135deg, #ffffff 0%, #faf8f5 55%, #f4f0ec 100%) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 32px 36px !important;
    margin-bottom: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.bank-transfer-kicker {
    color: var(--bq-primary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
}

.bank-transfer-kicker::before {
    background: var(--bq-primary) !important;
}

.bank-transfer-title {
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-size: clamp(26px, 3.5vw, 38px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}

.bank-transfer-subtitle {
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-top: 10px !important;
}

.bank-transfer-back,
.bank-transfer-status {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    color: #18181b !important;
    border-radius: var(--bq-radius-pill) !important;
    box-shadow: var(--bq-shadow-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
}

.bank-transfer-back:hover {
    background: var(--bq-surface-soft) !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
    color: var(--bq-primary) !important;
}

.bank-transfer-status {
    background: var(--bq-mint-soft) !important;
    color: #065f46 !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}

/* Panels in Bank Workspace */
.bank-transfer-workspace {
    display: grid !important;
    grid-template-columns: minmax(340px, 0.9fr) minmax(420px, 1.1fr) !important;
    gap: 28px !important;
    align-items: start !important;
}

@media (max-width: 960px) {
    .bank-transfer-workspace {
        grid-template-columns: 1fr !important;
    }
}

.bank-transfer-panel {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--bq-shadow-card) !important;
    overflow: hidden !important;
}

.bank-transfer-panel::before {
    display: none !important;
}

.bank-transfer-panel-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--bq-border) !important;
    padding: 22px 26px !important;
}

.bank-transfer-panel-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: var(--bq-primary-soft) !important;
    border: 1px solid rgba(112, 71, 235, 0.2) !important;
    color: var(--bq-primary) !important;
}

.bank-transfer-panel-title {
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

.bank-transfer-panel-caption {
    color: #64748b !important;
    font-size: 13px !important;
}

.bank-transfer-step-index {
    color: #94a3b8 !important;
    font-family: var(--font-bq-mono) !important;
    font-weight: 700 !important;
}

/* QR Panel */
.bank-transfer-qr-stage {
    background: #f8fafc !important;
    padding: 36px !important;
    display: grid !important;
    place-items: center !important;
}

.bank-transfer-qr-frame {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--bq-shadow-card) !important;
    padding: 20px !important;
}

.bank-transfer-qr-frame::before,
.bank-transfer-qr-frame::after {
    border-color: var(--bq-primary) !important;
}

/* Transfer Details Panel */
.bank-transfer-copy-highlight,
.bank-transfer-field.highlight,
.bank-copy-box,
.bank-transfer-row.highlight {
    background: #f5f2fe !important;
    border: 1.5px solid rgba(112, 71, 235, 0.3) !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    margin: 20px 24px !important;
}

.bank-transfer-label,
.bank-field-label {
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.bank-transfer-val,
.bank-field-value,
.bank-transfer-code {
    color: #18181b !important;
    font-family: var(--font-bq-mono) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

.bank-copy-btn,
.bank-transfer-copy-btn,
.btn-copy {
    background: var(--bq-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--bq-primary) !important;
    border-radius: var(--bq-radius-pill) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    box-shadow: 0 4px 12px rgba(112, 71, 235, 0.25) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.bank-copy-btn:hover,
.bank-transfer-copy-btn:hover,
.btn-copy:hover {
    background: var(--bq-primary-hover) !important;
}

/* Bank Details Table Rows */
.bank-detail-row,
.bank-info-row,
.bank-table tr,
.bank-transfer-table tr,
.bank-transfer-row {
    border-bottom: 1px solid rgba(24, 24, 27, 0.06) !important;
    padding: 14px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
}

.bank-detail-label,
.bank-transfer-row .label {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.bank-detail-value,
.bank-transfer-row .value {
    color: #18181b !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

/* Countdown bar at bottom of panel */
.bank-transfer-countdown-bar,
.bank-countdown-box,
.bank-transfer-panel-footer {
    background: #f8fafc !important;
    border-top: 1px solid var(--bq-border) !important;
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #4b5563 !important;
    font-size: 13px !important;
}

.countdown-timer-value {
    color: var(--bq-coral) !important;
    font-family: var(--font-bq-mono) !important;
    font-weight: 800 !important;
    font-size: 15px !important;
}

/* ============================================================
   30. VIETSHARE STORE & ACCOUNT STORE (BOUTIQUE BENTO UPGRADE)
   ============================================================ */
.vs-hero,
.acc-hero {
    background: linear-gradient(135deg, #ffffff 0%, #faf8f5 55%, #f4f0ec 100%) !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--bq-shadow-card) !important;
    color: #18181b !important;
    margin-bottom: 28px !important;
}

.vs-hero-copy h1,
.acc-hero-copy h1 {
    color: #18181b !important;
    background: none !important;
    -webkit-text-fill-color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.vs-hero-copy p,
.acc-hero-copy p {
    color: #4b5563 !important;
}

.vs-pill-item,
.acc-pill-item {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    color: #4b5563 !important;
    box-shadow: var(--bq-shadow-sm) !important;
}

.vs-pill-item i,
.acc-pill-item i {
    color: var(--bq-primary) !important;
}

.vs-balance-card,
.acc-balance-card {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-card) !important;
    color: #18181b !important;
}

.vs-balance-amount,
.acc-balance-amount {
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 800 !important;
}

.vs-nav-bar,
.acc-nav-bar {
    border-bottom: 1px solid var(--bq-border) !important;
}

.vs-tab-link,
.acc-tab-link {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    color: #4b5563 !important;
    box-shadow: var(--bq-shadow-sm) !important;
    border-radius: 12px !important;
}

.vs-tab-link:hover,
.acc-tab-link:hover {
    background: var(--bq-surface-soft) !important;
    color: var(--bq-primary) !important;
    border-color: var(--bq-border-hover) !important;
}

.vs-tab-link.active,
.acc-tab-link.active {
    background: var(--bq-primary-soft) !important;
    color: var(--bq-primary) !important;
    border-color: var(--bq-primary) !important;
    box-shadow: 0 4px 12px rgba(112, 71, 235, 0.2) !important;
}

.vs-toolbar,
.acc-toolbar {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--bq-shadow-sm) !important;
}

.vs-search-input,
.acc-search-input {
    background: #ffffff !important;
    border: 1px solid rgba(24, 24, 27, 0.12) !important;
    color: #18181b !important;
    border-radius: 12px !important;
}

.vs-filter-chip,
.acc-filter-chip {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    color: #4b5563 !important;
    border-radius: 10px !important;
}

.vs-filter-chip.active,
.acc-filter-chip.active {
    background: var(--bq-primary) !important;
    border-color: var(--bq-primary) !important;
    color: #ffffff !important;
}

.vs-card,
.acc-card {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-card) !important;
    color: #18181b !important;
}

.vs-card:hover,
.acc-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--bq-border-hover) !important;
    box-shadow: var(--bq-shadow-card-hover) !important;
}

.vs-product-title,
.acc-card-title {
    color: #18181b !important;
    font-family: var(--font-bq-sans) !important;
    font-weight: 700 !important;
    font-size: 17px !important;
}

.vs-card-desc,
.acc-card-desc {
    color: #64748b !important;
    font-size: 13px !important;
}

.vs-package-pill {
    background: #faf9f6 !important;
    border: 1px solid rgba(24, 24, 27, 0.08) !important;
    color: #18181b !important;
}

.vs-package-pill.active {
    background: #f3effe !important;
    border-color: #7047eb !important;
    color: #7047eb !important;
}

.vs-btn-buy,
.acc-btn-buy {
    background: var(--bq-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--bq-primary) !important;
    box-shadow: 0 4px 14px rgba(112, 71, 235, 0.25) !important;
}

.vs-btn-buy:hover,
.acc-btn-buy:hover {
    background: var(--bq-primary-dark) !important;
    border-color: var(--bq-primary-dark) !important;
}

.vs-modal-content,
.acc-modal-content {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--bq-shadow-dropdown) !important;
    color: #18181b !important;
}

/* ============================================================
   30. SEARCH INPUTS WITH ICONS (PRESERVE PADDING-LEFT CLEARANCE)
   ============================================================ */
.boutique-search-input,
input[type="text"].boutique-search-input,
.boutique-search-box input {
    height: 52px !important;
    padding-left: 54px !important;
    padding-right: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: var(--bq-radius-pill) !important;
}

.acc-search-input,
.px-search-input,
.vs-search-input,
input[type="text"].acc-search-input,
input[type="text"].px-search-input,
input[type="text"].vs-search-input,
.acc-search-box input,
.px-search-box input,
.vs-search-box input {
    padding-left: 44px !important;
    padding-right: 16px !important;
}

/* ============================================================
   31. PAGE SHELL FOOTER - UNIFIED BOUTIQUE LIGHT THEME
   ============================================================ */
.page-shell-footer,
body.ai-future-theme .page-shell-footer,
body.boutique-store-body .page-shell-footer {
    margin-top: 36px !important;
    padding: 16px 0 28px !important;
    border-top: 1px solid var(--bq-border) !important;
}

.page-shell-footer-inner,
body.ai-future-theme .page-shell-footer-inner,
body.boutique-store-body .page-shell-footer-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    padding: 20px 24px !important;
    border-radius: var(--bq-radius-card) !important;
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    box-shadow: var(--bq-shadow-card) !important;
}

.page-shell-footer-copy,
body.ai-future-theme .page-shell-footer-copy {
    display: grid !important;
    gap: 5px !important;
}

.page-shell-footer-title,
body.ai-future-theme .page-shell-footer-title {
    color: var(--bq-text-title, #18181b) !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.page-shell-footer-text,
body.ai-future-theme .page-shell-footer-text {
    color: var(--bq-text-muted, #64748b) !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.page-shell-footer-meta,
body.ai-future-theme .page-shell-footer-meta {
    color: var(--bq-text-faint, #94a3b8) !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 12px !important;
}

.page-shell-footer-links,
body.ai-future-theme .page-shell-footer-links {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    padding-right: 76px !important; /* Safe margin so floating chat bubble doesn't overlap Hỗ trợ */
}

.page-shell-footer-link,
body.ai-future-theme .page-shell-footer-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    border-radius: var(--bq-radius-pill) !important;
    border: 1px solid var(--bq-border) !important;
    color: var(--bq-text-body, #374151) !important;
    text-decoration: none !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: var(--bq-surface-soft, #f4f3ef) !important;
    transition: all 0.2s ease !important;
    box-shadow: var(--bq-shadow-sm) !important;
}

.page-shell-footer-link:hover,
body.ai-future-theme .page-shell-footer-link:hover {
    color: var(--bq-primary, #7047eb) !important;
    background: var(--bq-primary-soft, #f5f2fe) !important;
    border-color: rgba(112, 71, 235, 0.28) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(112, 71, 235, 0.12) !important;
}

@media (max-width: 768px) {
    .page-shell-footer-links,
    body.ai-future-theme .page-shell-footer-links {
        padding-right: 0 !important;
        padding-bottom: 72px !important;
    }
}

/* ============================================================
   32. DEPOSIT CHANNELS & STATS BOUTIQUE HIGH CONTRAST
   ============================================================ */
.deposit-channel-intro,
body.ai-future-theme .deposit-channel-intro {
    color: var(--bq-text-muted, #64748b) !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 26px !important;
}

.deposit-channel-card,
body.ai-future-theme .deposit-channel-card {
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--bq-shadow-card) !important;
    color: var(--bq-text-body, #374151) !important;
}

.deposit-channel-heading,
body.ai-future-theme .deposit-channel-heading {
    color: var(--bq-text-title, #18181b) !important;
    font-family: var(--font-bq-sans) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.deposit-channel-copy,
body.ai-future-theme .deposit-channel-copy {
    color: var(--bq-text-muted, #64748b) !important;
    font-size: 13.5px !important;
}

.deposit-channel-features,
body.ai-future-theme .deposit-channel-features {
    list-style: none !important;
    padding-left: 0 !important;
    color: var(--bq-text-body, #374151) !important;
    font-size: 13.5px !important;
}

.deposit-channel-features li,
body.ai-future-theme .deposit-channel-features li {
    color: var(--bq-text-body, #374151) !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.welcome-banner .stat-label,
.banner-stats .stat-label,
body.ai-future-theme .welcome-banner .stat-label,
body.ai-future-theme .banner-stats .stat-label {
    color: var(--bq-text-muted, #64748b) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    margin-top: 2px !important;
}

.banner-stats .stat-item,
body.ai-future-theme .banner-stats .stat-item {
    min-width: 140px !important;
    padding: 14px 18px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid var(--bq-border) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}



/* ============================================================
   BOUTIQUE AUTH & TERMS PAGES (LOGIN, REGISTER, FORGOT, TERMS)
   ============================================================ */
body.boutique-auth-page,
body.auth-bg-page {
    background: var(--auth-bg-code, url("/images/nen.png")) center center / cover no-repeat fixed !important;
    color: var(--bq-text-body, #374151) !important;
    font-family: var(--font-bq-sans, 'Plus Jakarta Sans', sans-serif) !important;
    min-height: 100vh !important;
}

body.boutique-auth-page::before,
body.auth-bg-page::before {
    display: none !important;
}