:root,
        [data-theme="dark"]{
            /* Surfaces */
            --bg-page: #0B1220;
            --bg-card: #111827;
            --bg-card-hover: #1A2332;
            --bg-elevated: #1E293B;
            --bg-modal: #1A2332;
            --bg-input: #0F172A;
            --bg-sidebar: #0E1625;
            --bg-navbar: rgba(11,18,32,0.85);
            --surface-alt: #1E293B;

            /* Text */
            --text-primary: #F1F5F9;
            --text-secondary: #94A3B8;
            --text-muted: #64748B;
            --text-tertiary: #64748B;
            --text-quaternary: #475569;
            --text-disabled: #475569;

            /* Borders */
            --border-subtle: rgba(255,255,255,0.04);
            --border-default: rgba(255,255,255,0.08);
            --border-strong: rgba(255,255,255,0.12);
            --border-muted: rgba(255,255,255,0.06);

            /* Brand - Amber */
            --brand-50: rgba(245,158,11,0.05);
            --brand-100: rgba(245,158,11,0.1);
            --brand-200: rgba(245,158,11,0.2);
            --brand-400: #D97706;
            --brand-500: #F59E0B;
            --brand-600: #B45309;
            --brand-gradient: linear-gradient(135deg, var(--brand-500), var(--brand-400));
            --text-gradient: linear-gradient(135deg, var(--text-primary), #94A3B8);
            --primary: #F59E0B;
            --primary-hover: #D97706;
            --primary-light: rgba(245,158,11,0.1);

            /* Semantic colors */
            --success: #22C55E;
            --success-bg: rgba(34,197,94,0.1);
            --success-light: rgba(34,197,94,0.1);
            --warning: #EAB308;
            --warning-bg: rgba(234,179,8,0.1);
            --warning-light: rgba(234,179,8,0.1);
            --danger: #EF4444;
            --danger-bg: rgba(239,68,68,0.1);
            --danger-light: rgba(239,68,68,0.1);
            --info: #3B82F6;
            --info-bg: rgba(59,130,246,0.1);
            --info-light: rgba(59,130,246,0.1);
            --purple: #8B5CF6;
            --purple-bg: rgba(139,92,246,0.1);
            --purple-light: rgba(139,92,246,0.1);

            /* Chart colors */
            --chart-1: #F59E0B;
            --chart-2: #8B5CF6;
            --chart-3: #3B82F6;
            --chart-4: #22C55E;
            --chart-5: #EF4444;

            /* Hero */
            --hero-bg: #0F0F1A;
            --hero-radial: none;
            --hero-border: rgba(245,158,11,0.08);
            --hero-stat-bg: rgba(255,255,255,0.02);
            --hero-stat-border: rgba(255,255,255,0.05);

            /* Shadows */
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
            --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
            --shadow-xl: 0 16px 48px rgba(0,0,0,0.6);

            /* Glass */
            --glass-bg: rgba(255,255,255,0.03);
            --glass-blur: 12px;

            /* Radius */
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-sm: 10px;
            --radius-full: 9999px;

            /* Transitions */
            --transition-fast: 150ms ease;
            --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
            --transition-base: 200ms ease;
            --transition: 200ms ease;
            --transition-smooth: 300ms cubic-bezier(0.4,0,0.2,1);

            /* Typography */
            --font-heading: 'Fira Code', monospace;
            --font-body: 'Fira Sans', system-ui, sans-serif;
            --font-mono: 'Fira Code', monospace;

            /* Skeleton */
            --skeleton-bg: #1E293B;
            --skeleton-shine: rgba(255,255,255,0.04);

            /* Misc */
            --sidebar-width: 240px;
            --right-sidebar-width: 300px;
            --card-bg: #111827;
            --hover-bg: rgba(255,255,255,0.02);
            --hover-border: rgba(255,255,255,0.08);
            --scrollbar-thumb: #F59E0B;
        }
[data-theme="light"]{
            /* Surfaces */
            --bg-page: #F8FAFC;
            --bg-card: #FFFFFF;
            --bg-card-hover: #F8FAFC;
            --bg-elevated: #F1F5F9;
            --bg-modal: #FFFFFF;
            --bg-input: #FFFFFF;
            --bg-sidebar: #FFFFFF;
            --bg-navbar: rgba(255,255,255,0.85);
            --surface-alt: #F1F5F9;

            /* Text */
            --text-primary: #0F172A;
            --text-secondary: #475569;
            --text-muted: #94A3B8;
            --text-tertiary: #64748B;
            --text-quaternary: #CBD5E1;
            --text-disabled: #CBD5E1;

            /* Borders */
            --border-subtle: rgba(0,0,0,0.04);
            --border-default: rgba(0,0,0,0.08);
            --border-strong: rgba(0,0,0,0.12);
            --border-muted: rgba(0,0,0,0.06);

            /* Brand - Amber */
            --brand-50: rgba(245,158,11,0.04);
            --brand-100: rgba(245,158,11,0.08);
            --brand-200: rgba(245,158,11,0.15);
            --brand-400: #D97706;
            --brand-500: #F59E0B;
            --brand-600: #B45309;
            --brand-gradient: linear-gradient(135deg, var(--brand-500), var(--brand-400));
            --text-gradient: linear-gradient(135deg, var(--text-primary), #475569);
            --primary: #F59E0B;
            --primary-hover: #D97706;
            --primary-light: rgba(245,158,11,0.08);

            /* Semantic colors */
            --success: #16A34A;
            --success-bg: rgba(22,163,74,0.08);
            --success-light: rgba(22,163,74,0.08);
            --warning: #CA8A04;
            --warning-bg: rgba(202,138,4,0.08);
            --warning-light: rgba(202,138,4,0.08);
            --danger: #DC2626;
            --danger-bg: rgba(220,38,38,0.08);
            --danger-light: rgba(220,38,38,0.08);
            --info: #2563EB;
            --info-bg: rgba(37,99,235,0.08);
            --info-light: rgba(37,99,235,0.08);
            --purple: #7C3AED;
            --purple-bg: rgba(124,58,237,0.08);
            --purple-light: rgba(124,58,237,0.08);

            /* Chart colors */
            --chart-1: #F59E0B;
            --chart-2: #8B5CF6;
            --chart-3: #3B82F6;
            --chart-4: #22C55E;
            --chart-5: #EF4444;

            /* Hero */
            --hero-bg: #FFFBEB;
            --hero-radial: none;
            --hero-border: rgba(245,158,11,0.15);
            --hero-stat-bg: rgba(255,255,255,0.6);
            --hero-stat-border: rgba(0,0,0,0.06);

            /* Shadows */
            --shadow-sm: 0 1px 2px rgba(13,17,23,0.04);
            --shadow-md: 0 4px 12px rgba(13,17,23,0.06);
            --shadow-lg: 0 8px 24px rgba(13,17,23,0.08);
            --shadow-xl: 0 16px 48px rgba(13,17,23,0.12);

            /* Glass */
            --glass-bg: rgba(255,255,255,0.7);
            --glass-blur: 12px;

            /* Skeleton */
            --skeleton-bg: #E2E8F0;
            --skeleton-shine: rgba(255,255,255,0.6);

            /* Misc */
            --card-bg: #FFFFFF;
            --hover-bg: rgba(0,0,0,0.02);
            --hover-border: var(--border-default);
            --scrollbar-thumb: rgba(0,0,0,0.12);
        }
*{ margin: 0; padding: 0; box-sizing: border-box; }
body{
            font-family: var(--font-body);
            background: var(--bg-page);
            color: var(--text-primary);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
            line-height: 1.6;
        }
@media (prefers-reduced-motion: reduce){*{ transition-duration: 0s !important; }}
a{ color: inherit; text-decoration: none; }
button{ cursor: pointer; font-family: inherit; }
/* Scrollbar */
        ::-webkit-scrollbar{ width: 6px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--scrollbar-thumb); border-radius: 3px; }
/* Auth Pages - Landing page design */
        .auth-page{
            position: fixed; inset: 0; z-index: 200;
            background: var(--auth-bg, #0B1220);
            display: flex; align-items: flex-start; justify-content: center;
            padding: 24px; overflow-y: auto;
        }
[data-theme="light"] .auth-page{
            --auth-bg: var(--bg-page);
        }
.auth-page::after{
            content: ''; position: fixed; inset: 0;
            background:
                radial-gradient(ellipse 700px 350px at 20% 30%, rgba(245,158,11,0.1) 0%, transparent 60%),
                radial-gradient(ellipse 500px 400px at 70% 40%, rgba(245,158,11,0.06) 0%, transparent 55%),
                radial-gradient(ellipse 400px 300px at 50% 60%, rgba(245,158,11,0.04) 0%, transparent 50%);
            pointer-events: none; z-index: 0;
        }
#page-login::after, #page-register::after, #page-forgot-password::after{ display: none; }
.auth-orb{
            position: fixed; width: 4px; height: 4px; border-radius: 50%;
            background: #F59E0B; pointer-events: none; z-index: 0;
            animation: authDrift 12s linear infinite;
        }
.auth-orb-lg{ width: 7px; height: 7px; background: rgba(245,158,11,0.5); box-shadow: 0 0 6px rgba(245,158,11,0.3); animation-duration: 15s; }
@keyframes authDrift{
            0% { opacity: 0; transform: translateY(0) scale(0); }
            10% { opacity: 0.35; }
            80% { opacity: 0.35; }
            100% { opacity: 0; transform: translateY(-60px) scale(1); }
        }
.auth-card{
            position: relative; width: 100%; max-width: 420px;
            margin: auto;
            background: var(--auth-card-bg, rgba(17,24,39,0.75));
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--auth-card-border, rgba(245,158,11,0.1));
            border-radius: 10px;
            padding: 40px 32px;
            z-index: 1;
            transition: transform 300ms ease, border-color 300ms ease;
            overflow: hidden;
        }
.auth-card::before{
            content: ''; position: absolute; top: 0; left: 16px; right: 16px;
            height: 2px; background: linear-gradient(90deg, transparent, #F59E0B, transparent);
            border-radius: 2px; opacity: 0.4; transition: opacity 300ms ease;
        }
.auth-card:hover{ border-color: rgba(245,158,11,0.2); transform: translateY(-2px); }
.auth-card:hover::before{ opacity: 0.8; }
[data-theme="light"] .auth-card{
            --auth-card-bg: rgba(255,255,255,0.92);
            --auth-card-border: rgba(245,158,11,0.15);
        }
[data-theme="light"] .auth-card:hover{ border-color: rgba(245,158,11,0.2); }
.auth-card h1{
            font-family: var(--font-heading);
            font-size: 24px; text-align: center; margin-bottom: 4px;
            background: linear-gradient(135deg, #F59E0B, #D97706);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.02em;
        }
.auth-card p.sub{
            text-align: center; color: var(--text-secondary); font-size: 14px; margin-bottom: 28px;
        }
.auth-field{
            width: 100%; padding: 12px 16px; border-radius: 10px;
            background: var(--bg-input); border: 1px solid var(--border-default);
            color: var(--text-primary); font-size: 14px; outline: none;
            transition: border-color 200ms, box-shadow 200ms;
        }
.auth-field:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(245,158,11,0.1), 0 0 12px rgba(245,158,11,0.06); }
.auth-field::placeholder{ color: var(--text-tertiary); }
.auth-error{
            padding: 10px 14px; border-radius: 8px;
            background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2);
            color: var(--danger); font-size: 13px; text-align: center; margin-bottom: 16px;
        }
.auth-error.hidden{ display: none; }
.auth-link{ color: var(--primary); font-weight: 600; cursor: pointer; transition: color 200ms; }
.auth-link:hover{ color: var(--primary-hover); }
.auth-badge{
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2);
            padding: 8px 20px; border-radius: 999px;
            font-family: var(--font-heading); font-size: 12px; color: #F59E0B;
            letter-spacing: 0.5px; margin-bottom: 16px;
        }
.auth-badge-dot{
            width: 6px; height: 6px; border-radius: 50%;
            background: #F59E0B; animation: authBadgePulse 2s ease-in-out infinite;
            box-shadow: 0 0 8px rgba(245,158,11,0.5);
        }
@keyframes authBadgePulse{
            0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(245,158,11,0.5); }
            50% { opacity: 0.5; box-shadow: 0 0 16px rgba(245,158,11,0.8); }
        }
.auth-separator{
            display: flex; align-items: center; justify-content: center; gap: 12px;
            margin: 20px 0 16px;
        }
.auth-separator .line{
            flex: 1; max-width: 80px; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(245,158,11,0.3), transparent);
        }
.auth-separator .diamond{
            width: 8px; height: 8px; transform: rotate(45deg);
            border: 1px solid rgba(245,158,11,0.3);
            background: rgba(245,158,11,0.06); border-radius: 2px; flex-shrink: 0;
        }
