/* 
  V9.VIP Clone Stylesheet
  Premium, Dashboard-style layout
*/

:root {
    /* Colors from qznssm.css analysis - DARK (Default) */
    --primary: #f1403c; 
    --primary-hover: #d32f2f;
    --bg-main: #0b0c10; 
    --bg-card: #1a1a23;
    --sidebar-bg: #111217;
    --nav-group-bg: #1c1d24;
    --sidebar-width: 300px; 
    --right-sidebar-width: 360px; 
    --header-height: 52px;
    --header-bg: #1a1a1f;
    --text-main: #ffffff;
    --text-muted: #888888;
    --accent: #f1c40f;
    --shadow: 0 0.208vw 1.04vw rgba(0, 0, 0, 0.4);
    --border-radius: 0.416vw;
    
    --font-xs: 0.625vw;
    --font-sm: 0.75vw;
    --font-md: 0.875vw;
    --font-lg: 1vw;
}

[data-theme="light"] {
    --bg-main: #f4f6f9;
    --bg-card: #ffffff;
    --sidebar-bg: #ffffff;
    --nav-group-bg: #f0f2f5;
    --header-bg: #ffffff;
    --text-main: #333333;
    --text-muted: #666666;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    overflow-x: hidden;
    animation: fadeIn 0.8s ease-out;
}

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

/* Layout Wrapper */
.app-container {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

/* Body Row: sidebar + main + right-sidebar */
.body-row {
    display: flex;
    flex: 1;
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
}

/* Left Sidebar */
.sidebar-left {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    padding: 0; /* Remove top padding to let logo sit at top */
    z-index: 210; /* Above header */
    overflow-y: auto;
    transition: background-color 0.3s;
}


.sidebar-logo {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 15px;
    background: var(--header-bg); /* Match header background */
    margin-bottom: 12px;
}

.sidebar-tabs {
    display: flex;
    background: #2a2a35;
    border-radius: 8px;
    margin: 0 12px 12px 12px;
    padding: 4px;
}


.sidebar-tab {
    flex: 1;
    padding: 9px 5px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.3s;
    color: #999;
}

.sidebar-tab.active {
    background: #3a3a48;
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.nav-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px 12px 12px;
    overflow-y: auto;
}

.nav-group {
    background: var(--nav-group-bg); /* Layered card background */
    border-radius: 12px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s;
}


.nav-item {
    background: transparent;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    color: #aaa;
    text-decoration: none;
    transition: 0.3s;
    font-weight: 500;
    font-size: var(--font-sm);
    border-radius: 10px;
    position: relative;
}

.nav-item i {
    width: 20px;
    margin-right: 12px;
    font-size: 14px;
    color: #777;
    text-align: center;
}

.nav-item:hover {
    background: rgba(255,255,255,0.04);
    color: #fff;
}

.nav-item:hover i {
    color: #fff;
}

.nav-item .badge {
    margin-left: auto;
    background: #333440;
    color: #888;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
}

.nav-item .arrow {
    margin-left: auto;
    color: #444;
    font-size: 11px;
}

.theme-item {
    justify-content: space-between;
    cursor: default;
}

.theme-switch {
    display: flex;
    background: #1a1a1f;
    padding: 3px;
    border-radius: 20px;
    gap: 8px;
    align-items: center;
}

.theme-switch i {
    font-size: 12px;
    margin: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.theme-switch i.active {
    background: #3a3a48;
    color: #fff;
}

.nav-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 8px 0;
}

.theme-toggle {
    margin-top: auto;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    color: #888;
    font-size: 12px;
}

/* Main Content Area */
.main-wrapper {
    margin-left: var(--sidebar-width);
    margin-right: var(--right-sidebar-width);
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-main);
    min-width: 0; /* Important to prevent flex overflow */
}

/* =========================================
   TOP HEADER — Full-width dark bar
   ========================================= */
.header {
    width: calc(100% - var(--sidebar-width));
    height: var(--header-height);
    background: var(--header-bg);
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    z-index: 250; /* Above everything except maybe modals */
    gap: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 160px;
}

