/* Mint Your Card – Dashboard UI (Apple‑like, sobre et fonctionnel)
 * Police système Apple/Google, contrastes doux, alignements nets.
 */

/* Empêche le layout de bouger quand la scrollbar apparait/disparait */
/* ===================================
   GAMING UI UTILITIES
   =================================== */

/* Admin-only elements - hidden by default, shown via JS when user has admin tag */
.admin-only {
    display: none !important;
}

body.is-admin .admin-only {
    display: inline-flex !important;
}

/* Sidebar nav items need flex display, not inline-flex */
body.is-admin .sidebar-nav-item.admin-only {
    display: flex !important;
}

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow:
        var(--shadow-md),
        inset 0 0 0 1px var(--glass-border-light),
        inset 0 0 20px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

/* Glass card - effet moderne Apple réutilisable */
.glass-card {
    background: linear-gradient(135deg, rgba(18, 18, 22, 0.85) 0%, rgba(12, 12, 16, 0.92) 100%);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow:
        0 20px 40px -12px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.08);
}

.chrome-border {
    position: relative;
    border: none;
    z-index: 1;
}

.chrome-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    /* Border thickness */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.3) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.volumetric-light {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle at center, var(--neon-primary-light) 0%, transparent 70%);
    filter: blur(40px);
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

.grain-overlay {
    display: none;
    /* Désactivé : l'utilisateur déteste */
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
}

/* Base Headings - Type Scale 2025 */
h1 {
    font-size: var(--font-size-h1);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
}

h2 {
    font-size: var(--font-size-h2);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h3 {
    font-size: var(--font-size-h3);
    font-family: var(--font-display);
    font-weight: 600;
}

/* Micro-animations */
@keyframes pulse-neon {

    0%,
    100% {
        box-shadow: 0 0 15px var(--neon-primary-glow);
    }

    50% {
        box-shadow: 0 0 25px var(--neon-primary-glow), 0 0 10px var(--neon-primary);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes rainbow-glow {
    0% {
        filter: hue-rotate(0deg) brightness(1.2);
    }

    100% {
        filter: hue-rotate(360deg) brightness(1.2);
    }
}

.pulse-primary {
    animation: pulse-neon 2s infinite ease-in-out;
}

/* Rarity Glows */
.rarity-common {
    border-color: var(--border-subtle);
}

.rarity-uncommon {
    border-color: var(--info);
    box-shadow: 0 0 10px var(--info-light);
}

.rarity-rare {
    border-color: var(--neon-primary);
    box-shadow: 0 0 15px var(--neon-primary-glow);
}

.rarity-holographic {
    border-color: var(--neon-secondary);
    box-shadow: 0 0 20px var(--neon-secondary-glow);
    animation: rainbow-glow 5s linear infinite;
}

.rarity-secret {
    border-color: var(--neon-tertiary);
    box-shadow: 0 0 25px var(--neon-tertiary-light);
    background: linear-gradient(45deg, rgba(255, 20, 147, 0.1), rgba(0, 212, 255, 0.1));
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-elevated-hover) 50%, var(--bg-elevated) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: var(--radius-md);
}

.skeleton-card {
    aspect-ratio: 5 / 7;
    width: 100%;
}

/* =================================== */

html {
    scrollbar-gutter: stable;
    /* Prevent iOS pull-to-refresh during scroll */
    overscroll-behavior-y: contain;
}

:root {
    /* ===================================
       BACKGROUNDS - OLED BLACK (80% dominant)
       =================================== */

    --bg-app: #000000;
    --bg-sidebar: #050505;
    --bg-primary: #080808;
    --bg-secondary: #0c0c0c;
    --bg-elevated: #141414;
    --bg-elevated-hover: #1a1a1a;
    --bg-input: #080808;
    --bg-modal: rgba(0, 0, 0, 0.99);

    /* ===================================
       ACCENTS - WHITE (15%) & MINT (5%)
       =================================== */

    --cta-primary: #FFFFFF;
    /* Blanc dominant pour les actions */
    --cta-primary-text: #000000;
    /* Texte noir sur bouton blanc */
    --cta-secondary: rgba(255, 255, 255, 0.1);

    --neon-primary: #00FFA3;
    /* Mint en accent discret */
    --neon-primary-glow: rgba(0, 255, 163, 0.3);

    /* Progress bar & accents */
    --accent-mint: #00FFA3;
    --accent-white: #FFFFFF;

    /* Glassmorphism 2026 */
    --glass-bg: rgba(15, 15, 15, 0.45);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-light: rgba(255, 255, 255, 0.1);
    --glass-glow: rgba(0, 255, 163, 0.05);

    /* ===================================
       TEXT
       =================================== */

    --text-primary: rgba(255, 254, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.75);
    /* WCAG 2.1 AA: 0.85 opacity achieves 4.5:1 contrast ratio on dark bg */
    --text-tertiary: rgba(255, 255, 255, 0.85);
    /* WCAG 2.1 AA: Improved contrast from 0.4 to 0.5 for disabled elements */
    --text-disabled: rgba(255, 255, 255, 0.5);
    --text-inverse: #000000;
    --neon-primary-hover: #00E593;
    --neon-primary-active: #00CC83;
    --neon-primary-dim: #00D98D;
    /* Dimmed 80% pour confort */
    --neon-primary-light: rgba(0, 255, 163, 0.15);
    --neon-primary-glow: rgba(0, 255, 163, 0.4);

    /* Accent Colors (alias pour compatibilité) */
    --accent: #23d6b4;
    --accent-strong: #12c09d;

    /* Secondary Accent - Electric Blue */
    --neon-secondary: #00D4FF;
    /* 8.5:1 sur #121212 ✓ AAA */
    --neon-secondary-hover: #00BFEA;
    --neon-secondary-light: rgba(0, 212, 255, 0.15);
    --neon-secondary-glow: rgba(0, 212, 255, 0.4);

    /* Tertiary Accent - Hot Pink */
    --neon-tertiary: #FF1493;
    /* 5.8:1 sur #121212 ✓ AA */
    --neon-tertiary-hover: #E01283;
    --neon-tertiary-light: rgba(255, 20, 147, 0.15);

    /* Warning - Neon Orange */
    --neon-warning: #FFB800;
    /* 7.2:1 sur #121212 ✓ AA */
    --neon-warning-light: rgba(255, 184, 0, 0.15);

    /* ===================================
       SEMANTIC COLORS - WCAG COMPLIANT
       =================================== */

    --success: #10B981;
    --success-light: rgba(16, 185, 129, 0.15);
    --success-glow: rgba(16, 185, 129, 0.3);

    --warning: #F59E0B;
    --warning-light: rgba(245, 158, 11, 0.15);

    --error: #EF4444;
    --error-light: rgba(239, 68, 68, 0.15);
    --error-glow: rgba(239, 68, 68, 0.3);

    --info: #3B82F6;
    --info-light: rgba(59, 130, 246, 0.15);

    /* ===================================
       PRECISION COLORS - LEADERBOARD
       =================================== */

    --precision-perfect: #00FFA3;
    /* >= 90% */
    --precision-excellent: #7DD87D;
    /* >= 80% */
    --precision-good: #F5D547;
    /* >= 70% */
    --precision-correct: #FFB347;
    /* >= 60% */
    --precision-bad: #FF6B6B;
    /* < 60% */

    /* ===================================
       SCORE COLORS - Note 1-10 system
       =================================== */

    --score-excellent: #22c55e;
    /* 9-10 - Vert */
    --score-good: #3b82f6;
    /* 7-8  - Bleu */
    --score-average: #eab308;
    /* 5-6  - Jaune */
    --score-below: #f97316;
    /* 3-4  - Orange */
    --score-poor: #ef4444;
    /* 1-2  - Rouge */

    /* ===================================
       TYPOGRAPHY
       =================================== */

    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Montserrat', 'Outfit', sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Consolas', monospace;

    /* Fluid Type Scale */
    --font-size-display-xl: clamp(2.5rem, calc(2rem + 3vw), 4rem);
    --font-size-display-lg: clamp(2rem, calc(1.5rem + 2.5vw), 3rem);
    --font-size-display-md: clamp(1.75rem, calc(1.25rem + 2vw), 2.5rem);
    --font-size-h1: clamp(1.75rem, calc(1.5rem + 1.25vw), 2.25rem);
    --font-size-h2: clamp(1.5rem, calc(1.25rem + 1.25vw), 2rem);
    --font-size-h3: clamp(1.25rem, calc(1.125rem + 0.625vw), 1.5rem);
    --font-size-h4: clamp(1.125rem, calc(1rem + 0.625vw), 1.375rem);
    --font-size-h5: clamp(1rem, calc(0.875rem + 0.625vw), 1.25rem);
    --font-size-body-lg: clamp(1.125rem, calc(1rem + 0.625vw), 1.25rem);
    --font-size-body: clamp(1rem, calc(0.875rem + 0.625vw), 1.125rem);
    --font-size-body-sm: clamp(0.875rem, calc(0.75rem + 0.625vw), 1rem);
    --font-size-caption: clamp(0.75rem, calc(0.625rem + 0.625vw), 0.875rem);
    --font-size-label: clamp(0.625rem, calc(0.5rem + 0.625vw), 0.75rem);

    /* ===================================
       SPACING & RADIUS
       =================================== */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 5rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ===================================
       SHADOWS & GLOWS
       =================================== */

    --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.5);
    --glow-primary: 0 0 20px var(--neon-primary-glow);
    --glow-secondary: 0 0 20px var(--neon-secondary-glow);

    /* ===================================
       MISSING VARIABLES - ADDED FOR CONSISTENCY
       =================================== */

    /* Border Variables (base values) */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-default: rgba(255, 255, 255, 0.12);
    --border-color: rgba(255, 255, 255, 0.1);

    /* Border alias (legacy compatibility) */
    --border: var(--border-default);
    --card-bg: var(--bg-elevated);
    --brand-mint: var(--accent);
    --text-muted: var(--text-tertiary);

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Extended Spacing */
    --space-12: 6rem;
    --space-16: 8rem;
    --space-20: 10rem;

    /* Easing Functions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* ===================================
       SAFE AREAS - iOS Notch & Android
       =================================== */
    --safe-area-inset-top: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px;
    --safe-area-inset-right: 0px;
}

/* Override avec les vraies valeurs si supportées */
@supports (padding-top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left);
        --safe-area-inset-right: env(safe-area-inset-right);
    }
}

* {
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ===================================
   ACCESSIBILITY - WCAG 2.2 AA
   =================================== */

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Interactive elements focus states */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--neon-primary-light);
}

/* Skip link for screen readers */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--accent);
    color: var(--text-inverse);
    padding: 8px 16px;
    z-index: 10000;
    font-weight: 600;
    border-radius: 0 0 var(--radius-md) 0;
}

.skip-link:focus {
    top: 0;
}

/* Skip link for keyboard navigation - WCAG 2.4.1 */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #000;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    z-index: 10001;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 10px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border-subtle: rgba(255, 255, 255, 0.3);
        --border-default: rgba(255, 255, 255, 0.5);
        --text-secondary: rgba(255, 255, 255, 0.85);
        --text-tertiary: rgba(255, 255, 255, 0.7);
    }
}

/* Minimum touch target size (44x44px) */
.btn,
.nav-item,
.chip,
button,
[role="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* Ensure text is not too small on mobile */
@media (max-width: 480px) {
    html {
        font-size: max(16px, 1rem);
    }
}

#canvas-container {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    display: none;
}

#canvas-container canvas {
    width: 100%;
    height: 100%;
    display: block;
}

#canvas-container .noise {
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
}

body {
    margin: 0;
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;

    /* Safe areas for iOS notch/Dynamic Island */
    padding-top: var(--safe-area-inset-top);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
    min-height: 100vh;
    min-height: -webkit-fill-available;

    /* Prevent iOS pull-to-refresh during scroll */
    overscroll-behavior-y: contain;
}

#app {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
}

.view {
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    overflow-anchor: none;
    /* Empêche le navigateur de "compenser" les changements de layout */
}

.view.active {
    display: block;
    opacity: 1;
    min-height: calc(100vh - 90px);
    padding: 72px 0 110px;
    /* 56px top bar + 16px spacing */
    overflow-x: clip;
    /* clip instead of hidden - doesn't break sticky */
    max-width: 100vw;
}

/* Dashboard: carousel goes under the top bar for immersive effect */
#dashboard-view.view.active {
    padding-top: 0;
}

#dashboard-view .hero-carousel {
    padding-top: 56px;
    /* Space for top bar, content visible through glassmorphism */
}

/* Swiper navigation arrows */
.swiper-button-prev,
.swiper-button-next {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    color: #fff;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 18px;
}

.swiper-button-prev {
    left: 16px;
}

.swiper-button-next {
    right: 16px;
}

/* ========================================
   FACTORISATION - SYSTÈME DE LAYOUT UNIFIÉ
   ======================================== */

/* Layout principal des pages */
.page-container,
.dashboard-content,
.account-page,
.noter-page {
    padding: 0 0 var(--space-12) 0;
}

/* ========================================
   PAGE CONTENT CONTAINER
   Factorized: 2025-12-24
   Replaces: .gallery-page, .leaderboard-page, .gifts-page, etc.
   ======================================== */

.page-content {
    padding: 0 0 120px 0;
}

/* ========================================
   PAGE HEADER COMPONENT
   Factorized: 2025-12-22
   Replaces: .my-cards-header, .gallery-header, .noter-header,
             .leaderboard-header, .missions-header, .account-header
   ======================================== */

.page-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 52px 96px 24px 96px;
    background: rgba(10, 10, 14, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-bottom: 1px solid transparent;
    /* Sticky positioning */
    position: -webkit-sticky;
    /* Safari support */
    position: sticky;
    top: 64px;
    /* Navbar height */
    z-index: 100;
    /* Separate transitions to avoid layout shift issues */
    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        min-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.3s ease,
        backdrop-filter 0.3s ease,
        border-color 0.3s ease;
    /* Prevent collapse jump */
    min-height: 120px;
    box-sizing: border-box;
}

/* État réduit au scroll (exclut card-detail qui a son propre système) */
.page-header.is-scrolled:not(.page-header--card-detail) {
    padding: 16px 96px;
    min-height: 56px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(10, 10, 14, 0.85);
    border-bottom: 1px solid var(--border-subtle);
}

/* Decorative background pattern */
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
    pointer-events: none;
}

/* Emoji decorator */
.page-header::after {
    content: attr(data-decorator);
    position: absolute;
    right: 96px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 72px;
    opacity: 0.04;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.page-header__content {
    flex: 1;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.page-header.is-scrolled:not(.page-header--card-detail) .page-header__content {
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

/* Title row: title + optional indicator (counter pill, etc.) */
.page-header__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
}

.page-header__title {
    font-size: var(--font-size-h1);
    font-weight: 800;
    margin: 0;
    padding: 0;
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
    color: var(--text-primary);
    border: none;
    background: none;
    transition: font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-header.is-scrolled:not(.page-header--card-detail) .page-header__title {
    font-size: 18px;
}

.page-header__title::before,
.page-header__title::after {
    display: none;
}

.page-header__subtitle {
    font-family: var(--font-secondary);
    font-size: var(--font-size-body);
    color: var(--text-secondary);
    margin: var(--space-2) 0 0 0;
    padding-bottom: 24px;
    font-weight: 400;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    max-height: 50px;
    overflow: hidden;
}

.page-header.is-scrolled:not(.page-header--card-detail) .page-header__subtitle {
    position: absolute;
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding-bottom: 0;
    font-size: 0;
    pointer-events: none;
}

/* Subtitle hint - discret, italique, plus petit */
.subtitle-hint {
    font-style: italic;
    font-size: 0.85em;
    color: var(--text-tertiary);
    opacity: 0.7;
}

/* Toolbar slot - optional row for tabs, filters, actions */
.page-header__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    flex-wrap: wrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-header.is-scrolled:not(.page-header--card-detail) .page-header__toolbar {
    margin-top: 0;
    transform: scale(0.95);
    transform-origin: left center;
}

.page-header__toolbar:empty {
    display: none;
}

/* Tabs row - horizontal layout for tabs + toolbar */
.page-header__tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.page-header__tabs-row .page-tabs {
    margin-top: 0;
}

.page-header__tabs-row .page-header__toolbar {
    margin-top: 0;
    gap: 12px;
}

/* Page container - wraps content below page-header */
.page-container {
    padding: 52px 96px;
}

/* Action slot (timer, badge, button) */
.page-header__action {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Header badge (timer, counter, status) */
.header-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.header-badge i {
    font-size: 12px;
}

/* Contest status pills */
.contest-status-pills {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.contest-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1) var(--space-3);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    font-size: var(--font-size-caption);
    white-space: nowrap;
    min-width: 180px;
}

.contest-pill__label {
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

.contest-pill__icon {
    font-size: 14px;
}

.contest-pill.is-eligible {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
}

.contest-pill.is-eligible .contest-pill__label {
    color: var(--accent-success);
}

/* Variant: with tabs below */
.page-header--with-tabs {
    padding-bottom: 26px;
    border-bottom: none;
}

.page-header--with-tabs .page-tabs {
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Variant: with filters inside */
.page-header--with-filters {
    padding-bottom: var(--space-4);
}

.page-header--with-filters .page-header__content {
    margin-bottom: 0;
}

.page-header--with-filters .filters-row {
    margin: 0;
    padding: 0 0 10px 0;
    background: transparent;
    border: none;
}

.page-header--with-filters.is-scrolled {
    padding-top: 12px;
    padding-bottom: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header {
        padding: var(--space-6) var(--space-4);
    }

    .page-header__title {
        font-size: 24px;
    }

    .page-header::after {
        font-size: 60px;
        right: 20px;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: var(--space-5) var(--space-3);
    }

    .page-header__title {
        font-size: 20px;
    }

    .page-header__subtitle {
        font-size: 13px;
    }

    .page-header::after {
        font-size: 50px;
        right: 10px;
    }
}

@media (max-width: 360px) {
    .page-header {
        padding: var(--space-4) var(--space-3);
    }

    .page-header__title {
        font-size: 18px;
    }

    .page-header__subtitle {
        font-size: 12px;
    }

    .page-header::after {
        display: none;
        /* Masquer emoji sur très petit écran */
    }
}

/* ===================================
   LEGACY HEADERS - Now aliases to base
   Keep for backward compatibility, can be removed after HTML update
   =================================== */


.noter-page .page-tabs {
    margin: 0 20px 16px;
}

.noter-page .cards-controls {
    padding: 16px 20px 0;
}

.noter-page .cards-grid {
    padding: 0 20px 20px;
}

/* Noter - Compact List (Terminees tab) */
.noter-page .cards-grid.list-view {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 8px 20px 20px !important;
}

.ccard {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(14, 16, 20, 0.3);
    transition: background 0.2s;
    cursor: pointer;
}

.ccard:hover {
    background: rgba(42, 215, 173, 0.05);
}

.ccard-img {
    width: 44px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.ccard-info {
    flex: 1;
    min-width: 0;
}

.ccard-spacer {
    flex: 1;
}

.ccard-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ccard-serial {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ccard-mynote {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ccard-score {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cbadge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.cbadge i {
    font-size: 8px;
}

.cbadge-seal {
    background: rgba(42, 215, 173, 0.15);
    color: var(--accent);
}


/* Pages are now full-width - padding handled by content sections */

/* Titres de page uniformisés */
.page-title {
    margin: 0 0 var(--space-2) 0;
    font-family: var(--font-display);
    font-size: var(--font-size-h1);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: var(--line-height-tight);
}

@media (max-width: 768px) {
    .page-title {
        font-size: 22px;
    }
}

/* Sous-titres de page */
.page-subtitle {
    margin: 0 0 var(--space-6) 0;
    font-size: var(--font-size-body);
    color: var(--text-secondary);
    font-weight: 400;
    line-height: var(--line-height-normal);
}

@media (max-width: 768px) {
    .page-subtitle {
        font-size: 14px;
    }
}

/* Conteneurs de contenu avec fond */
.content-card,
.settings-group,
.streak-card,
.activity-table,
.info-form {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-soft);
    transition: background 0.2s ease, transform 0.2s ease;
}

.content-card:hover {
    background: var(--bg-elevated-hover);
}

.app-section {
    margin-bottom: var(--space-8);
    position: relative;
}

.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.section-title-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.section-title-row h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-h3);
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.section-subtitle {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: var(--font-size-caption);
    font-weight: 400;
    color: var(--text-tertiary);
}

.btn-icon-add {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: 1px solid var(--neon-primary);
    background: var(--neon-primary-light);
    color: var(--neon-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px var(--neon-primary-glow);
}

.btn-icon-add:hover {
    background: var(--neon-primary);
    color: var(--text-inverse);
    box-shadow: 0 0 20px var(--neon-primary-glow);
    transform: translateY(-2px);
}

.btn-icon-add:active {
    transform: scale(0.95);
}

/* ========================================
   HERO BANNER (V5 - Modern Compact)
   ======================================== */
.hero-banner {
    position: relative;
    padding: calc(56px + var(--space-5)) var(--space-4) var(--space-5);
    background: linear-gradient(135deg, #0a0f0d 0%, #0d1612 100%);
    overflow: hidden;
}

.hero-banner__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
    align-items: center;
    min-height: 160px;
    padding: var(--space-6) var(--space-5);
    /* 24px top/bottom, 20px left/right */
}

.hero-banner__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.hero-banner__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-caption);
    font-weight: 600;
    color: var(--neon-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hero-banner__label i {
    font-size: 12px;
}

.hero-banner__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.hero-banner__count {
    color: var(--neon-primary);
    font-weight: 900;
}

.hero-banner__subtitle {
    margin: 0;
    font-size: var(--font-size-body);
    color: var(--text-secondary);
    max-width: 380px;
    line-height: 1.5;
}

/* CTA Button - WHITE per Design System */
.btn-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: #FFFFFF;
    color: #0a0a0a;
    font-size: var(--font-size-body);
    font-weight: 700;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s var(--ease-out-expo);
    width: fit-content;
    margin-top: var(--space-2);
}

.btn-hero-cta:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}

.btn-hero-cta:active {
    transform: scale(0.98);
}

.btn-hero-cta i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.btn-hero-cta:hover i {
    transform: translateX(3px);
}

/* Visual: Stacked Cards */
.hero-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: var(--space-4);
}

.hero-cards-stack {
    position: relative;
    width: 100px;
    height: 140px;
}

.hero-card {
    position: absolute;
    width: 80px;
    height: 112px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    transition: transform 0.3s var(--ease-out-expo);
}

.hero-card--back {
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    transform: rotate(-8deg);
}

.hero-card--middle {
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #1f1f1f 0%, #141414 100%);
    transform: rotate(-4deg);
}

.hero-card--front {
    top: 16px;
    left: 16px;
    background: linear-gradient(135deg, var(--neon-primary) 0%, #00cc82 100%);
    border-color: var(--neon-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px var(--neon-primary-glow);
}

.hero-card--front i {
    font-size: 24px;
    color: #0a0a0a;
}

.hero-banner:hover .hero-card--back {
    transform: rotate(-12deg) translateX(-4px);
}

.hero-banner:hover .hero-card--middle {
    transform: rotate(-6deg) translateX(-2px);
}

.hero-banner:hover .hero-card--front {
    transform: rotate(2deg) translateY(-4px);
}

/* Decorative Glow */
.hero-banner__glow {
    position: absolute;
    top: 50%;
    right: 10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--neon-primary-glow) 0%, transparent 70%);
    opacity: 0.3;
    pointer-events: none;
    transform: translateY(-50%);
}

/* ========================================
   DASHBOARD CONTAINER (V4 Layout)
   ======================================== */
.dashboard-container {
    padding: 52px 96px 120px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    background: #000;
    flex: 1;
}

/* Ambient glow spots - taches de lumière colorées */
.dashboard-container::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        /* Glow vert/cyan en haut à gauche */
        radial-gradient(ellipse 600px 400px at 10% 20%, rgba(0, 255, 163, 0.08) 0%, transparent 70%),
        /* Glow violet/magenta en haut à droite */
        radial-gradient(ellipse 500px 500px at 85% 15%, rgba(139, 92, 246, 0.06) 0%, transparent 70%),
        /* Glow bleu au milieu droite */
        radial-gradient(ellipse 400px 600px at 90% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 70%),
        /* Glow vert/teal en bas à gauche */
        radial-gradient(ellipse 500px 400px at 5% 80%, rgba(20, 184, 166, 0.06) 0%, transparent 70%),
        /* Glow rose/magenta en bas */
        radial-gradient(ellipse 600px 300px at 50% 95%, rgba(236, 72, 153, 0.04) 0%, transparent 70%);
}

/* S'assurer que le contenu est au-dessus des glows */
.dashboard-container>* {
    position: relative;
    z-index: 1;
}

/* Section Header (aligned left, compact) */
.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.section-title-group {
    flex: 1;
    min-width: 0;
}

.section-title-group h3 {
    font-size: var(--font-size-h3);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.section-subtitle {
    font-family: var(--font-secondary);
    font-size: var(--font-size-caption);
    color: var(--text-tertiary);
    margin: var(--space-1) 0 0 0;
}

.section-title-hint {
    font-size: 0.7em;
    font-weight: 400;
    font-style: italic;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 6px;
}

/* Section "More" Button */
.btn-section-more {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-section-more i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.btn-section-more:hover {
    background: var(--bg-elevated-hover);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.btn-section-more:hover i {
    transform: translateX(3px);
}

/* Responsive text for btn-section-more */
.btn-section-more .btn-text-short {
    display: none;
}

/* Hide plus icon by default (shown on mobile) */
.btn-section-more .btn-icon-plus {
    display: none;
}

/* Hide/show mobile classes - default state (desktop) */
.show-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .btn-section-more .btn-text-full {
        display: none;
    }

    .btn-section-more .btn-text-short {
        display: inline;
    }
}

/* Dashboard Layout - Simple stacked sections */
.dashboard-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.dashboard-container>* {
    min-width: 0;
    width: 100%;
}

/* Dashboard Row Layout - Two-column grid rows */
.dashboard-row {
    display: grid !important;
    gap: var(--space-6);
    width: 100%;
    align-items: start;
}

/* Reset app-section inside rows - remove default margin and let grid control size */
.dashboard-row>.app-section {
    margin-bottom: 0;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100%;
}

/* Allow overflow visible for animated border but clip content */
.dashboard-row>.app-section--small {
    overflow: visible;
    align-self: start;
    /* Height fits content, not stretched by grid */
    height: auto;
}

/* Clip the scroll containers inside */
.dashboard-row .horizontal-scroll,
.dashboard-row .leaderboard-list {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}

/* Reset full-bleed margins inside grid cells */
.dashboard-row .horizontal-scroll {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

/* 65% / 35% layout (Leaderboard + Gifts) */
.dashboard-row--65-35 {
    grid-template-columns: 65fr 35fr !important;
}

/* 50% / 50% layout (Cards to rate + Rated cards) */
.dashboard-row--50-50 {
    grid-template-columns: 1fr 1fr !important;
}

/* Responsive: stack on tablet and mobile */
@media (max-width: 1024px) {

    .dashboard-row--65-35,
    .dashboard-row--50-50 {
        grid-template-columns: 1fr !important;
    }

    .dashboard-row>.app-section {
        margin-bottom: var(--space-4);
    }
}

/* Scroll container inside dashboard rows - no negative margins, contained in grid cell */
.dashboard-row .scroll-container {
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
    position: relative;
}

/* Clip only the horizontal scroll, not the fade overlay */
.dashboard-row .scroll-container .horizontal-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

/* Fade gradient adapté pour les cellules de grid */
.dashboard-row .scroll-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    /* Flush with edge, -1px to cover any subpixel gap */
    bottom: 30px;
    /* Above scroll controls */
    width: 80px;
    pointer-events: none;
    background: linear-gradient(to right, transparent 0%, rgba(12, 12, 16, 0.92) 60%, rgba(12, 12, 16, 0.92) 100%);
    z-index: 10;
}

/* Background for card sections in dashboard rows */
.dashboard-row--50-50 .app-section {
    padding: var(--space-5);
}

/* Si pas de glass-card, fallback simple */
.dashboard-row--50-50 .app-section:not(.glass-card) {
    background: rgb(20, 20, 20);
    border-radius: var(--radius-lg);
}

/* Leaderboard scroll container - transparent background, different fade color */
.scroll-container--leaderboard {
    overflow: visible;
    position: relative;
}

.scroll-container--leaderboard::after {
    background: linear-gradient(to right, transparent 0%, var(--bg-app) 70%, var(--bg-app) 100%) !important;
}

.scroll-container--leaderboard .leaderboard-list {
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 36px;
}

/* Dashboard Section Variants */
.app-section--large {
    /* No background/border for leaderboard section */
    padding-top: 24px;
}

#section-leaderboard {
    padding-top: 24px;
}

.app-section--small {
    background: transparent;
    border: none;
    border-radius: 16px;
    padding: var(--space-5);
    position: relative;
    overflow: visible;
    isolation: isolate;
}

/* Animated border glow effect - courbe en cloche : foncé → clair → foncé */
/* Deux traits lumineux : un à 12h, un à 6h (180deg de décalage) */
.app-section--small::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    background:
        conic-gradient(from var(--border-scan-angle, 0deg) at 50% 50%,
            transparent 0deg,
            rgba(0, 255, 163, 0.05) 10deg,
            rgba(0, 255, 163, 0.22) 25deg,
            rgba(255, 255, 255, 0.45) 45deg,
            rgba(0, 255, 163, 0.22) 65deg,
            rgba(0, 255, 163, 0.05) 80deg,
            transparent 90deg,
            transparent 360deg),
        conic-gradient(from var(--border-scan-angle-2, 180deg) at 50% 50%,
            transparent 0deg,
            rgba(0, 255, 163, 0.05) 10deg,
            rgba(0, 255, 163, 0.22) 25deg,
            rgba(255, 255, 255, 0.45) 45deg,
            rgba(0, 255, 163, 0.22) 65deg,
            rgba(0, 255, 163, 0.05) 80deg,
            transparent 90deg,
            transparent 360deg);
    animation: border-scan 8s linear infinite, border-scan-2 8s linear infinite;
    pointer-events: none;
    z-index: -2;
}

/* Inner background - fond opaque pour masquer l'animation sauf sur les bords */
.app-section--small::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 15px;
    background: linear-gradient(135deg, rgb(30, 30, 35) 0%, rgb(20, 20, 25) 100%);
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.15);
    z-index: -1;
}

/* Override for gifts section with custom gradient */
#section-gifts-preview::after {
    background: linear-gradient(135deg, rgb(0, 0, 0) 0%, rgb(13, 30, 27) 100%);
}

@property --border-scan-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@property --border-scan-angle-2 {
    syntax: '<angle>';
    initial-value: 180deg;
    inherits: false;
}

@keyframes border-scan {
    0% {
        --border-scan-angle: 0deg;
    }

    100% {
        --border-scan-angle: 360deg;
    }
}

@keyframes border-scan-2 {
    0% {
        --border-scan-angle-2: 180deg;
    }

    100% {
        --border-scan-angle-2: 540deg;
    }
}

.app-section--card {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.9));
    border: 1px solid var(--border-subtle);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.app-section--card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    padding: 1px;
    /* 2 corner radial gradients: mint top-left, gray bottom-right */
    background:
        radial-gradient(ellipse at 0% 0%, rgba(0, 255, 163, 0.6) 0%, transparent 60%),
        radial-gradient(ellipse at 100% 100%, rgba(128, 128, 128, 0.5) 0%, transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.6;
    pointer-events: none;
}

/* ========================================
   GIFTS PREVIEW SECTION (Dashboard)
   ======================================== */
#section-gifts-preview {
    background: linear-gradient(135deg, #000000 0%, #0d1e1b 100%);
}

/* Gifts Timeline Progress Bar */
.gifts-timeline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.gifts-timeline__bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.gifts-timeline__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--neon-primary), var(--neon-primary-glow));
    border-radius: 3px;
    transition: width 0.5s ease-out;
}

.gifts-timeline__level {
    font-size: 7px;
    font-weight: 600;
    color: var(--neon-primary);
    white-space: nowrap;
}

.gifts-timeline__percent {
    font-size: 7px;
    font-weight: 600;
    color: var(--neon-primary);
    white-space: nowrap;
}

/* Participation Pill */
.participation-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.08);
    color: #aaa;
    border: none;
    box-shadow: inset 0 0 0 0.5px rgba(136, 136, 136, 0.5);
    box-sizing: border-box;
    cursor: help;
}

/* Tooltip on hover */
.participation-pill[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: rgba(20, 20, 20, 0.95);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: 200px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    pointer-events: none;
    text-align: center;
}

.participation-pill[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Text variants - full text by default */
.participation-pill .pill-text-short {
    display: none;
}

.participation-pill .pill-text-full {
    display: inline;
}

/* Below 1515px: show short text */
@media (max-width: 1515px) {
    .participation-pill .pill-text-full {
        display: none;
    }

    .participation-pill .pill-text-short {
        display: inline;
    }
}

.participation-pill i {
    font-size: 10px;
    color: #ef4444;
    animation: shake-notification 2s ease-in-out infinite;
}

/* Info icon - small, subtle, no animation */
.participation-pill .pill-info-icon {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    animation: none;
    margin-left: 2px;
}

/* Shake/vibration animation for warning icon */
@keyframes shake-notification {

    0%,
    85%,
    100% {
        transform: rotate(0deg);
    }

    87% {
        transform: rotate(-12deg);
    }

    89% {
        transform: rotate(12deg);
    }

    91% {
        transform: rotate(-10deg);
    }

    93% {
        transform: rotate(10deg);
    }

    95% {
        transform: rotate(-6deg);
    }

    97% {
        transform: rotate(6deg);
    }

    99% {
        transform: rotate(0deg);
    }
}

.participation-pill.validated {
    background: #22c55e;
    color: rgba(0, 0, 0, 0.8);
}

.participation-pill.validated i {
    animation: none;
    color: rgba(0, 0, 0, 0.7);
}

.participation-pill.validated[data-tooltip]::after {
    display: none;
}

.participation-pill.validated .pill-info-icon {
    display: none;
}

@keyframes neon-pulse-red {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(239, 68, 68, 0.2), 0 0 8px rgba(239, 68, 68, 0.1);
    }

    50% {
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.4), 0 0 16px rgba(239, 68, 68, 0.2);
    }
}

@keyframes neon-pulse-green {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(34, 197, 94, 0.2), 0 0 8px rgba(34, 197, 94, 0.1);
    }

    50% {
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.4), 0 0 16px rgba(34, 197, 94, 0.2);
    }
}

/* Contest Timer Pill */
.contest-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.08);
    color: #aaa;
    border: none;
    box-shadow: inset 0 0 0 0.5px rgba(136, 136, 136, 0.5);
    box-sizing: border-box;
}

.contest-timer i {
    font-size: 10px;
    color: #fff;
}

/* Urgence: dernières 24h */
.contest-timer.urgent {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    animation: neon-pulse-red 2s ease-in-out infinite;
}

.gifts-preview-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Header pills row (replaces subtitle) */
.gifts-header-pills {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

/* Gifts Grid 2x2 with background images */
.gifts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.gifts-grid__item {
    position: relative;
    height: 170px;
    /* Fixed height instead of aspect-ratio */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-2);
    overflow: hidden;
    opacity: 0.35;
    transition: all 0.3s ease;
}

.gifts-grid__item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.7) 0%,
            transparent 40%,
            transparent 60%,
            rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none;
}

.gifts-grid__item.unlocked {
    opacity: 1;
}

.gifts-grid__item.unlocked::after {
    content: '\f00c';
    /* FontAwesome check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #22c55e;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.gifts-grid__item.next {
    opacity: 0.65;
}

.gifts-grid__item.next::after {
    content: '\f252';
    /* FontAwesome hourglass-half */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #23d6b4 0%, #1ab89a 100%);
    color: #0a0a0c;
    border-radius: 50%;
    font-size: 12px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.gifts-grid__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    position: relative;
    z-index: 1;
}

.gifts-grid__name {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.gifts-grid__level {
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    text-shadow: none;
}

.gifts-grid__status {
    position: relative;
    z-index: 1;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-muted);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.gifts-grid__item.unlocked .gifts-grid__status {
    color: var(--neon-primary);
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 500;
}

/* Horizontal scroll - full bleed on small screens */
#dashboard-view .horizontal-scroll {
    margin-left: calc(-1 * var(--space-5));
    margin-right: calc(-1 * var(--space-5));
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

/* ========================================
   HERO COMPACT (V3 - Action Oriented)
   ======================================== */
.hero-compact {
    position: relative;
    min-height: 180px;
    padding: calc(56px + var(--space-6)) var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
    overflow: hidden;
}

.hero-compact-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(0, 255, 163, 0.08) 0%,
            rgba(0, 212, 255, 0.05) 50%,
            transparent 100%);
    z-index: 0;
}

.hero-compact-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--neon-primary-light) 0%, transparent 70%);
    filter: blur(60px);
    opacity: 0.5;
}

.hero-compact-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: 0 var(--space-5);
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hero-title-dynamic {
    font-family: var(--font-display);
    font-size: var(--font-size-display-md);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.3em;
    flex-wrap: wrap;
}

.hero-title-dynamic #hero-card-count {
    color: var(--neon-primary);
    font-size: 1.2em;
    text-shadow: 0 0 20px var(--neon-primary-glow);
}

.hero-compact .hero-subtitle {
    font-size: var(--font-size-body);
    color: var(--text-secondary);
    margin: 0;
}

