:root {
    --hero-gradient: linear-gradient(135deg, #000000 0%, #111827 100%); /* Deep Black / Dark Gray gradient */
    --text-light: #ffffff;
    --text-dark: #1f2937;
    --text-gray: #6b7280;
    --bg-white: #ffffff;
    --bg-light: #f8fafc;
    --btn-dark: #1f2937;
    --btn-dark-hover: #374151;
    --primary: #10b981; /* Emerald Green to match the graph */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
}

/* Hero Section Container (Black Background) */
.hero-wrapper {
    background: var(--hero-gradient);
    color: var(--text-light);
    padding-bottom: 80px;
}

/* Navigation */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background-color: #1e3a8a; /* Deep Royal Blue */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.logo {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.nav-links {
    display: flex;
    gap: 25px;
    align-items: center;
}

.nav-links > a {
    color: #e2e8f0; /* Brighter, very light gray for better contrast */
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.nav-links > a:hover {
    color: var(--primary);
}

.nav-auth-buttons {
    display: flex;
    gap: 15px;
    margin-left: 15px;
    align-items: center;
}

.nav-login {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    transition: color 0.2s;
}

.nav-login:hover {
    color: var(--primary);
}

.nav-signup {
    background-color: var(--primary);
    color: #000000;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 6px;
    transition: all 0.2s;
}

.nav-signup:hover {
    background-color: #059669;
    color: #ffffff;
    transform: translateY(-2px);
}

.lang-select {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Hero Content */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 5%;
    gap: 50px;
}

.hero-content {
    flex: 1.2;
    max-width: 550px;
}

.hero-content h1 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-content p {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 30px;
    line-height: 1.6;
}

.btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-dark {
    background-color: var(--btn-dark);
    color: var(--text-light);
}

.btn-dark:hover {
    background-color: var(--btn-dark-hover);
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}

.btn-primary:hover {
    background-color: #059669;
}

.btn-full {
    width: 100%;
}

.hero-auth-text {
    margin-top: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.hero-auth-text a {
    color: var(--text-light);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.4);
}

.hero-auth-text span {
    font-size: 12px;
    opacity: 0.7;
    display: block;
    margin-top: 5px;
}

/* Hero Image */
.hero-image-container {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
}

.hero-image {
    width: 100%;
    max-width: 320px; 
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
    animation: float 5s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Main Content (White/Light section) */
.main-content {
    background-color: var(--bg-light);
    padding: 80px 5%;
}

.content-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 32px;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.section-title p {
    color: var(--text-gray);
    font-size: 18px;
}

.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background: var(--bg-white);
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
    text-align: center;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.card-icon {
    width: 60px;
    height: 60px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--primary);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    margin: 0 auto 20px;
}

.card h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.card p {
    color: var(--text-gray);
    font-size: 15px;
}

/* FAQ Section */
.faq-section {
    background-color: var(--bg-white);
    padding: 20px 5% 80px; /* Reduced top padding */
}

.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: var(--bg-light);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
}

.faq-item:hover {
    border-color: var(--primary);
}

.faq-item summary {
    padding: 20px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    list-style: none;
    position: relative;
    color: var(--text-dark);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--primary);
    font-weight: 400;
}

.faq-item[open] summary::after {
    content: '-';
}

.faq-answer {
    padding: 0 20px 20px;
    color: var(--text-gray);
    font-size: 15px;
    line-height: 1.6;
}

/* Simplified Footer */
.simple-footer {
    background-color: #000000 !important;
    color: #9ca3af !important;
    padding: 30px 5% 20px !important;
    text-align: center;
    border-top: 1px solid #1f2937 !important;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 25px;
}

.footer-links a {
    color: #ffffff !important;
    text-decoration: none;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: color 0.2s, transform 0.2s;
}

.footer-links a:hover {
    color: #10b981 !important;
    transform: translateY(-1px);
}

.footer-copyright {
    color: #6b7280 !important;
    font-size: 13px !important;
}

/* Split Layout Authentication Pages */
.auth-split-body {
    background-color: var(--bg-white);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.auth-split-layout {
    display: flex;
    min-height: calc(100vh - 77px);
}

.auth-left {
    flex: 1;
    background: var(--hero-gradient);
    color: var(--text-light);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.auth-left::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('trx-graph.jpg') center/cover no-repeat;
    opacity: 0.1;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.auth-left-content {
    max-width: 450px;
    position: relative;
    z-index: 2;
}

.auth-logo-large {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 24px;
    font-weight: 800;
    color: var(--text-light);
    text-decoration: none;
    margin-bottom: 30px;
}

.auth-logo-large i {
    color: var(--primary);
    font-size: 28px;
}

.auth-left-content h1 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
}

.auth-left-content p {
    font-size: 15px;
    opacity: 0.8;
    margin-bottom: 30px;
    line-height: 1.6;
}

.auth-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}

