/* ============================================
   PREMIUM DARK THEME - Admin Panel
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg-primary: #0a0e27;
    --bg-secondary: #111638;
    --bg-card: rgba(255,255,255,0.04);
    --bg-card-hover: rgba(255,255,255,0.08);
    --glass-border: rgba(255,255,255,0.08);
    --glass-border-hover: rgba(255,255,255,0.15);
    --text-primary: #e8eaf6;
    --text-secondary: rgba(255,255,255,0.55);
    --text-muted: rgba(255,255,255,0.35);
    --accent-1: #667eea;
    --accent-2: #764ba2;
    --accent-cyan: #00d4ff;
    --accent-green: #00f5a0;
    --accent-orange: #f5a623;
    --accent-red: #ff4757;
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-cyan: linear-gradient(135deg, #00d4ff 0%, #667eea 100%);
    --gradient-green: linear-gradient(135deg, #00f5a0 0%, #00d4ff 100%);
    --gradient-orange: linear-gradient(135deg, #f5a623 0%, #ff6b6b 100%);
    --gradient-red: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    --shadow-glow: 0 0 30px rgba(102,126,234,0.15);
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Base ---- */
html.light-style, html {
    background: var(--bg-primary) !important;
}

body {
    font-family: 'Inter', 'Quicksand', sans-serif !important;
    background: linear-gradient(135deg, var(--bg-primary) 0%, #0d1234 50%, #0a0e27 100%) !important;
    color: var(--text-primary) !important;
    min-height: 100vh;
    letter-spacing: 0.01em;
}

a { color: var(--accent-cyan); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent-1); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(102,126,234,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(102,126,234,0.5); }

/* ============================================
   AGGRESSIVE TEMPLATE OVERRIDES
   Forces dark on Sneat template core.css
   ============================================ */
.light-style body,
.light-style .layout-wrapper,
.light-style .layout-page,
.light-style .content-wrapper,
.light-style .container-xxl,
.light-style .container-fluid,
.light-style #main-content,
.container-p-y,
.container-xxl,
.container-fluid,
#main-content,
.flex-grow-1 {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--text-primary) !important;
}

/* Override Sneat CSS variables */
.light-style {
    --bs-body-bg: #0a0e27 !important;
    --bs-body-color: #e8eaf6 !important;
    --bs-card-bg: rgba(17, 22, 56, 0.6) !important;
    --bs-card-border-color: rgba(255,255,255,0.08) !important;
    --bs-border-color: rgba(255,255,255,0.08) !important;
    --bs-modal-bg: rgba(17, 22, 56, 0.95) !important;
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: rgba(255,255,255,0.02) !important;
    --bs-table-hover-bg: rgba(102,126,234,0.08) !important;
    --bs-list-group-bg: rgba(17, 22, 56, 0.6) !important;
}

/* Kill ALL white backgrounds */
.bg-white, .bg-light, .bg-body {
    background: rgba(17, 22, 56, 0.6) !important;
}

div[class*="container"],
.row,
.col, [class*="col-"] {
    background-color: transparent !important;
}

/* Page wrapper */
.light-style .layout-container {
    background-color: var(--bg-primary) !important;
}

.light-style .content-wrapper {
    background: transparent !important;
}