.logo img {
    height: 32px;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-text .brand {
    color: var(--primary);
    font-weight: 900;
    font-size: 1.1vw;
    letter-spacing: 1px;
}

.logo-text .domain {
    color: #e62b1e99;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 2px;
}

.announcement {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    color: #888;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.announcement i {
    color: #666;
    flex-shrink: 0;
    font-size: 13px;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.circle-tool {
    width: 30px;
    height: 30px;
    background: #2e2e3a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 13px;
    cursor: pointer;
    transition: 0.3s;
}

.circle-tool:hover {
    background: #3e3e4e;
    color: #fff;
}

.announcement-scroll {
    animation: scroll-text 15s linear infinite;
    display: inline-block;
}

@keyframes scroll-text {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.auth-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* User Controls (Logged In) */
.user-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.wallet-info {
    display: flex;
    align-items: center;
    background: #111217;
    padding: 4px 4px 4px 12px;
    border-radius: 30px;
    gap: 12px;
}

.balance-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.balance {
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

.balance small {
    font-size: 10px;
    color: #888;
    font-weight: 500;
}

.refresh-icon {
    font-size: 12px;
    color: #555;
    cursor: pointer;
    transition: 0.3s;
}

.refresh-icon:hover {
    color: #fff;
    transform: rotate(180deg);
}

.btn-recharge {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(241, 64, 60, 0.3);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #2a2a35;
    padding: 4px 12px 4px 4px;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    transition: 0.3s;
}

.user-profile:hover {
    background: #3a3a48;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: #111217;
    border: 2px solid #3e3e52;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.username {
    font-size: 13px;
    font-weight: 600;
    color: #eee;
}

.arrow-down {
    font-size: 10px;
    color: #888;
    transition: 0.3s;
}

/* Profile Dropdown */
.profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 200px;
    background: #1c1d24;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.05);
    z-index: 300;
    display: none;
    flex-direction: column;
    animation: slideDown 0.3s ease-out;
}

.profile-dropdown.active {
    display: flex;
}

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

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: #aaa;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    transition: 0.2s;
}

.dropdown-item i {
    width: 16px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

.dropdown-item:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}

.dropdown-item:hover i {
    color: var(--primary);
}

.fa-rotate-180 {
    transform: rotate(180deg);
}

.btn {
    padding: 8px 22px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    font-size: var(--font-sm);
    white-space: nowrap;
}

.btn-login {
    background: transparent;
    color: #ccc;
    border: 1px solid #3e3e52;
}

.btn-login:hover {
    border-color: #888;
    color: #fff;
}

.btn-register {
    background: var(--primary);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(230, 43, 30, 0.35);
}

.btn-register:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

/* Right Sidebar positioning */
.sidebar-right {
    width: var(--right-sidebar-width);
    height: calc(100vh - var(--header-height));
    position: fixed;
    right: 0;
    top: var(--header-height);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
    z-index: 190; /* Just below header */
    background: var(--bg-main); /* Ensure it's not transparent */
}

/* Hero Section Redesign */
.hero-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.hero-banner {
    height: 320px;
    background: linear-gradient(90deg, #1e1e26 0%, #2a2a35 100%);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    padding: 40px 60px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.05);
}

.banner-text {
    z-index: 2;
    color: #333;
    max-width: 500px;
}

.banner-text h2 {
    font-size: 2.2vw;
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: 1px;
    color: #fff;
}

.banner-highlight {
    font-size: 1.4vw;
    font-weight: 600;
    color: var(--primary);
}

.banner-char {
    position: absolute;
    right: 5%;
    bottom: 0;
    height: 110%; /* Slightly taller to overlap if needed */
    z-index: 1;
    pointer-events: none;
}

.banner-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.banner-dots .dot {
    width: 6px;
    height: 6px;
    background: rgba(0,0,0,0.2);
    border-radius: 50%;
}

.banner-dots .dot.active {
    background: var(--primary);
    width: 12px;
    border-radius: 10px;
}

.section-divider {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

.dot-icon {
    color: var(--primary);
    font-size: 8px;
}

.hero-sub {
    display: flex;
    gap: 20px;
}

.sub-card {
    flex: 1;
    height: 220px;
    border-radius: 25px;
    padding: 30px;
    position: relative;
    overflow: visible; /* To allow character overlap */
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
}

.sub-card.sports {
    background: linear-gradient(135deg, #a11b15 0%, #1a1010 100%);
}

.sub-card.casino {
    background: linear-gradient(135deg, #3d5a80 0%, #1a202c 100%);
}

.card-info {
    z-index: 2;
    position: relative;
    max-width: 60%;
}

.card-info h3 {
    font-size: 2vw;
    font-weight: 900;
    margin-bottom: 8px;
    color: #fff;
}

.card-info p {
    font-size: 0.75vw;
    margin-bottom: 20px;
    opacity: 0.7;
    line-height: 1.4;
    color: #fff;
}

.card-char {
    position: absolute;
    bottom: 0;
    z-index: 3;
    pointer-events: none;
    transition: 0.3s;
}

.char-left {
    right: 0;
    height: 120%;
    transform: translateY(10px);
}

.char-right {
    right: 0;
    height: 110%;
}

.sub-card:hover .card-char {
    transform: translateY(-5px) scale(1.05);
}

.btn-pill {
    padding: 10px 30px;
    border-radius: 25px;
    border: none;
    background: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(241, 64, 60, 0.4);
}


/* Game Sections */
.game-category {
    background: #1a1a23; /* Dark card background */
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}


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

.category-title {
    font-size: 16px;
    font-weight: 700;
    border-left: 3px solid var(--primary);
    padding-left: 12px;
    color: #fff;
}


.game-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 15px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.game-scroll::-webkit-scrollbar {
    display: none;
}

.category-arrows {
    display: flex;
    gap: 10px;
    align-items: center;
}

.category-arrows i {
    width: 32px;
    height: 32px;
    background: #1e1d24;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    transition: 0.3s;
    font-size: 12px;
}

.category-arrows i:hover {
    background: var(--primary);
    color: #fff;
}

.game-card {
    min-width: 160px;
    height: 220px;
    background: #25262e;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255,255,255,0.05);
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.game-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(230, 43, 30, 0.15);
    border-color: rgba(230, 43, 30, 0.1);
}

.game-card:hover .game-label {
    background: linear-gradient(transparent, var(--primary));
    padding-bottom: 20px;
}

.game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s;
    text-align: center;
}

/* Data Table Redesign (h4.png) */
.data-section {
    background: #111217;
    border-radius: 15px;
    padding: 20px;
    margin-top: 20px;
}

.capsule-tabs {
    display: flex;
    background: #1e1d24;
    border-radius: 30px;
    width: fit-content;
    padding: 4px;
    margin-bottom: 25px;
}

.capsule-tab {
    padding: 10px 30px;
    border-radius: 25px;
    color: #888;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.capsule-tab.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 15px rgba(241, 64, 60, 0.3);
}

.data-table {
    width: 100%;
}

.data-table thead th {
    text-align: left;
    padding: 12px 15px;
    color: #555;
    font-size: 12px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.data-table tbody tr {
    transition: 0.2s;
    border-radius: 8px;
}

.data-table tbody tr:hover {
    background: rgba(255,255,255,0.02);
}

.data-table td {
    padding: 14px 15px;
    font-size: 13px;
    color: #ccc;
    vertical-align: middle;
}

.event-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #eee;
    font-weight: 500;
}

.event-cell i {
    color: #666;
    font-size: 14px;
    width: 20px;
    text-align: center;
}

.currency-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #f1403c;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
}

.profit-plus {
    color: #f1403c;
    font-weight: 700;
}

/* Leaderboard Specifics (h4i.png) */
.data-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.table-filters {
    display: flex;
    gap: 8px;
}

.filter-btn {
    background: #2a2a35;
    color: #ccc;
    border-radius: 15px;
    padding: 6px 16px;
    font-size: 11px;
    cursor: pointer;
    transition: 0.3s;
}

.filter-btn.active {
    background: #3a3a48;
    color: #fff;
}

.rank-badge {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 11px;
    margin-right: 12px;
}

.rank-1 { background: linear-gradient(135deg, #f1c40f, #f39c12); color: #fff; }
.rank-2 { background: linear-gradient(135deg, #bdc3c7, #95a5a6); color: #fff; }
.rank-3 { background: linear-gradient(135deg, #e67e22, #d35400); color: #fff; }

.row-top-1 { background: linear-gradient(90deg, rgba(241, 196, 15, 0.1) 0%, transparent 100%) !important; }
.row-top-2 { background: linear-gradient(90deg, rgba(189, 195, 199, 0.1) 0%, transparent 100%) !important; }
.row-top-3 { background: linear-gradient(90deg, rgba(230, 126, 34, 0.1) 0%, transparent 100%) !important; }

/* Right Sidebar — duplicate removed, rule defined above */


.promo-card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--shadow);
    transition: 0.3s;
    border: 1px solid rgba(0,0,0,0.02);
}

.promo-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.app-banner {
    flex: 1;
    background: linear-gradient(135deg, #e62b1e 0%, #ff5e62 100%);
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
    color: white;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.app-banner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    z-index: 1;
}

.app-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.download-btn {
    background: white;
    color: var(--primary);
    margin-top: 20px;
    width: 100%;
}

/* Responsive */
@media (max-width: 1200px) {
    .sidebar-right { display: none; }
    .main-wrapper { margin-right: 0; }
}

/* Match Cards Redesign (h2.png) */
.match-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.match-card {
    background: radial-gradient(circle at top right, rgba(255,255,255,0.03), transparent), #1a1a23;
    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 15px 15px; /* Dot pattern */
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: 0.3s;
}

.match-card:hover {
    transform: translateY(-5px);
    border-color: rgba(230, 43, 30, 0.3);
}

.match-league {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #888;
}

.match-league img {
    width: 18px;
    height: 12px;
    border-radius: 2px;
}

.match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 80px;
    text-align: center;
}

.team-logo {
    width: 48px;
    height: 48px;
    background: #1c1d24;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--primary);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.05);
}

.team-logo img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.team span {
    font-size: 14px;
    font-weight: 600;
    color: #eee;
}

.match-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.score-vs {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
}

.score-time {
    font-size: 11px;
    color: #666;
}

.match-odds {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 8px;
    margin-top: 10px;
}

.odds-btn {
    background: #111118;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #666;
    border: 1px solid rgba(255,255,255,0.03);
    cursor: pointer;
    transition: 0.2s;
}

.odds-btn b {
    color: #fff;
    font-weight: 700;
    margin-left: 5px;
}

.odds-btn:hover {
    background: #25262e;
    border-color: var(--primary);
}

.odds-more {
    background: #2a2a35;
    color: #888;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Game Providers (h5.png) */
.providers-section {
    margin-top: 30px;
}

.providers-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
}

.provider-card {
    background: #1e1d24;
    border-radius: 12px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s;
    border: 1px solid rgba(255,255,255,0.03);
}

.provider-card:hover {
    background: #25262e;
    border-color: var(--primary);
}

.provider-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
}

.provider-card span {
    position: relative;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

/* About & FAQ (h5.png) */
.about-v9-section {
    display: flex;
    gap: 40px;
    margin-top: 50px;
    padding-bottom: 50px;
    align-items: center;
}

.about-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.about-title {
    font-size: 2.8vw;
    font-weight: 900;
    margin-bottom: 30px;
    color: #fff;
}

.faq-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #1e1d24;
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s;
    border: 1px solid rgba(255,255,255,0.05);
}

.faq-question {
    padding: 18px 25px;
    font-weight: 700;
    font-size: 14px;
    color: #eee;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
}

.faq-question:hover {
    background: rgba(255,255,255,0.02);
}

.faq-answer {
    padding: 0 25px 25px 25px;
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    display: none;
}

.faq-item.active .faq-answer {
    display: block;
}

/* Footer (h6.png) */
.main-footer {
    margin-top: 60px;
    padding: 40px 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.footer-logo img, .footer-top img {
    height: 35px;
    width: auto;
    object-fit: contain;
}

.odds-selector {
    background: #1e1d24;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    color: #ccc;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.05);
}

.footer-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 100%;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.footer-col h4 {
    font-size: 15px;
    color: #eee;
    margin-bottom: 20px;
    font-weight: 700;
}

.footer-col a {
    display: block;
    color: #666;
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 12px;
    transition: 0.3s;
}

.footer-col a:hover {
    color: var(--primary);
}

.contact-icon {
    width: 40px;
    height: 40px;
    background: #2a1a1a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
}

.contact-icon:hover {
    background: var(--primary);
    color: #fff;
    transform: scale(1.1);
}

.footer-bottom {
    text-align: center;
    font-size: 12px;
    color: #444;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.03);
}

/* Login Modal (popup.png) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.modal-overlay.active {
    display: flex;
    animation: fadeInModal 0.3s ease;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.modal-content {
    background: #111217;
    width: 850px;
    max-width: 90%;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.05);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #888;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
}

.modal-close:hover {
    color: #fff;
    transform: rotate(90deg);
}

.login-split {
    display: flex;
}

.login-left {
    flex: 1.2;
    background: linear-gradient(135deg, #a11b15 0%, #1a1010 100%);
    background-image: url('assets/silver_bg.png'); /* Fallback image */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    position: relative;
}

.login-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
}

.login-logo-top {
    height: 40px;
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
    align-self: center;
}

.login-banner-text {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    background: rgba(0,0,0,0.5);
    padding: 10px;
    border-radius: 30px;
    backdrop-filter: blur(5px);
}

.login-right {
    flex: 1;
    padding: 40px;
    background: #1a1b21;
}

.login-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 25px;
    color: #fff;
}

.login-tabs {
    display: flex;
    background: #111217;
    border-radius: 30px;
    padding: 4px;
    margin-bottom: 30px;
}

.login-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    border-radius: 25px;
    transition: 0.3s;
}

.login-tab.active {
    background: var(--primary);
    color: #fff;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
    font-weight: 600;
}

.form-group input {
    width: 100%;
    background: #111217;
    border: 1px solid #2a2b35;
    border-radius: 10px;
    padding: 12px 15px;
    color: #fff;
    font-size: 14px;
    transition: 0.3s;
}

.form-group input:focus {
    border-color: var(--primary);
    outline: none;
}

.password-input-wrapper {
    position: relative;
}

.password-input-wrapper i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    cursor: pointer;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    font-size: 13px;
}

.form-options label {
    color: #888;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.form-options a {
    color: var(--primary);
    text-decoration: none;
}

.btn-login-submit {
    width: 100%;
    background: #8e1a12; /* Darker red from popup.png */
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.btn-login-submit:hover {
    background: var(--primary);
}

.login-footer {
    text-align: center;
    margin-top: 25px;
    font-size: 13px;
    color: #888;
}

.login-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

/* Register Modal specific (register.png) */
.register-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.back-to-login {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

.back-to-login i {
    font-size: 16px;
    color: #888;
}

.back-to-login:hover i {
    color: #fff;
    transform: translateX(-3px);
}

.password-checkpoints {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checkpoint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #666;
    transition: 0.3s;
}

.checkpoint i {
    font-size: 9px;
    color: #444;
}

.checkpoint.valid {
    color: #888;
}

.checkpoint.valid i {
    color: #00ff00;
}

/* Casino Hall (1.png) */
.casino-hero {
    margin-bottom: 25px;
}

.casino-banner {
    height: 350px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.casino-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-overlay {
    position: absolute;
    bottom: 40px;
    left: 40px;
}

.banner-overlay h2 {
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 10px;
    color: #fff;
}

.hall-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e1d24;
    padding: 10px 20px;
    border-radius: 40px;
    margin-bottom: 30px;
}

.hall-tabs {
    display: flex;
    gap: 20px;
}

.hall-tab {
    font-size: 14px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 20px;
    transition: 0.3s;
}

.hall-tab.active, .hall-tab:hover {
    background: var(--primary);
    color: #fff;
}

.hall-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #111217;
    padding: 8px 15px;
    border-radius: 20px;
    width: 250px;
}

.hall-search input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 13px;
    width: 100%;
}

.hall-search input:focus {
    outline: none;
}

.casino-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.casino-card {
    background: #1e1d24;
    border-radius: 15px;
    overflow: hidden;
    transition: 0.3s;
    border: 1px solid rgba(255,255,255,0.03);
}

.casino-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
}

.card-img {
    height: 220px;
    position: relative;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-meta {
    padding: 15px;
}

.card-meta h4 {
    font-size: 15px;
    margin-bottom: 5px;
    color: #fff;
}

.card-meta p {
    font-size: 11px;
    color: #666;
    margin-bottom: 10px;
}

.player-count {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--primary);
}

.character-grid .casino-card {
    height: 280px;
    position: relative;
}

.char-label {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 5;
    font-weight: 800;
    font-size: 18px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* Ticket Banners & Auto-Scroll (g1.png) */
.casino-carousel {
    display: flex;
    gap: 15px;
    padding: 20px 0;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.ticket-banner {
    flex: 0 0 450px;
    height: 180px;
    border-radius: 15px;
    display: flex;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: 0.4s;
    opacity: 0.6;
    transform: scale(0.9);
}

.ticket-banner.active {
    opacity: 1;
    transform: scale(1);
    z-index: 10;
}

.ticket-left {
    width: 35px;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    border-right: 2px dashed rgba(0,0,0,0.1);
}

.ticket-body {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

.ticket-body h3 {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 5px;
}

.ticket-body p {
    font-size: 14px;
    opacity: 0.8;
}

.ticket-banner.yellow { background: linear-gradient(135deg, #b8860b, #4b3621); }
.ticket-banner.blue { background: linear-gradient(135deg, #4682b4, #1a2a3a); }
.ticket-banner.orange { background: linear-gradient(135deg, #d2691e, #3a1a11); }

/* Auto Scroll Hot Games */
.auto-scroll-container {
    width: 100%;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
    padding: 15px 0;
    border-radius: 12px;
}

.auto-scroll-track {
    display: flex;
    gap: 15px;
    width: max-content;
    animation: scrollHall 30s linear infinite;
}

@keyframes scrollHall {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hot-game-icon {
    width: 85px;
    flex-shrink: 0;
    text-align: center;
}

.hot-game-icon img {
    width: 85px;
    height: 85px;
    border-radius: 15px;
    object-fit: cover;
    margin-bottom: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.05);
}

.hot-game-icon span {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    display: block;
}

/* Category Specific Grids (p1.png) */
.square-grid, .fishing-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}

.casino-card.square {
    aspect-ratio: 1/1;
    height: auto;
}

.char-sub {
    font-size: 10px;
    color: #555;
    margin-top: 2px;
}

.banner-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.casino-card.banner-wide {
    height: 180px;
    position: relative;
}

.casino-card.banner-wide img, .sports-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.sports-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.casino-card.sports-banner {
    height: 220px;
    position: relative;
}

/* Providers Row */
.providers-row {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
}

.provider-logo {
    flex: 0 0 140px;
    height: 60px;
    background: #1e1d24;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.05);
    transition: 0.3s;
}

.provider-logo:hover {
    border-color: var(--primary);
    background: #25262d;
}

.provider-logo img {
    max-width: 70%;
    max-height: 50%;
    filter: grayscale(1) brightness(2);
    opacity: 0.6;
}

.provider-logo:hover img {
    filter: none;
    opacity: 1;
}

/* Casino Specific Mobile adjustments */
@media (max-width: 1400px) {
    .square-grid, .fishing-grid { grid-template-columns: repeat(6, 1fr); }
}


/* Recharge Modal Specific Styles */
.recharge-modal-content {
    width: 580px;
    max-width: 95%;
    background: #1a1b21;
    display: flex;
    flex-direction: column;
}

.recharge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    background: #111217;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.recharge-tabs {
    display: flex;
    gap: 0;
    background: #2a2a35;
    border-radius: 8px;
    padding: 3px;
}

.recharge-tab {
    padding: 8px 30px;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.3s;
}

.recharge-tab.active {
    background: #3a3a48;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.header-right-tools {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #888;
}

.header-right-tools i {
    cursor: pointer;
    font-size: 18px;
    transition: 0.3s;
}

.header-right-tools i:hover {
    color: #fff;
}

.modal-close-simple {
    background: transparent;
    border: none;
    color: #888;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
}

.recharge-body {
    padding: 20px;
    overflow-y: auto;
    max-height: 80vh;
}

/* Membership Card */
.membership-card {
    background: linear-gradient(135deg, #a11b15 0%, #4a0e0e 100%);
    border-radius: 15px;
    padding: 25px;
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.card-logo {
    height: 30px;
}

.card-balance-info {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.card-balance-info .label {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.card-currency {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.card-currency img {
    width: 20px;
    height: 14px;
}

.card-number {
    font-family: 'Courier New', Courier, monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    margin-top: 10px;
}

.card-footer-pattern {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}

/* Payment Types */
.payment-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 25px;
}

.payment-type {
    background: #111217;
    border: 1px solid #2a2b35;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.payment-type i {
    font-size: 20px;
    color: #666;
}

.payment-type span {
    font-size: 12px;
    color: #888;
    font-weight: 600;
}

.payment-type.active {
    border-color: var(--primary);
    background: rgba(241, 64, 60, 0.05);
}

.payment-type.active i {
    color: var(--primary);
}

.payment-type.active span {
    color: #fff;
}

/* Method List */
.recharge-method-list {
    margin-bottom: 25px;
}

.method-item {
    background: #111217;
    border: 1px solid #2a2b35;
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.method-name {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #eee;
}

.method-item i.fa-chevron-right {
    font-size: 12px;
    color: #444;
}

/* Amount Section */
.amount-section {
    margin-bottom: 25px;
}

.amount-section label {
    display: block;
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
    font-weight: 600;
}

.amount-input-box {
    background: #111217;
    border: 1px solid #2a2b35;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 10px;
}

.amount-input-box input {
    background: transparent;
    border: none;
    width: 100%;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
}

.amount-input-box input::placeholder {
    font-size: 16px;
    font-weight: 500;
}

.amount-hint {
    font-size: 11px;
    color: #555;
    margin-bottom: 15px;
}

.quick-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.quick-btn {
    background: #2a2a35;
    border: 1px solid #3e3e52;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
}

.quick-btn:hover {
    background: #3e3e52;
    border-color: #555;
}

/* Form Group Recharge */
.form-group-recharge {
    margin-bottom: 30px;
}

.form-group-recharge label {
    display: block;
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
    font-weight: 600;
}

.form-group-recharge input {
    width: 100%;
    background: #111217;
    border: 1px solid #2a2b35;
    border-radius: 10px;
    padding: 15px 20px;
    color: #fff;
    font-size: 14px;
}

.btn-submit-recharge {
    width: 100%;
    background: #8e1a12;
    color: #fff;
    border: none;
    padding: 18px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s;
    margin-bottom: 20px;
}

.btn-submit-recharge:hover {
    background: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(241, 64, 60, 0.4);
}

.deposit-help {
    display: block;
    text-align: center;
    color: #00a3ee;
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
}

.deposit-help:hover {
    text-decoration: underline;
}

/* Modal Views (Recharge/Withdraw) */
.modal-view {
    display: none;
}

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

.withdraw-method-section {
    margin-bottom: 20px;
}

.withdraw-method-section label {
    display: block;
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
    font-weight: 600;
}

.btn-add-card {
    width: 100%;
    background: #111217;
    border: 1px dashed #3e3e52;
    color: #eee;
    padding: 15px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-add-card:hover {
    background: #1c1d24;
    border-color: #666;
}

.grid-6 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

.quick-btn.full-width {
    grid-column: span 3;
}

/* Funds Detail Modal Styles */
.funds-modal-content {
    width: 650px;
    max-width: 100%;
    height: 100vh;
    background: #1a1b21;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    position: relative;
    animation: fadeInFunds 0.3s ease-out;
}

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

.funds-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    background: #111217;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.header-back {
    background: transparent;
    border: none;
    color: #888;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
}

.header-back:hover {
    color: #fff;
}

.header-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.funds-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #1a1b21;
}

.funds-date-filters {
    display: flex;
    background: #2a2a35;
    padding: 3px;
    border-radius: 8px;
}

.funds-filter-tab {
    padding: 6px 15px;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.3s;
}

.funds-filter-tab.active {
    background: #f1403c;
    color: #fff;
}

.funds-type-select {
    font-size: 13px;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2a2a35;
    padding: 6px 12px;
    border-radius: 6px;
}

.funds-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111217;
}

.empty-state {
    text-align: center;
}

.empty-icon {
    font-size: 60px;
    color: #333;
    margin-bottom: 15px;
    background: rgba(255,255,255,0.02);
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
}

.empty-state p {
    color: #555;
    font-size: 14px;
}

/* Activity Page Styles */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #888;
}

.breadcrumb-nav a {
    color: #888;
    text-decoration: none;
    transition: 0.3s;
}

.breadcrumb-nav a:hover {
    color: #fff;
}

.breadcrumb-nav .separator {
    font-size: 10px;
}

.breadcrumb-nav span {
    color: #fff;
}

.promo-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    background: rgba(255,255,255,0.03);
    padding: 5px;
    border-radius: 10px;
    width: fit-content;
}

.promo-tab {
    padding: 10px 40px;
    background: transparent;
    border: none;
    color: #888;
    font-weight: 700;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.3s;
}

.promo-tab.active {
    background: var(--primary);
    color: #fff;
}

.activity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.promo-card-item {
    background: #1e1d24;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.03);
    transition: 0.3s;
}

.promo-card-item:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.promo-banner-card {
    height: 180px;
    position: relative;
    overflow: hidden;
}

.promo-banner-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
}

.promo-overlay {
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
    color: #fff;
    z-index: 2;
}

.promo-main-title {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.promo-subtitle {
    font-size: 16px;
    font-weight: 600;
}

.promo-subtitle .highlight {
    color: #f1403c;
    font-size: 20px;
    font-weight: 900;
    margin: 0 5px;
}

.promo-footer {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.promo-text .title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.promo-text .time {
    font-size: 12px;
    color: #666;
}

.btn-detail {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.btn-detail:hover {
    background: #d13531;
}

/* Sidebar active item fix */
.nav-item.active {
    background: rgba(241, 64, 60, 0.1);
    color: var(--primary);
    border-right: 3px solid var(--primary);
}

.nav-item.active i {
    color: var(--primary);
}

/* Promo View Toggling */
.promo-view {
    display: none;
}

.promo-view.active {
    display: block;
}

/* Promo Badge Hot */
.promo-badge-hot {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #f1403c;
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    z-index: 5;
    box-shadow: 0 3px 8px rgba(241, 64, 60, 0.5);
    animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Bet Slip Page Styles */
.betslip-page-container {
    padding: 20px;
    background: #0b0c10;
    min-height: 80vh;
}

.game-category-bar {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 15px;
    margin-bottom: 20px;
    scrollbar-width: none;
}

.game-category-bar::-webkit-scrollbar {
    display: none;
}

.category-item {
    padding: 8px 25px;
    background: #1c1d24;
    color: #888;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.3s;
}

.category-item.active {
    background: var(--primary);
    color: #fff;
}

.settlement-tabs {
    display: flex;
    gap: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 20px;
    padding: 0 10px;
}

.settle-tab {
    padding: 12px 0;
    color: #888;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: 0.3s;
}

.settle-tab.active {
    color: #fff;
}

.settle-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary);
}

.betslip-stats {
    padding: 10px 10px;
    font-size: 13px;
    color: #666;
    margin-bottom: 40px;
}

.betslip-stats .val {
    color: #fff;
    font-weight: 700;
    margin: 0 5px;
}

.betslip-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
}

.betslip-body .empty-state {
    text-align: center;
}

.betslip-body .empty-icon {
    font-size: 50px;
    color: #333;
    margin-bottom: 20px;
    background: rgba(255,255,255,0.02);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
}

.betslip-body .main-text {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}

.betslip-body .sub-text {
    font-size: 13px;
    color: #555;
}

/* Profile Information Modal */
.profile-modal-content {
    max-width: 450px;
    height: auto;
    border-radius: 20px !important;
    padding: 0;
    overflow: hidden;
    background: #1a1b21 !important;
    margin: auto;
}

.profile-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: relative;
}

.profile-header .header-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.modal-close-simple {
    position: absolute;
    right: 20px;
    top: 20px;
    background: none;
    border: none;
    color: #888;
    font-size: 20px;
    cursor: pointer;
}

.profile-body {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-avatar-large {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 30px;
    background: #2a2b31;
    cursor: pointer;
    border: 2px solid #333;
}

.profile-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-edit-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.6);
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-size: 10px;
}

.avatar-edit-overlay i {
    font-size: 14px;
    margin-bottom: 3px;
}

.profile-info-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-info-item {
    background: #111217;
    padding: 18px 20px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
    border: 1px solid rgba(255,255,255,0.02);
}

.profile-info-item .label {
    color: #888;
    font-size: 14px;
}

.profile-info-item .value {
    color: #eee;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-info-item .value i {
    font-size: 12px;
    opacity: 0.5;
}

.profile-info-item.read-only .value {
    color: #666;
}

.btn-logout-text {
    background: none;
    border: none;
    color: #f1403c;
    font-size: 16px;
    font-weight: 700;
    margin-top: 40px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-logout-text:hover {
    opacity: 0.7;
}

/* Security Center Modal */
.security-modal-content {
    max-width: 480px;
    background: #1a1b21 !important;
    border-radius: 20px !important;
    overflow: hidden;
    padding: 0;
}

.header-tools-right {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #888;
}

.security-body {
    padding: 20px;
}

.security-banner {
    background: linear-gradient(135deg, #2a2b36 0%, #1c1d24 100%);
    border-radius: 15px;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.security-banner::after {
    content: '';
    position: absolute;
    right: -20px;
    top: -20px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(241, 64, 60, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.banner-logo {
    height: 25px;
    margin-bottom: 15px;
}

.banner-subtext {
    font-size: 15px;
    font-weight: 600;
    color: #eee;
    line-height: 1.4;
}

.shield-3d {
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, #3a3b45, #2a2b33);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3), inset 0 0 10px rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.05);
}

.shield-3d i {
    font-size: 40px;
    color: #f1403c;
    filter: drop-shadow(0 0 10px rgba(241, 64, 60, 0.4));
}

.shield-3d .check-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f1403c;
    font-size: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.security-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.security-item {
    background: #111217;
    padding: 18px 20px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
    border: 1px solid rgba(255,255,255,0.02);
}

.security-item:hover {
    background: #1c1d24;
}

.item-left {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #eee;
    font-size: 15px;
    font-weight: 500;
}

.item-left i {
    font-size: 18px;
    color: #888;
}

.security-item .chevron {
    color: #444;
    font-size: 12px;
}

.security-id-row {
    background: #111217;
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.02);
}

.id-label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #888;
    font-size: 14px;
}

.id-value {
    display: flex;
    align-items: center;
    gap: 15px;
}

.id-value .code {
    color: #eee;
    font-family: monospace;
    font-size: 14px;
}

.btn-copy {
    background: #1c1d24;
    border: 1px solid #333;
    color: var(--primary);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-copy:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Feedback Modal */
.feedback-modal-content {
    max-width: 550px;
    background: #1a1b21 !important;
    border-radius: 20px !important;
}

.feedback-body {
    padding: 20px 30px 40px;
}

.feedback-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.custom-select-box {
    background: #111217;
    border: 1px solid rgba(255,255,255,0.05);
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
    font-size: 14px;
    cursor: pointer;
}

.feedback-input {
    width: 100%;
    background: #111217;
    border: 1px solid rgba(255,255,255,0.05);
    padding: 15px 20px;
    border-radius: 12px;
    color: #eee;
    font-size: 14px;
    outline: none;
}

.textarea-group {
    position: relative;
}

.feedback-textarea {
    width: 100%;
    height: 180px;
    background: #111217;
    border: 1px solid rgba(255,255,255,0.05);
    padding: 15px 20px;
    border-radius: 12px;
    color: #eee;
    font-size: 14px;
    resize: none;
    outline: none;
}

.char-count {
    position: absolute;
    bottom: 15px;
    right: 15px;
    color: #444;
    font-size: 12px;
}

.upload-grid {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.upload-box {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    font-size: 24px;
    cursor: pointer;
    transition: 0.3s;
}

.upload-box:hover {
    background: rgba(255,255,255,0.05);
    color: #666;
}

.upload-tip {
    font-size: 12px;
    color: #444;
}

.btn-confirm-red {
    width: 100%;
    background: #f1403c;
    color: #fff;
    padding: 15px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    margin-top: 10px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-confirm-red:hover {
    filter: brightness(1.1);
}

/* Invitation Page */
.invitation-page {
    padding-bottom: 0 !important;
}

.inv-tabs {
    display: flex;
    background: #111217;
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 25px;
    width: 100%;
}

.inv-tab {
    flex: 1;
    text-align: center;
    padding: 15px 10px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #888;
    cursor: pointer;
    transition: 0.3s;
}

.inv-tab.active {
    background: #f1403c;
    color: #fff;
}

.inv-hero {
    background: linear-gradient(135deg, #1c1d24 0%, #111217 100%);
    border-radius: 20px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
    border: 1px solid rgba(255,255,255,0.02);
}

.inv-hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.inv-hero-text {
    max-width: 60%;
}

.inv-title {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    line-height: 1.2;
}

.inv-desc {
    color: #888;
    font-size: 15px;
    margin-bottom: 30px;
    line-height: 1.6;
}

.inv-promo-cards {
    display: flex;
    gap: 20px;
}

.inv-promo-card {
    background: rgba(255,255,255,0.03);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    border: 1px solid rgba(255,255,255,0.05);
}

.qr-code-box {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 8px;
    padding: 5px;
}

.qr-code-box img {
    width: 100%;
    height: 100%;
}

.qr-info p, .link-info p {
    font-size: 11px;
    color: #666;
    margin-bottom: 12px;
    line-height: 1.4;
}

.btn-inv-action {
    background: #2a2b33;
    border: none;
    color: var(--primary);
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.link-input-box {
    background: #0d0e12;
    border-radius: 8px;
    display: flex;
    padding: 5px;
    border: 1px solid rgba(255,255,255,0.05);
}

.link-input-box input {
    background: none;
    border: none;
    color: #eee;
    padding: 5px 10px;
    font-size: 11px;
    flex: 1;
    outline: none;
}

.btn-inv-copy {
    background: #2a2b33;
    border: none;
    color: var(--primary);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.inv-hero-img {
    height: 250px;
    object-fit: contain;
}

.inv-rules-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.05);
    border: none;
    color: #888;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
}

.inv-stat-box {
    background: #1c1d24;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
}

.stat-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    color: #888;
    font-size: 14px;
}

.stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
}

.stat-subtitle {
    color: #555;
    font-size: 12px;
}

.inv-rewards-section {
    margin-bottom: 40px;
}

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

.reward-total {
    font-size: 13px;
    color: #666;
}

.reward-scroll-container {
    overflow-x: auto;
    padding-bottom: 15px;
}

.reward-scroll-container::-webkit-scrollbar {
    height: 4px;
}

.reward-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
}

.reward-grid {
    display: flex;
    gap: 15px;
}

.reward-card {
    background: #1c1d24;
    border-radius: 15px;
    padding: 20px;
    min-width: 160px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.02);
}

.reward-card img {
    width: 60px;
    margin-bottom: 15px;
}

.inv-count {
    font-size: 14px;
    color: #eee;
    margin-bottom: 5px;
}

.reward-amt {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
}

.reward-card .status {
    background: #111217;
    color: #444;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 11px;
}

.reward-card.active {
    background: linear-gradient(135deg, #1c2a24, #111217);
    border-color: #2b4c3e;
}

.reward-card.active .status {
    background: rgba(43, 76, 62, 0.3);
    color: #3e9e7e;
}

.inv-rules-section {
    background: #1c1d24;
    border-radius: 20px;
    padding: 30px;
}

.section-desc {
    color: #666;
    font-size: 13px;
    margin-bottom: 30px;
}

.rules-table-container h3 {
    font-size: 16px;
    margin-bottom: 15px;
}

.rules-table {
    width: 100%;
    border-collapse: collapse;
}

.rules-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    font-size: 14px;
    color: #888;
}

.rules-table td.val {
    text-align: right;
    color: #eee;
    font-weight: 600;
}

.rules-highlight {
    background: #111217;
    border-radius: 12px;
    padding: 20px;
    font-size: 13px;
    color: #888;
    line-height: 1.8;
}

.rules-highlight strong {
    color: #eee;
}

/* Sidebar Realtime Rewards */
.inv-sidebar {
    padding-top: 15px;
}

.realtime-rewards {
    background: #111217;
    border-radius: 15px;
    padding: 20px;
    margin-top: 20px;
}

.rewards-header {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.total-amount-box {
    margin-bottom: 25px;
}

.total-amount-box p {
    font-size: 11px;
    color: #666;
    margin-bottom: 5px;
}

.total-val {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
}

.winners-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.winner-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
}

.winner-item span:first-child {
    font-family: monospace;
}

.winner-item span:last-child {
    font-weight: 700;
    color: #eee;
}

/* Invitation Views */
.inv-view {
    display: none;
}

.inv-view.active {
    display: block;
}

/* Reward Balance Card */
.reward-balance-card {
    background: linear-gradient(135deg, #1c1d24 0%, #111217 100%);
    border-radius: 20px;
    padding: 35px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border: 1px solid rgba(255,255,255,0.02);
}

.bal-label {
    color: #888;
    font-size: 14px;
    margin-bottom: 15px;
}

.bal-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 15px;
}

.bal-num {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
}

.bal-unit {
    font-size: 18px;
    color: #888;
    font-weight: 700;
}

.bal-total-label {
    color: #444;
    font-size: 12px;
}

.bal-right {
    text-align: right;
    max-width: 350px;
}

.btn-transfer-wallet {
    background: #f1403c;
    color: #fff;
    border: none;
    padding: 15px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 15px;
    transition: 0.3s;
}

.btn-transfer-wallet:hover {
    filter: brightness(1.1);
}

.bal-note {
    color: #444;
    font-size: 11px;
    line-height: 1.4;
}

/* Commission List Section */
.commission-list-section {
    background: #1c1d24;
    border-radius: 20px;
    padding: 30px;
}

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

.list-title {
    font-size: 18px;
    color: #fff;
}

.list-filters {
    display: flex;
    gap: 15px;
}

.filter-item {
    background: #111217;
    border: 1px solid rgba(255,255,255,0.05);
    padding: 10px 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #888;
    font-size: 13px;
    cursor: pointer;
}

.list-update-note {
    color: #444;
    font-size: 12px;
    margin-bottom: 30px;
}

.commission-table {
    width: 100%;
}

.table-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    color: #444;
    font-size: 14px;
    text-align: center;
}

.empty-list-state {
    padding: 80px 0;
    text-align: center;
}

.empty-icon-circle {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.02);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #444;
    font-size: 24px;
}

.empty-list-state h4 {
    color: #eee;
    font-size: 16px;
    margin-bottom: 8px;
}

.empty-list-state p {
    color: #444;
    font-size: 12px;
}

/* Income Stats Card */
.income-stats-card {
    background: #1c1d24;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.02);
}

.income-stats-card .card-header {
    padding: 20px 30px;
    background: rgba(255,255,255,0.01);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.title-with-icon {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.title-with-icon .refresh-icon {
    font-size: 13px;
    color: #444;
    cursor: pointer;
    transition: 0.3s;
}

.title-with-icon .refresh-icon:hover {
    color: var(--primary);
    transform: rotate(180deg);
}

.income-stats-card .total-val {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.income-rows {
    padding: 10px 30px;
}

.income-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    font-size: 14px;
    color: #888;
}

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

/* About Page */
.about-page {
    padding-bottom: 0 !important;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    background: #1c1d24;
    padding: 12px 25px;
    border-radius: 12px;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.02);
}

.breadcrumbs a {
    color: #666;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.breadcrumbs a:hover {
    color: var(--primary);
}

.breadcrumbs span {
    color: #eee;
    font-weight: 600;
}

.about-flex-container {
    display: flex;
    gap: 20px;
}

.about-inner-nav {
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.about-nav-item {
    background: #1c1d24;
    color: #888;
    padding: 15px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s;
    border: 1px solid rgba(255,255,255,0.02);
}

.about-nav-item:hover {
    background: rgba(255,255,255,0.05);
    color: #eee;
}

.about-nav-item.active {
    background: rgba(255,255,255,0.05);
    color: #eee;
    font-weight: 700;
    border-color: rgba(255,255,255,0.1);
}

.about-content-card {
    flex: 1;
    background: #1c1d24;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255,255,255,0.02);
}

.about-section {
    margin-bottom: 40px;
}

.about-section h2 {
    font-size: 20px;
    color: #fff;
    margin-bottom: 25px;
    font-weight: 800;
}

.about-section h3 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 700;
}

.about-section p {
    color: #aaa;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 15px;
}

.self-check-list {
    background: rgba(255,255,255,0.02);
    border-radius: 15px;
    padding: 25px;
    margin: 25px 0;
}

.self-check-list ul {
    list-style: none;
    margin-top: 15px;
}

.self-check-list li {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.self-check-list li i {
    color: #3e9e7e;
    margin-top: 3px;
}

.advice-list {
    margin: 20px 0;
}

.advice-list p {
    font-size: 13px;
    color: #eee;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.advice-list p i {
    color: var(--primary);
}

.about-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.03);
    margin: 40px 0;
}

.prohibited-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.pro-item {
    color: #eee;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pro-item i {
    color: var(--primary);
}

.pro-note {
    font-size: 12px !important;
    color: #444 !important;
    margin-top: 20px;
}

/* Sidebar App Promo */
.v9-app-promo-card {
    background: linear-gradient(135deg, #1c1d24 0%, #111217 100%);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.02);
}

.v9-app-promo-card .app-logo {
    width: 60px;
    margin-bottom: 15px;
}

.v9-text {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.btn-open-app {
    width: 100%;
    background: #f1403c;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.btn-open-app:hover {
    filter: brightness(1.1);
}