.auth-feature i {
    color: var(--primary);
    font-size: 16px;
}

.auth-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background-color: #0b1120;
}

.auth-form-container {
    width: 100%;
    max-width: 420px;
    background: #111827;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    border: 1px solid #1f2937;
}

.auth-form-container h2 {
    font-size: 26px;
    color: #ffffff;
    margin-bottom: 5px;
}

.auth-subtitle {
    color: #9ca3af;
    margin-bottom: 25px;
    font-size: 14px;
}

.auth-form-page .input-group {
    margin-bottom: 15px;
}

.auth-form-page label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 12px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auth-form-page input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #374151;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    background-color: #1f2937;
    color: #ffffff;
}

.auth-form-page input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
    outline: none;
    border-color: var(--primary);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.terms-checkbox {
    margin: 20px 0;
    font-size: 14px;
    color: var(--text-dark);
}

.terms-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.terms-checkbox input[type="checkbox"] {
    width: auto;
    margin-top: 3px;
}

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

.auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
}

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

.auth-switch {
    text-align: center;
    margin-top: 25px;
    font-size: 14px;
    color: var(--text-gray);
}

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

/* Responsive */
@media (max-width: 900px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding-top: 20px;
    }
    
    .nav-links {
        display: none;
    }
    
    .auth-split-layout {
        flex-direction: column;
    }
    
    .auth-left {
        padding: 40px 20px;
    }
    
    .auth-right {
        padding: 40px 20px;
    }
}