/* CTA Button Primary - WHITE per Design System */
.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: #FFFFFF;
    color: var(--text-inverse);
    font-family: var(--font-display);
    font-size: var(--font-size-body);
    font-weight: 600;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s var(--ease-out-expo);
    box-shadow:
        0 4px 20px rgba(255, 255, 255, 0.2),
        0 0 0 0 rgba(255, 255, 255, 0.1);
}

.btn-cta-primary:hover {
    transform: translateY(-2px);
    background: #F5F5F5;
    box-shadow:
        0 8px 30px rgba(255, 255, 255, 0.3),
        0 0 0 4px rgba(255, 255, 255, 0.15);
}

.btn-cta-primary:active {
    transform: translateY(0);
}

.btn-cta-primary i {
    font-size: 0.9em;
}

/* Responsive Hero Compact */
@media (min-width: 768px) {
    .hero-compact {
        min-height: 220px;
        padding: calc(56px + var(--space-8)) var(--space-6) var(--space-8);
    }

    .hero-compact-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .btn-cta-primary {
        padding: var(--space-4) var(--space-6);
        font-size: var(--font-size-body-lg);
    }
}

@media (max-width: 480px) {
    .hero-compact {
        min-height: 150px;
        padding: calc(56px + var(--space-4)) var(--space-3) var(--space-4);
    }

    .hero-title-dynamic {
        font-size: var(--font-size-h2);
    }

    .btn-cta-primary {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   HORIZONTAL SCROLL CARDS (Dashboard)
   ======================================== */
.hscroll-card {
    flex-shrink: 0;
    width: 170px;
    cursor: pointer;
    transition: transform 0.2s var(--ease-out-expo);
}

.hscroll-card:hover {
    transform: translateY(-4px);
}

.hscroll-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-elevated);
}

.hscroll-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hscroll-card-info {
    display: none;
}

.hscroll-card-name {
    display: block;
    font-size: var(--font-size-caption);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Video Badge Pill */
.badge-video-pill {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 3;
    letter-spacing: 0.5px;
}

.badge-video-pill i {
    color: var(--accent);
    font-size: 0.6rem;
}

.card-score-badge,
.card-status-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 3;
}

.card-score-badge {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--text-primary);
}

.card-score-badge i {
    font-size: 0.55rem;
    color: #facc15;
}

.card-status-badge {
    background: rgba(0, 0, 0, 0.7);
    color: var(--text-primary);
    backdrop-filter: blur(8px);
}

/* Skeleton Loading */
.hscroll-card.skeleton .hscroll-card-img,
.hscroll-card.skeleton .skeleton-img {
    background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-elevated-hover) 50%, var(--bg-elevated) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.hscroll-card.skeleton .skeleton-text {
    display: block;
    height: 12px;
    width: 80%;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
}

/* Empty & Error States for horizontal scroll */
.hscroll-empty,
.hscroll-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    width: 100%;
    min-height: 160px;
    color: var(--text-tertiary);
    text-align: center;
}

.hscroll-empty i,
.hscroll-error i {
    font-size: 2rem;
    opacity: 0.5;
}

.hscroll-error .btn-retry {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.hscroll-error .btn-retry:hover {
    background: var(--bg-elevated-hover);
    color: var(--text-primary);
}

/* Leaderboard Empty/Error */
.leaderboard-empty,
.leaderboard-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8);
    width: 100%;
    min-height: 200px;
    color: var(--text-tertiary);
    text-align: center;
    background: rgba(20, 20, 20, 0.2);
    border-radius: var(--radius-xl);
}

.leaderboard-empty i {
    font-size: 2.5rem;
    color: var(--neon-warning);
    opacity: 0.6;
}

/* Leaderboard avatar in preview */
.lb-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: var(--space-2);
    vertical-align: middle;
}

/* Updated btn-icon-add with arrow */
.btn-icon-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-elevated);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s var(--ease-out-expo);
}

.btn-icon-add:hover {
    background: var(--bg-elevated-hover);
    color: var(--neon-primary);
    border-color: var(--neon-primary);
    transform: translateX(2px);
}

.btn-icon-add i {
    font-size: 14px;
}

/* Top noteurs - Grid 4 colonnes avec scroll horizontal (affiche 2 colonnes, slide pour voir les autres) */
.leaderboard-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 500px);
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    gap: 8px 16px;
    padding: 0 0 25px 0;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    cursor: default;
}

.leaderboard-list .lb-card {
    pointer-events: auto;
    cursor: pointer;
}

/* Hide native scrollbar */
.leaderboard-list::-webkit-scrollbar {
    display: none;
}

.leaderboard-list {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.leaderboard-list.dragging {
    cursor: grabbing;
    user-select: none;
}

/* =========================================
   LEADERBOARD CARD - Horizontal Row Design
   ========================================= */

.lb-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: rgba(14, 14, 14, 0.7);
    border: none;
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.lb-card:hover {
    background: rgba(20, 20, 20, 0.85);
}

/* Rank badge */
.lb-card__rank {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.lb-card__rank.gold {
    background: linear-gradient(135deg, #f8d46a, #d7a72e);
    color: #000;
    border: none;
    box-shadow: 0 0 12px rgba(248, 212, 106, 0.3);
}

.lb-card__rank.silver {
    background: linear-gradient(135deg, #d7dde8, #b8bec8);
    color: #000;
    border: none;
    box-shadow: 0 0 10px rgba(215, 221, 232, 0.2);
}

.lb-card__rank.bronze {
    background: linear-gradient(135deg, #d39a5a, #b36c2f);
    color: #000;
    border: none;
    box-shadow: 0 0 8px rgba(211, 154, 90, 0.2);
}

/* Current user highlight in leaderboard */
.lb-card.is-current-user {
    background: rgba(52, 211, 153, 0.1);
}

.lb-card.is-current-user .lb-card__name {
    color: rgb(52, 211, 153);
}

/* User info (avatar + name) */
.lb-card__user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.lb-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
}

.lb-card__avatar--placeholder {
    display: grid;
    place-items: center;
    color: var(--text-tertiary);
    font-size: 14px;
}

.lb-card__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lb-card__name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stats (points + cards) */
.lb-card__stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 80px;
}

.lb-card__points {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-primary);
}

.lb-card__cards {
    font-weight: 300;
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Badges */
.lb-card__badges {
    display: flex;
    gap: 4px;
    justify-content: flex-start;
    align-items: center;
}

.lb-card__badges img {
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
    object-fit: contain;
}


/* Responsive: stack on mobile */
@media (max-width: 600px) {
    .lb-card {
        grid-template-columns: 36px 1fr auto;
        gap: var(--space-3);
    }

    .lb-card__rank {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    /* User zone prend tout l'espace disponible */
    .lb-card__user {
        min-width: 0;
        flex: 1;
    }

    .lb-card__info {
        min-width: 0;
        width: 100%;
    }

    /* Badges compacts sous le pseudo en mobile - scroll horizontal */
    .lb-card__badges {
        display: flex;
        gap: 2px;
        margin-top: 2px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .lb-card__badges::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /* Fade indicator UNIQUEMENT quand il y a du scroll possible */
    .lb-card__badges.has-overflow {
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }

    /* Quand scrollé à fond, retire le fade */
    .lb-card__badges.has-overflow.scrolled-end {
        mask-image: none;
        -webkit-mask-image: none;
    }

    .lb-card__badges img {
        width: 11px;
        height: 11px;
        min-width: 11px;
        min-height: 11px;
        flex-shrink: 0;
    }

    .lb-card__stats {
        min-width: 70px;
    }
}

/* Skeleton state for lb-card */
.lb-card.skeleton {
    height: 56px;
}

.lb-card.skeleton .skeleton-content {
    width: 100%;
    height: 100%;
}

.badge-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.badge-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--neon-primary);
    transform: scale(1.1);
}

.badge-icon img {
    object-fit: contain;
}

/* Badges dans l'onglet Badges (Mon compte) - Version agrandie */
.badges-grid .badge-icon {
    width: 150px;
    height: 150px;
    border-radius: 12px;
    background: transparent;
}

.badges-grid .badge-icon img {
    width: 130px;
    height: 130px;
}

/* Listes horizontales cartes */
.horizontal-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 10px 6px 24px;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    position: relative;
    cursor: grab;
}

/* Scroll container with controls */
.scroll-container {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 5;
    margin-right: calc(var(--space-6) * -1);
    padding-right: var(--space-6);
}

/* Fade gradient on right edge - extends to true edge */
.scroll-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 30px;
    width: 100px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, rgb(10, 10, 10) 90%);
    z-index: 5;
}

/* Leaderboard section has pure black background */
.app-section--large .scroll-container::after {
    background: linear-gradient(to right, transparent, #000000 90%);
}

/* Bottom scroll controls bar */
.scroll-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    margin-top: -20px;
}

.scroll-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    /* WCAG 2.1 AA: Improved contrast from 0.35 to 0.7 (ratio ~4.5:1) */
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    /* WCAG 2.5.5: Touch target minimum 44x44px for mobile accessibility */
    padding: 12px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

.scroll-arrow:hover {
    color: var(--accent);
    transform: scale(1.1);
}

.scroll-arrow i {
    font-size: 16px;
    line-height: 1;
}

.scroll-track {
    flex: 1;
    height: 3px;
    background: var(--bg-surface);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.scroll-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 60px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--neon-primary-glow);
    border-radius: 2px;
    will-change: transform;
    cursor: grab;
}

.scroll-progress-bar:active {
    cursor: grabbing;
}

.scroll-container .horizontal-scroll {
    flex: 1;
    min-width: 0;
}

/* Hide native scrollbar when using custom controls */
.scroll-container .horizontal-scroll::-webkit-scrollbar {
    display: none;
}

.horizontal-scroll::-webkit-scrollbar {
    height: 4px;
}

.horizontal-scroll::-webkit-scrollbar-track {
    background: var(--bg-surface);
    border-radius: 2px;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 2px;
}

.horizontal-scroll.dragging {
    cursor: grabbing;
    user-select: none;
    scroll-behavior: auto !important;
}

/* Empêcher les clics accidentels sur les cartes pendant le drag */
.horizontal-scroll.dragging .hscroll-card,
.leaderboard-list.dragging .lb-card {
    pointer-events: none;
}


/* Cartes des carrousels (à noter / évaluations terminées) : ratio fixe 5:7 */
.horizontal-scroll .card-thumb {
    width: 160px;
    max-width: 180px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    transition: transform 0.3s var(--ease-out-expo);
}

.horizontal-scroll .card-thumb:hover {
    transform: translateY(-10px);
}

.horizontal-scroll .card-thumb img {
    width: 100%;
    aspect-ratio: 5 / 7;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.horizontal-scroll .card-thumb:hover img {
    border-color: var(--accent);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 255, 163, 0.15);
}

.my-cards-page {
    --my-cards-min: 210px;
    --card-img-w: 200px;
    --card-img-h: calc(var(--card-img-w) * 1.4);
    /* ~2.5:3.5 ratio (5:7) */
    padding: 0 0 120px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}



/* ========================================
   COMPACT LIST VIEW - Reusable Component
   Usage: Add .compact-list-view to any .cards-grid container
   ======================================== */

/* Container */
.compact-list-view {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}

/* Card item */
.compact-list-view .card-thumb {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    background: var(--bg-primary);
    padding: 0;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto;
    align-self: flex-start;
    min-height: 50px;
    height: 50px;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: visible;
}

.compact-list-view .card-thumb:hover {
    background: var(--bg-elevated);
    border-color: rgba(42, 215, 173, 0.2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    transform: translateY(0);
}

/* Image wrapper */
.compact-list-view .card-image-wrapper {
    width: 56px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.compact-list-view .card-image-wrapper:hover {
    overflow: visible;
    z-index: 9999;
}

/* Card image */
.compact-list-view .card-thumb img {
    width: 100%;
    height: 200%;
    object-fit: cover;
    object-position: top;
    flex-shrink: 0;
    border-radius: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    transform-origin: left center;
}

/* Image hover expand effect */
.compact-list-view .card-image-wrapper:hover img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100px;
    height: auto;
    object-fit: contain;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
    border-radius: 6px;
}

/* Hide internal badges in compact view */
.compact-list-view .card-badges {
    display: none;
}

.compact-list-view .badge-sealed-icon {
    display: none;
}

/* External badges container */
.compact-list-view .card-badges-external {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-right: 16px;
    flex-shrink: 0;
}

/* Badge styles in compact view */
.compact-list-view .card-badges-external .badge-overlay {
    position: static;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    gap: 4px;
}

.compact-list-view .card-badges-external .badge-score {
    background: rgba(18, 18, 22, 0.92);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 16px;
}

.compact-list-view .card-badges-external .badge-score i {
    color: #FFD700;
}

/* User note badge with dynamic color based on score */
.compact-list-view .card-badges-external .badge-user-note {
    background: rgba(100, 100, 100, 0.9);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 16px;
}

.compact-list-view .card-badges-external .badge-user-note[data-score^="9"],
.compact-list-view .card-badges-external .badge-user-note[data-score="10"] {
    background: rgba(34, 197, 94, 0.9);
}

.compact-list-view .card-badges-external .badge-user-note[data-score^="7"],
.compact-list-view .card-badges-external .badge-user-note[data-score^="8"] {
    background: rgba(59, 130, 246, 0.9);
}

.compact-list-view .card-badges-external .badge-user-note[data-score^="5"],
.compact-list-view .card-badges-external .badge-user-note[data-score^="6"] {
    background: rgba(234, 179, 8, 0.9);
}

.compact-list-view .card-badges-external .badge-user-note[data-score^="1"],
.compact-list-view .card-badges-external .badge-user-note[data-score^="2"],
.compact-list-view .card-badges-external .badge-user-note[data-score^="3"],
.compact-list-view .card-badges-external .badge-user-note[data-score^="4"] {
    background: rgba(239, 68, 68, 0.9);
}

.compact-list-view .card-badges-external .badge-user-note i {
    color: rgba(255, 255, 255, 0.8);
}

.compact-list-view .card-badges-external .badge-sealed {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-inverse);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 8px 16px;
    position: relative;
    cursor: pointer;
    overflow: visible;
}

.compact-list-view .card-badges-external .badge-sealed i {
    color: var(--accent);
}

/* Sealed tooltip in compact view */
.compact-list-view .card-badges-external .badge-sealed .sealed-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background: rgba(18, 18, 22, 0.95);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 100;
}

.compact-list-view .card-badges-external .badge-sealed:hover .sealed-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Progress badge for pending cards in compact view */
.compact-list-view .card-badges-external .badge-progress {
    background: rgba(18, 18, 22, 0.92);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 16px;
}

.compact-list-view .card-badges-external .badge-progress i {
    color: #f59e0b;
}

/* Card meta info */
.compact-list-view .card-thumb-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    flex: 1;
    padding: 0 8px;
}

.compact-list-view .card-thumb-title {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-list-view .card-thumb-serial {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* ========================================
   END COMPACT LIST VIEW
   ======================================== */

/* My Cards / Gallery list-view styles moved to styles-cards-grid.css */

.card-image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
}

.card-badges {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px;
    gap: 6px;
}

.badge-overlay {
    --badge-scale: clamp(1, calc(var(--card-img-w, 120px) / 120px), 1.8);
    display: inline-flex;
    align-items: center;
    gap: calc(4px * var(--badge-scale));
    padding: calc(6px * var(--badge-scale)) calc(10px * var(--badge-scale));
    border-radius: calc(8px * var(--badge-scale));
    font-size: calc(11px * var(--badge-scale));
    font-weight: 700;
    line-height: 1;
    pointer-events: auto;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
}

.badge-overlay i {
    font-size: calc(7px * var(--badge-scale, 1));
}

.badge-score {
    background: rgba(18, 18, 22, 0.92);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.badge-score i {
    color: #FFD700;
}

/* Progress badge for pending cards (waiting for community score) */
.badge-progress {
    background: rgba(18, 18, 22, 0.92);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-progress i {
    color: #f59e0b;
}

/* Golden 10+ (ultimate score = 11) */
.badge-score-golden {
    background: linear-gradient(135deg, rgba(45, 35, 15, 0.95) 0%, rgba(60, 45, 20, 0.95) 100%);
    border: 1px solid rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3), inset 0 0 8px rgba(255, 215, 0, 0.1);
}

.badge-score-golden i,
.badge-score-golden {
    color: transparent;
}

.badge-score-golden i::before,
.badge-score-golden::after {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 30%, #FFD700 50%, #FFEC8B 70%, #FFD700 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: golden-shimmer 2.5s ease-in-out infinite;
}

.badge-score-golden i {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 30%, #FFD700 50%, #FFEC8B 70%, #FFD700 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: golden-shimmer 2.5s ease-in-out infinite;
}

.golden-text {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 30%, #FFD700 50%, #FFEC8B 70%, #FFD700 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: golden-shimmer 2.5s ease-in-out infinite;
}

@keyframes golden-shimmer {
    0% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }

    100% {
        background-position: 0% center;
    }
}

.badge-status {
    background: rgba(107, 114, 128, 0.92);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-sealed {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-inverse);
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-left: auto;
}

.badge-sealed i {
    color: var(--accent);
}

/* Sealed icon badge (top right corner) - extends .badge-overlay */
.badge-sealed-icon {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(18, 18, 22, 0.5);
    border: none;
    border-radius: 0;
    z-index: 5;
    cursor: pointer;
}

.badge-sealed-icon i {
    color: #fff;
}

.badge-sealed-icon .sealed-tooltip {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    margin-right: 0;
    padding: 4px 8px;
    background: rgba(18, 18, 22, 0.95);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.badge-sealed-icon:hover .sealed-tooltip {
    opacity: 1;
    visibility: visible;
}

.my-cards-page .card-thumb:hover .badge-overlay {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* My Cards list-view styles moved to styles-cards-grid.css */

.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding-bottom: 10px;
}

.my-cards-page .filters-row {
    padding: var(--space-4) 0 0;
}

.search-input {
    flex: 0 1 200px;
    max-width: 200px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--bg-elevated);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.search-input:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: var(--bg-elevated-hover);
}

.search-input:focus {
    border-color: var(--accent);
    background: var(--bg-elevated-hover);
    box-shadow: 0 0 0 3px rgba(42, 215, 173, 0.15);
}

.search-input:focus:not(:focus-visible) {
    outline: none;
}

.search-input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chip {
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.chip.active {
    background: #FFFFFF;
    /* Blanc pur pour sélection */
    color: #000000;
    /* Texte noir sur blanc */
    border-color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.chip.active:hover {
    background: #f0f0f0;
    box-shadow: 0 6px 16px rgba(255, 255, 255, 0.3);
}

.size-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
}

.size-select select {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.size-select select:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: var(--bg-elevated-hover);
}

.size-select select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(42, 215, 173, 0.15);
}

.size-select select:focus:not(:focus-visible) {
    outline: none;
}

.size-select select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.toggle-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 13px;
}

.toggle-inline input {
    accent-color: var(--accent);
}

/* ===================================
   COLLECTION VISIBILITY TOGGLE
   Modern toggle with icon transition
   =================================== */
.collection-visibility-toggle {
    margin-left: auto;
    flex-shrink: 0;
}

.visibility-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.visibility-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 4px 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.visibility-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.visibility-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.visibility-toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    background: rgba(255, 75, 75, 0.2);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.visibility-toggle[aria-pressed="true"] .visibility-toggle-track {
    background: rgba(74, 222, 128, 0.2);
}

.visibility-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(255, 75, 75, 0.4);
}

.visibility-toggle[aria-pressed="true"] .visibility-toggle-thumb {
    left: calc(100% - 22px);
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.4);
}

.visibility-icon {
    font-size: 10px;
    color: white;
    position: absolute;
    transition: all 0.2s ease;
}

.visibility-icon--private {
    opacity: 1;
    transform: scale(1);
}

.visibility-icon--public {
    opacity: 0;
    transform: scale(0.5);
}

.visibility-toggle[aria-pressed="true"] .visibility-icon--private {
    opacity: 0;
    transform: scale(0.5);
}

.visibility-toggle[aria-pressed="true"] .visibility-icon--public {
    opacity: 1;
    transform: scale(1);
}

.visibility-toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.3s ease;
    min-width: 52px;
}

.visibility-toggle[aria-pressed="true"] .visibility-toggle-label {
    color: #4ade80;
}

/* Info tooltip */
.visibility-tooltip {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--text-tertiary);
    font-size: 14px;
    cursor: help;
    transition: color 0.2s ease;
}

.visibility-tooltip:hover {
    color: var(--text-secondary);
}

.visibility-tooltip-text {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    width: 280px;
    padding: 12px 14px;
    background: rgba(20, 20, 24, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 100;
    pointer-events: none;
}

.visibility-tooltip-text::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 16px;
    width: 12px;
    height: 12px;
    background: rgba(20, 20, 24, 0.98);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transform: rotate(45deg);
}

.visibility-tooltip:hover .visibility-tooltip-text {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .visibility-toggle-label {
        display: none;
    }

    .visibility-toggle {
        padding: 6px;
    }

    .visibility-tooltip-text {
        width: 240px;
        right: -10px;
    }
}

.card-thumb-meta {
    padding: 8px 4px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.my-cards-page .cards-grid.list-view .card-thumb-meta {
    padding: 0 12px;
    gap: 4px;
    flex: 1 1 auto;
}

.card-thumb-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
}

.my-cards-page .cards-grid.list-view .card-thumb-title {
    font-size: 12.5px;
    white-space: nowrap;
    -webkit-line-clamp: 1;
    max-width: 180px;
}

.card-thumb-serial {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive tweaks for tablet and mobile */
/* Note: .cards-grid responsive styles moved to styles-cards-grid.css */
@media (max-width: 1024px) {
    .my-cards-page {
        padding: 14px 14px 110px;
    }
}

@media (max-width: 768px) {
    .my-cards-page {
        padding: 12px 12px 100px;
    }

    /* Global badge responsive - applies to all pages */
    .badge-overlay {
        font-size: 10px;
        padding: 5px 8px;
    }

    .card-badges {
        padding: 6px;
    }
}

@media (max-width: 480px) {
    .my-cards-page {
        padding: 12px 10px 100px;
    }

    .badge-overlay {
        font-size: 9px;
        padding: 4px 6px;
        gap: 3px;
    }

    .badge-overlay i {
        font-size: 8px;
    }

    .card-badges {
        padding: 5px;
    }
}

/* ===================================
   GALLERY PAGE STYLES
   =================================== */

.gallery-page {
    --card-img-w: 200px;
    --card-img-h: calc(var(--card-img-w) * 1.4);
    padding: 0 0 120px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}



/* ===========================================
   CARDS GRID - Moved to styles-cards-grid.css
   Gallery & My Cards grid styles are now in a dedicated file
   for better maintainability and reduced duplication.
   =========================================== */

.gallery-page .filters-row {
    padding: 0;
    background: transparent;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Search expandable - Desktop/Tablet: toggle hidden, input always visible */
.search-expandable {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-expandable .search-toggle {
    display: none;
}

.search-expandable .search-input {
    display: block;
}

/* Gallery Card Count - uses shared .counter-pill style */
.gallery-card-count .card-icon {
    width: 14px;
    height: 18px;
    flex-shrink: 0;
}

.gallery-stats {
    margin-left: auto;
    padding-right: 96px;
    font-size: 13px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.gallery-stats i {
    color: var(--brand-mint);
}

.gallery-stats span {
    font-weight: 600;
    color: #fff;
}

/* Gallery Load More / Infinite Scroll */
.gallery-load-more {
    display: flex;
    justify-content: center;
    padding: 32px 20px;
    width: 100%;
}

.gallery-load-more .load-more-spinner {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-tertiary);
    font-size: 14px;
}

.gallery-load-more .load-more-spinner i {
    color: var(--brand-mint);
    font-size: 18px;
}

/* Responsive Gallery & My Cards - Page padding only */
/* Note: .cards-grid responsive styles moved to styles-cards-grid.css */
@media (max-width: 768px) {
    .gallery-page,
    .my-cards-page {
        padding: 0 0 100px 0;
    }

    .gallery-page .filters-row,
    .my-cards-page .filters-row {
        padding: var(--space-3) var(--space-4);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .gallery-page,
    .my-cards-page {
        padding: 0 0 80px 0;
    }

    .gallery-page .filters-row,
    .my-cards-page .filters-row {
        padding: var(--space-2) var(--space-3);
        gap: 8px;
    }
}

@media (max-width: 360px) {
    .gallery-page,
    .my-cards-page {
        padding: 0 0 80px 0;
    }
}

.status-pill {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 11px;
}

.card-thumb {
    flex: 0 0 200px;
    max-width: 240px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
}

.card-thumb.empty-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-thumb.add-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: none;
}

.card-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.card-empty i {
    font-size: 20px;
    color: var(--text-primary);
}

.card-empty-title {
    font-weight: 700;
    color: var(--text-primary);
}

/* GIFTS PAGE (legacy styles moved to ~line 9380) */

.gifts-hero-banner {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 18px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.58)), url('assets/images/Group_1683.png');
    background-size: cover;
    background-position: center;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
    color: var(--text-primary);
}

.gifts-hero-banner h2 {
    margin: 4px 0 6px;
}

.gifts-hero-banner p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
}

.gifts-hero-banner .gifts-kicker {
    color: rgba(255, 255, 255, 0.78);
}

.gifts-tabbar {
    display: inline-flex;
    gap: 8px;
    background: var(--bg-secondary);
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    width: fit-content;
}

.gifts-tab {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.gifts-tab.active {
    background: #ffffff;
    color: var(--text-inverse);
}

.gifts-panels {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gifts-panel {
    display: none;
    flex-direction: column;
    gap: 18px;
}

.gifts-panel.active {
    display: flex;
}

.gifts-hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    align-items: center;
}

.gifts-kicker {
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.gifts-hero h2 {
    margin: 0 0 6px;
    font-size: 24px;
}

.gifts-hero p {
    margin: 0 0 10px;
    color: var(--text-secondary);
}

.gifts-bullets {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    display: grid;
    gap: 4px;
}

.gifts-card {
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.gifts-card-title {
    font-weight: 700;
    margin-bottom: 10px;
}

.gifts-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.gifts-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.gifts-progress-bar span {
    display: block;
    height: 100%;
    background: var(--accent);
}

.gifts-progress-meta {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 12px;
}

.gifts-grid-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.gifts-grid-stats .label {
    color: var(--text-secondary);
    font-size: 12px;
}

.gifts-grid-stats .value {
    font-weight: 700;
    font-size: 16px;
}

.gifts-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.gifts-info-card {
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

.gifts-info-card .title {
    font-weight: 700;
    margin-bottom: 6px;
}

.btn.full {
    width: 100%;
}

@media (max-width: 900px) {
    .gifts-hero {
        grid-template-columns: 1fr;
    }
}

/* Ambassadeurs rewards */
.amb-rewards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.amb-reward-card {
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 420px;
}

.amb-reward-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.amb-reward-title {
    font-weight: 700;
}

.amb-reward-value {
    color: var(--text-secondary);
    font-size: 12px;
}

.amb-reward-cost {
    font-weight: 700;
    text-align: right;
}

.amb-reward-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}

.amb-reward-body .gift-tier-visual {
    flex: 1 1 auto;
}

.amb-reward-body .btn {
    width: 100%;
    margin-top: auto;
}

.amb-points {
    font-size: 28px;
    font-weight: 800;
}

.amb-to-claim ul {
    margin: 4px 0 0;
    padding-left: 16px;
    color: var(--text-secondary);
}

.amb-to-claim .amb-count {
    color: var(--accent);
    margin-left: 6px;
    font-weight: 700;
}

/* Gift tiers */
.gifts-tier-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.gift-tier {
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
    min-height: 360px;
}

.gift-tier.weekly {
    margin-top: 8px;
}

.gift-tier-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.gift-tier-title {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gift-tier-value {
    color: var(--text-secondary);
    font-weight: 600;
}

.gift-tier-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gift-tier-progress-bar {
    flex: 1 1 auto;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.gift-tier-progress-bar span {
    display: block;
    height: 100%;
    background: var(--accent);
    width: 0%;
    transition: width 0.3s ease;
}

.gift-tier-progress-text {
    min-width: 38px;
    text-align: right;
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 12px;
}

.gift-tier-note {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 12px;
}

.gift-tier-visual {
    width: 100%;
    aspect-ratio: 4 / 5;
    /* visuels cadeaux au format 4:5 */
    max-height: 220px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px dashed rgba(255, 255, 255, 0.08);
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 10px;
    overflow: hidden;
}

.gift-tier-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    aspect-ratio: 4 / 5;
}

.gift-tier.weekly .gift-tier-visual {
    max-height: 180px;
}

.gifts-status {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.gifts-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 12px;
}

.gifts-status-insuffisant {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.gifts-status-valid {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--text-inverse);
    font-weight: 700;
}

.muted {
    color: var(--text-secondary);
    font-size: 13px;
}

.muted.center {
    text-align: center;
}

.gifts-info {
    margin-top: 8px;
}

.gifts-weekly {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-card-inner {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--bg-elevated);
    display: grid;
    place-items: center;
    color: var(--text-primary);
    font-size: 18px;
    border: none;
}

.sealed-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #ffffff;
    color: var(--text-inverse);
    font-size: 9px;
    font-weight: 600;
    border-radius: 999px;
}

.sealed-badge.left {
    left: 8px;
    right: auto;
}

.sealed-badge i {
    font-size: 12px;
    color: inherit;
}

.score-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(18, 18, 22, 0.82);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.score-badge.right {
    right: 8px;
    left: auto;
}

.score-badge i {
    color: var(--text-primary);
    font-size: 12px;
}

/* ============================================
   NAVIGATION - DESIGN PROFESSIONNEL SOBRE
   ============================================ */

.bottom-nav-app {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    /* Fond sobre semi-opaque (légèrement éclairci) */
    background: rgba(45, 45, 45, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Bordure top subtile pour séparer */
    border-top: 1px solid rgba(255, 255, 255, 0.06);

    /* Padding safe-area pour iOS notch/home indicator + minimum 12px */
    padding: 0 4px max(12px, var(--safe-area-inset-bottom)) 4px;
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);

    /* Stabilisation GPU pour éviter les glitches */
    transform: translateZ(0);
    will-change: transform;
}

/* Cacher la navbar quand nécessaire (contrôlé par JavaScript) */
.bottom-nav-app.hidden {
    display: none !important;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    padding: 12px 8px;
    min-height: 64px;

    color: rgba(247, 247, 248, 0.5);
    text-decoration: none;
    position: relative;
    z-index: 1;

    /* Transitions subtiles */
    transition: color 0.2s ease;
}

/* Hover : simple changement d'opacité */
.nav-item:hover {
    color: rgba(247, 247, 248, 0.75);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

/* État actif : couleur pleine */
.nav-item.active {
    color: rgba(247, 247, 248, 1);
}

/* Mobile: cacher nav-indicator, style Apple-like clean */
@media (max-width: 767px) {
    .nav-indicator {
        display: none !important;
    }

    .nav-item {
        padding: 8px 4px;
        min-height: 56px;
        gap: 2px;
        /* Désactiver le tap highlight natif */
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }

    .nav-item:hover,
    .nav-item:active {
        background: transparent;
    }

    /* Active state: subtle highlight without background blob */
    .nav-item.active .nav-icon-container {
        color: #fff;
    }

    .nav-item.active span {
        color: #fff;
        font-weight: 600;
    }
}


.nav-item .nav-icon-container {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font-size: 20px;
}

/* User avatar in bottom nav (like Instagram/TikTok) */
.nav-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.nav-item.active .nav-user-avatar {
    border-color: #fff;
}

.nav-item span {
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Notification badge for nav items */
.nav-notification-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    width: 10px;
    height: 10px;
    background: var(--error);
    border-radius: 50%;
    display: none;
    box-shadow: 0 0 0 2px var(--bg-elevated), 0 2px 8px rgba(255, 71, 87, 0.5);
}

.nav-notification-badge.visible {
    display: block;
    animation: notification-pulse 2s ease-in-out infinite;
}

@keyframes notification-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 2px var(--bg-elevated), 0 2px 8px rgba(255, 71, 87, 0.5);
    }

    50% {
        transform: scale(1.2);
        box-shadow: 0 0 0 2px var(--bg-elevated), 0 2px 12px rgba(255, 71, 87, 0.8);
    }
}

/* Make nav-icon-container position relative for badge positioning */
.nav-item .nav-icon-container {
    position: relative;
}

/* Responsive : légèrement plus d'espace sur desktop */
@media (min-width: 768px) {
    .bottom-nav-app {
        max-width: 600px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 999px;
        bottom: 16px;
        border: 1px solid rgba(255, 255, 255, 0.06);

        /* Glassmorphism effect */
        background: rgba(45, 45, 45, 0.5);
        backdrop-filter: blur(10px) saturate(180%);
        -webkit-backdrop-filter: blur(10px) saturate(180%);
    }

    .nav-item {
        max-width: 120px;
    }
}

/* ============================================
   MOBILE BOTTOM NAV - 5 items only
   Ordre: Accueil | Mes cartes | Cadeaux | Noter | Compte
   ============================================ */
@media (max-width: 1023px) {
    /* Cacher les items non essentiels sur mobile */
    .bottom-nav-app .nav-item[data-view="gallery"],
    .bottom-nav-app .nav-item[data-view="leaderboard-view"],
    .bottom-nav-app .nav-item[data-view="missions-view"],
    .bottom-nav-app .nav-item-games {
        display: none !important;
    }

    /* Réordonner les 5 items restants avec flexbox order */
    .bottom-nav-app .nav-item[data-view="dashboard"] { order: 1; }
    .bottom-nav-app .nav-item[data-view="my-cards"] { order: 2; }
    .bottom-nav-app .nav-item[data-view="gifts-view"] { order: 3; }
    .bottom-nav-app .nav-item[data-view="noter-view"] { order: 4; }
    .bottom-nav-app .nav-item[data-view="account"] { order: 5; }
}

/* ============================================
   AUTH PAGE - ENHANCED UX
   ============================================ */

#auth-view {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
    position: relative;
}

#auth-view:not(.active) {
    display: none !important;
    min-height: 0;
}

.auth-container {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-10) var(--space-8);
    box-shadow: var(--shadow-md), 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: fadeIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.auth-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, var(--neon-primary-light) 0%, transparent 70%);
    opacity: 0.1;
    pointer-events: none;
}

/* Logo Section */
.logo-section {
    text-align: center;
    margin-bottom: 40px;
}

.logo-wrapper {
    display: inline-block;
    margin-bottom: 12px;
}

.logo {
    width: auto;
    max-width: 260px;
    height: auto;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo-img.full-branding {
    width: 100%;
    height: auto;
    max-height: 72px;
    object-fit: contain;
}

.logo:hover {
    transform: scale(1.02);
}

.app-title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--font-size-display-md);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.app-subtitle {
    margin: 0;
    font-size: 15px;
    color: var(--text-tertiary);
    line-height: 1.5;
    letter-spacing: 0.02em;
}

/* Social Section */
.social-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.btn {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

.btn-social i {
    font-size: 18px;
}

.btn-google {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-google:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.25);
}

.btn-apple {
    background: #000000;
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-apple:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.divider-text {
    font-size: 13px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* Email Form */
.email-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Reset Password Mode */
.reset-password-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reset-password-title i {
    color: var(--accent);
    font-size: 1.2rem;
}

.reset-password-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Auth mode badge (Nouveau compte) */
.auth-mode-badge {
    display: none;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    animation: badgeFadeIn 0.3s ease;
}

.auth-mode-badge.new-account {
    display: inline-flex;
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.auth-mode-badge.checking {
    display: inline-flex;
    background: transparent;
    color: var(--text-tertiary);
    border: none;
    padding: 4px 0;
}

@keyframes badgeFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.input-field {
    width: 100%;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    font-size: 15px;
    font-family: var(--font-primary);
    transition: all 0.2s ease;
}

.input-field::placeholder {
    color: var(--text-tertiary);
}

.input-field:focus {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.input-field:focus:not(:focus-visible) {
    outline: none;
}

.input-field:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.password-wrapper {
    position: relative;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.password-toggle:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
}

.password-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Primary Button */
.btn-primary {
    background: #ffffff;
    color: #0a0a0c;
    margin-top: 12px;
    font-weight: 700;
    padding: 16px 24px;
    font-size: 15px;
    letter-spacing: 0.02em;
}

.btn-primary:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.2);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

.btn-text {
    flex: 1;
    text-align: center;
}

.btn-icon {
    font-size: 11px;
    transition: transform 0.3s ease;
    opacity: 0.7;
}

.btn-primary:hover .btn-icon {
    transform: translateX(4px);
    opacity: 1;
}

/* Load More Button */
.load-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 24px auto 0;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 280px;
}

.load-more-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(35, 214, 180, 0.3);
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.load-more-btn:active {
    transform: translateY(0);
}

.load-more-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.load-more-btn:hover i {
    transform: translateY(2px);
}

/* Error Message */
.auth-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 77, 79, 0.1);
    border: 1px solid rgba(255, 77, 79, 0.2);
    border-radius: 12px;
    color: var(--danger);
    font-size: 14px;
    margin-top: 16px;
    animation: slideDown 0.3s ease-out;
}

.auth-error i {
    font-size: 18px;
}

/* Footer */
.auth-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.auth-footer-separator {
    color: var(--text-tertiary);
    font-size: 10px;
    opacity: 0.5;
}

.link-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.link-button:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

/* Loading Overlay */
.auth-loading {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 12, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 10000;
}

.auth-loading p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Responsive */
@media (max-width: 540px) {
    .auth-container {
        padding: 32px 24px;
    }

    .app-title {
        font-size: 24px;
    }

    .btn {
        padding: 13px 18px;
        font-size: 14px;
    }
}