.auth-card{ animation: authCardFadeIn 500ms ease forwards; }
.auth-page .ec-timer, #page-faucet .ec-timer, #page-ptc .ec-timer, #page-wheel .ec-timer, #page-withdraw .ec-timer, #page-lucky-roll .ec-timer{ display: none; }
#page-faucet #antibotTimer{ display: none; }
@keyframes authCardFadeIn{
            from { opacity: 0; transform: translateY(16px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
@media (max-width:480px){.auth-card{ padding:32px 20px; border-radius: 16px; }}
/* ==========================================
           COMPONENT SYSTEM
           ========================================== */

        /* ── Cards ── */
        .card{
            background: var(--bg-card);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-xl);
            padding: 20px;
            transition: all var(--transition-smooth);
        }
.card:hover{ border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.card-header{
            display: flex; align-items: center; justify-content: space-between;
            padding-bottom: 14px; margin-bottom: 14px;
            border-bottom: 1px solid var(--border-subtle);
            font-family: var(--font-heading); font-size: 12px; font-weight: 600;
            color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;
        }
.card-body{ padding: 0; }
/* ── Buttons ── */
        .btn{
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 10px 24px; border-radius: var(--radius-md); border: 1px solid transparent;
            font-size: 14px; font-weight: 600; font-family: var(--font-body);
            cursor: pointer; white-space: nowrap;
            transition: all var(--transition-base);
            position: relative; overflow: hidden;
        }
.btn:active{ transform: scale(0.97); }
.btn:disabled{ opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-primary{
            background: linear-gradient(135deg, var(--brand-500), var(--brand-400));
            color: #000; border-color: transparent;
            box-shadow: 0 1px 3px rgba(245,158,11,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
        }
.btn-primary:hover{ box-shadow: 0 4px 16px rgba(245,158,11,0.35), inset 0 1px 0 rgba(255,255,255,0.25); transform: translateY(-1px); }
.btn-secondary{
            background: var(--bg-elevated); color: var(--text-secondary);
            border-color: var(--border-default);
        }
.btn-secondary:hover{ background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--border-strong); }
.btn-danger{
            background: var(--danger); color: #fff; border-color: transparent;
        }
.btn-danger:hover{ box-shadow: 0 4px 16px rgba(239,68,68,0.3); transform: translateY(-1px); }
.btn-sm{ padding: 6px 14px; font-size: 12px; border-radius: var(--radius-sm); }
/* ── Inputs ── */
        .input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea, select{
            width: 100%; padding: 10px 14px;
            background: var(--bg-input); color: var(--text-primary);
            border: 1px solid var(--border-default); border-radius: var(--radius-md);
            font-size: 14px; font-family: var(--font-body);
            outline: none;
            transition: border-color var(--transition-base), box-shadow var(--transition-base);
        }
.input:focus, input:focus, textarea:focus, select:focus{
            border-color: var(--brand-500);
            box-shadow: 0 0 0 3px var(--brand-100);
        }
.input::placeholder, input::placeholder, textarea::placeholder{ color: var(--text-muted); }
/* ── Badges ── */
        .badge{
            display: inline-flex; align-items: center; gap: 4px;
            padding: 2px 10px; border-radius: var(--radius-full);
            font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
            background: var(--bg-elevated); color: var(--text-secondary);
            border: 1px solid var(--border-default);
        }
.badge-success{ background: var(--success-bg); color: var(--success); border-color: transparent; }
.badge-warning{ background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.badge-danger{ background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.badge-info{ background: var(--info-bg); color: var(--info); border-color: transparent; }
/* ── Progress ── */
        .progress{
            height: 6px; background: var(--border-subtle);
            border-radius: var(--radius-full); overflow: hidden; position: relative;
        }
.progress-fill{
            height: 100%; border-radius: var(--radius-full);
            background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
            transition: width 1s cubic-bezier(0.4,0,0.2,1);
            position: relative;
        }
.progress-fill::after{
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            animation: progressShine 2s ease-in-out infinite;
        }
@keyframes progressShine{ 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
/* ── Modal ── */
        .modal-overlay{
            position: fixed; inset: 0; z-index: 9999;
            background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex; align-items: center; justify-content: center;
            padding: 24px; animation: fadeIn 200ms ease;
        }
.modal{
            background: var(--bg-modal); border: 1px solid var(--border-default);
            border-radius: var(--radius-sm); padding: 24px;
            max-width: 480px; width: 100%; max-height: 90vh;
            overflow-y: auto; box-shadow: var(--shadow-xl);
            animation: scaleIn 300ms cubic-bezier(0.4,0,0.2,1);
        }
.modal-close{
            width: 32px; height: 32px; border-radius: var(--radius-md);
            display: flex; align-items: center; justify-content: center;
            background: var(--hover-bg); border: none; color: var(--text-muted);
            cursor: pointer; font-size: 14px;
            transition: all var(--transition-base);
        }
.modal-close:hover{ background: var(--bg-elevated); color: var(--text-primary); }
/* ── Alerts ── */
        .alert{
            display: flex; align-items: center; gap: 12px;
            padding: 12px 16px; border-radius: var(--radius-md);
            font-size: 13px; line-height: 1.5;
            border-left: 3px solid;
        }
.alert-warning{ background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
.alert-success{ background: var(--success-bg); color: var(--success); border-color: var(--success); }
.alert-danger{ background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.alert-info{ background: var(--info-bg); color: var(--info); border-color: var(--info); }
/* ── Empty State ── */
        .empty-state{
            display: flex; flex-direction: column; align-items: center; gap: 12px;
            padding: 40px 20px; text-align: center;
        }
.empty-state i{ font-size: 32px; color: var(--text-muted); opacity: 0.5; }
.empty-state p{ font-size: 14px; color: var(--text-muted); max-width: 280px; line-height: 1.6; }
/* ── Loading ── */
        .loading{
            display: flex; flex-direction: column; align-items: center; gap: 12px;
            padding: 40px; color: var(--text-muted); font-size: 14px;
        }
.spinner{
            width: 32px; height: 32px; border: 3px solid var(--border-subtle);
            border-top-color: var(--brand-500);
            border-radius: 50%; animation: spin 0.8s linear infinite;
        }
@keyframes spin{ to { transform: rotate(360deg); } }
/* Sidebar */
        .sidebar-overlay{
            display: none; position: fixed; inset: 0; z-index: 49;
            background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
.sidebar{
            position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-width);
            background: var(--bg-sidebar);
            border-right: 1px solid var(--border-subtle);
            z-index: 60; display: flex; flex-direction: column;
            overflow-y: auto; transition: transform var(--transition-smooth);
        }
.sidebar::-webkit-scrollbar{ width: 3px; }
.sidebar::-webkit-scrollbar-track{ background: transparent; }
.sidebar::-webkit-scrollbar-thumb{ background: var(--brand-500); border-radius: var(--radius-full); }
.sidebar-toggle-btn{
            display: none; background: none; border: none; color: var(--text-secondary);
            font-size: 20px; padding: 4px; cursor: pointer; margin-right: 8px;
        }
.sidebar-toggle-btn:hover{ color: var(--text-primary); }
.sidebar-brand{
            display: flex; align-items: center; justify-content: center; gap: 10px;
            padding: 10px 20px 0px;
            font-family: var(--font-heading); font-size: 18px; font-weight: 700;
            border-bottom: 1px solid var(--border-subtle);
        }
.sidebar-brand .logo-text{
            background: linear-gradient(135deg, var(--brand-500), var(--brand-400));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
.sidebar-nav{ flex: 1; padding: 4px 0; }
.sidebar-group-label{
            padding: 16px 20px 4px;
            display: flex; align-items: center; gap: 10px;
        }
.sidebar-group-label::after{
            content: ''; flex: 1; height: 1px;
            background: var(--border-default);
        }
.sidebar-group-label span{
            font-size: 10px; font-weight: 600;
            color: var(--text-disabled);
            text-transform: uppercase; letter-spacing: 1.2px;
            font-family: var(--font-heading);
        }
.sidebar-item{
            display: flex; align-items: center; gap: 10px;
            padding: 8px 12px; margin: 1px 10px;
            border-radius: var(--radius-lg);
font-size: 14px; color: var(--text-secondary);
            font-family: var(--font-heading);
            cursor: pointer; position: relative;
            text-decoration: none;
        }
.sidebar-item:hover{
            background: var(--hover-bg);
            color: var(--text-primary);
        }
.sidebar-item:active{ transform: scale(0.97); }
.sidebar-item.active{
            background: var(--brand-100);
            color: var(--brand-500);
        }
.sidebar-item.active::before{
            content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
            width: 3px; height: 18px;
            background: var(--brand-500);
            border-radius: 0 3px 3px 0;
        }
.sidebar-item i{
            width: 20px; text-align: center; font-size: 14px;
            transition: transform var(--transition-fast); flex-shrink: 0;
        }
.sidebar-item i.ti{ font-size: 16px; width: 22px; }
.sidebar-item:hover i{ transform: scale(1.15); }
.sidebar-item.active i{ color: var(--brand-500); }
.sidebar-badge{
            margin-left: auto; font-size: 10px; font-weight: 700;
            padding: 2px 8px; border-radius: var(--radius-full);
            background: var(--brand-500); color: #000;
            min-width: 20px; text-align: center;
            line-height: 1.6; font-family: var(--font-body);
            flex-shrink: 0;
        }
.sidebar-badge.ready{
            background: var(--success); color: #000;
            box-shadow: 0 0 12px var(--success-bg);
        }
.sidebar-badge.timer{
            background: transparent; color: var(--text-muted);
            font-size: 10px; padding: 1px 4px; min-width: auto;
            font-family: var(--font-heading);
        }
.sidebar-badge.hidden{ display: none; }
.sidebar-badge-pct{
            background: var(--hover-bg);
            color: var(--text-secondary);
            font-size: 10px; padding: 1px 6px; min-width: auto;
        }
.sidebar-badge-news{
            background: var(--danger); color: #fff;
            font-size: 11px; font-weight: 700; padding: 0 8px;
            line-height: 1.6; min-width: auto;
            box-shadow: 0 0 10px var(--danger-bg);
        }
.sidebar-logout{
            margin: 8px 14px 16px; padding: 10px 16px;
            border-radius: var(--radius-lg);
            border: 1px solid var(--danger-bg);
            color: var(--danger); font-size: 13px;
            display: flex; align-items: center; gap: 10px;
            cursor: pointer; font-family: var(--font-heading);
        }
.sidebar-logout:hover{
            background: var(--danger-bg);
            border-color: var(--danger);
        }
.sidebar-logout:active{ transform: scale(0.97); }
.sidebar-logout i{ width: 20px; text-align: center; font-size: 14px; }
/* Content Area */
        .content-area{
            margin-left: var(--sidebar-width); min-height: 100vh;
            display: flex; flex-direction: column;
        }
.content-layout{
            flex: 1; display: flex; overflow: hidden;
        }
:root{ --right-sidebar-width: 300px; }
.right-sidebar{
            width: var(--right-sidebar-width); flex-shrink: 0;
            padding: 20px 16px 20px 0;
            overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
            transition: width 300ms cubic-bezier(0.4,0,0.2,1), padding 300ms cubic-bezier(0.4,0,0.2,1);
        }
.right-sidebar::-webkit-scrollbar{ width: 4px; }
.right-sidebar::-webkit-scrollbar-track{ background: transparent; }
.right-sidebar::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius: 999px; }
.right-sidebar::-webkit-scrollbar-thumb:hover{ background: var(--primary); }
.right-sidebar.collapsed{ display: none; }
.rs-toggle-btn{
            flex-shrink: 0; width: 20px; padding: 0; margin: 0;
            background: transparent; border: none;
            color: var(--text-tertiary); cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: 9px; z-index: 2;
            outline: none;
            transition: background 0.2s ease, border-color 0.2s ease;
        }
.rs-toggle-btn:hover{
            background: var(--bg-card);
            border-radius: 0 6px 6px 0;
            color: var(--text-primary);
        }
.right-sidebar-card{
            background: var(--bg-card);
            border: 1px solid var(--border-default);
            border-radius: 10px;
            padding: 16px;
            transition: border-color var(--transition-fast) var(--ease-smooth), box-shadow var(--transition-fast) var(--ease-smooth), transform var(--transition-fast) var(--ease-smooth);
        }
.right-sidebar-card:hover{
            border-color: var(--border-strong);
            box-shadow: var(--shadow-md);
        }
.right-sidebar-card-header{
            display: flex; align-items: center; justify-content: space-between;
            gap: 8px; padding-bottom: 12px; margin-bottom: 14px;
            border-bottom: 1px solid var(--border-subtle);
        }
.right-sidebar-card-title{
            font-family: var(--font-heading); font-size: 12px; font-weight: 600;
            color: var(--text-secondary); letter-spacing: 0.4px;
            display: flex; align-items: center; gap: 8px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
.right-sidebar-card-title i{
            font-size: 11px; color: var(--brand-500);
            width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
            background: var(--brand-100);
            display: flex; align-items: center; justify-content: center;
        }
.right-sidebar-card-action{
            font-size: 11px; color: var(--text-muted); cursor: pointer;
            white-space: nowrap; flex-shrink: 0;
            transition: color var(--transition-fast) var(--ease-smooth);
        }
.right-sidebar-card-action:hover{ color: var(--brand-500); }
.rs-chal-reset{
            display: flex; align-items: center; gap: 6px;
            font-size: 11px; color: var(--text-secondary); font-weight: 600;
            padding: 4px 12px; margin-bottom: 10px; border-radius: var(--radius-full);
            background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2);
        }
.rs-chal-timer{ font-family: var(--font-heading); font-weight: 700; color: var(--warning); }
/* Profile Card */
        .rs-profile{
            background: var(--hero-bg);
            border-color: var(--hero-border);
            cursor: pointer;
            padding: 18px;
            position: relative;
            overflow: hidden;
        }
.rs-profile:hover{ border-color: var(--brand-200); box-shadow: 0 4px 20px var(--brand-100); }
.rs-profile-top{
            display: flex; align-items: center; gap: 12px;
        }
.rs-avatar-wrap{ position: relative; flex-shrink: 0; }
.rs-avatar-wrap::before{
            content: ''; position: absolute; inset: -4px; border-radius: 50%; padding: 3px;
            background: linear-gradient(135deg, #FCD34D, #F59E0B 40%, #DC2626 90%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude; z-index: 0;
        }
.rs-profile-avatar{
            width: 48px; height: 48px; border-radius: var(--radius-full);
            background: var(--brand-500);
            display: flex; align-items: center; justify-content: center;
            font-size: 20px; color: #000; flex-shrink: 0;
            box-shadow: 0 0 24px var(--brand-100);
            position: relative; overflow: hidden;
        }
.rs-rank-badge{
            margin-left: auto; flex-shrink: 0;
            display: inline-flex; align-items: center; gap: 6px;
            padding: 4px 12px; border-radius: 20px;
            background: var(--warning-bg); border: 1px solid var(--warning-bg);
            font-family: var(--font-heading); font-size: 11px; font-weight: 700;
            color: var(--warning); line-height: 1; white-space: nowrap;
        }
.rs-rank-badge i{ font-size: 11px; flex-shrink: 0; }
.rs-rank-badge img{ width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
.rs-profile:hover .rs-profile-avatar{ box-shadow: 0 0 36px var(--brand-200); }
.rs-profile-avatar img{ width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
.rs-profile-avatar span{ font-size: 20px; font-weight: 700; color: #000; line-height: 1; }
.rs-profile-info{ flex: 1; min-width: 0; }
.rs-profile-name{ font-size: 15px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-profile-stats{
            display: flex; gap: 8px; margin-top: 14px; padding-top: 14px;
            border-top: 1px solid var(--border-subtle);
        }
.rs-profile-stat{
            flex: 1; text-align: center; padding: 8px 4px;
            border-radius: var(--radius-md);
            background: var(--hover-bg);
            transition: background var(--transition-fast) var(--ease-smooth);
        }
.rs-profile:hover .rs-profile-stat{ background: var(--brand-100); }
.rs-profile-stat-value{ font-size: 13px; font-weight: 700; color: var(--text-primary); }
.rs-profile-stat-label{ font-size: 9px; color: var(--text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
/* Daily Goals */
.rs-goal{ margin-bottom: 10px; padding: 8px 10px; border-radius: 8px; transition: background var(--transition-fast) var(--ease-smooth); }
.rs-goal:last-child{ margin-bottom: 0; }
.rs-goal:hover{ background: var(--hover-bg); }
.rs-goal-header{
            display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px;
        }
.rs-goal-label{
            display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary);
            min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
.rs-goal-label i{
            width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; color: var(--brand-500); background: var(--brand-100);
        }
.rs-goal-emoji{
            width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 14px; line-height: 1; background: var(--brand-100);
        }
.rs-goal-pct{ font-size: 11px; font-weight: 700; color: var(--brand-500); font-family: var(--font-heading); flex-shrink: 0; }
.rs-goal-bar{
            height: 6px; background: var(--hover-bg); border-radius: 999px; overflow: hidden; position: relative;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
        }
.rs-goal-bar-fill{
            height: 100%; border-radius: 999px; position: relative;
            background: linear-gradient(90deg, var(--brand-400), var(--brand-500));
            transition: width 0.4s var(--ease-smooth);
        }
.rs-goal-bar-fill.green{ background: linear-gradient(90deg, #16A34A, var(--success)); }
.rs-goal-bar-fill.purple{ background: linear-gradient(90deg, #7C3AED, var(--purple)); }
.rs-goal-bar-fill.blue{ background: linear-gradient(90deg, #2563EB, var(--info)); }
.rs-goal-bar-fill[style*="100%"]{
            background: linear-gradient(90deg, #16A34A, var(--success));
            box-shadow: 0 0 8px var(--success-bg);
        }
/* Daily Challenges summary badge */
#rsChallengesSummary{
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 28px; height: 22px; padding: 0 8px;
            border-radius: 999px; font-family: var(--font-heading);
            font-size: 11px; font-weight: 700; color: var(--brand-500);
            background: var(--brand-100); border: 1px solid var(--brand-200);
            cursor: default;
        }
/* Recent Activity */
.rs-activity-list{ display: flex; flex-direction: column; gap: 8px; }
.rs-activity-item{
            display: flex; align-items: flex-start; gap: 10px;
            padding: 10px 12px; border-radius: var(--radius-lg);
            background: var(--hover-bg);
            border: 1px solid var(--border-subtle);
            transition: background var(--transition-fast) var(--ease-smooth), transform var(--transition-fast) var(--ease-smooth), border-color var(--transition-fast) var(--ease-smooth), box-shadow var(--transition-fast) var(--ease-smooth);
        }
.rs-activity-item:hover{ background: var(--bg-card-hover); transform: translateX(3px); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.rs-activity-icon{
            width: 32px; height: 32px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; flex-shrink: 0;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
        }
.rs-activity-icon.gold{ background: var(--brand-100); color: var(--brand-500); }
.rs-activity-icon.green{ background: var(--success-bg); color: var(--success); }
.rs-activity-icon.blue{ background: var(--info-bg); color: var(--info); }
.rs-activity-icon.red{ background: var(--danger-bg); color: var(--danger); }
.rs-activity-icon.purple{ background: var(--purple-bg); color: var(--purple); }
.rs-activity-body{ flex: 1; min-width: 0; }
.rs-activity-text{ font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.rs-activity-text strong{ color: var(--text-primary); font-weight: 600; }
.rs-activity-time{ font-size: 10px; color: var(--text-disabled); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
/* Weekly Contest */
        .rs-contest-header{
            display: flex; align-items: center; gap: 12px;
            padding-bottom: 12px; margin-bottom: 12px;
            border-bottom: 1px solid var(--border-subtle);
        }
.rs-contest-icon{
            width: 40px; height: 40px; border-radius: var(--radius-lg);
            background: var(--brand-100);
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; color: var(--brand-500);
            flex-shrink: 0;
        }
.rs-contest-info{ flex: 1; min-width: 0; }
.rs-contest-name{ font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-contest-desc{ font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.rs-contest-rank{
            text-align: center; padding: 4px 12px; border-radius: var(--radius-md);
            background: var(--brand-100); font-size: 18px; font-weight: 700;
            font-family: var(--font-heading); color: var(--brand-500);
            flex-shrink: 0;
        }
.rs-contest-rank-label{ display: block; font-size: 8px; font-weight: 600; color: var(--text-disabled); letter-spacing: 0.5px; margin-top: -2px; }
.rs-contest-row{
            display: flex; align-items: center; justify-content: space-between;
            font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; gap: 8px;
        }
.rs-contest-row span:last-child{ font-weight: 600; color: var(--text-primary); }
.rs-contest-bar{
            height: 6px; background: var(--hover-bg); border-radius: 999px; overflow: hidden; margin: 8px 0 6px;
        }
.rs-contest-bar-fill{
            height: 100%; border-radius: 999px;
            background: var(--brand-500);
            width: 0%; transition: width 1s cubic-bezier(0.4,0,0.2,1);
        }
.rs-contest-next{ font-size: 10px; color: var(--text-quaternary); text-align: right; }
#rsNewsList{ display: flex; flex-direction: column; gap: 6px; }
.rs-news-item{ display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border-radius: var(--radius-md); background: var(--hover-bg); cursor: pointer; transition: background var(--transition-fast) var(--ease-smooth), transform var(--transition-fast) var(--ease-smooth); }
.rs-news-item:hover{ background: var(--hover-bg); transform: translateX(3px); }
.rs-news-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); flex-shrink: 0; margin-top: 5px; }
.rs-news-body{ flex: 1; min-width: 0; }
.rs-news-title{ font-size: 11px; color: var(--text-secondary); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rs-news-date{ font-size: 9px; color: var(--text-disabled); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.rs-news-date i{ font-size: 8px; opacity: 0.6; }
.rs-news-empty{ font-size: 11px; color: var(--text-tertiary); text-align: center; padding: 6px 0; }
.content-header{
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 28px;
            background: var(--glass-bg);
            border-bottom: 1px solid var(--border-subtle);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            position: sticky; top: 0; z-index: 50;
        }
.content-header::after{
            content: ''; position: absolute; bottom: 0; left: 8%; right: 8%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--brand-200), transparent);
        }
.content-header-left{ display: flex; align-items: center; gap: 10px; }
.content-header-left h2{
            font-family: var(--font-heading); font-size: 16px; font-weight: 700;
            color: var(--text-primary);
        }
#pageTitle{ display: none; }
/* Desktop sidebar collapse (expand content to full width) */
@media (min-width: 1025px){
            body.sidebar-collapsed .sidebar{ display: none; }
            body.sidebar-collapsed .content-area{ margin-left: 0; }
            html[dir="rtl"] body.sidebar-collapsed .content-area{ margin-right: 0; }
        }
.content-header-actions{ display: flex; align-items: center; gap: 6px; }
.header-divider{
            width: 1px; height: 20px;
            background: var(--border-subtle); margin: 0 3px;
        }
.header-btn{
            width: 34px; height: 34px; border-radius: var(--radius-md);
            background: var(--hover-bg); border: 1px solid var(--border-default);
            color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
            font-size: 13px; cursor: pointer;
            transition: all var(--transition-smooth); position: relative;
            flex-shrink: 0;
        }
.header-btn i.ti{ font-size: 15px; }
.header-balance-pill{
            display: flex; align-items: center; gap: 6px;
            height: 34px; padding: 0 12px; border-radius: var(--radius-md);
            background: rgba(245,158,11,0.14); border: 1px solid rgba(245,158,11,0.28);
            color: #FBBF24; font-size: 13px; font-weight: 700;
            font-family: var(--font-heading); letter-spacing: -0.01em;
            white-space: nowrap; flex-shrink: 0;
        }
.header-balance-pill i{ font-size: 14px; }
.sidebar-toggle-btn i.ti{ font-size: 15px; }
.header-btn:hover{
            background: var(--brand-100); color: var(--brand-500);
            border-color: var(--brand-200);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(245,158,11,0.1);
        }
.header-btn:active{ transform: translateY(0) scale(0.93); }
.header-btn.accent-purple{ background: rgba(139,92,246,0.14); color: #A78BFA; border-color: rgba(139,92,246,0.28); }
.header-btn.accent-purple:hover{ background: rgba(139,92,246,0.24); color: #C4B5FD; border-color: rgba(139,92,246,0.5); box-shadow: 0 4px 12px rgba(139,92,246,0.2); }
.header-btn.accent-green{ background: rgba(16,185,129,0.14); color: #34D399; border-color: rgba(16,185,129,0.28); }
.header-btn.accent-green:hover{ background: rgba(16,185,129,0.24); color: #6EE7B7; border-color: rgba(16,185,129,0.5); box-shadow: 0 4px 12px rgba(16,185,129,0.2); }
.header-btn.accent-blue{ background: rgba(59,130,246,0.14); color: #60A5FA; border-color: rgba(59,130,246,0.28); }
.header-btn.accent-blue:hover{ background: rgba(59,130,246,0.24); color: #93C5FD; border-color: rgba(59,130,246,0.5); box-shadow: 0 4px 12px rgba(59,130,246,0.2); }
.header-btn.accent-teal{ background: rgba(20,184,166,0.14); color: #5EEAD4; border-color: rgba(20,184,166,0.28); }
.header-btn.accent-teal:hover{ background: rgba(20,184,166,0.24); color: #99F6E4; border-color: rgba(20,184,166,0.5); box-shadow: 0 4px 12px rgba(20,184,166,0.2); }
.header-btn.accent-pink{ background: rgba(244,63,94,0.14); color: #FB7185; border-color: rgba(244,63,94,0.28); }
.header-btn.accent-pink:hover{ background: rgba(244,63,94,0.24); color: #FDA4AF; border-color: rgba(244,63,94,0.5); box-shadow: 0 4px 12px rgba(244,63,94,0.2); }
.header-btn .badge{
            position: absolute; top: -5px; right: -5px;
            background: var(--danger); color: #fff; font-size: 8px; font-weight: 700;
            min-width: 17px; height: 17px; border-radius: var(--radius-full);
            display: flex; align-items: center; justify-content: center;
            padding: 0 4px; line-height: 1;
            box-shadow: 0 2px 6px var(--danger-bg);
            border: 2px solid var(--bg-page);
        }
/* Header User Avatar & Dropdown */
        .header-user-wrap{ position: relative; }
.header-user-btn{
            display: flex; align-items: center; gap: 8px;
            padding: 3px 10px 3px 3px; border-radius: var(--radius-md);
            background: var(--hover-bg); border: 1px solid var(--border-default);
            cursor: pointer; transition: all var(--transition-smooth);
            color: var(--text-secondary); position: relative;
        }
.header-user-btn:hover{
            background: var(--brand-100); border-color: var(--brand-200);
            transform: translateY(-1px); color: var(--brand-500);
            box-shadow: 0 4px 12px rgba(245,158,11,0.1);
        }
.header-user-btn:active{ transform: translateY(0) scale(0.97); }
.header-user-avatar{
            width: 28px; height: 28px; border-radius: var(--radius-sm);
            background: var(--brand-500);
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; color: #000; font-weight: 700;
            flex-shrink: 0; overflow: hidden;
        }
.header-user-avatar img{ width: 100%; height: 100%; border-radius: var(--radius-sm); object-fit: cover; }
.header-user-chevron{ font-size: 10px; transition: transform var(--transition-fast); }
.header-user-btn.open .header-user-chevron{ transform: rotate(180deg); }
.header-dropdown{
            position: absolute; top: calc(100% + 8px); right: 0; z-index: 100;
            background: var(--bg-elevated);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl), 0 0 0 1px var(--border-subtle);
            min-width: 232px; display: none; overflow: hidden;
            padding: 8px;
        }
.header-dropdown.open{ display: block; }
.header-dropdown-header{
            padding: 12px 14px 11px; border-bottom: 1px solid var(--border-subtle);
            margin-bottom: 6px;
        }
.header-dropdown-user{ display: flex; align-items: center; gap: 12px; }
.header-dropdown-avatar{
            width: 38px; height: 38px; border-radius: var(--radius-lg); flex-shrink: 0; overflow: hidden;
            background: var(--brand-100); display: flex; align-items: center; justify-content: center;
            border: 1px solid var(--brand-200); position: relative;
        }
.header-dropdown-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.header-dropdown-name{ font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--text-primary); }
.header-dropdown-item{
            display: flex; align-items: center; gap: 12px;
            padding: 8px 12px; border-radius: var(--radius-lg);
            font-size: 13px; font-weight: 500; color: var(--text-secondary);
            cursor: pointer; transition: all var(--transition-fast);
        }
.header-dropdown-item:hover{ background: var(--hover-bg); color: var(--text-primary); }
.hd-ic{ width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hd-ic i{ font-size: 13px; }
.chip-blue{ background: rgba(59,130,246,0.12); color: #3B82F6; }
.chip-indigo{ background: rgba(99,102,241,0.12); color: #6366F1; }
.chip-red{ background: var(--danger-bg); color: var(--danger); }
.header-dropdown-divider{ border: none; height: 1px; background: var(--border-subtle); margin: 5px 12px; }
.header-dropdown-item.danger{ color: var(--danger); }
.header-dropdown-item.danger:hover{ background: var(--danger-bg); transform: translateY(-1px); }
.lang-dropdown{
            position: absolute; top: 44px; right: 0; z-index: 100;
            background: var(--bg-card); border: 1px solid var(--border-default);
            border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
            min-width: 160px; display: none; overflow: hidden;
        }
.lang-dropdown.open{ display: block; }
.lang-dropdown-item{
            padding: 10px 16px; font-size: 13px; color: var(--text-secondary);
            cursor: pointer; transition: all var(--transition);
        }
.lang-dropdown-item:hover{ background: var(--bg-elevated); color: var(--text-primary); }
.lang-dropdown-item.active{ color: var(--brand-500); background: var(--brand-100); }
.content-body{
            flex: 1; padding: 20px 10px 20px 20px;
			min-width: 0; overflow: hidden;
        }
.app-footer{
            padding: 16px 32px;
            display: flex; align-items: center; justify-content: space-between;
            font-size: 12px; color: var(--text-muted);
        }
.app-footer .footer-center{ display: flex; align-items: center; gap: 12px; }
.app-footer .footer-center a{
            width: 32px; height: 32px; border-radius: var(--radius-full);
            display: flex; align-items: center; justify-content: center;
            color: var(--text-secondary); transition: all var(--transition-base);
            text-decoration: none; font-size: 15px;
        }
.app-footer .footer-center a:hover{ color: var(--brand-500); background: var(--brand-100); }
/* Page System */
        .page{ display: none; }
.page.active{ display: block; }
/* Glass Card */
        .glass-card{
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-lg);
            padding: 20px;
            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
            position: relative; overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
.glass-card:hover{ border-color: var(--border-default); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
/* Stats row */
        .stats-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.stat-mini-card{
            display: flex; align-items: center; gap: 14px; padding: 16px;
        }
.stat-mini-icon{
            width: 42px; height: 42px; border-radius: var(--radius-md);
            display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0;
        }
.stat-card-value{ font-family: var(--font-heading); font-size: 17px; font-weight: 600; }
.stat-card-label{ font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.chart-container{ display: flex; align-items: flex-end; gap: 6px; padding: 40px 4px 0; overflow-y: visible; scrollbar-width: thin; scrollbar-color: var(--brand-500) transparent; }
.chart-container::-webkit-scrollbar{ height: 4px; }
.chart-container::-webkit-scrollbar-track{ background: transparent; }
.chart-container::-webkit-scrollbar-thumb{ background: var(--brand-500); border-radius: var(--radius-full); }
.chart-bar-col{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.chart-bar{ width: 100%; max-width: 32px; border-radius: 6px 6px 0 0; min-height: 4px; transition: all 200ms ease; opacity: 0.8; cursor: pointer; position: relative; }
.chart-bar:hover{ opacity: 1; transform: scaleY(1.08); filter: brightness(1.2); }
.chart-bar-label{ font-size: 10px; color: var(--text-tertiary); font-weight: 500; margin-top: 2px; }
.chart-bar-tooltip{
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background: var(--bg-elevated); border: 1px solid var(--border-default);
            padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
            color: var(--text-primary); white-space: nowrap; opacity: 0; pointer-events: none;
            transition: opacity 150ms ease;
        }
.chart-bar:hover .chart-bar-tooltip{ opacity: 1; }
.badge{
            display: inline-flex; align-items: center; gap: 4px;
            padding: 3px 10px; border-radius: var(--radius-full);
            font-size: 11px; font-weight: 600; line-height: 1.4;
        }
.badge-success{ background: var(--success-light); color: var(--success); border: 1px solid rgba(34,197,94,0.2); }
.badge-warning{ background: var(--warning-light); color: var(--warning); border: 1px solid rgba(234,179,8,0.2); }
.badge-danger{ background: var(--danger-light); color: var(--danger); border: 1px solid rgba(239,68,68,0.2); }
.badge-info{ background: var(--info-light); color: var(--info); border: 1px solid rgba(59,130,246,0.2); }
/* Announcement cards */
        #globalAnnouncements{ margin-bottom: 20px; }
.announcement{ display:flex; border-radius:var(--radius-md); overflow:hidden; background:var(--bg-card); border:1px solid var(--border-subtle); margin-bottom:10px; position:relative; }
.announcement-bar{ width:4px; flex-shrink:0; }
.announcement-icon{ width:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; }
.announcement-body{ flex:1; padding:10px 12px; min-width:0; }
.announcement-title{ font-size:13px; font-weight:600; color:var(--text-primary); margin-bottom:2px; }
.announcement-desc{ font-size:12px; color:var(--text-secondary); line-height:1.4; }
.announcement-meta{ font-size:11px; color:var(--text-muted); margin-top:4px; }
.announcement-close{ position:absolute; top:6px; right:8px; background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; padding:0 4px; line-height:1; }
.announcement-close:hover{ color:var(--text-primary); }
/* Buttons */
        .btn{
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 12px 28px; border-radius: 10px;
            font-size: 14px; font-weight: 600; border: none; cursor: pointer;
            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: 0.01em;
            position: relative; overflow: hidden;
        }
.btn:active{ transform: scale(0.97); }
.btn:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-primary{ background: var(--primary); color: #000; }
.btn-primary:hover{ background: var(--primary-hover); box-shadow: 0 4px 20px rgba(245,158,11,0.3); transform: translateY(-1px); }
.btn-primary:active{ transform: scale(0.97) translateY(0); }
.btn-primary:disabled{ opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary{
            background: var(--bg-elevated); color: var(--text-secondary);
            border: 1px solid var(--border-default);
        }
.btn-secondary:hover{ background: var(--border-muted); color: var(--text-primary); border-color: var(--border-muted); }
/* Hide app initially */
        #app{ display: none; }
/* Modals */
        .hidden{ display: none !important; }
.modal{
            background: var(--bg-card); border: 1px solid var(--border-default);
            border-radius: var(--radius-xl); padding: 24px; width: 100%; max-width: 480px;
            max-height: 90vh; overflow-y: auto;
        }
/* Legal Modal */
        .legal-modal-overlay{
            position: fixed; inset: 0; z-index: 300;
            background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
            display: none; align-items: center; justify-content: center; padding: 16px;
        }
.legal-modal-overlay.open{ display: flex; }
.legal-modal-overlay.show{ opacity: 0; pointer-events: none; transition: opacity 250ms ease; }
.legal-modal-overlay.open.show{ opacity: 1; pointer-events: auto; }
.legal-modal-box{
            background: var(--bg-card); border: 1px solid var(--border-default);
            border-radius: var(--radius-xl); width: 100%; max-width: 560px;
            max-height: 80vh; overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.6); animation: scaleIn 250ms ease;
        }
.legal-modal-header{
            display: flex; align-items: center; justify-content: space-between;
            padding: 20px 24px; border-bottom: 1px solid var(--border-default);
            position: sticky; top: 0; background: var(--bg-card); z-index: 1;
        }
.legal-modal-title{ font-weight: 600; font-size: 16px; }
.legal-modal-body{ padding: 24px; font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.legal-modal-body p{ margin-bottom: 16px; }
.legal-modal-body a{ color: var(--primary); text-decoration: underline; }
/* Animations & Keyframes */
        @keyframes fadeIn{ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp{ from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn{ from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes cardFadeIn{ from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer{ 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes pulseGlow{ 0%, 100% { box-shadow: 0 0 8px rgba(245,158,11,0.1); } 50% { box-shadow: 0 0 20px rgba(245,158,11,0.2); } }
@keyframes countUp{ from { opacity: 0; } to { opacity: 1; } }
.page.active .glass-card{ animation: cardFadeIn 400ms ease forwards; }
.page.active .glass-card:nth-child(2){ animation-delay: 80ms; }
.page.active .glass-card:nth-child(3){ animation-delay: 150ms; }
.page.active .glass-card:nth-child(4){ animation-delay: 220ms; }
.page.active .glass-card:nth-child(5){ animation-delay: 290ms; }
.page.active .glass-card:nth-child(6){ animation-delay: 360ms; }
@media (prefers-reduced-motion: reduce){*, *::before, *::after{
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
.glass-card:hover{ transform: none; }
.sidebar-item:hover{ transform: none; }
.btn:active{ transform: none; }
.btn:hover{ transform: none; }}
/* XP bar polish */
        .xp-bar{ height: 6px; border-radius: var(--radius-full); background: var(--border-default); overflow: hidden; margin-top: 10px; }
.xp-bar-fill{ height: 100%; border-radius: var(--radius-full); background: var(--primary); transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1); }
/* ===== PREMIUM DASHBOARD REDESIGN ===== */

        /* Hero Section */
        .dw-hero{ position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 10px; padding: 32px 36px; background: var(--hero-bg); border: 1px solid var(--hero-border); }
.dw-hero-bg{ position: absolute; inset: 0; background: var(--hero-radial); pointer-events: none; }
.dw-hero-content{ position: relative; z-index: 1; display: flex; gap: 28px; align-items: stretch; }
.dw-hero-left{ display: flex; align-items: center; gap: 24px; flex: 1; min-width: 0; }
.dw-hero-right{ display: flex; gap: 10px; flex-shrink: 0; align-items: center; }
.dw-avatar-wrap{ position: relative; display: inline-flex; flex-shrink: 0; }
.dw-avatar-wrap::before{ content: ''; position: absolute; inset: -5px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #FBBF24, #F59E0B 45%, #B45309); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 0; }
.dw-avatar{ width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex-shrink: 0; position: relative; z-index: 1; }
.dw-avatar-fallback{ width: 88px; height: 88px; border-radius: 50%; background: var(--brand-500); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; color: #000; flex-shrink: 0; position: relative; z-index: 1; }
.dw-level-medal{ position: absolute; top: calc(100% - 16px); left: 50%; transform: translateX(-50%); width: 32px; height: 32px; z-index: 2; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }
.dw-level-medal-inner{ position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: linear-gradient(135deg, #FCD34D, #F59E0B 50%, #D97706); font-family: var(--font-heading); font-size: 12px; font-weight: 800; color: #fff; line-height: 1; clip-path: polygon(50% 0%, 64.54% 14.89%, 85.36% 14.64%, 85.11% 35.46%, 100% 50%, 85.11% 64.54%, 85.36% 85.36%, 64.54% 85.11%, 50% 100%, 35.46% 85.11%, 14.64% 85.36%, 14.89% 64.54%, 0% 50%, 14.89% 35.46%, 14.64% 14.64%, 35.46% 14.89%); }
.dw-level-medal-inner::before{ content: ''; position: absolute; inset: 2.5px; background: linear-gradient(135deg, #DC2626, #7F1D1D); clip-path: polygon(50% 0%, 64.54% 14.89%, 85.36% 14.64%, 85.11% 35.46%, 100% 50%, 85.11% 64.54%, 85.36% 85.36%, 64.54% 85.11%, 50% 100%, 35.46% 85.11%, 14.64% 85.36%, 14.89% 64.54%, 0% 50%, 14.89% 35.46%, 14.64% 14.64%, 35.46% 14.89%); z-index: -1; }
.dw-hero-info{ flex: 1; min-width: 0; }
.dw-hero-greeting{ font-family: var(--font-heading); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.3; color: var(--text-primary); }
.dw-hero-meta{ display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.dw-level-tag{ display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; background: var(--brand-100); border: 1px solid var(--brand-200); font-size: 12px; font-weight: 600; color: var(--brand-500); }
.dw-level-badge{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; background: var(--purple-bg); border: 1px solid var(--purple-bg); font-size: 12px; font-weight: 600; color: var(--purple); }
.dw-level-badge i{ font-size: 11px; }
.dw-rank-img{ height: 22px; vertical-align: middle; }
.dw-xp-text{ display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.dw-bonus-tag{ display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; background: var(--success-bg); border: 1px solid var(--success); font-size: 12px; font-weight: 600; color: var(--success); position: relative; cursor: help; flex-shrink: 0; }
.dw-bonus-tag::before,
.dw-bonus-tag::after{ position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 60; }
.dw-bonus-tag::after{ content: attr(data-tooltip); bottom: calc(100% + 10px); background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 8px; white-space: nowrap; box-shadow: var(--shadow-lg); }
.dw-bonus-tag::before{ content: ''; bottom: calc(100% + 5px); border: 5px solid transparent; border-top-color: var(--bg-elevated); }
.dw-bonus-tag:hover::before,
.dw-bonus-tag:hover::after{ opacity: 1; visibility: visible; }
.dw-bonus-tag:hover::after{ transform: translateX(-50%) translateY(-2px); }
.dw-bonus-tag:hover::before{ transform: translateX(-50%); }
.dw-hero-meta i, .dw-level-tag i, .dw-xp-text i, .dw-bonus-tag i{ font-size: 11px; }
.dw-xp-track{ display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.dw-xp-bar{ flex: 1; height: 8px; border-radius: 10px; background: var(--hover-bg); overflow: hidden; position: relative; }
.dw-xp-fill{ height: 100%; border-radius: 10px; background: var(--brand-500); position: relative; }
.dw-xp-pct{ font-size: 11px; font-weight: 600; color: var(--text-muted); min-width: 34px; text-align: right; font-family: var(--font-heading); }
.dw-xp-remaining{ display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--brand-500); }
.dw-xp-remaining i{ font-size: 11px; }
/* Next Reward */
        .dw-next-reward{ display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; margin-left: 10px; font-size: 12px; color: var(--purple); font-weight: 500; }
.dw-next-reward i{ font-size: 13px; }
.dw-next-reward strong{ color: var(--purple); font-weight: 600; }
/* Hero Stat Cards */
.dw-hero-stats{ display: flex; gap: 10px; align-items: flex-start; }
.dw-hero-stat-card{ width: auto; min-width: 150px; padding: 12px 16px; border-radius: 10px; background: var(--hero-stat-bg); border: 1px solid var(--hero-stat-border); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; position: relative; overflow: hidden; transition: transform 0.18s var(--ease-smooth), border-color 0.18s var(--ease-smooth), box-shadow 0.18s var(--ease-smooth); }
.dw-hero-stat-card:hover{ transform: translateY(-2px); border-color: var(--brand-200); box-shadow: var(--shadow-md); }
.dw-hero-stat-glow{ position: absolute; top: -40%; left: -20%; width: 70px; height: 70px; border-radius: 50%; opacity: 0.12; pointer-events: none; filter: blur(24px); grid-column: 1 / -1; grid-row: 1 / -1; }
.dw-hero-stat-icon{ width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; position: relative; z-index: 1; flex-shrink: 0; grid-column: 1; grid-row: 1 / -1; }
.dw-hero-stat-value{ grid-column: 2; grid-row: 1; }
.dw-hero-stat-label{ grid-column: 2; grid-row: 2; }
.dw-hero-stat-card.gold{ background: var(--brand-100); border-color: var(--brand-200); }
.dw-hero-stat-card.gold .dw-hero-stat-glow{ background: var(--brand-500); }
.dw-hero-stat-card.gold .dw-hero-stat-icon{ background: var(--brand-200); color: var(--brand-500); }
.dw-hero-stat-card.gold .dw-hero-stat-value{ color: var(--brand-500); }
.dw-hero-stat-card.orange{ background: rgba(234,88,12,0.06); border-color: rgba(234,88,12,0.12); }
.dw-hero-stat-card.orange .dw-hero-stat-glow{ background: #EA580C; }
.dw-hero-stat-card.orange .dw-hero-stat-icon{ background: rgba(234,88,12,0.12); color: #EA580C; }
.dw-hero-stat-card.orange .dw-hero-stat-value{ color: #EA580C; }
.dw-hero-stat-card.purple{ background: var(--purple-bg); border-color: var(--purple-bg); }
.dw-hero-stat-card.purple .dw-hero-stat-glow{ background: var(--purple); }
.dw-hero-stat-card.purple .dw-hero-stat-icon{ background: rgba(139,92,246,0.14); color: var(--purple); }
.dw-hero-stat-card.purple .dw-hero-stat-value{ color: var(--purple); }
.dw-hero-stat-value{ font-family: var(--font-heading); font-size: 19px; font-weight: 700; color: var(--text-primary); position: relative; z-index: 1; line-height: 1.2; transition: color 0.18s var(--ease-smooth); }
.dw-hero-stat-label{ font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; position: relative; z-index: 1; }
/* Announcements */
        .dw-announcements{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.dw-ann-card{ display: flex; align-items: center; gap: 16px; border-radius: 10px; padding: 18px 22px; background: var(--glass-bg); border: 1px solid var(--border-default); position: relative; overflow: hidden; }
.dw-ann-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.dw-ann-glow{ position: absolute; top: -30%; right: -10%; width: 100px; height: 100px; border-radius: 50%; opacity: 0.08; pointer-events: none; filter: blur(40px); }
.dw-ann-icon{ width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; position: relative; z-index: 1; }
.dw-ann-body{ flex: 1; min-width: 0; position: relative; z-index: 1; }
.dw-ann-title{ font-size: 14px; font-weight: 600; color: var(--text-primary); }
.dw-ann-desc{ font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.5; }
.dw-ann-btn{ padding: 7px 18px; border-radius: 10px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; }
/* Type: Info (blue) */
        .dw-ann-info{ background: var(--info-bg); border-color: var(--info-bg); }
.dw-ann-info .dw-ann-icon{ background: var(--info-bg); color: var(--info); }
.dw-ann-info .dw-ann-btn{ background: var(--info-bg); color: var(--info); }
/* Type: Warning (amber) */
        .dw-ann-warning{ background: var(--brand-100); border-color: var(--brand-200); }
.dw-ann-warning .dw-ann-icon{ background: var(--brand-100); color: var(--brand-500); }
.dw-ann-warning .dw-ann-btn{ background: var(--brand-100); color: var(--brand-500); }
/* Type: Success (green) */
        .dw-ann-success{ background: var(--success-bg); border-color: var(--success-bg); }
.dw-ann-success .dw-ann-icon{ background: var(--success-bg); color: var(--success); }
.dw-ann-success .dw-ann-btn{ background: var(--success-bg); color: var(--success); }
/* Type: Important (red) */
        .dw-ann-important{ background: var(--danger-bg); border-color: var(--danger-bg); }
.dw-ann-important .dw-ann-icon{ background: var(--danger-bg); color: var(--danger); }
.dw-ann-important .dw-ann-btn{ background: var(--danger-bg); color: var(--danger); }
/* Stats Grid - unified balance + stat cards */
        .dw-stats-grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-bottom: 24px; }
.dw-stat-card{ position: relative; border-radius: var(--radius-sm); padding: 20px; overflow: hidden; border: 1px solid var(--border-default); backdrop-filter: blur(12px); cursor: pointer; display: flex; flex-direction: column; }
.dw-stat-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.dw-stat-card:active{ transform: translateY(-1px) scale(0.98); }
.dw-stat-card-wide{ grid-column: span 3; }
.dw-stat-card-small{ grid-column: span 3; }
.dw-stat-card::before{ content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 2px; border-radius: 0 0 4px 4px; opacity: 0; }
.dw-stat-card:hover::before{ opacity: 1; }
/* Color variants */
        .dw-stat-gold{ background: var(--brand-50); }
.dw-stat-gold::before{ background: var(--brand-500); }
.dw-stat-green{ background: var(--success-bg); }
.dw-stat-green::before{ background: var(--success); }
.dw-stat-red{ background: var(--danger-bg); }
.dw-stat-red::before{ background: var(--danger); }
.dw-stat-blue{ background: var(--info-bg); }
.dw-stat-blue::before{ background: var(--info); }
.dw-stat-purple{ background: var(--purple-bg); }
.dw-stat-purple::before{ background: var(--purple); }
.dw-stat-indigo{ background: rgba(99,102,241,0.05); }
.dw-stat-indigo::before{ background: #6366F1; }
.dw-stat-inner{ display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.dw-stat-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dw-stat-card-small .dw-stat-body{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.dw-stat-card-small .dw-stat-sub{ margin-top: 0; white-space: nowrap; }
.dw-stat-body-left{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dw-stat-icon{ width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; position: relative; z-index: 1; }
.dw-stat-icon-gold{ background: var(--brand-100); color: var(--brand-500); }
.dw-stat-icon-green{ background: var(--success-bg); color: var(--success); }
.dw-stat-icon-red{ background: var(--danger-bg); color: var(--danger); }
.dw-stat-icon-blue{ background: var(--info-bg); color: var(--info); }
.dw-stat-icon-purple{ background: var(--purple-bg); color: var(--purple); }
.dw-stat-icon-indigo{ background: rgba(99,102,241,0.12); color: #6366F1; }
.dw-stat-label{ font-size: 11px; color: var(--text-muted); position: relative; z-index: 1; line-height: 1.3; }
.dw-stat-value{ font-family: var(--font-heading); font-size: 22px; font-weight: 700; position: relative; z-index: 1; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-primary); }
.dw-stat-sub{ font-size: 10px; color: var(--text-muted); margin-top: 4px; position: relative; z-index: 1; }
.dw-stat-value-row{ display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dw-stat-value-row .dw-stat-value{ font-size: 20px; }
.dw-stat-value-row .dw-stat-sub.today{ margin-top: 0; white-space: nowrap; color: var(--success); font-weight: 600; }
/* 2-Column Grid (Chart + News) */
        .dw-grid-2col{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
/* Chart Card */
        .dw-chart-card{ position: relative; border-radius: 10px; padding: 26px 24px 20px; background: var(--glass-bg); border: 1px solid var(--border-default); backdrop-filter: blur(16px); min-width: 0; }
.dw-chart-card:hover{ border-color: var(--border-strong); }
.dw-chart-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.dw-chart-title{ font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.dw-chart-title i{ font-size: 15px; color: var(--primary); }
.dw-chart-title-sub{ color: var(--text-tertiary); font-weight: 400; font-size: 12px; margin-left: 2px; }
.dw-chart-header-right{ display: flex; align-items: center; gap: 14px; }
.dw-chart-total{ font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--brand-500); }
.dw-chart-filters{ display: flex; gap: 4px; background: rgba(255,255,255,0.03); padding: 3px; border-radius: 10px; border: 1px solid var(--border-default); }
.dw-chart-filter{ padding: 4px 12px; border-radius: 8px; border: none; background: transparent; color: var(--text-tertiary); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 200ms ease; font-family: var(--font-heading); }
.dw-chart-filter:hover{ color: var(--text-primary); }
.dw-chart-filter.active{ background: var(--primary); color: #000; box-shadow: 0 2px 8px rgba(245,158,11,0.25); }
.dw-chart-bars{ display: flex; align-items: flex-end; gap: 6px; height: 200px; padding: 12px 2px 4px; position: relative; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--brand-500) transparent; }
.dw-chart-bars::-webkit-scrollbar{ height: 4px; }
.dw-chart-bars::-webkit-scrollbar-track{ background: transparent; }
.dw-chart-bars::-webkit-scrollbar-thumb{ background: var(--brand-500); border-radius: var(--radius-full); }
.dw-chart-bars::before{ content: ''; position: absolute; left: 0; right: 0; bottom: 20px; height: 1px; background: var(--border-default); opacity: 0.3; }
/* Chart Bars */
        .dw-bar-col{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; position: relative; }
.dw-bar{ width: 100%; max-width: 32px; border-radius: 6px 6px 2px 2px; min-height: 3px; cursor: pointer; position: relative; animation: barGrow 0.6s cubic-bezier(0.34,1.56,0.64,1) both; transition: all 250ms ease; }
.dw-bar-col:nth-child(1) .dw-bar{ animation-delay: 0.05s; }
.dw-bar-col:nth-child(2) .dw-bar{ animation-delay: 0.1s; }
.dw-bar-col:nth-child(3) .dw-bar{ animation-delay: 0.15s; }
.dw-bar-col:nth-child(4) .dw-bar{ animation-delay: 0.2s; }
.dw-bar-col:nth-child(5) .dw-bar{ animation-delay: 0.25s; }
.dw-bar-col:nth-child(6) .dw-bar{ animation-delay: 0.3s; }
.dw-bar-col:nth-child(7) .dw-bar{ animation-delay: 0.35s; }
@keyframes barGrow{ 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
.dw-bar:hover{ filter: brightness(1.4); transform: scaleY(1.06); z-index: 2; }
.dw-bar-inner{ position: absolute; inset: 0; border-radius: 6px 6px 2px 2px; background: inherit; }
.dw-bar-inner::after{ content: ''; position: absolute; inset: 0; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 60%); pointer-events: none; }
.dw-bar-label{ font-size: 10px; color: var(--text-quaternary); font-weight: 500; margin-top: 2px; transition: color 200ms; }
.dw-bar-col:hover .dw-bar-label{ color: var(--text-tertiary); }
.dw-bar-tip{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: var(--bg-elevated); border: 1px solid var(--border-default); padding: 6px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--text-primary); white-space: nowrap; opacity: 0; pointer-events: none; transition: all 200ms ease; box-shadow: 0 6px 20px rgba(0,0,0,0.25); font-family: var(--font-heading); z-index: 5; }
.dw-bar-tip::after{ content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--bg-elevated); }
.dw-bar:hover .dw-bar-tip{ opacity: 1; transform: translateX(-50%) translateY(-50%); }
.dw-news-item{ display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; }
.dw-news-item:hover{ background: var(--hover-bg); transform: translateX(3px); }
.dw-news-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--brand-500); flex-shrink: 0; margin-top: 6px; }
.dw-news-item-body{ flex: 1; min-width: 0; }
.dw-news-item-title{ font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-news-item-date{ font-size: 11px; color: var(--text-muted); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.dw-news-item-date i{ font-size: 10px; opacity: 0.5; }
.dw-news-empty{ padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
.dw-ann-btn i{ font-size: 10px; }
.dw-banner-wrap{ text-align: center; margin-bottom: 24px; }
.dw-banner-wrap img{ max-width: 100%; border-radius: var(--radius-md); display: block; margin: 0 auto; }
/* Quick Actions Grid */
        /* Active Boosters Grid */
        .dw-booster-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.dw-booster-card{ position: relative; border-radius: 10px; padding: 0; overflow: hidden; border: 1px solid; cursor: default; }
.dw-booster-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dw-booster-card:active{ transform: translateY(-1px) scale(0.97); }
.dw-booster-inner{ padding: 12px; position: relative; z-index: 1; }
.dw-booster-top{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; position: relative; z-index: 1; }
.dw-booster-icon{ width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; position: relative; flex-shrink: 0; }
.dw-booster-icon img{ width: 18px; height: 18px; object-fit: contain; }
.dw-booster-icon img:not([src]), .dw-booster-icon img[src=""]{ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.dw-booster-bonus{ padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 700; white-space: nowrap; font-family: var(--font-heading); letter-spacing: 0.01em; }
.dw-booster-body{ position: relative; z-index: 1; }
.dw-booster-name{ font-size: 11px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; line-height: 1.2; }
.dw-booster-detail{ font-size: 10px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.dw-booster-detail i{ font-size: 9px; opacity: 0.6; width: 12px; }
.dw-boost-progress{ height: 3px; border-radius: 999px; background: var(--hover-bg); margin-top: 6px; overflow: hidden; position: relative; z-index: 1; }
.dw-boost-fill{ height: 100%; border-radius: 999px; position: relative; }
.dw-boost-timer{ font-family: var(--font-heading); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--brand-400); }
/* Mini Quick Actions card (next to chart) */
        .dw-mini-card{ border-radius: 10px; padding: 18px 18px 16px; background: var(--glass-bg); border: 1px solid var(--border-default); backdrop-filter: blur(16px); }
#torox-widget-container{ margin-top: 20px; }
#torox-widget-container-ow{ margin-top: 12px; }
.dw-mini-card-header{ display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 14px; letter-spacing: 0.02em; }
.dw-mini-card-header i{ font-size: 13px; color: var(--brand-500); }
.dw-grid-actions{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dw-mini-action{ display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 10px; border: 1px solid var(--border-default); background: var(--bg-card); cursor: pointer; transition: all 0.2s; position: relative; }
.dw-mini-action:hover{ transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); background: var(--hover-bg); }
.dw-mini-action:active{ transform: scale(0.95); }
.dw-mini-icon{ width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.dw-mini-label{ font-size: 11px; font-weight: 600; color: var(--text-secondary); font-family: var(--font-heading); letter-spacing: 0.01em; }
.dw-mini-status{ font-size: 11px; font-weight: 700; font-family: var(--font-heading); letter-spacing: 0.02em; line-height: 1.2; }
.dw-mini-status.ready{ color: var(--success); }
.dw-mini-status.timer{ color: var(--text-muted); }
#qaFaucetStatus{ color: #F59E0B; }
#qaPtcStatus{ color: #3B82F6; }
#qaShortlinksStatus{ color: #F97316; }
#qaBonusStatus{ color: #22C55E; }
#qaWheelStatus{ color: #EF4444; }
#qaTasksStatus{ color: #8B5CF6; }
.dw-survey-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.dw-survey-card{
            display: flex; flex-direction: column; align-items: center; gap: 4px;
            padding: 10px 6px 8px; border-radius: 8px; border: 1px solid var(--border-default);
            background: var(--bg-card); text-decoration: none; text-align: center;
            transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
        }
.dw-survey-card:hover{ transform: translateY(-2px); border-color: rgba(59,130,246,0.35); box-shadow: 0 8px 24px rgba(0,0,0,0.14); }
.dw-survey-card:active{ transform: scale(0.97); }
.dw-survey-payout{ font-family: var(--font-heading); font-size: 15px; font-weight: 800; color: var(--success); line-height: 1.2; }
.dw-survey-meta{ font-size: 10px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 3px; }
.dw-survey-meta i{ font-size: 9px; color: var(--text-tertiary); }
.dw-survey-stars{ color: #FFD700; font-size: 10px; letter-spacing: 1px; }
.dw-survey-start{
            margin-top: 2px; display: inline-flex; align-items: center; gap: 3px;
            padding: 4px 10px; border-radius: 5px; font-size: 10px; font-weight: 700;
            color: #fff; background: linear-gradient(135deg, #60A5FA, #2563EB);
            white-space: nowrap; transition: transform 0.2s, box-shadow 0.2s;
        }
.dw-survey-card:hover .dw-survey-start{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.dw-survey-more{ justify-content: center; border-style: dashed; border-color: rgba(59,130,246,0.3); }
.dw-survey-more:hover{ border-color: rgba(59,130,246,0.5); }
@media (max-width: 900px){ .dw-survey-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px){ .dw-survey-grid{ grid-template-columns: repeat(2, 1fr); } }
.dw-offers-header{ display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-default); }
.dw-offers-header span{ font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--text-secondary); flex: 1; }
.dw-offers-earned{ font-size: 11px; color: var(--success); font-weight: 600; padding: 3px 10px; border-radius: 6px; background: var(--success-bg); }
.dw-offers-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.dw-offer-card{ position: relative; border-radius: 10px; padding: 0; border: 1px solid var(--border-default); cursor: pointer; background: var(--glass-bg); overflow: hidden; }
.dw-offer-card:hover{ transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.dw-offer-card:active{ transform: translateY(-1px) scale(0.98); }
.dw-offer-img{ width: 100%; height: 80px; overflow: hidden; background: var(--hover-bg); position: relative; }
.dw-offer-img img{ width: 100%; height: 100%; object-fit: cover; }
.dw-offer-card:hover .dw-offer-img img{ transform: scale(1.08); }
.dw-offer-img-fallback{ display: flex; align-items: center; justify-content: center; background: var(--brand-50); }
.dw-offer-img-fallback i{ font-size: 24px; color: var(--brand-500); opacity: 0.3; }
.dw-offer-img-overlay{ position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(transparent, rgba(0,0,0,0.5)); pointer-events: none; }
.dw-offer-body{ padding: 10px 10px 8px; }
.dw-offer-name{ font-size: 11px; font-weight: 500; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: 28px; }
.dw-offer-meta{ display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.dw-offer-category{ font-size: 9px; font-weight: 600; color: var(--text-disabled); text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 4px; background: var(--hover-bg); }
.dw-offer-footer{ display: flex; justify-content: space-between; align-items: center; padding: 0 10px 10px; gap: 6px; }
.dw-offer-payout{ font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--brand-500); display: flex; align-items: center; gap: 3px; }
.dw-offer-payout i{ font-size: 10px; color: var(--brand-500); opacity: 0.7; }
.dw-offer-btn{ padding: 5px 12px; border-radius: 6px; background: var(--brand-500); color: #000; border: none; font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: var(--font-heading); }
.dw-offer-btn:hover{ background: var(--brand-400); box-shadow: 0 4px 20px var(--brand-100); transform: translateY(-1px) scale(1.02); }
.dw-offer-btn:active{ transform: scale(0.95); }
.dw-offers-more{ text-align: center; padding: 14px 0 4px; font-size: 12px; color: var(--brand-500); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; border-top: 1px solid var(--border-default); margin-top: 14px; font-weight: 600; font-family: var(--font-heading); }
.dw-offers-more:hover{ gap: 12px; color: var(--brand-400); }
.dw-offers-more i{ font-size: 11px; }
.dw-offers-more:hover i{ transform: translateX(3px); }
.dw-offers-locked{ text-align: center; padding: 28px 24px; color: var(--text-muted); }
.dw-offers-locked i{ font-size: 36px; margin-bottom: 10px; opacity: 0.3; display: block; }
.dw-offers-locked p{ font-size: 13px; }
/* Responsive Dashboard */
        @media (min-width: 769px) and (max-width: 1280px){
    .dw-hero-stats{ display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
    .dw-hero-stat-card:nth-child(1){ width: calc(50% - 5px); }
    .dw-hero-stat-card:nth-child(2){ width: calc(50% - 5px); }
    .dw-hero-stat-card:nth-child(3){ width: auto; margin: 0 auto; }
    }
@media (max-width: 1500px){.dw-offers-grid{ grid-template-columns: repeat(5, 1fr); }}
@media (max-width: 1300px){.dw-offers-grid{ grid-template-columns: repeat(4, 1fr); }
.dw-booster-grid{ grid-template-columns: repeat(4, 1fr); }}
@media (max-width: 992px){.dw-stats-grid{ grid-template-columns: repeat(4, 1fr); gap: 12px; justify-content: center; }
.dw-stat-card-wide{ grid-column: 1 / -1; justify-self: center; width: 100%; }
.dw-stat-card-small{ grid-column: span 1; min-width: 0; }
.dw-stat-card-small .dw-stat-body{ flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; }
.dw-stat-card-small .dw-stat-sub{ white-space: normal; }
.dw-offers-grid{ grid-template-columns: repeat(3, 1fr); }
.dw-hero-content{ flex-direction: column; align-items: center; }
.dw-hero{ padding: 24px; }
.dw-hero-left{ flex-direction: column; align-items: center; text-align: center; }
.dw-hero-meta{ justify-content: center; }
.dw-hero-right{ justify-content: center; }
.dw-hero-stats{ justify-content: center; flex-wrap: wrap; }
.dw-hero-stat-card{ min-width: 0; padding: 12px 14px; }}
@media (max-width: 768px){.dw-grid-2col{ grid-template-columns: 1fr; }
.dw-stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; justify-content: center; }
.dw-stat-card-wide{ grid-column: 1 / -1; width: 100%; }
.dw-stat-card-small{ grid-column: span 1; min-width: 0; }
.dw-stat-card-small .dw-stat-body{ flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; }
.dw-stat-card-small .dw-stat-sub{ white-space: normal; }
.dw-booster-grid{ grid-template-columns: 1fr; }
.dw-offers-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dw-hero{ padding: 20px; }
.dw-hero-greeting{ font-size: 18px; }
.dw-hero-left{ flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.dw-hero-meta{ justify-content: center; }
.dw-hero-stats{ gap: 8px; flex-wrap: wrap; justify-content: center; }
.dw-hero-stat-card{ flex: 1 1 auto; min-width: 0; padding: 10px 12px; gap: 10px; column-gap: 10px; max-width: 200px; }
.dw-hero-stat-value{ font-size: 17px; }
.dw-hero-stat-icon{ width: 32px; height: 32px; font-size: 14px; }
.dw-avatar{ width: 68px; height: 68px; border-radius: 50%; }
.dw-avatar-fallback{ width: 68px; height: 68px; font-size: 26px; border-radius: 50%; }}
.page-title{ font-family: var(--font-heading); font-size: 18px; font-weight: 600; margin-bottom: 0; }
.stat-value{ font-family: var(--font-heading); font-weight: 700; font-size: 24px; line-height: 1.2; }
.stat-label{ font-size: 11px; color: var(--text-tertiary); margin-top: 5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
/* General Card */
        .card{
            background: var(--card-bg);
            backdrop-filter: blur(12px);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            padding: 20px;
            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: var(--shadow-sm);
        }
.card:hover{ border-color: var(--hover-border); box-shadow: var(--shadow-lg); }
.card-header{ display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-default); font-weight: 600; font-size: 14px; }
.card-body{ padding: 16px 20px; }
/* Progress Bar */
        .progress-bar{ height: 6px; border-radius: var(--radius-full); background: var(--border-default); overflow: hidden; }
.progress-fill{ height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--primary), #D97706); transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1); }
/* Alert */
        .alert{ padding: 12px 16px; border-radius: var(--radius-md); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.alert-warning{ background: rgba(234,179,8,0.1); border: 1px solid rgba(234,179,8,0.15); color: var(--warning); }
.alert-success{ background: var(--success-light); border: 1px solid rgba(34,197,94,0.15); color: var(--success); }
.alert-danger{ background: var(--danger-light); border: 1px solid rgba(239,68,68,0.15); color: var(--danger); }
.alert-info{ background: var(--info-light); border: 1px solid rgba(59,130,246,0.15); color: var(--info); }
/* Faucet-specific */
.faucet-claim-btn{
            min-width: 200px; padding: 16px 32px; font-size: 15px; font-weight: 700;
            letter-spacing: 0.05em; position: relative;
        }
.faucet-event{
            display: flex; align-items: center; gap: 12px;
            padding: 12px 16px; margin-bottom: 14px;
            border-radius: var(--radius-md);
            background: rgba(245,158,11,0.08);
            border: 1px solid rgba(245,158,11,0.2);
        }
.faucet-event.active{
            background: rgba(16,185,129,0.08);
            border-color: rgba(16,185,129,0.3);
            animation: eventPulse 2s ease-in-out infinite;
        }
.faucet-event-icon{ font-size: 24px; flex-shrink: 0; }
.faucet-event-body{ flex:1; min-width:0; }
.faucet-event-title{ font-weight:600; font-size:14px; color:var(--text-primary); }
.faucet-event-desc{ font-size:12px; color:var(--text-secondary); margin-top:1px; }
.faucet-event-countdown{ font-size:11px; color:var(--primary); font-weight:600; margin-top:2px; font-family:var(--font-heading); }
@keyframes eventPulse{ 0%,100%{opacity:1} 50%{opacity:0.8} }
.antibot-panel{ margin-bottom:12px; padding:16px; }
.antibot-target{ font-family:'Orbitron',monospace; font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:12px; text-align:center; }
.antibot-target .target-symbol{ display:inline-block; padding:4px 12px; background:rgba(124,58,237,0.15); border:1px solid rgba(124,58,237,0.4); border-radius:8px; color:#A78BFA; font-size:16px; margin-left:6px; }
.antibot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:320px; margin:0 auto 12px; }
.antibot-card{ display:flex; align-items:center; justify-content:center; padding:14px 8px; background:rgba(124,58,237,0.08); border:1px solid rgba(124,58,237,0.15); border-radius:10px; font-family:'Orbitron',monospace; font-size:15px; font-weight:600; color:var(--text-primary); cursor:pointer; transition:all 0.2s ease; user-select:none; -webkit-tap-highlight-color:transparent; }
.antibot-card:hover{ transform:translateY(-2px); background:rgba(124,58,237,0.15); border-color:rgba(124,58,237,0.4); box-shadow:0 4px 12px rgba(124,58,237,0.15); }
.antibot-card.selected{ border-color:#A78BFA; background:rgba(124,58,237,0.2); box-shadow:0 0 0 2px rgba(124,58,237,0.3); }
.antibot-card.correct{ border-color:#10B981!important; background:rgba(16,185,129,0.15)!important; box-shadow:0 0 0 2px rgba(16,185,129,0.3)!important; animation:antibotPulse 0.4s ease; }
.antibot-card.wrong{ border-color:#EF4444!important; background:rgba(239,68,68,0.15)!important; animation:antibotShake 0.4s ease; }
.antibot-card.disabled{ opacity:0.5; cursor:not-allowed; pointer-events:none; }
.antibot-timer{ text-align:center; font-size:12px; color:var(--text-tertiary); font-family:var(--font-mono); margin-bottom:8px; }
.antibot-timer.urgent{ color:#F43F5E; font-weight:600; }
.antibot-error{ text-align:center; font-size:12px; color:#EF4444; padding:8px; border-radius:8px; background:rgba(239,68,68,0.1); margin-bottom:8px; }
@keyframes antibotPulse{ 0%{transform:scale(1)} 50%{transform:scale(1.05)} 100%{transform:scale(1)} }
@keyframes antibotShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
/* ─── Daily Bonus Hero ─── */
.bonus-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(245,158,11,0.16), rgba(139,92,246,0.10) 45%, transparent);
            border: 1px solid rgba(245,158,11,0.18);
            
        }
.bonus-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.bonus-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(245,158,11,0.15); color: #FBBF24;
            border: 1px solid rgba(245,158,11,0.3);
        }
.bonus-hero-title-wrap{ min-width: 0; }
.bonus-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #FCD34D, #F59E0B);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.bonus-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.bonus-hero-stats{
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
            margin-bottom: 14px; position: relative; z-index: 1;
        }
.bonus-hero-stat{
            display: flex; flex-direction: column; align-items: center; gap: 4px;
            padding: 12px 8px; border-radius: 14px; text-align: center;
            background: var(--hero-stat-bg); border: 1px solid var(--hero-stat-border);
            backdrop-filter: blur(8px); min-width: 0;
        }
.bonus-hero-stat-ic{
            width: 32px; height: 32px; border-radius: 10px; display: flex;
            align-items: center; justify-content: center; font-size: 14px; margin-bottom: 2px;
        }
.bonus-hero-stat-ic i{ font-size: 18px; }
.bonus-hero-stat-v{
            font-family: var(--font-heading); font-size: 20px; font-weight: 800;
            color: var(--text-primary); line-height: 1.1; white-space: nowrap;
        }
.bonus-hero-stat-l{
            font-size: 10px; color: var(--text-tertiary); font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.04em;
        }
.bonus-hero-countdown{
            display: flex; align-items: center; justify-content: center; gap: 8px;
            padding: 10px 14px; border-radius: 12px; margin-bottom: 14px;
            background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.22);
            color: var(--primary); font-size: 13px; font-weight: 600; position: relative; z-index: 1;
        }
.bonus-hero-countdown i{ font-size: 12px; }
.bonus-hero-countdown-t{
            font-family: var(--font-heading); font-weight: 700; color: #FCD34D; font-size: 14px;
        }
.bonus-progress{ position: relative; z-index: 1; }
.bonus-progress-head{
            display: flex; justify-content: space-between; align-items: center;
            font-size: 11px; color: var(--text-tertiary); font-weight: 600;
            margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.03em;
        }
.bonus-progress-track{
            position: relative; height: 12px; border-radius: 999px; overflow: visible;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.05);
        }
.bonus-progress-fill{
            height: 100%; border-radius: 999px; min-width: 4px;
            background: linear-gradient(90deg, #D97706, #F59E0B 60%, #FCD34D);
            box-shadow: 0 0 14px rgba(245,158,11,0.45);
            transition: width 600ms var(--ease-smooth);
        }
.bonus-progress-marker{
            position: absolute; top: 50%; transform: translate(-50%, -50%);
            width: 8px; height: 8px; border-radius: 50%;
            background: #FCD34D; border: 2px solid var(--bg-page);
            box-shadow: 0 0 8px rgba(245,158,11,0.7);
        }
/* ─── Daily Bonus Grid ─── */
.bonus-streak-card{ padding: 18px; }
.bonus-streak-days{
            display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
            padding: 2px;
        }
.bonus-streak-item{
            text-align: center; min-width: 0;
            display: flex; flex-direction: column; align-items: center; gap: 5px;
            padding: 12px 4px 10px; border-radius: 12px; position: relative;
            background: var(--hover-bg);
            border: 1px solid var(--border-subtle);
            transition: transform 200ms var(--ease-smooth), border-color 200ms var(--ease-smooth), box-shadow 200ms var(--ease-smooth);
            cursor: default;
        }
.bonus-streak-item:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.bonus-streak-item.milestone{ border-color: rgba(139,92,246,0.35); }
.bonus-streak-item.milestone:hover{ border-color: rgba(139,92,246,0.6); box-shadow: 0 6px 18px rgba(139,92,246,0.18); }
.bonus-streak-item.completed{ background: linear-gradient(180deg, rgba(34,197,94,0.10), rgba(34,197,94,0.02)); border-color: rgba(34,197,94,0.28); }
.bonus-streak-item.completed:hover{ border-color: rgba(34,197,94,0.5); box-shadow: 0 6px 18px rgba(34,197,94,0.15); }
.bonus-streak-item.current{
            background: linear-gradient(180deg, rgba(245,158,11,0.14), rgba(245,158,11,0.02));
            border-color: rgba(245,158,11,0.55);
            box-shadow: 0 0 0 1px rgba(245,158,11,0.25), 0 8px 22px rgba(245,158,11,0.18);
        }
.bonus-streak-item.locked{ opacity: 0.55; }
.bonus-streak-milestone-badge{
            position: absolute; top: -8px; right: -4px; width: 20px; height: 20px;
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #000;
            font-size: 10px; box-shadow: 0 2px 8px rgba(245,158,11,0.4);
        }
.bonus-streak-circle{
            width: 38px; height: 38px; margin: 2px auto 0; position: relative;
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-size: 14px; font-weight: 700;
            transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }
.bonus-streak-item.milestone .bonus-streak-circle{
            background: linear-gradient(135deg, #C084FC, #8B5CF6 60%, #7C3AED) !important;
            color: #fff !important; border: 2px solid rgba(255,255,255,0.25) !important;
            box-shadow: 0 0 14px rgba(139,92,246,0.45);
        }
.bonus-streak-circle.completed{
            background: var(--success) !important; color: #000 !important;
            border: 2px solid rgba(255,255,255,0.3) !important;
            box-shadow: 0 0 14px rgba(34,197,94,0.45);
        }
.bonus-streak-item.milestone .bonus-streak-circle.completed{
            background: linear-gradient(135deg, #22C55E, #16A34A) !important; color: #000 !important;
        }
.bonus-streak-circle.current{
            background: linear-gradient(135deg, #FCD34D, #F59E0B 60%, #D97706) !important; color: #000 !important;
            border: 2px solid rgba(255,255,255,0.4) !important;
            box-shadow: 0 0 18px rgba(245,158,11,0.55);
            transform: scale(1.1);
            animation: bonusCurrentPulse 1.8s ease-in-out infinite;
        }
.bonus-streak-circle.upcoming{
            background: var(--surface-alt) !important; color: var(--text-muted) !important;
            border: 2px solid var(--border-default) !important;
        }
.bonus-streak-circle.locked{
            background: var(--surface-alt) !important; color: var(--text-quaternary) !important;
            border: 2px dashed var(--border-default) !important;
        }
.bonus-streak-circle i{ font-size: 14px; }
@keyframes bonusCurrentPulse{
            0%, 100%{ box-shadow: 0 0 12px rgba(245,158,11,0.35); }
            50%{ box-shadow: 0 0 24px rgba(245,158,11,0.7); }
        }
.bonus-streak-status{ font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.bonus-streak-status.completed{ color: var(--success); }
.bonus-streak-status.current{ color: #FCD34D; }
.bonus-streak-status.locked{ color: var(--text-quaternary); }
.bonus-streak-status.upcoming{ color: var(--text-tertiary); }
.bonus-streak-item.milestone .bonus-streak-status{ color: #C084FC; }
.bonus-streak-amount{
            font-size: 11px; color: var(--text-secondary);
            font-weight: 700; font-family: var(--font-heading);
        }
.bonus-streak-xp{
            font-size: 10px; color: var(--info); font-weight: 600;
            display: inline-flex; align-items: center; gap: 4px;
        }
.bonus-streak-xp i{ font-size: 9px; }
@media (max-width: 768px){
            .bonus-streak-days{ grid-template-columns: repeat(4, 1fr); gap: 7px; }
            .bonus-hero-stats{ gap: 7px; }
            .bonus-hero-stat{ padding: 10px 6px; }
            .bonus-hero-stat-v{ font-size: 17px; }
        }
@media (max-width: 480px){
            .bonus-streak-days{ grid-template-columns: repeat(3, 1fr); gap: 6px; }
        }
/* ─── Faucet Hero ─── */
.faucet-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(14,165,233,0.14), rgba(139,92,246,0.10) 45%, transparent);
            border: 1px solid rgba(14,165,233,0.18);
        }
.faucet-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.faucet-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(14,165,233,0.15); color: #38BDF8;
            border: 1px solid rgba(14,165,233,0.3);
        }
.faucet-hero-title-wrap{ min-width: 0; flex: 1; }
.faucet-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #7DD3FC, var(--info));
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.faucet-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.faucet-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.faucet-hero-badges .dw-level-tag,
.faucet-hero-badges .dw-level-badge,
.faucet-hero-badges .dw-bonus-tag{ padding: 3px 10px; font-size: 11px; gap: 4px; }
.faucet-hero-badges .dw-rank-img{ height: 15px; vertical-align: middle; }
.faucet-hero-stats{
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
            margin-bottom: 14px; position: relative; z-index: 1;
        }
.faucet-hero-stat{
            display: flex; flex-direction: column; align-items: center; gap: 4px;
            padding: 12px 8px; border-radius: 14px; text-align: center;
            background: var(--hero-stat-bg); border: 1px solid var(--hero-stat-border);
            backdrop-filter: blur(8px); min-width: 0;
        }
.faucet-hero-stat-ic{
            width: 32px; height: 32px; border-radius: 10px; display: flex;
            align-items: center; justify-content: center; font-size: 14px; margin-bottom: 2px;
        }
.faucet-hero-stat-ic i{ font-size: 18px; }
.faucet-hero-stat-v{
            font-family: var(--font-heading); font-size: 20px; font-weight: 800;
            color: var(--text-primary); line-height: 1.1; white-space: nowrap;
        }
.faucet-hero-stat-l{
            font-size: 10px; color: var(--text-tertiary); font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.04em;
        }
.faucet-hero-countdown{
            display: flex; align-items: center; justify-content: center; gap: 8px;
            padding: 10px 14px; border-radius: 12px; margin-bottom: 14px;
            background: rgba(14,165,233,0.08); border: 1px solid rgba(14,165,233,0.22);
            color: var(--info); font-size: 13px; font-weight: 600; position: relative; z-index: 1;
        }
.faucet-hero-countdown i{ font-size: 12px; }
.faucet-hero-countdown-t{
            font-family: var(--font-heading); font-weight: 700; color: #7DD3FC; font-size: 14px;
        }
.faucet-hero-countdown.ready{
            background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.25);
            color: var(--success);
        }
.faucet-hero-countdown.ready .faucet-hero-countdown-t{ color: var(--success); }
.faucet-progress{ position: relative; z-index: 1; }
.faucet-progress-head{
            display: flex; justify-content: space-between; align-items: center;
            font-size: 11px; color: var(--text-tertiary); font-weight: 600;
            margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.03em;
        }
.faucet-progress-track{
            height: 8px; border-radius: var(--radius-full); overflow: hidden;
            background: var(--border-default); position: relative;
        }
.faucet-progress-fill{
            height: 100%; border-radius: var(--radius-full);
            background: linear-gradient(90deg, var(--info), #38BDF8);
            transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
        }
.faucet-claim-card{ text-align: center; padding: 24px 20px; }
.faucet-boosters-bar{ display: flex; align-items: center; gap: 10px; margin: 14px 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--bg-elevated); border: 1px solid var(--border); flex-wrap: wrap; }
.faucet-boosters-bar-label{ display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.faucet-boosters-bar-label i{ color: var(--primary); font-size: 12px; }
.faucet-boosters-chips{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.faucet-booster-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; background: color-mix(in srgb, var(--fbc) 8%, transparent); border: 1px solid color-mix(in srgb, var(--fbc) 25%, transparent); font-size: 11px; font-weight: 600; color: var(--text-primary); line-height: 1; }
.faucet-booster-chip-ic{ display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--fbc) 18%, transparent); color: var(--fbc); font-size: 9px; flex-shrink: 0; }
.faucet-booster-chip-ic img{ width: 10px; height: 10px; object-fit: contain; }
.faucet-booster-chip-bonus{ color: var(--fbc); font-weight: 700; }
.faucet-booster-chip-name{ opacity: 0.9; }
.faucet-booster-chip-meta{ padding: 2px 6px; border-radius: 10px; background: color-mix(in srgb, var(--fbc) 18%, transparent); color: var(--fbc); font-size: 10px; font-weight: 700; }
.faucet-next-reward{ color: var(--text-secondary); font-size: 13px; margin-bottom: 16px; }
.faucet-next-reward strong{ color: var(--success); font-weight: 700; }
.faucet-claim-row{ display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
@media (max-width: 768px){
            .faucet-hero-stats{ gap: 7px; }
            .faucet-hero-stat{ padding: 10px 6px; }
            .faucet-hero-stat-v{ font-size: 17px; }
            .faucet-hero{ padding: 20px 14px; }
        }
@media (max-width: 480px){
            .faucet-hero-stats{ grid-template-columns: repeat(3, 1fr); gap: 6px; }
            .faucet-hero-countdown{ font-size: 12px; }
        }
/* ─── Daily Bonus Claim Button ─── */
.bonus-claim-btn{
            width: 100%; padding: 18px; margin-top: 16px;
            font-size: 17px; font-weight: 800; font-family: var(--font-heading);
            border: none; border-radius: var(--radius-lg); cursor: pointer;
            transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: 0.03em; position: relative; overflow: hidden;
            box-shadow: 0 8px 24px rgba(0,0,0,0.25);
        }
.bonus-claim-btn:not(:disabled):hover{
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(245,158,11,0.35);
        }
.bonus-claim-btn:not(:disabled):active{ transform: translateY(0); }
.bonus-claim-btn:disabled{ cursor: not-allowed; transform: none !important; }
.bonus-claim-btn.ready{
            background: linear-gradient(135deg, #FCD34D, #F59E0B 55%, #D97706);
            color: #000; background-size: 140% 140%;
            animation: bonusBtnShine 2.4s linear infinite;
        }
.bonus-claim-btn.ready:hover{ filter: brightness(1.08); }
.bonus-claim-btn.claimed{
            background: linear-gradient(135deg, #4ADE80, #22C55E 55%, #16A34A);
            color: #000;
        }
.bonus-claim-btn.locked{
            background: linear-gradient(135deg, var(--bg-elevated), var(--surface-alt));
            color: var(--text-muted);
        }
.bonus-claim-btn.processing{
            background: linear-gradient(135deg, var(--bg-elevated), var(--surface-alt));
            color: var(--text-primary);
        }
.bonus-claim-btn.errored{
            background: linear-gradient(135deg, #F87171, var(--danger));
            color: #fff;
        }
@keyframes bonusBtnShine{
            0%{ background-position: 0% 50%; }
            50%{ background-position: 100% 50%; }
            100%{ background-position: 0% 50%; }
        }
/* Levels / Ranks specific */
.levels-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(245,158,11,0.16), rgba(139,92,246,0.10) 45%, transparent);
            border: 1px solid rgba(245,158,11,0.18);
            
        }
.levels-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 14px; position: relative; z-index: 1; }
.levels-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(245,158,11,0.15); color: #FBBF24; overflow: hidden;
            border: 1px solid rgba(245,158,11,0.3);
        }
.levels-hero-icon i{ color: #FBBF24; }
.levels-hero-rank-img{ width: 100%; height: 100%; object-fit: cover; }
.levels-hero-title-wrap{ min-width: 0; }
.levels-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #FCD34D, #F59E0B);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.levels-hero-title-rank{ height: 28px; vertical-align: middle; }
.levels-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.levels-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; position: relative; z-index: 1; }
.levels-hero-badges .dw-level-tag,
.levels-hero-badges .dw-bonus-tag{ padding: 3px 10px; font-size: 11px; gap: 4px; }
.levels-hero-xp{ position: relative; z-index: 1; }
.levels-xp-row{
            display: flex; justify-content: space-between;
            font-size: 11px; color: var(--text-tertiary); margin-bottom: 6px;
        }
.levels-progress-track{
            height: 8px; background: var(--border-default);
            border-radius: var(--radius-full); overflow: hidden;
        }
.levels-progress-fill{
            height: 100%; border-radius: var(--radius-full);
            background: linear-gradient(90deg, var(--primary), #E67E00);
            transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
        }
.levels-ladder-header{
            font-weight: 700; font-size: 15px; margin-bottom: 12px;
            color: var(--text-primary); display: flex; align-items: center; gap: 8px;
        }
.levels-ladder-header i{ color: var(--primary); font-size: 14px; }
.levels-row{
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
            padding: 12px 14px; margin-bottom: 8px;
            background: var(--card-bg);
            backdrop-filter: blur(12px);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-lg);
            transition: all 200ms ease;
        }
.levels-row:hover{ border-color: rgba(255,255,255,0.08); }
.levels-row.current{
            border-color: var(--primary);
            box-shadow: 0 0 0 1px rgba(245,158,11,0.08), 0 8px 22px rgba(245,158,11,0.08);
        }
.levels-row.locked{ opacity: 0.72; }
.levels-row-num{
            flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
            display: flex; align-items: center; justify-content: center;
            font-family: var(--font-heading); font-size: 13px; font-weight: 800;
            background: var(--hover-bg); color: var(--text-tertiary); border: 1px solid var(--border-default);
        }
.levels-row.current .levels-row-num{ background: rgba(245,158,11,0.14); color: var(--primary); border-color: rgba(245,158,11,0.3); }
.levels-row-left{
            display: flex; align-items: center; gap: 12px;
            min-width: 0; flex: 1;
        }
.levels-row-icon{
            flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 15px; background: var(--hover-bg); overflow: hidden;
        }
.levels-row.current .levels-row-icon{ background: rgba(245,158,11,0.12); color: var(--primary); }
.levels-row.locked .levels-row-icon{ color: var(--text-muted); }
.levels-row-icon img{ width: 100%; height: 100%; object-fit: cover; }
.levels-row-name{
            font-weight: 600; font-size: 14px; color: var(--text-primary);
        }
.levels-row-rank-img{ height: 22px; vertical-align: middle; }
.rank-name-img{ height: 24px; vertical-align: middle; border-radius: 4px; }
.levels-row-desc{
            font-size: 11px; color: var(--text-tertiary); margin-top: 2px;
            line-height: 1.3;
        }
.levels-row-right{
            display: flex; align-items: center; gap: 8px; flex-shrink: 0;
        }
.levels-row-bonus{
            font-size: 11px; color: var(--success); font-weight: 700;
            padding: 3px 8px; border-radius: var(--radius-full);
            background: rgba(34,197,94,0.12);
        }
.levels-row-status{
            font-size: 11px; font-weight: 600; padding: 4px 10px;
            border-radius: var(--radius-full); white-space: nowrap;
        }
.levels-row-status.unlocked{
            background: rgba(34,197,94,0.12); color: var(--success);
        }
.levels-row-status.current-status{
            background: rgba(245,158,11,0.12); color: var(--warning);
        }
.levels-row-status.locked{
            background: rgba(255,255,255,0.04); color: var(--text-muted);
        }
.levels-empty{ text-align: center; padding: 40px 20px; }
.levels-empty i{ font-size: 36px; color: var(--text-quaternary); margin-bottom: 12px; display: block; }
.levels-empty p{ color: var(--text-tertiary); font-size: 14px; }
@media (max-width: 480px){
    .levels-row{ padding: 10px 12px; gap: 8px; }
    .levels-row-num{ width: 26px; height: 26px; font-size: 12px; }
    .levels-row-icon{ width: 28px; height: 28px; }
    .levels-row-right{ flex-direction: column; align-items: flex-end; gap: 4px; }
    .levels-hero-title{ font-size: 19px; }
}
/* Referrals specific */
        .referral-main-card{ text-align: center; }
.ref-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(16,185,129,0.16), rgba(139,92,246,0.10) 45%, transparent);
            border: 1px solid rgba(16,185,129,0.18);
            
        }
.ref-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 14px; position: relative; z-index: 1; }
.ref-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(16,185,129,0.15); color: #34D399;
            border: 1px solid rgba(16,185,129,0.3);
        }
.ref-hero-title-wrap{ min-width: 0; flex: 1; }
.ref-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #6EE7B7, #10B981);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.ref-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.ref-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; position: relative; z-index: 1; }
.ref-hero-badge{
            display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
            border-radius: var(--radius-full); font-size: 11px; font-weight: 700;
        }
.ref-hero-badge i{ font-size: 10px; }
.ref-hero-badge.emerald{ background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); color: #6EE7B7; }
.ref-hero-badge.amber{ background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); color: #FCD34D; }
.ref-hero .faucet-hero-stats{ margin-bottom: 0; }
@media (max-width: 640px){
            .ref-hero-title{ font-size: 19px; }
        }
.wheel-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(14,165,233,0.14), rgba(139,92,246,0.10) 45%, transparent);
            border: 1px solid rgba(14,165,233,0.18);
            
        }
.wheel-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.wheel-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(14,165,233,0.15); color: #38BDF8;
            border: 1px solid rgba(14,165,233,0.3);
        }
.wheel-hero-title-wrap{ min-width: 0; flex: 1; }
.wheel-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #7DD3FC, var(--info));
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.wheel-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.wheel-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; position: relative; z-index: 1; }
.wheel-hero-badge{
            display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
            border-radius: var(--radius-full); font-size: 11px; font-weight: 700;
        }
.wheel-hero-badge i{ font-size: 10px; }
.wheel-hero-badge.blue{ background: rgba(14,165,233,0.12); border: 1px solid rgba(14,165,233,0.3); color: #7DD3FC; }
.wheel-hero .faucet-hero-stats{ margin-bottom: 0; }
@media (max-width: 640px){
            .wheel-hero-title{ font-size: 19px; }
        }
.referral-link-group{
            display: flex; gap: 8px; margin-top: 16px;
        }
.referral-link-group input{
            flex: 1; padding: 10px 14px; border-radius: var(--radius-md);
            border: 1px solid var(--border-default); background: var(--surface-alt);
            color: var(--text-primary); font-size: 12px; cursor: default;
            font-family: monospace;
        }
.referral-link-group input:focus{ outline: none; border-color: var(--primary); }
.referral-banner-section{ }
.banner-embed-modal{ max-width: 640px !important; }
.referral-banner-section .banner-header{
            display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
        }
.referral-banner-section .banner-header i{ color: var(--warning); }
.referral-banner-section .banner-header span{ font-weight: 600; font-size: 14px; }
.referral-banner-section .banner-sub{
            font-size: 12px; color: var(--text-secondary); margin-bottom: 12px;
        }
.referral-size-tabs{
            display: flex; gap: 6px; margin-bottom: 12px;
        }
.referral-size-tab{
            padding: 6px 14px; border-radius: var(--radius-md); font-size: 12px; font-weight: 600;
            border: none; cursor: pointer; transition: all 150ms;
            background: var(--border-default); color: var(--text-secondary);
        }
.referral-size-tab.active{
            background: var(--primary); color: #000;
        }
.referral-size-tab:hover:not(.active){
            background: var(--surface-alt);
        }
.referral-banner-grid{
            display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
        }
.referral-banner-item{
            border-radius: var(--radius-md); overflow: hidden; cursor: pointer; position: relative;
            transition: transform 200ms ease;
        }
.referral-banner-item:hover{ transform: scale(1.02); }
.referral-banner-item img{
            width: 100%; display: block; background: var(--surface-alt);
            object-fit: contain; max-height: 180px;
        }
.referral-banner-item .banner-overlay{
            position: absolute; inset: 0; background: rgba(0,0,0,0);
            transition: background 200ms ease;
            display: flex; align-items: center; justify-content: center;
        }
.referral-banner-item:hover .banner-overlay{
            background: rgba(0,0,0,0.3);
        }
.referral-banner-item .banner-dl{
            color: #fff; font-size: 11px; padding: 4px 12px; border-radius: var(--radius-sm);
            background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 200ms;
        }
.referral-banner-item:hover .banner-dl{ opacity: 1; }
.referral-users-section{ }
.referral-users-section .users-header{
            display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--border-default);
        }
.referral-users-section .users-header i{ color: var(--info); }
.referral-users-section .users-header span{ font-weight: 600; font-size: 14px; }
.referral-users-section .table-wrap{ overflow-x: auto; }
.referral-users-section .table-wrap table{ width: 100%; border-collapse: collapse; font-size: 13px; }
.referral-users-section .table-wrap th{ text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--border-default); color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.referral-users-section .table-wrap td{ padding: 10px 16px; border-bottom: 1px solid rgba(30,30,42,0.5); color: var(--text-primary); }
.referral-users-section .table-wrap tbody tr:hover td{ background: rgba(26,26,36,0.6); }
.referral-users-section .table-wrap tbody tr:last-child td{ border-bottom: none; }
.referral-users-section .text-right{ text-align: right; }
.referral-users-section .truncate{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.referral-empty{
            font-size: 13px; color: var(--text-muted); text-align: center;
            padding: 24px;
        }
/* PTC Ads specific */
        .ptc-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(16,185,129,0.16), rgba(139,92,246,0.10) 45%, transparent);
            border: 1px solid rgba(16,185,129,0.18);
            
        }
.ptc-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.ptc-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(16,185,129,0.15); color: #34D399;
            border: 1px solid rgba(16,185,129,0.3);
        }
.ptc-hero-title-wrap{ min-width: 0; flex: 1; }
.ptc-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #6EE7B7, var(--success));
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.ptc-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.ptc-tab-bar{
            display: flex; gap: 8px; margin-bottom: 16px;
        }
.ptc-tab-btn{
            flex: 1; padding: 10px 16px; border-radius: var(--radius-full);
            font-family: var(--font-heading); font-size: 12px; font-weight: 600;
            border: 1px solid var(--border-default); cursor: pointer;
            transition: all 200ms ease;
            background: var(--surface-alt); color: var(--text-secondary);
            white-space: nowrap;
        }
.ptc-tab-btn i{ margin-right: 6px; font-size: 11px; }
.ptc-tab-btn:hover:not(.active){ border-color: var(--border-strong); color: var(--text-primary); transform: translateY(-1px); }
.ptc-tab-btn.active{
            background: var(--primary); color: #000; border-color: transparent;
            box-shadow: 0 2px 12px rgba(245,158,11,0.25);
        }
.ptc-ad-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ptc-ad-card{
            position: relative; padding: 14px; border-radius: var(--radius-lg); cursor: pointer;
            background: var(--card-bg); backdrop-filter: blur(12px);
            border: 1px solid var(--border-default);
            transition: all 200ms ease; overflow: hidden; min-width: 0;
        }
.ptc-ad-card:hover{ transform: translateY(-2px); border-color: var(--hover-border); box-shadow: var(--shadow-md); }
.ptc-ad-card.website{ }
.ptc-ad-card.youtube{ }
.ptc-ad-top{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ptc-ad-thumb{
            width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden; background: var(--surface-alt);
        }
.ptc-ad-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.ptc-ad-thumb-fb{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.ptc-ad-thumb-fb.yt{ background: rgba(255,0,0,0.1); }
.ptc-ad-thumb-fb.yt i{ color: #FF0000; font-size: 22px; }
.ptc-ad-reward{
            margin-left: auto; font-size: 12px; font-weight: 700; font-family: var(--font-heading);
            padding: 4px 10px; border-radius: var(--radius-full); white-space: nowrap;
        }
.ptc-ad-reward.website{ background: rgba(34,197,94,0.12); color: var(--success); }
.ptc-ad-reward.youtube{ background: rgba(255,0,0,0.1); color: #FF0000; }
.ptc-ad-badges{ margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.ptc-ad-badges .ptc-ad-reward{ margin-left: 0; }
.ptc-ad-xp{ font-size: 11px; font-weight: 700; font-family: var(--font-heading); padding: 4px 9px; border-radius: var(--radius-full); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; background: rgba(245,158,11,0.12); color: var(--brand-500); }
.ptc-ad-xp i{ font-size: 9px; }
.ptc-ad-title{ font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptc-ad-desc{ font-size: 11px; color: var(--text-tertiary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptc-ad-foot{ display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-default); }
.ptc-ad-dur{ font-size: 11px; color: var(--text-secondary); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.ptc-ad-dur i{ font-size: 10px; opacity: 0.7; }
.ptc-ad-go{
            width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            background: rgba(245,158,11,0.14); color: var(--primary); font-size: 11px;
            transition: all 200ms ease;
        }
.ptc-ad-card:hover .ptc-ad-go{ background: var(--primary); color: #000; transform: scale(1.05); }
.ptc-empty{ text-align: center; padding: 40px 20px; }
.ptc-empty i{ font-size: 36px; color: var(--text-quaternary); margin-bottom: 12px; display: block; }
.ptc-empty p{ color: var(--text-tertiary); font-size: 14px; }
@media (max-width: 1100px){
            .ptc-ad-grid{ grid-template-columns: repeat(2, 1fr); }
        }
@media (max-width: 640px){
            .ptc-ad-grid{ grid-template-columns: 1fr; }
            .ptc-hero-title{ font-size: 19px; }
        }
/* Shortlinks specific */
        .sl-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(139,92,246,0.16), rgba(14,165,233,0.10) 45%, transparent);
            border: 1px solid rgba(139,92,246,0.18);
            
        }
.sl-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.sl-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(139,92,246,0.15); color: #A78BFA;
            border: 1px solid rgba(139,92,246,0.3);
        }
.sl-hero-title-wrap{ min-width: 0; flex: 1; }
.sl-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #C4B5FD, #8B5CF6);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.sl-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.sl-info-bar{
            display: flex; align-items: center; gap: 8px;
            padding: 10px 14px; margin-bottom: 16px;
            background: var(--primary-light); border: 1px solid rgba(245,158,11,0.2);
            border-radius: 12px; color: var(--text-secondary); font-size: 11px;
        }
.sl-info-bar i{ color: var(--warning); font-size: 11px; }
.sl-link-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sl-link-card{
            position: relative; padding: 14px; border-radius: var(--radius-lg); cursor: pointer;
            background: var(--card-bg); backdrop-filter: blur(12px);
            border: 1px solid var(--border-default);
            transition: all 200ms ease;
        }
.sl-link-card:not(.finished):hover{ transform: translateY(-2px); border-color: var(--hover-border); box-shadow: var(--shadow-md); }
.sl-link-card.finished{ opacity: 0.45; cursor: default; }
.sl-link-top{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sl-link-thumb{
            width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: var(--surface-alt); overflow: hidden;
        }
.sl-link-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.sl-link-thumb-fb{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.sl-link-badge{
            margin-left: auto; font-size: 11px; font-weight: 700; font-family: var(--font-heading);
            padding: 3px 9px; border-radius: var(--radius-full); white-space: nowrap;
        }
.sl-link-badge.available{ background: var(--success-light); color: var(--success); }
.sl-link-badge.finished{ background: var(--surface-alt); color: var(--text-muted); }
.sl-link-name{ font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-link-reward{ font-size: 14px; font-weight: 700; font-family: var(--font-heading); margin-top: 3px; }
.sl-link-reward-row{ display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.sl-link-reward-row .sl-link-reward{ margin-top: 0; }
.sl-link-xp{ font-size: 10px; font-weight: 700; font-family: var(--font-heading); padding: 3px 8px; border-radius: var(--radius-full); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; background: rgba(245,158,11,0.12); color: var(--brand-500); }
.sl-link-xp i{ font-size: 8px; }
.sl-link-reward.available{ color: var(--success); background: rgba(34,197,94,0.12); padding: 3px 8px; border-radius: var(--radius-full); display: inline-flex; align-items: center; font-size: 10px; }
.sl-link-reward.finished{ color: var(--text-muted); }
.sl-link-foot{ display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-default); }
.sl-link-meta{ display: flex; align-items: center; gap: 8px; min-width: 0; }
.sl-link-steps{ font-size: 11px; color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 5px; }
.sl-link-steps i{ font-size: 10px; opacity: 0.7; }
.sl-link-diff{ font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); text-transform: capitalize; }
.sl-link-diff-easy{ background: rgba(16,185,129,0.12); color: #10B981; }
.sl-link-diff-medium{ background: rgba(245,158,11,0.12); color: #F59E0B; }
.sl-link-diff-hard{ background: rgba(239,68,68,0.12); color: #EF4444; }
.sl-link-go{
            width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            background: rgba(139,92,246,0.14); color: #8B5CF6; font-size: 11px;
            transition: all 200ms ease; flex-shrink: 0;
        }
.sl-link-card:not(.finished):hover .sl-link-go{ background: #8B5CF6; color: #fff; transform: scale(1.05); }
.sl-link-check{ color: var(--text-quaternary); font-size: 14px; flex-shrink: 0; }
.sl-section-header{
            display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
        }
.sl-section-dot{
            width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
        }
.sl-section-dot.green{ background: var(--success); }
.sl-section-dot.gray{ background: var(--text-quaternary); }
.sl-section-label{
            font-weight: 700; font-size: 15px; color: var(--text-primary);
        }
.sl-section-count{
            font-size: 11px; color: var(--text-tertiary); font-weight: 600;
        }
@media (max-width: 1100px){
            .sl-link-grid{ grid-template-columns: repeat(2, 1fr); }
        }
@media (max-width: 640px){
            .sl-link-grid{ grid-template-columns: 1fr; }
            .sl-hero-title{ font-size: 19px; }
        }
/* Torox Widget */
        .torox-widget-container{
            margin-top: 24px;
        }
.torox-widget-container .glass-card{
            padding: 0;
        }
.sl-empty{ text-align: center; padding: 32px 20px; }
.sl-empty i{ font-size: 32px; color: var(--text-quaternary); margin-bottom: 10px; display: block; }
.sl-empty p{ color: var(--text-tertiary); font-size: 13px; }
/* My Ads specific */
        .myads-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(0,212,170,0.14), rgba(139,92,246,0.08) 45%, transparent);
            border: 1px solid rgba(0,212,170,0.2);
            
        }
.myads-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.myads-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(13,148,136,0.15); color: #5EEAD4;
            border: 1px solid rgba(13,148,136,0.3);
        }
.myads-hero-title-wrap{ min-width: 0; flex: 1; }
.myads-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #99F6E4, #00D4AA);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.myads-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.myads-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; position: relative; z-index: 1; }
.myads-hero-badge{
            display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
            border-radius: var(--radius-full); font-size: 11px; font-weight: 700;
        }
.myads-hero-badge i{ font-size: 10px; }
.myads-hero-badge.teal{ background: rgba(0,212,170,0.12); border: 1px solid rgba(0,212,170,0.3); color: #5EEAD4; }
.myads-hero .faucet-hero-stats{ margin-bottom: 0; }
.myads-chip{
            display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
            border-radius: var(--radius-full); font-size: 11px; font-weight: 600;
            background: var(--surface-alt); border: 1px solid var(--border-default);
            color: var(--text-secondary);
        }
.myads-chip i{ font-size: 10px; color: var(--text-tertiary); }
.myads-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.myads-grid .card{ margin-bottom: 0; }
@media (max-width: 1100px){
            .myads-grid{ grid-template-columns: repeat(2, 1fr); }
        }
@media (max-width: 640px){
            .myads-grid{ grid-template-columns: 1fr; }
        }
.badge-purple{ background: rgba(139,92,246,0.12); color: #A78BFA; border: 1px solid rgba(139,92,246,0.3); }
@media (max-width: 640px){
            .myads-hero-title{ font-size: 19px; }
        }
/* Advertise specific */
        .adv-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(0,212,170,0.14), rgba(139,92,246,0.08) 45%, transparent);
            border: 1px solid rgba(0,212,170,0.2);
            
        }
.adv-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.adv-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(13,148,136,0.15); color: #5EEAD4;
            border: 1px solid rgba(13,148,136,0.3);
        }
.adv-hero-title-wrap{ min-width: 0; flex: 1; }
.adv-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #99F6E4, #00D4AA);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.adv-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.adv-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; position: relative; z-index: 1; }
.adv-hero-badge{
            display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
            border-radius: var(--radius-full); font-size: 11px; font-weight: 700;
        }
.adv-hero-badge i{ font-size: 10px; }
.adv-hero-badge.teal{ background: rgba(0,212,170,0.12); border: 1px solid rgba(0,212,170,0.3); color: #5EEAD4; }
.adv-hero .faucet-hero-stats{ margin-bottom: 0; }
.adv-tab-bar{
            display: flex; gap: 8px; margin-bottom: 16px;
            background: var(--surface-alt); border: 1px solid var(--border-default);
            border-radius: var(--radius-md); padding: 3px;
        }
.adv-tab-btn{
            flex: 1; padding: 10px 16px; font-size: 13px; font-weight: 500;
            text-align: center; border-radius: var(--radius-sm); border: none;
            cursor: pointer; transition: all 200ms ease;
            background: transparent; color: var(--text-secondary);
        }
.adv-tab-btn i{ margin-right: 6px; font-size: 11px; }
.adv-tab-btn:hover:not(.active){ background: var(--hover-bg); }
.adv-tab-btn.active{ background: linear-gradient(135deg, #99F6E4, #00D4AA); color: #042F2E; font-weight: 700; box-shadow: 0 2px 12px rgba(0,212,170,0.3); }
.adv-rules-btn{ flex: 0 0 auto; padding: 10px 16px; font-size: 13px; font-weight: 500; text-align: center; border-radius: var(--radius-sm); border: 1px solid var(--border-default); cursor: pointer; transition: all 200ms ease; background: transparent; color: var(--text-secondary); }
.adv-rules-btn i{ margin-right: 6px; font-size: 11px; }
.adv-rules-btn:hover{ background: var(--hover-bg); }
.adv-note{ font-size: 13px; background: rgba(0,212,170,0.06); border: 1px solid rgba(0,212,170,0.15); color: var(--text-secondary); }
.adv-tier-info{ padding: 14px; border-radius: var(--radius-md); background: rgba(0,212,170,0.07); border: 1px solid rgba(0,212,170,0.18); }
.adv-cost-box{ display: flex; align-items: center; justify-content: space-between; padding: 14px; border-radius: var(--radius-md); background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.18); }
.adv-buy-btn{
            width: 100%; padding: 13px; border: none; border-radius: var(--radius-lg);
            font-family: var(--font-heading); font-size: 15px; font-weight: 700; cursor: pointer;
            background: linear-gradient(135deg, #99F6E4, #00D4AA); color: #042F2E;
            box-shadow: 0 6px 20px rgba(0,212,170,0.35);
            transition: transform 200ms ease, box-shadow 200ms ease;
        }
.adv-buy-btn:hover:not(:disabled){ transform: translateY(-1px); box-shadow: 0 8px 26px rgba(0,212,170,0.45); }
.adv-buy-btn:disabled{ opacity: 0.5; cursor: not-allowed; }
@media (max-width: 640px){
            .adv-hero-title{ font-size: 19px; }
        }
/* Withdraw specific */
        .withdraw-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(244,63,94,0.16), rgba(139,92,246,0.10) 45%, transparent);
            border: 1px solid rgba(244,63,94,0.18);
            
        }
.withdraw-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.withdraw-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(244,63,94,0.15); color: #FB7185;
            border: 1px solid rgba(244,63,94,0.3);
        }
.withdraw-hero-title-wrap{ min-width: 0; flex: 1; }
.withdraw-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #FDA4AF, #F43F5E);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.withdraw-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.withdraw-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; position: relative; z-index: 1; }
.withdraw-hero-badge{
            display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
            border-radius: var(--radius-full); font-size: 11px; font-weight: 700;
        }
.withdraw-hero-badge i{ font-size: 10px; }
.withdraw-hero-badge.rose{ background: rgba(244,63,94,0.12); border: 1px solid rgba(244,63,94,0.3); color: #FDA4AF; }
.withdraw-hero .faucet-hero-stats{ margin-bottom: 0; }
@media (max-width: 640px){
            .withdraw-hero-title{ font-size: 19px; }
        }
        .wd-tab-bar{
            display: flex; margin-bottom: 16px;
            background: var(--surface-alt); border: 1px solid var(--border-default);
            border-radius: var(--radius-md); padding: 3px;
        }
.wd-tab-btn{
            flex: 1; padding: 10px 16px; font-size: 13px; font-weight: 500;
            text-align: center; border-radius: var(--radius-sm); border: none;
            cursor: pointer; transition: all 200ms ease;
            background: transparent; color: var(--text-secondary);
        }
.wd-tab-btn.active{ background: var(--primary); color: #000; font-weight: 600; }
.wd-card-header{
            display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
        }
.wd-card-header .wd-card-icon{
            width: 32px; height: 32px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            background: var(--primary-light); flex-shrink: 0;
        }
.wd-card-header .wd-card-icon i{ color: var(--primary); font-size: 13px; }
.wd-card-header span{ font-weight: 600; font-size: 14px; }
.wd-label{ font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; display: block; }
.wd-currency-grid{
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px;
        }
@media (max-width: 1100px){.wd-currency-grid{ grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 640px){.wd-currency-grid{ grid-template-columns: 1fr; }}
.wd-currency-card{
            padding: 12px; border-radius: var(--radius-md); cursor: pointer;
            transition: all 200ms ease;
        }
.wd-currency-card.selected{
            background: var(--primary-light); border: 2px solid var(--primary);
        }
.wd-currency-card:not(.selected){
            background: var(--card-bg); border: 1px solid var(--border-default);
        }
.wd-currency-card:hover:not(.selected){ border-color: var(--text-quaternary); }
.wd-currency-card .wd-cc-top{
            display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
        }
.wd-currency-card .wd-cc-name{
            display: inline-flex; align-items: center; gap: 4px;
        }
.wd-currency-card .wd-cc-name img{
            width: 18px; height: 18px; border-radius: 50%; object-fit: contain;
        }
.wd-currency-card .wd-cc-name span{ font-weight: 600; font-size: 14px; }
.wd-currency-card .wd-cc-badge{
            font-size: 10px; padding: 2px 10px; border-radius: var(--radius-full);
            font-weight: 500;
        }
.wd-currency-card .wd-cc-badge.instant{ background: var(--success-light); color: var(--success); }
.wd-currency-card .wd-cc-badge.manual{ background: var(--warning-light); color: var(--warning); }
.wd-currency-card .wd-cc-rate{
            display: flex; align-items: center; justify-content: space-between; font-size: 12px;
        }
.wd-currency-card .wd-cc-rate span:first-child{ color: var(--text-secondary); }
.wd-currency-card .wd-cc-rate span:last-child{ color: var(--text-primary); font-weight: 500; }
.wd-currency-card .wd-cc-market{
            display: flex; align-items: center; justify-content: space-between;
            font-size: 11px; margin-top: 4px;
        }
.wd-currency-card .wd-cc-chg-badge{
            display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--radius-full);
            font-size: 10px; font-weight: 700; font-family: var(--font-heading); letter-spacing: 0.02em;
            background: var(--surface-alt); color: var(--text-secondary);
        }
.wd-currency-card .wd-cc-chg-badge.up{ background: rgba(34,197,94,0.12); color: var(--success); }
.wd-currency-card .wd-cc-chg-badge.down{ background: rgba(239,68,68,0.12); color: var(--danger); }
.wd-currency-card .wd-cc-vol{ color: var(--text-secondary); font-size: 10px; font-weight: 500; }
.wd-currency-card .wd-cc-wallet{
            display: flex; align-items: center; justify-content: space-between;
            font-size: 11px; margin-top: 6px;
        }
.wd-currency-card .wd-cc-wallet span:first-child{ color: var(--text-muted); }
.wd-currency-card .wd-cc-wallet span:last-child{ color: var(--text-secondary); }
.wd-currency-card .wd-cc-bar{
            margin-top: 6px; height: 3px; border-radius: var(--radius-full);
            background: rgba(255,255,255,0.04); overflow: hidden;
        }
.wd-currency-card .wd-cc-bar-fill{
            height: 100%; border-radius: var(--radius-full);
        }
.wd-currency-card .wd-cc-empty{
            display: inline-flex; align-items: center; justify-content: center; gap: 4px;
            font-size: 10.5px; font-weight: 600; color: var(--text-secondary);
            text-align: center; margin-top: 6px; padding: 3px 8px;
            border-radius: var(--radius-full); background: var(--surface-alt);
            border: 1px solid var(--border-default);
            position: relative; cursor: help; width: fit-content; margin-left: auto; margin-right: auto;
        }
.wd-currency-card .wd-cc-empty::before,
.wd-currency-card .wd-cc-empty::after{ position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 60; }
.wd-currency-card .wd-cc-empty::after{ content: attr(data-tooltip); bottom: calc(100% + 10px); background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); font-size: 11px; font-weight: 500; line-height: 1.4; padding: 8px 12px; border-radius: 8px; white-space: normal; width: 190px; box-shadow: var(--shadow-lg); }
.wd-currency-card .wd-cc-empty::before{ content: ''; bottom: calc(100% + 5px); border: 5px solid transparent; border-top-color: var(--bg-elevated); }
.wd-currency-card .wd-cc-empty:hover::before,
.wd-currency-card .wd-cc-empty:hover::after{ opacity: 1; visibility: visible; }
.wd-currency-card .wd-cc-empty:hover::after{ transform: translateX(-50%) translateY(-2px); }
.wd-currency-card .wd-cc-empty:hover::before{ transform: translateX(-50%); }
.wd-input-wrap{ margin-bottom: 12px; }
.wd-input-wrap input, .wd-input-wrap select, .wd-input-wrap textarea{
            width: 100%; padding: 10px 14px; border-radius: var(--radius-md);
            border: 1px solid var(--border-default); background: var(--surface-alt);
            color: var(--text-primary); font-size: 13px; transition: border-color 200ms;
            box-sizing: border-box;
        }
.wd-input-wrap input:focus, .wd-input-wrap select:focus, .wd-input-wrap textarea:focus{
            outline: none; border-color: var(--primary);
        }
.wd-input-wrap input::placeholder{ color: var(--text-quaternary); }
.wd-input-hint{ font-size: 11px; margin-top: 4px; color: var(--text-muted); }
.wd-info-row{
            display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-secondary); margin-bottom: 16px;
        }
.wd-info-row span{ white-space: nowrap; }
.wd-info-row strong{ color: var(--text-primary); }
.wd-gateway-card{
            padding: 12px 14px; border-radius: var(--radius-md); cursor: pointer;
            transition: all 200ms ease; margin-bottom: 8px;
        }
.wd-gateway-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.wd-gateway-grid .wd-gateway-card{ margin-bottom: 0; }
@media (max-width: 1100px){ .wd-gateway-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .wd-gateway-grid{ grid-template-columns: 1fr; } }
.wd-gateway-card.selected{
            background: var(--primary-light); border: 2px solid var(--primary);
        }
.wd-gateway-card:not(.selected){
            background: var(--card-bg); border: 1px solid var(--border-default);
        }
.wd-gateway-card:hover:not(.selected){ border-color: var(--text-quaternary); }
.wd-gateway-card .wd-gw-top{
            display: flex; align-items: center; justify-content: space-between;
        }
.wd-gateway-card .wd-gw-name{ font-weight: 600; font-size: 13px; }
.wd-gateway-card .wd-gw-min{ font-size: 12px; color: var(--text-secondary); }
.wd-gateway-card .wd-gw-meta{ font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.wd-gateway-card .wd-gw-inst{ font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.wd-gateway-card .wd-gw-row{ display: flex; align-items: center; gap: 10px; }
.wd-gateway-card .wd-gw-info{ flex: 1; min-width: 0; }
.wd-gw-icon{ width: 32px; height: 32px; border-radius: 8px; object-fit: contain; background: var(--bg-secondary); padding: 3px; flex-shrink: 0; }
.wd-gw-icon-placeholder{ width: 32px; height: 32px; border-radius: 8px; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; color: var(--text-tertiary); }
/* Deposit specific */
.deposit-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(34,197,94,0.16), rgba(139,92,246,0.10) 45%, transparent);
            border: 1px solid rgba(34,197,94,0.18);
            
        }
.deposit-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.deposit-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(34,197,94,0.15); color: #4ADE80;
            border: 1px solid rgba(34,197,94,0.3);
        }
.deposit-hero-title-wrap{ min-width: 0; flex: 1; }
.deposit-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #86EFAC, #22C55E);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.deposit-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.deposit-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; position: relative; z-index: 1; }
.deposit-hero-badge{
            display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
            border-radius: var(--radius-full); font-size: 11px; font-weight: 700;
        }
.deposit-hero-badge i{ font-size: 10px; }
.deposit-hero-badge.green{ background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); color: #4ADE80; }
.deposit-hero .faucet-hero-stats{ margin-bottom: 0; }
@media (max-width: 640px){
            .deposit-hero-title{ font-size: 19px; }
        }
.deposit-tab-bar{
            display: flex; margin-bottom: 16px;
            background: var(--surface-alt); border: 1px solid var(--border-default);
            border-radius: var(--radius-md); padding: 3px;
        }
.deposit-tab-btn{
            flex: 1; padding: 10px 16px; font-size: 13px; font-weight: 500;
            text-align: center; border-radius: var(--radius-sm); border: none;
            cursor: pointer; transition: all 200ms ease;
            background: transparent; color: var(--text-secondary);
        }
.deposit-tab-btn.active{ background: var(--primary); color: #000; font-weight: 600; }
.deposit-fp-form{ text-align: left; }
.deposit-fp-form .dep-label{
            font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; display: block;
        }
.deposit-fp-form .deposit-amount-input{
            width: 100%; padding: 12px 16px; border-radius: var(--radius-md);
            border: 1px solid var(--border-default); background: var(--surface-alt);
            color: var(--text-primary); font-size: 20px; font-weight: 700; text-align: center;
            transition: border-color 200ms; box-sizing: border-box;
        }
.deposit-amount-input:focus{ outline: none; border-color: var(--primary); }
.deposit-amount-input::placeholder{ color: var(--text-quaternary); }
.deposit-fp-note{ font-size: 12px; margin-top: 12px; text-align: center; color: var(--text-secondary); }
.deposit-result{
            text-align: center; padding: 8px 0;
        }
.deposit-result-title{ font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.deposit-result-title.success{ color: var(--success); }
.deposit-result-title.failed{ color: var(--danger); }
.deposit-result-msg{ font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.deposit-result-btn-wrap{ display: flex; flex-direction: column; gap: 8px; align-items: center; }
.deposit-manual-section{ text-align: left; }
.deposit-manual-addr{
            padding: 14px 16px; margin-bottom: 12px;
            background: var(--surface-alt); border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
        }
.deposit-manual-addr .dep-addr-label{ font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.deposit-manual-addr .dep-addr-value{
            font-size: 13px; font-family: monospace; word-break: break-all; color: var(--text-primary);
        }
.deposit-bonus-divider{
            display: flex; align-items: center; gap: 12px; margin: 20px 0 14px;
        }
.deposit-bonus-divider .dep-divider-line{
            flex: 1; height: 1px; background: var(--border-default);
        }
.deposit-bonus-divider .dep-divider-text{
            font-size: 11px; font-weight: 600; color: var(--text-tertiary); white-space: nowrap;
        }
.deposit-bonus-list{ text-align: left; display: flex; flex-direction: column; gap: 10px; }
.deposit-bonus-alert{
            display: flex; align-items: center; gap: 14px;
            padding: 16px;
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.03));
            border: 1px solid rgba(245,158,11,0.25);
            border-left: 3px solid var(--brand-500);
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }
.deposit-bonus-alert .dep-bonus-icon{
            flex-shrink: 0; width: 38px; height: 38px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 10px;
            background: rgba(245,158,11,0.15);
            color: var(--brand-500); font-size: 16px;
        }
.deposit-bonus-alert .dep-bonus-body{ flex: 1; min-width: 0; }
.deposit-bonus-alert .dep-bonus-desc{ font-size: 13px; font-weight: 600; color: var(--text-primary); }
.deposit-bonus-alert .dep-bonus-cta{ font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.deposit-bonus-alert .dep-bonus-pct{ color: var(--success); font-weight: 700; }
.deposit-bonus-alert .dep-bonus-arrow{ flex-shrink: 0; color: var(--text-tertiary); font-size: 13px; }
.deposit-history-card{ margin-top: 20px; }
.deposit-history-card .dep-hist-title{ font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.deposit-history-item{
            padding: 10px 0; border-bottom: 1px solid var(--border-default);
        }
.deposit-history-item:last-child{ border-bottom: none; }
.deposit-history-item .dep-hist-top{
            display: flex; justify-content: space-between; align-items: flex-start;
        }
.deposit-history-item .dep-hist-amount{ font-size: 13px; font-weight: 600; }
.deposit-history-item .dep-hist-bonus{ font-size: 11px; color: var(--success); }
.deposit-history-item .dep-hist-txid{ font-size: 11px; font-family: monospace; color: var(--text-muted); margin-top: 2px; }
.deposit-history-item .dep-hist-date{ font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.deposit-history-item .dep-hist-badge{ flex-shrink: 0; margin-top: 2px; }
/* Challenges specific */
        .chal-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(245,158,11,0.16), rgba(139,92,246,0.10) 45%, transparent);
            border: 1px solid rgba(245,158,11,0.18);
            
        }
.chal-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.chal-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(245,158,11,0.15); color: #FBBF24;
            border: 1px solid rgba(245,158,11,0.3);
        }
.chal-hero-title-wrap{ min-width: 0; flex: 1; }
.chal-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #FDE68A, #F59E0B);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.chal-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.chal-countdown-chip{
            display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
            font-size: 11px; color: var(--text-secondary); font-weight: 600;
            padding: 4px 12px; border-radius: var(--radius-full);
            background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2);
        }
.chal-countdown-chip i{ font-size: 10px; color: var(--warning); }
.chal-countdown-chip .chal-timer{ font-family: var(--font-heading); font-weight: 700; color: var(--warning); }
.chal-tab-bar{
            display: flex; gap: 8px; margin-bottom: 16px;
        }
.challenge-tab-btn{
            flex: 1; padding: 10px 16px; border-radius: var(--radius-full);
            font-family: var(--font-heading); font-size: 12px; font-weight: 600;
            border: 1px solid var(--border-default); cursor: pointer;
            transition: all 200ms ease;
            background: var(--surface-alt); color: var(--text-secondary);
            white-space: nowrap;
        }
.challenge-tab-btn:hover:not(.active){ border-color: var(--border-strong); color: var(--text-primary); transform: translateY(-1px); }
.challenge-tab-btn.active{
            background: var(--primary); color: #000; border-color: transparent;
            box-shadow: 0 2px 12px rgba(245,158,11,0.25);
        }
.chal-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.challenge-item{
            padding: 14px; border-radius: var(--radius-lg);
            background: var(--card-bg); backdrop-filter: blur(12px);
            border: 1px solid var(--border-default);
            transition: all 200ms ease;
        }
.challenge-item:not(.ended):not(.claimable):hover{ transform: translateY(-2px); border-color: var(--hover-border); box-shadow: var(--shadow-md); }
.challenge-item.ended{ opacity: 0.55; }
.challenge-item.claimable{ border-color: rgba(34,197,94,0.25); box-shadow: 0 4px 18px rgba(34,197,94,0.08); }
.chal-card-top{ display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.challenge-item .chal-icon-wrap{
            width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
        }
.challenge-item .chal-icon-wrap i{ font-size: 18px; }
.challenge-item .chal-icon-wrap .chal-emoji{ font-size: 20px; line-height: 1; }
.challenge-item .chal-header{ min-width: 0; flex: 1; }
.challenge-item .chal-title{ font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.challenge-item .chal-badge{ font-size: 9px; padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; flex-shrink: 0; }
.challenge-item .chal-badge.daily{ background: var(--success-light); color: var(--success); }
.challenge-item .chal-badge.ended{ background: rgba(255,255,255,0.08); color: var(--text-muted); }
.challenge-item .chal-badge.ends-soon{ background: var(--warning-light); color: var(--warning); }
.challenge-item .chal-desc{ font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.challenge-item .chal-ref-alert{
            font-size: 11px; padding: 8px 10px; border-radius: var(--radius-sm);
            background: rgba(234,179,8,0.08); border: 1px solid rgba(234,179,8,0.1);
            color: var(--warning); margin: 8px 0; display: flex; align-items: center; gap: 6px;
        }
.challenge-item .chal-progress-row{
            display: flex; align-items: center; justify-content: space-between; margin: 10px 0 6px;
        }
.challenge-item .chal-progress-dot{
            width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
        }
.challenge-item .chal-progress-text{ font-size: 12px; font-weight: 500; }
.challenge-item .chal-rewards{
            display: inline-flex; align-items: center; gap: 6px;
        }
.challenge-item .chal-reward{
            font-size: 12px; font-weight: 700; font-family: var(--font-heading);
            color: var(--warning); background: var(--warning-light);
            padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap;
        }
.challenge-item .chal-xp{
            font-size: 12px; font-weight: 700; font-family: var(--font-heading);
            color: var(--primary); background: rgba(245,158,11,0.12);
            padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap;
            display: inline-flex; align-items: center; gap: 4px;
        }
.challenge-item .chal-xp i{ font-size: 10px; }
.challenge-item .chal-item{
            position: relative; display: inline-flex; align-items: center; justify-content: center;
            width: 24px; height: 24px; border-radius: var(--radius-full);
            background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.4);
            overflow: visible; flex-shrink: 0;
        }
.challenge-item .chal-item img{ width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-full); padding: 2px; }
.challenge-item .chal-item i{ font-size: 11px; color: #8B5CF6; }
.challenge-item .chal-item-qty{
            position: absolute; top: -6px; right: -8px; font-size: 9px; font-weight: 700;
            color: #fff; background: #8B5CF6; padding: 0 4px; border-radius: 8px; line-height: 12px;
        }
.challenge-item .chal-pct-text{ font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
.challenge-item .chal-claim-btn{ margin-top: 10px; }
.challenge-item .chal-claim-btn .btn{ width: 100%; }
.challenge-item .chal-claimed{
            font-size: 12px; color: var(--success); text-align: center; margin-top: 10px;
        }
.challenge-item .chal-claimed i{ margin-right: 4px; }
.chal-empty{ text-align: center; padding: 24px; }
.chal-empty i{ font-size: 28px; color: var(--text-quaternary); margin-bottom: 8px; display: block; }
.chal-empty p{ color: var(--text-tertiary); font-size: 13px; }
@media (max-width: 1100px){
            .chal-grid{ grid-template-columns: repeat(2, 1fr); }
        }
@media (max-width: 640px){
            .chal-grid{ grid-template-columns: 1fr; }
            .chal-hero-title{ font-size: 19px; }
        }
/* Contests specific */
        .con-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(244,63,94,0.16), rgba(139,92,246,0.10) 45%, transparent);
            border: 1px solid rgba(244,63,94,0.18);
            
        }
.con-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.con-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(244,63,94,0.15); color: #FB7185;
            border: 1px solid rgba(244,63,94,0.3);
        }
.con-hero-title-wrap{ min-width: 0; flex: 1; }
.con-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #FECDD3, #F43F5E);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.con-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.con-update-chip{
            display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
            font-size: 11px; color: var(--text-secondary); font-weight: 600;
            padding: 4px 12px; border-radius: var(--radius-full);
            background: rgba(244,63,94,0.1); border: 1px solid rgba(244,63,94,0.2);
        }
.con-update-chip i{ font-size: 10px; color: #F43F5E; }
.con-update-chip #nextContestUpdate{ font-family: var(--font-heading); font-weight: 700; color: #F43F5E; }
.con-tab-bar{
            display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
        }
.contest-tab-btn{
            flex: 1; padding: 10px 16px; border-radius: var(--radius-full);
            font-family: var(--font-heading); font-size: 12px; font-weight: 600;
            border: 1px solid var(--border-default); cursor: pointer;
            transition: all 200ms ease;
            background: var(--surface-alt); color: var(--text-secondary);
            white-space: nowrap;
        }
.contest-tab-btn:hover:not(.active){ border-color: var(--border-strong); color: var(--text-primary); transform: translateY(-1px); }
.contest-tab-btn.active{
            background: var(--primary); color: #000; border-color: transparent;
            box-shadow: 0 2px 12px rgba(244,63,94,0.25);
        }
#contestList{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.contest-item{
            padding: 18px; margin-bottom: 0; border-radius: var(--radius-lg);
            background: var(--card-bg); backdrop-filter: blur(12px);
            border: 1px solid var(--border-default);
            transition: all 200ms ease;
        }
.contest-item:hover{ transform: translateY(-2px); border-color: var(--hover-border); box-shadow: var(--shadow-md); }
.contest-item.upcoming{ border-style: dashed; }
.contest-item .con-card-head{
            display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
        }
.contest-item .con-icon-wrap{
            width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: rgba(244,63,94,0.12); color: #F43F5E;
        }
.contest-item .con-icon-wrap i{ font-size: 18px; }
.contest-item .con-title{ font-weight: 700; font-size: 15px; color: var(--text-primary); flex: 1; min-width: 0; }
.contest-item .con-badge-group{ display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.contest-item .con-badge{
            font-size: 10px; padding: 2px 10px; border-radius: var(--radius-full); font-weight: 600;
        }
.contest-item .con-badge.upcoming{ background: rgba(139,92,246,0.12); color: #A78BFA; }
.contest-item .con-badge.freq{ background: var(--info-light); color: var(--info); text-transform: capitalize; }
.contest-item .con-badge.countdown{ background: var(--primary-light); color: var(--primary); }
.contest-item .con-start-date{ font-size: 12px; color: var(--text-tertiary); }
.contest-item .con-prizes{
            display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
        }
.contest-item .con-prize{
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 12px; font-weight: 600; padding: 3px 10px;
            border-radius: var(--radius-md);
        }
.contest-item .con-prize.gold{ background: rgba(255,215,0,0.12); border: 1px solid rgba(255,215,0,0.2); color: #FFD700; }
.contest-item .con-prize.silver{ background: rgba(192,192,192,0.12); border: 1px solid rgba(192,192,192,0.2); color: #C0C0C0; }
.contest-item .con-prize.bronze{ background: rgba(205,127,50,0.12); border: 1px solid rgba(205,127,50,0.2); color: #CD7F32; }
.contest-item .con-prize.other{ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: var(--text-muted); }
.contest-item .con-ref-alert{
            font-size: 11px; padding: 8px 10px; border-radius: var(--radius-sm);
            background: rgba(234,179,8,0.08); border: 1px solid rgba(234,179,8,0.1);
            color: var(--warning); margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
        }
.contest-item .con-lb-box{
            background: var(--bg-elevated); border: 1px solid var(--border-default);
            border-radius: var(--radius-md); padding: 6px;
        }
.contest-item .con-lb-entry{
            display: flex; align-items: flex-start; gap: 8px;
            padding: 8px 10px; border-radius: var(--radius-md); font-size: 13px;
        }
.contest-item .con-lb-entry.user-highlight{ background: rgba(244,63,94,0.08); color: #F43F5E; font-weight: 600; }
.contest-item .con-lb-rank{
            font-size: 12px; flex-shrink: 0; margin-top: 2px;
        }
.contest-item .con-lb-avatar{
            width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
        }
.contest-item .con-lb-avatar img{ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.contest-item .con-lb-avatar.fallback{
            display: flex; align-items: center; justify-content: center;
            background: var(--info-light); color: var(--info); font-size: 11px; font-weight: 700;
        }
.contest-item .con-lb-info{ flex: 1; min-width: 0; }
.contest-item .con-lb-name{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contest-item .con-lb-level{ font-size: 11px; color: var(--text-tertiary); }
.contest-item .con-lb-stats{
            display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0;
        }
.contest-item .con-lb-stat{ font-size: 11px; color: var(--text-tertiary); }
.contest-item .con-lb-score{ font-weight: 600; text-align: right; }
.contest-item .con-lb-more{
            text-align: center; font-size: 12px; color: var(--text-tertiary); padding-top: 4px;
        }
.contest-item .con-upcoming-text{ font-size: 13px; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }
.contest-item .con-upcoming-text i{ color: #F43F5E; font-size: 12px; }
.con-empty{ text-align: center; padding: 24px; }
.con-empty i{ font-size: 28px; color: var(--text-quaternary); margin-bottom: 8px; display: block; }
.con-empty p{ color: var(--text-tertiary); font-size: 13px; }
@media (max-width: 640px){
            #contestList{ grid-template-columns: 1fr; }
            .con-hero-title{ font-size: 19px; }
            .con-lb-stats{ max-width: 90px; }
        }
/* Leaderboard page */
        .ti-spin{ animation: spin 1s linear infinite; }
        .lb-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(245,158,11,0.16), rgba(139,92,246,0.10) 45%, transparent);
            border: 1px solid rgba(245,158,11,0.18);
            
        }
.lb-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.lb-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(245,158,11,0.15); color: #FBBF24;
            border: 1px solid rgba(245,158,11,0.3);
        }
.lb-hero-title-wrap{ min-width: 0; flex: 1; }
.lb-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #FCD34D, #F59E0B);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.lb-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.lb-list{ display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.lb-row{
            display: flex; align-items: center; gap: 12px; padding: 14px 16px;
            background: var(--card-bg); backdrop-filter: blur(12px);
            border: 1px solid var(--border-default); border-radius: var(--radius-lg);
            transition: all 200ms ease;
        }
.lb-row:hover{ transform: translateY(-2px); border-color: var(--hover-border); box-shadow: var(--shadow-md); }
.lb-rank{
            width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 14px; font-weight: 700;
            background: rgba(255,255,255,0.04); color: var(--text-muted);
        }
.lb-rank.top-1{ background: rgba(255,215,0,0.12); color: #FFD700; font-size: 18px; }
.lb-rank.top-2{ background: rgba(192,192,192,0.12); color: #C0C0C0; font-size: 16px; }
.lb-rank.top-3{ background: rgba(205,127,50,0.12); color: #CD7F32; font-size: 15px; }
.lb-avatar{
            width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
        }
.lb-avatar-fallback{
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 16px; color: var(--primary);
            background: var(--primary-light);
        }
.lb-info{ flex: 1; min-width: 0; }
.lb-name{ font-weight: 600; font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-level-icon{ width: 18px; height: 18px; border-radius: 5px; object-fit: cover; margin-right: 6px; vertical-align: middle; }
.lb-meta{ display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12px; flex-wrap: wrap; }
.lb-level{ color: var(--text-secondary); }
.lb-xp{
            color: #F59E0B; font-family: var(--font-mono); font-weight: 600;
            background: rgba(245,158,11,0.12); padding: 2px 8px; border-radius: var(--radius-full);
        }
.lb-user-highlight{
            background: rgba(245,158,11,0.08) !important;
            border-color: rgba(245,158,11,0.3) !important;
        }
.lb-user-highlight .lb-rank{
            background: rgba(245,158,11,0.15); color: #F59E0B;
        }
@media (max-width: 640px){
            .lb-hero-title{ font-size: 19px; }
        }
.lb-podium{
    display: grid;
    grid-template-areas: "p2 p1 p3";
    grid-template-columns: 1fr 1.2fr 1fr;
    align-items: end;
    gap: 10px;
    margin-bottom: 16px;
}
.lb-p-card{
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    padding: 20px 12px 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.06), transparent 60%), var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-default);
    transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.lb-p-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.lb-p-card.p-1{
    grid-area: p1;
    border-color: rgba(255,215,0,0.55);
    box-shadow: 0 12px 36px rgba(255,215,0,0.18), 0 0 24px rgba(255,215,0,0.12);
    animation: lbP1Float 4s ease-in-out infinite, lbP1Glow 3s ease-in-out infinite;
}
.lb-p-card.p-2{ grid-area: p2; border-color: rgba(192,192,192,0.45); box-shadow: 0 10px 30px rgba(192,192,192,0.12); }
.lb-p-card.p-3{ grid-area: p3; border-color: rgba(205,127,50,0.45); box-shadow: 0 10px 30px rgba(205,127,50,0.12); }
.lb-p-card.p-1:hover{ animation: none; transform: translateY(-6px); box-shadow: 0 16px 44px rgba(255,215,0,0.35), 0 0 44px rgba(255,215,0,0.25); }
.lb-p-card.p-2:hover{ box-shadow: 0 14px 38px rgba(192,192,192,0.28); border-color: rgba(192,192,192,0.7); }
.lb-p-card.p-3:hover{ box-shadow: 0 14px 38px rgba(205,127,50,0.28); border-color: rgba(205,127,50,0.7); }
@keyframes lbP1Float{ 0%,100%{ translate: 0 0; } 50%{ translate: 0 -4px; } }
@keyframes lbP1Glow{ 0%,100%{ box-shadow: 0 12px 36px rgba(255,215,0,0.18), 0 0 24px rgba(255,215,0,0.12); } 50%{ box-shadow: 0 12px 40px rgba(255,215,0,0.32), 0 0 40px rgba(255,215,0,0.22); } }
.lb-p-svg{
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    width: 150px; height: 150px; pointer-events: none; z-index: 0; opacity: 0.1;
}
.lb-p-card.p-1 .lb-p-svg{ color: #FFD700; }
.lb-p-card.p-2 .lb-p-svg{ color: #C0C0C0; }
.lb-p-card.p-3 .lb-p-svg{ color: #CD7F32; }
.lb-p-crown{
    position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
    font-size: 20px; z-index: 3;
    animation: lbPCrownFloat 2.5s ease-in-out infinite;
    filter: drop-shadow(0 2px 6px rgba(255,215,0,0.7));
}
@keyframes lbPCrownFloat{ 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(-4px); } }
.lb-p-trophy{
    position: relative; z-index: 2;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
}
.lb-p-card.p-1 .lb-p-trophy{ width: 38px; height: 38px; }
.lb-p-trophy-oct{
    position: absolute; inset: 0; z-index: 0;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: linear-gradient(135deg,#FFE66D,#F5B301 55%,#B8860B);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.35), 0 4px 10px rgba(0,0,0,0.35);
}
.lb-p-trophy-oct::before{
    content: ''; position: absolute; inset: 1px; z-index: 0;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: rgba(255,255,255,0.45);
}
.lb-p-trophy-oct::after{
    content: ''; position: absolute; inset: 4px; z-index: 0;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05));
}
.lb-p-card.p-2 .lb-p-trophy-oct{ background: linear-gradient(135deg,#F5F5F5,#C0C0C0 55%,#808080); }
.lb-p-card.p-3 .lb-p-trophy-oct{ background: linear-gradient(135deg,#E8A469,#CD7F32 55%,#8B5A2B); }
.lb-p-card.p-1 .lb-p-trophy-oct{ animation: lbPTrophyPulse 3s ease-in-out infinite; }
@keyframes lbPTrophyPulse{ 0%,100%{ box-shadow: inset 0 2px 4px rgba(255,255,255,0.35), 0 4px 10px rgba(0,0,0,0.35), 0 0 0 0 rgba(255,215,0,0.5); } 50%{ box-shadow: inset 0 2px 4px rgba(255,255,255,0.35), 0 4px 10px rgba(0,0,0,0.35), 0 0 0 6px rgba(255,215,0,0); } }
.lb-p-trophy-num{
    position: relative; z-index: 1;
    font-size: 12px; font-weight: 800; color: #1a1a2e; text-shadow: 0 1px 2px rgba(255,255,255,0.4);
}
.lb-p-card.p-1 .lb-p-trophy-num{ font-size: 15px; }
.lb-p-trophy-ribbon{
    position: absolute; top: -7px; left: 50%; transform: translateX(-50%); z-index: 1;
    width: 14px; height: 10px;
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
    background: linear-gradient(180deg, #FFE66D, #B8860B);
}
.lb-p-card.p-2 .lb-p-trophy-ribbon{ background: linear-gradient(180deg, #F5F5F5, #808080); }
.lb-p-card.p-3 .lb-p-trophy-ribbon{ background: linear-gradient(180deg, #E8A469, #8B5A2B); }
.lb-p-card.p-1 .lb-p-trophy-ribbon{ display: none; }
.lb-p-card.p-2 .lb-p-trophy-ribbon,
.lb-p-card.p-3 .lb-p-trophy-ribbon{ display: none; }
.lb-p-particles{ position: absolute; left: 0; right: 0; top: 30%; height: 60%; pointer-events: none; z-index: 1; }
.lb-p-particles span{
    position: absolute; bottom: 0; width: 6px; height: 6px; border-radius: 50%;
    background: #FFD700; opacity: 0;
    animation: lbParticleRise 3s linear infinite;
}
.lb-p-particles span:nth-child(1){ left: 12%; animation-delay: 0s; }
.lb-p-particles span:nth-child(2){ left: 32%; animation-delay: 0.6s; }
.lb-p-particles span:nth-child(3){ left: 55%; animation-delay: 1.2s; }
.lb-p-particles span:nth-child(4){ left: 74%; animation-delay: 1.8s; }
.lb-p-particles span:nth-child(5){ left: 88%; animation-delay: 2.4s; }
@keyframes lbParticleRise{
    0%{ transform: translateY(0) scale(0.8); opacity: 0; }
    15%{ opacity: 0.9; }
    100%{ transform: translateY(-90px) scale(1.1); opacity: 0; }
}
.lb-p-you{
    position: absolute; top: 8px; right: 8px; z-index: 4;
    font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
    color: #fff; background: rgba(245,158,11,0.9);
    padding: 2px 8px; border-radius: var(--radius-full);
}
.lb-p-avatar{
    position: relative; z-index: 1;
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
    margin-top: -8px;
    transition: transform 250ms ease, box-shadow 250ms ease;
}
.lb-p-card.p-1 .lb-p-avatar{
    width: 78px; height: 78px;
    border: 3px solid rgba(255,215,0,0.75);
    box-shadow: 0 0 18px rgba(255,215,0,0.5), 0 0 36px rgba(255,215,0,0.25);
}
.lb-p-card.p-2 .lb-p-avatar{ border: 3px solid rgba(192,192,192,0.7); box-shadow: 0 0 14px rgba(192,192,192,0.4); }
.lb-p-card.p-3 .lb-p-avatar{ border: 3px solid rgba(205,127,50,0.7); box-shadow: 0 0 14px rgba(205,127,50,0.4); }
.lb-p-card:hover .lb-p-avatar{ transform: scale(1.05); }
.lb-p-avatar-fallback{
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 22px; color: var(--primary);
    background: var(--primary-light);
}
.lb-p-name{
    position: relative; z-index: 1;
    margin-top: 10px; font-weight: 700; font-size: 15px; color: var(--text-primary);
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 8px;
}
.lb-p-card.p-1 .lb-p-name{ font-size: 17px; }
.lb-p-level-icon{ width: 20px; height: 20px; border-radius: 4px; object-fit: cover; margin-left: 4px; vertical-align: middle; display: inline-block; }
.lb-p-rank{
    position: relative; z-index: 1;
    margin-top: 2px; font-size: 11px; font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 8px;
}
.lb-p-card.p-1 .lb-p-rank{ color: #F59E0B; font-size: 12px; }
.lb-p-badge{
    position: relative; z-index: 1;
    margin-top: 4px; display: flex; align-items: center; justify-content: center;
}
.lb-p-badge-img{ height: 18px; }
.lb-p-pedestal{
    position: relative; z-index: 1;
    margin-top: 10px; width: 100%;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
    padding: 0 8px 14px;
}
.lb-p-level, .lb-p-xp, .lb-p-earn{
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 700; white-space: nowrap;
    padding: 4px 10px; border-radius: 999px; border: 1px solid;
}
.lb-p-level{
    color: #F59E0B; background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.3);
}
.lb-p-level::before{ content: '⚡ '; }
.lb-p-xp{
    color: #a5b4fc; background: rgba(99,102,241,0.14); border-color: rgba(99,102,241,0.3);
}
.lb-p-earn{
    color: #4ade80; background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.3);
    font-family: var(--font-mono);
}
@media (max-width: 1024px){
    .lb-podium{ gap: 8px; }
    .lb-p-card{ padding: 18px 10px 0; }
    .lb-p-card.p-1 .lb-p-trophy{ width: 36px; height: 36px; }
    .lb-p-card.p-1 .lb-p-avatar{ width: 70px; height: 70px; }
}
@media (max-width: 640px){
    .lb-podium{ gap: 6px; grid-template-areas: "p1 p1" "p2 p3"; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
    .lb-p-card{ padding: 16px 6px 0; }
    .lb-p-card.p-1 .lb-p-trophy{ width: 32px; height: 32px; }
    .lb-p-trophy{ width: 26px; height: 26px; }
    .lb-p-trophy-num{ font-size: 11px; }
    .lb-p-card.p-1 .lb-p-trophy-num{ font-size: 13px; }
    .lb-p-avatar{ width: 48px; height: 48px; margin-top: -6px; }
    .lb-p-card.p-1 .lb-p-avatar{ width: 58px; height: 58px; }
    .lb-p-particles{ display: none; }
    .lb-p-crown{ font-size: 16px; }
    .lb-p-name{ font-size: 11px; }
    .lb-p-card.p-1 .lb-p-name{ font-size: 13px; }
    .lb-p-rank{ font-size: 9px; }
    .lb-p-card.p-1 .lb-p-rank{ font-size: 10px; }
    .lb-p-pedestal{ gap: 5px; }
    .lb-p-level, .lb-p-xp, .lb-p-earn{ font-size: 10px; padding: 3px 8px; }
    .lb-p-badge-img{ height: 15px; }
}
@media (prefers-reduced-motion: reduce){
    .lb-p-card.p-1{ animation: none; }
    .lb-p-crown{ animation: none; }
    .lb-p-card.p-1 .lb-p-trophy-oct{ animation: none; }
    .lb-p-particles span{ animation: none; opacity: 0.6; }
}
/* Coupons page */
.coupon-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(245,158,11,0.16), rgba(139,92,246,0.10) 45%, transparent);
            border: 1px solid rgba(245,158,11,0.18);
            
        }
.coupon-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.coupon-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(245,158,11,0.15); color: #FBBF24;
            border: 1px solid rgba(245,158,11,0.3);
        }
.coupon-hero-title-wrap{ min-width: 0; flex: 1; }
.coupon-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #FCD34D, #F59E0B);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.coupon-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.coupon-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.coupon-hero-badge{
            display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
            border-radius: var(--radius-full); background: rgba(245,158,11,0.12);
            border: 1px solid rgba(245,158,11,0.3); color: #FCD34D;
            font-size: 11px; font-weight: 700;
        }
.coupon-hero-badge i{ font-size: 10px; }
.coupon-announce-card{
            background: var(--bg-elevated); border: 1px solid var(--border-default);
            border-radius: var(--radius-lg); padding: 16px; margin-bottom: 16px;
        }
.coupon-announce-inner{ display: flex; align-items: flex-start; gap: 12px; }
.coupon-announce-icon{ font-size: 28px; flex-shrink: 0; line-height: 1; }
.coupon-announce-body{ flex: 1; min-width: 0; }
.coupon-announce-title{ font-weight: 600; margin-bottom: 6px; color: var(--text-primary); }
.coupon-announce-text{ font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.coupon-announce-btn{
            display: inline-flex; align-items: center; gap: 6px;
            margin-top: 12px; padding: 8px 16px; border-radius: var(--radius-full); border: none;
            background: #0088cc; color: #fff; font-size: 13px; font-weight: 600;
            cursor: pointer; transition: opacity var(--transition-fast) var(--ease-smooth);
            text-decoration: none;
        }
.coupon-announce-btn:hover{ opacity: 0.85; }
.coupon-redeem-card{
            background: var(--bg-elevated); border: 1px solid var(--border-default);
            border-radius: var(--radius-lg); padding: 16px;
        }
.coupon-input-wrap{ margin-bottom: 12px; }
.coupon-input{
            width: 100%; padding: 12px 14px; border-radius: var(--radius-lg);
            border: 1px solid var(--border-default); background: var(--bg-input);
            color: var(--text-primary); font-size: 14px; font-family: var(--font-heading);
            text-transform: uppercase; letter-spacing: 1px;
            outline: none; transition: border-color var(--transition-fast) var(--ease-smooth), box-shadow var(--transition-fast) var(--ease-smooth);
            box-sizing: border-box;
        }
.coupon-input:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
.coupon-input::placeholder{ text-transform: none; letter-spacing: 0; color: var(--text-tertiary); }
.coupon-redeem-btn{
            padding: 12px 24px; border-radius: var(--radius-lg); border: none;
            background: var(--primary); color: #000; font-weight: 600;
            font-size: 14px; cursor: pointer;
            transition: background var(--transition-fast) var(--ease-smooth);
        }
.coupon-redeem-btn:hover{ background: var(--primary-hover); }
@media (max-width: 640px){
            .coupon-hero-title{ font-size: 19px; }
            .coupon-redeem-btn{ width: 100%; }
        }
/* Wheel of Fortune */
        .wheel-container{
            position: relative; width: 300px; height: 300px; margin: 0 auto;
        }
.wheel-pointer{
            position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
            width: 0; height: 0;
            border-left: 12px solid transparent; border-right: 12px solid transparent;
            border-top: 20px solid var(--primary); z-index: 10;
        }
.wheel-center{
            position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
            width: 48px; height: 48px; border-radius: 50%;
            background: var(--bg-elevated);
            display: flex; align-items: center; justify-content: center;
            z-index: 10; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
.wheel-center i{ color: var(--primary); font-size: 20px; }
.wheel-actions{ text-align: center; margin-top: 12px; }
.wheel-spin-btn{
            width: 200px; border-radius: 50px; font-size: 16px; font-weight: 600;
            padding: 12px 0; border: none; cursor: pointer;
            background: var(--primary); color: #000;
            transition: opacity var(--transition-fast) var(--ease-smooth);
        }
.wheel-spin-btn:disabled{ opacity: 0.4; cursor: not-allowed; }
.wheel-spin-btn:hover:not(:disabled){ opacity: 0.85; }
.wheel-progress{ margin-top: 12px; }
.wheel-progress-header{ display: flex; justify-content: space-between; color: var(--text-tertiary); font-size: 11px; margin-bottom: 4px; }
.wheel-cooldown-only{
            text-align: center; padding: 24px 0; min-height: 150px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
.wheel-cooldown-only .wheel-cooldown-icon{ font-size: 40px; margin-bottom: 8px; }
.wheel-cooldown-only .wheel-cooldown-label{ color: var(--text-tertiary); font-size: 13px; margin-bottom: 8px; }
.wheel-cooldown-only .wheel-cooldown-timer{ font-size: 32px; font-weight: 700; color: var(--danger); font-family: var(--font-mono); }
.wheel-result-overlay{
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.7); z-index: 9999;
            display: flex; align-items: center; justify-content: center;
            animation: overlayIn 0.3s;
        }
.wheel-result-modal{
            background: var(--bg-elevated); border-radius: 20px;
            padding: 32px; text-align: center; max-width: 300px;
            width: 90%; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
        }
.wheel-result-emoji{ font-size: 48px; margin-bottom: 12px; }
.wheel-result-label{ font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.wheel-result-divider{
            width: 60px; height: 3px; border-radius: 2px;
            margin: 0 auto 16px;
        }
.wheel-result-amount{ font-size: 24px; font-weight: 700; color: var(--success); }
.wheel-result-xp{ font-size: 18px; color: var(--primary); }
@keyframes overlayIn{ from { opacity: 0; } to { opacity: 1; } }
@keyframes spin{ to { transform: rotate(360deg); } }
/* Item Drop Popup */
        .item-drop-overlay{
            position: fixed; inset: 0; z-index: 9999;
            background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
            display: none; align-items: center; justify-content: center;
            animation: overlayIn 0.3s ease;
        }
.item-drop-overlay.open{ display: flex; }
.item-drop-box{
            background: var(--bg-card); border-radius: var(--radius-xl);
            padding: 40px 32px 28px; text-align: center; max-width: 360px; width: 90%;
            border: 1px solid var(--border-default);
            animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative; overflow: hidden;
        }
.item-drop-box::before{ display: none; }
.item-drop-rarity{ font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; }
.item-drop-rarity.common{ color: #94A3B8; }
.item-drop-rarity.rare{ color: #3B82F6; }
.item-drop-rarity.epic{ color: #8B5CF6; }
.item-drop-rarity.legendary{ color: #F59E0B; }
.item-drop-icon{
            width: 72px; height: 72px; margin: 0 auto 16px;
            border-radius: 18px; display: flex; align-items: center; justify-content: center;
            font-size: 30px; position: relative;
        }
.item-drop-icon.common{ background: rgba(148,163,184,0.12); color: #94A3B8; }
.item-drop-icon.rare{ background: rgba(59,130,246,0.12); color: #3B82F6; }
.item-drop-icon.epic{ background: rgba(139,92,246,0.12); color: #8B5CF6; }
.item-drop-icon.legendary{ background: rgba(245,158,11,0.12); color: #F59E0B; }
.item-drop-icon::after{
            content: ''; position: absolute; inset: -4px; border-radius: 22px;
            border: 1px solid; opacity: 0.3; animation: pulseGlow 2s ease-in-out infinite;
        }
.item-drop-icon.common::after{ border-color: #94A3B8; }
.item-drop-icon.rare::after{ border-color: #3B82F6; }
.item-drop-icon.epic::after{ border-color: #8B5CF6; }
.item-drop-icon.legendary::after{ border-color: #F59E0B; }
.item-drop-name{ font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.item-drop-bonus{ font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.item-drop-desc{ font-size: 12px; color: var(--text-tertiary); margin-bottom: 16px; }
.item-drop-added{ font-size: 12px; color: var(--success); font-weight: 600; margin-bottom: 16px; }
.item-drop-added i{ margin-right: 4px; }
/* Inventory Page */
        .inventory-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(139,92,246,0.16), rgba(99,102,241,0.10) 45%, transparent);
            border: 1px solid rgba(139,92,246,0.22);
            
        }
.inventory-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.inventory-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(139,92,246,0.15); color: #C4B5FD;
            border: 1px solid rgba(139,92,246,0.3);
        }
.inventory-hero-title-wrap{ min-width: 0; flex: 1; }
.inventory-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #C4B5FD, #7C3AED);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.inventory-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.inventory-hero-action{
            flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 14px; border-radius: 10px; font-size: 12px; font-weight: 600;
            color: #C4B5FD; text-decoration: none; cursor: pointer;
            background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.3);
            transition: background var(--transition-fast) var(--ease-smooth), transform var(--transition-fast) var(--ease-smooth);
        }
.inventory-hero-action:hover{ background: rgba(139,92,246,0.2); transform: translateY(-1px); }
.inventory-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.inventory-hero-badge{
            display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
            border-radius: var(--radius-full); font-size: 11px; font-weight: 700;
            background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.3); color: #C4B5FD;
        }
.inventory-hero-badge i{ font-size: 10px; }
.inventory-page .inv-card{ border-radius: 14px; }
.inventory-page .inv-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.22); }
.inventory-page .inv-card.common:hover{ border-color: rgba(148,163,184,0.5); box-shadow: 0 10px 24px rgba(148,163,184,0.18); }
.inventory-page .inv-card.rare:hover{ border-color: rgba(59,130,246,0.5); box-shadow: 0 10px 24px rgba(59,130,246,0.2); }
.inventory-page .inv-card.epic:hover{ border-color: rgba(139,92,246,0.5); box-shadow: 0 10px 24px rgba(139,92,246,0.22); }
.inventory-page .inv-card.legendary:hover{ border-color: rgba(245,158,11,0.5); box-shadow: 0 10px 24px rgba(245,158,11,0.2); }
.inventory-page .inv-card-actions .btn-primary{ background: linear-gradient(135deg, #A78BFA, #8B5CF6 55%, #6D28D9); border: none; color: #fff; }
.inventory-page .inv-card-actions .btn-primary:hover{ box-shadow: 0 4px 16px rgba(139,92,246,0.35); transform: translateY(-1px); }
@media (max-width: 640px){
            .inventory-hero-title{ font-size: 19px; }
        }
.inv-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.inv-card{
            background: var(--card-bg); border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg); padding: 16px;
            transition: all 200ms ease; position: relative; overflow: hidden;
        }
.inv-card:hover{ border-color: var(--border-muted); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.inv-card.common{ border-left: 3px solid #94A3B8; }
.inv-card.rare{ border-left: 3px solid #3B82F6; }
.inv-card.epic{ border-left: 3px solid #8B5CF6; }
.inv-card.legendary{ border-left: 3px solid #F59E0B; }
.inv-card-header{ display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.inv-card-icon{
            width: 44px; height: 44px; border-radius: var(--radius-md);
            display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
        }
.inv-card-icon.common{ background: rgba(148,163,184,0.1); color: #94A3B8; }
.inv-card-icon.rare{ background: rgba(59,130,246,0.1); color: #3B82F6; }
.inv-card-icon.epic{ background: rgba(139,92,246,0.1); color: #8B5CF6; }
.inv-card-icon.legendary{ background: rgba(245,158,11,0.1); color: #F59E0B; }
.inv-card-name{ font-family: var(--font-heading); font-size: 14px; font-weight: 600; flex: 1; }
.inv-card-qty{
            font-size: 11px; padding: 2px 10px; border-radius: var(--radius-full);
            background: var(--surface-alt); color: var(--text-tertiary); font-weight: 600; flex-shrink: 0;
        }
.inv-card-body{ }
.inv-card-desc{ font-size: 12px; color: var(--text-tertiary); margin-bottom: 10px; line-height: 1.4; }
.inv-card-stats{ display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.inv-card-stat{ font-size: 11px; color: var(--text-secondary); }
.inv-card-stat strong{ color: var(--text-primary); }
.inv-card-actions{ display: flex; gap: 8px; }
.inv-card-actions .btn{ flex: 1; padding: 8px 12px; font-size: 12px; }
/* Item History Page */
        .inv-history-list{ display: flex; flex-direction: column; gap: 6px; }
.inv-history-item{
            display: flex; align-items: center; gap: 12px;
            padding: 10px 14px; border-radius: var(--radius-md);
            background: var(--surface-alt); border: 1px solid var(--border-default);
            border-left: 3px solid var(--text-quaternary);
        }
.inv-history-item.common{ border-left-color: #94A3B8; }
.inv-history-item.rare{ border-left-color: #3B82F6; }
.inv-history-item.epic{ border-left-color: #8B5CF6; }
.inv-history-item.legendary{ border-left-color: #F59E0B; }
.inv-history-icon{
            width: 42px; height: 42px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; flex-shrink: 0;
            background: var(--surface); color: var(--text-secondary);
        }
.inv-history-info{ flex: 1; min-width: 0; }
.inv-history-name{ font-family: var(--font-heading); font-size: 13px; font-weight: 600; }
.inv-history-meta{ font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.booster-item{
            display: flex; align-items: center; gap: 10px;
            padding: 10px 12px; border-radius: var(--radius-md);
            background: var(--surface-alt); border: 1px solid var(--border-default);
            margin-bottom: 6px;
        }
.inv-booster-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.inv-booster-grid .booster-item{ flex-direction: column; text-align: center; gap: 8px; margin-bottom: 0; padding: 12px 10px; }
.inv-booster-grid .booster-info{ width: 100%; }
.inv-booster-grid .booster-progress{ margin-top: 6px; }
@media (max-width: 1100px){
            .inv-booster-grid{ grid-template-columns: repeat(3, 1fr); }
        }
@media (max-width: 640px){
            .inv-booster-grid{ grid-template-columns: repeat(2, 1fr); }
        }
.booster-item:last-child{ margin-bottom: 0; }
.booster-icon{
            width: 32px; height: 32px; border-radius: var(--radius-sm);
            display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
        }
.booster-icon.common{ background: rgba(148,163,184,0.1); color: #94A3B8; }
.booster-icon.rare{ background: rgba(59,130,246,0.1); color: #3B82F6; }
.booster-icon.epic{ background: rgba(139,92,246,0.1); color: #8B5CF6; }
.booster-icon.legendary{ background: rgba(245,158,11,0.1); color: #F59E0B; }
.booster-info{ flex: 1; min-width: 0; }
.booster-name{ font-size: 12px; font-weight: 600; }
.booster-detail{ font-size: 10px; color: var(--text-tertiary); margin-top: 1px; }
.booster-progress{ width: 100%; height: 3px; border-radius: 2px; background: var(--border-default); margin-top: 6px; overflow: hidden; }
.booster-progress-fill{ height: 100%; border-radius: 2px; background: var(--primary); transition: width 1s linear; }
.booster-timer{ font-size: 11px; color: var(--primary); font-family: var(--font-heading); font-weight: 600; flex-shrink: 0; }
/* News & FAQ pages */
        .news-card{
            background: var(--bg-card); border: 1px solid var(--border-default);
            border-radius: 14px; padding: 16px;
        }
.news-card + .news-card{ margin-top: 10px; }
.news-card-title{ font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.news-card-text{ font-size: 13px; color: var(--text-secondary); white-space: pre-wrap; margin-bottom: 8px; line-height: 1.5; }
.news-card-date{ font-size: 11px; color: var(--text-tertiary); }
.faq-card{
            background: var(--bg-card); border: 1px solid var(--border-default);
            border-radius: 14px; padding: 16px;
        }
.faq-card + .faq-card{ margin-top: 10px; }
.faq-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }
.faq-grid .faq-card{ margin-top: 0; }
@media (max-width: 640px){
            .faq-grid{ grid-template-columns: 1fr; }
        }
.faq-card-question{ font-size: 15px; font-weight: 600; color: var(--primary); margin-bottom: 6px; }
.faq-card-answer{ font-size: 13px; color: var(--text-secondary); white-space: pre-wrap; line-height: 1.5; }
/* News page specific */
.news-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(59,130,246,0.14), rgba(37,99,235,0.10) 45%, transparent);
            border: 1px solid rgba(59,130,246,0.22);
            
        }
.news-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.news-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(59,130,246,0.15); color: #60A5FA;
            border: 1px solid rgba(59,130,246,0.3);
        }
.news-hero-title-wrap{ min-width: 0; flex: 1; }
.news-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #93C5FD, #2563EB);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.news-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.news-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; position: relative; z-index: 1; }
.news-hero-badges .badge{ background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.3); color: #60A5FA; }
.news-page .news-card{ position: relative; overflow: hidden; transition: transform var(--transition-fast) var(--ease-smooth), border-color var(--transition-fast) var(--ease-smooth), box-shadow var(--transition-fast) var(--ease-smooth); }
.news-page .news-card:hover{ transform: translateY(-2px); border-color: rgba(59,130,246,0.35); box-shadow: 0 10px 28px rgba(0,0,0,0.16); }
.news-page .news-card::before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #93C5FD, #2563EB); opacity: 0; transition: opacity var(--transition-fast) var(--ease-smooth); }
.news-page .news-card:hover::before{ opacity: 1; }
.news-page .news-card-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.news-page .news-card-icon{
            width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 15px;
            color: #60A5FA; background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.2);
        }
.news-page .news-card-title{ font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 0; }
.news-page .news-card-text{ font-size: 13px; color: var(--text-secondary); white-space: pre-wrap; line-height: 1.55; margin-bottom: 10px; }
.news-page .news-card-date{
            display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
            color: #93C5FD; background: rgba(59,130,246,0.08);
            padding: 3px 10px; border-radius: var(--radius-full);
        }
.news-page .empty-state i{ color: #60A5FA; }
@media (max-width: 640px){
            .news-hero-title{ font-size: 19px; }
        }
/* FAQ page specific */
.faq-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(16,185,129,0.14), rgba(5,150,105,0.10) 45%, transparent);
            border: 1px solid rgba(16,185,129,0.22);
            
        }
.faq-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.faq-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(16,185,129,0.15); color: #34D399;
            border: 1px solid rgba(16,185,129,0.3);
        }
.faq-hero-title-wrap{ min-width: 0; flex: 1; }
.faq-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #6EE7B7, #059669);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.faq-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.faq-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; position: relative; z-index: 1; }
.faq-hero-badges .badge{ background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); color: #34D399; }
.faq-page .faq-card{ position: relative; overflow: hidden; transition: transform var(--transition-fast) var(--ease-smooth), border-color var(--transition-fast) var(--ease-smooth), box-shadow var(--transition-fast) var(--ease-smooth); }
.faq-page .faq-card[open]{ border-color: rgba(16,185,129,0.35); }
.faq-page .faq-card:hover{ transform: translateY(-2px); border-color: rgba(16,185,129,0.35); box-shadow: 0 10px 28px rgba(0,0,0,0.16); }
.faq-page .faq-card::before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #6EE7B7, #059669); opacity: 0; transition: opacity var(--transition-fast) var(--ease-smooth); }
.faq-page .faq-card:hover::before, .faq-page .faq-card[open]::before{ opacity: 1; }
.faq-page .faq-card summary{ display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; user-select: none; }
.faq-page .faq-card summary::-webkit-details-marker{ display: none; }
.faq-page .faq-card-icon{
            width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 15px;
            color: #34D399; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.2);
        }
.faq-page .faq-card-question{ font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 0; flex: 1; min-width: 0; }
.faq-page .faq-card-chev{ flex-shrink: 0; color: var(--text-tertiary); font-size: 12px; transition: transform var(--transition-fast) var(--ease-smooth); }
.faq-page .faq-card[open] .faq-card-chev{ transform: rotate(180deg); color: #34D399; }
.faq-page .faq-card-answer{ font-size: 13px; color: var(--text-secondary); white-space: pre-wrap; line-height: 1.55; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border-muted); }
.faq-page .empty-state i{ color: #34D399; }
@media (max-width: 640px){
            .faq-hero-title{ font-size: 19px; }
        }
/* Offerwalls page */
        .offerwalls-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(34,197,94,0.14), rgba(22,163,74,0.10) 45%, transparent);
            border: 1px solid rgba(34,197,94,0.22);
            
        }
.offerwalls-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.offerwalls-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(34,197,94,0.15); color: #4ADE80;
            border: 1px solid rgba(34,197,94,0.3);
        }
.offerwalls-hero-title-wrap{ min-width: 0; flex: 1; }
.offerwalls-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #86EFAC, #16A34A);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.offerwalls-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.offerwalls-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; position: relative; z-index: 1; }
.offerwalls-hero-badges .badge{ background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); color: #4ADE80; }
.ow-page .card{ transition: transform var(--transition-fast) var(--ease-smooth), border-color var(--transition-fast) var(--ease-smooth), box-shadow var(--transition-fast) var(--ease-smooth); }
.ow-page .card:hover{ transform: translateY(-2px); border-color: rgba(34,197,94,0.35); box-shadow: 0 10px 28px rgba(0,0,0,0.16); }
.ow-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ow-card{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 14px; }
.ow-logo{ width: auto; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; max-width: 100%; overflow: hidden; }
.ow-logo img{ width: 100%; height: 100%; object-fit: contain; }
.ow-name{ font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--text-primary); }
.ow-stars{ font-size: 17px; line-height: 1; letter-spacing: 1px; color: #F59E0B; min-height: 17px; }
.ow-rating{ font-size: 10px; font-weight: 700; font-family: var(--font-heading); padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap; background: rgba(245,158,11,0.12); color: var(--brand-500); }
.ow-btn{ margin-top: auto; min-width: 92px; }
.ow-locked .ow-logo{ font-size: 22px; }
.ow-locked .ow-unlock{ font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
@media (max-width: 1100px){
            .ow-grid{ grid-template-columns: repeat(2, 1fr); }
        }
@media (max-width: 640px){
            .ow-grid{ grid-template-columns: 1fr; }
            .offerwalls-hero-title{ font-size: 19px; }
        }
#page-offerwall-view{ padding-bottom: 20px; }
#page-offerwall-view .page-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
#offerwallViewHold{ margin-bottom: 16px; }
#offerwallViewHold a{ color: var(--primary); font-weight: 700; text-decoration: underline; }
.offerwall-frame{ border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-body); box-shadow: var(--shadow-sm); }
.offerwall-frame-bar{ display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--surface-alt); border-bottom: 1px solid var(--border-subtle); }
.offerwall-frame-dot{ width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.offerwall-frame-dot:nth-child(1){ background: #FF5F57; }
.offerwall-frame-dot:nth-child(2){ background: #FEBC2E; }
.offerwall-frame-dot:nth-child(3){ background: #28C840; }
.offerwall-frame iframe{ width: 100%; height: calc(100vh - 250px); min-height: 360px; border: none; display: block; }
@media (max-width: 640px){
            .offerwall-frame iframe{ height: calc(100vh - 210px); min-height: 300px; }
        }
/* Tasks page */
        .task-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(99,102,241,0.16), rgba(14,165,233,0.10) 45%, transparent);
            border: 1px solid rgba(99,102,241,0.18);
            
        }
.task-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.task-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(99,102,241,0.15); color: #A5B4FC;
            border: 1px solid rgba(99,102,241,0.3);
        }
.task-hero-title-wrap{ min-width: 0; flex: 1; }
.task-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #C7D2FE, #6366F1);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.task-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.category-section{ margin-bottom: 16px; }
.category-header{
            display: flex; align-items: center; gap: 8px;
            font-weight: 700; font-size: 15px; color: var(--text-primary);
            padding: 10px 14px; background: var(--bg-elevated);
            border-radius: 12px; margin-bottom: 12px;
        }
.category-header i{ color: var(--primary); font-size: 13px; }
.category-count{
            margin-left: auto; font-size: 11px; color: var(--text-tertiary); font-weight: 600;
            padding: 2px 10px; border-radius: var(--radius-full); background: var(--hover-bg);
        }
.task-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.task-card{
            position: relative; background: var(--card-bg); border: 1px solid var(--border-default);
            border-radius: var(--radius-lg); padding: 14px;
            backdrop-filter: blur(12px); transition: all 200ms ease;
        }
.task-card:not(.completed):not(.na):hover{ transform: translateY(-2px); border-color: var(--hover-border); box-shadow: var(--shadow-md); }
.task-card.completed{ border-color: rgba(34,197,94,0.18); }
.task-card.na{ opacity: 0.6; }
.task-card-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.task-card-title{ font-size: 14px; font-weight: 600; color: var(--text-primary); flex: 1; }
.task-status{
            display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
            font-size: 11px; font-weight: 700; padding: 3px 10px;
            border-radius: var(--radius-full); white-space: nowrap;
        }
.task-status i{ font-size: 10px; }
.task-status-completed{ background: rgba(34,197,94,0.12); color: var(--success); }
.task-status-na{ background: rgba(239,68,68,0.12); color: var(--danger); }
.task-status-pending{ background: rgba(251,191,36,0.12); color: var(--warning); }
.task-card-desc{ font-size: 13px; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; }
.task-card-meta{ display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.task-meta-chip{
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 12px; font-weight: 700; font-family: var(--font-heading);
            padding: 3px 10px; border-radius: var(--radius-full);
        }
.task-meta-chip i{ font-size: 10px; }
.task-meta-usd{ background: rgba(34,197,94,0.12); color: var(--success); }
.task-meta-xp{ background: rgba(245,158,11,0.12); color: var(--warning); }
.task-card-submit{ margin-top: 10px; }
.task-card-submit .btn{ width: 100%; }
.task-instructions{
            margin-top: 10px; padding: 10px 12px; border-radius: 8px;
            background: var(--bg-elevated); border: 1px solid var(--border-default);
            display: flex; flex-direction: column; gap: 4px;
        }
.task-instructions-label{
            display: inline-flex; align-items: center; gap: 5px;
            font-weight: 700; color: var(--primary); font-size: 11px;
        }
.task-instructions-label i{ font-size: 11px; }
.task-instructions-text{ font-size: 12px; color: var(--text-tertiary); white-space: pre-wrap; line-height: 1.5; }
.submissions-section{ margin-top: 16px; }
.submissions-card{ padding: 16px; }
.submissions-header{
            display: flex; align-items: center; gap: 8px;
            font-weight: 700; font-size: 14px; color: var(--text-primary); margin-bottom: 12px;
        }
.submissions-header i{ color: var(--primary); font-size: 13px; }
.submission-item{
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 0; border-bottom: 1px solid var(--border-default); gap: 12px;
        }
.submission-item:last-child{ border-bottom: none; }
.submission-info{ flex: 1; min-width: 0; }
.submission-info-title{ font-size: 13px; font-weight: 600; }
.submission-info-url{ font-size: 11px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.submission-info-note{
            font-size: 11px; margin-top: 2px;
        }
.submission-info-note.danger{ color: var(--danger); }
.submission-info-note.muted{ color: var(--text-secondary); }
@media (max-width: 640px){
            .task-grid{ grid-template-columns: 1fr; }
            .task-hero-title{ font-size: 19px; }
        }
/* Surveys page */
        .surveys-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(59,130,246,0.14), rgba(37,99,235,0.10) 45%, transparent);
            border: 1px solid rgba(59,130,246,0.22);
            
        }
.surveys-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.surveys-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(59,130,246,0.15); color: #60A5FA;
            border: 1px solid rgba(59,130,246,0.3);
        }
.surveys-hero-title-wrap{ min-width: 0; flex: 1; }
.surveys-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #93C5FD, #2563EB);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.surveys-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.surveys-hero-action{
            flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 14px; border-radius: 10px; font-size: 12px; font-weight: 600;
            color: #60A5FA; text-decoration: none; cursor: pointer;
            background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.3);
            transition: background var(--transition-fast) var(--ease-smooth), transform var(--transition-fast) var(--ease-smooth);
        }
.surveys-hero-action:hover{ background: rgba(59,130,246,0.2); transform: translateY(-1px); }
.surveys-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.surveys-hero-badges .badge{ background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.3); color: #60A5FA; }
.survey-logo{ text-align: center; margin-bottom: 16px; }
.survey-logo img{ display: inline-block; max-width: 200px; max-height: 70px; border-radius: 8px; }
.surveys-list{ display: flex; flex-direction: column; gap: 10px; }
.survey-item{
            position: relative; display: flex; align-items: center; gap: 14px;
            padding: 14px 16px; border-radius: var(--radius-lg); overflow: hidden;
            background: var(--bg-card); border: 1px solid var(--border-default);
            transition: transform var(--transition-fast) var(--ease-smooth), border-color var(--transition-fast) var(--ease-smooth), box-shadow var(--transition-fast) var(--ease-smooth);
        }
.survey-item::before{
            content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
            background: linear-gradient(180deg, #93C5FD, #2563EB); opacity: 0;
            transition: opacity var(--transition-fast) var(--ease-smooth);
        }
.survey-item:hover{ transform: translateY(-2px); border-color: rgba(59,130,246,0.35); box-shadow: 0 10px 28px rgba(0,0,0,0.16); }
.survey-item:hover::before{ opacity: 1; }
.survey-icon{
            width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 17px;
            color: #60A5FA; background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.2);
        }
.survey-info{ flex: 1; min-width: 0; }
.survey-title{ font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.survey-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.survey-chip{
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 11px; font-weight: 600; color: var(--text-secondary);
            padding: 4px 10px; border-radius: var(--radius-full);
            background: var(--hover-bg); border: 1px solid var(--border-default);
            white-space: nowrap;
        }
.survey-chip i{ font-size: 10px; }
.survey-chip.chip-reward{ color: var(--success); background: var(--success-light); border-color: rgba(34,197,94,0.2); }
.survey-chip i.fa-dollar-sign{ color: var(--success); }
.survey-chip i.fa-clock{ color: var(--info); }
.survey-chip i.fa-check-circle{ color: var(--success); }
.survey-stars{ color: #FFD700; font-size: 12px; letter-spacing: 1px; }
.survey-start-btn{
            flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
            padding: 9px 18px; border-radius: 10px; font-size: 13px;
            font-weight: 700; color: #fff; text-decoration: none; border: none; cursor: pointer;
            background: linear-gradient(135deg, #60A5FA, #2563EB 60%, #1D4ED8);
            box-shadow: 0 6px 16px rgba(37,99,235,0.3);
            transition: transform var(--transition-fast) var(--ease-smooth), box-shadow var(--transition-fast) var(--ease-smooth);
            white-space: nowrap;
        }
.survey-start-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,99,235,0.4); }
.survey-status{
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-full);
            text-transform: capitalize; white-space: nowrap;
        }
.survey-status.credited{ color: var(--success); background: var(--success-light); border: 1px solid rgba(34,197,94,0.2); }
.survey-status.pending{ color: var(--warning); background: var(--warning-light); border: 1px solid rgba(234,179,8,0.2); }
@media (max-width: 640px){
            .surveys-hero-title{ font-size: 19px; }
            .survey-item{ flex-wrap: wrap; }
            .survey-start-btn{ width: 100%; justify-content: center; }
        }
/* Loading state */
        .loading{ text-align: center; padding: 40px; color: var(--text-secondary); }
.loading i{ margin-right: 8px; }
/* Transfer page */
/* Transfer page hero */
.transfer-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(245,158,11,0.16), rgba(139,92,246,0.10) 45%, transparent);
            border: 1px solid rgba(245,158,11,0.18);
            
        }
.transfer-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.transfer-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(245,158,11,0.15); color: #FBBF24;
            border: 1px solid rgba(245,158,11,0.3);
        }
.transfer-hero-title-wrap{ min-width: 0; flex: 1; }
.transfer-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #FCD34D, #F59E0B);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.transfer-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.transfer-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; position: relative; z-index: 1; }
.transfer-hero-badge{
            display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
            border-radius: var(--radius-full); font-size: 11px; font-weight: 700;
        }
.transfer-hero-badge i{ font-size: 10px; }
.transfer-hero-badge.amber{ background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); color: #FCD34D; }
.transfer-hero .faucet-hero-stats{ margin-bottom: 0; }
@media (max-width: 640px){
            .transfer-hero-title{ font-size: 19px; }
        }
.transfer-warning{ padding: 10px 12px; }
.transfer-label{ font-size: 12px; color: var(--text-secondary); display: block; margin-bottom: 4px; }
.transfer-input{
            width: 100%; padding: 12px 14px; border-radius: 10px;
            border: 1px solid var(--border-default); background: var(--bg-input);
            color: var(--text-primary); font-size: 18px; font-weight: 700;
            text-align: center; outline: none; box-sizing: border-box;
            font-family: 'Exo 2', sans-serif;
            transition: border-color var(--transition-fast) var(--ease-smooth);
        }
.transfer-input:focus{ border-color: var(--primary); }
.transfer-input::placeholder{ font-weight: 400; color: var(--text-tertiary); }
.transfer-quick-btns{ display: flex; gap: 8px; margin-top: 8px; }
.transfer-quick-btns .btn{ flex: 1; }
/* Modal & Form helpers */
        .modal-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.modal-close{ background: none; border: none; color: var(--text-tertiary); font-size: 22px; cursor: pointer; line-height: 1; padding: 4px; border-radius: 6px; transition: color var(--transition-fast) var(--ease-smooth); }
.modal-close:hover{ color: var(--text-primary); }
.form-group{ margin-bottom: 12px; }
.form-label2{ font-size: 12px; color: var(--text-secondary); display: block; margin-bottom: 4px; }
.form-input{
            width: 100%; padding: 10px 12px; border-radius: 10px;
            border: 1px solid var(--border-default); background: var(--bg-input);
            color: var(--text-primary); font-size: 14px; font-family: 'Exo 2', sans-serif;
            outline: none; box-sizing: border-box;
            transition: border-color var(--transition-fast) var(--ease-smooth);
        }
.form-input:focus{ border-color: var(--primary); }
.form-input::placeholder{ color: var(--text-tertiary); }
select.form-input{ cursor: pointer; }
textarea.form-input{ resize: vertical; }
/* Support/Tickets page */
        .ticket-card{
            background: var(--bg-card); border: 1px solid var(--border-default);
            border-radius: 12px; padding: 14px; margin-bottom: 10px;
            cursor: pointer; transition: border-color var(--transition-fast) var(--ease-smooth);
        }
.ticket-card:hover{ border-color: var(--border-muted); }
.ticket-card-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ticket-card-header-left{ display: flex; align-items: center; gap: 8px; }
.ticket-category{
            font-size: 11px; font-weight: 500; color: var(--text-secondary);
            background: var(--bg-elevated); padding: 2px 8px; border-radius: 6px;
        }
.ticket-card-date{ font-size: 12px; color: var(--text-tertiary); }
.ticket-subject{ font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.ticket-preview{ font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.ticket-meta{ display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.ticket-meta-replies{ font-size: 12px; color: var(--text-tertiary); }
.ticket-meta-id{ font-size: 12px; color: var(--text-tertiary); }
.ticket-detail-container{ }
.ticket-detail-category{ display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ticket-msg-original{
            background: var(--bg-elevated); border-radius: 10px;
            padding: 12px; margin-bottom: 16px;
        }
.ticket-msg-label{ font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.ticket-msg-text{ font-size: 14px; white-space: pre-wrap; line-height: 1.5; }
.ticket-msg-date{ font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
.ticket-replies-section{ margin-bottom: 16px; }
.ticket-replies-heading{ font-size: 14px; color: var(--text-secondary); margin-bottom: 12px; }
.ticket-reply{
            border-left: 3px solid var(--border-default);
            padding: 10px 12px; margin-bottom: 10px;
            background: var(--bg-card); border-radius: 0 10px 10px 0;
        }
.ticket-reply.admin{ border-left-color: var(--primary); }
.ticket-reply-header{ display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ticket-reply-author{ font-size: 12px; font-weight: 600; }
.ticket-reply-date{ font-size: 12px; color: var(--text-tertiary); }
.ticket-reply-text{ font-size: 14px; white-space: pre-wrap; line-height: 1.5; }
.ticket-reply-form{ margin-top: 16px; }
.ticket-reply-form-heading{ font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
.ticket-reply-textarea{
            width: 100%; padding: 12px; border-radius: 10px;
            border: 1px solid var(--border-default); background: var(--bg-input);
            color: var(--text-primary); font-size: 14px; font-family: 'Exo 2', sans-serif;
            outline: none; resize: vertical; box-sizing: border-box;
            transition: border-color var(--transition-fast) var(--ease-smooth);
        }
.ticket-reply-textarea:focus{ border-color: var(--primary); }
.ticket-reply-textarea::placeholder{ color: var(--text-tertiary); }
/* Support specific */
.support-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(14,165,233,0.14), rgba(56,189,248,0.10) 45%, transparent);
            border: 1px solid rgba(14,165,233,0.18);
            
        }
.support-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.support-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(14,165,233,0.15); color: #7DD3FC;
            border: 1px solid rgba(14,165,233,0.3);
        }
.support-hero-title-wrap{ min-width: 0; flex: 1; }
.support-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #7DD3FC, #3B82F6);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.support-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.support-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; position: relative; z-index: 1; }
.support-hero-badges .badge-info{ background: rgba(14,165,233,0.12); border: 1px solid rgba(14,165,233,0.3); color: #7DD3FC; }
.support-hero .faucet-hero-stats{ margin-bottom: 0; }
.support-hero .faucet-hero-stat-ic{ background: rgba(14,165,233,0.12); color: #7DD3FC; }
.support-page .ticket-card{ border-radius: 14px; }
.support-page .ticket-card:hover{ transform: translateY(-3px); border-color: rgba(14,165,233,0.5); box-shadow: 0 10px 24px rgba(0,0,0,0.22); }
.support-page .ticket-category{ background: rgba(14,165,233,0.10); color: #7DD3FC; border: 1px solid rgba(14,165,233,0.2); font-weight: 600; }
.support-page .ticket-subject{ font-weight: 700; }
.support-page .ticket-preview{ color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.support-page .ticket-meta-replies{ color: var(--text-tertiary); }
.support-page .ticket-meta-id{ color: var(--text-tertiary); }
.support-page .btn-primary{
            background: linear-gradient(135deg, #38BDF8, #3B82F6 55%, #1D4ED8); border: none; color: #fff;
            border-radius: 10px; font-weight: 700; box-shadow: 0 4px 16px rgba(59,130,246,0.3);
        }
.support-page .btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59,130,246,0.4); }
.support-page .empty-state i{ color: #7DD3FC; }
@media (max-width: 640px){
            .support-hero-title{ font-size: 19px; }
        }
/* Profile specific */
.profile-page .card + .card{ margin-top: 12px; }
.profile-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(14,165,233,0.14), rgba(139,92,246,0.10) 45%, transparent);
            border: 1px solid rgba(14,165,233,0.18);
            
        }
.profile-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.profile-avatar-img-wrapper{ display: flex; justify-content: center; cursor: pointer; flex-shrink: 0; }
.profile-avatar-img{
            width: 80px; height: 80px; border-radius: 50%; margin: 0;
            border: 2px solid rgba(139,92,246,0.4); object-fit: cover; cursor: pointer;
            box-shadow: 0 8px 22px rgba(139,92,246,0.35);
        }
.profile-avatar-placeholder{
            width: 80px; height: 80px; border-radius: 50%; margin: 0;
            display: flex; align-items: center; justify-content: center; font-size: 28px;
            background: rgba(139,92,246,0.15); cursor: pointer; font-weight: 700;
            color: #A78BFA; border: 2px solid rgba(139,92,246,0.4);
            box-shadow: 0 8px 22px rgba(139,92,246,0.35);
        }
.profile-hero-title-wrap{ min-width: 0; flex: 1; }
.profile-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #7DD3FC, var(--info));
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.profile-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.profile-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; position: relative; z-index: 1; }
.profile-hero-badges .badge-info{ background: rgba(14,165,233,0.12); border: 1px solid rgba(14,165,233,0.3); color: #7DD3FC; }
.profile-hero-badges .badge-success{ background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.3); color: #A78BFA; }
.profile-hero .faucet-hero-stats{ margin-bottom: 0; }
.profile-section-title{ display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 12px; color: var(--text-primary); }
.profile-section-title i{ font-size: 13px; color: var(--info); }
.profile-tile-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-tile{ display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--bg-elevated); border: 1px solid var(--border-default); min-width: 0; }
.profile-tile-ic{ width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.profile-tile-meta{ min-width: 0; }
.profile-tile-v{ font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.2; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.profile-tile-l{ font-size: 11px; color: var(--text-tertiary); font-weight: 600; }
.profile-page .auth-field:focus{ border-color: var(--info); box-shadow: 0 0 0 3px rgba(139,92,246,0.15); }
[data-cd]{ flex-shrink: 0; }
#changePwBtn{
            width: 100%; padding: 13px; border: none; border-radius: var(--radius-lg);
            font-family: var(--font-heading); font-size: 15px; font-weight: 700; cursor: pointer;
            background: linear-gradient(135deg, #38BDF8, #3B82F6 55%, #1D4ED8); color: #fff;
            box-shadow: 0 6px 20px rgba(59,130,246,0.35);
        }
.profile-page .card .btn-primary{ background: linear-gradient(135deg, #38BDF8, #3B82F6 55%, #1D4ED8); border: none; color: #fff; border-radius: 10px; font-weight: 700; }
.profile-page .card .btn-danger{ background: linear-gradient(135deg, #FDA4AF, #F43F5E 55%, #9F1239); border: none; color: #fff; border-radius: 10px; font-weight: 700; }
.profile-page .card .btn-success{ background: linear-gradient(135deg, #6EE7B7, #10B981 55%, #065F46); border: none; color: #fff; border-radius: 10px; font-weight: 700; }
#langSelectorWrapper select{ cursor: pointer; }
@media (max-width: 640px){
            .profile-hero-title{ font-size: 19px; }
        }
/* Notifications page */
.notif-header{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.notif-header-left{ display: flex; align-items: center; gap: 12px; }
.notif-back-btn{ width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border-default); background: var(--glass-bg); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); }
.notif-back-btn:hover{ color: var(--brand-500); border-color: var(--brand-200); background: var(--brand-100); transform: translateY(-1px); }
.notif-title{ display: flex; align-items: center; gap: 10px; }
.notif-title-ic{ width: 34px; height: 34px; border-radius: 10px; background: var(--brand-100); color: var(--brand-500); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.notif-title h2{ font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0; }
.notif-clear-btn{ display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(229,62,62,0.25); cursor: pointer; font-size: 12px; font-weight: 600; transition: all var(--transition-fast); }
.notif-clear-btn:hover{ background: var(--danger); color: #fff; transform: translateY(-1px); }
.notif-list{ display: flex; flex-direction: column; gap: 10px; }
.notif-item{ position: relative; display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--glass-bg); border: 1px solid var(--border-default); cursor: pointer; transition: all var(--transition-fast); overflow: hidden; }
.notif-item:hover{ border-color: var(--border-strong); background: var(--bg-elevated); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.notif-item.unread{ border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.05); }
.notif-item.unread::before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-500); }
html[dir="rtl"] .notif-item.unread::before{ left: auto; right: 0; }
.notif-priority-dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.notif-p-urgent{ background: #E53E3E; box-shadow: 0 0 0 3px rgba(229,62,62,0.15); }
.notif-p-high{ background: #FFA502; box-shadow: 0 0 0 3px rgba(255,165,2,0.15); }
.notif-body{ flex: 1; min-width: 0; }
.notif-top{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notif-item-title{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--text-primary); }
.notif-tag{ font-size: 9px; padding: 2px 7px; border-radius: 6px; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0; }
.notif-tag.urgent{ background: #E53E3E22; color: #E53E3E; border: 1px solid #E53E3E44; }
.notif-tag.high{ background: #FFA50222; color: #FFA502; border: 1px solid #FFA50244; }
.notif-unread-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--brand-500); flex-shrink: 0; box-shadow: 0 0 8px var(--brand-500); }
.notif-msg{ font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 4px 0 0; word-break: break-word; }
.notif-date{ display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-muted); margin-top: 8px; }
.notif-date i{ font-size: 9px; opacity: 0.7; }
@media (max-width: 480px){ .notif-clear-btn{ width: 100%; justify-content: center; } .notif-header-left{ flex: 1; } }
/* History page */
        .history-tabbar{
            display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; padding-bottom: 4px;
        }
.history-tabbar::-webkit-scrollbar{ display: none; }
.history-tabbar-wrap{ position: relative; }
.history-tab-swipe{
            display: none;
        }
.history-tabbar-wrap.scrollable .history-tab-swipe{ display: none; }
.history-tabbar-wrap.scrollable .history-tabbar{
        }
.history-tab-btn{
            font-size: 12px; padding: 7px 14px; border-radius: var(--radius-full);
            border: 1px solid var(--border-default); cursor: pointer; font-weight: 600;
            transition: all var(--transition-fast) var(--ease-smooth);
            background: var(--bg-card); color: var(--text-secondary);
        }
.history-tab-btn i{ margin-right: 6px; font-size: 11px; }
.history-tab-btn:hover:not(.active){ border-color: var(--border-strong); color: var(--text-primary); transform: translateY(-1px); }
.history-tab-btn.active{
            background: var(--primary); color: #000; border-color: transparent;
        }
.history-group-label{
            display: flex; align-items: center; gap: 10px;
            font-size: 11px; font-weight: 700; color: var(--text-tertiary);
            text-transform: uppercase; letter-spacing: 0.8px; margin: 16px 2px 8px;
        }
.history-group-label:first-child{ margin-top: 0; }
.history-group-label::after{ content: ''; flex: 1; height: 1px; background: var(--border-subtle); }
.history-list{ display: flex; flex-direction: column; gap: 8px; }
.history-item{
            background: var(--bg-card); border: 1px solid var(--border-default);
            border-radius: var(--radius-lg); padding: 13px 16px;
            display: flex; align-items: center; gap: 14px;
            transition: all var(--transition-fast) var(--ease-smooth);
            position: relative; overflow: hidden;
        }
.history-item::before{
            content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
            background: var(--item-color, var(--text-tertiary)); opacity: 0;
            transition: opacity var(--transition-fast) var(--ease-smooth);
        }
.history-item:hover{ border-color: var(--border-strong); background: var(--bg-card-hover); transform: translateX(2px); }
.history-item:hover::before{ opacity: 0.7; }
.history-icon{
            width: 40px; height: 40px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 15px; flex-shrink: 0;
        }
.history-info{ flex: 1; min-width: 0; }
.history-desc{ font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-date{ font-size: 11px; color: var(--text-tertiary); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.history-date i{ font-size: 9px; opacity: 0.7; }
.history-amount{ font-size: 12px; font-weight: 700; flex-shrink: 0; font-family: var(--font-heading); padding: 5px 11px; border-radius: var(--radius-full); letter-spacing: 0.2px; }
.history-amount.positive{ color: var(--success); background: var(--success-bg); }
.history-amount.negative{ color: var(--danger); background: var(--danger-bg); }
.history-pager{ display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
/* History page specific */
.history-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(245,158,11,0.14), rgba(217,119,6,0.10) 45%, transparent);
            border: 1px solid rgba(245,158,11,0.22);
            
        }
.history-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.history-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(245,158,11,0.15); color: #FBBF24;
            border: 1px solid rgba(245,158,11,0.3);
        }
.history-hero-title-wrap{ min-width: 0; flex: 1; }
.history-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #FDE68A, #F59E0B);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.history-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.history-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; position: relative; z-index: 1; }
.history-hero-badges .badge{ background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); color: #FBBF24; }
.history-page .history-tabbar{ padding-bottom: 10px; }
.history-page .history-tab-btn.active{ background: linear-gradient(135deg,#FBBF24,#F59E0B 55%,#D97706); color: #1F2937; border-color: transparent; }
.history-page .history-tab-btn:hover:not(.active){ border-color: rgba(245,158,11,0.5); color: var(--text-primary); }
.history-page .history-item{ border-radius: 14px; }
.history-page .history-item:hover{ transform: translateY(-2px); border-color: var(--border-strong); background: var(--bg-card-hover); }
.history-page .history-icon{ box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.history-page .history-pager .btn-secondary{ border-color: rgba(245,158,11,0.2); }
.history-page .empty-state i{ color: #FBBF24; }
@media (max-width: 640px){
            .history-hero-title{ font-size: 19px; }
        }
/* Withdraw History page */
        .withdraw-hero-action{
            flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 14px; border-radius: 10px; font-size: 12px; font-weight: 600;
            color: #FDA4AF; text-decoration: none; cursor: pointer;
            background: rgba(244,63,94,0.12); border: 1px solid rgba(244,63,94,0.3);
            transition: background var(--transition-fast) var(--ease-smooth), transform var(--transition-fast) var(--ease-smooth);
        }
.withdraw-hero-action:hover{ background: rgba(244,63,94,0.2); transform: translateY(-1px); }
.withdraw-history-page .wdh-tab-bar{
            display: flex; margin-bottom: 16px;
            background: var(--bg-elevated); border: 1px solid var(--border-default);
            border-radius: var(--radius-md); padding: 3px;
        }
.withdraw-history-page .wdh-tab-btn{
            flex: 1; padding: 8px 0; font-size: 13px; font-weight: 600;
            text-align: center; border: none; background: transparent;
            color: var(--text-secondary); border-radius: 6px;
            cursor: pointer; transition: all var(--transition-fast) var(--ease-smooth);
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        }
.withdraw-history-page .wdh-tab-btn.active{
            background: linear-gradient(135deg, #FDA4AF, #F43F5E 55%, #9F1239);
            color: #fff; font-weight: 700;
            box-shadow: 0 4px 14px rgba(244,63,94,0.3);
        }
.withdraw-history-page .wdh-item{
            position: relative; overflow: hidden; border-radius: var(--radius-lg);
            margin-bottom: 10px; border: 1px solid var(--border-default);
            transition: transform var(--transition-fast) var(--ease-smooth), border-color var(--transition-fast) var(--ease-smooth), box-shadow var(--transition-fast) var(--ease-smooth);
        }
.withdraw-history-page .wdh-item::before{
            content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
            background: linear-gradient(180deg, #FDA4AF, #F43F5E); opacity: 0;
            transition: opacity var(--transition-fast) var(--ease-smooth);
        }
.withdraw-history-page .wdh-item:hover{ transform: translateY(-2px); border-color: rgba(244,63,94,0.35); box-shadow: 0 10px 28px rgba(0,0,0,0.16); }
.withdraw-history-page .wdh-item:hover::before{ opacity: 1; }
.withdraw-history-page .wdh-item-top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.withdraw-history-page .wdh-item-left{ display: flex; align-items: center; gap: 12px; }
.withdraw-history-page .wdh-icon{
            width: 42px; height: 42px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center; font-size: 15px;
            background: rgba(244,63,94,0.12); color: #FDA4AF; border: 1px solid rgba(244,63,94,0.2);
        }
.withdraw-history-page .wdh-method-name{ font-size: 14px; font-weight: 700; color: var(--text-primary); }
.withdraw-history-page .wdh-method-date{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.withdraw-history-page .wdh-amount{ font-size: 17px; font-weight: 800; color: #F43F5E; letter-spacing: -0.01em; }
.withdraw-history-page .wdh-status{ font-weight: 700; font-size: 11px; padding: 3px 10px; }
.withdraw-history-page .wdh-detail-row{
            display: flex; align-items: center; justify-content: space-between;
            font-size: 12px; padding: 0 4px;
        }
.withdraw-history-page .wdh-detail-label{ color: var(--text-secondary); font-weight: 500; }
.withdraw-history-page .wdh-detail-value{ font-weight: 700; color: var(--text-primary); }
.withdraw-history-page .wdh-detail-value.success{ color: var(--success); }
.withdraw-history-page .wdh-tx-link{ color: var(--info); text-decoration: underline; }
.withdraw-history-page .wdh-wallet{ color: var(--text-tertiary); word-break: break-all; text-align: right; font-size: 11px; max-width: 45%; }
.withdraw-history-page .wdh-note{ font-size: 12px; color: var(--text-tertiary); margin-top: 4px; padding: 0 4px; }
@media (max-width: 640px){
            .withdraw-history-page .wdh-item-top{ flex-direction: column; align-items: flex-start; gap: 8px; }
            .withdraw-history-page .wdh-wallet{ max-width: 100%; text-align: left; }
        }
/* Toast improvements */
        #toastContainer{ position: fixed; top: 20px; right: 20px; z-index: 400; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.toast{
            padding: 14px 18px; border-radius: var(--radius-lg);
            backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 8px 32px rgba(0,0,0,0.4);
            animation: fadeIn 300ms ease forwards;
            display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; position: relative; overflow: hidden;
        }
.toast-success{ background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.2); }
.toast-error{ background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.2); }
.toast-warning{ background: rgba(234,179,8,0.15); border-color: rgba(234,179,8,0.2); }
.toast-info{ background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.2); }
.toast-icon{ font-size: 16px; flex-shrink: 0; }
.toast-success .toast-icon{ color: var(--success); }
.toast-error .toast-icon{ color: var(--danger); }
.toast-warning .toast-icon{ color: var(--warning); }
.toast-info .toast-icon{ color: var(--info); }
.toast-body{ flex: 1; color: var(--text-primary); }
.toast-close{ background: none; border: none; color: var(--text-tertiary); font-size: 18px; cursor: pointer; padding: 0 2px; line-height: 1; }
.toast-close:hover{ color: var(--text-primary); }
.toast-progress{ position: absolute; bottom: 0; left: 0; height: 2px; background: rgba(255,255,255,0.15); border-radius: 0 0 var(--radius-lg) var(--radius-lg); animation: toastProgress linear forwards; }
@keyframes toastProgress{ from { width: 100%; } to { width: 0%; } }
.toast-out{ opacity: 0; transform: translateX(100%); transition: all 200ms ease; }
/* Tablet: collapsible sidebar + hide right sidebar */
        @media (max-width: 1024px){.sidebar{ transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,0.4); }
.sidebar.open{ transform: translateX(0); }
.sidebar-overlay.open{ display: block; }
.sidebar-toggle-btn{ display: inline-flex; }
#collapseSidebarBtn, #fullscreenBtn{ display: none; }
.rs-toggle-btn{ display: none; }
.content-area{ margin-left: 0; }
.content-header{ padding: 10px 16px; }
.content-layout{ flex-direction: column; }
.right-sidebar{ width: 100%; border-left: none; border-top: 1px solid rgba(255,255,255,0.06); padding: 16px 20px; }
.content-body{ padding: 20px; }
.stats-row{ grid-template-columns: repeat(2, 1fr); }
.header-divider{ display: none; }
.header-user-btn{ padding: 3px 3px; }
.header-user-chevron{ display: none; }
.content-header-left h2{ font-size: 15px; }}
/* Hide right-sidebar toggle on short/narrow desktops to avoid squeezing content */
@media (min-width: 1025px) and (max-width: 1440px) and (max-height: 900px){
    .rs-toggle-btn{ display: none !important; }
}
/* Mobile */
        @media (max-width: 640px){.content-header{ padding: 8px 12px; }
.content-header-left h2{ font-size: 14px; }
.header-balance-pill{ display: none; }
.header-btn{ width: 32px; height: 32px; font-size: 12px; border-radius: 8px; }
.header-user-btn{ padding: 2px; }
.header-user-avatar{ width: 26px; height: 26px; font-size: 11px; }
.header-btn .badge{ top: -4px; right: -4px; min-width: 15px; height: 15px; font-size: 7px; border-width: 1.5px; }
.content-body{ padding: 14px; }
.content-header-actions{ gap: 6px; }
.stats-row{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat-card{ padding: 12px; }
.stat-card-value{ font-size: 15px; }
.right-sidebar{ display: none; }
.sidebar-brand{ padding: 0px 0px 0px; }
.sidebar-item{ padding: 8px 12px; margin: 1px 8px; }
.sidebar-logout{ margin: 6px 10px 12px; padding: 8px 14px; }
.app-footer{ flex-direction: column; gap: 6px; padding: 12px 14px; text-align: center; }}
/* Loading Screen */
        #loadingScreen{
            position: fixed; inset: 0; z-index: 300;
            background: var(--bg-page);
            display: flex; align-items: center; justify-content: center;
        }
/* Market specific */
.market-page .market-hero{
            position: relative; overflow: hidden; border-radius: var(--radius-xl);
            padding: 24px 22px 20px; margin-bottom: 16px;
            background: linear-gradient(150deg, rgba(139,92,246,0.16), rgba(88,28,135,0.12) 45%, transparent);
            border: 1px solid rgba(139,92,246,0.22);
            
        }
.market-hero-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.market-hero-icon{
            width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 22px;
            background: rgba(139,92,246,0.15); color: #C4B5FD;
            border: 1px solid rgba(139,92,246,0.3);
        }
.market-hero-title-wrap{ min-width: 0; flex: 1; }
.market-hero-title{
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2;
            background: linear-gradient(90deg, #C4B5FD, #8B5CF6);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
.market-hero-sub{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
.market-hero-badges{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; position: relative; z-index: 1; }
.market-hero .faucet-hero-stats{ margin-bottom: 0; }
.market-hero .faucet-hero-stat-ic{ background: rgba(139,92,246,0.12); color: #C4B5FD; }
.market-tabs{ border-bottom: 1px solid var(--border); padding-bottom: 0; margin-bottom: 0; flex-wrap: wrap; }
.market-tab{ border-radius: 8px; flex-shrink: 0; }
.market-tab.active{ border-bottom: 2px solid #8B5CF6; }
.market-page .market-tab.btn-primary{ background: linear-gradient(135deg, #A78BFA, #8B5CF6 55%, #6D28D9); color: #fff; border-color: transparent; box-shadow: 0 1px 3px rgba(139,92,246,0.3), inset 0 1px 0 rgba(255,255,255,0.2); }
.market-page .market-tab.btn-primary:hover{ box-shadow: 0 4px 16px rgba(139,92,246,0.35); transform: translateY(-1px); }
.market-chart-wrap{ margin-top: 20px; }
.market-chart-wrap .glass-card{ padding: 16px; border-color: rgba(139,92,246,0.18); }
.market-chart-wrap .glass-card h3{ font-size:14px; font-weight:600; margin-bottom:12px; color:var(--text-secondary); display:flex; align-items:center; gap:8px; }
.market-chart-wrap .glass-card h3 i{ color: #A78BFA; }
.market-filter-bar{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:16px; align-items:center; background:var(--bg-card); border:1px solid var(--border-default); border-radius:10px; padding:10px 14px; }
.market-filter-bar .filter-input-wrap{ grid-column:1 / -1; position:relative; display:flex; align-items:center; margin-bottom:2px; }
.market-filter-bar .filter-input-wrap i{ position:absolute; left:10px; font-size:12px; color:#A78BFA; pointer-events:none; }
.market-filter-bar input{ width:100%; padding:7px 10px 7px 28px; border-radius:6px; border:1px solid var(--border-muted); background:var(--bg-input); color:var(--text-primary); font-size:13px; outline:none; transition:border-color 0.2s; }
.market-filter-bar input:focus{ border-color:#8B5CF6; box-shadow: 0 0 0 3px rgba(139,92,246,0.15); }
.market-filter-bar input::placeholder{ color:var(--text-tertiary); }
.market-filter-bar select{ padding:7px 10px; border-radius:6px; border:1px solid var(--border-muted); background:var(--bg-input); color:var(--text-primary); font-size:13px; outline:none; cursor:pointer; transition:border-color 0.2s; width:100%; }
.market-filter-bar select:hover{ border-color:#A78BFA; }
.market-filter-bar select:focus{ border-color:#8B5CF6; box-shadow: 0 0 0 3px rgba(139,92,246,0.15); }
@media (max-width: 640px){
            .market-filter-bar{ grid-template-columns:1fr; }
            .market-filter-bar .filter-input-wrap{ grid-column:auto; }
        }
.market-page .inv-card{ border-radius: 14px; }
.market-page .inv-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.22); }
.market-page .inv-card.common:hover{ border-color: rgba(148,163,184,0.5); box-shadow: 0 10px 24px rgba(148,163,184,0.18); }
.market-page .inv-card.rare:hover{ border-color: rgba(59,130,246,0.5); box-shadow: 0 10px 24px rgba(59,130,246,0.2); }
.market-page .inv-card.epic:hover{ border-color: rgba(139,92,246,0.5); box-shadow: 0 10px 24px rgba(139,92,246,0.22); }
.market-page .inv-card.legendary:hover{ border-color: rgba(245,158,11,0.5); box-shadow: 0 10px 24px rgba(245,158,11,0.2); }
.market-page .inv-card-name{ font-weight: 700; }
.market-page .inv-card.legendary .inv-card-name{ background: linear-gradient(90deg, #FBBF24, #F59E0B); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.market-page .inv-card-actions .btn-primary{ background: linear-gradient(135deg, #A78BFA, #8B5CF6 55%, #6D28D9); border: none; color: #fff; }
.market-page .inv-card-actions .btn-primary:hover{ box-shadow: 0 4px 16px rgba(139,92,246,0.35); transform: translateY(-1px); }
.market-page .glass-card > i.fa-store,
.market-page #marketSellTab .glass-card > i.fa-tag{
            font-size: 26px !important; color: #A78BFA !important; width: 72px; height: 72px;
            display: flex !important; align-items: center; justify-content: center;
            margin: 0 auto 16px !important; border-radius: 20px;
            background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.28);
            box-shadow: 0 8px 22px rgba(139,92,246,0.2);
        }
.market-fee-note{ display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px auto 0; max-width: 560px; padding: 8px 16px; border-radius: 20px; background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.2); font-size: 12px; color: var(--text-tertiary); text-align: center; }
.market-fee-note i{ color: #A78BFA; font-size: 12px; }
.market-fee-note a{ color: #A78BFA; }
@media (max-width: 640px){
            .market-hero-title{ font-size: 19px; }
        }
/* RTL overrides */
        html[dir="rtl"] .sidebar{ left: auto; right: 0; border-right: none; border-left: 1px solid rgba(255,255,255,0.06); }
html[dir="rtl"] .content-area{ margin-left: 0; margin-right: var(--sidebar-width); }
html[dir="rtl"] .right-sidebar{ border-left: none; border-right: none; padding: 20px 0 20px 16px; }
html[dir="rtl"] .sidebar-group-label::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08)); }
html[dir="rtl"] .rs-activity-item:hover{ transform: translateX(-3px); }
html[dir="rtl"] .sidebar-item:hover{ transform: translateX(-4px); }
html[dir="rtl"] .sidebar-item.active::before{ left: auto; right: 0; border-radius: 3px 0 0 3px; }
html[dir="rtl"] .sidebar-badge{ margin-left: 0; margin-right: auto; }
html[dir="rtl"] .header-dropdown{ right: auto; left: 0; }
html[dir="rtl"] .lang-dropdown{ right: auto; left: 0; }
html[dir="rtl"] .sidebar-toggle-btn{ margin-right: 0; margin-left: 8px; }
html[dir="rtl"] .sidebar-group-label::after{
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08));
        }
html[dir="rtl"] .fa-arrow-left:before{ content: "\f061"; }
html[dir="rtl"] .fa-arrow-right:before{ content: "\f060"; }
@media (max-width: 1024px){html[dir="rtl"] .sidebar{ transform: translateX(100%); box-shadow: -4px 0 24px rgba(0,0,0,0.4); }
html[dir="rtl"] .sidebar.open{ transform: translateX(0); }
html[dir="rtl"] .content-area{ margin-right: 0; }
html[dir="rtl"] .market-filter-bar .filter-input-wrap i{ left: auto; right: 10px; }
html[dir="rtl"] .market-filter-bar input{ padding: 7px 28px 7px 10px; }}
#pageLoader{ position:fixed; top:0; left:0; width:100%; height:3px; z-index:9999; pointer-events:none; opacity:0; transition:opacity 0.15s; }
#pageLoader.active{ opacity:1; }
#pageLoader .bar{ height:100%; width:0; background:linear-gradient(90deg, #F59E0B, #D97706, #F59E0B); border-radius:0 2px 2px 0; animation:loaderSlide 1.2s ease-in-out infinite; }
@keyframes loaderSlide{ 0%{width:0;margin-left:0} 50%{width:60%;margin-left:20%} 100%{width:0;margin-left:100%} }