/* === MAXIMUM SPECIFICITY OVERRIDES === */
html.light-style .card,
html.light-style .card .card-body,
html.light-style .card .card-header,
html.light-style .card .card-footer {
    background: rgba(17, 22, 56, 0.6) !important;
    background-color: rgba(17, 22, 56, 0.6) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

html.light-style .card .card-body,
html.light-style .card .card-header,
html.light-style .card .card-footer {
    background: transparent !important;
    background-color: transparent !important;
}

html.light-style .modal .modal-content {
    background: rgba(17, 22, 56, 0.98) !important;
    background-color: rgba(17, 22, 56, 0.98) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

html.light-style .modal .modal-header,
html.light-style .modal .modal-body,
html.light-style .modal .modal-footer {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

html.light-style .modal .modal-title,
html.light-style .modal h5 {
    color: var(--text-primary) !important;
}

html.light-style .list-group-item {
    background: rgba(17, 22, 56, 0.6) !important;
    background-color: rgba(17, 22, 56, 0.6) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: var(--text-primary) !important;
}

html.light-style .table,
html.light-style .table th,
html.light-style .table td,
html.light-style .table thead,
html.light-style .table tbody,
html.light-style .table tr {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

html.light-style .table th {
    background-color: rgba(102,126,234,0.1) !important;
    color: #667eea !important;
}

html.light-style .form-control,
html.light-style .form-select,
html.light-style .input-group-text {
    background: rgba(255,255,255,0.04) !important;
    background-color: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: var(--text-primary) !important;
}

html.light-style .nav-pills .nav-link {
    color: rgba(255,255,255,0.55) !important;
}

html.light-style .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: #fff !important;
}

/* ============================================
   LAYOUT
   ============================================ */
.layout-wrapper, .layout-container, .layout-page, .content-wrapper {
    background: transparent !important;
}

.bg-menu-theme, .bg-navbar-theme, .bg-footer-theme {
    background: transparent !important;
}

.content-backdrop { display: none !important; }

/* ============================================
   SIDEBAR MENU
   ============================================ */
#layout-menu, .layout-menu {
    background: rgba(10, 14, 39, 0.85) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-right: 1px solid var(--glass-border) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.3) !important;
}

.menu-inner-shadow { display: none !important; }

/* Brand */
.app-brand { padding: 1.2rem 1.5rem !important; }

.app-brand-text, .app-brand-link .demo {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Menu Headers */
.menu-header .menu-header-text {
    color: var(--accent-1) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.65rem !important;
    letter-spacing: 0.12em;
}

/* Menu Items */
.menu-inner > .menu-item > .menu-link,
.menu-inner .menu-link {
    color: var(--text-secondary) !important;
    padding: 0.6rem 1.5rem !important;
    margin: 2px 0.75rem !important;
    border-radius: var(--radius-sm) !important;
    transition: var(--transition) !important;
    border-left: 3px solid transparent !important;
}

.menu-inner .menu-link:hover {
    color: var(--text-primary) !important;
    background: var(--bg-card-hover) !important;
    border-left-color: var(--accent-1) !important;
}

.menu-inner .menu-item.active > .menu-link {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(102,126,234,0.2) 0%, rgba(118,75,162,0.15) 100%) !important;
    border-left-color: var(--accent-1) !important;
    box-shadow: 0 0 20px rgba(102,126,234,0.1) !important;
}

.menu-icon, .menu-link .tf-icons {
    color: var(--text-secondary) !important;
    transition: var(--transition);
}

.menu-item.active .menu-icon,
.menu-item.active .tf-icons {
    color: var(--accent-cyan) !important;
    filter: drop-shadow(0 0 4px rgba(0,212,255,0.4));
}

.menu-link:hover .menu-icon,
.menu-link:hover .tf-icons {
    color: var(--accent-1) !important;
}

/* ============================================
   TOP NAVBAR
   ============================================ */
.layout-navbar, #layout-navbar {
    background: rgba(10, 14, 39, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}

.navbar-detached { border-radius: 0 0 var(--radius-md) var(--radius-md) !important; }

/* Balance badge */
.balance-container {
    background: var(--gradient-primary) !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 6px 16px !important;
    height: auto !important;
    box-shadow: 0 0 15px rgba(102,126,234,0.3);
}

.balance-amount {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin: 0 !important;
}

/* Hamburger */
.layout-menu-toggle .nav-link,
.layout-menu-toggle i, .bx-menu {
    color: var(--text-primary) !important;
}

/* Avatar */
.avatar img {
    border: 2px solid var(--accent-1) !important;
    border-radius: 50% !important;
    transition: var(--transition);
}

.avatar-online::after {
    background-color: var(--accent-green) !important;
    box-shadow: 0 0 6px var(--accent-green) !important;
}

/* Dropdown */
.dropdown-menu {
    background: rgba(17, 22, 56, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

.dropdown-item {
    color: var(--text-secondary) !important;
    transition: var(--transition);
    border-radius: var(--radius-sm);
}

.dropdown-item:hover {
    color: var(--text-primary) !important;
    background: var(--bg-card-hover) !important;
}

.dropdown-divider { border-color: var(--glass-border) !important; }

/* ============================================
   CARDS - AGGRESSIVE OVERRIDES
   ============================================ */
.card,
.light-style .card,
html .card,
body .card,
.layout-page .card,
.content-wrapper .card,
.container-xxl .card,
div > .card,
.card.mb-3,
.card.h-100 {
    background: rgba(17, 22, 56, 0.6) !important;
    background-color: rgba(17, 22, 56, 0.6) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-glow) !important;
    transition: var(--transition);
    color: var(--text-primary) !important;
}

.card:hover {
    border-color: var(--glass-border-hover) !important;
    box-shadow: 0 8px 40px rgba(102,126,234,0.12) !important;
}

.card-header,
.light-style .card-header,
.card .card-header {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}

.card-body,
.light-style .card-body,
.card .card-body {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

.card-footer,
.card .card-footer {
    background: transparent !important;
    border-top: 1px solid var(--glass-border) !important;
}

.card-title { color: var(--text-primary) !important; font-weight: 600 !important; }
.card-text { color: var(--text-secondary) !important; }

/* Modal dark */
.modal-content,
.light-style .modal-content {
    background: rgba(17, 22, 56, 0.95) !important;
    background-color: rgba(17, 22, 56, 0.95) !important;
    backdrop-filter: blur(24px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-primary) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
}

.modal-title { color: var(--text-primary) !important; }
.modal-body { color: var(--text-primary) !important; }
.btn-close { filter: invert(1) !important; }

/* Nav pills */
.nav-pills .nav-link,
.light-style .nav-pills .nav-link {
    color: var(--text-secondary) !important;
    background: transparent !important;
}

.nav-pills .nav-link.active,
.light-style .nav-pills .nav-link.active {
    background: var(--gradient-primary) !important;
    color: #fff !important;
}

/* Pagination */
.page-link,
.light-style .page-link {
    background: var(--bg-card) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.page-link:hover {
    background: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   STAT CARDS (Dashboard)
   ============================================ */
.premium-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.stat-card:nth-child(1)::before { background: var(--gradient-cyan); }
.stat-card:nth-child(2)::before { background: var(--gradient-primary); }
.stat-card:nth-child(3)::before { background: var(--gradient-orange); }
.stat-card:nth-child(4)::before { background: var(--gradient-red); }

.stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--glass-border-hover);
    box-shadow: 0 8px 32px rgba(102,126,234,0.15);
}

.stat-card .stat-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.stat-card:nth-child(1) .stat-icon { background: rgba(0,212,255,0.12); color: var(--accent-cyan); }
.stat-card:nth-child(2) .stat-icon { background: rgba(102,126,234,0.12); color: var(--accent-1); }
.stat-card:nth-child(3) .stat-icon { background: rgba(245,166,35,0.12); color: var(--accent-orange); }
.stat-card:nth-child(4) .stat-icon { background: rgba(255,71,87,0.12); color: var(--accent-red); }

.stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* ============================================
   LIST GROUP
   ============================================ */
.list-group { border-radius: var(--radius-lg) !important; }
.list-group-item {
    background: var(--bg-card) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
    transition: var(--transition);
}

.list-group-item:hover {
    background: var(--bg-card-hover) !important;
}

.list-group-item h6 { color: var(--text-primary) !important; }
.list-group-item p { color: var(--text-secondary) !important; }

/* ============================================
   TABLES
   ============================================ */
.table, table {
    color: var(--text-primary) !important;
    background: transparent !important;
}

.table-responsive, .table-wrapper, div:has(> table) {
    background: transparent !important;
}

.table th, table th {
    background: rgba(102,126,234,0.1) !important;
    color: var(--accent-1) !important;
    font-weight: 600 !important;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-color: var(--glass-border) !important;
}

.table td, table td {
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
    background: transparent !important;
    vertical-align: middle;
}

.table > thead, .table > tbody, .table > tfoot,
table > thead, table > tbody, table > tfoot,
.table > thead > tr, .table > tbody > tr,
table > thead > tr, table > tbody > tr {
    background: transparent !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped tbody tr:nth-of-type(odd),
.table tbody tr:nth-of-type(odd) {
    background: rgba(255,255,255,0.02) !important;
    --bs-table-accent-bg: transparent !important;
    color: var(--text-primary) !important;
}

.table-striped > tbody > tr:nth-of-type(even) > *,
.table tbody tr:nth-of-type(even) {
    background: transparent !important;
    --bs-table-accent-bg: transparent !important;
}

.table tbody tr:hover, table tbody tr:hover,
.table-hover > tbody > tr:hover > * {
    background: rgba(102,126,234,0.08) !important;
    --bs-table-accent-bg: transparent !important;
    color: var(--text-primary) !important;
}

/* Badge overrides */
.badge, span[class*="badge"] {
    border: none !important;
}

.badge.bg-success, .badge-success { background: rgba(0,245,160,0.15) !important; color: var(--accent-green) !important; }
.badge.bg-warning, .badge-warning { background: rgba(245,166,35,0.15) !important; color: var(--accent-orange) !important; }
.badge.bg-danger, .badge-danger { background: rgba(255,71,87,0.15) !important; color: var(--accent-red) !important; }
.badge.bg-info, .badge-info { background: rgba(0,212,255,0.15) !important; color: var(--accent-cyan) !important; }
.badge.bg-primary, .badge-primary { background: rgba(102,126,234,0.15) !important; color: var(--accent-1) !important; }

/* Status labels */
[style*="background-color: red"], [style*="background: red"] {
    background: rgba(255,71,87,0.2) !important;
    color: var(--accent-red) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--text-secondary) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--bg-card) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-secondary) !important;
    border: 1px solid var(--glass-border) !important;
    background: transparent !important;
    border-radius: var(--radius-sm) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* ============================================
   FORMS
   ============================================ */
.form-control, .form-select, input[type="text"], input[type="password"],
input[type="email"], input[type="number"], input[type="search"], textarea, select {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    transition: var(--transition);
}

.form-control:focus, .form-select:focus,
input:focus, textarea:focus, select:focus {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--accent-1) !important;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.15) !important;
    color: var(--text-primary) !important;
}