/* Responsive tweaks */
@media (max-width: 1024px) {
    .hero-carousel {
        height: 56vh;
        margin: 0 0 36px;
        border-radius: 0;
    }

    .leaderboard-preview-card {
        min-width: 210px;
        max-width: 240px;
    }

    .horizontal-scroll {
        gap: 12px;
        padding: 10px 4px 22px;
    }

    .card-thumb {
        flex: 0 0 180px;
        max-width: 210px;
    }
}

@media (max-width: 768px) {
    .section-title-row h3 {
        font-size: 18px;
    }

    .section-subtitle {
        font-size: 12px;
    }

    .hero-carousel {
        height: 48vh;
        margin: 0 0 32px;
        border-radius: 0;
    }

    .leaderboard-preview-card {
        min-width: 190px;
        max-width: 220px;
    }

    .lb-name {
        font-size: 17px;
    }

    .horizontal-scroll {
        gap: 12px;
    }

    .card-thumb {
        flex: 0 0 170px;
        max-width: 190px;
    }

    .score-badge,
    .sealed-badge {
        top: 6px;
        left: auto;
        right: 6px;
    }
}

@media (max-width: 540px) {
    .hero-carousel {
        height: 42vh;
        margin: 0 0 28px;
        border-radius: 0;
    }

    .section-title-row {
        gap: 12px;
        margin-bottom: 4px;
    }

    .section-title-left {
        gap: 2px;
    }

    .horizontal-scroll {
        gap: 10px;
        padding: 8px 2px 18px;
    }

    .card-thumb {
        flex: 0 0 160px;
        max-width: 180px;
        border-radius: 10px;
    }

    .badge-icon {
        width: 28px;
        height: 28px;
    }

    .leaderboard-preview-card {
        min-width: 180px;
        max-width: 210px;
        border-radius: 14px;
    }
}


/* Account page - styles spécifiques uniquement */
.account-page {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 120px 0;
}



.profile-header {
    display: flex;
    gap: 16px;
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    padding: 24px 20px 16px;
    box-shadow: none;
}

.profile-avatar-wrap {
    position: relative;
    width: 72px;
    height: 72px;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: #1d1d23;
    display: grid;
    place-items: center;
    font-size: 28px;
    color: var(--text-secondary);
    border: none;
}

.avatar-edit-btn {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    border-radius: 5px;
    border: none;
    background: var(--text-primary);
    color: var(--bg-elevated);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 8px;
}

.profile-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
}

.profile-flag {
    width: 20px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
    overflow: hidden;
}

.profile-badges {
    display: flex;
    gap: 6px;
}

.badge {
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-admin {
    background: #2d2dff20;
    color: #9aa7ff;
    border: none;
}

.badge-reseter {
    background: #ff8c0020;
    color: #ffc180;
    border: none;
}

.profile-date {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 12px;
}

/* ========================================
   ACCOUNT HEADER - Profil intégré
   ======================================== */
.page-header--account {
    padding-bottom: 16px;
}

.page-header--account .page-header__content {
    flex-direction: row;
    align-items: center;
}

.account-header {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.account-header__avatar {
    position: relative;
    flex-shrink: 0;
}

.account-header__avatar .profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    font-size: 28px;
}

.page-header.is-scrolled .account-header__avatar .profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 16px;
}

.page-header.is-scrolled .account-header__row2 {
    display: none;
}

.page-header.is-scrolled .account-header__avatar .avatar-edit-btn {
    display: none;
}

.account-header__avatar .avatar-edit-btn {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 6px;
    bottom: -2px;
    right: -2px;
    font-size: 9px;
}

.account-header__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.account-header__row1 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.account-header__name {
    font-size: var(--font-size-h1);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.account-header__flag {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    display: inline-block;
    overflow: hidden;
}

.account-header__flag img,
.account-header__flag .flag-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.account-header__row2 {
    display: flex;
    align-items: center;
    gap: 16px;
}

.account-header__date {
    font-family: var(--font-secondary);
    font-size: 13px;
    color: var(--text-tertiary);
    opacity: 0.7;
}

.account-header__logout {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.account-header__logout:hover {
    color: rgba(255, 255, 255, 0.7);
}

.account-header__logout i {
    font-size: 11px;
    color: #ef4444;
}

/* ========================================
   TAB SYSTEM - Generic Page Tabs
   ======================================== */

/* Generic tab container */
.page-tabs {
    display: inline-flex;
    gap: 0;
    background: var(--bg-secondary);
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    width: fit-content;
    margin: 0;
}

/* Remove margin when inside toolbar */
.page-header__toolbar .page-tabs {
    margin: 0;
}

/* Generic tab button */
.page-tab {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    font-size: 15px;
}

.page-tab.active {
    background: #ffffff;
    color: var(--text-inverse);
}

.page-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
}

/* Account page specific margin */
.account-page .page-tabs {
    margin: 0;
}

/* Tab content */
.tab-content {
    display: none;
    animation: fadeInTab 0.3s ease;
}

.tab-content.active {
    display: block;
}

.noter-page .tab-content {
    padding-right: 96px;
}

.account-page .tab-content {
    padding: 0 20px;
}

.account-page .tab-content.active {
    padding-bottom: 300px;
}

.account-page #tab-stats,
.account-page #tab-infos {
    padding-right: 96px;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   RESPONSIVE - MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    .page-tab {
        padding: 9px 12px;
        font-size: 14px;
    }

    .page-tabs {
        margin: 12px 16px;
    }
}

/* ========================================
   SMALL MOBILE - COMPACT LAYOUT
   ======================================== */

@media (max-width: 400px) {
    .page-tab {
        padding: 8px 10px;
        font-size: 13px;
    }

    .page-tabs {
        margin: 12px 8px;
    }
}

.settings-group {
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Apple-style separators avec marges */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    position: relative;
}

.info-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background-color: var(--border);
}

.info-row:last-child::after {
    display: none;
}

.info-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
}

.info-value {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
    font-size: 14px;
}

.info-value span {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    position: relative;
}

.setting-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background-color: var(--border);
}

.setting-row:last-child::after {
    display: none;
}

/* Toggle Switch (checkbox-based) */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-panel);
    border-radius: 26px;
    transition: 0.3s;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-tertiary);
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
    background-color: var(--bg-app);
}

/* Volume Control */
.volume-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    cursor: pointer;
}

.volume-slider:focus:not(:focus-visible) {
    outline: none;
}

.volume-slider:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.volume-value {
    color: var(--text-secondary);
    font-size: 13px;
    min-width: 36px;
    text-align: right;
}

/* Setting row variants */
.setting-row--toggle {
    padding: 14px 0;
}

.setting-row--volume {
    padding: 14px 0;
    transition: opacity 0.2s ease;
}

.setting-row--volume.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.setting-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
}

.setting-value {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
    font-size: 14px;
}

.setting-value span {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    position: relative;
}

.settings-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background-color: var(--border);
}

.settings-row:last-child::after {
    display: none;
}

.xp-bar {
    width: 100%;
    height: 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    overflow: hidden;
}

.xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #23d6b4, #12c09d);
    width: 0%;
}

.streak-card {
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-soft);
}

.streak-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.streak-title {
    font-weight: 600;
}

.streak-current-wrapper {
    color: var(--text-secondary);
}

.streak-record {
    text-align: right;
}

.streak-label {
    text-transform: uppercase;
    font-size: 11px;
    color: var(--text-tertiary);
}

.streak-value {
    font-size: 18px;
    font-weight: 700;
}

.activity-table {
    margin-top: 14px;
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--radius-lg);
}

.activity-header,
.activity-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding: 10px 12px;
}

.activity-header {
    color: var(--text-tertiary);
    font-size: 12px;
    border-bottom: 1px solid var(--border);
}

.activity-row {
    color: var(--text-secondary);
    font-size: 13px;
    position: relative;
    padding: 12px;
}

.activity-row::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background-color: var(--border);
}

.activity-row:last-child::before {
    display: none;
}

/* ===== STATS LAYOUT - 2 Colonnes ===== */
.stats-layout {
    display: grid;
    grid-template-columns: 65% 1fr;
    gap: 48px;
    align-items: start;
}

/* Tablette portrait : stack vertical */
@media (max-width: 900px) {
    .stats-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.stats-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Level + Streak sur la même ligne */
.level-streak-row {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

.level-streak-row .level-card {
    flex: 65;
}

.level-streak-row .streak-card {
    flex: 35;
}

@media (max-width: 600px) {
    .level-streak-row {
        flex-direction: column;
    }

    .level-streak-row .level-card,
    .level-streak-row .streak-card {
        flex: 1;
    }
}

.stats-column__title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-column__title i {
    color: var(--accent);
    font-size: 14px;
}

/* === Level Card === */
.level-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.level-card__rank {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.level-card__rank-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.level-card__rank-value {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
}

.level-card__xp {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.level-card__xp-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.level-card__xp-info>span:first-child {
    font-weight: 600;
    color: var(--text-primary);
}

.level-card__xp-next {
    color: var(--text-tertiary);
    font-size: 12px;
}

/* === Streak Card - Nouveau design === */
.streak-card {
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.streak-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.streak-card__icon i {
    font-size: 20px;
    color: #fff;
}

.streak-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.streak-card__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.streak-card__values {
    display: flex;
    align-items: center;
    gap: 16px;
}

.streak-card__current,
.streak-card__record {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.streak-card__number {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.streak-card__label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.streak-card__separator {
    width: 1px;
    height: 24px;
    background: var(--border);
}

/* === Activity Table amélioré === */
.stats-column--activity .activity-table {
    margin-top: 0;
}

/* Badges section complète */
.badges-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.badges-header h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
}

.badges-count {
    color: var(--text-tertiary);
    font-size: 14px;
}

.badges-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.badges-title i {
    color: var(--accent);
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    margin-top: 14px;
}

/* Badge cards for account page */
.badge-card {
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
}

.badge-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.badge-card.locked {
    opacity: 0.5;
}

.badge-card.locked .badge-icon {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-tertiary);
}

.badge-card.earned .badge-icon {
    background: rgba(35, 214, 180, 0.15);
    color: var(--accent);
}

.badge-card .badge-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    position: relative;
}

.badge-card .badge-icon .badge-lock {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 12px;
    background: var(--bg-primary);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

.badge-card .badge-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.badge-card .badge-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.badge-card.locked .badge-name {
    color: var(--text-secondary);
}

.badge-card .badge-desc {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.4;
}

.badge-item {
    background: var(--bg-elevated);
    border: none;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 120px;
    min-height: 140px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.badge-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.badge-item.locked {
    opacity: 0.5;
}

.badge-item.earned {
    opacity: 1;
}

.badge-item img {
    max-width: 112px;
    max-height: 112px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.badge-item__name {
    font-size: 11px;
    text-align: center;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.2;
    max-width: 100%;
}

.badge-item.earned .badge-item__name {
    color: var(--text-primary);
}

.badge-name {
    font-size: 13px;
    text-align: center;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.badge-item.unlocked .badge-name {
    color: var(--text-primary);
    font-weight: 600;
}

.badge-tile {
    background: var(--bg-elevated);
    border: none;
    border-radius: 12px;
    padding: 8px;
    display: grid;
    place-items: center;
}

/* ========== BADGES SECTION COMPACT (dans onglet Stats) ========== */
.badges-section-compact {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.badges-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 var(--space-3) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.badges-section-title i {
    color: var(--accent);
    font-size: 0.9rem;
}

.badge-count-compact {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(35, 214, 180, 0.15);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.badges-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 8px;
}

.badge-item-compact {
    background: var(--bg-elevated);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.badge-item-compact:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.badge-item-compact.locked {
    opacity: 0.4;
}

.badge-item-compact.earned {
    opacity: 1;
}

.badge-item-compact img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.badge-item-compact__name {
    font-size: 9px;
    text-align: center;
    color: var(--text-tertiary);
    font-weight: 500;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-item-compact.earned .badge-item-compact__name {
    color: var(--text-secondary);
}

.badge-tile img {
    width: 48px;
    height: 48px;
}

.info-form {
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--radius-lg);
    padding: 16px;
    display: grid;
    gap: 12px;
}

.info-form label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 400;
}

.info-form input,
.info-form textarea {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 14px;
}

.info-form textarea {
    min-height: 80px;
    resize: vertical;
}

.info-form button {
    border: none;
    border-radius: 12px;
    padding: 12px;
    background: var(--accent);
    color: #0a0c0c;
    font-weight: 700;
    cursor: pointer;
}

/* Bouton Logout avec style solide */
.btn-logout {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 100px;
    background: var(--bg-elevated-hover);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    font-family: var(--font-primary);
}

.btn-logout:hover {
    background: var(--bg-elevated-hover);
}

.btn-logout:active {
    transform: scale(0.98);
}

/* Account Actions - Logout & Delete */
.account-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
    padding: 0 4px;
}

.btn-account-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-primary);
}

.btn-account-logout:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

.btn-account-logout:active {
    transform: scale(0.98);
}

.btn-account-logout i {
    font-size: 16px;
    opacity: 0.8;
}

.btn-account-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 100, 100, 0.7);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-primary);
}

.btn-account-delete:hover {
    background: rgba(255, 80, 80, 0.1);
    color: var(--error);
}

.btn-account-delete:active {
    transform: scale(0.98);
}

.btn-account-delete i {
    font-size: 13px;
}

/* ============================================
   INFOS PERSO PAGE - Refined Design
   ============================================ */

/* Stats Layout pour infos - 2 colonnes égales */
#tab-infos .stats-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* Colonnes infos avec plus d'espace interne */
#tab-infos .stats-column {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Titre de colonne (h2) - Plus visible */
#tab-infos .stats-column__title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin: 0 0 24px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#tab-infos .stats-column__title i {
    font-size: 12px;
    color: var(--accent);
}

/* Section Title (h3) - Sous-titres dans les colonnes */
h3.section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin: 0 0 12px 0;
    padding-left: 2px;
}

/* Premier section-title n'a pas besoin de margin-top */
h3.section-title:first-of-type {
    margin-top: 0;
}

/* Section titles suivants ont plus d'espace */
.settings-group+h3.section-title,
.section-note+h3.section-title {
    margin-top: 32px;
}

/* Settings Group - Carte contenant les lignes */
#tab-infos .settings-group {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 2px 18px;
    margin-bottom: 0;
}

/* Setting Row - Lignes individuelles */
#tab-infos .setting-row {
    padding: 15px 0;
    min-height: 24px;
}

#tab-infos .setting-row>span:first-child {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

#tab-infos .setting-row .setting-value {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary) !important;
}

#tab-infos .setting-row .setting-value span {
    color: var(--text-secondary) !important;
}

/* Amélioration du séparateur */
#tab-infos .setting-row::after {
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.04);
}

/* Clickable row dans infos */
#tab-infos .setting-row.clickable {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
}

#tab-infos .setting-row.clickable:hover {
    background: rgba(255, 255, 255, 0.02);
    margin: 0 -18px;
    padding-left: 18px;
    padding-right: 18px;
}

#tab-infos .setting-row.clickable .setting-value {
    color: var(--text-secondary) !important;
}

#tab-infos .setting-row.clickable .setting-value i {
    color: var(--text-tertiary);
    font-size: 10px;
}

#tab-infos .setting-row.clickable:hover .setting-value i {
    color: var(--accent);
}

/* Section Note - Tip/Info box */
.section-note {
    background: rgba(35, 214, 180, 0.04);
    border: 1px solid rgba(35, 214, 180, 0.1);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.55;
}

.section-note strong {
    color: var(--accent);
    font-weight: 600;
}

/* Parrain CTA dans le contexte infos */
#tab-infos .parrain-cta {
    margin-top: 2px;
}

/* App Version - Discret sous le bouton supprimer */
.app-version {
    margin: 20px 0 0 0;
    font-size: 10px;
    color: var(--text-tertiary);
    opacity: 0.4;
    text-align: center;
    letter-spacing: 0.02em;
}

/* Responsive pour infos perso */
@media (max-width: 900px) {
    #tab-infos .stats-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* Page Noter - styles spécifiques uniquement */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    padding-bottom: 20px;
}

.grade-card {
    background: transparent;
    border: none;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.grade-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
}

.grade-card-video {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    background: var(--bg-app);
    overflow: hidden;
    border-radius: 6px;
}

.grade-card-video video,
.grade-card-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grade-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.75) 100%);
    color: #fff;
}

.grade-card-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.grade-card-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-elevated-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.grade-card-username {
    font-size: 14px;
    font-weight: 600;
}

.grade-card-date {
    font-size: 12px;
    opacity: 0.7;
}

.grade-card-info {
    padding: 14px 16px;
    transition: opacity 0.2s ease, max-height 0.2s ease;
}

.grade-card.hide-card-info .grade-card-info {
    display: none;
}

.grade-card-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--text-primary);
}

.grade-card-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.grade-card-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.grade-card-stat i {
    color: var(--accent);
}

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Center empty-state in grid layouts (My Cards, Gallery) */
.my-cards-page .cards-grid .empty-state,
.gallery-page .cards-grid .empty-state {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
}

.empty-state i {
    font-size: 64px;
    margin-bottom: 8px;
    opacity: 0.25;
    background: linear-gradient(135deg, var(--accent) 0%, #1A9E7F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.empty-state p {
    font-size: 16px;
    margin: 0;
    color: var(--text-secondary);
    max-width: 320px;
    line-height: 1.5;
}

.empty-state-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.empty-state-subtitle {
    font-size: 14px;
    color: var(--text-tertiary);
    margin: 0;
    font-style: italic;
}

.empty-state-action {
    margin-top: 8px;
    padding: 10px 20px;
    background: rgba(42, 215, 173, 0.1);
    border: 1px solid rgba(42, 215, 173, 0.2);
    border-radius: 12px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.empty-state-action:hover {
    background: rgba(42, 215, 173, 0.15);
    border-color: rgba(42, 215, 173, 0.3);
    transform: translateY(-2px);
}

/* ============================================
   SERIAL NUMBER SEARCH INDICATOR
   ============================================ */

.serial-search-indicator {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 200px;
    background: linear-gradient(135deg, rgba(42, 215, 173, 0.03) 0%, rgba(42, 215, 173, 0.01) 100%);
    border-radius: 16px;
    border: 1px dashed rgba(42, 215, 173, 0.15);
    margin: 20px 0;
}

.serial-search-indicator i {
    font-size: 48px;
    color: var(--accent);
    opacity: 0.6;
    animation: pulse-search 1.5s ease-in-out infinite;
}

.serial-search-indicator p {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
}

.serial-search-indicator .serial-term {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 18px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(42, 215, 173, 0.1);
    padding: 8px 16px;
    border-radius: 8px;
    letter-spacing: 1px;
}

.serial-search-indicator.serial-not-found {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.03) 0%, rgba(255, 107, 107, 0.01) 100%);
    border-color: rgba(255, 107, 107, 0.15);
}

.serial-search-indicator.serial-not-found i {
    color: var(--text-tertiary);
    animation: none;
    opacity: 0.4;
}

.serial-search-indicator.serial-not-found .serial-term {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
}

@keyframes pulse-search {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* ============================================
   REVIEWER SECTION - Videos pending validation
   ============================================ */

.reviewer-section {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 20px 24px;
    margin-left: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.reviewer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #8b5cf6, #6366f1, #8b5cf6);
}

.reviewer-section__header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.reviewer-section__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.reviewer-section__badge i {
    font-size: 11px;
}

.reviewer-section__info {
    flex: 1;
    min-width: 200px;
}

.reviewer-section__info h3 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}

.reviewer-section__info p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.4;
}

.reviewer-section__stats {
    flex-shrink: 0;
}

.reviewer-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

.reviewer-stat i {
    font-size: 12px;
}

.reviewer-carousel-container {
    position: relative;
    margin: 0 -8px;
}

.reviewer-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reviewer-carousel::-webkit-scrollbar {
    display: none;
}

.reviewer-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.9);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background .2s ease, transform .2s ease;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.reviewer-carousel-arrow:hover {
    background: #8b5cf6;
    transform: translateY(-50%) scale(1.1);
}

.reviewer-carousel-arrow--left {
    left: -6px;
}

.reviewer-carousel-arrow--right {
    right: -6px;
}

.reviewer-carousel-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Reviewer Card Item */
.reviewer-card {
    flex-shrink: 0;
    width: 140px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.reviewer-card:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2);
}

.reviewer-card__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    background: #1a1d24;
}

.reviewer-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reviewer-card__info {
    padding: 10px;
}

.reviewer-card__name {
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.reviewer-card__date {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 4px;
}

.reviewer-card__date i {
    font-size: 9px;
}

/* Empty state */
.reviewer-empty {
    text-align: center;
    padding: 32px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.reviewer-empty i {
    font-size: 32px;
    margin-bottom: 12px;
    color: rgba(139, 92, 246, 0.4);
}

.reviewer-empty p {
    font-size: 14px;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .reviewer-section {
        padding: 16px;
        margin-bottom: 16px;
    }

    .reviewer-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .reviewer-section__info h3 {
        font-size: 15px;
    }

    .reviewer-card {
        width: 120px;
    }
}

/* ============================================
   BANGER SECTION - High-value cards to rate
   ============================================ */

.banger-section {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.1) 0%, rgba(249, 115, 22, 0.05) 100%);
    border: 1px solid rgba(251, 146, 60, 0.25);
    border-radius: 16px;
    padding: 20px 24px;
    margin-left: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.banger-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f97316, #fb923c, #f97316);
}

.banger-section__header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.banger-section__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.banger-section__badge i {
    font-size: 11px;
}

.banger-section__info {
    flex: 1;
    min-width: 200px;
}

.banger-section__info h3 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}

.banger-section__info p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.4;
}

.banger-section__stats {
    flex-shrink: 0;
}

.banger-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

.banger-stat i {
    font-size: 12px;
}

.banger-carousel-container {
    position: relative;
    margin: 0 -8px;
}

.banger-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.banger-carousel::-webkit-scrollbar {
    display: none;
}

.banger-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(249, 115, 22, 0.9);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background .2s ease, transform .2s ease;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.banger-carousel-arrow:hover {
    background: #f97316;
    transform: translateY(-50%) scale(1.1);
}

.banger-carousel-arrow--left {
    left: -6px;
}

.banger-carousel-arrow--right {
    right: -6px;
}

.banger-carousel-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Banger Card Item */
.banger-card {
    flex-shrink: 0;
    width: 140px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(251, 146, 60, 0.2);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    position: relative;
}

.banger-card::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banger-card::before {
    content: '\f06d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 11px;
    right: 13px;
    font-size: 10px;
    color: #fff;
    z-index: 1;
}

.banger-card:hover {
    transform: translateY(-4px);
    border-color: rgba(251, 146, 60, 0.5);
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.25);
}

.banger-card__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    background: #1a1d24;
}

.banger-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banger-card__info {
    padding: 10px;
}

.banger-card__name {
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.banger-card__raters {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 4px;
}

.banger-card__raters i {
    font-size: 9px;
}

/* Empty state */
.banger-empty {
    text-align: center;
    padding: 32px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.banger-empty i {
    font-size: 32px;
    margin-bottom: 12px;
    color: rgba(251, 146, 60, 0.4);
}

.banger-empty p {
    font-size: 14px;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .banger-section {
        padding: 16px;
        margin-left: 16px;
        margin-bottom: 16px;
    }

    .banger-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .banger-section__info h3 {
        font-size: 15px;
    }

    .banger-card {
        width: 120px;
    }
}

/* ============================================
   NOTER PAGE - 2 Column Layout
   ============================================ */

.noter-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 32px;
    align-items: start;
}

.noter-main {
    min-width: 0;
    /* Prevent grid blowout */
}

.noter-sidebar {
    position: sticky;
    top: 100px;
}

/* ============================================
   TRAINING CARD - Premium Compact Design
   ============================================ */

.training-card {
    background: linear-gradient(165deg, #1a1d24 0%, #13151a 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.training-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #23d6b4, #1ec9a8, #19b89a);
    opacity: 0.9;
}

.training-card::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(35, 214, 180, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Header: Icon + Progress Ring */
.training-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.training-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(35, 214, 180, 0.12) 0%, rgba(30, 201, 168, 0.08) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.training-icon-wrapper i {
    font-size: 20px;
    color: #23d6b4;
}

/* Circular Progress Ring */
.training-progress-ring {
    position: relative;
    width: 56px;
    height: 56px;
}

.training-progress-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.training-progress-ring .progress-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 3;
}

.training-progress-ring .progress-fill {
    fill: none;
    stroke: #23d6b4;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.training-progress-ring .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

/* Body: Title + Description */
.training-card-body {
    margin-bottom: 20px;
}

.training-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
}

.training-card-desc {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0;
}

/* CTA Button */
.btn-training-start {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #23d6b4 0%, #1ec9a8 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(35, 214, 180, 0.3);
    margin-bottom: 16px;
}

.btn-training-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(35, 214, 180, 0.4);
}

.btn-training-start:active {
    transform: translateY(0);
}

.btn-training-start i {
    font-size: 12px;
}

/* Benefits Row */
.training-card-benefits {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.benefit-item i {
    font-size: 14px;
    color: rgba(35, 214, 180, 0.7);
}

.benefit-item span {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
}

/* ============================================
   LEGACY TRAINING HERO (Keep for compatibility)
   ============================================ */

.training-hero {
    display: none;
    /* Hidden - replaced by training-card */
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.08) 0%, rgba(75, 85, 99, 0.04) 100%);
    border: 1px solid rgba(156, 163, 175, 0.2);
    border-radius: 20px;
    padding: 28px;
    margin: 32px 0 24px 0;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.training-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(107, 114, 128, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.training-hero:hover {
    border-color: rgba(156, 163, 175, 0.3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.training-header {
    margin-bottom: 24px;
}

.training-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.training-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.training-badge {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
    }

    50% {
        box-shadow: 0 4px 20px rgba(107, 114, 128, 0.5);
    }
}

.training-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Stats Cards */
.training-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

/* Gifts / Dashboard Header Styles */
.gifts-header-wrapper {
    /* Main container for top section */
    display: block;
    margin-bottom: 24px;
    position: relative;
    padding: 40px 0 32px;
    /* Add padding for visual space */
    overflow: hidden;
    /* Contain the background pattern */
    /* Integrated Background: Dots + Mint Glow */
    background-color: transparent;
}

/* Background Pattern (True Dots + Glow) */
.gifts-header-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 1. Dotted Pattern (White dots 1px) */
    /* 2. Top-Center Mint Glow */
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(35, 214, 180, 0.08) 0%, transparent 60%);
    background-size: 24px 24px, 100% 100%;
    /* Dots repeat 24px */
    pointer-events: none;
    z-index: 0;
}

.gifts-header-content {
    position: relative;
    z-index: 1;
    text-align: center;
    /* Center the title */
    margin-bottom: 32px;
}

.gifts-header-dashboard {
    /* The row of cards */
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 0;
    margin-bottom: 32px;
    flex-wrap: wrap;
    max-width: 700px;
    /* Tighter container */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

/* New Tab Bar - Pill Style */
.gifts-nav-container {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
    /* Wrapper has padding-bottom */
    position: relative;
    z-index: 1;
}

.gifts-tabbar-pills {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.gifts-pill {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gifts-pill i {
    font-size: 14px;
}

.gifts-pill:hover {
    color: #fff;
}

.gifts-pill.active {
    background: var(--brand-mint);
    color: var(--text-inverse);
    /* Dark text for contrast */
    box-shadow: 0 4px 12px rgba(35, 214, 180, 0.3);
}

/* Timeline Layout Fix */
.rewards-timeline-section {
    position: relative;
    padding-top: 20px;
}


.dashboard-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 280px;
    max-width: 340px;
    /* Fixed max width for card shape */
}

.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.card-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.card-subtext {
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 4px;
    color: var(--error);
    /* Default red */
}

.card-subtext.valid {
    color: var(--brand-mint);
}

.timeline-header {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    /* Space out title and next goal */
    align-items: center;
}

.timeline-next-goal {
    font-size: 0.85rem;
    color: var(--brand-mint);
    background: rgba(0, 255, 178, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 178, 0.2);
}

.training-stat-card {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}

.training-stat-card:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
}

.training-stat-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--text-secondary);
    line-height: 1;
    margin-bottom: 6px;
}

.training-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: lowercase;
}

/* Progress Bar */
.training-progress-container {
    margin-bottom: 20px;
}

.training-progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 8px;
}

.training-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6b7280 0%, #4b5563 50%, #374151 100%);
    border-radius: 20px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 0 20px rgba(107, 114, 128, 0.4);
}

.training-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.training-progress-text {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    font-weight: 600;
}

/* CTA Button - Base styles (will be overridden by variants) */
.btn-training-cta {
    width: 100%;
    color: #1a1a1a;
    border: none;
    border-radius: 14px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    margin-bottom: 16px;
}

.btn-training-cta i {
    font-size: 18px;
}

