/**
 * TikStar Design System — dashboard créateur
 * Mode clair : accents légers | Mode sombre : aligné sur login.php
 */

html.tikstar-theme {
    --tikstar-violet: #7C4DFF;
    --tikstar-violet-light: #9B6CFF;
}

/* Mode clair — fond et accents discrets */
html.tikstar-theme:not(.dark) body.creator-dashboard-page {
    background-color: #f9fafb !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(124, 77, 255, 0.06) 0%, transparent 45%) !important;
}

html.tikstar-theme .reading-progress {
    background: linear-gradient(90deg, #7C4DFF, #9B6CFF) !important;
}

/* Mode sombre — palette login.php */
html.dark.tikstar-theme {
    --tikstar-bg: #060712;
    --tikstar-card-bg: rgba(10, 14, 28, 0.8);
    --tikstar-card-border: rgba(139, 92, 246, 0.15);
    --tikstar-violet-glow: rgba(124, 77, 255, 0.4);
    --tikstar-text: #f8f9fa;
    --tikstar-text-secondary: #94a3b8;
    --tikstar-header-bg: rgba(6, 7, 18, 0.8);
}

html.dark.tikstar-theme body.creator-dashboard-page,
html.dark.tikstar-theme body.creator-stats-page,
html.dark.tikstar-theme body.matchs-page,
html.dark.tikstar-theme body.leaderboard-page,
html.dark.tikstar-theme body.leaderboard-hours-page,
html.dark.tikstar-theme body.tutorials-page,
html.dark.tikstar-theme body.faq-page,
html.dark.tikstar-theme body.contact-page,
html.dark.tikstar-theme body.guide-page,
html.dark.tikstar-theme body.install-instructions-page,
html.dark.tikstar-theme body.creator-dashboard-page.leaderboard-page,
html.dark.tikstar-theme body.creator-dashboard-page.matchs-page {
    background: var(--tikstar-bg) !important;
    background-image:
        radial-gradient(circle at 50% 8%, rgba(124, 77, 255, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 80% 60%, rgba(139, 92, 246, 0.08) 0%, transparent 32%) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    color: var(--tikstar-text) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html.dark.tikstar-theme body.creator-dashboard-page::before,
html.dark.tikstar-theme body.creator-stats-page::before,
html.dark.tikstar-theme body.matchs-page::before,
html.dark.tikstar-theme body.leaderboard-page::before,
html.dark.tikstar-theme body.leaderboard-hours-page::before,
html.dark.tikstar-theme body.tutorials-page::before,
html.dark.tikstar-theme body.faq-page::before,
html.dark.tikstar-theme body.contact-page::before,
html.dark.tikstar-theme body.guide-page::before,
html.dark.tikstar-theme body.install-instructions-page::before {
    content: "";
    position: fixed;
    inset: -8%;
    background:
        radial-gradient(circle at 50% 0%, rgba(124, 77, 255, 0.4), transparent 16%),
        radial-gradient(circle at 78% 82%, rgba(124, 77, 255, 0.4), transparent 18%);
    filter: blur(80px);
    opacity: 0.55;
    pointer-events: none;
    transform: scale(1.03);
    z-index: -1;
}

@media (max-width: 767px) {
    html.dark.tikstar-theme body.creator-dashboard-page,
    html.dark.tikstar-theme body.creator-stats-page,
    html.dark.tikstar-theme body.matchs-page,
    html.dark.tikstar-theme body.leaderboard-page,
    html.dark.tikstar-theme body.leaderboard-hours-page,
    html.dark.tikstar-theme body.tutorials-page,
    html.dark.tikstar-theme body.faq-page,
    html.dark body.creator-dashboard-page,
    html.dark body.creator-stats-page,
    html.dark body.matchs-page,
    html.dark body.leaderboard-page,
    html.dark body.leaderboard-hours-page,
    html.dark body.tutorials-page,
    html.dark body.faq-page {
        background-color: #060712 !important;
        background-image: radial-gradient(circle at 50% 8%, rgba(124, 77, 255, 0.4) 0%, transparent 40%) !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
        background-size: cover !important;
    }
}

html.dark.tikstar-theme body.creator-dashboard-page,
html.dark body.creator-dashboard-page,
html.dark.tikstar-theme body.creator-dashboard-page .dashboard-container,
html.dark body.creator-dashboard-page .dashboard-container,
html.dark.tikstar-theme body.creator-dashboard-page .dashboard-content,
html.dark body.creator-dashboard-page .dashboard-content {
    background-color: #060712 !important;
}

html.dark.tikstar-theme body.creator-dashboard-page,
html.dark body.creator-dashboard-page {
    background: #060712 !important;
    background-image:
        radial-gradient(circle at 50% 12%, rgba(124, 77, 255, 0.38) 0%, transparent 34%),
        radial-gradient(circle at 80% 25%, rgba(139, 92, 246, 0.12) 0%, transparent 24%) !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    -webkit-background-attachment: scroll !important;
    background-size: 100% 52vh, 100% 52vh !important;
    background-position: top center, top center !important;
}

html.dark.tikstar-theme body.creator-dashboard-page::before,
html.dark body.creator-dashboard-page::before {
    content: "";
    position: fixed;
    left: 50%;
    top: -5%;
    width: 120vw;
    height: 42vh;
    transform: translateX(-50%);
    background: radial-gradient(circle at 50% 20%, var(--tikstar-violet-glow) 0%, transparent 38%);
    filter: blur(60px);
    opacity: 0.8;
    pointer-events: none;
    z-index: -1;
}

html.dark.tikstar-theme .custom-header.glass-card,
html.dark.tikstar-theme header.glass-card {
    background: var(--tikstar-header-bg) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(124, 77, 255, 0.1) !important;
    box-shadow: 0 1px 0 rgba(124, 77, 255, 0.05) !important;
}

html.dark.tikstar-theme .glass-card {
    background: var(--tikstar-card-bg) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--tikstar-card-border) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.05) !important;
}

html.dark.tikstar-theme .professional-border {
    border: 1px solid var(--tikstar-card-border) !important;
}

html.dark.tikstar-theme .text-gray-900,
html.dark.tikstar-theme .text-gray-800,
html.dark.tikstar-theme .text-gray-700,
html.dark.tikstar-theme .professional-heading {
    color: var(--tikstar-text) !important;
}

html.dark.tikstar-theme .text-gray-600,
html.dark.tikstar-theme .text-gray-500,
html.dark.tikstar-theme .text-gray-400,
html.dark.tikstar-theme .professional-text {
    color: var(--tikstar-text-secondary) !important;
}

html.dark.tikstar-theme .text-white {
    color: var(--tikstar-text) !important;
}

html.dark.tikstar-theme .bg-gray-50,
html.dark.tikstar-theme .bg-gray-100,
html.dark.tikstar-theme .bg-gray-200,
html.dark.tikstar-theme body .bg-gray-50 {
    background-color: rgba(10, 14, 28, 0.6) !important;
}

html.dark.tikstar-theme .bg-white,
html.dark.tikstar-theme .bg-gray-800,
html.dark.tikstar-theme .bg-gray-900 {
    background-color: var(--tikstar-card-bg) !important;
}

html.dark.tikstar-theme .bg-gray-700 {
    background-color: rgba(10, 14, 28, 0.9) !important;
}

html.dark.tikstar-theme .bg-gray-400,
html.dark.tikstar-theme .bg-gray-500,
html.dark.tikstar-theme .bg-gray-600 {
    background-color: rgba(10, 14, 28, 0.72) !important;
}

html.dark.tikstar-theme body.creator-dashboard-page.bg-gray-50,
html.dark.tikstar-theme body.creator-dashboard-page.bg-gray-900 {
    background-color: #060712 !important;
}

html.dark.tikstar-theme .border-gray-200,
html.dark.tikstar-theme .border-gray-300,
html.dark.tikstar-theme .border-gray-700 {
    border-color: var(--tikstar-card-border) !important;
}

html.dark.tikstar-theme .header-gradient-bg {
    background: linear-gradient(to right, rgba(124, 77, 255, 0.08), rgba(139, 92, 246, 0.12), rgba(124, 77, 255, 0.08)) !important;
}

html.dark.tikstar-theme .tikstar-bg > div.absolute.inset-0 {
    background: linear-gradient(to right, rgba(6, 7, 18, 0.7), rgba(10, 14, 28, 0.6), rgba(6, 7, 18, 0.7)) !important;
}

html.dark.tikstar-theme .text-blue-500,
html.dark.tikstar-theme .text-blue-600,
html.dark.tikstar-theme .text-blue-400,
html.dark.tikstar-theme .text-blue-300 {
    color: var(--tikstar-violet-light) !important;
}

html.dark.tikstar-theme .text-purple-600,
html.dark.tikstar-theme .text-purple-400 {
    color: var(--tikstar-violet) !important;
}

html.dark.tikstar-theme .custom-header button,
html.dark.tikstar-theme .custom-header nav a,
html.dark.tikstar-theme .custom-header .fas {
    color: var(--tikstar-text) !important;
}

html.dark.tikstar-theme .custom-header button:hover,
html.dark.tikstar-theme .custom-header nav a:hover {
    background-color: rgba(139, 92, 246, 0.1) !important;
}

html.dark.tikstar-theme #desktopUserMenu,
html.dark.tikstar-theme #mobileUserMenu {
    background: rgba(10, 14, 28, 0.95) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
}

