/* ====================================================================
   TASKOLOOT PREMIUM CSS — CLEAN CONSOLIDATED VERSION
   No conflicts, no duplicates, proper hierarchy
   ==================================================================== */

/* ========== DESIGN TOKENS ========== */
:root {
    --tl-bg: #0A0E1A;
    --tl-surface: #111827;
    --tl-surface-2: #1A2035;
    --tl-border: rgba(148,163,184,0.08);
    --tl-border-hover: rgba(14,165,233,0.3);
    --tl-primary: #0EA5E9;
    --tl-primary-light: #38BDF8;
    --tl-success: #10B981;
    --tl-warning: #F59E0B;
    --tl-danger: #EF4444;
    --tl-purple: #8B5CF6;
    --tl-text: #F1F5F9;
    --tl-text-2: #94A3B8;
    --tl-text-3: #64748B;
    --tl-text-4: #475569;
    --tl-radius: 16px;
    --tl-radius-sm: 12px;
    --tl-radius-xs: 8px;
    --tl-shadow: 0 4px 16px rgba(0,0,0,0.2);
    --tl-shadow-hover: 0 12px 32px rgba(0,0,0,0.4), 0 0 24px rgba(14,165,233,0.1);
    --tl-font-head: 'Space Grotesk','Inter',sans-serif;
    --tl-font-body: 'Inter',system-ui,sans-serif;
    --tl-font-mono: 'JetBrains Mono',monospace;
    --tl-easing: cubic-bezier(0.16,1,0.3,1);
}

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

/* ========== BASE ========== */
body {
    font-family: var(--tl-font-body) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    background-color: var(--tl-bg) !important;
    color: var(--tl-text) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--tl-font-head) !important;
    color: var(--tl-text) !important;
    letter-spacing: -0.025em !important;
    line-height: 1.15 !important;
}

h1 { font-size: clamp(2rem,4vw,3rem) !important; font-weight: 700 !important; }
h2 { font-size: 1.5rem !important; font-weight: 600 !important; }
h3 { font-size: 1.25rem !important; font-weight: 600 !important; }

a { color: var(--tl-primary-light); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--tl-primary); }

::selection { background: rgba(14,165,233,0.4); color: #fff; }
html { scroll-behavior: smooth; }
*:focus-visible { outline: 2px solid var(--tl-primary-light); outline-offset: 2px; border-radius: 4px; }

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(14,165,233,0.4); }
* { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,0.15) transparent; }

/* ========== PRELOADER ========== */
#preloader { background: var(--tl-bg) !important; }
#preloader .loader {
    width: 48px !important; height: 48px !important;
    border: 3px solid rgba(14,165,233,0.15) !important;
    border-top-color: var(--tl-primary) !important;
    border-radius: 50%;
    animation: tl-spin 0.8s linear infinite;
}
@keyframes tl-spin { to { transform: rotate(360deg); } }

/* ========== LAYOUT ========== */
.layout-wrapper, .layout-page, .content-wrapper { background: transparent !important; }
.container-p-y { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.container-fluid { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

/* ========== CARDS — UNIFIED ========== */
.card {
    background: var(--tl-surface) !important;
    border: 1px solid var(--tl-border) !important;
    border-radius: var(--tl-radius) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, var(--tl-shadow) !important;
    color: var(--tl-text) !important;
    transition: transform 0.3s var(--tl-easing), box-shadow 0.3s ease, border-color 0.3s !important;
    backdrop-filter: blur(10px);
}
.card:hover {
    border-color: var(--tl-border-hover) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, var(--tl-shadow-hover) !important;
    transform: translateY(-2px);
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--tl-border) !important;
    color: var(--tl-text) !important;
    padding: 1rem 1.5rem !important;
}
.card-body { color: var(--tl-text) !important; padding: 1.5rem !important; }
.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--tl-border) !important;
    color: var(--tl-text-2) !important;
}
.card-title { color: var(--tl-text) !important; font-weight: 600 !important; }
.card-text { color: var(--tl-text-2) !important; }