/* Benefits */
.training-benefits {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.training-benefit {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.training-benefit i {
    color: #9ca3af;
    font-size: 14px;
}

/* Completed State */
.training-completed {
    text-align: center;
    padding: 40px 20px;
}

.training-completed-icon {
    font-size: 64px;
    margin-bottom: 16px;
    animation: bounce 1s ease;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.training-completed h3 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.training-completed p {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0 0 20px 0;
}

.training-renewal {
    display: inline-block;
    background: rgba(107, 114, 128, 0.1);
    border: 1px solid rgba(156, 163, 175, 0.3);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ============================================
   PROPOSITION 1 : Monochrome Équilibré
   ============================================
   Logique : Nuances de gris équilibrées
   - Badge : Gris moyen (#6b7280) - visible
   - CTA : Noir profond (#1f2937) - action forte
   - Icônes : Gris clair (#9ca3af) - info secondaire
*/

.training-badge-v1 {
    /* Badge gris moyen avec pulse */
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.35);
    animation: pulse-badge 2s ease-in-out infinite;
}

.btn-training-cta-v1 {
    /* CTA blanc - appel à l'action */
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-training-cta-v1:hover {
    background: linear-gradient(135deg, #f5f5f5 0%, #e5e5e5 100%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.btn-training-cta-v1:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.training-benefits-v1 .training-benefit i {
    /* Icônes gris clair */
    color: #9ca3af !important;
}


/* Responsive - Desktop large */
@media (min-width: 1200px) {
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 20px;
    }
}

/* Responsive - Tablette */
@media (max-width: 768px) {
    .account-page {
        padding: 18px 0 90px;
    }

    .profile-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .activity-header,
    .activity-row {
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
        font-size: 12px;
    }

    .noter-page {
        padding: 20px 16px 100px;
    }

    .noter-page .page-title {
        font-size: 24px;
    }

    /* Noter Layout - Tablet: Stack vertically */
    .noter-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .noter-sidebar {
        position: static;
        order: -1;
        /* Put training card above cards on tablet */
    }

    .training-card {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        padding: 20px;
    }

    .training-card-header {
        flex: 0 0 auto;
        margin-bottom: 0;
    }

    .training-card-body {
        flex: 1;
        min-width: 200px;
        margin-bottom: 0;
    }

    .btn-training-start {
        flex: 0 0 auto;
        width: auto;
        padding: 12px 24px;
        margin-bottom: 0;
    }

    .training-card-benefits {
        flex: 0 0 100%;
        padding-top: 12px;
        margin-top: 8px;
    }

    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 14px;
    }

    /* Training Section - Tablette (Legacy) */
    .training-hero {
        padding: 24px;
        margin: 28px 0 20px 0;
    }

    .training-title {
        font-size: 20px;
    }

    .training-stat-value {
        font-size: 26px;
    }
}

/* Responsive - Smartphone */
@media (max-width: 540px) {
    .noter-page {
        padding: 16px 12px 90px;
    }

    .noter-page .page-title {
        font-size: 22px;
    }

    /* Noter Layout - Mobile: Compact card */
    .noter-layout {
        gap: 20px;
    }

    .training-card {
        flex-direction: column;
        padding: 20px;
    }

    .training-card-header {
        width: 100%;
        margin-bottom: 16px;
    }

    .training-card-body {
        min-width: 100%;
        margin-bottom: 16px;
    }

    .btn-training-start {
        width: 100%;
        margin-bottom: 12px;
    }

    .training-card-benefits {
        margin-top: 0;
    }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .grade-card-info {
        padding: 10px 12px;
    }

    .grade-card-name {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .grade-card-stats {
        font-size: 11px;
        gap: 12px;
    }

    /* Training Section - Mobile */
    .training-hero {
        padding: 20px;
        margin: 24px 0 20px 0;
        border-radius: 16px;
    }

    .training-title {
        font-size: 18px;
    }

    .training-badge {
        padding: 4px 10px;
        font-size: 12px;
    }

    .training-subtitle {
        font-size: 14px;
    }

    .training-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .training-stat-card {
        padding: 12px 8px;
    }

    .training-stat-value {
        font-size: 22px;
    }

    .training-stat-label {
        font-size: 11px;
    }

    .btn-training-cta {
        font-size: 15px;
        padding: 14px 20px;
    }

    .training-benefits {
        gap: 10px;
    }

    .training-benefit {
        font-size: 11px;
    }
}

/* ========================================
   SYSTÈME DE NOTATION - INTERFACE GRADING
   ======================================== */

/* Modal de notation */
.grade-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    /* backdrop-filter désactivé - cause des saccades vidéo */
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.grade-modal.active {
    display: flex;
}

.grade-modal-content {
    background: var(--bg-elevated);
    border: none;
    border-radius: 24px;
    max-width: min(90vw, 1500px);
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.grade-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grade-modal-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.grade-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.2s ease;
}

.grade-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
}

.grade-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.grade-card-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.grade-video-section {
    position: relative;
    width: 100%;
    aspect-ratio: 9/16;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
}

.grade-video-section video,
.grade-video-section img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.grade-details-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.grade-card-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.grade-card-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-panel);
    border-radius: 12px;
    border: none;
}

.grade-meta-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.grade-meta-label {
    color: var(--text-secondary);
}

.grade-meta-value {
    color: var(--text-primary);
    font-weight: 600;
}

/* Boutons de notation - Système de précision */
.grading-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.grading-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.precision-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.precision-btn {
    padding: 12px 8px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.precision-btn i {
    font-size: 18px;
}

.precision-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.precision-btn.perfect {
    border-color: var(--precision-perfect);
}

.precision-btn.perfect:hover,
.precision-btn.perfect.selected {
    background: var(--precision-perfect);
    color: #0a0a0c;
    border-color: var(--precision-perfect);
}

.precision-btn.excellent {
    border-color: var(--precision-excellent);
}

.precision-btn.excellent:hover,
.precision-btn.excellent.selected {
    background: var(--precision-excellent);
    color: #0a0a0c;
    border-color: var(--precision-excellent);
}

.precision-btn.good {
    border-color: var(--precision-good);
}

.precision-btn.good:hover,
.precision-btn.good.selected {
    background: var(--precision-good);
    color: #0a0a0c;
    border-color: var(--precision-good);
}

.precision-btn.correct {
    border-color: var(--precision-correct);
}

.precision-btn.correct:hover,
.precision-btn.correct.selected {
    background: var(--precision-correct);
    color: #0a0a0c;
    border-color: var(--precision-correct);
}

.precision-btn.bad {
    border-color: var(--precision-bad);
}

.precision-btn.bad:hover,
.precision-btn.bad.selected {
    background: var(--precision-bad);
    color: #0a0a0c;
    border-color: var(--precision-bad);
}

/* Bouton de soumission */
.submit-grade-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 14px;
    background: var(--accent);
    color: #0a0a0c;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.submit-grade-btn:hover {
    background: var(--accent-strong);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(35, 214, 180, 0.4);
}

.submit-grade-btn:disabled {
    background: var(--bg-panel);
    color: var(--text-tertiary);
    cursor: not-allowed;
    transform: none;
}

/* Responsive modal */
@media (max-width: 768px) {
    .grade-card-preview {
        grid-template-columns: 1fr;
    }

    .precision-buttons {
        grid-template-columns: repeat(3, 1fr);
    }

    .grade-modal-body {
        padding: 16px;
    }
}

@media (max-width: 540px) {
    .precision-buttons {
        grid-template-columns: 1fr 1fr;
    }

    .precision-btn {
        font-size: 11px;
        padding: 10px 6px;
    }
}

/* ========================================
   ANIMATIONS & TRANSITIONS
   ======================================== */

/* Animations Liquid Glass - iOS 26 style */

/* Spring bounce de l'icône au hover */
@keyframes iconSpringBounce {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.3);
    }

    50% {
        transform: scale(0.95);
    }

    70% {
        transform: scale(1.15);
    }

    85% {
        transform: scale(0.98);
    }

    100% {
        transform: scale(1);
    }
}

/* Spring bounce de l'icône active - plus prononcé */
@keyframes iconActiveBounce {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.4) rotate(-5deg);
    }

    40% {
        transform: scale(0.9) rotate(3deg);
    }

    60% {
        transform: scale(1.2) rotate(-2deg);
    }

    80% {
        transform: scale(0.95) rotate(1deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Animation du dot - drop avec bounce */
@keyframes dotDrop {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px) scale(0);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(2px) scale(1.2);
    }

    70% {
        transform: translateX(-50%) translateY(-1px) scale(0.9);
    }

    85% {
        transform: translateX(-50%) translateY(0.5px) scale(1.05);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Classes d'animation */
.fade-in {
    animation: fadeIn 0.3s ease-out;
}

.slide-up {
    animation: slideUp 0.4s ease-out;
}

.slide-down {
    animation: slideDown 0.4s ease-out;
}

.scale-in {
    animation: scaleIn 0.3s ease-out;
}

/* ========================================
   LOADING STATES - SKELETONS
   ======================================== */

.skeleton {
    background: linear-gradient(90deg,
            var(--bg-elevated) 0%,
            var(--bg-panel) 50%,
            var(--bg-elevated) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

.skeleton-card {
    width: 100%;
    height: 280px;
    border-radius: 12px;
}

.skeleton-text {
    height: 16px;
    width: 100%;
    margin-bottom: 8px;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-avatar {
    width: 72px;
    height: 72px;
    border-radius: 20px;
}

.skeleton-badge {
    width: 56px;
    height: 56px;
    border-radius: 12px;
}

/* Spinner de chargement */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-small {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.loading-text {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ========================================
   LAZY IMAGE LOADING
   IntersectionObserver-based with fade-in
   ======================================== */

.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-out;
    background: var(--bg-elevated);
}

.lazy-image.lazy-loaded {
    opacity: 1;
}

.lazy-image.lazy-loading {
    opacity: 0;
}

.lazy-image.lazy-error {
    opacity: 1;
    object-fit: contain;
    background: var(--bg-elevated);
}

/* Lazy image inside card wrapper */
.card-image-wrapper .lazy-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Skeleton meta for card-meta type */
.skeleton-meta {
    padding: 8px 0;
}

/* ========================================
   UI STATE CONTAINERS
   Refactored: 2025-12-22
   ======================================== */

/* Loading state container - displays skeleton items in grid */
.ui-state-loading {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    width: 100%;
    padding: 16px 0;
}

/* Empty state container - shows centered message with icon */
.ui-state-empty {
    grid-column: 1 / -1;
}

/* Error state container - shows error message with retry option */
.ui-state-error {
    grid-column: 1 / -1;
}

.ui-state-error i {
    color: var(--danger);
}

.ui-state-error .empty-state-title {
    color: var(--danger);
}

/* Skeleton item wrapper */
.skeleton-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

/* ========================================
   NOTIFICATIONS & TOASTS
   ======================================== */

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
}

.toast {
    background: var(--bg-elevated);
    border: none;
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideDown 0.3s ease-out;
}

.toast-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.toast.success .toast-icon {
    background: rgba(35, 214, 180, 0.15);
    color: var(--accent);
}

.toast.error .toast-icon {
    background: rgba(255, 77, 79, 0.15);
    color: var(--danger);
}

.toast.info .toast-icon {
    background: rgba(100, 100, 255, 0.15);
    color: #6464ff;
}

.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toast-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.toast-message {
    font-size: 13px;
    color: var(--text-secondary);
}

.toast-close {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.toast-close:hover {
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
    .toast-container {
        top: auto;
        bottom: 100px;
        left: 16px;
        right: 16px;
        max-width: none;
    }
}

/* ========================================
   ENHANCED TOAST SYSTEM (ui-states.js)
   ======================================== */

/* Toast container - bottom-right on desktop */
.toast-container {
    bottom: 20px;
    top: auto;
    pointer-events: none;
}

.toast-container > * {
    pointer-events: auto;
}

/* Toast base enhancements */
.toast {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    animation: toastSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast--dismissing {
    animation: toastSlideOut 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Toast type colors (using -- prefix for new system) */
.toast--success .toast-icon {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success, #10B981);
}

.toast--error .toast-icon {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error, #EF4444);
}

.toast--warning .toast-icon {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning, #F59E0B);
}

.toast--info .toast-icon {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info, #3B82F6);
}

/* Progress bar for auto-dismiss */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.4;
    animation: toastProgress linear forwards;
    width: 100%;
}

.toast--success .toast-progress { background: var(--success, #10B981); }
.toast--error .toast-progress { background: var(--error, #EF4444); }
.toast--warning .toast-progress { background: var(--warning, #F59E0B); }
.toast--info .toast-progress { background: var(--info, #3B82F6); }

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* Mobile: slide up from bottom */
@media (max-width: 768px) {
    .toast {
        animation-name: toastSlideUp;
    }

    .toast--dismissing {
        animation-name: toastSlideDown;
    }
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastSlideDown {
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* ========================================
   XP BONUS TOAST (Special reward toast)
   ======================================== */

.xp-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid var(--accent, #2AD7AD);
    border-radius: 50px;
    box-shadow:
        0 0 30px rgba(42, 215, 173, 0.3),
        0 10px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.xp-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.xp-toast--hiding {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0.95);
}

.xp-toast__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--accent, #2AD7AD) 0%, #1fc4a5 100%);
    border-radius: 50%;
    color: #111;
    font-size: 16px;
    animation: xpPulse 1s ease-in-out infinite;
}

.xp-toast__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xp-toast__amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent, #2AD7AD);
    text-shadow: 0 0 10px rgba(42, 215, 173, 0.5);
    letter-spacing: 0.5px;
}

.xp-toast__reason {
    font-size: 12px;
    color: var(--text-secondary, #a0a0a0);
    font-weight: 500;
}

@keyframes xpPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(42, 215, 173, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(42, 215, 173, 0);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .xp-toast {
        bottom: 120px;
        padding: 12px 20px;
    }

    .xp-toast__icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .xp-toast__amount {
        font-size: 16px;
    }
}

/* ========================================
   SIMPLE TOAST NOTIFICATION (copy/share)
   ======================================== */

.toast-notification {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 10002;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--bg-elevated, #1F1E1E);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    color: var(--text-primary, #fff);
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.toast-notification--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast-notification--success {
    border-color: var(--accent, #2AD7AD);
}

.toast-notification--success i {
    color: var(--accent, #2AD7AD);
}

.toast-notification--error {
    border-color: #EF4444;
}

.toast-notification--error i {
    color: #EF4444;
}

.toast-notification--info {
    border-color: #3B82F6;
}

.toast-notification--info i {
    color: #3B82F6;
}

@media (max-width: 768px) {
    .toast-notification {
        bottom: 120px;
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* ========================================
   UI CONFIRM MODAL
   ======================================== */

.ui-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ui-confirm-modal.active {
    display: flex;
}

.ui-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.ui-confirm-content {
    position: relative;
    background: var(--bg-elevated, #141414);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
    border-radius: 20px;
    padding: 32px 28px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    animation: confirmSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.ui-confirm-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(59, 130, 246, 0.15);
    color: var(--info, #3B82F6);
}

.ui-confirm-icon i {
    font-size: 28px;
}

.ui-confirm-icon--danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error, #EF4444);
}

.ui-confirm-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.ui-confirm-message {
    margin: 0 0 28px;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.ui-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.ui-confirm-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ui-confirm-cancel {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.ui-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ui-confirm-proceed {
    background: var(--cta-primary, #FFFFFF);
    color: var(--cta-primary-text, #000000);
}

.ui-confirm-proceed:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.ui-confirm-proceed--danger {
    background: var(--error, #EF4444);
    color: #FFFFFF;
}

.ui-confirm-proceed--danger:hover {
    background: #DC2626;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

@keyframes confirmSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media (max-width: 480px) {
    .ui-confirm-content {
        padding: 24px 20px;
    }

    .ui-confirm-actions {
        flex-direction: column;
    }

    .ui-confirm-btn {
        width: 100%;
    }
}

/* ========================================
   SUCCESS STATE WITH ANIMATED CHECKMARK
   ======================================== */

.ui-state-success {
    text-align: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.success-checkmark {
    width: 80px;
    height: 80px;
}

.checkmark-svg {
    width: 100%;
    height: 100%;
}

.checkmark-circle {
    stroke: var(--success, #10B981);
    stroke-width: 2;
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    animation: checkmarkCircle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    stroke: var(--success, #10B981);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: checkmarkStroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.4s forwards;
}

@keyframes checkmarkCircle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes checkmarkStroke {
    to {
        stroke-dashoffset: 0;
    }
}

.ui-state-success-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.ui-state-success-message {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 280px;
}

/* ========================================
   LOADING CONTAINER (Spinner + Message)
   ======================================== */

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    text-align: center;
}

.loading-text {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ========================================
   INFINITE SCROLL LOAD MORE
   ======================================== */

.load-more-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-tertiary);
    padding: 20px;
}

.load-more-error i {
    color: var(--error, #EF4444);
}

.load-more-retry {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.load-more-retry:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ========================================
   REDUCED MOTION SUPPORT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .toast,
    .toast--dismissing,
    .ui-confirm-content {
        animation: none;
    }

    .toast-progress {
        display: none;
    }

    .checkmark-circle,
    .checkmark-check {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* ========================================
   UTILITIES - CLASSES HELPERS
   ======================================== */

/* Spacing */
.mt-8 {
    margin-top: 8px;
}

.mt-12 {
    margin-top: 12px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-24 {
    margin-top: 24px;
}

.mt-32 {
    margin-top: 32px;
}

.mb-8 {
    margin-bottom: 8px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-24 {
    margin-bottom: 24px;
}

.mb-32 {
    margin-bottom: 32px;
}

.p-8 {
    padding: 8px;
}

.p-12 {
    padding: 12px;
}

.p-16 {
    padding: 16px;
}

.p-24 {
    padding: 24px;
}

/* Display */
.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

/* Flex */
.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.align-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-8 {
    gap: 8px;
}

.gap-12 {
    gap: 12px;
}

.gap-16 {
    gap: 16px;
}

.gap-24 {
    gap: 24px;
}

/* Text */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-tertiary {
    color: var(--text-tertiary);
}

.text-accent {
    color: var(--accent);
}

.text-danger {
    color: var(--danger);
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

/* Visibility */
.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

.opacity-0 {
    opacity: 0;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-100 {
    opacity: 1;
}

/* ========================================
   FOCUS STATES - ACCESSIBILITÉ (WCAG 2.4.7)
   ======================================== */

/* WCAG: Only hide focus for mouse/touch users, preserve for keyboard navigation */
*:focus:not(:focus-visible) {
    outline: none;
}

/* WCAG 2.4.7: Visible focus indicator for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

button:focus-visible,
.nav-item:focus-visible,
.precision-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(35, 214, 180, 0.2);
    outline: none; /* Use border + box-shadow instead for inputs */
}

/* ========================================
   FILTRES & TRI
   ======================================== */

.filters-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    overflow-x: auto;
}

.filter-chip {
    padding: 8px 16px;
    border: none;
    background: var(--bg-panel);
    color: var(--text-secondary);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.filter-chip:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.filter-chip.active {
    background: #FFFFFF;
    color: #000000;
    border-color: #FFFFFF;
}

.sort-select {
    padding: 8px 12px;
    border: none;
    background: var(--bg-panel);
    color: var(--text-primary);
    border-radius: 10px;
    font-size: 13px;
    font-family: var(--font-primary);
    cursor: pointer;
}

/* ========================================
   PAGINATION
   ======================================== */

.pagination {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

.page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: none;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover {
    background: var(--bg-panel);
    color: var(--text-primary);
}

.page-btn.active {
    background: var(--accent);
    color: #0a0a0c;
    border-color: var(--accent);
}

.page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ========================================
   FORMULAIRES AVANCÉS
   ======================================== */

/* Custom checkbox */
.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
    display: none;
}

.checkbox-box {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--bg-panel);
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
}

.custom-checkbox input[type="checkbox"]:checked+.checkbox-box {
    background: var(--accent);
    border-color: var(--accent);
}

.checkbox-box i {
    color: #0a0a0c;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.custom-checkbox input[type="checkbox"]:checked+.checkbox-box i {
    opacity: 1;
}

/* Custom radio */
.custom-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.custom-radio input[type="radio"] {
    display: none;
}

.radio-circle {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--bg-panel);
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
}

.custom-radio input[type="radio"]:checked+.radio-circle {
    border-color: var(--accent);
}

.radio-circle::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
}

.custom-radio input[type="radio"]:checked+.radio-circle::after {
    opacity: 1;
    transform: scale(1);
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    width: 48px;
    height: 28px;
    background: var(--bg-panel);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: var(--text-tertiary);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toggle-switch.active {
    background: var(--accent);
    border-color: var(--accent);
}

.toggle-switch.active::after {
    left: calc(100% - 23px);
    background: var(--bg-app);
}

/* Custom select */
.custom-select {
    position: relative;
}

.custom-select select {
    appearance: none;
    width: 100%;
    padding: 12px 36px 12px 12px;
    border: none;
    background: var(--bg-panel);
    color: var(--text-primary);
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 14px;
    cursor: pointer;
}

.custom-select::after {
    content: '▼';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
    font-size: 10px;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    body {
        background: #fff;
        color: #000;
    }

    .bottom-nav-app,
    .sidebar-header,
    .btn-icon-add,
    .avatar-edit-btn,
    .btn-logout,
    .toast-container {
        display: none !important;
    }

    .page-container,
    .dashboard-content,
    .account-page {
        max-width: 100%;
        padding: 0;
    }

    .hero-carousel,
    .grade-modal,
    .skeleton {
        display: none;
    }
}

/* Indicateur coulissant (sliding bubble indicator) */
.nav-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    border-radius: 999px;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 0 0 0.5px rgba(0, 0, 0, 0.4);
    width: 0;
    transform: translateX(0);
    pointer-events: none;
    transition: width 260ms cubic-bezier(0.25, 0.8, 0.25, 1), transform 260ms cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0;
    z-index: 0;
}

/* ========================================
   LEADERBOARD PAGE
   ======================================== */

.leaderboard-page {
    padding: 0 0 120px 0;
}

.btn-back {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.btn-back:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(-2px);
}

.btn-back:active {
    transform: translateX(-2px) scale(0.96);
}

/* Info Badge */
.leaderboard-info-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 0 auto 16px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    font-size: 13px;
    color: var(--text-secondary);
    width: fit-content;
}

.leaderboard-info-badge i:first-child {
    color: var(--accent);
    font-size: 16px;
}

.leaderboard-info-badge span {
    flex: 1;
}

.btn-info-icon {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    transition: all 0.2s;
}

.btn-info-icon:hover {
    color: var(--accent);
    transform: scale(1.1);
}

/* Leaderboard Description */
.leaderboard-description {
    font-family: var(--font-secondary);
    font-size: 13px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    margin: 16px 20px 0;
}

/* Minters Counter */
/* Counter Pill - shared style for minters-counter, gallery-card-count, etc. */
.counter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-family: var(--font-secondary);
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.counter-pill i,
.counter-pill svg {
    color: var(--accent);
    font-size: 12px;
}

/* Minters Counter - now uses .counter-pill class in HTML */
/* Keeping selector for backwards compatibility with JS */
.minters-counter {
    /* Styles inherited from .counter-pill */
}

/* Minter Search */
.minter-search {
    position: relative;
    display: flex;
    align-items: center;
}

.minter-search__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.minter-search__trigger:hover {
    background: rgba(0, 0, 0, 0.7);
    color: var(--text-primary);
}

.minter-search__trigger i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.minter-search__input-wrapper {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    width: 0;
    overflow: hidden;
    background: rgba(10, 10, 15, 0.95);
    border: 1px solid transparent;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.minter-search.active .minter-search__trigger {
    opacity: 0;
    pointer-events: none;
}

.minter-search.active .minter-search__input-wrapper {
    width: 280px;
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.minter-search__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 16px;
    font-family: var(--font-secondary);
    font-size: 14px;
    color: var(--text-primary);
}

.minter-search__input::placeholder {
    color: var(--text-tertiary);
}

.minter-search__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 4px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-tertiary);
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
}

.minter-search.has-value .minter-search__clear {
    opacity: 1;
}

.minter-search__clear:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Search Results Dropdown */
.minter-search__results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-height: 360px;
    overflow-y: auto;
    background: rgba(15, 15, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.minter-search.has-results .minter-search__results {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.minter-search__result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.minter-search__result-item:first-child {
    border-radius: 16px 16px 0 0;
}

.minter-search__result-item:last-child {
    border-radius: 0 0 16px 16px;
}

.minter-search__result-item:only-child {
    border-radius: 16px;
}

.minter-search__result-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.minter-search__result-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.minter-search__result-info {
    flex: 1;
    min-width: 0;
}

.minter-search__result-name {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.minter-search__result-name mark {
    background: transparent;
    color: var(--accent);
    font-weight: 600;
}

.minter-search__result-rank {
    font-family: var(--font-secondary);
    font-size: 12px;
    color: var(--text-tertiary);
}

.minter-search__no-results {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
}

.minter-search__no-results i {
    display: block;
    font-size: 24px;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* Leaderboard row highlight effect */
.leaderboard-row.highlight,
.podium-rank.highlight {
    animation: highlightPulse 2s ease-out;
}

@keyframes highlightPulse {
    0% {
        background: rgba(35, 214, 180, 0.3);
        box-shadow: 0 0 20px rgba(35, 214, 180, 0.4);
    }

    100% {
        background: transparent;
        box-shadow: none;
    }
}

/* Podium Top 3 */
.podium-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    padding: 24px 0 0;
    margin: 0 20px 24px;
    background: transparent;
    border-radius: 20px;
    border: none;
}

/* Badge inside podium - takes full row width but badge itself is fit-content */
.podium-container>.leaderboard-info-badge {
    flex: 1 1 100%;
    max-width: 100%;
    margin: 0 0 12px;
    box-sizing: border-box;
}

.podium-rank {
    position: relative;
    flex: 1;
    max-width: 120px;
    text-align: center;
    animation: podiumAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.podium-rank.rank-1 {
    order: 2;
    animation-delay: 0.1s;
    flex: 1 1 0;
    height: 360px;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    background: linear-gradient(180deg, rgba(244, 198, 12, 0.08) 0%, rgba(244, 198, 12, 0.02) 100%);
    border: 1px solid rgba(244, 198, 12, 0.25);
    border-radius: 16px;
    box-shadow: none;
}

.podium-rank.rank-2 {
    order: 1;
    animation-delay: 0.2s;
    flex: 1 1 0;
    height: 300px;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    background: linear-gradient(180deg, rgba(192, 192, 192, 0.08) 0%, rgba(192, 192, 192, 0.02) 100%);
    border: 1px solid rgba(192, 192, 192, 0.25);
    border-radius: 16px;
    box-shadow: none;
}

.podium-rank.rank-3 {
    order: 3;
    animation-delay: 0.3s;
    flex: 1 1 0;
    height: 300px;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    background: linear-gradient(180deg, rgba(205, 127, 50, 0.08) 0%, rgba(205, 127, 50, 0.02) 100%);
    border: 1px solid rgba(205, 127, 50, 0.25);
    border-radius: 16px;
    box-shadow: none;
}

@keyframes podiumAppear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.podium-avatar-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 12px;
}

.podium-rank.rank-1 .podium-avatar-wrapper {
    width: 100px;
    height: 100px;
}

.podium-crown {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-size: 28px;
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.6));
    animation: crownFloat 2s ease-in-out infinite;
}

@keyframes crownFloat {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-4px);
    }
}

.podium-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.podium-rank.rank-1 .podium-avatar {
    border-color: #F4C60C;
    box-shadow: none;
}

.podium-rank.rank-2 .podium-avatar {
    border-color: #C0C0C0;
    box-shadow: none;
}

.podium-rank.rank-3 .podium-avatar {
    border-color: #CD7F32;
    box-shadow: none;
}

.podium-position {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    color: #0a0a0c;
}

.podium-rank.rank-1 .podium-position {
    background: linear-gradient(135deg, #FFD700, #F4C60C);
    box-shadow: 0 4px 12px rgba(244, 198, 12, 0.4);
}

.podium-rank.rank-2 .podium-position {
    background: linear-gradient(135deg, #E8E8E8, #C0C0C0);
    box-shadow: 0 4px 12px rgba(192, 192, 192, 0.3);
}

.podium-rank.rank-3 .podium-position {
    background: linear-gradient(135deg, #E5A268, #CD7F32);
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.3);
}

.podium-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podium-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.podium-points {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
}

.podium-rank.rank-1 .podium-points {
    font-size: 14px;
}

/* Global leaderboard: rank label (mint, prominent) */
.podium-rank-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
}

.podium-rank.rank-1 .podium-rank-label {
    font-size: 14px;
}

/* Global leaderboard: stats row (smaller) */
.podium-stats-row {
    font-size: 11px;
    color: var(--text-secondary);
}

.podium-rank-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.podium-rank-title {
    font-size: 11px;
    color: var(--text-secondary);
}

.podium-rank-separator {
    font-size: 11px;
    color: var(--text-tertiary);
}

.podium-precision {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Podium Flag */
.podium-flag {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: middle;
}

.podium-rank-row .podium-flag {
    margin: 0 2px;
}

.podium-rank-label .podium-flag {
    margin-left: 6px;
}

/* Podium Badges */
.podium-badges {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
}

.podium-badges img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Full Leaderboard List */
.leaderboard-full-list {
    padding: 0 20px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    animation: itemSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.leaderboard-item:nth-child(1) {
    animation-delay: 0.05s;
}

.leaderboard-item:nth-child(2) {
    animation-delay: 0.1s;
}

.leaderboard-item:nth-child(3) {
    animation-delay: 0.15s;
}

.leaderboard-item:nth-child(4) {
    animation-delay: 0.2s;
}

.leaderboard-item:nth-child(5) {
    animation-delay: 0.25s;
}

@keyframes itemSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.leaderboard-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateX(4px);
}

.leaderboard-item.current-user {
    background: rgba(35, 214, 180, 0.08);
    border-color: rgba(35, 214, 180, 0.3);
}

.leaderboard-item.current-user:hover {
    background: rgba(35, 214, 180, 0.12);
    border-color: rgba(35, 214, 180, 0.4);
}

.lb-item-rank {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.lb-item-rank.top-10 {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.lb-item-rank.default {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-tertiary);
}

.lb-item-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.lb-item-info {
    flex: 1;
    min-width: 0;
}

.lb-item-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.lb-item-name .flag {
    font-size: 14px;
}

.lb-item-name .verified-icon {
    color: var(--accent);
    font-size: 14px;
}

.lb-item-rank-title {
    font-size: 12px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.lb-item-rank-title .flag-img {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Leaderboard Item Badges */
.lb-item-badges {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
}

.lb-item-badges img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.lb-item-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.lb-item-points {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.lb-item-precision {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Global leaderboard: rank label in stats */
.lb-item-rank-label {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.lb-item-chevron {
    color: var(--text-tertiary);
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.leaderboard-item:hover .lb-item-chevron {
    transform: translateX(2px);
    color: var(--accent);
}

/* Loading State */
.leaderboard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: var(--text-tertiary);
}

.leaderboard-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .podium-container {
        padding: 20px 16px 24px;
        margin: 0 16px 20px;
    }

    .podium-container .leaderboard-info-badge {
        margin: 0 0 8px;
    }

    .podium-avatar-wrapper {
        width: 64px;
        height: 64px;
    }

    .podium-rank.rank-1 .podium-avatar-wrapper {
        width: 80px;
        height: 80px;
    }

    .podium-name {
        font-size: 13px;
    }

    .podium-points {
        font-size: 14px;
    }

    .podium-rank.rank-1 .podium-points {
        font-size: 16px;
    }

    .leaderboard-full-list {
        padding: 0 16px;
    }
}

/* Optimisation pour écrans étroits - Masquer avatars liste classement */
@media (max-width: 450px) {

    /* Cacher les avatars de la liste du classement (pas le podium) */
    .lb-item-avatar {
        display: none !important;
    }

    /* Ajuster l'espacement de leaderboard-item */
    .leaderboard-item {
        gap: 12px !important;
    }
}

/* Optimisation pour très petits écrans (360px et moins) */
@media (max-width: 360px) {

    /* Réduction générale des paddings */
    .page-container,
    .dashboard-content,
    .account-page,
    .noter-page {
        padding: 16px 8px 90px !important;
    }

    /* Page title */
    .page-title {
        font-size: 20px !important;
    }

    /* Podium - Réduction taille et espacement */
    .podium-container {
        padding: 20px 8px !important;
        margin: 0 8px 16px !important;
        gap: 8px !important;
    }

    .podium-rank {
        max-width: 100px !important;
    }

    .podium-avatar-wrapper {
        width: 56px !important;
        height: 56px !important;
    }

    .podium-rank.rank-1 .podium-avatar-wrapper {
        width: 70px !important;
        height: 70px !important;
    }

    .podium-position {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }

    .podium-name {
        font-size: 12px !important;
    }

    .podium-rank-title {
        font-size: 10px !important;
    }

    .podium-points {
        font-size: 12px !important;
    }

    .podium-precision {
        font-size: 11px !important;
    }

    .podium-rank.rank-1 .podium-points {
        font-size: 14px !important;
    }

    /* Grille de cartes - 2 colonnes serrées */
    .cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Section entraînement */
    .training-hero {
        padding: 16px !important;
        margin: 20px 0 16px 0 !important;
    }

    .training-title {
        font-size: 16px !important;
    }

    .training-badge {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    .training-subtitle {
        font-size: 13px !important;
    }

    .btn-training-cta {
        font-size: 14px !important;
        padding: 12px 16px !important;
    }

    .training-benefits {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    .training-benefit {
        font-size: 11px !important;
    }

    /* Leaderboard list */
    .leaderboard-full-list {
        padding: 0 8px !important;
    }

    .leaderboard-row {
        padding: 10px !important;
    }

    /* Navbar */
    .nav-item {
        font-size: 10px !important;
    }

    .nav-icon {
        font-size: 20px !important;
    }
}

/* ---------- Noter : modal de notation ---------- */
.grade-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: stretch;
    justify-content: stretch;
    z-index: 1200;
    padding: 0;
}

.grade-modal.open {
    display: flex;
}

.grade-modal-backdrop {
    position: absolute;
    inset: 0;
    background: #0c0f14;
}

.grade-modal-content {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    background: #0c0f14;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.grade-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    z-index: 20;
}

/* Tutorial button - positioned below close button with gap */
.grade-tutorial-btn {
    position: absolute;
    top: 56px;
    right: 12px;
    margin-top: 8px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    z-index: 20;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.grade-tutorial-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.grade-modal-body {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    background: #000;
}

.grade-compact-toggle {
    position: absolute;
    top: 12px;
    right: 56px;
    z-index: 12;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.grade-compact-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

.grade-panel.compact .grade-header,
.grade-panel.compact .grade-badges,
.grade-panel.compact .grade-report label,
.grade-panel.compact .grade-report textarea,
.grade-panel.compact .grade-report .muted,
.grade-panel.compact .grade-raters-section {
    display: none;
}

/* En mode compact, on cache seulement le bouton banger, pas les étoiles de qualité vidéo */
.grade-panel.compact .video-quality-btn.video-quality-banger-btn {
    display: none;
}

/* Grade Raters Section */
.grade-raters-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.grade-raters-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 12px 0;
}

.grade-raters-section .raters-list {
    max-height: 200px;
    overflow-y: auto;
}

/* ========================================
   NOUVEAU SYSTÈME DE ZOOM (transform + resizer)
   CORRIGÉ - flex: 0 0 auto pour que JS pilote la largeur
   ======================================== */

/* Container principal - Aligné à gauche pour que le resizer suive 1:1 la souris */
.grade-modal-body.main-wrapper {
    display: flex !important;
    flex-direction: row;
    justify-content: flex-start !important;
    /* Aligné à gauche obligatoire pour le resize */
    align-items: stretch;
    gap: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

/* Zone du player - 50% initial par défaut (demande utilisateur) */
#grade-player {
    flex: 0 0 auto !important;
    width: 50%;
    /* Partage 50/50 initial */
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #000;
    display: block;
}

/* Container de la vidéo - prend tout l'espace */
#grade-media {
    width: 100% !important;
    /* Force 100% pour suivre le player */
    height: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #11141d, #0c0f14);
    border-radius: 0;
    display: flex;
    /* Flex pour centrer la vidéo */
    align-items: center;
    justify-content: center;
}

/* La vidéo - object-fit CONTAIN pour ne rien perdre + transform-origin center */
#grade-video {
    width: 100%;
    height: 100%;
    max-height: calc(100% - 10px);
    /* Sécurité pour ne pas déborder */
    object-fit: contain !important;
    /* CONTAIN pour voir 100% de la vidéo */
    display: block;
    background: #000;
    will-change: transform;
    transform-origin: center center;
    transition: transform 0.05s linear;
}

/* Classe pour désactiver les transitions pendant le drag/resize */
#grade-video.no-transition {
    transition: none !important;
}

/* Barre de redimensionnement (resizer) - collée */
.resizer {
    width: 8px;
    height: 100%;
    background: linear-gradient(180deg, rgba(35, 214, 180, 0.3), rgba(35, 214, 180, 0.1));
    cursor: ew-resize;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    transition: background 0.2s ease;
}

.resizer:hover,
.resizer.active {
    background: linear-gradient(180deg, rgba(35, 214, 180, 0.6), rgba(35, 214, 180, 0.3));
}

.resizer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 40px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

/* Curseur grab/grabbing pour le pan */
#grade-player.panning {
    cursor: grabbing !important;
}

#grade-player.zoomed {
    cursor: grab;
}


/* ========================================
   VIDEO ZOOM WRAPPER
   Isolates video from controls for zoom/pan
   ======================================== */

.video-zoom-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 48px;
    /* Leave space for custom controls */
    overflow: hidden;
    background: #000;
    cursor: zoom-in;
}

.video-zoom-wrapper.zoomed {
    cursor: grab;
}

.video-zoom-wrapper.panning {
    cursor: grabbing !important;
}

.video-zoom-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    will-change: transform;
    transform-origin: center center;
}

/* ========================================
   CUSTOM VIDEO CONTROLS
   Fixed at bottom, never transforms
   ======================================== */

.video-custom-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.8));
    z-index: 30;
}

.vcc-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.vcc-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.vcc-btn i {
    font-size: 14px;
}

.vcc-play i {
    margin-left: 2px;
    /* Optical centering for play icon */
}

.vcc-play.playing i {
    margin-left: 0;
}

/* Progress bar */
.vcc-progress {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    overflow: visible;
}

.vcc-progress-bar {
    height: 100%;
    background: var(--accent-primary, #23d6b4);
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s linear;
}

.vcc-progress-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.vcc-progress:hover .vcc-progress-handle {
    opacity: 1;
}

/* Time display */
.vcc-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 90px;
    text-align: center;
}

/* Rewind button - active state when holding */
.vcc-rewind.active {
    background: var(--accent-primary, #23d6b4);
    color: #000;
}

.vcc-rewind.active i {
    animation: rewindPulse 0.3s ease-in-out infinite alternate;
}

@keyframes rewindPulse {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-2px);
    }
}

/* Panel flexible - remplit l'espace restant à droite du player */
#grade-panel {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 400px !important;
    max-width: 800px !important;
    /* Limite max 800px */
    height: 100%;
    overflow-y: auto;
    background: #0a0a0a;
}

/* Mobile: Cacher le resizer et layout vertical */
@media (max-width: 1023px) {
    .grade-modal-body.main-wrapper {
        flex-direction: column;
    }

    .resizer {
        display: none;
    }

    #grade-player {
        width: 100% !important;
        height: 50vh;
        flex: 0 0 50vh !important;
    }

    #grade-media {
        width: 100%;
        height: 100%;
    }

    #grade-panel {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: none;
    }
}

/* Cacher les contrôles de volume et téléchargement de la vidéo */
#grade-video::-webkit-media-controls-volume-slider,
#grade-video::-webkit-media-controls-mute-button,
#grade-video::-webkit-media-controls-volume-control-container {
    display: none !important;
}

/* Video Loader - Indicateur de téléchargement */
.video-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10;
    gap: 12px;
}

.video-loader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--brand-mint, #23d6b4);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.video-loader-text {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.video-loader-progress {
    color: var(--brand-mint, #23d6b4);
    font-size: 20px;
    font-weight: 700;
}

/* ========================================
   VIDEO CONTROLS OVERLAY - Compact Pro UX
   ======================================== */
.video-controls-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 5px 8px;
    z-index: 10;
    pointer-events: auto;
}

.video-controls-overlay.hidden {
    display: none;
}

.speed-btn {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.12s ease;
}

.speed-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

.speed-btn:active {
    transform: scale(0.92);
    background: var(--brand-mint);
    color: #000;
}

.speed-indicator {
    min-width: 28px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-mint);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.controls-sep {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 2px;
}

.controls-hint {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.controls-close {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    margin-left: 2px;
    transition: all 0.12s ease;
}

.controls-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Bouton pour réafficher les contrôles */
.controls-show {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 10;
    transition: all 0.15s ease;
}

.controls-show:hover {
    background: rgba(0, 0, 0, 0.8);
    color: var(--brand-mint);
}

.controls-show.visible {
    display: flex;
}

/* Old training popup CSS removed - see Premium Design section below */

.grade-timer {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.55);
    color: var(--brand-mint);
    font-weight: 700;
    font-size: 13px;
    display: none;
}

.grade-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill-btn {
    border: none;
    border-radius: 999px;
    padding: 10px 14px;
    background: #121722;
    color: #e6e7ea;
    cursor: pointer;
    font-weight: 600;
}

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

.grade-panel {
    background: #0e1017;
    border-radius: 0;
    padding: 20px;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 576px;
    min-width: 480px;
    max-width: 624px;
    height: 100vh;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    flex-shrink: 0;
}

.grade-panel.compact {
    padding: 20px;
    padding-right: 60px; /* Space for close/tutorial buttons on the right */
}

.grade-panel.compact .grade-defects {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: stretch;
}

.grade-panel::-webkit-scrollbar {
    width: 6px;
}

.grade-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.grade-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.grade-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.grade-header h2 {
    margin: 0;
}

.grade-status {
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

.grade-req {
    display: grid;
    gap: 8px;
}

.grade-defects {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    align-items: stretch;
}

.defect-card {
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
}

.defect-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: #e6e7ea;
}

.req-state-pill {
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--brand-mint);
    font-size: 12px;
    font-weight: 700;
}

.defect-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    overflow: hidden;
    background: #0f131d;
}

.defect-viewport img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.defect-overlay-cell {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(14, 1fr);
}

.defect-cell {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background 0.15s ease;
}

.defect-cell:hover {
    opacity: 0.8;
}

.defect-cell.green {
    background: rgba(0, 200, 83, 0.42);
}

.defect-cell.yellow {
    background: rgba(255, 214, 0, 0.54);
}

.defect-cell.red {
    background: rgba(244, 67, 54, 0.54);
}

/* Editable grid mode */
.defect-overlay-cell.editable .defect-cell {
    cursor: crosshair;
    border: 1px solid transparent;
    transition: background 0.1s ease, border-color 0.1s ease, transform 0.1s ease;
}

.defect-overlay-cell.editable .defect-cell:hover {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
    z-index: 1;
}

.defect-overlay-cell.editable .defect-cell:active {
    transform: scale(0.95);
}

.grade-toggles {
    display: none;
}

.req-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #0b0d12;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 13px;
    position: relative;
    overflow: hidden;
}

.req-item.req-done {
    animation: reqPulse 0.35s ease;
}

.req-item.req-hide {
    animation: reqFadeOut 0.35s ease forwards;
}

@keyframes reqPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes reqFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-4px);
    }
}

.grade-rating-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.grade-rating-details #grade-rating-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    white-space: pre-line;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.grade-rating-details #grade-rating-text.muted {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    background: transparent;
    border: none;
    padding: 0;
}

.grade-rating-details .btn {
    align-self: flex-start;
}

.grade-tip {
    margin-top: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.grade-tip__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.grade-tip__header:hover {
    opacity: 0.85;
}

.grade-tip__chevron {
    font-size: 12px;
    color: var(--text-secondary, #999);
    transition: transform 0.3s ease;
}

.grade-tip.is-collapsed .grade-tip__chevron {
    transform: rotate(180deg);
}

.grade-tip__body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
    max-height: 300px;
    opacity: 1;
    margin-top: 6px;
}

.grade-tip.is-collapsed .grade-tip__body {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

.grade-tip h4 {
    margin: 0;
    font-size: 14px;
}

.grade-tip p {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.grade-tip ul {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.req-state {
    color: var(--brand-mint);
    font-weight: 700;
}

.req-progress {
    position: absolute;
    inset: 0;
    background: rgba(0, 255, 149, 0.06);
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

#req-timer-bar {
    width: 0%;
    height: 100%;
    background: rgba(0, 255, 149, 0.3);
    transition: width 0.2s ease;
}

.grade-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.grade-badge {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 12px;
    color: #dfe2e7;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.grade-ratings {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
}

.grade-rating-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: transform .1s ease, border-color .2s ease, background .2s ease;
    min-width: 44px;
}

.grade-rating-btn .rating-label {
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}

/* Hide description by default - shown below when selected */
.grade-rating-btn .rating-desc {
    display: none;
}

.grade-rating-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

.grade-rating-btn.selected {
    border-color: var(--brand-mint);
    background: rgba(35, 214, 180, 0.15);
    box-shadow: 0 0 0 2px var(--brand-mint);
}

.grade-rating-btn.selected .rating-label {
    color: var(--brand-mint);
}

.grade-rating-btn.selected .rating-desc {
    display: none;
}

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

.grade-report {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.grade-report textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0b0f15;
    color: #fff;
    padding: 10px;
    resize: vertical;
}

.inline-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.grade-modal .btn.primary {
    background: var(--accent, #23d6b4);
    color: #00110a;
}

.grade-modal .btn.primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #333;
    color: var(--text-tertiary);
}

.grade-modal .btn.primary.ready-pulse {
    animation: readyPulse 0.6s ease;
    background: #fff;
    color: #0c1215;
}

.warning-text-inline {
    color: #ff5f5f;
    font-size: 12px;
    font-weight: 700;
}

/* Defect controls (recto/verso) */
.defect-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
}

.defect-colors {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.defect-color-desc {
    font-size: 13px;
    padding: 8px 0;
    font-weight: 500;
    transition: color 0.2s ease;
}

.defect-color-desc.green {
    color: rgba(0, 200, 83, 0.9);
}

.defect-color-desc.yellow {
    color: rgba(255, 214, 0, 0.9);
}

.defect-color-desc.red {
    color: rgba(244, 67, 54, 0.9);
}

.defect-color-btn {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #111622;
    color: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.defect-color-btn.selected {
    border-color: transparent;
    font-weight: 700;
}

/* Vert sélectionné */
#defect-color-green.selected {
    background: rgba(0, 200, 83, 0.9);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 200, 83, 0.35);
}

/* Jaune sélectionné */
#defect-color-yellow.selected {
    background: rgba(255, 214, 0, 0.9);
    color: #111;
    box-shadow: 0 6px 18px rgba(255, 214, 0, 0.35);
}

/* Rouge sélectionné */
#defect-color-red.selected {
    background: rgba(244, 67, 54, 0.9);
    color: #fff;
    box-shadow: 0 6px 18px rgba(244, 67, 54, 0.35);
}

.defect-color-btn:hover {
    border-color: var(--brand-mint);
}

/* Bouton masquer défauts */
.defect-hide-btn {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #111622;
    color: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.defect-hide-btn:hover {
    border-color: var(--accent, #23d6b4);
    background: rgba(35, 214, 180, 0.15);
}

.defect-hide-btn:active,
.defect-hide-btn.active {
    background: var(--accent, #23d6b4);
    color: #111;
    border-color: var(--accent, #23d6b4);
}

/* Masquer les cellules de défaut quand le bouton est actif */
.defects-hidden .defect-cell {
    background: transparent !important;
}

/* Video Quality Rating */
.video-quality-rating {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
}

.video-quality-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.video-quality-btn {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #111622;
    color: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}

.video-quality-btn:hover {
    border-color: var(--accent, #23d6b4);
    background: rgba(35, 214, 180, 0.15);
}

.video-quality-btn.selected {
    border-color: var(--accent, #23d6b4);
    background: var(--accent, #23d6b4);
    color: #111;
}

.video-quality-btn.video-quality-delete:hover {
    border-color: var(--error);
    background: rgba(255, 77, 79, 0.15);
}

.video-quality-btn.video-quality-delete.selected {
    border-color: var(--error);
    background: #ff4d4f;
    color: #fff;
}

/* Banger button - for reviewers/admins */
.video-quality-banger {
    display: none;
}

.video-quality-btn.video-quality-banger-btn {
    color: #ff9500;
    border-color: rgba(255, 149, 0, 0.3);
}

.video-quality-btn.video-quality-banger-btn:hover {
    border-color: #ff9500;
    background: rgba(255, 149, 0, 0.15);
}

.video-quality-btn.video-quality-banger-btn.active {
    border-color: #ff9500;
    background: #ff9500;
    color: #111;
}

.video-quality-validate {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: var(--brand-mint, #23d6b4);
    color: #000;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}

.video-quality-validate:hover {
    background: #1fc4a5;
    transform: scale(1.05);
}

.video-quality-validate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.video-quality-desc {
    font-size: 13px;
    color: var(--text-secondary, #c8c9cf);
    min-height: 20px;
    padding: 4px 0;
}

/* Video Delete Modal */
.video-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.video-delete-modal[aria-hidden="false"] {
    display: flex;
}

.video-delete-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.video-delete-content {
    position: relative;
    background: #1a1a24;
    border-radius: 16px;
    padding: 24px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-delete-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px 0;
}

.video-delete-text {
    font-size: 14px;
    color: var(--text-secondary, #c8c9cf);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.video-delete-reason {
    width: 100%;
    background: #111622;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    color: #fff;
    font-size: 14px;
    resize: vertical;
    margin-bottom: 16px;
}

.video-delete-reason:focus {
    outline: none;
    border-color: var(--accent, #23d6b4);
}

.video-delete-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.video-delete-actions .btn.danger {
    background: #ff4d4f;
    color: #fff;
    border: none;
}

.video-delete-actions .btn.danger:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.video-delete-actions .btn.danger:not(:disabled):hover {
    background: #ff7875;
}

@keyframes readyPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 255, 149, 0.35);
    }

    50% {
        transform: scale(1.01);
        box-shadow: 0 0 0 6px rgba(0, 255, 149, 0.18);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 255, 149, 0.0);
    }
}

.grade-modal .btn.ghost {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.grade-modal .muted {
    color: var(--text-secondary);
}

.grade-modal .tiny {
    font-size: 12px;
}

.modal-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .grade-modal-content {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        padding: 0;
        border-radius: 0;
    }

    .grade-modal-body {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow-y: auto;
        padding: 0;
    }

    .grade-modal {
        align-items: stretch;
    }

    .grade-player {
        height: auto;
        min-height: 50vh;
        flex-shrink: 0;
    }

    .grade-media {
        height: auto;
        min-height: 50vh;
    }

    .grade-panel {
        height: auto;
        max-height: none;
        padding: 12px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 540px) {
    .grade-media {
        aspect-ratio: 9 / 16;
    }

    .defect-card {
        padding: 0;
        border-radius: 6px;
    }

    .defect-viewport {
        width: 100%;
        aspect-ratio: 3 / 4;
    }

    .grade-modal-content {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        padding: 0;
        border-radius: 0;
    }

    .grade-defects {
        gap: 10px;
    }
}

/* ========================================
   RATING SUCCESS POPUP - Celebration Mode!
   ======================================== */

.rating-success-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.rating-success-overlay.active {
    opacity: 1;
    visibility: visible;
}

.rating-success-popup {
    position: relative;
    background: linear-gradient(145deg, #0d0d0d 0%, #0a0a0a 100%);
    border: 2px solid transparent;
    border-radius: 24px;
    padding: 40px 48px;
    text-align: center;
    max-width: 380px;
    width: 90%;
    box-shadow:
        0 0 40px rgba(139, 92, 246, 0.15),
        0 25px 50px rgba(0, 0, 0, 0.7);
    transform: scale(0.8) translateY(20px);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.rating-success-overlay.active .rating-success-popup {
    transform: scale(1) translateY(0);
}

/* Animated gradient border */
.rating-success-popup::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg,
            #8b5cf6, #a78bfa, #8b5cf6, #c4b5fd, #8b5cf6);
    background-size: 400% 400%;
    border-radius: 26px;
    z-index: -1;
    animation: borderGlow 3s ease infinite;
}

@keyframes borderGlow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Confetti container */
.rating-success-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: 24px;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -20px;
    opacity: 0;
    animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(400px) rotate(720deg) scale(0.5);
    }
}

/* Success icon with pulse */
.rating-success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.4);
    animation: iconPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;
}

@keyframes iconPop {
    0% {
        transform: scale(0) rotate(-180deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.rating-success-title {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 24px;
    animation: titleSlide 0.5s ease 0.3s both;
}

@keyframes titleSlide {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Note display - big and proud */
.rating-success-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
    animation: noteReveal 0.5s ease 0.4s both;
}

@keyframes noteReveal {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.rating-success-note-label {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
}

.rating-success-note-value {
    font-size: 48px;
    font-weight: 900;
    color: #fff;
}

/* Rewards section */
.rating-success-rewards {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 28px;
    animation: rewardsSlide 0.5s ease 0.5s both;
}

@keyframes rewardsSlide {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.rating-success-reward {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(250, 204, 21, 0.1);
    border: 1px solid rgba(250, 204, 21, 0.3);
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #facc15;
}

.rating-success-reward i {
    font-size: 18px;
    animation: boltZap 0.8s ease 0.8s;
}

@keyframes boltZap {

    0%,
    100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.3) rotate(-10deg);
    }

    50% {
        transform: scale(0.9) rotate(10deg);
    }

    75% {
        transform: scale(1.1);
    }
}

/* Progress section */
.rating-success-progress {
    margin-bottom: 28px;
    animation: progressFade 0.5s ease 0.6s both;
}

@keyframes progressFade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.rating-success-progress-bar {
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.rating-success-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
    border-radius: 10px;
    width: 0%;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1) 0.8s;
}

@keyframes progressShine {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.rating-success-progress-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.4;
}

.rating-success-progress-text.complete {
    color: #a78bfa;
    font-weight: 600;
}

/* Success buttons */
.rating-success-buttons {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    animation: btnAppear 0.5s ease 0.7s both;
}

@keyframes btnAppear {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.rating-success-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rating-success-btn.btn-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #fff;
}

.rating-success-btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.rating-success-btn.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.rating-success-btn.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.rating-success-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Comparison section (when card is complete) */
.rating-success-comparison {
    display: none;
    margin: 20px 0;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    animation: fadeIn 0.3s ease;
}

.rating-success-comparison.show {
    display: block;
}

.rating-success-grades {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 12px;
}

.rating-success-grade-box {
    text-align: center;
}

.rating-success-grade-box .label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.rating-success-grade-box .value {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
}

.rating-success-vs {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.3);
}

.rating-success-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
}

.rating-success-xp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 800;
    margin-top: 10px;
}

/* Blocked recap message */
.rating-success-blocked {
    display: none;
    padding: 12px 16px;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.25);
    border-radius: 10px;
    font-size: 13px;
    color: #ffc107;
    text-align: center;
    margin-bottom: 16px;
}

.rating-success-blocked.show {
    display: block;
}

.rating-success-blocked i {
    margin-right: 6px;
}

/* Sparkle effects */
.rating-success-popup::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow:
        -40px 30px 0 #a78bfa,
        -80px 10px 0 #ffc107,
        30px 60px 0 #c4b5fd,
        -20px 80px 0 #fff,
        50px 40px 0 #8b5cf6;
    animation: sparkle 2s ease infinite;
}

@keyframes sparkle {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* ========================================
   TRAINING RESULT POPUP - Premium Design
   (Same quality as Rating Success Popup)
   ======================================== */

/* ===========================================
   TRAINING RESULT POPUP - Premium Design 2.0
   =========================================== */

.training-result-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.training-result-overlay.active {
    opacity: 1;
    visibility: visible;
}

.training-result-popup {
    position: relative;
    background: linear-gradient(165deg, #111113 0%, #0a0a0c 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 36px 40px 32px;
    text-align: center;
    max-width: 380px;
    width: 90%;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 40px 80px -20px rgba(0, 0, 0, 0.8),
        0 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(0.9) translateY(30px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible;
}

.training-result-overlay.active .training-result-popup {
    transform: scale(1) translateY(0);
}

/* Subtle top accent line */
.training-result-popup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.8), transparent);
    border-radius: 0 0 4px 4px;
    opacity: 0.9;
}

/* Glow effect - subtle ambient */
.training-result-glow {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.12) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(40px);
}

/* No sparkles - cleaner look */
.training-result-popup::after {
    display: none;
}

/* Icon - Refined */
.training-result-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
    box-shadow:
        0 8px 24px -4px rgba(34, 197, 94, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    animation: trainingIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

.training-result-icon.success {
    background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 8px 24px -4px rgba(34, 197, 94, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.training-result-icon.warning {
    background: linear-gradient(145deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 8px 24px -4px rgba(245, 158, 11, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.training-result-icon.error {
    background: linear-gradient(145deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 8px 24px -4px rgba(239, 68, 68, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

@keyframes trainingIconPop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Title - Clean Typography */
.training-result-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.3px;
    animation: trainingFadeUp 0.4s ease 0.2s both;
}

@keyframes trainingFadeUp {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Card type badge - Minimal */
.training-card-type-badge {
    display: inline-block;
    font-size: 10px;
    padding: 5px 12px;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    animation: trainingFadeUp 0.4s ease 0.25s both;
}

.training-card-type-badge:empty { display: none; }

.training-card-type-badge.training {
    background: rgba(139, 92, 246, 0.15);
    color: rgba(167, 139, 250, 0.9);
}

.training-card-type-badge.oktier {
    background: rgba(59, 130, 246, 0.15);
    color: rgba(96, 165, 250, 0.9);
}

/* Grades comparison - Card Style */
.training-result-grades {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    animation: trainingFadeUp 0.4s ease 0.3s both;
}

.training-grade-box {
    text-align: center;
    padding: 18px 28px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    min-width: 110px;
    transition: all 0.25s ease;
}

.training-grade-box:first-child {
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.15);
}

.training-grade-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 500;
    margin-bottom: 6px;
}

.training-grade-value {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.training-grade-box:first-child .training-grade-value {
    color: #4ade80;
}

.training-grade-vs {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.2);
}

/* Result badge - Pill Style */
.training-result-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 100px;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
    animation: trainingBadgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

.training-result-badge i {
    font-size: 13px;
}

@keyframes trainingBadgePop {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

/* Difference message */
.training-result-diff {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 20px;
    font-weight: 500;
    animation: trainingFadeUp 0.4s ease 0.45s both;
}

.training-result-diff:empty { display: none; }

/* XP earned - Highlight */
.training-result-xp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    color: #4ade80;
    margin-bottom: 12px;
    animation: trainingXPPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}

.training-result-xp i {
    font-size: 16px;
    color: #fbbf24;
}

@keyframes trainingXPPop {
    0% { opacity: 0; transform: scale(0.5) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Weekly counter - Subtle */
.training-result-counter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 28px;
    border: none;
    animation: trainingFadeUp 0.4s ease 0.55s both;
}

.training-result-counter i {
    font-size: 14px;
    color: rgba(139, 92, 246, 0.7);
}

/* Action buttons - Modern */
.training-result-buttons {
    display: flex;
    gap: 10px;
    animation: trainingFadeUp 0.4s ease 0.6s both;
}

.training-result-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.training-result-btn.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.training-result-btn.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
}

.training-result-btn.btn-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #fff;
    box-shadow: 0 4px 12px -2px rgba(139, 92, 246, 0.4);
}

.training-result-btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -2px rgba(139, 92, 246, 0.5);
}

.training-result-btn:active {
    transform: translateY(0) scale(0.98);
}

/* ========================================
   GIFTS PAGE REDESIGN (Modern / Gaming / App-Like)
   ======================================== */

.gifts-page {
    /* Utilise les mêmes marges que les autres pages */
    padding: 0 0 120px 0;
}

/* Stats Section - Redesigned for better UX */
.gifts-stats-section {
    padding: 24px 72px 20px;
    background: transparent;
    max-width: 1200px;
    margin: 0;
}

.gifts-stats-section .hero-stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.gifts-stats-section .hero-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    min-width: 280px;
    max-width: 360px;
    flex: 0 1 auto;
    transition: all 0.2s ease;
}

.gifts-stats-section .hero-stat-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.gifts-stats-section .stat-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.gifts-stats-section .stat-icon-box.monthly {
    background: rgba(255, 215, 0, 0.12);
    color: #ffd700;
}

.gifts-stats-section .stat-icon-box.weekly {
    background: rgba(35, 214, 180, 0.12);
    color: var(--accent);
}

.gifts-stats-section .stat-content {
    flex: 1;
    min-width: 0;
}

.gifts-stats-section .stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}

.gifts-stats-section .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    font-family: var(--font-display);
    line-height: 1.2;
}

.gifts-stats-section .stat-status {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
}

.gifts-stats-section .stat-status.valid {
    color: var(--accent);
}

.gifts-stats-section .stat-lock-icon {
    color: rgba(255, 255, 255, 0.2);
    font-size: 16px;
    margin-left: 8px;
}

.gifts-stats-section .stat-lock-icon.unlocked {
    color: var(--accent);
}

.gifts-stats-section .stat-lock-icon.unlocked i::before {
    content: "\f00c";
    /* check icon */
}


@media (max-width: 700px) {
    .gifts-stats-section {
        padding: 20px 16px 16px;
    }

    .gifts-stats-section .hero-stats-row {
        flex-direction: column;
    }

    .gifts-stats-section .hero-stat-card {
        max-width: 100%;
        min-width: 0;
    }

    .gifts-stats-section .stat-value {
        font-size: 14px;
    }
}

/* 1. Header Dashboard (LEGACY) */
.gifts-header-dashboard {
    background: linear-gradient(135deg, #15171e 0%, #0a0b0f 100%);
    padding: 40px 20px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

/* Pattern de fond subtil */
.gifts-header-dashboard::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.4;
    background-image: radial-gradient(#23d6b4 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
}

.gifts-header-content {
    position: relative;
    z-index: 2;
    margin-bottom: 24px;
    text-align: center;
}

.gifts-header-content .page-title {
    font-size: 32px;
    margin-bottom: 8px;
    background: linear-gradient(to right, #fff, #c8c9cf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gifts-header-content .page-subtitle {
    margin: 0 auto;
    max-width: 500px;
    font-size: 15px;
    opacity: 0.7;
}

/* Quick Stats Row */
.gifts-quick-stats {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.quick-stat-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 160px;
    flex: 1;
    max-width: 220px;
    transition: transform 0.2s, background 0.2s;
}

.quick-stat-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.qs-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(35, 214, 180, 0.15);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.qs-info {
    display: flex;
    flex-direction: column;
}

.qs-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    font-weight: 600;
}

.qs-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    font-family: var(--font-display);
}

/* 2. Navigation Pills */
.gifts-nav-container {
    display: flex;
    justify-content: center;
    padding: 24px 20px 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-app);
    /* Sticky fix */
    margin-bottom: 24px;
}

.gifts-tabbar-pills {
    background: #191b22;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 6px;
    display: inline-flex;
    gap: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.gifts-pill {
    background: transparent;
    border: none;
    padding: 10px 24px;
    border-radius: 999px;
    color: var(--text-tertiary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.gifts-pill i {
    font-size: 14px;
}

.gifts-pill.active {
    background: var(--accent);
    color: var(--text-inverse);
    box-shadow: 0 2px 12px rgba(35, 214, 180, 0.3);
}

.gifts-pill:hover:not(.active) {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

/* 3. Panel Content */
.gifts-panels {
    max-width: 100%;
    margin: 0;
    padding: 0 72px;
}

.gifts-panel {
    display: none;
    animation: fadeIn 0.4s ease;
}

.gifts-panel.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Contests Layout (65/35 columns) --- */
.contests-layout {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

.contests-layout .rewards-timeline-section {
    flex: 0 0 65%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

/* Weekly Contest Section - New design */
.contests-layout .weekly-contest-section {
    flex: 0 0 calc(35% - 24px);
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.weekly-contest-section .section-header {
    margin-bottom: 20px;
}

.weekly-contest-section .section-title-group h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    margin: 0;
}

.weekly-contest-section .section-title-group h3 i {
    color: var(--accent-primary);
}

.weekly-contest-section .section-subtitle {
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

/* Reward showcase */
.weekly-reward-showcase {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    margin-bottom: 20px;
}

.weekly-reward-showcase .reward-image {
    width: 100px;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 8px;
}

.weekly-reward-showcase .reward-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.weekly-reward-showcase .reward-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.weekly-reward-showcase .reward-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.weekly-reward-showcase .reward-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Sealed Pregrade Info Block (inside reward-info) */
.sealed-pregrade-info {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sealed-pregrade-intro {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.sealed-pregrade-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
}

.sealed-pregrade-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

.sealed-pregrade-benefits li {
    position: relative;
    padding-left: 16px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.sealed-pregrade-benefits li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    background: var(--accent);
    border-radius: 50%;
}

.sealed-pregrade-footer {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--accent);
    margin: 0;
    line-height: 1.5;
}

/* Progress section (factorized for monthly & weekly) */
.contest-progress-section {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.contest-progress-section .progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.contest-progress-section .progress-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.contest-progress-section .progress-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-primary);
}

.contest-progress-section .progress-bar-container {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.contest-progress-section .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #23d6b4, #1abc9c);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.contest-progress-section .progress-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.contest-progress-section .progress-hint i {
    font-size: 0.7rem;
}

.contest-progress-section .progress-hint-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.contest-progress-section .progress-hint-link:hover {
    text-decoration: underline;
}

/* --- Timeline Section --- */
.rewards-timeline-section {
    background: #13141a;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.section-header-simple {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 40px;
}

.section-header-simple h3 {
    font-family: var(--font-display);
    font-size: 20px;
    margin: 0;
}

.help-tooltip {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    cursor: help;
    transition: color 0.2s;
}

.help-tooltip:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Timeline Container - Two-row layout */
.timeline-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 0;
}

/* Markers Row - Ronds + lignes de progression */
.timeline-markers-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    margin-bottom: 16px;
}

/* Timeline Marker (rond) */
.timeline-marker {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1a1c24;
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    box-shadow: 0 0 0 4px #13141a;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    z-index: 2;
}

.timeline-marker.unlocked {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(35, 214, 180, 0.1);
    box-shadow: 0 0 0 4px #13141a, 0 0 20px rgba(35, 214, 180, 0.25);
}

.timeline-marker.current {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    transform: scale(1.1);
    box-shadow: 0 0 0 4px #13141a, 0 0 25px rgba(35, 214, 180, 0.4);
}

.timeline-marker.ultimate {
    border-color: #fbbf24;
    color: #fbbf24;
}

.timeline-marker.ultimate.unlocked {
    background: rgba(251, 191, 36, 0.15);
    box-shadow: 0 0 0 4px #13141a, 0 0 20px rgba(251, 191, 36, 0.3);
}

/* Timeline Segment (track between markers) */
.timeline-segment {
    flex: 1;
    display: flex;
    align-items: center;
    height: 4px;
    margin: 0 -2px;
    /* Overlap with markers slightly */
}

.timeline-segment__track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.timeline-segment__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #23d6b4, #1abc9c);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(35, 214, 180, 0.4);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Segment states */
.timeline-segment.complete .timeline-segment__fill {
    width: 100%;
}

/* Cards Row */
.timeline-cards-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 800px;
    gap: 16px;
}

.timeline-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    max-width: 180px;
}

/* Step Card - Plus grande et visible */
.step-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px 16px;
    width: 100%;
    transition: all 0.3s ease;
}

.timeline-step.locked .step-card {
    opacity: 0.5;
}

.timeline-step:hover .step-card {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-4px);
}

.timeline-step.unlocked .step-card {
    opacity: 1;
    background: rgba(35, 214, 180, 0.05);
    border-color: rgba(35, 214, 180, 0.2);
}

.timeline-step.current .step-card {
    opacity: 1;
    background: rgba(35, 214, 180, 0.08);
    border-color: rgba(35, 214, 180, 0.3);
    box-shadow: 0 0 20px rgba(35, 214, 180, 0.15);
}

.timeline-marker.current {
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 0 4px #13141a, 0 0 20px rgba(35, 214, 180, 0.3);
    }

    50% {
        box-shadow: 0 0 0 4px #13141a, 0 0 30px rgba(35, 214, 180, 0.5);
    }
}

.timeline-step.ultimate .step-card {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.02));
    border-color: rgba(251, 191, 36, 0.15);
}

/* Step Visual - Images plus grandes */
.step-visual {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.step-visual img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.timeline-step:hover .step-visual img {
    transform: scale(1.08);
}

.timeline-step.locked .step-visual img {
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5)) grayscale(0.5) opacity(0.7);
}

/* Step Info - Texte plus lisible */
.step-info {
    text-align: center;
}

.step-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.3;
}

.step-desc {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.4;
}

.timeline-step.unlocked .step-desc {
    color: var(--accent);
    font-weight: 500;
}

/* Community Progress Counter */
.community-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.community-progress i {
    color: var(--accent);
    font-size: 16px;
}

.community-progress strong {
    color: var(--accent);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 900px) {
    .timeline-markers-row {
        display: none;
    }

    .timeline-cards-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .timeline-step {
        width: calc(50% - 16px);
        max-width: none;
    }
}

@media (max-width: 500px) {
    .timeline-step {
        width: 100%;
    }

    .timeline-marker {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
}

/* --- Side Quests --- */
.side-quests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.quest-card {
    background: linear-gradient(145deg, #16181e, #131419);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.quest-icon {
    width: 48px;
    height: 48px;
    background: #1f2129;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #aeb5d1;
    flex-shrink: 0;
}

.quest-content {
    flex: 1;
}

.quest-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.quest-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.quest-reward {
    background: rgba(35, 214, 180, 0.1);
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.quest-progress {
    margin-bottom: 12px;
}

.quest-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}

.quest-bar {
    height: 6px;
    background: #2a2d36;
    border-radius: 3px;
    overflow: hidden;
}

.quest-fill {
    height: 100%;
    background: #aeb5d1;
    border-radius: 3px;
}

.quest-note {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0;
    font-style: italic;
}

/* --- Shop Section --- */
.shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.shop-balance-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(35, 214, 180, 0.12) 0%, rgba(35, 214, 180, 0.04) 100%);
    border: 1px solid rgba(35, 214, 180, 0.2);
    border-radius: 16px;
    padding: 16px 24px;
}

.balance-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--accent);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.balance-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.balance-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.balance-amount {
    font-size: 32px;
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

.balance-amount small {
    font-size: 16px;
    font-weight: 600;
    opacity: 0.8;
}

.pending-summary {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    flex-direction: column;
    gap: 8px;
}

.pending-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pending-header i {
    font-size: 14px;
}

.pending-gifts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pending-gifts-list li {
    background: rgba(251, 191, 36, 0.15);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    color: #fcd34d;
}

.pending-gift-qty {
    font-weight: 700;
    margin-right: 2px;
}

.shop-intro {
    color: var(--text-tertiary);
    font-size: 14px;
    margin: 0 0 24px 0;
    text-align: center;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

@media (max-width: 1100px) {
    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .shop-grid {
        grid-template-columns: 1fr;
    }
}

.shop-item {
    background: #16181e;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

.shop-item:hover {
    transform: translateY(-4px);
    border-color: rgba(35, 214, 180, 0.3);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* État affordable (on peut se l'offrir) */
.shop-item.affordable {
    border-color: rgba(35, 214, 180, 0.15);
    background: linear-gradient(180deg, rgba(35, 214, 180, 0.04) 0%, #16181e 30%);
}

.shop-item.affordable::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), #1abc9c);
    z-index: 1;
}

.shop-item.affordable .shop-visual {
    background: radial-gradient(circle at center, rgba(35, 214, 180, 0.06) 0%, transparent 70%);
}

.shop-item.affordable .btn-shop-action {
    box-shadow: 0 4px 16px rgba(35, 214, 180, 0.25);
}

/* État too-expensive (pas assez de points) */
.shop-item.too-expensive {
    opacity: 0.55;
}

.shop-item.too-expensive:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
    opacity: 0.7;
}

.shop-item.too-expensive .shop-visual img {
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4)) grayscale(0.4);
}

.shop-item.too-expensive:hover .shop-visual img {
    transform: none;
}

.shop-item.too-expensive .shop-cost {
    color: var(--text-muted);
}

.shop-visual {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
    padding: 16px;
}

.shop-visual img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shop-item:hover .shop-visual img {
    transform: scale(1.08);
}

.shop-details {
    padding: 16px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(0, 0, 0, 0.2);
}

.shop-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
}

.shop-cost {
    font-size: 14px;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 12px;
}

.shop-cost .old-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-weight: 400;
    margin-right: 8px;
    font-size: 12px;
}

.btn-shop-action {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    width: 100%;
    border-radius: 8px;
    background: var(--accent);
    color: #000;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-shop-action:hover:not(:disabled) {
    background: #1abc9c;
    transform: translateY(-1px);
}

.btn-shop-action:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

.shop-item.too-expensive .btn-shop-action {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}

.referral-box {
    background: linear-gradient(135deg, rgba(35, 214, 180, 0.1) 0%, rgba(35, 214, 180, 0.02) 100%);
    border: 1px solid rgba(35, 214, 180, 0.2);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
}

.referral-box .ref-link {
    margin-left: auto;
    color: var(--accent);
    font-style: italic;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.referral-box .ref-link:hover {
    text-decoration: underline;
}

.ref-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.ref-content h4 {
    margin: 0 0 4px 0;
    color: #fff;
}

.ref-content p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* Info Details Box (Collapsible) */
.info-details-box {
    margin-top: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
}

.info-details-box summary {
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.info-details-box summary::-webkit-details-marker {
    display: none;
}

.info-details-box summary i:first-child {
    color: var(--text-tertiary);
}

.info-details-box summary .toggle-icon {
    margin-left: auto;
    color: var(--text-tertiary);
    font-size: 12px;
    transition: transform 0.2s ease;
}

.info-details-box[open] summary .toggle-icon {
    transform: rotate(180deg);
}

.info-details-box summary:hover {
    color: var(--text-primary);
}

.info-details-box ul {
    margin: 0;
    padding: 0 20px 20px 20px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-details-box li {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-tertiary);
}

.info-details-box li strong {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Responsive Gifts */
@media (max-width: 768px) {
    .gifts-header-dashboard {
        padding: 32px 16px 24px;
    }

    .timeline-markers-row {
        display: none;
    }

    .timeline-cards-row {
        flex-direction: column;
        gap: 16px;
    }

    .timeline-step {
        width: 100%;
        max-width: none;
    }

    .step-card {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px;
    }

    .step-visual {
        height: 80px;
        width: auto;
        margin-bottom: 0;
    }

    .community-progress {
        flex-wrap: wrap;
        text-align: center;
    }
}


/* ========================================
   MODAL DÉTAILS BADGE
   ======================================== */

.badge-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.badge-modal.active {
    display: flex;
}

.badge-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.badge-modal-content {
    position: relative;
    width: 94%;
    max-width: 500px;
    background: var(--bg-elevated);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.badge-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.badge-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(90deg);
}

.badge-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.badge-modal-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    text-align: center;
    margin: 0;
    line-height: 1.2;
}

.badge-modal-divider {
    width: 100%;
    height: 2px;
    background: var(--border);
    border-radius: 2px;
}

.badge-modal-image-wrapper {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
}

.badge-modal-image {
    width: 180px;
    height: 180px;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
}

.badge-modal-condition {
    font-size: 18px;
    font-weight: 600;
    color: var(--accent);
    text-align: center;
}

.badge-modal-description {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.6;
    max-width: 440px;
}

.badge-modal-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-top: 8px;
}

.badge-modal-stat-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.badge-modal-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Badge Modal Leaderboard */
.badge-modal-leaderboard {
    margin-top: 20px;
    width: 100%;
    max-width: 320px;
}

.badge-modal-leaderboard-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-modal-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 160px;
    overflow-y: auto;
    padding-right: 4px;
}

.badge-modal-leaderboard-list::-webkit-scrollbar {
    width: 4px;
}

.badge-modal-leaderboard-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.badge-modal-leaderboard-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.badge-leaderboard-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    transition: background 0.15s ease;
}

.badge-leaderboard-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.badge-leaderboard-item.is-current-user {
    background: rgba(35, 214, 180, 0.1);
    border: 1px solid rgba(35, 214, 180, 0.2);
}

.badge-leaderboard-item.top-3 {
    background: rgba(251, 191, 36, 0.08);
}

.badge-leaderboard-rank {
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

.badge-leaderboard-item.top-3 .badge-leaderboard-rank {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #000;
}

.badge-leaderboard-item:nth-child(2).top-3 .badge-leaderboard-rank {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    color: #fff;
}

.badge-leaderboard-item:nth-child(3).top-3 .badge-leaderboard-rank {
    background: linear-gradient(135deg, #cd7f32 0%, #a0522d 100%);
    color: #fff;
}

.badge-leaderboard-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-elevated);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.badge-leaderboard-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-leaderboard-item.is-current-user .badge-leaderboard-name {
    color: var(--accent);
}

.badge-leaderboard-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.badge-leaderboard-item.is-current-user .badge-leaderboard-value {
    color: var(--accent);
}

/* Responsive */
@media (max-width: 768px) {
    .badge-modal-content {
        width: 92%;
        max-height: 85vh;
    }

    .badge-modal-title {
        font-size: 24px;
    }

    .badge-modal-image-wrapper {
        width: 180px;
        height: 180px;
    }

    .badge-modal-image {
        width: 160px;
        height: 160px;
    }

    .badge-modal-condition {
        font-size: 16px;
    }

    .badge-modal-description {
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .badge-modal-body {
        padding: 20px;
    }

    .badge-modal-title {
        font-size: 22px;
    }

    .badge-modal-image-wrapper {
        width: 160px;
        height: 160px;
    }

    .badge-modal-image {
        width: 140px;
        height: 140px;
    }
}

/* ========================================
   USER PROFILE MODAL
   ======================================== */
.user-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.user-profile-modal.active {
    opacity: 1;
    visibility: visible;
}

.user-profile-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.user-profile-content {
    position: relative;
    background: var(--card-bg, #16181c);
    border-radius: 20px;
    padding: 24px;
    width: 90%;
    max-width: 360px;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.user-profile-modal.active .user-profile-content {
    transform: scale(1) translateY(0);
}

.user-profile-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.user-profile-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.user-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.user-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-tertiary);
    flex-shrink: 0;
}

.user-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-profile-info {
    flex: 1;
    min-width: 0;
}

.user-profile-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.user-profile-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.user-profile-verified {
    color: var(--accent);
    font-size: 14px;
}

.user-profile-flag {
    display: inline-flex;
}

.user-profile-flag img {
    width: 20px;
    height: 14px;
    border-radius: 2px;
}

.user-profile-rank {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.user-profile-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.user-profile-stat {
    flex: 1;
    text-align: center;
}

.user-profile-stat .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.user-profile-stat .stat-label {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.user-profile-badges-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.user-profile-badges-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.user-profile-badges-list .badge-icon {
    width: 36px;
    height: 36px;
}

.user-profile-badges-list .badge-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.user-profile-no-badges {
    color: var(--text-tertiary);
    font-size: 13px;
    font-style: italic;
}

/* User Profile Modal - Badge Icons Fix */
.user-profile-badges-list .badge-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 4px;
}

.user-profile-badges-list .badge-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Stats labels improvements */
.user-profile-stat .stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Profile Social Section (Instagram + Description) */
.profile-social-section {
    margin-bottom: 12px;
}

.profile-instagram {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #E1306C;
    margin-bottom: 8px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.profile-instagram:hover {
    opacity: 0.8;
}

.profile-instagram i {
    font-size: 16px;
}

.profile-instagram span {
    color: var(--text-primary, #fff);
    font-weight: 500;
}

.profile-description {
    font-size: 12px;
    color: var(--text-secondary, #999);
    line-height: 1.5;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    font-style: italic;
}

/* Profile Activity Table - Compact */
.profile-activity-table {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 16px;
    font-size: 11px;
}

.profile-activity-header,
.profile-activity-row {
    display: grid;
    grid-template-columns: 1fr 50px 50px 50px;
    gap: 4px;
    padding: 6px 0;
    align-items: center;
}

.profile-activity-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-tertiary);
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.profile-activity-header span:not(:first-child),
.profile-activity-row span:not(:first-child) {
    text-align: center;
}

.profile-activity-row {
    color: var(--text-secondary);
}

.profile-activity-row span:first-child {
    color: var(--text-tertiary);
    font-size: 10px;
}

.profile-activity-row span:not(:first-child) {
    color: var(--text-primary);
    font-weight: 600;
}

/* ========================================
   GRADE SUCCESS OVERLAY
   ======================================== */

.grade-success-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

.grade-success-content {
    text-align: center;
    color: #fff;
    animation: scaleIn 0.4s ease-out;
}

.grade-success-content i {
    font-size: 64px;
    color: #10b981;
    margin-bottom: 16px;
    display: block;
    animation: bounce 0.6s ease-out;
}

.grade-success-content h3 {
    font-size: 24px;
    margin: 0 0 8px 0;
    color: #fff;
}

.grade-success-content p {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
}

.grade-success-content strong {
    color: #f59e0b;
    font-size: 20px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-15px);
    }

    60% {
        transform: translateY(-8px);
    }
}

/* ========================================
   MESSAGE MODAL (Generic Confirm/Alert)
   ======================================== */

.message-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.message-modal.active,
.message-modal[aria-hidden="false"] {
    display: flex;
}

.message-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.message-modal-content {
    position: relative;
    background: linear-gradient(180deg, #1e2128 0%, #16181e 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.message-modal .message-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.message-modal .message-text {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 24px;
}

.message-modal .message-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.message-modal .btn-modal {
    flex: 1;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.message-modal .btn-modal.secondary {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
}

.message-modal .btn-modal.secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.message-modal .btn-modal.primary {
    background: linear-gradient(135deg, #23d6b4 0%, #1ab89a 100%);
    color: #000;
    box-shadow: 0 4px 16px rgba(35, 214, 180, 0.3);
}

.message-modal .btn-modal.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(35, 214, 180, 0.4);
}

/* ========================================
   REWARD SUCCESS MODAL (Premium Gift Popup)
   ======================================== */

.reward-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.reward-modal.active {
    display: flex;
}

.reward-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.reward-modal.animate .reward-modal-backdrop {
    opacity: 1;
}

.reward-modal-content {
    position: relative;
    background: linear-gradient(180deg, #1a1d24 0%, #0f1115 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 40px 32px 32px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow:
        0 32px 64px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.1) inset;
    transform: scale(0.85) translateY(20px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.reward-modal.animate .reward-modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Animated Checkmark */
.reward-checkmark {
    width: 52px;
    height: 52px;
    margin: 0 auto 24px;
}

.reward-checkmark svg {
    width: 100%;
    height: 100%;
}

.checkmark-circle {
    stroke: var(--accent, #23d6b4);
    stroke-width: 2.5;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
}

.checkmark-check {
    stroke: var(--accent, #23d6b4);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
}

.reward-modal.animate .checkmark-circle {
    animation: checkmarkCircle 0.6s 0.2s ease-out forwards;
}

.reward-modal.animate .checkmark-check {
    animation: checkmarkDraw 0.4s 0.6s ease-out forwards;
}

@keyframes checkmarkCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes checkmarkDraw {
    to { stroke-dashoffset: 0; }
}

/* Product Image */
.reward-image-container {
    position: relative;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 180px;
}

.reward-image {
    width: 140px;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    border-radius: 12px;
    position: relative;
    z-index: 1;
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s, opacity 0.4s ease 0.3s;
}

.reward-modal.animate .reward-image {
    transform: scale(1);
    opacity: 1;
}

/* Subtle glow behind product */
.reward-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(35, 214, 180, 0.3) 0%, transparent 60%);
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0;
    transition: opacity 0.6s ease 0.4s;
    z-index: 0;
}

.reward-modal.animate .reward-glow {
    opacity: 1;
}

/* Text */
.reward-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s;
}

.reward-modal.animate .reward-title {
    opacity: 1;
    transform: translateY(0);
}

.reward-product-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent, #23d6b4);
    margin: 0 0 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.55s, transform 0.4s ease 0.55s;
}

.reward-modal.animate .reward-product-name {
    opacity: 1;
    transform: translateY(0);
}

.reward-message {
    font-size: 14px;
    color: var(--text-secondary, #9ca3af);
    line-height: 1.5;
    margin: 0 0 28px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.6s, transform 0.4s ease 0.6s;
}

.reward-modal.animate .reward-message {
    opacity: 1;
    transform: translateY(0);
}

/* Button */
.reward-btn {
    width: 100%;
    padding: 16px 32px;
    background: linear-gradient(135deg, #23d6b4 0%, #1ab89a 100%);
    color: #000;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    box-shadow:
        0 4px 20px rgba(35, 214, 180, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transform: translateY(10px);
    opacity: 0;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.65s,
        opacity 0.4s ease 0.65s,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.reward-modal.animate .reward-btn {
    transform: translateY(0);
    opacity: 1;
}

.reward-btn:hover {
    box-shadow:
        0 8px 28px rgba(35, 214, 180, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    transform: translateY(-2px);
}

.reward-btn:active {
    transform: translateY(0) scale(0.98);
}

/* ========================================
   EDIT FIELD MODAL (Infos Perso) - Pro Design
   ======================================== */

.edit-field-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.edit-field-modal.active {
    display: flex;
}

.edit-field-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.edit-field-content {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: linear-gradient(180deg, #1a1a22 0%, #12121a 100%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.1) inset;
    padding: 32px 28px;
    animation: editModalIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes editModalIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.edit-field-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.edit-field-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.edit-field-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 24px 0;
    text-align: center;
    letter-spacing: -0.3px;
}

.edit-field-body {
    margin-bottom: 16px;
}

.edit-field-input,
.edit-field-textarea,
.edit-field-select {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px 18px;
    font-size: 16px;
    color: #fff;
    font-family: inherit;
    transition: all 0.25s ease;
}

.edit-field-input::placeholder,
.edit-field-textarea::placeholder {
    color: var(--text-tertiary);
}

.edit-field-input:focus,
.edit-field-textarea:focus,
.edit-field-select:focus {
    border-color: var(--accent);
    background: rgba(35, 214, 180, 0.08);
    box-shadow:
        0 0 0 4px rgba(35, 214, 180, 0.12),
        0 4px 20px rgba(35, 214, 180, 0.1);
}

.edit-field-input:focus:not(:focus-visible),
.edit-field-textarea:focus:not(:focus-visible),
.edit-field-select:focus:not(:focus-visible) {
    outline: none;
}

.edit-field-input:focus-visible,
.edit-field-textarea:focus-visible,
.edit-field-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.edit-field-textarea {
    resize: none;
    min-height: 110px;
    line-height: 1.6;
}

.edit-field-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2323d6b4' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L2 6h12l-6 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
}

.edit-field-select option {
    background: var(--bg-elevated-hover);
    color: #fff;
    padding: 12px;
}

.edit-field-hint {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    margin: 12px 0 20px;
    text-align: center;
    line-height: 1.4;
}

.edit-field-actions {
    display: flex;
    gap: 12px;
}

/* Bouton Annuler - Ghost style */
.edit-field-actions .btn-modal.secondary {
    flex: 1;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.edit-field-actions .btn-modal.secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.edit-field-actions .btn-modal.secondary:active {
    transform: scale(0.98);
}

/* Bouton Enregistrer - Primary CTA */
.edit-field-actions .btn-modal.primary {
    flex: 1.2;
    background: linear-gradient(135deg, #23d6b4 0%, #1ab89a 100%);
    border: none;
    border-radius: 14px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    color: #0a0f14;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    box-shadow:
        0 4px 15px rgba(35, 214, 180, 0.3),
        0 0 0 0 rgba(35, 214, 180, 0.4);
}

.edit-field-actions .btn-modal.primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(35, 214, 180, 0.4),
        0 0 0 0 rgba(35, 214, 180, 0.4);
}

.edit-field-actions .btn-modal.primary:active {
    transform: translateY(0) scale(0.98);
}

.edit-field-actions .btn-modal.primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.edit-field-actions .btn-modal.primary i {
    margin-right: 6px;
}

/* Recherche parrain avec autocomplete */
.edit-field-search-container {
    position: relative;
}

.edit-field-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-elevated-hover);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
    border-radius: 0 0 12px 12px;
    z-index: 10;
    display: none;
}

.edit-field-results.active {
    display: block;
}

.edit-field-result-item {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.edit-field-result-item:last-child {
    border-bottom: none;
}

.edit-field-result-item:hover {
    background: rgba(35, 214, 180, 0.1);
}

.edit-field-result-item.selected {
    background: rgba(35, 214, 180, 0.2);
}

.edit-field-result-item .result-name {
    font-weight: 600;
    color: #fff;
}

.edit-field-result-item .result-filleuls {
    font-size: 12px;
    color: var(--accent);
    opacity: 0.8;
}

.edit-field-no-results {
    padding: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* ==========================================================================
   PARRAIN CTA - Call To Action pour choisir son parrain
   ========================================================================== */
.parrain-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(35, 214, 180, 0.12) 0%, rgba(35, 214, 180, 0.04) 100%);
    border: 1.5px solid rgba(35, 214, 180, 0.3);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.parrain-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(35, 214, 180, 0.1), transparent);
    transition: left 0.5s ease;
}

.parrain-cta:hover::before {
    left: 100%;
}

.parrain-cta:hover {
    transform: translateY(-2px);
    border-color: rgba(35, 214, 180, 0.5);
    box-shadow: 0 8px 24px rgba(35, 214, 180, 0.15),
        0 0 0 1px rgba(35, 214, 180, 0.1);
    background: linear-gradient(135deg, rgba(35, 214, 180, 0.18) 0%, rgba(35, 214, 180, 0.08) 100%);
}

.parrain-cta:active {
    transform: translateY(0) scale(0.98);
}

.parrain-cta-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent) 0%, #1ab89a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #0b1016;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(35, 214, 180, 0.3);
}

.parrain-cta-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.parrain-cta-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.2px;
}

.parrain-cta-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.parrain-cta-bonus {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    background: rgba(35, 214, 180, 0.15);
    border-radius: 10px;
    flex-shrink: 0;
}

.parrain-cta-bonus .bonus-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

.parrain-cta-bonus .bonus-label {
    font-size: 10px;
    color: rgba(35, 214, 180, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.parrain-cta-arrow {
    color: var(--accent);
    font-size: 14px;
    opacity: 0.6;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.parrain-cta:hover .parrain-cta-arrow {
    opacity: 1;
    transform: translateX(3px);
}

/* État caché quand parrain déjà choisi */
.parrain-cta.hidden {
    display: none;
}

/* Responsive mobile */
@media (max-width: 480px) {
    .parrain-cta {
        padding: 14px;
        gap: 12px;
    }

    .parrain-cta-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .parrain-cta-title {
        font-size: 14px;
    }

    .parrain-cta-subtitle {
        font-size: 12px;
    }

    .parrain-cta-bonus {
        padding: 6px 10px;
    }

    .parrain-cta-bonus .bonus-value {
        font-size: 14px;
    }
}

/* ==========================================================================
   RGPD MODAL (Legal Pages)
   Design: Clean, airy, full-width
   ========================================================================== */
.rgpd-modal {
    display: none;
    position: fixed;
    top: var(--top-bar-height, 64px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
}

@media (min-width: 769px) {
    .rgpd-modal {
        left: var(--sidebar-width, 240px);
    }
}

@media (max-width: 768px) {
    .rgpd-modal {
        top: 0;
    }
}

.rgpd-modal.active {
    display: flex;
    flex-direction: column;
}

.rgpd-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--bg-app);
}

.rgpd-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-app);
    overflow: hidden;
}

/* Header */
.rgpd-modal-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    flex-shrink: 0;
}

.rgpd-modal-back {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 12px 10px 8px;
    margin: -10px;
    border-radius: 8px;
    transition: background 0.15s ease;
    min-height: 44px;
}

.rgpd-modal-back i {
    font-size: 18px;
    color: var(--text-secondary);
}

.rgpd-modal-back:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Tabs - simple underline */
.rgpd-tabs {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 0 20px 16px;
    flex-shrink: 0;
}

.rgpd-tab {
    padding: 8px 0;
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color 0.15s ease;
}

.rgpd-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text-primary);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.rgpd-tab:hover {
    color: var(--text-secondary);
}

.rgpd-tab.active {
    color: var(--text-primary);
}

.rgpd-tab.active::after {
    transform: scaleX(1);
}

/* Content */
.rgpd-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px 20px 120px;
}

.rgpd-pane {
    display: none;
    max-width: 580px;
    margin: 0 auto;
}

.rgpd-pane.active {
    display: block;
}

/* Title */
.rgpd-pane h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.3;
}

.rgpd-update {
    font-size: 13px;
    color: var(--text-disabled);
    margin: 0 0 48px;
}

/* Section titles */
.rgpd-pane h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 48px 0 16px;
}

.rgpd-pane h3:first-of-type {
    margin-top: 0;
}

/* Paragraphs */
.rgpd-pane p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin: 0 0 16px;
}

/* Lists */
.rgpd-pane ul {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.rgpd-pane li {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-left: 24px;
    position: relative;
}

.rgpd-pane li::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 11px;
    width: 4px;
    height: 4px;
    background: var(--text-disabled);
    border-radius: 50%;
}

.rgpd-pane li:last-child {
    margin-bottom: 0;
}

.rgpd-pane li strong {
    color: var(--text-primary);
    font-weight: 500;
}

/* Links */
.rgpd-pane a {
    color: var(--neon-primary);
    text-decoration: none;
}

.rgpd-pane a:hover {
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 480px) {
    .rgpd-tabs {
        gap: 20px;
    }

    .rgpd-tab {
        font-size: 13px;
    }

    .rgpd-tab-content {
        padding: 24px 16px 100px;
    }

    .rgpd-pane h2 {
        font-size: 20px;
    }

    .rgpd-pane h3 {
        font-size: 15px;
        margin-top: 36px;
    }

    .rgpd-pane p,
    .rgpd-pane li {
        font-size: 14px;
    }
}

/* ==========================================================================
   ORDERS PAGE MODAL
   ========================================================================== */
.orders-modal {
    display: none;
    position: fixed;
    top: 64px;
    /* Below navbar */
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
}

/* Desktop: respect sidebar */
@media (min-width: 769px) {
    .orders-modal {
        left: var(--sidebar-width, 240px);
    }
}

/* Mobile: no navbar, full height */
@media (max-width: 768px) {
    .orders-modal {
        top: 0;
    }
}

.orders-modal.active {
    display: flex;
    flex-direction: column;
}

.orders-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--bg-dark, #0b0f13);
}

.orders-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-dark, #0b0f13);
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
}

/* Header styled like page-header */
.orders-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 24px 20px;
    background: transparent;
    flex-shrink: 0;
    position: relative;
}

.orders-back {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.orders-back:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.orders-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
}

.orders-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 24px;
}

.orders-loading,
.orders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.4);
}

.orders-loading i,
.orders-empty i {
    font-size: 32px;
}

.orders-empty p {
    margin: 0;
    font-size: 15px;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

/* Order Item */
.order-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: all 0.2s ease;
}

.order-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.order-info {
    flex: 1;
    min-width: 0;
}

.order-ref {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.order-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.order-status {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    flex-shrink: 0;
}

.order-status.pending {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.order-status.processing {
    background: rgba(33, 150, 243, 0.15);
    color: #2196f3;
}

.order-status.shipped,
.order-status.envoyee {
    background: rgba(35, 214, 180, 0.15);
    color: var(--accent, #23d6b4);
}

.order-status.delivered {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}

.order-status.cancelled {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
}

.order-email-btn {
    width: 42px;
    height: 42px;
    border: none;
    background: rgba(35, 214, 180, 0.12);
    border: 1px solid rgba(35, 214, 180, 0.25);
    color: var(--accent, #23d6b4);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.order-email-btn:hover {
    background: rgba(35, 214, 180, 0.2);
    border-color: rgba(35, 214, 180, 0.4);
    transform: scale(1.05);
}

.order-email-btn:active {
    transform: scale(0.95);
}

.order-email-btn.sending {
    pointer-events: none;
    opacity: 0.6;
}

/* Responsive */
@media (max-width: 480px) {
    .orders-header {
        padding: 14px 16px;
    }

    .orders-body {
        padding: 16px;
    }

    .order-item {
        padding: 12px 14px;
        gap: 12px;
    }

    .order-ref {
        font-size: 14px;
    }

    .order-status {
        padding: 5px 10px;
        font-size: 11px;
    }

    .order-email-btn {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
}

/* Ligne cliquable dans les settings */
.setting-row.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}

.setting-row.clickable:hover {
    background: rgba(255, 255, 255, 0.04);
}

.setting-row.clickable:active {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(0.99);
}

/* Setting row value with chevron */
.setting-row.clickable .setting-value {
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
}

.setting-row.clickable .setting-value i {
    font-size: 11px;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.setting-row.clickable:hover .setting-value i {
    opacity: 1;
    transform: translateX(3px);
}

/* ========================================
   RESPONSIVE - Edit Modal
   ======================================== */

/* Desktop & Tablet (> 768px) */
@media (min-width: 769px) {
    .edit-field-content {
        max-width: 420px;
        padding: 36px 32px;
    }

    .edit-field-title {
        font-size: 24px;
        margin-bottom: 28px;
    }

    .edit-field-actions {
        margin-top: 8px;
    }

    .edit-field-actions .btn-modal.primary,
    .edit-field-actions .btn-modal.secondary {
        padding: 16px 28px;
        font-size: 15px;
    }

    .edit-field-actions .btn-modal.primary:hover {
        transform: translateY(-3px);
    }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .edit-field-content {
        max-width: 450px;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    .edit-field-modal {
        padding: 16px;
        align-items: flex-end;
    }

    .edit-field-content {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        padding: 28px 24px 34px;
        margin-bottom: 0;
        animation: editModalSlideUp 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
    }

    @keyframes editModalSlideUp {
        0% {
            opacity: 0;
            transform: translateY(100%);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .edit-field-title {
        font-size: 20px;
    }

    .edit-field-input,
    .edit-field-textarea,
    .edit-field-select {
        font-size: 16px;
        padding: 14px 16px;
        border-radius: 12px;
    }

    .edit-field-actions {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .edit-field-actions .btn-modal.primary,
    .edit-field-actions .btn-modal.secondary {
        width: 100%;
        padding: 16px;
        border-radius: 12px;
    }

    .edit-field-actions .btn-modal.secondary {
        flex: unset;
    }

    .edit-field-actions .btn-modal.primary {
        flex: unset;
    }
}

/* Small Mobile (< 380px) */
@media (max-width: 380px) {
    .edit-field-content {
        padding: 24px 20px 30px;
    }

    .edit-field-title {
        font-size: 18px;
    }
}

/* ========================================
   MISSIONS PAGE (Quêtes)
   ======================================== */

.missions-page {
    padding: 0 0 120px 0;
}

.missions-page .page-tabs {
    margin: 0;
    padding: 0;
}

.missions-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(35, 214, 180, 0.1);
    border: 1px solid rgba(35, 214, 180, 0.25);
    border-radius: 12px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.missions-timer i {
    font-size: 16px;
}

/* Missions Panels */
.missions-panels {
    padding: 20px 96px;
}

.missions-panel {
    display: none;
}

.missions-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hunter Badge CTA */
.hunter-badge-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(35, 214, 180, 0.15) 0%, rgba(35, 214, 180, 0.05) 100%);
    border: 1px solid rgba(35, 214, 180, 0.3);
    border-radius: 16px;
    margin-bottom: 24px;
}

.hunter-cta-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hunter-cta-icon {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.5);
}

.hunter-cta-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hunter-cta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hunter-cta-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.hunter-cta-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.hunter-cta-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--accent);
    border: none;
    border-radius: 10px;
    color: #0a0a0c;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hunter-cta-btn:hover:not(:disabled) {
    background: var(--accent-strong);
    transform: translateY(-1px);
}

/* Hunter CTA - Locked state (glass-card style) */
.hunter-badge-cta.locked {
    background: linear-gradient(145deg,
            rgba(22, 22, 22, 0.7) 0%,
            rgba(16, 16, 16, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
}

.hunter-badge-cta.locked .hunter-cta-icon img {
    filter: grayscale(0.6) opacity(0.7);
}

.hunter-cta-btn:disabled {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--text-tertiary);
    cursor: not-allowed;
    padding: 12px 16px;
}

.hunter-cta-btn:disabled:hover {
    transform: none;
    background: rgba(30, 30, 30, 0.6);
}

/* Hunter CTA - Completed state (all badges earned) */
.hunter-badge-cta.completed {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.12) 0%, rgba(74, 222, 128, 0.04) 100%);
    border-color: rgba(74, 222, 128, 0.3);
}

.hunter-badge-cta.completed .hunter-cta-icon {
    background: #4ade80;
}

.hunter-badge-cta.completed .hunter-cta-btn {
    background: #4ade80;
    color: #0a0a0c;
}

/* Hunter Progress Bar */
.hunter-progress-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.hunter-progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    min-width: 120px;
}

.hunter-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #4ade80 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.hunter-badge-cta.locked .hunter-progress-fill {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.35) 100%);
}

.hunter-badge-cta.locked .hunter-progress-bar {
    background: rgba(255, 255, 255, 0.06);
}

.hunter-progress-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* Hide progress when badge is claimable */
.hunter-badge-cta.claimable .hunter-progress-wrapper {
    display: none;
}

/* Quest Sections Grid (2 columns) */
.quest-sections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 28px;
}

@media (max-width: 768px) {
    .quest-sections-grid {
        grid-template-columns: 1fr;
    }
}

/* Quest Section */
.quest-section {
    margin-bottom: 0;
}

.quest-section:not(.quest-sections-grid .quest-section) {
    margin-bottom: 28px;
}

/* Quest Section inside grid with glass-card styling */
.quest-sections-grid .quest-section.glass-card {
    padding: 20px;
    background: linear-gradient(145deg,
            rgba(22, 22, 22, 0.7) 0%,
            rgba(16, 16, 16, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
}

/* Inner quest-cards need lighter bg to contrast with parent */
.quest-sections-grid .quest-section.glass-card .quest-card {
    background: rgba(30, 30, 30, 0.6);
    border-color: rgba(255, 255, 255, 0.03);
}

.quest-sections-grid .quest-section.glass-card .quest-card:hover {
    background: rgba(35, 35, 35, 0.7);
    border-color: rgba(255, 255, 255, 0.06);
}

.quest-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

/* Tighter header in grid context */
.quest-sections-grid .quest-section-header {
    margin-bottom: 12px;
}

/* Slightly smaller title in grid context */
.quest-sections-grid .quest-section-title h3 {
    font-size: 16px;
}

.quest-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quest-section-title i {
    font-size: 18px;
    color: var(--accent);
}

.quest-section-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.quest-section-timer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-tertiary);
}

.quest-section-timer i {
    font-size: 12px;
}

/* Quest Cards */
.quest-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quest-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: all 0.2s ease;
}

.quest-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(17, 17, 22, 0.9);
}

.quest-card.completed {
    background: rgba(35, 214, 180, 0.06);
    border-color: rgba(35, 214, 180, 0.2);
}

/* Already claimed - grayed out with checkmark */
.quest-card.claimed {
    background: rgba(74, 222, 128, 0.04);
    border-color: rgba(74, 222, 128, 0.12);
    opacity: 0.65;
}

.quest-card.claimed .quest-icon {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.quest-card.claimed .quest-title {
    text-decoration: line-through;
    color: var(--text-tertiary);
}

.quest-card.claimed .quest-claim-btn {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.25);
    color: #4ade80;
}

.quest-card.claimed .quest-progress-fill {
    background: #4ade80;
}

.quest-card.claimed .reward-amount {
    color: var(--text-tertiary);
}

.quest-card-special {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.08) 0%, rgba(255, 152, 0, 0.04) 100%);
    border-color: rgba(255, 193, 7, 0.25);
}