.form-control::placeholder, input::placeholder {
    color: var(--text-muted) !important;
}

.form-label, label {
    color: var(--text-secondary) !important;
    font-weight: 500;
    font-size: 0.85rem;
}

.form-check-input {
    background-color: rgba(255,255,255,0.1) !important;
    border-color: var(--glass-border) !important;
}

.form-check-input:checked {
    background-color: var(--accent-1) !important;
    border-color: var(--accent-1) !important;
}

.input-group-text {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary, .btn-outline-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(102,126,234,0.3);
}

.btn-primary:hover, .btn-outline-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(102,126,234,0.45) !important;
}

.btn-primary:active, .btn-outline-primary:active {
    transform: translateY(0);
}

.btn-danger {
    background: var(--gradient-red) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(255,71,87,0.3);
}

.btn-success {
    background: var(--gradient-green) !important;
    border: none !important;
    color: #0a0e27 !important;
    font-weight: 600 !important;
}

.btn-warning {
    background: var(--gradient-orange) !important;
    border: none !important;
    color: #fff !important;
}

/* ============================================
   ALERTS
   ============================================ */
.alert {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(10px);
}

.alert-success {
    background: rgba(0,245,160,0.1) !important;
    color: var(--accent-green) !important;
    border-color: rgba(0,245,160,0.2) !important;
}