/* ========== BUTTONS — UNIFIED ========== */
.btn {
    font-family: var(--tl-font-body) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: var(--tl-radius-sm) !important;
    border: none !important;
    transition: all 0.2s var(--tl-easing) !important;
    cursor: pointer !important;
}
.btn-primary {
    background: linear-gradient(135deg, var(--tl-primary) 0%, #0284C7 100%) !important;
    color: #fff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 4px 14px rgba(14,165,233,0.35) !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--tl-primary-light) 0%, var(--tl-primary) 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 20px rgba(14,165,233,0.45) !important;
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
    background: var(--tl-surface-2) !important;
    border: 1px solid var(--tl-border) !important;
    color: var(--tl-text) !important;
}
.btn-secondary:hover {
    background: var(--tl-surface-2) !important;
    border-color: var(--tl-primary) !important;
    color: var(--tl-primary-light) !important;
}
.btn-success {
    background: linear-gradient(135deg, var(--tl-success) 0%, #059669 100%) !important;
    color: #fff !important;
}
.btn-danger { background: var(--tl-danger) !important; color: #fff !important; }

/* ========== FORMS ========== */
.form-control, .form-select {
    background-color: rgba(10,14,26,0.6) !important;
    border: 1px solid rgba(148,163,184,0.15) !important;
    color: var(--tl-text) !important;
    border-radius: var(--tl-radius-sm) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s !important;
}
.form-control:focus, .form-select:focus {
    background-color: rgba(10,14,26,0.8) !important;
    border-color: var(--tl-primary) !important;
    color: var(--tl-text) !important;
    box-shadow: 0 0 0 4px rgba(14,165,233,0.15) !important;
    outline: none !important;
}
.form-label {
    color: var(--tl-text-2) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.5rem !important;
}

/* ========== TEXT COLORS ========== */
.text-primary { color: var(--tl-primary-light) !important; }
.text-success { color: var(--tl-success) !important; }
.text-warning { color: var(--tl-warning) !important; }
.text-danger { color: var(--tl-danger) !important; }
.text-muted, .text-secondary { color: var(--tl-text-3) !important; }
.text-body, .text-white, .text-light { color: var(--tl-text) !important; }

/* ========== BADGES ========== */
.badge {
    padding: 0.25rem 0.625rem !important;
    border-radius: 6px !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
}
.badge.bg-primary { background: rgba(14,165,233,0.15) !important; color: var(--tl-primary-light) !important; border: 1px solid rgba(14,165,233,0.3); }
.badge.bg-success { background: rgba(16,185,129,0.15) !important; color: var(--tl-success) !important; border: 1px solid rgba(16,185,129,0.3); }
.badge.bg-warning { background: rgba(245,158,11,0.15) !important; color: var(--tl-warning) !important; border: 1px solid rgba(245,158,11,0.3); }
.badge.bg-danger { background: rgba(239,68,68,0.15) !important; color: var(--tl-danger) !important; border: 1px solid rgba(239,68,68,0.3); }
.badge.bg-secondary { background: rgba(148,163,184,0.1) !important; color: var(--tl-text-2) !important; border: 1px solid rgba(148,163,184,0.2); }

/* ========== TABLES ========== */
.table { color: var(--tl-text) !important; }
.table > :not(caption) > * > * {
    background-color: transparent !important;
    border-bottom: 1px solid var(--tl-border) !important;
    color: var(--tl-text) !important;
    padding: 0.875rem 1rem !important;
}
.table thead th {
    background: var(--tl-surface-2) !important;
    color: var(--tl-text-3) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}
.table tbody tr:hover { background: rgba(14,165,233,0.04) !important; }

/* ========== NAVBAR ========== */
.layout-navbar {
    background: rgba(10,14,26,0.7) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    border-bottom: 1px solid var(--tl-border) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2) !important;
    padding: 0.5rem 0 !important;
}
.navbar { padding: 0.5rem 1.5rem !important; }
.navbar-nav .nav-link {
    color: var(--tl-text-2) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.875rem !important;
    border-radius: 10px !important;
    transition: all 0.2s var(--tl-easing) !important;
}
.navbar-nav .nav-link:hover { color: var(--tl-text) !important; background: var(--tl-surface-2) !important; }
.navbar-nav .nav-link.active { color: var(--tl-primary-light) !important; background: rgba(14,165,233,0.1) !important; }

/* ========== SIDEBAR ========== */
.layout-menu {
    background: linear-gradient(180deg, rgba(17,24,39,0.95) 0%, rgba(10,14,26,0.98) 100%) !important;
    border-right: 1px solid var(--tl-border) !important;
    width: 260px !important;
}
.layout-menu .app-brand { padding: 1.5rem 1.25rem !important; height: auto !important; min-height: 88px; }
.layout-menu .app-brand .app-brand-img { max-height: 48px !important; width: auto !important; }
.menu-inner { padding: 0.75rem !important; overflow-y: auto; max-height: calc(100vh - 88px); }
.menu-item { margin: 2px 0 !important; }
.menu-link {
    padding: 0.625rem 0.875rem !important;
    border-radius: 10px !important;
    color: var(--tl-text-2) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: all 0.2s var(--tl-easing) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.menu-link:hover { background: var(--tl-surface-2) !important; color: var(--tl-text) !important; transform: translateX(2px); }
.menu-item.active > .menu-link {
    background: linear-gradient(135deg, rgba(14,165,233,0.12) 0%, rgba(56,189,248,0.04) 100%) !important;
    color: var(--tl-primary-light) !important;
    box-shadow: inset 3px 0 0 var(--tl-primary) !important;
}
.menu-icon { width: 18px !important; height: 18px !important; opacity: 0.85; }
.menu-link .badge {
    padding: 0.25rem 0.5rem !important;
    border-radius: 6px !important;
    font-size: 0.6875rem !important;
    margin-left: auto !important;
}

/* ========== MODALS ========== */
.modal-content {
    background: linear-gradient(180deg, rgba(26,32,53,0.95) 0%, rgba(17,24,39,0.98) 100%) !important;
    border: 1px solid rgba(148,163,184,0.12) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(40px);
    overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--tl-border) !important; padding: 1.25rem 1.5rem !important; }
.modal-body { padding: 1.5rem !important; color: var(--tl-text) !important; }
.modal-footer { border-top: 1px solid var(--tl-border) !important; background: var(--tl-surface-2) !important; }
.modal-backdrop.show { backdrop-filter: blur(8px); background: rgba(10,14,26,0.85) !important; opacity: 1 !important; }
.modal-title { font-family: var(--tl-font-head) !important; font-weight: 700 !important; }

/* ========== AUTH MODAL — COMPACT ========== */
.tl-auth-modal .modal-dialog { max-width: 420px !important; margin: 1.5rem auto !important; }
.tl-auth-modal .modal-content { height: auto !important; max-height: 90vh !important; }
.tl-auth-modal .modal-body { padding: 0 !important; }
.tl-auth-pane-wrap { display: none; }
.tl-auth-pane-wrap.active { display: block; }
.tl-auth-pane { padding: 1.25rem 1.5rem 1.5rem !important; }
.tl-auth-form { display: flex !important; flex-direction: column !important; gap: 0.875rem !important; margin: 0 !important; padding: 0 !important; }

/* ========== DROPDOWNS ========== */
.dropdown-menu {
    background: var(--tl-surface) !important;
    border: 1px solid rgba(148,163,184,0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
    padding: 0.375rem !important;
}
.dropdown-item { color: var(--tl-text-2) !important; border-radius: 8px; padding: 0.5rem 0.75rem; font-size: 0.8125rem; font-weight: 500; transition: all 0.15s; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(14,165,233,0.08); color: var(--tl-primary-light) !important; }
.dropdown-item.active { background: rgba(14,165,233,0.1); color: var(--tl-primary-light) !important; }
.dropdown-divider { border-color: var(--tl-border) !important; }

/* ========== TABS / PILLS ========== */
.nav-tabs { border-bottom: 1px solid var(--tl-border) !important; }
.nav-tabs .nav-link {
    color: var(--tl-text-2) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 0.75rem 1.25rem !important;
    font-weight: 500 !important;
}
.nav-tabs .nav-link:hover { color: var(--tl-text) !important; border-bottom-color: var(--tl-border) !important; }
.nav-tabs .nav-link.active { color: var(--tl-primary-light) !important; background: transparent !important; border-bottom-color: var(--tl-primary) !important; }
.nav-pills .nav-link { color: var(--tl-text-2) !important; background: var(--tl-surface-2) !important; border-radius: 10px; margin: 0 4px; }
.nav-pills .nav-link.active { background: linear-gradient(135deg, var(--tl-primary) 0%, #0284C7 100%) !important; color: #fff !important; }

/* ========== ACCORDION ========== */
.accordion-item { background: var(--tl-surface) !important; border: 1px solid var(--tl-border) !important; border-radius: 12px !important; margin-bottom: 0.5rem; overflow: hidden; }
.accordion-button { background: var(--tl-surface) !important; color: var(--tl-text) !important; font-weight: 500; padding: 1rem 1.25rem; }
.accordion-button:not(.collapsed) { background: var(--tl-surface-2) !important; color: var(--tl-primary-light) !important; box-shadow: none !important; }
.accordion-button:focus { box-shadow: 0 0 0 4px rgba(14,165,233,0.15) !important; border-color: var(--tl-primary) !important; }
.accordion-body { color: var(--tl-text-2) !important; padding: 1rem 1.25rem; }

/* ========== PAGINATION ========== */
.pagination { gap: 4px; }
.page-item .page-link {
    background: var(--tl-surface-2) !important;
    border: 1px solid var(--tl-border) !important;
    color: var(--tl-text-2) !important;
    border-radius: 8px !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
}
.page-item .page-link:hover { background: var(--tl-surface-2); color: var(--tl-primary-light); border-color: var(--tl-primary); }
.page-item.active .page-link { background: var(--tl-primary) !important; color: #fff !important; border: none !important; }

/* ========== OFFER CARDS ========== */
.offer-card {
    background: var(--tl-surface) !important;
    border: 1px solid var(--tl-border) !important;
    border-radius: var(--tl-radius) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, var(--tl-shadow) !important;
    transition: all 0.3s var(--tl-easing) !important;
    overflow: hidden;
    padding: 0.625rem !important;
    backdrop-filter: blur(10px);
}
.offer-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--tl-border-hover) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, var(--tl-shadow-hover) !important;
}
.offer-card .card-img-block {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--tl-radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(14,165,233,0.08) 0%, rgba(139,92,246,0.05) 50%, rgba(16,185,129,0.05) 100%);
    margin-bottom: 0.5rem;
    min-height: 120px;
}
.offer-card .card-img-top {
    width: 100%; height: 100%; object-fit: cover; border-radius: var(--tl-radius-sm);
    transition: transform 0.4s var(--tl-easing); opacity: 0;
}
.offer-card .card-img-top.loaded { opacity: 1; }
.offer-card:hover .card-img-top { transform: scale(1.06); }
.offer-card .card-body { padding: 0.5rem 0.25rem !important; }
.offer-card .card-body .text-truncate {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.8125rem; font-weight: 600; color: var(--tl-text) !important;
    line-height: 1.3; min-height: 2.1em; word-break: break-word;
}
.offer-card .card-footer {
    padding: 0.5rem 0 0 !important;
    border-top: 1px solid var(--tl-border) !important;
    background: transparent !important;
}
.offer-card .f-w-600 > span { font-family: var(--tl-font-mono) !important; font-weight: 600 !important; color: var(--tl-text) !important; }
.offer-card .fa-play.position-absolute { opacity: 0 !important; }

/* ========== PARTNER CARDS ========== */
.tl-partner-card {
    position: relative; display: flex; flex-direction: column;
    width: 180px; min-height: 220px; border-radius: var(--tl-radius);
    overflow: hidden; cursor: pointer;
    background: linear-gradient(180deg, var(--partner-bg, #1e293b) 0%, rgba(10,14,26,0.95) 100%);
    border: 1px solid rgba(148,163,184,0.1);
    transition: all 0.3s var(--tl-easing);
}
.tl-partner-card:hover {
    transform: translateY(-4px);
    border-color: rgba(14,165,233,0.4);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 24px rgba(14,165,233,0.15);
}
.tl-partner-badge {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.25rem 0.5rem; border-radius: 6px;
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; z-index: 3; backdrop-filter: blur(8px);
}
.tl-badge-premium { background: linear-gradient(135deg, var(--tl-success) 0%, #059669 100%); color: #fff; }
.tl-badge-featured { background: linear-gradient(135deg, var(--tl-primary) 0%, #0284C7 100%); color: #fff; }
.tl-badge-hot { background: linear-gradient(135deg, var(--tl-warning) 0%, var(--tl-danger) 100%); color: #fff; }
.tl-badge-top { background: linear-gradient(135deg, var(--tl-purple) 0%, #7C3AED 100%); color: #fff; }
.tl-partner-logo-wrap { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.tl-partner-logo { max-width: 100%; max-height: 80px; object-fit: contain; transition: transform 0.4s var(--tl-easing); filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }
.tl-partner-card:hover .tl-partner-logo { transform: scale(1.08); }
.tl-partner-footer { padding: 0.875rem 1rem 1rem; text-align: center; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,0.06); }
.tl-partner-name { font-size: 0.75rem; font-weight: 700; color: #fff; margin: 0 0 0.375rem; text-transform: uppercase; letter-spacing: 0.05em; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.tl-partner-rating { display: flex; justify-content: center; gap: 1px; }

/* ========== ACTIVITY TICKER — ULTRA COMPACT ========== */
.tl-earn-card .card-body .swiper,
.live-cashouts .swiper { max-height: 40px !important; overflow: hidden !important; padding: 0 !important; }
.tl-earn-card .swiper-slide,
.live-cashouts .swiper-slide {
    background: rgba(26,32,53,0.5) !important;
    border: 1px solid var(--tl-border) !important;
    border-radius: 999px !important;
    padding: 0.2rem 0.625rem !important;
    margin: 0 0.25rem !important;
    max-width: 180px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
}
.tl-earn-card .swiper-slide img,
.live-cashouts .swiper-slide img { width: 20px !important; height: 20px !important; border-radius: 50% !important; object-fit: cover !important; border: 1px solid var(--tl-border) !important; flex-shrink: 0; }
.tl-earn-card .swiper-slide span,
.live-cashouts .swiper-slide span { font-size: 0.625rem !important; font-weight: 500; color: var(--tl-text) !important; line-height: 1.2; white-space: nowrap; }
.tl-earn-card .swiper-slide .badge,
.live-cashouts .swiper-slide .badge { font-size: 0.5625rem !important; padding: 0.1rem 0.375rem !important; background: rgba(14,165,233,0.15) !important; color: var(--tl-primary-light) !important; border: 1px solid rgba(14,165,233,0.2) !important; border-radius: 999px; }
.tl-earn-card .swiper-slide small,
.live-cashouts .swiper-slide small { font-size: 0.5rem !important; color: var(--tl-text-4) !important; text-transform: uppercase; }
.tl-earn-card .swiper-slide .fa-rocket,
.live-cashouts .swiper-slide .fa-rocket { font-size: 0.625rem; color: var(--tl-text-3); }
.card:has(.live-cashouts) { background: transparent !important; border: none !important; box-shadow: none !important; }
.card:has(.live-cashouts) .card-body { padding: 0 !important; background: transparent !important; }
.card:has(.live-cashouts) .card-header { display: none !important; }

/* ========== SWIPER CONTAINERS ========== */
.tl-earn-card .swiper { overflow-x: auto !important; overflow-y: hidden !important; padding: 0.25rem 0.25rem !important; -webkit-overflow-scrolling: touch; }
.tl-earn-card .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; gap: 12px !important; align-items: stretch !important; }
.tl-earn-card .swiper-slide { width: 200px !important; max-width: 200px !important; min-width: 200px !important; flex-shrink: 0 !important; }
.tl-earn-card .swiper:not(:has(.offer-card)) .swiper-slide { width: 180px !important; max-width: 180px !important; min-width: 180px !important; }
.swiper-offer-card { width: 200px !important; }

/* ========== SHIMMER LOADING ========== */
@keyframes tl-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton-card, .skeleton, .skeleton-img, .skeleton-text, .skeleton-footer {
    background: linear-gradient(90deg, rgba(17,24,39,0.4) 0%, rgba(26,32,53,0.7) 20%, rgba(38,50,80,0.9) 40%, rgba(26,32,53,0.7) 60%, rgba(17,24,39,0.4) 100%) !important;
    background-size: 200% 100% !important;
    animation: tl-shimmer 1.8s ease-in-out infinite !important;
    border: 1px solid var(--tl-border) !important;
    border-radius: 12px !important;
}
.skeleton-card { border-radius: 16px !important; padding: 0.625rem !important; }
.skeleton-img { width: 100% !important; aspect-ratio: 1 !important; border-radius: 12px !important; margin-bottom: 0.5rem !important; }
.skeleton-text { height: 10px !important; margin: 0.375rem 0 !important; width: 90% !important; }
.skeleton-footer { height: 16px !important; width: 50% !important; margin-top: 0.5rem !important; }

/* ========== AURORA BACKGROUND ========== */
@keyframes tl-aurora-1 { 0%,100% { transform: translate(0,0) scale(1); opacity: 0.5; } 33% { transform: translate(30%,-20%) scale(1.1); opacity: 0.7; } 66% { transform: translate(-20%,30%) scale(0.9); opacity: 0.4; } }
.tl-hero-wrap { position: relative; overflow: hidden; }
.tl-hero-wrap::before {
    content: ''; position: absolute; inset: -50%;
    background: radial-gradient(ellipse 80% 50% at 20% 30%, rgba(14,165,233,0.15) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 70%, rgba(139,92,246,0.1) 0%, transparent 60%);
    animation: tl-aurora-1 20s ease-in-out infinite; pointer-events: none; z-index: 0;
}
.tl-hero-wrap > .container-fluid { position: relative; z-index: 1; }

/* ========== SPOTLIGHT HOVER ========== */
.offer-card, .tl-partner-card, .tl-step, .tl-stat-block { --tl-spot-x: 50%; --tl-spot-y: 50%; position: relative; }
.offer-card::before, .tl-partner-card::before, .tl-step::before, .tl-stat-block::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle 120px at var(--tl-spot-x) var(--tl-spot-y), rgba(56,189,248,0.08) 0%, transparent 70%);
    opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 1; border-radius: inherit;
}
.tl-spotlight-active::before { opacity: 1; }
.offer-card > *, .tl-partner-card > *, .tl-step > *, .tl-stat-block > * { position: relative; z-index: 2; }

/* ========== PAGE TRANSITION ========== */
@keyframes tl-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.tl-earn-page, .tl-profile, .tl-leaderboard, .tl-offers-page, .tl-ref, .tl-rewards { animation: tl-fade-up 0.5s var(--tl-easing) both; }

/* ========== RESPONSIVE ========== */
@media (max-width:767.98px) {
    .container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; }
    .container-p-y { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .card-body { padding: 1.25rem !important; }
    .tl-offer-card-wrap, .swiper-slide { width: 160px !important; }
}
@media (max-width:575.98px) {
    .container-fluid { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
    .card-body { padding: 1rem !important; }
    .tl-offer-card-wrap, .swiper-slide { width: 150px !important; }
    .tl-partner-card { width: 150px !important; min-height: 200px !important; }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ========== OFFER CARDS ========== */
.offer-card {
    background: var(--tl-surface) !important;
    border: 1px solid var(--tl-border) !important;
    border-radius: var(--tl-radius) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, var(--tl-shadow) !important;
    transition: all 0.3s var(--tl-easing) !important;
    overflow: hidden;
    padding: 0.625rem !important;
    backdrop-filter: blur(10px);
}
.offer-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--tl-border-hover) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, var(--tl-shadow-hover) !important;
}
.offer-card .card-img-block {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--tl-radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(14,165,233,0.08) 0%, rgba(139,92,246,0.05) 50%, rgba(16,185,129,0.05) 100%);
    margin-bottom: 0.5rem;
    min-height: 120px;
}
.offer-card .card-img-top {
    width: 100%; height: 100%; object-fit: cover; border-radius: var(--tl-radius-sm);
    transition: transform 0.4s var(--tl-easing); opacity: 0;
}
.offer-card .card-img-top.loaded { opacity: 1; }
.offer-card:hover .card-img-top { transform: scale(1.06); }
.offer-card .card-body { padding: 0.5rem 0.25rem !important; }
.offer-card .card-body .text-truncate {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.8125rem; font-weight: 600; color: var(--tl-text) !important;
    line-height: 1.3; min-height: 2.1em; word-break: break-word;
}
.offer-card .card-footer {
    padding: 0.5rem 0 0 !important;
    border-top: 1px solid var(--tl-border) !important;
    background: transparent !important;
}
.offer-card .f-w-600 > span { font-family: var(--tl-font-mono) !important; font-weight: 600 !important; color: var(--tl-text) !important; }
.offer-card .fa-play.position-absolute { opacity: 0 !important; }

/* ========== PARTNER CARDS ========== */
.tl-partner-card {
    position: relative; display: flex; flex-direction: column;
    width: 180px; min-height: 220px; border-radius: var(--tl-radius);
    overflow: hidden; cursor: pointer;
    background: linear-gradient(180deg, var(--partner-bg, #1e293b) 0%, rgba(10,14,26,0.95) 100%);
    border: 1px solid rgba(148,163,184,0.1);
    transition: all 0.3s var(--tl-easing);
}
.tl-partner-card:hover {
    transform: translateY(-4px);
    border-color: rgba(14,165,233,0.4);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 24px rgba(14,165,233,0.15);
}
.tl-partner-badge {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.25rem 0.5rem; border-radius: 6px;
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; z-index: 3; backdrop-filter: blur(8px);
}
.tl-badge-premium { background: linear-gradient(135deg, var(--tl-success) 0%, #059669 100%); color: #fff; }
.tl-badge-featured { background: linear-gradient(135deg, var(--tl-primary) 0%, #0284C7 100%); color: #fff; }
.tl-badge-hot { background: linear-gradient(135deg, var(--tl-warning) 0%, var(--tl-danger) 100%); color: #fff; }
.tl-badge-top { background: linear-gradient(135deg, var(--tl-purple) 0%, #7C3AED 100%); color: #fff; }
.tl-partner-logo-wrap { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.tl-partner-logo { max-width: 100%; max-height: 80px; object-fit: contain; transition: transform 0.4s var(--tl-easing); filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }
.tl-partner-card:hover .tl-partner-logo { transform: scale(1.08); }
.tl-partner-footer { padding: 0.875rem 1rem 1rem; text-align: center; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,0.06); }
.tl-partner-name { font-size: 0.75rem; font-weight: 700; color: #fff; margin: 0 0 0.375rem; text-transform: uppercase; letter-spacing: 0.05em; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.tl-partner-rating { display: flex; justify-content: center; gap: 1px; }

/* ========== ACTIVITY TICKER — ULTRA COMPACT ========== */
.tl-earn-card .card-body .swiper,
.live-cashouts .swiper { max-height: 40px !important; overflow: hidden !important; padding: 0 !important; }
.tl-earn-card .swiper-slide,
.live-cashouts .swiper-slide {
    background: rgba(26,32,53,0.5) !important;
    border: 1px solid var(--tl-border) !important;
    border-radius: 999px !important;
    padding: 0.2rem 0.625rem !important;
    margin: 0 0.25rem !important;
    max-width: 180px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
}
.tl-earn-card .swiper-slide img,
.live-cashouts .swiper-slide img { width: 20px !important; height: 20px !important; border-radius: 50% !important; object-fit: cover !important; border: 1px solid var(--tl-border) !important; flex-shrink: 0; }
.tl-earn-card .swiper-slide span,
.live-cashouts .swiper-slide span { font-size: 0.625rem !important; font-weight: 500; color: var(--tl-text) !important; line-height: 1.2; white-space: nowrap; }
.tl-earn-card .swiper-slide .badge,
.live-cashouts .swiper-slide .badge { font-size: 0.5625rem !important; padding: 0.1rem 0.375rem !important; background: rgba(14,165,233,0.15) !important; color: var(--tl-primary-light) !important; border: 1px solid rgba(14,165,233,0.2) !important; border-radius: 999px; }
.tl-earn-card .swiper-slide small,
.live-cashouts .swiper-slide small { font-size: 0.5rem !important; color: var(--tl-text-4) !important; text-transform: uppercase; }
.tl-earn-card .swiper-slide .fa-rocket,
.live-cashouts .swiper-slide .fa-rocket { font-size: 0.625rem; color: var(--tl-text-3); }
.card:has(.live-cashouts) { background: transparent !important; border: none !important; box-shadow: none !important; }
.card:has(.live-cashouts) .card-body { padding: 0 !important; background: transparent !important; }
.card:has(.live-cashouts) .card-header { display: none !important; }

/* ========== SWIPER CONTAINERS ========== */
.tl-earn-card .swiper { overflow-x: auto !important; overflow-y: hidden !important; padding: 0.25rem 0.25rem !important; -webkit-overflow-scrolling: touch; }
.tl-earn-card .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; gap: 12px !important; align-items: stretch !important; }
.tl-earn-card .swiper-slide { width: 200px !important; max-width: 200px !important; min-width: 200px !important; flex-shrink: 0 !important; }
.tl-earn-card .swiper:not(:has(.offer-card)) .swiper-slide { width: 180px !important; max-width: 180px !important; min-width: 180px !important; }
.swiper-offer-card { width: 200px !important; }

/* ========== SHIMMER LOADING ========== */
@keyframes tl-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton-card, .skeleton, .skeleton-img, .skeleton-text, .skeleton-footer {
    background: linear-gradient(90deg, rgba(17,24,39,0.4) 0%, rgba(26,32,53,0.7) 20%, rgba(38,50,80,0.9) 40%, rgba(26,32,53,0.7) 60%, rgba(17,24,39,0.4) 100%) !important;
    background-size: 200% 100% !important;
    animation: tl-shimmer 1.8s ease-in-out infinite !important;
    border: 1px solid var(--tl-border) !important;
    border-radius: 12px !important;
}
.skeleton-card { border-radius: 16px !important; padding: 0.625rem !important; }
.skeleton-img { width: 100% !important; aspect-ratio: 1 !important; border-radius: 12px !important; margin-bottom: 0.5rem !important; }
.skeleton-text { height: 10px !important; margin: 0.375rem 0 !important; width: 90% !important; }
.skeleton-footer { height: 16px !important; width: 50% !important; margin-top: 0.5rem !important; }

/* ========== AURORA BACKGROUND ========== */
@keyframes tl-aurora-1 { 0%,100% { transform: translate(0,0) scale(1); opacity: 0.5; } 33% { transform: translate(30%,-20%) scale(1.1); opacity: 0.7; } 66% { transform: translate(-20%,30%) scale(0.9); opacity: 0.4; } }
.tl-hero-wrap { position: relative; overflow: hidden; }
.tl-hero-wrap::before {
    content: ''; position: absolute; inset: -50%;
    background: radial-gradient(ellipse 80% 50% at 20% 30%, rgba(14,165,233,0.15) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 70%, rgba(139,92,246,0.1) 0%, transparent 60%);
    animation: tl-aurora-1 20s ease-in-out infinite; pointer-events: none; z-index: 0;
}
.tl-hero-wrap > .container-fluid { position: relative; z-index: 1; }

/* ========== SPOTLIGHT HOVER ========== */
.offer-card, .tl-partner-card, .tl-step, .tl-stat-block { --tl-spot-x: 50%; --tl-spot-y: 50%; position: relative; }
.offer-card::before, .tl-partner-card::before, .tl-step::before, .tl-stat-block::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle 120px at var(--tl-spot-x) var(--tl-spot-y), rgba(56,189,248,0.08) 0%, transparent 70%);
    opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 1; border-radius: inherit;
}
.tl-spotlight-active::before { opacity: 1; }
.offer-card > *, .tl-partner-card > *, .tl-step > *, .tl-stat-block > * { position: relative; z-index: 2; }

/* ========== PAGE TRANSITION ========== */
@keyframes tl-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.tl-earn-page, .tl-profile, .tl-leaderboard, .tl-offers-page, .tl-ref, .tl-rewards { animation: tl-fade-up 0.5s var(--tl-easing) both; }

/* ========== RESPONSIVE ========== */
@media (max-width:767.98px) {
    .container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; }
    .container-p-y { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .card-body { padding: 1.25rem !important; }
    .tl-offer-card-wrap, .swiper-slide { width: 160px !important; }
}
@media (max-width:575.98px) {
    .container-fluid { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
    .card-body { padding: 1rem !important; }
    .tl-offer-card-wrap, .swiper-slide { width: 150px !important; }
    .tl-partner-card { width: 150px !important; min-height: 200px !important; }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ========== EMERGENCY TEXT VISIBILITY FIX ========== */

/* Force all text inside cards to be visible */
.offer-card .card-body *,
.offer-card .card-footer *,
.tl-offer-card *,
.tl-partner-card *,
.tl-partner-footer *,
.tl-partner-name,
.tl-offer-title,
.tl-offer-name,
.tl-offer-desc,
.tl-offer-price,
.tl-price-usd,
.tl-price-whole,
.tl-price-decimal,
.tl-price-coin,
.tl-offer-cta,
.tl-stat-value,
.tl-stat-label {
    color: #F1F5F9 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Partner card name — white */
.tl-partner-name {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
}

/* Offer card title — white */
.offer-card .card-body .text-truncate,
.tl-offer-title {
    color: #F1F5F9 !important;
    -webkit-text-fill-color: #F1F5F9 !important;
}

/* Offer card description — gray but visible */
.offer-card .card-body .text-secondary,
.tl-offer-desc {
    color: #94A3B8 !important;
}

/* Price — blue */
.tl-offer-price,
.tl-price-usd,
.tl-price-whole,
.offer-card .f-w-600 span {
    color: #F1F5F9 !important;
}

/* Offer card footer price — make visible */
.offer-card .f-w-600,
.offer-card .f-w-600 * {
    color: #F1F5F9 !important;
}

/* Partner footer — visible */
.tl-partner-footer,
.tl-partner-footer * {
    color: #fff !important;
}

/* Star rating — visible */
.tl-partner-rating svg {
    opacity: 1 !important;
}

/* Badge text — visible */
.tl-partner-badge,
.tl-offer-featured-badge {
    color: #fff !important;
}

/* Device icons — visible */
.tl-offer-devices,
.tl-offer-devices * {
    color: #94A3B8 !important;
    opacity: 1 !important;
}

/* Card body text — force visible */
.card-body {
    color: #F1F5F9 !important;
}

.card-body * {
    color: inherit;
}

/* Text white — force */
.text-white {
    color: #F1F5F9 !important;
}

/* Text body — force */
.text-body {
    color: #F1F5F9 !important;
}

/* Remove any opacity:0 that might be hiding text */
.tl-offer-card,
.tl-partner-card,
.offer-card {
    opacity: 1 !important;
}

.tl-offer-card *,
.tl-partner-card *,
.offer-card * {
    opacity: 1 !important;
}

/* Make sure tab panes show content */
.tl-auth-pane-wrap.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.tl-auth-pane-wrap.active * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ========== EMERGENCY: FORCE TEXT VISIBILITY ========== */

/* Force ALL text inside cards to be visible */
.offer-card,.offer-card *,.offer-card .card-body,.offer-card .card-body *,.offer-card .card-footer,.offer-card .card-footer *,.offer-card .text-truncate,.offer-card .text-white,.offer-card .f-w-600,.offer-card .f-w-600 span,.offer-card .f-w-600 *{color:#F1F5F9 !important;opacity:1 !important;visibility:visible !important;-webkit-text-fill-color:#F1F5F9 !important;}
.offer-card .card-body .text-secondary,.offer-card .text-secondary{color:#94A3B8 !important;-webkit-text-fill-color:#94A3B8 !important;}
.tl-offer-card,.tl-offer-card *,.tl-offer-title,.tl-offer-desc,.tl-offer-price,.tl-price-usd,.tl-price-whole,.tl-price-decimal,.tl-price-coin,.tl-offer-cta,.tl-offer-name{color:#F1F5F9 !important;opacity:1 !important;visibility:visible !important;-webkit-text-fill-color:#F1F5F9 !important;}
.tl-offer-desc{color:#94A3B8 !important;-webkit-text-fill-color:#94A3B8 !important;}
.tl-offer-price,.tl-price-usd,.tl-price-whole,.tl-offer-price .tl-price-whole{color:#38BDF8 !important;-webkit-text-fill-color:#38BDF8 !important;}
.tl-partner-card,.tl-partner-card *,.tl-partner-footer,.tl-partner-footer *,.tl-partner-name,.tl-partner-rating{color:#fff !important;opacity:1 !important;visibility:visible !important;-webkit-text-fill-color:#fff !important;}
.tl-partner-badge,.tl-partner-badge *,.tl-offer-featured-badge,.tl-offer-featured-badge *{color:#fff !important;opacity:1 !important;-webkit-text-fill-color:#fff !important;}
.tl-offer-img,.tl-partner-logo,.offer-card .card-img-top,.offer-card img{opacity:1 !important;visibility:visible !important;}
.offer-card,.tl-offer-card,.tl-partner-card,.card{opacity:1 !important;visibility:visible !important;}
.card-body,.card-body *{color:#F1F5F9 !important;opacity:1 !important;visibility:visible !important;}
.text-white{color:#F1F5F9 !important;-webkit-text-fill-color:#F1F5F9 !important;}
.text-body{color:#F1F5F9 !important;-webkit-text-fill-color:#F1F5F9 !important;}
.text-secondary{color:#94A3B8 !important;-webkit-text-fill-color:#94A3B8 !important;}
.text-muted{color:#94A3B8 !important;-webkit-text-fill-color:#94A3B8 !important;}
.text-primary{color:#38BDF8 !important;-webkit-text-fill-color:#38BDF8 !important;}
.f-w-600,.f-w-600 span,.f-w-600 *{color:#F1F5F9 !important;-webkit-text-fill-color:#F1F5F9 !important;}
.tl-offer-devices,.tl-offer-devices *,.offer-card .badge.bg-label-dark,.offer-card .badge.bg-label-dark *{color:#94A3B8 !important;opacity:1 !important;}
.tl-partner-rating svg{opacity:1 !important;visibility:visible !important;}
.tl-auth-modal *,.tl-auth-form *,.tl-field *,.tl-input *,.tl-auth-submit{color:#F1F5F9 !important;opacity:1 !important;visibility:visible !important;}
.tl-hero-stat-num,.tl-hero-stat-label,.tl-stat-num,.tl-stat-value,.tl-stat-label{color:#F1F5F9 !important;opacity:1 !important;visibility:visible !important;}
.tl-section-title,.tl-earn-section-title,.tl-section-sub,.tl-earn-section-sub{color:#F1F5F9 !important;opacity:1 !important;visibility:visible !important;}
.tl-earn-view-all,.tl-filter-btn{color:#94A3B8 !important;opacity:1 !important;}
.tl-earn-card .swiper-slide *,.live-cashouts .swiper-slide *{color:#F1F5F9 !important;opacity:1 !important;}

/* Force opacity 1 on everything except modal backdrop */
*{opacity:1 !important;}
.modal-backdrop{opacity:0.85 !important;}

/* ========== FIX: PARTNER CARDS SWIPER ========== */
/* Show all partner cards in horizontal scroll */
.tl-earn-card .card-body .d-flex.flex-row.flex-nowrap.overflow-auto{
    overflow-x:auto !important;
    overflow-y:visible !important;
}

.tl-earn-card .swiper{
    overflow:visible !important;
    width:100% !important;
}

.tl-earn-card .swiper-wrapper{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    align-items:stretch !important;
    width:max-content !important;
}

.tl-earn-card .swiper-slide{
    width:180px !important;
    max-width:180px !important;
    min-width:180px !important;
    flex-shrink:0 !important;
    margin:0 !important;
    padding:0 !important;
}

/* Partner card width */
.tl-partner-card{
    width:180px !important;
    max-width:180px !important;
    min-width:180px !important;
}

/* Old partner card format */
.partner-card{
    width:180px !important;
    max-width:180px !important;
    min-width:180px !important;
    margin:0 !important;
}

@media (max-width:575.98px){
    .tl-earn-card .swiper-slide,
    .tl-partner-card,
    .partner-card{
        width:150px !important;
        max-width:150px !important;
        min-width:150px !important;
    }
}

/* ========== HIDE PLAY BUTTON ON OFFER CARDS ========== */
.offer-card .fa-play.position-absolute,
.offer-card .card-img-block .fa-play,
.tl-offer-card .tl-offer-play,
.tl-offer-img-wrap .fa-play{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
}

/* Also hide any blue circular play button */
.offer-card .text-primary.rounded-circle,
.tl-offer-card .tl-offer-play{
    display:none !important;
}

/* ========== FIX: LEADERBOARD BIG AVATAR ========== */
.tl-lb-table .tl-user-cell img,.tl-lb-table .tl-user-avatar,.tl-lb-table tbody td img{width:28px !important;height:28px !important;max-width:28px !important;max-height:28px !important;object-fit:cover !important;border-radius:50% !important;flex-shrink:0 !important;display:inline-block !important;}
.tl-lb-table{table-layout:auto !important;width:100% !important;}
.tl-lb-table tbody tr{display:table-row !important;height:auto !important;}
.tl-lb-table tbody td{overflow:visible !important;}
.tl-lb-table-card{overflow:visible !important;}
.tl-lb-table-card .table-responsive{overflow-x:auto !important;overflow-y:visible !important;}
.tl-podium-card .tl-podium-avatar{width:64px !important;height:64px !important;max-width:64px !important;max-height:64px !important;}

/* ========== PARTNER CARD STYLING ========== */
.partner-card{background:linear-gradient(180deg,var(--partner-bg,#1e293b) 0%,rgba(10,14,26,0.95) 100%) !important;border:1px solid rgba(148,163,184,0.1) !important;border-radius:16px !important;overflow:hidden !important;transition:all 0.3s cubic-bezier(0.16,1,0.3,1) !important;width:180px !important;min-height:220px !important;}
.partner-card:hover{transform:translateY(-4px) !important;border-color:rgba(14,165,233,0.4) !important;box-shadow:0 12px 32px rgba(0,0,0,0.4),0 0 24px rgba(14,165,233,0.15) !important;}
.partner-card .card-header{background:transparent !important;border:none !important;padding:0 !important;}
.partner-card .card-body{padding:1rem !important;}
.partner-card .card-body img{max-height:80px !important;width:auto !important;object-fit:contain !important;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.3)) !important;transition:transform 0.4s cubic-bezier(0.16,1,0.3,1) !important;}
.partner-card:hover .card-body img{transform:scale(1.08) !important;}
.partner-card .card-footer{background:rgba(0,0,0,0.4) !important;border-top:1px solid rgba(255,255,255,0.06) !important;padding:0.875rem 1rem 1rem !important;text-align:center !important;}
.partner-card .card-footer span{color:#fff !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:0.05em !important;text-shadow:0 1px 4px rgba(0,0,0,0.6) !important;}
.partner-card .card-footer .text-warning{color:#FBBF24 !important;}
.partner-card .badge{font-size:0.625rem !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:0.05em !important;z-index:3 !important;}
.tl-earn-card .card-body .d-flex.flex-row.flex-nowrap.overflow-auto{overflow-x:auto !important;overflow-y:visible !important;}
.tl-earn-card .swiper{overflow:visible !important;width:100% !important;}
.tl-earn-card .swiper-wrapper{display:flex !important;flex-wrap:nowrap !important;gap:12px !important;align-items:stretch !important;width:max-content !important;min-width:100% !important;}
.tl-earn-card .swiper-slide{width:180px !important;max-width:180px !important;min-width:180px !important;flex-shrink:0 !important;margin:0 !important;padding:0 !important;height:auto !important;}
.partner-card .fa-play{display:none !important;opacity:0 !important;visibility:hidden !important;}
@media (max-width:575.98px){.partner-card,.tl-earn-card .swiper-slide{width:150px !important;max-width:150px !important;min-width:150px !important;}}

/* ========== FIX: PARTNER CARD SPACING ========== */
.tl-earn-card .swiper-slide{
    margin-right:16px !important;
    margin-left:0 !important;
    padding:0 !important;
}

.tl-earn-card .swiper-slide:last-child{
    margin-right:0 !important;
}

.tl-earn-card .swiper-wrapper{
    gap:0 !important;
}

.partner-card{
    margin:0 !important;
}

/* Also add gap to offer card swiper */
.swiper-offer-card{
    margin-right:12px !important;
}

.swiper-offer-card:last-child{
    margin-right:0 !important;
}

@media (max-width:575.98px){
    .tl-earn-card .swiper-slide{
        margin-right:12px !important;
    }
}

/* ========== FIX: PARTNER CARDS - GAP + HEIGHT + CENTER LOGOS ========== */

/* Override the previous margin:0 rule */
.tl-earn-card .swiper-slide{
    margin:0 8px !important;
    padding:0 !important;
    height:auto !important;
}

/* Make partner cards taller */
.partner-card{
    width:180px !important;
    min-height:240px !important;
    margin:0 !important;
    overflow:hidden !important;
}

/* Center the logos properly */
.partner-card .card-body{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:1.5rem 1rem !important;
    flex:1 !important;
}

.partner-card .card-body img{
    max-width:100% !important;
    max-height:90px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
    margin:0 auto !important;
    display:block !important;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,0.3)) !important;
}

/* Add proper gap between swiper slides */
.tl-earn-card .swiper-wrapper{
    gap:16px !important;
}

/* Don't override mx-2 class */
.tl-earn-card .swiper-slide.mx-2{
    margin:0 8px !important;
}

/* Card footer — better spacing */
.partner-card .card-footer{
    padding:0.875rem 1rem 1rem !important;
}

@media (max-width:575.98px){
    .partner-card{
        width:150px !important;
        min-height:200px !important;
    }
    .partner-card .card-body img{
        max-height:70px !important;
    }
    .tl-earn-card .swiper-slide{
        margin:0 4px !important;
    }
    .tl-earn-card .swiper-wrapper{
        gap:8px !important;
    }
}

/* ========== AURORA GLOW EFFECT - HOMEPAGE HERO ========== */
@keyframes tl-aurora-1 {
    0%, 100% { transform: translate(0%, 0%) scale(1); opacity: 0.5; }
    33%      { transform: translate(30%, -20%) scale(1.1); opacity: 0.7; }
    66%      { transform: translate(-20%, 30%) scale(0.9); opacity: 0.4; }
}

@keyframes tl-aurora-2 {
    0%, 100% { transform: translate(0%, 0%) scale(1); opacity: 0.4; }
    33%      { transform: translate(-30%, 20%) scale(0.95); opacity: 0.6; }
    66%      { transform: translate(25%, -25%) scale(1.05); opacity: 0.3; }
}

.tl-hero-wrap {
    position: relative;
    overflow: hidden;
}

.tl-hero-wrap::before {
    content: '';
    position: absolute;
    inset: -50%;
    background:
        radial-gradient(ellipse 80% 50% at 20% 30%, rgba(14, 165, 233, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
    animation: tl-aurora-1 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.tl-hero-wrap::after {
    content: '';
    position: absolute;
    inset: -50%;
    background:
        radial-gradient(ellipse 60% 40% at 70% 30%, rgba(56, 189, 248, 0.12) 0%, transparent 35%),
        radial-gradient(ellipse 50% 40% at 30% 80%, rgba(168, 85, 247, 0.08) 0%, transparent 40%);
    animation: tl-aurora-2 25s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: 0;
}

/* Make sure hero content is above aurora */
.tl-hero-wrap > .container-fluid,
.tl-hero-wrap > .container-fluid > .tl-hero-grid {
    position: relative;
    z-index: 1;
}

/* Stats section subtle glow */
.tl-stats-section {
    position: relative;
    overflow: hidden;
}

.tl-stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.06) 0%, transparent 70%);
    transform: translateX(-50%);
    pointer-events: none;
}

.tl-stats-section > .container-fluid {
    position: relative;
    z-index: 1;
}

/* Final CTA card glow */
.tl-cta-card {
    position: relative;
    overflow: hidden;
}

.tl-cta-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.tl-cta-card > * {
    position: relative;
    z-index: 1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tl-hero-wrap::before,
    .tl-hero-wrap::after,
    .tl-cta-card::before {
        animation: none !important;
    }
}

/* ========== MOVING BACKGROUND GLOW ========== */
@keyframes tl-bg-glow {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

body {
    background-color: #0A0E1A !important;
    background-image:
        radial-gradient(circle at 20% 0%, rgba(14, 165, 233, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 100%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.03) 0%, transparent 60%) !important;
    background-size: 200% 200% !important;
    background-attachment: fixed !important;
    animation: tl-bg-glow 20s ease-in-out infinite !important;
}

/* ========== FIX: SHOP PAGE IMAGES VISIBLE ========== */
.shop-card img,
.shop-card .card-body img,
.card-container img {
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 80px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Force ALL local storage images visible */
img[src*="/storage/"],
img[src*="/assets/"] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Override any img opacity:0 rules */
img {
    opacity: 1 !important;
}

/* But keep modal backdrop opacity */
.modal-backdrop {
    opacity: 0.85 !important;
}

/* ========== SIDEBAR MENU ITEMS - BIGGER ========== */
.menu-link {
    font-size: 0.9375rem !important;
    padding: 0.75rem 1rem !important;
    min-height: 44px !important;
}

.menu-icon {
    width: 20px !important;
    height: 20px !important;
}

.menu-link .badge {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
}

.menu-header-text {
    font-size: 0.75rem !important;
}

/* ========== PREMIUM MOVING BACKGROUND — GPT SITE STYLE ========== */

/* Remove the circular orbs */
body::before,
body::after {
    display: none !important;
    content: none !important;
}

/* Subtle moving gradient on body — matches theme */
@keyframes tl-premium-bg {
    0%   { background-position: 0% 0%, 100% 100%, 50% 50%; }
    25%  { background-position: 50% 50%, 50% 0%, 0% 100%; }
    50%  { background-position: 100% 100%, 0% 0%, 100% 0%; }
    75%  { background-position: 50% 0%, 50% 100%, 0% 50%; }
    100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
}

body {
    background-color: #0A0E1A !important;
    background-image:
        radial-gradient(ellipse 60% 50% at 20% 20%, rgba(14, 165, 233, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 80% 80%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 30% at 50% 50%, rgba(16, 185, 129, 0.02) 0%, transparent 50%) !important;
    background-size: 200% 200%, 200% 200%, 200% 200% !important;
    background-attachment: fixed !important;
    animation: tl-premium-bg 30s ease-in-out infinite !important;
}

/* Hero section — subtle moving glow */
@keyframes tl-hero-glow {
    0%, 100% {
        background-position: 20% 30%, 80% 70%;
        opacity: 0.6;
    }
    50% {
        background-position: 60% 50%, 30% 40%;
        opacity: 0.9;
    }
}

.tl-hero-wrap::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse 70% 50% at 20% 30%, rgba(14, 165, 233, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 60%) !important;
    background-size: 200% 200% !important;
    animation: tl-hero-glow 15s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.tl-hero-wrap::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse 40% 30% at 70% 20%, rgba(56, 189, 248, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 30% 25% at 30% 80%, rgba(168, 85, 247, 0.03) 0%, transparent 50%) !important;
    background-size: 200% 200% !important;
    animation: tl-hero-glow 20s ease-in-out infinite reverse !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Subtle top border glow on cards */
@keyframes tl-card-shimmer {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.3; }
}

.tl-hero-card,
.tl-stat-card,
.tl-step {
    position: relative;
}

.tl-hero-card::before,
.tl-stat-card::before,
.tl-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.3), transparent);
    animation: tl-card-shimmer 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    body,
    .tl-hero-wrap::before,
    .tl-hero-wrap::after,
    .tl-hero-card::before,
    .tl-stat-card::before,
    .tl-step::before {
        animation: none !important;
    }
}