.quest-card-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.quest-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 18px;
    flex-shrink: 0;
}

.quest-icon-notes {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.quest-icon-video {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.quest-icon-streak {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    font-size: 16px;
    font-weight: 800;
}

.quest-icon-badge {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.quest-info {
    flex: 1;
    min-width: 0;
}

.quest-title {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.quest-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.quest-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #4ade80 100%);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.quest-card.completed .quest-progress-fill {
    background: var(--accent);
}

.quest-progress-text {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 500;
}

.quest-card-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.quest-reward {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.reward-amount {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent);
}

.reward-type {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quest-reward-badge {
    align-items: center;
    flex-direction: row;
    gap: 6px;
}

.quest-reward-badge i {
    font-size: 20px;
    color: #fbbf24;
}

.quest-reward-badge .reward-type {
    color: #fbbf24;
}

.quest-claim-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-tertiary);
    font-size: 16px;
    cursor: not-allowed;
    transition: all 0.2s ease;
}

.quest-claim-btn:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: #0a0a0c;
    cursor: pointer;
}

.quest-claim-btn:not(:disabled):hover {
    background: var(--accent-strong);
    transform: scale(1.05);
}

.quest-claim-btn:not(:disabled) i::before {
    content: "\f06b";
    /* gift icon */
}

/* Bonus Link */
.bonus-exp-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: rgba(35, 214, 180, 0.08);
    border: 1px solid rgba(35, 214, 180, 0.2);
    border-radius: 12px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.bonus-exp-link:hover {
    background: rgba(35, 214, 180, 0.12);
    border-color: rgba(35, 214, 180, 0.35);
}

.bonus-exp-link span {
    flex: 1;
}

.bonus-exp-link i:last-child {
    font-size: 12px;
    opacity: 0.7;
}

/* Streak Hero */
.streak-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 24px;
    background: linear-gradient(145deg, rgba(22, 22, 22, 0.7) 0%, rgba(16, 16, 16, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    margin-bottom: 28px;
}

.streak-hero-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.streak-current-big {
    font-size: 56px;
    font-weight: 900;
    color: var(--neon-primary);
    line-height: 1;
    font-family: var(--font-display);
}

.streak-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.streak-record-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}

.streak-record-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.streak-record-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-display);
}

