@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Inter:wght@400;600;700;800;900&display=swap");
:root {
    --sidebar-width: 260px;
    --glass-bg: rgba(6, 6, 6, 0.85); 
    --glass-border: rgba(255, 255, 255, 0.04); 
    --accent-color: #4FACE0; /* Kembali ke warna Biru Change Password */
    --hover-bg: rgba(79, 172, 224, 0.1);
    --text-primary: #ffffff;
    --text-muted: #aaaaaa;
    --neon-blue: #4FACE0; 
    --neon-green: #ffffff;
    --neon-purple: #ffffff;
    --cyber-bg: #0a0c10;
}

/* --- Layout Base --- */
body {
    background: radial-gradient(circle at top right, #1a1a1a, #000000) fixed;
    background-size: cover;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding-top: 100px; /* Jarak yang pas antara navbar dan konten */
}

/* --- Top Navbar (Glassmorphism) --- */
.navbar-default {
    background: rgba(10, 10, 10, 0.75) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border) !important;
    min-height: 45px;
    border: none;
}

.navbar-default .nav > li > a {
    color: var(--text-muted) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px; /* Diperkecil agar muat hingga 14 kategori */
    padding: 12px 7px !important; /* Mengurangi jarak atas-bawah dan antar menu */
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.navbar-default .nav > li > a i {
    font-size: 14px; /* Ikon lebih proporsional */
    color: var(--accent-color);
}

.navbar-default .nav > li > a:hover, 
.navbar-default .nav > li.active > a,
.navbar-default .nav .open > a {
    color: var(--text-primary) !important;
    background: var(--hover-bg) !important;
}

.navbar-default .dropdown-menu {
    background: rgba(20, 20, 20, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.navbar-modern .dropdown-menu > li > a {
    color: var(--text-muted) !important;
    padding: 10px 20px;
}

.navbar-modern .dropdown-menu > li > a:hover {
    background: var(--hover-bg) !important;
    color: #fff !important;
}

/* --- Dropdown Animation --- */
.navbar-default .dropdown-menu {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.navbar-default .dropdown.open .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* --- Wallet Pill in Navbar --- */
.nav-wallet-pill {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--glass-border);
    padding: 3px 10px; /* Spacing wallet pill lebih ramping */
    border-radius: 20px;
    margin-top: 10px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    transition: all 0.3s;
}

.nav-wallet-pill:hover { background: var(--hover-bg); border-color: var(--accent-color); }
.nav-wallet-pill small { font-size: 8px; color: var(--text-muted); margin-bottom: 2px; }
.nav-wallet-pill span { font-size: 11px; color: var(--accent-color); font-weight: 800; }

/* --- Content Wrapper --- */
.content-wrapper {
    padding: 30px;
    min-height: 100vh;
}

/* --- Glassmorphism Cards/Panels --- */
/* Memastikan seluruh panel di semua file PHP mengikuti gaya dashboard */
.panel, .well, .admin-box, .dark-tab-content, .modal-content {
    background: linear-gradient(145deg, rgba(12, 12, 12, 0.9), rgba(4, 4, 4, 0.95)) !important;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border) !important;
    border-radius: 4px !important;
    /* Menghilangkan clip-path pada panel standar agar tidak memotong form di halaman lain */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6) !important;
    margin-bottom: 25px;
    color: var(--text-primary) !important;
    position: relative;
}

/* Overlay halus untuk kesan industrial/tech */
.panel::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 15px 15px; opacity: 0.2; pointer-events: none; z-index: 1;
}

/* Menyamakan gaya Header Panel di seluruh PHP */
.panel-heading {
    background: linear-gradient(90deg, rgba(79, 172, 224, 0.1), transparent) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--accent-color) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
}

/* [HAPUS] Efek Scanline Overlay yang menurun ke bawah */
.panel::before {
    display: none !important;
}

.panel-classic { /* Ini adalah panel utama untuk dashboard */
    background: rgba(4, 4, 4, 0.85);
    border: 1px solid var(--glass-border);
    border-left: 2px solid var(--accent-color);
    border-radius: 0;
    margin-bottom: 25px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.7);
    overflow: hidden;
}

.panel-header {
    padding: 18px 25px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent);
    display: flex; justify-content: space-between; align-items: center; color: #fff;
    border-radius: 0;
}
.panel-header h4 { margin: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: #fff; display: flex; align-items: center; gap: 10px; }

/* --- NEON TERMINAL ANIMATION --- */
@keyframes terminalNeon {
    0%, 100% { text-shadow: 0 0 4px rgba(79, 172, 224, 0.6), 0 0 8px rgba(79, 172, 224, 0.4); opacity: 0.8; }
    50% { text-shadow: 0 0 12px rgba(79, 172, 224, 0.9), 0 0 20px rgba(79, 172, 224, 0.6), 0 0 2px #fff; opacity: 1; }
    55% { opacity: 0.9; } /* Subtle monitor flicker */
    56% { opacity: 1; }
}

.terminal-neon-text {
    animation: terminalNeon 3s infinite ease-in-out;
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- CYBER TERMINAL HUD FRAME (NON-BOX SHAPE) --- */
.cyber-terminal-frame {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border) !important;
    border-radius: 10px 120px 10px 120px !important; /* Bentuk melengkung futuristik diagonal */
    border-left: 5px solid var(--accent-color) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,1), inset 0 0 50px rgba(79, 172, 224, 0.05) !important;
    overflow: hidden;
}

/* --- BANK STYLE DASHBOARD UPDATED --- */
.bank-dashboard-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding-bottom: 50px;
}

/* Top Banner: Username & Unified Wallets */
.bank-master-header {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.95) 0%, rgba(2, 2, 2, 1) 100%);
    backdrop-filter: blur(40px);
    border: 1px solid var(--glass-border);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 45px;
    margin-bottom: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,1);
    animation: masterHeaderGlow 4s infinite alternate ease-in-out;
}

/* Profil Layout: Left (User) & Right (Season Pass) */
.bank-profile-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    margin-bottom: 35px; 
}

.bank-user-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.bank-username { font-size: 46px; font-weight: 950; color: #fff; margin: 0; letter-spacing: -2px; line-height: 1; }

/* Premium Color Logic */
.bank-username.is-premium {
    color: var(--accent-color) !important;
    text-shadow: 0 0 20px rgba(79, 172, 224, 0.4);
    background: linear-gradient(to bottom, #fff, var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bank-prem-countdown { 
    font-size: 11px; color: var(--accent-color); font-weight: 800; 
    text-transform: uppercase; letter-spacing: 3px; margin-top: 5px;
}

/* --- Tabel Global agar Seragam di Halaman Scan, Register, dll --- */
.table {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.table > thead > tr > th {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 2px solid var(--accent-color) !important;
    color: var(--accent-color) !important;
    font-size: 11px;
    text-transform: uppercase;
}

.table > tbody > tr > td {
    border-top: 1px solid var(--glass-border) !important;
    background: transparent !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Unified Assets Grid */
.bank-assets-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 15px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.05);
    width: 100%;
    position: relative; /* Dasar untuk partikel */
}

.bank-asset-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 15px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 2px;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    cursor: default;
}

.bank-asset-item:hover {
    background: rgba(79, 172, 224, 0.04);
    border-color: rgba(79, 172, 224, 0.4);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(17, 17, 17, 0.8), 0 0 15px rgba(79, 172, 224, 0.1);
}

/* Special Orange Glow for Referral Item */
.bank-asset-item.referral-item:hover {
    background: rgba(243, 156, 18, 0.08) !important;
    border-color: rgba(243, 156, 18, 0.6) !important;
    box-shadow: 0 10px 20px rgba(17, 17, 17, 0.8), 0 0 20px rgba(243, 156, 18, 0.3) !important;
}

/* --- GLOSSY GLASS STATUS BAR --- */
.status-bar-glossy {
    background: rgba(79, 172, 224, 0.1) !important;
    border: 1px solid rgba(79, 172, 224, 0.3) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 0 10px rgba(79, 172, 224, 0.1);
    position: relative;
    overflow: hidden;
}

/* --- ASSET LIGHT PARTICLES --- */
.asset-light-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}

.light-particle {
    position: absolute;
    background: radial-gradient(circle, var(--accent-color) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    filter: blur(2px);
    animation: floatAssetLight 8s infinite ease-in-out;
}

@keyframes floatAssetLight {
    0%, 100% { transform: translate(0, 0); opacity: 0; }
    50% { transform: translate(20px, -20px); opacity: 0.2; }
}


.status-bar-glossy::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), transparent);
    z-index: 3;
}

/* Referral Icon Animation */
.referral-item:hover i.fa-sack-dollar {
    transform: rotate(20deg) scale(1.3) !important;
}

/* Sequential Glow Animation for Icons */
@keyframes assetIconGlow {
    0%, 100% { filter: drop-shadow(0 0 2px transparent); transform: scale(1); opacity: 0.6; }
    50% { filter: drop-shadow(0 0 10px var(--accent-color)); transform: scale(1.2); opacity: 1; }
}

.bank-asset-item i {
    font-size: 18px; color: var(--accent-color); margin-bottom: 10px;
    animation: assetIconGlow 4s infinite ease-in-out;
}
.bank-asset-item:nth-child(1) i { animation-delay: 0s; }
.bank-asset-item:nth-child(2) i { animation-delay: 0.6s; }
.bank-asset-item:nth-child(3) i { animation-delay: 1.2s; }
.bank-asset-item:nth-child(4) i { animation-delay: 1.8s; }
.bank-asset-item:nth-child(5) i { animation-delay: 2.4s; }
.bank-asset-item:nth-child(6) i { animation-delay: 3s; }
.bank-asset-item:nth-child(7) i { animation-delay: 3.6s; }

/* Asset Sparkline Visualizer */
.asset-sparkline {
    width: 100%;
    height: 15px;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
    opacity: 0.4;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(79, 172, 224, 0.1) 50%, 
        transparent 100%);
}

.asset-sparkline::after {
    content: "";
    position: absolute;
    top: 50%; left: 0; width: 100%; height: 1px;
    background: var(--accent-color);
    box-shadow: 0 0 8px var(--accent-color);
    animation: sparklinePulse 3s infinite ease-in-out;
}

@keyframes sparklinePulse {
    0%, 100% { transform: translateY(0) scaleX(0.8); opacity: 0.3; }
    50% { transform: translateY(-5px) scaleX(1); opacity: 1; }
}

/* Sticky Sidebar Logic */
.internal-side {
    position: sticky;
    top: 85px;
    height: fit-content;
    overflow: hidden; /* Mengunci partikel di dalam sidebar */
}

/* --- TECH DUST PARTICLES --- */
.tech-dust-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
}

.particle {
    position: absolute;
    background: var(--accent-color);
    border-radius: 50%;
    opacity: 0;
    filter: blur(1px);
    animation: floatDust 15s infinite linear;
}

@keyframes floatDust {
    0% { transform: translateY(100%) translateX(0); opacity: 0; }
    25% { opacity: 0.3; }
    75% { opacity: 0.3; }
    100% { transform: translateY(-100px) translateX(20px); opacity: 0; }
}

/* --- LOGIN ACTIVITY CHART STYLES --- */
.login-activity-container {
    margin-top: 30px;
    padding: 20px 15px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.login-activity-title {
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    margin-bottom: 15px;
    display: block;
}

.login-history-bars {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 50px;
    gap: 4px;
}

.bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative; /* Dasar untuk tooltip */
}

/* TOOLTIP LOGIC */
.bar-item::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    background: rgba(0, 0, 0, 0.9);
    color: var(--accent-color);
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 800;
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10;
}

.bar-item:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px);
}

.bar-fill {
    width: 100%;
    background: rgba(79, 172, 224, 0.15);
    border-radius: 2px;
    min-height: 2px;
    transition: all 0.4s ease;
}

.bar-item:hover .bar-fill {
    background: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-color);
    transform: scaleX(1.1);
}

.bar-day {
    font-size: 8px;
    color: #444;
    font-family: monospace;
}

.bank-asset-label { font-size: 10px; color: #777; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 5px; font-weight: 700; }
.bank-asset-value { font-size: 18px; font-weight: 800; color: #fff; font-family: monospace; }

/* Layout Grid: Account (Left) | News (Right) */
.bank-content-grid {
    display: grid;
    grid-template-columns: 1fr; /* Diubah menjadi satu kolom utuh */
    gap: 30px;
}

.bank-side-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
}

.bank-side-card .panel-header { background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.05); }

/* Profile Info List inside Bank Side Card */
.bank-info-list { list-style: none; padding: 15px; margin: 0; }
.bank-info-list li { 
    display: flex; 
    justify-content: space-between; 
    padding: 12px 0; 
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent) 1;
}
.bank-info-list li:last-child { border-bottom: none; }
.bank-info-label { color: #666; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.bank-info-value { color: #eee; font-size: 12px; font-weight: 700; }

/* Update Season Pass Card for Header Placement */
.sp-neon-card-header {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 400px;
    margin-bottom: 10px;
}

/* Progress Bar Streaming Effect */
.sp-stream-container {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.05); 
    height: 4px; 
    border-radius: 2px;
}

.sp-progress-fill-stream {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.sp-progress-fill-stream::after {
    content: "";
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: spStreaming 2s infinite linear;
}

@keyframes spStreaming {
    0% { left: -100%; }
    100% { left: 100%; }
}

@media (max-width: 992px) {
    .bank-content-grid { grid-template-columns: 1fr; }
    .bank-master-header { padding: 25px; }
}

/* Fix for standard panels to align with bank style */
.panel-classic { border-radius: 12px; background: rgba(15,15,15,0.4); border: 1px solid var(--glass-border); }

.panel-body { padding: 20px; }

/* --- HERO WELCOME SECTION --- */
.hero-welcome {
    background: #000;
    border: 1px solid var(--neon-blue);
    padding: 40px;
    border-radius: 0;
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.hero-text h2 { margin: 0; font-size: 32px; font-weight: 900; color: #fff; text-shadow: 0 0 10px var(--neon-blue); letter-spacing: -1px; }
.hero-text p { color: var(--neon-blue); margin-top: 5px; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; opacity: 0.8; }

/* --- STAT CARDS --- */
.stat-card {
    background: rgba(0, 0, 0, 0.6);
    padding: 25px 20px;
    border: 1px solid rgba(0, 243, 255, 0.2);
    border-radius: 0;
    border-right: 3px solid var(--neon-blue);
    margin-bottom: 20px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}
.stat-card:hover {
    border-color: var(--neon-blue);
    background: rgba(0, 243, 255, 0.05);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
}
.stat-content h3 { margin: 0; font-size: 24px; font-weight: 900; color: #fff; font-family: monospace; }
.stat-content small { color: var(--neon-blue); text-transform: uppercase; font-size: 9px; letter-spacing: 2px; font-weight: 700; display: block; margin-bottom: 5px; }
.stat-icon {
    font-size: 24px; color: rgba(255, 255, 255, 0.2); transition: all 0.3s ease;
}
.stat-card:hover .stat-icon { color: var(--neon-blue); filter: drop-shadow(0 0 5px var(--neon-blue)); }

/* --- PROFILE LIST --- */
.profile-list { list-style: none; padding: 0; margin: 0; }
.profile-list li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #222; align-items: center; }
.profile-list li:last-child { border-bottom: none; }
.profile-list .label-text { color: #888; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.profile-list .label-text i { color: #555; width: 15px; text-align: center; }
.profile-list .value-text { color: #fff; font-weight: 600; text-align: right; font-size: 13px; }

/* --- STATUS BADGES --- */
.status-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.status-online { background: rgba(39, 174, 96, 0.2); color: #2ecc71; border: 1px solid #27ae60; box-shadow: 0 0 8px rgba(46, 204, 113, 0.2); }
.status-offline { background: rgba(100, 100, 100, 0.2); color: #999; border: 1px solid #555; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; }
.status-online .status-dot { background-color: #2ecc71; box-shadow: 0 0 5px #2ecc71; }
.status-offline .status-dot { background-color: #777; }

/* --- PREMIUM BADGE --- */
.status-premium-active { background: rgba(243, 156, 18, 0.15); color: #f39c12; border: 1px solid #f39c12; box-shadow: 0 0 5px rgba(243, 156, 18, 0.2); font-size: 11px; white-space: nowrap; }
.status-premium-expired { background: rgba(100, 100, 100, 0.15); color: #888; border: 1px solid #444; font-size: 11px; }

/* --- WALLET SUBGRID --- */
.wallet-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #444; }
.wallet-mini-item { background: #222; padding: 15px 10px; border-radius: 4px; text-align: center; border: 1px solid #333; transition: border-color 0.2s; }
.wallet-mini-item:hover { border-color: var(--accent-color); }
.wallet-mini-val { display: block; font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 4px; }
.wallet-mini-lbl { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }

/* --- NEWS SECTION --- */
.news-accordion { margin-top: 15px; }
.news-item { background: #1a1a1a; margin-bottom: 8px; border: 1px solid #333; border-radius: 0; overflow: hidden; transition: all 0.2s; }
.news-item.active { border-left: 3px solid var(--accent-color); background: #222; }
.news-header { padding: 12px 20px; cursor: pointer; display: flex; align-items: center; gap: 15px; }
.news-badge { font-weight: 700; font-size: 9px; padding: 3px 8px; border-radius: 2px; color: #000; min-width: 60px; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; }
.news-title-text { flex-grow: 1; color: #ddd; font-size: 13px; font-weight: 500; }
.news-content-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: #121212; }
.news-item.active .news-content-wrapper { max-height: 50000px; }
.news-body img { max-width: 100%; height: auto; }
.news-body table { max-width: 100%; }
.news-accordion {
    /* ... existing styles ... */
    animation: fadeIn 0.5s ease-out; /* Tambahkan ini untuk transisi halus */
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.news-body { padding: 25px; color: #ccc; font-size: 13px; line-height: 1.6; border-top: 1px solid #222; }
.news-filter-tabs { margin-bottom: 20px; border-bottom: 1px solid #333; display: flex; gap: 20px; }
.news-filter-tabs a { padding: 10px 0; color: #666; text-decoration: none; font-size: 12px; font-weight: 600; text-transform: uppercase; border-bottom: 2px solid transparent; transition: all 0.3s; }
.news-filter-tabs a:hover { color: #fff; }
.news-filter-tabs a.active { color: var(--accent-color); border-bottom: 2px solid var(--accent-color); }

/* --- RF UI (Season Pass) --- */
.sp-neon-card {
    background: #111;
    border: 1px solid #333;
    border-left: 4px solid var(--accent-color); /* Akan di-override oleh JS */
    padding: 15px 20px;
    margin-bottom: 25px;
    position: relative;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-radius: 12px;
}
.sp-neon-left { display: flex; align-items: center; gap: 15px; min-width: 140px; }
.sp-neon-icon {
    font-size: 20px; color: #111; background: var(--accent-color); /* Akan di-override oleh JS */
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 4px; box-shadow: 0 0 10px rgba(79, 172, 224, 0.4); /* Akan di-override oleh JS */
}
.sp-neon-title { font-size: 13px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; }
.sp-neon-title span { display: block; font-size: 10px; color: var(--accent-color); /* Akan di-override oleh JS */ font-weight: 600; }
.sp-neon-center { flex-grow: 1; }
.sp-neon-bar-bg {
    background: #222; height: 6px; width: 100%; position: relative;
    clip-path: polygon(0 0, 100% 0, 98% 100%, 0% 100%);
}
.sp-neon-bar-fill {
    background: var(--accent-color); /* Akan di-override oleh JS */ height: 100%; width: 0%; /* Akan di-override oleh JS */
    box-shadow: 0 0 8px rgba(79, 172, 224, 0.4); /* Akan di-override oleh JS */ transition: width 0.5s;
}
.sp-neon-info {
    display: flex; justify-content: space-between; font-size: 9px; 
    color: #666; margin-top: 4px; font-family: monospace; text-transform: uppercase;
}
.sp-neon-right .sp-neon-btn {
    border: 1px solid #444; color: #888; background: transparent;
    padding: 6px 12px; font-size: 10px; text-transform: uppercase;
    text-decoration: none; font-weight: 700; transition: 0.3s;
    display: flex; align-items: center; gap: 5px;
}
.sp-neon-right .sp-neon-btn:hover {
    border-color: var(--accent-color); /* Akan di-override oleh JS */ color: var(--accent-color); /* Akan di-override oleh JS */
}

.panel-heading {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    border-radius: 20px 20px 0 0 !important;
}

/* --- Modern Tables --- */
.table {
    background: transparent !important;
    border-radius: 8px;
    overflow: hidden;
}

.table thead th {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 2px solid var(--glass-border) !important;
    color: var(--accent-color) !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}

/* --- Animations --- */
@keyframes dashboardFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-dashboard {
    animation: dashboardFadeIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* --- Icon Glow Effect --- */
.stat-card:hover .stat-icon {
    box-shadow: 0 0 20px var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.1);
    transition: all 0.3s ease;
}

.rainbow {
    -webkit-animation: rainbow 1s infinite;
    -ms-animation: rainbow 1s infinite;
    animation: rainbow 1s infinite
}

.rainbow2 {
    -webkit-animation: rainbow 2s infinite;
    -ms-animation: rainbow 2s infinite;
    animation: rainbow 2s infinite
}

@-webkit-keyframes rainbow {
    0% {
        color: orange
    }

    10% {
        color: purple
    }

    20% {
        color: red
    }

    40% {
        color: #ff0
    }

    60% {
        color: green
    }

    100% {
        color: blue
    }
}

@-ms-keyframes rainbow {
    0% {
        color: orange
    }

    10% {
        color: purple
    }

    20% {
        color: red
    }

    40% {
        color: #ff0
    }

    60% {
        color: green
    }

    100% {
        color: blue
    }
}

@keyframes rainbow {
    0% {
        color: orange
    }

    10% {
        color: purple
    }

    20% {
        color: red
    }

    40% {
        color: #ff0
    }

    60% {
        color: green
    }

    100% {
        color: blue
    }
}

@-webkit-keyframes rainbow2 {
    0% {
        color: red
    }

    10% {
        color: #fff
    }

    20% {
        color: red
    }

    40% {
        color: #fff
    }

    60% {
        color: red
    }

    100% {
        color: #fff
    }
}

@-ms-keyframes rainbow2 {
    0% {
        color: red
    }

    10% {
        color: #fff
    }

    20% {
        color: red
    }

    40% {
        color: #fff
    }

    60% {
        color: red
    }

    100% {
        color: #fff
    }
}

@keyframes rainbow2 {
    0% {
        color: red
    }

    10% {
        color: #fff
    }

    20% {
        color: red
    }

    40% {
        color: #fff
    }

    60% {
        color: red
    }

    100% {
        color: #fff
    }
}

.level_0 {
    background: #f2f2f2;
    color: #000
}

.level_1 {
    color: #000;
    background-color: #dcdca5
}

.level_2 {
    color: #000;
    background-color: #c3c392
}

.level_3 {
    color: #000;
    background-color: #cc3
}

.level_4 {
    color: #fff;
    background-color: #c30
}

.level_5 {
    color: #fff;
    background-color: #c00
}

.table>tbody>tr>td.level_0 {
    background: #f2f2f2;
    color: #000;
    vertical-align: middle
}

.table>tbody>tr>td.level_1 {
    color: #000;
    background-color: #dcdca5;
    vertical-align: middle
}

.table>tbody>tr>td.level_2 {
    color: #000;
    background-color: #c3c392;
    vertical-align: middle
}

.table>tbody>tr>td.level_3 {
    color: #000;
    background-color: #cc3;
    vertical-align: middle
}

.table>tbody>tr>td.level_4 {
    color: #fff;
    background-color: #c30;
    vertical-align: middle
}

.table>tbody>tr>td.level_5 {
    color: #fff;
    background-color: #c00;
    vertical-align: middle
}

.table>thead>tr>th {
    vertical-align: middle
}

.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td {
    vertical-align: middle
}

.item_code_ajax {
    display: block;
    width: 100%
}

.upgrades_to_img img {
    width: 12px
}

.navbar-brand {
    /* Override existing text-transform */
    text-transform: none;
    /* Set dimensions for the logo */
    height: 45px; /* Disesuaikan dengan navbar yang lebih tipis */
    width: 75px; /* Disesuaikan secara proporsional */
    padding: 0; /* Hapus padding default Bootstrap agar logo bisa mengisi penuh tinggi */
    /* Display the logo image */
    background-image: url('../../../main/function/logo.png'); /* Perbaikan Path */
    background-size: auto 100%; /* Skala gambar agar mengisi 100% tinggi, lebar menyesuaikan */
    background-repeat: no-repeat;
    background-position: center; /* Posisikan logo di tengah horizontal */
    /* Hide the text content */
    text-indent: -9999px; /* Sembunyikan teks asli */
    transition: all 0.3s ease-in-out; /* Animasi halus untuk hover */
}

.navbar-brand:hover {
    transform: scale(1.05); /* Sedikit membesar */
    filter: brightness(1.2) drop-shadow(0 0 5px var(--accent-color)); /* Efek terang + glow neon, reduced shadow spread */
}

.navbar-brand:focus {
    outline: none; /* Menghilangkan outline saat diklik/fokus */
}

.rb-shop-price {
    margin-top: 4px;
    font-weight: 700
}

.page-header {
    font-size: 1.8em;
    margin-top: 0
}

.item_highlight {
    background-color: #c3c392;
    color: #fff
}

footer {
    text-align: center;
    margin-top: 100px;
    padding-bottom: 40px;
}

#BtnTop {
    display: none;
    position: fixed;
    bottom: 60px;
    right: 10px;
    z-index: 99;
    cursor: pointer
}

#BtnBot {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 10px;
    z-index: 99;
    cursor: pointer
}

a.show_icon {
    position: relative
}

a.show_icon img {
    position: absolute!important;
    left: -9999px;
    z-index: 9999;
    transition: opacity .5s,top .5s
}

a.show_icon:focus img {
    left: 0;
    top: 20px
}

a.show_icon:hover img {
    left: 0;
    top: 20px
}

.borderless td,.borderless th {
    border: none;
    border-top: 0
}

.datepicker {
    background-color: #fff;
    color: #333
}

.dataTables_wrapper .dataTables_filter {
    float: left
}

.dataTables_wrapper .dataTables_length {
    float: right
}

table.dataTable tbody tr {
    background-color: transparent
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    border: 1px solid #666
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff!important;
    border: 1px solid #fff;
    background-color: #000!important;
    background: 0 0
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #000!important;
    border: 1px solid #000;
    background-color: #fff!important
}

input[type=search] {
    color: #000;
    box-shadow: none;
    height: 45px;
    padding: 10px 15px;
    font-size: 15px;
    line-height: 1.42857143;
    background-color: #fff!important;
    background-image: none;
    border: 1px solid #f1f1f1;
    border-radius: 4px;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    margin: 0
}

table.dataTable td.dataTables_empty {
    text-align: center
}

font[color=pink],font[color="#FF99CC"],*[style="color: pink"],*[style="color:pink"],*[style="color: pink;"],*[style="color:pink;"] {
    color: #e06161!important
}

.select2-container {
    margin: 0;
    position: relative;
    display: inline-block;
    zoom:1;*display: inline;
    vertical-align: middle
}

.select2-container,.select2-drop,.select2-search,.select2-search input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.select2-container .select2-choice {
    display: block;
    height: 26px;
    padding: 0 0 0 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid #aaa;
    white-space: nowrap;
    line-height: 26px;
    color: #444;
    text-decoration: none;
    border-radius: 4px;
    background-clip: padding-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#eee),color-stop(0.5,#fff));
    background-image: -webkit-linear-gradient(center bottom,#eee 0%,#fff 50%);
    background-image: -moz-linear-gradient(center bottom,#eee 0%,#fff 50%);
    background-image: -o-linear-gradient(bottom,#eee 0%,#fff 50%);
    background-image: -ms-linear-gradient(top,#fff 0%,#eee 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#eeeeee',GradientType=0);
    background-image: linear-gradient(top,#fff 0%,#eee 50%)
}

.select2-container.select2-drop-above .select2-choice {
    border-bottom-color: #aaa;
    border-radius: 0 0 4px 4px;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#eee),color-stop(0.9,#fff));
    background-image: -webkit-linear-gradient(center bottom,#eee 0%,#fff 90%);
    background-image: -moz-linear-gradient(center bottom,#eee 0%,#fff 90%);
    background-image: -o-linear-gradient(bottom,#eee 0%,#fff 90%);
    background-image: -ms-linear-gradient(top,#eee 0%,#fff 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#eeeeee',GradientType=0);
    background-image: linear-gradient(top,#eee 0%,#fff 90%)
}

.select2-container.select2-allowclear .select2-choice .select2-chosen {
    margin-right: 42px
}

.select2-container .select2-choice>.select2-chosen {
    margin-right: 26px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.select2-container .select2-choice abbr {
    display: none;
    width: 12px;
    height: 12px;
    position: absolute;
    right: 24px;
    top: 8px;
    font-size: 1px;
    text-decoration: none;
    border: 0;
    background: url(https://cdn.sfazbs.xyz/images/select2.png) right top no-repeat;
    cursor: pointer;
    outline: 0
}

.select2-container.select2-allowclear .select2-choice abbr {
    display: inline-block
}

.select2-container .select2-choice abbr:hover {
    background-position: right -11px;
    cursor: pointer
}

.select2-drop-mask {
    border: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: 9998;
    background-color: #fff;
    opacity: 0;
    filter: alpha(opacity=0)
}

.select2-drop {
    width: 100%;
    margin-top: -1px;
    position: absolute;
    z-index: 9999;
    top: 100%;
    background: #fff;
    color: #000;
    border: 1px solid #aaa;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15);
    box-shadow: 0 4px 5px rgba(0,0,0,.15)
}

.select2-drop-auto-width {
    border-top: 1px solid #aaa;
    width: auto
}

.select2-drop-auto-width .select2-search {
    padding-top: 4px
}

.select2-drop.select2-drop-above {
    margin-top: 1px;
    border-top: 1px solid #aaa;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    -webkit-box-shadow: 0 -4px 5px rgba(0,0,0,.15);
    box-shadow: 0 -4px 5px rgba(0,0,0,.15)
}

.select2-drop-active {
    border: 1px solid #5897fb;
    border-top: none
}

.select2-drop.select2-drop-above.select2-drop-active {
    border-top: 1px solid #5897fb
}

.select2-container .select2-choice .select2-arrow {
    display: inline-block;
    width: 18px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border-left: 1px solid #aaa;
    border-radius: 0 4px 4px 0;
    background-clip: padding-box;
    background: #ccc;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#ccc),color-stop(0.6,#eee));
    background-image: -webkit-linear-gradient(center bottom,#ccc 0%,#eee 60%);
    background-image: -moz-linear-gradient(center bottom,#ccc 0%,#eee 60%);
    background-image: -o-linear-gradient(bottom,#ccc 0%,#eee 60%);
    background-image: -ms-linear-gradient(top,#ccc 0%,#eee 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#cccccc',GradientType=0);
    background-image: linear-gradient(top,#ccc 0%,#eee 60%)
}

.select2-container .select2-choice .select2-arrow b {
    display: block;
    width: 100%;
    height: 100%;
    background: url(https://cdn.sfazbs.xyz/images/select2.png) no-repeat 0 1px
}

.select2-search {
    display: inline-block;
    width: 100%;
    min-height: 26px;
    margin: 0;
    padding-left: 4px;
    padding-right: 4px;
    position: relative;
    z-index: 10000;
    white-space: nowrap
}

.select2-search input {
    width: 100%;
    height: auto!important;
    min-height: 26px;
    padding: 4px 20px 4px 5px;
    margin: 0;
    outline: 0;
    font-family: sans-serif;
    font-size: 1em;
    border: 1px solid #aaa;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #fff url(https://cdn.sfazbs.xyz/images/select2.png) no-repeat 100% -22px;
    background: url('https://cdn.sfazbs.xyz/images/select2.png') no-repeat 100% -22px,-webkit-gradient(linear,left bottom,left top,color-stop(0.85,#fff),color-stop(0.99,#eee));
    background: url(https://cdn.sfazbs.xyz/images/select2.png) no-repeat 100% -22px,-webkit-linear-gradient(center bottom,#fff 85%,#eee 99%);
    background: url(https://cdn.sfazbs.xyz/images/select2.png) no-repeat 100% -22px,-moz-linear-gradient(center bottom,#fff 85%,#eee 99%);
    background: url(https://cdn.sfazbs.xyz/images/select2.png) no-repeat 100% -22px,-o-linear-gradient(bottom,#fff 85%,#eee 99%);
    background: url(https://cdn.sfazbs.xyz/images/select2.png) no-repeat 100% -22px,-ms-linear-gradient(top,#fff 85%,#eee 99%);
    background: url(https://cdn.sfazbs.xyz/images/select2.png) no-repeat 100% -22px,linear-gradient(top,#fff 85%,#eee 99%)
}

.select2-drop.select2-drop-above .select2-search input {
    margin-top: 4px
}

.select2-search input.select2-active {
    background: #fff url(https://cdn.sfazbs.xyz/images/select2-spinner.gif) no-repeat 100%;
    background: url('https://cdn.sfazbs.xyz/images/select2-spinner.gif') no-repeat 100%,-webkit-gradient(linear,left bottom,left top,color-stop(0.85,#fff),color-stop(0.99,#eee));
    background: url(https://cdn.sfazbs.xyz/images/select2-spinner.gif) no-repeat 100%,-webkit-linear-gradient(center bottom,#fff 85%,#eee 99%);
    background: url(https://cdn.sfazbs.xyz/images/select2-spinner.gif) no-repeat 100%,-moz-linear-gradient(center bottom,#fff 85%,#eee 99%);
    background: url(https://cdn.sfazbs.xyz/images/select2-spinner.gif) no-repeat 100%,-o-linear-gradient(bottom,#fff 85%,#eee 99%);
    background: url(https://cdn.sfazbs.xyz/images/select2-spinner.gif) no-repeat 100%,-ms-linear-gradient(top,#fff 85%,#eee 99%);
    background: url(https://cdn.sfazbs.xyz/images/select2-spinner.gif) no-repeat 100%,linear-gradient(top,#fff 85%,#eee 99%)
}

.select2-container-active .select2-choice,.select2-container-active .select2-choices {
    border: 1px solid #5897fb;
    outline: none;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
    box-shadow: 0 0 5px rgba(0,0,0,.3)
}

.select2-dropdown-open .select2-choice {
    border-bottom-color: transparent;
    -webkit-box-shadow: 0 1px 0 #fff inset;
    box-shadow: 0 1px 0 #fff inset;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #eee;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#fff),color-stop(0.5,#eee));
    background-image: -webkit-linear-gradient(center bottom,#fff 0%,#eee 50%);
    background-image: -moz-linear-gradient(center bottom,#fff 0%,#eee 50%);
    background-image: -o-linear-gradient(bottom,#fff 0%,#eee 50%);
    background-image: -ms-linear-gradient(top,#fff 0%,#eee 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#ffffff',GradientType=0);
    background-image: linear-gradient(top,#fff 0%,#eee 50%)
}

.select2-dropdown-open.select2-drop-above .select2-choice,.select2-dropdown-open.select2-drop-above .select2-choices {
    border: 1px solid #5897fb;
    border-top-color: transparent;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(0.5,#eee));
    background-image: -webkit-linear-gradient(center top,#fff 0%,#eee 50%);
    background-image: -moz-linear-gradient(center top,#fff 0%,#eee 50%);
    background-image: -o-linear-gradient(top,#fff 0%,#eee 50%);
    background-image: -ms-linear-gradient(bottom,#fff 0%,#eee 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#ffffff',GradientType=0);
    background-image: linear-gradient(bottom,#fff 0%,#eee 50%)
}

.select2-dropdown-open .select2-choice .select2-arrow {
    background: 0 0;
    border-left: none;
    filter: none
}

.select2-dropdown-open .select2-choice .select2-arrow b {
    background-position: -18px 1px
}

.select2-results {
    max-height: 200px;
    padding: 0 0 0 4px;
    margin: 4px 4px 4px 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-tap-highlight-color: transparent
}

.select2-results ul.select2-result-sub {
    margin: 0;
    padding-left: 0
}

.select2-results ul.select2-result-sub>li .select2-result-label {
    padding-left: 20px
}

.select2-results ul.select2-result-sub ul.select2-result-sub>li .select2-result-label {
    padding-left: 40px
}

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub>li .select2-result-label {
    padding-left: 60px
}

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub>li .select2-result-label {
    padding-left: 80px
}

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub>li .select2-result-label {
    padding-left: 100px
}

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub>li .select2-result-label {
    padding-left: 110px
}

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub>li .select2-result-label {
    padding-left: 120px
}

.select2-results li {
    list-style: none;
    display: list-item;
    background-image: none
}

.select2-results li.select2-result-with-children>.select2-result-label {
    font-weight: 700
}

.select2-results .select2-result-label {
    padding: 3px 7px 4px;
    margin: 0;
    cursor: pointer;
    min-height: 1em;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.select2-results .select2-highlighted {
    background: #3875d7;
    color: #fff
}

.select2-results li em {
    background: #feffde;
    font-style: normal
}

.select2-results .select2-highlighted em {
    background: 0 0
}

.select2-results .select2-highlighted ul {
    background: #fff;
    color: #000
}

.select2-results .select2-no-results,.select2-results .select2-searching,.select2-results .select2-selection-limit {
    background: #f4f4f4;
    display: list-item
}

.select2-results .select2-disabled.select2-highlighted {
    color: #666;
    background: #f4f4f4;
    display: list-item;
    cursor: default
}

.select2-results .select2-disabled {
    background: #f4f4f4;
    display: list-item;
    cursor: default
}

.select2-results .select2-selected {
    display: none
}

.select2-more-results.select2-active {
    background: #f4f4f4 url(https://cdn.sfazbs.xyz/images/select2-spinner.gif) no-repeat 100%
}

.select2-more-results {
    background: #f4f4f4;
    display: list-item
}

.select2-container.select2-container-disabled .select2-choice {
    background-color: #f4f4f4;
    background-image: none;
    border: 1px solid #ddd;
    cursor: default
}

.select2-container.select2-container-disabled .select2-choice .select2-arrow {
    background-color: #f4f4f4;
    background-image: none;
    border-left: 0
}

.select2-container.select2-container-disabled .select2-choice abbr {
    display: none
}

.select2-container-multi .select2-choices {
    height: auto!important;
    height: 1%;
    margin: 0;
    padding: 0;
    position: relative;
    border: 1px solid #aaa;
    cursor: text;
    overflow: hidden;
    background-color: #fff;
    background-image: -webkit-gradient(linear,0% 0%,0% 100%,color-stop(1%,#eee),color-stop(15%,#fff));
    background-image: -webkit-linear-gradient(top,#eee 1%,#fff 15%);
    background-image: -moz-linear-gradient(top,#eee 1%,#fff 15%);
    background-image: -o-linear-gradient(top,#eee 1%,#fff 15%);
    background-image: -ms-linear-gradient(top,#eee 1%,#fff 15%);
    background-image: linear-gradient(top,#eee 1%,#fff 15%)
}

.select2-locked {
    padding: 3px 5px!important
}

.select2-container-multi .select2-choices {
    min-height: 26px
}

.select2-container-multi.select2-container-active .select2-choices {
    border: 1px solid #5897fb;
    outline: none;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
    box-shadow: 0 0 5px rgba(0,0,0,.3)
}

.select2-container-multi .select2-choices li {
    float: left;
    list-style: none
}

.select2-container-multi .select2-choices .select2-search-field {
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.select2-container-multi .select2-choices .select2-search-field input {
    padding: 5px;
    margin: 1px 0;
    font-family: sans-serif;
    font-size: 100%;
    color: #666;
    outline: 0;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: 0 0!important
}

.select2-container-multi .select2-choices .select2-search-field input.select2-active {
    background: #fff url(https://cdn.sfazbs.xyz/images/select2-spinner.gif) no-repeat 100%!important
}

.select2-default {
    color: #999!important
}

.select2-container-multi .select2-choices .select2-search-choice {
    padding: 3px 5px 3px 18px;
    margin: 3px 0 3px 5px;
    position: relative;
    line-height: 13px;
    color: #333;
    cursor: default;
    border: 1px solid #aaa;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);
    box-shadow: 0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);
    background-clip: padding-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #e4e4e4;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#f4f4f4',GradientType=0);
    background-image: -webkit-gradient(linear,0% 0%,0% 100%,color-stop(20%,#f4f4f4),color-stop(50%,#f0f0f0),color-stop(52%,#e8e8e8),color-stop(100%,#eee));
    background-image: -webkit-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);
    background-image: -moz-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);
    background-image: -o-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);
    background-image: -ms-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);
    background-image: linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%)
}

.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
    cursor: default
}

.select2-container-multi .select2-choices .select2-search-choice-focus {
    background: #d4d4d4
}

.select2-search-choice-close {
    display: block;
    width: 12px;
    height: 13px;
    position: absolute;
    right: 3px;
    top: 4px;
    font-size: 1px;
    outline: none;
    background: url(https://cdn.sfazbs.xyz/images/select2.png) right top no-repeat
}

.select2-container-multi .select2-search-choice-close {
    left: 3px
}

.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
    background-position: right -11px
}

.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
    background-position: right -11px
}

.select2-container-multi.select2-container-disabled .select2-choices {
    background-color: #f4f4f4;
    background-image: none;
    border: 1px solid #ddd;
    cursor: default
}

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
    padding: 3px 5px;
    border: 1px solid #ddd;
    background-image: none;
    background-color: #f4f4f4
}

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
    display: none;
    background: 0 0
}

.select2-result-selectable .select2-match,.select2-result-unselectable .select2-match {
    text-decoration: underline
}

.select2-offscreen,.select2-offscreen:focus {
    clip: rect(0 0 0 0)!important;
    width: 1px!important;
    height: 1px!important;
    border: 0!important;
    margin: 0!important;
    padding: 0!important;
    overflow: hidden!important;
    position: absolute!important;
    outline: 0!important;
    left: 0!important;
    top: 0!important
}

.select2-display-none {
    display: none
}

.select2-measure-scrollbar {
    position: absolute;
    top: -10000px;
    left: -10000px;
    width: 100px;
    height: 100px;
    overflow: scroll
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-resolution:144dpi) {
    .select2-search input,.select2-search-choice-close,.select2-container .select2-choice abbr,.select2-container .select2-choice .select2-arrow b {
        background-image:url(https://cdn.sfazbs.xyz/images/select2x2.png)!important;
        background-repeat: no-repeat!important;
        background-size: 60px 40px!important
    }

    .select2-search input {
        background-position: 100% -21px!important
    }
}
/*******************
 * Upgrade Tool
 *******************/
.upgrade-tool {
    padding: 6px 10px;
    width: 320px;

    color: #fff;
    background-color: #333;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.upgrade-tool .select-talic-type {
    display: table-cell;
    padding-right: 10px;
}

.upgrade-tool .talics {
    display: table-cell;
    white-space: nowrap;
    width: 100px;
    padding: 0 10px;
    background-color: #484848;
}

.upgrade-tool .buttons {
    display: table-cell;
    white-space: nowrap;
    padding-top: 6px;
    padding-left: 10px;
}

.small-upgrade img {
    height: 15px;
    position: relative;
    margin: 0;
    padding: 0
}

span[style="color: pink"],*[style="color:pink"],*[style="color: pink;"],*[style="color:pink;"] {
    color: #e06161!important
}
.form-control {
    background-color: #3a3a3a !important;  /* Warna latar gelap */
    color: #eeeeee !important;           /* Warna teks terang */
    border: 1px solid #555555 !important; /* Warna border gelap */
}

/* Saat input-nya di-klik (focus) */
.form-control:focus {
    background-color: #4a4a4a !important;
    color: #ffffff !important;
    border-color: #007bff !important; /* Bisa pakai warna biru primary Anda */
    box-shadow: none !important; /* Menghilangkan shadow biru default */
}

/* Untuk <select> dropdown */
select.form-control {
    background-color: #3a3a3a !important;
    color: #eeeeee !important;
}

/* Opsi di dalam dropdown */
select.form-control option {
    background-color: #3a3a3a; /* Tidak perlu !important di sini */
    color: #eeeeee;
}

/* Untuk input yang non-aktif */
.form-control:disabled,
.form-control[readonly] {
    background-color: #2a2a2a !important; /* Lebih gelap lagi */
    opacity: 0.7;
}
/*
==============================================
--- Fortuna Wheel Styles ---
==============================================
*/
/* Main Page Wrapper */
.fortuna-wheel-page {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #eee;
    position: relative;
}

/* Containers */
.fortuna-container, .fortuna-logs-container {
    background-color: #1f1f1f;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(17, 17, 17, 0.8);
}

/* Headers */
h2 { color: #4FACE0; border-bottom: 1px solid #333; padding-bottom: 10px; margin-top: 0; font-size: 1.6em; letter-spacing: 0.5px; }

/* --- [UPDATED] Info Box (Flexbox Layout) --- */
.info-box {
    background-color: #2a2a2a;
    border-left: 4px solid #4FACE0;
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 4px;
    display: flex; /* Menggunakan Flexbox */
    justify-content: space-between; /* Kiri dan Kanan terpisah jauh */
    align-items: center; /* Vertikal tengah */
    flex-wrap: wrap; /* Agar responsif di HP */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Bagian Kiri (Balance) */
.info-left {
    font-size: 1.1em;
}

/* Dashboard Styling */
.points-dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.balance-card {
    flex: 1;
    min-width: 140px;
    background: #2a2a2a;
    border: 1px solid #333;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    border-bottom: 3px solid #444;
    cursor: pointer;
}
.balance-card.active { border-color: #4FACE0; border-bottom-color: #4FACE0; background: #2a3a4a; }
.balance-label { font-size: 0.75em; text-transform: uppercase; color: #888; display: block; }
.balance-val { font-size: 1.1em; font-weight: bold; color: #fff; }

/* Currency Selector */
.currency-selector {
    background: #2a2a2a;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #333;
}
.currency-option {
    display: inline-flex;
    align-items: center;
    background: #1a1a1a;
    border: 1px solid #444;
    padding: 8px 15px;
    border-radius: 20px;
    margin: 5px;
    cursor: pointer;
    transition: 0.2s;
}
.currency-option:hover { border-color: #4FACE0; }
.currency-option.selected { background: #4FACE0; border-color: #4FACE0; color: #fff; }
.currency-option input { display: none; }
.currency-option .cost-tag { margin-left: 8px; font-weight: bold; color: #ffc107; }
.currency-option.selected .cost-tag { color: #fff; }

/* Bagian Kanan (Limit) */
.info-right { display: flex; align-items: center; gap: 20px; background: rgba(0,0,0,0.2); padding: 5px 15px; border-radius: 20px; border: 1px solid #333; }
.points-value { color: #28a745; font-weight: bold; font-size: 1.1em; }

.limit-info { color: #ffc107; font-weight: bold; font-size: 0.95em; display: flex; align-items: center; }
.limit-value { color: #fff; margin-left: 5px; }

/* Separator Garis | */
.info-separator {
    color: #555;
    font-size: 1.2em;
    margin: 0 2px;
}

/* Form Controls */
.form-control-dark {
    width: 100%; padding: 12px; background-color: #121212; border: 1px solid #444;
    color: #fff; border-radius: 4px; transition: border-color 0.2s; font-size: 1em;
}
.form-control-dark:focus { border-color: #4FACE0; outline: none; }

/* --- [BARU] Character Selection List (Pengganti Dropdown) --- */
.char-select-box {
    background: #121212;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 10px;
    max-height: 250px;
    overflow-y: auto;
}
.char-radio-item {
    display: flex;
    align-items: center;
    background-color: #2a2a2a;
    border: 1px solid #333;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.char-radio-item:hover {
    background-color: #333;
    border-color: #4FACE0;
}
.char-radio-item input[type="radio"] {
    margin-right: 15px;
    transform: scale(1.3);
    cursor: pointer;
}
.char-radio-item img {
    margin-right: 10px;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
.char-radio-item span {
    font-size: 1.05em;
    color: #eee;
    font-weight: 500;
}

/* Layout: Wheel & List */
.fortuna-main-content {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
    gap: 40px; margin-bottom: 20px; padding-top: 10px;
}

/* Wheel Section */
.wheel-wrapper {
    position: relative; width: 340px; height: 340px; flex-shrink: 0;
    border-radius: 50%;
    box-shadow: 0 0 25px rgba(79, 172, 224, 0.2); /* Glow biru halus */
    background: #181818;
    border: 8px solid #2a2a2a; /* Border luar roda */
    transition: transform 6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wheel-wrapper canvas { width: 100%; height: 100%; }

.reward-discount { position: absolute; top: 0; left: 0; background: #dc3545; color: #fff; font-size: 10px; padding: 2px 5px; border-radius: 3px 0 3px 0; font-weight: bold; z-index: 5; }
.list-discount { background: #dc3545; color: #fff; font-size: 10px; padding: 1px 4px; border-radius: 3px; margin-left: 5px; }

/* [UPDATED] Pointer yang lebih bagus */
.pointer {
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; z-index: 10;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 35px solid #ffc107;
    filter: drop-shadow(0 4px 2px rgba(0,0,0,0.6));
}
/* Titik tengah pointer */
.pointer::after {
    content: ""; position: absolute; top: -38px; left: -6px;
    width: 12px; height: 12px; background: #333; border-radius: 50%;
}

/* Reward List Section */
.fortuna-rewards-list {
    flex-grow: 1; min-width: 300px; max-width: 450px;
    background-color: #1a1a1a; border: 1px solid #333; border-radius: 6px;
    overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.fortuna-rewards-list h4 {
    background: linear-gradient(135deg, #4FACE0, #2980b9);
    color: white; margin: 0; padding: 12px; text-align: center;
    border-bottom: 1px solid #222; font-size: 1.1em; letter-spacing: 1px;
}

/* Reward Table */
.fortuna-rewards-table { width: 100%; border-collapse: collapse; }
.fortuna-rewards-table td { padding: 10px 15px; border-bottom: 1px solid #2a2a2a; vertical-align: middle; }
.fortuna-rewards-table tr:hover { background-color: transparent; }

.reward-color-swatch { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,0.8); }
.reward-name { font-weight: 600; color: #eee; font-size: 0.95em; }
.reward-amount { color: #4FACE0; font-size: 0.85em; margin-left: 5px; background: #222; padding: 1px 4px; border-radius: 3px; border: 1px solid #333; }
.reward-upgrade { font-size: 0.85em; margin-top: 4px; }

/* Buttons & Alerts */
.btn-spin {
    width: 100%; padding: 16px; font-weight: 700; text-transform: uppercase; font-size: 1.1em;
    border-radius: 6px; border: none; transition: all 0.2s;
    background: linear-gradient(to bottom, #28a745, #218838); color: white;
    cursor: pointer; box-shadow: 0 4px 0 #1e7e34; text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.btn-spin:hover { transform: translateY(2px); box-shadow: 0 2px 0 #1e7e34; filter: brightness(1.1); }
.btn-spin:active { transform: translateY(4px); box-shadow: none; }
.btn-spin:disabled { background: #444; color: #888; box-shadow: none; cursor: not-allowed; transform: none; }

.cooldown-display {
    text-align: center; background-color: #3e1216; color: #ff8b94;
    border: 1px solid #5c181e; padding: 12px; margin-top: 20px;
    border-radius: 4px; font-weight: bold; display: none;
}

/* Logs Table (Dark Custom) */
.table-dark-custom { width: 100%; background-color: #222; border: 1px solid #444; color: #ccc; border-collapse: collapse; }
.table-dark-custom th { background: #1a1a1a; color: white; padding: 12px; border: 1px solid #444; text-transform: uppercase; font-size: 12px; text-align: center; }
.table-dark-custom td { padding: 10px; border: 1px solid #444; background-color: #2a2a2a; vertical-align: middle; text-align: center; }
.table-dark-custom tr:nth-child(even) td { background-color: #333; }
.table-dark-custom tr:hover td { background-color: #444; }

/* Pagination */
.fortuna-pagination { margin-top: 15px; text-align: center; }
.fortuna-pagination a {
    color: #4FACE0; margin: 0 3px; text-decoration: none; padding: 6px 12px;
    border: 1px solid #4FACE0; border-radius: 4px; display: inline-block; background-color: #222;
}
.fortuna-pagination a.active, .fortuna-pagination a:hover { background-color: #4FACE0; color: #fff; }

/* Modal Styling - FIXED CENTER */
.fortuna-modal-overlay {
    position: fixed !important; /* Paksa posisi fixed */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important; /* Lebar selebar layar monitor */
    height: 100vh !important; /* Tinggi setinggi layar monitor */
    background: rgba(0, 0, 0, 0.85); /* Background gelap transparan */
    display: none;
    justify-content: center !important; /* Tengahkan Horizontal */
    align-items: center !important; /* Tengahkan Vertikal */
    z-index: 2147483647 !important; /* Z-Index Tertinggi yang mungkin */
    backdrop-filter: blur(5px);
}

.fortuna-modal-overlay.show {
    display: flex !important; /* Pastikan menggunakan Flexbox saat muncul */
}

.fortuna-modal-content {
    background: #1f1f1f; /* Warna background kotak */
    border: 2px solid #4FACE0;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    max-width: 450px;
    width: 90%;
    color: #eee;
    box-shadow: 0 0 50px rgba(79, 172, 224, 0.4);
    position: relative;
    /* Reset margin agar center dari flexbox bekerja sempurna */
    margin: 0 !important; 
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

.fortuna-modal-content h3 { color: #28a745; margin-top: 0; border-bottom: 1px solid #444; padding-bottom: 15px; font-size: 1.5em; }
.winning-item { font-size: 1.3em; font-weight: bold; color: #fff; display: block; margin: 20px 0; }
.character-name { color: #4FACE0; font-weight: bold; }
.modal-close-button {
    background-color: #4FACE0; color: white; border: none; padding: 12px 25px;
    border-radius: 6px; cursor: pointer; margin-top: 25px; font-weight: bold; font-size: 1em;
}
.modal-close-button:hover { background-color: #3a9cbd; }

/* Notifications */
.fortuna-message-box {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: transparent; color: #fff; padding: 20px 30px;
    border: 1px solid #dc3545; border-radius: 8px; z-index: 99999;
    display: none; box-shadow: 0 0 20px rgba(0,0,0,0.8);
    text-align: center; font-weight: bold;
}
.fortuna-message-box.show { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* Helpers */
.item-name-cell { display: flex; align-items: center; justify-content: center; }
.item-icon-small { margin-right: 8px; }
.popover { z-index: 2050 !important; color: #333; border: none; }

/* Requirement Box */
.req-box { background-color: rgba(79, 172, 224, 0.1); border: 1px solid #4FACE0; border-radius: 4px; padding: 15px; margin-bottom: 20px; color: #eee; }
.req-box h4 { margin: 0 0 10px 0; color: #4FACE0; font-size: 1.1em; border-bottom: 1px solid rgba(79, 172, 224, 0.3); padding-bottom: 5px; text-transform: uppercase; font-weight: bold; }
.req-box ul { margin: 0; padding-left: 20px; list-style-type: square; }
.req-box li { margin-bottom: 3px; color: #ccc; }
.req-box li b { color: #fff; }

/* [MODIFIKASI] Loading Animation */
.btn-loading {
    position: relative; cursor: wait !important; pointer-events: none; opacity: 0.9;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
    background-size: 40px 40px !important;
    animation: btn-progress-stripes 1s linear infinite !important;
}
@keyframes btn-progress-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } }

/* [MODIFIKASI] Auto Spin Checkbox */
.auto-spin-wrapper { text-align: center; margin-bottom: 15px; }
.auto-spin-label { cursor: pointer; font-size: 1.1em; color: #4FACE0; font-weight: bold; display: inline-flex; align-items: center; user-select: none; }
.auto-spin-label input { width: 18px; height: 18px; margin-right: 8px; cursor: pointer; accent-color: #4FACE0; }
.auto-spin-label:hover { color: #fff; }
/*
==============================================
--- Gacha Box Styles ---
==============================================
*/
.gacha-box-page { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color: #eee; position: relative; width: 100%; }
.gacha-container, .gacha-logs-container { background-color: #1f1f1f; border: 1px solid #333; border-radius: 6px; padding: 25px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(17, 17, 17, 0.8); }
h2 { color: #4FACE0; border-bottom: 1px solid #333; padding-bottom: 10px; margin-top: 0; font-size: 1.6em; letter-spacing: 0.5px; }
.info-box { background-color: #2a2a2a; border-left: 4px solid #4FACE0; padding: 15px 20px; margin-bottom: 25px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.info-left { font-size: 1.1em; }
.info-right { display: flex; align-items: center; gap: 20px; background: rgba(0,0,0,0.2); padding: 5px 15px; border-radius: 20px; border: 1px solid #333; }
.points-value, .cost-value { color: #28a745; font-weight: bold; font-size: 1.1em; } 
.currency-name { color: #ccc; font-weight: bold; font-size: 0.9em; }
.limit-info { color: #ffc107; font-weight: bold; font-size: 0.95em; display: flex; align-items: center; }
.limit-value { color: #fff; margin-left: 5px; }
.info-separator { color: #555; font-size: 1.2em; margin: 0 2px; }
.form-control-dark { width: 100%; padding: 12px; background-color: #121212; border: 1px solid #444; color: #fff; border-radius: 4px; transition: border-color 0.2s; font-size: 1em; }
.form-control-dark:focus { border-color: #4FACE0; outline: none; }

/* Dashboard Styling */
.points-dashboard { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.balance-card { flex: 1; min-width: 140px; background: #2a2a2a; border: 1px solid #333; padding: 10px; border-radius: 8px; text-align: center; border-bottom: 3px solid #444; cursor: pointer; }
.balance-card.active { border-color: #4FACE0; border-bottom-color: #4FACE0; background: #2a3a4a; }
.balance-label { font-size: 0.75em; text-transform: uppercase; color: #888; display: block; }
.balance-val { font-size: 1.1em; font-weight: bold; color: #fff; }

/* Currency Selector */
.currency-selector { background: #2a2a2a; padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #333; }
.currency-option { display: inline-flex; align-items: center; background: #1a1a1a; border: 1px solid #444; padding: 8px 15px; border-radius: 20px; margin: 5px; cursor: pointer; transition: 0.2s; }
.currency-option:hover { border-color: #4FACE0; }
.currency-option.selected { background: #4FACE0; border-color: #4FACE0; color: #fff; }
.currency-option input { display: none; }
.currency-option .cost-tag { margin-left: 8px; font-weight: bold; color: #ffc107; }
.currency-option.selected .cost-tag { color: #fff; }

/* --- [BARU] Character Selection List (Pengganti Dropdown) --- */
.char-select-box {
    background: #121212;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 10px;
    max-height: 250px;
    overflow-y: auto;
}
.char-radio-item {
    display: flex;
    align-items: center;
    background-color: #2a2a2a;
    border: 1px solid #333;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.char-radio-item:hover {
    background-color: #333;
    border-color: #4FACE0;
}
.char-radio-item input[type="radio"] {
    margin-right: 15px;
    transform: scale(1.3);
    cursor: pointer;
}
.char-radio-item img {
    margin-right: 10px;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
.char-radio-item span {
    font-size: 1.05em;
    color: #eee;
    font-weight: 500;
}

.gacha-main-content { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 40px; margin-bottom: 20px; padding-top: 10px; }
.box-wrapper { position: relative; width: 340px; height: 340px; flex-shrink: 0; background: #181818; border: 1px solid #333; border-radius: 12px; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 25px rgba(79, 172, 224, 0.2); }
.box-image { font-size: 150px; color: #4FACE0; text-shadow: 0 0 20px rgba(79, 172, 224, 0.6); transition: transform 0.2s; }
@keyframes shakeBox { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }
.shaking { animation: shakeBox 0.5s; animation-iteration-count: infinite; }
.gacha-rewards-list { flex-grow: 1; min-width: 300px; max-width: 450px; background-color: #1a1a1a; border: 1px solid #333; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.2); max-height: 400px; overflow-y: auto; }
.gacha-rewards-list h4 { background: linear-gradient(135deg, #4FACE0, #2980b9); color: white; margin: 0; padding: 12px; text-align: center; border-bottom: 1px solid #222; font-size: 1.1em; letter-spacing: 1px; }
.gacha-rewards-table { width: 100%; border-collapse: collapse; }
.gacha-rewards-table td { padding: 10px 15px; border-bottom: 1px solid #2a2a2a; vertical-align: middle; }
.gacha-rewards-table tr:hover { background-color: transparent; }
.reward-name { font-weight: 600; color: #eee; font-size: 0.95em; }
.reward-amount { color: #4FACE0; font-size: 0.85em; margin-left: 5px; background: #222; padding: 1px 4px; border-radius: 3px; border: 1px solid #333; }
.btn-open { width: 100%; padding: 16px; font-weight: 700; text-transform: uppercase; font-size: 1.1em; border-radius: 6px; border: none; transition: all 0.2s; background: linear-gradient(to bottom, #28a745, #218838); color: white; cursor: pointer; box-shadow: 0 4px 0 #1e7e34; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.btn-open:hover { transform: translateY(2px); box-shadow: 0 2px 0 #1e7e34; filter: brightness(1.1); }
.btn-open:active { transform: translateY(4px); box-shadow: none; }
.btn-open:disabled { background: #444; color: #888; box-shadow: none; cursor: not-allowed; transform: none; }
.cooldown-display { text-align: center; background-color: #3e1216; color: #ff8b94; border: 1px solid #5c181e; padding: 12px; margin-top: 20px; border-radius: 4px; font-weight: bold; display: none; }
.table-dark-custom { width: 100%; background-color: #222; border: 1px solid #444; color: #ccc; border-collapse: collapse; }
.table-dark-custom th { background: #1a1a1a; color: white; padding: 12px; border: 1px solid #444; text-transform: uppercase; font-size: 12px; text-align: center; }
.table-dark-custom td { padding: 10px; border: 1px solid #444; background-color: #2a2a2a; vertical-align: middle; text-align: center; }
.table-dark-custom tr:nth-child(even) td { background-color: #333; }
.table-dark-custom tr:hover td { background-color: #444; }
.gacha-pagination { margin-top: 15px; text-align: center; }
.gacha-pagination a { color: #4FACE0; margin: 0 3px; text-decoration: none; padding: 6px 12px; border: 1px solid #4FACE0; border-radius: 4px; display: inline-block; background-color: #222; }
.gacha-pagination a.active, .gacha-pagination a:hover { background-color: #4FACE0; color: #fff; }
.gacha-modal-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0, 0, 0, 0.85); display: none; justify-content: center !important; align-items: center !important; z-index: 2147483647 !important; backdrop-filter: blur(5px); }
.gacha-modal-overlay.show { display: flex !important; }
.gacha-modal-content { background: #1f1f1f; border: 2px solid #4FACE0; padding: 40px; border-radius: 12px; text-align: center; max-width: 450px; width: 90%; color: #eee; box-shadow: 0 0 50px rgba(79, 172, 224, 0.4); position: relative; margin: 0 !important; animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.gacha-modal-content h3 { color: #28a745; margin-top: 0; border-bottom: 1px solid #444; padding-bottom: 15px; font-size: 1.5em; }
.winning-item { font-size: 1.3em; font-weight: bold; color: #fff; display: block; margin: 20px 0; }
.character-name { color: #4FACE0; font-weight: bold; }
.modal-close-button { background-color: #4FACE0; color: white; border: none; padding: 12px 25px; border-radius: 6px; cursor: pointer; margin-top: 25px; font-weight: bold; font-size: 1em; }
.modal-close-button:hover { background-color: #3a9cbd; }
.gacha-message-box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: transparent; color: #fff; padding: 20px 30px; border: 1px solid #dc3545; border-radius: 8px; z-index: 99999; display: none; box-shadow: 0 0 20px rgba(0,0,0,0.8); text-align: center; font-weight: bold; }
.gacha-message-box.show { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.item-name-cell { display: flex; align-items: center; justify-content: center; }
.popover { z-index: 2050 !important; color: #333; border: none; }

/* Requirement Box */
.req-box { background-color: rgba(79, 172, 224, 0.1); border: 1px solid #4FACE0; border-radius: 4px; padding: 15px; margin-bottom: 20px; color: #eee; }
.req-box h4 { margin: 0 0 10px 0; color: #4FACE0; font-size: 1.1em; border-bottom: 1px solid rgba(79, 172, 224, 0.3); padding-bottom: 5px; text-transform: uppercase; font-weight: bold; }
.req-box ul { margin: 0; padding-left: 20px; list-style-type: square; }
.req-box li { margin-bottom: 3px; color: #ccc; }
.req-box li b { color: #fff; }

/* [MODIFIKASI] Loading Animation */
.btn-loading {
    position: relative; cursor: wait !important; pointer-events: none; opacity: 0.9;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
    background-size: 40px 40px !important;
    animation: btn-progress-stripes 1s linear infinite !important;
}
@keyframes btn-progress-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } }
/*
==============================================
--- Daily Login Reward Styles ---
==============================================
*/

/* --- Main Page Wrapper & General Styles --- */
.daily-login-page {
    font-family: 'Orbitron', sans-serif;
    color: #00ff00;
}

.daily-login-page h2 {
    color: #00ffff;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
    text-transform: uppercase;
    margin-bottom: 15px;
    margin-top: 30px;
    text-align: center;
}

.character-selector-container {
    background: rgba(26, 26, 26, 0.9);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    max-width: 900px;
    margin: 20px auto;
    border: 1px solid rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
}

.daily-login-page .points-display,
.daily-login-page .cost-display {
    text-align: center;
}

.daily-login-page .character-selector {
    margin-bottom: 0;
}

/* --- Daily Rewards Grid --- */
.daily-rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    max-width: 900px;
    margin: 20px auto;
}

.reward-card {
    background: #2a2a2a;
    border: 2px solid #555;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.reward-card-day {
    font-size: 1.1em;
    font-weight: bold;
    color: #00ffff;
    margin-bottom: 10px;
}

.reward-card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-grow: 1;
}
.reward-card-item .item-icon-small {
    transform: scale(1); /* Reset scale from fortuna */
    width: 40px;
    height: 40px;
    border: 1px solid #888;
}
.reward-card-item .item-name {
    font-size: 0.9em;
    color: #fff;
    font-weight: bold;
}
.reward-card-item .item-amount {
    font-size: 0.8em;
    color: #aaa;
}
.reward-card-item .item-talics {
    min-height: 12px;
}

/* Card Statuses */
.reward-card.claimed {
    background: #283b28;
    border-color: #00ff00;
    position: relative;
    overflow: hidden;
}
.reward-card.claimed::after {
    content: '\2713'; /* Checkmark */
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 1.5em;
    color: #00ff00;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
}

.reward-card.missed {
    background: #333;
    border-color: #ff0000;
    opacity: 0.6;
}
.reward-card.missed .reward-card-day { color: #ff6b6b; }
.reward-card.missed::after {
    content: '\00D7'; /* X Mark */
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 1.5em;
    color: #ff0000;
}


.reward-card.locked {
    background: #222;
    border-color: #444;
    opacity: 0.7;
}

.reward-card.claimable {
    background: #3a3a3a;
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

/* Claim Button */
.btn-claim {
    background-color: #008800;
    border: 1px solid #00ff00;
    color: #ffffff;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    margin-top: 10px;
    width: 100%;
}
.btn-claim:hover:not(:disabled) {
    background-color: #00aa00;
    transform: scale(1.05);
}
.btn-claim:disabled {
    background-color: #555;
    border-color: #888;
    color: #aaa;
    cursor: not-allowed;
    box-shadow: none;
}
.claim-form {
    margin: 0;
}


/* --- Streak Rewards --- */
.streak-rewards-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 900px;
    margin: 20px auto;
}

.streak-reward-item {
    background: #2a2a2a;
    border: 2px solid #555;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.streak-reward-item .reward-card-item {
    flex-direction: row;
    flex-grow: 1;
}

.streak-reward-progress {
    flex-grow: 1;
    text-align: center;
}
.progress-bar-bg {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #00ffff;
    border-radius: 5px;
    height: 15px;
    overflow: hidden;
}
.progress-bar-fg {
    height: 100%;
    background: #00ff00;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
    transition: width 0.5s ease;
}
.progress-text {
    font-size: 0.9em;
    color: #00ffff;
    margin-top: 5px;
    display: block;
}

.streak-reward-item .btn-claim {
    margin-top: 0;
    width: auto;
    flex-shrink: 0;
}

.streak-reward-item.claimed {
    background: #283b28;
    border-color: #00ff00;
}
.streak-reward-item.claimed .progress-bar-fg { background: #00ff00; }

.streak-reward-item.locked {
    background: #222;
    border-color: #444;
    opacity: 0.7;
}

.streak-reward-item.claimable {
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}


/* --- Notices and Error Messages --- */
.daily-login-error-text, 
.daily-login-no-logs,
.daily-login-notice-text {
    text-align: center;
    font-weight: bold;
    color: #ff0000;
    background: rgba(255, 0, 0, 0.1);
    padding: 10px;
    border: 1px solid #ff0000;
    border-radius: 5px;
    max-width: 900px;
    margin: 20px auto;
}
.daily-login-notice-text {
    color: #ffcc00;
    background: rgba(255, 204, 0, 0.1);
    border-color: #ffcc00;
}
.daily-login-no-logs {
    color: #aaa;
    background: rgba(170, 170, 170, 0.1);
    border-color: #555;
}


/* --- Win Modal --- */
.daily-login-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex; justify-content: center;
    align-items: center; z-index: 1000;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.daily-login-modal-overlay.show { opacity: 1; visibility: visible; }

.daily-login-modal-content {
    background-color: #1a1a1a;
    padding: 30px; border-radius: 10px;
    text-align: center; color: #00ff00;
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.6);
    border: 2px solid #00ffff;
    max-width: 90%; width: 450px;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.daily-login-modal-overlay.show .daily-login-modal-content {
    transform: scale(1);
}

.daily-login-modal-content h3 { color: #00ffff; font-size: 1.8em; margin-bottom: 15px; text-shadow: 0 0 10px #00ffff; }
.daily-login-modal-content p { font-size: 1.1em; margin-bottom: 10px; }
.daily-login-modal-content .winning-item { color: #ffcc00; font-weight: bold; font-size: 1.3em; display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 5px; }
.daily-login-modal-content .character-name { color: #00ffff; font-weight: bold; font-size: 1.2em; }


/* --- Logs Table --- */
.daily-login-logs-container {
    background: rgba(26, 26, 26, 0.9);
    padding: 25px;
    border-radius: 12px;
    max-width: 900px;
    margin: 40px auto;
    border: 1px solid rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
}
.daily-login-logs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    color: #fff;
    font-size: 0.9em;
}

.daily-login-logs-table th, .daily-login-logs-table td {
    padding: 12px;
    border: 1px solid #00ff00;
    text-align: center;
    vertical-align: middle;
}

.daily-login-logs-table thead tr {
    background-color: #0056b3;
    color: #00ffff;
}

.daily-login-logs-table tbody tr:nth-child(even) { background-color: #2a2a2a; }
.daily-login-logs-table tbody tr:nth-child(odd) { background-color: #3a3a3a; }
.daily-login-logs-table tbody tr:hover { background-color: #4a4a4a; color: #00ffff; }


/* --- Pagination --- */
.daily-login-pagination {
    margin-top: 20px;
    text-align: center;
}
.daily-login-pagination a {
    color: #00ffff; margin: 0 5px; text-decoration: none;
    padding: 8px 12px; border: 1px solid #00ffff;
    border-radius: 5px; transition: all 0.3s ease;
}
.daily-login-pagination a:hover {
    background-color: rgba(0, 255, 255, 0.2); color: #fff;
}
.daily-login-pagination a.active {
    background-color: #00ffff; color: #1a1a1a;
    font-weight: bold; box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}
/*
==============================================
--- Pitboss Status Styles (VERSI LEBIH SPESIFIK) ---
==============================================
*/

/* ID Wrapper dari file .php */
#pitboss-status-page .text-red { 
    color: #ff5c5c !important; 
}
#pitboss-status-page .text-green { 
    color: #6aff6a !important; 
}

/* Dibuat lebih spesifik agar tidak bentrok */
#pitboss-status-page .nav-pills.nav-stacked > li > a {
    color: #d1d1d1;
    text-align: left;
    background-color: #2b2b2b;
    margin-bottom: 5px;
    border-radius: 5px;
    font-weight: 500;
    border: 1px solid #3c3c3c;
    transition: background-color 0.2s ease, color 0.2s ease;
    padding: 10px 15px;
}
#pitboss-status-page .nav-pills.nav-stacked > li > a:hover {
    background-color: #3a3a3a;
    color: #fff;
    text-decoration: none;
}
#pitboss-status-page .nav-pills.nav-stacked > li.active > a, 
#pitboss-status-page .nav-pills.nav-stacked > li.active > a:hover, 
#pitboss-status-page .nav-pills.nav-stacked > li.active > a:focus {
    color: #ffffff;
    background-color: #337ab7; /* Biru */
    font-weight: bold;
    border-color: #2e6da4;
}

/* Wrapper konten kanan */
#pitboss-status-page .pitboss-tab-content {
    border: 1px solid #333;
    border-radius: 5px;
    background-color: #121212; /* Hitam pekat */
    padding: 15px;
    min-height: 400px;
}

/* Custom Card untuk Boss */
#pitboss-status-page .pitboss-card {
    background-color: #2b2b2b; /* Abu gelap */
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 15px;
    text-align: center;
    border-top: 4px solid #6aff6a; /* Default ALIVE */
    transition: all 0.3s ease;
}

/* Warna border-top jika DEAD */
#pitboss-status-page .pitboss-card.card-dead {
    border-top-color: #ff5c5c;
}

#pitboss-status-page .pitboss-name {
    font-size: 1.5em;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 5px;
}

#pitboss-status-page .pitboss-status {
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
}

/* Padding antar kolom di grid */
#pitboss-status-page .pitboss-grid-row {
    margin-left: -10px;
    margin-right: -10px;
}
#pitboss-status-page .pitboss-grid-row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}
/* --- Council List K/D Stats --- */
.council-kd {
    font-size: 0.9em; /* Sedikit lebih kecil dari nama */
    margin-top: 5px;  /* Jarak dari nama */
    font-weight: normal;
    opacity: 0.8;     /* Agak transparan */
    letter-spacing: 0.5px;
}
.council-k {
    color: #8BC34A; /* Warna hijau untuk Kill */
    margin-right: 8px; /* Jarak antara K dan D */
}
.council-d {
    color: #F44336; /* Warna merah untuk Death */
}
/*
/*
==============================================
--- Wallet Shop Grid Styles (VERSI 2 - Horizontal) ---
==============================================
*/

/* --- Container Grid --- */
.wallet-shop-grid {
    margin-left: -10px;
    margin-right: -10px;
    display: flex; /* <-- TAMBAHKAN INI */
    flex-wrap: wrap; /* <-- TAMBAHKAN INI */
}

/* --- Kolom Grid --- */
.wallet-shop-grid .col-md-3, /* Disarankan 3 kolom (md-4) agar kartu tidak sempit */
.wallet-shop-grid .col-sm-6 {
    padding: 10px;
}

/* --- Kartu Item --- */
.wallet-shop-card {
    background-color: #222; /* Latar belakang gelap */
    border: 1px solid #333;
    border-radius: 4px;
    color: #ccc;
    height: 100%; /* Membuat semua kartu sama tinggi */
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease-in-out;
}

.wallet-shop-card:hover {
    border-color: #00ffff;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

/* --- [BARU] Wrapper untuk [Gambar] [Konten] --- */
.wallet-shop-card .card-body-horizontal {
    display: flex; /* Kunci: Gambar kiri, Konten kanan */
    flex-direction: row;
    padding: 15px;
    flex-grow: 1; /* Body ini mengisi ruang kosong */
}

/* --- Area Gambar (Kiri) --- */
.wallet-shop-card .card-image {
    background-color: #111;
    border: 1px solid #333;
    border-radius: 4px;
    
    /* Ukuran tetap seperti di gambar */
    width: 94px;
    height: 94px; 
    padding: 15px; /* Padding di dalam 94x94 */
    
    /* flex properties */
    flex-shrink: 0; /* Jangan menyusut */
    margin-right: 15px; /* Jarak ke konten */

    /* Pusatkan sprite di dalam */
    display: flex;
    align-items: center;
    justify-content: center;
}

.wallet-shop-card .card-image .sprite-iy-custom,
.wallet-shop-card .card-image [class*="sprite-"] {
    width: 64px;
    height: 64px;
    transform: scale(1.0) !important;
    margin: 0;
}

.wallet-shop-card .card-image img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

/* --- Area Konten (Kanan) --- */
.wallet-shop-card .card-content {
    padding: 0; /* Padding sudah di .card-body-horizontal */
    flex-grow: 1; /* Ambil sisa ruang */
    display: flex;
    flex-direction: column;
}

/* --- [BARU] Wrapper Judul & Harga --- */
.wallet-shop-card .card-title-price-wrapper {
    display: block; /* Ubah ke block, tidak lagi flex */
    margin-bottom: 8px;
}

.wallet-shop-card .card-title {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    line-height: 1.3;
    /* Memastikan nama item bisa membungkus jika sangat panjang */
    white-space: normal; 
    word-wrap: break-word; 
}

.wallet-shop-card .card-price {
    font-size: 16px;
    font-weight: bold;
    color: #00ffff; /* Warna harga (cyan) */
    display: block; /* Buat harganya jadi satu baris sendiri */
    margin-top: 4px; /* Beri jarak sedikit dari nama item di atasnya */
}

/* --- Info (Race, Talic, Dll) --- */
.wallet-shop-card .card-info {
    font-size: 12px;
    color: #bbb;
    margin-bottom: 5px;
    line-height: 1.2;
}

.wallet-shop-card .card-info.upgrades {
    line-height: 1;
    min-height: 12px; /* Beri ruang kosong jika tidak ada upgrade */
    margin-bottom: 8px; /* Jarak lebih setelah talic */
}

.wallet-shop-card .card-info.bought {
    margin-top: auto; /* Mendorong 'Times bought' ke bawah */
    padding-top: 5px; 
}

/* --- Footer (Tombol) --- */
.wallet-shop-card .card-footer {
    padding: 10px 15px; 
    background-color: transparent;
    border-top: 1px solid #333;
    /* Baris 'margin-top: auto;' sudah dihapus */
}

.wallet-shop-card .btn-block {
    padding: 8px 12px;
    font-size: 13px;
}
/*
==============================================
--- [BARU] Style Popover Gelap (Dark Theme) ---
==============================================
*/

/* Sprite di dalam popover (menimpa style card-image) */
.popover-content .sprite-iy-custom,
.popover-content [class*="sprite-"] {
    width: 64px;
    height: 64px;
    transform: scale(1.0) !important;
    margin: 0 auto; /* Tengah */
    border: 1px solid #444;
    background-color: #111;
}

/* Panah kecil (arrow) */
.popover > .arrow::after {
    border-top-color: #222;
}

.popover.top > .arrow::after {
    border-top-color: #222;
}

.popover.bottom > .arrow::after {
    border-bottom-color: #222;
}

.popover.left > .arrow::after {
    border-left-color: #222;
}

.popover.right > .arrow::after {
    border-right-color: #222;
}

/* Border panah (sesuaikan dengan border utama) */
.popover.top > .arrow {
     border-top-color: #00ffff;
}
.popover.bottom > .arrow {
     border-bottom-color: #00ffff;
}
.popover.left > .arrow {
     border-left-color: #00ffff;
}
.popover.right > .arrow {
     border-right-color: #00ffff;
}

/* Kita tidak pakai title, jadi sembunyikan */
.popover-title {
    display: none;
}
/* Opsional: Tambahan untuk user_daily_quest_ticket.php */
.quest-ticket-grid .reward-card {
    min-height: 300px; /* Sedikit lebih tinggi untuk persyaratan */
}

.reward-requirements {
    font-size: 0.9em;
    color: #ccc;
    padding: 10px;
    background: rgba(0,0,0,0.1);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-top: auto; /* Mendorong ini ke bawah sebelum tombol */
}
.reward-requirements div {
    margin-bottom: 3px;
}
.reward-requirements b {
    color: #fff;
    float: right;
}

.reward-card .reward-status-text {
    padding: 10px;
    font-size: 0.9em;
    color: #ffc107; /* Warna kuning peringatan */
    text-align: center;
    background: rgba(0,0,0,0.2);
    min-height: 40px; /* Samakan tinggi dengan tombol */
    display: flex;
    align-items: center;
    justify-content: center;
}
.item-name-cell {
            display: flex;
            align-items: center;
        }
body {
    font-family: 'Inter', sans-serif;
}
/* Di gamecp.css */
.btn-primary {
    /* ...style Anda yang ada... */
    transition: all 0.3s ease; /* Tambahkan ini */
}

.btn-primary:hover {
    transform: scale(1.05); /* Sedikit membesar saat disentuh */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Memberi bayangan */
}
/* =========================================
   BLACK THEME OVERRIDE (Ubah Abu jadi Hitam)
   Paste ini di paling bawah gamecp.css
   ========================================= */
/* 1. Background Utama Body menjadi Hitam Pekat */
body {
    background-color: #000000; /* Dihapus !important-nya agar radial-gradient di atas tetap jalan */
    color: #e0e0e0; /* Teks dibuat agak terang agar terbaca */
}

/* 2. Menghilangkan Efek Gradasi Abu-abu pada Navbar & Tombol */
.btn, .panel-heading, .progress-bar, .list-group-item { /* Menghapus .navbar dari daftar ini */
    background-image: none !important; /* Mematikan gradasi bawaan bootstrap */
    filter: none !important;
}

/* 3. Navbar (Menu Atas) */
.navbar-inverse { /* Menghapus .navbar-default dari daftar ini */
    background-color: #0a0a0a !important; /* Hitam hampir pekat */ 
    border-color: #333 !important;
}

/* 4. Panel, Kotak Konten, dan Well (Background kotak-kotak) */
.panel, .well, .jumbotron, .thumbnail, .modal-content {
    background-color: #111111 !important; /* Abu sangat gelap (biar beda dikit sama background body) */
    border-color: #333 !important; /* Border abu gelap */
}

.panel-body, .panel-footer {
    background-color: #111111 !important;
}

/* 5. Tabel */
.table {
    background-color: #111111 !important;
}
.table > thead > tr > th, 
.table > tbody > tr > td {
    border-color: #333 !important;
}
/* Baris ganjil pada tabel striped dibuat sedikit lebih terang dari hitam */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #1a1a1a !important; 
}
.table-hover > tbody > tr:hover {
    background-color: #333 !important; /* Warna saat mouse hover */
}

/* 6. Input Form & Dropdown */
.form-control {
    background-color: #000000 !important;
    border: 1px solid #444 !important;
    color: #fff !important;
}
.form-control:focus {
    border-color: #00ffff !important; /* Highlight cyan saat diketik */
}

/* Fix untuk outlet agar tidak ada margin double */
.main-outlet {
    margin: 0;
    padding: 0;
}
/* 7. Dropdown Menu (Saat klik menu) */
.dropdown-menu {
    background-color: #000000 !important;
    border: 1px solid #333 !important;
}
.dropdown-menu > li > a {
    color: #ccc !important;
}
.dropdown-menu > li > a:hover {
    background-color: #333 !important;
    color: #fff !important;
}

/* 8. List Group (Biasanya di menu samping) */
.list-group-item {
    background-color: #111111 !important;
    border-color: #333 !important;
}
a.list-group-item:hover {
    background-color: #222 !important;
}

/* 9. Footer Halaman (Jika ada blockquote/footer) */
blockquote {
    border-left-color: #333 !important;
}

/* 10. Tombol (Button) agar tidak abu-abu */
.btn-default {
    background-color: #222 !important;
    border-color: #444 !important;
    color: #fff !important;
}
.btn-default:hover {
    background-color: #444 !important;
}

/* Perbaikan warna teks Heading agar kontras */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #ffffff !important;
    text-shadow: none !important;
}
/* --- DASHBOARD RESTORATION --- */

/* 1. KOTAK WELCOME (Kembalikan ke Warna Biru Gradient) */
.welcome-box {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%) !important;
    color: #fff !important;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #4aa3df;
    min-height: 145px; /* Tinggi disamakan dengan billing */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    margin-bottom: 20px;
}

.welcome-box h3 {
    margin-top: 0;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.welcome-box p {
    margin-bottom: 5px;
    font-size: 13px;
    opacity: 0.9;
}

/* 2. KOTAK BILLING (Kembalikan ke Layout Grid Rapi) */
.billing-box {
    /* Warna Background Hitam/Gelap (Sesuai permintaan: "warnanya saja yang jangan di ubah") */
    background-color: #111; 
    border: 1px solid #333;
    border-radius: 4px;
    padding: 15px;
    min-height: 145px;
    color: #ccc;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    margin-bottom: 20px;
}

.billing-title {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Mengatur GP, Cash, Premium agar sejajar ke samping lagi */
.billing-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.billing-item {
    flex: 1; /* Bagi rata ruangnya */
    border-right: 1px solid #333; /* Garis pemisah */
}

.billing-item:last-child {
    border-right: none; /* Hapus garis di item terakhir */
}

.billing-value {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: #ffcc00; /* Warna angka kuning emas agar kontras */
    margin-bottom: 5px;
}

.billing-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
}

/* 3. PANEL BAWAH (Account & Wallet) - Sedikit perapian agar senada */
.panel-primary {
    border-color: #333;
    background-color: #1a1a1a;
}
.panel-primary > .panel-heading {
    background-color: #222;
    border-color: #333;
    color: #eee;
}
.table > tbody > tr > th, 
.table > tbody > tr > td {
    border-top: 1px solid #333 !important;
    color: #ddd;
}
/* ============================================
   ADMIN PANEL UI (ai- classes)
   ============================================ */
    
    /* Card / Container */
    .ai-wrapper {
        background: #0d0d0d;
        padding: 20px 24px;
        margin-bottom: 80px; /* Give space for footer */
        border-radius: 12px;
        border: 1px solid #222;
        font-family: "Inter", "Segoe UI", sans-serif;
    }
    
    .ai-card {
        background: #111;
        border: 1px solid #222;
        border-radius: 12px;
        margin-bottom: 20px;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .ai-card:hover {
        border-color: #333;
    }
    
    .ai-card-header {
        background: #141414;
        color: #eee;
        padding: 14px 20px;
        font-weight: 700;
        font-size: 13px;
        border-bottom: 1px solid #1a1a1a;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .ai-card-header i {
        color: #fbbf24;
        font-size: 16px;
    }
    
    .ai-card-body {
        padding: 0;
        padding: 20px;
        overflow-x: auto;
    }
    
    .ai-card-footer {
        background: #141414;
        padding: 14px 20px;
        border-top: 1px solid #1a1a1a;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    
    .ai-card-footer.text-right {
        justify-content: flex-end;
    }
    
    .ai-card-footer.text-center {
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }
    
    .stat-box {
        background-color: #1a1a1a;
        border: 1px solid #333;
        border-radius: 6px;
        padding: 15px;
        margin-bottom: 20px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    .stat-box .stat-label {
        font-size: 12px;
        color: #888;
        text-transform: uppercase;
        margin-bottom: 8px;
        font-weight: 600;
    }
    
    .stat-box .stat-value {
        font-size: 20px;
        color: #fff;
        font-weight: 700;
    }
    
    .stat-box .stat-value.money {
        color: #4FACE0;
    }
    
    .stat-box .stat-value.user {
        color: #fbbf24;
    }
    
    .stat-box .stat-value.code {
        color: #2ecc71;
    }
    
    .stat-box .stat-value.tier {
        color: #e74c3c;
    }
    
    /* Table Styling */
    .ai-table {
        width: 100%;
        background: #0d0d0d;
        border-collapse: collapse;
        color: #ccc;
        font-size: 13px;
        border: 1px solid #333;
    }
    
    .ai-table thead th {
        background: #111;
        color: #888;
        padding: 12px 16px;
        border: 1px solid #333;
        text-align: left;
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .ai-table thead th i {
        color: #fbbf24;
        margin-right: 6px;
    }
    
    .ai-table tbody td {
        padding: 10px 16px;
        border: 1px solid #333;
        vertical-align: middle;
    }
    
    .ai-table tbody tr {
        transition: background 0.2s ease;
    }
    
    .ai-table tbody tr:hover {
        background: #141414;
    }
    
    .ai-table .label-cell {
        width: 20%;
        color: #888;
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    
    .ai-table .value-cell {
        color: #eee;
        font-weight: 500;
    }
    
    .ai-table .value-cell strong {
        color: #fff;
    }
    
    /* Input Styling */
    .ai-form-control {
        width: 100%;
        padding: 10px 14px;
        background: #0d0d0d;
        border: 1px solid #222;
        border-radius: 8px;
        color: #eee;
        font-size: 14px;
        transition: all 0.2s ease;
        font-family: "Inter", sans-serif;
    }
    
    .ai-form-control:focus {
        outline: none;
        border-color: #fbbf24;
        box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
    }
    
    .ai-form-control::placeholder {
        color: #444;
    }
    
    /* Buttons */
    .ai-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 24px;
        border: none;
        border-radius: 8px;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-decoration: none;
        font-family: "Inter", sans-serif;
    }
    
    .ai-btn-primary {
        background: #1a1a2a;
        color: #fbbf24;
        border: 1px solid #2a2a3a;
    }
    
    .ai-btn-primary:hover {
        background: #22223a;
        transform: translateY(-2px);
    }
    
    /* Badges */
    .ai-badge {
        display: inline-block;
        padding: 4px 14px;
        border-radius: 30px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    
    .ai-badge-success {
        background: rgba(34, 197, 94, 0.15);
        color: #4ade80;
    }
    
    .ai-badge-danger {
        background: rgba(239, 68, 68, 0.15);
        color: #f87171;
    }
    
    .ai-badge-warning {
        background: rgba(251, 191, 36, 0.15);
        color: #fbbf24;
    }
    
    .ai-badge-secondary {
        background: rgba(255, 255, 255, 0.05);
        color: #888;
        border: 1px solid #222;
    }
    
    .ai-badge-info {
        background: rgba(59, 130, 246, 0.15);
        color: #60a5fa;
    }
    
    /* Character List */
    .ai-char-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
    }
    
    .ai-char-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        background: #0d0d0d;
        border: 1px solid #222;
        border-radius: 6px;
        transition: all 0.2s ease;
        flex-wrap: wrap;
    }
    
    .ai-char-item:hover {
        background: #141414;
        border-color: #333;
    }
    
    .ai-char-item .char-name {
        font-weight: 600;
        color: #eee;
    }
    
    .ai-char-item .char-detail {
        color: #666;
        font-size: 12px;
    }
    
    .ai-char-item .char-status {
        font-size: 11px;
    }
    
    /* Serial Text */
    .ai-serial {
        color: #666;
        font-size: 12px;
        font-weight: 400;
    }
    
    /* VP Points */
    .ai-vp {
        color: #fbbf24;
        font-weight: 700;
    }
    
    /* Cash */
    .ai-cash {
        color: #4ade80;
        font-weight: 700;
    }
    
    /* Alert */
    .ai-alert {
        padding: 14px 20px;
        border-radius: 10px;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 12px;
        border-left: 4px solid;
    }
    
    .ai-alert-danger {
        background: rgba(239, 68, 68, 0.08);
        color: #f87171;
        border-color: #ef4444;
    }
    
    .ai-alert-success {
        background: rgba(34, 197, 94, 0.08);
        color: #4ade80;
        border-color: #22c55e;
    }
    
    .ai-alert-warning {
        background: rgba(251, 191, 36, 0.08);
        color: #fbbf24;
        border-color: #f59e0b;
    }
    
    .ai-alert i {
        font-size: 16px;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .ai-wrapper {
            padding: 12px 14px;
        }
        
        .ai-table thead th,
        .ai-table tbody td {
            padding: 8px 10px;
            font-size: 12px;
        }
        
        .ai-table .label-cell {
            width: 30%;
            font-size: 10px;
        }
        
        .ai-char-item {
            flex-wrap: wrap;
            gap: 4px;
        }
    }
    
    @media (max-width: 480px) {
        .ai-table .label-cell {
            width: 35%;
            font-size: 9px;
        }
        
        .ai-table tbody td {
            font-size: 11px;
            padding: 6px 8px;
        }
    }

/*
==============================================
--- Gacha Voucher Styles ---
==============================================
*/
.gv-container { font-family: "Segoe UI", sans-serif; color: #eee; width: 100%; }
.gv-card { background: #1f1f1f; border: 1px solid #333; border-radius: 6px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.gv-header { border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 15px; font-size: 1.4em; color: #4FACE0; }
.point-box { background: #2a2a2a; border-left: 5px solid #ffc107; padding: 15px; font-size: 1.2em; display:flex; justify-content:space-between; align-items:center; border-radius: 4px; }
.point-val { color: #fff; font-weight: bold; font-size: 1.5em; }
.nav-tabs { border-bottom: 1px solid #444; margin-bottom: 20px; display:flex; gap: 5px; flex-wrap: wrap; }
.nav-item { padding: 12px 25px; background: #333; color: #aaa; cursor: pointer; border-radius: 5px 5px 0 0; font-weight: bold; transition: 0.2s; }
.nav-item:hover { background: #444; color: #fff; }
.nav-item.active { background: #4FACE0; color: #fff; }
.char-select-box { background: #121212; border: 1px solid #444; border-radius: 4px; padding: 10px; max-height: 250px; overflow-y: auto; margin-bottom: 15px; }
.char-radio-item { display: flex; align-items: center; background-color: #2a2a2a; border: 1px solid #333; padding: 10px 15px; margin-bottom: 8px; border-radius: 4px; cursor: pointer; transition: all 0.2s; }
.char-radio-item:hover { background-color: #333; border-color: #4FACE0; }
.char-radio-item input[type="radio"] { margin-right: 15px; transform: scale(1.3); cursor: pointer; }
.char-radio-item img { margin-right: 10px; height: 24px; filter: drop-shadow(0 0 2px rgba(0,0,0,0.5)); }
.table-dark { width: 100%; border-collapse: collapse; background: #222; }
.table-dark td, .table-dark th { padding: 12px; border: 1px solid #444; text-align: left; vertical-align: middle; }
.table-dark th { background: #1a1a1a; color: #fff; }
.btn-exc { background: #28a745; color: white; border: none; padding: 6px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-exc:hover { background: #218838; }
.gacha-box-wrapper { text-align: center; padding: 40px; background: #151515; border-radius: 10px; position: relative; border: 1px solid #333; }
.gacha-icon { font-size: 120px; color: #ffc107; text-shadow: 0 0 20px rgba(255, 193, 7, 0.5); transition: transform 0.2s; }
.btn-spin { background: linear-gradient(to bottom, #d9534f, #c9302c); color: white; border: none; padding: 15px 40px; font-size: 1.5em; border-radius: 50px; cursor: pointer; margin-top: 20px; box-shadow: 0 5px 0 #a94442; font-weight: bold; width: 100%; max-width: 300px; }
.btn-spin:active { transform: translateY(4px); box-shadow: none; }
.btn-spin:disabled { background: #555; cursor: not-allowed; box-shadow: none; }
.shaking { animation: shakeBox 0.5s infinite; }
@keyframes shakeBox { 0% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: none; justify-content: center; align-items: center; z-index: 9999; backdrop-filter: blur(5px); }
.modal-content { background: #222; border: 2px solid #4FACE0; padding: 30px; border-radius: 10px; text-align: center; max-width: 450px; width: 90%; animation: popIn 0.3s; box-shadow: 0 0 30px rgba(79, 172, 224, 0.3); }
.voucher-display { font-size: 2em; color: #4FACE0; border: 2px dashed #444; padding: 15px; margin: 20px 0; background: #111; font-family: monospace; letter-spacing: 2px; }
.win-percent-display { font-size: 3em; font-weight: bold; color: #ffc107; margin: 10px 0; text-shadow: 0 0 10px rgba(255, 193, 7, 0.3); }
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.btn-copy { background: #333; color: #fff; border: 1px solid #555; padding: 8px 15px; border-radius: 4px; cursor: pointer; margin-bottom: 15px; transition: 0.2s; }
.btn-copy:hover { background: #444; border-color: #4FACE0; }
.badge-gain { color: #28a745; font-weight: bold; }
.badge-loss { color: #d9534f; font-weight: bold; }

/* Requirement Box */
.req-box { background-color: rgba(79, 172, 224, 0.1); border: 1px solid #4FACE0; border-radius: 4px; padding: 15px; margin-bottom: 20px; color: #eee; }
.req-box h4 { margin: 0 0 10px 0; color: #4FACE0; font-size: 1.1em; border-bottom: 1px solid rgba(79, 172, 224, 0.3); padding-bottom: 5px; text-transform: uppercase; font-weight: bold; }
.req-box ul { margin: 0; padding-left: 20px; list-style-type: square; }
.req-box li { margin-bottom: 3px; color: #ccc; }
.req-box li b { color: #fff; }

/* [MODIFIKASI] Loading Animation */
.btn-loading {
    position: relative; cursor: wait !important; pointer-events: none; opacity: 0.9;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
    background-size: 40px 40px !important;
    animation: btn-progress-stripes 1s linear infinite !important;
}
@keyframes btn-progress-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } }

/*
==============================================
--- Event Pages CSS (Restored) ---
==============================================
*/
/*
--- FROM user_claim_daily_killer.php ---
*/







/* Character Card Style */
form.char-card {
    background-color: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: all 0.2s;
    width: 100%;
}
form.char-card:hover {
    border-color: #666;
    background-color: #2a2a2a;
}
.char-card-info {
    flex: 1;
    min-width: 300px;
    padding-right: 20px;
    border-right: 1px solid #444;
}
.char-card-action {
    flex: 1;
    min-width: 300px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
@media (max-width: 768px) {
    .char-card-info { border-right: none; border-bottom: 1px solid #444; padding-right: 0; padding-bottom: 15px; margin-bottom: 15px; }
    .char-card-action { padding-left: 0; }
}

/* Header di dalam Card */
.char-card-header {
    font-size: 1.4em;
    font-weight: bold;
    color: #4FACE0;
    margin-bottom: 15px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

/* List Info Karakter */
.char-stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.char-stats-list li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #333;
    color: #ccc;
    font-size: 0.95em;
}
.char-stats-list li:last-child { border-bottom: none; }
.char-stats-list strong { color: #fff; }

/* Status Labels */
.status-ok { color: #28a745; font-weight: bold; }
.status-fail { color: #dc3545; font-weight: bold; }

/* Buttons */
.btn-claim {
    width: 100%;
    padding: 10px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    margin-top: 15px;
    border-radius: 4px;
    border: none;
    transition: background 0.3s;
}
.btn-claim:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    background-color: #555;
    color: #999;
}

/* Custom Radio List for Event */
.event-radio-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 5px;
}
.event-radio-item {
    display: flex;
    align-items: center;
    background-color: #333;
    border: 1px solid #555;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
.event-radio-item:hover {
    background-color: #444;
    border-color: #777;
}
.event-radio-item input[type="radio"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}
.event-radio-item span {
    font-size: 0.9em;
    color: #eee;
}

/* Popover styling */


/*
--- FROM user_daily_login_reward.php ---
*/
/* Main Page Wrapper */
.daily-login-page {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #eee;
    position: relative;
}

/* Containers */
.daily-container, .daily-logs-container {
    background-color: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Headers */
h2 {
    color: #4FACE0;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-top: 0;
    font-size: 1.5em;
}
h4 {
    color: #fff;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 1.1em;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

/* Form Controls */



/* --- Character Selection List --- */
.char-select-box {
    background: #1a1a1a;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 10px;
    max-height: 250px;
    overflow-y: auto;
}
.char-radio-item {
    display: flex;
    align-items: center;
    background-color: #2a2a2a;
    border: 1px solid #444;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.char-radio-item:hover {
    background-color: #333;
    border-color: #4FACE0;
}
.char-radio-item input[type="radio"] {
    margin-right: 15px;
    transform: scale(1.3);
    cursor: pointer;
}
.char-radio-item img {
    margin-right: 10px;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
.char-radio-item span {
    font-size: 1.05em;
    color: #eee;
    font-weight: 500;
}

/* Daily Rewards Grid */
.daily-rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.reward-card {
    background-color: #1a1a1a;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    position: relative;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 180px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.reward-card:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(17, 17, 17, 0.8); }

/* Status Styles */
.reward-card.claimed { 
    border-color: #28a745; 
    background: linear-gradient(135deg, #1e2e22 0%, #1a1a1a 100%);
    opacity: 0.7; 
}
.reward-card.missed { 
    border-color: #dc3545; 
    background: linear-gradient(135deg, #2c1e1e 0%, #1a1a1a 100%);
    opacity: 0.6; 
}
.reward-card.claimable { 
    border-color: #4FACE0; 
    background: linear-gradient(135deg, transparent 0%, #2a2a2a 100%);
    box-shadow: 0 0 15px rgba(79, 172, 224, 0.3);
    border-width: 2px;
}
.reward-card.locked { 
    border-color: #333; 
    opacity: 0.5; 
    background-color: #151515;
}

/* Day Label */
.reward-card-day {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    width: 100%;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
    font-weight: bold;
}
.claimable .reward-card-day { color: #4FACE0; border-bottom-color: #4FACE0; }
.claimed .reward-card-day { color: #28a745; border-bottom-color: #28a745; }
.missed .reward-card-day { color: #dc3545; border-bottom-color: #dc3545; }

/* Item Display inside Card */
.reward-card-item {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    width: 100%;
}

.item-name { 
    color: #eee; 
    font-size: 12px; 
    margin-top: 8px; 
    line-height: 1.3; 
    min-height: 32px; 
    font-weight: bold;
}
.item-amount { 
    color: #ccc; 
    font-size: 11px; 
    background: #333; 
    padding: 2px 8px; 
    border-radius: 10px; 
    margin-top: 5px; 
}
.item-talics { margin-top: 5px; min-height: 14px; }

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 4px;
    margin-top: auto;
    width: 100%;
    text-transform: uppercase;
}
.badge-claimed { background-color: #28a745; color: white; }
.badge-missed { background-color: #dc3545; color: white; }
.badge-locked { background-color: #444; color: #aaa; }
.badge-dp-locked { background: linear-gradient(135deg, #b02a9e 0%, #6e1666 100%); color: #fff; }

/* Diamond Pass Specific Styles */
.pass-notification {
    margin-bottom: 18px; padding: 14px 16px; border-radius: 8px; border: 1px solid #444;
    background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.pass-notification i { color: #b02a9e; font-size: 18px; }
.pass-notification b { font-weight: 900; }
.pass-active { border-color: #b02a9e; background: rgba(176, 42, 158, 0.1); box-shadow: 0 0 10px rgba(176, 42, 158, 0.2); }
.pass-inactive { border-color: #666; background: rgba(0,0,0,0.5); }

.reward-card-items-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 5px;
    margin-bottom: 10px;
}
.reward-card-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2);
    border: 1px solid #333;
    border-radius: 4px;
    padding: 5px;
}
.dp-item-box { border-color: #b02a9e; background: rgba(176, 42, 158, 0.05); }
.dp-item-box .item-name { color: #f0a3e8; }
.item-label { font-size: 9px; text-transform: uppercase; font-weight: bold; margin-bottom: 5px; color: #888; }
.dp-label { color: #b02a9e; }

/* Claim Button (Small) */
.btn-claim {
    width: 100%;
    padding: 8px 0;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #4FACE0;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: auto;
    transition: background 0.2s;
    box-shadow: 0 3px 0 #2a88ad;
}
.btn-claim:hover { background-color: #3a9cbd; margin-top: auto; transform: translateY(-1px); }
.btn-claim:active { transform: translateY(2px); box-shadow: none; }

/* Streak Rewards */
.streak-rewards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}
.streak-reward-item {
    flex: 1;
    min-width: 250px;
    background-color: #1a1a1a;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 15px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.streak-reward-item.claimable { border-color: #4FACE0; box-shadow: 0 0 10px rgba(79, 172, 224, 0.2); }
.streak-reward-item.claimed { opacity: 0.7; border-color: #28a745; }

.streak-info {
    flex-grow: 1;
    margin-left: 15px;
    margin-right: 15px;
}
.streak-title { font-size: 13px; color: #fff; font-weight: bold; display: block; margin-bottom: 5px; }

/* Progress Bar */
.progress-bar-bg { 
    background: #333; 
    height: 10px; 
    border-radius: 5px; 
    overflow: hidden; 
    position: relative;
}
.progress-bar-fg { 
    background: linear-gradient(90deg, #4FACE0, #2980b9); 
    height: 100%; 
    transition: width 0.5s ease;
}
.progress-text { 
    font-size: 10px; 
    color: #fff; 
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    line-height: 10px;
    text-shadow: 0 0 2px #000;
}

/* Logs Table */






/* Pagination */
.daily-pagination { margin-top: 15px; text-align: center; }
.daily-pagination a {
    color: #4FACE0;
    margin: 0 3px;
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid #4FACE0;
    border-radius: 4px;
    display: inline-block;
    background-color: #222;
}
.daily-pagination a.active, .daily-pagination a:hover {
    background-color: #4FACE0;
    color: #fff;
}



/* Modal (Centered) */
.daily-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    justify-content: center !important;
    align-items: center !important;
    z-index: 2147483647 !important;
    backdrop-filter: blur(5px);
}

.daily-modal-overlay.show { 
    display: flex !important;
}

.daily-modal-content {
    background: #2a2a2a; 
    border: 1px solid #4FACE0; 
    padding: 30px; 
    border-radius: 8px;
    text-align: center; 
    max-width: 400px; 
    width: 90%; 
    color: #eee;
    box-shadow: 0 0 30px rgba(79, 172, 224, 0.6);
    animation: fadeIn 0.3s;
    position: relative;
    margin: 0 !important;
}
.daily-modal-content h3 { color: #28a745; margin-top: 0; border-bottom: 1px solid #444; padding-bottom: 10px; }
.winning-item { font-size: 1.2em; font-weight: bold; color: #fff; display: block; margin: 15px 0; }
.character-name { color: #4FACE0; font-weight: bold; }
.modal-close-button {
    background-color: #4FACE0; color: white; border: none; padding: 10px 20px;
    border-radius: 4px; cursor: pointer; margin-top: 20px; font-weight: bold;
}
.modal-close-button:hover { background-color: #3a9cbd; }

@keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* Helpers */





/*
--- FROM user_daily_quest_ticket.php ---
*/
/* Main Wrapper */
.quest-ticket-page {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #eee;
}

/* Containers */
.ticket-container, .ticket-logs-container {
    background-color: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Headers */
h3 {
    color: #4FACE0;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-top: 0;
    font-size: 1.4em;
    font-weight: bold;
}

/* Character Selector */
.character-selector-container {
    background-color: #1a1a1a;
    padding: 15px;
    border: 1px solid #444;
    border-radius: 5px;
    margin-bottom: 20px;
}
.character-selector label { color: #4FACE0; margin-right: 10px; font-weight: bold; display:block; margin-bottom:10px; }

/* --- Character Selection List --- */
.char-select-box {
    background: #1a1a1a;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 10px;
    max-height: 250px;
    overflow-y: auto;
}
.char-radio-item {
    display: flex;
    align-items: center;
    background-color: #2a2a2a;
    border: 1px solid #444;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.char-radio-item:hover {
    background-color: #333;
    border-color: #4FACE0;
}
.char-radio-item input[type="radio"] {
    margin-right: 15px;
    transform: scale(1.3);
    cursor: pointer;
}
.char-radio-item img {
    margin-right: 10px;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
.char-radio-item span {
    font-size: 1.05em;
    color: #eee;
    font-weight: 500;
}

/* Ticket Grid */
.tickets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.ticket-card {
    background-color: #1a1a1a;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 15px;
    text-align: center;
    position: relative;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 220px;
    height: 100%; /* Agar tinggi kotak sama rata */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.ticket-card:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(17, 17, 17, 0.8); }

/* Card Status Styles */
.ticket-card.claimable { 
    border-color: #4FACE0; 
    background: linear-gradient(135deg, transparent 0%, #2a2a2a 100%);
    box-shadow: 0 0 10px rgba(79, 172, 224, 0.2);
}
.ticket-card.cooldown { 
    border-color: #ffc107; 
    background-color: #2e2a1e;
    opacity: 0.9;
}
.ticket-card.locked { 
    border-color: #333; 
    opacity: 0.6; 
    background-color: #151515;
}

/* Card Content */
.ticket-title {
    font-size: 13px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 15px;
    width: 100%;
    border-bottom: 1px solid #333;
    padding-bottom: 8px;
    text-transform: uppercase;
}
.claimable .ticket-title { color: #4FACE0; border-bottom-color: #4FACE0; }
.cooldown .ticket-title { color: #ffc107; border-bottom-color: #ffc107; }

.ticket-item-display {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.ticket-amount { 
    color: #ccc; font-size: 11px; background: #333; 
    padding: 2px 8px; border-radius: 10px; margin-top: 8px; 
}

.ticket-info {
    font-size: 11px;
    color: #888;
    margin-bottom: 15px;
    width: 100%;
    text-align: center;
    border-top: 1px solid #333;
    padding-top: 8px;
}
.status-text { font-weight: bold; margin-top: 4px; display: block; }

/* Buttons */
.btn-claim {
    width: 100%;
    padding: 8px 0;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #4FACE0;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: auto;
    transition: background 0.2s;
}
.btn-claim:hover { background-color: #3a9cbd; }
.btn-claim:disabled { background-color: #555; cursor: not-allowed; }

/* Logs Table */






/* Pagination */
.pagination-container { text-align: center; margin-top: 15px; }
.btn-page {
    display: inline-block; padding: 5px 10px; margin: 0 2px;
    border: 1px solid #4FACE0; color: #4FACE0; text-decoration: none;
    border-radius: 3px; font-size: 12px; background: #222;
}
.btn-page.active, .btn-page:hover { background: #4FACE0; color: #fff; }



/* Modal (Centered Fixed) */
.ticket-modal-overlay {
    position: fixed !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important; 
    height: 100vh !important; 
    background: rgba(0, 0, 0, 0.85); 
    display: none;
    justify-content: center !important; 
    align-items: center !important; 
    z-index: 2147483647 !important; 
    backdrop-filter: blur(5px);
}

.ticket-modal-overlay.show { 
    display: flex !important; 
}

.ticket-modal-content {
    background: #2a2a2a; 
    border: 1px solid #4FACE0; 
    padding: 30px; 
    border-radius: 8px;
    text-align: center; 
    max-width: 400px; 
    width: 90%; 
    color: #eee;
    box-shadow: 0 0 30px rgba(79, 172, 224, 0.6);
    animation: fadeIn 0.3s;
    position: relative;
    margin: 0 !important; 
}
.ticket-modal-content h3 { color: #28a745; margin-top: 0; border-bottom: 1px solid #444; padding-bottom: 10px; }
.winning-item { font-size: 1.2em; font-weight: bold; color: #fff; display: block; margin: 15px 0; }
.character-name { color: #4FACE0; font-weight: bold; }
.modal-close-button {
    background-color: #4FACE0; color: white; border: none; padding: 10px 20px;
    border-radius: 4px; cursor: pointer; margin-top: 20px; font-weight: bold;
}
.modal-close-button:hover { background-color: #3a9cbd; }

@keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }



/*
--- FROM user_daily_share.php ---
*/







/* Character Card Style */
form.char-card {
    background-color: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: all 0.2s;
    width: 100%;
}
form.char-card:hover {
    border-color: #666;
    background-color: #2a2a2a;
}
.char-card-info {
    flex: 1;
    min-width: 300px;
    padding-right: 20px;
    border-right: 1px solid #444;
}
.char-card-action {
    flex: 1;
    min-width: 300px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
@media (max-width: 768px) {
    .char-card-info { border-right: none; border-bottom: 1px solid #444; padding-right: 0; padding-bottom: 15px; margin-bottom: 15px; }
    .char-card-action { padding-left: 0; }
}

/* Header di dalam Card */
.char-card-header {
    font-size: 1.4em;
    font-weight: bold;
    color: #4FACE0;
    margin-bottom: 15px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

/* List Info Karakter */
.char-stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.char-stats-list li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #333;
    color: #ccc;
    font-size: 0.95em;
    align-items: center; 
}
.char-stats-list li:last-child { border-bottom: none; }
.char-stats-list strong { color: #fff; }

/* Status Labels */
.status-ok { color: #28a745; font-weight: bold; }
.status-fail { color: #dc3545; font-weight: bold; }

/* Reward Radio Groups */
.reward-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; 
    align-items: center;
    padding: 5px 0;
}
.reward-radio-input { display: none; }
.reward-radio-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;  
    height: 50px; 
    border: 2px solid #555;
    background: #333;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;   
    transition: all 0.2s ease;
    overflow: hidden;
}
.reward-radio-label:hover { border-color: #999; background: #444; }
.reward-radio-input:checked + .reward-radio-label { border-color: #4FACE0; box-shadow: 0 0 8px #4FACE0; }

/* Buttons */
.btn-claim {
    width: 100%;
    padding: 10px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    margin-top: 15px;
    border-radius: 4px;
    border: none;
    transition: background 0.3s;
}
.btn-claim:disabled { cursor: not-allowed; opacity: 0.7; }

/* Popover styling */


/*
--- FROM user_claim_guild_rewardv2.php ---
*/




/* Modern Card Style */
.char-card { 
    background: linear-gradient(145deg, #2b2b2b, #1f1f1f); 
    border: 1px solid #3a3a3a; 
    border-radius: 8px; 
    padding: 20px; 
    margin-bottom: 25px; 
    box-shadow: 0 4px 15px rgba(17, 17, 17, 0.8); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.char-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    border-color: #555;
}

.status-ok { color: #28a745; font-weight: bold; }
.status-fail { color: #dc3545; font-weight: bold; }

.btn-claim { width: 100%; padding: 12px; font-weight: 600; text-transform: uppercase; margin-top: 15px; letter-spacing: 0.5px; border-radius: 4px; }

/* Reward Icons Style */
.reward-radio-label { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 36px; 
    height: 36px; 
    border: 1px solid #444; 
    background: #222; 
    border-radius: 4px; 
    cursor: pointer; 
    margin-right: 4px; 
    overflow: hidden; 
    padding: 0; 
    position: relative; 
    vertical-align: middle; 
    box-sizing: border-box; 
    transition: all 0.2s;
}
.reward-radio-label:hover { border-color: #aaa; background: #333; }
.reward-radio-label img { width: 100% !important; height: 100% !important; object-fit: contain !important; border: none !important; margin: 0 !important; display: block; }
/* Fix for Sprite Icons (Divs) - Scale 64px to 32px */
.reward-radio-label > div { transform: scale(0.5) !important; transform-origin: center center !important; width: 64px !important; height: 64px !important; position: absolute; top: 50%; left: 50%; margin-top: -32px; margin-left: -32px; zoom: 1 !important; }
.reward-radio-input:checked + .reward-radio-label { border-color: #8e44ad; box-shadow: 0 0 0 2px rgba(142, 68, 173, 0.4); background: #2c2030; }
.reward-radio-input { display: none; }

/* Progress Bar */
.progress { background-color: #333; height: 25px; border-radius: 4px; overflow: hidden; margin-bottom: 0; }
.progress-bar { line-height: 25px; font-weight: bold; font-size: 12px; transition: width 0.3s ease; }

/* Info Table override */
.info-table td { padding: 5px 0; border: none !important; }

/*
--- FROM user_lucky_withdrawal_event.php ---
*/
/* General Container & Tabs */
.tab-content {
    background-color: #1a1a1a; /* Dark background */
    color: #ccc;
    border: 1px solid #444;
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(17, 17, 17, 0.8);
}

.nav-tabs {
    border-bottom: 1px solid #444;
}

.nav-tabs > li > a {
    background-color: #2a2a2a;
    color: #888;
    border: 1px solid #444 !important;
    border-bottom: 1px solid #444 !important;
    margin-right: 2px;
    border-radius: 4px 4px 0 0;
    font-weight: bold;
    transition: all 0.2s;
}

.nav-tabs > li > a:hover {
    background-color: #333;
    color: #fff;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: #1a1a1a; /* Matches tab-content */
    color: #4FACE0; /* Blue accent */
    border: 1px solid #444 !important;
    border-bottom-color: #1a1a1a !important; /* Connects to pane */
}

/* Countdown Timer Box */
.event-countdown {
    font-size: 1.4em;
    font-weight: bold;
    color: #f0ad4e; /* Warning color for timer */
    text-align: center;
    padding: 15px;
    background: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    margin-bottom: 20px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

/* Layout Columns */
.event-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #444;
    padding-bottom: 20px;
}

.event-column-req, 
.event-column-participants {
    flex: 1;
    min-width: 300px;
}

/* Headings */
h4 {
    color: #4FACE0;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #444;
    padding-bottom: 10px;
    font-size: 16px;
    text-transform: uppercase;
}

/* Requirements Table Style (Matches Guild Reward) */
.req-table {
    width: 100%;
    border-collapse: collapse;
}
.req-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #333;
    color: #ccc;
}
.req-table td:first-child {
    background-color: #222;
    font-weight: bold;
    width: 40%;
}
.req-table td strong {
    color: #4FACE0;
}
.req-warning-box {
    margin-top: 10px;
    padding: 10px;
    background-color: #2a2a2a;
    color: #d9534f;
    border: 1px solid #d9534f;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
}

/* Participants Table */





/* Character Card Style */
.char-card {
    background-color: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    transition: all 0.2s;
}
.char-card:hover {
    border-color: #666;
    background-color: #2a2a2a;
}
.char-card-info {
    flex: 1;
    min-width: 250px;
    padding-right: 15px;
}
.char-card-header {
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
}
.char-card-header img {
    height: 24px;
    margin-right: 10px;
}
.char-card-stats {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
}
.char-card-stats li {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid #333;
}
.char-card-stats li:last-child {
    border-bottom: none;
}
.char-card-action {
    flex: 0 0 200px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Labels & Status */
.label-success { background-color: #28a745; padding: 2px 6px; border-radius: 3px; font-size: 0.85em; color: white;}
.label-danger { background-color: #dc3545; padding: 2px 6px; border-radius: 3px; font-size: 0.85em; color: white;}
.char-status-box {
    padding: 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9em;
    color: white;
}
.status-ok { background-color: #28a745; }
.status-fail { background-color: #444; color: #aaa; border: 1px solid #555; }
.status-registered { background-color: #17a2b8; }

/* Buttons */
.btn-lg-custom {
    width: 100%;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
}

/*
--- FROM user_claim_new_player_reward.php ---
*/







/* Character Card Style */
form.char-card {
    background-color: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: all 0.2s;
    width: 100%;
}
form.char-card:hover {
    border-color: #666;
    background-color: #2a2a2a;
}
.char-card-info {
    flex: 1;
    min-width: 300px;
    padding-right: 20px;
    border-right: 1px solid #444;
}
.char-card-action {
    flex: 1;
    min-width: 300px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
@media (max-width: 768px) {
    .char-card-info { border-right: none; border-bottom: 1px solid #444; padding-right: 0; padding-bottom: 15px; margin-bottom: 15px; }
    .char-card-action { padding-left: 0; }
}

/* Header di dalam Card */
.char-card-header {
    font-size: 1.4em;
    font-weight: bold;
    color: #4FACE0;
    margin-bottom: 15px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

/* List Info Karakter */
.char-stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.char-stats-list li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #333;
    color: #ccc;
    font-size: 0.95em;
}
.char-stats-list li:last-child { border-bottom: none; }
.char-stats-list strong { color: #fff; }

/* Status Labels */
.status-ok { color: #28a745; font-weight: bold; }
.status-fail { color: #dc3545; font-weight: bold; }

/* Event Selection Radio List */
.event-radio-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px;
    margin-bottom: 15px;
}
.event-radio-item {
    display: flex;
    align-items: center;
    background-color: #333;
    border: 1px solid #555;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.event-radio-item:hover {
    background-color: #444;
    border-color: #777;
}
.event-radio-item.is-checked {
    border-color: #4FACE0;
    background-color: #2a3a4a;
    box-shadow: 0 0 5px rgba(79, 172, 224, 0.3);
}
.event-radio-item input[type="radio"] {
    margin-right: 10px;
    transform: scale(1.2);
    accent-color: #4FACE0;
}
.event-radio-item span {
    font-size: 0.95em;
    color: #eee;
}

/* Reward Radio Groups (Grid Boxes) */
.reward-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 5px 0;
}
.reward-radio-input {
    display: none;
}
.reward-radio-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 2px solid #555;
    background: #333;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
    overflow: hidden;
}
.reward-radio-label:hover {
    border-color: #999;
    background: #444;
}
.reward-radio-input:checked + .reward-radio-label {
    border-color: #4FACE0;
    box-shadow: 0 0 8px #4FACE0;
}

/* Buttons */
.btn-claim {
    width: 100%;
    padding: 12px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    border-radius: 4px;
    border: none;
    transition: background 0.3s;
}
/* Style tambahan untuk tombol disabled */
.btn-claim:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

/* Popover styling */


/* [FIX] Icon Cutoff Issue */
.reward-radio-label > div {
    border: none !important;
    margin: 0 !important;
    background: transparent !important;
}

/*
--- FROM user_claim_rebirth.php ---
*/






.debug-box { background-color: #000; color: #0f0; border: 1px solid #0f0; padding: 10px; margin: 10px 0; font-family: monospace; white-space: pre-wrap; }

/* Character Card Style */
form.char-card {
    background-color: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: all 0.2s;
    width: 100%;
}
form.char-card:hover {
    border-color: #666;
    background-color: #2a2a2a;
}
.char-card-info {
    flex: 1;
    min-width: 300px;
    padding-right: 20px;
    border-right: 1px solid #444;
}
.char-card-action {
    flex: 1;
    min-width: 300px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}
@media (max-width: 768px) {
    .char-card-info { border-right: none; border-bottom: 1px solid #444; padding-right: 0; padding-bottom: 15px; margin-bottom: 15px; }
    .char-card-action { padding-left: 0; }
}
.char-card-header { font-size: 1.4em; font-weight: bold; color: #4FACE0; margin-bottom: 15px; border-bottom: 1px solid #444; padding-bottom: 5px; }
.char-stats-list { list-style: none; padding: 0; margin: 0; }
.char-stats-list li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #333; color: #ccc; font-size: 0.95em; }
.char-stats-list li:last-child { border-bottom: none; }
.char-stats-list strong { color: #fff; }
.status-ok { color: #28a745; font-weight: bold; }
.status-fail { color: #dc3545; font-weight: bold; }
.btn-claim { width: 100%; padding: 12px; font-weight: bold; text-transform: uppercase; font-size: 14px; margin-top: 15px; border-radius: 4px; border: none; transition: background 0.3s; }
.btn-claim:disabled { cursor: not-allowed; opacity: 0.7; background-color: #555; color: #999; }


/*
--- FROM user_voucher_exchanged.php ---
*/
/* --- CONTAINER & LAYOUT --- */
/* Matikan scrollbar paksa pada container tabel */
.voucher-full-table {
    width: 100%;
    overflow-x: auto; /* Scroll samping jika layar kecil */
    overflow-y: hidden;
}

/* --- TABLE STYLING --- */


/* Paksa elemen tabel berperilaku standar agar tidak ada scroll internal */








/* --- FORM CONTROLS --- */




/* --- CHARACTER SELECTOR (RADIO LIST STYLE) --- */
.char-select-box {
    background: #1a1a1a;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 10px;
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 20px;
}
.char-radio-item {
    display: flex;
    align-items: center;
    background-color: #2a2a2a;
    border: 1px solid #444;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.char-radio-item:hover {
    background-color: #333;
    border-color: #4FACE0;
}
.char-radio-item input[type="radio"] {
    margin-right: 15px;
    transform: scale(1.3);
    cursor: pointer;
}
.char-radio-item img {
    margin-right: 10px;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
.char-radio-item span {
    font-size: 1.05em;
    color: #eee;
    font-weight: 500;
}

/* --- BOX STYLING --- */
.voucher-box {
    background-color: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.section-header {
    color: #4FACE0;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 1.2em;
}

/* --- BUTTONS --- */
.btn-claim {
    width: 100%;
    padding: 12px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    border-radius: 4px;
    border: none;
    transition: background 0.3s;
    background-color: #28a745;
    color: white;
    cursor: pointer;
}
.btn-claim:hover { background-color: #218838; }
.btn-claim:disabled { background-color: #555; cursor: not-allowed; }

/* --- ALERTS --- */




/* --- PAGINATION --- */
.pagination-link {
    color: #4FACE0;
    margin: 0 5px;
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid #4FACE0;
    border-radius: 4px;
    display: inline-block;
}
.pagination-link.active {
    background-color: #4FACE0;
    color: #1a1a1a;
    font-weight: bold;
}

/* --- CUSTOM POPOVER (SMART POSITION) --- */
.item-popover-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.item-popover-trigger {
    color: #4FACE0;
    font-weight: bold;
    text-decoration: underline;
}
.item-popover-trigger:hover {
    color: #fff;
}

.item-popover-content {
    visibility: hidden;
    width: 300px;
    background-color: #1f1f1f;
    color: #eee;
    text-align: left;
    border-radius: 6px;
    padding: 12px;
    position: absolute;
    z-index: 9999;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    border: 1px solid #555;
    font-size: 12px;
    line-height: 1.4;
}

.item-popover-wrapper:hover .item-popover-content {
    visibility: visible;
    opacity: 1;
}

/* Panah Popover */
.item-popover-content::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
}

/* Popover ke BAWAH (Default) */
.pop-down .item-popover-content {
    top: 130%; 
    bottom: auto;
}
.pop-down .item-popover-content::after {
    bottom: 100%; 
    top: auto;
    border-color: transparent transparent #1f1f1f transparent;
}

/* Popover ke ATAS (Untuk baris bawah) */
.pop-up .item-popover-content {
    bottom: 130%; 
    top: auto;
}
.pop-up .item-popover-content::after {
    top: 100%; 
    bottom: auto;
    border-color: #1f1f1f transparent transparent transparent;
}

/*
--- FROM user_event_manage.php ---
*/
/* Tab Navigation Base */
        .nav-tabs { border-bottom: 1px solid #4FACE0; margin-bottom: 0; }
        .nav-tabs > li > a { 
            background-color: #333; 
            color: #ccc; 
            border: 1px solid #444 !important; 
            border-bottom: 1px solid #4FACE0 !important; 
            margin-right: 5px; 
            border-radius: 5px 5px 0 0; 
            transition: all 0.2s;
        }
        .nav-tabs > li > a:hover { background-color: #444; color: #fff; }
        .nav-tabs > li.active > a, 
        .nav-tabs > li.active > a:hover, 
        .nav-tabs > li.active > a:focus { 
            background-color: #2a2a2a; 
            color: #4FACE0; 
            border: 1px solid #4FACE0 !important; 
            border-bottom-color: #2a2a2a !important; 
            font-weight: bold; 
        }
        
        /* Main Tab Content Box */
        .tab-content { 
            background-color: #2a2a2a; 
            color: #eee; 
            border: 1px solid #4FACE0; 
            border-top: none; 
            border-radius: 0 0 8px 8px; 
            padding: 20px; 
            box-shadow: 0 4px 12px rgba(17, 17, 17, 0.8); 
        }
        
        /* Internal Tab Navigation (Nested) */
        .nav-tabs-internal {
            margin-bottom: 20px; 
            border-bottom: 1px solid #555;
        }
        .nav-tabs-internal > li > a {
            background-color: #3a3a3a;
            color: #ccc;
            border-color: #555 !important;
            border-bottom-color: #555 !important;
        }
        .nav-tabs-internal > li > a:hover {
            background-color: #444;
            color: #fff;
        }
        .nav-tabs-internal > li.active > a, 
        .nav-tabs-internal > li.active > a:hover, 
        .nav-tabs-internal > li.active > a:focus {
            background-color: transparent; /* Slightly lighter inner background */
            color: #4FACE0;
            border: 1px solid #555 !important;
            border-bottom-color: transparent !important; 
        }
        
        /* Internal Content Area */
        .tab-content-internal {
            background-color: transparent;
            border: 1px solid #555;
            padding: 20px;
            box-shadow: none;
            border-radius: 0 4px 4px 4px;
        }

        /* Countdown Timer */
        .event-countdown { 
            font-size: 1.2em; 
            font-weight: bold; 
            color: #ffc107; 
            text-align: center; 
            padding: 12px; 
            background-color: rgba(0,0,0,0.3); 
            border: 1px solid #ffc107; 
            border-radius: 4px;
            margin-bottom: 20px;
        }

        /* Layout & Typography */
        .event-container h3 { color: #4FACE0; border-bottom: 1px solid #555; padding-bottom: 10px; margin-top: 0;}
        .event-columns { display: flex; flex-wrap: wrap; gap: 20px; }
        .event-column { flex: 1; min-width: 300px; }
        .event-column h4 { color: #4FACE0; margin-top: 0; border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 15px;}
        
        /* Dark Tables */
        
        
        
        
        
        
        /* Reward Styling */
        .reward-showcase { display: flex; flex-direction: column; gap: 15px; }
        .reward-rank-group { background-color: #333; border: 1px solid #444; border-radius: 6px; overflow: hidden; }
        .rank-title { background-color: #222; color: #4FACE0; padding: 8px 12px; margin: 0; font-size: 1.1em; font-weight: bold; border-bottom: 1px solid #444; }
        .reward-item-list { list-style: none; padding: 0; margin: 0; }
        .reward-item { display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid #444; min-height: 50px; }
        .reward-item:last-child { border-bottom: none; }
        
        /* Popover & Icons */
        .sprite-icon-wrapper { margin-right: 10px; flex-shrink: 0; }
        .reward-text { font-size: 0.95em; line-height: 1.3; flex-grow: 1; color: #ccc; }
        .reward-text b { color: #fff; }
        .reward-icon-currency { font-size: 1.5em; margin-right: 15px; flex-shrink: 0; width: 32px; text-align: center; }
        


/* ==========================================================
   COUNCIL LIST STYLES
   ========================================================== */
/* Main Wrapper */
.council-page {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #eee;
}

/* Council Box Container */
.council-box {
    background-color: transparent;
    border: 1px solid #444;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(17, 17, 17, 0.8);
    margin-bottom: 20px;
    overflow: hidden;
    transition: transform 0.2s;
}
.council-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

/* Race Headers */
.race-header {
    padding: 10px;
    text-align: center;
    border-bottom: 2px solid rgba(0,0,0,0.2);
}
.race-header h3 {
    margin: 5px 0 0 0;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.race-header img {
    width: 40px !important;
    height: auto !important;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.3));
}

/* Race Specific Colors */
.header-bell { background: linear-gradient(135deg, #4a2a3a 0%, transparent 100%); border-top: 4px solid #ff69b4; }
.header-bell h3 { color: #ff69b4; }

.header-cora { background: linear-gradient(135deg, #3a2a4a 0%, transparent 100%); border-top: 4px solid #9370DB; }
.header-cora h3 { color: #9370DB; }

.header-acc { background: linear-gradient(135deg, #333 0%, transparent 100%); border-top: 4px solid #C0C0C0; }
.header-acc h3 { color: #C0C0C0; }

/* Table Layout Fixes */
.table-council {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
}
.table-council td {
    padding: 8px 4px;
    vertical-align: top;
    border: none;
    border-bottom: 1px solid #333;
}
.table-council tr:last-child td { border-bottom: none; }

/* Role Item Styling */
.role-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #1a1a1a;
    border-radius: 6px;
    border: 1px solid #333;
    min-height: 100px;
    margin: 3px;
    transition: background 0.2s;
}
.role-container:hover {
    background: #222;
    border-color: #555;
}

/* Role Images */
.role-icon-img {
    width: 30px; height: 30px;
    margin-bottom: 5px;
    opacity: 0.9;
}

/* Player Name */
.council-name {
    font-size: 0.95em;
    font-weight: bold;
    margin: 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.name-bell { color: #ffb6c1; }
.name-cora { color: #e6e6fa; }
.name-acc { color: #e0e0e0; }

/* Stats */
.council-stats {
    font-size: 0.85em;
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
}

/* Separator Line (Online/Offline Indicator) */
hr.status-line {
    margin: 6px auto;
    width: 50%;
    border: 0;
    height: 2px;
    border-radius: 2px;
    background-color: #555;
}
/* ==========================================================
   TOP PLAYERS & TOP POINTS STYLES
   ========================================================== */
.sub-header-row td {
    background: linear-gradient(to right, #333, transparent);
    color: #4FACE0;
    font-weight: bold;
    border-bottom: 2px solid #4FACE0;
    padding: 10px 15px;
}
.rank-trophy { font-size: 1.4em; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
.race-icon { width: 20px; height: 20px; vertical-align: middle; margin-right: 5px; display: inline-block; }
.user-censor { color: #888; letter-spacing: 1px; }

.emblemguild {
    width: 30px; 
    height: 30px; 
    position: relative;
    flex-shrink: 0;
    margin-right: 10px;
    border: 1px solid #444;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
}
.emblemguild img {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0; left: 0;
}
.emblemguild i, .emblemguild .rffont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    text-shadow: 0 0 2px black;
    z-index: 2;
}
.centered-nav-tabs-wrapper { text-align: center; margin-bottom: 10px; }
.centered-nav-tabs-wrapper > .nav-tabs { display: inline-block; border-bottom: none; }
.centered-nav-tabs-wrapper > .nav-tabs > li { float: none; display: inline-block; margin-bottom: 5px; }

/* ==========================================================
   CHIP WARS STYLES
   ========================================================== */
.cw-container {
    background-color: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.cw-container h3 {
    color: #4FACE0;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-top: 0;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.4em;
}
.cw-container h4 {
    color: #fff;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 1.1em;
    border-left: 3px solid #4FACE0;
    padding-left: 10px;
}
.live-status-panel {
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}
.live-header {
    color: #ffc107;
    font-weight: bold;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.2em;
    text-align: center;
}
.race-progress-label {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}
.progress {
    height: 20px;
    background-color: #111;
    border: 1px solid #333;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.progress-bar {
    height: 100%;
    transition: width 0.6s ease;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.bellato-bar { background-color: #ff69b4; }
.cora-bar { background-color: #9370DB; }
.accretia-bar { background-color: #C0C0C0; }

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    text-align: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #444;
}
.info-item {
    background: #222;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #333;
}
.charts-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 30px;
}
.chart-box {
    flex: 1;
    min-width: 300px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 15px;
    text-align: center;
}
.chart-title {
    font-weight: bold;
    margin-bottom: 15px;
    color: #ccc;
    text-transform: uppercase;
}
.clock-panel {
    background: #1a1a1a;
    border: 1px solid #444;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 4px;
}
.server-time {
    font-size: 24px;
    font-weight: bold;
    color: #ffc107;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
    margin-bottom: 5px;
}
.timers-grid {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
}
.timer-box {
    flex: 1;
    background: #222;
    border: 1px solid #333;
    padding: 10px;
    border-radius: 4px;
}
.timer-label { color: #ccc; font-size: 0.9em; margin-bottom: 5px; }
.timer-val { font-weight: bold; font-size: 1.1em; color: #fff; }

.cw-container .race-icon {
    width: 24px; height: 24px; display: inline-block;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    background-color: #ccc; 
    vertical-align: middle;
}
.icon-bell { background-color: #ff69b4; -webkit-mask-image: url("../../../images/rzr/new-bell.png"); mask-image: url("../../../images/rzr/new-bell.png"); }
.icon-cora { background-color: #9370DB; -webkit-mask-image: url("../../../images/rzr/new-cora.png"); mask-image: url("../../../images/rzr/new-cora.png"); }
.icon-acc { background-color: #C0C0C0; -webkit-mask-image: url("../../../images/rzr/new-acc.png"); mask-image: url("../../../images/rzr/new-acc.png"); }

/* ==========================================================
   GM ONLINE STYLES
   ========================================================== */
.gm-box { background-color: #252525; border: 1px solid #444; border-radius: 4px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.gm-box h3 { color: #4FACE0; border-bottom: 1px solid #444; padding-bottom: 10px; margin-top: 0; font-weight: bold; text-transform: uppercase; font-size: 1.4em; display: flex; justify-content: space-between; align-items: center; }
#update-timer { font-size: 11px; color: #888; text-transform: none; font-weight: normal; }
.gm-badge { padding: 4px 8px; border-radius: 4px; font-weight: bold; font-size: 10px; text-transform: uppercase; display: inline-block; min-width: 70px; }
.badge-online { background-color: #28a745; color: #fff; box-shadow: 0 0 8px rgba(40, 167, 69, 0.4); animation: pulse 2s infinite; }
.badge-offline { background-color: #dc3545; color: #fff; opacity: 0.6; }
.grade-badge { padding: 3px 6px; border-radius: 3px; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
.gm-box .race-icon { width: 28px; height: auto; vertical-align: middle; filter: drop-shadow(0px 0px 2px rgba(255,255,255,0.3)); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(40, 167, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } }
/* ==========================================================
   TOP PLAYERS & TOP POINTS STYLES
   ========================================================== */
.sub-header-row td {
    background: linear-gradient(to right, #333, transparent);
    color: #4FACE0;
    font-weight: bold;
    border-bottom: 2px solid #4FACE0;
    padding: 10px 15px;
}
.rank-trophy { font-size: 1.4em; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
.race-icon { width: 20px; height: 20px; vertical-align: middle; margin-right: 5px; display: inline-block; }
.user-censor { color: #888; letter-spacing: 1px; }

.emblemguild {
    width: 30px; 
    height: 30px; 
    position: relative;
    flex-shrink: 0;
    margin-right: 10px;
    border: 1px solid #444;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
}
.emblemguild img {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0; left: 0;
}
.emblemguild i, .emblemguild .rffont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    text-shadow: 0 0 2px black;
    z-index: 2;
}
.centered-nav-tabs-wrapper { text-align: center; margin-bottom: 10px; }
.centered-nav-tabs-wrapper > .nav-tabs { display: inline-block; border-bottom: none; }
.centered-nav-tabs-wrapper > .nav-tabs > li { float: none; display: inline-block; margin-bottom: 5px; }

/* ==========================================================
   CHIP WARS STYLES
   ========================================================== */
.cw-container {
    background-color: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.cw-container h3 {
    color: #4FACE0;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-top: 0;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.4em;
}
.cw-container h4 {
    color: #fff;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 1.1em;
    border-left: 3px solid #4FACE0;
    padding-left: 10px;
}
.live-status-panel {
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}
.live-header {
    color: #ffc107;
    font-weight: bold;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.2em;
    text-align: center;
}
.race-progress-label {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}
.progress {
    height: 20px;
    background-color: #111;
    border: 1px solid #333;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.progress-bar {
    height: 100%;
    transition: width 0.6s ease;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.bellato-bar { background-color: #ff69b4; }
.cora-bar { background-color: #9370DB; }
.accretia-bar { background-color: #C0C0C0; }

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    text-align: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #444;
}
.info-item {
    background: #222;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #333;
}
.charts-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 30px;
}
.chart-box {
    flex: 1;
    min-width: 300px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 15px;
    text-align: center;
}
.chart-title {
    font-weight: bold;
    margin-bottom: 15px;
    color: #ccc;
    text-transform: uppercase;
}
.clock-panel {
    background: #1a1a1a;
    border: 1px solid #444;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 4px;
}
.server-time {
    font-size: 24px;
    font-weight: bold;
    color: #ffc107;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
    margin-bottom: 5px;
}
.timers-grid {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
}
.timer-box {
    flex: 1;
    background: #222;
    border: 1px solid #333;
    padding: 10px;
    border-radius: 4px;
}
.timer-label { color: #ccc; font-size: 0.9em; margin-bottom: 5px; }
.timer-val { font-weight: bold; font-size: 1.1em; color: #fff; }

.cw-container .race-icon {
    width: 24px; height: 24px; display: inline-block;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    background-color: #ccc; 
    vertical-align: middle;
}
.icon-bell { background-color: #ff69b4; -webkit-mask-image: url("../../../images/rzr/new-bell.png"); mask-image: url("../../../images/rzr/new-bell.png"); }
.icon-cora { background-color: #9370DB; -webkit-mask-image: url("../../../images/rzr/new-cora.png"); mask-image: url("../../../images/rzr/new-cora.png"); }
.icon-acc { background-color: #C0C0C0; -webkit-mask-image: url("../../../images/rzr/new-acc.png"); mask-image: url("../../../images/rzr/new-acc.png"); }

/* ==========================================================
   GM ONLINE STYLES
   ========================================================== */
.gm-box { background-color: #252525; border: 1px solid #444; border-radius: 4px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.gm-box h3 { color: #4FACE0; border-bottom: 1px solid #444; padding-bottom: 10px; margin-top: 0; font-weight: bold; text-transform: uppercase; font-size: 1.4em; display: flex; justify-content: space-between; align-items: center; }
#update-timer { font-size: 11px; color: #888; text-transform: none; font-weight: normal; }
.gm-badge { padding: 4px 8px; border-radius: 4px; font-weight: bold; font-size: 10px; text-transform: uppercase; display: inline-block; min-width: 70px; }
.badge-online { background-color: #28a745; color: #fff; box-shadow: 0 0 8px rgba(40, 167, 69, 0.4); animation: pulse 2s infinite; }
.badge-offline { background-color: #dc3545; color: #fff; opacity: 0.6; }
.grade-badge { padding: 3px 6px; border-radius: 3px; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
.gm-box .race-icon { width: 28px; height: auto; vertical-align: middle; filter: drop-shadow(0px 0px 2px rgba(255,255,255,0.3)); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(40, 167, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } }
/* ==========================================================
   DISABLED FEATURE CARD
   ========================================================== */
.ai-disabled-card {
    text-align: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    margin-bottom: 25px;
}
.ai-disabled-card i {
    font-size: 50px;
    margin-bottom: 20px;
    display: block;
    color: #ffc107;
}
.ai-disabled-card h3 {
    color: #ffc107;
    border: none;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
}
.ai-disabled-card p {
    color: #ccc;
    margin-bottom: 5px;
}
.ai-disabled-card p.last-p {
    margin-bottom: 20px;
}
.ai-disabled-card .btn {
    background: #333;
    color: #fff;
    border: 1px solid #555;
    transition: all 0.2s ease;
background-color: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.cw-container h3 {
    color: #4FACE0;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-top: 0;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.4em;
}
.cw-container h4 {
    color: #fff;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 1.1em;
    border-left: 3px solid #4FACE0;
    padding-left: 10px;
}
.live-status-panel {
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}
.live-header {
    color: #ffc107;
    font-weight: bold;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.2em;
    text-align: center;
}
.race-progress-label {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}
.progress {
    height: 20px;
    background-color: #111;
    border: 1px solid #333;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.progress-bar {
    height: 100%;
    transition: width 0.6s ease;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.bellato-bar { background-color: #ff69b4; }
.cora-bar { background-color: #9370DB; }
.accretia-bar { background-color: #C0C0C0; }

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    text-align: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #444;
}
.info-item {
    background: #222;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #333;
}
.charts-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 30px;
}
.chart-box {
    flex: 1;
    min-width: 300px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 15px;
    text-align: center;
}
.chart-title {
    font-weight: bold;
    margin-bottom: 15px;
    color: #ccc;
    text-transform: uppercase;
}
.clock-panel {
    background: #1a1a1a;
    border: 1px solid #444;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 4px;
}
.server-time {
    font-size: 24px;
    font-weight: bold;
    color: #ffc107;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
    margin-bottom: 5px;
}
.timers-grid {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
}
.timer-box {
    flex: 1;
    background: #222;
    border: 1px solid #333;
    padding: 10px;
    border-radius: 4px;
}
.timer-label { color: #ccc; font-size: 0.9em; margin-bottom: 5px; }
.timer-val { font-weight: bold; font-size: 1.1em; color: #fff; }

.cw-container .race-icon {
    width: 24px; height: 24px; display: inline-block;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    background-color: #ccc; 
    vertical-align: middle;
}
.icon-bell { background-color: #ff69b4; -webkit-mask-image: url("../../../images/rzr/new-bell.png"); mask-image: url("../../../images/rzr/new-bell.png"); }
.icon-cora { background-color: #9370DB; -webkit-mask-image: url("../../../images/rzr/new-cora.png"); mask-image: url("../../../images/rzr/new-cora.png"); }
.icon-acc { background-color: #C0C0C0; -webkit-mask-image: url("../../../images/rzr/new-acc.png"); mask-image: url("../../../images/rzr/new-acc.png"); }

/* ==========================================================
   GM ONLINE STYLES
   ========================================================== */
.gm-box { background-color: #252525; border: 1px solid #444; border-radius: 4px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.gm-box h3 { color: #4FACE0; border-bottom: 1px solid #444; padding-bottom: 10px; margin-top: 0; font-weight: bold; text-transform: uppercase; font-size: 1.4em; display: flex; justify-content: space-between; align-items: center; }
#update-timer { font-size: 11px; color: #888; text-transform: none; font-weight: normal; }
.gm-badge { padding: 4px 8px; border-radius: 4px; font-weight: bold; font-size: 10px; text-transform: uppercase; display: inline-block; min-width: 70px; }
.badge-online { background-color: #28a745; color: #fff; box-shadow: 0 0 8px rgba(40, 167, 69, 0.4); animation: pulse 2s infinite; }
.badge-offline { background-color: #dc3545; color: #fff; opacity: 0.6; }
.grade-badge { padding: 3px 6px; border-radius: 3px; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
.gm-box .race-icon { width: 28px; height: auto; vertical-align: middle; filter: drop-shadow(0px 0px 2px rgba(255,255,255,0.3)); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(40, 167, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } }
/* ==========================================================
   DISABLED FEATURE CARD
   ========================================================== */
.ai-disabled-card {
    text-align: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    margin-bottom: 25px;
}
.ai-disabled-card i {
    font-size: 50px;
    margin-bottom: 20px;
    display: block;
    color: #ffc107;
}
.ai-disabled-card h3 {
    color: #ffc107;
    border: none;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
}
.ai-disabled-card p {
    color: #ccc;
    margin-bottom: 5px;
}
.ai-disabled-card p.last-p {
    margin-bottom: 20px;
}
.ai-disabled-card .btn {
    background: #333;
    color: #fff;
    border: 1px solid #555;
    transition: all 0.2s ease;
}
.ai-disabled-card .btn:hover {
    background: #444;
}

/* === PROFESSIONAL UI CSS (From Shops) === */
:root {
    --primary: #6C5CE7;
    --primary-dark: #5A4BD1;
    --primary-light: #A29BFE;
    --secondary: #00CEC9;
    --accent: #FD79A8;
    --bg-dark: #0a0e17;
    --bg-card: #151f2e; /* Slightly lighter for better contrast */
    --bg-card-hover: #1a2639;
    --bg-input: #1a2332;
    --text-primary: #E8EAF6;
    --text-secondary: #8892B0;
    --text-muted: #5A6A8A;
    --border-color: #2D3A4F; /* Much more visible border */
    --shadow: 0 4px 15px rgba(0,0,0,0.5); /* Stronger shadow */
    --shadow-hover: 0 8px 25px rgba(108,92,231,0.25);
    --radius: 16px;
    --radius-sm: 10px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --glow: 0 0 30px rgba(108,92,231,0.1);
}

/* ===== GLOBAL RESET ===== */
.shop-container * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.shop-container {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: transparent;
    color: var(--text-primary);
    padding: 20px;
    min-height: 600px;
}

/* ===== BALANCE CARD ===== */
.balance-card {
    background: linear-gradient(135deg, #111927 0%, #1a2332 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 24px 32px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.balance-card::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(108,92,231,0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.balance-card .balance-label {
    font-size: 14px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.balance-card .balance-amount {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #FDCB6E, #F39C12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.balance-card .balance-amount .currency {
    font-size: 18px;
    -webkit-text-fill-color: var(--text-secondary);
    color: var(--text-secondary);
    font-weight: 400;
}

.balance-card .balance-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(108,92,231,0.2), rgba(0,206,201,0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* ===== CATEGORY NAV ===== */
.category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    padding: 4px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.category-nav .cat-item {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: none;
    background: transparent;
}

.category-nav .cat-item:hover {
    color: var(--text-primary);
    background: rgba(108,92,231,0.08);
}

.category-nav .cat-item.active {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 4px 15px rgba(108,92,231,0.3);
}

.category-nav .cat-item .badge {
    background: rgba(255,255,255,0.1);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
}

.category-nav .cat-item.active .badge {
    background: rgba(255,255,255,0.2);
}

/* ===== TOOLBAR ===== */
.shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.shop-toolbar .toolbar-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.shop-toolbar select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: var(--transition);
    min-width: 140px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'12\' viewBox=\'0 0 12 12\'%3E%3Cpath fill=\'%238892B0\' d=\'M6 8L1 3h10z\'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.shop-toolbar select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108,92,231,0.15);
}

.shop-toolbar select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

.shop-toolbar .btn {
    padding: 8px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}

.shop-toolbar .btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 4px 15px rgba(108,92,231,0.25);
}

.shop-toolbar .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(108,92,231,0.35);
}

.shop-toolbar .btn-secondary {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
}

.shop-toolbar .btn-secondary:hover {
    background: var(--bg-card-hover);
}

/* ===== GRID ITEMS ===== */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* ===== ITEM CARD ===== */
.item-card {
    background: linear-gradient(145deg, var(--bg-card) 0%, #1a2639 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 20px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(17, 17, 17, 0.8);
}

.item-card:hover {
    transform: translateY(-4px);
    border-color: rgba(108,92,231,0.3);
    box-shadow: var(--shadow-hover), var(--glow);
}

.item-card .card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.item-card .card-badge.new {
    background: linear-gradient(135deg, #00CEC9, #00B894);
    color: #fff;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.item-card .card-image {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0;
    margin-bottom: 12px;
    background: rgba(0,0,0,0.2);
    border-radius: var(--radius-sm);
    min-height: 80px;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}

.item-card .card-image:hover {
    background: rgba(108,92,231,0.05);
}

.item-card .card-image img {
    max-width: 64px;
    height: auto;
    image-rendering: pixelated;
}

.item-card .card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-card .card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    margin: 8px 0 12px;
}

.item-card .card-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.item-card .card-meta .race {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.item-card .card-meta .race.bellato { background: rgba(255,153,51,0.15); color: #FF9933; }
.item-card .card-meta .race.cora { background: rgba(153,51,255,0.15); color: #9933FF; }
.item-card .card-meta .race.accretian { background: rgba(204,204,204,0.15); color: #CCCCCC; }
.item-card .card-meta .race.all { background: rgba(0,255,0,0.1); color: #00FF00; }

.item-card .card-upgrades {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin: 4px 0 8px;
}

.item-card .card-upgrades img {
    width: 16px;
    height: 16px;
}

.item-card .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.item-card .card-price {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #FDCB6E, #F39C12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.item-card .card-price .gc {
    font-size: 14px;
    -webkit-text-fill-color: var(--text-secondary);
    color: var(--text-secondary);
}

.item-card .btn-buy {
    padding: 8px 24px;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 4px 15px rgba(108,92,231,0.2);
}

.item-card .btn-buy:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(108,92,231,0.35);
}

.item-card .btn-buy:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.item-card .btn-buy:disabled:hover {
    transform: none;
    box-shadow: 0 4px 15px rgba(108,92,231,0.2);
}

/* ===== PAGINATION ===== */
.pagination-wrap {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.pagination-wrap .pagination {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    list-style: none;
}

.pagination-wrap .pagination a,
.pagination-wrap .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}

.pagination-wrap .pagination a:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    color: var(--text-primary);
}

.pagination-wrap .pagination .active span {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 15px rgba(108,92,231,0.25);
}

.pagination-wrap .pagination .disabled span {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== EMPTY STATE ===== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px dashed var(--border-color);
}

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

.empty-state h3 {
    color: var(--text-secondary);
    font-weight: 500;
}

/* ===== CONFIRMATION PAGE ===== */
.confirmation-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.confirmation-card .card-header {
    padding: 20px 24px;
    background: rgba(108,92,231,0.05);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

.confirmation-card .card-header h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.confirmation-card .card-body {
    padding: 24px;
}

.confirmation-card .item-preview {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: rgba(0,0,0,0.2);
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
}

.confirmation-card .item-preview .icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    border-radius: var(--radius-sm);
}

.confirmation-card .item-preview .info h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.confirmation-card .item-preview .info .sub {
    font-size: 13px;
    color: var(--text-secondary);
}

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

.confirmation-table th,
.confirmation-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.confirmation-table th {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0,0,0,0.15);
}

.confirmation-table tr:last-child td {
    border-bottom: none;
}

.confirmation-table .highlight {
    color: #FDCB6E;
    font-weight: 700;
}

.confirmation-table .total-row td {
    background: rgba(108,92,231,0.05);
    font-weight: 600;
}

.confirmation-table select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    color: var(--text-primary);
    outline: none;
    min-width: 80px;
}

.confirmation-table select:focus {
    border-color: var(--primary);
}

.confirmation-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.confirmation-actions .btn {
    padding: 10px 32px;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.confirmation-actions .btn-success {
    background: linear-gradient(135deg, #00B894, #00A381);
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,184,148,0.25);
}

.confirmation-actions .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,184,148,0.35);
}

.confirmation-actions .btn-danger {
    background: linear-gradient(135deg, #E17055, #D63031);
    color: #fff;
    box-shadow: 0 4px 15px rgba(225,112,85,0.25);
}

.confirmation-actions .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(225,112,85,0.35);
}

/* ===== ALERTS ===== */
.alert {
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
    display: block;
}

.alert-success {
    background: rgba(0,184,148,0.1);
    border: 1px solid rgba(0,184,148,0.2);
    color: #55EFC4;
}

.alert-danger {
    background: rgba(225,112,85,0.1);
    border: 1px solid rgba(225,112,85,0.2);
    color: #FD7272;
}

.alert-warning {
    background: rgba(253,203,110,0.1);
    border: 1px solid rgba(253,203,110,0.2);
    color: #FDCB6E;
}

.alert-info {
    background: rgba(108,92,231,0.08);
    border: 1px solid rgba(108,92,231,0.15);
    color: var(--primary-light);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .shop-container {
        padding: 12px;
    }
    
    .balance-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .balance-card .balance-amount {
        font-size: 28px;
    }
    
    .shop-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
    }
    
    .shop-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .shop-toolbar .toolbar-group {
        justify-content: center;
    }
    
    .category-nav {
        justify-content: center;
    }
    
    .category-nav .cat-item {
        padding: 8px 14px;
        font-size: 12px;
    }
    
    .confirmation-card .item-preview {
        flex-direction: column;
        text-align: center;
    }
    
    .confirmation-actions {
        flex-direction: column;
    }
    
    .confirmation-actions .btn {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .shop-grid {
        grid-template-columns: 1fr;
    }
    
    .shop-toolbar .toolbar-group {
        flex-direction: column;
        width: 100%;
    }
    
    .shop-toolbar select {
        width: 100%;
    }
}

/* ==========================================================
   AI NAV TABS (Dark Theme)
   ========================================================== */
.ai-nav-tabs {
    border-bottom: 1px solid var(--border-color, #444);
    margin-bottom: 20px;
}
.ai-nav-tabs > li > a {
    background-color: var(--bg-card, #1a1a1a);
    color: var(--text-muted, #aaa);
    border: 1px solid var(--border-color, #333);
    border-bottom-color: var(--border-color, #444);
    margin-right: 2px;
    border-radius: var(--radius, 6px) var(--radius, 6px) 0 0;
    font-weight: 500;
}
.ai-nav-tabs > li > a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: var(--border-color, #444);
}
.ai-nav-tabs > li.active > a, 
.ai-nav-tabs > li.active > a:hover, 
.ai-nav-tabs > li.active > a:focus {
    background: var(--primary, #4FACE0);
    color: #fff;
    border: 1px solid var(--primary, #4FACE0);
    border-bottom-color: var(--primary, #4FACE0);
}

.ai-nav-pills {
    margin-bottom: 20px;
}
.ai-nav-pills > li > a {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ccc;
    border: 1px solid var(--border-color, #444);
    border-radius: var(--radius, 6px);
    margin-right: 5px;
}
.ai-nav-pills > li.active > a,
.ai-nav-pills > li.active > a:hover,
.ai-nav-pills > li.active > a:focus {
    background-color: var(--success, #28a745);
    color: #fff;
    border-color: var(--success, #28a745);
}

/* ==========================================================
   AJAX CHECKER & BADGES
   ========================================================== */
.status-icon { position: absolute; right: 10px; top: 10px; font-size: 16px; display: none; }
.status-msg { display: block; font-size: 11px; margin-top: 4px; }
.text-success { color: #00c853; }
.text-danger { color: #ff5252; }

.badge-sirin { background-color: #9c27b0; color: white; padding: 3px 8px; border-radius: 4px; font-size: 10px; vertical-align: middle; }
.badge-default { background-color: #2196f3; color: white; padding: 3px 8px; border-radius: 4px; font-size: 10px; vertical-align: middle; }

/* ============================================
   GLOBAL MODERN DARK THEME (Migrated from Logs)
   ============================================ */
:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #0d0d0d;
    --bg-card: #111;
    --bg-card-hover: #141414;
    --border-color: #222;
    --border-hover: #333;
    --text-primary: #eee;
    --text-secondary: #888;
    --text-muted: #666;
    --accent-color: #fbbf24;
    --accent-hover: #f59e0b;
    --success-color: #4ade80;
    --danger-color: #f87171;
    --info-color: #60a5fa;
    --font-family: 'Inter', 'Segoe UI', sans-serif;
}

body {
    background: var(--bg-primary) !important;
    font-family: var(--font-family) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   UNIFIED CARDS & PANELS
   ============================================ */
/* Map standard bootstrap/gamecp components to the new design */
.panel, .well, .admin-box, .dark-tab-content, .tab-content, .modal-content, .ref-card, .logs-card, .sp-neon-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: none !important; /* Overriding previous glass box shadow */
}

.panel:hover, .ref-card:hover, .logs-card:hover {
    border-color: var(--border-hover) !important;
}

.panel-heading, .ref-card-header, .logs-card-header {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    padding: 14px 20px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--border-color) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 0 !important;
}


.panel-heading i, .ref-card-header i, .logs-card-header i {
    color: var(--accent-color);
}

.panel-body, .ref-card-body, .logs-card-body {
    padding: 20px !important;
}

.panel-footer, .ref-card-footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 15px 20px !important;
    border-radius: 0 !important;
}

/* ============================================
   TABLES
   ============================================ */
.table, .logs-table, .table-dark-custom {
    width: 100% !important;
    background: var(--bg-secondary) !important;
    border-collapse: collapse !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    margin-bottom: 0 !important;
}

.table > thead > tr > th, .logs-table thead th {
    background: var(--bg-primary) !important;
    color: var(--text-muted) !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid var(--border-color) !important;
    border-top: none !important;
    text-align: left !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.table > tbody > tr > td, .logs-table tbody td {
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-top: none !important;
    vertical-align: middle !important;
}

.table > tbody > tr:hover, .logs-table tbody tr:hover {
    background: var(--bg-card-hover) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(255,255,255,0.02) !important;
}

/* ============================================
   FORM CONTROLS
   ============================================ */
.form-control, .logs-form-control {
    width: 100%;
    padding: 10px 14px !important;
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    font-family: var(--font-family) !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    height: auto !important;
}

.form-control:focus, .logs-form-control:focus {
    outline: none !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.08) !important;
}

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

/* ============================================
   INFO BOXES & ALERTS
   ============================================ */
.logs-info-box, .stat-box {
    background: rgba(251, 191, 36, 0.05) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
    border-left: 4px solid var(--accent-color) !important;
    padding: 15px 20px !important;
    margin-bottom: 20px !important;
    border-radius: 4px !important;
}

.logs-info-box h4, .stat-box .stat-label {
    margin: 0 0 4px 0 !important;
    color: var(--accent-color) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.logs-info-box p, .stat-box .stat-value {
    margin: 0 !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
}

/* Alerts */
.alert, .logs-alert {
    padding: 14px 20px !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none !important;
    border-left: 4px solid !important;
}

.alert-success, .logs-alert-success {
    background: rgba(34, 197, 94, 0.08) !important;
    color: var(--success-color) !important;
    border-color: #22c55e !important;
}

.alert-danger, .logs-alert-danger {
    background: rgba(239, 68, 68, 0.08) !important;
    color: var(--danger-color) !important;
    border-color: #ef4444 !important;
}

.alert-warning, .logs-alert-warning {
    background: rgba(251, 191, 36, 0.08) !important;
    color: var(--accent-color) !important;
    border-color: #f59e0b !important;
}

.alert-info, .logs-alert-info {
    background: rgba(59, 130, 246, 0.08) !important;
    color: var(--info-color) !important;
    border-color: #3b82f6 !important;
}

/* ============================================
   TABS
   ============================================ */
.logs-tabs, .nav-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    background: var(--bg-primary) !important;
    border-radius: 10px !important;
    padding: 4px !important;
    margin-bottom: 16px !important;
    border: 1px solid var(--border-color) !important;
}

.logs-tab, .nav-tabs > li > a {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    border: none !important;
    background: transparent !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-right: 0 !important;
}

.logs-tab:hover, .nav-tabs > li > a:hover {
    color: var(--text-primary) !important;
    background: var(--bg-card-hover) !important;
    border: none !important;
}

.logs-tab.active, .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    background: rgba(251, 191, 36, 0.15) !important;
    color: var(--accent-color) !important;
    border: none !important;
}

/* ============================================
   GLOBAL BUTTONS (MODERN YELLOW/RED THEME)
   ============================================ */
.btn {
    padding: 6px 12px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
    border: none;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    display: inline-block;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-size: 12px;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Cyber-Obsidian Button Palette (Replaced Forced-Yellow) */
.btn-primary {
    background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
    border: none !important;
    color: #0b1120 !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.35) !important;
    transition: all 0.25s ease !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #38bdf8, #7dd3fc) !important;
    color: #0b1120 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 22px rgba(56, 189, 248, 0.55) !important;
}

.btn-success {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35) !important;
    transition: all 0.25s ease !important;
}
.btn-success:hover {
    background: linear-gradient(135deg, #10b981, #34d399) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 22px rgba(16, 185, 129, 0.55) !important;
}

.btn-warning {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    border: none !important;
    color: #0b1120 !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35) !important;
    transition: all 0.25s ease !important;
}
.btn-warning:hover {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
    color: #0b1120 !important;
    transform: translateY(-2px) !important;
}

.btn-info {
    background: linear-gradient(135deg, #6366f1, #818cf8) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35) !important;
    transition: all 0.25s ease !important;
}
.btn-info:hover {
    background: linear-gradient(135deg, #818cf8, #a5b4fc) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

.btn-default {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
}
.btn-default:hover {
    background: rgba(51, 65, 85, 0.9) !important;
    color: #ffffff !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
}

/* Red Model for Wipe / Delete */
.btn-danger {
    background-color: var(--danger-color) !important; /* Red */
    color: #fff !important; /* White text */
}

.btn-danger:hover {
    background-color: #dc2626 !important; /* Darker Red */
    color: #fff !important;
}

/* Make sure disabled buttons look disabled */
.btn:disabled, .btn[disabled] {
    background-color: #333 !important;
    color: #777 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-sm, .btn-xs {
    padding: 6px 12px !important;
    font-size: 11px !important;
}

.btn-lg {
    padding: 14px 28px !important;
    font-size: 15px !important;
}


/* Fix for long dropdown menus */
.dropdown-menu {
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Custom transparent scrollbar for dropdown */
.dropdown-menu::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}

.dropdown-menu::-webkit-scrollbar-track {
    background-color: transparent;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
}



/* === REFERRAL CODE CSS === */
/* ============================================
   REFERRAL PAGE - GOLD & DARK TRANSPARENT
   ============================================ */
.ref-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #f5e6c8;
    padding: 20px;
    min-height: 100vh;
}

/* ============================================
   REFERRAL CARD
   ============================================ */
.ref-card {
    background: rgba(17, 17, 17, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(184, 142, 47, 0.25);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    margin-bottom: 24px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ref-card:hover {
    border-color: rgba(184, 142, 47, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 40px rgba(212, 168, 67, 0.05);
}

/* ============================================
   REFERRAL CARD HEADER
   ============================================ */
.ref-card-header {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.7));
    padding: 16px 24px;
    border-bottom: 1px solid rgba(184, 142, 47, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.ref-card-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #f0d080;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ref-card-header h3 i {
    color: #d4a843;
    font-size: 18px;
}

.ref-card-header .badge-status {
    font-size: 11px;
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-status.success {
    background: rgba(212, 168, 67, 0.15);
    color: #f0d080;
    border: 1px solid rgba(212, 168, 67, 0.3);
}

.badge-status.warning {
    background: rgba(184, 142, 47, 0.15);
    color: #d4a843;
    border: 1px solid rgba(184, 142, 47, 0.3);
}

.badge-status.gold {
    background: rgba(212, 168, 67, 0.2);
    color: #f0d080;
    border: 1px solid rgba(212, 168, 67, 0.3);
}

/* ============================================
   REFERRAL CARD BODY
   ============================================ */
.ref-card-body {
    padding: 24px;
}

/* ============================================
   REFERRAL CARD FOOTER
   ============================================ */
.ref-card-footer {
    background: rgba(10, 10, 10, 0.5);
    padding: 16px 24px;
    border-top: 1px solid rgba(184, 142, 47, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* ============================================
   STAT GRID - 3 KOLOM RAPI
   ============================================ */
.ref-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.ref-stat-item {
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(184, 142, 47, 0.2);
    border-radius: 10px;
    padding: 18px 20px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.ref-stat-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(135deg, #d4a843, #b8922f, #c9a03a);
    border-radius: 10px 10px 0 0;
}

.ref-stat-item:hover {
    transform: translateY(-2px);
    border-color: rgba(184, 142, 47, 0.5);
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.8), 0 0 30px rgba(212, 168, 67, 0.03);
}

.ref-stat-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8a7a5a;
    margin-bottom: 4px;
}

.ref-stat-label i {
    margin-right: 4px;
    color: #d4a843;
}

.ref-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #f5e6c8;
}

.ref-stat-value.gold-text { color: #f0d080; }
.ref-stat-value.green-text { color: #34d399; }
.ref-stat-value.blue-text { color: #60a5fa; }
.ref-stat-value.yellow-text { color: #fbbf24; }
.ref-stat-value.purple-text { color: #a78bfa; }
.ref-stat-value.light-text { color: #f5e6c8; }

.ref-stat-sub {
    font-size: 11px;
    color: #8a7a5a;
    margin-top: 2px;
}

/* ============================================
   DIVIDER
   ============================================ */
.ref-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(184, 142, 47, 0.3), transparent);
    margin: 16px 0 20px 0;
}

/* ============================================
   BONUS SECTION - TATA LETAK RAPI
   ============================================ */
.ref-bonus-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding: 14px 20px;
    background: rgba(10, 10, 10, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(184, 142, 47, 0.1);
}

.ref-bonus-section .bonus-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8a7a5a;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ref-bonus-section .bonus-label i {
    color: #d4a843;
}

.ref-bonus-section .bonus-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.ref-bonus-section .bonus-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #f0d080;
    font-size: 13px;
    font-weight: 500;
    background: rgba(212, 168, 67, 0.08);
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid rgba(212, 168, 67, 0.1);
}

.ref-bonus-section .bonus-item .qty {
    color: #f5e6c8;
    font-weight: 600;
    font-size: 12px;
}

.ref-bonus-section .bonus-empty {
    color: #8a7a5a;
    font-size: 13px;
}

/* ============================================
   ALERTS
   ============================================ */
.ref-alert {
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    margin-bottom: 14px;
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ref-alert i {
    font-size: 16px;
    margin-top: 1px;
}

.ref-alert.alert-success {
    border-color: rgba(212, 168, 67, 0.3);
    color: #f0d080;
}
.ref-alert.alert-success i { color: #d4a843; }

.ref-alert.alert-warning {
    border-color: rgba(184, 142, 47, 0.3);
    color: #d4a843;
}
.ref-alert.alert-warning i { color: #d4a843; }

.ref-alert.alert-danger {
    border-color: rgba(184, 142, 47, 0.2);
    color: #c4a060;
}
.ref-alert.alert-danger i { color: #c4a060; }

.ref-alert.alert-info {
    border-color: rgba(212, 168, 67, 0.2);
    color: #c4a87a;
}
.ref-alert.alert-info i { color: #d4a843; }

/* ============================================
   BUTTONS
   ============================================ */
.ref-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.ref-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ref-btn:hover::after {
    background: rgba(255, 255, 255, 0.05);
}

.ref-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ref-btn.btn-success {
    background: linear-gradient(135deg, #d4a843, #b8922f);
    color: #0a0806;
    box-shadow: 0 4px 20px rgba(212, 168, 67, 0.2);
}

.ref-btn.btn-success:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(212, 168, 67, 0.3);
}

.ref-btn.btn-danger {
    background: rgba(184, 142, 47, 0.1);
    border: 1px solid rgba(184, 142, 47, 0.2);
    color: #8a7a5a;
}

.ref-btn.btn-danger:hover:not(:disabled) {
    border-color: #d4a843;
    color: #f0d080;
}

.ref-btn.btn-warning {
    background: rgba(184, 142, 47, 0.1);
    border: 1px solid rgba(184, 142, 47, 0.2);
    color: #d4a843;
}

.ref-btn.btn-sm {
    padding: 6px 14px;
    font-size: 11px;
}

/* ============================================
   FORM CONTROLS
   ============================================ */
.ref-form-group {
    margin-bottom: 16px;
}

.ref-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #c4a87a;
    margin-bottom: 4px;
}

.ref-form-group label i {
    color: #d4a843;
    margin-right: 6px;
}

.ref-form-control {
    width: 100%;
    padding: 10px 14px;
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(184, 142, 47, 0.25);
    border-radius: 10px;
    color: #f5e6c8;
    font-size: 13px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.ref-form-control::placeholder {
    color: #8a7a5a;
}

.ref-form-control:focus {
    border-color: #d4a843;
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.1), 0 0 30px rgba(212, 168, 67, 0.03);
}

/* ============================================
   TABLES
   ============================================ */
.ref-table-wrap {
    overflow-x: auto;
}

.ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ref-table th {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 2px solid rgba(184, 142, 47, 0.2);
    color: #8a7a5a;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.8px;
    background: rgba(10, 10, 10, 0.2);
}

.ref-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(184, 142, 47, 0.08);
    color: #f5e6c8;
}

.ref-table tr:hover td {
    background: rgba(10, 10, 10, 0.2);
}

.ref-table .rank-gold { color: #FFD700; font-weight: 700; }
.ref-table .rank-silver { color: #C0C0C0; font-weight: 700; }
.ref-table .rank-bronze { color: #CD7F32; font-weight: 700; }

/* ============================================
   MODAL
   ============================================ */
.ref-modal .modal-content {
    background: rgba(17, 17, 17, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(184, 142, 47, 0.25);
    border-radius: 12px;
    color: #f5e6c8;
}

.ref-modal .modal-header {
    border-bottom: 1px solid rgba(184, 142, 47, 0.25);
    padding: 16px 20px;
    background: rgba(10, 10, 10, 0.3);
}

.ref-modal .modal-header h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #f0d080;
}

.ref-modal .modal-header h4 i {
    color: #d4a843;
    margin-right: 8px;
}

.ref-modal .modal-header .close {
    color: #8a7a5a;
    opacity: 0.7;
    font-size: 24px;
}

.ref-modal .modal-header .close:hover {
    color: #d4a843;
    opacity: 1;
}

.ref-modal .modal-body {
    padding: 20px;
}

.ref-modal .modal-footer {
    border-top: 1px solid rgba(184, 142, 47, 0.25);
    padding: 14px 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    background: rgba(10, 10, 10, 0.3);
}

/* ============================================
   CONFIRMATION TABLE
   ============================================ */
.ref-confirm-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}

.ref-confirm-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(184, 142, 47, 0.15);
}

.ref-confirm-table tr:last-child td {
    border-bottom: none;
}

.ref-confirm-table .label-cell {
    color: #8a7a5a;
    font-size: 12px;
    width: 40%;
}

.ref-confirm-table .value-cell {
    font-weight: 500;
    text-align: right;
}

.ref-confirm-table .value-cell.amount {
    font-size: 18px;
    color: #f0d080;
}

.ref-confirm-table .value-cell.fee {
    color: #c4a060;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 992px) {
    .ref-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ref-page {
        padding: 12px;
    }
    
    .ref-stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .ref-stat-value {
        font-size: 18px;
    }
    
    .ref-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ref-card-footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    .ref-card-footer .ref-btn {
        width: 100%;
        justify-content: center;
    }
    
    .ref-bonus-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .ref-stat-grid {
        grid-template-columns: 1fr;
    }
    
    .ref-stat-value {
        font-size: 20px;
    }
}

/* === REFERRAL CODE INLINE CLASSES === */
.ref-inline-img { width: 100%; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
.ref-inline-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); padding: 20px; border-radius: 0 0 8px 8px; }
.ref-inline-title { margin: 0; color: #f0d080; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
.ref-inline-subtitle { margin: 5px 0 0 0; color: #f5e6c8; font-size: 14px; }
.ref-inline-mb25 { margin-bottom: 25px; }
.ref-inline-mb15 { margin-bottom: 15px; }
.ref-inline-c4a { color: #c4a87a; }
.ref-inline-fs18 { font-size: 18px; }
.ref-inline-gold { color: #f0d080; }
.ref-inline-codebox { background: rgba(10, 10, 10, 0.4); padding: 12px 16px; border-radius: 8px; border: 1px dashed rgba(184, 142, 47, 0.4); display: flex; justify-content: space-between; align-items: center; }
.ref-inline-codetext { font-family: monospace; font-size: 20px; font-weight: bold; color: #f5e6c8; letter-spacing: 2px; }
.ref-inline-nodecor { text-decoration: none; }
.ref-inline-linkbox { background: rgba(10, 10, 10, 0.4); padding: 12px 16px; border-radius: 8px; border: 1px solid rgba(184, 142, 47, 0.25); display: flex; justify-content: space-between; align-items: center; }
.ref-inline-linktext { font-size: 14px; color: #f5e6c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 15px; }
.ref-inline-hr { border-color: rgba(184, 142, 47, 0.25); margin: 25px 0; }
.ref-inline-center-mt15 { text-align: center; margin-top: 15px; }
.ref-inline-c4a-sm { color: #c4a87a; font-size: 13px; }
.ref-inline-gold-mb20 { color: #f0d080; margin-bottom: 20px; }
.ref-inline-panel { background: rgba(10, 10, 10, 0.4); padding: 20px; border-radius: 8px; border: 1px solid rgba(184, 142, 47, 0.25); }
.ref-inline-fw-gold { font-weight: bold; color: #f5e6c8; margin-bottom: 5px; }
.ref-inline-m0-c4a-sm { margin: 0; color: #c4a87a; font-size: 13px; }
.ref-inline-m0-fw-gold { margin: 0; color: #f5e6c8; font-weight: bold; }
.ref-inline-fs12-gray { font-size: 12px; color: #8a7a5a; }
.ref-inline-mb30 { margin-bottom: 30px; }
.ref-inline-fs32 { font-size: 32px; }
.ref-inline-right { text-align: right; }


/* === REFERRAL DETAIL CSS === */
/* ============================================
   REFERRAL DETAIL PAGE
   ============================================ */
.ref-detail-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #f5e6c8;
    padding: 20px;
    min-height: 100vh;
}

/* ============================================
   BACK BUTTON
   ============================================ */
.ref-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(184, 142, 47, 0.25);
    border-radius: 8px;
    color: #c4a87a;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 20px;
}

.ref-back-btn:hover {
    border-color: #d4a843;
    color: #f0d080;
    text-decoration: none;
    transform: translateX(-2px);
}

/* ============================================
   REFERRAL CARD
   ============================================ */
.ref-card {
    background: rgba(17, 17, 17, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(184, 142, 47, 0.25);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    margin-bottom: 24px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ref-card:hover {
    border-color: rgba(184, 142, 47, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 40px rgba(212, 168, 67, 0.05);
}

/* ============================================
   REFERRAL CARD HEADER
   ============================================ */
.ref-card-header {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.7));
    padding: 16px 24px;
    border-bottom: 1px solid rgba(184, 142, 47, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.ref-card-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #f0d080;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ref-card-header h3 i {
    color: #d4a843;
    font-size: 18px;
}

.ref-card-header .badge-tier {
    font-size: 11px;
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(212, 168, 67, 0.2);
    color: #f0d080;
    border: 1px solid rgba(212, 168, 67, 0.3);
}

/* ============================================
   REFERRAL CARD BODY
   ============================================ */
.ref-card-body {
    padding: 24px;
}

/* ============================================
   STAT GRID - 3 KOLOM
   ============================================ */
.ref-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.ref-stat-item {
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(184, 142, 47, 0.2);
    border-radius: 10px;
    padding: 18px 20px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.ref-stat-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(135deg, #d4a843, #b8922f, #c9a03a);
    border-radius: 10px 10px 0 0;
}

.ref-stat-item:hover {
    transform: translateY(-2px);
    border-color: rgba(184, 142, 47, 0.5);
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.8), 0 0 30px rgba(212, 168, 67, 0.03);
}

.ref-stat-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8a7a5a;
    margin-bottom: 4px;
}

.ref-stat-label i {
    margin-right: 4px;
    color: #d4a843;
}

.ref-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #f5e6c8;
}

.ref-stat-value.gold-text { color: #f0d080; }
.ref-stat-value.blue-text { color: #60a5fa; }
.ref-stat-value.green-text { color: #34d399; }
.ref-stat-value.yellow-text { color: #fbbf24; }

.ref-stat-sub {
    font-size: 11px;
    color: #8a7a5a;
    margin-top: 2px;
}

/* ============================================
   CODE DISPLAY WITH COPY
   ============================================ */
.ref-code-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 10, 10, 0.4);
    padding: 4px 12px 4px 16px;
    border-radius: 8px;
    border: 1px solid rgba(184, 142, 47, 0.2);
}

.ref-code-text {
    font-size: 22px;
    font-weight: 700;
    color: #60a5fa;
    letter-spacing: 1px;
}

.ref-copy-btn {
    cursor: pointer;
    background: rgba(212, 168, 67, 0.15);
    border: 1px solid rgba(184, 142, 47, 0.25);
    color: #c4a87a;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ref-copy-btn:hover {
    background: rgba(212, 168, 67, 0.25);
    border-color: #d4a843;
    color: #f0d080;
}

.ref-copy-btn.copied {
    background: rgba(52, 211, 153, 0.2);
    border-color: #34d399;
    color: #34d399;
}

/* ============================================
   SECTION TITLE
   ============================================ */
.ref-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #f0d080;
    margin: 24px 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(184, 142, 47, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ref-section-title i {
    color: #d4a843;
}

.ref-section-sub {
    color: #8a7a5a;
    font-size: 12px;
    margin-bottom: 12px;
}

/* ============================================
   TABLES
   ============================================ */
.ref-table-wrap {
    overflow-x: auto;
}

.ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ref-table th {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 2px solid rgba(184, 142, 47, 0.2);
    color: #8a7a5a;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.8px;
    background: rgba(10, 10, 10, 0.2);
}

.ref-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(184, 142, 47, 0.08);
    color: #f5e6c8;
}

.ref-table tr:hover td {
    background: rgba(10, 10, 10, 0.2);
}

/* ============================================
   LABEL / BADGE
   ============================================ */
.ref-label {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ref-label.success {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.2);
}

.ref-label.info {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.ref-label.warning {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.ref-label.danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.ref-label.default {
    background: rgba(138, 122, 90, 0.15);
    color: #8a7a5a;
    border: 1px solid rgba(138, 122, 90, 0.2);
}

/* ============================================
   CHART CONTAINER
   ============================================ */
.ref-chart-container {
    background: rgba(10, 10, 10, 0.3);
    padding: 16px;
    border-radius: 10px;
    border: 1px solid rgba(184, 142, 47, 0.1);
    margin-top: 4px;
}

.ref-chart-container .chart-title {
    color: #8a7a5a;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
}

.ref-chart-container .chart-wrap {
    position: relative;
    height: 280px;
    width: 100%;
}

/* ============================================
   ALERT
   ============================================ */
.ref-alert {
    padding: 14px 20px;
    border-radius: 10px;
    border: 1px solid rgba(184, 142, 47, 0.2);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #c4a060;
}

.ref-alert i {
    font-size: 16px;
    color: #d4a843;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 992px) {
    .ref-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ref-detail-page {
        padding: 12px;
    }
    
    .ref-stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .ref-stat-value {
        font-size: 18px;
    }
    
    .ref-code-text {
        font-size: 18px;
    }
    
    .ref-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ref-chart-container .chart-wrap {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .ref-stat-grid {
        grid-template-columns: 1fr;
    }
    
    .ref-stat-value {
        font-size: 20px;
    }
    
    .ref-code-wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* === REFERRAL DETAIL INLINE CLASSES === */
.ref-inline-mb20 { margin-bottom: 20px; }
.ref-inline-mt15 { margin-top: 15px; }
.ref-inline-center-mt25 { text-align: center; margin-top: 25px; }

/* === WALLET DASHBOARD CSS === */
/* ============================================
   WALLET PAGE WRAPPER - TIDAK MERUBAH CSS LAIN
   ============================================ */
.wallet-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #f5e6c8;
    padding: 20px;
    min-height: 100vh;
}

/* ============================================
   WALLET CARD - GOLD & DARK TRANSPARENT
   ============================================ */
.wallet-card {
    background: rgba(17, 17, 17, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(184, 142, 47, 0.25);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    margin-bottom: 24px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wallet-card:hover {
    border-color: rgba(184, 142, 47, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 40px rgba(212, 168, 67, 0.05);
}

/* ============================================
   WALLET CARD HEADER
   ============================================ */
.wallet-card-header {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.7));
    padding: 18px 24px;
    border-bottom: 1px solid rgba(184, 142, 47, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.wallet-card-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #f0d080;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wallet-card-header h3 i {
    color: #d4a843;
    font-size: 20px;
}

.wallet-card-header .badge-status {
    font-size: 11px;
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-status.success {
    background: rgba(212, 168, 67, 0.15);
    color: #f0d080;
    border: 1px solid rgba(212, 168, 67, 0.3);
}

.badge-status.warning {
    background: rgba(184, 142, 47, 0.15);
    color: #d4a843;
    border: 1px solid rgba(184, 142, 47, 0.3);
}

.badge-status.danger {
    background: rgba(184, 142, 47, 0.1);
    color: #c4a060;
    border: 1px solid rgba(184, 142, 47, 0.2);
}

/* ============================================
   WALLET CARD BODY
   ============================================ */
.wallet-card-body {
    padding: 24px;
}

/* ============================================
   WALLET CARD FOOTER
   ============================================ */
.wallet-card-footer {
    background: rgba(10, 10, 10, 0.5);
    padding: 16px 24px;
    border-top: 1px solid rgba(184, 142, 47, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* ============================================
   STAT GRID - WALLET DASHBOARD
   ============================================ */
.wallet-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.wallet-stat-item {
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(184, 142, 47, 0.25);
    border-radius: 12px;
    padding: 20px 24px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.wallet-stat-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(135deg, #d4a843, #b8922f, #c9a03a);
    border-radius: 12px 12px 0 0;
}

.wallet-stat-item:hover {
    transform: translateY(-2px);
    border-color: rgba(184, 142, 47, 0.5);
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.8), 0 0 30px rgba(212, 168, 67, 0.03);
}

.wallet-stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8a7a5a;
    margin-bottom: 6px;
}

.wallet-stat-label i {
    margin-right: 4px;
    color: #d4a843;
}

.wallet-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #f5e6c8;
}

.wallet-stat-value.gold-text { 
    color: #f0d080;
}

.wallet-stat-value.light-text { 
    color: #f5e6c8; 
}

.wallet-stat-sub {
    font-size: 12px;
    color: #8a7a5a;
    margin-top: 4px;
}

/* ============================================
   BANK DETAILS - WALLET DASHBOARD
   ============================================ */
.wallet-bank-section {
    margin-top: 8px;
    background: rgba(10, 10, 10, 0.3);
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid rgba(184, 142, 47, 0.25);
}

.wallet-bank-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(184, 142, 47, 0.25);
}

.wallet-bank-title i {
    color: #d4a843;
    font-size: 18px;
}

.wallet-bank-title span {
    font-size: 13px;
    font-weight: 600;
    color: #d4a843;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.wallet-bank-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.wallet-bank-item {
    background: rgba(10, 10, 10, 0.4);
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid rgba(184, 142, 47, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wallet-bank-item:hover {
    border-color: rgba(184, 142, 47, 0.3);
    background: rgba(10, 10, 10, 0.6);
}

.wallet-bank-item .bank-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8a7a5a;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.wallet-bank-item .bank-value {
    font-size: 14px;
    font-weight: 500;
    color: #f5e6c8;
    word-break: break-all;
}

.wallet-bank-item .bank-value.gold {
    color: #f0d080;
}

/* ============================================
   ALERTS - WALLET DASHBOARD
   ============================================ */
.wallet-alert {
    padding: 14px 20px;
    border-radius: 12px;
    border: 1px solid transparent;
    margin-bottom: 16px;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.wallet-alert i {
    font-size: 18px;
    margin-top: 1px;
}

.wallet-alert.alert-success {
    border-color: rgba(212, 168, 67, 0.3);
    color: #f0d080;
}

.wallet-alert.alert-success i {
    color: #d4a843;
}

.wallet-alert.alert-warning {
    border-color: rgba(184, 142, 47, 0.3);
    color: #d4a843;
}

.wallet-alert.alert-warning i {
    color: #d4a843;
}

.wallet-alert.alert-danger {
    border-color: rgba(184, 142, 47, 0.2);
    color: #c4a060;
}

.wallet-alert.alert-danger i {
    color: #c4a060;
}

.wallet-alert.alert-info {
    border-color: rgba(212, 168, 67, 0.2);
    color: #c4a87a;
}

.wallet-alert.alert-info i {
    color: #d4a843;
}

/* ============================================
   BUTTONS - WALLET DASHBOARD
   ============================================ */
.wallet-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.wallet-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wallet-btn:hover::after {
    background: rgba(255, 255, 255, 0.05);
}

.wallet-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.wallet-btn.btn-primary {
    background: linear-gradient(135deg, rgba(212, 168, 67, 0.2), rgba(184, 142, 47, 0.15));
    border: 1px solid rgba(184, 142, 47, 0.25);
    color: #f0d080;
}

.wallet-btn.btn-primary:hover:not(:disabled) {
    border-color: #d4a843;
    box-shadow: 0 0 30px rgba(212, 168, 67, 0.1);
    transform: translateY(-2px);
}

.wallet-btn.btn-success {
    background: linear-gradient(135deg, #d4a843, #b8922f);
    color: #0a0806;
    box-shadow: 0 4px 20px rgba(212, 168, 67, 0.2);
}

.wallet-btn.btn-success:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(212, 168, 67, 0.3);
}

.wallet-btn.btn-danger {
    background: rgba(184, 142, 47, 0.1);
    border: 1px solid rgba(184, 142, 47, 0.2);
    color: #8a7a5a;
}

.wallet-btn.btn-danger:hover:not(:disabled) {
    border-color: #d4a843;
    color: #f0d080;
}

.wallet-btn.btn-warning {
    background: rgba(184, 142, 47, 0.1);
    border: 1px solid rgba(184, 142, 47, 0.2);
    color: #d4a843;
}

.wallet-btn.btn-outline {
    background: transparent;
    border: 1px solid rgba(184, 142, 47, 0.25);
    color: #c4a87a;
}

.wallet-btn.btn-outline:hover:not(:disabled) {
    border-color: #d4a843;
    color: #f0d080;
}

.wallet-btn.btn-lg {
    padding: 14px 32px;
    font-size: 16px;
}

/* ============================================
   FORM CONTROLS - WALLET MODAL
   ============================================ */
.wallet-form-group {
    margin-bottom: 18px;
}

.wallet-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #c4a87a;
    margin-bottom: 6px;
}

.wallet-form-group label i {
    color: #d4a843;
    margin-right: 6px;
}

.wallet-form-control {
    width: 100%;
    padding: 10px 16px;
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(184, 142, 47, 0.25);
    border-radius: 12px;
    color: #f5e6c8;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.wallet-form-control::placeholder {
    color: #8a7a5a;
}

.wallet-form-control:focus {
    border-color: #d4a843;
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.1), 0 0 30px rgba(212, 168, 67, 0.03);
}

/* ============================================
   WALLET MODAL - GOLD & DARK THEME
   ============================================ */
.wallet-modal .modal-content {
    background: rgba(17, 17, 17, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(184, 142, 47, 0.25);
    border-radius: 12px;
    color: #f5e6c8;
}

.wallet-modal .modal-header {
    border-bottom: 1px solid rgba(184, 142, 47, 0.25);
    padding: 18px 24px;
    background: rgba(10, 10, 10, 0.3);
}

.wallet-modal .modal-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #f0d080;
}

.wallet-modal .modal-header h4 i {
    color: #d4a843;
    margin-right: 8px;
}

.wallet-modal .modal-header .close {
    color: #8a7a5a;
    opacity: 0.7;
    font-size: 28px;
}

.wallet-modal .modal-header .close:hover {
    color: #d4a843;
    opacity: 1;
}

.wallet-modal .modal-body {
    padding: 24px;
}

.wallet-modal .modal-footer {
    border-top: 1px solid rgba(184, 142, 47, 0.25);
    padding: 16px 24px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    background: rgba(10, 10, 10, 0.3);
}

/* ============================================
   CONFIRMATION TABLE - WALLET
   ============================================ */
.wallet-confirm-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.wallet-confirm-table td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(184, 142, 47, 0.25);
}

.wallet-confirm-table tr:last-child td {
    border-bottom: none;
}

.wallet-confirm-table .label-cell {
    color: #8a7a5a;
    font-size: 13px;
    width: 40%;
}

.wallet-confirm-table .value-cell {
    font-weight: 500;
    text-align: right;
}

.wallet-confirm-table .value-cell.amount {
    font-size: 20px;
    color: #f0d080;
}

.wallet-confirm-table .value-cell.fee {
    color: #c4a060;
}

/* ============================================
   RESPONSIVE - WALLET DASHBOARD
   ============================================ */
@media (max-width: 992px) {
    .wallet-bank-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .wallet-page {
        padding: 12px;
    }
    
    .wallet-stat-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .wallet-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .wallet-card-footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    .wallet-card-footer .wallet-btn {
        width: 100%;
        justify-content: center;
    }
    
    .wallet-bank-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .wallet-stat-grid {
        grid-template-columns: 1fr;
    }
    
    .wallet-stat-value {
        font-size: 22px;
    }
}

/* ============================================
   ANIMATIONS - WALLET DASHBOARD
   ============================================ */
@keyframes walletFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wallet-card {
    animation: walletFadeInUp 0.5s ease forwards;
}

.wallet-card:nth-child(2) {
    animation-delay: 0.1s;
}

/* === WALLET INLINE CLASSES === */
.wallet-inline-subtext { font-size: 13px; color: #8a7a5a; }
.wallet-inline-gold { color: #f0d080; }
.wallet-inline-flex1 { flex: 1; }
.wallet-inline-desc { color: #c4a87a; margin-bottom: 20px; }
.wallet-inline-desc-sm { color: #c4a87a; }
.wallet-inline-total { font-size: 24px; }
.wallet-inline-hr { border-color: rgba(184, 142, 47, 0.25); margin: 16px 0; }
.wallet-inline-bank-title { font-weight: 600; margin-bottom: 8px; color: #f0d080; }
.wallet-inline-bank-box { background: rgba(10, 10, 10, 0.4); padding: 14px 18px; border-radius: 12px; border: 1px solid rgba(184, 142, 47, 0.25); }
.wallet-inline-bank-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.wallet-inline-bank-label { color: #8a7a5a; font-size: 12px; }
.wallet-inline-bank-value { font-weight: 500; color: #f0d080; }
.wallet-inline-bank-value-normal { font-weight: 500; }

/* === DASHBOARD NEW GRID & CARDS === */
.dashboard-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 24px;
    width: 100%;
    margin-bottom: 30px;
}

@media (max-width: 992px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-card {
    background: rgba(17, 17, 17, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dashboard-card-header {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.9), rgba(15, 15, 15, 0.7));
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
}

.dashboard-card-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #4FACE0; /* Default GameCP blue accent */
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}

.dashboard-card-header h5 i {
    color: #aaa;
}

.dashboard-card-body {
    padding: 24px;
    flex: 1;
}
/* ==========================================================
   MODULES UNIFIED PREMIUM UI (APPLIED TO 16+ EVENT MODULES)
   ========================================================== */

/* Main Page Wrappers (Full Page) */
.rebirth-container, .daily-login-page, .fortuna-wheel-page, .gacha-page, .lucky-page, .mini-games-page, .voucher-exchange-page, .event-manage-page, .daily-share-page, .diamondpass-page, .voucher-page, .quest-ticket-page {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: #e0e0e0;
}

/* Info Boxes and Module Containers (Glassmorphism) */
.rebirth-info-box, .daily-container, .daily-logs-container, .fortuna-container, .fortuna-logs-container, .gacha-container, .lucky-container, .game-container, .voucher-container, .share-container, .diamondpass-container, .event-manage-container, .ticket-container, .ticket-logs-container {
    background: linear-gradient(145deg, rgba(30,30,35,0.8) 0%, rgba(20,20,25,0.9) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}
.rebirth-info-box::before, .daily-container::before, .fortuna-container::before, .gacha-container::before, .lucky-container::before, .game-container::before, .voucher-container::before, .share-container::before, .diamondpass-container::before, .event-manage-container::before, .ticket-container::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
}

/* Unified Headers */
.rebirth-header, .fortuna-wheel-page h2, .daily-login-page h2, .gacha-page h2, .lucky-page h2, .mini-games-page h2, .voucher-exchange-page h2, .event-manage-page h2, .daily-share-page h2, .diamondpass-page h2, .voucher-page h2, .quest-ticket-page h3 {
    font-size: 1.5em; font-weight: 700; color: #d4af37 !important; margin-top: 0; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid rgba(212,175,55,0.2) !important; padding-bottom: 10px; text-shadow: 0 0 10px rgba(212,175,55,0.3);
}

/* Unified Lists (Requirements / Tables) */
.rebirth-req-list, .daily-req-list, .quest-req-list, .gacha-rewards-list, .char-select-box {
    list-style: none; padding: 0; margin: 0;
    border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(25, 28, 35, 0.8); overflow: hidden;
}
.rebirth-req-list li, .daily-req-list li, .quest-req-list li, .gacha-rewards-list li, .char-radio-item {
    padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.rebirth-req-list li:last-child, .daily-req-list li:last-child, .quest-req-list li:last-child, .char-radio-item:last-child {
    border-bottom: none !important;
}
.rebirth-req-list li > span:first-child, .char-radio-item strong, .daily-req-list li span:first-child { 
    color: #a0aec0; font-size: 0.9em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; flex: 1; 
}
.rebirth-req-list li > span:last-child, .char-radio-item .balance-val, .daily-req-list li span:last-child { 
    font-weight: bold; color: #fff; font-size: 1.05em; flex: 2; text-align: right; 
}

/* Character Cards */
form.char-card, .char-select-box {
    background: linear-gradient(180deg, rgba(40,40,45,0.6) 0%, rgba(20,20,25,0.8) 100%);
    border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 12px; padding: 20px; margin-bottom: 25px; box-shadow: 0 10px 20px rgba(0,0,0,0.4); overflow: hidden;
}

/* Character Stats */
.char-stats-list { list-style: none; padding: 0; margin: 0; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(25, 28, 35, 0.8); overflow: hidden; }
.char-stats-list li { padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.char-stats-list li:last-child { border-bottom: none; }
.char-stats-list > li > strong { color: #a0aec0; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.5px; flex: 1; }
.char-stats-list > li > span { color: #fff; font-size: 1.05em; font-weight: bold; flex: 2; text-align: right; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }

/* Premium Claim Buttons */
.btn-claim, .rebirth-container .btn-primary, .fortuna-wheel-page .btn-primary, .daily-login-page .btn-primary, .gacha-page .btn-primary, .lucky-page .btn-primary, .mini-games-page .btn-primary, .voucher-exchange-page .btn-primary, .quest-ticket-page .btn-primary, .diamondpass-page .btn-primary { 
    width: 100%; padding: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: 15px; margin-top: 15px; border-radius: 8px; border: none; cursor: pointer;
    background: linear-gradient(45deg, #d4af37, #f39c12) !important; color: #000 !important;
    box-shadow: 0 4px 15px rgba(212,175,55,0.4); transition: all 0.3s;
}
.btn-claim:hover, .rebirth-container .btn-primary:hover, .fortuna-wheel-page .btn-primary:hover {
    transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,175,55,0.6);
}
.btn-claim:disabled { background: #333 !important; color: #777 !important; box-shadow: none; cursor: not-allowed; transform: none; border: 1px solid #444 !important; }

/* Rewards List */
.reward-premium-list { 
    list-style: none; padding: 0; margin: 0; 
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(25, 28, 35, 0.8);
    overflow: hidden;
}
.reward-premium-list li { 
    padding: 14px 20px; 
    display: flex; align-items: center; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.reward-premium-list li:last-child {
    border-bottom: none;
}
.reward-premium-list li strong.r-type { 
    color: #a0aec0; min-width: 130px; font-weight: 600; text-transform: uppercase; font-size: 0.9em; letter-spacing: 0.5px; 
}

/* Utility */
.text-gold { color: #d4af37 !important; }
.popover { z-index: 1060 !important; color: #333; }

/* Event Selection Radio List */
.event-radio-list { display: flex; flex-direction: column; gap: 8px; max-height: 250px; overflow-y: auto; padding-right: 5px; margin-bottom: 15px; width: 100%; }
.event-radio-item { display: flex; align-items: center; background-color: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05); padding: 12px; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.event-radio-item:hover { background-color: rgba(255,255,255,0.05); border-color: rgba(212,175,55,0.3); }
.event-radio-item.is-checked { border-color: #d4af37; background-color: rgba(212,175,55,0.1); box-shadow: 0 0 10px rgba(212,175,55,0.2); }
.event-radio-item input[type="radio"] { margin-right: 12px; transform: scale(1.2); accent-color: #d4af37; }
.event-radio-item span { font-size: 1em; color: #eee; }

/* Reward Radio Groups */
.reward-radio-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 5px 0; justify-content:center; }
.reward-radio-input { display: none; }
.reward-radio-label {
    display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; 
    border: 2px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.3); border-radius: 6px; cursor: pointer; padding: 0; transition: all 0.2s ease; overflow: hidden;
}
.reward-radio-label:hover { border-color: rgba(212,175,55,0.4); background: rgba(212,175,55,0.1); }
.reward-radio-input:checked + .reward-radio-label { border-color: #d4af37; box-shadow: 0 0 10px rgba(212,175,55,0.5); background: rgba(212,175,55,0.2); }

/* Guild Dashboard */
.guild-dashboard {
    background: linear-gradient(135deg, #2c3e50, #000000);
    border: 1px solid #444;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    color: #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.guild-stat-box { text-align: center; padding: 0 15px; border-right: 1px solid #555; }
.guild-stat-box:last-child { border-right: none; }
.guild-stat-val { font-size: 1.4em; font-weight: bold; color: #4FACE0; display: block; }
.guild-stat-label { font-size: 0.85em; color: #aaa; text-transform: uppercase; letter-spacing: 1px; }

/* Custom Tables */
.table-dark-custom { width: 100%; background-color: #222; border: 1px solid #444; color: #ccc; border-collapse: collapse; }
.table-dark-custom th { background: linear-gradient(to bottom, #8e44ad, #9b59b6); color: white; padding: 12px; border: 1px solid #444; }
.table-dark-custom td { padding: 10px; border: 1px solid #444; background-color: #2a2a2a; }
.status-ok { color: #28a745; font-weight: bold; }
.status-fail { color: #dc3545; font-weight: bold; }

/* Progress */
.progress { background-color: #333; height: 25px; border-radius: 4px; overflow: hidden; margin-bottom: 0; }
.progress-bar { line-height: 25px; font-weight: bold; font-size: 12px; transition: width 0.3s ease; }


/* ==========================================================================
   GAMECP CYBER-OBSIDIAN UNIFIED FEATURE MODULES
   Consolidated & Harmonized CSS for all 16 User Modules
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. USER CLAIM DAILY KILLER (BATTLE PASS / MILESTONE TRACK)
   -------------------------------------------------------------------------- */
.dk-wrapper {
            font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Tahoma, Geneva, Verdana, sans-serif;
            color: #e2e8f0;
            max-width: 1140px;
            width: 100%;
            margin: 10px auto 30px;
        }
        
        /* Main Container Frame */
        .dk-frame {
            background: #0b0c13;
            border: 1px solid #1a1c29;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9);
            margin-bottom: 25px;
        }
        
        /* 1. Header Bar */
        .dk-header-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px;
            background: #0f111a;
            border-bottom: 1px solid #171926;
            flex-wrap: wrap;
            gap: 10px;
        }
        .dk-title-badge {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            font-size: 13px;
            font-weight: 800;
            color: #f87171;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }
        .dk-title-badge i {
            font-size: 15px;
            color: #ef4444;
        }
        .dk-timer-chip {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 12px;
            font-weight: 700;
        }
        .dk-timer-label {
            color: #f59e0b;
            font-weight: 800;
            font-size: 11px;
            text-transform: uppercase;
        }
        .dk-timer-val {
            color: #38bdf8;
            font-weight: 700;
            font-size: 12px;
        }
        
        /* ==========================================================
           MODEL 1: BATTLE PASS / SEQUENTIAL PROGRESSION STYLING
           ========================================================== */
        
        /* 1. Character Showcase Banner */
        .dk-char-banner {
            padding: 20px 24px;
            background: linear-gradient(135deg, rgba(20, 24, 38, 0.95), rgba(12, 14, 22, 0.98));
            border-bottom: 1px solid #1a1e30;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 18px;
        }
        .dk-char-profile {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .dk-char-avatar-box {
            width: 58px;
            height: 58px;
            min-width: 58px;
            background: #141724;
            border: 2px solid #282f48;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }
        .dk-char-avatar-box img {
            height: 38px;
            filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
        }
        .dk-char-details h3 {
            margin: 0 0 5px 0;
            font-size: 19px;
            font-weight: 800;
            color: #ffffff;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .dk-char-meta-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .dk-pill-badge {
            font-size: 11px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 4px;
        }
        .badge-bellato { background: rgba(56, 189, 248, 0.15); border: 1px solid rgba(56, 189, 248, 0.35); color: #38bdf8; }
        .badge-cora { background: rgba(160, 32, 240, 0.15); border: 1px solid rgba(160, 32, 240, 0.35); color: #c084fc; }
        .badge-accretia { background: rgba(248, 113, 113, 0.15); border: 1px solid rgba(248, 113, 113, 0.35); color: #f87171; }
        .badge-status-ok { background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; }
        .badge-status-fail { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; }

        /* Stats in Banner */
        .dk-char-stats-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        .dk-stat-pill {
            background: #0f111a;
            border: 1px solid #1e2438;
            border-radius: 8px;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 140px;
        }
        .dk-stat-icon-wrap {
            font-size: 20px;
        }
        .dk-stat-data {
            display: flex;
            flex-direction: column;
        }
        .dk-stat-title {
            font-size: 10px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .dk-stat-number {
            font-size: 16px;
            font-weight: 800;
            color: #ffffff;
            line-height: 1.1;
        }

        /* Character Switcher */
        .dk-switch-wrap {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .dk-switch-wrap label {
            font-size: 10px;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 0;
        }
        .dk-switch-select {
            background: #141624;
            border: 1px solid #282f48;
            color: #f1f5f9;
            font-size: 12px;
            font-weight: 700;
            padding: 7px 12px;
            border-radius: 6px;
            outline: none;
            cursor: pointer;
            min-width: 180px;
        }
        .dk-switch-select:focus {
            border-color: #38bdf8;
        }

        /* 2. Milestone Section */
        .dk-milestone-section {
            padding: 24px;
            background: #090a10;
        }
        .dk-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }
        .dk-section-header h4 {
            margin: 0;
            font-size: 14px;
            font-weight: 800;
            color: #cbd5e1;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .dk-tiers-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
        }

        /* Card Styles */
        .dk-tier-card {
            background: #0f111a;
            border: 1px solid #1a1c29;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            transition: all 0.25s ease;
        }
        .dk-tier-card:hover {
            border-color: rgba(99, 102, 241, 0.4);
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
        }
        .dk-tier-card.tier-ready {
            border-color: rgba(16, 185, 129, 0.5);
            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.15);
            background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, #0f111a 40%);
        }
        .dk-tier-card.tier-active {
            border-color: rgba(56, 189, 248, 0.4);
            box-shadow: 0 6px 20px rgba(56, 189, 248, 0.12);
        }
        .dk-tier-card.tier-claimed {
            opacity: 0.75;
            background: #0b0c13;
            border-color: rgba(56, 189, 248, 0.25);
        }
        
        /* SEQUENTIAL LOCKED / FOGGED STATE */
        .dk-tier-card.tier-seq-locked {
            background: #07080f;
            border: 1px dashed #1c2033;
            opacity: 0.4;
            filter: grayscale(0.6);
        }
        .dk-tier-card.tier-seq-locked:hover {
            opacity: 0.7;
            filter: grayscale(0.2);
            border-color: #333d59;
            transform: translateY(-2px);
        }
        .dk-seq-lock-note {
            background: rgba(15, 23, 42, 0.85);
            border: 1px solid #1e293b;
            border-radius: 6px;
            padding: 8px 12px;
            color: #94a3b8;
            font-size: 11px;
            font-weight: 700;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 4px;
        }

        .dk-tier-card-header {
            padding: 12px 16px;
            background: #11131f;
            border-bottom: 1px solid #181b2a;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .dk-tier-badge {
            font-size: 12px;
            font-weight: 800;
            color: #f1f5f9;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .dk-tier-status-pill {
            font-size: 10px;
            font-weight: 800;
            padding: 2px 8px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .status-ready { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.35); color: #10b981; }
        .status-claimed { background: rgba(56, 189, 248, 0.15); border: 1px solid rgba(56, 189, 248, 0.35); color: #38bdf8; }
        .status-locked { background: rgba(100, 116, 139, 0.15); border: 1px solid rgba(100, 116, 139, 0.3); color: #94a3b8; }
        .status-seq-locked { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(71, 85, 105, 0.4); color: #64748b; }
        .status-progress { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.35); color: #f59e0b; }

        .dk-tier-card-body {
            padding: 16px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .dk-req-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .dk-prog-item {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .dk-prog-labels {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 11px;
            font-weight: 600;
            color: #94a3b8;
        }
        .dk-prog-labels strong {
            color: #f1f5f9;
        }
        .dk-prog-track {
            height: 6px;
            background: #181b2a;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }
        .dk-prog-fill {
            height: 100%;
            border-radius: 10px;
            transition: width 0.4s ease;
        }
        .fill-kills { background: linear-gradient(90deg, #ef4444, #f87171); }
        .fill-temp { background: linear-gradient(90deg, #0284c7, #38bdf8); }

        .dk-rewards-box {
            background: #121420;
            border: 1px solid #1a1e2f;
            border-radius: 8px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .dk-rewards-title {
            font-size: 10.5px;
            font-weight: 700;
            color: #eab308;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .dk-rewards-items-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            min-height: 48px;
        }
        .dk-item-slot {
            background: #161928;
            border: 1px solid #282f48;
            border-radius: 6px;
            padding: 4px 8px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
            cursor: pointer;
            transition: border-color 0.2s, transform 0.15s;
        }
        .dk-item-slot:hover {
            border-color: #38bdf8;
            transform: translateY(-1px);
        }
        .dk-item-name-tag {
            font-size: 11.5px;
            font-weight: 700;
            color: #f1f5f9;
            line-height: 1.2;
        }

        .dk-tier-action {
            padding: 0 16px 16px;
        }
        .dk-btn-action {
            width: 100%;
            padding: 10px 16px;
            border-radius: 6px;
            font-weight: 800;
            font-size: 12.5px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
            text-decoration: none !important;
        }
        .btn-claim-ready {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #ffffff !important;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
        }
        .btn-claim-ready:hover {
            background: linear-gradient(135deg, #34d399, #10b981);
            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.55);
            transform: translateY(-1px);
        }
        .btn-claim-locked {
            background: #141624;
            color: #64748b;
            border: 1px solid #1f2438;
            cursor: not-allowed;
            box-shadow: none;
        }
        .btn-claim-seq-locked {
            background: #0d0f1a;
            color: #475569;
            border: 1px dashed #1e2438;
            cursor: not-allowed;
            box-shadow: none;
        }
        .btn-claim-done {
            background: rgba(56, 189, 248, 0.12);
            border: 1px solid rgba(56, 189, 248, 0.3);
            color: #38bdf8;
            cursor: not-allowed;
            box-shadow: none;
        }

        .pulse-ready {
            animation: pulse-glow 2s infinite;
        }
        @keyframes pulse-glow {
            0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
            70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
            100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        }
        
        /* 4. Instructions Frame */
        .dk-rules-frame {
            background: #0b0c13;
            border: 1px solid #1a1c29;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9);
        }
        .dk-rules-header {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 12px 20px;
            background: #0f111a;
            border-bottom: 1px solid #171926;
            font-size: 13px;
            font-weight: 800;
            color: #f59e0b;
            letter-spacing: 0.6px;
            text-transform: uppercase;
        }
        .dk-rules-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px;
            padding: 22px;
            background: #090a10;
        }
        .dk-rule-card {
            background: #0f111a;
            border: 1px solid #181b29;
            border-radius: 8px;
            padding: 16px;
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }
        .dk-rule-icon {
            width: 34px;
            height: 34px;
            min-width: 34px;
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.25);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ef4444;
            font-size: 14px;
        }
        .dk-rule-content h4 {
            margin: 0 0 4px 0;
            font-size: 13px;
            font-weight: 700;
            color: #f1f5f9;
        }
        .dk-rule-content p {
            margin: 0;
            font-size: 11.5px;
            color: #94a3b8;
            line-height: 1.5;
        }

/* --------------------------------------------------------------------------
   2. USER DAILY LOGIN REWARD (CALENDAR / GRID)
   -------------------------------------------------------------------------- */
/* Main Page Wrapper */
.dl-page-wrapper {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: #e2e8f0;
    max-width: 1240px;
    margin: 10px auto 35px;
    position: relative;
}

/* Master Frame */
.dl-frame {
    background: #0b0c13;
    border: 1px solid #1a1e2f;
    border-radius: 12px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    margin-bottom: 25px;
    position: relative;
}

/* Top Header Bar */
.dl-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 22px;
    background: #0f111a;
    border-bottom: 1px solid #171926;
    flex-wrap: wrap;
    gap: 10px;
}
.dl-title-badge {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.dl-header-reset {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #f59e0b;
    letter-spacing: 0.5px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    padding: 4px 12px;
    border-radius: 6px;
}

/* 1. Hero HUD Banner */
.dl-hud-banner {
    padding: 22px 24px;
    background: linear-gradient(135deg, rgba(20, 24, 38, 0.95), rgba(12, 14, 22, 0.98));
    border-bottom: 1px solid #1a1e30;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 20px;
    align-items: center;
}
@media (max-width: 992px) {
    .dl-hud-banner {
        grid-template-columns: 1fr;
    }
}

/* Character Box */
.dl-char-box {
    display: flex;
    align-items: center;
    gap: 16px;
}
.dl-char-crest {
    width: 60px;
    height: 60px;
    min-width: 60px;
    background: #141724;
    border: 2px solid #282f48;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    position: relative;
}
.dl-char-crest img {
    height: 40px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.glow-bellato { border-color: #38bdf8 !important; box-shadow: 0 0 16px rgba(56, 189, 248, 0.35) !important; }
.glow-cora { border-color: #c084fc !important; box-shadow: 0 0 16px rgba(192, 132, 252, 0.35) !important; }
.glow-accretia { border-color: #f87171 !important; box-shadow: 0 0 16px rgba(248, 113, 113, 0.35) !important; }

.dl-char-info h3 {
    margin: 0 0 5px 0;
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dl-char-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.dl-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}
.badge-bellato { background: rgba(56, 189, 248, 0.15); border: 1px solid rgba(56, 189, 248, 0.35); color: #38bdf8; }
.badge-cora { background: rgba(160, 32, 240, 0.15); border: 1px solid rgba(160, 32, 240, 0.35); color: #c084fc; }
.badge-accretia { background: rgba(248, 113, 113, 0.15); border: 1px solid rgba(248, 113, 113, 0.35); color: #f87171; }
.badge-ok { background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; }
.badge-fail { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; }

.dl-switcher-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dl-switcher-row label {
    font-size: 10.5px;
    font-weight: 700;
    color: #94a3b8;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dl-char-select {
    background: #141624;
    border: 1px solid #282f48;
    color: #f1f5f9;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    min-width: 180px;
    transition: border-color 0.2s;
}
.dl-char-select:focus {
    border-color: #38bdf8;
}

/* Event Progress Widget */
.dl-progress-box {
    background: #0f111a;
    border: 1px solid #1e2438;
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.dl-cycle-badge, .dl-claimed-stat {
    text-align: center;
}
.dl-cycle-lbl, .dl-claimed-lbl {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dl-cycle-val {
    font-size: 20px;
    font-weight: 900;
    color: #38bdf8;
    line-height: 1.1;
}
.dl-progress-divider {
    width: 1px;
    height: 38px;
    background: #1e2438;
}
.dl-claimed-val {
    font-size: 20px;
    font-weight: 900;
    color: #f59e0b;
    line-height: 1.1;
}

/* Diamond Pass Status Banner */
.dl-dp-card {
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 250px;
}
.dl-dp-card.dp-active {
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.12), rgba(168, 85, 247, 0.06));
    border: 1px solid rgba(217, 70, 239, 0.4);
    box-shadow: 0 4px 20px rgba(217, 70, 239, 0.15);
}
.dl-dp-card.dp-inactive {
    background: #0f111a;
    border: 1px dashed #2a3147;
}
.dl-dp-gem {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.dp-active .dl-dp-gem {
    background: rgba(217, 70, 239, 0.2);
    border: 1px solid rgba(217, 70, 239, 0.4);
    color: #f472b6;
    animation: gem-pulse 2s infinite;
}
.dp-inactive .dl-dp-gem {
    background: #161a29;
    border: 1px solid #23293d;
    color: #64748b;
}
@keyframes gem-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 8px #d946ef); }
}
.dl-dp-title {
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}
.dp-active .dl-dp-title { color: #f472b6; }
.dp-inactive .dl-dp-title { color: #94a3b8; }
.dl-dp-sub {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.2;
}

/* 2. Requirements Strip */
.dl-reqs-strip {
    background: #090a10;
    border-bottom: 1px solid #141724;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.dl-reqs-label {
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dl-reqs-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* 3. Section Headers */
.dl-section-head {
    padding: 18px 24px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #141724;
}
.dl-section-title {
    font-size: 14px;
    font-weight: 800;
    color: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dl-section-badge {
    font-size: 11px;
    font-weight: 700;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #38bdf8;
    padding: 3px 8px;
    border-radius: 4px;
}

/* 4. Daily Attendance Grid */
.dl-calendar-wrap {
    padding: 24px;
    background: #090a10;
}
.dl-rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 14px;
}

/* Card Styles */
.dl-day-card {
    background: #0f111a;
    border: 1px solid #1a1e2f;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: all 0.25s ease;
}
.dl-day-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

/* States */
.dl-day-card.claimable {
    border-color: #38bdf8;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.08) 0%, #0f111a 45%);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.25);
}
.dl-day-card.claimed {
    border-color: rgba(16, 185, 129, 0.35);
    background: #0a0d14;
    opacity: 0.8;
}
.dl-day-card.locked {
    border-color: #171a26;
    background: #07080e;
    opacity: 0.55;
    filter: grayscale(0.5);
}
.dl-day-card.missed {
    border-color: rgba(239, 68, 68, 0.3);
    background: #0f0b0d;
    opacity: 0.65;
}

/* Card Header */
.dl-card-hdr {
    padding: 8px 12px;
    background: #121420;
    border-bottom: 1px solid #181b2a;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dl-day-title {
    font-size: 11.5px;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.claimable .dl-day-title { color: #38bdf8; }

.dl-status-pill {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.status-ready { background: rgba(56, 189, 248, 0.15); border: 1px solid rgba(56, 189, 248, 0.4); color: #38bdf8; }
.status-claimed { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.4); color: #10b981; }
.status-locked { background: rgba(100, 116, 139, 0.15); border: 1px solid rgba(100, 116, 139, 0.3); color: #94a3b8; }
.status-missed { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.35); color: #ef4444; }
.status-dp-missed { background: rgba(217, 70, 239, 0.15); border: 1px solid rgba(217, 70, 239, 0.35); color: #d946ef; }

/* Card Content: Item Slots */
.dl-card-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}
.dl-item-box {
    background: #141724;
    border: 1px solid #1f2538;
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    transition: all 0.2s;
}
.dl-item-box:hover {
    border-color: #38bdf8;
    background: #181c2e;
}
.dl-item-box.dp-box {
    border-color: rgba(217, 70, 239, 0.3);
    background: rgba(217, 70, 239, 0.04);
}
.dl-item-box.dp-box:hover {
    border-color: #d946ef;
}
.dl-item-tag {
    position: absolute;
    top: -5px;
    right: 6px;
    font-size: 8px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tag-free { background: #0284c7; color: #fff; }
.tag-dp { background: #a21caf; color: #fff; }

.dl-item-icon-wrap {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dl-item-info {
    line-height: 1.2;
    overflow: hidden;
    flex-grow: 1;
}
.dl-item-name {
    font-size: 11px;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.dl-item-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.dl-item-qty {
    font-size: 10px;
    font-weight: 800;
    color: #38bdf8;
}
.dp-box .dl-item-qty { color: #f472b6; }

.dl-dp-overlay-lock {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 11px;
}

/* Action Buttons */
.dl-card-footer {
    padding: 8px 10px 10px;
}
.dl-btn-action {
    width: 100%;
    padding: 7px 0;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}
.btn-claim-pulse {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    animation: claim-pulse 1.8s infinite;
}
.btn-claim-pulse:hover {
    background: linear-gradient(135deg, #34d399, #10b981);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
}
@keyframes claim-pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.btn-claimed {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
    cursor: not-allowed;
}
.btn-locked {
    background: #141724;
    border: 1px solid #1f2538;
    color: #64748b;
    cursor: not-allowed;
}
.btn-missed {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #ef4444;
    cursor: not-allowed;
}

/* 5. Streak Rewards Section */
.dl-streak-wrap {
    padding: 24px;
    background: #0b0c13;
    border-top: 1px solid #171a29;
}
.dl-streak-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.dl-streak-card {
    background: #0f111a;
    border: 1px solid #1a1e2f;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s;
}
.dl-streak-card:hover {
    border-color: #f59e0b;
    transform: translateY(-2px);
}
.dl-streak-card.claimable {
    border-color: #f59e0b;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.08) 0%, #0f111a 50%);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}
.dl-streak-card.claimed {
    opacity: 0.75;
    border-color: rgba(16, 185, 129, 0.3);
}

.dl-streak-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dl-streak-badge {
    font-size: 12px;
    font-weight: 800;
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dl-streak-bar-bg {
    height: 7px;
    background: #161928;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.dl-streak-bar-fg {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    border-radius: 10px;
    transition: width 0.4s ease;
}

/* 6. History Logs Table */
.dl-history-wrap {
    padding: 24px;
    background: #090a10;
    border-top: 1px solid #171a29;
}
.dl-table {
    width: 100%;
    border-collapse: collapse;
}
.dl-table th {
    background: #111422;
    border-bottom: 1px solid #1e2438;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 10px 14px;
    text-align: left;
}
.dl-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #141724;
    font-size: 12px;
    color: #cbd5e1;
    vertical-align: middle;
}
.dl-table tr:hover td {
    background: #111420;
}

/* Pagination */
.dl-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
}
.dl-page-btn {
    padding: 6px 12px;
    background: #111420;
    border: 1px solid #1f2538;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.2s;
}
.dl-page-btn:hover, .dl-page-btn.active {
    background: #38bdf8;
    color: #0b0c13;
    border-color: #38bdf8;
}

/* 7. Event Guidelines */
.dl-rules-frame {
    background: #0b0c13;
    border: 1px solid #1a1c29;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9);
}
.dl-rules-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    background: #0f111a;
    border-bottom: 1px solid #171926;
    font-size: 13px;
    font-weight: 800;
    color: #f59e0b;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.dl-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    padding: 22px;
    background: #090a10;
}
.dl-rule-card {
    background: #0f111a;
    border: 1px solid #181b29;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.dl-rule-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    font-size: 14px;
}
.dl-rule-content h4 {
    margin: 0 0 4px 0;
    font-size: 12.5px;
    font-weight: 800;
    color: #e2e8f0;
}
.dl-rule-content p {
    margin: 0;
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.5;
}

/* Modal Styling */
.daily-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    justify-content: center !important;
    align-items: center !important;
    z-index: 2147483647 !important;
    backdrop-filter: blur(8px);
}
.daily-modal-overlay.show { 
    display: flex !important;
}
.daily-modal-content {
    background: #0b0c13; 
    border: 1px solid #23273a; 
    padding: 30px; 
    border-radius: 12px;
    text-align: center; 
    max-width: 440px; 
    width: 90%; 
    color: #eee;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
    position: relative;
    margin: 0 !important;
}
.winning-item {
    font-size: 12px;
    color: #fff;
    display: block;
    margin: 15px 0;
}
.character-name {
    color: #38bdf8;
    font-weight: bold;
}
.modal-close-button {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 800;
    font-size: 13px;
    width: 100%;
    transition: all 0.2s;
}
.modal-close-button:hover {
    background: linear-gradient(135deg, #34d399, #10b981);
}

/* --------------------------------------------------------------------------
   3. USER DAILY QUEST TICKET (QUEST SYSTEM)
   -------------------------------------------------------------------------- */
/* Main Wrapper */
.dqt-page-wrapper {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: #e2e8f0;
    max-width: 1240px;
    margin: 10px auto 35px;
    position: relative;
}

/* Master Frame */
.dqt-frame {
    background: #0b0c13;
    border: 1px solid #1a1e2f;
    border-radius: 12px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    margin-bottom: 25px;
    position: relative;
}

/* Header Bar */
.dqt-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 22px;
    background: #0f111a;
    border-bottom: 1px solid #171926;
    flex-wrap: wrap;
    gap: 10px;
}
.dqt-title-badge {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.dqt-header-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #f59e0b;
    letter-spacing: 0.5px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    padding: 4px 12px;
    border-radius: 6px;
}

/* 1. Hero HUD Banner */
.dqt-hud-banner {
    padding: 22px 24px;
    background: linear-gradient(135deg, rgba(20, 24, 38, 0.95), rgba(12, 14, 22, 0.98));
    border-bottom: 1px solid #1a1e30;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 20px;
    align-items: center;
}
@media (max-width: 992px) {
    .dqt-hud-banner {
        grid-template-columns: 1fr;
    }
}

/* Character Box */
.dqt-char-box {
    display: flex;
    align-items: center;
    gap: 16px;
}
.dqt-char-crest {
    width: 60px;
    height: 60px;
    min-width: 60px;
    background: #141724;
    border: 2px solid #282f48;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    position: relative;
}
.dqt-char-crest img {
    height: 40px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.glow-bellato { border-color: #38bdf8 !important; box-shadow: 0 0 16px rgba(56, 189, 248, 0.35) !important; }
.glow-cora { border-color: #c084fc !important; box-shadow: 0 0 16px rgba(192, 132, 252, 0.35) !important; }
.glow-accretia { border-color: #f87171 !important; box-shadow: 0 0 16px rgba(248, 113, 113, 0.35) !important; }

.dqt-char-info h3 {
    margin: 0 0 5px 0;
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dqt-char-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.dqt-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}
.badge-bellato { background: rgba(56, 189, 248, 0.15); border: 1px solid rgba(56, 189, 248, 0.35); color: #38bdf8; }
.badge-cora { background: rgba(160, 32, 240, 0.15); border: 1px solid rgba(160, 32, 240, 0.35); color: #c084fc; }
.badge-accretia { background: rgba(248, 113, 113, 0.15); border: 1px solid rgba(248, 113, 113, 0.35); color: #f87171; }
.badge-ok { background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; }
.badge-fail { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; }

.dqt-switcher-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dqt-switcher-row label {
    font-size: 10.5px;
    font-weight: 700;
    color: #94a3b8;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dqt-char-select {
    background: #141624;
    border: 1px solid #282f48;
    color: #f1f5f9;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    min-width: 180px;
    transition: border-color 0.2s;
}
.dqt-char-select:focus {
    border-color: #38bdf8;
}

/* Event Status Widget */
.dqt-status-box {
    background: #0f111a;
    border: 1px solid #1e2438;
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.dqt-stat-unit {
    text-align: center;
}
.dqt-stat-lbl {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dqt-stat-val {
    font-size: 18px;
    font-weight: 900;
    color: #38bdf8;
    line-height: 1.1;
}
.dqt-stat-divider {
    width: 1px;
    height: 36px;
    background: #1e2438;
}

/* Connection / Delivery Mode Card */
.dqt-conn-card {
    background: #0f111a;
    border: 1px solid #1e2438;
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
}
.dqt-conn-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.conn-ready .dqt-conn-icon { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.35); color: #10b981; }
.conn-online .dqt-conn-icon { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.35); color: #ef4444; }

.dqt-conn-title {
    font-size: 12px;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: 0.4px;
}
.dqt-conn-sub {
    font-size: 10.5px;
    color: #94a3b8;
    line-height: 1.2;
}

/* Section Header */
.dqt-section-head {
    padding: 18px 24px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #141724;
}
.dqt-section-title {
    font-size: 14px;
    font-weight: 800;
    color: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dqt-section-badge {
    font-size: 11px;
    font-weight: 700;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #38bdf8;
    padding: 3px 8px;
    border-radius: 4px;
}

/* Tickets Grid */
.dqt-grid-wrap {
    padding: 24px;
    background: #090a10;
}
.dqt-tickets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
}

/* Card Styles */
.dqt-card {
    background: #0f111a;
    border: 1px solid #1a1e2f;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: all 0.25s ease;
}
.dqt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}
.dqt-card.claimable {
    border-color: #38bdf8;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.08) 0%, #0f111a 45%);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.25);
}
.dqt-card.cooldown {
    border-color: rgba(245, 158, 11, 0.4);
    background: #0e0e16;
}
.dqt-card.locked {
    border-color: #171a26;
    background: #07080e;
    opacity: 0.6;
    filter: grayscale(0.5);
}

/* Card Top */
.dqt-card-hdr {
    padding: 10px 14px;
    background: #121420;
    border-bottom: 1px solid #181b2a;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dqt-card-title {
    font-size: 12px;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.claimable .dqt-card-title { color: #38bdf8; }

.dqt-status-pill {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.status-ready { background: rgba(56, 189, 248, 0.15); border: 1px solid rgba(56, 189, 248, 0.4); color: #38bdf8; }
.status-cooldown { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.4); color: #f59e0b; }
.status-locked { background: rgba(100, 116, 139, 0.15); border: 1px solid rgba(100, 116, 139, 0.3); color: #94a3b8; }

/* Card Body */
.dqt-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

/* Main Ticket Reward Box */
.dqt-item-spotlight {
    background: #141724;
    border: 1px solid #1f2538;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
}
.dqt-item-spotlight:hover {
    border-color: #38bdf8;
    background: #181c2e;
}
.dqt-item-icon-box {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dqt-item-meta {
    line-height: 1.25;
    overflow: hidden;
    flex-grow: 1;
}
.dqt-item-name {
    font-size: 12.5px;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.dqt-item-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}
.dqt-item-amount {
    font-size: 11px;
    font-weight: 800;
    color: #38bdf8;
}

/* Schedule & CD Meta Strip */
.dqt-meta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: #94a3b8;
    background: #0d0f18;
    border: 1px solid #181b2a;
    border-radius: 6px;
    padding: 6px 10px;
}
.dqt-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
}

/* Requirements Box inside Card */
.dqt-reqs-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px dashed #22293e;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dqt-req-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10.5px;
    color: #94a3b8;
}
.dqt-req-row strong {
    color: #cbd5e1;
}

/* Action Footer */
.dqt-card-footer {
    padding: 10px 14px 14px;
}
.dqt-btn-action {
    width: 100%;
    padding: 9px 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    text-decoration: none !important;
}
.btn-claim-ready {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}
.btn-claim-ready:hover {
    background: linear-gradient(135deg, #34d399, #10b981);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
}
.pulse-ready {
    animation: pulse-ready-btn 1.8s infinite;
}
@keyframes pulse-ready-btn {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.btn-claim-cd {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
    cursor: not-allowed;
}
.btn-claim-locked {
    background: #141724;
    border: 1px solid #1f2538;
    color: #64748b;
    cursor: not-allowed;
}

/* History Logs Table */
.dqt-history-wrap {
    padding: 24px;
    background: #090a10;
    border-top: 1px solid #171a29;
}
.dqt-table {
    width: 100%;
    border-collapse: collapse;
}
.dqt-table th {
    background: #111422;
    border-bottom: 1px solid #1e2438;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 10px 14px;
    text-align: left;
}
.dqt-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #141724;
    font-size: 12px;
    color: #cbd5e1;
    vertical-align: middle;
}
.dqt-table tr:hover td {
    background: #111420;
}

/* Pagination */
.dqt-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
}
.dqt-page-btn {
    padding: 6px 12px;
    background: #111420;
    border: 1px solid #1f2538;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.2s;
}
.dqt-page-btn:hover, .dqt-page-btn.active {
    background: #38bdf8;
    color: #0b0c13;
    border-color: #38bdf8;
}

/* Rules / Guidelines Frame */
.dqt-rules-frame {
    background: #0b0c13;
    border: 1px solid #1a1c29;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9);
}
.dqt-rules-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    background: #0f111a;
    border-bottom: 1px solid #171926;
    font-size: 13px;
    font-weight: 800;
    color: #f59e0b;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.dqt-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    padding: 22px;
    background: #090a10;
}
.dqt-rule-card {
    background: #0f111a;
    border: 1px solid #181b29;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.dqt-rule-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    font-size: 14px;
}
.dqt-rule-content h4 {
    margin: 0 0 4px 0;
    font-size: 12.5px;
    font-weight: 800;
    color: #e2e8f0;
}
.dqt-rule-content p {
    margin: 0;
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.5;
}

/* Modal Styling */
.ticket-modal-overlay {
    position: fixed !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important; 
    height: 100vh !important; 
    background: rgba(0, 0, 0, 0.85); 
    display: none;
    justify-content: center !important; 
    align-items: center !important; 
    z-index: 2147483647 !important; 
    backdrop-filter: blur(8px);
}
.ticket-modal-overlay.show { 
    display: flex !important; 
}
.ticket-modal-content {
    background: #0b0c13; 
    border: 1px solid #23273a; 
    padding: 30px; 
    border-radius: 12px;
    text-align: center; 
    max-width: 440px; 
    width: 90%; 
    color: #eee;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
    position: relative;
    margin: 0 !important; 
}
.winning-item {
    font-size: 12.5px;
    color: #fff;
    display: block;
    margin: 15px 0;
}
.character-name {
    color: #38bdf8;
    font-weight: bold;
}
.modal-close-button {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 800;
    font-size: 13px;
    width: 100%;
    transition: all 0.2s;
}
.modal-close-button:hover {
    background: linear-gradient(135deg, #34d399, #10b981);
}

/* --------------------------------------------------------------------------
   4. USER DAILY SHARE (SOCIAL SHARE EVENT)
   -------------------------------------------------------------------------- */
/* CSS Variables & Reset */
.dse-page-wrapper {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: #e2e8f0;
    margin-bottom: 30px;
    line-height: 1.5;
}
.dse-page-wrapper * {
    box-sizing: border-box;
}

/* Master Frame */
.dse-frame {
    background: #0b0c13;
    border: 1px solid #1a1e2f;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65);
    overflow: hidden;
    position: relative;
}

/* Header Bar */
.dse-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(90deg, #121624 0%, #171c30 100%);
    border-bottom: 1px solid #1f263d;
    flex-wrap: wrap;
    gap: 12px;
}
.dse-title-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dse-title-badge .dse-icon {
    font-size: 20px;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}
.dse-title-badge h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #ffffff;
    text-transform: uppercase;
}
.dse-title-badge span {
    display: block;
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 500;
    margin-top: 1px;
}
.dse-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.dse-badge {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.4px;
}
.dse-badge-cyan {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
}
.dse-badge-emerald {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
}
.dse-badge-amber {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}
.dse-badge-purple {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #c084fc;
}

/* Character HUD Banner */
.dse-hud-banner {
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(20, 24, 38, 0.95), rgba(12, 14, 22, 0.98));
    border-bottom: 1px solid #1a2033;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
}
@media (max-width: 900px) {
    .dse-hud-banner {
        grid-template-columns: 1fr;
    }
}
.dse-char-box {
    display: flex;
    align-items: center;
    gap: 16px;
}
.dse-char-crest {
    width: 58px;
    height: 58px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, rgba(15, 23, 42, 0.9) 80%);
    border: 2px solid rgba(56, 189, 248, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(56, 189, 248, 0.15);
}
.dse-char-crest img {
    height: 38px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.dse-char-info h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}
.dse-char-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dse-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
    background: #171d2e;
    border: 1px solid #28334d;
    color: #cbd5e1;
}
.dse-pill-race-bellato { color: #facc15; border-color: rgba(250, 204, 21, 0.3); }
.dse-pill-race-cora    { color: #c084fc; border-color: rgba(192, 132, 252, 0.3); }
.dse-pill-race-accretia { color: #cbd5e1; border-color: rgba(203, 213, 225, 0.3); }

/* Switcher Row */
.dse-switcher-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}
.dse-switcher-row label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dse-select {
    background: #131726;
    border: 1px solid #26314d;
    color: #e2e8f0;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    outline: none;
    transition: all 0.2s;
    cursor: pointer;
    width: 100%;
}
.dse-select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

/* Event Metrics Strip */
.dse-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 18px 24px;
    background: rgba(11, 13, 21, 0.7);
    border-bottom: 1px solid #1a1e2f;
}
.dse-metric-box {
    background: #121624;
    border: 1px solid #1f273d;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.15s, border-color 0.15s;
}
.dse-metric-box:hover {
    border-color: #2e3a5a;
    transform: translateY(-1px);
}
.dse-metric-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.dse-metric-cyan .dse-metric-icon { background: rgba(56, 189, 248, 0.12); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.25); }
.dse-metric-emerald .dse-metric-icon { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.25); }
.dse-metric-amber .dse-metric-icon { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.25); }
.dse-metric-purple .dse-metric-icon { background: rgba(168, 85, 247, 0.12); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.25); }
.dse-metric-content {
    display: flex;
    flex-direction: column;
}
.dse-metric-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.dse-metric-value {
    font-size: 13.5px;
    font-weight: 800;
    color: #f1f5f9;
}

/* Status Banner */
.dse-status-card {
    margin: 20px 24px;
    padding: 16px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid transparent;
}
.dse-status-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.dse-status-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
}
.dse-status-text strong {
    font-weight: 800;
}
.dse-status-info {
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.3);
    color: #bae6fd;
}
.dse-status-info .dse-status-icon { color: #38bdf8; }
.dse-status-success {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
    color: #a7f3d0;
}
.dse-status-success .dse-status-icon { color: #34d399; }
.dse-status-warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fde68a;
}
.dse-status-warning .dse-status-icon { color: #fbbf24; }
.dse-status-danger {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fecaca;
}
.dse-status-danger .dse-status-icon { color: #f87171; }

/* Main Section Split */
.dse-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0 24px 24px 24px;
}
@media (max-width: 900px) {
    .dse-content-grid {
        grid-template-columns: 1fr;
    }
}

/* Sub-card Panels */
.dse-panel {
    background: #111422;
    border: 1px solid #1d2338;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dse-panel-header {
    padding: 14px 18px;
    background: #161b2e;
    border-bottom: 1px solid #1f2740;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dse-panel-header h4 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dse-panel-body {
    padding: 18px;
    flex: 1;
}

/* Reward Showcase Card */
.dse-reward-item {
    background: #141829;
    border: 1px solid #222b45;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    transition: border-color 0.2s, transform 0.15s;
}
.dse-reward-item:last-child {
    margin-bottom: 0;
}
.dse-reward-item:hover {
    border-color: #38bdf8;
    transform: translateY(-1px);
}
.dse-reward-icon {
    width: 48px;
    height: 48px;
    background: #0b0d17;
    border: 1px solid #28334f;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}
.dse-reward-icon .dse-qty-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: #0284c7;
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid #0369a1;
}
.dse-reward-info {
    flex: 1;
}
.dse-reward-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 2px;
}
.dse-reward-type {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dse-reward-talics {
    margin-top: 4px;
}

/* Form Controls */
.dse-form-group {
    margin-bottom: 14px;
}
.dse-form-group:last-child {
    margin-bottom: 0;
}
.dse-form-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.dse-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.dse-input-icon {
    position: absolute;
    left: 12px;
    color: #64748b;
    font-size: 13px;
    pointer-events: none;
}
.dse-input {
    width: 100%;
    background: #141829;
    border: 1px solid #222b45;
    border-radius: 6px;
    padding: 10px 12px 10px 36px;
    color: #ffffff;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
}
.dse-input:focus {
    border-color: #38bdf8;
    background: #161b2e;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}
.dse-input:disabled {
    background: #0f121d;
    border-color: #1a1e2f;
    color: #475569;
    cursor: not-allowed;
}
.dse-btn-submit {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border: 1px solid #38bdf8;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35);
    transition: all 0.2s;
    margin-top: 10px;
}
.dse-btn-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.5);
    transform: translateY(-1px);
}
.dse-btn-submit:disabled {
    background: #1a1e2f;
    border-color: #272f48;
    color: #64748b;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* History Card & Table */
.dse-history-wrapper {
    padding: 0 24px 24px 24px;
}
.dse-history-card {
    background: #111422;
    border: 1px solid #1d2338;
    border-radius: 10px;
    overflow: hidden;
}
.dse-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    text-align: left;
}
.dse-table thead th {
    background: #161b2e;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 12px 16px;
    border-bottom: 1px solid #1f2740;
}
.dse-table tbody tr {
    border-bottom: 1px solid #181d2e;
    transition: background 0.15s;
}
.dse-table tbody tr:hover {
    background: #151a2c;
}
.dse-table tbody tr:last-child {
    border-bottom: none;
}
.dse-table td {
    padding: 12px 16px;
    vertical-align: middle;
    color: #cbd5e1;
}

/* History Status Badges */
.dse-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
}
.dse-status-pill.pending {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}
.dse-status-pill.approved {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
}
.dse-status-pill.rejected {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
}

/* Pagination */
.dse-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 16px;
    background: #141829;
    border-top: 1px solid #1d2338;
}
.dse-page-link {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #181e33;
    border: 1px solid #293452;
    border-radius: 6px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
}
.dse-page-link:hover {
    background: #232c4a;
    border-color: #38bdf8;
    color: #ffffff;
}
.dse-page-link.active {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

/* Guidelines Grid */
.dse-guidelines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    padding: 0 24px 24px 24px;
}
.dse-guide-card {
    background: #111422;
    border: 1px solid #1c2236;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.dse-guide-icon {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.dse-guide-text h5 {
    margin: 0 0 3px 0;
    font-size: 12px;
    font-weight: 800;
    color: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.dse-guide-text p {
    margin: 0;
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.4;
}

/* Responsive Overrides */
@media (max-width: 768px) {
    .dse-header-bar, .dse-hud-banner, .dse-metrics-grid, .dse-content-grid, .dse-history-wrapper, .dse-guidelines-grid {
        padding-left: 14px;
        padding-right: 14px;
    }
    .dse-status-card {
        margin-left: 14px;
        margin-right: 14px;
    }
    .dse-table {
        display: block;
        overflow-x: auto;
    }
}

/* --------------------------------------------------------------------------
   5. USER DIAMOND PASS DAILY REWARD (TIERED VIP PASS)
   -------------------------------------------------------------------------- */
/* Reset & Scope */
.dpd-page-wrapper {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: #e2e8f0;
    margin-bottom: 30px;
    line-height: 1.5;
}
.dpd-page-wrapper * {
    box-sizing: border-box;
}

/* Master Frame */
.dpd-frame {
    background: #0b0c13;
    border: 1px solid #1a1e2f;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65);
    overflow: hidden;
    position: relative;
}

/* Header Bar */
.dpd-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(90deg, #121624 0%, #171c30 100%);
    border-bottom: 1px solid #1f263d;
    flex-wrap: wrap;
    gap: 12px;
}
.dpd-title-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dpd-title-badge .dpd-icon {
    font-size: 20px;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
}
.dpd-title-badge h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #ffffff;
    text-transform: uppercase;
}
.dpd-title-badge span {
    display: block;
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 500;
    margin-top: 1px;
}
.dpd-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.dpd-badge {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.4px;
}
.dpd-badge-cyan {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
}
.dpd-badge-emerald {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
}
.dpd-badge-amber {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}
.dpd-badge-purple {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #c084fc;
}

/* Subscription HUD Banner */
.dpd-hud-banner {
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(18, 22, 36, 0.95), rgba(11, 13, 21, 0.98));
    border-bottom: 1px solid #1a2033;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
}
@media (max-width: 900px) {
    .dpd-hud-banner {
        grid-template-columns: 1fr;
    }
}
.dpd-subscription-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.dpd-subscription-active {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.15) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(56, 189, 248, 0.4);
    box-shadow: 0 4px 20px rgba(2, 132, 199, 0.2), inset 0 0 15px rgba(56, 189, 248, 0.1);
}
.dpd-subscription-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.2);
}
.dpd-subscription-inactive {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid #28334f;
}
.dpd-sub-gem-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.dpd-subscription-active .dpd-sub-gem-icon {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(2, 132, 199, 0.1) 80%);
    border: 1px solid rgba(56, 189, 248, 0.5);
    color: #38bdf8;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
}
.dpd-subscription-warning .dpd-sub-gem-icon {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.1) 80%);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fbbf24;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
}
.dpd-subscription-inactive .dpd-sub-gem-icon {
    background: #151a2a;
    border: 1px solid #28334f;
    color: #64748b;
}
.dpd-sub-details h3 {
    margin: 0 0 4px 0;
    font-size: 16.5px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}
.dpd-sub-meta {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.dpd-sub-meta strong {
    color: #f1f5f9;
}
.dpd-btn-shop {
    padding: 10px 18px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border: 1px solid #38bdf8;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35);
    transition: all 0.2s;
    white-space: nowrap;
}
.dpd-btn-shop:hover {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.5);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Criteria Grid */
.dpd-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 16px 24px;
    background: rgba(11, 13, 21, 0.7);
    border-bottom: 1px solid #1a1e2f;
}
.dpd-metric-box {
    background: #121624;
    border: 1px solid #1f273d;
    border-radius: 8px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.dpd-metric-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.dpd-metric-cyan .dpd-metric-icon    { background: rgba(56, 189, 248, 0.12); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.25); }
.dpd-metric-emerald .dpd-metric-icon { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.25); }
.dpd-metric-amber .dpd-metric-icon   { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.25); }
.dpd-metric-purple .dpd-metric-icon  { background: rgba(168, 85, 247, 0.12); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.25); }
.dpd-metric-content {
    display: flex;
    flex-direction: column;
}
.dpd-metric-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.dpd-metric-value {
    font-size: 13px;
    font-weight: 800;
    color: #f1f5f9;
}

/* Section Wrappers */
.dpd-section {
    padding: 24px;
    border-bottom: 1px solid #1a1e2f;
}
.dpd-section:last-child {
    border-bottom: none;
}
.dpd-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}
.dpd-section-header h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Reward Showcase Cards Grid */
.dpd-reward-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.dpd-reward-card {
    background: #111422;
    border: 1px solid #1f273d;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.dpd-reward-card:hover {
    border-color: #38bdf8;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.dpd-reward-card.teaser {
    border-color: rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, #111422 100%);
}
.dpd-reward-card.teaser:hover {
    border-color: #fbbf24;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.15);
}
.dpd-item-icon-box {
    width: 52px;
    height: 52px;
    background: #0b0d17;
    border: 1px solid #28334f;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 12px 0;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s;
}
.dpd-item-icon-box:hover {
    transform: scale(1.05);
    border-color: #38bdf8;
}
.dpd-qty-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: #0284c7;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid #0369a1;
}
.dpd-reward-name {
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
    line-height: 1.3;
}
.dpd-reward-talics {
    margin-top: auto;
    min-height: 16px;
    padding-top: 6px;
}

/* Receiver Character Selection */
.dpd-char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.dpd-char-option {
    cursor: pointer;
    margin: 0;
    display: block;
}
.dpd-char-option input[type="radio"] {
    display: none;
}
.dpd-char-card {
    background: #111422;
    border: 1px solid #1f273d;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
}
.dpd-char-card:hover {
    border-color: #334155;
    background: #141828;
}
.dpd-char-option input:checked + .dpd-char-card {
    background: rgba(2, 132, 199, 0.15);
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}
.dpd-char-crest-mini {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #171d2e;
    border: 1px solid #28334d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dpd-char-crest-mini img {
    height: 24px;
}
.dpd-char-info-col {
    flex: 1;
}
.dpd-char-name-txt {
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 2px;
}
.dpd-char-sub-txt {
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Claim Action Button */
.dpd-btn-claim {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: 1px solid #34d399;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.35);
    transition: all 0.2s;
    margin-top: 10px;
}
.dpd-btn-claim:hover:not(:disabled) {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    box-shadow: 0 4px 25px rgba(52, 211, 153, 0.5);
    transform: translateY(-1px);
}
.dpd-btn-claim:disabled {
    background: #161928;
    border-color: #262f47;
    color: #64748b;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* Status Callout Boxes */
.dpd-callout {
    padding: 16px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.dpd-callout-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.dpd-callout-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
}
.dpd-callout-success {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #a7f3d0;
}
.dpd-callout-success .dpd-callout-icon { color: #34d399; }
.dpd-callout-warning {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fde68a;
}
.dpd-callout-warning .dpd-callout-icon { color: #fbbf24; }
.dpd-callout-danger {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fecaca;
}
.dpd-callout-danger .dpd-callout-icon { color: #f87171; }

/* History Section */
.dpd-history-card {
    background: #111422;
    border: 1px solid #1d2338;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
}
.dpd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    text-align: left;
}
.dpd-table thead th {
    background: #161b2e;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 12px 16px;
    border-bottom: 1px solid #1f2740;
}
.dpd-table tbody tr {
    border-bottom: 1px solid #181d2e;
    transition: background 0.15s;
}
.dpd-table tbody tr:hover {
    background: #151a2c;
}
.dpd-table tbody tr:last-child {
    border-bottom: none;
}
.dpd-table td {
    padding: 12px 16px;
    vertical-align: middle;
    color: #cbd5e1;
}

/* Guidelines Grid */
.dpd-guidelines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    padding: 24px;
}
.dpd-guide-card {
    background: #111422;
    border: 1px solid #1c2236;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.dpd-guide-icon {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.dpd-guide-text h5 {
    margin: 0 0 3px 0;
    font-size: 12px;
    font-weight: 800;
    color: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.dpd-guide-text p {
    margin: 0;
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .dpd-header-bar, .dpd-hud-banner, .dpd-metrics-grid, .dpd-section, .dpd-guidelines-grid {
        padding-left: 14px;
        padding-right: 14px;
    }
    .dpd-table {
        display: block;
        overflow-x: auto;
    }
}

/* --------------------------------------------------------------------------
   6. USER FORTUNE WHEEL (LUCKY SPIN WHEEL)
   -------------------------------------------------------------------------- */
/* Main Page Wrapper */
.fortuna-wheel-page {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Tahoma, Geneva, Verdana, sans-serif;
    color: #e2e8f0;
    position: relative;
    max-width: 1120px; width: 95%;
    margin: 10px auto 30px;
}

/* Event Container Frame (Exact Modal Style) */
.event-wheel-frame {
    background: #0b0c13;
    border: 1px solid #1a1c29;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9);
    margin-bottom: 25px;
    position: relative;
}

/* 1. Header Bar */
.event-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    background: #0f111a;
    border-bottom: 1px solid #171926;
}
.event-title-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #818cf8;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.event-title-badge i {
    font-size: 13px;
    color: #6366f1;
}
.event-timer-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.event-timer-icon {
    color: #f59e0b;
    font-size: 13px;
}
.event-timer-label {
    color: #f59e0b;
    font-weight: 800;
    font-size: 11px;
}
.event-timer-value {
    color: #f87171;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.5px;
}
.event-header-close {
    color: #64748b;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.2s;
    padding: 2px 4px;
}
.event-header-close:hover {
    color: #f1f5f9;
}

/* 2. Sub-Header: Bonus Pool & Balance */
.event-sub-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #141622;
    background: rgba(12, 13, 20, 0.95);
    flex-wrap: wrap;
    gap: 12px;
}
.event-bonus-pool-info {
    display: flex;
    flex-direction: column;
}
.event-pool-title {
    color: #eab308;
    font-size: 13.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 7px;
}
.event-pool-title i {
    font-size: 15px;
    color: #facc15;
}
.event-pool-subtitle {
    color: #71778c;
    font-size: 11.5px;
    margin-top: 2px;
}

/* Balance Widget */
.event-balance-card {
    background: #11131c;
    border: 1px solid #1e2233;
    border-radius: 6px;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.event-balance-icon {
    font-size: 16px;
    color: #eab308;
}
.event-balance-details {
    display: flex;
    flex-direction: column;
}
.event-balance-label {
    font-size: 9.5px;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.event-balance-num {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
}
.event-curr-select {
    background: #171926;
    border: 1px solid #282d40;
    border-radius: 5px;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 6px;
    outline: none;
    cursor: pointer;
}

/* 3. Milestone Progression Track (6 Slots in 1 Row) */
.event-milestones-track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 14px 20px 10px;
    background: #0d0e16;
    border-bottom: 1px solid #141622;
}
@media (max-width: 650px) {
    .event-milestones-track {
        grid-template-columns: repeat(3, 1fr);
    }
}
.milestone-slot-card {
    background: #10121a;
    border: 1px solid #1a1d2b;
    border-radius: 6px;
    padding: 11px 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: all 0.3s ease;
}
.milestone-slot-card.active {
    border-color: #38bdf8;
    background: linear-gradient(180deg, #111a28 0%, #0e111a 100%);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.2);
}
.milestone-slot-card.unlocked {
    border-color: #eab308;
    background: linear-gradient(180deg, #1b180f 0%, #10121a 100%);
    box-shadow: 0 0 14px rgba(234, 179, 8, 0.2);
}

.milestone-diamond-badge {
    position: absolute;
    top: -9px;
    width: 18px;
    height: 18px;
    background: #151824;
    border: 1px solid #252a3b;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.milestone-diamond-badge span {
    transform: rotate(-45deg);
    font-size: 9.5px;
    font-weight: 800;
    color: #94a3b8;
}
.milestone-slot-card.active .milestone-diamond-badge {
    background: #0284c7;
    border-color: #38bdf8;
}
.milestone-slot-card.active .milestone-diamond-badge span {
    color: #ffffff;
}
.milestone-slot-card.unlocked .milestone-diamond-badge {
    background: #ca8a04;
    border-color: #eab308;
}

.milestone-item-display {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3px 0 3px;
    position: relative;
}
.milestone-padlock {
    font-size: 14px;
    color: #434961;
}
.milestone-status-tag {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #454a61;
    margin-top: 2px;
}
.milestone-slot-card.active .milestone-status-tag {
    color: #38bdf8;
}
.milestone-slot-card.unlocked .milestone-status-tag {
    color: #eab308;
}

/* 4. Wheel Stage: Broad Sweeping Arc Arena (Matches Image 1) */
.event-wheel-stage {
    padding: 10px 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 30%, #121420 0%, #08090d 80%);
    position: relative;
    overflow: hidden;
}

/* Character Selector Bar */
.event-char-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    z-index: 5;
}
.event-char-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
}
.event-char-card {
    cursor: pointer;
    margin: 0;
}
.event-char-card input {
    display: none;
}
.event-char-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(16, 18, 28, 0.85);
    border: 1px solid #1f2334;
    border-radius: 5px;
    transition: all 0.2s ease;
}
.event-char-card:hover .event-char-inner {
    background: #171a27;
    border-color: #2e354c;
}
.event-char-card input:checked + .event-char-inner {
    background: rgba(56, 189, 248, 0.12);
    border-color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
}
.event-char-name {
    font-size: 11px;
    font-weight: 700;
    color: #f1f5f9;
}
.event-char-lv {
    font-size: 10px;
    color: #818cf8;
}

/* 2-Column Split Layout */
.event-stage-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    margin-top: 6px;
    align-items: stretch;
}
@media (max-width: 820px) {
    .event-stage-split {
        grid-template-columns: 1fr;
    }
}

/* Left Column: Interactive Wheel Stage */
.stage-left-wheel {
    background: radial-gradient(circle at 50% 30%, #151826 0%, #08090d 90%);
    border: 1px solid #1a1e2e;
    border-radius: 8px;
    padding: 10px 8px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 380px;
}
.wheel-scale-wrapper {
    width: 100%;
    max-width: 440px;
    height: 310px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Right Column: Possible Rewards Panel */
.stage-right-panel {
    background: #0d0f17;
    border: 1px solid #1c2030;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    min-height: 380px;
}
.rewards-panel-header {
    background: #11131c;
    border-bottom: 1px solid #1a1e2e;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rewards-panel-title {
    font-size: 11.5px;
    font-weight: 800;
    color: #eab308;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rewards-panel-count {
    font-size: 10px;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    padding: 2px 7px;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.25);
}
.rewards-scroll-wrap {
    flex: 1;
    max-height: 350px;
    overflow-y: auto;
    padding: 0;
}
.rewards-scroll-wrap::-webkit-scrollbar {
    width: 5px;
}
.rewards-scroll-wrap::-webkit-scrollbar-track {
    background: #0d0e16;
}
.rewards-scroll-wrap::-webkit-scrollbar-thumb {
    background: #1f2438;
    border-radius: 3px;
}
.rewards-scroll-wrap::-webkit-scrollbar-thumb:hover {
    background: #38bdf8;
}
.table-rewards-list {
    width: 100%;
    border-collapse: collapse;
}
.table-rewards-list th {
    background: #0e1017;
    border-bottom: 1px solid #191c2a;
    padding: 7px 10px;
    font-size: 10px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 5;
}
.table-rewards-list td {
    padding: 6px 10px;
    border-bottom: 1px solid #141724;
    font-size: 11.5px;
    vertical-align: middle;
}
.table-rewards-list tr:hover td {
    background: #131623;
}
.chance-tag {
    font-size: 10px;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    display: inline-block;
    white-space: nowrap;
}

/* Scaled Sweeping Arc Wheel Container */
.wheel-turntable-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(0.84);
    transform-origin: top center;
    width: 720px;
    height: 440px;
    overflow: hidden;
}
.wheel-canvas-disc {
    width: 900px;
    height: 900px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -450px;
}

/* Golden Pointer (At Top 12 o\'clock) */
.wheel-gold-pointer {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 17px solid #e5b338;
    z-index: 25;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.9));
}

/* Active Highlight Keystone Slot Box (Exact shape & glow from Image 1) */
.wheel-active-frame {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 82px;
    height: 90px;
    border: 2px solid #e5b338;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(229, 179, 56, 0.16) 0%, rgba(229, 179, 56, 0.04) 100%);
    box-shadow: 0 0 24px rgba(229, 179, 56, 0.5), inset 0 0 14px rgba(229, 179, 56, 0.2);
    pointer-events: none;
    z-index: 15;
}

/* Center Spin Button (Positioned cleanly under the arc, exactly as Image 1) */
.wheel-center-hub {
    position: absolute;
    top: 220px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-gold-spin {
    background: linear-gradient(180deg, #ecc369 0%, #c49438 100%);
    border: 1px solid #ffe8a3;
    border-radius: 26px;
    padding: 13px 36px;
    color: #171203;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    box-shadow: 0 4px 20px rgba(196, 148, 56, 0.45);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.btn-gold-spin:hover:not(:disabled) {
    background: linear-gradient(180deg, #ffd97f 0%, #d4a344 100%);
    box-shadow: 0 6px 26px rgba(236, 195, 105, 0.65);
    transform: translateY(-2px);
}
.btn-gold-spin:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(184, 134, 45, 0.4);
}
.btn-gold-spin:disabled {
    background: #181922 !important;
    border-color: #2b2e3e !important;
    color: #4e5366 !important;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

/* Daily Limit Cooldown Notice */
.event-cooldown-box {
    margin-top: 10px;
    padding: 6px 14px;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid #ef4444;
    border-radius: 6px;
    color: #fca5a5;
    font-size: 11.5px;
    font-weight: 700;
    display: none;
    align-items: center;
    gap: 7px;
    z-index: 5;
}

/* Winning Reward Popup Modal (Esports Style Matching Gacha Box) */
.event-win-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.45) !important;
    z-index: 2147483647 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(2px) !important;
}
.event-win-overlay.show {
    display: flex !important;
}
.event-win-toast {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #0f1018;
    border: 1px solid #10b981;
    border-radius: 20px;
    padding: 8px 22px;
    color: #f1f5f9;
    font-size: 12.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.7);
    animation: toastSlideDown 0.35s ease;
    z-index: 20;
    white-space: nowrap;
}
@keyframes toastSlideDown {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
.event-win-card {
    background: rgba(14, 16, 25, 0.96) !important;
    border: 1px solid #eab308 !important;
    border-radius: 12px !important;
    width: 420px !important;
    max-width: 90vw !important;
    padding: 24px 20px 20px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 15px 45px rgba(0,0,0,0.85), 0 0 25px rgba(234, 179, 8, 0.35) !important;
    animation: winCardPopIn 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}
.event-win-close-corner {
    position: absolute;
    top: 10px;
    right: 12px;
    color: #64748b;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 10;
}
.event-win-close-corner:hover {
    color: #f1f5f9;
}
@keyframes winCardPopIn {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.event-win-glow-burst {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 220px;
    background: radial-gradient(circle, rgba(234, 179, 8, 0.22) 0%, transparent 70%);
    pointer-events: none;
}
.event-win-congrats {
    font-size: 11px;
    font-weight: 800;
    color: #f59e0b;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.event-win-title {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
}
.event-win-center-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.event-win-box-pedestal {
    width: 90px;
    height: 90px;
    background: #141624;
    border: 2px solid #eab308;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 0 25px rgba(234, 179, 8, 0.4);
    position: relative;
}
.event-win-box-pedestal img {
    max-width: 64px;
    max-height: 64px;
}
.win-pedestal-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
    line-height: 1;
    z-index: 5;
}
.event-win-item-talics {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 6px;
    margin-bottom: 8px;
    background: rgba(10, 12, 20, 0.85);
    border: 1px solid rgba(234, 179, 8, 0.25);
    padding: 4px 12px;
    border-radius: 20px;
    min-height: 24px;
}
.event-win-item-talics:empty {
    display: none !important;
}
.event-win-item-talics .talic-icon {
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin: 0 1px;
}
.event-win-item-name {
    font-size: 16px;
    font-weight: 800;
    color: #38bdf8;
    margin-bottom: 4px;
}
.event-win-char-target {
    font-size: 12px;
    color: #94a3b8;
}
.event-win-char-target strong {
    color: #f1f5f9;
}
.btn-claim-win {
    background: linear-gradient(180deg, #ecc369 0%, #c49438 100%);
    border: none;
    border-radius: 20px;
    padding: 10px 36px;
    color: #171203;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(196, 148, 56, 0.4);
    transition: all 0.2s ease;
    margin-top: 15px;
}
.btn-claim-win:hover {
    background: linear-gradient(180deg, #ffd97f 0%, #d4a344 100%);
    transform: translateY(-1px);
}

/* Secondary Panels (Rewards & Logs) */
.event-secondary-panel {
    background: #0b0c13;
    border: 1px solid #1a1c29;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.event-panel-title {
    font-size: 14.5px;
    font-weight: 800;
    color: #38bdf8;
    margin: 0 0 10px 0;
    padding-bottom: 7px;
    border-bottom: 1px solid #1a1c29;
    display: flex;
    align-items: center;
    gap: 7px;
}
.table-event-dark {
    width: 100%;
    border-collapse: collapse;
}
.table-event-dark th {
    background: #11131c;
    color: #7b8296;
    padding: 8px 12px;
    font-size: 10.5px;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 1px solid #1a1d2b;
    text-align: left;
}
.table-event-dark td {
    padding: 8px 12px;
    border-bottom: 1px solid #131520;
    font-size: 12px;
    vertical-align: middle;
}
.table-event-dark tr:hover td {
    background: rgba(255,255,255,0.02);
}
.table-event-dark th:nth-child(5),
.table-event-dark td:nth-child(5) {
    white-space: nowrap !important;
}
.talic-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1px;
    flex-shrink: 0;
}
.history-talics-wrap {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 1.5px;
}
.table-pagination {
    margin-top: 10px;
    text-align: right;
}
.table-pagination a {
    color: #38bdf8;
    background: #10121a;
    border: 1px solid #1a1d2b;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 11px;
    margin-left: 4px;
}
.table-pagination a.active {
    background: #0284c7;
    color: #fff;
    border-color: #38bdf8;
}

/* --------------------------------------------------------------------------
   7. USER GATCHA BOX (MYSTERY BOX / GACHA ROLLS)
   -------------------------------------------------------------------------- */
/* Main Page Wrapper */
.gacha-box-page {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Tahoma, Geneva, Verdana, sans-serif;
    color: #e2e8f0;
    position: relative;
    max-width: 1120px; width: 95%;
    margin: 10px auto 30px;
}

/* Event Container Frame */
.event-wheel-frame {
    background: #0b0c13;
    border: 1px solid #1a1c29;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9);
    margin-bottom: 25px;
    position: relative;
}

/* 1. Header Bar */
.event-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    background: #0f111a;
    border-bottom: 1px solid #171926;
}
.event-title-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #38bdf8;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.event-title-badge i {
    font-size: 13px;
    color: #0284c7;
}
.event-timer-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.event-timer-icon {
    color: #f59e0b;
    font-size: 13px;
}
.event-timer-label {
    color: #f59e0b;
    font-weight: 800;
    font-size: 11px;
}
.event-timer-value {
    color: #f87171;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.5px;
}
.event-header-close {
    color: #64748b;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.2s;
    padding: 2px 4px;
}
.event-header-close:hover {
    color: #f1f5f9;
}

/* 2. Sub-Header: Bonus Pool & Balance */
.event-sub-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #141622;
    background: rgba(12, 13, 20, 0.95);
    flex-wrap: wrap;
    gap: 12px;
}
.event-bonus-pool-info {
    display: flex;
    flex-direction: column;
}
.event-pool-title {
    color: #eab308;
    font-size: 13.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 7px;
}
.event-pool-title i {
    font-size: 15px;
    color: #facc15;
}
.event-pool-subtitle {
    color: #71778c;
    font-size: 11.5px;
    margin-top: 2px;
}

/* Balance Widget */
.event-balance-card {
    background: #11131c;
    border: 1px solid #1e2233;
    border-radius: 6px;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.event-balance-icon {
    font-size: 16px;
    color: #eab308;
}
.event-balance-details {
    display: flex;
    flex-direction: column;
}
.event-balance-label {
    font-size: 9.5px;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.event-balance-num {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
}
.event-curr-select {
    background: #171926;
    border: 1px solid #282d40;
    border-radius: 5px;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 6px;
    outline: none;
    cursor: pointer;
}

/* 3. Milestone Progression Track (6 Slots in 1 Row) */
.event-milestones-track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 14px 20px 10px;
    background: #0d0e16;
    border-bottom: 1px solid #141622;
}
@media (max-width: 650px) {
    .event-milestones-track {
        grid-template-columns: repeat(3, 1fr);
    }
}
.milestone-slot-card {
    background: #10121a;
    border: 1px solid #1a1d2b;
    border-radius: 6px;
    padding: 11px 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: all 0.3s ease;
}
.milestone-slot-card.active {
    border-color: #38bdf8;
    background: linear-gradient(180deg, #111a28 0%, #0e111a 100%);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.2);
}
.milestone-slot-card.unlocked {
    border-color: #eab308;
    background: linear-gradient(180deg, #1b180f 0%, #10121a 100%);
    box-shadow: 0 0 14px rgba(234, 179, 8, 0.2);
}
.milestone-diamond-badge {
    position: absolute;
    top: -9px;
    width: 18px;
    height: 18px;
    background: #151824;
    border: 1px solid #252a3b;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.milestone-diamond-badge span {
    transform: rotate(-45deg);
    font-size: 9.5px;
    font-weight: 800;
    color: #94a3b8;
}
.milestone-slot-card.active .milestone-diamond-badge {
    background: #0284c7;
    border-color: #38bdf8;
}
.milestone-slot-card.active .milestone-diamond-badge span {
    color: #ffffff;
}
.milestone-slot-card.unlocked .milestone-diamond-badge {
    background: #ca8a04;
    border-color: #eab308;
}
.milestone-item-display {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3px 0 3px;
    position: relative;
}
.milestone-item-display > span {
    transform: scale(0.75);
    transform-origin: center center;
}
.milestone-padlock {
    font-size: 14px;
    color: #434961;
}
.milestone-status-tag {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #454a61;
    margin-top: 2px;
}
.milestone-slot-card.active .milestone-status-tag {
    color: #38bdf8;
}
.milestone-slot-card.unlocked .milestone-status-tag {
    color: #eab308;
}

/* 4. Gacha Box Stage: Epic 3D Arena */
.event-wheel-stage {
    padding: 14px 18px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 38%, #141826 0%, #08090d 80%);
    position: relative;
    overflow: hidden;
}

/* Character Selector Bar */
.event-char-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    z-index: 10;
}
.event-char-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
}
.event-char-card {
    cursor: pointer;
    margin: 0;
}
.event-char-card input {
    display: none;
}
.event-char-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    background: rgba(16, 18, 28, 0.85);
    border: 1px solid #1f2334;
    border-radius: 5px;
    transition: all 0.2s ease;
}
.event-char-card:hover .event-char-inner {
    background: #171a27;
    border-color: #2e354c;
}
.event-char-card input:checked + .event-char-inner {
    background: rgba(56, 189, 248, 0.12);
    border-color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
}
.event-char-name {
    font-size: 11px;
    font-weight: 700;
    color: #f1f5f9;
}
.event-char-lv {
    font-size: 10px;
    color: #818cf8;
}

/* 4. Gacha Box Stage Arena: 2-Column Split (Left: Box, Right: Possible Rewards) */
.event-wheel-stage {
    padding: 14px 18px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: radial-gradient(circle at 50% 30%, #151826 0%, #08090d 85%);
    position: relative;
    overflow: hidden;
}

/* 2-Column Split Layout */
.event-stage-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    margin-top: 6px;
    align-items: stretch;
}
@media (max-width: 820px) {
    .event-stage-split {
        grid-template-columns: 1fr;
    }
}

/* Left Column: Interactive Box Arena */
.stage-left-arena {
    background: radial-gradient(circle at 50% 38%, #141826 0%, #08090d 90%);
    border: 1px solid #1a1e2e;
    border-radius: 8px;
    padding: 18px 14px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 430px;
}

/* Gacha Box Showcase Stage Arena */
.gacha-stage-arena {
    position: relative;
    width: 100%;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 4px 0 8px;
}

/* Ambient Radial Halo behind box */
.box-halo-aura {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(234, 179, 8, 0.24) 0%, rgba(56, 189, 248, 0.1) 45%, transparent 70%);
    filter: blur(32px);
    pointer-events: none;
    z-index: 1;
    transition: all 0.5s ease;
}
.stage-left-arena.opening .box-halo-aura {
    background: radial-gradient(circle, rgba(253, 224, 71, 0.55) 0%, rgba(234, 179, 8, 0.3) 45%, transparent 70%);
    filter: blur(45px);
    transform: translate(-50%, -50%) scale(1.3);
}

/* Magical Rune Pedestal Platform */
.box-pedestal-platform {
    position: absolute;
    top: 64%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 85px;
    border-radius: 50%;
    border: 2px dashed rgba(234, 179, 8, 0.35);
    background: radial-gradient(ellipse at center, rgba(234, 179, 8, 0.16) 0%, rgba(14, 165, 233, 0.06) 50%, transparent 70%);
    box-shadow: 0 0 25px rgba(234, 179, 8, 0.3), inset 0 0 14px rgba(234, 179, 8, 0.15);
    pointer-events: none;
    z-index: 2;
    animation: runeRotate 24s linear infinite;
}
@keyframes runeRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Gacha Chest Box Wrapper & Hover Float */
.gacha-chest-wrapper {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    transition: transform 0.3s ease;
    animation: boxIdleFloating 3.5s ease-in-out infinite;
}
@keyframes boxIdleFloating {
    0%, 100% {
        transform: translateY(0px) scale(1);
        filter: drop-shadow(0 14px 20px rgba(0,0,0,0.85)) drop-shadow(0 0 18px rgba(234, 179, 8, 0.25));
    }
    50% {
        transform: translateY(-8px) scale(1.02);
        filter: drop-shadow(0 24px 28px rgba(0,0,0,0.95)) drop-shadow(0 0 28px rgba(234, 179, 8, 0.45));
    }
}
.gacha-chest-wrapper:hover {
    transform: scale(1.04);
}

.gacha-box-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
.gacha-box-img.opened {
    filter: drop-shadow(0 0 26px rgba(253, 224, 71, 0.85));
    animation: boxPopOpened 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes boxPopOpened {
    0% { transform: scale(0.85); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Violent Rumble Animation while opening */
.gacha-chest-wrapper.shaking {
    animation: boxRumbleEffect 1.1s cubic-bezier(.36,.07,.19,.97) infinite !important;
}
@keyframes boxRumbleEffect {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    15% { transform: translate(-5px, 2px) rotate(-3.5deg) scale(1.03); }
    30% { transform: translate(5px, -3px) rotate(3.5deg) scale(1.05); }
    45% { transform: translate(-6px, -2px) rotate(-4deg) scale(1.07); }
    60% { transform: translate(6px, 2px) rotate(4deg) scale(1.09); }
    75% { transform: translate(-4px, -2px) rotate(-2deg) scale(1.10); }
    90% { transform: translate(4px, 1px) rotate(2deg) scale(1.11); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1.11); }
}

/* Flash shockwave burst */
.box-glow-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(234, 179, 8, 0.85) 35%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    z-index: 15;
}
.box-glow-burst.flash {
    animation: shockwaveBurst 0.65s ease-out forwards;
}
@keyframes shockwaveBurst {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0.9; }
    40% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

/* Center Controls below Box */
.box-center-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 20;
    margin-top: 4px;
}
.open-count-tabs {
    display: flex;
    gap: 6px;
    background: rgba(15, 17, 26, 0.9);
    padding: 3px 6px;
    border-radius: 20px;
    border: 1px solid #282d40;
}
.count-pill {
    background: transparent;
    border: none;
    border-radius: 14px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.count-pill:hover {
    color: #f1f5f9;
}
.count-pill.active {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(2, 132, 199, 0.5);
}

.btn-gold-spin {
    background: linear-gradient(180deg, #ecc369 0%, #c49438 100%);
    border: 1px solid #ffe8a3;
    border-radius: 26px;
    padding: 12px 34px;
    color: #171203;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    box-shadow: 0 4px 20px rgba(196, 148, 56, 0.45);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.btn-gold-spin:hover:not(:disabled) {
    background: linear-gradient(180deg, #ffd97f 0%, #d4a344 100%);
    box-shadow: 0 6px 26px rgba(236, 195, 105, 0.65);
    transform: translateY(-2px);
}
.btn-gold-spin:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(184, 134, 45, 0.4);
}
.btn-gold-spin:disabled {
    background: #181922 !important;
    border-color: #2b2e3e !important;
    color: #4e5366 !important;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

/* Daily Limit Cooldown Notice */
.event-cooldown-box {
    margin-top: 10px;
    padding: 6px 14px;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid #ef4444;
    border-radius: 6px;
    color: #fca5a5;
    font-size: 11.5px;
    font-weight: 700;
    display: none;
    align-items: center;
    gap: 7px;
    z-index: 5;
}

/* Right Column: Possible Rewards Panel */
.stage-right-panel {
    background: #0d0f17;
    border: 1px solid #1c2030;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    min-height: 430px;
}
.rewards-panel-header {
    background: #11131c;
    border-bottom: 1px solid #1a1e2e;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rewards-panel-title {
    font-size: 11.5px;
    font-weight: 800;
    color: #eab308;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rewards-panel-count {
    font-size: 10px;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    padding: 2px 7px;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.25);
}
.rewards-scroll-wrap {
    flex: 1;
    max-height: 385px;
    overflow-y: auto;
    padding: 0;
}
.rewards-scroll-wrap::-webkit-scrollbar {
    width: 5px;
}
.rewards-scroll-wrap::-webkit-scrollbar-track {
    background: #0d0e16;
}
.rewards-scroll-wrap::-webkit-scrollbar-thumb {
    background: #1f2438;
    border-radius: 3px;
}
.rewards-scroll-wrap::-webkit-scrollbar-thumb:hover {
    background: #38bdf8;
}
.table-rewards-list {
    width: 100%;
    border-collapse: collapse;
}
.table-rewards-list th {
    background: #0e1017;
    border-bottom: 1px solid #191c2a;
    padding: 7px 10px;
    font-size: 10px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 5;
}
.table-rewards-list td {
    padding: 6px 10px;
    border-bottom: 1px solid #141724;
    font-size: 11.5px;
    vertical-align: middle;
}
.table-rewards-list tr:hover td {
    background: #131623;
}
.chance-tag {
    font-size: 10px;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    display: inline-block;
    white-space: nowrap;
}

/* Winning Reward Popup Modal */
.event-win-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.45) !important;
    z-index: 2147483647 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(2px) !important;
}
.event-win-overlay.show {
    display: flex !important;
}
.event-win-toast {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #0f1018;
    border: 1px solid #10b981;
    border-radius: 20px;
    padding: 8px 22px;
    color: #f1f5f9;
    font-size: 12.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.7);
    animation: toastSlideDown 0.35s ease;
    z-index: 20;
    white-space: nowrap;
}
@keyframes toastSlideDown {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
.event-win-card {
    background: rgba(14, 16, 25, 0.96) !important;
    border: 1px solid #eab308 !important;
    border-radius: 12px !important;
    width: 420px !important;
    max-width: 90vw !important;
    padding: 24px 20px 20px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 15px 45px rgba(0,0,0,0.85), 0 0 25px rgba(234, 179, 8, 0.35) !important;
    animation: winCardPopIn 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}
.event-win-close-corner {
    position: absolute;
    top: 10px;
    right: 12px;
    color: #64748b;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 10;
}
.event-win-close-corner:hover {
    color: #f1f5f9;
}
@keyframes winCardPopIn {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.event-win-glow-burst {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 220px;
    background: radial-gradient(circle, rgba(234, 179, 8, 0.22) 0%, transparent 70%);
    pointer-events: none;
}
.event-win-congrats {
    font-size: 11px;
    font-weight: 800;
    color: #f59e0b;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.event-win-title {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
}
.event-win-center-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.event-win-box-pedestal {
    width: 90px;
    height: 90px;
    background: #141624;
    border: 2px solid #eab308;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 0 25px rgba(234, 179, 8, 0.4);
    position: relative;
}
.event-win-box-pedestal img {
    max-width: 64px;
    max-height: 64px;
}
.win-pedestal-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
    line-height: 1;
    z-index: 5;
}
.event-win-item-talics {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 6px;
    margin-bottom: 8px;
    background: rgba(10, 12, 20, 0.85);
    border: 1px solid rgba(234, 179, 8, 0.25);
    padding: 4px 12px;
    border-radius: 20px;
    min-height: 24px;
}
.event-win-item-talics:empty {
    display: none !important;
}
.event-win-item-talics .talic-icon {
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin: 0 1px;
}
.event-win-item-name {
    font-size: 16px;
    font-weight: 800;
    color: #38bdf8;
    margin-bottom: 4px;
}
.event-win-char-target {
    font-size: 12px;
    color: #94a3b8;
}
.event-win-char-target strong {
    color: #f1f5f9;
}
.btn-claim-win {
    background: linear-gradient(180deg, #ecc369 0%, #c49438 100%);
    border: none;
    border-radius: 20px;
    padding: 10px 36px;
    color: #171203;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(196, 148, 56, 0.4);
    transition: all 0.2s ease;
    margin-top: 15px;
}
.btn-claim-win:hover {
    background: linear-gradient(180deg, #ffd97f 0%, #d4a344 100%);
    transform: translateY(-1px);
}

/* Multi-win Grid */
.event-win-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin: 15px 0;
    max-height: 250px;
    overflow-y: auto;
    padding: 4px;
}
.event-grid-card {
    position: relative;
    background: #12141f;
    border: 1px solid #1f2334;
    border-radius: 6px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.event-grid-card img {
    max-width: 44px;
    max-height: 44px;
}
.event-grid-name {
    font-size: 9.5px;
    font-weight: 700;
    color: #f1f5f9;
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.event-grid-amt {
    font-size: 10px;
    color: #38bdf8;
    font-weight: 800;
}

/* 5. History Table */
.event-history-wrap {
    background: #0d0e16;
    border: 1px solid #1a1c29;
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
}
.event-history-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.event-history-title i {
    color: #eab308;
}
.table-event-dark {
    width: 100%;
    border-collapse: collapse;
}
.table-event-dark thead th {
    background: #10121b;
    border-bottom: 1px solid #1d2130;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.table-event-dark tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #141724;
    font-size: 12.5px;
    vertical-align: middle;
}
.table-event-dark tbody tr:hover td {
    background: #111420;
}
.table-event-dark thead th:nth-child(5),
.table-event-dark tbody td:nth-child(5) {
    white-space: nowrap !important;
}
.talic-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1px;
    flex-shrink: 0;
}
.history-talics-wrap {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 1.5px;
}
.table-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 15px;
}
.table-pagination a {
    color: #94a3b8;
    background: #12141f;
    border: 1px solid #1f2334;
    padding: 5px 11px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s ease;
}
.table-pagination a:hover, .table-pagination a.active {
    color: #ffffff;
    background: #0284c7;
    border-color: #38bdf8;
}

/* --------------------------------------------------------------------------
   8. USER GATCHA VOUCHER DISCOUNT (STORE DISCOUNT VOUCHERS)
   -------------------------------------------------------------------------- */
/* Main Layout Wrapper */
    .gv-wrapper {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        color: #f1f5f9;
        margin: 15px auto 40px;
        max-width: 1200px;
    }

    /* Top Header Bar */
    .gv-header-card {
        background: linear-gradient(135deg, #0e111a 0%, #151928 50%, #0d0f17 100%);
        border: 1px solid #1e2438;
        border-radius: 12px;
        padding: 20px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        position: relative;
        overflow: hidden;
    }
    .gv-header-card::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; height: 2px;
        background: linear-gradient(90deg, #38bdf8, #eab308, #38bdf8);
    }
    .gv-header-left {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .gv-title-icon-box {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(234, 179, 8, 0.2));
        border: 1px solid rgba(56, 189, 248, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #38bdf8;
        box-shadow: 0 0 20px rgba(56, 189, 248, 0.25);
    }
    .gv-title-text h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: 0.8px;
        color: #ffffff;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .gv-title-text p {
        margin: 4px 0 0;
        font-size: 12.5px;
        color: #94a3b8;
    }
    .gv-balance-capsules {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .gv-balance-pill {
        background: #090b10;
        border: 1px solid #1f253a;
        border-radius: 8px;
        padding: 8px 16px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .gv-balance-pill .lbl {
        font-size: 10.5px;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .gv-balance-pill .val {
        font-size: 17px;
        font-weight: 800;
        color: #38bdf8;
        font-family: monospace;
    }
    .gv-balance-pill.cost-pill .val {
        color: #eab308;
    }

    /* Navigation Tabs */
    .gv-tabs-nav {
        display: flex;
        gap: 8px;
        background: #0d0f17;
        padding: 6px;
        border-radius: 10px;
        border: 1px solid #1a1e2e;
        margin-bottom: 22px;
    }
    .gv-tab-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 18px;
        border-radius: 8px;
        background: transparent;
        border: 1px solid transparent;
        color: #94a3b8;
        font-size: 13.5px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.25s ease;
    }
    .gv-tab-btn:hover {
        color: #f1f5f9;
        background: rgba(255, 255, 255, 0.04);
    }
    .gv-tab-btn.active {
        background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(234, 179, 8, 0.12));
        border: 1px solid rgba(56, 189, 248, 0.45);
        color: #38bdf8;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
    }

    /* Section Cards */
    .gv-content-card {
        background: #0f111a;
        border: 1px solid #1a1e2e;
        border-radius: 12px;
        padding: 22px 24px;
        margin-bottom: 25px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    .gv-section-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #1c2133;
        padding-bottom: 12px;
        margin-bottom: 18px;
    }
    .gv-section-title {
        font-size: 15px;
        font-weight: 800;
        color: #f8fafc;
        display: flex;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .gv-section-title i {
        color: #38bdf8;
    }
    .gv-section-desc {
        font-size: 12.5px;
        color: #94a3b8;
        margin-top: 2px;
    }

    /* Character Selection Pills (Identical to Fortune Wheel & Gacha Box) */
    .event-char-selector {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 18px;
    }
    .event-char-pill {
        cursor: pointer;
        margin: 0;
    }
    .event-char-pill input {
        display: none;
    }
    .char-pill-content {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 6px 14px;
        background: #12141f;
        border: 1px solid #23283c;
        border-radius: 20px;
        transition: all 0.2s ease;
    }
    .char-pill-content img {
        height: 14px;
    }
    .char-pill-name {
        font-weight: 700;
        font-size: 12.5px;
        color: #cbd5e1;
    }
    .char-pill-lv {
        font-size: 11px;
        color: #38bdf8;
        font-weight: 700;
    }
    .event-char-pill:hover .char-pill-content {
        background: #1a1e2f;
        border-color: #38bdf8;
    }
    .event-char-pill input:checked + .char-pill-content {
        background: rgba(56, 189, 248, 0.15);
        border-color: #38bdf8;
        box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
    }
    .event-char-pill input:checked + .char-pill-content .char-pill-name {
        color: #ffffff;
    }

    /* Requirement Banner */
    .gv-req-banner {
        background: rgba(14, 165, 233, 0.08);
        border: 1px solid rgba(56, 189, 248, 0.25);
        border-radius: 8px;
        padding: 12px 16px;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .gv-req-banner i {
        font-size: 18px;
        color: #38bdf8;
    }
    .gv-req-list {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        font-size: 12px;
        color: #94a3b8;
    }
    .gv-req-list strong {
        color: #f1f5f9;
    }

    /* Table Styling (.table-event-dark) */
    .table-event-dark {
        width: 100%;
        border-collapse: collapse;
    }
    .table-event-dark thead th {
        background: #10121b;
        border-bottom: 1px solid #1d2130;
        padding: 10px 14px;
        font-size: 11px;
        font-weight: 800;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: left;
    }
    .table-event-dark tbody td {
        padding: 10px 14px;
        border-bottom: 1px solid #141724;
        font-size: 12.5px;
        vertical-align: middle;
    }
    .table-event-dark tbody tr:hover td {
        background: #121524;
    }

    /* Exchange Action Button */
    .btn-action-exchange {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: #ffffff;
        border: none;
        padding: 6px 16px;
        border-radius: 6px;
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
    }
    .btn-action-exchange:hover {
        background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
        transform: translateY(-1px);
        box-shadow: 0 5px 15px rgba(16, 185, 129, 0.5);
    }
    .btn-action-exchange:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

    /* 2-Column Split for Gacha Tab */
    .event-stage-split {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 18px;
        width: 100%;
        align-items: stretch;
    }
    @media (max-width: 860px) {
        .event-stage-split {
            grid-template-columns: 1fr;
        }
    }

    /* Left Column: Interactive Box Arena */
    .stage-left-arena {
        background: radial-gradient(circle at 50% 38%, #141826 0%, #08090d 90%);
        border: 1px solid #1a1e2e;
        border-radius: 12px;
        padding: 24px 16px 28px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        min-height: 420px;
    }
    .box-halo-aura {
        position: absolute;
        top: 38%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 260px;
        height: 260px;
        background: radial-gradient(circle, rgba(234, 179, 8, 0.24) 0%, rgba(56, 189, 248, 0.1) 45%, transparent 70%);
        filter: blur(32px);
        pointer-events: none;
        z-index: 1;
        transition: all 0.5s ease;
    }
    .stage-left-arena.opening .box-halo-aura {
        background: radial-gradient(circle, rgba(253, 224, 71, 0.55) 0%, rgba(234, 179, 8, 0.3) 45%, transparent 70%);
        filter: blur(45px);
        transform: translate(-50%, -50%) scale(1.3);
    }
    .box-pedestal-platform {
        position: absolute;
        top: 64%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 250px;
        height: 85px;
        border-radius: 50%;
        border: 2px dashed rgba(234, 179, 8, 0.35);
        background: radial-gradient(ellipse at center, rgba(234, 179, 8, 0.16) 0%, rgba(14, 165, 233, 0.06) 50%, transparent 70%);
        box-shadow: 0 0 25px rgba(234, 179, 8, 0.3), inset 0 0 14px rgba(234, 179, 8, 0.15);
        pointer-events: none;
        z-index: 2;
        animation: runeRotate 24s linear infinite;
    }
    @keyframes runeRotate {
        from { transform: translate(-50%, -50%) rotate(0deg); }
        to { transform: translate(-50%, -50%) rotate(360deg); }
    }
    .gacha-chest-wrapper {
        position: relative;
        width: 220px;
        height: 220px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        cursor: pointer;
        transition: transform 0.3s ease;
        animation: boxIdleFloating 3.5s ease-in-out infinite;
    }
    @keyframes boxIdleFloating {
        0%, 100% {
            transform: translateY(0px) scale(1);
            filter: drop-shadow(0 14px 20px rgba(0,0,0,0.85)) drop-shadow(0 0 18px rgba(234, 179, 8, 0.25));
        }
        50% {
            transform: translateY(-8px) scale(1.02);
            filter: drop-shadow(0 24px 28px rgba(0,0,0,0.95)) drop-shadow(0 0 28px rgba(234, 179, 8, 0.45));
        }
    }
    .gacha-chest-wrapper:hover {
        transform: scale(1.04);
    }
    .gacha-box-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        user-select: none;
    }
    .gacha-box-img.opened {
        filter: drop-shadow(0 0 26px rgba(253, 224, 71, 0.85));
        animation: boxPopOpened 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    @keyframes boxPopOpened {
        0% { transform: scale(0.85); opacity: 0; }
        60% { transform: scale(1.08); opacity: 1; }
        100% { transform: scale(1); opacity: 1; }
    }
    .gacha-chest-wrapper.shaking {
        animation: boxRumbleEffect 1.1s cubic-bezier(.36,.07,.19,.97) infinite !important;
    }
    @keyframes boxRumbleEffect {
        0% { transform: translate(0, 0) rotate(0deg) scale(1); }
        15% { transform: translate(-5px, 2px) rotate(-3.5deg) scale(1.03); }
        30% { transform: translate(5px, -3px) rotate(3.5deg) scale(1.05); }
        45% { transform: translate(-6px, -2px) rotate(-4deg) scale(1.07); }
        60% { transform: translate(6px, 2px) rotate(4deg) scale(1.09); }
        75% { transform: translate(-4px, -2px) rotate(-2deg) scale(1.10); }
        90% { transform: translate(4px, 1px) rotate(2deg) scale(1.11); }
        100% { transform: translate(0, 0) rotate(0deg) scale(1.11); }
    }
    .box-glow-burst {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 10px; height: 10px;
        border-radius: 50%;
        background: radial-gradient(circle, #fff, #fde047 40%, transparent 80%);
        opacity: 0;
        pointer-events: none;
        z-index: 15;
    }
    .box-glow-burst.flash {
        animation: glowFlashBurst 0.6s ease-out forwards;
    }
    @keyframes glowFlashBurst {
        0% { width: 10px; height: 10px; opacity: 1; filter: blur(0); }
        50% { width: 340px; height: 340px; opacity: 0.95; filter: blur(10px); }
        100% { width: 440px; height: 440px; opacity: 0; filter: blur(25px); }
    }

    /* Spin Button */
    .btn-gold-spin {
        position: relative;
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
        color: #ffffff;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        border: 1px solid rgba(253, 224, 71, 0.6);
        border-radius: 50px;
        padding: 13px 40px;
        cursor: pointer;
        outline: none;
        box-shadow: 0 0 25px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        transition: all 0.25s ease;
        margin-top: 20px;
        z-index: 10;
        min-width: 250px;
    }
    .btn-gold-spin:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 0 35px rgba(245, 158, 11, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
    .btn-gold-spin:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

    /* Right Side Panel: Possible Vouchers & Instructions */
    .stage-right-panel {
        background: #0f111a;
        border: 1px solid #1a1e2e;
        border-radius: 12px;
        padding: 18px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .panel-inner-title {
        font-size: 13.5px;
        font-weight: 800;
        color: #f1f5f9;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        border-bottom: 1px solid #1c2133;
        padding-bottom: 8px;
    }
    .voucher-tier-card {
        background: #141724;
        border: 1px solid #1e243a;
        border-radius: 8px;
        padding: 10px 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        transition: all 0.2s ease;
    }
    .voucher-tier-card:hover {
        border-color: #38bdf8;
        background: #181d2e;
    }
    .tier-badge {
        font-size: 13px;
        font-weight: 800;
        color: #eab308;
        background: rgba(234, 179, 8, 0.15);
        border: 1px solid rgba(234, 179, 8, 0.4);
        padding: 3px 10px;
        border-radius: 20px;
    }
    .tier-label {
        font-size: 13px;
        font-weight: 700;
        color: #cbd5e1;
    }
    .tier-pool-count {
        font-size: 11px;
        color: #64748b;
    }

    /* Step guide cards */
    .gv-step-box {
        background: rgba(56, 189, 248, 0.05);
        border: 1px dashed rgba(56, 189, 248, 0.3);
        border-radius: 8px;
        padding: 12px 14px;
        margin-top: 14px;
    }
    .gv-step-box h4 {
        margin: 0 0 6px;
        font-size: 12px;
        color: #38bdf8;
        text-transform: uppercase;
        font-weight: 800;
    }
    .gv-step-box ol {
        margin: 0;
        padding-left: 18px;
        font-size: 11.5px;
        color: #94a3b8;
    }
    .gv-step-box li {
        margin-bottom: 4px;
    }

    /* History Log Custom Elements */
    .badge-gain {
        color: #10b981;
        font-weight: 800;
        background: rgba(16, 185, 129, 0.15);
        border: 1px solid rgba(16, 185, 129, 0.3);
        padding: 2px 8px;
        border-radius: 4px;
    }
    .badge-loss {
        color: #ef4444;
        font-weight: 800;
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.3);
        padding: 2px 8px;
        border-radius: 4px;
    }
    .history-voucher-code {
        font-family: monospace;
        font-weight: 800;
        color: #38bdf8;
        background: rgba(56, 189, 248, 0.12);
        border: 1px solid rgba(56, 189, 248, 0.35);
        padding: 2px 8px;
        border-radius: 4px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: all 0.2s;
    }
    .history-voucher-code:hover {
        background: rgba(56, 189, 248, 0.25);
        border-color: #38bdf8;
    }

    /* Win Modal (100% Identical to Gacha Box Win Modal) */
    .event-win-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(2px) !important;
        display: none;
        align-items: center !important;
        justify-content: center !important;
        z-index: 2147483647 !important;
    }
    .event-win-overlay.show {
        display: flex !important;
    }
    .event-win-card {
        background: rgba(14, 16, 25, 0.96) !important;
        border: 1px solid #eab308 !important;
        border-radius: 12px !important;
        width: 420px !important;
        max-width: 90vw !important;
        padding: 24px 20px 20px !important;
        text-align: center !important;
        position: relative !important;
        overflow: hidden !important;
        box-shadow: 0 15px 45px rgba(0,0,0,0.85), 0 0 25px rgba(234, 179, 8, 0.35) !important;
        animation: winCardPopIn 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }
    @keyframes winCardPopIn {
        from { transform: scale(0.85); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
    .event-win-close-corner {
        position: absolute;
        top: 10px;
        right: 12px;
        color: #64748b;
        font-size: 15px;
        cursor: pointer;
        transition: color 0.2s;
        z-index: 10;
    }
    .event-win-close-corner:hover {
        color: #f1f5f9;
    }
    .event-win-congrats {
        font-size: 11px;
        font-weight: 800;
        color: #eab308;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 2px;
    }
    .event-win-title {
        font-size: 18px;
        font-weight: 900;
        color: #ffffff;
        text-transform: uppercase;
        margin-bottom: 16px;
    }
    .event-win-center-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
    }
    .event-win-box-pedestal {
        width: 90px;
        height: 90px;
        background: #141624;
        border: 2px solid #eab308;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        box-shadow: 0 0 25px rgba(234, 179, 8, 0.4);
        position: relative;
    }
    .win-pedestal-badge {
        position: absolute;
        top: 6px;
        right: 6px;
        background: linear-gradient(135deg, #ef4444, #b91c1c);
        color: #ffffff;
        font-size: 11px;
        font-weight: 800;
        padding: 2px 7px;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
        line-height: 1;
        z-index: 5;
    }
    .event-win-item-name {
        font-size: 16px;
        font-weight: 800;
        color: #38bdf8;
        margin-bottom: 4px;
    }
    .event-win-item-talics {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 4px;
        margin-bottom: 8px;
        background: rgba(10, 12, 20, 0.85);
        border: 1px solid rgba(234, 179, 8, 0.35);
        padding: 5px 16px;
        border-radius: 20px;
        min-height: 24px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .event-win-item-talics:hover {
        border-color: #38bdf8;
        background: rgba(18, 22, 38, 0.95);
    }
    .event-win-char-target {
        font-size: 12px;
        color: #94a3b8;
    }
    .event-win-char-target strong {
        color: #f1f5f9;
    }
    .btn-claim-win {
        background: linear-gradient(180deg, #ecc369 0%, #c49438 100%);
        border: none;
        border-radius: 20px;
        padding: 10px 36px;
        color: #171203;
        font-weight: 800;
        font-size: 13px;
        letter-spacing: 0.5px;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(196, 148, 56, 0.4);
        transition: all 0.2s ease;
        margin-top: 15px;
    }
    .btn-claim-win:hover {
        background: linear-gradient(180deg, #ffd97f 0%, #d4a344 100%);
        transform: translateY(-1px);
    }

/* --------------------------------------------------------------------------
   9. USER CLAIM GUILD REWARD V1 (GUILD RANK MILESTONES)
   -------------------------------------------------------------------------- */
/* Reset & Scope */
.cgr-page-wrapper {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: #e2e8f0;
    margin-bottom: 30px;
    line-height: 1.5;
}
.cgr-page-wrapper * {
    box-sizing: border-box;
}

/* Master Frame */
.cgr-frame {
    background: #0b0c13;
    border: 1px solid #1a1e2f;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65);
    overflow: hidden;
    position: relative;
}

/* Header Bar */
.cgr-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(90deg, #121624 0%, #171c30 100%);
    border-bottom: 1px solid #1f263d;
    flex-wrap: wrap;
    gap: 12px;
}
.cgr-title-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cgr-title-badge .cgr-icon {
    font-size: 20px;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, 0.25);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}
.cgr-title-badge h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #ffffff;
    text-transform: uppercase;
}
.cgr-title-badge span {
    display: block;
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 500;
    margin-top: 1px;
}
.cgr-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cgr-badge {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.4px;
}
.cgr-badge-cyan {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
}
.cgr-badge-emerald {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
}
.cgr-badge-amber {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}
.cgr-badge-purple {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #c084fc;
}

/* Guild HUD Banner */
.cgr-hud-banner {
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(18, 22, 36, 0.95), rgba(11, 13, 21, 0.98));
    border-bottom: 1px solid #1a2033;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
}
@media (max-width: 900px) {
    .cgr-hud-banner {
        grid-template-columns: 1fr;
    }
}
.cgr-guild-crest {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, rgba(15, 23, 42, 0.9) 80%);
    border: 2px solid rgba(245, 158, 11, 0.35);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(245, 158, 11, 0.15);
}
.cgr-guild-crest img {
    height: 40px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.cgr-guild-info h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}
.cgr-guild-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cgr-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
    background: #171d2e;
    border: 1px solid #28334d;
    color: #cbd5e1;
}

/* Metrics & Requirements Strip */
.cgr-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 16px 24px;
    background: rgba(11, 13, 21, 0.7);
    border-bottom: 1px solid #1a1e2f;
}
.cgr-metric-box {
    background: #121624;
    border: 1px solid #1f273d;
    border-radius: 8px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cgr-metric-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.cgr-metric-amber .cgr-metric-icon   { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.25); }
.cgr-metric-cyan .cgr-metric-icon    { background: rgba(56, 189, 248, 0.12); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.25); }
.cgr-metric-emerald .cgr-metric-icon { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.25); }
.cgr-metric-purple .cgr-metric-icon  { background: rgba(168, 85, 247, 0.12); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.25); }
.cgr-metric-content {
    display: flex;
    flex-direction: column;
}
.cgr-metric-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cgr-metric-value {
    font-size: 13px;
    font-weight: 800;
    color: #f1f5f9;
}

/* Section Wrapper */
.cgr-section {
    padding: 24px;
}
.cgr-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}
.cgr-section-header h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Search Bar */
.cgr-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cgr-search-input {
    background: #141829;
    border: 1px solid #222b45;
    border-radius: 6px;
    padding: 8px 14px;
    color: #ffffff;
    font-size: 12.5px;
    outline: none;
    transition: all 0.2s;
    min-width: 220px;
}
.cgr-search-input:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}
.cgr-btn-search {
    background: #1a2033;
    border: 1px solid #28334d;
    color: #e2e8f0;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cgr-btn-search:hover {
    background: #232c45;
    border-color: #38bdf8;
    color: #38bdf8;
}

/* Member Roster Card */
.cgr-member-card {
    background: #111422;
    border: 1px solid #1f273d;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.cgr-member-card:hover {
    border-color: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.cgr-member-card.is-leader {
    border-color: rgba(245, 158, 11, 0.5);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.04) 0%, #111422 100%);
}
.cgr-member-card.is-claimed {
    opacity: 0.65;
}
.cgr-member-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 260px;
}
.cgr-member-crest {
    width: 44px;
    height: 44px;
    background: #141829;
    border: 1px solid #222b45;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cgr-member-identity h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cgr-member-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #94a3b8;
}

/* Action Buttons */
.cgr-btn-select {
    padding: 9px 20px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border: 1px solid #38bdf8;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 3px 12px rgba(2, 132, 199, 0.3);
    transition: all 0.2s;
}
.cgr-btn-select:hover:not(:disabled) {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
    box-shadow: 0 4px 18px rgba(56, 189, 248, 0.5);
    transform: translateY(-1px);
}
.cgr-btn-select:disabled {
    background: #171d2e;
    border-color: #26314d;
    color: #64748b;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}
.cgr-btn-select.claimed {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

/* Select Reward View */
.cgr-select-panel {
    background: #111422;
    border: 1px solid #1f273d;
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
}
.cgr-select-header {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #ffffff;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1f273d;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Custom Dropdown for Item Choices */
.cgr-select-wrap {
    position: relative;
    width: 100%;
    margin-top: 6px;
}
.cgr-select-trigger {
    background: #141829;
    border: 1px solid #222b45;
    border-radius: 6px;
    padding: 10px 14px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 46px;
}
.cgr-select-trigger:hover, .cgr-select-wrap.open .cgr-select-trigger {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}
.cgr-select-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #111422;
    border: 1px solid #28334f;
    border-radius: 8px;
    z-index: 1000;
    display: none;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
}
.cgr-select-wrap.open .cgr-select-options {
    display: block;
}
.cgr-opt {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border-bottom: 1px solid #181d2f;
    transition: background 0.15s;
}
.cgr-opt:last-child {
    border-bottom: none;
}
.cgr-opt:hover {
    background: #171d2e;
}
.cgr-opt .cgr-opt-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cgr-opt .cgr-opt-text {
    font-size: 13px;
    font-weight: 700;
    color: #e2e8f0;
}

/* Confirmation Modal */
.cgr-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    backdrop-filter: blur(6px);
}
.cgr-modal-content {
    background: #111422;
    border: 1px solid #26314d;
    border-radius: 12px;
    padding: 28px;
    width: 90%;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75);
}
.cgr-modal-content h3 {
    margin: 0 0 10px 0;
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.cgr-modal-content p {
    color: #94a3b8;
    font-size: 13px;
    margin-bottom: 24px;
    line-height: 1.5;
}
.cgr-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Callout Alert */
.cgr-callout {
    padding: 14px 18px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 12.5px;
}
.cgr-callout-info {
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #bae6fd;
}
.cgr-callout-warning {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fde68a;
}
.cgr-callout-danger {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fecaca;
}
.cgr-callout-success {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #a7f3d0;
}

/* Pagination Overrides */
.pagination {
    margin: 20px 0 0 0;
    display: flex;
    justify-content: center;
    gap: 4px;
}
.pagination > li > a, .pagination > li > span {
    background: #141829;
    border: 1px solid #222b45;
    color: #94a3b8;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
}
.pagination > li > a:hover {
    background: #1c223a;
    border-color: #38bdf8;
    color: #ffffff;
}
.pagination > .active > a, .pagination > .active > a:hover {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
}
.pagination > .disabled > span {
    background: #0f121e;
    border-color: #1a1e2f;
    color: #475569;
}

@media (max-width: 768px) {
    .cgr-header-bar, .cgr-hud-banner, .cgr-metrics-grid, .cgr-section {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* --------------------------------------------------------------------------
   10. USER CLAIM GUILD REWARD V2 (GUILD PASS / MISSIONS)
   -------------------------------------------------------------------------- */
/* Reset & Scope */
.cgr-page-wrapper {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: #e2e8f0;
    margin-bottom: 30px;
    line-height: 1.5;
}
.cgr-page-wrapper * {
    box-sizing: border-box;
}

/* Master Frame */
.cgr-frame {
    background: #0b0c13;
    border: 1px solid #1a1e2f;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65);
    overflow: hidden;
    position: relative;
}

/* Header Bar */
.cgr-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(90deg, #121624 0%, #171c30 100%);
    border-bottom: 1px solid #1f263d;
    flex-wrap: wrap;
    gap: 12px;
}
.cgr-title-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cgr-title-badge .cgr-icon {
    font-size: 20px;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, 0.25);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}
.cgr-title-badge h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #ffffff;
    text-transform: uppercase;
}
.cgr-title-badge span {
    display: block;
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 500;
    margin-top: 1px;
}
.cgr-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cgr-badge {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.4px;
}
.cgr-badge-cyan {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
}
.cgr-badge-emerald {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
}
.cgr-badge-amber {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}
.cgr-badge-purple {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #c084fc;
}

/* Guild HUD Banner */
.cgr-hud-banner {
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(18, 22, 36, 0.95), rgba(11, 13, 21, 0.98));
    border-bottom: 1px solid #1a2033;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
}
@media (max-width: 900px) {
    .cgr-hud-banner {
        grid-template-columns: 1fr;
    }
}
.cgr-guild-crest {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, rgba(15, 23, 42, 0.9) 80%);
    border: 2px solid rgba(245, 158, 11, 0.35);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(245, 158, 11, 0.15);
}
.cgr-guild-crest img {
    height: 40px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.cgr-guild-info h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}
.cgr-guild-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cgr-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
    background: #171d2e;
    border: 1px solid #28334d;
    color: #cbd5e1;
}

/* Metrics & Requirements Strip */
.cgr-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    padding: 16px 24px;
    background: rgba(11, 13, 21, 0.7);
    border-bottom: 1px solid #1a1e2f;
}
.cgr-metric-box {
    background: #121624;
    border: 1px solid #1f273d;
    border-radius: 8px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cgr-metric-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.cgr-metric-amber .cgr-metric-icon   { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.25); }
.cgr-metric-cyan .cgr-metric-icon    { background: rgba(56, 189, 248, 0.12); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.25); }
.cgr-metric-emerald .cgr-metric-icon { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.25); }
.cgr-metric-purple .cgr-metric-icon  { background: rgba(168, 85, 247, 0.12); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.25); }
.cgr-metric-content {
    display: flex;
    flex-direction: column;
}
.cgr-metric-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cgr-metric-value {
    font-size: 13px;
    font-weight: 800;
    color: #f1f5f9;
}

/* Section Wrapper */
.cgr-section {
    padding: 24px;
}
.cgr-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}
.cgr-section-header h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Search Bar */
.cgr-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cgr-search-input {
    background: #141829;
    border: 1px solid #222b45;
    border-radius: 6px;
    padding: 8px 14px;
    color: #ffffff;
    font-size: 12.5px;
    outline: none;
    transition: all 0.2s;
    min-width: 220px;
}
.cgr-search-input:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}
.cgr-btn-search {
    background: #1a2033;
    border: 1px solid #28334d;
    color: #e2e8f0;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cgr-btn-search:hover {
    background: #232c45;
    border-color: #38bdf8;
    color: #38bdf8;
}

/* Member Roster Card */
.cgr-member-card {
    background: #111422;
    border: 1px solid #1f273d;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.cgr-member-card:hover {
    border-color: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.cgr-member-card.is-leader {
    border-color: rgba(245, 158, 11, 0.5);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, #111422 100%);
}
.cgr-member-card.is-claimed {
    opacity: 0.65;
}
.cgr-member-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 260px;
}
.cgr-member-crest {
    width: 44px;
    height: 44px;
    background: #141829;
    border: 1px solid #222b45;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cgr-member-identity h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cgr-member-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #94a3b8;
}

/* Action Buttons */
.cgr-btn-select {
    padding: 9px 20px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border: 1px solid #38bdf8;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 3px 12px rgba(2, 132, 199, 0.3);
    transition: all 0.2s;
}
.cgr-btn-select:hover:not(:disabled) {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
    box-shadow: 0 4px 18px rgba(56, 189, 248, 0.5);
    transform: translateY(-1px);
}
.cgr-btn-select:disabled {
    background: #171d2e;
    border-color: #26314d;
    color: #64748b;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}
.cgr-btn-select.claimed {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

/* Select Reward View */
.cgr-select-panel {
    background: #111422;
    border: 1px solid #1f273d;
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
}
.cgr-select-header {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #ffffff;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1f273d;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Custom Dropdown for Item Choices */
.cgr-select-wrap {
    position: relative;
    width: 100%;
    margin-top: 6px;
}
.cgr-select-trigger {
    background: #141829;
    border: 1px solid #222b45;
    border-radius: 6px;
    padding: 10px 14px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 46px;
}
.cgr-select-trigger:hover, .cgr-select-wrap.open .cgr-select-trigger {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}
.cgr-select-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #111422;
    border: 1px solid #28334f;
    border-radius: 8px;
    z-index: 1000;
    display: none;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
}
.cgr-select-wrap.open .cgr-select-options {
    display: block;
}
.cgr-opt {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border-bottom: 1px solid #181d2f;
    transition: background 0.15s;
}
.cgr-opt:last-child {
    border-bottom: none;
}
.cgr-opt:hover {
    background: #171d2e;
}
.cgr-opt .cgr-opt-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cgr-opt .cgr-opt-text {
    font-size: 13px;
    font-weight: 700;
    color: #e2e8f0;
}

/* Confirmation Modal */
.cgr-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    backdrop-filter: blur(6px);
}
.cgr-modal-content {
    background: #111422;
    border: 1px solid #26314d;
    border-radius: 12px;
    padding: 28px;
    width: 90%;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75);
}
.cgr-modal-content h3 {
    margin: 0 0 10px 0;
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.cgr-modal-content p {
    color: #94a3b8;
    font-size: 13px;
    margin-bottom: 24px;
    line-height: 1.5;
}
.cgr-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Callout Alert */
.cgr-callout {
    padding: 14px 18px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 12.5px;
}
.cgr-callout-info {
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #bae6fd;
}
.cgr-callout-warning {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fde68a;
}
.cgr-callout-danger {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fecaca;
}
.cgr-callout-success {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #a7f3d0;
}

@media (max-width: 768px) {
    .cgr-header-bar, .cgr-hud-banner, .cgr-metrics-grid, .cgr-section {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* --------------------------------------------------------------------------
   11. USER LUCKY WITHDRAWAL EVENT (LUCKY WITHDRAWAL VAULT)
   -------------------------------------------------------------------------- */
/* Base Variables & Container */
:root {
  --lwe-bg: #090c13;
  --lwe-card: #0f1422;
  --lwe-card-inner: #151b2d;
  --lwe-border: #1e263d;
  --lwe-border-glow: rgba(56, 189, 248, 0.25);
  --lwe-text-main: #f1f5f9;
  --lwe-text-muted: #94a3b8;
  --lwe-cyan: #38bdf8;
  --lwe-gold: #fbbf24;
  --lwe-emerald: #34d399;
  --lwe-rose: #f87171;
  --lwe-purple: #c084fc;
}

.lwe-wrapper {
  margin: 15px 0 30px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--lwe-text-main);
}

.lwe-frame {
  background: linear-gradient(180deg, #0e1320 0%, #090c13 100%);
  border: 1px solid var(--lwe-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* Header HUD Bar */
.lwe-header-bar {
  background: linear-gradient(90deg, #131a2d 0%, #0f1422 100%);
  border-bottom: 1px solid var(--lwe-border);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.lwe-title-badge {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lwe-title-icon {
  width: 48px;
  height: 48px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, rgba(15, 20, 34, 0.8) 100%);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--lwe-gold);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
}

.lwe-title-text h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.lwe-title-text span {
  font-size: 12.5px;
  color: var(--lwe-text-muted);
}

.lwe-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Badges & Pills */
.lwe-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.lwe-badge-gold {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fde68a;
}

.lwe-badge-cyan {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #7dd3fc;
}

.lwe-badge-emerald {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #6ee7b7;
}

.lwe-badge-rose {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: #fca5a5;
}

.lwe-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: lwePulse 1.8s infinite;
}

@keyframes lwePulse {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* Event Tabs */
.lwe-tabs-nav {
  display: flex;
  background: #0b0f19;
  border-bottom: 1px solid var(--lwe-border);
  overflow-x: auto;
  padding: 0 16px;
}

.lwe-tab-btn {
  padding: 14px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--lwe-text-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.lwe-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.02);
}

.lwe-tab-btn.active {
  color: var(--lwe-cyan);
  border-bottom-color: var(--lwe-cyan);
  background: rgba(56, 189, 248, 0.05);
}

/* Countdown Bar */
.lwe-countdown-card {
  margin: 20px 24px;
  background: radial-gradient(ellipse at center, rgba(30, 41, 68, 0.5) 0%, rgba(15, 20, 34, 0.8) 100%);
  border: 1px solid var(--lwe-border);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.lwe-countdown-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lwe-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lwe-countdown-timer {
  font-size: 20px;
  font-weight: 800;
  color: var(--lwe-gold);
  letter-spacing: 1px;
  font-family: monospace;
  background: #090c13;
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Grid Layout 2-Cols */
.lwe-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 0 24px 20px 24px;
}

@media (max-width: 900px) {
  .lwe-split-grid {
    grid-template-columns: 1fr;
  }
}

/* Panels */
.lwe-panel {
  background: var(--lwe-card);
  border: 1px solid var(--lwe-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lwe-panel-header {
  padding: 14px 18px;
  background: #121829;
  border-bottom: 1px solid var(--lwe-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lwe-panel-body {
  padding: 18px;
  flex: 1;
}

/* Requirements Table / Grid */
.lwe-req-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.lwe-req-item {
  background: var(--lwe-card-inner);
  border: 1px solid #1a2238;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lwe-req-title {
  font-size: 11px;
  color: var(--lwe-text-muted);
  text-transform: uppercase;
  font-weight: 600;
}

.lwe-req-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--lwe-cyan);
}

/* Warning Callout */
.lwe-warning-box {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  color: #fca5a5;
  font-size: 12px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.lwe-warning-icon {
  font-size: 20px;
  color: #f87171;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Prize Pool Ribbon */
.lwe-prizepool-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.lwe-prize-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--lwe-card-inner);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
}

.lwe-prize-name {
  font-weight: 700;
  color: #fef08a;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Participants Scrollable Feed */
.lwe-feed-scroll {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid #1a2238;
  border-radius: 8px;
  background: #0c101a;
}

.lwe-feed-scroll::-webkit-scrollbar {
  width: 6px;
}
.lwe-feed-scroll::-webkit-scrollbar-track {
  background: #090c13;
}
.lwe-feed-scroll::-webkit-scrollbar-thumb {
  background: #1e263d;
  border-radius: 4px;
}

.lwe-feed-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.lwe-feed-table th {
  position: sticky;
  top: 0;
  background: #131a2d;
  color: var(--lwe-text-muted);
  text-transform: uppercase;
  font-size: 10.5px;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--lwe-border);
  z-index: 2;
}

.lwe-feed-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #141b2c;
  color: var(--lwe-text-main);
  vertical-align: middle;
}

.lwe-feed-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.lwe-ticket-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 6px;
  font-weight: 800;
  color: #fbbf24;
  font-family: monospace;
}

/* Operatives Section (Account Characters) */
.lwe-section-title {
  padding: 16px 24px 10px 24px;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lwe-chars-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 24px 24px 24px;
}

.lwe-char-card {
  background: var(--lwe-card);
  border: 1px solid var(--lwe-border);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  transition: all 0.2s ease;
}

.lwe-char-card:hover {
  border-color: rgba(56, 189, 248, 0.3);
  background: #111728;
}

.lwe-char-card.registered {
  border-color: rgba(52, 211, 153, 0.4);
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.04) 0%, var(--lwe-card) 100%);
}

.lwe-char-info {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 240px;
}

.lwe-char-crest {
  width: 44px;
  height: 44px;
  background: #141b2c;
  border: 1px solid #1e263d;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lwe-char-meta h4 {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lwe-char-sub {
  font-size: 12px;
  color: var(--lwe-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.lwe-metrics-deck {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lwe-metric-pill {
  background: var(--lwe-card-inner);
  border: 1px solid #1e263d;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lwe-metric-pill.ok {
  border-color: rgba(52, 211, 153, 0.3);
}

.lwe-metric-pill.fail {
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(239, 68, 68, 0.05);
}

.lwe-metric-pill .metric-val {
  font-weight: 700;
  color: #ffffff;
}

.lwe-metric-pill .metric-stat {
  font-weight: 800;
}
.lwe-metric-pill.ok .metric-stat { color: var(--lwe-emerald); }
.lwe-metric-pill.fail .metric-stat { color: var(--lwe-rose); }

/* Action Buttons */
.lwe-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.lwe-btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.lwe-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  border-color: #38bdf8;
  box-shadow: 0 6px 16px rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}

.lwe-btn-gold {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #ffffff;
  border: 1px solid rgba(251, 191, 36, 0.4);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.lwe-btn-gold:hover:not(:disabled) {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
  border-color: #fbbf24;
  box-shadow: 0 6px 16px rgba(251, 191, 36, 0.4);
  transform: translateY(-1px);
}

.lwe-btn-disabled {
  background: #141a29;
  color: #64748b;
  border: 1px solid #1e263d;
  cursor: not-allowed;
  opacity: 0.6;
}

.lwe-btn-claimed {
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #6ee7b7;
  cursor: default;
}

/* Callouts & Alerts */
.lwe-callout {
  padding: 16px 20px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 14px;
}

.lwe-callout-danger {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.lwe-callout-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fde68a;
}

.lwe-callout-success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
}

/* Digital Lottery Ticket Styling */
.lwe-ticket-card {
  max-width: 580px;
  margin: 30px auto;
  background: radial-gradient(circle at top, #161e33 0%, #0b0f19 100%);
  border: 2px dashed rgba(251, 191, 36, 0.4);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(251, 191, 36, 0.15);
  position: relative;
  text-align: center;
}

.lwe-ticket-header {
  border-bottom: 1px solid #1e263d;
  padding-bottom: 18px;
  margin-bottom: 20px;
}

.lwe-ticket-number {
  font-size: 38px;
  font-weight: 900;
  font-family: monospace;
  color: #fbbf24;
  letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
  margin: 15px 0;
  padding: 10px 20px;
  background: #07090f;
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  display: inline-block;
}

.lwe-ticket-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
  text-align: left;
}

.lwe-ticket-meta-item {
  background: #0f1422;
  border: 1px solid #1a2238;
  border-radius: 8px;
  padding: 10px 14px;
}

.lwe-ticket-meta-label {
  font-size: 11px;
  color: var(--lwe-text-muted);
  text-transform: uppercase;
}

.lwe-ticket-meta-val {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

/* Confirmation Modal */
.lwe-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.lwe-modal-box {
  background: #0e1322;
  border: 1px solid var(--lwe-border);
  border-radius: 14px;
  max-width: 500px;
  width: 90%;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  text-align: center;
}

.lwe-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   12. USER MINI GAMES (MAHJONG WAYS 2 CASINO SLOT)
   -------------------------------------------------------------------------- */
            :root {
                --slot-bg: #070a12;
                --slot-frame: #0d1220;
                --slot-gold: #fbbf24;
                --slot-gold-dark: #b45309;
                --slot-gold-border: #d4af37;
                --slot-cyan: #38bdf8;
                --slot-emerald: #34d399;
                --slot-jade: #0f5132;
                --slot-jade-border: #146c43;
                --slot-border: #1e2842;
            }

            .cgr-slot-wrapper {
                margin: 10px auto 25px auto;
                max-width: 430px;
                font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                color: #f1f5f9;
                user-select: none;
            }

            .cgr-slot-console {
                background: radial-gradient(circle at 50% 0%, #151d33 0%, #0a0e1a 60%, #05070d 100%);
                border: 2px solid #b48528;
                border-radius: 16px;
                box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(212, 175, 55, 0.25), inset 0 1px 1px rgba(255,255,255,0.2);
                overflow: hidden;
                position: relative;
            }

            /* Bonus Mode Theme (Imperial Ruby & Gold) */
            .cgr-slot-console.bonus-mode {
                background: radial-gradient(circle at 50% 0%, #3b0d0c 0%, #1a0505 60%, #090202 100%);
                border-color: #ef4444;
                box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9), 0 0 35px rgba(239, 68, 68, 0.35);
            }

            /* Header Bar */
            .cgr-slot-header {
                background: linear-gradient(90deg, #18233c 0%, #0e1526 50%, #18233c 100%);
                border-bottom: 2px solid #b48528;
                padding: 10px 14px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .cgr-slot-title {
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .cgr-slot-title-main {
                font-family: "Cinzel", Georgia, serif;
                font-size: 15px;
                font-weight: 900;
                color: #fbbf24;
                letter-spacing: 1px;
                text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 10px rgba(251, 191, 36, 0.5);
                display: flex;
                align-items: center;
                gap: 6px;
            }
            .cgr-slot-title-sub {
                font-size: 10px;
                font-weight: 700;
                color: #94a3b8;
                letter-spacing: 0.5px;
            }

            /* PG Soft Multiplier Bar (Golden Mahjong Tablets) */
            .cgr-mult-track {
                display: flex;
                justify-content: space-around;
                align-items: center;
                background: linear-gradient(90deg, #070a12 0%, #0f1628 50%, #070a12 100%);
                border-bottom: 2px solid #1a233a;
                padding: 8px 10px;
                gap: 6px;
            }

            .cgr-mult-item {
                flex: 1;
                font-size: 1.18em;
                font-weight: 900;
                color: #475569;
                letter-spacing: 0.5px;
                text-align: center;
                padding: 4px 6px;
                border-radius: 8px;
                background: linear-gradient(180deg, #141c2e 0%, #0b101c 100%);
                border: 1px solid #1e2942;
                box-shadow: inset 0 1px 1px rgba(255,255,255,0.06), 0 2px 4px rgba(0,0,0,0.5);
                transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            .cgr-mult-item.active {
                color: #451a03;
                background: linear-gradient(180deg, #fffbeb 0%, #fbbf24 45%, #b45309 100%);
                border-color: #fef08a;
                transform: scale(1.12);
                box-shadow: 0 0 18px #fbbf24, 0 4px 10px rgba(0,0,0,0.6);
                text-shadow: 0 1px 1px rgba(255,255,255,0.6);
            }

            /* Free Spin Bonus Mode Active Multipliers */
            .cgr-slot-console.bonus-mode .cgr-mult-track {
                background: linear-gradient(90deg, #1c0505 0%, #300a0a 50%, #1c0505 100%);
                border-bottom-color: rgba(239, 68, 68, 0.4);
            }
            .cgr-slot-console.bonus-mode .cgr-mult-item.active {
                background: linear-gradient(180deg, #fef08a 0%, #ef4444 50%, #7f1d1d 100%);
                color: #ffffff;
                border-color: #fca5a5;
                box-shadow: 0 0 20px #ef4444, 0 4px 12px rgba(0,0,0,0.8);
                text-shadow: 0 1px 3px rgba(0,0,0,0.9);
            }

            /* Reels Frame (5 Columns: 4-5-5-5-4) */
            .cgr-reels-frame {
                background: radial-gradient(ellipse at center, #0f1629 0%, #060912 100%);
                padding: 10px 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 4px;
                position: relative;
                min-height: 320px;
                overflow: hidden;
                border-radius: 8px;
            }

            .cgr-reel-col {
                display: flex;
                flex-direction: column;
                gap: 4px;
                justify-content: center;
                flex: 1;
            }

            /* Authentic PG Soft 3D Ivory-on-Jade Mahjong Tiles */
            .cgr-slot-tile {
                background: linear-gradient(180deg, #ffffff 0%, #faf8f5 65%, #ede4d5 100%);
                border: 1px solid #ffffff;
                border-bottom: 5px solid var(--slot-jade);
                border-right: 3px solid var(--slot-jade-border);
                border-radius: 8px;
                width: 100%;
                aspect-ratio: 0.82;
                max-height: 72px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                transition: transform 0.2s ease, opacity 0.2s ease;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45), inset 0 1px 2px #ffffff;
                overflow: hidden;
                box-sizing: border-box;
                padding: 2px;
            }

            .cgr-slot-tile img.slot-icon-img {
                width: 90%;
                height: 90%;
                object-fit: contain;
                display: block;
                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
            }

            /* Gold Plated Frame Tiles (Signature PG Soft) */
            .cgr-slot-tile.gold-frame {
                border: 2px solid #fbbf24;
                border-bottom: 5px solid #b45309;
                border-right: 3px solid #92400e;
                box-shadow: 0 0 14px rgba(251, 191, 36, 0.7) inset, 0 4px 10px rgba(0,0,0,0.5), 0 0 12px rgba(245, 158, 11, 0.4);
                background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 60%, #fde68a 100%);
            }

            /* Wild Coin Tiles (Yuanbao Gold & Cyan) */
            .cgr-slot-tile.wild-tile {
                border: 2px solid #38bdf8;
                border-bottom: 5px solid #0369a1;
                border-right: 3px solid #0284c7;
                box-shadow: 0 0 18px rgba(56, 189, 248, 0.8) inset, 0 0 16px #38bdf8, 0 4px 10px rgba(0,0,0,0.5);
                background: radial-gradient(circle, #f0f9ff 0%, #bae6fd 60%, #7dd3fc 100%);
            }

            /* Scatter Hu Tile */
            .cgr-slot-tile.scatter-tile {
                border: 2px solid #f87171;
                border-bottom: 5px solid #991b1b;
                border-right: 3px solid #b91c1c;
                box-shadow: 0 0 18px rgba(244, 63, 94, 0.8) inset, 0 0 16px #ef4444, 0 4px 10px rgba(0,0,0,0.5);
                background: radial-gradient(circle, #fff1f2 0%, #fecdd3 60%, #fda4af 100%);
            }

            /* Win Highlighting */
            .cgr-slot-tile.win {
                border-color: #34d399 !important;
                box-shadow: 0 0 22px #34d399, 0 0 14px #34d399 inset !important;
                transform: scale(1.08);
                z-index: 3;
            }

            /* Shatter / Explode Effect on Winning Tiles */
            @keyframes cgrTileBreak {
                0% {
                    transform: scale(1.08);
                    box-shadow: 0 0 25px #34d399, 0 0 15px #34d399 inset;
                    filter: brightness(1.5);
                    opacity: 1;
                }
                40% {
                    transform: scale(1.2) rotate(4deg);
                    box-shadow: 0 0 35px #fbbf24, 0 0 20px #fbbf24 inset;
                    filter: brightness(2);
                    opacity: 0.9;
                }
                100% {
                    transform: scale(0.1) rotate(-15deg);
                    filter: brightness(2.5);
                    opacity: 0;
                }
            }
            .cgr-slot-tile.shatter {
                animation: cgrTileBreak 0.38s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
                z-index: 5;
            }

            /* Gold Frame transforms to Wild Coin */
            @keyframes cgrGoldTransform {
                0% {
                    transform: scale(1);
                }
                50% {
                    transform: scale(1.22) rotateY(90deg);
                    filter: brightness(2) drop-shadow(0 0 20px #38bdf8);
                }
                100% {
                    transform: scale(1) rotateY(0deg);
                    filter: brightness(1);
                }
            }
            .cgr-slot-tile.wild-transform {
                animation: cgrGoldTransform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
                z-index: 4;
            }

            /* Authentic Cascade Drop: New replacement tiles falling from top */
            @keyframes cgrCascadeDrop {
                0% {
                    transform: translateY(-135%);
                    opacity: 0.15;
                }
                60% {
                    opacity: 1;
                }
                85% {
                    transform: translateY(5px);
                }
                100% {
                    transform: translateY(0);
                    opacity: 1;
                }
            }
            .cgr-slot-tile.cascade-drop {
                animation: cgrCascadeDrop 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            }

            /* Tumbling Drop In/Out on Initial Spin */
            @keyframes cgrDropIn {
                0% { transform: translateY(-140%); opacity: 0; }
                40% { opacity: 1; }
                80% { transform: translateY(4px); }
                100% { transform: translateY(0); opacity: 1; }
            }
            .cgr-slot-tile.drop-in {
                animation: cgrDropIn 0.44s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            }

            @keyframes cgrDropOut {
                0% { transform: translateY(0); opacity: 1; }
                100% { transform: translateY(140%); opacity: 0; }
            }
            .cgr-slot-tile.drop-out {
                animation: cgrDropOut 0.3s ease-in forwards;
            }

            /* Ways to Win Golden Banner (Signature PG Soft) */
            .cgr-ways-bar {
                background: linear-gradient(90deg, #090e18 0%, #151d30 50%, #090e18 100%);
                border-top: 1px solid #1e2840;
                border-bottom: 1px solid #1e2840;
                padding: 5px 12px;
                text-align: center;
                font-size: 11.5px;
                font-weight: 800;
                color: #fbbf24;
                letter-spacing: 1px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
            }

            /* Win Pop Overlay (Multi-Tier: Win, Big Win, Mega Win) */
            .cgr-win-overlay {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0.5);
                opacity: 0;
                pointer-events: none;
                z-index: 100;
                width: 88%;
                text-align: center;
                background: radial-gradient(circle, rgba(17, 24, 39, 0.96) 0%, rgba(9, 12, 19, 0.98) 100%);
                border: 2px solid var(--slot-gold);
                border-radius: 16px;
                padding: 18px 12px;
                box-shadow: 0 0 40px rgba(251, 191, 36, 0.5), inset 0 1px 2px rgba(255,255,255,0.3);
                transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .cgr-win-overlay.show {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }

            /* Free Spin Badge Bar */
            .cgr-freespin-banner {
                background: linear-gradient(90deg, #78350f 0%, #b45309 50%, #78350f 100%);
                color: #fef08a;
                text-align: center;
                padding: 6px 12px;
                font-weight: 800;
                font-size: 13px;
                letter-spacing: 0.5px;
                display: none;
                border-top: 1px solid rgba(251, 191, 36, 0.4);
                border-bottom: 1px solid rgba(251, 191, 36, 0.4);
            }
            .cgr-slot-console.bonus-mode .cgr-freespin-banner {
                display: block;
            }

            /* Financial HUD Strip (PG Soft Console Style) */
            .cgr-hud-strip {
                background: #090c14;
                border-bottom: 1px solid var(--slot-border);
                padding: 8px 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 12px;
            }

            .cgr-hud-col {
                display: flex;
                flex-direction: column;
                gap: 2px;
            }
            .cgr-hud-col span:first-child {
                font-size: 10px;
                text-transform: uppercase;
                color: #64748b;
                font-weight: 800;
                letter-spacing: 0.5px;
            }
            .cgr-hud-val {
                font-size: 13.5px;
                font-weight: 900;
                color: #ffffff;
            }

            /* Controls Panel */
            .cgr-controls-panel {
                background: #0b0e18;
                padding: 14px 16px 18px 16px;
            }

            /* Special Feature Row (Double Chance + Buy Feature) */
            .cgr-feature-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                margin-bottom: 14px;
            }

            .cgr-dc-switch {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: #111726;
                border: 1px solid #1e2840;
                border-radius: 20px;
                padding: 5px 12px;
                cursor: pointer;
                user-select: none;
                transition: all 0.2s ease;
            }
            .cgr-dc-switch:hover {
                border-color: rgba(251, 191, 36, 0.5);
            }
            .cgr-dc-switch.active {
                background: rgba(251, 191, 36, 0.12);
                border-color: var(--slot-gold);
            }
            .cgr-dc-dot {
                width: 13px;
                height: 13px;
                border-radius: 50%;
                background: #475569;
                transition: all 0.2s ease;
            }
            .cgr-dc-switch.active .cgr-dc-dot {
                background: var(--slot-gold);
                box-shadow: 0 0 10px var(--slot-gold);
            }

            .cgr-btn-buy-bonus {
                background: linear-gradient(135deg, #d97706 0%, #b45309 50%, #78350f 100%);
                border: 1px solid #fef08a;
                border-radius: 20px;
                color: #fef08a;
                font-weight: 800;
                font-size: 11px;
                padding: 6px 14px;
                cursor: pointer;
                transition: all 0.2s ease;
                box-shadow: 0 4px 12px rgba(180, 83, 9, 0.4);
                text-transform: uppercase;
                letter-spacing: 0.3px;
            }
            .cgr-btn-buy-bonus:hover:not(:disabled) {
                background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #92400e 100%);
                transform: translateY(-1px);
                box-shadow: 0 6px 16px rgba(245, 158, 11, 0.5);
            }
            .cgr-btn-buy-bonus:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

            /* Action Buttons Bar */
            .cgr-action-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
            }

            .cgr-round-btn {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                background: linear-gradient(180deg, #182236 0%, #0d1322 100%);
                border: 1.5px solid #2a3754;
                color: #94a3b8;
                font-size: 15px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.2s ease;
                box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.08);
            }
            .cgr-round-btn:hover:not(:disabled) {
                background: #1e2a42;
                color: #ffffff;
                border-color: var(--slot-gold);
            }
            .cgr-round-btn.turbo-on {
                color: #fef08a;
                border-color: var(--slot-gold);
                box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
            }
            .cgr-round-btn.auto-on {
                color: #6ee7b7;
                border-color: var(--slot-emerald);
                box-shadow: 0 0 12px rgba(52, 211, 153, 0.5);
            }

            /* Central Majestic PG Soft Spin Button */
            .cgr-spin-btn {
                width: 76px;
                height: 76px;
                border-radius: 50%;
                background: radial-gradient(circle at 35% 35%, #0284c7 0%, #0369a1 50%, #0c4a6e 100%);
                border: 3px solid #fbbf24;
                box-shadow: 0 0 20px rgba(251, 191, 36, 0.45), 0 8px 25px rgba(0, 0, 0, 0.7);
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.15s ease;
                padding: 0;
                overflow: hidden;
                position: relative;
            }
            .cgr-spin-btn:hover:not(:disabled) {
                transform: scale(1.06);
                box-shadow: 0 0 28px rgba(251, 191, 36, 0.7), 0 10px 30px rgba(0, 0, 0, 0.8);
            }
            .cgr-spin-btn:active:not(:disabled) {
                transform: scale(0.94);
            }
            .cgr-spin-btn:disabled {
                filter: grayscale(1) brightness(0.6);
                cursor: not-allowed;
            }
            .cgr-spin-btn.spinning {
                animation: cgrSpinPulse 0.6s infinite ease-in-out;
            }
            .cgr-spin-btn.spinning img {
                animation: cgrSpinRotate 0.8s infinite linear;
            }
            @keyframes cgrSpinPulse {
                0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.45), 0 8px 25px rgba(0, 0, 0, 0.7); }
                50% { box-shadow: 0 0 32px rgba(251, 191, 36, 0.9), 0 10px 30px rgba(0, 0, 0, 0.9); }
            }
            @keyframes cgrSpinRotate {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }

            /* History Log Section */
            .cgr-history-box {
                background: var(--slot-frame);
                border: 1px solid var(--slot-border);
                border-radius: 14px;
                margin-top: 20px;
                overflow: hidden;
            }

            .cgr-history-header {
                padding: 12px 18px;
                background: #121829;
                border-bottom: 1px solid var(--slot-border);
                font-size: 13px;
                font-weight: 700;
                color: #ffffff;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .cgr-history-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 12px;
            }
            .cgr-history-table th {
                background: #0a0d16;
                padding: 8px 12px;
                color: #64748b;
                text-align: left;
                font-weight: 700;
                text-transform: uppercase;
                font-size: 10px;
                border-bottom: 1px solid #141a29;
            }
            .cgr-history-table td {
                padding: 8px 12px;
                border-bottom: 1px solid #121726;
                color: #cbd5e1;
            }

            /* Particle Coins for Jackpot */
            .cgr-coin-particle {
                position: fixed;
                width: 18px;
                height: 18px;
                background: radial-gradient(circle, #fbbf24 0%, #b45309 100%);
                border: 1px solid #fef08a;
                border-radius: 50%;
                pointer-events: none;
                z-index: 99999;
                box-shadow: 0 0 10px #fbbf24;
                animation: cgrCoinFall 2.2s linear forwards;
            }
            @keyframes cgrCoinFall {
                0% { transform: translateY(-50px) rotate(0deg); opacity: 1; }
                100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
            }

/* --------------------------------------------------------------------------
   13. USER CLAIM NEW PLAYER REWARD (BEGINNER STARTER PACK)
   -------------------------------------------------------------------------- */
.cnp-page-wrapper {
            font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
            color: #e2e8f0;
            margin-bottom: 30px;
            line-height: 1.5;
        }
        .cnp-page-wrapper * {
            box-sizing: border-box;
        }
        
        /* Master Frame */
        .cnp-frame {
            background: #090c15;
            border: 1px solid #1a2238;
            border-radius: 14px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
            overflow: hidden;
            position: relative;
        }
        
        /* Header Bar */
        .cnp-header-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 24px;
            background: linear-gradient(90deg, #101526 0%, #171f38 100%);
            border-bottom: 1px solid #202b48;
            flex-wrap: wrap;
            gap: 14px;
        }
        .cnp-title-badge {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .cnp-title-badge .cnp-icon {
            font-size: 22px;
            color: #fbbf24;
            background: rgba(251, 191, 36, 0.12);
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 1px solid rgba(251, 191, 36, 0.3);
            box-shadow: 0 0 18px rgba(251, 191, 36, 0.2);
            flex-shrink: 0;
        }
        .cnp-title-badge h2 {
            margin: 0;
            font-size: 18px;
            font-weight: 800;
            letter-spacing: 0.8px;
            color: #ffffff;
            text-transform: uppercase;
        }
        .cnp-title-badge span {
            display: block;
            font-size: 12px;
            color: #94a3b8;
            font-weight: 500;
            margin-top: 2px;
        }
        .cnp-header-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .cnp-badge {
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 11.5px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }
        .cnp-badge-cyan {
            background: rgba(56, 189, 248, 0.12);
            border: 1px solid rgba(56, 189, 248, 0.3);
            color: #38bdf8;
        }
        .cnp-badge-emerald {
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.3);
            color: #34d399;
        }
        .cnp-badge-amber {
            background: rgba(245, 158, 11, 0.12);
            border: 1px solid rgba(245, 158, 11, 0.3);
            color: #fbbf24;
        }
        .cnp-pulse-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #34d399;
            box-shadow: 0 0 8px #34d399;
            animation: cnpPulse 1.8s infinite;
        }
        @keyframes cnpPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.85); }
        }

        /* Tiers Overview Strip */
        .cnp-tiers-strip {
            padding: 18px 24px;
            background: rgba(12, 16, 28, 0.95);
            border-bottom: 1px solid #1c243c;
        }
        .cnp-strip-title {
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: #94a3b8;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .cnp-tiers-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 12px;
        }
        .cnp-tier-chip {
            background: #111626;
            border: 1px solid #1e2842;
            border-radius: 8px;
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            transition: border-color 0.2s;
        }
        .cnp-tier-chip:hover {
            border-color: #38bdf8;
        }
        .cnp-tier-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            font-weight: 800;
            color: #ffffff;
        }
        .cnp-tier-pill {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 4px;
            background: rgba(56, 189, 248, 0.15);
            color: #38bdf8;
            border: 1px solid rgba(56, 189, 248, 0.3);
        }
        .cnp-tier-meta {
            font-size: 11px;
            color: #94a3b8;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .cnp-tier-meta span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        /* Characters Section */
        .cnp-content-section {
            padding: 24px;
        }
        .cnp-section-header {
            margin-bottom: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        .cnp-section-header h3 {
            margin: 0;
            font-size: 15px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Character Card */
        .cnp-char-card {
            background: #0f1424;
            border: 1px solid #1c253d;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 22px;
            align-items: start;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
            transition: all 0.2s ease;
        }
        @media (max-width: 860px) {
            .cnp-char-card {
                grid-template-columns: 1fr;
            }
        }
        .cnp-char-card:hover {
            border-color: #2b395d;
        }

        /* Character Profile Side */
        .cnp-char-profile {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            padding-right: 18px;
            border-right: 1px solid #1a2238;
        }
        @media (max-width: 860px) {
            .cnp-char-profile {
                padding-right: 0;
                padding-bottom: 16px;
                border-right: none;
                border-bottom: 1px solid #1a2238;
            }
        }
        .cnp-char-avatar {
            width: 52px;
            height: 52px;
            border-radius: 10px;
            background: #141a2e;
            border: 1px solid #232e4d;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        }
        .cnp-char-identity {
            flex: 1;
            min-width: 0;
        }
        .cnp-char-name {
            font-size: 16px;
            font-weight: 800;
            color: #ffffff;
            margin: 0 0 4px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .cnp-char-tags {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }
        .cnp-tag {
            font-size: 10.5px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 4px;
            background: #161e33;
            border: 1px solid #253150;
            color: #cbd5e1;
        }
        .cnp-tag-race {
            color: #38bdf8;
            border-color: rgba(56, 189, 248, 0.3);
            background: rgba(56, 189, 248, 0.1);
        }
        .cnp-char-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .cnp-stat-box {
            background: #12182b;
            border: 1px solid #1d263f;
            border-radius: 6px;
            padding: 6px 10px;
        }
        .cnp-stat-lbl {
            font-size: 9.5px;
            font-weight: 700;
            text-transform: uppercase;
            color: #718096;
            letter-spacing: 0.3px;
        }
        .cnp-stat-val {
            font-size: 12.5px;
            font-weight: 800;
            color: #f1f5f9;
        }

        /* Character Action Side */
        .cnp-char-action {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .cnp-action-title {
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: #fbbf24;
            display: flex;
            align-items: center;
            gap: 7px;
            margin: 0;
        }

        /* Custom Dropdown Styling */
        .cnp-select-wrap {
            position: relative;
            width: 100%;
            user-select: none;
        }
        .cnp-select-trigger {
            background: #12182b;
            border: 1px solid #232e4d;
            color: #ffffff;
            padding: 11px 16px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            min-height: 46px;
            transition: all 0.2s;
        }
        .cnp-select-trigger:hover {
            border-color: #38bdf8;
            background: #141c33;
        }
        .cnp-select-trigger .cnp-trigger-main {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
            min-width: 0;
        }
        .cnp-select-trigger .cnp-arrow {
            color: #64748b;
            font-size: 12px;
            transition: transform 0.2s;
        }
        .cnp-select-wrap.open .cnp-select-trigger {
            border-color: #38bdf8;
            box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
        }
        .cnp-select-wrap.open .cnp-arrow {
            transform: rotate(180deg);
            color: #38bdf8;
        }
        .cnp-select-options {
            position: absolute;
            top: calc(100% + 5px);
            left: 0;
            right: 0;
            background: #0f1424;
            border: 1px solid #232e4d;
            border-radius: 8px;
            z-index: 1000;
            display: none;
            max-height: 280px;
            overflow-y: auto;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7);
        }
        .cnp-select-wrap.open .cnp-select-options {
            display: block;
        }
        .cnp-opt {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            cursor: pointer;
            border-bottom: 1px solid #1a2238;
            transition: background 0.15s;
        }
        .cnp-opt:last-child {
            border-bottom: none;
        }
        .cnp-opt:hover {
            background: #161e33;
        }
        .cnp-opt.claimed {
            opacity: 0.55;
            cursor: not-allowed;
            background: rgba(16, 185, 129, 0.05);
        }
        .cnp-opt-title {
            font-size: 13px;
            font-weight: 700;
            color: #f1f5f9;
        }
        .cnp-opt-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        /* Eligibility Notice Box */
        .cnp-eligibility-box {
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 12px;
            display: none;
            line-height: 1.5;
        }
        .cnp-eligibility-box.ok {
            background: rgba(16, 185, 129, 0.08);
            border: 1px solid rgba(16, 185, 129, 0.25);
            border-left: 4px solid #34d399;
            color: #34d399;
            display: block;
        }
        .cnp-eligibility-box.fail {
            background: rgba(239, 68, 68, 0.08);
            border: 1px solid rgba(239, 68, 68, 0.25);
            border-left: 4px solid #f87171;
            color: #fca5a5;
            display: block;
        }
        .cnp-eligibility-box ul {
            margin: 6px 0 0 0;
            padding-left: 18px;
        }
        .cnp-eligibility-box li {
            margin-bottom: 3px;
        }

        /* Action Buttons */
        .cnp-btn-claim {
            width: 100%;
            padding: 13px 20px;
            border-radius: 8px;
            background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
            border: 1px solid #38bdf8;
            color: #ffffff;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35);
            transition: all 0.2s ease;
        }
        .cnp-btn-claim:hover:not(:disabled) {
            background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
            box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5);
            transform: translateY(-1px);
        }
        .cnp-btn-claim:disabled {
            background: #141a2e;
            border-color: #232e4d;
            color: #64748b;
            box-shadow: none;
            cursor: not-allowed;
            transform: none;
        }
        .cnp-btn-claimed {
            width: 100%;
            padding: 13px 20px;
            border-radius: 8px;
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.3);
            color: #34d399;
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: not-allowed;
        }

        /* Confirmation / Selection Page */
        .cnp-confirm-panel {
            padding: 24px;
            max-width: 800px;
            margin: 0 auto;
        }
        .cnp-recap-banner {
            background: linear-gradient(135deg, #101628 0%, #17203b 100%);
            border: 1px solid #202c4f;
            border-radius: 12px;
            padding: 20px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 24px;
        }
        .cnp-reward-group-box {
            background: #0f1424;
            border: 1px solid #1c253d;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 18px;
        }
        .cnp-reward-group-title {
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: #ffffff;
            margin: 0 0 12px 0;
            padding-bottom: 8px;
            border-bottom: 1px solid #1a2238;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Modal Overlay */
        .cnp-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(3, 6, 13, 0.82);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 99999;
            backdrop-filter: blur(6px);
            padding: 20px;
        }
        .cnp-modal {
            background: #0f1424;
            border: 1px solid #232e4d;
            border-radius: 14px;
            padding: 28px;
            width: 100%;
            max-width: 440px;
            text-align: center;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
            animation: cnpModalPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes cnpModalPop {
            0% { opacity: 0; transform: scale(0.92); }
            100% { opacity: 1; transform: scale(1); }
        }
        .cnp-modal h3 {
            margin: 10px 0;
            font-size: 18px;
            font-weight: 800;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .cnp-modal p {
            color: #94a3b8;
            font-size: 13.5px;
            margin-bottom: 24px;
            line-height: 1.5;
        }
        .cnp-modal-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
        }
        .cnp-btn-modal {
            padding: 11px 22px;
            border-radius: 8px;
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }
        .cnp-btn-modal-cancel {
            background: #171e33;
            border: 1px solid #263352;
            color: #94a3b8;
        }
        .cnp-btn-modal-cancel:hover {
            background: #1d2640;
            color: #ffffff;
        }
        .cnp-btn-modal-confirm {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            border: 1px solid #34d399;
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
        }
        .cnp-btn-modal-confirm:hover {
            box-shadow: 0 6px 20px rgba(52, 211, 153, 0.5);
            transform: translateY(-1px);
        }

        /* Success & Receipt Box */
        .cnp-receipt-card {
            background: #0f1424;
            border: 1px solid #1c253d;
            border-radius: 14px;
            padding: 35px 25px;
            text-align: center;
            max-width: 600px;
            margin: 30px auto;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
        }
        .cnp-receipt-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: rgba(16, 185, 129, 0.12);
            border: 2px solid rgba(16, 185, 129, 0.4);
            color: #34d399;
            font-size: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 18px auto;
            box-shadow: 0 0 25px rgba(16, 185, 129, 0.25);
        }

/* --------------------------------------------------------------------------
   14. USER CLAIM REBIRTH (CHARACTER REBIRTH SYSTEM)
   -------------------------------------------------------------------------- */
.crb-page-wrapper {
            font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
            color: #e2e8f0;
            margin-bottom: 30px;
            line-height: 1.5;
        }
        .crb-page-wrapper * {
            box-sizing: border-box;
        }
        
        /* Master Frame */
        .crb-frame {
            background: #090c15;
            border: 1px solid #1a2238;
            border-radius: 14px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
            overflow: hidden;
            position: relative;
        }
        
        /* Header Bar */
        .crb-header-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 24px;
            background: linear-gradient(90deg, #101526 0%, #1c142c 100%);
            border-bottom: 1px solid #23223f;
            flex-wrap: wrap;
            gap: 14px;
        }
        .crb-title-badge {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .crb-title-badge .crb-icon {
            font-size: 24px;
            color: #f97316;
            background: rgba(249, 115, 22, 0.12);
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            border: 1px solid rgba(249, 115, 22, 0.35);
            box-shadow: 0 0 20px rgba(249, 115, 22, 0.25);
            flex-shrink: 0;
        }
        .crb-title-badge h2 {
            margin: 0;
            font-size: 18px;
            font-weight: 800;
            letter-spacing: 0.8px;
            color: #ffffff;
            text-transform: uppercase;
        }
        .crb-title-badge span {
            display: block;
            font-size: 12px;
            color: #94a3b8;
            font-weight: 500;
            margin-top: 2px;
        }
        .crb-header-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .crb-badge {
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 11.5px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }
        .crb-badge-emerald {
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.3);
            color: #34d399;
        }
        .crb-badge-amber {
            background: rgba(245, 158, 11, 0.12);
            border: 1px solid rgba(245, 158, 11, 0.3);
            color: #fbbf24;
        }
        .crb-badge-orange {
            background: rgba(249, 115, 22, 0.12);
            border: 1px solid rgba(249, 115, 22, 0.3);
            color: #fb923c;
        }
        .crb-badge-red {
            background: rgba(239, 68, 68, 0.12);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #f87171;
        }
        .crb-pulse-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #34d399;
            box-shadow: 0 0 8px #34d399;
            animation: crbPulse 1.8s infinite;
        }
        @keyframes crbPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.85); }
        }

        /* Requirements Strip */
        .crb-rules-strip {
            padding: 18px 24px;
            background: rgba(12, 16, 28, 0.95);
            border-bottom: 1px solid #1c243c;
        }
        .crb-strip-title {
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: #94a3b8;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .crb-rules-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 12px;
        }
        .crb-rule-chip {
            background: #111626;
            border: 1px solid #1e2842;
            border-radius: 8px;
            padding: 12px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: border-color 0.2s;
        }
        .crb-rule-chip:hover {
            border-color: #38bdf8;
        }
        .crb-rule-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: #141c33;
            border: 1px solid #233054;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            flex-shrink: 0;
        }
        .crb-rule-info {
            display: flex;
            flex-direction: column;
        }
        .crb-rule-label {
            font-size: 10px;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
        .crb-rule-val {
            font-size: 13.5px;
            font-weight: 800;
            color: #ffffff;
        }

        /* Rewards Panel */
        .crb-rewards-section {
            padding: 20px 24px;
            background: linear-gradient(135deg, rgba(16, 22, 38, 0.7) 0%, rgba(13, 17, 30, 0.7) 100%);
            border-bottom: 1px solid #1c243c;
        }
        .crb-rewards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 12px;
            margin-top: 12px;
        }
        .crb-reward-card {
            background: #101526;
            border: 1px solid #1e2945;
            border-radius: 8px;
            padding: 12px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.2s;
        }
        .crb-reward-card:hover {
            border-color: #f97316;
            transform: translateY(-1px);
        }
        .crb-reward-icon {
            width: 38px;
            height: 38px;
            border-radius: 8px;
            background: #151c33;
            border: 1px solid #233054;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .crb-reward-meta {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        .crb-reward-type {
            font-size: 9.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            color: #94a3b8;
        }
        .crb-reward-title {
            font-size: 12.5px;
            font-weight: 800;
            color: #ffffff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Character Roster Section */
        .crb-content-section {
            padding: 24px;
        }
        .crb-section-header {
            margin-bottom: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        .crb-section-header h3 {
            margin: 0;
            font-size: 15px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Character Card */
        .crb-char-card {
            background: #0f1424;
            border: 1px solid #1c253d;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
            display: grid;
            grid-template-columns: 280px 1fr 220px;
            gap: 20px;
            align-items: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
            transition: all 0.2s ease;
        }
        @media (max-width: 980px) {
            .crb-char-card {
                grid-template-columns: 1fr;
                gap: 16px;
            }
        }
        .crb-char-card:hover {
            border-color: #2b395d;
        }
        .crb-char-card.eligible {
            border-left: 4px solid #f97316;
        }
        .crb-char-card.cooldown {
            border-left: 4px solid #fbbf24;
        }

        /* Character Profile */
        .crb-char-profile {
            display: flex;
            gap: 14px;
            align-items: center;
        }
        .crb-char-avatar {
            width: 54px;
            height: 54px;
            border-radius: 12px;
            background: #141a2e;
            border: 1px solid #232e4d;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        }
        .crb-char-identity {
            flex: 1;
            min-width: 0;
        }
        .crb-char-name {
            font-size: 16px;
            font-weight: 800;
            color: #ffffff;
            margin: 0 0 4px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .crb-char-tags {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .crb-tag {
            font-size: 10.5px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 4px;
            background: #161e33;
            border: 1px solid #253150;
            color: #cbd5e1;
        }
        .crb-tag-reborn {
            background: rgba(249, 115, 22, 0.12);
            border-color: rgba(249, 115, 22, 0.35);
            color: #fb923c;
        }

        /* Character Stats Chips */
        .crb-char-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 10px;
        }
        .crb-stat-box {
            background: #12182b;
            border: 1px solid #1d263f;
            border-radius: 8px;
            padding: 9px 12px;
            display: flex;
            flex-direction: column;
        }
        .crb-stat-lbl {
            font-size: 9.5px;
            font-weight: 700;
            text-transform: uppercase;
            color: #718096;
            letter-spacing: 0.3px;
            display: flex;
            justify-content: space-between;
        }
        .crb-stat-val {
            font-size: 13px;
            font-weight: 800;
            color: #f1f5f9;
            margin-top: 2px;
        }

        /* Action Buttons */
        .crb-btn-rebirth {
            width: 100%;
            padding: 13px 18px;
            border-radius: 8px;
            background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
            border: 1px solid #f97316;
            color: #ffffff;
            font-size: 12.5px;
            font-weight: 800;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4);
            transition: all 0.2s ease;
        }
        .crb-btn-rebirth:hover:not(:disabled) {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
            box-shadow: 0 6px 22px rgba(249, 115, 22, 0.55);
            transform: translateY(-1px);
        }
        .crb-btn-rebirth:disabled {
            background: #141a2e;
            border-color: #232e4d;
            color: #64748b;
            box-shadow: none;
            cursor: not-allowed;
            transform: none;
        }
        .crb-btn-cooldown {
            width: 100%;
            padding: 13px 18px;
            border-radius: 8px;
            background: rgba(245, 158, 11, 0.12);
            border: 1px solid rgba(245, 158, 11, 0.3);
            color: #fbbf24;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: not-allowed;
        }

        /* Modal Overlay */
        .crb-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(3, 6, 13, 0.85);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 99999;
            backdrop-filter: blur(6px);
            padding: 20px;
        }
        .crb-modal {
            background: #0f1424;
            border: 1px solid #232e4d;
            border-radius: 14px;
            padding: 28px;
            width: 100%;
            max-width: 450px;
            text-align: center;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
            animation: crbModalPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes crbModalPop {
            0% { opacity: 0; transform: scale(0.92); }
            100% { opacity: 1; transform: scale(1); }
        }
        .crb-modal h3 {
            margin: 10px 0 6px 0;
            font-size: 19px;
            font-weight: 800;
            color: #f97316;
            text-transform: uppercase;
            letter-spacing: 0.6px;
        }
        .crb-modal p {
            color: #94a3b8;
            font-size: 13px;
            margin-bottom: 20px;
            line-height: 1.5;
        }
        .crb-modal-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
        }
        .crb-btn-modal {
            padding: 11px 22px;
            border-radius: 8px;
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }
        .crb-btn-modal-cancel {
            background: #171e33;
            border: 1px solid #263352;
            color: #94a3b8;
        }
        .crb-btn-modal-cancel:hover {
            background: #1d2640;
            color: #ffffff;
        }
        .crb-btn-modal-confirm {
            background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
            border: 1px solid #f97316;
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4);
        }
        .crb-btn-modal-confirm:hover {
            box-shadow: 0 6px 20px rgba(249, 115, 22, 0.6);
            transform: translateY(-1px);
        }

        /* Receipt Card */
        .crb-receipt-card {
            background: #0f1424;
            border: 1px solid #1c253d;
            border-radius: 14px;
            padding: 35px 25px;
            text-align: center;
            max-width: 600px;
            margin: 30px auto;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
        }
        .crb-receipt-icon {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: rgba(249, 115, 22, 0.12);
            border: 2px solid rgba(249, 115, 22, 0.4);
            color: #f97316;
            font-size: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 18px auto;
            box-shadow: 0 0 25px rgba(249, 115, 22, 0.25);
        }

/* --------------------------------------------------------------------------
   15. USER VOUCHER EXCHANGED (VOUCHER REDEMPTION CENTER)
   -------------------------------------------------------------------------- */
:root {
    --cve-bg: #090d16;
    --cve-card-bg: rgba(15, 23, 42, 0.78);
    --cve-border: rgba(56, 189, 248, 0.18);
    --cve-border-glow: rgba(56, 189, 248, 0.45);
    --cve-primary: #38bdf8;
    --cve-gold: #f59e0b;
    --cve-emerald: #10b981;
    --cve-crimson: #ef4444;
    --cve-text: #f1f5f9;
    --cve-text-muted: #94a3b8;
}

.cve-wrapper {
    max-width: 1060px;
    margin: 0 auto 30px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--cve-text);
}

.cve-frame {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(8, 12, 22, 0.96) 100%);
    border: 1px solid var(--cve-border);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 25px rgba(56, 189, 248, 0.08);
    position: relative;
    overflow: hidden;
}

.cve-frame::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #38bdf8, #818cf8, #f59e0b, #10b981);
}

/* Header Section */
.cve-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.cve-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cve-header-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(129, 140, 248, 0.1));
    border: 1px solid var(--cve-border-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    font-size: 24px;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);
}

.cve-header-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, #ffffff, #cbd5e1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    line-height: 1.2;
}

.cve-header-subtitle {
    font-size: 13px;
    color: var(--cve-text-muted);
    margin-top: 4px;
}

.cve-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cve-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cve-badge-success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
}

.cve-badge-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
}

.cve-badge-info {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
}

/* Alert Notification */
.cve-alert {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 14px;
    line-height: 1.5;
}
.cve-alert-success {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #a7f3d0;
}
.cve-alert-danger {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}
.cve-alert-warning {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fde68a;
}
.cve-alert-icon {
    font-size: 20px;
    margin-top: 2px;
}

/* Form Section */
.cve-section-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #38bdf8;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cve-input-group {
    position: relative;
    margin-bottom: 22px;
}

.cve-input-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 8px;
}

.cve-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.cve-input-icon {
    position: absolute;
    left: 18px;
    color: #64748b;
    font-size: 18px;
    pointer-events: none;
    transition: color 0.2s;
}

.cve-input {
    width: 100%;
    background: rgba(10, 15, 29, 0.85);
    border: 1.5px solid rgba(56, 189, 248, 0.22);
    border-radius: 12px;
    padding: 15px 18px 15px 50px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.25s ease;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.cve-input:focus {
    border-color: #38bdf8;
    background: rgba(15, 23, 42, 0.95);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.35), inset 0 2px 6px rgba(0, 0, 0, 0.5);
    outline: none;
}
.cve-input:focus + .cve-input-icon {
    color: #38bdf8;
}

.cve-hint {
    font-size: 12px;
    color: var(--cve-text-muted);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Character Selection Grid */
.cve-char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.cve-char-card {
    position: relative;
    cursor: pointer;
    background: rgba(15, 23, 42, 0.65);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    user-select: none;
}

.cve-char-card:hover {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.cve-char-card.selected {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(129, 140, 248, 0.15));
    border-color: #38bdf8;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}

.cve-char-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cve-char-emblem {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cve-char-emblem img {
    max-width: 28px;
    max-height: 28px;
    object-fit: contain;
}

.cve-char-info {
    flex-grow: 1;
    overflow: hidden;
}

.cve-char-name {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cve-char-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--cve-text-muted);
}

.cve-char-lv {
    color: #38bdf8;
    font-weight: 700;
    background: rgba(56, 189, 248, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
}

.cve-char-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.cve-char-card.selected .cve-char-check {
    background: #38bdf8;
    border-color: #38bdf8;
    color: #0b1120;
    box-shadow: 0 0 10px #38bdf8;
}

/* Action Button */
.cve-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 12px;
}

.cve-btn-redeem {
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    color: #0b1120;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 14px 32px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 18px rgba(56, 189, 248, 0.4);
    transition: all 0.2s ease;
}

.cve-btn-redeem:hover:not(:disabled) {
    background: linear-gradient(135deg, #38bdf8, #7dd3fc);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.6);
}

.cve-btn-redeem:disabled {
    background: #334155;
    color: #64748b;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* History Table Section */
.cve-history-card {
    margin-top: 32px;
    background: rgba(10, 15, 29, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
}

.cve-history-header {
    padding: 16px 20px;
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cve-table-responsive {
    width: 100%;
    overflow-x: auto;
}

.cve-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.cve-table th {
    background: rgba(15, 23, 42, 0.9);
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.6px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cve-table td {
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    vertical-align: middle;
}

.cve-table tr:hover td {
    background: rgba(30, 41, 59, 0.45);
}

.cve-code-badge {
    font-family: monospace;
    font-size: 13px;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

/* Item Popover Styles */
.cve-popover-wrap {
    position: relative;
    display: inline-block;
}

.cve-popover-trigger {
    color: #f59e0b;
    font-weight: 700;
    cursor: pointer;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.28);
    padding: 3px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.cve-popover-trigger:hover {
    background: rgba(245, 158, 11, 0.22);
    color: #fbbf24;
}

.cve-popover-body {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    background: #0f172a;
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);
    z-index: 1000;
    transition: all 0.2s ease;
    font-size: 12px;
    color: #e2e8f0;
    line-height: 1.5;
    pointer-events: none;
}

.cve-popover-wrap:hover .cve-popover-body {
    visibility: visible;
    opacity: 1;
    bottom: 135%;
}

.cve-popover-body::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #0f172a transparent transparent transparent;
}

/* Pagination */
.cve-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 16px;
}

.cve-page-btn {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s;
}

.cve-page-btn:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #38bdf8;
}

.cve-page-btn.active {
    background: #38bdf8;
    border-color: #38bdf8;
    color: #0b1120;
}

/* --------------------------------------------------------------------------
   16. USER EVENT MANAGE (SERVER EVENT MONITOR & LEADERBOARD)
   -------------------------------------------------------------------------- */
:root {
            --sem-bg: #090d16;
            --sem-card-bg: rgba(15, 23, 42, 0.78);
            --sem-border: rgba(56, 189, 248, 0.18);
            --sem-border-glow: rgba(56, 189, 248, 0.45);
            --sem-primary: #38bdf8;
            --sem-gold: #f59e0b;
            --sem-emerald: #10b981;
            --sem-text: #f1f5f9;
            --sem-muted: #94a3b8;
        }

        .sem-wrapper {
            max-width: 1140px;
            margin: 0 auto 30px auto;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            color: var(--sem-text);
        }

        .sem-frame {
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
            border: 1px solid var(--sem-border);
            border-radius: 18px;
            padding: 24px 28px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(56, 189, 248, 0.08);
            position: relative;
            overflow: hidden;
        }

        .sem-frame::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, #38bdf8, #818cf8, #f59e0b, #10b981);
        }

        /* Hero Header */
        .sem-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding-bottom: 20px;
            margin-bottom: 22px;
            flex-wrap: wrap;
            gap: 16px;
        }

        .sem-header-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .sem-header-icon {
            width: 54px;
            height: 54px;
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(56, 189, 248, 0.15));
            border: 1px solid rgba(245, 158, 11, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fbbf24;
            font-size: 26px;
            box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
        }

        .sem-header-title {
            font-size: 22px;
            font-weight: 800;
            letter-spacing: 0.5px;
            background: linear-gradient(90deg, #ffffff, #cbd5e1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 0;
            line-height: 1.2;
        }

        .sem-header-subtitle {
            font-size: 13px;
            color: var(--sem-muted);
            margin-top: 4px;
        }

        .sem-badges {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .sem-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .sem-badge-active {
            background: rgba(16, 185, 129, 0.15);
            border: 1px solid rgba(16, 185, 129, 0.35);
            color: #34d399;
        }

        .sem-badge-info {
            background: rgba(56, 189, 248, 0.15);
            border: 1px solid rgba(56, 189, 248, 0.35);
            color: #38bdf8;
        }

        /* Primary Segmented Tabs */
        .sem-main-tabs {
            display: flex;
            gap: 10px;
            background: rgba(10, 15, 29, 0.85);
            padding: 6px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            margin-bottom: 22px;
        }

        .sem-tab-btn {
            flex: 1;
            padding: 12px 18px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            color: var(--sem-muted);
            background: transparent;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .sem-tab-btn:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.04);
        }

        .sem-tab-btn.active {
            background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(129, 140, 248, 0.22));
            color: #38bdf8;
            border: 1px solid rgba(56, 189, 248, 0.4);
            box-shadow: 0 4px 14px rgba(56, 189, 248, 0.15);
        }

        .sem-tab-count {
            background: rgba(56, 189, 248, 0.2);
            color: #38bdf8;
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 12px;
            font-weight: 700;
        }
        .sem-tab-btn.active .sem-tab-count {
            background: #38bdf8;
            color: #0b1120;
        }

        /* Internal Sub-Tabs (Event List Chips) */
        .sem-event-chips {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 6px;
            margin-bottom: 22px;
        }
        .sem-event-chips::-webkit-scrollbar { height: 4px; }
        .sem-event-chips::-webkit-scrollbar-thumb { background: rgba(56, 189, 248, 0.3); border-radius: 4px; }

        .sem-chip-btn {
            padding: 10px 18px;
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            color: #cbd5e1;
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
        }

        .sem-chip-btn:hover {
            border-color: rgba(56, 189, 248, 0.4);
            background: rgba(30, 41, 59, 0.7);
            color: #fff;
        }

        .sem-chip-btn.active {
            background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(16, 185, 129, 0.15));
            border-color: #38bdf8;
            color: #38bdf8;
            box-shadow: 0 0 16px rgba(56, 189, 248, 0.25);
        }

        /* Live Countdown HUD */
        .sem-countdown-hud {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(8, 12, 22, 0.95));
            border: 1px solid rgba(245, 158, 11, 0.35);
            border-radius: 14px;
            padding: 16px 20px;
            margin-bottom: 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .sem-hud-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: #fbbf24;
        }

        .sem-hud-title i {
            font-size: 18px;
            animation: semPulse 2s infinite;
        }

        @keyframes semPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(1.1); }
        }

        .sem-hud-blocks {
            display: flex;
            gap: 8px;
        }

        .sem-hud-block {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(245, 158, 11, 0.25);
            border-radius: 8px;
            min-width: 55px;
            padding: 6px 10px;
            text-align: center;
        }

        .sem-hud-val {
            font-size: 18px;
            font-weight: 900;
            color: #ffffff;
            font-family: monospace;
            line-height: 1;
        }

        .sem-hud-lbl {
            font-size: 9px;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 4px;
        }

        /* Description Box */
        .sem-desc-box {
            background: rgba(10, 15, 29, 0.7);
            border: 1px solid rgba(56, 189, 248, 0.2);
            border-left: 4px solid #38bdf8;
            border-radius: 10px;
            padding: 14px 18px;
            font-size: 13px;
            line-height: 1.6;
            color: #cbd5e1;
            margin-bottom: 22px;
        }

        /* Two-Column Grid */
        .sem-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px;
        }

        @media (max-width: 860px) {
            .sem-grid { grid-template-columns: 1fr; }
        }

        .sem-card {
            background: rgba(10, 15, 29, 0.75);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .sem-card-header {
            padding: 14px 18px;
            background: rgba(15, 23, 42, 0.95);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .sem-card-title {
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: #38bdf8;
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0;
        }

        .sem-metric-pill {
            background: rgba(56, 189, 248, 0.15);
            border: 1px solid rgba(56, 189, 248, 0.3);
            color: #38bdf8;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            letter-spacing: 0.5px;
        }

        /* Table Styling */
        .sem-table-wrap {
            overflow-x: auto;
            flex-grow: 1;
        }

        .sem-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .sem-table th {
            background: rgba(15, 23, 42, 0.85);
            color: #94a3b8;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            padding: 12px 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            text-align: left;
        }

        .sem-table td {
            padding: 11px 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            color: #cbd5e1;
            vertical-align: middle;
        }

        .sem-table tr:hover td {
            background: rgba(30, 41, 59, 0.45);
        }

        /* Rank Podiums */
        .sem-rank-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 800;
        }

        .sem-rank-1 {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35));
            border: 1px solid #f59e0b;
            color: #fbbf24;
            box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
        }
        .sem-rank-2 {
            background: linear-gradient(135deg, rgba(203, 213, 225, 0.2), rgba(148, 163, 184, 0.3));
            border: 1px solid #cbd5e1;
            color: #f1f5f9;
        }
        .sem-rank-3 {
            background: linear-gradient(135deg, rgba(217, 119, 6, 0.2), rgba(180, 83, 9, 0.3));
            border: 1px solid #d97706;
            color: #fb923c;
        }
        .sem-rank-default {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #94a3b8;
        }

        .sem-char-cell {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .sem-char-emblem {
            width: 24px;
            height: 24px;
            object-fit: contain;
            flex-shrink: 0;
        }

        .sem-char-name {
            font-weight: 700;
            color: #f1f5f9;
        }

        .sem-score-pill {
            font-family: monospace;
            font-weight: 800;
            color: #38bdf8;
            font-size: 13px;
        }

        /* Rewards Section */
        .sem-rewards-body {
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            flex-grow: 1;
        }

        .sem-reward-tier {
            background: rgba(15, 23, 42, 0.65);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.2s ease;
        }

        .sem-reward-tier.tier-gold {
            border-color: rgba(245, 158, 11, 0.4);
            box-shadow: 0 0 16px rgba(245, 158, 11, 0.12);
        }
        .sem-reward-tier.tier-silver {
            border-color: rgba(203, 213, 225, 0.3);
        }
        .sem-reward-tier.tier-bronze {
            border-color: rgba(217, 119, 6, 0.3);
        }

        .sem-tier-header {
            padding: 8px 14px;
            background: rgba(0, 0, 0, 0.4);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .sem-reward-tier.tier-gold .sem-tier-header { color: #fbbf24; }
        .sem-reward-tier.tier-silver .sem-tier-header { color: #e2e8f0; }
        .sem-reward-tier.tier-bronze .sem-tier-header { color: #fb923c; }

        .sem-reward-items {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sem-reward-item {
            display: flex;
            align-items: center;
            padding: 10px 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            gap: 12px;
        }
        .sem-reward-item:last-child { border-bottom: none; }

        .sem-reward-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .sem-reward-info {
            flex-grow: 1;
            line-height: 1.4;
        }

        .sem-reward-title {
            font-size: 13px;
            font-weight: 700;
            color: #f1f5f9;
        }

        .sem-reward-sub {
            font-size: 11px;
            color: var(--sem-muted);
            margin-top: 2px;
        }

        /* Empty State */
        .sem-empty {
            text-align: center;
            padding: 45px 20px;
            color: var(--sem-muted);
        }
        .sem-empty i {
            font-size: 38px;
            color: #475569;
            margin-bottom: 12px;
            display: block;
        }
        .sem-empty h4 {
            color: #cbd5e1;
            margin: 0 0 6px 0;
            font-size: 16px;
            font-weight: 700;
        }

        /* Past Winners View */
        .sem-past-event-box {
            background: rgba(10, 15, 29, 0.75);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            margin-bottom: 18px;
            overflow: hidden;
        }

        .sem-past-header {
            padding: 14px 18px;
            background: rgba(15, 23, 42, 0.95);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }

        .sem-past-title {
            font-size: 14px;
            font-weight: 800;
            color: #f1f5f9;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .sem-past-date {
            font-size: 11px;
            color: #94a3b8;
            background: rgba(255, 255, 255, 0.06);
            padding: 3px 10px;
            border-radius: 12px;
        }

        .popover { z-index: 10000 !important; }


/* ==========================================================================
   GLOBAL CYBER-OBSIDIAN FOUNDATION (APPLIES TO ALL PAGES & MODULES)
   ========================================================================== */

/* 1. Global Container & Search Area Card Styling */
#search-area,
.search-area,
.panel-default,
.table-responsive,
.card,
.well,
.box,
.content-box {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(56, 189, 248, 0.05) !important;
    overflow: hidden;
    position: relative;
}

#search-area {
    padding: 16px 20px 6px 20px !important;
    margin-bottom: 24px !important;
}

#search-area form {
    margin: 0 !important;
}

/* 2. Global Table Modernization */
table.table,
.table-bordered,
.table-hover,
.table-striped,
.table-dark-custom {
    background: transparent !important;
    border: none !important;
    color: #cbd5e1 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

table.table > thead > tr > th,
.table-bordered > thead > tr > th,
.table thead th {
    background: linear-gradient(180deg, rgba(20, 30, 52, 0.95), rgba(12, 18, 34, 0.98)) !important;
    color: #38bdf8 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 14px 16px !important;
    border: none !important;
    border-bottom: 2px solid rgba(56, 189, 248, 0.45) !important;
    vertical-align: middle !important;
}

table.table > thead > tr > th i,
.table-bordered > thead > tr > th i {
    color: #f59e0b !important;
    margin-right: 6px !important;
}

table.table > thead > tr > th strong,
.table-bordered > thead > tr > th strong {
    color: #f1f5f9 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
}

table.table > tbody > tr > td,
.table-bordered > tbody > tr > td,
.table tbody td {
    padding: 12px 16px !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
    vertical-align: middle !important;
    background: transparent !important;
    font-size: 13px !important;
}

table.table > tbody > tr:last-child > td,
.table-bordered > tbody > tr:last-child > td {
    border-bottom: none !important;
}

table.table-hover > tbody > tr:hover,
table.table > tbody > tr:hover > td,
.table-bordered > tbody > tr:hover > td,
.table-hover tbody tr:hover {
    background: rgba(56, 189, 248, 0.08) !important;
    color: #f1f5f9 !important;
}

table.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.015) !important;
}

/* 3. Global Form Inputs & Selects */
.form-control,
input[type="text"].form-control,
input[type="password"].form-control,
input[type="email"].form-control,
input[type="number"].form-control,
select.form-control,
textarea.form-control {
    background: rgba(10, 15, 29, 0.88) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    padding: 10px 14px !important;
    height: auto !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.25s ease !important;
}

.form-control:focus,
input[type="text"].form-control:focus,
input[type="password"].form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    background: rgba(15, 23, 42, 0.96) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    outline: none !important;
    color: #ffffff !important;
}

.form-control::placeholder {
    color: #64748b !important;
}

/* 4. Global Panels */
.panel-default > .panel-heading {
    background: linear-gradient(180deg, rgba(20, 30, 52, 0.95), rgba(12, 18, 34, 0.98)) !important;
    border-bottom: 2px solid rgba(56, 189, 248, 0.4) !important;
    color: #38bdf8 !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    padding: 14px 18px !important;
}

.panel-default > .panel-body {
    background: transparent !important;
    color: #cbd5e1 !important;
    padding: 20px !important;
}

/* 5. Global Pagination Modernization */
.pagination {
    display: inline-flex !important;
    gap: 4px !important;
    margin: 16px 0 !important;
}

.pagination > li > a,
.pagination > li > span {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    border-radius: 6px !important;
    padding: 7px 13px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    background: rgba(56, 189, 248, 0.18) !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    background: #38bdf8 !important;
    border-color: #38bdf8 !important;
    color: #0b1120 !important;
    font-weight: 900 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.5) !important;
}

/* 6. Global Log Details Box */
.log-details {
    background: rgba(6, 10, 20, 0.9) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 8px !important;
    color: #38bdf8 !important;
    padding: 10px 14px !important;
    font-family: Consolas, monospace !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}


/* ==================== EXTRACTED SEASON PASS CSS ==================== */
        /* ============================================
           GLOBAL RESET & BASE - PURE DARK THEME
           ============================================ */
        
        
        
        
        /* ============================================
           MAIN WRAPPER
           ============================================ */
        .sp-wrapper {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px 24px 40px;
            background: #0d0d0d;
            min-height: 100vh;
        }
        
        /* ============================================
           HEADER
           ============================================ */
        .sp-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 24px;
            background: #141414;
            border-radius: 12px;
            border: 1px solid #222;
            margin-bottom: 28px;
            flex-wrap: wrap;
            gap: 12px;
        }
        
        .sp-header-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .sp-logo {
            width: 48px;
            height: 48px;
            background: #1a1a1a;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #fbbf24;
            border: 1px solid #2a2a2a;
        }
        
        .sp-title {
            font-size: 22px;
            font-weight: 800;
            color: #ffffff;
            letter-spacing: -0.5px;
        }
        
        .sp-title-sub {
            font-size: 12px;
            color: #666;
            font-weight: 400;
            display: block;
            font-weight: 300;
            letter-spacing: 0.5px;
        }
        
        .sp-header-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .sp-wallet {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #141414;
            padding: 8px 18px;
            border-radius: 30px;
            border: 1px solid #222;
            font-size: 14px;
        }
        
        .sp-wallet i {
            color: #fbbf24;
            font-size: 16px;
        }
        
        .sp-wallet-amount {
            font-weight: 700;
            color: #fbbf24;
            font-size: 16px;
        }
        
        /* ============================================
           ALERTS
           ============================================ */
        .sp-alert {
            padding: 14px 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 12px;
            border-left: 4px solid;
        }
        
        .sp-alert-success {
            background: rgba(34, 197, 94, 0.08);
            color: #4ade80;
            border-color: #22c55e;
        }
        
        .sp-alert-danger {
            background: rgba(239, 68, 68, 0.08);
            color: #f87171;
            border-color: #ef4444;
        }
        
        .sp-alert-warning {
            background: rgba(251, 191, 36, 0.08);
            color: #fbbf24;
            border-color: #f59e0b;
        }
        
        .sp-alert-info {
            background: rgba(59, 130, 246, 0.08);
            color: #60a5fa;
            border-color: #3b82f6;
        }
        
        /* ============================================
           CHARACTER SELECTOR
           ============================================ */
        .sp-char-selector {
            background: #111;
            border-radius: 12px;
            border: 1px solid #222;
            padding: 16px 20px;
            margin-bottom: 28px;
        }
        
        .sp-char-selector-label {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 600;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }
        
        .sp-char-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 10px;
        }
        
        .sp-char-card {
            position: relative;
            cursor: pointer;
            border-radius: 10px;
            transition: all 0.25s ease;
        }
        
        .sp-char-card input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        
        .sp-char-card-inner {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            background: #181818;
            border-radius: 10px;
            border: 2px solid transparent;
            transition: all 0.25s ease;
        }
        
        .sp-char-card:hover .sp-char-card-inner {
            background: #202020;
            transform: translateY(-2px);
        }
        
        .sp-char-card input:checked + .sp-char-card-inner {
            background: #1a1a2a;
            border-color: #fbbf24;
        }
        
        .sp-char-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #222;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            flex-shrink: 0;
            overflow: hidden;
        }
        
        .sp-char-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .sp-char-name {
            font-weight: 600;
            font-size: 14px;
            color: #eee;
        }
        
        .sp-char-level {
            font-size: 11px;
            color: #666;
            font-weight: 400;
        }
        
        .sp-char-check {
            margin-left: auto;
            color: #fbbf24;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .sp-char-card input:checked + .sp-char-card-inner .sp-char-check {
            opacity: 1;
        }
        
        /* ============================================
           DASHBOARD LAYOUT
           ============================================ */
        .sp-dashboard {
            display: grid;
            grid-template-columns: 340px 1fr;
            gap: 24px;
        }
        
        @media (max-width: 1024px) {
            .sp-dashboard {
                grid-template-columns: 1fr;
            }
        }
        
        /* ============================================
           SIDEBAR
           ============================================ */
        .sp-sidebar {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .sp-card {
            background: #111;
            border-radius: 12px;
            border: 1px solid #222;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .sp-card:hover {
            border-color: #333;
        }
        
        .sp-card-header {
            padding: 14px 20px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: #888;
            border-bottom: 1px solid #1a1a1a;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .sp-card-header i {
            color: #fbbf24;
        }
        
        .sp-card-
        
        /* Profile Card */
        .sp-profile {
            text-align: center;
            padding: 24px 20px;
        }
        
        .sp-level-circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #1a1a1a;
            border: 3px solid #fbbf24;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            font-weight: 900;
            color: #fff;
            margin: 0 auto 16px;
            box-shadow: 0 0 40px rgba(251, 191, 36, 0.05);
            position: relative;
        }
        
        .sp-level-circle .level-label {
            position: absolute;
            bottom: -8px;
            right: -8px;
            background: #0d0d0d;
            font-size: 10px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 30px;
            color: #888;
            border: 1px solid #222;
        }
        
        .sp-pass-badge {
            display: inline-block;
            padding: 6px 18px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 16px;
        }
        
        .sp-pass-badge.gold {
            background: #fbbf24;
            color: #000;
        }
        
        .sp-pass-badge.silver {
            background: #222;
            color: #aaa;
            border: 1px solid #333;
        }
        
        /* Progress Bar */
        .sp-progress {
            margin-top: 8px;
        }
        
        .sp-progress-labels {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
            margin-bottom: 6px;
        }
        
        .sp-progress-labels span:last-child {
            color: #aaa;
            font-weight: 600;
        }
        
        .sp-progress-track {
            height: 8px;
            background: #1a1a1a;
            border-radius: 30px;
            overflow: hidden;
            position: relative;
        }
        
        .sp-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #fbbf24, #f59e0b);
            border-radius: 30px;
            transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            width: 0%;
            position: relative;
        }
        
        /* ============================================
           BUTTONS
           ============================================ */
        .sp-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            width: 100%;
        }
        
        .sp-btn-primary {
            background: #1a1a2a;
            color: #fbbf24;
            border: 1px solid #2a2a3a;
        }
        
        .sp-btn-primary:hover {
            background: #22223a;
            transform: translateY(-2px);
        }
        
        .sp-btn-gold {
            background: #fbbf24;
            color: #000;
        }
        
        .sp-btn-gold:hover {
            background: #f59e0b;
            transform: translateY(-2px);
        }
        
        .sp-btn-success {
            background: #22c55e;
            color: #fff;
        }
        
        .sp-btn-success:hover {
            background: #16a34a;
            transform: translateY(-2px);
        }
        
        .sp-btn-sm {
            padding: 6px 14px;
            font-size: 11px;
            width: auto;
        }
        
        .sp-btn.loading {
            opacity: 0.6;
            pointer-events: none;
            position: relative;
        }
        
        .sp-btn.loading::after {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            border: 2px solid transparent;
            border-top-color: currentColor;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-left: 8px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* ============================================
           TABS
           ============================================ */
        .sp-tabs {
            display: flex;
            gap: 2px;
            background: #0d0d0d;
            border-radius: 10px;
            padding: 4px;
            margin-bottom: 16px;
        }
        
        .sp-tab {
            flex: 1;
            padding: 10px 12px;
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: #666;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.25s ease;
            border: none;
            background: transparent;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        
        .sp-tab:hover {
            color: #ccc;
        }
        
        .sp-tab.active {
            background: #1a1a2a;
            color: #fbbf24;
        }
        
        .sp-tab-content {
            display: none;
            animation: fadeIn 0.3s ease;
        }
        
        .sp-tab-content.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* ============================================
           PACKAGES
           ============================================ */
        .sp-package-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .sp-package-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            background: #141414;
            border-radius: 8px;
            border: 1px solid #1a1a1a;
            transition: all 0.2s ease;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .sp-package-item:hover {
            background: #1a1a1a;
            border-color: #2a2a2a;
        }
        
        .sp-package-info {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
        }
        
        .sp-package-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: #1a1a1a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #fbbf24;
            flex-shrink: 0;
        }
        
        .sp-package-name {
            font-size: 13px;
            font-weight: 500;
            color: #ddd;
        }
        
        .sp-package-meta {
            font-size: 11px;
            color: #666;
        }
        
        .sp-package-value {
            font-weight: 700;
            color: #4ade80;
            font-size: 13px;
        }
        
        .sp-package-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .sp-package-actions input[type="number"] {
            width: 50px;
            padding: 4px 6px;
            background: #0d0d0d;
            border: 1px solid #222;
            border-radius: 6px;
            color: #fff;
            font-size: 12px;
            text-align: center;
        }
        
        .sp-package-actions input[type="number"]:focus {
            outline: none;
            border-color: #fbbf24;
        }
        
        /* ============================================
           REWARDS
           ============================================ */
        .sp-rewards-header {
            display: grid;
            grid-template-columns: 60px 1fr 1fr;
            gap: 12px;
            padding: 10px 16px;
            background: #111;
            border-radius: 10px 10px 0 0;
            border-bottom: 1px solid #1a1a1a;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #666;
        }
        
        .sp-rewards-header .sp-col-gold {
            color: #fbbf24;
        }
        
        .sp-rewards-list {
            max-height: 700px;
            overflow-y: auto;
            padding-right: 4px;
        }
        
        .sp-rewards-list::-webkit-scrollbar {
            width: 4px;
        }
        
        .sp-rewards-list::-webkit-scrollbar-track {
            background: #0d0d0d;
            border-radius: 10px;
        }
        
        .sp-rewards-list::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 10px;
        }
        
        .sp-reward-row {
            display: grid;
            grid-template-columns: 60px 1fr 1fr;
            gap: 12px;
            padding: 8px 16px;
            border-radius: 8px;
            margin-bottom: 6px;
            transition: all 0.2s ease;
            background: #0f0f0f;
            border: 1px solid transparent;
            align-items: center;
            min-height: 60px;
        }
        
        .sp-reward-row:hover {
            background: #141414;
            border-color: #222;
        }
        
        .sp-reward-row.current {
            border-color: #fbbf24;
            background: #111108;
        }
        
        .sp-reward-row.locked {
            opacity: 0.4;
        }
        
        .sp-reward-row .sp-level-badge {
            font-size: 18px;
            font-weight: 800;
            color: #444;
            text-align: center;
        }
        
        .sp-reward-row.current .sp-level-badge {
            color: #fbbf24;
        }
        
        .sp-reward-row.unlocked .sp-level-badge {
            color: #888;
        }
        
        /* Reward Item */
        .sp-reward-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 4px 0;
        }
        
        .sp-reward-item .sp-reward-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: #0d0d0d;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border: 1px solid #1a1a1a;
            overflow: hidden;
            font-size: 18px;
        }
        
        .sp-reward-item .sp-reward-icon img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .sp-reward-item .sp-reward-info {
            flex: 1;
            min-width: 0;
        }
        
        .sp-reward-item .sp-reward-name {
            font-size: 13px;
            font-weight: 600;
            color: #eee;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }
        
        .sp-reward-item .sp-reward-meta {
            font-size: 11px;
            color: #666;
        }
        
        .sp-reward-item.gold .sp-reward-name {
            color: #fbbf24;
        }
        
        /* Status */
        .sp-reward-status {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            min-width: 70px;
        }
        
        .sp-status-badge {
            font-size: 11px;
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 30px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        .sp-status-badge.claimed {
            background: rgba(34, 197, 94, 0.1);
            color: #4ade80;
        }
        
        .sp-status-badge.locked {
            background: #141414;
            color: #555;
        }
        
        .sp-status-badge.gold-required {
            background: rgba(251, 191, 36, 0.1);
            color: #fbbf24;
        }
        
        .sp-status-badge.ingame {
            background: rgba(59, 130, 246, 0.1);
            color: #60a5fa;
        }
        
        .sp-btn-claim {
            font-size: 11px;
            font-weight: 700;
            padding: 4px 14px;
            border: none;
            border-radius: 30px;
            background: #22c55e;
            color: #fff;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        .sp-btn-claim:hover {
            background: #16a34a;
        }
        
        .sp-btn-claim:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* ============================================
           MODAL
           ============================================ */
        .sp-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0,0,0,0.9);
            z-index: 999999;
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .sp-modal-overlay.show {
            display: flex;
        }
        
        .sp-modal {
            background: #141414;
            border-radius: 16px;
            padding: 40px 48px;
            max-width: 440px;
            width: 90%;
            text-align: center;
            border: 1px solid #222;
            box-shadow: 0 20px 60px rgba(0,0,0,0.8);
            animation: modalIn 0.4s ease;
        }
        
        @keyframes modalIn {
            from { transform: scale(0.9) translateY(20px); opacity: 0; }
            to { transform: scale(1) translateY(0); opacity: 1; }
        }
        
        .sp-modal-icon {
            font-size: 56px;
            color: #4ade80;
            margin-bottom: 16px;
            display: block;
        }
        
        .sp-modal-title {
            font-size: 24px;
            font-weight: 800;
            color: #fff;
            margin-bottom: 8px;
        }
        
        .sp-modal-desc {
            color: #888;
            font-size: 15px;
            margin-bottom: 4px;
        }
        
        .sp-modal-item {
            font-size: 18px;
            font-weight: 600;
            color: #fbbf24;
            margin: 8px 0 16px;
        }
        
        .sp-modal-char {
            color: #4ade80;
            font-weight: 600;
        }
        
        .sp-modal-btn {
            margin-top: 20px;
            padding: 10px 32px;
            border: none;
            border-radius: 30px;
            background: #fbbf24;
            color: #000;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .sp-modal-btn:hover {
            background: #f59e0b;
        }
        
        /* ============================================
           RESPONSIVE
           ============================================ */
        @media (max-width: 768px) {
            .sp-wrapper {
                padding: 12px 14px;
            }
            
            .sp-header {
                padding: 12px 16px;
                flex-direction: column;
                align-items: stretch;
            }
            
            .sp-header-left {
                justify-content: center;
            }
            
            .sp-header-right {
                justify-content: center;
            }
            
            .sp-char-grid {
                grid-template-columns: 1fr 1fr;
            }
            
            .sp-rewards-header {
                display: none;
            }
            
            .sp-reward-row {
                grid-template-columns: 1fr;
                gap: 6px;
                padding: 12px 16px;
            }
            
            .sp-reward-row .sp-level-badge {
                text-align: left;
                font-size: 14px;
                color: #888;
            }
            
            .sp-reward-item {
                padding-left: 0;
            }
            
            .sp-reward-status {
                justify-content: flex-start;
                padding-left: 52px;
            }
            
            .sp-package-item {
                flex-direction: column;
                align-items: stretch;
            }
            
            .sp-package-actions {
                justify-content: flex-end;
            }
            
            .sp-modal {
                padding: 28px 20px;
            }
            
            .sp-tabs {
                flex-wrap: wrap;
            }
            
            .sp-tab {
                flex: 1 1 33%;
                font-size: 10px;
                padding: 8px 6px;
            }
        }
        
        @media (max-width: 480px) {
            .sp-char-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* ============================================
           UTILITY
           ============================================ */
        .sp-text-center { text-align: center; }
        .sp-text-muted { color: #666; }
        .sp-mt-8 { margin-top: 8px; }
        .sp-mb-8 { margin-bottom: 8px; }
        .sp-flex { display: flex; }
        .sp-flex-center { display: flex; align-items: center; justify-content: center; }
        .sp-flex-between { display: flex; align-items: center; justify-content: space-between; }
        .sp-user-select-none { user-select: none; }
        
        .sp-wrapper {
            user-select: none;
        }



/* ==========================================================================
   UNIFIED CYBER-OBSIDIAN SUITE (ALL PAGES: ADMIN, LOGS, SEASON PASS, REF)
   ========================================================================== */

/* 1. ADMIN PANEL SUITE (.ai-*) */
.ai-wrapper {
    background: rgba(13, 17, 28, 0.75) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    margin-bottom: 50px !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(56, 189, 248, 0.05) !important;
}

.ai-card {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease !important;
}

.ai-card:hover {
    border-color: rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.12) !important;
}

.ai-card-header {
    background: linear-gradient(180deg, rgba(20, 30, 52, 0.95), rgba(13, 18, 34, 0.98)) !important;
    color: #38bdf8 !important;
    padding: 16px 22px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    border-bottom: 2px solid rgba(56, 189, 248, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

.ai-card-header i {
    color: #00f0ff !important;
    font-size: 16px !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6) !important;
}

.ai-card-body {
    padding: 24px !important;
    background: transparent !important;
}

.ai-card-footer {
    background: rgba(10, 15, 29, 0.85) !important;
    padding: 14px 20px !important;
    border-top: 1px solid rgba(56, 189, 248, 0.15) !important;
}

.ai-table {
    width: 100% !important;
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: #cbd5e1 !important;
    font-size: 13px !important;
    border: none !important;
}

.ai-table thead th {
    background: rgba(10, 15, 29, 0.95) !important;
    color: #38bdf8 !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid rgba(56, 189, 248, 0.3) !important;
    border-top: none !important;
    text-align: left !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.ai-table thead th i {
    color: #f59e0b !important;
    margin-right: 6px !important;
}

.ai-table tbody td {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.1) !important;
    border-top: none !important;
    vertical-align: middle !important;
    background: transparent !important;
}

.ai-table tbody tr:hover {
    background: rgba(56, 189, 248, 0.06) !important;
}

.ai-table .label-cell {
    width: 25% !important;
    color: #94a3b8 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.ai-table .value-cell {
    color: #f1f5f9 !important;
    font-weight: 500 !important;
}

.ai-form-control {
    width: 100% !important;
    padding: 11px 15px !important;
    background: rgba(10, 15, 29, 0.9) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-family: 'Inter', sans-serif !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

.ai-form-control:focus {
    border-color: #38bdf8 !important;
    outline: none !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.ai-btn, .ai-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 24px !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    background: linear-gradient(135deg, #00f0ff 0%, #0284c7 100%) !important;
    color: #041019 !important;
    box-shadow: 0 4px 15px rgba(0, 240, 255, 0.35) !important;
    text-decoration: none !important;
}

.ai-btn-primary:hover, .ai-btn:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 22px rgba(56, 189, 248, 0.55) !important;
    transform: translateY(-2px) !important;
}

.ai-char-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    background: rgba(10, 15, 29, 0.8) !important;
    border: 1px solid rgba(56, 189, 248, 0.15) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.ai-char-item:hover {
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
}

/* 2. LOGS & TRACING SUITE (.logs-*) */
.logs-page {
    width: 100% !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
}

.logs-card {
    background: rgba(13, 17, 28, 0.75) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 14px !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.05) !important;
    transition: all 0.3s ease !important;
}

.logs-card:hover {
    border-color: rgba(56, 189, 248, 0.35) !important;
}

.logs-card-header {
    background: linear-gradient(180deg, rgba(20, 30, 52, 0.95), rgba(13, 18, 34, 0.98)) !important;
    color: #38bdf8 !important;
    padding: 16px 22px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    border-bottom: 2px solid rgba(56, 189, 248, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

.logs-card-header i {
    color: #00f0ff !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6) !important;
}

.logs-card-body {
    padding: 24px !important;
    background: transparent !important;
}

.logs-info-box {
    background: rgba(56, 189, 248, 0.08) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-left: 4px solid #38bdf8 !important;
    padding: 15px 20px !important;
    margin-bottom: 20px !important;
    border-radius: 8px !important;
}

.logs-info-box h4 {
    margin: 0 0 6px 0 !important;
    color: #38bdf8 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

.logs-info-box p {
    margin: 0 !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
}

.logs-form-control {
    width: 100% !important;
    padding: 10px 14px !important;
    background: rgba(10, 15, 29, 0.9) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-family: 'Inter', sans-serif !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.logs-form-control:focus {
    outline: none !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important;
}

.logs-btn, .logs-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 24px !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    background: linear-gradient(135deg, #00f0ff 0%, #0284c7 100%) !important;
    color: #041019 !important;
    box-shadow: 0 4px 15px rgba(0, 240, 255, 0.35) !important;
    text-decoration: none !important;
}

.logs-btn-primary:hover, .logs-btn:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 22px rgba(56, 189, 248, 0.55) !important;
    transform: translateY(-2px) !important;
}

.logs-table {
    width: 100% !important;
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: #cbd5e1 !important;
    font-size: 13px !important;
}

.logs-table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.1) !important;
    vertical-align: middle !important;
}

/* 3. VERSION & REF SUITE (.ref-*, .version-admin-page, .info-table) */
.version-admin-page {
    width: 100% !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    color: #cbd5e1 !important;
}

.ref-card {
    background: rgba(13, 17, 28, 0.75) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 14px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.05) !important;
    width: 100% !important;
    margin: 0 auto !important;
    overflow: hidden !important;
}

.ref-card-header {
    background: linear-gradient(180deg, rgba(20, 30, 52, 0.95), rgba(13, 18, 34, 0.98)) !important;
    color: #38bdf8 !important;
    padding: 18px 24px !important;
    font-weight: 800 !important;
    font-size: 1.1em !important;
    border-bottom: 2px solid rgba(56, 189, 248, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

.ref-card-header i {
    margin-right: 12px !important;
    color: #00f0ff !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6) !important;
}

.ref-card-body {
    padding: 40px 30px !important;
    text-align: center !important;
    background: transparent !important;
}

.ref-card-footer {
    padding: 16px !important;
    background: rgba(10, 15, 29, 0.85) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: #94a3b8 !important;
    font-size: 0.85em !important;
    border-top: 1px solid rgba(56, 189, 248, 0.15) !important;
}

.logo-img {
    width: 96px !important;
    height: 96px !important;
    border-radius: 50% !important;
    padding: 6px !important;
    background: rgba(15, 23, 42, 0.9) !important;
    border: 2px solid rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.25) !important;
}

.version-number {
    font-size: 2.2em !important;
    font-weight: 800 !important;
    margin-bottom: 5px !important;
    color: #ffffff !important;
    letter-spacing: -0.5px !important;
}

.info-table {
    width: 100% !important;
    max-width: 800px !important;
    margin: 20px auto 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: rgba(10, 15, 29, 0.8) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    overflow: hidden !important;
}

.info-table td {
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.12) !important;
    vertical-align: middle !important;
}

.info-table tr:last-child td {
    border-bottom: none !important;
}

.info-table tr td:first-child {
    text-align: right !important;
    font-weight: 600 !important;
    width: 40% !important;
    color: #94a3b8 !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border-right: 1px solid rgba(56, 189, 248, 0.15) !important;
}

.info-table tr td:last-child {
    text-align: left !important;
    color: #f1f5f9 !important;
    background: rgba(10, 15, 29, 0.6) !important;
}

.countdown-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-weight: 700 !important;
    font-size: 1.15em !important;
    color: #38bdf8 !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
}

/* 4. SEASON PASS SUITE ENHANCEMENT (.sp-*) */
.sp-wrapper {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 24px !important;
    background: rgba(13, 17, 28, 0.75) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 14px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(56, 189, 248, 0.05) !important;
}

.sp-header {
    background: linear-gradient(180deg, rgba(20, 30, 52, 0.95), rgba(13, 18, 34, 0.98)) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    padding: 18px 24px !important;
}

.sp-header h1 {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.sp-header-subtitle {
    color: #94a3b8 !important;
}

.sp-wallet-badge {
    background: rgba(10, 15, 29, 0.9) !important;
    border: 1.5px solid rgba(251, 191, 36, 0.4) !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.15) !important;
}

.sp-card, .sp-neon-card {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.sp-btn-primary {
    background: linear-gradient(135deg, #00f0ff 0%, #0284c7 100%) !important;
    color: #041019 !important;
    font-weight: 800 !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 240, 255, 0.35) !important;
}

.sp-btn-primary:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 22px rgba(56, 189, 248, 0.55) !important;
}

/* ==========================================================================
   UNIFIED CYBER-OBSIDIAN DASHBOARD & MAIN CONTAINER (.main-content-box, .bank-*)
   ========================================================================== */

/* Main Content Box Wrapper (Encloses all pages in gamecp.html) */
.main-content-box {
    background: rgba(10, 14, 26, 0.78) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 16px !important;
    padding: 28px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(56, 189, 248, 0.05) !important;
}

/* Bank Dashboard Wrapper */
.bank-dashboard-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    font-family: 'Inter', -apple-system, sans-serif;
    color: #e2e8f0;
}

/* Master Header (Profile & Pass info) */
.bank-master-header {
    background: rgba(13, 18, 32, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
    transition: all 0.3s ease !important;
}

.bank-master-header:hover {
    border-color: rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 20px rgba(56, 189, 248, 0.1) !important;
}

.bank-profile-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.bank-user-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.bank-username {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.5px !important;
    margin: 0 0 4px 0 !important;
}

.bank-username.is-premium {
    color: #fbbf24 !important;
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.5) !important;
}

.bank-prem-countdown {
    background: rgba(251, 191, 36, 0.12) !important;
    border: 1px solid rgba(251, 191, 36, 0.35) !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fbbf24 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.bank-prem-countdown i {
    color: #fbbf24 !important;
    font-size: 13px !important;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.6) !important;
}

/* Assets Grid (Cash Coin, Web Wallet, Game Points, etc.) */
.bank-assets-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 14px !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(56, 189, 248, 0.15) !important;
}

.bank-asset-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 12px !important;
    transition: all 0.25s ease !important;
    text-align: center !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

.bank-asset-item:hover {
    background: rgba(20, 30, 54, 0.9) !important;
    border-color: #38bdf8 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(56, 189, 248, 0.25) !important;
}

.bank-asset-item i {
    font-size: 22px !important;
    color: #fbbf24 !important;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.6) !important;
    margin-bottom: 6px !important;
}

.bank-asset-label {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #94a3b8 !important;
    font-weight: 700 !important;
}

.bank-asset-value {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-top: 4px !important;
}

/* Two Columns: Account Info & Latest News */
.bank-content-grid {
    display: block !important;
    width: 100% !important;
    margin-bottom: 24px !important;
}

.dashboard-grid {
    display: grid !important;
    grid-template-columns: 360px 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    align-items: start !important;
}

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

.bank-info-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.bank-info-list li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.1) !important;
}

.bank-info-list li:last-child {
    border-bottom: none !important;
}

.bank-info-label {
    color: #94a3b8 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

.bank-info-value {
    color: #f1f5f9 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

.dashboard-card {
    background: rgba(13, 18, 32, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.dashboard-card:hover {
    border-color: rgba(56, 189, 248, 0.35) !important;
}

.dashboard-card-header {
    background: linear-gradient(180deg, rgba(20, 30, 52, 0.95), rgba(13, 18, 34, 0.98)) !important;
    border-bottom: 2px solid rgba(56, 189, 248, 0.35) !important;
    padding: 16px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.dashboard-card-header h5 {
    color: #38bdf8 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.dashboard-card-header h5 i {
    color: #00f0ff !important;
    font-size: 15px !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6) !important;
}

.dashboard-card-body {
    padding: 22px !important;
    background: transparent !important;
}

/* Account Info Rows */
.account-info-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.1) !important;
    font-size: 13px !important;
}

.account-info-row:last-child {
    border-bottom: none !important;
}

.account-info-label {
    color: #94a3b8 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
}

.account-info-value {
    color: #f1f5f9 !important;
    font-weight: 700 !important;
}

/* News Filter Tabs */
.news-filter-tabs {
    display: flex !important;
    gap: 18px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
    margin-bottom: 16px !important;
}

.news-filter-tabs a {
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 4px !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s ease !important;
}

.news-filter-tabs a:hover {
    color: #38bdf8 !important;
}

.news-filter-tabs a.active {
    color: #38bdf8 !important;
    border-bottom: 2px solid #38bdf8 !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
}

.news-item {
    border: 1px solid rgba(56, 189, 248, 0.12) !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    background: rgba(10, 15, 29, 0.6) !important;
    transition: all 0.2s ease !important;
}

.news-item:hover {
    border-color: rgba(56, 189, 248, 0.3) !important;
    background: rgba(15, 23, 42, 0.8) !important;
}

.news-header {
    padding: 12px 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.news-date-box {
    color: #64748b !important;
    font-size: 11px !important;
    font-family: Consolas, monospace !important;
}

.news-badge {
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    color: #041019 !important;
    text-transform: uppercase !important;
}

.news-title-text {
    color: #f1f5f9 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    flex-grow: 1 !important;
}

/* Battle Pass Pill in Header */
.sp-neon-card-header {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-left: 4px solid #38bdf8 !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
}

.sp-neon-btn {
    background: linear-gradient(135deg, #00f0ff 0%, #0284c7 100%) !important;
    border: none !important;
    color: #041019 !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.35) !important;
}

/* Social Contact Buttons (admin_versioncheck) */
.btn-social {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 22px !important;
    margin: 8px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    transition: all 0.25s ease !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.btn-social svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin-right: 8px !important;
    fill: currentColor !important;
    flex-shrink: 0 !important;
}

.btn-telegram {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.btn-telegram:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.4) !important;
    transform: translateY(-2px) !important;
}

.btn-whatsapp {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border: 1px solid rgba(74, 222, 128, 0.3) !important;
}

.btn-whatsapp:hover {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(74, 222, 128, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   ITEM UPGRADE BADGES (+1 to +7) & CHARACTER INFO MODERNIZATION
   ============================================ */
.item-ups-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(8, 14, 24, 0.95);
    border: 1px solid #00f0ff;
    color: #00f0ff !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.5), inset 0 0 3px rgba(0, 240, 255, 0.25);
    text-shadow: 0 0 4px rgba(0, 240, 255, 0.85);
    pointer-events: none;
    z-index: 10;
    letter-spacing: -0.3px;
    box-sizing: border-box;
}

.eq-slot-small .item-ups-badge,
.bag-slot-webp .item-ups-badge,
.bank-slot-webp .item-ups-badge {
    top: 1px;
    right: 1px;
    font-size: 9px;
    padding: 1px 2px;
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(0, 240, 255, 0.45);
}

/* Character Selection Grid (user_character_information.php) */
.char-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 15px;
    align-items: center;
}

.char-card-item {
    cursor: pointer;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    display: inline-block;
    user-select: none;
}

.char-card-item input {
    display: none;
}

.char-card-item .card-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(18, 22, 34, 0.75);
    backdrop-filter: blur(8px);
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.char-card-item:hover .card-content {
    background: rgba(28, 35, 52, 0.85);
    border-color: rgba(0, 240, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.char-card-item input:checked + .card-content {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(14, 165, 233, 0.08) 100%);
    border-color: #00f0ff;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3), inset 0 0 10px rgba(0, 240, 255, 0.1);
}

.char-card-item .card-content img {
    height: 22px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.char-card-item .card-name {
    font-weight: 700;
    font-size: 14px;
    color: #f1f5f9;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.char-card-item .card-lv {
    font-size: 11px;
    font-weight: 600;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    white-space: nowrap;
}

/* Character Info Tables */
.char-info-table th {
    background: rgba(20, 30, 52, 0.75) !important;
    color: #38bdf8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 10px 14px !important;
}

.char-info-table td {
    background: rgba(10, 15, 29, 0.65) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 10px 14px !important;
}

.char-info-table .table-header-title {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(20, 30, 52, 0.95) 100%) !important;
    color: #00f0ff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    border-bottom: 2px solid #00f0ff !important;
}

/* ============================================
   EQUIPMENT DOLL (RF Online Character Inventory Frame)
   ============================================ */
.equip-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.equip-doll {
    width: 228px;
    height: 416px;
    background-image: url("../../../images/inv-doll.webp");
    background-size: 228px 416px;
    background-repeat: no-repeat;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0 auto;
    border-radius: 2px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    user-select: none;
}

.equip-name {
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 11px;
    color: #cfe0ff;
    letter-spacing: 0.5px;
    font-weight: bold;
    text-shadow: 0 1px 2px #000;
}

.eq-slot, .eq-slot-small {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    background: transparent !important;
}

.eq-slot:hover, .eq-slot-small:hover {
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.6);
}

.eq-qty {
    position: absolute;
    bottom: 1px;
    right: 2px;
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-shadow: 0 1px 2px #000, 0 0 3px #000;
    pointer-events: none;
    z-index: 5;
}

/* 64x64 Slot Positions */
.slot-helmet   { left: 82px; top: 56px; width: 64px; height: 64px; }
.slot-upper    { left: 82px; top: 126px; width: 64px; height: 64px; }
.slot-lower    { left: 82px; top: 196px; width: 64px; height: 64px; }
.slot-shoe     { left: 82px; top: 266px; width: 64px; height: 64px; }
.slot-weapon   { left: 12px; top: 126px; width: 64px; height: 64px; }
.slot-shield   { left: 152px; top: 126px; width: 64px; height: 64px; }
.slot-cloak    { left: 152px; top: 196px; width: 64px; height: 64px; }
.slot-gauntlet { left: 12px; top: 196px; width: 64px; height: 64px; }

/* 32x32 Slot Positions */
.slot-ammo1   { left: 11px; top: 88px; width: 32px; height: 32px; }
.slot-ammo2   { left: 46px; top: 88px; width: 32px; height: 32px; }
.slot-ammo3   { left: 11px; top: 53px; width: 32px; height: 32px; }
.slot-amulet1 { left: 150px; top: 88px; width: 32px; height: 32px; }
.slot-amulet2 { left: 185px; top: 88px; width: 32px; height: 32px; }
.slot-ring1   { left: 44px; top: 266px; width: 32px; height: 32px; }
.slot-ring2   { left: 152px; top: 266px; width: 32px; height: 32px; }

.equip-money-row {
    position: absolute;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    line-height: 14px;
}

.money-title { color: #8a94ad; }
.money-val-dalant { color: #dfe4ee; font-weight: bold; font-family: monospace; }
.money-val-gold { color: #f0ad4e; font-weight: bold; font-family: monospace; }

/* Ensure popovers and character equipment containers are not clipped */
.tab-content, .tab-pane, .equip-wrapper, .equip-doll {
    overflow: visible !important;
}
.popover {
    z-index: 10000 !important;
}

/* ============================================
   INVENTORY & BANK BAGS
   ============================================ */
.bags-wrapper, .bank-wrapper-webp {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.bag-container-webp, .bank-container-webp {
    width: 228px;
    height: 176px;
    background-image: url("../../../images/inv-bag.webp");
    background-size: 228px 176px;
    background-repeat: no-repeat;
    position: relative;
    user-select: none;
    border-radius: 2px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.bag-title-webp, .bank-title-webp {
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #d9c8a4;
    font-weight: bold;
    text-shadow: 0 1px 2px #000;
}

.bag-cap-webp, .bank-cap-webp {
    position: absolute;
    right: 10px;
    top: 6px;
    font-size: 9px;
    font-family: monospace;
    color: #9c8f74;
}

.bag-slot-webp, .bank-slot-webp {
    position: absolute;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    background: transparent !important;
}

.bag-slot-webp:hover, .bank-slot-webp:hover {
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.6);
}

.bag-slot-qty, .bank-slot-qty {
    position: absolute;
    bottom: 0px;
    right: 2px;
    font-size: 9px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px #000, 0 0 3px #000;
    pointer-events: none;
    z-index: 5;
}

.inven-summary, .bank-summary {
    margin-bottom: 15px;
    display: inline-flex;
    gap: 20px;
    padding: 6px 14px;
    background: rgba(18, 22, 34, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-size: 12px;
}

.inven-stat-label, .bank-stat-label { color: #8a94ad; margin-right: 6px; }
.inven-stat-dalant, .bank-stat-dalant { color: #dfe4ee; font-weight: bold; font-family: monospace; }
.inven-stat-gold, .bank-stat-gold { color: #f0ad4e; font-weight: bold; font-family: monospace; }