.alert-danger {
    background: rgba(255,71,87,0.1) !important;
    color: var(--accent-red) !important;
}

/* ============================================
   FOOTER
   ============================================ */
.content-footer, footer {
    background: transparent !important;
    color: var(--text-muted) !important;
    border-top: 1px solid var(--glass-border);
}

footer a { color: var(--accent-1) !important; }
footer a:hover { color: var(--accent-cyan) !important; }

/* ============================================
   LOGIN PAGE
   ============================================ */
.authentication-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.authentication-wrapper .card {
    background: rgba(17, 22, 56, 0.6) !important;
    backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(102,126,234,0.2) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(102,126,234,0.08) !important;
    max-width: 420px;
    width: 100%;
}

.authentication-wrapper .app-brand {
    margin-bottom: 0.5rem;
}

.authentication-wrapper h4, .authentication-wrapper p {
    color: var(--text-primary) !important;
}

.authentication-wrapper p {
    color: var(--text-secondary) !important;
}

/* ============================================
   MISC OVERRIDES
   ============================================ */
.text-body, .fw-semibold, .fw-bolder, h1, h2, h3, h4, h5, h6,
.card-title, .menu-text {
    color: var(--text-primary) !important;
}

.text-muted, small.text-muted {
    color: var(--text-secondary) !important;
}