/* Grade Overview */
.grade-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    margin-bottom: 28px;
}

.grade-current {
    display: flex;
    align-items: center;
    gap: 16px;
}

.grade-badge-display {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(35, 214, 180, 0.1);
    border-radius: 16px;
    padding: 12px;
}

.grade-badge-display img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.grade-info h3 {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.grade-progress-label {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.grade-progress-label span {
    color: var(--accent);
    font-weight: 700;
}

/* Progress Ring */
.grade-progress-ring {
    position: relative;
    width: 80px;
    height: 80px;
}

.grade-progress-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.grade-progress-ring .ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 8;
}

.grade-progress-ring .ring-fill {
    fill: none;
    stroke: var(--accent);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}

.grade-progress-ring .ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
}

/* Grade Tiers List */
.grade-tiers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.grade-tier {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: all 0.2s ease;
}

.grade-tier.completed {
    background: rgba(35, 214, 180, 0.06);
    border-color: rgba(35, 214, 180, 0.2);
}

.grade-tier.current {
    background: linear-gradient(135deg, rgba(35, 214, 180, 0.1) 0%, rgba(35, 214, 180, 0.04) 100%);
    border-color: rgba(35, 214, 180, 0.35);
}

.grade-tier.locked {
    opacity: 0.6;
}

.grade-tier-badge {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 8px;
    flex-shrink: 0;
}

.grade-tier-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.grade-tier.locked .grade-tier-badge {
    filter: grayscale(1);
}

.grade-tier-info {
    flex: 1;
    min-width: 0;
}

.grade-tier-info h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.grade-tier-req {
    font-size: 13px;
    color: var(--text-secondary);
}

.grade-tier-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.grade-tier-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.grade-tier-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
}

.grade-tier-progress span {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 500;
    flex-shrink: 0;
}

.grade-tier-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
}

.grade-tier-status i {
    font-size: 20px;
}

.grade-tier.completed .grade-tier-status i {
    color: var(--accent);
}

.grade-tier.locked .grade-tier-status i {
    color: var(--text-tertiary);
    font-size: 16px;
}

.grade-tier-percent {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
}

/* Responsive - Missions */
@media (max-width: 768px) {
    .missions-timer {
        align-self: flex-start;
        margin-top: 12px;
    }

    .missions-panels {
        padding: 16px;
    }

    .hunter-badge-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hunter-cta-btn {
        justify-content: center;
    }

    .quest-card {
        padding: 14px;
    }

    .quest-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .quest-title {
        font-size: 14px;
    }

    .quest-claim-btn {
        width: 40px;
        height: 40px;
    }

    .streak-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px 20px;
    }

    .streak-record-box {
        align-self: stretch;
        flex-direction: row;
        justify-content: space-between;
    }

    .streak-current-big {
        font-size: 48px;
    }

    .grade-overview {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 20px;
    }

    .grade-progress-ring {
        align-self: center;
    }
}

@media (max-width: 360px) {
    .quest-card-left {
        gap: 10px;
    }

    .quest-card-right {
        gap: 8px;
    }

    .reward-amount {
        font-size: 14px;
    }
}

/* ========================================
   BONUS EXP MODAL
======================================== */

.bonus-exp-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.bonus-exp-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.bonus-exp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.bonus-exp-content {
    position: relative;
    background: var(--bg-panel);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    max-width: 380px;
    width: 100%;
    padding: 28px 24px;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--shadow-soft);
}

.bonus-exp-modal[aria-hidden="false"] .bonus-exp-content {
    transform: scale(1) translateY(0);
}

.bonus-exp-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.bonus-exp-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.bonus-exp-header {
    text-align: center;
    margin-bottom: 20px;
}

.bonus-exp-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 26px;
    color: #000;
    box-shadow: 0 8px 24px rgba(35, 214, 180, 0.3);
}

.bonus-exp-header h2 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.bonus-exp-body {
    text-align: center;
}

.bonus-exp-highlight {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: rgba(35, 214, 180, 0.12);
    border: 1px solid rgba(35, 214, 180, 0.25);
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 16px;
}

.bonus-exp-highlight .bonus-value {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    color: var(--accent);
}

.bonus-exp-highlight .bonus-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bonus-exp-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 16px;
}

.bonus-exp-text strong {
    color: var(--text-primary);
    font-weight: 600;
}

.bonus-exp-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 10px;
    padding: 12px 14px;
    text-align: left;
}

.bonus-exp-tip i {
    color: #ffc107;
    font-size: 16px;
    margin-top: 2px;
}

.bonus-exp-tip span {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.bonus-exp-btn {
    width: 100%;
    margin-top: 20px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bonus-exp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(35, 214, 180, 0.35);
}

/* ========================================
   STREAK QUEST BADGE CARDS
======================================== */

/* Badge quest card - special styling */
.quest-card-badge {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.08), rgba(79, 70, 229, 0.08));
    border-color: rgba(147, 51, 234, 0.25);
}

.quest-card-badge:hover {
    border-color: rgba(147, 51, 234, 0.4);
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.12), rgba(79, 70, 229, 0.12));
}

/* Badge image as icon */
.quest-icon-badge-img {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 6px;
    border: 1px solid rgba(147, 51, 234, 0.3);
}

.quest-icon-badge-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Dual rewards container (badge + EXP) */
.quest-rewards-dual {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/* Badge reward display */
.quest-badge-reward {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(79, 70, 229, 0.15));
    border: 1px solid rgba(147, 51, 234, 0.3);
    border-radius: 8px;
    padding: 6px 10px;
}

.quest-badge-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.quest-badge-name {
    font-size: 12px;
    font-weight: 600;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* EXP reward in dual display */
.quest-exp-reward {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.quest-exp-reward .reward-amount {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
}

.quest-exp-reward .reward-type {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

/* Claimed state for badge cards */
.quest-card-badge.claimed {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.04), rgba(79, 70, 229, 0.04));
    border-color: rgba(147, 51, 234, 0.12);
}

.quest-card-badge.claimed .quest-badge-reward {
    opacity: 0.5;
}

/* Completed/claimable state for badge cards */
.quest-card-badge.completed {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(79, 70, 229, 0.15));
    border-color: rgba(147, 51, 234, 0.5);
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.2);
}

.quest-card-badge.completed .quest-badge-reward {
    animation: badge-glow 2s ease-in-out infinite;
}

@keyframes badge-glow {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(147, 51, 234, 0.3);
    }

    50% {
        box-shadow: 0 0 16px rgba(147, 51, 234, 0.5);
    }
}

/* ========================================
   SIDEBAR NAVIGATION - REDESIGN 2026
   ======================================== */

:root {
    --sidebar-width: 240px;
    --sidebar-width-compact: 72px;
    --top-bar-height: 64px;
    --sidebar-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== BASE SIDEBAR ===== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: width var(--sidebar-transition);
}

/* Mode compact */
.sidebar.compact {
    width: var(--sidebar-width-compact);
}

/* ===== HEADER ===== */
.sidebar-header {
    height: var(--top-bar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.sidebar-brand:hover {
    opacity: 0.8;
}

.sidebar-logo {
    height: 22px;
    width: auto;
    object-fit: contain;
    transition: opacity var(--sidebar-transition);
}

.sidebar-logo-full {
    display: block;
}

.sidebar-logo-icon {
    display: none;
    height: 32px;
}

.sidebar.compact .sidebar-logo-full {
    display: none;
}

.sidebar.compact .sidebar-logo-icon {
    display: block;
}

/* Toggle Button - Always round and centered on sidebar edge */
.sidebar-toggle-btn {
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-sidebar);
    border: 1px solid var(--glass-border);
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    z-index: 10;
}

.sidebar-toggle-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--accent);
}

.sidebar-toggle-btn i {
    transition: transform 0.25s ease;
    font-size: 12px;
}

.sidebar.compact .sidebar-toggle-btn i {
    transform: rotate(180deg);
}

.sidebar.compact .sidebar-header {
    justify-content: center;
    padding: 0;
}

/* ===== NAVIGATION ===== */
.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar.compact .sidebar-nav {
    padding: 16px 8px;
}

/* Group */
.sidebar-group {
    margin-bottom: 8px;
}

.sidebar-group-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-tertiary);
    padding: 8px 14px 6px;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--sidebar-transition);
}

.sidebar.compact .sidebar-group-label {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
}

.sidebar-group-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Séparateur visuel en mode compact */
.sidebar.compact .sidebar-group::before {
    content: '';
    display: block;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 8px 12px;
}

.sidebar.compact .sidebar-group:first-child::before {
    display: none;
}

/* ===== CTA NOTER (bouton blanc) ===== */
.sidebar-nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 0 12px 16px;
    border-radius: var(--radius-md);
    background: #FFFFFF;
    color: #000000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
}

.sidebar-nav-cta i {
    font-size: 16px;
}

.sidebar-nav-cta:hover {
    background: #F0F0F0;
    transform: scale(1.02);
}

.sidebar-nav-cta:active {
    transform: scale(0.98);
}

/* CTA en mode compact */
.sidebar.compact .sidebar-nav-cta {
    margin: 0 8px 12px;
    padding: 12px;
    justify-content: center;
}

.sidebar.compact .sidebar-nav-cta span {
    display: none;
}

/* Tooltip pour CTA en mode compact */
.sidebar.compact .sidebar-nav-cta::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 12px;
    background: rgba(20, 20, 24, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.sidebar.compact .sidebar-nav-cta:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(4px);
}

/* Badge for cards to rate count (CTA Noter button) */
.sidebar-nav-cta .sidebar-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--error);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.sidebar.compact .sidebar-nav-cta .sidebar-badge {
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    line-height: 18px;
    padding: 0 5px;
}

/* Nav Item */
.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-nav-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.sidebar-nav-item span:not(.sidebar-badge) {
    transition: opacity var(--sidebar-transition);
}

.sidebar-nav-item:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-nav-item:hover i {
    transform: scale(1.1);
}

.sidebar-nav-item.active {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    font-weight: 500;
}

.sidebar-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}

.sidebar-nav-item.active i {
    color: #FFFFFF;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}

/* Compact mode - nav items */
.sidebar.compact .sidebar-nav-item {
    justify-content: center;
    padding: 12px;
}

.sidebar.compact .sidebar-nav-item span:not(.sidebar-badge) {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar.compact .sidebar-nav-item i {
    margin: 0;
}

/* Tooltips en mode compact */
.sidebar.compact .sidebar-nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 12px;
    background: rgba(20, 20, 24, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.sidebar.compact .sidebar-nav-item:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(4px);
}

/* ===== BADGES ===== */
.sidebar-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
    flex-shrink: 0;
    transition: all var(--sidebar-transition);
}

.sidebar-badge.new {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: white;
}

.sidebar-badge.count {
    background: var(--error);
    color: white;
    min-width: 20px;
    text-align: center;
    display: none;
}

.sidebar-badge.count.visible {
    display: inline-block;
}

/* Badge en mode compact - devient un dot */
.sidebar.compact .sidebar-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    min-width: 8px;
    padding: 0;
    font-size: 0;
    border-radius: 50%;
}

.sidebar.compact .sidebar-badge.new {
    background: #a855f7;
}

.sidebar.compact .sidebar-badge.count.visible {
    display: block;
    background: var(--error);
}

/* ===== FOOTER ===== */
.sidebar-footer {
    border-top: 1px solid var(--glass-border);
    padding: 12px;
    flex-shrink: 0;
}

.sidebar.compact .sidebar-footer {
    padding: 12px 8px;
}

/* ===== USER WIDGET ===== */
.sidebar-user {
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    padding: 12px;
    margin-bottom: 12px;
    transition: all var(--sidebar-transition);
}

.sidebar-user-main {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.sidebar-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-panel);
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all var(--sidebar-transition);
}

.sidebar-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: opacity var(--sidebar-transition);
}

.sidebar-user-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-rank {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Progress bar */
.sidebar-user-progress {
    margin-bottom: 8px;
    transition: opacity var(--sidebar-transition);
}

.sidebar-user-progress-bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.sidebar-user-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #4ade80);
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 3%;
}

/* Badges */
.sidebar-user-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    transition: opacity var(--sidebar-transition);
}

.sidebar-user-badges img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px;
}

/* Rankings */
.sidebar-user-rankings {
    display: flex;
    gap: 6px;
    transition: all var(--sidebar-transition);
}

.sidebar-ranking {
    flex: 1;
    min-width: 0; /* Permet le shrink */
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

.sidebar-ranking:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-ranking i {
    font-size: 10px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.sidebar-ranking-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.sidebar-ranking-label {
    font-size: 9px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: opacity var(--sidebar-transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ===== USER LINKS (intégrés dans widget) ===== */
.sidebar-user-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.sidebar-user-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    min-height: 48px;
    min-width: 0;
    overflow: hidden;
}

.sidebar-user-link i {
    font-size: 14px;
    opacity: 0.8;
    flex-shrink: 0;
}

.sidebar-user-link span:not(.sidebar-badge) {
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.sidebar-user-link:hover i {
    opacity: 1;
}

.sidebar-user-link.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.sidebar-user-link.active i {
    opacity: 1;
    color: var(--accent);
}

/* Badge dans les user links */
.sidebar-user-link .sidebar-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    margin: 0;
    padding: 0;
    width: 8px;
    height: 8px;
    min-width: 8px;
    font-size: 0;
    border-radius: 50%;
}

/* ===== USER WIDGET - COMPACT MODE ===== */
.sidebar.compact .sidebar-user {
    padding: 8px;
    display: flex;
    justify-content: center;
}

.sidebar.compact .sidebar-user-main {
    margin-bottom: 0;
}

.sidebar.compact .sidebar-user-avatar {
    width: 40px;
    height: 40px;
}

.sidebar.compact .sidebar-user-info,
.sidebar.compact .sidebar-user-progress,
.sidebar.compact .sidebar-user-badges,
.sidebar.compact .sidebar-user-rankings,
.sidebar.compact .sidebar-user-links {
    display: none;
}

/* ===== LOGOUT ===== */
.sidebar-nav-logout {
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 8px;
}

.sidebar-nav-logout i {
    color: #ef4444;
}

.sidebar-nav-logout:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* ===== SIDEBAR OVERLAY (mobile) ===== */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Hide sidebar on auth view */
body:has(#auth-view.active) .sidebar,
body:has(#auth-view.active) .sidebar-overlay {
    display: none;
}

/* ========================================
   RESPONSIVE SIDEBAR LAYOUT
   ======================================== */

/* Desktop: sidebar visible, bottom nav hidden */
@media (min-width: 769px) {

    /* Content shifts right for sidebar - using CSS var for dynamic width */
    .view.active {
        margin-left: var(--sidebar-width);
        padding-top: 80px;
        transition: margin-left var(--sidebar-transition);
    }

    /* Compact mode: reduce margin */
    body.sidebar-compact .view.active {
        margin-left: var(--sidebar-width-compact);
    }

    /* Auth and Onboarding are fullscreen overlays - no sidebar offset */
    #auth-view.view.active,
    #onboarding-view.view.active {
        margin-left: 0;
        padding-top: 0;
    }

    #dashboard-view.view.active {
        padding-top: 0;
        margin-left: var(--sidebar-width);
        transition: margin-left var(--sidebar-transition);
    }

    body.sidebar-compact #dashboard-view.view.active {
        margin-left: var(--sidebar-width-compact);
    }

    /* Hero carousel respects sidebar on desktop */
    #dashboard-view .hero-carousel {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    /* Hide bottom nav on desktop */
    .bottom-nav-app {
        display: none !important;
    }

    /* Sidebar always visible */
    .sidebar {
        transform: translateX(0);
    }

    /* Top bar starts after sidebar */
    .top-app-bar {
        left: var(--sidebar-width) !important;
        transition: left var(--sidebar-transition);
    }

    body.sidebar-compact .top-app-bar {
        left: var(--sidebar-width-compact) !important;
    }

    /* Hide hamburger on desktop */
    .top-bar-hamburger {
        display: none !important;
    }
}

/* Mobile: sidebar as drawer, bottom nav visible */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width); /* Always expanded on mobile drawer */
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Hide collapse button on mobile - not needed */
    .sidebar-toggle-btn {
        display: none !important;
    }

    /* Hide top app bar on mobile - more screen space */
    .top-app-bar {
        display: none !important;
    }

    /* Bottom nav visible on mobile - styles in styles-mobile.css */
    .bottom-nav-app {
        display: flex;
    }

    /* Content padding for mobile */
    .view.active {
        margin-left: 0;
        padding-top: 80px;
        padding-bottom: 100px;
    }

    #dashboard-view.view.active {
        padding-top: 0;
        margin-left: 0;
    }

    /* No top bar = no padding needed on carousel */
    #dashboard-view .hero-carousel {
        padding-top: 0;
    }

    /* Other views: reduce top padding since no top bar */
    .view.active {
        padding-top: 16px;
    }

}