html.dark.tikstar-theme #header-language-dropdown,
html.dark.tikstar-theme #desktop-language-dropdown {
    background: rgba(10, 14, 28, 0.95) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
}

html.dark.tikstar-theme .professional-gradient,
html.dark.tikstar-theme .professional-gradient-info {
    background: linear-gradient(135deg, var(--tikstar-violet) 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 15px rgba(124, 77, 255, 0.4) !important;
}

html.dark.tikstar-theme .professional-gradient-secondary,
html.dark.tikstar-theme .professional-gradient-purple {
    background: linear-gradient(135deg, #6d3fe8 0%, #a855f7 100%) !important;
    box-shadow: 0 4px 15px rgba(124, 77, 255, 0.32) !important;
}

html.dark.tikstar-theme .professional-gradient-success,
html.dark.tikstar-theme .professional-gradient-warning {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%) !important;
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.28) !important;
}

html.dark.tikstar-theme .professional-gradient-danger,
html.dark.tikstar-theme .professional-gradient-pink {
    background: linear-gradient(135deg, #be185d 0%, #e11d48 100%) !important;
    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.28) !important;
}

html.dark.tikstar-theme .professional-gradient-orange {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%) !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.24) !important;
}

html.dark.tikstar-theme .dashboard-content {
    background-color: rgba(6, 7, 18, 0.72) !important;
}

html.dark.tikstar-theme .border-gray-200,
html.dark.tikstar-theme .border-gray-300,
html.dark.tikstar-theme .border-gray-700,
html.dark.tikstar-theme .border-white {
    border-color: rgba(139, 92, 246, 0.16) !important;
}

html.dark.tikstar-theme .bg-blue-500\/10,
html.dark.tikstar-theme .bg-purple-500\/10,
html.dark.tikstar-theme .bg-pink-500\/10 {
    background-color: rgba(124, 77, 255, 0.1) !important;
}

html.dark.tikstar-theme .skeleton {
    background: linear-gradient(90deg, rgba(10, 14, 28, 0.8) 25%, rgba(139, 92, 246, 0.15) 50%, rgba(10, 14, 28, 0.8) 75%) !important;
    background-size: 200px 100%;
}