/* Tabs */
.tabhmgxxx-button {
    background: var(--bg-card) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    transition: var(--transition);
}

.tabhmgxxx-button.active {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* Sale badges */
.sell-bg-label-success {
    background: rgba(0,245,160,0.15) !important;
    color: var(--accent-green) !important;
}

.sell-bg-label-pending {
    background: rgba(245,166,35,0.15) !important;
    color: var(--accent-orange) !important;
}

/* Pagination */
.pagination-2 .active {
    background: var(--gradient-primary) !important;
    border-radius: var(--radius-sm);
}

.page-controls button i {
    color: var(--text-secondary) !important;
}

.cur-page {
    background: var(--bg-card) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
}

/* btn-go */
.btn-go {
    background: var(--gradient-cyan) !important;
    color: #0a0e27 !important;
    font-weight: 700 !important;
    border: none;
}

/* History list */
.his li {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--glass-border);
    padding: 0.5rem 0;
}

/* Loading overlay */
.overlayhmg {
    background-color: rgba(10, 14, 39, 0.7) !important;
}

.loaderhmg {
    border-color: var(--accent-1) !important;
    border-top-color: transparent !important;
}

/* Layout overlay (mobile) */
.layout-overlay {
    background-color: rgba(10, 14, 39, 0.6) !important;
}

/* ============================================
   BACKGROUND (safe, no overlay)
   ============================================ */
body {
    background-image:
        radial-gradient(600px circle at 20% 30%, rgba(102,126,234,0.06), transparent 50%),
        radial-gradient(500px circle at 80% 70%, rgba(118,75,162,0.05), transparent 50%),
        radial-gradient(400px circle at 50% 50%, rgba(0,212,255,0.03), transparent 50%) !important;
    background-attachment: fixed !important;
}

/* ============================================
   MODAL Z-INDEX FIX
   ============================================ */
.modal-backdrop {
    background-color: rgba(10, 14, 39, 0.7) !important;
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}

.modal-dialog {
    z-index: 1055 !important;
}

.modal-content {
    z-index: 1060 !important;
    position: relative;
}

/* Ensure content doesn't create stacking context issues */
.layout-wrapper, .container-xxl, .authentication-wrapper {
    position: relative;
    z-index: auto;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .premium-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .stat-card .stat-value { font-size: 1.2rem; }
    .stat-card { padding: 1rem; }
}

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