/* ========================================
   TOP APP BAR (with sidebar)
   ======================================== */

.top-app-bar {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    z-index: 1000;
    height: var(--top-bar-height);
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(32px) saturate(120%);
    -webkit-backdrop-filter: blur(32px) saturate(120%);
    border-bottom: 1px solid var(--glass-border);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.top-app-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-border-light), transparent);
    opacity: 0.4;
}

.top-app-bar-content {
    height: 100%;
    padding: 0 96px 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-action-capsule {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 6px 6px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    transition: all 0.3s var(--ease-out-expo);
}

.user-action-capsule:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--glass-border-light);
    transform: translateY(-1px);
}

.top-bar-notification {
    position: relative;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.top-bar-notification:hover {
    color: var(--neon-primary);
}

.top-bar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.top-bar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    object-fit: cover;
}

/* Hamburger menu (hidden on desktop) */
.top-bar-hamburger {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.top-bar-hamburger:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Search bar */
.top-bar-search {
    flex: 1;
    max-width: 480px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    transition: all 0.3s var(--ease-out-expo);
    cursor: text;
    position: relative;
}

.top-bar-search:focus-within {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.4);
    /* Focus blanc cristallin */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
}

.top-bar-search i {
    color: var(--text-tertiary);
    font-size: 14px;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

.top-bar-search:focus-within i {
    color: var(--text-primary);
}

.top-bar-search input {
    flex: 1;
    height: 100%;
    /* Occupe toute la hauteur de la capsule pour le clic */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 0;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.top-bar-search input:focus:not(:focus-visible) {
    outline: none;
}

.top-bar-search input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.top-bar-search input::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

/* Global Search Results Dropdown */
.global-search-results {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(32px) saturate(150%);
    -webkit-backdrop-filter: blur(32px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
    max-height: 480px;
    overflow-y: auto;
    z-index: 2000;
    display: none;
    /* Cache par defaut */
    padding: 8px;
    animation: slideDown 0.3s var(--ease-out-expo);
}

.global-search-results.active {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--glass-border-light);
    transform: translateX(4px);
}

.search-result-img {
    height: 50px;
    width: auto;
    border-radius: 3.5%;
    object-fit: contain;
    flex-shrink: 0;
}

.result-img-wrapper {
    width: 48px;
    height: 64px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #111;
    border: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.result-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.result-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-id {
    font-size: 12px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: 6px;
}

.result-id::before {
    content: 'ID';
    font-size: 9px;
    font-weight: 800;
    background: var(--bg-elevated);
    padding: 1px 4px;
    border-radius: 4px;
    color: var(--text-secondary);
}

.result-serial {
    font-size: 11px;
    color: var(--neon-primary);
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
}

.result-score {
    font-size: 11px;
    color: var(--text-tertiary);
}

.result-score-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #FFFFFF;
    color: #0a0a0c;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
}

.result-score-pill i,
.result-score-pill svg {
    font-size: 9px;
    width: 9px;
    height: 9px;
    color: #0a0a0c;
    flex-shrink: 0;
}

.search-load-more {
    padding: 12px;
    text-align: center;
}

.search-load-more-text {
    font-size: 12px;
    color: var(--text-tertiary);
}

.search-no-results {
    padding: 32px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 14px;
}

.search-loading {
    padding: 24px;
    text-align: center;
    color: var(--neon-primary);
}

/* Actions */
.top-app-bar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

/* User avatar in top bar */
.top-bar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-panel);
    cursor: pointer;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.top-bar-avatar:hover {
    transform: scale(1.05);
}

.top-bar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-bar-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.top-bar-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.05);
}

.top-bar-btn:active {
    transform: scale(0.95);
}

/* Notification badge */
.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--error);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    color: white;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.5);
    animation: notif-badge-pulse 2s ease-in-out infinite;
}

.notification-badge.visible {
    display: flex;
}

@keyframes notif-badge-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

/* Bell shake animation when there are notifications */
.notification-btn:has(.notification-badge.visible) i {
    animation: bell-shake 3s ease-in-out infinite;
}

@keyframes bell-shake {

    0%,
    100% {
        transform: rotate(0);
    }

    5% {
        transform: rotate(15deg);
    }

    10% {
        transform: rotate(-15deg);
    }

    15% {
        transform: rotate(10deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    25% {
        transform: rotate(0);
    }
}

/* Hide top bar on auth view */
body:has(#auth-view.active) .top-app-bar {
    display: none;
}

/* ========================================
   NOTIFICATIONS PANEL
   ======================================== */

/* Notifications Panel */
.notifications-panel {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.notifications-panel[aria-hidden="false"] {
    pointer-events: auto;
    opacity: 1;
}

.notifications-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.notifications-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: var(--bg-app);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
}

.notifications-panel[aria-hidden="false"] .notifications-drawer {
    transform: translateX(0);
}

/* Header */
.notifications-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.notifications-back {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.notifications-back:hover {
    background: rgba(255, 255, 255, 0.1);
}

.notifications-title {
    flex: 1;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.notifications-actions {
    display: flex;
    gap: 8px;
}

.notifications-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.notifications-action-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

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

/* Content */
.notifications-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Loading State */
.notifications-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    color: var(--text-tertiary);
}

.notifications-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Empty State */
.notifications-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    text-align: center;
}

.notifications-empty .empty-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 32px;
    color: var(--text-tertiary);
}

.notifications-empty h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.notifications-empty p {
    font-size: 14px;
    color: var(--text-tertiary);
    margin: 0;
    line-height: 1.5;
}

/* Notifications List */
.notifications-list {
    display: flex;
    flex-direction: column;
}

/* Single Notification Item */
.notification-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
}

.notification-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.notification-item:active {
    background: rgba(255, 255, 255, 0.08);
}

/* Notification Image */
.notification-image {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--bg-panel);
    overflow: hidden;
    flex-shrink: 0;
}

.notification-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notification-image .placeholder-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-tertiary);
}

/* Notification Content */
.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-date {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Notification Arrow */
.notification-arrow {
    color: var(--accent);
    font-size: 12px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* Notification Icon */
.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(35, 214, 180, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent);
    font-size: 16px;
}

/* Notification Time */
.notification-time {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Unread notification state */
.notification-item--unread {
    background: rgba(35, 214, 180, 0.06);
    border-left: 3px solid var(--accent);
}

.notification-item--unread .notification-icon {
    background: rgba(35, 214, 180, 0.2);
}

.notification-item--unread .notification-text {
    font-weight: 500;
}

/* Notification Type Badges - Positive (XP gain, success) */
.notification-item[data-type="positive"] .notification-image {
    border: 2px solid rgba(35, 214, 180, 0.6);
}

.notification-item[data-type="positive"] .notification-icon {
    background: rgba(35, 214, 180, 0.2);
    color: var(--accent);
}

/* Notification Type Badges - Negative (XP loss, warning) */
.notification-item[data-type="negative"] .notification-image {
    border: 2px solid rgba(255, 77, 79, 0.6);
}

.notification-item[data-type="negative"] .notification-icon {
    background: rgba(255, 77, 79, 0.15);
    color: #ff4d4f;
}

/* Notification Type Badges - Info (neutral) */
.notification-item[data-type="info"] .notification-image {
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.notification-item[data-type="info"] .notification-icon {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

/* Swipe-to-delete hint */
.notification-item.swiping {
    transform: translateX(var(--swipe-x, 0));
    transition: none;
}

.notification-item.removing {
    animation: notification-remove 0.3s ease forwards;
}

@keyframes notification-remove {
    to {
        opacity: 0;
        transform: translateX(-100%);
        height: 0;
        padding: 0;
        margin: 0;
    }
}

/* Confirmation Modal for Clear All */
.notifications-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.notifications-confirm-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.notifications-confirm-content {
    background: var(--bg-panel);
    border-radius: 16px;
    padding: 24px;
    max-width: 320px;
    width: 90%;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.notifications-confirm-modal.visible .notifications-confirm-content {
    transform: scale(1);
}

.notifications-confirm-content h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.notifications-confirm-content p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 24px;
    line-height: 1.5;
}

.notifications-confirm-actions {
    display: flex;
    gap: 12px;
}

.notifications-confirm-actions button {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.notifications-confirm-actions .btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-secondary);
}

.notifications-confirm-actions .btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.notifications-confirm-actions .btn-confirm {
    background: var(--error);
    border: none;
    color: white;
}

.notifications-confirm-actions .btn-confirm:hover {
    background: #ff6b7a;
}

/* Mobile Optimizations */
@media (max-width: 480px) {
    .top-app-bar-content {
        padding: 0 12px;
    }

    .brand-name {
        font-size: 14px;
    }

    .top-bar-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .notifications-drawer {
        max-width: 100%;
    }

    .notification-item {
        padding: 12px 16px;
    }

    .notification-image {
        width: 44px;
        height: 44px;
    }
}

/* =========================================
   PROFILE EDIT MODAL
   ========================================= */
.profile-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.profile-edit-modal[aria-hidden="false"] {
    pointer-events: auto;
    opacity: 1;
}

.profile-edit-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.profile-edit-content {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    background: var(--bg-secondary);
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
    overflow-x: hidden;
}

.profile-edit-modal[aria-hidden="false"] .profile-edit-content {
    transform: translateY(0);
}

.profile-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.profile-edit-close,
.profile-edit-save {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-edit-close {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.profile-edit-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.profile-edit-save {
    background: var(--accent);
    color: #fff;
}

.profile-edit-save:hover {
    background: var(--accent-hover);
    transform: scale(1.05);
}

.profile-edit-save:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
}

.profile-edit-save.saving {
    pointer-events: none;
}

.profile-edit-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.profile-edit-body {
    padding: 24px 20px 32px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

/* Special body styling for parrain modal */
.profile-edit-body:has(#profile-edit-field-parrain[style*="block"]) {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Special body styling for country modal */
.profile-edit-body:has(#profile-edit-field-country[style*="block"]) {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.profile-edit-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-edit-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.profile-edit-input,
.profile-edit-textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.profile-edit-input:focus,
.profile-edit-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.profile-edit-input:focus:not(:focus-visible),
.profile-edit-textarea:focus:not(:focus-visible) {
    outline: none;
}

.profile-edit-input:focus-visible,
.profile-edit-textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.profile-edit-input::placeholder,
.profile-edit-textarea::placeholder {
    color: var(--text-muted);
}

.profile-edit-textarea {
    resize: vertical;
    min-height: 100px;
}

.profile-edit-date {
    -webkit-appearance: none;
    appearance: none;
}

.profile-edit-date::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.profile-edit-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin: 4px 0 0;
    line-height: 1.4;
}

/* Country Search Autocomplete */
.country-field {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.country-search-container {
    position: relative;
    padding: 20px 24px;
    flex-shrink: 0;
}

.country-search-icon {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
}

.country-search-input {
    padding-left: 40px !important;
}

.country-suggestions {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 24px;
    min-height: 0;
    max-height: calc(70vh - 120px);
}

.country-suggestion-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 8px;
}

.country-suggestion-item:last-child {
    margin-bottom: 0;
}

.country-suggestion-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.country-suggestion-item.selected {
    background: rgba(var(--accent-rgb), 0.15);
    border: 2px solid var(--accent);
}

.country-suggestion-flag {
    width: 32px;
    height: 22px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.country-suggestion-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.country-suggestion-name .highlight {
    color: var(--accent);
    font-weight: 600;
}

.country-suggestions-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.country-suggestions-hint {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.country-suggestions-hint i {
    display: block;
    font-size: 24px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* =========================================
   PARRAIN AUTOCOMPLETE - REDESIGNED
   ========================================= */

/* Parrain field container */
#profile-edit-field-parrain {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
}

#profile-edit-field-parrain.parrain-field {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Hero intro section */
.parrain-intro {
    text-align: center;
    padding: 40px 28px 32px;
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.1) 0%, transparent 100%);
}

.parrain-intro-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), 0.7));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.3);
}

.parrain-intro-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.parrain-intro-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
    max-width: 320px;
    margin: 0 auto;
}

.parrain-intro-subtitle strong {
    color: var(--accent);
    font-weight: 600;
}

/* Search container with icon */
.parrain-search-container {
    position: relative;
    width: 100%;
}

.parrain-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 14px;
    pointer-events: none;
    transition: color 0.2s ease;
    z-index: 1;
}

.parrain-search-container:focus-within .parrain-search-icon {
    color: var(--accent);
}

.parrain-search-input {
    width: 100%;
    font-size: 15px;
    padding: 16px 18px 16px 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.parrain-search-input:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.parrain-search-input:focus:not(:focus-visible) {
    outline: none;
}

.parrain-search-input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.parrain-search-input::placeholder {
    color: var(--text-tertiary);
}

/* Info note at bottom */
.parrain-info-note {
    display: flex;
    gap: 14px;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.parrain-info-note i {
    color: var(--accent);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.7;
}

.parrain-info-note p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Suggestions list - full width, clean design */
.parrain-suggestions {
    background: transparent;
    margin: 0;
    padding: 0;
    flex: 1;
    min-height: 0;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    /* Hide scrollbar completely */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.parrain-suggestions::-webkit-scrollbar {
    display: none;
}

.parrain-suggestions.active {
    display: block;
}

/* Individual suggestion items */
.parrain-suggestion-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 28px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
    background: transparent;
}

.parrain-suggestion-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-left-color: rgba(var(--accent-rgb), 0.5);
}

.parrain-suggestion-item:active {
    background: rgba(var(--accent-rgb), 0.1);
    border-left-color: var(--accent);
}

.parrain-suggestion-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-tertiary);
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.15s ease;
}

.parrain-suggestion-item:hover .parrain-suggestion-avatar {
    border-color: rgba(var(--accent-rgb), 0.4);
}

.parrain-suggestion-info {
    flex: 1;
    min-width: 0;
}

.parrain-suggestion-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.parrain-suggestion-name .highlight {
    color: var(--accent);
    font-weight: 700;
    background: rgba(var(--accent-rgb), 0.15);
    padding: 1px 2px;
    border-radius: 3px;
}

.parrain-suggestion-rank {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Chevron indicator */
.parrain-suggestion-item::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.2);
    transition: all 0.15s ease;
    margin-left: auto;
}

.parrain-suggestion-item:hover::after {
    color: var(--accent);
    transform: translateX(3px);
}

/* Loading and empty states */
.parrain-suggestions-loading,
.parrain-suggestions-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.parrain-suggestions-loading i {
    display: block;
    font-size: 24px;
    margin-bottom: 12px;
    color: var(--accent);
}

.parrain-suggestions-empty {
    opacity: 0.7;
}

/* Selected parrain display */
.parrain-selected {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 2px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 14px;
    margin: 0 28px 20px;
}

.parrain-selected-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-tertiary);
    border: 3px solid var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2);
}

.parrain-selected-name {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.parrain-selected-remove {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 14px;
}

.parrain-selected-remove:hover {
    background: rgba(255, 80, 80, 0.2);
    color: #ff5050;
    transform: scale(1.1);
}

/* Responsive */
@media (min-width: 600px) {
    .profile-edit-content {
        border-radius: 20px;
        margin: auto;
        max-height: 80vh;
    }

    .profile-edit-modal {
        align-items: center;
        padding: 20px;
    }

    .profile-edit-modal[aria-hidden="false"] .profile-edit-content {
        transform: translateY(0) scale(1);
    }

    .profile-edit-content {
        transform: translateY(20px) scale(0.95);
    }

    .country-select-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===================================
   INFOS PAGE STYLES
   =================================== */

.infos-page {
    min-height: 100vh;
    padding-bottom: 120px;
}

/* Tabs pour la page infos */
.infos-tabs {
    gap: 4px;
}

.infos-tabs .page-tab {
    font-size: 13px;
    padding: 8px 12px;
}

/* Contenu principal */
.infos-content {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 800px;
    margin: 0 auto;
}

/* Info Cards */
.info-card {
    padding: 20px;
}

.info-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.info-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--accent);
    flex-shrink: 0;
}

.info-card__icon--positive {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.15));
    color: #22c55e;
}

.info-card__icon--negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.15));
    color: #ef4444;
}

.info-card__title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.info-card__body {
    color: rgba(255, 255, 255, 0.7);
}

.info-text {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.info-text:last-child {
    margin-bottom: 0;
}

.info-text--highlight {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.08));
    border-left: 3px solid var(--accent);
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
}

.info-text--highlight i {
    color: #fbbf24;
    font-size: 16px;
}

/* Info Table (XP gains) */
.info-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-table__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    font-size: 14px;
}

.info-table__row span:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-table__cell-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-table__title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-table__subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 24px;
}

.info-table__row i {
    font-size: 14px;
}

.info-table__header {
    background: rgba(255, 255, 255, 0.06);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-table__row--success {
    border-left: 3px solid #22c55e;
}

.info-table__row--success i {
    color: #22c55e;
}

.info-table__row--good {
    border-left: 3px solid #3b82f6;
}

.info-table__row--good i {
    color: #3b82f6;
}

.info-table__row--warning {
    border-left: 3px solid #f59e0b;
}

.info-table__row--warning i {
    color: #f59e0b;
}

.info-table__row--danger {
    border-left: 3px solid #ef4444;
}

.info-table__row--danger i {
    color: #ef4444;
}

.xp-value {
    font-weight: 700;
    font-size: 15px;
}

.xp-value--positive {
    color: #22c55e;
}

.xp-value--negative {
    color: #ef4444;
}

/* Bonus badge */
.info-bonus-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(34, 197, 94, 0.3);
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #22c55e;
    margin-top: 8px;
}

.info-bonus-badge i {
    font-size: 18px;
}

/* Special cases */
.info-special-cases {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-special-case {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.info-special-case__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

.info-special-case__icon--warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15));
    color: #f59e0b;
}

.info-special-case__icon--success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.15));
    color: #22c55e;
}

.info-special-case__content h4 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 6px 0;
}

.info-special-case__content p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.5;
}

/* Info Highlight Box - Pour les explications importantes */
.info-highlight-box {
    display: flex;
    gap: 16px;
    padding: 16px;
    margin-top: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
}

.info-highlight-box__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a78bfa;
    font-size: 16px;
    flex-shrink: 0;
}

.info-highlight-box__content h4 {
    font-size: 14px;
    font-weight: 600;
    color: #a78bfa;
    margin: 0 0 8px 0;
}

.info-highlight-box__content p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
}

.info-highlight-box__example {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px !important;
    padding: 10px 12px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 8px;
    border-left: 3px solid #22c55e;
}

.info-highlight-box__example i {
    color: #22c55e;
    font-size: 14px;
    margin-top: 2px;
}

.info-highlight-box__example span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.info-highlight-box__example strong {
    color: #22c55e;
}

/* ===== Tab Rangs ===== */
.ranks-table {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rank-group {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 16px;
}

.rank-group--legendary {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.rank-group__title {
    margin-bottom: 12px;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.rank-badge--debutant {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.3), rgba(75, 85, 99, 0.2));
    color: #9ca3af;
}

.rank-badge--intermediaire {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    color: #60a5fa;
}

.rank-badge--confirme {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(139, 92, 246, 0.2));
    color: #c084fc;
}

.rank-badge--expert {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(16, 185, 129, 0.2));
    color: #4ade80;
}

.rank-badge--maitre {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(220, 38, 38, 0.2));
    color: #f87171;
}

.rank-badge--legende {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.4), rgba(245, 158, 11, 0.3));
    color: #fbbf24;
}

.rank-levels {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rank-level {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.rank-level--legendary {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
}

.rank-level__name {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

.rank-level__xp {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}

.rank-level__icon {
    color: #fbbf24;
    font-size: 14px;
}

/* ===== Tab Influence ===== */
.info-example {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    padding: 16px;
}

.info-example__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-example__content p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.info-example__formula {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}

.info-example__result {
    color: #22c55e;
    font-weight: 700;
    font-size: 16px;
}

.info-example__note {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}

/* Influence table */
.influence-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.influence-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    font-size: 14px;
}

.influence-header {
    background: rgba(255, 255, 255, 0.06);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.influence-row--legendary {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.influence-rank {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
}

.influence-rank i {
    color: #fbbf24;
    font-size: 12px;
}

.rank-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rank-dot--debutant {
    background: #6b7280;
}

.rank-dot--intermediaire {
    background: #3b82f6;
}

.rank-dot--confirme {
    background: #a855f7;
}

.rank-dot--expert {
    background: #22c55e;
}

.rank-dot--maitre {
    background: #ef4444;
}

.rank-dot--legende {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.influence-points {
    font-weight: 700;
    color: var(--accent);
}

.influence-points--legendary {
    color: #fbbf24;
    font-size: 16px;
}

/* ===== Tab Énergies ===== */
.energy-action {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    margin-bottom: 12px;
}

.energy-action:last-child {
    margin-bottom: 0;
}

.energy-action--positive {
    border-left: 3px solid #22c55e;
}

.energy-action--negative {
    border-left: 3px solid #ef4444;
}

.energy-action__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.energy-action__content {
    flex: 1;
}

.energy-action__content h4 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}

.energy-action__content p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.energy-action__value {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.energy-action__value i {
    font-size: 14px;
}

.energy-action__value--positive {
    color: #22c55e;
}

.energy-action__value--negative {
    color: #ef4444;
}

/* Tip card */
.info-card--tip {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.info-card--tip .info-card__icon {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.15));
    color: #fbbf24;
}

/* Collapsible info card */
.info-card--collapsible .info-card__header--toggle {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease;
}

.info-card--collapsible .info-card__header--toggle:hover {
    opacity: 0.85;
}

.info-card--collapsible .info-card__chevron {
    margin-left: auto;
    font-size: 14px;
    color: var(--text-secondary, #999);
    transition: transform 0.3s ease;
}

.info-card--collapsible.is-collapsed .info-card__chevron {
    transform: rotate(180deg);
}

.info-card--collapsible .info-card__body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
    max-height: 500px;
    opacity: 1;
}

.info-card--collapsible.is-collapsed .info-card__body {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
}

.info-card--collapsible.is-collapsed .info-card__header {
    margin-bottom: 0;
}

.info-tip-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(251, 191, 36, 0.3);
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fbbf24;
    margin-top: 12px;
}

.info-tip-badge i {
    font-size: 16px;
}

/* ===== User Level Card (Tab Experience) ===== */
.info-card--user-level {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.25);
    padding: 24px;
}

.info-user-level {
    text-align: center;
}

.info-user-level__label-top {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-user-level__badge {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--accent), #8b5cf6);
    border-radius: 24px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.info-user-level__stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-bottom: 16px;
}

.info-user-level__xp,
.info-user-level__next {
    text-align: center;
}

.info-user-level__current,
.info-user-level__target {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.info-user-level__label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-user-level__separator {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
}

.info-user-level__progress {
    max-width: 300px;
    margin: 0 auto;
}

.info-user-level__bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.info-user-level__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #8b5cf6);
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* ===== User Influence Card (Tab Influence) ===== */
.info-card--user-influence {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(16, 185, 129, 0.08));
    border: 1px solid rgba(34, 197, 94, 0.25);
    padding: 24px;
}

.info-user-influence {
    text-align: center;
}

.info-user-influence__value {
    font-size: 48px;
    font-weight: 800;
    color: #22c55e;
    line-height: 1;
    margin-bottom: 4px;
    text-shadow: 0 2px 20px rgba(34, 197, 94, 0.4);
}

.info-user-influence__label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

.info-user-influence__rank {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.info-user-influence__rank span {
    color: #22c55e;
    font-weight: 600;
}

/* ===== User Energy Card (Tab Energies) ===== */
.info-card--user-energy {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(245, 158, 11, 0.08));
    border: 1px solid rgba(251, 191, 36, 0.25);
    padding: 24px;
}

.info-user-energy {
    text-align: center;
}

.info-user-energy__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fbbf24;
}

.info-user-energy__value {
    font-size: 42px;
    font-weight: 800;
    color: #fbbf24;
    line-height: 1;
    margin-bottom: 4px;
    text-shadow: 0 2px 20px rgba(251, 191, 36, 0.4);
}

.info-user-energy__label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .infos-tabs .page-tab {
        font-size: 12px;
        padding: 6px 10px;
    }

    .info-card {
        padding: 16px;
    }

    .info-card__header {
        gap: 10px;
        margin-bottom: 12px;
    }

    .info-card__icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .info-card__title {
        font-size: 15px;
    }

    .info-table__row {
        padding: 10px 12px;
        font-size: 13px;
        flex-wrap: wrap;
        gap: 4px;
    }

    .info-table__row span:first-child {
        flex: 1 0 100%;
    }

    .xp-value {
        font-size: 14px;
    }

    .info-example__formula {
        font-size: 11px;
        overflow-x: auto;
    }

    .energy-action {
        padding: 12px;
        gap: 12px;
    }

    .energy-action__icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .energy-action__value {
        font-size: 16px;
    }

    .info-user-level__stats {
        gap: 16px;
    }

    .info-user-level__current,
    .info-user-level__target {
        font-size: 20px;
    }

    .info-user-influence__value {
        font-size: 36px;
    }

    .info-user-energy__value {
        font-size: 32px;
    }

    .info-user-energy__icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}


/* ===================================
   GRADING SCALE (Tab Échelle)
   =================================== */

.grade-scale {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.grade-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.grade-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(4px);
    border-color: rgba(255, 255, 255, 0.15);
}

.grade-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.grade-item__score {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.grade-item__number {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grade-item__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 6px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1a1a2e;
}

.grade-item__state {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
}

.grade-item__state i {
    font-size: 14px;
    opacity: 0.9;
}

.grade-item__body {
    padding: 16px 20px 20px;
}

.grade-item__body > p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 12px;
    line-height: 1.5;
}

.grade-item__details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.grade-item__details li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

.grade-item__details li i {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    margin-top: 2px;
    font-size: 12px;
    opacity: 0.7;
}

/* Grade Item Color Variants */
.grade-item--gold {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(245, 158, 11, 0.08) 100%);
    border-color: rgba(251, 191, 36, 0.3);
}

.grade-item--gold .grade-item__number {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grade-item--gold .grade-item__state {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.grade-item--gold:hover {
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.15);
}

/* 10 Gem Mint - Vert émeraude brillant */
.grade-item--gem {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.08) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

.grade-item--gem .grade-item__number {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grade-item--gem .grade-item__state {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.grade-item--gem:hover {
    border-color: rgba(16, 185, 129, 0.5);
}

/* 9 Mint - Vert clair */
.grade-item--mint {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1) 0%, rgba(34, 197, 94, 0.06) 100%);
    border-color: rgba(74, 222, 128, 0.25);
}

.grade-item--mint .grade-item__number {
    background: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grade-item--mint .grade-item__state {
    background: rgba(74, 222, 128, 0.15);
    color: #86efac;
}

.grade-item--mint:hover {
    border-color: rgba(74, 222, 128, 0.4);
}

/* 8 NM-Mint - Vert-jaune lime */
.grade-item--nm-mint {
    background: linear-gradient(135deg, rgba(163, 230, 53, 0.1) 0%, rgba(132, 204, 22, 0.06) 100%);
    border-color: rgba(163, 230, 53, 0.2);
}

.grade-item--nm-mint .grade-item__number {
    background: linear-gradient(135deg, #bef264 0%, #a3e635 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grade-item--nm-mint .grade-item__state {
    background: rgba(163, 230, 53, 0.15);
    color: #bef264;
}

.grade-item--nm-mint:hover {
    border-color: rgba(163, 230, 53, 0.35);
}

/* 7 Near Mint - Jaune-vert */
.grade-item--near-mint {
    background: linear-gradient(135deg, rgba(202, 214, 49, 0.1) 0%, rgba(161, 176, 20, 0.06) 100%);
    border-color: rgba(202, 214, 49, 0.2);
}

.grade-item--near-mint .grade-item__number {
    background: linear-gradient(135deg, #d9f349 0%, #c6d931 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grade-item--near-mint .grade-item__state {
    background: rgba(202, 214, 49, 0.15);
    color: #d9f349;
}

.grade-item--near-mint:hover {
    border-color: rgba(202, 214, 49, 0.35);
}

/* 6 EX-NM - Jaune */
.grade-item--ex-nm {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.1) 0%, rgba(234, 179, 8, 0.06) 100%);
    border-color: rgba(250, 204, 21, 0.2);
}

.grade-item--ex-nm .grade-item__number {
    background: linear-gradient(135deg, #fde047 0%, #facc15 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grade-item--ex-nm .grade-item__state {
    background: rgba(250, 204, 21, 0.15);
    color: #fde047;
}

.grade-item--ex-nm:hover {
    border-color: rgba(250, 204, 21, 0.35);
}

/* 5 Excellent - Jaune-orange / Ambre */
.grade-item--ex {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.06) 100%);
    border-color: rgba(245, 158, 11, 0.2);
}

.grade-item--ex .grade-item__number {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grade-item--ex .grade-item__state {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.grade-item--ex:hover {
    border-color: rgba(245, 158, 11, 0.35);
}

/* 4 Good - Orange */
.grade-item--good {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.06) 100%);
    border-color: rgba(249, 115, 22, 0.2);
}

.grade-item--good .grade-item__number {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grade-item--good .grade-item__state {
    background: rgba(249, 115, 22, 0.15);
    color: #fb923c;
}

.grade-item--good:hover {
    border-color: rgba(249, 115, 22, 0.35);
}

/* 3 Fair - Rouge-orange */
.grade-item--fair {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.1) 0%, rgba(220, 38, 38, 0.06) 100%);
    border-color: rgba(234, 88, 12, 0.2);
}

.grade-item--fair .grade-item__number {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grade-item--fair .grade-item__state {
    background: rgba(234, 88, 12, 0.15);
    color: #f97316;
}

.grade-item--fair:hover {
    border-color: rgba(234, 88, 12, 0.35);
}

/* 2 Poor-Fair - Rouge */
.grade-item--poor-fair {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.06) 100%);
    border-color: rgba(239, 68, 68, 0.2);
}

.grade-item--poor-fair .grade-item__number {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grade-item--poor-fair .grade-item__state {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.grade-item--poor-fair:hover {
    border-color: rgba(239, 68, 68, 0.35);
}

/* 1 Poor - Rouge foncé */
.grade-item--poor {
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.12) 0%, rgba(153, 27, 27, 0.08) 100%);
    border-color: rgba(185, 28, 28, 0.25);
}

.grade-item--poor .grade-item__number {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grade-item--poor .grade-item__state {
    background: rgba(185, 28, 28, 0.18);
    color: #ef4444;
}

.grade-item--poor:hover {
    border-color: rgba(185, 28, 28, 0.4);
}

/* Grading Tips Section */
.grading-tips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.grading-tip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.grading-tip:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-2px);
}

.grading-tip__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.grading-tip__icon--excellent {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.1));
    color: #4ade80;
}

.grading-tip__icon--good {
    background: linear-gradient(135deg, rgba(202, 214, 49, 0.2), rgba(163, 230, 53, 0.1));
    color: #d9f349;
}

.grading-tip__icon--fair {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(234, 88, 12, 0.1));
    color: #fb923c;
}

.grading-tip__icon--poor {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
    color: #f87171;
}

.grading-tip__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.grading-tip__range {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.grading-tip__desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.3;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .grade-item__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }

    .grade-item__number {
        font-size: 28px;
    }

    .grade-item__state {
        padding: 6px 12px;
        font-size: 13px;
    }

    .grade-item__body {
        padding: 14px 16px 18px;
    }

    .grade-item__details li {
        font-size: 12px;
    }

    .grading-tips {
        grid-template-columns: 1fr;
    }

    .grading-tip {
        padding: 12px 14px;
    }

    .grading-tip__icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .grading-tip__range {
        font-size: 14px;
    }

    .grading-tip__desc {
        font-size: 11px;
    }
}


/* ===================================
   REMOTE GRADING - ENHANCED UX (V2)
   =================================== */

/* Defect Marker Animations */
@keyframes defect-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 15px currentColor;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

.defect-marker {
    animation: defect-pulse 2s infinite ease-in-out;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.defect-marker:hover {
    transform: scale(1.5) !important;
    z-index: 10;
}



.grading-loupe.active {
    display: block;
}

.grading-loupe video {
    position: absolute;
    transform-origin: top left;
}

/* Reflection / Gloss effect on loupe */
.grading-loupe::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    pointer-events: none;
}

/* =============================================
   ACADEMY ONBOARDING - Phase d'entraînement
   Design épuré et moderne pour nouveaux noteurs
   ============================================= */

.academy-onboarding-view {
    position: relative;
    width: 100%;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    z-index: 10;
}

.academy-hero {
    max-width: 560px;
    width: 100%;
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    background: linear-gradient(165deg, rgba(18, 18, 22, 0.98) 0%, rgba(8, 8, 12, 0.99) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 24px !important;
    position: relative;
    overflow: hidden;
}

/* Subtle accent line at top */
.academy-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--neon-primary), transparent);
    border-radius: 0 0 4px 4px;
}

.academy-badge-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.academy-tag {
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(74, 222, 128, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

.academy-tag i {
    font-size: 14px;
}

.academy-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    text-align: center;
    color: #fff;
    letter-spacing: -0.02em;
}

.academy-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    max-width: 440px;
    line-height: 1.6;
    margin: 0;
}

/* Progress Zone - Clean and prominent */
.academy-progress-zone {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.academy-progress-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.academy-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

/* Shine effect on progress bar */
.academy-progress-bar .progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), transparent);
    border-radius: 10px 10px 0 0;
}

.academy-progress-label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

/* Action Zone */
.academy-action-zone {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.btn-academy-start {
    position: relative;
    padding: 16px 40px;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    color: #000 !important;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(74, 222, 128, 0.25);
    width: 100%;
    max-width: 280px;
}

.btn-academy-start .btn-glow {
    display: none;
}

.btn-academy-start i {
    font-size: 16px;
}

.btn-academy-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(74, 222, 128, 0.35);
}

.btn-academy-start:active {
    transform: translateY(0);
}

.btn-academy-claim {
    padding: 16px 40px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #000 !important;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25);
    width: 100%;
    max-width: 280px;
}

.btn-academy-claim:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(245, 158, 11, 0.35);
}

/* Benefits Cards - Horizontal layout */
.academy-benefits {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: var(--space-2);
}

.benefit-card {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.2s ease;
}

.benefit-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.benefit-card i {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.5);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.benefit-card h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.benefit-card p {
    margin: 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .academy-hero {
        padding: var(--space-6) var(--space-4);
        border-radius: 20px !important;
    }

    .academy-title {
        font-size: 24px;
    }

    .academy-subtitle {
        font-size: 14px;
    }

    .academy-benefits {
        flex-direction: column;
        gap: 8px;
    }

    .benefit-card {
        flex-direction: row;
        text-align: left;
        padding: 12px 16px;
        gap: 12px;
    }

    .benefit-card i {
        width: 36px;
        height: 36px;
        font-size: 16px;
        flex-shrink: 0;
    }

    .benefit-card > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
}

/* =============================================
   Academy Training Stats
   Stats block shown during training phase
   ============================================= */

.academy-stats {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 16px 20px;
    margin-top: var(--space-2);
}

.academy-stats__header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.academy-stats__header i {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.academy-stats__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.academy-stats__separator {
    width: 1px;
    height: 40px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.2) 20%,
        rgba(255, 255, 255, 0.2) 80%,
        transparent
    );
    flex-shrink: 0;
}

.academy-stats__breakdown {
    display: flex;
    gap: 6px;
}

.academy-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.2s ease;
}

/* All stats same width */
.academy-stat {
    width: 64px;
    padding: 10px 8px;
}

.academy-stat--main .academy-stat__value {
    font-size: 20px;
}

.academy-stat:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.academy-stat__value {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #999;
    transition: color 0.3s ease;
}

.academy-stat__label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Color coding for each stat type */
.academy-stat--precision .academy-stat__value {
    color: #4ade80; /* Green for precision */
}

.academy-stat--concord .academy-stat__value {
    color: #00B84A; /* Perfect match green */
}

.academy-stat--diff1 .academy-stat__value {
    color: #9ACD32; /* Yellow-green for close */
}

.academy-stat--diff2 .academy-stat__value {
    color: #FFA500; /* Orange for 2pts */
}

.academy-stat--diff3 .academy-stat__value {
    color: #FF4444; /* Red for far off */
}