/* Secure Badge */
.auth-secure-badge {
    text-align: center;
    margin-top: 20px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.auth-secure-badge i {
    font-size: 16px;
}

.dashboard-body {
    background-color: #f8fafc;
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: #0f172a;
    zoom: 0.85;
}
.dashboard-layout { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
    width: 260px;
    background-color: #ffffff;
    border-right: 1px solid #e2e8f0;
    box-shadow: 4px 0 24px rgba(0,0,0,0.02);
    display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; transition: width 0.3s; z-index: 50;
}
.main-content-area {
    flex: 1; margin-left: 260px; display: flex; flex-direction: column;
    background-color: #f8fafc; transition: margin-left 0.3s;
}

/* Sidebar Toggle Support */
.sidebar-logo a span, .sidebar-nav a span { transition: opacity 0.2s; }
.sidebar-collapsed .sidebar { width: 80px; }
.sidebar-collapsed .main-content-area { margin-left: 80px; }
.sidebar-collapsed .sidebar-logo a span, .sidebar-collapsed .sidebar-nav a span { display: none; }
.sidebar-collapsed .sidebar-logo { justify-content: center; padding: 0; }
.sidebar-collapsed .sidebar-nav { padding: 30px 10px; gap: 15px; }
.sidebar-collapsed .sidebar-nav a { justify-content: center; padding: 12px 0; }
.sidebar-collapsed .sidebar-nav a i { margin: 0; font-size: 24px; }

.sidebar-logo { height: 75px; display: flex; align-items: center; padding: 0 20px; background-color: #1e3a8a; border-bottom: none; }
.sidebar-logo a { color: #ffffff; font-size: 22px; font-weight: 800; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.sidebar-logo i { color: #ffffff; }

.sidebar-nav { padding: 30px 10px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; flex: 1; }
.sidebar-nav a {
    display: flex; align-items: center; gap: 15px; padding: 12px 20px;
    color: #475569; text-decoration: none; font-size: 15px; font-weight: 600;
    border-radius: 8px; transition: all 0.2s;
}
.sidebar-nav a i { font-size: 18px; width: 20px; text-align: center; }
.sidebar-nav a:hover, .sidebar-nav a.active {
    background-color: #f1f5f9; color: #1e3a8a;
}

/* Header */
.dashboard-header {
    height: 75px; background-color: #1e3a8a; display: flex; justify-content: space-between; align-items: center;
    padding: 0 30px; position: sticky; top: 0; z-index: 10;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    zoom: 1.1;
}
.sidebar-toggle { color: #ffffff; font-size: 22px; cursor: pointer; padding: 5px; }
.sidebar-toggle:hover { color: #94a3b8; }
.header-right { display: flex; align-items: center; gap: 25px; }
.header-balance {
    background: #ffffff; padding: 4px 12px; border-radius: 4px;
    display: flex; align-items: center; gap: 8px; font-weight: 700;
    color: #4b5563; box-shadow: none; border: none; height: 32px;
}
.header-balance i { color: #ef4444 !important; font-size: 18px; }
.header-profile { display: flex; align-items: center; gap: 15px; cursor: pointer; position: relative; }
.profile-avatar {
    width: 40px; height: 40px; background-color: #10b981; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; color: #ffffff; font-weight: 700;
}
.profile-name { font-weight: 700; font-size: 15px; color: #ffffff; }

.profile-dropdown {
    position: absolute; top: 60px; right: 0; background: #ffffff;
    border-radius: 12px; width: 220px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: none; flex-direction: column; overflow: hidden; z-index: 1000;
    border: 1px solid #e2e8f0;
}
.profile-dropdown.show { display: flex; }
.profile-dropdown a {
    padding: 15px 20px; color: #475569; text-decoration: none; font-size: 15px; font-weight: 600;
    display: flex; align-items: center; gap: 12px; transition: background 0.2s;
}
.profile-dropdown a:hover { background: #f8fafc; color: #1e3a8a; }
.profile-dropdown a i { font-size: 16px; color: #94a3b8; width: 20px; text-align: center; }
.profile-dropdown a:hover i { color: #3b82f6; }
.profile-dropdown a.logout-btn { border-top: 1px solid #f1f5f9; color: #ef4444; }
.profile-dropdown a.logout-btn i { color: #ef4444; }
.profile-dropdown a.logout-btn:hover { background: #fef2f2; color: #dc2626; }

/* Faucet Area */
.faucet-container { padding: 30px; display: flex; justify-content: center; }
.faucet-card {
    background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 40px; width: 100%; max-width: 660px;
    text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}
.faucet-card h2 { font-size: 28px; color: #0f172a; margin-bottom: 10px; }
.faucet-card p { color: #475569; margin-bottom: 30px; font-size: 15px; }
.faucet-captcha { display: flex; justify-content: center; margin-bottom: 30px; }
.captcha-box {
    background: #f8fafc; border: 1px solid #e2e8f0; padding: 15px 20px;
    border-radius: 12px; display: flex; align-items: center; gap: 15px;
    color: #0f172a; font-weight: 600;
}
.btn-claim {
    padding: 15px 40px; font-size: 18px; font-weight: 800; border-radius: 12px;
    background-color: var(--primary); color: white; border: none; cursor: pointer;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3); transition: all 0.3s;
}
.btn-claim:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(59, 130, 246, 0.4); }

/* Table Area */
.table-container { padding: 0 30px 40px; }
.table-container h3 { font-size: 20px; color: #0f172a; margin-bottom: 20px; font-weight: 700; }
.table-wrapper {
    background-color: #ffffff; border: 1px solid #e2e8f0;
    border-radius: 16px; overflow-x: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.03); padding: 20px;
}
.dashboard-table { width: 100%; border-collapse: collapse; text-align: left; }
.dashboard-table th {
    padding: 15px; font-size: 13px; text-transform: uppercase; color: #64748b;
    font-weight: 700; border-bottom: 1px solid #e2e8f0; letter-spacing: 0.5px;
}
.dashboard-table td {
    padding: 15px; font-size: 14px; font-weight: 500;
    border-bottom: 1px solid #e2e8f0; color: #334155;
}
.dashboard-table tbody tr:last-child td { border-bottom: none; }
.dashboard-table tbody tr:hover { background-color: #f8fafc; }

.badge { padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.badge-faucet { background: rgba(16,185,129,0.1); color: #059669; }
.badge-trade { background: rgba(59,130,246,0.1); color: #2563eb; }
.badge-withdraw { background: rgba(239,68,68,0.1); color: #dc2626; }
.badge-deposit { background: rgba(139,92,246,0.1); color: #7c3aed; }

/* Faucet Tabs */
.faucet-tabs-container { width: 100%; max-width: 660px; }
.faucet-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 25px; }
.faucet-tab {
    background: #ffffff; border: 1px solid #e2e8f0; color: #64748b;
    padding: 14px 35px; border-radius: 12px; font-size: 16px; font-weight: 700;
    cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.faucet-tab.active { background: #1e3a8a; color: #fff; border-color: #1e3a8a; box-shadow: 0 4px 14px 0 rgba(30,58,138,0.3); }

/* Faucet Card Enhancements */
.faucet-big-zero { font-size: 55px; color: #1e3a8a; font-weight: 800; margin-bottom: 10px; }
.faucet-instruction { color: #475569; font-size: 14px; line-height: 1.6; margin-bottom: 25px; padding: 0 10px; }
.faucet-instruction strong { color: #0f172a; }

/* Modern Progress Widget - SOFT LIGHT BLUE */
.level-dashboard-widget {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border: 1px solid #bae6fd; border-radius: 12px;
    padding: 25px; margin-bottom: 30px; box-shadow: 0 5px 20px rgba(0,100,200,0.05);
}
.level-status-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.current-tier { display: flex; align-items: center; gap: 15px; }
.current-tier i { color: #0284c7 !important; }
.current-tier span { color: #64748b !important; }
.current-tier h4 { color: #0f172a !important; font-weight: 800; }
.tier-stats { display: flex; gap: 12px; }
.stat-box { background: #ffffff; border: 1px solid #bae6fd; padding: 10px 15px; border-radius: 10px; text-align: right; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.stat-box span { display: block; font-size: 11px; color: #64748b; text-transform: uppercase; margin-bottom: 5px; font-weight: 700; }
.stat-box strong { font-size: 18px; color: #0f172a; }
.stat-box small { color: #64748b; }
.stat-box.target strong { color: #0284c7; }

.modern-progress-container { position: relative; padding-top: 10px; }
.progress-info { display: flex; justify-content: space-between; font-size: 13px; color: #334155; margin-bottom: 12px; font-weight: 700; }
.modern-progress-track { height: 16px; background: #cbd5e1; border-radius: 20px; overflow: hidden; border: none; }
.modern-progress-fill { height: 100%; background: linear-gradient(90deg, #38bdf8 0%, #0284c7 100%); border-radius: 20px; position: relative; min-width: 2%; box-shadow: 0 2px 5px rgba(2,132,199,0.2); }

/* Green Theme Classic Table */
.classic-table-container {
    max-width: 500px;
    margin: 0 auto 30px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden;
}
.classic-table-header {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    color: #ffffff;
    text-align: center;
    padding: 15px;
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.classic-table {
    width: 100%;
    border-collapse: collapse;
}
.classic-table th {
    background-color: #d1d5db;
    color: #374151;
    font-size: 12px;
    font-weight: 800;
    padding: 10px;
    text-align: center;
}
.classic-table td {
    padding: 12px 10px;
    text-align: center;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
}
.classic-table tr:nth-child(even) {
    background-color: #f3f4f6;
}
.classic-table tr:nth-child(odd) {
    background-color: #ffffff;
}

/* Clean Minimal Auth Design - White with Blue Accents */
.auth-colorful-body {
    background-color: #f8fafc;
    min-height: 100vh; display: flex; flex-direction: column; font-family: 'Inter', sans-serif; margin: 0; color: #0f172a;
}
.colorful-nav {
    background: #1e3a8a !important; /* Blue header like landing page */
    border-bottom: 1px solid rgba(255,255,255,0.1) !important; padding: 20px 5%;
}
.colorful-nav a { color: #ffffff !important; font-weight: 600; }
.colorful-nav .nav-login { color: #ffffff !important; border-color: rgba(255,255,255,0.5) !important; }
.colorful-nav .nav-signup { background: #10b981 !important; color: #ffffff !important; border: none !important; }

.auth-colorful-layout { flex: 1; display: flex; justify-content: center; align-items: center; padding: 40px 20px; }
.auth-colorful-card {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 50px; width: 100%; max-width: 440px; box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
.auth-card-title { font-size: 30px; font-weight: 800; color: #0f172a; margin-bottom: 10px; text-align: center; }
.auth-card-subtitle { font-size: 15px; color: #475569; text-align: center; margin-bottom: 35px; }

.colorful-input-group { margin-bottom: 20px; }
.colorful-input-group label { display: block; font-size: 13px; font-weight: 700; color: #475569; margin-bottom: 8px; text-transform: uppercase; }
.colorful-input-group input {
    width: 100%; background: #ffffff; border: 1px solid #cbd5e1; padding: 14px 16px; border-radius: 8px; font-size: 15px; color: #0f172a; transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.colorful-input-group input::placeholder { color: #94a3b8; }
.colorful-input-group input:focus { border-color: #1e3a8a; box-shadow: 0 0 0 3px rgba(30,58,138,0.1); outline: none; }

.colorful-btn {
    width: 100%; background-color: #1e3a8a; color: #ffffff; border: none; padding: 16px; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.2s; margin-top: 15px;
    box-shadow: 0 4px 6px -1px rgba(30,58,138,0.2), 0 2px 4px -2px rgba(30,58,138,0.2);
}
.colorful-btn:hover { background-color: #172554; transform: translateY(-1px); box-shadow: 0 6px 8px -1px rgba(30,58,138,0.3); }

.colorful-switch { text-align: center; margin-top: 30px; color: #64748b; font-size: 15px; }
.colorful-switch a { color: #1e3a8a; text-decoration: none; font-weight: 700; transition: color 0.2s; }
.colorful-switch a:hover { color: #172554; }
.colorful-checkbox { display: flex; align-items: center; gap: 8px; color: #475569; font-size: 14px; }
.colorful-checkbox input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

/* Reward Popup Animation Styles */
.reward-popup {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.85); z-index: 9999;
    backdrop-filter: blur(5px);
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.reward-popup.show { opacity: 1; pointer-events: auto; }
.reward-popup-content {
    position: relative;
    text-align: center;
    transform: scale(0.5);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.reward-popup.show .reward-popup-content { transform: scale(1); }
.reward-popup-content img {
    width: 240px; height: 240px; object-fit: cover;
    border: none;
    background: transparent;
    mix-blend-mode: multiply;
}
.reward-amount-fly {
    position: absolute; top: 20%; left: 50%; transform: translate(-50%, 0) scale(0);
    background: linear-gradient(135deg, #10b981, #34d399); color: white; 
    padding: 10px 25px; border-radius: 30px;
    font-weight: 900; font-size: 22px; opacity: 0;
    box-shadow: 0 10px 25px rgba(16,185,129,0.5);
    white-space: nowrap; z-index: 10;
}
@keyframes flyUpOut {
    0% { transform: translate(-50%, 50px) scale(0); opacity: 0; }
    20% { transform: translate(-50%, -20px) scale(1.2); opacity: 1; }
    70% { transform: translate(-50%, -150px) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -300px) scale(0.5); opacity: 0; }
}
.fly-animation {
    animation: flyUpOut 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Live Girl Animation */
@keyframes girlKissing {
    0% { transform: scale(1) translateY(0) rotate(0); }
    15% { transform: scale(1.15) translateY(-15px) rotate(-3deg); }
    30% { transform: scale(1.15) translateY(-15px) rotate(-3deg); }
    50% { transform: scale(1) translateY(0) rotate(0deg); }
    100% { transform: scale(1) translateY(0); }
}
.girl-live-anim {
    animation: girlKissing 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Flying Heart */
.kiss-heart {
    position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(0);
    font-size: 60px; opacity: 0; z-index: 20; pointer-events: none;
    text-shadow: 0 5px 15px rgba(255,0,0,0.5);
}
@keyframes heartFly {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    40% { transform: translate(30px, -120px) scale(1.2) rotate(15deg); opacity: 0.9; }
    100% { transform: translate(80px, -250px) scale(2) rotate(30deg); opacity: 0; }
}
.kiss-heart.fly {
    animation: heartFly 2s ease-out forwards;
}

.slot-digit { background: linear-gradient(180deg, #333 0%, #111 100%); color: white; font-size: 50px; font-weight: 900; width: 70px; height: 90px; display: flex; justify-content: center; align-items: center; border-radius: 8px; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2); font-family: monospace; position: relative; overflow: hidden; }
.slot-digit::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%); }

/* Custom PIN Captcha Styles */
.pin-captcha-wrapper {
    margin: 20px auto;
    max-width: 300px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    overflow: hidden;
    text-align: center;
}
.pin-captcha-header {
    background: #f8fafc;
    padding: 12px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: background 0.2s;
}
.pin-captcha-header:hover {
    background: #f1f5f9;
}
.pin-captcha-header.success {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
    cursor: default;
}
.pin-captcha-body {
    display: none;
    padding: 20px;
}
.pin-captcha-body.active {
    display: block;
}
.pin-instruction {
    font-size: 15px;
    color: #475569;
    margin-bottom: 15px;
    font-weight: 600;
}
.pin-instruction strong {
    color: #0f172a;
    font-size: 18px;
    display: block;
    margin-top: 5px;
    text-transform: capitalize;
}
.pin-icons-grid {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pin-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 20px;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}
.pin-icon:hover {
    background: #e2e8f0;
    color: #0f172a;
    transform: scale(1.05);
}
.pin-icon.error {
    background: #fee2e2;
    color: #ef4444;
    border-color: #ef4444;
}