/* Zero values are muted */
.academy-stat__value[data-value="0"],
.academy-stat__value:empty {
    color: rgba(255, 255, 255, 0.2) !important;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .academy-stats {
        padding: 14px 16px;
    }

    .academy-stats__content {
        flex-direction: column;
        gap: 12px;
    }

    .academy-stats__separator {
        width: 80%;
        height: 1px;
        background: linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, 0.15) 20%,
            rgba(255, 255, 255, 0.15) 80%,
            transparent
        );
    }

    .academy-stat--main {
        min-width: unset;
        width: 100%;
    }

    .academy-stats__breakdown {
        width: 100%;
        gap: 6px;
    }

    .academy-stat {
        padding: 10px 4px;
    }

    .academy-stat__value {
        font-size: 16px;
    }

    .academy-stat__label {
        font-size: 9px;
    }

    .academy-stat--main .academy-stat__value {
        font-size: 24px;
    }
}

@media (max-width: 400px) {
    .academy-stats__breakdown {
        flex-wrap: wrap;
    }

    .academy-stats__breakdown .academy-stat {
        flex: 1 1 45%;
    }
}

/* ===================================
   RATING REPORT MODAL (Bilan Entrainement)
   Refonte 2026 - Premium UX with Animations
   =================================== */
.rating-report-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.rating-report-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.report-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(16px);
}

.report-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - 32px);
    overflow: visible;
    background: linear-gradient(180deg, rgba(22, 22, 28, 0.98) 0%, rgba(12, 12, 12, 1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: reportSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

@keyframes reportSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Particles background */
.report-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 24px;
    pointer-events: none;
}

.report-particles::before,
.report-particles::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: particleFloat 8s ease-in-out infinite;
}

.report-particles::before {
    background: var(--neon-primary);
    top: -100px;
    left: -50px;
    animation-delay: 0s;
}

.report-particles::after {
    background: #8B5CF6;
    bottom: -100px;
    right: -50px;
    animation-delay: -4s;
}

@keyframes particleFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    50% { transform: translate(20px, 20px) scale(1.1); opacity: 0.5; }
}

/* Header */
.report-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

.report-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
}

.report-close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--text-tertiary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.report-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: scale(1.05);
}

/* Hero Section - Precision Ring */
.report-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 1;
    animation: reportFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes reportFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.report-hero__ring {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.3), 0 0 60px rgba(34, 197, 94, 0.15);
}

.report-hero__ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.report-hero__track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 8;
}

.report-hero__progress {
    fill: none;
    stroke: var(--neon-primary);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 264;
    stroke-dashoffset: 264;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.report-hero__value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 50%;
}

.report-hero__number {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.report-hero__unit {
    font-size: 20px;
    font-weight: 700;
    color: var(--neon-primary);
    margin-top: 8px;
}

.report-hero__label {
    font-size: 12px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* Stats Breakdown - Single Row */
.report-breakdown {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    z-index: 1;
    animation: reportFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.report-breakdown__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.report-breakdown__value {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.report-breakdown__label {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.report-breakdown__sep {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    margin: 0 8px;
}

/* Breakdown colors */
.report-breakdown__item--concord .report-breakdown__value { color: #22C55E; }
.report-breakdown__item--diff1 .report-breakdown__value { color: #9ACD32; }
.report-breakdown__item--diff2 .report-breakdown__value { color: #FFA500; }
.report-breakdown__item--diff3 .report-breakdown__value { color: #FF6B6B; }

/* XP Section with animated bar */
.report-xp {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(139, 92, 246, 0.04) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    z-index: 1;
    animation: reportFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.report-xp__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.report-xp__label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.report-xp__value {
    font-size: 24px;
    font-weight: 800;
    color: #A78BFA;
    text-shadow: 0 0 24px rgba(139, 92, 246, 0.5);
    font-variant-numeric: tabular-nums;
}

.report-xp__bar {
    position: relative;
    height: 8px;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 4px;
    overflow: hidden;
}

.report-xp__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #8B5CF6 0%, #A78BFA 50%, #C4B5FD 100%);
    border-radius: 4px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
}

.report-xp__glow {
    position: absolute;
    left: 0;
    top: -4px;
    height: 16px;
    width: 0%;
    background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.6) 50%, transparent 100%);
    filter: blur(8px);
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
    pointer-events: none;
}

/* Rank Section */
.report-rank {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.02) 100%);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 16px;
    text-align: center;
    z-index: 1;
    animation: reportFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.report-rank__badge {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.report-rank__name {
    font-size: 28px;
    font-weight: 800;
    color: var(--neon-primary);
    text-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
    letter-spacing: -0.02em;
    animation: rankPulse 2s ease-in-out infinite;
}

@keyframes rankPulse {
    0%, 100% { text-shadow: 0 0 30px rgba(34, 197, 94, 0.4); }
    50% { text-shadow: 0 0 40px rgba(34, 197, 94, 0.7), 0 0 60px rgba(34, 197, 94, 0.3); }
}

/* Actions */
.report-actions {
    position: relative;
    z-index: 1;
    animation: reportFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

.btn-report-continue {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, var(--neon-primary) 0%, #4ADE80 100%);
    color: #000;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.25);
}

.btn-report-continue:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(34, 197, 94, 0.35);
}

.btn-report-continue:active {
    transform: translateY(-1px);
}

/* Onboarding View Styles */
#onboarding-view {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-6);
    background: radial-gradient(circle at 20% 20%, rgba(34, 197, 94, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 40%);
}

.onboarding-container {
    max-width: 500px;
    width: 100%;
    padding: var(--space-10);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* ===================================
   ONBOARDING STEPPER 2026
   =================================== */

#onboarding-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    /* Hidden by default, shown via JS */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

#onboarding-view.active {
    display: flex;
}

.onboarding-container {
    width: 100%;
    max-width: 420px;
    padding: var(--space-8);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    position: relative;
}

/* Stepper Progress Bar */
.onboarding-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.onboarding-progress-fill {
    height: 100%;
    background: var(--accent-mint);
    /* Touche de mint (5%) sur la barre */
    box-shadow: 0 0 10px var(--neon-primary-glow);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.onboarding-steps {
    position: relative;
    min-height: 380px;
}

.onboarding-step {
    display: none;
    flex-direction: column;
    gap: var(--space-6);
    animation: fadeIn 0.3s ease;
}

.onboarding-step.active {
    display: flex;
}

.onboarding-header {
    margin-bottom: var(--space-4);
}

.onboarding-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-tertiary);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
}

.onboarding-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.onboarding-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
}

.onboarding-field {
    text-align: left;
}

.onboarding-field input:not(.parrain-search-input),
.onboarding-field textarea {
    width: 100%;
    padding: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    transition: all 0.2s ease;
}

.onboarding-field input:not(.parrain-search-input):focus,
.onboarding-field textarea:focus {
    border-color: var(--accent-mint);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(35, 214, 180, 0.1);
}

.onboarding-field input:not(.parrain-search-input):focus:not(:focus-visible),
.onboarding-field textarea:focus:not(:focus-visible) {
    outline: none;
}

.onboarding-field input:not(.parrain-search-input):focus-visible,
.onboarding-field textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Validation Rules List */
.onboarding-info-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.info-item {
    font-size: 13px;
    color: var(--text-tertiary);
    display: none;
    /* Hidden by default */
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.info-item i {
    font-size: 12px;
}

.info-item.success {
    display: none;
    /* Still hidden if success */
}

.info-item.error,
.info-item.loading {
    display: flex;
    /* Show only if error or loading */
}

/* Optional: Show info-item if it's the initial state and we want to guide the user? 
   No, the user said "only if NOT respected", so we keep it hidden until a rule is broken.
*/

.info-item.error {
    color: #ff4444;
}

.info-item.loading i {
    animation: fa-spin 2s linear infinite;
}

.onboarding-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

/* WHITE CTA (15% Distribution) */
.btn-onboarding-next,
.btn-onboarding-submit {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: none;
    padding: 18px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn-onboarding-next:hover,
.btn-onboarding-submit:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
}

.btn-onboarding-next:disabled {
    background: rgba(255, 255, 255, 0.3) !important;
    color: rgba(0, 0, 0, 0.5) !important;
    cursor: not-allowed;
    transform: none;
}

.btn.ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-tertiary);
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn.ghost:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
}

/* Suggestions redesign */
.country-suggestions,
.parrain-suggestions {
    background: #080808;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    margin-top: 8px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

.country-suggestions.active,
.parrain-suggestions.active {
    display: block;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.suggestion-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.parrain-selected {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 255, 163, 0.05);
    border: 1px solid rgba(0, 255, 163, 0.2);
    padding: 12px;
    border-radius: 12px;
    margin-top: 12px;
}

.parrain-selected-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.parrain-selected-name {
    flex: 1;
    font-weight: 600;
    color: var(--accent-mint);
}

.parrain-selected-remove {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
}

.parrain-selected-remove:hover {
    color: #ff4444;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================================
   AVATAR CROP MODAL
   ========================================== */

.avatar-crop-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.avatar-crop-modal.active {
    opacity: 1;
    visibility: visible;
}

.avatar-crop-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.avatar-crop-content {
    position: relative;
    width: 90%;
    max-width: 420px;
    background: var(--bg-elevated);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s var(--ease-out-expo);
}

.avatar-crop-modal.active .avatar-crop-content {
    transform: scale(1) translateY(0);
}

.avatar-crop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.avatar-crop-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.avatar-crop-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.avatar-crop-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.avatar-crop-body {
    padding: 24px;
    min-height: 300px;
}

/* Drop Zone */
.avatar-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.avatar-drop-zone:hover,
.avatar-drop-zone.dragover {
    background: rgba(34, 197, 94, 0.05);
    border-color: var(--accent);
}

.avatar-drop-zone i {
    font-size: 48px;
    color: var(--text-tertiary);
    transition: color 0.3s ease;
}

.avatar-drop-zone:hover i,
.avatar-drop-zone.dragover i {
    color: var(--accent);
}

.avatar-drop-zone p {
    margin: 0;
    font-size: 16px;
    color: var(--text-secondary);
}

.avatar-drop-zone span {
    font-size: 13px;
    color: var(--text-tertiary);
}

.btn-select-file {
    padding: 10px 20px;
    background: var(--accent);
    color: #000;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-select-file:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

/* Crop Area */
.avatar-crop-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.avatar-crop-area {
    position: relative;
    width: 280px;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    cursor: grab;
    touch-action: none;
}

.avatar-crop-area:active {
    cursor: grabbing;
}

#avatar-crop-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
}

.avatar-crop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.avatar-crop-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

/* Zoom Slider */
.avatar-crop-zoom {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 280px;
}

.avatar-crop-zoom i {
    color: var(--text-tertiary);
    font-size: 14px;
}

.avatar-crop-zoom input[type="range"] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.avatar-crop-zoom input[type="range"]:focus:not(:focus-visible) {
    outline: none;
}

.avatar-crop-zoom input[type="range"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.avatar-crop-zoom input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.avatar-crop-zoom input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.avatar-crop-zoom input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

/* Uploading State */
.avatar-uploading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
}

.avatar-uploading i {
    font-size: 48px;
    color: var(--accent);
}

.avatar-uploading p {
    margin: 0;
    font-size: 16px;
    color: var(--text-secondary);
}

/* Footer */
.avatar-crop-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.avatar-crop-footer .btn-secondary {
    padding: 10px 20px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.avatar-crop-footer .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.avatar-crop-footer .btn-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--accent);
    color: #000;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.avatar-crop-footer .btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

.avatar-crop-footer .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =========================================
   GRADING TUTORIAL OVERLAY
   Interactive onboarding for new raters
   ========================================= */

/* ==========================================
   GRADING TUTORIAL - Dark Mode Pro Design
   ========================================== */
.grading-tutorial {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: all;
}

.tutorial-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: all;
}

.tutorial-spotlight {
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.92);
    background: transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: all;
    z-index: 1;
    cursor: not-allowed;
}

.tutorial-spotlight-blocker {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: background 0.2s ease;
}

.tutorial-spotlight-blocker.show-hint {
    background: rgba(0, 0, 0, 0.7);
}

.tutorial-spotlight-blocker.show-hint::after {
    content: 'Termine le tutoriel pour interagir';
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    animation: hint-appear 0.2s ease;
}

@keyframes hint-appear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.tutorial-spotlight::before {
    content: '';
    position: absolute;
    inset: -3px;
    border: 2px solid var(--accent-mint, #00FFA3);
    border-radius: 15px;
    animation: tutorial-glow 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes tutorial-glow {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(0, 255, 163, 0.3);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 30px rgba(0, 255, 163, 0.5);
    }
}

.tutorial-bubble {
    position: absolute;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    z-index: 2;
    pointer-events: all;
    animation: tutorial-bubble-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tutorial-bubble-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.tutorial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.tutorial-badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-mint, #00FFA3);
    background: rgba(0, 255, 163, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
}

.tutorial-step-indicator {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.tutorial-step-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.tutorial-step-dot.active {
    background: var(--accent-mint, #00FFA3);
    width: 20px;
    border-radius: 3px;
}

.tutorial-step-dot.completed {
    background: var(--accent-mint, #00FFA3);
    opacity: 0.4;
}

.tutorial-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.tutorial-icon i {
    font-size: 40px;
    color: #fff;
}

.tutorial-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
}

.tutorial-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.tutorial-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
}

.tutorial-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.tutorial-tip i {
    font-size: 10px;
    opacity: 0.7;
}

.tutorial-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.tutorial-prev {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.tutorial-prev:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.tutorial-skip {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
    cursor: pointer;
    padding: 10px 16px;
    transition: color 0.2s;
    flex-shrink: 0;
}

.tutorial-skip:hover {
    color: rgba(255, 255, 255, 0.6);
}

.tutorial-next {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 12px 20px;
    background: #fff;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tutorial-next:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

.tutorial-next i {
    font-size: 12px;
    transition: transform 0.2s;
}

.tutorial-next:hover i {
    transform: translateX(3px);
}

.tutorial-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.tutorial-progress-bar {
    height: 100%;
    background: var(--accent-mint, #00FFA3);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* Bubble arrow/pointer */
.tutorial-bubble::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transform: rotate(45deg);
    z-index: -1;
}

.tutorial-bubble.arrow-left::before {
    left: -9px;
    top: 50%;
    margin-top: -8px;
    border-right: none;
    border-top: none;
}

.tutorial-bubble.arrow-right::before {
    right: -9px;
    top: 50%;
    margin-top: -8px;
    border-left: none;
    border-bottom: none;
}

.tutorial-bubble.arrow-top::before {
    top: -9px;
    left: 50%;
    margin-left: -8px;
    border-bottom: none;
    border-right: none;
}

.tutorial-bubble.arrow-bottom::before {
    bottom: -9px;
    left: 50%;
    margin-left: -8px;
    border-top: none;
    border-left: none;
}

/* Final step styling */
.tutorial-bubble.final-step .tutorial-icon i {
    color: var(--accent-mint, #00FFA3);
}

.tutorial-next.finish-btn {
    background: var(--accent-mint, #00FFA3);
    color: #000;
}

.tutorial-next.finish-btn:hover {
    background: #00e693;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .tutorial-bubble {
        width: calc(100vw - 24px);
        left: 12px !important;
        right: 12px !important;
        padding: 20px;
    }

    .tutorial-bubble::before {
        display: none;
    }

    .tutorial-tips {
        flex-direction: column;
        align-items: center;
    }

    .tutorial-title {
        font-size: 17px;
    }

    .tutorial-text {
        font-size: 13px;
    }

    .tutorial-icon i {
        font-size: 36px;
    }
}

/* =========================================
   GRADE CONFIRMATION MODAL
   Custom modal to replace native confirm()
   ========================================= */
.grade-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.grade-confirm-modal.active {
    display: flex;
}

.grade-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.grade-confirm-content {
    position: relative;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
    max-width: 420px;
    width: calc(100% - 32px);
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    animation: gradeConfirmIn 0.25s ease-out;
}

@keyframes gradeConfirmIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.grade-confirm-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(251, 191, 36, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.grade-confirm-icon i {
    font-size: 28px;
    color: #fbbf24;
}

.grade-confirm-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.grade-confirm-message {
    margin: 0 0 28px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.grade-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.grade-confirm-btn {
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.grade-confirm-cancel {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.grade-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
}

.grade-confirm-proceed {
    background: #fbbf24;
    color: #000;
}

.grade-confirm-proceed:hover {
    background: #f59e0b;
}

@media (max-width: 480px) {
    .grade-confirm-content {
        padding: 24px 20px;
    }

    .grade-confirm-actions {
        flex-direction: column;
    }

    .grade-confirm-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===================================
   VIRTUAL SCROLLING
   =================================== */

.vs-spacer {
    flex-shrink: 0;
    width: 100%;
    pointer-events: none;
}

.vs-items-container {
    display: grid;
    gap: 16px;
    width: 100%;
}

.vs-item {
    contain: layout style paint;
    will-change: transform;
}

/* Ensure smooth scrolling in virtual containers */
.vs-container {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Virtual scroll enabled indicator (debug mode) */
.vs-enabled::after {
    content: 'VS';
    position: fixed;
    bottom: 80px;
    right: 16px;
    background: var(--accent);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 9999;
    display: none; /* Hidden by default, enable for debug */
}

/* ===================================
   MOBILE RESPONSIVE OVERRIDES
   Only affects mobile, doesn't touch desktop
   =================================== */

@media (max-width: 768px) {
    /* Main containers - reduce horizontal padding from 96px to 16px */
    .dashboard-container {
        padding: 16px 16px 120px;
    }

    .page-header {
        padding: 16px 16px 16px 16px;
        min-height: auto;
    }

    .page-header.is-scrolled:not(.page-header--card-detail) {
        padding: 12px 16px;
    }

    .page-header::after {
        right: 16px;
        font-size: 48px;
    }

    .page-container {
        padding: 16px 16px;
    }

    /* Top app bar */
    .top-app-bar-content {
        padding: 0 16px;
    }

    /* Gallery stats - remove right padding */
    .gallery-stats {
        padding-right: 0;
    }

    /* Tab content - remove right padding */
    .noter-page .tab-content {
        padding-right: 0;
    }

    .account-page #tab-stats,
    .account-page #tab-infos {
        padding-right: 0;
    }

    /* Missions panels */
    .missions-panels {
        padding: 16px 16px;
    }

    /* Section titles: smaller on mobile (16px instead of 20px) */
    .section-title-group h3 {
        font-size: 16px;
    }

    /* Hide/show elements on mobile */
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    /* Leaderboard section button: icon only on mobile */
    #section-leaderboard .btn-section-more .btn-text-full,
    #section-leaderboard .btn-section-more .btn-text-short,
    #section-leaderboard .btn-section-more .btn-icon-arrow {
        display: none;
    }

    #section-leaderboard .btn-section-more .btn-icon-plus {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    #section-leaderboard .btn-section-more {
        display: flex;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
        max-width: 32px;
        min-height: 32px !important;
        max-height: 32px;
        padding: 0 !important;
        border-radius: 8px;
        justify-content: center;
        align-items: center;
        gap: 0;
        box-sizing: border-box;
    }

    #section-leaderboard .btn-section-more:hover .btn-icon-plus {
        transform: none;
    }

    #section-leaderboard .section-subtitle {
        margin-top: 0;
    }

    /* Gifts preview: bouton flèche compact 32x32 comme leaderboard */
    #section-gifts-preview .btn-section-more {
        display: flex;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
        max-width: 32px;
        min-height: 32px !important;
        max-height: 32px;
        padding: 0 !important;
        border-radius: 8px;
        justify-content: center;
        align-items: center;
        gap: 0;
        box-sizing: border-box;
    }

    #section-gifts-preview .btn-section-more .btn-icon-arrow {
        display: none;
    }

    #section-gifts-preview .btn-section-more .btn-icon-plus {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    #section-gifts-preview .btn-section-more:hover i {
        transform: none;
    }

    /* Cards carousels: taille réduite en mobile */
    .hscroll-card {
        width: 100px;
    }

    /* Cartes à noter & Évaluations terminées: bouton + compact */
    #section-cards-to-rate .btn-section-more,
    #section-rated-cards .btn-section-more {
        display: flex;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
        max-width: 32px;
        min-height: 32px !important;
        max-height: 32px;
        padding: 0 !important;
        border-radius: 8px;
        justify-content: center;
        align-items: center;
        gap: 0;
        box-sizing: border-box;
    }

    #section-cards-to-rate .btn-section-more .btn-text-full,
    #section-rated-cards .btn-section-more .btn-text-full,
    #section-cards-to-rate .btn-section-more .btn-icon-arrow,
    #section-rated-cards .btn-section-more .btn-icon-arrow {
        display: none;
    }

    #section-cards-to-rate .btn-section-more .btn-icon-plus,
    #section-rated-cards .btn-section-more .btn-icon-plus {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    #section-cards-to-rate .btn-section-more:hover i,
    #section-rated-cards .btn-section-more:hover i {
        transform: none;
    }

    /* Leaderboard list: single column with fixed height on mobile */
    .scroll-container--leaderboard .leaderboard-list {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
        gap: 4px;
        max-height: 240px;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 0;
        padding-right: 0;
        -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
    }

    /* Leaderboard gradient: hide right gradient on mobile */
    .scroll-container--leaderboard::after {
        display: none !important;
    }

    /* Hide horizontal scroll controls for leaderboard on mobile */
    #section-leaderboard .scroll-controls {
        display: none;
    }

    /* Leaderboard cards: compact on mobile */
    .lb-card {
        grid-template-columns: 28px 1fr auto;
        gap: 8px;
        padding: 8px 10px;
    }

    .lb-card__rank {
        width: 28px;
        height: 28px;
        font-size: 12px;
        border-radius: 6px;
    }

    .lb-card__avatar {
        width: 28px;
        height: 28px;
    }

    .lb-card__user {
        gap: 8px;
    }

    .lb-card__name {
        font-size: 13px;
    }

    .lb-card__stats {
        min-width: 60px;
    }

    .lb-card__points {
        font-size: 11px;
    }

    .lb-card__cards {
        font-size: 10px;
    }

    /* Badges compacts - déjà stylés dans la media query principale */

    /* ===================================
       MES CARTES - Mobile Optimization
       Style Apple-like, clean & compact
       =================================== */

    /* Header compact - désactiver sticky sur mobile */
    #my-cards-view .page-header {
        padding: 16px 16px 8px;
        position: relative;
        top: auto;
    }

    #my-cards-view .page-header__title {
        font-size: 24px;
        margin-bottom: 4px;
    }

    /* Cacher le sous-titre verbeux en mobile */
    #my-cards-view .page-header__subtitle {
        display: none;
    }

    /* Filters row: flex wrap avec gap minimal */
    #my-cards-view .filters-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 0 12px;
        align-items: center;
    }

    /* Cacher filter-chips vide */
    #my-cards-view .filter-chips {
        display: none;
    }

    /* Search: pleine largeur sur sa propre ligne */
    #my-cards-view .search-input {
        flex: 0 0 100%;
        max-width: none;
        width: 100%;
        padding: 10px 14px;
        font-size: 14px;
        order: 1;
    }

    /* Ligne 2: tous les contrôles sur une seule ligne */
    #my-cards-view .size-select {
        flex-shrink: 0;
        gap: 0;
        font-size: 12px;
        order: 2;
    }

    #my-cards-view .size-select span {
        display: none;
    }

    #my-cards-view .size-select select {
        padding: 4px 5px;
        font-size: 10px;
        min-width: 60px;
    }

    /* Toggle Infos: très compact */
    #my-cards-view .toggle-inline {
        font-size: 10px;
        gap: 2px;
        order: 3;
        flex-shrink: 0;
    }

    #my-cards-view .toggle-inline input {
        width: 12px;
        height: 12px;
    }

    /* Visibility toggle: compact icon button */
    #my-cards-view .collection-visibility-toggle {
        margin-left: auto;
        order: 4;
        flex-shrink: 0;
        height: 24px;
    }

    #my-cards-view .visibility-toggle-wrapper {
        display: flex;
        height: 24px;
    }

    #my-cards-view .visibility-toggle {
        padding: 0;
        gap: 0;
        width: 24px;
        height: 24px;
        min-width: 24px;
        border-radius: 6px;
        background: var(--bg-elevated);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #my-cards-view .visibility-toggle-track {
        width: 24px;
        height: 24px;
        background: transparent;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #my-cards-view .visibility-toggle-thumb {
        width: 24px;
        height: 24px;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        box-shadow: none;
    }

    #my-cards-view .visibility-icon {
        font-size: 12px;
    }

    #my-cards-view .visibility-toggle-label {
        display: none;
    }

    #my-cards-view .visibility-tooltip {
        display: none;
    }

    /* Cards grid styles moved to styles-cards-grid.css */
}

/* ===================================
   PULL-TO-REFRESH (Story 1.6)
   Mobile UX pattern for refreshing data
   =================================== */

/* PTR Indicator - hidden above the content by default */
.ptr-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transform: translateY(-60px);
    transition: transform 0.2s ease-out;
    z-index: 10;
    pointer-events: none;
}

/* Spinner */
.ptr-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--bg-elevated, #1a1a1a);
    border-top-color: var(--accent, #00FFA3);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Spinner animation when refreshing */
.ptr-refreshing .ptr-spinner {
    animation: ptr-spin 0.7s linear infinite;
}

@keyframes ptr-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Text */
.ptr-text {
    color: var(--text-secondary, #888);
    font-size: 13px;
    font-weight: 500;
    transition: opacity 0.15s ease;
}

/* View containers need relative positioning for PTR */
.view {
    position: relative;
}

/* Disable PTR on desktop (no touch events) */
@media (hover: hover) and (pointer: fine) {
    .ptr-indicator {
        display: none;
    }
}

/* ============================================
   BOUTIQUE - PREMIUM VERSION
   ============================================ */

/* Container */
.shop {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
    padding: 0 20px 160px;
    overflow: visible;
}

/* Ambient Particles */
.shop__particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 400px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.shop__particles::before,
.shop__particles::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.25;
    animation: shopParticleFloat 10s ease-in-out infinite;
}
.shop__particles::before {
    width: 200px;
    height: 200px;
    background: var(--accent, #2AD7AD);
    top: -60px;
    left: -40px;
}
.shop__particles::after {
    width: 180px;
    height: 180px;
    background: #8B5CF6;
    top: 100px;
    right: -60px;
    animation-delay: -5s;
}
@keyframes shopParticleFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    50% { transform: translate(15px, 25px) scale(1.15); opacity: 0.35; }
}

/* Hero Premium */
.shop-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 20px 28px;
    margin-bottom: 20px;
    z-index: 1;
    animation: shopFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.shop-hero__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(42,215,173,0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.shop-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #22C55E;
    margin-bottom: 16px;
}
.shop-hero__badge i {
    font-size: 0.7rem;
}
.shop-hero__visual {
    position: relative;
    margin-bottom: 16px;
}
.shop-hero__img {
    width: 120px;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
    animation: shopHeroFloat 4s ease-in-out infinite;
}
@keyframes shopHeroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.shop-hero__title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}
.shop-hero__tagline {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

/* Savings Progress Bar */
.shop-savings {
    position: relative;
    padding: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.03) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 14px;
    margin-bottom: 20px;
    z-index: 1;
    animation: shopFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.shop-savings__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.shop-savings__label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.shop-savings__value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #A78BFA;
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}
.shop-savings__bar {
    position: relative;
    height: 6px;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 3px;
    overflow: hidden;
}
.shop-savings__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #8B5CF6 0%, #A78BFA 50%, #C4B5FD 100%);
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.shop-savings__glow {
    position: absolute;
    left: 0;
    top: -3px;
    height: 12px;
    width: 0%;
    background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.6) 50%, transparent 100%);
    filter: blur(6px);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.shop-savings__hint {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    margin-top: 8px;
    text-align: center;
}

/* Tier Cards */
.shop-tiers {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    z-index: 1;
    position: relative;
    animation: shopFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.shop-tier {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.shop-tier::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(42,215,173,0.15) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.25s;
}
.shop-tier:hover:not(.shop-tier--disabled) {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}
.shop-tier:hover:not(.shop-tier--disabled)::before {
    opacity: 1;
}
.shop-tier--active {
    background: linear-gradient(135deg, var(--accent, #2AD7AD) 0%, #4ADE80 100%) !important;
    border-color: var(--accent, #2AD7AD) !important;
    box-shadow: 0 8px 24px rgba(42, 215, 173, 0.3);
    transform: translateY(-2px);
}
.shop-tier--active::before {
    display: none;
}
.shop-tier--active .shop-tier__range,
.shop-tier--active .shop-tier__price {
    color: #000;
}
.shop-tier--active .shop-tier__discount {
    background: rgba(0,0,0,0.2);
    color: #000;
}
.shop-tier--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.shop-tier--pro {
    border-color: rgba(255, 215, 0, 0.3);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 215, 0, 0.02) 100%);
}
.shop-tier--pro .shop-tier__badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    font-size: 0.55rem;
    font-weight: 800;
    color: #000;
    border-radius: 0 0 6px 6px;
    letter-spacing: 0.05em;
}
.shop-tier__range {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    position: relative;
    z-index: 1;
}
.shop-tier__price {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    margin: 4px 0;
    position: relative;
    z-index: 1;
}
.shop-tier__discount {
    display: inline-block;
    padding: 2px 6px;
    background: var(--accent, #2AD7AD);
    font-size: 0.6rem;
    font-weight: 700;
    color: #000;
    border-radius: 4px;
    position: relative;
    z-index: 1;
}
.shop-tier__tag {
    font-size: 0.55rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
}

/* Quantity Selector */
.shop-quantity {
    position: relative;
    padding: 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    margin-bottom: 14px;
    z-index: 1;
    animation: shopFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.shop-quantity__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.shop-quantity__label {
    font-size: 0.9rem;
    font-weight: 600;
}
.shop-quantity__unit {
    font-size: 0.8rem;
    color: var(--accent, #2AD7AD);
    font-weight: 600;
}
.shop-quantity__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.shop-qty-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.shop-qty-btn:hover:not(:disabled) {
    background: #fff;
    color: #000;
    border-color: #fff;
    transform: scale(1.05);
}
.shop-qty-btn:active:not(:disabled) {
    transform: scale(0.98);
}
.shop-qty-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}
.shop-qty-btn--sm {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
}
.shop-quantity__display {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
}
.shop-quantity__value {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--accent, #2AD7AD);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.shop-quantity__suffix {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
}

/* Live Subtotal */
.shop-subtotal {
    position: relative;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(42,215,173,0.12) 0%, rgba(42,215,173,0.04) 100%);
    border: 1px solid rgba(42,215,173,0.2);
    border-radius: 12px;
    margin-bottom: 20px;
    text-align: center;
    z-index: 1;
    animation: shopFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.shop-subtotal__empty {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}
.shop-subtotal__calc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.shop-subtotal__formula {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
}
.shop-subtotal__result {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
}

/* Sections */
.shop-section {
    position: relative;
    margin-bottom: 16px;
    z-index: 1;
    animation: shopFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.shop-section--gift {
    animation-delay: 0.35s;
}
.shop-section__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}
.shop-section__header i {
    color: var(--accent, #2AD7AD);
    font-size: 0.9rem;
}
.shop-section__required {
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Tripod Checkbox */
.shop-tripod {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shop-check {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.shop-check:hover {
    border-color: rgba(255,255,255,0.15);
}
.shop-check--highlight {
    background: linear-gradient(135deg, rgba(42,215,173,0.08) 0%, transparent 100%);
    border-color: rgba(42,215,173,0.2);
}
.shop-check--highlight:hover {
    border-color: rgba(42,215,173,0.35);
}
.shop-check--alt {
    padding: 10px 16px;
    background: transparent;
    border: none;
}
.shop-check input {
    display: none;
}
.shop-check__box {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 7px;
    transition: all 0.2s;
    flex-shrink: 0;
}
.shop-check__box i {
    font-size: 0.7rem;
    color: #000;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s;
}
.shop-check input:checked ~ .shop-check__box {
    background: var(--accent, #2AD7AD);
    border-color: var(--accent, #2AD7AD);
}
.shop-check input:checked ~ .shop-check__box i {
    opacity: 1;
    transform: scale(1);
}
.shop-check__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.shop-check__title {
    font-size: 0.9rem;
    font-weight: 600;
}
.shop-check__desc {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}
.shop-check__text {
    flex: 1;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}
.shop-check__price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent, #2AD7AD);
}

/* Gift Section */
.shop-section--gift {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.03) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 14px;
    padding: 16px;
}
.shop-section--gift .shop-section__header {
    margin-bottom: 14px;
}
.shop-section--gift .shop-section__header i {
    color: #FCD34D;
}
.shop-gift {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.shop-gift__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.shop-gift__balance {
    font-size: 0.95rem;
    font-weight: 700;
    color: #A78BFA;
}
.shop-gift__hint {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}
.shop-gift__controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.shop-gift__value {
    min-width: 30px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #A78BFA;
}

/* Shipping */
.shop-shipping {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shop-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.shop-radio:hover:not(.shop-radio--disabled) {
    border-color: rgba(255,255,255,0.15);
}
.shop-radio--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.shop-radio input {
    display: none;
}
.shop-radio__dot {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
}
.shop-radio__dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 10px;
    height: 10px;
    background: var(--accent, #2AD7AD);
    border-radius: 50%;
    transition: transform 0.2s;
}
.shop-radio input:checked ~ .shop-radio__dot {
    border-color: var(--accent, #2AD7AD);
}
.shop-radio input:checked ~ .shop-radio__dot::after {
    transform: translate(-50%, -50%) scale(1);
}
.shop-radio__label {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
}
.shop-radio__price {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}
.shop-radio__soon {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.shop-shipping__free {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    font-size: 0.8rem;
    color: var(--accent, #2AD7AD);
}
.shop-shipping__free.shop-shipping__free--active {
    color: #22C55E;
    font-weight: 600;
}

/* Promo Code */
.shop-promo {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    z-index: 1;
    position: relative;
    animation: shopFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.shop-promo__input {
    flex: 1;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}
.shop-promo__input:focus {
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.shop-promo__input:focus:not(:focus-visible) {
    outline: none;
}

.shop-promo__input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.shop-promo__input::placeholder {
    color: var(--text-tertiary);
}
.shop-promo__btn {
    width: 50px;
    background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
    border: none;
    border-radius: 12px;
    color: #000;
    cursor: pointer;
    transition: all 0.2s;
}
.shop-promo__btn:hover {
    transform: scale(1.05);
}

/* Order Summary */
.shop-summary {
    position: relative;
    padding: 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    margin-bottom: 16px;
    z-index: 1;
    animation: shopFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}
.shop-summary__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}
.shop-summary__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shop-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}
.shop-summary__row span:last-child {
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}
.shop-summary__row--gift {
    color: #A78BFA;
}
.shop-summary__row--gift span:last-child {
    color: #A78BFA;
}
.shop-summary__divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 14px 0;
}
.shop-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 600;
}
.shop-summary__total span:last-child {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
}

/* FAQ Accordion */
.shop-faq {
    margin-bottom: 16px;
    z-index: 1;
    position: relative;
    animation: shopFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
.shop-faq__item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
}
.shop-faq__item summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s;
}
.shop-faq__item summary::-webkit-details-marker { display: none; }
.shop-faq__item summary:hover {
    background: rgba(255,255,255,0.03);
}
.shop-faq__item summary i:first-child {
    color: var(--accent, #2AD7AD);
    font-size: 0.85rem;
}
.shop-faq__item summary span {
    flex: 1;
}
.shop-faq__arrow {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    transition: transform 0.3s;
}
.shop-faq__item[open] .shop-faq__arrow {
    transform: rotate(180deg);
}
.shop-faq__content {
    padding: 0 16px 16px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
}
.shop-faq__content ul,
.shop-faq__content ol {
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.shop-faq__content li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}
.shop-faq__content li i {
    color: var(--accent, #2AD7AD);
    font-size: 0.7rem;
    margin-top: 4px;
}
.shop-faq__content ol {
    counter-reset: faq-counter;
}
.shop-faq__content ol li {
    counter-increment: faq-counter;
}
.shop-faq__content ol li::before {
    content: counter(faq-counter);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(42,215,173,0.15);
    color: var(--accent, #2AD7AD);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Support Link */
.shop-support {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s;
    z-index: 1;
    position: relative;
    animation: shopFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}
.shop-support:hover {
    color: #fff;
}
.shop-support i:first-child {
    color: #5865F2;
    font-size: 1.1rem;
}
.shop-support i:last-child {
    font-size: 0.7rem;
    opacity: 0.5;
}

/* Sticky Checkout Bar */
.shop-checkout {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 428px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: rgba(12, 12, 16, 0.95);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    backdrop-filter: blur(20px);
    box-shadow: 0 -4px 30px rgba(0,0,0,0.4);
    z-index: 100;
    animation: shopCheckoutSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}
@keyframes shopCheckoutSlideUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
.shop-checkout__summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.shop-checkout__qty {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}
.shop-checkout__price {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.shop-checkout__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
    border: none;
    border-radius: 50px;
    color: #000;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.shop-checkout__btn:hover:not(:disabled) {
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(255,255,255,0.2);
}
.shop-checkout__btn:active:not(:disabled) {
    transform: scale(0.98);
}
.shop-checkout__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.shop-checkout__btn:not(:disabled) {
    background: linear-gradient(135deg, var(--accent, #2AD7AD) 0%, #4ADE80 100%);
}
.shop-checkout__btn:not(:disabled) #shop-checkout-icon {
    display: none;
}
.shop-checkout__btn:disabled .shop-checkout__btn-text {
    order: 1;
}

/* Animation keyframe */
@keyframes shopFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}