/* ===== css/style-base.css?v=2603052317 ===== */
/* =============================================
   PRODUCTIVEAPP - BASE CSS
   Variables, Reset, Layout général
   ============================================= */

/* === RESET === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === VARIABLES GLOBALES (spacing, radius, transitions) === */
/* Les variables de couleur sont définies par les thèmes dans style-themes.css */
:root {
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 50px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Variable aliases (will resolve from theme vars) */
    --text-primary: var(--text);
    --text-secondary: var(--text-muted);
    --text-tertiary: var(--text-muted);
    --border-primary: var(--border);
    --accent-muted: var(--border);
}

/* === HTML & BODY - Anti-overscroll === */
html {
    background: var(--bg-primary, #0a0a14);
    overscroll-behavior: none;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-primary, #0a0a14); /* Solid fallback prevents white flash on overscroll */
    min-height: 100vh;
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
}

/* Fallback gradient on html for non-canvas elements */
html {
    background: #0a0a14 linear-gradient(165deg, var(--bg-primary, #0a0a14) 0%, var(--bg-secondary, #111122) 40%, var(--bg-tertiary, #161630) 100%);
}

/* === CANVAS BACKGROUND === */
#matrix-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind everything */
    pointer-events: none;
    opacity: 0.95; /* BOOSTED for spectacular visibility */
}

/* === MAIN CONTENT (avec sidebar) === */
.main-content {
    margin-left: var(--sb-width-open, 260px);
    min-height: 100vh;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: none; /* Hidden until logged in */
}

body.sidebar-collapsed .main-content {
    margin-left: var(--sb-width-closed, 64px);
}

/* Show main content only when logged in */
body.logged-in .main-content {
    display: block;
}

/* Vue containers - styles moved to style-views.css */

/* === APP CONTAINER === */
.app-container {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-md) var(--space-md) var(--space-md); /* Supprime padding-top */
}

/* === HIDDEN UTILITY === */
.hidden {
    display: none !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* === SELECTION === */
::selection {
    background: var(--accent);
    color: var(--bg-primary);
}

/* =============================================
   LOGIN SCREEN
   ============================================= */

.login-screen {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(224, 120, 64, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
        linear-gradient(165deg, #0a0a0a 0%, #1a1410 40%, #2d2117 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    overflow: hidden;
}

/* Image du Maître Maha Giri - effet divin */
.login-screen::after {
    content: '';
    position: absolute;
    right: 5%;
    top: 42%;
    transform: translateY(-50%);
    width: 45%;
    height: 100%;
    background: url('/assets/images/avatars/maha-giri-master.jpg') right center/contain no-repeat;
    opacity: 0.45;
    filter: blur(0.3px) brightness(1.3);
    mask-image:
        radial-gradient(ellipse 60% 50% at 70% 45%,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,0.9) 30%,
            rgba(0,0,0,0.5) 60%,
            transparent 85%);
    -webkit-mask-image:
        radial-gradient(ellipse 60% 50% at 70% 45%,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,0.9) 30%,
            rgba(0,0,0,0.5) 60%,
            transparent 85%);
    animation: masterGlow 8s ease-in-out infinite;
    z-index: 1;
}

@keyframes masterGlow {
    0%, 100% {
        opacity: 0.40;
        filter: blur(0.3px) brightness(1.25);
    }
    50% {
        opacity: 0.50;
        filter: blur(0.2px) brightness(1.4);
    }
}

/* Rayons de soleil divins */
.login-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        /* Rayons dorés */
        conic-gradient(from 45deg at 85% 50%,
            transparent 0deg,
            rgba(255, 215, 0, 0.03) 10deg,
            transparent 20deg,
            transparent 40deg,
            rgba(255, 215, 0, 0.05) 50deg,
            transparent 60deg,
            transparent 80deg,
            rgba(255, 215, 0, 0.04) 90deg,
            transparent 100deg,
            transparent 120deg,
            rgba(255, 215, 0, 0.03) 130deg,
            transparent 140deg,
            transparent 160deg,
            rgba(255, 215, 0, 0.05) 170deg,
            transparent 180deg
        ),
        /* Particules d'étoiles */
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(224,120,64,0.4), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.2), transparent),
        radial-gradient(2px 2px at 90% 60%, rgba(255,255,255,0.15), transparent),
        radial-gradient(1px 1px at 30% 80%, rgba(224,120,64,0.3), transparent);
    background-size: 150% 150%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%;
    background-position: 50% 50%;
    animation: divineLight 60s ease-in-out infinite;
    opacity: 0.7;
    z-index: 1;
}

@keyframes divineLight {
    0%, 100% {
        background-position: 50% 50%, 0% 0%, 100% 100%, 50% 50%, 100% 0%, 0% 100%, 50% 50%;
        opacity: 0.6;
    }
    50% {
        background-position: 60% 50%, 100% 100%, 0% 0%, 80% 20%, 20% 80%, 60% 40%, 90% 10%;
        opacity: 0.8;
    }
}

.login-container {
    text-align: center;
    padding: var(--space-xl);
    background:
        linear-gradient(135deg, rgba(224, 120, 64, 0.08) 0%, rgba(0,0,0,0.3) 100%);
    border: 1px solid rgba(224, 120, 64, 0.3);
    border-radius: 24px;
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.6),
        0 0 40px rgba(224, 120, 64, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
    max-width: 450px;
    width: 90%;
    /* Pas d'animation container - tout fluide via les éléments internes */
    position: relative;
    z-index: 10;
}

.login-container::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(224, 120, 64, 0.4), transparent, rgba(224, 120, 64, 0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
}

@keyframes containerEntrance {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.login-logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto var(--space-lg);
    box-shadow:
        0 0 60px rgba(224, 120, 64, 0.6),
        0 0 100px rgba(224, 120, 64, 0.4),
        0 20px 40px rgba(0,0,0,0.4);
    /* Animation gérée par style-overrides pour séquence fluide */
    filter: drop-shadow(0 0 20px rgba(224, 120, 64, 0.8));
    position: relative;
}

@keyframes logoPulse {
    0%, 100% {
        box-shadow:
            0 0 60px rgba(224, 120, 64, 0.6),
            0 0 100px rgba(224, 120, 64, 0.4),
            0 20px 40px rgba(0,0,0,0.4);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 80px rgba(224, 120, 64, 0.8),
            0 0 120px rgba(224, 120, 64, 0.6),
            0 25px 50px rgba(0,0,0,0.5);
        transform: scale(1.05);
    }
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

.login-container h1 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: var(--space-sm);
    background: linear-gradient(135deg, #fff 0%, #e07840 50%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: titleShine 4s linear infinite;
    letter-spacing: 1px;
    text-shadow: 0 0 30px rgba(224, 120, 64, 0.5);
}

@keyframes titleShine {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.login-container > p {
    color: rgba(245, 230, 211, 0.7);
    margin-bottom: var(--space-lg);
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    animation: fadeInUp 0.8s ease 0.3s backwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-select-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    animation: fadeInUp 0.8s ease 0.5s backwards;
}

.user-select-btn {
    padding: var(--space-lg);
    background: linear-gradient(145deg, rgba(224, 120, 64, 0.1) 0%, rgba(0,0,0,0.3) 100%);
    border: 2px solid rgba(224, 120, 64, 0.3);
    border-radius: 16px;
    color: #f5f5f5;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    position: relative;
    overflow: hidden;
}

.user-select-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(224, 120, 64, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.user-select-btn:hover {
    background: linear-gradient(145deg, rgba(224, 120, 64, 0.25) 0%, rgba(224, 120, 64, 0.1) 100%);
    border-color: rgba(224, 120, 64, 0.6);
    transform: scale(1.08) translateY(-5px);
    box-shadow:
        0 10px 30px rgba(224, 120, 64, 0.3),
        0 0 40px rgba(224, 120, 64, 0.2);
}

.user-select-btn:hover::before {
    opacity: 1;
}

.user-avatar-big {
    font-size: 2.5rem;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    transition: transform 0.3s ease;
}

.user-select-btn:hover .user-avatar-big {
    transform: scale(1.1) rotate(5deg);
}

.user-name-select {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    animation: fadeInUp 0.8s ease 0.6s backwards;
}

.login-form p {
    color: rgba(224, 120, 64, 0.9);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: var(--space-xs);
    text-shadow: 0 0 20px rgba(224, 120, 64, 0.5);
}

.login-form input {
    padding: 18px 24px;
    font-size: 1.1rem;
    border: 2px solid rgba(224, 120, 64, 0.3);
    border-radius: 50px;
    background: linear-gradient(145deg, rgba(0,0,0,0.4) 0%, rgba(224, 120, 64, 0.05) 100%);
    color: #f5f5f5;
    text-align: center;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    letter-spacing: 2px;
}

.login-form input:focus {
    border-color: rgba(224, 120, 64, 0.8);
    background: linear-gradient(145deg, rgba(0,0,0,0.5) 0%, rgba(224, 120, 64, 0.1) 100%);
    box-shadow:
        0 0 30px rgba(224, 120, 64, 0.4),
        0 0 60px rgba(224, 120, 64, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
    transform: scale(1.02);
}

.login-form input::placeholder {
    color: rgba(245, 230, 211, 0.4);
    letter-spacing: 1px;
}

/* Boutons de connexion */
.login-form button {
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

#login-btn {
    background: linear-gradient(135deg, rgba(224, 120, 64, 0.9) 0%, rgba(224, 120, 64, 0.7) 100%);
    color: #fff;
    border: 2px solid rgba(224, 120, 64, 1);
    box-shadow:
        0 10px 30px rgba(224, 120, 64, 0.4),
        0 0 40px rgba(224, 120, 64, 0.2);
    animation: buttonGlow 2s ease-in-out infinite;
}

#login-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

#login-btn:hover::before {
    transform: translateX(100%);
}

#login-btn:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow:
        0 15px 40px rgba(224, 120, 64, 0.6),
        0 0 60px rgba(224, 120, 64, 0.4);
}

@keyframes buttonGlow {
    0%, 100% {
        box-shadow:
            0 10px 30px rgba(224, 120, 64, 0.4),
            0 0 40px rgba(224, 120, 64, 0.2);
    }
    50% {
        box-shadow:
            0 10px 30px rgba(224, 120, 64, 0.6),
            0 0 60px rgba(224, 120, 64, 0.4);
    }
}

.btn-secondary {
    background: rgba(0,0,0,0.4);
    color: rgba(245, 230, 211, 0.8);
    border: 2px solid rgba(224, 120, 64, 0.3);
}

.btn-secondary:hover {
    background: rgba(224, 120, 64, 0.2);
    border-color: rgba(224, 120, 64, 0.6);
    color: #fff;
    transform: scale(1.02);
}

.error-text {
    color: var(--danger);
    font-size: 0.9rem;
    margin-top: var(--space-md);
}

/* =============================================
   HEADER
   ============================================= */

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 var(--space-md) 0; /* Supprime padding-top pour aligner avec sidebar */
    margin-bottom: var(--space-md);
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.app-title {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text);
}

.user-badge {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

.user-badge .user-avatar {
    font-size: 1.2rem;
}

.user-badge .user-name {
    font-weight: 500;
    color: var(--accent);
}

/* =============================================
   PROJECTS NAV
   ============================================= */

/* --- Project Filter Dropdown (inside .user-filter-bar) --- */
.project-dropdown { position: relative; }

.project-dropdown.open .project-dropdown-btn {
    border-color: var(--accent);
}
.project-dropdown.open .pf-arrow {
    transform: rotate(180deg);
}

.pf-count {
    background: var(--accent-muted, rgba(224, 120, 64, 0.2));
    color: var(--accent, #e07840);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.filter-sep {
    width: 1px;
    height: 20px;
    background: var(--border, rgba(255,255,255,0.1));
    flex-shrink: 0;
}

.add-project-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px dashed var(--border, rgba(255,255,255,0.12));
    background: transparent;
    color: var(--text-muted, rgba(255,255,255,0.35));
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.add-project-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* --- Dropdown Panel (overlay) --- */
.project-dropdown-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 300px;
    max-width: 400px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-secondary, #1a1a1f);
    border: 2px solid var(--accent-muted, rgba(224, 120, 64, 0.3));
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.4,0,.2,1), visibility 0.22s;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-muted, rgba(255,255,255,0.1)) transparent;
}
.project-dropdown.open .project-dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.project-dropdown-list::-webkit-scrollbar { width: 4px; }
.project-dropdown-list::-webkit-scrollbar-track { background: transparent; }
.project-dropdown-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
}

/* --- Dropdown Items --- */
.pf-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
    color: var(--text-primary, #ffffff);
    font-size: 0.87rem;
    font-weight: 500;
    margin-bottom: 2px;
    position: relative;
}
.pf-option:last-child { margin-bottom: 0; }

.pf-option:hover {
    background: var(--accent-muted, rgba(224, 120, 64, 0.2));
}

.pf-option.active {
    background: var(--accent-muted, rgba(224, 120, 64, 0.3));
}

/* Checkmark for active item */
.pf-option-check {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    color: var(--accent);
}
.pf-option.active .pf-option-check {
    opacity: 1;
}

.pf-option-icon { font-size: 1.05rem; flex-shrink: 0; }

.pf-option-name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-option-count {
    padding: 2px 8px;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted, rgba(255,255,255,0.45));
}
.pf-option.active .pf-option-count {
    background: var(--accent);
    color: var(--bg-primary, #0a0a0a);
}

.pf-option-delete {
    display: none;
    width: 22px; height: 22px;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}
.pf-option:hover .pf-option-delete { display: inline-flex; }
.pf-option-delete:hover { background: #ef4444; color: white; }

/* Separator after "Tous les projets" */
.pf-option-separator {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 4px 8px;
}

/* =============================================
   USER FILTER BAR
   ============================================= */

.user-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.user-filter-bar label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.user-filter-bar select {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    outline: none;
}

/* =============================================
   TASK INPUT SECTION
   ============================================= */

.task-input-section {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-xl);
}

.task-input-section input[type="text"] {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    font-size: 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    color: var(--text);
    outline: none;
    transition: var(--transition-normal);
}

.task-input-section input[type="text"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 25px var(--accent-glow);
}

.task-input-section input[type="text"]::placeholder {
    color: var(--text-muted);
}

.task-input-section select {
    padding: var(--space-md) var(--space-lg);
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    color: var(--text);
    font-size: 0.95rem;
    cursor: pointer;
    outline: none;
    transition: var(--transition-normal);
}

.task-input-section select:focus {
    border-color: var(--accent);
}

/* =============================================
   MAIN VIEWS (Columns + Bubbles)
   ============================================= */

.tasks-view {
    margin-bottom: var(--space-xl);
}

/* === Mode 3 colonnes === */
.columns-view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.task-column {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    min-height: 300px;
    min-width: 0;
    overflow: hidden;
}

.column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}

.column-header h2 {
    font-size: 1rem;
    font-weight: 500;
}

.column-count {
    background: var(--accent);
    color: var(--bg-primary);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.task-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

/* === Mode 2 colonnes (Mes Bulles) === */
.bubbles-view {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.bubbles-column h2 {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: var(--space-lg);
    color: var(--text);
}

.bubbles-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

/* =============================================
   ANIMATIONS
   ============================================= */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popIn {
    from { 
        opacity: 0; 
        transform: scale(0.9); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

@keyframes glowPulse {
    0%, 100% { 
        filter: brightness(1);
    }
    50% { 
        filter: brightness(1.15);
    }
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 1024px) {
    .columns-view {
        grid-template-columns: 1fr;
    }
    
    .task-column {
        min-height: 200px;
    }
}

@media (max-width: 768px) {
    .app-header {
        flex-wrap: wrap;
        gap: var(--space-md);
    }
    
    .app-title {
        order: -1;
        width: 100%;
        text-align: center;
        font-size: 1.3rem;
    }
    
    .task-input-section {
        flex-wrap: wrap;
    }
    
    .task-input-section input[type="text"] {
        width: 100%;
    }
    
    .task-input-section select {
        flex: 1;
    }
    
    .bubbles-view {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
        padding-top: 56px; /* space for mobile toggle */
    }
}

@media (max-width: 480px) {
    .app-container {
        padding: var(--space-sm);
    }

    .user-badge .user-name {
        display: none;
    }

    .login-container {
        padding: var(--space-lg);
    }

    .user-select-grid {
        grid-template-columns: 1fr;
    }
}


/* =============================================
   MA VISION — CINEMATIC HEADER (Divine Edition)
   ============================================= */

@keyframes visionShimmer {
    0%   { background-position: 250% center; }
    100% { background-position: -250% center; }
}

@keyframes visionGlow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(212,175,55,0.5)) drop-shadow(0 0 30px rgba(212,175,55,0.2)); }
    50%       { filter: drop-shadow(0 0 18px rgba(212,175,55,0.9)) drop-shadow(0 0 55px rgba(212,175,55,0.4)); }
}

@keyframes visionOrbPulse {
    0%, 100% { opacity: 0.10; transform: translateX(-50%) scale(1); }
    50%       { opacity: 0.20; transform: translateX(-50%) scale(1.08); }
}

@keyframes visionLineReveal {
    0%   { transform: scaleX(0); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: scaleX(1); opacity: 1; }
}

@keyframes visionStarFloat {
    0%   { transform: translateY(0) translateX(0) scale(1);   opacity: 0.7; }
    50%  { transform: translateY(-8px) translateX(3px) scale(1.2); opacity: 1; }
    100% { transform: translateY(0) translateX(0) scale(1);   opacity: 0.7; }
}

@keyframes visionSubtitleFade {
    0%   { opacity: 0; transform: translateY(6px); letter-spacing: 0.35em; }
    100% { opacity: 1; transform: translateY(0);   letter-spacing: 0.45em; }
}

/* ── Header Container ── */
#view-tasks .app-header {
    position: relative;
    padding: 22px var(--space-xl) 16px;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(
            180deg,
            rgba(212,175,55,0.07) 0%,
            rgba(212,175,55,0.02) 60%,
            transparent 100%
        ),
        var(--bg-primary, #0a0a14);
    border-bottom: 1px solid transparent;
}

/* Radial ambient glow behind title */
#view-tasks .app-header::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 140px;
    background: radial-gradient(
        ellipse at center,
        rgba(212,175,55,0.14) 0%,
        rgba(180,120,255,0.05) 40%,
        transparent 70%
    );
    pointer-events: none;
    animation: visionOrbPulse 5s ease-in-out infinite;
    z-index: 0;
}

/* Bottom golden separator */
#view-tasks .app-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212,175,55,0.3) 15%,
        rgba(240,217,117,0.85) 50%,
        rgba(212,175,55,0.3) 85%,
        transparent 100%
    );
}

/* ── "MA VISION" Title ── */
#view-tasks .app-title {
    font-size: clamp(1.9rem, 2.8vw, 3rem);
    font-weight: 900;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
    z-index: 1;

    /* Animated shimmer gradient */
    background: linear-gradient(
        90deg,
        rgba(160,115,10,0.6)  0%,
        #b8870f               10%,
        #d4af37               22%,
        #e8cc6a               35%,
        #fff9ed               50%,
        #e8cc6a               65%,
        #d4af37               78%,
        #b8870f               90%,
        rgba(160,115,10,0.6) 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    animation:
        visionShimmer 6s linear infinite,
        visionGlow    4s ease-in-out infinite;
}

/* Decorative line under title */
#view-tasks .app-title::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 7px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212,175,55,0.5) 15%,
        rgba(240,217,117,1)  50%,
        rgba(212,175,55,0.5) 85%,
        transparent 100%
    );
    transform-origin: center;
    border-radius: 1px;
    animation: visionLineReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Decorative stars flanking the title */
#view-tasks .app-title::before {
    content: '✦';
    position: absolute;
    top: 50%;
    left: -1.8em;
    transform: translateY(-60%);
    font-size: 0.5em;
    -webkit-text-fill-color: rgba(212,175,55,0.6);
    color: rgba(212,175,55,0.6);
    animation: visionStarFloat 3s ease-in-out infinite;
    letter-spacing: 0;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
}

/* ── Projects Nav — subtle cinematic edge ── */
#view-tasks .projects-nav {
    padding: 10px var(--space-xl) 6px;
    background: linear-gradient(
        180deg,
        rgba(212,175,55,0.03) 0%,
        transparent 100%
    );
    border-bottom: 1px solid rgba(212,175,55,0.08);
}

/* Active project chip glows gold */
#view-tasks .project-chip.active {
    background: linear-gradient(
        135deg,
        rgba(212,175,55,0.12) 0%,
        rgba(212,175,55,0.05) 100%
    ) !important;
    border-color: transparent !important;
    box-shadow: none;
}

/* ── Task Columns ── cinematic card glow on hover ── */
#view-tasks .task-column {
    transition: box-shadow 0.4s ease;
}

#view-tasks .task-column:hover {
    box-shadow: 0 0 30px rgba(212,175,55,0.06);
}

/* Column headers glow */
#view-tasks .column-header {
    position: relative;
}

#view-tasks .column-header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#view-tasks .task-column:hover .column-header::after {
    opacity: 1;
}

/* ── Task Card Entry Animation ── */
#view-tasks .bubble {
    animation: popIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* Stagger each visible card for a cascade effect */
#view-tasks .task-list .bubble:nth-child(1)  { animation-delay: 0.04s; }
#view-tasks .task-list .bubble:nth-child(2)  { animation-delay: 0.08s; }
#view-tasks .task-list .bubble:nth-child(3)  { animation-delay: 0.12s; }
#view-tasks .task-list .bubble:nth-child(4)  { animation-delay: 0.16s; }
#view-tasks .task-list .bubble:nth-child(5)  { animation-delay: 0.20s; }
#view-tasks .task-list .bubble:nth-child(6)  { animation-delay: 0.24s; }
#view-tasks .task-list .bubble:nth-child(7)  { animation-delay: 0.28s; }
#view-tasks .task-list .bubble:nth-child(n+8) { animation-delay: 0.30s; }

/* Column header fade-in on load */
#view-tasks .column-header {
    animation: fadeIn 0.6s ease both;
}
#view-tasks .task-column:nth-child(1) .column-header { animation-delay: 0.1s; }
#view-tasks .task-column:nth-child(2) .column-header { animation-delay: 0.2s; }
#view-tasks .task-column:nth-child(3) .column-header { animation-delay: 0.3s; }
/* ===== css/style-components.css?v=2603052317 ===== */
/* =============================================
   PRODUCTIVEAPP - COMPONENTS CSS
   Bulles, Boutons, Modals, Journal, Chatbot
   ============================================= */

/* =============================================
   BOUTONS
   ============================================= */

.btn-primary {
    padding: var(--space-md) var(--space-lg);
    border: none;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    color: var(--bg-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: 0 4px 15px var(--accent-glow);
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px var(--accent-glow);
}

.btn-secondary {
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-normal);
}

.btn-secondary:hover {
    border-color: var(--accent);
    background: var(--bg-card);
}

.btn-accent {
    padding: var(--space-md) var(--space-lg);
    border: none;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    color: var(--bg-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-normal);
}

.btn-accent:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 20px var(--accent-glow);
}

.btn-premium {
    padding: var(--space-md) var(--space-lg);
    border: none;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
    color: #1a1a2e;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: rotate(45deg);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.btn-premium:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.5);
    background: linear-gradient(135deg, #f4d03f 0%, #ffd700 50%, #f4d03f 100%);
}

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    background: var(--accent);
    color: var(--bg-primary);
    transform: scale(1.05);
}

/* === MENU DROPDOWN === */
.menu-container {
    position: relative;
}

.menu-icon-btn {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.menu-icon-btn:hover {
    transform: scale(1.1) rotate(5deg);
}

.menu-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.95));
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    box-shadow:
        0 10px 40px rgba(0,0,0,0.6),
        0 0 30px var(--accent-glow),
        inset 0 1px 0 var(--border, rgba(255,255,255,0.1));
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow: hidden;
}

.menu-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 20px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    color: var(--text, #f5f5f5);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-item:hover {
    background: linear-gradient(90deg, rgba(var(--accent-rgb, 224, 120, 64), 0.15) 0%, transparent 100%);
    color: var(--accent);
    transform: translateX(8px);
    padding-left: 24px;
}

.menu-item:hover::before {
    transform: scaleY(1);
}

.menu-item-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-item:hover .menu-item-icon {
    transform: scale(1.15);
    filter: drop-shadow(0 4px 8px var(--accent)) brightness(1.2);
}

.menu-item-text {
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* =============================================
   BULLES / TÂCHES - SECTION COMPLÈTE
   ============================================= */

/* === Base des bulles === */
.bubble,
.task-bubble {
    padding: 14px 18px !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

    /* Style par défaut - À faire (utilise variables du thème) */
    background: var(--bubble-bg) !important;
    border: 2px solid var(--bubble-border) !important;
    box-shadow: var(--bubble-glow) !important;
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Pas d'animations permanentes sur les notes - effet pro */

.bubble:hover,
.task-bubble:hover {
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: var(--bubble-glow) !important;
    filter: brightness(1.15) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover amélioré pour tous sauf Académie - glow modéré, PAS de rotation */
[data-theme]:not([data-theme="academie"]) .bubble:hover,
[data-theme]:not([data-theme="academie"]) .task-bubble:hover {
    transform: translateY(-10px) scale(1.05) !important;
    filter: brightness(1.2) drop-shadow(0 0 12px var(--accent)) !important;
}

/* Hover TRÈS subtil pour thèmes professionnels (CEO, Corporate, Minimal) */
[data-theme="executive"] .bubble:hover,
[data-theme="executive"] .task-bubble:hover,
[data-theme="corporate"] .bubble:hover,
[data-theme="corporate"] .task-bubble:hover,
[data-theme="minimal"] .bubble:hover,
[data-theme="minimal"] .task-bubble:hover {
    transform: translateY(-2px) scale(1.01) !important;
    filter: brightness(1.05) !important;
    box-shadow: var(--bubble-glow) !important;
}

/* === État En Cours - Glow Pulsant (utilise variables du thème) === */
.bubble.inprogress,
.task-bubble.inprogress {
    background: var(--bubble-inprogress-bg) !important;
    border: 2px solid var(--bubble-inprogress-border) !important;
    box-shadow: var(--bubble-inprogress-glow) !important;
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Pas d'animation pulse - on garde le pro */

.bubble.inprogress .bubble-text,
.task-bubble.inprogress .task-text {
    color: var(--text, #f5f5f5) !important;
    font-weight: 600 !important;
}

/* === État Terminé - MEGA GLOW (utilise variables du thème) === */
.bubble.done,
.task-bubble.done {
    background: var(--bubble-done-bg) !important;
    border: 3px solid var(--bubble-done-border) !important;
    box-shadow: var(--bubble-done-glow) !important;
    opacity: 1 !important;
}

/* Celebration animation au moment de compléter (tous sauf Académie) */
[data-theme]:not([data-theme="academie"]) .bubble.done,
[data-theme]:not([data-theme="academie"]) .task-bubble.done {
    animation: celebrate 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.bubble.done:hover,
.task-bubble.done:hover {
    transform: translateY(-8px) scale(1.05) !important;
    box-shadow: var(--bubble-done-glow) !important;
    filter: brightness(1.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover amélioré pour done (tous sauf Académie) - glow modéré, PAS de rotation */
[data-theme]:not([data-theme="academie"]) .bubble.done:hover,
[data-theme]:not([data-theme="academie"]) .task-bubble.done:hover {
    transform: translateY(-10px) scale(1.06) !important;
    filter: brightness(1.25) drop-shadow(0 0 15px var(--success)) !important;
}

/* Hover TRÈS subtil pour done sur thèmes pro */
[data-theme="executive"] .bubble.done:hover,
[data-theme="executive"] .task-bubble.done:hover,
[data-theme="corporate"] .bubble.done:hover,
[data-theme="corporate"] .task-bubble.done:hover,
[data-theme="minimal"] .bubble.done:hover,
[data-theme="minimal"] .task-bubble.done:hover {
    transform: translateY(-2px) scale(1.01) !important;
    filter: brightness(1.05) !important;
    box-shadow: var(--bubble-done-glow) !important;
}

.bubble.done .bubble-text,
.task-bubble.done .task-text {
    text-decoration: line-through !important;
    color: var(--bubble-done-text, var(--text, #f5f5f5)) !important;
    opacity: 1 !important;
}

.bubble.done .bubble-header,
.task-bubble.done .task-header {
    opacity: 0.9 !important;
}

/* === Animations améliorées (tous thèmes sauf Académie) === */

/* Glow Pulse - plus dynamique avec scale et brightness */
@keyframes glowPulse {
    0%, 100% {
        filter: brightness(1);
        transform: scale(1);
    }
    50% {
        filter: brightness(1.25);
        transform: scale(1.02);
    }
}

/* Floating subtle pour bulles au repos */
@keyframes floating {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* PopIn amélioré - plus dynamique */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    60% {
        opacity: 1;
        transform: scale(1.05) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Celebration pour tâches complétées - PAS de rotation */
@keyframes celebrate {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.15);
    }
    75% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Shimmer effect pour bulles done */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Slide in pour les boutons d'action */
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === ANIMATIONS SPÉCIFIQUES PAR THÈME === */

/* DESERT - Particules de sable dorées luxe - PAS de rotation */
@keyframes desertLuxe {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: brightness(1) drop-shadow(0 0 15px rgba(224, 120, 64, 0.6));
    }
    25% {
        transform: translateY(-6px) scale(1.03);
        filter: brightness(1.3) drop-shadow(0 0 25px rgba(224, 120, 64, 0.8));
    }
    50% {
        transform: translateY(-3px) scale(1.05);
        filter: brightness(1.4) drop-shadow(0 0 30px rgba(224, 120, 64, 1));
    }
    75% {
        transform: translateY(-6px) scale(1.03);
        filter: brightness(1.3) drop-shadow(0 0 25px rgba(224, 120, 64, 0.8));
    }
}

/* SUNSET - Pulse intense coucher de soleil */
@keyframes sunsetIntense {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1.1) drop-shadow(0 0 20px rgba(220, 38, 38, 0.7));
    }
    50% {
        transform: scale(1.08);
        filter: brightness(1.5) drop-shadow(0 0 40px rgba(249, 115, 22, 1));
    }
}

/* FANTASY - Sparkles magiques intenses - PAS de rotation */
@keyframes fantasySparkle {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: brightness(1.2) drop-shadow(0 0 25px rgba(191, 107, 255, 0.8)) hue-rotate(0deg);
    }
    33% {
        transform: translateY(-5px) scale(1.06);
        filter: brightness(1.5) drop-shadow(0 0 35px rgba(255, 107, 218, 1)) hue-rotate(15deg);
    }
    66% {
        transform: translateY(-3px) scale(1.04);
        filter: brightness(1.4) drop-shadow(0 0 30px rgba(6, 182, 212, 0.9)) hue-rotate(-15deg);
    }
}

/* BUBBLEGUM - Bulles rapides et grosses */
@keyframes bubblegumBubbles {
    0% {
        transform: scale(1) translateY(0);
        filter: brightness(1.1);
    }
    15% {
        transform: scale(1.15) translateY(-8px);
        filter: brightness(1.3);
    }
    30% {
        transform: scale(1.08) translateY(-4px);
        filter: brightness(1.2);
    }
    45% {
        transform: scale(1.18) translateY(-10px);
        filter: brightness(1.4);
    }
    60% {
        transform: scale(1.05) translateY(-3px);
        filter: brightness(1.15);
    }
    75% {
        transform: scale(1.12) translateY(-6px);
        filter: brightness(1.25);
    }
    90% {
        transform: scale(1.03) translateY(-2px);
        filter: brightness(1.1);
    }
    100% {
        transform: scale(1) translateY(0);
        filter: brightness(1.1);
    }
}

/* OCEAN - Vagues dansantes */
@keyframes oceanWaves {
    0%, 100% {
        transform: translateX(0) translateY(0) scaleX(1);
        filter: brightness(1.1);
    }
    25% {
        transform: translateX(-8px) translateY(-4px) scaleX(1.1);
        filter: brightness(1.3);
    }
    50% {
        transform: translateX(8px) translateY(-2px) scaleX(0.95);
        filter: brightness(1.4);
    }
    75% {
        transform: translateX(-5px) translateY(-3px) scaleX(1.05);
        filter: brightness(1.25);
    }
}

/* MIDNIGHT - Aurore boréale */
@keyframes midnightAurora {
    0%, 100% {
        transform: translateY(0) scaleY(1);
        filter: brightness(1.1) hue-rotate(0deg) drop-shadow(0 0 20px rgba(124, 159, 255, 0.7));
    }
    33% {
        transform: translateY(-5px) scaleY(1.05);
        filter: brightness(1.35) hue-rotate(10deg) drop-shadow(0 0 30px rgba(160, 192, 255, 0.9));
    }
    66% {
        transform: translateY(-2px) scaleY(1.03);
        filter: brightness(1.3) hue-rotate(-10deg) drop-shadow(0 0 25px rgba(192, 160, 255, 0.8));
    }
}

/* STAR WARS - Météorites/Boules de feu */
@keyframes starwarsMeteor {
    0% {
        transform: translateX(-20px) translateY(-30px) rotate(-45deg) scale(0.8);
        filter: brightness(2) drop-shadow(0 0 30px rgba(255, 140, 0, 1));
        opacity: 0;
    }
    20% {
        transform: translateX(-5px) translateY(-10px) rotate(-30deg) scale(1.1);
        filter: brightness(2.5) drop-shadow(0 0 40px rgba(255, 100, 0, 1)) drop-shadow(0 0 60px rgba(255, 50, 0, 0.8));
        opacity: 1;
    }
    40% {
        transform: translateX(5px) translateY(0px) rotate(-20deg) scale(1);
        filter: brightness(1.8) drop-shadow(0 0 35px rgba(255, 120, 0, 0.9));
    }
    60% {
        transform: translateX(8px) translateY(5px) rotate(-15deg) scale(0.95);
        filter: brightness(1.5) drop-shadow(0 0 25px rgba(255, 140, 0, 0.7));
    }
    80% {
        transform: translateX(12px) translateY(10px) rotate(-10deg) scale(0.9);
        filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 160, 0, 0.5));
    }
    100% {
        transform: translateX(15px) translateY(15px) rotate(-5deg) scale(0.85);
        filter: brightness(1) drop-shadow(0 0 10px rgba(255, 180, 0, 0.3));
        opacity: 0.8;
    }
}

/* === Éléments internes des bulles === */
.bubble-header,
.task-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.bubble-text,
.task-text {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: var(--text, #f5f5f5) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    min-width: 0 !important;
}

/* === BOUTONS D'ACTION - CORRIGÉ === */
.bubble-actions,
.task-actions {
    display: flex !important;
    gap: 6px !important;
    margin-top: 12px !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

/* CORRIGÉ: Tous les sélecteurs possibles pour le hover */
.bubble:hover .bubble-actions,
.bubble:hover .task-actions,
.task-bubble:hover .bubble-actions,
.task-bubble:hover .task-actions {
    opacity: 1 !important;
}

/* Slide in animé pour boutons (tous sauf Académie) */
[data-theme]:not([data-theme="academie"]) .bubble:hover .bubble-actions,
[data-theme]:not([data-theme="academie"]) .bubble:hover .task-actions,
[data-theme]:not([data-theme="academie"]) .task-bubble:hover .bubble-actions,
[data-theme]:not([data-theme="academie"]) .task-bubble:hover .task-actions {
    animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* === Tags projet/priorité === */
.task-project,
.bubble-project {
    font-size: 0.75rem !important;
    padding: 3px 10px !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.task-priority,
.bubble-priority {
    font-size: 0.7rem !important;
    padding: 2px 8px !important;
    border-radius: 8px !important;
    background: var(--bg-card, rgba(255,255,255,0.1)) !important;
    color: var(--text-muted) !important;
}

.task-priority.urgent,
.bubble-priority.urgent {
    background: rgba(239, 68, 68, 0.3) !important;
    color: var(--danger, #ff6b6b) !important;
}

/* === Boutons d'action - Style === */
.task-action-btn,
.bubble-action-btn {
    padding: 6px 12px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

.task-action-btn.start { background: var(--warning, #fbbf24) !important; color: #000 !important; }
.task-action-btn.complete { background: var(--success, #22c55e) !important; color: #fff !important; }
.task-action-btn.delete { background: var(--danger, #ef4444) !important; color: #fff !important; }

.task-action-btn:hover { transform: scale(1.1) !important; }

/* === État vide === */
.empty-state {
    padding: 32px !important;
    text-align: center !important;
    color: var(--text-muted) !important;
    font-size: 0.9rem !important;
}

/* =============================================
   MODALS
   ============================================= */

/* === MODAL OVERLAY (shared by all modals) === */
/* Modals: hidden by default, shown only when .hidden is removed */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-items: center;
    justify-content: center;
    z-index: 5000;
    padding: 20px;
}

.modal:not(.hidden) {
    display: flex !important;
    animation: modalOverlayIn 0.35s ease forwards;
}

.modal.hidden {
    display: none !important;
}

@keyframes modalOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === MODAL BOX (3D Relief Premium - TeamTalk inspired) === */
.modal-box {
    position: relative;
    background: var(--bg-secondary, rgba(35, 32, 45, 0.98));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-top-color: var(--border-strong, rgba(255, 255, 255, 0.15));
    border-radius: 24px;
    padding: 36px;
    max-width: 480px;
    width: 92%;
    text-align: center;
    animation: modalBoxIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    /* 3D relief shadow - subtle depth effect */
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.03) inset,
        0 -2px 0 rgba(0, 0, 0, 0.3) inset,
        0 25px 60px -15px rgba(0, 0, 0, 0.5),
        0 10px 30px -10px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: visible;
    backdrop-filter: blur(20px);
}

@keyframes modalBoxIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 3D Relief border effect - Premium TeamTalk style (no rotation) */
.modal-box::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%);
    border-radius: 25px;
    z-index: -1;
    pointer-events: none;
}

/* Top accent line */
.modal-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
    border-radius: 2px;
}

.modal-box h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 24px;
    color: var(--text-primary, var(--text));
    letter-spacing: -0.02em;
}

/* === MODAL INPUTS === */
.modal-input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 14px;
    background: var(--bg-primary, rgba(0, 0, 0, 0.3));
    color: var(--text-primary, var(--text));
    font-size: 1rem;
    margin-bottom: 14px;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.modal-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow, color-mix(in srgb, var(--accent) 20%, transparent));
    background: var(--bg-secondary, rgba(0, 0, 0, 0.4));
}

.modal-input::placeholder {
    color: var(--text-muted, rgba(255, 255, 255, 0.35));
}

/* === MODAL ACTIONS === */
.modal-actions {
    display: flex;
    gap: 14px;
    margin-top: 28px;
    justify-content: center;
}

.modal-actions button {
    flex: 1;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 120px;
}

.modal-actions .btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 15px var(--accent-glow, color-mix(in srgb, var(--accent) 40%, transparent));
}

.modal-actions .btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px var(--accent-glow, color-mix(in srgb, var(--accent) 50%, transparent));
}

.modal-actions .btn-secondary {
    background: var(--bg-card, rgba(255, 255, 255, 0.06));
    color: var(--text-secondary, rgba(255, 255, 255, 0.8));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
}

.modal-actions .btn-secondary:hover {
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
    color: var(--text-primary, #fff);
    transform: translateY(-2px);
}

/* === Theme Modal === */
.theme-slider-wrap {
    padding: var(--space-lg) var(--space-md);
    margin: var(--space-lg) 0;
}

.theme-slider-wrap input[type="range"] {
    width: 100%;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(to right,
        #ffd700 0%, #ffd700 9%,      /* Hacker */
        #6aaaff 9%, #6aaaff 18%,     /* Star Wars */
        #7c9fff 18%, #7c9fff 27%,    /* Midnight */
        #00b4d8 27%, #00b4d8 36%,    /* Ocean */
        #00ff66 36%, #00ff66 45%,    /* Matrix */
        #4ade80 45%, #4ade80 54%,    /* Forest */
        #daa520 54%, #daa520 63%,    /* Academie */
        #e07840 63%, #e07840 72%,    /* Desert */
        #f97316 72%, #f97316 81%,    /* Sunset */
        #ff6b9d 81%, #ff6b9d 90%,    /* Bubblegum */
        #bf6bff 90%, #bf6bff 100%    /* Fantasy */
    );
    outline: none;
    -webkit-appearance: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.theme-slider-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #000000;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 2px #ffffff;
    transition: var(--transition-normal);
}

.theme-slider-wrap input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.theme-preview {
    font-size: 1.3rem;
    text-align: center;
    color: var(--accent);
    margin-bottom: var(--space-lg);
}

/* =============================================
   JOURNAL SECTION
   ============================================= */

.journal-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.journal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.journal-header h2 {
    font-size: 1.1rem;
    font-weight: 400;
}

.journal-stats {
    display: flex;
    gap: var(--space-md);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.journal-input-row {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.journal-input-row select {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    outline: none;
}

.journal-input-row input {
    flex: 1;
    min-width: 200px;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    color: var(--text);
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition-normal);
}

.journal-input-row input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 15px var(--accent-glow);
}

.journal-input-row input::placeholder {
    color: var(--text-muted);
}

/* === Journal Entries === */
.journal-entries {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: var(--space-lg);
}

.journal-entry {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent);
    animation: popIn 0.2s ease;
}

.entry-category {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.entry-content {
    flex: 1;
}

.entry-text {
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 4px;
}

.entry-meta {
    display: flex;
    gap: var(--space-md);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.entry-energy {
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.7rem;
}

.entry-energy.high {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success);
}

.entry-energy.normal {
    background: rgba(251, 191, 36, 0.2);
    color: var(--warning);
}

.entry-energy.low {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

/* === Journal Report === */
.journal-report {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.report-content {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-top: var(--space-md);
}

.report-content:empty {
    display: none;
}

/* =============================================
   CHATBOT
   ============================================= */

.chatbot-fab {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: var(--transition-normal);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.chatbot-fab img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.chatbot-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 40px var(--accent-glow);
}

.chatbot-panel {
    position: fixed;
    bottom: 100px;
    right: 25px;
    width: 380px;
    height: 500px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    z-index: 100;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    overflow: hidden;
    transition: var(--transition-normal);
}

.chatbot-panel.large {
    width: 600px;
    height: 700px;
    bottom: 20px;
}

.chatbot-header {
    padding: var(--space-md);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chatbot-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.chatbot-title img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.chatbot-title span {
    font-weight: 500;
    color: var(--text);
}

.chatbot-controls {
    display: flex;
    gap: var(--space-xs);
}

.chatbot-controls button {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.chatbot-controls button:hover {
    background: var(--accent);
    color: var(--bg-primary);
}

.chatbot-messages {
    flex: 1;
    padding: var(--space-md);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.chat-msg {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    max-width: 85%;
    font-size: 0.9rem;
    line-height: 1.5;
    animation: popIn 0.2s ease;
}

.chat-msg.user {
    background: var(--accent);
    color: var(--bg-primary);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.chat-msg.assistant {
    background: var(--bg-primary);
    color: var(--text);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    border: 1px solid var(--border);
}

.chat-msg.loading {
    opacity: 0.6;
}

.chatbot-input-area {
    padding: var(--space-md);
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    display: flex;
    gap: var(--space-sm);
}

.chatbot-input-area input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
    transition: var(--transition-normal);
}

.chatbot-input-area input:focus {
    border-color: var(--accent);
}

.chatbot-input-area input::placeholder {
    color: var(--text-muted);
}

.chatbot-input-area button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: var(--bg-primary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition-normal);
}

.chatbot-input-area button:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px var(--accent-glow);
}

/* === Chatbot Responsive === */
@media (max-width: 768px) {
    .chatbot-panel {
        width: calc(100% - 30px);
        right: 15px;
        height: 60vh;
    }
    
    .chatbot-panel.large {
        width: calc(100% - 20px);
        height: 80vh;
        right: 10px;
        bottom: 10px;
    }
}

/* =============================================
   EFFETS VISUELS DE FOND - AU SURVOL UNIQUEMENT
   Chaque thème a son animation UNIQUE
   Professionnel et optimisé
   ============================================= */

/* === PRO / CEO - Animations subtiles === */

/* EXECUTIVE - Particules dorées qui flottent */
[data-theme="executive"] .app-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.6s ease;
}

[data-theme="executive"] .app-container:hover::before {
    opacity: 0.3;
    background-image:
        radial-gradient(1px 1px at 10% 20%, #d4af37 50%, transparent 50%),
        radial-gradient(1px 1px at 30% 60%, #f0d975 50%, transparent 50%),
        radial-gradient(1px 1px at 70% 40%, #d4af37 50%, transparent 50%),
        radial-gradient(1px 1px at 90% 80%, #f0d975 50%, transparent 50%);
    animation: floatingGold 20s ease-in-out infinite;
}

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

/* CORPORATE - Lignes de grille animées */
[data-theme="corporate"] .app-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.6s ease;
    background:
        repeating-linear-gradient(90deg, rgba(100, 149, 237, 0.05) 0px, transparent 1px, transparent 50px),
        repeating-linear-gradient(0deg, rgba(100, 149, 237, 0.05) 0px, transparent 1px, transparent 50px);
}

[data-theme="corporate"] .app-container:hover::before {
    opacity: 1;
    animation: gridMove 15s linear infinite;
}

@keyframes gridMove {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 50px 50px, 50px 50px; }
}

/* SLATE - Pas d'animation (sobre) */
[data-theme="slate"] .app-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.6s ease;
}

[data-theme="slate"] .app-container:hover::before {
    opacity: 0;
}

/* OBSIDIAN - Étoiles scintillantes */
[data-theme="obsidian"] .app-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.6s ease;
}

[data-theme="obsidian"] .app-container:hover::before {
    opacity: 1;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.8) 50%, transparent 50%),
        radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.6) 50%, transparent 50%),
        radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,0.9) 50%, transparent 50%),
        radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.7) 50%, transparent 50%);
    animation: starsTwinkle 3s ease-in-out infinite;
}

@keyframes starsTwinkle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ACADÉMIE - Animation supprimée (dérangeait le visuel) */
/* Effet pageFlip désactivé pour thème sobre et professionnel */

/* === CRÉATIF / FUN - Animations dynamiques === */

/* SUNSET - Animation rotatif supprimée (horrible selon user) */
/* Carré qui tourne désactivé pour ne pas déranger le visuel */

/* OCEAN - Vagues ondulantes */
[data-theme="ocean"] .app-container::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.6s ease;
}

[data-theme="ocean"] .app-container:hover::before {
    opacity: 0.2;
    background:
        repeating-linear-gradient(90deg, rgba(0, 180, 216, 0.3) 0px, transparent 20px, rgba(0, 180, 216, 0.3) 40px);
    animation: wavesFlow 8s ease-in-out infinite;
}

@keyframes wavesFlow {
    0%, 100% { transform: translateX(0) scaleY(1); }
    50% { transform: translateX(-40px) scaleY(1.1); }
}

/* FOREST - Feuilles qui tombent avec vent variable */
[data-theme="forest"] .app-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.5s ease;
}

[data-theme="forest"] .app-container:hover::before {
    opacity: 1;
    background-image:
        radial-gradient(2px 2px at 20% 30%, #4ade80 50%, transparent 50%),
        radial-gradient(2px 2px at 60% 70%, #fbbf24 50%, transparent 50%),
        radial-gradient(3px 3px at 50% 50%, #ef4444 50%, transparent 50%),
        radial-gradient(2px 2px at 80% 10%, #f97316 50%, transparent 50%),
        radial-gradient(2px 2px at 90% 60%, #a855f7 50%, transparent 50%),
        radial-gradient(3px 3px at 15% 80%, #00bfff 50%, transparent 50%),
        radial-gradient(2px 2px at 35% 20%, #22c55e 50%, transparent 50%);
    background-size: 200% 200%;
    background-position: 50% 0%;
    animation: fallingLeaves 15s linear infinite;
}

@keyframes fallingLeaves {
    0% {
        background-position:
            20% -20%, 60% -10%, 50% -30%,
            80% -15%, 90% -25%, 15% -20%, 35% -10%;
    }
    30% {
        background-position:
            25% 40%, 55% 30%, 48% 50%,
            85% 35%, 88% 45%, 18% 40%, 32% 30%;
        transform: translateX(20px);
    }
    50% {
        background-position:
            22% 60%, 58% 50%, 52% 70%,
            82% 55%, 92% 65%, 14% 60%, 38% 50%;
        transform: translateX(-15px);
    }
    80% {
        background-position:
            28% 90%, 52% 80%, 55% 100%,
            78% 85%, 95% 95%, 20% 90%, 30% 80%;
        transform: translateX(10px);
    }
    100% {
        background-position:
            30% 120%, 50% 110%, 60% 130%,
            75% 115%, 100% 125%, 25% 120%, 28% 110%;
        transform: translateX(0);
    }
}

/* BUBBLEGUM - Bulles qui montent */
[data-theme="bubblegum"] .app-container::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.6s ease;
}

[data-theme="bubblegum"] .app-container:hover::before {
    opacity: 0.5;
    background-image:
        radial-gradient(circle 30px at 10% 100%, rgba(255, 107, 157, 0.4), transparent),
        radial-gradient(circle 20px at 40% 100%, rgba(255, 158, 196, 0.3), transparent),
        radial-gradient(circle 25px at 70% 100%, rgba(255, 107, 157, 0.35), transparent),
        radial-gradient(circle 15px at 90% 100%, rgba(255, 158, 196, 0.4), transparent);
    animation: bubblesRise 12s ease-in-out infinite;
}

@keyframes bubblesRise {
    0% {
        background-position: 10% 100%, 40% 100%, 70% 100%, 90% 100%;
    }
    100% {
        background-position: 15% -20%, 35% -20%, 75% -20%, 85% -20%;
    }
}

/* AURORA - Aurores boréales ondulantes */
[data-theme="aurora"] .app-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.6s ease;
}

[data-theme="aurora"] .app-container:hover::before {
    opacity: 0.3;
    background:
        linear-gradient(180deg,
            transparent 0%,
            rgba(147, 197, 253, 0.3) 20%,
            rgba(196, 181, 253, 0.3) 50%,
            rgba(167, 243, 208, 0.3) 80%,
            transparent 100%);
    animation: auroraWave 15s ease-in-out infinite;
}

@keyframes auroraWave {
    0%, 100% { transform: skewY(0deg); }
    50% { transform: skewY(2deg); }
}

/* === GEEK / TECH - Effets techniques === */

/* MATRIX - Code qui descend */
[data-theme="matrix"] .app-container::before {
    content: '0 1 0 1 0 1 0 1 0 1 0 1';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.6s ease;
    color: #00ff66;
    font-family: monospace;
    font-size: 20px;
    line-height: 30px;
    white-space: pre-wrap;
    overflow: hidden;
}

[data-theme="matrix"] .app-container:hover::before {
    opacity: 0.2;
    animation: matrixRain 3s linear infinite;
}

@keyframes matrixRain {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* CYBERPUNK - Glitch effects */
[data-theme="cyberpunk"] .app-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.6s ease;
    background:
        repeating-linear-gradient(0deg, rgba(255, 0, 255, 0.1) 0px, transparent 2px, transparent 4px),
        repeating-linear-gradient(90deg, rgba(0, 255, 255, 0.1) 0px, transparent 2px, transparent 4px);
}

[data-theme="cyberpunk"] .app-container:hover::before {
    opacity: 1;
    animation: glitchEffect 0.5s steps(2) infinite;
}

@keyframes glitchEffect {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 2px); }
    50% { transform: translate(2px, -2px); }
    75% { transform: translate(-2px, -2px); }
    100% { transform: translate(0, 0); }
}

/* TERMINAL - Code qui défile */
[data-theme="terminal"] .app-container::before {
    content: '> system.init()_';
    position: fixed;
    bottom: 20px;
    left: 20px;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.6s ease;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    font-size: 14px;
}

[data-theme="terminal"] .app-container:hover::before {
    opacity: 0.6;
    animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* MIDNIGHT - Constellations pulsantes */
[data-theme="midnight"] .app-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.6s ease;
}

[data-theme="midnight"] .app-container:hover::before {
    opacity: 1;
    background-image:
        radial-gradient(circle 3px at 15% 20%, rgba(124, 159, 255, 0.9), transparent),
        radial-gradient(circle 2px at 35% 40%, rgba(160, 192, 255, 0.7), transparent),
        radial-gradient(circle 4px at 65% 25%, rgba(124, 159, 255, 1), transparent),
        radial-gradient(circle 2px at 80% 60%, rgba(192, 160, 255, 0.8), transparent),
        radial-gradient(circle 3px at 25% 70%, rgba(160, 192, 255, 0.9), transparent),
        radial-gradient(circle 2px at 50% 85%, rgba(124, 159, 255, 0.6), transparent),
        radial-gradient(circle 3px at 90% 30%, rgba(192, 160, 255, 0.85), transparent);
    animation: constellationPulse 6s ease-in-out infinite;
}

@keyframes constellationPulse {
    0%, 100% {
        opacity: 0.4;
        filter: brightness(1);
    }
    20% {
        opacity: 1;
        filter: brightness(1.5);
    }
    40% {
        opacity: 0.6;
        filter: brightness(0.8);
    }
    60% {
        opacity: 1;
        filter: brightness(1.3);
    }
    80% {
        opacity: 0.5;
        filter: brightness(0.9);
    }
}

/* =============================================
   BOUTONS HEADER - Élégants et discrets
   ============================================= */

.icon-btn {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.icon-btn:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    background: var(--accent-muted);
    box-shadow: 0 4px 12px var(--accent-glow, transparent);
}

/* =============================================
   MODAL SÉLECTEUR DE THÈMES v3.0
   Centré, scrollable, 40 thèmes
   ============================================= */

.theme-selector-modal {
    max-width: 900px;
    width: 95%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 36px 32px 28px;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--accent, #888) transparent;
}

.theme-selector-modal::-webkit-scrollbar {
    width: 6px;
}
.theme-selector-modal::-webkit-scrollbar-track {
    background: transparent;
}
.theme-selector-modal::-webkit-scrollbar-thumb {
    background: var(--accent, #888);
    border-radius: 3px;
}

.theme-selector-modal h3 {
    font-size: 1.6rem;
    margin-bottom: 28px;
    text-align: center;
    color: var(--text);
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* Close button (X) in top-right corner */
.theme-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-card, rgba(255, 255, 255, 0.05));
    color: var(--text-muted, #888);
    font-size: 1.5rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.theme-modal-close:hover {
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.12));
    color: var(--text, #fff);
    transform: scale(1.1);
}

.theme-category {
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
}

.theme-category:last-of-type {
    border-bottom: none;
    margin-bottom: 12px;
}

.category-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent, #888);
    margin-bottom: 6px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.category-desc {
    font-size: 0.8rem;
    color: var(--text-muted, #888);
    margin-bottom: 16px;
    font-style: italic;
    opacity: 0.8;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.theme-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px 10px;
    border: 2px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 10px;
    background: var(--bg-card, rgba(255,255,255,0.03));
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-card:hover {
    transform: translateY(-3px) scale(1.03);
    border-color: var(--accent, #888);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.theme-card.active {
    border-color: var(--accent, #888);
    box-shadow: 0 0 18px var(--accent-glow, rgba(255,255,255,0.15));
}

.theme-card.active::after {
    content: '';
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent, #888);
}

.theme-preview-mini {
    width: 100%;
    height: 60px;
    border-radius: 6px;
    margin-bottom: 8px;
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.25);
}

.theme-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text, #fff);
    margin-bottom: 2px;
    text-align: center;
}

.theme-subtitle {
    font-size: 0.68rem;
    color: var(--text-muted, #888);
    text-align: center;
    opacity: 0.85;
}

/* Responsive theme selector */
@media (max-width: 768px) {
    .theme-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .theme-selector-modal {
        padding: 28px 14px 20px;
        max-height: 90vh;
    }

    .theme-selector-modal h3 {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

    .theme-preview-mini {
        height: 50px;
    }
}

@media (max-width: 480px) {
    .theme-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ===== css/style-themes.css?v=2603061111 ===== */
/* =============================================
   PRODUCTIVEAPP - THEMES CSS v4.0
   60 thèmes organisés en 10 catégories
   ============================================= */

/* === FALLBACK PAR DÉFAUT (executive theme) === */
/* Appliqué sur :root avant que JavaScript ne charge le thème sauvegardé */
:root {
    --bg-primary: #0d0d0d; --bg-secondary: #1a1a1a; --bg-tertiary: #262626;
    --bg-card: rgba(212,175,55,0.05);
    --text: #f5f5f5; --text-muted: #a0a0a0;
    --accent: #d4af37; --accent-light: #f0d975; --accent-glow: rgba(212,175,55,0.2);
    --success: #5b64b8; --success-glow: rgba(91, 100, 184, 0.18);
    --warning: #c9a554; --danger: #8b4a4a;
    --border: rgba(212,175,55,0.15); --border-strong: rgba(212,175,55,0.3);
    --bubble-bg: linear-gradient(145deg, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.04) 100%);
    --bubble-border: rgba(212,175,55,0.3); --bubble-glow: none;
    --bubble-inprogress-bg: linear-gradient(145deg, rgba(212,175,55,0.15) 0%, rgba(212,175,55,0.08) 100%);
    --bubble-inprogress-border: rgba(212,175,55,0.6); --bubble-inprogress-glow: none;
    --bubble-done-bg: linear-gradient(145deg, rgba(91, 100, 184, 0.12) 0%, rgba(91, 100, 184, 0.06) 100%);
    --bubble-done-border: rgba(91, 100, 184, 0.4); --bubble-done-glow: none; --bubble-done-text: #7e89ff;
}

/* ==============================================
   CATÉGORIE 1: ÉLÉGANCE
   ============================================== */

[data-theme="executive"] {
    --bg-primary: #0d0d0d; --bg-secondary: #1a1a1a; --bg-tertiary: #262626;
    --bg-card: rgba(212,175,55,0.05);
    --text: #f5f5f5; --text-muted: #a0a0a0;
    --accent: #d4af37; --accent-light: #f0d975; --accent-glow: rgba(212,175,55,0.2);
    --success: #5b64b8; --success-glow: rgba(91, 100, 184, 0.18);
    --warning: #c9a554; --danger: #8b4a4a;
    --border: rgba(212,175,55,0.15); --border-strong: rgba(212,175,55,0.3);
    --bubble-bg: linear-gradient(145deg, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.04) 100%);
    --bubble-border: rgba(212,175,55,0.3); --bubble-glow: none;
    --bubble-inprogress-bg: linear-gradient(145deg, rgba(212,175,55,0.15) 0%, rgba(212,175,55,0.08) 100%);
    --bubble-inprogress-border: rgba(212,175,55,0.6); --bubble-inprogress-glow: none;
    --bubble-done-bg: linear-gradient(145deg, rgba(91, 100, 184, 0.12) 0%, rgba(91, 100, 184, 0.06) 100%);
    --bubble-done-border: rgba(91, 100, 184, 0.4); --bubble-done-glow: none; --bubble-done-text: #7e89ff;
}

[data-theme="corporate"] {
    --bg-primary: #0a1628; --bg-secondary: #0f1e35; --bg-tertiary: #152842;
    --bg-card: rgba(100,149,237,0.08);
    --text: #e8eef5; --text-muted: #8a9fb5;
    --accent: #6495ed; --accent-light: #89b4f7; --accent-glow: rgba(100,149,237,0.2);
    --success: #5064be; --success-glow: rgba(80, 100, 190, 0.18);
    --warning: #b8934a; --danger: #a65c5c;
    --border: rgba(100,149,237,0.2); --border-strong: rgba(100,149,237,0.4);
    --bubble-bg: linear-gradient(145deg, rgba(100,149,237,0.08) 0%, rgba(100,149,237,0.04) 100%);
    --bubble-border: rgba(100,149,237,0.3); --bubble-glow: none;
    --bubble-inprogress-bg: linear-gradient(145deg, rgba(100,149,237,0.15) 0%, rgba(100,149,237,0.08) 100%);
    --bubble-inprogress-border: rgba(100,149,237,0.6); --bubble-inprogress-glow: none;
    --bubble-done-bg: linear-gradient(145deg, rgba(80, 100, 190, 0.12) 0%, rgba(80, 100, 190, 0.06) 100%);
    --bubble-done-border: rgba(80, 100, 190, 0.4); --bubble-done-glow: none; --bubble-done-text: #7e89ff;
}

[data-theme="ivory"] {
    --bg-primary: #FAF7F0; --bg-secondary: #F5F0E6; --bg-tertiary: #EDE8DC;
    --bg-card: rgba(139,115,85,0.06);
    --text: #3D3226; --text-muted: #8B7B6B;
    --accent: #8B7355; --accent-light: #B8A080; --accent-glow: rgba(139,115,85,0.2);
    --success: #5e6fcb; --success-glow: rgba(94, 111, 203, 0.18);
    --warning: #C49840; --danger: #C45050;
    --border: rgba(139,115,85,0.15); --border-strong: rgba(139,115,85,0.3);
    --bubble-bg: linear-gradient(145deg, #F5F0E6 0%, #EDE8DC 100%);
    --bubble-border: rgba(139,115,85,0.25); --bubble-glow: none; --bubble-text-color: #3D3226;
    --bubble-inprogress-bg: linear-gradient(145deg, #EDE4D0 0%, #E5DCC4 100%);
    --bubble-inprogress-border: rgba(139,115,85,0.5); --bubble-inprogress-glow: none; --bubble-inprogress-text: #3D3226;
    --bubble-done-bg: linear-gradient(145deg, #e9d4ff 0%, #d7c9ff 100%);
    --bubble-done-border: #5e6fcb; --bubble-done-glow: none; --bubble-done-text: #304579;
}

[data-theme="sterling"] {
    --bg-primary: #1a1e24; --bg-secondary: #252b34; --bg-tertiary: #303845;
    --bg-card: rgba(192,200,210,0.06);
    --text: #E8ECF0; --text-muted: #8898A8;
    --accent: #C0C8D0; --accent-light: #D8DDE5; --accent-glow: rgba(192,200,210,0.2);
    --success: #5f71d8; --success-glow: rgba(95, 113, 216, 0.18);
    --warning: #B8A050; --danger: #B85858;
    --border: rgba(192,200,210,0.15); --border-strong: rgba(192,200,210,0.3);
    --bubble-bg: linear-gradient(145deg, rgba(192,200,210,0.08) 0%, rgba(192,200,210,0.04) 100%);
    --bubble-border: rgba(192,200,210,0.3); --bubble-glow: none;
    --bubble-inprogress-bg: linear-gradient(145deg, rgba(192,200,210,0.15) 0%, rgba(192,200,210,0.08) 100%);
    --bubble-inprogress-border: rgba(192,200,210,0.6); --bubble-inprogress-glow: none;
    --bubble-done-bg: linear-gradient(145deg, rgba(95, 113, 216, 0.12) 0%, rgba(95, 113, 216, 0.06) 100%);
    --bubble-done-border: rgba(95, 113, 216, 0.4); --bubble-done-glow: none; --bubble-done-text: #7f8cff;
}

[data-theme="diplomat"] {
    --bg-primary: #110407; --bg-secondary: #1E0A10; --bg-tertiary: #2C1019;
    --bg-card: rgba(210,30,58,0.13);
    --text: #FAEAED; --text-muted: #D09AAB;
    --accent: #DC1E3A; --accent-light: #FF3D5A; --accent-glow: rgba(220,30,58,0.40);
    --success: #6B7FFF; --success-glow: rgba(107, 127, 255, 0.28);
    --warning: #D9AA40; --danger: #FF3232;
    --border: rgba(220,30,58,0.32); --border-strong: rgba(220,30,58,0.62);
    --bubble-bg: linear-gradient(145deg, rgba(210,30,58,0.14) 0%, rgba(160,15,40,0.08) 100%);
    --bubble-border: rgba(210,30,58,0.50);
    --bubble-glow: 0 0 16px rgba(210,30,58,0.22), 0 0 4px rgba(210,30,58,0.12);
    --bubble-inprogress-bg: linear-gradient(145deg, rgba(210,30,58,0.24) 0%, rgba(160,15,40,0.16) 100%);
    --bubble-inprogress-border: rgba(210,30,58,0.82);
    --bubble-inprogress-glow: 0 0 22px rgba(210,30,58,0.38), 0 0 8px rgba(210,30,58,0.20);
    --bubble-done-bg: linear-gradient(145deg, rgba(107,127,255,0.18) 0%, rgba(80,100,220,0.11) 100%);
    --bubble-done-border: rgba(107,127,255,0.62);
    --bubble-done-glow: 0 0 16px rgba(107,127,255,0.28); --bubble-done-text: #9BA8FF;
}

[data-theme="academie"] {
    --bg-primary: #2c2f33; --bg-secondary: #36393f; --bg-tertiary: #40444b;
    --bg-card: rgba(218,185,130,0.12);
    --text: #f0ebe0; --text-muted: #b8b0a0;
    --accent: #daa520; --accent-light: #f0c850; --accent-glow: rgba(218,165,32,0.2);
    --success: #8c8bfd; --success-glow: rgba(140, 139, 253, 0.18);
    --warning: #e8b84a; --danger: #d4644a;
    --border: rgba(218,185,130,0.25); --border-strong: rgba(218,185,130,0.5);
    --bubble-bg: linear-gradient(145deg, #f7e8c8 0%, #e8d4a8 100%);
    --bubble-border: #b8954a; --bubble-glow: none; --bubble-text-color: #1a1510;
    --bubble-inprogress-bg: linear-gradient(145deg, #ffe8a0 0%, #f5d878 100%);
    --bubble-inprogress-border: #c9952a; --bubble-inprogress-glow: none; --bubble-inprogress-text: #1a1510;
    --bubble-done-bg: linear-gradient(145deg, #dbc7ff 0%, #c8b9ff 100%);
    --bubble-done-border: #878af4; --bubble-done-glow: none; --bubble-done-text: #292b4f;
}

/* ==============================================
   CATÉGORIE 2: NATURE
   ============================================== */

[data-theme="ocean"] {
    --bg-primary: #051923; --bg-secondary: #003554; --bg-tertiary: #006494;
    --bg-card: rgba(0,180,216,0.12);
    --text: #e8f4f8; --text-muted: #88b8d0;
    --accent: #00b4d8; --accent-light: #48cae4; --accent-glow: rgba(0,180,216,0.3);
    --success: #33a6ff; --success-glow: rgba(51, 166, 255, 0.3);
    --warning: #ffb703; --danger: #ef476f;
    --border: rgba(0,180,216,0.25); --border-strong: rgba(0,180,216,0.5);
    --bubble-bg: linear-gradient(135deg, rgba(0,180,216,0.2) 0%, rgba(0,100,148,0.1) 100%);
    --bubble-border: rgba(0,180,216,0.5); --bubble-glow: 0 4px 20px rgba(0,180,216,0.2);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(72,202,228,0.35) 0%, rgba(0,180,216,0.2) 100%);
    --bubble-inprogress-border: rgba(72,202,228,0.8); --bubble-inprogress-glow: 0 6px 25px rgba(72,202,228,0.3);
    --bubble-done-bg: linear-gradient(135deg, rgba(51, 166, 255, 0.25) 0%, rgba(39, 129, 246, 0.12) 100%);
    --bubble-done-border: rgba(51, 166, 255, 0.6); --bubble-done-glow: 0 4px 15px rgba(51, 166, 255, 0.2); --bubble-done-text: #33a6ff;
}

[data-theme="forest"] {
    --bg-primary: #050e03; --bg-secondary: #0d1c09; --bg-tertiary: #172a0f;
    --bg-card: rgba(34,197,94,0.10);
    --text: #e8fce8; --text-muted: #7dc899;
    --accent: #22c55e; --accent-light: #4ade80; --accent-glow: rgba(34,197,94,0.35);
    --success: #3f94ff; --success-glow: rgba(63, 148, 255, 0.3);
    --warning: #a3e635; --danger: #ef4444;
    --border: rgba(34,197,94,0.2); --border-strong: rgba(34,197,94,0.4);
    --bubble-bg: linear-gradient(135deg, rgba(74,170,100,0.2) 0%, rgba(30,120,60,0.1) 100%);
    --bubble-border: rgba(74,170,100,0.45); --bubble-glow: 0 4px 18px rgba(74,170,100,0.18);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(112,200,136,0.35) 0%, rgba(74,170,100,0.2) 100%);
    --bubble-inprogress-border: rgba(112,200,136,0.75); --bubble-inprogress-glow: 0 6px 22px rgba(112,200,136,0.28);
    --bubble-done-bg: linear-gradient(135deg, rgba(63, 148, 255, 0.25) 0%, rgba(44, 112, 198, 0.1) 100%);
    --bubble-done-border: rgba(63, 148, 255, 0.6); --bubble-done-glow: 0 4px 15px rgba(63, 148, 255, 0.2); --bubble-done-text: #3f94ff;
}

[data-theme="sunset"] {
    --bg-primary: #1a0a05; --bg-secondary: #2d1810; --bg-tertiary: #4a2515;
    --ds-card-bg: rgba(45,24,16,0.92); --ds-card-border: rgba(249,115,22,0.18); --ds-card-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 6px 20px rgba(26,10,5,0.4);
    --bg-card: rgba(249,115,22,0.12);
    --text: #ffe8d5; --text-muted: #d0a070;
    --accent: #f97316; --accent-light: #fb923c; --accent-glow: rgba(249,115,22,0.3);
    --success: #fbbf24; --success-glow: rgba(251,191,36,0.3);
    --warning: #fbbf24; --danger: #dc2626;
    --border: rgba(249,115,22,0.25); --border-strong: rgba(249,115,22,0.5);
    --bubble-bg: linear-gradient(135deg, rgba(220,38,38,0.2) 0%, rgba(249,115,22,0.25) 100%);
    --bubble-border: rgba(249,115,22,0.5); --bubble-glow: 0 4px 20px rgba(249,115,22,0.2);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(251,146,60,0.4) 0%, rgba(220,38,38,0.2) 100%);
    --bubble-inprogress-border: rgba(251,146,60,0.8); --bubble-inprogress-glow: 0 6px 25px rgba(251,146,60,0.3);
    --bubble-done-bg: linear-gradient(135deg, rgba(251,191,36,0.3) 0%, rgba(245,158,11,0.12) 100%);
    --bubble-done-border: rgba(251,191,36,0.65); --bubble-done-glow: 0 4px 15px rgba(251,191,36,0.2); --bubble-done-text: #fbbf24;
}

[data-theme="desert"] {
    --bg-primary: #1a1410; --bg-secondary: #2d2117; --bg-tertiary: #3d2e1f;
    --ds-card-bg: rgba(45,33,23,0.92); --ds-card-border: rgba(224,120,64,0.15);
    --bg-card: rgba(224,120,64,0.08);
    --text: #f5e6d3; --text-muted: #a89078;
    --accent: #e07840; --accent-light: #f4a261; --accent-glow: rgba(224,120,64,0.3);
    --success: #3f94ff; --success-glow: rgba(63, 148, 255, 0.3);
    --warning: #fbbf24; --danger: #ef4444;
    --border: rgba(224,120,64,0.2); --border-strong: rgba(224,120,64,0.5);
    --bubble-bg: linear-gradient(135deg, rgba(224,120,64,0.2) 0%, rgba(180,80,40,0.1) 100%);
    --bubble-border: rgba(224,120,64,0.5); --bubble-glow: 0 4px 20px rgba(224,120,64,0.2);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(244,162,97,0.35) 0%, rgba(224,120,64,0.2) 100%);
    --bubble-inprogress-border: rgba(244,162,97,0.7); --bubble-inprogress-glow: 0 6px 25px rgba(244,162,97,0.3);
    --bubble-done-bg: linear-gradient(135deg, rgba(63, 148, 255, 0.25) 0%, rgba(48, 122, 215, 0.12) 100%);
    --bubble-done-border: rgba(63, 148, 255, 0.6); --bubble-done-glow: 0 4px 15px rgba(63, 148, 255, 0.2); --bubble-done-text: #64b0ff;
}

[data-theme="lavender"] {
    --bg-primary: #150d1a; --bg-secondary: #231628; --bg-tertiary: #352240;
    --ds-card-bg: rgba(35,22,40,0.92); --ds-card-border: rgba(176,124,200,0.15);
    --bg-card: rgba(176,124,200,0.08);
    --text: #F0E5F5; --text-muted: #A888B8;
    --accent: #B07CC8; --accent-light: #D0A0E8; --accent-glow: rgba(176,124,200,0.25);
    --success: #7395ff; --success-glow: rgba(115, 149, 255, 0.25);
    --warning: #D8B040; --danger: #D86060;
    --border: rgba(176,124,200,0.2); --border-strong: rgba(176,124,200,0.4);
    --bubble-bg: linear-gradient(135deg, rgba(176,124,200,0.2) 0%, rgba(120,80,150,0.1) 100%);
    --bubble-border: rgba(176,124,200,0.45); --bubble-glow: 0 4px 18px rgba(176,124,200,0.18);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(208,160,232,0.35) 0%, rgba(176,124,200,0.2) 100%);
    --bubble-inprogress-border: rgba(208,160,232,0.75); --bubble-inprogress-glow: 0 6px 22px rgba(208,160,232,0.28);
    --bubble-done-bg: linear-gradient(135deg, rgba(115, 149, 255, 0.25) 0%, rgba(90, 121, 229, 0.12) 100%);
    --bubble-done-border: rgba(115, 149, 255, 0.6); --bubble-done-glow: 0 4px 15px rgba(115, 149, 255, 0.2); --bubble-done-text: #7395ff;
}

[data-theme="sakura"] {
    --bg-primary: #FFF0F3; --bg-secondary: #FDEAF0; --bg-tertiary: #F8DDED;
    --ds-card-bg: rgba(253,234,240,0.95); --ds-card-border: rgba(212,104,140,0.15);
    --bg-card: rgba(212,104,140,0.06);
    --text: #3A2530; --text-muted: #907080;
    --accent: #D4688C; --accent-light: #E890A8; --accent-glow: rgba(212,104,140,0.2);
    --success: #617be6; --success-glow: rgba(97, 123, 230, 0.18);
    --warning: #D4A840; --danger: #D85050;
    --border: rgba(212,104,140,0.15); --border-strong: rgba(212,104,140,0.3);
    --bubble-bg: linear-gradient(145deg, #F5ECF0 0%, #EDE2E8 100%);
    --bubble-border: rgba(212,104,140,0.25); --bubble-glow: none; --bubble-text-color: #3A2530;
    --bubble-inprogress-bg: linear-gradient(145deg, #F0DCE4 0%, #E8D0D8 100%);
    --bubble-inprogress-border: rgba(212,104,140,0.5); --bubble-inprogress-glow: none; --bubble-inprogress-text: #3A2530;
    --bubble-done-bg: linear-gradient(145deg, #e9d4ff 0%, #d7c9ff 100%);
    --bubble-done-border: #617be6; --bubble-done-glow: none; --bubble-done-text: #304579;
}

/* ==============================================
   CATÉGORIE 3: ATMOSPHÈRE
   ============================================== */

[data-theme="aurora"] {
    --bg-primary: #0a0d14; --bg-secondary: #151a25; --bg-tertiary: #1f2736;
    --bg-card: rgba(147,197,253,0.08);
    --text: #e8f0fe; --text-muted: #94a3b8;
    --accent: #93c5fd; --accent-light: #bfdbfe; --accent-glow: rgba(147,197,253,0.3);
    --success: #9ac9ff; --success-glow: rgba(154, 201, 255, 0.3);
    --warning: #fcd34d; --danger: #fca5a5;
    --border: rgba(147,197,253,0.2); --border-strong: rgba(147,197,253,0.4);
    --bubble-bg: linear-gradient(135deg, rgba(147,197,253,0.2) 0%, rgba(196,181,253,0.12) 50%, rgba(134,239,172,0.08) 100%);
    --bubble-border: rgba(147,197,253,0.4); --bubble-glow: 0 4px 20px rgba(147,197,253,0.15);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(196,181,253,0.35) 0%, rgba(147,197,253,0.2) 100%);
    --bubble-inprogress-border: rgba(196,181,253,0.7); --bubble-inprogress-glow: 0 6px 25px rgba(196,181,253,0.25);
    --bubble-done-bg: linear-gradient(135deg, rgba(154, 201, 255, 0.25) 0%, rgba(184, 212, 255, 0.12) 100%);
    --bubble-done-border: rgba(154, 201, 255, 0.6); --bubble-done-glow: 0 4px 15px rgba(154, 201, 255, 0.2); --bubble-done-text: #9ac9ff;
}

[data-theme="midnight"] {
    --bg-primary: #0d0d18; --bg-secondary: #14142a; --bg-tertiary: #1c1c3c;
    --bg-card: rgba(124,159,255,0.08);
    --text: #e0e6ff; --text-muted: #8898c8;
    --accent: #7c9fff; --accent-light: #a0c0ff; --accent-glow: rgba(124,159,255,0.3);
    --success: #94b5ff; --success-glow: rgba(148, 181, 255, 0.3);
    --warning: #ffcc70; --danger: #ff7080;
    --border: rgba(124,159,255,0.25); --border-strong: rgba(124,159,255,0.5);
    --bubble-bg: linear-gradient(135deg, rgba(124,159,255,0.2) 0%, rgba(100,130,220,0.1) 100%);
    --bubble-border: rgba(124,159,255,0.5); --bubble-glow: 0 6px 25px rgba(124,159,255,0.2);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(160,192,255,0.35) 0%, rgba(124,159,255,0.2) 100%);
    --bubble-inprogress-border: rgba(160,192,255,0.8); --bubble-inprogress-glow: 0 8px 30px rgba(160,192,255,0.3);
    --bubble-done-bg: linear-gradient(135deg, rgba(148, 181, 255, 0.25) 0%, rgba(111, 145, 255, 0.12) 100%);
    --bubble-done-border: rgba(148, 181, 255, 0.6); --bubble-done-glow: 0 4px 15px rgba(148, 181, 255, 0.2); --bubble-done-text: #94b5ff;
}

[data-theme="twilight"] {
    --bg-primary: #14081a; --bg-secondary: #22102d; --bg-tertiary: #351845;
    --bg-card: rgba(196,144,224,0.08);
    --text: #F0E5FA; --text-muted: #A888C0;
    --accent: #C490E0; --accent-light: #D8B0F0; --accent-glow: rgba(196,144,224,0.3);
    --success: #76a1ff; --success-glow: rgba(118, 161, 255, 0.3);
    --warning: #E8C050; --danger: #E06060;
    --border: rgba(196,144,224,0.2); --border-strong: rgba(196,144,224,0.4);
    --bubble-bg: linear-gradient(135deg, rgba(196,144,224,0.2) 0%, rgba(140,100,180,0.1) 100%);
    --bubble-border: rgba(196,144,224,0.45); --bubble-glow: 0 4px 18px rgba(196,144,224,0.18);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(216,176,240,0.35) 0%, rgba(196,144,224,0.2) 100%);
    --bubble-inprogress-border: rgba(216,176,240,0.75); --bubble-inprogress-glow: 0 6px 22px rgba(216,176,240,0.28);
    --bubble-done-bg: linear-gradient(135deg, rgba(118, 161, 255, 0.25) 0%, rgba(91, 128, 240, 0.12) 100%);
    --bubble-done-border: rgba(118, 161, 255, 0.6); --bubble-done-glow: 0 4px 15px rgba(118, 161, 255, 0.2); --bubble-done-text: #76a1ff;
}

[data-theme="candlelight"] {
    --bg-primary: #1a1208; --bg-secondary: #2d200e; --bg-tertiary: #3d2e16;
    --bg-card: rgba(232,168,64,0.08);
    --text: #F5ECD3; --text-muted: #B8A070;
    --accent: #E8A840; --accent-light: #F0C060; --accent-glow: rgba(232,168,64,0.3);
    --success: #6e86f2; --success-glow: rgba(110, 134, 242, 0.25);
    --warning: #E8C040; --danger: #D85050;
    --border: rgba(232,168,64,0.2); --border-strong: rgba(232,168,64,0.4);
    --bubble-bg: linear-gradient(135deg, rgba(232,168,64,0.2) 0%, rgba(180,128,40,0.1) 100%);
    --bubble-border: rgba(232,168,64,0.45); --bubble-glow: 0 4px 18px rgba(232,168,64,0.18);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(240,192,96,0.35) 0%, rgba(232,168,64,0.2) 100%);
    --bubble-inprogress-border: rgba(240,192,96,0.75); --bubble-inprogress-glow: 0 6px 22px rgba(240,192,96,0.28);
    --bubble-done-bg: linear-gradient(135deg, rgba(110, 134, 242, 0.25) 0%, rgba(85, 108, 194, 0.12) 100%);
    --bubble-done-border: rgba(110, 134, 242, 0.6); --bubble-done-glow: 0 4px 15px rgba(110, 134, 242, 0.2); --bubble-done-text: #6e86f2;
}

[data-theme="moonlit"] {
    --bg-primary: #0d1018; --bg-secondary: #161c28; --bg-tertiary: #1f2838;
    --bg-card: rgba(160,184,216,0.06);
    --text: #E0E8F5; --text-muted: #8098B0;
    --accent: #A0B8D8; --accent-light: #C0D0E8; --accent-glow: rgba(160,184,216,0.2);
    --success: #7395ff; --success-glow: rgba(115, 149, 255, 0.2);
    --warning: #D8B848; --danger: #D86868;
    --border: rgba(160,184,216,0.15); --border-strong: rgba(160,184,216,0.3);
    --bubble-bg: linear-gradient(135deg, rgba(160,184,216,0.15) 0%, rgba(120,148,180,0.08) 100%);
    --bubble-border: rgba(160,184,216,0.35); --bubble-glow: 0 4px 15px rgba(160,184,216,0.12);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(192,208,232,0.3) 0%, rgba(160,184,216,0.18) 100%);
    --bubble-inprogress-border: rgba(192,208,232,0.7); --bubble-inprogress-glow: 0 6px 20px rgba(192,208,232,0.22);
    --bubble-done-bg: linear-gradient(135deg, rgba(115, 149, 255, 0.2) 0%, rgba(90, 121, 229, 0.1) 100%);
    --bubble-done-border: rgba(115, 149, 255, 0.5); --bubble-done-glow: 0 4px 12px rgba(115, 149, 255, 0.15); --bubble-done-text: #7395ff;
}

[data-theme="golden-hour"] {
    --bg-primary: #1a1008; --bg-secondary: #2d1c10; --bg-tertiary: #4a2c18;
    --bg-card: rgba(212,160,64,0.08);
    --text: #F5E8D0; --text-muted: #B8A068;
    --accent: #D4A040; --accent-light: #E8C060; --accent-glow: rgba(212,160,64,0.3);
    --success: #6e86f2; --success-glow: rgba(110, 134, 242, 0.25);
    --warning: #E0B840; --danger: #D85050;
    --border: rgba(212,160,64,0.2); --border-strong: rgba(212,160,64,0.4);
    --bubble-bg: linear-gradient(135deg, rgba(212,160,64,0.2) 0%, rgba(170,120,40,0.1) 100%);
    --bubble-border: rgba(212,160,64,0.45); --bubble-glow: 0 4px 18px rgba(212,160,64,0.18);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(232,192,96,0.35) 0%, rgba(212,160,64,0.2) 100%);
    --bubble-inprogress-border: rgba(232,192,96,0.75); --bubble-inprogress-glow: 0 6px 22px rgba(232,192,96,0.28);
    --bubble-done-bg: linear-gradient(135deg, rgba(110, 134, 242, 0.25) 0%, rgba(85, 108, 194, 0.12) 100%);
    --bubble-done-border: rgba(110, 134, 242, 0.6); --bubble-done-glow: 0 4px 15px rgba(110, 134, 242, 0.2); --bubble-done-text: #6e86f2;
}

[data-theme="storm"] {
    --bg-primary: #0a0e14; --bg-secondary: #141a22; --bg-tertiary: #1e2832;
    --bg-card: rgba(107,141,181,0.06);
    --text: #D8E4F0; --text-muted: #7890A8;
    --accent: #6B8DB5; --accent-light: #90B0D0; --accent-glow: rgba(107,141,181,0.25);
    --success: #6387ff; --success-glow: rgba(99, 135, 255, 0.25);
    --warning: #C8A840; --danger: #C85858;
    --border: rgba(107,141,181,0.18); --border-strong: rgba(107,141,181,0.35);
    --bubble-bg: linear-gradient(135deg, rgba(107,141,181,0.18) 0%, rgba(74,112,152,0.09) 100%);
    --bubble-border: rgba(107,141,181,0.4); --bubble-glow: 0 4px 18px rgba(107,141,181,0.15);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(144,176,208,0.32) 0%, rgba(107,141,181,0.18) 100%);
    --bubble-inprogress-border: rgba(144,176,208,0.72); --bubble-inprogress-glow: 0 6px 22px rgba(144,176,208,0.25);
    --bubble-done-bg: linear-gradient(135deg, rgba(99, 135, 255, 0.22) 0%, rgba(78, 112, 209, 0.1) 100%);
    --bubble-done-border: rgba(99, 135, 255, 0.55); --bubble-done-glow: 0 4px 14px rgba(99, 135, 255, 0.18); --bubble-done-text: #6387ff;
}

/* ==============================================
   CATÉGORIE 4: MODERNE
   ============================================== */

[data-theme="bubblegum"] {
    --bg-primary: #1a0a14; --bg-secondary: #2d1025; --bg-tertiary: #3f1836;
    --bg-card: rgba(255,107,157,0.12);
    --text: #ffe8f5; --text-muted: #d090b0;
    --accent: #ff6b9d; --accent-light: #ff9ec4; --accent-glow: rgba(255,107,157,0.3);
    --success: #38bdf8; --success-glow: rgba(56,189,248,0.3);
    --warning: #ffd93d; --danger: #ff6b6b;
    --border: rgba(255,107,157,0.25); --border-strong: rgba(255,107,157,0.5);
    --bubble-bg: linear-gradient(135deg, rgba(255,107,157,0.2) 0%, rgba(150,50,90,0.1) 100%);
    --bubble-border: rgba(255,107,157,0.5); --bubble-glow: 0 4px 20px rgba(255,107,157,0.18);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(255,158,196,0.35) 0%, rgba(255,107,157,0.2) 100%);
    --bubble-inprogress-border: rgba(255,158,196,0.8); --bubble-inprogress-glow: 0 6px 25px rgba(255,158,196,0.28);
    --bubble-done-bg: linear-gradient(135deg, rgba(56,189,248,0.25) 0%, rgba(14,165,233,0.12) 100%);
    --bubble-done-border: rgba(56,189,248,0.6); --bubble-done-glow: 0 4px 15px rgba(56,189,248,0.2); --bubble-done-text: #38bdf8;
}

[data-theme="neon"] {
    --bg-primary: #0a0014; --bg-secondary: #14062a; --bg-tertiary: #200e40;
    --bg-card: rgba(255,20,147,0.08);
    --text: #F5E0FF; --text-muted: #A070C0;
    --accent: #FF1493; --accent-light: #FF69B4; --accent-glow: rgba(255,20,147,0.4);
    --success: #39caff; --success-glow: rgba(57, 202, 255, 0.4);
    --warning: #FFD700; --danger: #FF4040;
    --border: rgba(255,20,147,0.3); --border-strong: rgba(255,20,147,0.6);
    --bubble-bg: linear-gradient(135deg, rgba(255,20,147,0.25) 0%, rgba(136,0,255,0.12) 100%);
    --bubble-border: rgba(255,20,147,0.6); --bubble-glow: 0 6px 28px rgba(255,20,147,0.3);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(255,105,180,0.4) 0%, rgba(255,20,147,0.25) 100%);
    --bubble-inprogress-border: rgba(255,105,180,0.9); --bubble-inprogress-glow: 0 8px 35px rgba(255,105,180,0.4);
    --bubble-done-bg: linear-gradient(135deg, rgba(57, 202, 255, 0.3) 0%, rgba(42, 150, 255, 0.15) 100%);
    --bubble-done-border: rgba(57, 202, 255, 0.7); --bubble-done-glow: 0 6px 25px rgba(57, 202, 255, 0.3); --bubble-done-text: #39caff;
}

[data-theme="pastel"] {
    --bg-primary: #F8F2FA; --bg-secondary: #F0E8F4; --bg-tertiary: #E8DEEE;
    --bg-card: rgba(168,136,200,0.06);
    --text: #3A3040; --text-muted: #887898;
    --accent: #A888C8; --accent-light: #C8A8E0; --accent-glow: rgba(168,136,200,0.2);
    --success: #7395ff; --success-glow: rgba(115, 149, 255, 0.18);
    --warning: #D4B050; --danger: #D07070;
    --border: rgba(168,136,200,0.15); --border-strong: rgba(168,136,200,0.3);
    --bubble-bg: linear-gradient(145deg, #F0E8F4 0%, #E8DEEE 100%);
    --bubble-border: rgba(168,136,200,0.25); --bubble-glow: none; --bubble-text-color: #3A3040;
    --bubble-inprogress-bg: linear-gradient(145deg, #E8DCF0 0%, #DCD0E8 100%);
    --bubble-inprogress-border: rgba(168,136,200,0.5); --bubble-inprogress-glow: none; --bubble-inprogress-text: #3A3040;
    --bubble-done-bg: linear-gradient(145deg, #e5d4ff 0%, #d4c9ff 100%);
    --bubble-done-border: #7395ff; --bubble-done-glow: none; --bubble-done-text: #324c8d;
}

[data-theme="retrowave"] {
    --bg-primary: #0d0520; --bg-secondary: #1a0c38; --bg-tertiary: #2a1450;
    --bg-card: rgba(255,110,199,0.08);
    --text: #F0E0FF; --text-muted: #A080C8;
    --accent: #FF6EC7; --accent-light: #FF90D8; --accent-glow: rgba(255,110,199,0.4);
    --success: #32b3ff; --success-glow: rgba(50, 179, 255, 0.35);
    --warning: #FFD700; --danger: #FF4060;
    --border: rgba(255,110,199,0.25); --border-strong: rgba(255,110,199,0.5);
    --bubble-bg: linear-gradient(135deg, rgba(255,110,199,0.22) 0%, rgba(136,102,255,0.12) 100%);
    --bubble-border: rgba(255,110,199,0.55); --bubble-glow: 0 6px 25px rgba(255,110,199,0.25);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(255,144,216,0.38) 0%, rgba(255,110,199,0.22) 100%);
    --bubble-inprogress-border: rgba(255,144,216,0.85); --bubble-inprogress-glow: 0 8px 32px rgba(255,144,216,0.35);
    --bubble-done-bg: linear-gradient(135deg, rgba(50, 179, 255, 0.28) 0%, rgba(38, 135, 255, 0.14) 100%);
    --bubble-done-border: rgba(50, 179, 255, 0.65); --bubble-done-glow: 0 5px 20px rgba(50, 179, 255, 0.25); --bubble-done-text: #32b3ff;
}

[data-theme="mint"] {
    --bg-primary: #F2FAF6; --bg-secondary: #E4F5EC; --bg-tertiary: #D4EEE2;
    --bg-card: rgba(61,168,120,0.06);
    --text: #1A3A2A; --text-muted: #588870;
    --accent: #3DA878; --accent-light: #60C898; --accent-glow: rgba(61,168,120,0.2);
    --success: #4282f0; --success-glow: rgba(66, 130, 240, 0.18);
    --warning: #C4A040; --danger: #D05050;
    --border: rgba(61,168,120,0.15); --border-strong: rgba(61,168,120,0.3);
    --bubble-bg: linear-gradient(145deg, #E4F5EC 0%, #D4EEE2 100%);
    --bubble-border: rgba(61,168,120,0.25); --bubble-glow: none; --bubble-text-color: #1A3A2A;
    --bubble-inprogress-bg: linear-gradient(145deg, #D0EEE0 0%, #C0E8D4 100%);
    --bubble-inprogress-border: rgba(61,168,120,0.5); --bubble-inprogress-glow: none; --bubble-inprogress-text: #1A3A2A;
    --bubble-done-bg: linear-gradient(145deg, #d3d0ff 0%, #c3c6ff 100%);
    --bubble-done-border: #4282f0; --bubble-done-glow: none; --bubble-done-text: #24457e;
}

[data-theme="coral"] {
    --bg-primary: #1a0e0e; --bg-secondary: #2d1818; --bg-tertiary: #3d2525;
    --bg-card: rgba(255,111,97,0.08);
    --text: #FFE5E0; --text-muted: #C09088;
    --accent: #FF6F61; --accent-light: #FF9488; --accent-glow: rgba(255,111,97,0.3);
    --success: #5fa1ff; --success-glow: rgba(95, 161, 255, 0.3);
    --warning: #F0B840; --danger: #FF4040;
    --border: rgba(255,111,97,0.2); --border-strong: rgba(255,111,97,0.4);
    --bubble-bg: linear-gradient(135deg, rgba(255,111,97,0.2) 0%, rgba(200,70,60,0.1) 100%);
    --bubble-border: rgba(255,111,97,0.48); --bubble-glow: 0 4px 18px rgba(255,111,97,0.18);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(255,148,136,0.35) 0%, rgba(255,111,97,0.2) 100%);
    --bubble-inprogress-border: rgba(255,148,136,0.78); --bubble-inprogress-glow: 0 6px 22px rgba(255,148,136,0.28);
    --bubble-done-bg: linear-gradient(135deg, rgba(95, 161, 255, 0.25) 0%, rgba(70, 132, 252, 0.12) 100%);
    --bubble-done-border: rgba(95, 161, 255, 0.6); --bubble-done-glow: 0 4px 15px rgba(95, 161, 255, 0.2); --bubble-done-text: #5fa1ff;
}

/* ==============================================
   CATÉGORIE 5: MINIMALISTE
   ============================================== */

[data-theme="obsidian"] {
    --bg-primary: #0b0b0b; --bg-secondary: #141414; --bg-tertiary: #1e1e1e;
    --bg-card: rgba(255,255,255,0.03);
    --text: #e3e3e3; --text-muted: #8b8b8b;
    --accent: #a0a0a0; --accent-light: #c0c0c0; --accent-glow: rgba(160,160,160,0.2);
    --success: #6d73dc; --success-glow: rgba(109, 115, 220, 0.18);
    --warning: #b8a56b; --danger: #a66b6b;
    --border: rgba(255,255,255,0.1); --border-strong: rgba(255,255,255,0.2);
    --bubble-bg: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
    --bubble-border: rgba(255,255,255,0.12); --bubble-glow: none;
    --bubble-inprogress-bg: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.04) 100%);
    --bubble-inprogress-border: rgba(160,160,160,0.5); --bubble-inprogress-glow: none;
    --bubble-done-bg: linear-gradient(145deg, rgba(109, 115, 220, 0.1) 0%, rgba(109, 115, 220, 0.05) 100%);
    --bubble-done-border: rgba(109, 115, 220, 0.35); --bubble-done-glow: none; --bubble-done-text: #9594ff;
}

[data-theme="paper"] {
    --bg-primary: #F8F4EC; --bg-secondary: #F0ECE2; --bg-tertiary: #E8E4D8;
    --bg-card: rgba(139,123,101,0.05);
    --text: #3A3228; --text-muted: #887868;
    --accent: #8B7B65; --accent-light: #B0A088; --accent-glow: rgba(139,123,101,0.2);
    --success: #5e6fcb; --success-glow: rgba(94, 111, 203, 0.18);
    --warning: #B89840; --danger: #C05050;
    --border: rgba(139,123,101,0.15); --border-strong: rgba(139,123,101,0.3);
    --bubble-bg: linear-gradient(145deg, #F0ECE2 0%, #E8E4D8 100%);
    --bubble-border: rgba(139,123,101,0.2); --bubble-glow: none; --bubble-text-color: #3A3228;
    --bubble-inprogress-bg: linear-gradient(145deg, #E8E0D0 0%, #E0D8C8 100%);
    --bubble-inprogress-border: rgba(139,123,101,0.45); --bubble-inprogress-glow: none; --bubble-inprogress-text: #3A3228;
    --bubble-done-bg: linear-gradient(145deg, #e6d0ff 0%, #d6c7ff 100%);
    --bubble-done-border: #5e6fcb; --bubble-done-glow: none; --bubble-done-text: #304579;
}

[data-theme="clay"] {
    --bg-primary: #1D1108; --bg-secondary: #2D1C10; --bg-tertiary: #3D2A1A;
    --bg-card: rgba(196,120,74,0.08);
    --text: #F0E0CC; --text-muted: #C09870;
    --accent: #C4783C; --accent-light: #E09060; --accent-glow: rgba(196,120,60,0.2);
    --success: #6f87fa; --success-glow: rgba(111, 135, 250, 0.18);
    --warning: #C8A840; --danger: #C86060;
    --border: rgba(196,120,74,0.18); --border-strong: rgba(196,120,74,0.35);
    --bubble-bg: linear-gradient(145deg, rgba(184,152,120,0.1) 0%, rgba(184,152,120,0.05) 100%);
    --bubble-border: rgba(184,152,120,0.28); --bubble-glow: none;
    --bubble-inprogress-bg: linear-gradient(145deg, rgba(184,152,120,0.18) 0%, rgba(184,152,120,0.1) 100%);
    --bubble-inprogress-border: rgba(184,152,120,0.55); --bubble-inprogress-glow: none;
    --bubble-done-bg: linear-gradient(145deg, rgba(111, 135, 250, 0.12) 0%, rgba(111, 135, 250, 0.06) 100%);
    --bubble-done-border: rgba(111, 135, 250, 0.4); --bubble-done-glow: none; --bubble-done-text: #7e95ff;
}

[data-theme="porcelain"] {
    --bg-primary: #F2F5FA; --bg-secondary: #E8EEF5; --bg-tertiary: #DEE6F0;
    --bg-card: rgba(104,136,168,0.05);
    --text: #2A3440; --text-muted: #6880A0;
    --accent: #6888A8; --accent-light: #88A8C8; --accent-glow: rgba(104,136,168,0.2);
    --success: #557ae4; --success-glow: rgba(85, 122, 228, 0.18);
    --warning: #C4A040; --danger: #C85050;
    --border: rgba(104,136,168,0.12); --border-strong: rgba(104,136,168,0.25);
    --bubble-bg: linear-gradient(145deg, #E8EEF5 0%, #DEE6F0 100%);
    --bubble-border: rgba(104,136,168,0.2); --bubble-glow: none; --bubble-text-color: #2A3440;
    --bubble-inprogress-bg: linear-gradient(145deg, #DCE4F0 0%, #D0DCE8 100%);
    --bubble-inprogress-border: rgba(104,136,168,0.45); --bubble-inprogress-glow: none; --bubble-inprogress-text: #2A3440;
    --bubble-done-bg: linear-gradient(145deg, #e2d4ff 0%, #d0c9ff 100%);
    --bubble-done-border: #557ae4; --bubble-done-glow: none; --bubble-done-text: #314784;
}

[data-theme="espresso"] {
    --bg-primary: #140E0A; --bg-secondary: #241A12; --bg-tertiary: #34261C;
    --bg-card: rgba(168,120,72,0.06);
    --text: #F0E4D4; --text-muted: #A89070;
    --accent: #A87848; --accent-light: #C89868; --accent-glow: rgba(168,120,72,0.2);
    --success: #607ade; --success-glow: rgba(96, 122, 222, 0.18);
    --warning: #C8A040; --danger: #C85858;
    --border: rgba(168,120,72,0.15); --border-strong: rgba(168,120,72,0.3);
    --bubble-bg: linear-gradient(145deg, rgba(168,120,72,0.1) 0%, rgba(168,120,72,0.05) 100%);
    --bubble-border: rgba(168,120,72,0.28); --bubble-glow: none;
    --bubble-inprogress-bg: linear-gradient(145deg, rgba(168,120,72,0.18) 0%, rgba(168,120,72,0.1) 100%);
    --bubble-inprogress-border: rgba(168,120,72,0.55); --bubble-inprogress-glow: none;
    --bubble-done-bg: linear-gradient(145deg, rgba(96, 122, 222, 0.12) 0%, rgba(96, 122, 222, 0.06) 100%);
    --bubble-done-border: rgba(96, 122, 222, 0.4); --bubble-done-glow: none; --bubble-done-text: #7d90ff;
}

/* ==============================================
   CATÉGORIE 6: TECH
   ============================================== */

[data-theme="matrix"] {
    --bg-primary: #0a0f0a; --bg-secondary: #0f1a0f; --bg-tertiary: #152015;
    --bg-card: rgba(0,255,102,0.08);
    --text: #e0ffe0; --text-muted: #70b070;
    --accent: #00ff66; --accent-light: #4dff8d; --accent-glow: rgba(0,255,102,0.4);
    --success: #2994ff; --success-glow: rgba(41, 148, 255, 0.4);
    --warning: #66ff00; --danger: #ff3333;
    --border: rgba(0,255,102,0.2); --border-strong: rgba(0,255,102,0.5);
    --bubble-bg: linear-gradient(135deg, rgba(0,255,102,0.22) 0%, rgba(102,255,0,0.12) 100%);
    --bubble-border: rgba(0,255,102,0.5); --bubble-glow: 0 8px 35px rgba(0,255,102,0.35);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(102,255,0,0.5) 0%, rgba(0,255,102,0.35) 100%);
    --bubble-inprogress-border: rgba(102,255,0,0.9); --bubble-inprogress-glow: 0 12px 60px rgba(102,255,0,0.7);
    --bubble-done-bg: linear-gradient(135deg, rgba(37, 131, 232, 0.22) 0%, rgba(25, 88, 157, 0.1) 100%);
    --bubble-done-border: rgba(37, 131, 232, 0.55); --bubble-done-glow: 0 6px 25px rgba(37, 131, 232, 0.3); --bubble-done-text: #37c0ff;
}

[data-theme="cyberpunk"] {
    --bg-primary: #0d0221; --bg-secondary: #190b3a; --bg-tertiary: #2a1454;
    --bg-card: rgba(255,0,255,0.08);
    --text: #f0e6ff; --text-muted: #b088d8;
    --accent: #ff00ff; --accent-light: #ff66ff; --accent-glow: rgba(255,0,255,0.5);
    --success: #3dd5ff; --success-glow: rgba(61, 213, 255, 0.5);
    --warning: #ffff00; --danger: #ff0080;
    --border: rgba(255,0,255,0.3); --border-strong: rgba(255,0,255,0.6);
    --bubble-bg: linear-gradient(135deg, rgba(255,0,255,0.22) 0%, rgba(138,43,226,0.12) 100%);
    --bubble-border: rgba(255,0,255,0.55); --bubble-glow: 0 8px 30px rgba(255,0,255,0.35);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(255,0,255,0.4) 0%, rgba(255,105,180,0.25) 100%);
    --bubble-inprogress-border: rgba(255,0,255,0.9); --bubble-inprogress-glow: 0 10px 45px rgba(255,0,255,0.5);
    --bubble-done-bg: linear-gradient(135deg, rgba(61, 213, 255, 0.3) 0%, rgba(45, 159, 255, 0.15) 100%);
    --bubble-done-border: rgba(61, 213, 255, 0.75); --bubble-done-glow: 0 8px 35px rgba(61, 213, 255, 0.4); --bubble-done-text: #3dd5ff;
}

[data-theme="terminal"] {
    --bg-primary: #0a0800; --bg-secondary: #141000; --bg-tertiary: #1e1800;
    --bg-card: rgba(255,176,0,0.06);
    --text: #FFE0A0; --text-muted: #B89848;
    --accent: #FFB000; --accent-light: #FFD060; --accent-glow: rgba(255,176,0,0.4);
    --success: #87a6ff; --success-glow: rgba(135, 166, 255, 0.35);
    --warning: #FFD700; --danger: #FF4040;
    --border: rgba(255,176,0,0.25); --border-strong: rgba(255,176,0,0.5);
    --bubble-bg: linear-gradient(135deg, rgba(255,176,0,0.18) 0%, rgba(200,140,0,0.08) 100%);
    --bubble-border: rgba(255,176,0,0.45); --bubble-glow: 0 6px 25px rgba(255,176,0,0.25);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(255,208,96,0.35) 0%, rgba(255,176,0,0.2) 100%);
    --bubble-inprogress-border: rgba(255,208,96,0.8); --bubble-inprogress-glow: 0 8px 35px rgba(255,208,96,0.4);
    --bubble-done-bg: linear-gradient(135deg, rgba(135, 166, 255, 0.25) 0%, rgba(106, 134, 236, 0.12) 100%);
    --bubble-done-border: rgba(135, 166, 255, 0.6); --bubble-done-glow: 0 5px 20px rgba(135, 166, 255, 0.25); --bubble-done-text: #87a6ff;
}

[data-theme="tron"] {
    --bg-primary: #000810; --bg-secondary: #001020; --bg-tertiary: #001830;
    --bg-card: rgba(0,212,255,0.06);
    --text: #D0F0FF; --text-muted: #6098C0;
    --accent: #00D4FF; --accent-light: #40E0FF; --accent-glow: rgba(0,212,255,0.4);
    --success: #38c5ff; --success-glow: rgba(56, 197, 255, 0.35);
    --warning: #FFDD00; --danger: #FF4060;
    --border: rgba(0,212,255,0.2); --border-strong: rgba(0,212,255,0.45);
    --bubble-bg: linear-gradient(135deg, rgba(0,212,255,0.18) 0%, rgba(0,128,160,0.08) 100%);
    --bubble-border: rgba(0,212,255,0.45); --bubble-glow: 0 6px 25px rgba(0,212,255,0.25);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(64,224,255,0.35) 0%, rgba(0,212,255,0.2) 100%);
    --bubble-inprogress-border: rgba(64,224,255,0.8); --bubble-inprogress-glow: 0 8px 35px rgba(64,224,255,0.4);
    --bubble-done-bg: linear-gradient(135deg, rgba(56, 197, 255, 0.25) 0%, rgba(42, 147, 255, 0.12) 100%);
    --bubble-done-border: rgba(56, 197, 255, 0.6); --bubble-done-glow: 0 5px 20px rgba(56, 197, 255, 0.25); --bubble-done-text: #38c5ff;
}

[data-theme="hologram"] {
    --bg-primary: #0d1018; --bg-secondary: #141820; --bg-tertiary: #1c2230;
    --bg-card: rgba(136,221,255,0.06);
    --text: #E0F0FF; --text-muted: #7098B8;
    --accent: #88DDFF; --accent-light: #A8E8FF; --accent-glow: rgba(136,221,255,0.3);
    --success: #9cdbff; --success-glow: rgba(156, 219, 255, 0.3);
    --warning: #FFE060; --danger: #FF7088;
    --border: rgba(136,221,255,0.18); --border-strong: rgba(136,221,255,0.35);
    --bubble-bg: linear-gradient(135deg, rgba(136,221,255,0.15) 0%, rgba(255,136,221,0.08) 50%, rgba(136,255,187,0.06) 100%);
    --bubble-border: rgba(136,221,255,0.4); --bubble-glow: 0 5px 22px rgba(136,221,255,0.2);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(255,136,221,0.3) 0%, rgba(136,221,255,0.2) 100%);
    --bubble-inprogress-border: rgba(255,136,221,0.7); --bubble-inprogress-glow: 0 7px 28px rgba(255,136,221,0.3);
    --bubble-done-bg: linear-gradient(135deg, rgba(156, 219, 255, 0.22) 0%, rgba(117, 165, 255, 0.1) 100%);
    --bubble-done-border: rgba(156, 219, 255, 0.55); --bubble-done-glow: 0 4px 18px rgba(156, 219, 255, 0.2); --bubble-done-text: #9cdbff;
}

/* ==============================================
   CATÉGORIE 7: ARTISTE
   ============================================== */

[data-theme="zen"] {
    --bg-primary: #F5F2EA; --bg-secondary: #EDE8DC; --bg-tertiary: #E0DCCE;
    --bg-card: rgba(112,128,88,0.05);
    --text: #3A3830; --text-muted: #808068;
    --accent: #708058; --accent-light: #90A070; --accent-glow: rgba(112,128,88,0.2);
    --success: #607ade; --success-glow: rgba(96, 122, 222, 0.18);
    --warning: #B8A040; --danger: #C05050;
    --border: rgba(112,128,88,0.12); --border-strong: rgba(112,128,88,0.25);
    --bubble-bg: linear-gradient(145deg, #EDE8DC 0%, #E0DCCE 100%);
    --bubble-border: rgba(112,128,88,0.2); --bubble-glow: none; --bubble-text-color: #3A3830;
    --bubble-inprogress-bg: linear-gradient(145deg, #E0DCC8 0%, #D8D4BE 100%);
    --bubble-inprogress-border: rgba(112,128,88,0.45); --bubble-inprogress-glow: none; --bubble-inprogress-text: #3A3830;
    --bubble-done-bg: linear-gradient(145deg, #dfceff 0%, #cdc3ff 100%);
    --bubble-done-border: #607ade; --bubble-done-glow: none; --bubble-done-text: #304579;
}

[data-theme="art-deco"] {
    --bg-primary: #0a0808; --bg-secondary: #141210; --bg-tertiary: #1e1a18;
    --bg-card: rgba(200,160,64,0.06);
    --text: #F0E8D0; --text-muted: #A89870;
    --accent: #C8A040; --accent-light: #E0C060; --accent-glow: rgba(200,160,64,0.25);
    --success: #6f87fa; --success-glow: rgba(111, 135, 250, 0.2);
    --warning: #E0C050; --danger: #D05050;
    --border: rgba(200,160,64,0.18); --border-strong: rgba(200,160,64,0.35);
    --bubble-bg: linear-gradient(135deg, rgba(200,160,64,0.15) 0%, rgba(160,120,40,0.08) 100%);
    --bubble-border: rgba(200,160,64,0.38); --bubble-glow: 0 4px 16px rgba(200,160,64,0.14);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(224,192,96,0.3) 0%, rgba(200,160,64,0.18) 100%);
    --bubble-inprogress-border: rgba(224,192,96,0.68); --bubble-inprogress-glow: 0 6px 22px rgba(224,192,96,0.24);
    --bubble-done-bg: linear-gradient(135deg, rgba(111, 135, 250, 0.18) 0%, rgba(86, 109, 199, 0.08) 100%);
    --bubble-done-border: rgba(111, 135, 250, 0.48); --bubble-done-glow: 0 4px 14px rgba(111, 135, 250, 0.15); --bubble-done-text: #7e95ff;
}

[data-theme="watercolor"] {
    --bg-primary: #F8F2F8; --bg-secondary: #F0E8F0; --bg-tertiary: #E5DCE8;
    --bg-card: rgba(136,136,192,0.05);
    --text: #383040; --text-muted: #887898;
    --accent: #8888C0; --accent-light: #A8A8D8; --accent-glow: rgba(136,136,192,0.2);
    --success: #7395ff; --success-glow: rgba(115, 149, 255, 0.18);
    --warning: #C8A848; --danger: #C86868;
    --border: rgba(136,136,192,0.12); --border-strong: rgba(136,136,192,0.25);
    --bubble-bg: linear-gradient(145deg, #F0E8F0 0%, #E5DCE8 100%);
    --bubble-border: rgba(136,136,192,0.2); --bubble-glow: none; --bubble-text-color: #383040;
    --bubble-inprogress-bg: linear-gradient(145deg, #E5DCF0 0%, #D8D0E8 100%);
    --bubble-inprogress-border: rgba(136,136,192,0.45); --bubble-inprogress-glow: none; --bubble-inprogress-text: #383040;
    --bubble-done-bg: linear-gradient(145deg, #e2d4ff 0%, #d0c9ff 100%);
    --bubble-done-border: #7395ff; --bubble-done-glow: none; --bubble-done-text: #324c8d;
}

[data-theme="nordic"] {
    --bg-primary: #F5F0E8; --bg-secondary: #ECE6DC; --bg-tertiary: #E0D8CC;
    --bg-card: rgba(90,122,106,0.05);
    --text: #303828; --text-muted: #708068;
    --accent: #5A7A6A; --accent-light: #78A890; --accent-glow: rgba(90,122,106,0.2);
    --success: #547ee3; --success-glow: rgba(84, 126, 227, 0.18);
    --warning: #B8A040; --danger: #C05050;
    --border: rgba(90,122,106,0.12); --border-strong: rgba(90,122,106,0.25);
    --bubble-bg: linear-gradient(145deg, #ECE6DC 0%, #E0D8CC 100%);
    --bubble-border: rgba(90,122,106,0.2); --bubble-glow: none; --bubble-text-color: #303828;
    --bubble-inprogress-bg: linear-gradient(145deg, #E0DCC8 0%, #D4D0BC 100%);
    --bubble-inprogress-border: rgba(90,122,106,0.45); --bubble-inprogress-glow: none; --bubble-inprogress-text: #303828;
    --bubble-done-bg: linear-gradient(145deg, #dcceff 0%, #cac3ff 100%);
    --bubble-done-border: #547ee3; --bubble-done-glow: none; --bubble-done-text: #2e4578;
}

[data-theme="cosmic"] {
    --bg-primary: #050210; --bg-secondary: #0a0520; --bg-tertiary: #120835;
    --bg-card: rgba(153,102,255,0.06);
    --text: #E0D5FF; --text-muted: #8878B8;
    --accent: #9966FF; --accent-light: #B888FF; --accent-glow: rgba(153,102,255,0.4);
    --success: #7eb8ff; --success-glow: rgba(126, 184, 255, 0.35);
    --warning: #F0D050; --danger: #FF5070;
    --border: rgba(153,102,255,0.22); --border-strong: rgba(153,102,255,0.45);
    --bubble-bg: linear-gradient(135deg, rgba(153,102,255,0.2) 0%, rgba(100,60,200,0.1) 100%);
    --bubble-border: rgba(153,102,255,0.48); --bubble-glow: 0 6px 25px rgba(153,102,255,0.22);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(184,136,255,0.38) 0%, rgba(153,102,255,0.22) 100%);
    --bubble-inprogress-border: rgba(184,136,255,0.8); --bubble-inprogress-glow: 0 8px 32px rgba(184,136,255,0.35);
    --bubble-done-bg: linear-gradient(135deg, rgba(126, 184, 255, 0.25) 0%, rgba(96, 143, 255, 0.12) 100%);
    --bubble-done-border: rgba(126, 184, 255, 0.6); --bubble-done-glow: 0 5px 20px rgba(126, 184, 255, 0.22); --bubble-done-text: #7eb8ff;
}

/* ==============================================
   CATÉGORIE 8: SAISONS
   Les quatre saisons, cycle éternel du vivant
   ============================================== */

[data-theme="printemps"] {
    --bg-primary: #F6F9F0; --bg-secondary: #EEF4E4; --bg-tertiary: #E2ECD4;
    --bg-card: rgba(120,180,100,0.06);
    --text: #2A3820; --text-muted: #688858;
    --accent: #78B464; --accent-light: #98D080; --accent-glow: rgba(120,180,100,0.2);
    --success: #557ee4; --success-glow: rgba(85, 126, 228, 0.18);
    --warning: #C4A040; --danger: #D05050;
    --border: rgba(120,180,100,0.15); --border-strong: rgba(120,180,100,0.3);
    --bubble-bg: linear-gradient(145deg, #EEF4E4 0%, #E2ECD4 100%);
    --bubble-border: rgba(120,180,100,0.25); --bubble-glow: none; --bubble-text-color: #2A3820;
    --bubble-inprogress-bg: linear-gradient(145deg, #E2ECC8 0%, #D8E4BC 100%);
    --bubble-inprogress-border: rgba(120,180,100,0.5); --bubble-inprogress-glow: none; --bubble-inprogress-text: #2A3820;
    --bubble-done-bg: linear-gradient(145deg, #dcd1ff 0%, #ccc7ff 100%);
    --bubble-done-border: #557ee4; --bubble-done-glow: none; --bubble-done-text: #304579;
}

[data-theme="ete"] {
    --bg-primary: #F8F6EE; --bg-secondary: #F2EEE0; --bg-tertiary: #E8E2D0;
    --bg-card: rgba(40,144,192,0.06);
    --text: #1A2830; --text-muted: #607888;
    --accent: #2890C0; --accent-light: #48B0E0; --accent-glow: rgba(40,144,192,0.2);
    --success: #5684f1; --success-glow: rgba(86, 132, 241, 0.18);
    --warning: #D8A840; --danger: #D05050;
    --border: rgba(40,144,192,0.15); --border-strong: rgba(40,144,192,0.3);
    --bubble-bg: linear-gradient(145deg, #F2EEE0 0%, #E8E2D0 100%);
    --bubble-border: rgba(40,144,192,0.25); --bubble-glow: none; --bubble-text-color: #1A2830;
    --bubble-inprogress-bg: linear-gradient(145deg, #E0E8F0 0%, #D4E0E8 100%);
    --bubble-inprogress-border: rgba(40,144,192,0.5); --bubble-inprogress-glow: none; --bubble-inprogress-text: #1A2830;
    --bubble-done-bg: linear-gradient(145deg, #ded4ff 0%, #cdc8ff 100%);
    --bubble-done-border: #5684f1; --bubble-done-glow: none; --bubble-done-text: #30467d;
}

[data-theme="automne"] {
    --bg-primary: #1A0E08; --bg-secondary: #2C1810; --bg-tertiary: #3D2418;
    --bg-card: rgba(200,90,40,0.08);
    --text: #F5E0CC; --text-muted: #B88868;
    --accent: #C85A28; --accent-light: #E07840; --accent-glow: rgba(200,90,40,0.3);
    --success: #6c80e5; --success-glow: rgba(108, 128, 229, 0.25);
    --warning: #D8A030; --danger: #D04040;
    --border: rgba(200,90,40,0.2); --border-strong: rgba(200,90,40,0.4);
    --bubble-bg: linear-gradient(135deg, rgba(200,90,40,0.2) 0%, rgba(160,60,20,0.1) 100%);
    --bubble-border: rgba(200,90,40,0.48); --bubble-glow: 0 4px 18px rgba(200,90,40,0.18);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(224,120,64,0.35) 0%, rgba(200,90,40,0.2) 100%);
    --bubble-inprogress-border: rgba(224,120,64,0.78); --bubble-inprogress-glow: 0 6px 22px rgba(224,120,64,0.28);
    --bubble-done-bg: linear-gradient(135deg, rgba(108, 128, 229, 0.22) 0%, rgba(84, 103, 183, 0.1) 100%);
    --bubble-done-border: rgba(108, 128, 229, 0.55); --bubble-done-glow: 0 4px 14px rgba(108, 128, 229, 0.18); --bubble-done-text: #6c80e5;
}

[data-theme="hiver"] {
    --bg-primary: #080C14; --bg-secondary: #101824; --bg-tertiary: #1A2434;
    --bg-card: rgba(136,184,224,0.06);
    --text: #E4EEF8; --text-muted: #7898B8;
    --accent: #88B8E0; --accent-light: #A8D0F0; --accent-glow: rgba(136,184,224,0.25);
    --success: #6d94ff; --success-glow: rgba(109, 148, 255, 0.25);
    --warning: #D8C050; --danger: #D86868;
    --border: rgba(136,184,224,0.15); --border-strong: rgba(136,184,224,0.3);
    --bubble-bg: linear-gradient(135deg, rgba(136,184,224,0.15) 0%, rgba(100,150,190,0.08) 100%);
    --bubble-border: rgba(136,184,224,0.38); --bubble-glow: 0 4px 16px rgba(136,184,224,0.14);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(168,208,240,0.32) 0%, rgba(136,184,224,0.18) 100%);
    --bubble-inprogress-border: rgba(168,208,240,0.7); --bubble-inprogress-glow: 0 6px 22px rgba(168,208,240,0.24);
    --bubble-done-bg: linear-gradient(135deg, rgba(109, 148, 255, 0.2) 0%, rgba(84, 120, 228, 0.1) 100%);
    --bubble-done-border: rgba(109, 148, 255, 0.5); --bubble-done-glow: 0 4px 14px rgba(109, 148, 255, 0.16); --bubble-done-text: #6d94ff;
}

/* ==============================================
   CATÉGORIE 9: PRÉCIEUX
   Gemmes et matières nobles de la terre
   ============================================== */

[data-theme="amethyst"] {
    --bg-primary: #0C0618; --bg-secondary: #180E28; --bg-tertiary: #24163A;
    --bg-card: rgba(144,96,216,0.06);
    --text: #EDE0FF; --text-muted: #9880B8;
    --accent: #9060D8; --accent-light: #B080F0; --accent-glow: rgba(144,96,216,0.3);
    --success: #70a2ff; --success-glow: rgba(112, 162, 255, 0.3);
    --warning: #D8B850; --danger: #D86060;
    --border: rgba(144,96,216,0.2); --border-strong: rgba(144,96,216,0.4);
    --bubble-bg: linear-gradient(135deg, rgba(144,96,216,0.2) 0%, rgba(100,60,170,0.1) 100%);
    --bubble-border: rgba(144,96,216,0.48); --bubble-glow: 0 5px 22px rgba(144,96,216,0.2);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(176,128,240,0.35) 0%, rgba(144,96,216,0.2) 100%);
    --bubble-inprogress-border: rgba(176,128,240,0.78); --bubble-inprogress-glow: 0 7px 28px rgba(176,128,240,0.3);
    --bubble-done-bg: linear-gradient(135deg, rgba(112, 162, 255, 0.22) 0%, rgba(86, 128, 241, 0.1) 100%);
    --bubble-done-border: rgba(112, 162, 255, 0.55); --bubble-done-glow: 0 4px 18px rgba(112, 162, 255, 0.2); --bubble-done-text: #70a2ff;
}

[data-theme="jade"] {
    --bg-primary: #060E0A; --bg-secondary: #0E1C14; --bg-tertiary: #162A1E;
    --bg-card: rgba(64,168,120,0.06);
    --text: #DCF0E6; --text-muted: #70A888;
    --accent: #40A878; --accent-light: #60C898; --accent-glow: rgba(64,168,120,0.25);
    --success: #5c9bff; --success-glow: rgba(92, 155, 255, 0.25);
    --warning: #C8B040; --danger: #D06060;
    --border: rgba(64,168,120,0.18); --border-strong: rgba(64,168,120,0.35);
    --bubble-bg: linear-gradient(135deg, rgba(64,168,120,0.18) 0%, rgba(40,130,88,0.09) 100%);
    --bubble-border: rgba(64,168,120,0.42); --bubble-glow: 0 4px 18px rgba(64,168,120,0.16);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(96,200,152,0.32) 0%, rgba(64,168,120,0.18) 100%);
    --bubble-inprogress-border: rgba(96,200,152,0.72); --bubble-inprogress-glow: 0 6px 24px rgba(96,200,152,0.26);
    --bubble-done-bg: linear-gradient(135deg, rgba(92, 155, 255, 0.2) 0%, rgba(66, 123, 220, 0.1) 100%);
    --bubble-done-border: rgba(92, 155, 255, 0.5); --bubble-done-glow: 0 4px 14px rgba(92, 155, 255, 0.16); --bubble-done-text: #5c9bff;
}

[data-theme="ruby"] {
    --bg-primary: #140608; --bg-secondary: #240E10; --bg-tertiary: #36161A;
    --bg-card: rgba(216,48,64,0.06);
    --text: #FFE4E8; --text-muted: #C08088;
    --accent: #D83040; --accent-light: #F05060; --accent-glow: rgba(216,48,64,0.3);
    --success: #6692ff; --success-glow: rgba(102, 146, 255, 0.25);
    --warning: #D8B040; --danger: #F04040;
    --border: rgba(216,48,64,0.2); --border-strong: rgba(216,48,64,0.4);
    --bubble-bg: linear-gradient(135deg, rgba(216,48,64,0.2) 0%, rgba(170,30,48,0.1) 100%);
    --bubble-border: rgba(216,48,64,0.48); --bubble-glow: 0 5px 22px rgba(216,48,64,0.2);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(240,80,96,0.35) 0%, rgba(216,48,64,0.2) 100%);
    --bubble-inprogress-border: rgba(240,80,96,0.78); --bubble-inprogress-glow: 0 7px 28px rgba(240,80,96,0.3);
    --bubble-done-bg: linear-gradient(135deg, rgba(102, 146, 255, 0.22) 0%, rgba(77, 119, 219, 0.1) 100%);
    --bubble-done-border: rgba(102, 146, 255, 0.55); --bubble-done-glow: 0 4px 18px rgba(102, 146, 255, 0.2); --bubble-done-text: #6692ff;
}

[data-theme="pearl"] {
    --bg-primary: #FAFAF8; --bg-secondary: #F2F0EE; --bg-tertiary: #E8E4E0;
    --bg-card: rgba(160,152,176,0.05);
    --text: #383040; --text-muted: #888090;
    --accent: #A098B0; --accent-light: #B8B0C8; --accent-glow: rgba(160,152,176,0.2);
    --success: #6387fb; --success-glow: rgba(99, 135, 251, 0.18);
    --warning: #C8A840; --danger: #C86060;
    --border: rgba(160,152,176,0.12); --border-strong: rgba(160,152,176,0.25);
    --bubble-bg: linear-gradient(145deg, #F2F0EE 0%, #E8E4E0 100%);
    --bubble-border: rgba(160,152,176,0.2); --bubble-glow: none; --bubble-text-color: #383040;
    --bubble-inprogress-bg: linear-gradient(145deg, #E8E2E0 0%, #DED8D4 100%);
    --bubble-inprogress-border: rgba(160,152,176,0.45); --bubble-inprogress-glow: none; --bubble-inprogress-text: #383040;
    --bubble-done-bg: linear-gradient(145deg, #e2d4ff 0%, #d0c9ff 100%);
    --bubble-done-border: #6387fb; --bubble-done-glow: none; --bubble-done-text: #314680;
}

[data-theme="copper"] {
    --bg-primary: #120C08; --bg-secondary: #221610; --bg-tertiary: #32201A;
    --bg-card: rgba(200,120,80,0.06);
    --text: #F5E4D4; --text-muted: #B89070;
    --accent: #C87850; --accent-light: #E09870; --accent-glow: rgba(200,120,80,0.25);
    --success: #6987f9; --success-glow: rgba(105, 135, 249, 0.2);
    --warning: #D0A840; --danger: #D06050;
    --border: rgba(200,120,80,0.18); --border-strong: rgba(200,120,80,0.35);
    --bubble-bg: linear-gradient(135deg, rgba(200,120,80,0.15) 0%, rgba(160,88,56,0.08) 100%);
    --bubble-border: rgba(200,120,80,0.38); --bubble-glow: 0 4px 16px rgba(200,120,80,0.14);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(224,152,112,0.3) 0%, rgba(200,120,80,0.18) 100%);
    --bubble-inprogress-border: rgba(224,152,112,0.68); --bubble-inprogress-glow: 0 6px 22px rgba(224,152,112,0.24);
    --bubble-done-bg: linear-gradient(135deg, rgba(105, 135, 249, 0.18) 0%, rgba(80, 108, 198, 0.08) 100%);
    --bubble-done-border: rgba(105, 135, 249, 0.48); --bubble-done-glow: 0 4px 14px rgba(105, 135, 249, 0.15); --bubble-done-text: #7e95ff;
}

/* ==============================================
   CATÉGORIE 10: VOYAGE
   Destinations du monde, horizons lointains
   ============================================== */

[data-theme="sahara"] {
    --bg-primary: #1C1408; --bg-secondary: #30240E; --bg-tertiary: #443418;
    --bg-card: rgba(212,160,23,0.09);
    --text: #F0E4C8; --text-muted: #B8A068;
    --accent: #D4A017; --accent-light: #E8BC40; --accent-glow: rgba(212,160,23,0.30);
    --success: #6e87f6; --success-glow: rgba(110, 135, 246, 0.2);
    --warning: #E0C040; --danger: #D05048;
    --border: rgba(210,175,90,0.18); --border-strong: rgba(210,175,90,0.35);
    --bubble-bg: linear-gradient(135deg, rgba(210,175,90,0.18) 0%, rgba(170,140,60,0.09) 100%);
    --bubble-border: rgba(210,175,90,0.4); --bubble-glow: 0 4px 16px rgba(210,175,90,0.14);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(232,200,120,0.32) 0%, rgba(210,175,90,0.18) 100%);
    --bubble-inprogress-border: rgba(232,200,120,0.7); --bubble-inprogress-glow: 0 6px 22px rgba(232,200,120,0.24);
    --bubble-done-bg: linear-gradient(135deg, rgba(110, 135, 246, 0.18) 0%, rgba(85, 108, 195, 0.08) 100%);
    --bubble-done-border: rgba(110, 135, 246, 0.48); --bubble-done-glow: 0 4px 14px rgba(110, 135, 246, 0.15); --bubble-done-text: #6e87f6;
}

[data-theme="fjord"] {
    --bg-primary: #060C10; --bg-secondary: #0E1820; --bg-tertiary: #162430;
    --bg-card: rgba(60,130,150,0.06);
    --text: #DEF0F5; --text-muted: #6898A8;
    --accent: #3C8296; --accent-light: #58A8C0; --accent-glow: rgba(60,130,150,0.25);
    --success: #5b92ff; --success-glow: rgba(91, 146, 255, 0.25);
    --warning: #C8B048; --danger: #D06060;
    --border: rgba(60,130,150,0.18); --border-strong: rgba(60,130,150,0.35);
    --bubble-bg: linear-gradient(135deg, rgba(60,130,150,0.18) 0%, rgba(40,100,120,0.09) 100%);
    --bubble-border: rgba(60,130,150,0.42); --bubble-glow: 0 4px 18px rgba(60,130,150,0.16);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(88,168,192,0.32) 0%, rgba(60,130,150,0.18) 100%);
    --bubble-inprogress-border: rgba(88,168,192,0.72); --bubble-inprogress-glow: 0 6px 24px rgba(88,168,192,0.26);
    --bubble-done-bg: linear-gradient(135deg, rgba(91, 146, 255, 0.2) 0%, rgba(65, 118, 222, 0.1) 100%);
    --bubble-done-border: rgba(91, 146, 255, 0.5); --bubble-done-glow: 0 4px 14px rgba(91, 146, 255, 0.16); --bubble-done-text: #5b92ff;
}

[data-theme="bamboo"] {
    --bg-primary: #F5F4EC; --bg-secondary: #ECE8DA; --bg-tertiary: #E0DCCC;
    --bg-card: rgba(100,128,60,0.05);
    --text: #2C3020; --text-muted: #707858;
    --accent: #64803C; --accent-light: #88A858; --accent-glow: rgba(100,128,60,0.2);
    --success: #5478d8; --success-glow: rgba(84, 120, 216, 0.18);
    --warning: #B8A040; --danger: #C05050;
    --border: rgba(100,128,60,0.12); --border-strong: rgba(100,128,60,0.25);
    --bubble-bg: linear-gradient(145deg, #ECE8DA 0%, #E0DCCC 100%);
    --bubble-border: rgba(100,128,60,0.2); --bubble-glow: none; --bubble-text-color: #2C3020;
    --bubble-inprogress-bg: linear-gradient(145deg, #E0DCC4 0%, #D4D0B8 100%);
    --bubble-inprogress-border: rgba(100,128,60,0.45); --bubble-inprogress-glow: none; --bubble-inprogress-text: #2C3020;
    --bubble-done-bg: linear-gradient(145deg, #dbcdff 0%, #cac3ff 100%);
    --bubble-done-border: #5478d8; --bubble-done-glow: none; --bubble-done-text: #2e4578;
}

[data-theme="bali"] {
    --bg-primary: #120C02; --bg-secondary: #1E1405; --bg-tertiary: #2A1E08;
    --bg-card: rgba(245,158,11,0.10);
    --text: #FFF3DC; --text-muted: #D4A845;
    --accent: #F59E0B; --accent-light: #FBBF24; --accent-glow: rgba(245,158,11,0.35);
    --success: #579cff; --success-glow: rgba(87, 156, 255, 0.3);
    --warning: #D8B848; --danger: #E06060;
    --border: rgba(245,158,11,0.22); --border-strong: rgba(245,158,11,0.45);
    --bubble-bg: linear-gradient(135deg, rgba(245,158,11,0.18) 0%, rgba(194,120,0,0.09) 100%);
    --bubble-border: rgba(245,158,11,0.50); --bubble-glow: 0 4px 20px rgba(245,158,11,0.22);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(251,191,36,0.32) 0%, rgba(245,158,11,0.18) 100%);
    --bubble-inprogress-border: rgba(251,191,36,0.80); --bubble-inprogress-glow: 0 6px 25px rgba(251,191,36,0.30);
    --bubble-done-bg: linear-gradient(135deg, rgba(87, 156, 255, 0.22) 0%, rgba(61, 123, 225, 0.1) 100%);
    --bubble-done-border: rgba(87, 156, 255, 0.55); --bubble-done-glow: 0 4px 15px rgba(87, 156, 255, 0.2); --bubble-done-text: #579cff;
}

[data-theme="provence"] {
    --bg-primary: #FAF6F0; --bg-secondary: #F2ECE4; --bg-tertiary: #E8E0D6;
    --bg-card: rgba(140,110,160,0.05);
    --text: #3A3040; --text-muted: #887898;
    --accent: #8C6EA0; --accent-light: #A888C0; --accent-glow: rgba(140,110,160,0.2);
    --success: #6286f8; --success-glow: rgba(98, 134, 248, 0.18);
    --warning: #C8A840; --danger: #C86060;
    --border: rgba(140,110,160,0.12); --border-strong: rgba(140,110,160,0.25);
    --bubble-bg: linear-gradient(145deg, #F2ECE4 0%, #E8E0D6 100%);
    --bubble-border: rgba(140,110,160,0.2); --bubble-glow: none; --bubble-text-color: #3A3040;
    --bubble-inprogress-bg: linear-gradient(145deg, #E8DCE0 0%, #DED0D6 100%);
    --bubble-inprogress-border: rgba(140,110,160,0.45); --bubble-inprogress-glow: none; --bubble-inprogress-text: #3A3040;
    --bubble-done-bg: linear-gradient(145deg, #e2d4ff 0%, #d0c9ff 100%);
    --bubble-done-border: #6286f8; --bubble-done-glow: none; --bubble-done-text: #314680;
}

/* ==============================================
   ADDITIONS AUX CATÉGORIES EXISTANTES
   ============================================== */

/* NATURE + moss */
[data-theme="moss"] {
    --bg-primary: #040D06; --bg-secondary: #0C1910; --bg-tertiary: #14271A;
    --bg-card: rgba(52,211,153,0.08);
    --text: #D4F7E8; --text-muted: #68B898;
    --accent: #10b981; --accent-light: #34d399; --accent-glow: rgba(16,185,129,0.30);
    --success: #5789f6; --success-glow: rgba(87, 137, 246, 0.25);
    --warning: #B8A840; --danger: #D05050;
    --border: rgba(16,185,129,0.20); --border-strong: rgba(16,185,129,0.38);
    --bubble-bg: linear-gradient(135deg, rgba(80,120,50,0.18) 0%, rgba(56,88,32,0.09) 100%);
    --bubble-border: rgba(80,120,50,0.42); --bubble-glow: 0 4px 16px rgba(80,120,50,0.14);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(112,160,72,0.32) 0%, rgba(80,120,50,0.18) 100%);
    --bubble-inprogress-border: rgba(112,160,72,0.7); --bubble-inprogress-glow: 0 6px 22px rgba(112,160,72,0.24);
    --bubble-done-bg: linear-gradient(135deg, rgba(87, 137, 246, 0.2) 0%, rgba(61, 108, 191, 0.1) 100%);
    --bubble-done-border: rgba(87, 137, 246, 0.5); --bubble-done-glow: 0 4px 14px rgba(87, 137, 246, 0.16); --bubble-done-text: #5789f6;
}

/* ATMOSPHÈRE + ember */
[data-theme="ember"] {
    --bg-primary: #180808; --bg-secondary: #281010; --bg-tertiary: #3A1818;
    --bg-card: rgba(220,80,30,0.08);
    --text: #FFE0D0; --text-muted: #C08868;
    --accent: #DC5020; --accent-light: #F07040; --accent-glow: rgba(220,80,30,0.35);
    --success: #6987f9; --success-glow: rgba(105, 135, 249, 0.25);
    --warning: #E0A030; --danger: #F04030;
    --border: rgba(220,80,30,0.22); --border-strong: rgba(220,80,30,0.44);
    --bubble-bg: linear-gradient(135deg, rgba(220,80,30,0.22) 0%, rgba(180,50,16,0.1) 100%);
    --bubble-border: rgba(220,80,30,0.5); --bubble-glow: 0 5px 22px rgba(220,80,30,0.22);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(240,112,64,0.38) 0%, rgba(220,80,30,0.22) 100%);
    --bubble-inprogress-border: rgba(240,112,64,0.82); --bubble-inprogress-glow: 0 7px 28px rgba(240,112,64,0.32);
    --bubble-done-bg: linear-gradient(135deg, rgba(105, 135, 249, 0.2) 0%, rgba(80, 108, 198, 0.1) 100%);
    --bubble-done-border: rgba(105, 135, 249, 0.52); --bubble-done-glow: 0 4px 16px rgba(105, 135, 249, 0.18); --bubble-done-text: #6987f9;
}

/* MINIMALISTE + snow */
[data-theme="snow"] {
    --bg-primary: #FAFCFE; --bg-secondary: #F0F4F8; --bg-tertiary: #E4EAF0;
    --bg-card: rgba(100,120,150,0.04);
    --text: #2A3040; --text-muted: #7888A0;
    --accent: #6880A0; --accent-light: #88A0C0; --accent-glow: rgba(100,120,150,0.2);
    --success: #557ae4; --success-glow: rgba(85, 122, 228, 0.18);
    --warning: #C0A040; --danger: #C05050;
    --border: rgba(100,120,150,0.1); --border-strong: rgba(100,120,150,0.2);
    --bubble-bg: linear-gradient(145deg, #F0F4F8 0%, #E4EAF0 100%);
    --bubble-border: rgba(100,120,150,0.15); --bubble-glow: none; --bubble-text-color: #2A3040;
    --bubble-inprogress-bg: linear-gradient(145deg, #E4E8F0 0%, #D8DEE8 100%);
    --bubble-inprogress-border: rgba(100,120,150,0.4); --bubble-inprogress-glow: none; --bubble-inprogress-text: #2A3040;
    --bubble-done-bg: linear-gradient(145deg, #e2d4ff 0%, #d0c9ff 100%);
    --bubble-done-border: #557ae4; --bubble-done-glow: none; --bubble-done-text: #314680;
}

/* MINIMALISTE + charcoal */
[data-theme="charcoal"] {
    --bg-primary: #101214; --bg-secondary: #1A1C20; --bg-tertiary: #24282C;
    --bg-card: rgba(150,160,170,0.04);
    --text: #D8DDE2; --text-muted: #808890;
    --accent: #909AA4; --accent-light: #B0B8C0; --accent-glow: rgba(150,160,170,0.2);
    --success: #627cea; --success-glow: rgba(98, 124, 234, 0.18);
    --warning: #B0A060; --danger: #B06060;
    --border: rgba(150,160,170,0.1); --border-strong: rgba(150,160,170,0.2);
    --bubble-bg: linear-gradient(145deg, rgba(150,160,170,0.06) 0%, rgba(150,160,170,0.03) 100%);
    --bubble-border: rgba(150,160,170,0.14); --bubble-glow: none;
    --bubble-inprogress-bg: linear-gradient(145deg, rgba(150,160,170,0.1) 0%, rgba(150,160,170,0.06) 100%);
    --bubble-inprogress-border: rgba(144,154,164,0.45); --bubble-inprogress-glow: none;
    --bubble-done-bg: linear-gradient(145deg, rgba(98, 124, 234, 0.1) 0%, rgba(98, 124, 234, 0.05) 100%);
    --bubble-done-border: rgba(98, 124, 234, 0.35); --bubble-done-glow: none; --bubble-done-text: #8197ff;
}

/* TECH + bioluminescence */
[data-theme="bioluminescence"] {
    --bg-primary: #040810; --bg-secondary: #08101C; --bg-tertiary: #0E1828;
    --bg-card: rgba(0,200,220,0.06);
    --text: #D0F0F8; --text-muted: #5898B0;
    --accent: #00C8DC; --accent-light: #40E8F0; --accent-glow: rgba(0,200,220,0.4);
    --success: #33b5ff; --success-glow: rgba(51, 181, 255, 0.35);
    --warning: #F0D040; --danger: #FF5060;
    --border: rgba(0,200,220,0.2); --border-strong: rgba(0,200,220,0.45);
    --bubble-bg: linear-gradient(135deg, rgba(0,200,220,0.2) 0%, rgba(0,100,160,0.1) 50%, rgba(0,232,160,0.06) 100%);
    --bubble-border: rgba(0,200,220,0.5); --bubble-glow: 0 6px 25px rgba(0,200,220,0.25);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(64,232,240,0.38) 0%, rgba(0,200,220,0.22) 100%);
    --bubble-inprogress-border: rgba(64,232,240,0.85); --bubble-inprogress-glow: 0 8px 32px rgba(64,232,240,0.35);
    --bubble-done-bg: linear-gradient(135deg, rgba(51, 181, 255, 0.28) 0%, rgba(38, 135, 255, 0.14) 100%);
    --bubble-done-border: rgba(51, 181, 255, 0.65); --bubble-done-glow: 0 5px 20px rgba(51, 181, 255, 0.25); --bubble-done-text: #33b5ff;
}

/* TECH + pipboy (Fallout Pip-Boy 3000) */
[data-theme="pipboy"] {
    --bg-primary: #0A0A0A; --bg-secondary: #0D120D; --bg-tertiary: #101810;
    --bg-card: rgba(0,255,119,0.05);
    --text: #00FF77; --text-muted: #338855;
    --accent: #00FF77; --accent-light: #44FFAA; --accent-glow: rgba(0,255,119,0.45);
    --success: #2ea4ff; --success-glow: rgba(46, 164, 255, 0.4);
    --warning: #44CC44; --danger: #00FF77;
    --border: rgba(0,255,119,0.2); --border-strong: rgba(0,255,119,0.5);
    --bubble-bg: linear-gradient(135deg, rgba(0,255,119,0.12) 0%, rgba(0,200,90,0.06) 100%);
    --bubble-border: rgba(0,255,119,0.4); --bubble-glow: 0 4px 18px rgba(0,255,119,0.2);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(0,255,119,0.28) 0%, rgba(0,200,90,0.16) 100%);
    --bubble-inprogress-border: rgba(0,255,119,0.75); --bubble-inprogress-glow: 0 6px 28px rgba(0,255,119,0.35);
    --bubble-done-bg: linear-gradient(135deg, rgba(37, 131, 232, 0.18) 0%, rgba(25, 87, 154, 0.08) 100%);
    --bubble-done-border: rgba(37, 131, 232, 0.5); --bubble-done-glow: 0 4px 16px rgba(37, 131, 232, 0.2); --bubble-done-text: #2994ff;
}

/* ARTISTE + ukiyo-e */
[data-theme="ukiyo-e"] {
    --bg-primary: #0C0A14; --bg-secondary: #18141E; --bg-tertiary: #241E2A;
    --bg-card: rgba(180,80,60,0.06);
    --text: #F0E8E0; --text-muted: #A89888;
    --accent: #B45038; --accent-light: #D07050; --accent-glow: rgba(180,80,60,0.25);
    --success: #6486f8; --success-glow: rgba(100, 134, 248, 0.2);
    --warning: #D0A840; --danger: #D04840;
    --border: rgba(180,80,60,0.18); --border-strong: rgba(180,80,60,0.35);
    --bubble-bg: linear-gradient(135deg, rgba(180,80,60,0.18) 0%, rgba(140,56,40,0.09) 100%);
    --bubble-border: rgba(180,80,60,0.4); --bubble-glow: 0 4px 16px rgba(180,80,60,0.14);
    --bubble-inprogress-bg: linear-gradient(135deg, rgba(208,112,80,0.32) 0%, rgba(180,80,60,0.18) 100%);
    --bubble-inprogress-border: rgba(208,112,80,0.7); --bubble-inprogress-glow: 0 6px 22px rgba(208,112,80,0.24);
    --bubble-done-bg: linear-gradient(135deg, rgba(100, 134, 248, 0.18) 0%, rgba(77, 108, 197, 0.08) 100%);
    --bubble-done-border: rgba(100, 134, 248, 0.48); --bubble-done-glow: 0 4px 14px rgba(100, 134, 248, 0.15); --bubble-done-text: #6486f8;
}
/* ══════════════════════════════════════════════════════════════════
   NEON NIGHT CLUB — INTENSE EDITION v1.0
   Effets néon ultra-intensifiés : glow, pulse, flicker, scanlines
   ══════════════════════════════════════════════════════════════════ */

/* ── Variables néon étendues ── */
[data-theme="neon"] {
    --neon-pink: #FF1493;
    --neon-hotpink: #FF69B4;
    --neon-cyan: #00FFAA;
    --neon-gold: #FFD700;
    --neon-blue: #00BFFF;
    --neon-purple: #BF00FF;
    --neon-glow-sm: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
    --neon-glow-md: 0 0 7px var(--neon-pink), 0 0 15px var(--neon-pink), 0 0 30px rgba(255,20,147,0.4);
    --neon-glow-lg: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink), 0 0 40px rgba(255,20,147,0.5), 0 0 80px rgba(255,20,147,0.2);
    --neon-glow-cyan: 0 0 7px var(--neon-cyan), 0 0 15px var(--neon-cyan), 0 0 30px rgba(0,255,170,0.3);
    --neon-glow-gold: 0 0 7px var(--neon-gold), 0 0 15px var(--neon-gold), 0 0 30px rgba(255,215,0,0.3);
    --neon-text-glow: 0 0 4px var(--neon-pink), 0 0 8px var(--neon-pink), 0 0 16px rgba(255,20,147,0.5);
}

/* ── Background scanlines overlay ── */
[data-theme="neon"] .main-content::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.03) 2px,
        rgba(0,0,0,0.03) 4px
    );
    mix-blend-mode: overlay;
}

/* ── Cards — Neon glass avec border glow ── */
[data-theme="neon"] .card,
[data-theme="neon"] .stat-card,
[data-theme="neon"] .kpi-card,
[data-theme="neon"] .glass-card,
[data-theme="neon"] .widget-card,
[data-theme="neon"] .task-card,
[data-theme="neon"] .project-card,
[data-theme="neon"] .note-card {
    border: 1px solid rgba(255,20,147,0.3) !important;
    box-shadow:
        0 0 8px rgba(255,20,147,0.15),
        0 0 20px rgba(255,20,147,0.08),
        inset 0 0 30px rgba(255,20,147,0.03) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important;
}
[data-theme="neon"] .card:hover,
[data-theme="neon"] .stat-card:hover,
[data-theme="neon"] .kpi-card:hover,
[data-theme="neon"] .glass-card:hover,
[data-theme="neon"] .widget-card:hover,
[data-theme="neon"] .task-card:hover,
[data-theme="neon"] .project-card:hover,
[data-theme="neon"] .note-card:hover {
    border-color: rgba(255,20,147,0.6) !important;
    box-shadow:
        0 0 12px rgba(255,20,147,0.3),
        0 0 30px rgba(255,20,147,0.15),
        0 0 60px rgba(255,20,147,0.08),
        inset 0 0 40px rgba(255,20,147,0.05) !important;
    transform: translateY(-2px) !important;
}

/* ── Headings — Neon text glow ── */
[data-theme="neon"] h1,
[data-theme="neon"] h2,
[data-theme="neon"] .view-title,
[data-theme="neon"] .section-title,
[data-theme="neon"] .page-title,
[data-theme="neon"] .dashboard-greeting {
    text-shadow: var(--neon-text-glow) !important;
    color: #fff !important;
}
[data-theme="neon"] h3 {
    text-shadow: 0 0 4px rgba(255,20,147,0.4), 0 0 8px rgba(255,20,147,0.2);
}

/* ── Buttons — Neon pulsing borders ── */
[data-theme="neon"] .btn-primary,
[data-theme="neon"] button[class*="primary"],
[data-theme="neon"] .action-btn {
    border: 1px solid var(--neon-pink) !important;
    box-shadow: var(--neon-glow-sm) !important;
    text-shadow: 0 0 6px rgba(255,20,147,0.5);
    transition: box-shadow 0.2s ease !important;
}
[data-theme="neon"] .btn-primary:hover,
[data-theme="neon"] button[class*="primary"]:hover,
[data-theme="neon"] .action-btn:hover {
    box-shadow: var(--neon-glow-md) !important;
}

/* ── Inputs — Neon focus ── */
[data-theme="neon"] input:focus,
[data-theme="neon"] textarea:focus,
[data-theme="neon"] select:focus,
[data-theme="neon"] .input-field:focus {
    border-color: var(--neon-pink) !important;
    box-shadow: 0 0 8px rgba(255,20,147,0.3), 0 0 20px rgba(255,20,147,0.12) !important;
    outline: none !important;
}

/* ── Sidebar — Neon intensifié ── */
[data-theme="neon"] .sidebar {
    box-shadow:
        1px 0 0 rgba(255,20,147,0.4),
        4px 0 20px rgba(255,20,147,0.15),
        8px 0 40px rgba(255,20,147,0.08) !important;
}

[data-theme="neon"] .sidebar-item.active {
    box-shadow:
        inset 0 0 0 1px rgba(255,20,147,0.4),
        0 0 12px rgba(255,20,147,0.2),
        inset 0 0 20px rgba(255,20,147,0.06) !important;
}

[data-theme="neon"] .sidebar-item.active::before {
    box-shadow: 2px 0 15px var(--neon-pink), 4px 0 30px rgba(255,20,147,0.5) !important;
    background: var(--neon-pink) !important;
}

[data-theme="neon"] .sidebar-item:hover {
    box-shadow:
        inset 0 0 0 1px rgba(255,20,147,0.25),
        0 0 8px rgba(255,20,147,0.12) !important;
}

/* Sidebar section labels — neon glow */
[data-theme="neon"] .sidebar-section-label {
    text-shadow: 0 0 6px rgba(255,20,147,0.5), 0 0 12px rgba(255,20,147,0.25);
}

/* Sidebar brand — neon title */
[data-theme="neon"] .sidebar-brand-name {
    background: linear-gradient(135deg, #FF69B4, #FF1493, #00FFAA) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 6px rgba(255,20,147,0.6));
}

/* ── Dividers — Neon gradient lines ── */
[data-theme="neon"] .sidebar-divider,
[data-theme="neon"] hr,
[data-theme="neon"] .divider {
    background: linear-gradient(
        to right,
        transparent,
        rgba(255,20,147,0.5),
        rgba(0,255,170,0.3),
        rgba(255,20,147,0.5),
        transparent
    ) !important;
    border: none !important;
    height: 1px !important;
    box-shadow: 0 0 8px rgba(255,20,147,0.3);
}

/* ── Tags / Badges — Neon pill style ── */
[data-theme="neon"] .sidebar-tag,
[data-theme="neon"] .badge,
[data-theme="neon"] .tag {
    border: 1px solid rgba(255,20,147,0.5) !important;
    box-shadow: 0 0 6px rgba(255,20,147,0.2), inset 0 0 6px rgba(255,20,147,0.08) !important;
}

/* ── Scrollbar — Neon pink ── */
[data-theme="neon"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--neon-pink), var(--neon-purple)) !important;
    box-shadow: 0 0 6px rgba(255,20,147,0.4);
}
[data-theme="neon"] ::-webkit-scrollbar-track {
    background: rgba(10,0,20,0.8) !important;
}

/* ── Neon pulse animation sur le logo ── */
[data-theme="neon"] .sidebar-logo {
    animation: neonLogoPulse 3s ease-in-out infinite !important;
}

@keyframes neonLogoPulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255,20,147,0.4), 0 0 16px rgba(255,20,147,0.2);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 15px rgba(255,20,147,0.7), 0 0 30px rgba(255,20,147,0.4), 0 0 50px rgba(255,20,147,0.15);
        filter: brightness(1.15);
    }
}

/* ── Neon flicker subtil sur les icons actifs ── */
[data-theme="neon"] .sidebar-item.active .sidebar-item-icon svg {
    animation: neonIconFlicker 4s ease-in-out infinite !important;
}

@keyframes neonIconFlicker {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(255,20,147,0.8)); }
    10% { filter: drop-shadow(0 0 8px rgba(255,20,147,1)); }
    12% { filter: drop-shadow(0 0 3px rgba(255,20,147,0.5)); }
    14% { filter: drop-shadow(0 0 8px rgba(255,20,147,1)); }
    50% { filter: drop-shadow(0 0 10px rgba(255,20,147,0.9)) drop-shadow(0 0 20px rgba(255,20,147,0.4)); }
    52% { filter: drop-shadow(0 0 4px rgba(255,20,147,0.6)); }
    54% { filter: drop-shadow(0 0 10px rgba(255,20,147,0.9)); }
}

/* ── Notification bell — neon gold glow ── */
[data-theme="neon"] .sidebar-notif-bell svg path {
    stroke: var(--neon-gold) !important;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.6));
}

/* ── Avatar — neon ring ── */
[data-theme="neon"] .sidebar-avatar img,
[data-theme="neon"] .sidebar-avatar-emoji {
    box-shadow:
        0 0 0 2px rgba(255,20,147,0.5),
        0 0 10px rgba(255,20,147,0.3),
        0 0 20px rgba(255,20,147,0.15) !important;
}

/* ── Collapse button — neon pulse ── */
[data-theme="neon"] .sidebar-collapse-btn {
    border-color: var(--neon-pink) !important;
    box-shadow: 0 0 8px rgba(255,20,147,0.3), 0 0 16px rgba(255,20,147,0.15) !important;
}
[data-theme="neon"] .sidebar-collapse-btn:hover {
    box-shadow: var(--neon-glow-md) !important;
}

/* ── Main content area — ambient neon edge glow ── */
[data-theme="neon"] .main-content {
    box-shadow: inset 3px 0 20px rgba(255,20,147,0.05);
}

/* ── Dashboard KPI numbers — bright neon ── */
[data-theme="neon"] .kpi-value,
[data-theme="neon"] .stat-number,
[data-theme="neon"] .metric-value {
    text-shadow: 0 0 8px rgba(0,255,170,0.5), 0 0 16px rgba(0,255,170,0.25) !important;
    color: var(--neon-cyan) !important;
}

/* ── Success/done items — cyan neon ── */
[data-theme="neon"] .task-done .task-title,
[data-theme="neon"] .completed {
    text-shadow: 0 0 4px rgba(0,255,170,0.4);
    color: var(--neon-cyan) !important;
}

/* ── Links — neon underline on hover ── */
[data-theme="neon"] a:hover {
    text-shadow: 0 0 4px rgba(255,20,147,0.4);
}

/* ── Modal/popup — neon border glow ── */
[data-theme="neon"] .modal-content,
[data-theme="neon"] .popup,
[data-theme="neon"] .dropdown-menu,
[data-theme="neon"] .context-menu {
    border: 1px solid rgba(255,20,147,0.35) !important;
    box-shadow:
        0 0 15px rgba(255,20,147,0.2),
        0 0 40px rgba(255,20,147,0.08),
        0 20px 60px rgba(0,0,0,0.6) !important;
}

/* ── Footer trigger — neon gear ── */
[data-theme="neon"] .sidebar-footer-trigger:hover .sidebar-footer-gear svg {
    filter: drop-shadow(0 0 6px var(--neon-pink));
    stroke: var(--neon-pink);
}

/* ── Ambient glow bar top of sidebar ── */
[data-theme="neon"] .sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--neon-pink),
        var(--neon-cyan),
        var(--neon-pink),
        transparent
    );
    box-shadow: 0 0 10px var(--neon-pink), 0 0 20px rgba(255,20,147,0.3);
    animation: neonBarSlide 4s linear infinite;
    z-index: 200;
}

@keyframes neonBarSlide {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
[data-theme="neon"] .sidebar::after {
    background-size: 200% 100%;
}

/* ── Neon glow on workspace selector ── */
[data-theme="neon"] .workspace-selector-premium {
    border: 1px solid rgba(255,20,147,0.25) !important;
    box-shadow: 0 0 8px rgba(255,20,147,0.12) !important;
}

/* ── Tooltip neon style ── */
[data-theme="neon"] .tooltip,
[data-theme="neon"] [class*="tooltip"] {
    border: 1px solid rgba(255,20,147,0.4) !important;
    box-shadow: 0 0 12px rgba(255,20,147,0.2) !important;
}

/* ── Selection highlight neon ── */
[data-theme="neon"] ::selection {
    background: rgba(255,20,147,0.35) !important;
    color: #fff !important;
    text-shadow: 0 0 8px rgba(255,20,147,0.6);
}

/* ── Neon ambient corner glow on main content ── */
[data-theme="neon"] .main-content::after {
    content: '';
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle at bottom right,
        rgba(255,20,147,0.06) 0%,
        rgba(191,0,255,0.03) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}
/* ===== css/style-dragdrop.css?v=2602240010 ===== */
/* =============================================
   PRODUCTIVEAPP - STYLE-DRAGDROP.CSS v2
   Styles épurés pour le Drag & Drop
   ============================================= */

/* === TÂCHES DRAGGABLES === */
.bubble[draggable="true"] {
    cursor: grab;
    user-select: none;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}

.bubble[draggable="true"]:active {
    cursor: grabbing;
}

/* Tâche en cours de drag - opacité maintenue, fluidité maximale */
.bubble.dragging {
    opacity: 0.95 !important;
    transform: scale(1.02) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
    z-index: 1000;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: grabbing !important;
}

/* Zone de drop active - subtile */
.task-list.drag-over,
.bubbles-list.drag-over {
    background: rgba(224, 120, 64, 0.05);
    border-radius: 12px;
    min-height: 80px;
    transition: all 0.2s ease;
}

/* === INDICATEURS D'INSERTION ÉPURÉS === */

/* Ligne élégante au-dessus */
.bubble.drag-insert-above {
    position: relative;
}

.bubble.drag-insert-above::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: var(--accent, #e07840);
    border-radius: 3px;
    box-shadow: 0 0 8px var(--accent, #e07840);
}

/* Ligne élégante en-dessous */
.bubble.drag-insert-below {
    position: relative;
}

.bubble.drag-insert-below::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: var(--accent, #e07840);
    border-radius: 3px;
    box-shadow: 0 0 8px var(--accent, #e07840);
}

/* === PROJETS DRAGGABLES === */
.project-chip[draggable="true"] {
    cursor: grab;
    user-select: none;
    transition: all 0.2s ease;
}

.project-chip[draggable="true"]:active {
    cursor: grabbing;
}

/* Projet en cours de drag */
.project-chip.dragging-project {
    opacity: 0.95 !important;
    transform: scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: grabbing !important;
}

/* Indicateur insertion à gauche - ligne verticale */
.project-chip.drag-over-project-left {
    position: relative;
}

.project-chip.drag-over-project-left::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 20%;
    bottom: 20%;
    width: 3px;
    background: var(--accent, #e07840);
    border-radius: 3px;
    box-shadow: 0 0 6px var(--accent, #e07840);
}

/* Indicateur insertion à droite - ligne verticale */
.project-chip.drag-over-project-right {
    position: relative;
}

.project-chip.drag-over-project-right::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 20%;
    bottom: 20%;
    width: 3px;
    background: var(--accent, #e07840);
    border-radius: 3px;
    box-shadow: 0 0 6px var(--accent, #e07840);
}

/* === THÈMES SOMBRES === */
[data-theme="matrix"] .task-list.drag-over,
[data-theme="matrix"] .bubbles-list.drag-over {
    background: rgba(0, 255, 102, 0.05);
}

[data-theme="matrix"] .bubble.drag-insert-above::before,
[data-theme="matrix"] .bubble.drag-insert-below::after,
[data-theme="matrix"] .project-chip.drag-over-project-left::before,
[data-theme="matrix"] .project-chip.drag-over-project-right::after {
    background: #00ff66;
    box-shadow: 0 0 8px #00ff66;
}

[data-theme="midnight"] .bubble.drag-insert-above::before,
[data-theme="midnight"] .bubble.drag-insert-below::after,
[data-theme="midnight"] .project-chip.drag-over-project-left::before,
[data-theme="midnight"] .project-chip.drag-over-project-right::after {
    background: #6482ff;
    box-shadow: 0 0 8px #6482ff;
}

[data-theme="hacker"] .bubble.drag-insert-above::before,
[data-theme="hacker"] .bubble.drag-insert-below::after,
[data-theme="hacker"] .project-chip.drag-over-project-left::before,
[data-theme="hacker"] .project-chip.drag-over-project-right::after {
    background: #00ff00;
    box-shadow: 0 0 8px #00ff00;
}

[data-theme="fantasy"] .bubble.drag-insert-above::before,
[data-theme="fantasy"] .bubble.drag-insert-below::after,
[data-theme="fantasy"] .project-chip.drag-over-project-left::before,
[data-theme="fantasy"] .project-chip.drag-over-project-right::after {
    background: #bf6bff;
    box-shadow: 0 0 8px #bf6bff;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .bubble.drag-insert-above::before,
    .bubble.drag-insert-below::after {
        height: 4px;
        left: 5%;
        right: 5%;
    }
}


/* ===== css/sidebar.css?v=2602240010 ===== */
/* Deprecated - All styles moved to style-sidebar.css v5 */

/* ===== LANGUAGE SELECTOR ===== */
.sidebar-lang-trigger {
    cursor: pointer;
    position: relative;
}

.sidebar-lang-chevron {
    margin-left: auto;
    opacity: 0.5;
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.sidebar-lang-dropdown {
    display: none;
    flex-direction: column;
    background: var(--surface-elevated, #252535);
    border: 1px solid var(--border, #333);
    border-radius: 10px;
    padding: 6px;
    margin: 2px 8px 4px;
    gap: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    animation: langDropIn 0.15s ease;
}

.sidebar-lang-dropdown.open {
    display: flex;
}

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

.sidebar-lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    border: none;
    background: none;
    color: var(--text-secondary, #888);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
}

.sidebar-lang-option:hover {
    background: var(--surface-hover, rgba(255,255,255,0.06));
    color: var(--text-primary, #fff);
}

.sidebar-lang-option.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

#app-sidebar.collapsed .sidebar-lang-chevron,
#app-sidebar.collapsed .sidebar-lang-dropdown {
    display: none;
}


/* ===== css/style-sidebar.css?v=2603061200 ===== */
/* ================================================
   SIDEBAR v5.0 - ProductiveApp
   Classic toggle sidebar

   COMPORTEMENT:
   - Par défaut: OUVERTE (260px)
   - Clic chevron: replie/déplie
   - État sauvegardé en localStorage
   ================================================ */

:root {
    --sb-width-open: 260px;
    --sb-width-closed: 64px;
    --sb-bg: var(--bg-secondary, #0a0a0f);
    --sb-border: var(--border, rgba(255, 255, 255, 0.06));
    --sb-text: var(--text-muted, #71717a);
    --sb-text-hover: var(--text, #a1a1aa);
    --sb-text-active: var(--text, #fafafa);
    --sb-accent: var(--accent);
    --sb-hover: var(--bg-card, rgba(255, 255, 255, 0.06));
    --sb-active: var(--bg-card, color-mix(in srgb, var(--accent) 15%, transparent));
    --sb-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   CONTAINER
   ========================================== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sb-width-open);
    height: 100vh;
    background: var(--sb-bg);
    border-right: 1px solid var(--sb-border);
    display: none;
    flex-direction: column;
    z-index: 100;
    transition: width var(--sb-transition);
    overflow: hidden;
}

/* Visible après login */
body.logged-in .sidebar {
    display: flex;
}

/* État replié */
.sidebar.collapsed {
    width: var(--sb-width-closed);
}

/* ==========================================
   BOUTON CHEVRON (replier/déplier)
   ========================================== */
.sidebar-collapse-btn {
    position: absolute;
    top: 18px;
    right: 14px;
    width: 34px;
    height: 34px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 2px solid var(--sb-accent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sb-accent);
    z-index: 50;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 20%, transparent);
}

.sidebar-collapse-btn:hover {
    background: var(--sb-accent);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}

.sidebar-collapse-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: transform var(--sb-transition);
}

/* Chevron tourne quand replié */
.sidebar.collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
}

/* ==========================================
   HEADER
   ========================================== */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    min-height: 64px;
    border-bottom: 1px solid var(--sb-border);
}

.sidebar-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s;
}

.sidebar-logo:hover {
    transform: scale(1.05);
}

.sidebar-brand {
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--sb-transition);
}

.sidebar.collapsed .sidebar-brand {
    opacity: 0;
    pointer-events: none;
}

.sidebar-brand-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--sb-text-active);
}

.sidebar-brand-version {
    font-size: 10px;
    color: var(--sb-text);
    margin-top: 2px;
}

/* ==========================================
   PROFILE
   ========================================== */
.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sb-border);
}

.sidebar-avatar {
    position: relative;
    flex-shrink: 0;
}

.sidebar-avatar img,
.sidebar-avatar-emoji {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
}

.sidebar-avatar-emoji {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.sidebar-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--sb-bg);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: none !important;
}

.sidebar-status-dot:hover {
    transform: scale(1.15);
}

.sidebar-status-dot.online { background: #22c55e; }
.sidebar-status-dot.busy { background: #ef4444; }
.sidebar-status-dot.away { background: #f59e0b; }
.sidebar-status-dot.offline { background: #52525b; }

.sidebar-profile-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: opacity var(--sb-transition);
}

.sidebar.collapsed .sidebar-profile-info {
    opacity: 0;
    pointer-events: none;
}

.sidebar-profile-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--sb-text-active);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-profile-status {
    display: none !important;
}

/* Status Dropdown */
.sidebar-status-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 14px;
    background: #18181b;
    border: 1px solid var(--sb-border);
    border-radius: 10px;
    padding: 6px;
    min-width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.15s ease;
    z-index: 200;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.sidebar-status-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sidebar-status-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--sb-text);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sidebar-status-option:hover {
    background: var(--sb-hover);
    color: var(--sb-text-active);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.online { background: #22c55e; }
.status-dot.busy { background: #ef4444; }
.status-dot.away { background: #f59e0b; }
.status-dot.offline { background: #52525b; }

/* ==========================================
   NAVIGATION
   ========================================== */
.sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

/* Scrollbar invisible par défaut */
.sidebar-nav::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px;
    transition: background 0.2s ease;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

/* Scrollbar visible uniquement au hover de la sidebar */
.sidebar:hover .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

.sidebar:hover .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Firefox */
.sidebar-nav {
    scrollbar-color: transparent transparent;
}

.sidebar:hover .sidebar-nav {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* ==========================================
   NAV ITEMS
   ========================================== */
.sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    height: 44px;
    border-radius: 10px;
    color: var(--sb-text);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 4px;
}

.sidebar-item:hover {
    background: var(--sb-hover);
    color: var(--sb-text-hover);
}

.sidebar-item.active {
    background: var(--sb-active);
    color: var(--sb-text-active);
}

/* Barre active à gauche */
.sidebar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--sb-accent);
    border-radius: 0 3px 3px 0;
}

/* Icon */
.sidebar-item-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-item-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

/* Label */
.sidebar-label {
    font-size: 15.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity var(--sb-transition);
}

/* Label caché en collapsed — traité dans section COLLAPSED plus bas */

/* Badge (notifications) — masqué (user request) */
.sidebar-badge {
    display: none !important;
}

/* Tag (NEW, SOON) */
.sidebar-tag {
    font-size: 9px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 5px;
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    transition: opacity var(--sb-transition);
}

/* Tag caché en collapsed — traité dans section COLLAPSED plus bas */

.sidebar-tag.new {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.sidebar-tag.soon {
    background: rgba(113, 113, 122, 0.15);
    color: #a1a1aa;
}

/* ==========================================
   DIVIDER
   ========================================== */
.sidebar-divider {
    height: 1px;
    background: var(--sb-border);
    margin: 10px 14px;
}

/* ==========================================
   FOOTER — Compact avec engrenage déroulant
   ========================================== */
.sidebar-footer {
    border-top: 1px solid var(--sb-border);
    padding: 4px 10px 6px;
    position: relative;
}

.sidebar-footer .sidebar-item {
    height: 38px;
}

/* Trigger compact — la seule ligne visible par défaut */
.sidebar-footer-trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    height: 40px;
    border-radius: 11px;
    color: var(--sb-text);
    cursor: pointer;
    transition: all 0.18s ease;
    opacity: 0.65;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.sidebar-footer-trigger:hover {
    background: color-mix(in srgb, var(--sb-accent) 9%, transparent);
    color: var(--sb-text-active);
    opacity: 1;
    transform: translateX(2px);
}
.sidebar-footer-trigger .sidebar-footer-gear {
    opacity: 0.55;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.sidebar-footer-trigger.open .sidebar-footer-gear {
    transform: rotate(120deg);
    opacity: 1;
    color: var(--sb-accent);
}
.sidebar-footer-chevron {
    margin-left: auto;
    opacity: 0.35;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.sidebar-footer-trigger.open .sidebar-footer-chevron {
    transform: rotate(180deg);
    opacity: 0.75;
}

/* Panel déroulant — caché par défaut */
.sidebar-footer-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    opacity: 0;
}
.sidebar-footer-panel.open {
    max-height: 320px;
    opacity: 1;
    padding-bottom: 4px;
}

/* ==========================================
   TOOLTIP — DÉSACTIVÉ (user request)
   ========================================== */
.sidebar-tooltip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.sidebar-tooltip::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #1f1f28;
}

.sidebar-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

/* Cacher tooltip quand sidebar ouverte — double sécurité */
.sidebar:not(.collapsed) ~ .sidebar-tooltip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body:not(.sidebar-collapsed) .sidebar-tooltip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ==========================================
   CONTENT MARGIN (pour le contenu principal)
   ========================================== */
@media (min-width: 769px) {
    body.logged-in .main-content {
        margin-left: var(--sb-width-open);
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body.logged-in.sidebar-collapsed .main-content {
        margin-left: var(--sb-width-closed);
    }
}

/* ==========================================
   MOBILE
   ========================================== */
@media (max-width: 768px) {
    .sidebar {
        width: 0 !important;
        transform: translateX(-100%);
    }

    .sidebar.mobile-open {
        width: var(--sb-width-open) !important;
        transform: translateX(0);
    }

    .sidebar-collapse-btn {
        display: none;
    }

    body.logged-in .main-content {
        margin-left: 0 !important;
    }

    .sidebar-tooltip {
        display: none !important;
    }
}

/* Mobile toggle button */
.sidebar-mobile-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 98;
    width: 44px;
    height: 44px;
    background: var(--sb-bg);
    border: 1px solid var(--sb-border);
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    color: var(--sb-text);
    cursor: pointer;
}

@media (max-width: 768px) {
    body.logged-in .sidebar-mobile-toggle {
        display: flex;
    }
}

.sidebar-mobile-toggle svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Overlay mobile */
.sidebar-overlay {
    display: none;
}

@media (max-width: 768px) {
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

/* ==========================================
   THEMES
   ========================================== */
[data-theme="minimal"] .sidebar,
[data-theme="academie"] .sidebar {
    --sb-bg: #fafafa;
    --sb-border: rgba(0, 0, 0, 0.08);
    --sb-text: #6b7280;
    --sb-text-hover: #374151;
    --sb-text-active: #111827;
    --sb-hover: rgba(0, 0, 0, 0.04);
    --sb-active: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Accent par thème */
[data-theme="executive"] { --sb-accent: #d4af37; }
[data-theme="corporate"] { --sb-accent: #3b82f6; }
[data-theme="sunset"] { --sb-accent: #f97316; }
[data-theme="ocean"] { --sb-accent: #06b6d4; }
[data-theme="forest"] { --sb-accent: #22c55e; }
[data-theme="bubblegum"] { --sb-accent: #ec4899; }
[data-theme="aurora"] { --sb-accent: var(--accent-light); }
[data-theme="matrix"] { --sb-accent: #22c55e; }
[data-theme="cyberpunk"] { --sb-accent: #f0abfc; }
[data-theme="terminal"] { --sb-accent: #22c55e; }
[data-theme="midnight"] { --sb-accent: var(--accent-light); }

/* ==========================================
   CLEANUP - Cacher anciens boutons
   ========================================== */
.sidebar-toggle,
.sidebar-close,
.sidebar-pin {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM SIDEBAR v3.0 — 2026-03-01
   Artist edition. Glassmorphism · Micro-glow · Fluid motion.
   ══════════════════════════════════════════════════════════════ */

/* ── Container ── */
.sidebar {
    background: var(--sb-bg) !important;
    border-right: none !important;
    box-shadow:
        1px 0 0 color-mix(in srgb, var(--sb-accent) 12%, transparent),
        6px 0 40px rgba(0, 0, 0, 0.45),
        20px 0 60px rgba(0, 0, 0, 0.2);
    /* Léger reflet interne à droite */
    background-image:
        linear-gradient(
            to right,
            transparent 95%,
            color-mix(in srgb, var(--sb-accent) 4%, transparent) 100%
        ) !important;
}

/* ── Items ── */
.sidebar-item {
    padding: 0 14px;
    height: 46px;
    border-radius: 12px;
    margin: 1px 6px;
    color: var(--sb-text);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}

.sidebar-item:hover {
    background: color-mix(in srgb, var(--sb-accent) 9%, transparent) !important;
    color: var(--sb-text-active) !important;
    transform: translateX(3px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sb-accent) 18%, transparent);
}

.sidebar-item.active {
    background: color-mix(in srgb, var(--sb-accent) 16%, transparent) !important;
    color: var(--sb-text-active) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sb-accent) 28%, transparent);
}

/* Pill active à gauche — plus fine, plus élégante */
.sidebar-item.active::before {
    background: linear-gradient(180deg, var(--sb-accent), color-mix(in srgb, var(--sb-accent) 50%, transparent));
    width: 3px;
    height: 26px;
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 0 12px color-mix(in srgb, var(--sb-accent) 60%, transparent);
}

/* Icône active — glow accent */
.sidebar-item.active .sidebar-item-icon svg {
    stroke: var(--sb-accent);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sb-accent) 70%, transparent));
}

/* Icône hover — légèrement illuminée */
.sidebar-item:hover .sidebar-item-icon svg {
    stroke: var(--sb-text-active);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--sb-accent) 35%, transparent));
}

/* ── Header ── */
.sidebar-header {
    border-bottom: 1px solid color-mix(in srgb, var(--sb-accent) 10%, var(--sb-border)) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--sb-accent) 5%, transparent),
        transparent 60%
    );
    padding: 14px 16px;
}

.sidebar-logo {
    border-radius: 10px;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--sb-accent) 30%, transparent);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.sidebar-logo:hover {
    transform: scale(1.1) rotate(-3deg);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--sb-accent) 50%, transparent);
}

.sidebar-brand-name {
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--sb-text-active), color-mix(in srgb, var(--sb-accent) 80%, var(--sb-text-active)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.01em;
}

/* ── Profile ── */
.sidebar-profile {
    border-bottom: 1px solid color-mix(in srgb, var(--sb-accent) 8%, var(--sb-border)) !important;
    padding: 10px 14px;
}

.sidebar-avatar img,
.sidebar-avatar-emoji {
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 0 2px color-mix(in srgb, var(--sb-accent) 25%, transparent);
    transition: box-shadow 0.2s ease;
}
.sidebar-avatar:hover img,
.sidebar-avatar:hover .sidebar-avatar-emoji {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 2px color-mix(in srgb, var(--sb-accent) 55%, transparent);
}

.sidebar-avatar-emoji {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--sb-accent) 20%, transparent),
        color-mix(in srgb, var(--sb-accent) 8%, transparent)
    );
    font-size: 18px;
}

.sidebar-profile-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--sb-text-active);
    letter-spacing: -0.01em;
}

.sidebar-profile-status {
    display: none !important;
}

/* ── Collapse button ── */
.sidebar-collapse-btn {
    background: color-mix(in srgb, var(--sb-accent) 12%, transparent) !important;
    border: 1.5px solid color-mix(in srgb, var(--sb-accent) 35%, transparent) !important;
    color: var(--sb-accent) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 0 0 color-mix(in srgb, var(--sb-accent) 0%, transparent);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.sidebar-collapse-btn:hover {
    background: var(--sb-accent) !important;
    color: #fff !important;
    border-color: var(--sb-accent) !important;
    box-shadow:
        0 4px 20px color-mix(in srgb, var(--sb-accent) 45%, transparent),
        0 0 0 4px color-mix(in srgb, var(--sb-accent) 15%, transparent) !important;
    transform: scale(1.08);
}

/* ── Dividers ── */
.sidebar-divider {
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        color-mix(in srgb, var(--sb-accent) 18%, var(--sb-border)),
        transparent
    ) !important;
    margin: 8px 16px;
    border: none;
}

/* ── Footer ── */
.sidebar-footer {
    border-top: 1px solid color-mix(in srgb, var(--sb-accent) 8%, var(--sb-border)) !important;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--sb-accent) 4%, transparent),
        transparent
    );
    padding: 4px 8px 8px !important;
}

/* ── Status dropdown ── */
.sidebar-status-dropdown {
    background: var(--bg-secondary, #18181b);
    border: 1px solid color-mix(in srgb, var(--sb-accent) 20%, var(--border, rgba(255,255,255,0.1)));
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--sb-accent) 8%, transparent);
    backdrop-filter: blur(12px);
}

/* ── Tooltip ── */
.sidebar-tooltip {
    background: var(--bg-secondary, #1f1f28);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.sidebar-tooltip::before {
    border-right-color: var(--bg-secondary, #1f1f28);
}

/* ═══════════════════════════════════════════════════════
   SECTION LABELS — Même énergie que les items sidebar
   ═══════════════════════════════════════════════════════ */
.sidebar-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    margin: 6px 6px 2px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--sb-accent, var(--accent-light));
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
    text-transform: none;
    opacity: 1;
}
.sidebar-section-label:hover {
    background: color-mix(in srgb, var(--sb-accent) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sb-accent) 20%, transparent);
    transform: translateX(2px);
}
/* Ligne décorative fine après le label */
.sidebar-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--sb-accent) 20%, transparent),
        transparent
    );
    border-radius: 1px;
    min-width: 16px;
}

/* Chevron de section */
.sidebar-section-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--sb-accent) 50%, transparent);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), color .2s;
    flex-shrink: 0;
    order: 99;
}
.sidebar-section-label:hover .sidebar-section-chevron {
    color: var(--sb-accent, var(--accent-light));
}
/* Collapsed → chevron pointe vers la droite */
.sidebar-section--collapsed .sidebar-section-chevron {
    transform: rotate(-90deg);
}
/* Items cachés — display none immédiat */
.sidebar-section-item--hidden {
    display: none !important;
}

.sidebar-tag.soon {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.05em;
}


/* ==========================================
   COLLAPSED STATE — Definitive fix v5.2
   All rules use high specificity to win over
   style-overrides.css !important declarations.
   ========================================== */

/* --- Container: proper width + overflow --- */
body.sidebar-collapsed .sidebar,
body.sidebar-collapsed #app-sidebar,
body.logged-in.sidebar-collapsed aside#app-sidebar.sidebar,
#app-sidebar.sidebar.collapsed {
    width: var(--sb-width-closed, 64px) !important;
    max-width: 64px !important;
    min-width: 64px !important;
    overflow-x: visible !important;
    overflow-y: hidden !important;
}

/* --- Collapse button: centered with stable transform --- */
.sidebar.collapsed .sidebar-collapse-btn {
    position: absolute !important;
    right: auto !important;
    left: 50% !important;
    top: 15px !important;
    width: 30px !important;
    height: 30px !important;
    transform: translateX(-50%) !important;   /* center horizontally */
}
.sidebar.collapsed .sidebar-collapse-btn:hover {
    transform: translateX(-50%) scale(1.08) !important;   /* keep centering on hover */
}
.sidebar.collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg) !important;
}

/* --- Header: logo centered below collapse btn --- */
.sidebar.collapsed .sidebar-header {
    justify-content: center !important;
    padding: 48px 0 8px !important;   /* top padding clears the collapse button */
    gap: 0 !important;
    min-height: auto !important;
}
.sidebar.collapsed .sidebar-brand {
    display: none !important;
}

/* --- Profile: avatar only, centered --- */
.sidebar.collapsed .sidebar-profile {
    justify-content: center !important;
    padding: 8px 0 !important;
    gap: 0 !important;
}
.sidebar.collapsed .sidebar-profile-info {
    display: none !important;
    width: 0 !important;
}
/* --- Avatar: hide when collapsed, keep only bell --- */
.sidebar.collapsed .sidebar-avatar {
    display: none !important;
}
.sidebar-notif-bell {
    display: flex !important;
}
.sidebar.collapsed .sidebar-notif-bell {
    display: flex !important;
    margin: 0 auto !important;
}
.sidebar.collapsed .sidebar-logo {
    display: none !important;
}
.sidebar.collapsed .sidebar-status-dropdown {
    display: none !important;
}

/* --- Nav container: flex column centered --- */
.sidebar.collapsed .sidebar-nav,
#app-sidebar.collapsed .sidebar-nav {
    flex: 1 !important;
    padding: 6px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow-y: auto !important;      /* scroll only in the nav area */
    overflow-x: visible !important;   /* don't clip active bar glow */
}

/* --- Nav items: icon-only centered boxes --- */
.sidebar.collapsed .sidebar-item {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 1px 0 !important;         /* no horizontal margin; centering via parent align-items */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    border-radius: 12px !important;
    overflow: visible !important;      /* let active bar + glow paint outside */
    flex-shrink: 0 !important;
}

/* --- Disable hover translateX in collapsed (keeps icons centered) --- */
.sidebar.collapsed .sidebar-item:hover {
    transform: none !important;
}

/* --- Icon sizing in collapsed --- */
.sidebar.collapsed .sidebar-item-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.sidebar.collapsed .sidebar-item-icon svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
}

/* --- Hide labels, tags, badges, info btn --- */
.sidebar.collapsed .sidebar-label {
    display: none !important;
}
.sidebar.collapsed .sidebar-tag,
.sidebar.collapsed .sidebar-item-info,
.sidebar.collapsed .sb-tools-arrow,
.sidebar.collapsed .sidebar-lang-chevron {
    display: none !important;
}

/* --- Active indicator bar: flush with sidebar left edge --- */
.sidebar.collapsed .sidebar-item.active::before {
    /* Item is 42px centered in 64px → item offset = (64-42)/2 = 11px from sidebar edge.
       Bar must be at sidebar left edge → left = -11px relative to item. */
    left: -11px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 22px !important;
    border-radius: 0 3px 3px 0 !important;
}

/* --- Section labels: completely removed --- */
.sidebar.collapsed .sidebar-section-label {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* --- Section-hidden items: must show as icons in collapsed --- */
.sidebar.collapsed .sidebar-section-item--hidden {
    display: flex !important;
}

/* --- Dividers: hidden in collapsed --- */
.sidebar.collapsed .sidebar-divider {
    display: none !important;
}

/* --- Lang dropdown: hidden in collapsed --- */
.sidebar.collapsed .sidebar-lang-dropdown {
    display: none !important;
}

/* --- Tools panel: hidden in collapsed --- */
.sidebar.collapsed .sb-tools-panel {
    display: none !important;
}

/* --- Workspace selector: hidden in collapsed --- */
.sidebar.collapsed .workspace-selector-premium,
.sidebar.collapsed .workspace-selector {
    display: none !important;
}

/* --- Spotify slot: hidden in collapsed --- */
.sidebar.collapsed .sp-sidebar-slot {
    display: none !important;
}

/* --- Footer: icon-only gear button --- */
.sidebar.collapsed .sidebar-footer {
    padding: 4px 0 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.sidebar.collapsed .sidebar-footer-trigger {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
    margin: 0 auto !important;
}
.sidebar.collapsed .sidebar-footer-trigger:hover {
    transform: none !important;
}
.sidebar.collapsed .sidebar-footer-trigger .sidebar-label,
.sidebar.collapsed .sidebar-footer-trigger .sidebar-footer-chevron {
    display: none !important;
}
/* --- Footer panel in collapsed: floating popup to the right --- */
.sidebar.collapsed .sidebar-footer-panel {
    display: none !important;
}
.sidebar.collapsed .sidebar-footer-panel.open {
    display: flex !important;
    position: fixed !important;
    bottom: 60px !important;
    left: 68px !important;
    width: 220px !important;
    flex-direction: column !important;
    background: var(--sb-bg, #0a0a0f) !important;
    border: 1px solid var(--sb-border, rgba(255,255,255,0.08)) !important;
    border-radius: 12px !important;
    padding: 6px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) !important;
    z-index: 1000 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    animation: sb-popup-in 0.15s ease !important;
}
@keyframes sb-popup-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
.sidebar.collapsed .sidebar-footer-panel.open .sidebar-item {
    width: 100% !important;
    height: auto !important;
    padding: 8px 12px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border-radius: 8px !important;
}
.sidebar.collapsed .sidebar-footer-panel.open .sidebar-label {
    display: inline !important;
    font-size: 13px !important;
    color: var(--sb-text, #71717a) !important;
    white-space: nowrap !important;
}
.sidebar.collapsed .sidebar-footer-panel.open .sidebar-item:hover {
    background: var(--sb-hover, rgba(255,255,255,0.06)) !important;
}
.sidebar.collapsed .sidebar-footer-panel.open .sidebar-item:hover .sidebar-label {
    color: var(--sb-text-hover, #a1a1aa) !important;
}

/* ==========================================
   GALAXY ITEM — Aura rayonnante
   ========================================== */

/* État normal : légère aura permanente pour identifier l'item galaxy */
.sidebar-item[data-id="galaxy"] .sidebar-item-icon {
    position: relative;
}

.sidebar-item[data-id="galaxy"] .sidebar-item-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.sidebar-item[data-id="galaxy"]:hover .sidebar-item-icon::after {
    opacity: 1;
}

/* Mode actif : aura pulsante pleine */
.sidebar-item[data-id="galaxy"].active {
    background: transparent !important;
    position: relative;
}

.sidebar-item[data-id="galaxy"].active .sidebar-item-icon {
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.9));
}

.sidebar-item[data-id="galaxy"].active .sidebar-item-icon::after {
    opacity: 1;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.35) 0%, rgba(99, 50, 255, 0.1) 50%, transparent 75%);
    animation: galaxy-pulse 2.5s ease-in-out infinite;
}

.sidebar-item[data-id="galaxy"].active svg {
    stroke: #a78bfa !important;
}

/* Barre active remplacée par un halo en arc */
.sidebar-item[data-id="galaxy"].active::before {
    background: linear-gradient(180deg, transparent, #8b5cf6, transparent) !important;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.8);
}

@keyframes galaxy-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.4);
        opacity: 0.3;
    }
}

/* ==========================================
   GALAXY VIEW — Sidebar adaptation
   ========================================== */
body.galaxy-active .sidebar {
    z-index: 200;               /* Au-dessus du galaxy canvas (z-index: ~150) */
    height: 100vh;              /* Toujours pleine hauteur */
    height: 100dvh;             /* Dynamic viewport height — évite la coupure mobile/tablet */
    overflow: hidden;           /* Pas de débordement externe */
    display: flex !important;   /* Forcer flex même si galaxy tente de l'écraser */
}

/* La nav occupe tout l'espace disponible entre header et footer */
body.galaxy-active .sidebar-nav {
    flex: 1;
    min-height: 0;              /* Permet à flex de réduire correctement */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollbar encore plus discrète en mode galaxy (fond sombre) */
body.galaxy-active .sidebar:hover .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
}
/* ===== css/sidebar-nav.css?v=2602240010 ===== */
/* Deprecated - All styles moved to style-sidebar.css v5 */


/* ===== css/sidebar-themes.css?v=2602240010 ===== */
/* ================================================
   SIDEBAR THEME SUPPORT v2.0
   Smart defaults that auto-inherit from theme vars
   ================================================ */

/* === DEFAULT: Auto-inherit from theme variables === */
.sidebar {
    --sidebar-bg: var(--bg-secondary);
    --sidebar-border: var(--border);
    --sidebar-hover: var(--bg-card);
    --sidebar-active: var(--bg-card);
    --sidebar-text: var(--text-muted);
    --sidebar-text-active: var(--text);
    --sidebar-accent: var(--accent);
}

/* ==============================================
   DARK THEME FINE-TUNING
   ============================================== */

[data-theme="executive"] .sidebar {
    --sidebar-bg: #0d0d0d;
    --sidebar-hover: rgba(212, 175, 55, 0.08);
    --sidebar-active: rgba(212, 175, 55, 0.15);
}

[data-theme="corporate"] .sidebar {
    --sidebar-bg: #0a1628;
    --sidebar-hover: rgba(100, 149, 237, 0.08);
    --sidebar-active: rgba(100, 149, 237, 0.15);
}

[data-theme="diplomat"] .sidebar {
    --sidebar-bg: #110407;
    --sidebar-hover: rgba(220, 30, 58, 0.13);
    --sidebar-active: rgba(220, 30, 58, 0.24);
    --sidebar-border: rgba(220, 30, 58, 0.20);
}

[data-theme="sterling"] .sidebar {
    --sidebar-bg: #1a1e24;
    --sidebar-hover: rgba(192, 200, 210, 0.06);
    --sidebar-active: rgba(192, 200, 210, 0.12);
}

[data-theme="ocean"] .sidebar {
    --sidebar-bg: #051923;
    --sidebar-hover: rgba(0, 180, 216, 0.08);
    --sidebar-active: rgba(0, 180, 216, 0.15);
}

[data-theme="forest"] .sidebar {
    --sidebar-bg: #0a1208;
    --sidebar-hover: rgba(74, 170, 100, 0.08);
    --sidebar-active: rgba(74, 170, 100, 0.15);
}

[data-theme="sunset"] .sidebar {
    --sidebar-bg: #1a0a05;
    --sidebar-hover: rgba(249, 115, 22, 0.08);
    --sidebar-active: rgba(249, 115, 22, 0.15);
}

[data-theme="desert"] .sidebar {
    --sidebar-bg: #1a1410;
    --sidebar-hover: rgba(224, 120, 64, 0.08);
    --sidebar-active: rgba(224, 120, 64, 0.15);
}

[data-theme="lavender"] .sidebar {
    --sidebar-bg: #150d1a;
    --sidebar-hover: rgba(176, 124, 200, 0.08);
    --sidebar-active: rgba(176, 124, 200, 0.15);
}

[data-theme="aurora"] .sidebar {
    --sidebar-bg: #0a0d14;
    --sidebar-hover: rgba(147, 197, 253, 0.08);
    --sidebar-active: rgba(147, 197, 253, 0.15);
}

[data-theme="midnight"] .sidebar {
    --sidebar-bg: #0d0d18;
    --sidebar-hover: rgba(124, 159, 255, 0.08);
    --sidebar-active: rgba(124, 159, 255, 0.15);
}

[data-theme="twilight"] .sidebar {
    --sidebar-bg: #14081a;
    --sidebar-hover: rgba(196, 144, 224, 0.08);
    --sidebar-active: rgba(196, 144, 224, 0.15);
}

[data-theme="candlelight"] .sidebar {
    --sidebar-bg: #1a1208;
    --sidebar-hover: rgba(232, 168, 64, 0.08);
    --sidebar-active: rgba(232, 168, 64, 0.15);
}

[data-theme="moonlit"] .sidebar {
    --sidebar-bg: #0d1018;
    --sidebar-hover: rgba(160, 184, 216, 0.06);
    --sidebar-active: rgba(160, 184, 216, 0.12);
}

[data-theme="golden-hour"] .sidebar {
    --sidebar-bg: #1a1008;
    --sidebar-hover: rgba(212, 160, 64, 0.08);
    --sidebar-active: rgba(212, 160, 64, 0.15);
}

[data-theme="storm"] .sidebar {
    --sidebar-bg: #0a0e14;
    --sidebar-hover: rgba(107, 141, 181, 0.08);
    --sidebar-active: rgba(107, 141, 181, 0.15);
}

[data-theme="bubblegum"] .sidebar {
    --sidebar-bg: #1a0a14;
    --sidebar-hover: rgba(255, 107, 157, 0.08);
    --sidebar-active: rgba(255, 107, 157, 0.15);
}

[data-theme="neon"] .sidebar {
    --sidebar-bg: #0a0014;
    --sidebar-hover: rgba(255, 20, 147, 0.08);
    --sidebar-active: rgba(255, 20, 147, 0.15);
}

[data-theme="retrowave"] .sidebar {
    --sidebar-bg: #0d0520;
    --sidebar-hover: rgba(255, 110, 199, 0.08);
    --sidebar-active: rgba(255, 110, 199, 0.15);
}

[data-theme="coral"] .sidebar {
    --sidebar-bg: #1a0e0e;
    --sidebar-hover: rgba(255, 111, 97, 0.08);
    --sidebar-active: rgba(255, 111, 97, 0.15);
}

[data-theme="obsidian"] .sidebar {
    --sidebar-bg: #0b0b0b;
    --sidebar-hover: rgba(160, 160, 160, 0.06);
    --sidebar-active: rgba(160, 160, 160, 0.12);
}

[data-theme="clay"] .sidebar {
    --sidebar-bg: #201A14;
    --sidebar-hover: rgba(184, 152, 120, 0.08);
    --sidebar-active: rgba(184, 152, 120, 0.15);
}

[data-theme="espresso"] .sidebar {
    --sidebar-bg: #140E0A;
    --sidebar-hover: rgba(168, 120, 72, 0.08);
    --sidebar-active: rgba(168, 120, 72, 0.15);
}

[data-theme="matrix"] .sidebar {
    --sidebar-bg: #0a0f0a;
    --sidebar-hover: rgba(0, 255, 102, 0.06);
    --sidebar-active: rgba(0, 255, 102, 0.15);
    --sidebar-text: #70b070;
}

[data-theme="cyberpunk"] .sidebar {
    --sidebar-bg: #0d0221;
    --sidebar-hover: rgba(255, 0, 255, 0.08);
    --sidebar-active: rgba(255, 0, 255, 0.15);
}

[data-theme="terminal"] .sidebar {
    --sidebar-bg: #0a0800;
    --sidebar-hover: rgba(255, 176, 0, 0.08);
    --sidebar-active: rgba(255, 176, 0, 0.15);
    --sidebar-text: #B89848;
}

[data-theme="tron"] .sidebar {
    --sidebar-bg: #000810;
    --sidebar-hover: rgba(0, 212, 255, 0.08);
    --sidebar-active: rgba(0, 212, 255, 0.15);
}

[data-theme="hologram"] .sidebar {
    --sidebar-bg: #0d1018;
    --sidebar-hover: rgba(136, 221, 255, 0.06);
    --sidebar-active: rgba(136, 221, 255, 0.12);
}

[data-theme="art-deco"] .sidebar {
    --sidebar-bg: #0a0808;
    --sidebar-hover: rgba(200, 160, 64, 0.08);
    --sidebar-active: rgba(200, 160, 64, 0.15);
}

[data-theme="cosmic"] .sidebar {
    --sidebar-bg: #050210;
    --sidebar-hover: rgba(153, 102, 255, 0.08);
    --sidebar-active: rgba(153, 102, 255, 0.15);
}

/* ==============================================
   LIGHT THEME SIDEBARS
   ============================================== */

[data-theme="ivory"] .sidebar {
    --sidebar-bg: #F0ECE2;
    --sidebar-border: rgba(139, 115, 85, 0.15);
    --sidebar-hover: rgba(139, 115, 85, 0.06);
    --sidebar-active: rgba(139, 115, 85, 0.12);
    --sidebar-text: #8B7B6B;
    --sidebar-text-active: #3D3226;
    --sidebar-accent: #8B7355;
}

[data-theme="sakura"] .sidebar {
    --sidebar-bg: #F0E8EC;
    --sidebar-border: rgba(212, 104, 140, 0.15);
    --sidebar-hover: rgba(212, 104, 140, 0.06);
    --sidebar-active: rgba(212, 104, 140, 0.12);
    --sidebar-text: #907080;
    --sidebar-text-active: #3A2530;
    --sidebar-accent: #D4688C;
}

[data-theme="pastel"] .sidebar {
    --sidebar-bg: #EDE6F2;
    --sidebar-border: rgba(168, 136, 200, 0.15);
    --sidebar-hover: rgba(168, 136, 200, 0.06);
    --sidebar-active: rgba(168, 136, 200, 0.12);
    --sidebar-text: #887898;
    --sidebar-text-active: #3A3040;
    --sidebar-accent: #A888C8;
}

[data-theme="mint"] .sidebar {
    --sidebar-bg: #DCEEE4;
    --sidebar-border: rgba(61, 168, 120, 0.15);
    --sidebar-hover: rgba(61, 168, 120, 0.06);
    --sidebar-active: rgba(61, 168, 120, 0.12);
    --sidebar-text: #588870;
    --sidebar-text-active: #1A3A2A;
    --sidebar-accent: #3DA878;
}

[data-theme="paper"] .sidebar {
    --sidebar-bg: #ECE8DE;
    --sidebar-border: rgba(139, 123, 101, 0.15);
    --sidebar-hover: rgba(139, 123, 101, 0.06);
    --sidebar-active: rgba(139, 123, 101, 0.12);
    --sidebar-text: #887868;
    --sidebar-text-active: #3A3228;
    --sidebar-accent: #8B7B65;
}

[data-theme="porcelain"] .sidebar {
    --sidebar-bg: #E2E8F0;
    --sidebar-border: rgba(104, 136, 168, 0.15);
    --sidebar-hover: rgba(104, 136, 168, 0.06);
    --sidebar-active: rgba(104, 136, 168, 0.12);
    --sidebar-text: #6880A0;
    --sidebar-text-active: #2A3440;
    --sidebar-accent: #6888A8;
}

[data-theme="zen"] .sidebar {
    --sidebar-bg: #E8E4D6;
    --sidebar-border: rgba(112, 128, 88, 0.15);
    --sidebar-hover: rgba(112, 128, 88, 0.06);
    --sidebar-active: rgba(112, 128, 88, 0.12);
    --sidebar-text: #808068;
    --sidebar-text-active: #3A3830;
    --sidebar-accent: #708058;
}

[data-theme="watercolor"] .sidebar {
    --sidebar-bg: #ECE6EE;
    --sidebar-border: rgba(136, 136, 192, 0.15);
    --sidebar-hover: rgba(136, 136, 192, 0.06);
    --sidebar-active: rgba(136, 136, 192, 0.12);
    --sidebar-text: #887898;
    --sidebar-text-active: #383040;
    --sidebar-accent: #8888C0;
}

[data-theme="nordic"] .sidebar {
    --sidebar-bg: #E4DED2;
    --sidebar-border: rgba(90, 122, 106, 0.15);
    --sidebar-hover: rgba(90, 122, 106, 0.06);
    --sidebar-active: rgba(90, 122, 106, 0.12);
    --sidebar-text: #708068;
    --sidebar-text-active: #303828;
    --sidebar-accent: #5A7A6A;
}

[data-theme="academie"] .sidebar {
    --sidebar-bg: #36393f;
    --sidebar-hover: rgba(218, 165, 32, 0.08);
    --sidebar-active: rgba(218, 165, 32, 0.15);
}

/* ==============================================
   NEW THEMES v4.0 — DARK SIDEBARS
   ============================================== */

[data-theme="moss"] .sidebar {
    --sidebar-bg: #0A0E08;
    --sidebar-hover: rgba(80, 120, 50, 0.08);
    --sidebar-active: rgba(80, 120, 50, 0.15);
}

[data-theme="ember"] .sidebar {
    --sidebar-bg: #180808;
    --sidebar-hover: rgba(220, 80, 30, 0.08);
    --sidebar-active: rgba(220, 80, 30, 0.15);
}

[data-theme="charcoal"] .sidebar {
    --sidebar-bg: #101214;
    --sidebar-hover: rgba(150, 160, 170, 0.06);
    --sidebar-active: rgba(150, 160, 170, 0.12);
}

[data-theme="bioluminescence"] .sidebar {
    --sidebar-bg: #040810;
    --sidebar-hover: rgba(0, 200, 220, 0.08);
    --sidebar-active: rgba(0, 200, 220, 0.15);
}

[data-theme="ukiyo-e"] .sidebar {
    --sidebar-bg: #0C0A14;
    --sidebar-hover: rgba(180, 80, 60, 0.08);
    --sidebar-active: rgba(180, 80, 60, 0.15);
}

[data-theme="automne"] .sidebar {
    --sidebar-bg: #1A0E08;
    --sidebar-hover: rgba(200, 90, 40, 0.08);
    --sidebar-active: rgba(200, 90, 40, 0.15);
}

[data-theme="hiver"] .sidebar {
    --sidebar-bg: #080C14;
    --sidebar-hover: rgba(136, 184, 224, 0.08);
    --sidebar-active: rgba(136, 184, 224, 0.15);
}

[data-theme="amethyst"] .sidebar {
    --sidebar-bg: #0C0618;
    --sidebar-hover: rgba(144, 96, 216, 0.08);
    --sidebar-active: rgba(144, 96, 216, 0.15);
}

[data-theme="jade"] .sidebar {
    --sidebar-bg: #060E0A;
    --sidebar-hover: rgba(64, 168, 120, 0.08);
    --sidebar-active: rgba(64, 168, 120, 0.15);
}

[data-theme="ruby"] .sidebar {
    --sidebar-bg: #140608;
    --sidebar-hover: rgba(216, 48, 64, 0.08);
    --sidebar-active: rgba(216, 48, 64, 0.15);
}

[data-theme="copper"] .sidebar {
    --sidebar-bg: #120C08;
    --sidebar-hover: rgba(200, 120, 80, 0.08);
    --sidebar-active: rgba(200, 120, 80, 0.15);
}

[data-theme="sahara"] .sidebar {
    --sidebar-bg: #1C1408;
    --sidebar-hover: rgba(210, 175, 90, 0.08);
    --sidebar-active: rgba(210, 175, 90, 0.15);
}

[data-theme="fjord"] .sidebar {
    --sidebar-bg: #060C10;
    --sidebar-hover: rgba(60, 130, 150, 0.08);
    --sidebar-active: rgba(60, 130, 150, 0.15);
}

[data-theme="bali"] .sidebar {
    --sidebar-bg: #0A1210;
    --sidebar-hover: rgba(0, 180, 150, 0.08);
    --sidebar-active: rgba(0, 180, 150, 0.15);
}

/* ==============================================
   NEW THEMES v4.0 — LIGHT SIDEBARS
   ============================================== */

[data-theme="printemps"] .sidebar {
    --sidebar-bg: #E8F0DC;
    --sidebar-border: rgba(120, 180, 100, 0.15);
    --sidebar-hover: rgba(120, 180, 100, 0.06);
    --sidebar-active: rgba(120, 180, 100, 0.12);
    --sidebar-text: #688858;
    --sidebar-text-active: #2A3820;
    --sidebar-accent: #78B464;
}

[data-theme="ete"] .sidebar {
    --sidebar-bg: #ECE8D8;
    --sidebar-border: rgba(40, 144, 192, 0.15);
    --sidebar-hover: rgba(40, 144, 192, 0.06);
    --sidebar-active: rgba(40, 144, 192, 0.12);
    --sidebar-text: #607888;
    --sidebar-text-active: #1A2830;
    --sidebar-accent: #2890C0;
}

[data-theme="pearl"] .sidebar {
    --sidebar-bg: #ECEAE8;
    --sidebar-border: rgba(160, 152, 176, 0.15);
    --sidebar-hover: rgba(160, 152, 176, 0.06);
    --sidebar-active: rgba(160, 152, 176, 0.12);
    --sidebar-text: #888090;
    --sidebar-text-active: #383040;
    --sidebar-accent: #A098B0;
}

[data-theme="snow"] .sidebar {
    --sidebar-bg: #E8ECF2;
    --sidebar-border: rgba(100, 120, 150, 0.12);
    --sidebar-hover: rgba(100, 120, 150, 0.06);
    --sidebar-active: rgba(100, 120, 150, 0.12);
    --sidebar-text: #7888A0;
    --sidebar-text-active: #2A3040;
    --sidebar-accent: #6880A0;
}

[data-theme="bamboo"] .sidebar {
    --sidebar-bg: #E4E0D0;
    --sidebar-border: rgba(100, 128, 60, 0.15);
    --sidebar-hover: rgba(100, 128, 60, 0.06);
    --sidebar-active: rgba(100, 128, 60, 0.12);
    --sidebar-text: #707858;
    --sidebar-text-active: #2C3020;
    --sidebar-accent: #64803C;
}

[data-theme="provence"] .sidebar {
    --sidebar-bg: #ECE4DC;
    --sidebar-border: rgba(140, 110, 160, 0.15);
    --sidebar-hover: rgba(140, 110, 160, 0.06);
    --sidebar-active: rgba(140, 110, 160, 0.12);
    --sidebar-text: #887898;
    --sidebar-text-active: #3A3040;
    --sidebar-accent: #8C6EA0;
}


/* ===== css/animations.css?v=2602240010 ===== */
/* ================================================
   OPTIMIZED ANIMATIONS
   GPU-accelerated (transform, opacity only)
   ProductiveApp v4.0
   ================================================ */

/* === PERFORMANCE HINTS === */
.sidebar,
.sidebar-item,
.sidebar-label,
.sidebar-brand,
.sidebar-profile-info,
.sidebar-toggle,
.stat-card,
.quick-action,
.project-card,
.note-item {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* === BASE TRANSITIONS === */
.transition-fast {
    transition: transform 150ms ease, opacity 150ms ease;
}

.transition-normal {
    transition: transform 200ms ease-out, opacity 200ms ease-out;
}

.transition-slow {
    transition: transform 300ms ease-out, opacity 300ms ease-out;
}

/* === HOVER EFFECTS (GPU-accelerated) === */

/* Scale on hover */
.hover-scale {
    transition: transform 150ms ease;
}
.hover-scale:hover {
    transform: scale(1.02);
}

/* Lift on hover */
.hover-lift {
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.hover-lift:hover {
    transform: translateY(-2px);
}

/* Glow on hover */
.hover-glow {
    transition: box-shadow 200ms ease;
}
.hover-glow:hover {
    box-shadow: 0 0 20px var(--accent-glow, color-mix(in srgb, var(--accent) 30%, transparent));
}

/* === KEYFRAME ANIMATIONS === */

/* Fade in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade in up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in scale */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide in from left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide in from right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Pulse (subtle) */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Spin */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Bounce (subtle) */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* === ANIMATION CLASSES === */
.animate-fadeIn {
    animation: fadeIn 200ms ease-out forwards;
}

.animate-fadeInUp {
    animation: fadeInUp 250ms ease-out forwards;
}

.animate-fadeInScale {
    animation: fadeInScale 200ms ease-out forwards;
}

.animate-slideInLeft {
    animation: slideInLeft 250ms ease-out forwards;
}

.animate-slideInRight {
    animation: slideInRight 250ms ease-out forwards;
}

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

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-bounce {
    animation: bounce 500ms ease infinite;
}

/* === STAGGER ANIMATIONS === */
.stagger-children > * {
    opacity: 0;
    animation: fadeInUp 200ms ease-out forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
.stagger-children > *:nth-child(6) { animation-delay: 250ms; }

/* === REDUCE MOTION === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === LOADING STATES === */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--skeleton-base, rgba(255, 255, 255, 0.05)) 25%,
        var(--skeleton-shine, rgba(255, 255, 255, 0.1)) 50%,
        var(--skeleton-base, rgba(255, 255, 255, 0.05)) 75%
    );
    background-size: 200% 100%;
    animation: skeleton 1.5s ease-in-out infinite;
}

/* Light theme skeleton overrides */
[data-theme="ivory"] .skeleton,
[data-theme="sakura"] .skeleton,
[data-theme="pastel"] .skeleton,
[data-theme="mint"] .skeleton,
[data-theme="paper"] .skeleton,
[data-theme="porcelain"] .skeleton,
[data-theme="zen"] .skeleton,
[data-theme="watercolor"] .skeleton,
[data-theme="nordic"] .skeleton {
    --skeleton-base: rgba(0, 0, 0, 0.05);
    --skeleton-shine: rgba(0, 0, 0, 0.1);
}

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

/* === PROGRESS INDICATOR === */
.progress-line {
    position: relative;
    overflow: hidden;
}

.progress-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        var(--progress-shine, rgba(255, 255, 255, 0.2)),
        transparent
    );
    animation: progressSlide 1.5s ease-in-out infinite;
}

/* Light theme progress overrides */
[data-theme="ivory"] .progress-line::after,
[data-theme="sakura"] .progress-line::after,
[data-theme="pastel"] .progress-line::after,
[data-theme="mint"] .progress-line::after,
[data-theme="paper"] .progress-line::after,
[data-theme="porcelain"] .progress-line::after,
[data-theme="zen"] .progress-line::after,
[data-theme="watercolor"] .progress-line::after,
[data-theme="nordic"] .progress-line::after {
    --progress-shine: rgba(0, 0, 0, 0.15);
}

@keyframes progressSlide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(200%);
    }
}

/* ================================================
   ENHANCED MICRO-ANIMATIONS v4.1
   Intensity-aware via --anim-intensity (0.0 - 1.0)
   Controlled by AnimationControls panel
   ================================================ */

/* === INTENSITY CSS VARIABLE (default: Elegant preset) === */
:root {
    --anim-intensity: 0.45;
}

/* === VIEW TRANSITIONS === */
@keyframes viewSlideIn {
    from {
        opacity: 0;
        transform: translateY(calc(20px * var(--anim-intensity))) scale(calc(1 - 0.03 * var(--anim-intensity)));
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* viewSlideIn on .active removed — handled by view-transitions.css view-entering */

/* === CARD 3D TILT ON HOVER === */
.stat-card,
.project-card {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease;
    transform-style: preserve-3d;
}

.stat-card:hover {
    transform: perspective(800px)
               rotateX(calc(-1.5deg * var(--anim-intensity)))
               rotateY(calc(2deg * var(--anim-intensity)))
               translateY(calc(-3px * var(--anim-intensity)));
    box-shadow: 0 calc(8px * var(--anim-intensity)) calc(24px * var(--anim-intensity)) rgba(0,0,0,0.15);
}

.project-card:hover {
    transform: perspective(800px)
               rotateX(calc(-1deg * var(--anim-intensity)))
               rotateY(calc(1.5deg * var(--anim-intensity)))
               translateY(calc(-2px * var(--anim-intensity)));
    box-shadow: 0 calc(6px * var(--anim-intensity)) calc(20px * var(--anim-intensity)) rgba(0,0,0,0.12);
}

/* === STAGGERED LIST REVEAL WITH SPRING FEEL === */
@keyframes springReveal {
    0% {
        opacity: 0;
        transform: translateY(calc(15px * var(--anim-intensity))) scale(calc(1 - 0.04 * var(--anim-intensity)));
    }
    60% {
        opacity: 1;
        transform: translateY(calc(-2px * var(--anim-intensity))) scale(calc(1 + 0.005 * var(--anim-intensity)));
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.spring-stagger > * {
    opacity: 0;
    animation: springReveal 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.spring-stagger > *:nth-child(1) { animation-delay: 0ms; }
.spring-stagger > *:nth-child(2) { animation-delay: 50ms; }
.spring-stagger > *:nth-child(3) { animation-delay: 100ms; }
.spring-stagger > *:nth-child(4) { animation-delay: 150ms; }
.spring-stagger > *:nth-child(5) { animation-delay: 200ms; }
.spring-stagger > *:nth-child(6) { animation-delay: 250ms; }
.spring-stagger > *:nth-child(7) { animation-delay: 300ms; }
.spring-stagger > *:nth-child(8) { animation-delay: 350ms; }

/* === BUTTON RIPPLE EFFECT === */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: width 0s, height 0s, opacity 0s;
    opacity: 0;
}

.btn-ripple:active::after {
    width: 200px;
    height: 200px;
    opacity: 0;
    transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
}

/* === SIDEBAR ITEM HOVER ACCENT BAR === */
.sidebar-item {
    position: relative;
}

.sidebar-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
}

.sidebar-item:hover::after {
    transform: translateY(-50%) scaleY(var(--anim-intensity, 0.45));
}

.sidebar-item.active::after {
    transform: translateY(-50%) scaleY(1);
    box-shadow: 0 0 8px var(--accent-glow, color-mix(in srgb, var(--accent) 30%, transparent));
}

/* === TOAST NOTIFICATION ENTRANCE === */
@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100px) scale(0.9);
    }
    70% {
        transform: translateX(calc(-5px * var(--anim-intensity))) scale(1.02);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(120px);
    }
}

/* === SMOOTH NUMBER COUNTER === */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(calc(8px * var(--anim-intensity)));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-count {
    animation: countUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* === SUBTLE FLOAT (decorative) === */
@keyframes subtleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(calc(-4px * var(--anim-intensity))); }
}

.animate-float {
    animation: subtleFloat 3s ease-in-out infinite;
}

/* === MODAL ENHANCED ENTRANCE === */
@keyframes modalScaleIn {
    from {
        opacity: 0;
        transform: scale(calc(1 - 0.08 * var(--anim-intensity))) translateY(calc(10px * var(--anim-intensity)));
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* === SHIMMER LOADING (enhanced) === */
@keyframes shimmerWave {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer-loading {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        var(--bg-card) 50%,
        var(--bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: shimmerWave 1.5s ease-in-out infinite;
}

/* === FOCUS RING ANIMATION === */
@keyframes focusRingPulse {
    0% { box-shadow: 0 0 0 0 var(--accent-glow, color-mix(in srgb, var(--accent) 40%, transparent)); }
    70% { box-shadow: 0 0 0 calc(4px * var(--anim-intensity)) transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

input:focus-visible,
button:focus-visible {
    animation: focusRingPulse 0.6s ease-out;
}

/* === REDUCED MOTION — OVERRIDE ALL NEW ANIMATIONS === */
@media (prefers-reduced-motion: reduce) {
    .view-container.active {
        animation: none !important;
        opacity: 1 !important;
    }
    .spring-stagger > * {
        animation: none !important;
        opacity: 1 !important;
    }
    .stat-card:hover,
    .project-card:hover {
        transform: none !important;
    }
    .animate-count,
    .animate-float {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .sidebar-item::after {
        transition: none !important;
    }
    .shimmer-loading {
        animation: none !important;
    }
    input:focus-visible,
    button:focus-visible {
        animation: none !important;
    }
}


/* ===== css/animation-controls.css?v=2602240010 ===== */
/* ================================================
   ANIMATION CONTROLS - Floating Panel
   ProductiveApp v4.0
   Controles d'intensite et presets d'animation
   ================================================ */

/* --- FAB + Panel: REMOVED from screen (v3.0) --- */
/* Controls moved to Settings > Animations */
.anim-ctrl-fab,
.anim-ctrl-panel {
    display: none !important;
}

/* Panel title */
.anim-ctrl-panel-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.anim-ctrl-panel-title svg {
    width: 14px;
    height: 14px;
}

/* --- Preset Selector Row --- */
.anim-presets-row {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}

.anim-preset-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 2px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 10px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
}

.anim-preset-btn:hover {
    border-color: var(--accent);
    color: var(--text);
    background: rgba(255,255,255,0.03);
}

.anim-preset-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-card);
    box-shadow: 0 0 8px var(--accent-glow, color-mix(in srgb, var(--accent) 20%, transparent));
}

.anim-preset-icon {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.anim-preset-btn:hover .anim-preset-icon {
    transform: scale(1.15);
}

.anim-preset-btn.active .anim-preset-icon {
    transform: scale(1.1);
}

/* --- Intensity Slider --- */
.anim-slider-group {
    margin-bottom: 14px;
}

.anim-slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.anim-slider-value {
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}

.anim-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--border);
    outline: none;
    transition: background 0.2s;
}

.anim-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 2px solid var(--bg-secondary);
}

.anim-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 0 8px var(--accent-glow, color-mix(in srgb, var(--accent) 30%, transparent));
}

.anim-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--bg-secondary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Slider track fill (webkit) */
.anim-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
}

/* --- Preview & Action Buttons --- */
.anim-ctrl-actions {
    display: flex;
    gap: 8px;
}

.anim-preview-btn {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.anim-preview-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(255,255,255,0.02);
}

.anim-preview-btn:active {
    transform: scale(0.97);
}

/* --- Divider --- */
.anim-ctrl-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
    opacity: 0.5;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .anim-ctrl-fab {
        animation: none !important;
    }
    .anim-ctrl-panel {
        transition: none !important;
    }
    .anim-preset-btn,
    .anim-preset-icon {
        transition: none !important;
    }
}

/* --- Mobile --- */
@media (max-width: 768px) {
    .anim-ctrl-fab {
        bottom: 90px;
        right: 16px;
        width: 40px;
        height: 40px;
    }

    .anim-ctrl-fab svg {
        width: 20px;
        height: 20px;
    }

    .anim-ctrl-panel {
        right: 16px;
        bottom: 140px;
        width: calc(100vw - 32px);
        max-width: 300px;
    }
}

/* --- Hide when not logged in --- */
body:not(.logged-in) .anim-ctrl-fab,
body:not(.logged-in) .anim-ctrl-panel {
    display: none !important;
}


/* ===== css/animation-selector.css?v=2602240010 ===== */
/* ============================================================
   PRODUCTIVE APP — ANIMATION SELECTOR v1.0
   Modal CapCut-style pour sélection animations
   ============================================================ */

/* ============================================================
   MODAL OVERLAY
   ============================================================ */
.animation-selector-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.animation-selector-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* ============================================================
   MODAL CONTAINER
   ============================================================ */
.animation-selector-modal {
    width: 90vw;
    max-width: 1400px;
    height: 85vh;
    background: linear-gradient(145deg,
        rgba(20, 20, 30, 0.98) 0%,
        rgba(30, 30, 45, 0.98) 100%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 100px rgba(138, 99, 246, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9) translateY(30px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.animation-selector-overlay.active .animation-selector-modal {
    transform: scale(1) translateY(0);
}

/* ============================================================
   HEADER
   ============================================================ */
.anim-selector-header {
    padding: 24px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(90deg,
        rgba(138, 99, 246, 0.1) 0%,
        color-mix(in srgb, var(--accent) 10%, transparent) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.anim-selector-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.anim-selector-title h2 {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.anim-selector-title .icon {
    font-size: 28px;
    animation: animIconPulse 2s ease-in-out infinite;
}

@keyframes animIconPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.anim-selector-close {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
}

.anim-selector-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
    transform: rotate(90deg);
}

/* ============================================================
   TOOLBAR
   ============================================================ */
.anim-selector-toolbar {
    padding: 16px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.anim-search {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.anim-search input {
    width: 100%;
    padding: 10px 40px 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    transition: all 0.2s ease;
}

.anim-search input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(138, 99, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(138, 99, 246, 0.1);
}

.anim-search input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.anim-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

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

.anim-filter-tab {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.anim-filter-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.anim-filter-tab.active {
    background: linear-gradient(135deg, rgba(138, 99, 246, 0.3), color-mix(in srgb, var(--accent) 30%, transparent));
    border-color: rgba(138, 99, 246, 0.5);
    color: #fff;
    box-shadow: 0 0 20px rgba(138, 99, 246, 0.2);
}

.anim-filter-tab .icon {
    margin-right: 6px;
}

/* ============================================================
   CONTENT AREA
   ============================================================ */
.anim-selector-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
}

/* Scrollbar custom */
.anim-selector-content::-webkit-scrollbar {
    width: 8px;
}

.anim-selector-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

.anim-selector-content::-webkit-scrollbar-thumb {
    background: rgba(138, 99, 246, 0.3);
    border-radius: 4px;
}

.anim-selector-content::-webkit-scrollbar-thumb:hover {
    background: rgba(138, 99, 246, 0.5);
}

/* ============================================================
   SECTIONS PAR CATÉGORIE
   ============================================================ */
.anim-category-section {
    margin-bottom: 48px;
}

.anim-category-section:last-child {
    margin-bottom: 0;
}

.anim-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.anim-category-icon {
    font-size: 24px;
}

.anim-category-name {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.anim-category-count {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 12px;
}

/* ============================================================
   GRILLE D'ANIMATIONS (Style CapCut)
   ============================================================ */
.anim-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.anim-card {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.anim-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(138, 99, 246, 0.5);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(138, 99, 246, 0.15);
}

.anim-card.selected {
    border-color: rgba(138, 99, 246, 0.8);
    box-shadow:
        0 0 0 3px rgba(138, 99, 246, 0.2),
        0 8px 24px rgba(138, 99, 246, 0.3);
}

/* Preview canvas miniature */
.anim-card-preview {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.anim-card-preview canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay gradient */
.anim-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.anim-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.anim-card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.anim-card-tag {
    font-size: 10px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.8);
}

/* Bouton favori (étoile en bas à droite) */
.anim-card-favorite {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.anim-card-favorite:hover {
    transform: scale(1.15);
    background: rgba(0, 0, 0, 0.8);
}

.anim-card-favorite.active {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    border-color: #fbbf24;
}

.anim-card-favorite .star {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
}

.anim-card-favorite.active .star {
    color: #fff;
    animation: starPop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes starPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Badge "Special" pour easter eggs */
.anim-card-special-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    background: linear-gradient(135deg, var(--accent-light), var(--accent-light));
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Badge "Selected" */
.anim-card-selected-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #34d399);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* ============================================================
   FOOTER - COLOR PICKER & ACTIONS
   ============================================================ */
.anim-selector-footer {
    padding: 20px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.anim-color-picker-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.anim-color-picker-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.anim-color-swatches {
    display: flex;
    gap: 8px;
}

.anim-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    position: relative;
}

.anim-color-swatch:hover {
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.5);
}

.anim-color-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.anim-color-swatch input[type="color"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.anim-custom-color-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(45deg,
        #ff0000 0%, #ff7f00 14%, #ffff00 28%,
        #00ff00 42%, #0000ff 57%, #4b0082 71%,
        #9400d3 85%, #ff0000 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.anim-custom-color-btn:hover {
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.5);
}

.anim-custom-color-btn input[type="color"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.anim-selector-actions {
    display: flex;
    gap: 12px;
}

.anim-action-btn {
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.anim-action-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);
}

.anim-action-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.anim-action-btn.primary {
    background: linear-gradient(135deg, var(--accent-light), var(--accent-light));
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.anim-action-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent);
}

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

/* ============================================================
   EMPTY STATE
   ============================================================ */
.anim-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.anim-empty-state .icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.anim-empty-state p {
    font-size: 16px;
    margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .animation-selector-modal {
        width: 95vw;
        height: 90vh;
    }

    .anim-selector-header,
    .anim-selector-toolbar,
    .anim-selector-content,
    .anim-selector-footer {
        padding: 16px;
    }

    .anim-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }

    .anim-selector-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .anim-color-picker-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .anim-selector-actions {
        width: 100%;
    }

    .anim-action-btn {
        flex: 1;
    }
}


/* ===== css/accounting.css?v=2602240010 ===== */
/* ================================================================
   ACCOUNTING MODULE - External CSS
   Layouts complexes, animations, print styles
   ================================================================ */

/* ========== DASHBOARD GRID LAYOUT ========== */
.acc-dashboard-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.acc-dashboard-row {
    display: grid;
    gap: 20px;
}

.acc-dashboard-row.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.acc-dashboard-row.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.acc-dashboard-row.cols-2-1 {
    grid-template-columns: 2fr 1fr;
}

.acc-dashboard-row.cols-1-2 {
    grid-template-columns: 1fr 2fr;
}

.acc-dashboard-row.cols-1-1 {
    grid-template-columns: 1fr 1fr;
}

/* ========== DASHBOARD RECENT ITEMS ========== */
.acc-recent-list {
    background: var(--bg-primary, #fff);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e0e0e0);
    overflow: hidden;
}

.acc-recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #f0f0f0);
}

.acc-recent-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin: 0;
}

.acc-recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color, #f5f5f5);
    transition: background 0.15s;
}

.acc-recent-item:last-child {
    border-bottom: none;
}

.acc-recent-item:hover {
    background: var(--bg-secondary, #f8f9fa);
}

.acc-recent-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.acc-recent-item-icon.invoice {
    background: rgba(9, 132, 227, 0.1);
    color: #0984e3;
}

.acc-recent-item-icon.expense {
    background: rgba(225, 112, 85, 0.1);
    color: #e17055;
}

.acc-recent-item-icon.payment {
    background: rgba(0, 184, 148, 0.1);
    color: #00b894;
}

.acc-recent-item-info {
    flex: 1;
    min-width: 0;
}

.acc-recent-item-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acc-recent-item-sub {
    font-size: 0.75rem;
    color: var(--text-secondary, #999);
}

.acc-recent-item-amount {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #333);
    white-space: nowrap;
}

/* ========== CASH FLOW CHART AREA ========== */
.acc-cashflow-chart {
    position: relative;
    height: 300px;
    background: var(--bg-primary, #fff);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e0e0e0);
    padding: 20px;
}

.acc-cashflow-legend {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
}

.acc-cashflow-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
}

.acc-cashflow-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* ========== SCANNER ANIMATIONS ========== */
@keyframes acc-scan-line {
    0% {
        top: 0;
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        top: calc(100% - 3px);
        opacity: 1;
    }
}

@keyframes acc-scan-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes acc-scanner-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(108, 92, 231, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(108, 92, 231, 0.5);
    }
}

.acc-scanner-active {
    animation: acc-scan-pulse 1.5s ease-in-out infinite;
}

.acc-scanner-line {
    position: absolute;
    left: 10%;
    width: 80%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-primary, #6c5ce7), transparent);
    border-radius: 2px;
    animation: acc-scan-line 2s ease-in-out infinite;
    box-shadow: 0 0 10px var(--accent-primary, #6c5ce7);
}

.acc-scanner-processing {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.acc-scanner-processing::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(108, 92, 231, 0.1), transparent);
    animation: acc-scan-shimmer 1.5s infinite;
}

@keyframes acc-scan-shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* ========== DRAG AND DROP ZONE ========== */
.acc-drop-active {
    border-color: var(--accent-primary, #6c5ce7) !important;
    background: rgba(108, 92, 231, 0.05) !important;
}

.acc-drop-active::before {
    content: 'Deposez vos fichiers ici';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-primary, #6c5ce7);
    z-index: 10;
}

/* ========== INVOICE LINE ITEMS ========== */
.acc-line-items {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.acc-line-items-header {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 40px;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-secondary, #f8f9fa);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.acc-line-item-row {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 40px;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color, #f0f0f0);
    align-items: center;
}

.acc-line-item-row:last-child {
    border-bottom: none;
}

.acc-line-item-row input,
.acc-line-item-row select {
    padding: 6px 10px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #333);
    width: 100%;
    box-sizing: border-box;
}

.acc-line-item-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.acc-line-item-remove:hover {
    background: rgba(231, 76, 60, 0.25);
}

.acc-line-items-total {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    padding: 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-top: 2px solid var(--border-color, #e0e0e0);
}

.acc-line-items-total-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.acc-line-items-total-label {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}

.acc-line-items-total-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #333);
    min-width: 100px;
    text-align: right;
}

.acc-line-items-total-value.grand {
    font-size: 1.2rem;
    color: var(--accent-primary, #6c5ce7);
}

/* ========== FINANCIAL STATEMENTS ========== */
.acc-financial-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary, #fff);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color, #e0e0e0);
}

.acc-financial-table th {
    padding: 14px 20px;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
    background: var(--bg-secondary, #f8f9fa);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.acc-financial-table td {
    padding: 12px 20px;
    font-size: 0.9rem;
    color: var(--text-primary, #333);
    border-bottom: 1px solid var(--border-color, #f0f0f0);
}

.acc-financial-table tr.total td {
    font-weight: 700;
    background: var(--bg-secondary, #f8f9fa);
    border-top: 2px solid var(--border-color, #e0e0e0);
}

.acc-financial-table tr.subtotal td {
    font-weight: 600;
    font-style: italic;
}

.acc-financial-table td.amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ========== PRINT STYLES ========== */
@media print {
    body * {
        visibility: hidden;
    }

    .acc-print-area,
    .acc-print-area * {
        visibility: visible;
    }

    .acc-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 20mm;
        box-sizing: border-box;
    }

    .acc-print-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
    }

    .acc-print-logo {
        max-height: 60px;
    }

    .acc-print-company {
        text-align: right;
    }

    .acc-print-company-name {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .acc-print-company-info {
        font-size: 0.85rem;
        color: #666;
        line-height: 1.5;
    }

    .acc-print-title {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .acc-print-number {
        font-size: 1rem;
        color: #666;
        margin-bottom: 30px;
    }

    .acc-print-parties {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .acc-print-party {
        max-width: 45%;
    }

    .acc-print-party-label {
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        color: #999;
        margin-bottom: 8px;
    }

    .acc-print-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 30px;
    }

    .acc-print-table th {
        padding: 10px 12px;
        text-align: left;
        font-size: 0.8rem;
        font-weight: 600;
        border-bottom: 2px solid #333;
    }

    .acc-print-table td {
        padding: 10px 12px;
        font-size: 0.85rem;
        border-bottom: 1px solid #e0e0e0;
    }

    .acc-print-totals {
        margin-left: auto;
        width: 280px;
    }

    .acc-print-total-row {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        font-size: 0.9rem;
    }

    .acc-print-total-row.grand {
        font-size: 1.1rem;
        font-weight: 700;
        border-top: 2px solid #333;
        padding-top: 10px;
        margin-top: 6px;
    }

    .acc-print-footer {
        margin-top: 50px;
        font-size: 0.8rem;
        color: #666;
        line-height: 1.5;
    }

    .acc-print-footer-legal {
        border-top: 1px solid #e0e0e0;
        padding-top: 16px;
        margin-top: 16px;
    }

    /* Masquer elements non imprimables */
    .acc-tabs,
    .acc-header-actions,
    .acc-filter-bar,
    .acc-pagination,
    .acc-btn,
    .acc-modal-overlay,
    .acc-table-actions,
    .no-print {
        display: none !important;
    }
}

/* ========== RESPONSIVE COMPLEX BREAKPOINTS ========== */
@media (max-width: 1400px) {
    .acc-dashboard-row.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .acc-dashboard-row.cols-2-1,
    .acc-dashboard-row.cols-1-2 {
        grid-template-columns: 1fr;
    }

    .acc-dashboard-row.cols-3 {
        grid-template-columns: 1fr 1fr;
    }

    .acc-line-items-header,
    .acc-line-item-row {
        grid-template-columns: 2fr 1fr 1fr 1fr 36px;
    }
}

@media (max-width: 768px) {
    .acc-dashboard-row.cols-4,
    .acc-dashboard-row.cols-3,
    .acc-dashboard-row.cols-1-1 {
        grid-template-columns: 1fr;
    }

    .acc-line-items-header {
        display: none;
    }

    .acc-line-item-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px 16px;
        position: relative;
    }

    .acc-line-item-row input::placeholder {
        font-size: 0.75rem;
    }

    .acc-line-item-remove {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .acc-cashflow-chart {
        height: 220px;
    }

    .acc-print-parties {
        flex-direction: column;
        gap: 20px;
    }

    .acc-print-party {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .acc-line-items-total {
        flex-direction: column;
        gap: 8px;
    }

    .acc-line-items-total-row {
        justify-content: space-between;
    }

    .acc-cashflow-chart {
        height: 180px;
        padding: 12px;
    }

    .acc-financial-table th,
    .acc-financial-table td {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

/* ========== TRANSITIONS ET ANIMATIONS ========== */
@keyframes acc-fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes acc-slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes acc-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.acc-animate-in {
    animation: acc-fadeIn 0.3s ease-out forwards;
}

.acc-animate-slide {
    animation: acc-slideInRight 0.3s ease-out forwards;
}

.acc-animate-scale {
    animation: acc-scaleIn 0.2s ease-out forwards;
}

/* Stagger animation for list items */
.acc-stagger-item {
    opacity: 0;
    animation: acc-fadeIn 0.3s ease-out forwards;
}

.acc-stagger-item:nth-child(1) { animation-delay: 0.05s; }
.acc-stagger-item:nth-child(2) { animation-delay: 0.1s; }
.acc-stagger-item:nth-child(3) { animation-delay: 0.15s; }
.acc-stagger-item:nth-child(4) { animation-delay: 0.2s; }
.acc-stagger-item:nth-child(5) { animation-delay: 0.25s; }
.acc-stagger-item:nth-child(6) { animation-delay: 0.3s; }
.acc-stagger-item:nth-child(7) { animation-delay: 0.35s; }
.acc-stagger-item:nth-child(8) { animation-delay: 0.4s; }
.acc-stagger-item:nth-child(9) { animation-delay: 0.45s; }
.acc-stagger-item:nth-child(10) { animation-delay: 0.5s; }

/* ========== SKELETON LOADING ========== */
@keyframes acc-skeleton {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.acc-skeleton {
    background: linear-gradient(90deg, var(--bg-secondary, #f0f0f0) 25%, #e0e0e0 50%, var(--bg-secondary, #f0f0f0) 75%);
    background-size: 200px 100%;
    animation: acc-skeleton 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.acc-skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    width: 80%;
}

.acc-skeleton-text.short {
    width: 40%;
}

.acc-skeleton-card {
    height: 120px;
    border-radius: 12px;
}

.acc-skeleton-chart {
    height: 280px;
    border-radius: 12px;
}


/* ================================================================
   FINANCE PREMIUM DESIGN SYSTEM v2.0
   Couche premium sur le design existant
   ================================================================ */

/* -------- Variables Finance -------- */
:root {
  --fin-success:        #00d68f;
  --fin-success-soft:   rgba(0, 214, 143, 0.13);
  --fin-warning:        #ffaa00;
  --fin-warning-soft:   rgba(255, 170, 0, 0.13);
  --fin-danger:         #ff3d71;
  --fin-danger-soft:    rgba(255, 61, 113, 0.13);
  --fin-info:           #0095ff;
  --fin-info-soft:      rgba(0, 149, 255, 0.13);
  --fin-money-pos:      #00d68f;
  --fin-money-neg:      #ff3d71;
  --fin-border-prem:    rgba(255,255,255,0.07);
  --fin-card-bg:        rgba(255,255,255,0.04);
  --fin-card-hover:     rgba(255,255,255,0.07);
  --fin-gradient-rev:   linear-gradient(135deg, #0095ff 0%, #00d68f 100%);
  --fin-gradient-gold:  linear-gradient(135deg, #f7931e 0%, #ffc857 100%);
}

/* -------- KPI Cards Premium -------- */
.acc-kpi-premium-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.acc-kpi-premium-card {
  background: var(--fin-card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--fin-border-prem, rgba(255,255,255,0.07));
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: default;
}

.acc-kpi-premium-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--fin-gradient-rev);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.acc-kpi-premium-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.14);
}

.acc-kpi-premium-card:hover::before { opacity: 1; }

.acc-kpi-premium-card.highlight {
  background: linear-gradient(135deg, rgba(0,214,143,0.08) 0%, rgba(0,149,255,0.08) 100%);
  border-color: rgba(0,214,143,0.25);
}

.acc-kpi-prem-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.acc-kpi-prem-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.acc-kpi-prem-icon.revenue  { background: var(--fin-success-soft); color: var(--fin-success); }
.acc-kpi-prem-icon.expense  { background: var(--fin-danger-soft);  color: var(--fin-danger);  }
.acc-kpi-prem-icon.profit   { background: var(--fin-info-soft);    color: var(--fin-info);    }
.acc-kpi-prem-icon.treasury { background: var(--fin-warning-soft); color: var(--fin-warning); }

.acc-kpi-prem-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.acc-kpi-prem-trend.up   { background: var(--fin-success-soft); color: var(--fin-success); }
.acc-kpi-prem-trend.down { background: var(--fin-danger-soft);  color: var(--fin-danger);  }
.acc-kpi-prem-trend.flat { background: var(--fin-info-soft);    color: var(--fin-info);    }

.acc-kpi-prem-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary, #fff);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.acc-kpi-prem-value.pos { color: var(--fin-success); }
.acc-kpi-prem-value.neg { color: var(--fin-danger);  }

.acc-kpi-prem-label {
  font-size: 13px;
  color: var(--text-secondary, #8f9bb3);
  margin-bottom: 14px;
}

.acc-kpi-prem-sparkline {
  height: 38px;
  margin-bottom: 12px;
  opacity: 0.85;
}

.acc-kpi-prem-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.acc-kpi-prem-footer .label { color: var(--text-secondary, #8f9bb3); }
.acc-kpi-prem-footer .val   { font-weight: 600; }
.acc-kpi-prem-footer .val.pos { color: var(--fin-success); }
.acc-kpi-prem-footer .val.neg { color: var(--fin-danger);  }
.acc-kpi-prem-footer .val.neutral { color: var(--text-secondary, #8f9bb3); }

/* Badge alerte sur KPI */
.acc-kpi-prem-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.acc-kpi-prem-badge.warn  { background: var(--fin-warning-soft); color: var(--fin-warning); }
.acc-kpi-prem-badge.ok    { background: var(--fin-success-soft); color: var(--fin-success); }
.acc-kpi-prem-badge.crit  { background: var(--fin-danger-soft);  color: var(--fin-danger);  }

/* Breakdown mini */
.acc-kpi-prem-breakdown {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
  font-size: 12px;
}

.acc-kpi-prem-breakdown-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary, #8f9bb3);
}

.acc-kpi-prem-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.acc-kpi-prem-dot.pending  { background: var(--fin-info);    }
.acc-kpi-prem-dot.overdue  { background: var(--fin-danger);  }
.acc-kpi-prem-dot.paid     { background: var(--fin-success); }

/* Responsive KPI grid */
@media (max-width: 1200px) { .acc-kpi-premium-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px)  { .acc-kpi-premium-grid { grid-template-columns: 1fr; } }

/* -------- Charts Premium -------- */
.acc-charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  margin-bottom: 24px;
}

.acc-chart-premium {
  background: var(--fin-card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--fin-border-prem, rgba(255,255,255,0.07));
  border-radius: 16px;
  padding: 20px;
}

.acc-chart-premium-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.acc-chart-premium-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #fff);
}

.acc-chart-legend {
  display: flex;
  gap: 14px;
}

.acc-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary, #8f9bb3);
}

.acc-chart-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}

.acc-chart-prem-canvas-wrap {
  position: relative;
  height: 220px;
}

/* -------- Factures Table Premium -------- */
.acc-inv-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--fin-border-prem, rgba(255,255,255,0.07));
}

.acc-inv-table-prem {
  width: 100%;
  border-collapse: collapse;
}

.acc-inv-table-prem thead th {
  padding: 11px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #8f9bb3);
  background: var(--fin-card-bg, rgba(255,255,255,0.03));
  border-bottom: 1px solid var(--fin-border-prem, rgba(255,255,255,0.07));
  white-space: nowrap;
}

.acc-inv-table-prem tbody tr {
  border-bottom: 1px solid var(--fin-border-prem, rgba(255,255,255,0.05));
  transition: background 0.15s ease, transform 0.15s ease;
}

.acc-inv-table-prem tbody tr:last-child { border-bottom: none; }

.acc-inv-table-prem tbody tr:hover {
  background: var(--fin-card-hover, rgba(255,255,255,0.04));
}

.acc-inv-table-prem tbody td {
  padding: 13px 14px;
  vertical-align: middle;
  color: var(--text-primary, #fff);
  font-size: 14px;
}

/* Row actions — visibles au hover */
.acc-inv-actions-cell {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.acc-inv-table-prem tbody tr:hover .acc-inv-actions-cell { opacity: 1; }

/* Status badges */
.acc-status-prem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.acc-status-prem::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.acc-status-prem.draft    { background: rgba(143,155,179,.15); color: #8f9bb3; }
.acc-status-prem.pending  { background: var(--fin-info-soft);    color: var(--fin-info);    }
.acc-status-prem.sent     { background: color-mix(in srgb, var(--accent) 15%, transparent);  color: var(--accent-light); }
.acc-status-prem.paid     { background: var(--fin-success-soft); color: var(--fin-success); }
.acc-status-prem.overdue  {
  background: var(--fin-danger-soft);
  color: var(--fin-danger);
  animation: acc-prem-overdue-pulse 2s ease-in-out infinite;
}
.acc-status-prem.cancelled { background: rgba(128,128,128,.1); color: #6b7280; }

@keyframes acc-prem-overdue-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

/* Client cell */
.acc-inv-client-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.acc-inv-avatar {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--fin-gradient-rev);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.acc-inv-client-name  { font-weight: 600; font-size: 14px; color: var(--text-primary, #fff); }
.acc-inv-client-email { font-size: 12px; color: var(--text-secondary, #8f9bb3); }

/* Amount */
.acc-inv-amount-prem {
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #fff);
}

.acc-inv-amount-prem.income  { color: var(--fin-success); }
.acc-inv-amount-prem.expense { color: var(--fin-danger);  }

/* Action buttons inline */
.acc-inv-action-btn {
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1px solid var(--fin-border-prem, rgba(255,255,255,0.1));
  background: transparent;
  color: var(--text-secondary, #8f9bb3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  vertical-align: middle;
}

.acc-inv-action-btn:hover {
  background: var(--fin-card-hover, rgba(255,255,255,0.08));
  color: var(--text-primary, #fff);
  border-color: rgba(255,255,255,0.2);
}

.acc-inv-action-btn.stripe {
  background: linear-gradient(135deg, #635bff, #a855f7);
  border: none;
  color: #fff;
}

.acc-inv-action-btn.stripe:hover { transform: scale(1.1); box-shadow: 0 4px 14px rgba(99,91,255,.4); }

/* -------- Alertes Premium -------- */
.acc-alerts-premium {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.acc-alert-prem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  border-left: 4px solid;
  animation: acc-alert-in 0.3s ease;
  position: relative;
}

@keyframes acc-alert-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.acc-alert-prem.danger  { border-color: var(--fin-danger);  background: linear-gradient(90deg, var(--fin-danger-soft) 0%, transparent 40%); }
.acc-alert-prem.warning { border-color: var(--fin-warning); background: linear-gradient(90deg, var(--fin-warning-soft) 0%, transparent 40%); }
.acc-alert-prem.success { border-color: var(--fin-success); background: linear-gradient(90deg, var(--fin-success-soft) 0%, transparent 40%); }
.acc-alert-prem.info    { border-color: var(--fin-info);    background: linear-gradient(90deg, var(--fin-info-soft) 0%, transparent 40%); }

.acc-alert-prem-icon { font-size: 20px; flex-shrink: 0; }

.acc-alert-prem-body { flex: 1; }
.acc-alert-prem-title { font-weight: 600; font-size: 14px; color: var(--text-primary, #fff); margin-bottom: 2px; }
.acc-alert-prem-desc  { font-size: 12px; color: var(--text-secondary, #8f9bb3); }

.acc-alert-prem-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: var(--text-primary, #fff);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.acc-alert-prem-btn:hover { background: rgba(255,255,255,0.15); }

.acc-alert-prem-dismiss {
  position: absolute;
  top: 10px; right: 12px;
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #8f9bb3);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: all 0.15s ease;
}

.acc-alert-prem-dismiss:hover { background: rgba(255,255,255,0.1); color: var(--text-primary, #fff); }

/* -------- FinScan Premium UI -------- */
.acc-finscan-premium {
  max-width: 660px;
  margin: 0 auto;
}

.acc-finscan-cam-zone {
  position: relative;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid var(--fin-border-prem, rgba(255,255,255,0.1));
}

.acc-finscan-cam-zone video {
  width: 100%; height: 100%;
  object-fit: cover;
}

.acc-finscan-guide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.acc-finscan-frame {
  width: 82%; height: 62%;
  position: relative;
  border: 1.5px dashed rgba(255,255,255,0.25);
  border-radius: 8px;
}

.acc-finscan-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 3px solid var(--fin-success);
}

.acc-finscan-corner.tl { top:-2px; left:-2px; border-right:none; border-bottom:none; border-radius:5px 0 0 0; }
.acc-finscan-corner.tr { top:-2px; right:-2px; border-left:none; border-bottom:none; border-radius:0 5px 0 0; }
.acc-finscan-corner.bl { bottom:-2px; left:-2px; border-right:none; border-top:none; border-radius:0 0 0 5px; }
.acc-finscan-corner.br { bottom:-2px; right:-2px; border-left:none; border-top:none; border-radius:0 0 5px 0; }

.acc-finscan-hint {
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  margin-top: 18px;
  text-align: center;
}

.acc-finscan-capture-btn {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  width: 68px; height: 68px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.acc-finscan-ring {
  position: absolute;
  inset: 0;
  border: 4px solid rgba(255,255,255,0.8);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.acc-finscan-center {
  position: absolute;
  inset: 10px;
  background: #fff;
  border-radius: 50%;
  transition: all 0.15s ease;
}

.acc-finscan-capture-btn:hover .acc-finscan-ring { transform: scale(1.08); }
.acc-finscan-capture-btn:active .acc-finscan-center {
  transform: scale(0.88);
  background: var(--fin-success);
}

/* Scan line animation */
.acc-finscan-cam-zone.scanning::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--fin-success), transparent);
  animation: acc-scan-sweep 1.4s ease-in-out infinite;
}

@keyframes acc-scan-sweep {
  0%,100% { top: 8%; }
  50%      { top: 90%; }
}

/* Résultat scan */
.acc-finscan-result {
  background: var(--fin-card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--fin-border-prem, rgba(255,255,255,0.07));
  border-radius: 16px;
  padding: 22px;
  margin-top: 18px;
  animation: acc-fadeIn 0.35s ease;
}

.acc-finscan-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fin-border-prem, rgba(255,255,255,0.07));
}

.acc-finscan-result-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary, #fff); }
.acc-finscan-confidence { font-size: 13px; color: var(--fin-success); font-weight: 600; }

.acc-finscan-fields {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
}

.acc-finscan-field { display: flex; flex-direction: column; gap: 5px; }

.acc-finscan-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #8f9bb3);
}

.acc-finscan-field input,
.acc-finscan-field select {
  padding: 10px 12px;
  background: var(--bg-secondary, rgba(0,0,0,0.2));
  border: 1px solid var(--fin-border-prem, rgba(255,255,255,0.1));
  border-radius: 8px;
  color: var(--text-primary, #fff);
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.acc-finscan-field input:focus,
.acc-finscan-field select:focus {
  outline: none;
  border-color: var(--fin-info);
  box-shadow: 0 0 0 3px var(--fin-info-soft);
}

.acc-finscan-btns {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.acc-finscan-btns button {
  flex: 1;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.acc-finscan-btns .btn-sec {
  background: transparent;
  border: 1px solid var(--fin-border-prem, rgba(255,255,255,0.1));
  color: var(--text-secondary, #8f9bb3);
}

.acc-finscan-btns .btn-sec:hover { background: var(--fin-card-hover, rgba(255,255,255,0.06)); }

.acc-finscan-btns .btn-prim {
  background: var(--fin-gradient-rev);
  border: none;
  color: #fff;
}

.acc-finscan-btns .btn-prim:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,149,255,0.3);
}

/* -------- Quick Actions Bar Premium -------- */
.acc-quick-actions-prem {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.acc-quick-btn-prem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--fin-border-prem, rgba(255,255,255,0.1));
  background: var(--fin-card-bg, rgba(255,255,255,0.04));
  color: var(--text-primary, #fff);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.acc-quick-btn-prem:hover {
  background: var(--fin-card-hover, rgba(255,255,255,0.08));
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

.acc-quick-btn-prem.primary {
  background: var(--fin-gradient-rev);
  border: none;
}

.acc-quick-btn-prem.primary:hover {
  box-shadow: 0 6px 18px rgba(0,149,255,0.3);
}

/* -------- Dashboard Info Row -------- */
.acc-dash-info-prem {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
  margin-bottom: 22px;
}

.acc-info-prem-card {
  background: var(--fin-card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--fin-border-prem, rgba(255,255,255,0.07));
  border-radius: 14px;
  padding: 18px;
}

.acc-info-prem-card.has-alert {
  border-color: rgba(255,61,113,0.3);
  background: linear-gradient(135deg, rgba(255,61,113,0.06) 0%, var(--fin-card-bg, rgba(255,255,255,0.04)) 50%);
}

.acc-info-prem-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fin-border-prem, rgba(255,255,255,0.07));
}

.acc-info-prem-empty {
  font-size: 13px;
  color: var(--text-secondary, #8f9bb3);
  text-align: center;
  padding: 12px 0;
}

.acc-info-prem-amount {
  font-size: 24px;
  font-weight: 800;
  color: var(--fin-danger);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.acc-info-prem-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.acc-info-prem-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--fin-border-prem, rgba(255,255,255,0.04));
}

.acc-info-prem-list li:last-child { border-bottom: none; }
.acc-info-prem-list li span.neg { color: var(--fin-danger); font-weight: 600; }
.acc-info-prem-list li span.pos { color: var(--fin-success); font-weight: 600; }

@media (max-width: 900px) { .acc-dash-info-prem { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .acc-charts-row { grid-template-columns: 1fr; } }

/* -------- Micro number counter -------- */
.acc-counter {
  display: inline-block;
  transition: opacity 0.2s;
}

/* ========================================================
   MAHAYAWEN AI CLASSIFICATION PANEL - FinScan
   ======================================================== */
.acc-mahayawen-panel {
  background: linear-gradient(135deg, rgba(103,58,183,0.12) 0%, rgba(0,214,143,0.06) 100%);
  border: 1px solid rgba(103,58,183,0.3);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 16px;
}

.acc-mah-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.acc-mah-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 700;
  color: #b39ddb;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.acc-mah-badge svg { opacity: .85; }

.acc-mah-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.acc-mah-item {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 10px 12px;
}

.acc-mah-label {
  display: block;
  font-size: .72rem;
  color: var(--text-secondary, #8f9bb3);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.acc-mah-value {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.acc-mah-code {
  font-family: 'Courier New', monospace;
  font-size: .82rem;
  color: #81c784;
}

.acc-mah-code small {
  font-weight: 400;
  color: var(--text-secondary, #8f9bb3);
  font-family: inherit;
  margin-left: 6px;
  font-size: .75rem;
}

.acc-mah-conseil {
  background: rgba(255,213,0,0.07);
  border-left: 3px solid #ffd500;
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  font-size: .85rem;
  color: var(--text-primary, #fff);
  line-height: 1.5;
}

/* Export button */
.acc-btn-success {
  background: linear-gradient(135deg, #00b37e 0%, #00d68f 100%);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s, transform .1s;
}
.acc-btn-success:hover { opacity: .88; transform: translateY(-1px); }


/* ===== css/dash-ai-widget.css?v=2602240200 ===== */
/**
 * DASH AI WIDGET — PREMIUM v600
 * Full CSS-variable theme support — works on ALL 60 themes
 * Inspired by Linear, Stripe, Apple Health, Raycast
 */

/* ═══════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════ */
.dashboard-ai-section {
    margin: 36px 0;
}

.ai-sparkle {
    display: inline-block;
    animation: aiSparkle 2.4s ease-in-out infinite;
}
@keyframes aiSparkle {
    0%,100% { opacity:1; transform:scale(1) rotate(0deg); }
    50%      { opacity:.7; transform:scale(1.15) rotate(8deg); }
}

.dashboard-ai-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
}

/* ═══════════════════════════════════════
   MAIN CARD — CSS VARIABLE DRIVEN
═══════════════════════════════════════ */
.ai-report-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-secondary, rgba(18,18,28,.95));
    border: 1px solid var(--border, rgba(255,255,255,.08));
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
    animation: airCardIn .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes airCardIn {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}
.ai-report-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 0 1px var(--border-strong, rgba(255,255,255,.12));
}

/* Gradient background that breathes */
.ai-report-card__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.ai-report-card__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 80% at 85% 50%,
        var(--score-glow, var(--accent-glow, rgba(245,158,11,.1))) 0%,
        transparent 70%);
    transition: background .6s ease;
}
/* Subtle texture */
.ai-report-card__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--border, rgba(255,255,255,.04)) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .5;
}

/* Top accent line */
.ai-card-accent-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--score-gradient, linear-gradient(90deg, var(--accent, #f59e0b), var(--accent-light, #e07840)));
    z-index: 1;
}

/* Inner layout */
.ai-card-inner {
    position: relative;
    z-index: 1;
    padding: 28px 28px 24px;
}

/* ═══════════════════════════════════════
   TOP ROW — title + date badge
═══════════════════════════════════════ */
.ai-card-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.ai-card-label {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ai-card-label-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--score-bg, var(--bg-card, rgba(245,158,11,.15)));
    color: var(--score-color, var(--accent, #f59e0b));
    flex-shrink: 0;
}
.ai-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #e2e8f0);
    letter-spacing: -.1px;
    margin: 0;
}
.ai-card-subtitle {
    font-size: 11.5px;
    color: var(--text-muted, rgba(148,163,184,.6));
    margin-top: 1px;
}
.ai-card-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 20px;
    background: var(--bg-tertiary, rgba(255,255,255,.05));
    border: 1px solid var(--border, rgba(255,255,255,.07));
    font-size: 11.5px;
    color: var(--text-muted, rgba(148,163,184,.7));
    white-space: nowrap;
}

/* ═══════════════════════════════════════
   BODY — score ring + text
═══════════════════════════════════════ */
.ai-card-body {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 24px;
    align-items: center;
    margin-bottom: 22px;
}

/* ── Score ring ── */
.ai-score-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.ai-score-ring {
    position: relative;
    width: 130px; height: 130px;
    flex-shrink: 0;
}
.ai-score-ring svg {
    width: 130px; height: 130px;
    transform: rotate(-90deg);
}
.ai-score-ring__track {
    fill: none;
    stroke: var(--border, rgba(255,255,255,.06));
    stroke-width: 8;
}
.ai-score-ring__fill {
    fill: none;
    stroke: var(--score-color, var(--accent, #f59e0b));
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 0 339.292;
    transition: stroke-dasharray 1.4s cubic-bezier(.34,1,.6,1);
    filter: drop-shadow(0 0 6px var(--score-color, var(--accent, #f59e0b)));
}
.ai-score-ring__glow {
    fill: none;
    stroke: var(--score-color, var(--accent, #f59e0b));
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 0 339.292;
    transition: stroke-dasharray 1.4s cubic-bezier(.34,1,.6,1);
    opacity: .12;
}
.ai-score-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.ai-score-num {
    font-size: 40px;
    font-weight: 800;
    color: var(--score-color, var(--accent, #f59e0b));
    line-height: 1;
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
}
.ai-score-max {
    font-size: 12px;
    color: var(--text-muted, rgba(148,163,184,.4));
    font-weight: 500;
    margin-top: 1px;
}
.ai-score-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--score-color, var(--accent, #f59e0b));
    opacity: .85;
}

/* ── Text content ── */
.ai-card-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ai-card-excerpt {
    position: relative;
    padding: 12px 14px;
    background: var(--bg-tertiary, rgba(255,255,255,.03));
    border-left: 2.5px solid var(--score-color, var(--accent, #f59e0b));
    border-radius: 0 10px 10px 0;
}
.ai-card-excerpt p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-muted, rgba(203,213,225,.75));
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Trend indicator */
.ai-card-trend {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-tertiary, rgba(255,255,255,.03));
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255,255,255,.05));
}
.ai-trend-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--score-color, var(--accent, #f59e0b));
    box-shadow: 0 0 8px var(--score-color, var(--accent, #f59e0b));
    flex-shrink: 0;
    animation: trendPulse 2s ease-in-out infinite;
}
@keyframes trendPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.5; transform:scale(.7); }
}
.ai-trend-text {
    font-size: 12px;
    color: var(--text-muted, rgba(148,163,184,.7));
    font-weight: 500;
}

/* ═══════════════════════════════════════
   RECOMMENDATIONS
═══════════════════════════════════════ */
.ai-recs {
    margin: 4px 0 20px;
}
.ai-recs-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--text-muted, rgba(148,163,184,.6));
    margin-bottom: 10px;
}
.ai-recs-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.ai-rec-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px 13px;
    background: var(--bg-tertiary, rgba(255,255,255,.03));
    border: 1px solid var(--border, rgba(255,255,255,.05));
    border-radius: 10px;
    transition: background .2s, border-color .2s;
    animation: recIn .4s cubic-bezier(.22,1,.36,1) both;
}
.ai-rec-item:nth-child(1) { animation-delay: .1s; }
.ai-rec-item:nth-child(2) { animation-delay: .18s; }
.ai-rec-item:nth-child(3) { animation-delay: .26s; }
@keyframes recIn {
    from { opacity:0; transform:translateX(-8px); }
    to   { opacity:1; transform:translateX(0); }
}
.ai-rec-item:hover {
    background: var(--bg-card, rgba(255,255,255,.055));
    border-color: var(--border-strong, rgba(255,255,255,.1));
}
.ai-rec-num {
    width: 20px; height: 20px;
    border-radius: 6px;
    background: var(--score-bg, var(--bg-card, rgba(245,158,11,.15)));
    color: var(--score-color, var(--accent, #f59e0b));
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.ai-rec-text {
    font-size: 12.5px;
    color: var(--text-muted, rgba(203,213,225,.8));
    line-height: 1.5;
}

/* ═══════════════════════════════════════
   CTA BUTTON
═══════════════════════════════════════ */
.ai-report-cta {
    position: relative;
    width: 100%;
    padding: 13px 20px;
    background: var(--score-gradient, linear-gradient(135deg, var(--accent, #f59e0b), var(--accent-light, #e07840)));
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    transition: all .25s;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ai-report-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .2s;
}
.ai-report-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.1);
}
.ai-report-cta:hover::before { opacity: 1; }
.ai-report-cta:active { transform: translateY(0); }

/* ═══════════════════════════════════════
   QUICK ACTIONS
═══════════════════════════════════════ */
.ai-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.ai-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    background: var(--bg-secondary, rgba(18,18,28,.6));
    border: 1px solid var(--border, rgba(255,255,255,.07));
    border-radius: 14px;
    cursor: pointer;
    transition: all .25s cubic-bezier(.34,1.56,.64,1);
    color: var(--text, #e2e8f0);
    font-size: 12.5px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}
.ai-quick-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.04), transparent);
    opacity: 0;
    transition: opacity .2s;
}
.ai-quick-btn:hover {
    border-color: var(--border-strong, rgba(255,255,255,.15));
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.ai-quick-btn:hover::before { opacity: 1; }
.ai-quick-btn svg {
    color: var(--accent, #e07840);
    transition: transform .3s;
}
.ai-quick-btn:hover svg { transform: scale(1.15); }

/* ═══════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════ */
.ai-empty-state {
    text-align: center;
    padding: 48px 24px;
    background: var(--bg-secondary, rgba(18,18,28,.6));
    border: 1px dashed var(--border, rgba(255,255,255,.1));
    border-radius: 20px;
}
.ai-empty-icon {
    font-size: 52px;
    margin-bottom: 16px;
    animation: float 3s ease-in-out infinite;
    display: block;
}
@keyframes float {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(5deg); }
}
.ai-empty-state h4 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text, #e2e8f0);
}
.ai-empty-state p {
    margin: 0 0 24px;
    font-size: 13.5px;
    color: var(--text-muted, rgba(148,163,184,.65));
    max-width: 380px;
    margin-left: auto; margin-right: auto;
    line-height: 1.6;
}

/* ═══════════════════════════════════════
   LOADING
═══════════════════════════════════════ */
.ai-widget-placeholder {
    text-align: center;
    padding: 48px 20px;
}
.ai-widget-placeholder-icon {
    font-size: 48px;
    margin-bottom: 12px;
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%,100% { opacity:1; }
    50%      { opacity:.4; }
}
.ai-widget-placeholder p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted, rgba(148,163,184,.5));
}

/* Spinner */
.spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--border, rgba(255,255,255,.2));
    border-top-color: var(--text, #fff);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════
   LIGHT THEME — only ivory is truly light
   Fix: ensure text readable on light bg
═══════════════════════════════════════ */
[data-theme="ivory"] .ai-report-card {
    background: var(--bg-secondary, #F5F0E6);
    border-color: var(--border, rgba(139,115,85,.2));
}
[data-theme="ivory"] .ai-card-title { color: var(--text, #3D3226); }
[data-theme="ivory"] .ai-card-subtitle { color: var(--text-muted, #8B7B6B); }
[data-theme="ivory"] .ai-card-date-badge {
    background: var(--bg-tertiary, #EDE8DC);
    border-color: var(--border, rgba(139,115,85,.2));
    color: var(--text-muted, #8B7B6B);
}
[data-theme="ivory"] .ai-card-excerpt {
    background: var(--bg-tertiary, #EDE8DC);
}
[data-theme="ivory"] .ai-card-excerpt p { color: var(--text-muted, #6B5B4B); }
[data-theme="ivory"] .ai-card-trend {
    background: var(--bg-tertiary, #EDE8DC);
    border-color: var(--border, rgba(139,115,85,.2));
}
[data-theme="ivory"] .ai-trend-text { color: var(--text-muted, #8B7B6B); }
[data-theme="ivory"] .ai-rec-item {
    background: var(--bg-tertiary, #EDE8DC);
    border-color: var(--border, rgba(139,115,85,.2));
}
[data-theme="ivory"] .ai-rec-text { color: var(--text-muted, #6B5B4B); }
[data-theme="ivory"] .ai-recs-title { color: var(--text-muted, #8B7B6B); }
[data-theme="ivory"] .ai-quick-btn {
    background: var(--bg-tertiary, #EDE8DC);
    border-color: var(--border, rgba(139,115,85,.2));
    color: var(--text, #3D3226);
}
[data-theme="ivory"] .ai-score-max { color: var(--text-muted, #8B7B6B); }
[data-theme="ivory"] .ai-report-card__bg::after {
    opacity: .3;
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 768px) {
    .ai-card-inner { padding: 20px; }
    .ai-card-body {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ai-score-wrap { flex-direction: row; align-items: center; gap: 20px; }
    .ai-score-ring { width: 90px; height: 90px; }
    .ai-score-ring svg { width: 90px; height: 90px; }
    .ai-score-num { font-size: 30px; }
    .ai-quick-actions { grid-template-columns: 1fr; }
}


/* ===== css/notes-editor.css?v=2602241400 ===== */
/* ================================================
   NOTES EDITOR - Premium Design
   ProductiveApp v4.0
   ================================================ */

/* === LAYOUT === */
.notes-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    height: calc(100vh - 140px);
}

@media (max-width: 900px) {
    .notes-layout {
        grid-template-columns: 1fr;
    }
    .notes-sidebar {
        display: none;
    }
}

/* === SIDEBAR === */
.notes-sidebar {
    background: var(--bg-secondary, #0f0f12);
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.06));
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notes-sidebar-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-primary);
}

.notes-sidebar-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #fafafa);
}

/* === SEARCH === */
.notes-search {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.notes-search-icon {
    width: 16px;
    height: 16px;
    color: var(--text-quaternary, #52525b);
    flex-shrink: 0;
}

.notes-search-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.notes-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--text-primary, #fafafa);
}

.notes-search-input::placeholder {
    color: var(--text-quaternary, #52525b);
}

.notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.notes-empty-list {
    padding: 24px;
    text-align: center;
    color: var(--text-quaternary, #52525b);
    font-size: 13px;
}

/* Note item */
.note-item {
    padding: 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 150ms ease;
    margin-bottom: 6px;
}

.note-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.note-item.active {
    background: var(--accent-subtle, color-mix(in srgb, var(--accent) 12%, transparent));
}

.note-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #fafafa);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-item-preview {
    font-size: 12px;
    color: var(--text-tertiary, #71717a);
    margin: 6px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.note-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-quaternary, #52525b);
}

/* === EDITOR === */
.notes-editor {
    background: var(--bg-secondary, #0f0f12);
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.06));
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notes-editor-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.note-title-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #fafafa);
    letter-spacing: -0.4px;
}

.note-title-input::placeholder {
    color: var(--text-quaternary, #52525b);
}

/* === TOOLBAR === */
.notes-toolbar {
    padding: 0 16px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    flex-shrink: 0;
    height: 54px;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    scrollbar-width: none;
}

.notes-toolbar::-webkit-scrollbar {
    display: none;
}

.toolbar-group {
    display: flex;
    gap: 2px;
}

.toolbar-divider {
    width: 1px;
    height: 28px;
    background: var(--border-primary);
    margin: 0 8px;
}

.toolbar-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-tertiary, #71717a);
    cursor: pointer;
    transition: all 150ms ease;
}

.toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #fafafa);
}

.toolbar-btn.active {
    background: var(--accent-subtle);
    color: var(--accent);
}

.toolbar-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* === CONTENT === */
.notes-editor-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    position: relative; /* Required for AI FAB positioning */
}

.note-textarea {
    width: 100%;
    height: 100%;
    min-height: 400px;
    background: none;
    border: none;
    outline: none;
    resize: none;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-primary, #fafafa);
    font-family: 'Inter', -apple-system, sans-serif;
}

.note-textarea::placeholder {
    color: var(--text-quaternary, #52525b);
}

/* === FOOTER === */
.notes-editor-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-quaternary, #52525b);
}

.save-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}

.save-indicator.saving { color: var(--accent); }
.save-indicator.saved { color: var(--success, #22c55e); }
.save-indicator.unsaved { color: var(--warning, #f59e0b); }

.word-count {
    font-weight: 500;
}

/* === EMPTY STATE === */
.notes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
}

.notes-empty svg {
    width: 56px;
    height: 56px;
    stroke: var(--text-quaternary, #52525b);
    stroke-width: 1;
    fill: none;
    margin-bottom: 20px;
    opacity: 0.5;
}

.notes-empty h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #fafafa);
    margin: 0 0 8px;
}

.notes-empty p {
    font-size: 14px;
    color: var(--text-tertiary, #71717a);
    margin: 0 0 24px;
}

/* === SLASH MENU === */
.slash-menu {
    position: fixed;
    width: 260px;
    background: var(--bg-card, #1a1a1f);
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 150ms ease;
    overflow: hidden;
}

.slash-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.slash-menu-header {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.slash-menu-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
}

.slash-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 100ms ease;
}

.slash-menu-item:hover,
.slash-menu-item.selected {
    background: rgba(255, 255, 255, 0.06);
}

.slash-menu-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}

.slash-menu-content {
    flex: 1;
    min-width: 0;
}

.slash-menu-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.slash-menu-desc {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.slash-menu-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-quaternary);
    font-size: 13px;
}

/* === NOTE HEADER ACTIONS === */
.note-header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

/* === VISIBILITY TOGGLE === */
.note-visibility-toggle {
    font-size: 16px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 150ms ease;
}

.note-visibility-toggle.note-private {
    opacity: 0.6;
}

.note-visibility-toggle.note-public {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    opacity: 1;
}

/* === PUBLIC BADGE === */
.note-badge-public {
    margin-right: 4px;
    font-size: 12px;
}

/* === PROJECT FILTER === */
.notes-project-filter {
    width: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--bg-primary, #0a0a0d);
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.06));
    border-radius: 8px;
    color: var(--text-primary, #fafafa);
    font-size: 12px;
    outline: none;
    cursor: pointer;
}

.notes-project-filter option {
    background: var(--bg-secondary, #0f0f12);
    color: var(--text-primary, #fafafa);
}


/* ===== css/notes-ai.css?v=2602240010 ===== */
/**
 * NOTES AI - Styles for AI-powered note enhancement
 * ProductiveApp v4.2
 */

/* ========== AI FAB (Floating Action Button) ========== */
.notes-ai-fab {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
}

.ai-fab-main {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary, var(--accent-light)));
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 20px var(--accent-glow, color-mix(in srgb, var(--accent) 40%, transparent)),
        0 2px 0 rgba(255, 255, 255, 0.15) inset;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.ai-fab-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ai-fab-main:hover {
    transform: scale(1.08);
    box-shadow:
        0 8px 30px var(--accent-glow, color-mix(in srgb, var(--accent) 50%, transparent)),
        0 2px 0 rgba(255, 255, 255, 0.2) inset;
}

.ai-fab-main:hover::before {
    opacity: 1;
}

.ai-fab-main svg {
    width: 26px;
    height: 26px;
}

.ai-fab-main.processing {
    pointer-events: none;
}

.ai-fab-main.processing svg {
    animation: ai-spin 1s linear infinite;
}

@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

/* FAB Menu */
.ai-fab-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notes-ai-fab.expanded .ai-fab-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.notes-ai-fab.expanded .ai-fab-main {
    transform: rotate(45deg);
    background: var(--danger, #ef4444);
}

.ai-fab-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-card, rgba(30, 30, 45, 0.95));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    color: var(--text-primary, #fff);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.ai-fab-action:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: translateX(-5px);
    box-shadow:
        0 6px 20px var(--accent-glow, color-mix(in srgb, var(--accent) 40%, transparent)),
        0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

.ai-fab-action svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ai-fab-action span {
    flex: 1;
}

/* ========== AI Preview Modal ========== */
.notes-ai-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.notes-ai-preview-modal.active {
    opacity: 1;
    visibility: visible;
}

.ai-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.ai-preview-content {
    position: relative;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    background: var(--bg-card, rgba(25, 25, 35, 0.98));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.5),
        0 2px 0 rgba(255, 255, 255, 0.05) inset,
        0 0 60px var(--accent-glow, color-mix(in srgb, var(--accent) 10%, transparent));
    transform: scale(0.9) translateY(30px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.notes-ai-preview-modal.active .ai-preview-content {
    transform: scale(1) translateY(0);
}

.ai-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
}

.ai-preview-header h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
}

.ai-preview-header h3 svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
}

.ai-preview-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    color: var(--text-muted, #888);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ai-preview-close:hover {
    background: var(--danger, #ef4444);
    border-color: var(--danger, #ef4444);
    color: white;
}

.ai-preview-close svg {
    width: 18px;
    height: 18px;
}

.ai-preview-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ai-preview-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-preview-section label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-preview-text {
    padding: 16px 20px;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary, rgba(255, 255, 255, 0.8));
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.ai-preview-text.original {
    opacity: 0.7;
    border-left: 3px solid var(--text-muted, #888);
}

.ai-preview-text.result {
    border-left: 3px solid var(--accent);
    background: linear-gradient(90deg, var(--accent-glow, color-mix(in srgb, var(--accent) 10%, transparent)) 0%, transparent 100%);
}

.ai-preview-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.2) 100%);
}

.ai-preview-footer .btn {
    padding: 12px 24px;
    font-size: 0.95rem;
}

/* ========== Toolbar AI Button ========== */
.toolbar-btn-ai {
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary, var(--accent-light))) !important;
    color: white !important;
    border: none !important;
}

.toolbar-btn-ai:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px var(--accent-glow, color-mix(in srgb, var(--accent) 40%, transparent));
}

.toolbar-ai-group {
    margin-left: auto;
}

/* ========== AI Spinner ========== */
.ai-spinner {
    animation: ai-spin 1s linear infinite;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
    .notes-ai-fab {
        bottom: 16px;
        right: 16px;
    }

    .ai-fab-main {
        width: 50px;
        height: 50px;
    }

    .ai-fab-action {
        padding: 8px 14px;
        font-size: 0.85rem;
    }

    .ai-preview-content {
        max-height: 95vh;
        border-radius: 16px;
    }

    .ai-preview-body {
        padding: 16px;
    }

    .ai-preview-text {
        max-height: 150px;
    }
}

/* ========== Theme Specific ========== */
[data-theme="matrix"] .ai-fab-main,
[data-theme="hacker"] .ai-fab-main {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

[data-theme="cyberpunk"] .ai-fab-main {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

[data-theme="ocean"] .ai-fab-main {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

[data-theme="sunset"] .ai-fab-main {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

[data-theme="forest"] .ai-fab-main {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}


/* ===== css/notes-3d.css?v=2602240010 ===== */
/* ═══════════════════════════════════════
   NOTES 3D — Premium styles
   ProductiveApp MAHAYAWEN edition
═══════════════════════════════════════ */

/* ── 3D GRAPH CONTAINER ── */
.notes-3d-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #06060e;
    overflow: hidden;
}

.notes-3d-toolbar {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 50;
    background: rgba(8, 8, 15, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 40px;
    padding: 6px 14px;
}

.notes-3d-toolbar button {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent-light);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.notes-3d-toolbar button:hover {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.notes-3d-toolbar button.active {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    color: var(--accent-light);
}
.notes-3d-toolbar .separator {
    width: 1px; height: 20px;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ── GRAPH VIEW WRAPPER inside notes ── */
.giri-graph-3d-wrap {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #06060e;
    display: flex;
    flex-direction: column;
}

.giri-graph-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(8, 8, 15, 0.95);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
    flex-shrink: 0;
}

.giri-graph-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-light);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.giri-graph-header .graph-controls {
    display: flex;
    gap: 6px;
}

.giri-graph-header .graph-controls button {
    padding: 5px 12px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent-light);
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    transition: background .15s;
}
.giri-graph-header .graph-controls button:hover {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.giri-graph-body {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* ── GRAPH STATS OVERLAY ── */
.n3dg-stats {
    position: absolute;
    bottom: 14px;
    left: 14px;
    font-size: 11px;
    color: color-mix(in srgb, var(--accent) 60%, transparent);
    pointer-events: none;
    z-index: 10;
    line-height: 1.6;
}

/* ── MAHAYAWEN AI PANEL ── */
#maha-ai-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes maha-spin {
    to { transform: rotate(360deg); }
}

#maha-ai-panel {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.maha-actions-grid button:hover {
    background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

#maha-output {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 30%, transparent) transparent;
}
#maha-output::-webkit-scrollbar {
    width: 4px;
}
#maha-output::-webkit-scrollbar-track {
    background: transparent;
}
#maha-output::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 2px;
}

/* ── GRAPH NODE BADGE on sidebar ── */
.gn-graph-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-light);
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.gn-graph-badge:hover {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ── CLUSTER LEGEND ── */
.n3dg-legend {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(8, 8, 15, 0.82);
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 10px;
    padding: 10px 12px;
    z-index: 10;
    font-size: 11px;
    max-width: 160px;
}
.n3dg-legend-title {
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 10px;
    margin-bottom: 8px;
}
.n3dg-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #9ca3af;
    margin-bottom: 5px;
}
.n3dg-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── RESPONSIVE: hide AI btn when not on notes ── */
#maha-ai-btn {
    display: none;
}
body[data-view='notes'] #maha-ai-btn {
    display: flex;
}

/* ── EMPTY STATE for 3D graph ── */
.n3dg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #374151;
    text-align: center;
    gap: 12px;
}
.n3dg-empty .icon { font-size: 48px; opacity: .4; }
.n3dg-empty p { font-size: 14px; color: #4b5563; }


/* ===== css/notes-graph.css?v=2602250220 ===== */
/**
 * NOTES GRAPH VIEW - Premium glassmorphism styling
 * ProductiveApp v5.0
 */

/* === MODAL OVERLAY === */
.notes-graph-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 18, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* === MODAL CONTAINER === */
.notes-graph-modal {
    width: 95vw;
    height: 90vh;
    max-width: 1800px;
    max-height: 1000px;
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.95), rgba(30, 30, 50, 0.95));
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6),
                inset 0 1px 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* === HEADER === */
.notes-graph-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.notes-graph-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.notes-graph-title svg {
    color: #667eea;
}

.notes-graph-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #aaa;
}

.notes-graph-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: scale(1.05);
}

/* === TOOLBAR === */
.notes-graph-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

.graph-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ddd;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.graph-btn svg {
    flex-shrink: 0;
}

.graph-btn:hover {
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.4);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

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

.graph-toolbar-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
}

/* === CONTAINER === */
.notes-graph-container {
    position: relative;
    flex: 1;
    background: #0a0a12;
    overflow: hidden;
}

#notes-graph-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
}

#notes-graph-canvas:active {
    cursor: grabbing;
}

/* === TOOLTIP === */
.graph-tooltip {
    position: absolute;
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.98), rgba(30, 30, 50, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px 14px;
    max-width: 280px;
    pointer-events: none;
    z-index: 1150;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6),
                inset 0 1px 1px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: tooltipFadeIn 0.2s ease;
    transform: translate(-50%, -120%);
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -110%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -120%);
    }
}

/* === LOADING === */
.graph-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 18, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100;
}

.graph-loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(102, 126, 234, 0.2);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.graph-loading-text {
    margin-top: 16px;
    color: #aaa;
    font-size: 14px;
}

/* === STATS === */
.graph-stats {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.85), rgba(30, 30, 50, 0.85));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.graph-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 60px;
}

.graph-stat-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.graph-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #667eea;
}

/* === CATEGORY BADGES (for tooltips) === */
.category-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.category-badge.technical {
    background: linear-gradient(135deg, #4488ff, #2266ff);
}

.category-badge.creative {
    background: linear-gradient(135deg, #aa44ff, #8822ff);
}

.category-badge.planning {
    background: linear-gradient(135deg, #ff8800, #ff6600);
}

.category-badge.research {
    background: linear-gradient(135deg, #22cc66, #11aa44);
}

.category-badge.personal {
    background: linear-gradient(135deg, #ff66aa, #ff4488);
}

.category-badge.reference {
    background: linear-gradient(135deg, #cccc44, #aaaa22);
}

.category-badge.meeting {
    background: linear-gradient(135deg, #44ccff, #22aaff);
}

.category-badge.idea {
    background: linear-gradient(135deg, #ff44ff, #ff22ff);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .notes-graph-modal {
        width: 100vw;
        height: 100vh;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }

    .notes-graph-header {
        padding: 16px 20px;
    }

    .notes-graph-title {
        font-size: 18px;
    }

    .notes-graph-toolbar {
        padding: 10px 20px;
        gap: 6px;
    }

    .graph-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .graph-btn span {
        display: none; /* Hide text labels on mobile, show only icons */
    }

    .graph-stats {
        bottom: 10px;
        left: 10px;
        padding: 8px 12px;
        gap: 8px;
    }

    .graph-stat {
        min-width: 50px;
    }

    .graph-stat-value {
        font-size: 16px;
    }

    .graph-tooltip {
        max-width: 200px;
        padding: 8px 10px;
        font-size: 11px;
    }
}

/* === DARK MODE COMPATIBILITY === */
[data-theme="light"] .notes-graph-modal-overlay {
    background: rgba(240, 240, 245, 0.9);
}

[data-theme="light"] .notes-graph-modal {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 250, 255, 0.98));
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .notes-graph-header {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01));
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .notes-graph-title {
    color: #1a1a2e;
}

[data-theme="light"] .notes-graph-close {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #666;
}

[data-theme="light"] .notes-graph-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #000;
}

[data-theme="light"] .notes-graph-toolbar {
    background: rgba(0, 0, 0, 0.02);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .graph-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: #444;
}

[data-theme="light"] .graph-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
    color: #667eea;
}

[data-theme="light"] .notes-graph-container {
    background: #f8f9fa;
}

[data-theme="light"] .graph-tooltip {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 250, 255, 0.98));
    border-color: rgba(0, 0, 0, 0.15);
    color: #1a1a2e;
}

[data-theme="light"] .graph-stats {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(250, 250, 255, 0.95));
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .graph-stat-label {
    color: #666;
}

/* === ANIMATIONS === */
@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.graph-btn, .graph-stat {
    animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.graph-btn:nth-child(1) { animation-delay: 0.05s; }
.graph-btn:nth-child(2) { animation-delay: 0.1s; }
.graph-btn:nth-child(3) { animation-delay: 0.15s; }
.graph-btn:nth-child(4) { animation-delay: 0.2s; }
.graph-btn:nth-child(5) { animation-delay: 0.25s; }
.graph-btn:nth-child(6) { animation-delay: 0.3s; }
.graph-btn:nth-child(7) { animation-delay: 0.35s; }

.graph-stat:nth-child(1) { animation-delay: 0.4s; }
.graph-stat:nth-child(2) { animation-delay: 0.45s; }
.graph-stat:nth-child(3) { animation-delay: 0.5s; }

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    .notes-graph-modal-overlay,
    .notes-graph-modal,
    .graph-tooltip,
    .graph-btn,
    .graph-stat {
        animation: none;
    }

    .graph-btn:hover {
        transform: none;
    }

    .graph-loading-spinner {
        animation: none;
        border-top-color: transparent;
    }
}

/* === FOCUS STATES === */
.graph-btn:focus-visible,
.notes-graph-close:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* ── AI buttons in graph toolbar (ultra premium) ── */
.graph-btn-ai {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), rgba(6,182,212,0.1)) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
    color: var(--accent-light) !important;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}
.graph-btn-ai::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s;
}
.graph-btn-ai:hover::before { transform: translateX(100%); }
.graph-btn-ai:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), rgba(6,182,212,0.2)) !important;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 30%, transparent) !important;
    transform: translateY(-2px);
}

/* === PREVIEW PANEL v7.1 (Premium) === */

#graph-note-preview {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 360px;
    background: linear-gradient(160deg, rgba(10, 14, 26, 0.98) 0%, rgba(15, 20, 40, 0.98) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid rgba(163, 113, 247, 0.15);
    display: flex; flex-direction: column;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.4);
}
#graph-note-preview.visible { transform: translateX(0); }

.gnp-header {
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(163, 113, 247, 0.04) 0%, transparent 100%);
}

.gnp-header-top {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px;
}

.gnp-title {
    flex: 1; font-size: 17px; font-weight: 700; color: #e6edf3;
    line-height: 1.4; word-break: break-word;
}

.gnp-close {
    background: none; border: none; color: #4b5563;
    cursor: pointer; font-size: 16px; padding: 4px 6px; line-height: 1;
    flex-shrink: 0; transition: all 0.15s;
    border-radius: 6px;
}
.gnp-close:hover { color: #e6edf3; background: rgba(255,255,255,0.08); }

.gnp-meta {
    display: flex; align-items: center; gap: 8px;
}

.gnp-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; padding: 3px 10px;
    border-radius: 20px; text-transform: uppercase;
    letter-spacing: 0.06em;
}

.gnp-meta-info {
    font-size: 11px; color: #4b5563;
}

.gnp-body {
    flex: 1; overflow-y: auto; padding: 16px;
    font-size: 14px;
}

.gnp-preview-text {
    color: #9ca3af; line-height: 1.75;
    border-left: 2px solid rgba(163, 113, 247, 0.25);
    padding-left: 14px;
    margin-bottom: 16px;
}

.gnp-empty {
    color: #374151; font-size: 13px; font-style: italic;
}

.gnp-tags {
    display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px;
}

.gnp-tag {
    padding: 3px 10px; border-radius: 6px;
    background: rgba(163, 113, 247, 0.08); color: #a371f7;
    border: 1px solid rgba(163, 113, 247, 0.15);
    font-size: 12px;
}

.gnp-section { margin-bottom: 16px; }

.gnp-section-title {
    font-size: 10px; font-weight: 700; color: #4b5563;
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.gnp-conn-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 8px; margin-bottom: 3px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer; transition: all 0.15s;
}
.gnp-conn-item:hover {
    background: rgba(163, 113, 247, 0.06);
    border-color: rgba(163, 113, 247, 0.15);
}

.gnp-conn-dot { font-size: 8px; flex-shrink: 0; }
.gnp-conn-name { flex: 1; font-size: 13px; color: #9ca3af; }
.gnp-conn-pct { font-size: 10px; color: #374151; }

/* Footer buttons */
.gnp-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex; flex-direction: column; gap: 8px;
}

.gnp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600; font-size: 13px;
    cursor: pointer; transition: all 0.2s;
    border: none;
    width: 100%;
}

.gnp-btn svg { flex-shrink: 0; }

.gnp-btn-edit {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(163, 113, 247, 0.2);
    color: #c4b5fd;
}
.gnp-btn-edit:hover {
    background: rgba(163, 113, 247, 0.12);
    border-color: rgba(163, 113, 247, 0.4);
    color: #e9d5ff;
    transform: translateY(-1px);
}

.gnp-btn-open {
    background: linear-gradient(135deg, rgba(163, 113, 247, 0.15), rgba(88, 166, 255, 0.15));
    border: 1px solid rgba(163, 113, 247, 0.25);
    color: #c4b5fd;
}
.gnp-btn-open:hover {
    background: linear-gradient(135deg, rgba(163, 113, 247, 0.25), rgba(88, 166, 255, 0.25));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(163, 113, 247, 0.25);
}

/* Edit mode */
.gnp-edit-input {
    width: 100%; padding: 8px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(163, 113, 247, 0.3);
    border-radius: 8px; color: #e6edf3;
    font-size: 16px; font-weight: 700;
    font-family: Inter, sans-serif; outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.gnp-edit-input:focus {
    border-color: #a371f7;
    box-shadow: 0 0 0 3px rgba(163, 113, 247, 0.12);
}

.gnp-edit-textarea {
    width: 100%; min-height: 220px; padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(163, 113, 247, 0.2);
    border-radius: 10px; color: #b0b8c8;
    font-size: 14px; font-family: Inter, sans-serif;
    line-height: 1.7; outline: none; resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.gnp-edit-textarea:focus {
    border-color: #a371f7;
    box-shadow: 0 0 0 3px rgba(163, 113, 247, 0.08);
    color: #e6edf3;
}

.gnp-edit-actions {
    display: flex; gap: 8px; margin-top: 12px;
}

.gnp-btn-save {
    flex: 1;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}
.gnp-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35);
}

.gnp-btn-cancel {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #6b7280;
}
.gnp-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e6edf3;
}

/* Light theme */
[data-theme="light"] #graph-note-preview {
    background: linear-gradient(160deg, rgba(255,255,255,0.98), rgba(250,250,255,0.98));
    border-left-color: rgba(163, 113, 247, 0.2);
}
[data-theme="light"] .gnp-title { color: #1a1a2e; }
[data-theme="light"] .gnp-preview-text { color: #4b5563; }
[data-theme="light"] .gnp-edit-input { background: rgba(0,0,0,0.04); color: #1a1a2e; }
[data-theme="light"] .gnp-edit-textarea { background: rgba(0,0,0,0.02); color: #374151; }
[data-theme="light"] .gnp-btn-edit { background: rgba(163,113,247,0.06); color: #7c3aed; }
[data-theme="light"] .gnp-btn-open { background: rgba(163,113,247,0.08); color: #7c3aed; }

/* Mobile */
@media (max-width: 768px) {
    #graph-note-preview { width: 100%; }
}
/* ===== css/giri-note.css?v=2603050001 ===== */
/**
 * GIRI NOTE - Premium Design System
 * ProductiveApp - World Class Obsidian-Style Notes
 *
 * Theme-aware: all colors inherit from the active theme via CSS variables.
 */

/* ========== DESIGN TOKENS (theme-aware) ========== */

:root {
    /* Giri Note maps to theme variables — NO hardcoded colors here */
    --gn-primary: var(--accent, #a371f7);
    --gn-primary-light: var(--accent-light, #b891f9);
    --gn-primary-dark: var(--accent, #8a5ad6);
    --gn-secondary: var(--accent-light, #58a6ff);
    --gn-secondary-light: var(--accent-light, #79b8ff);
    --gn-accent: var(--success, #3fb950);

    /* Backgrounds — from theme */
    --gn-bg-app: var(--bg-primary, #0a0e1a);
    --gn-bg-sidebar: var(--bg-secondary, #0f1420);
    --gn-bg-panel: var(--bg-tertiary, #161b2d);
    --gn-bg-elevated: var(--bg-card, rgba(255,255,255,0.05));
    --gn-bg-hover: color-mix(in srgb, var(--accent, #a371f7) 8%, transparent);

    /* Text — from theme */
    --gn-text-primary: var(--text, #e6edf3);
    --gn-text-secondary: var(--text-muted, #9ca3af);
    --gn-text-muted: var(--text-muted, #6e7681);

    /* Borders — from theme */
    --gn-border: var(--border, rgba(255,255,255,0.08));
    --gn-border-hover: color-mix(in srgb, var(--accent, #a371f7) 30%, transparent);

    /* Shadows */
    --gn-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --gn-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --gn-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --gn-shadow-glow: 0 0 24px color-mix(in srgb, var(--accent, #a371f7) 30%, transparent);

    /* Gradients */
    --gn-gradient-primary: linear-gradient(135deg, var(--accent, #a371f7), var(--accent-light, #58a6ff));
    --gn-gradient-surface: linear-gradient(135deg,
        color-mix(in srgb, var(--accent, #a371f7) 5%, transparent) 0%,
        color-mix(in srgb, var(--accent-light, #58a6ff) 5%, transparent) 100%);

    /* Spacing */
    --gn-space-xs: 4px;
    --gn-space-sm: 8px;
    --gn-space-md: 16px;
    --gn-space-lg: 24px;
    --gn-space-xl: 32px;

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

    /* Transitions */
    --gn-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --gn-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --gn-transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========== ENHANCEMENTS TO EXISTING LAYOUT ========== */

.notes-v6-layout {
    background: var(--gn-bg-app);
    color: var(--gn-text-primary);
}

.notes-v6-sidebar {
    background: var(--gn-bg-sidebar);
    border-right: 1px solid var(--gn-border);
}

.notes-v6-tab.active {
    color: var(--gn-primary);
    border-bottom-color: var(--gn-primary);
}

.notes-v6-tab.active::after {
    background: var(--gn-gradient-primary);
    box-shadow: var(--gn-shadow-glow);
}

.notes-v6-btn-icon:hover {
    background: var(--gn-bg-hover);
    color: var(--gn-primary);
}

.notes-v6-btn-primary {
    background: var(--gn-gradient-primary);
    color: white;
    font-weight: 600;
    box-shadow: var(--gn-shadow-sm);
    transition: all var(--gn-transition-normal);
}

.notes-v6-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--gn-shadow-glow);
}

/* ========== GIRI NOTE SPECIFIC STYLES ========== */

.giri-quick-actions button {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gn-bg-panel);
    border: 1px solid var(--gn-border);
    border-radius: var(--gn-radius-md);
    color: var(--gn-text-secondary);
    cursor: pointer;
    transition: all var(--gn-transition-fast);
}

.giri-quick-actions button:hover {
    background: var(--gn-bg-hover);
    border-color: var(--gn-border-hover);
    color: var(--gn-primary);
    transform: translateY(-1px);
    box-shadow: var(--gn-shadow-sm);
}

.giri-quick-actions svg {
    flex-shrink: 0;
}

.giri-keyboard-hints {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    user-select: none;
}

/* ========== BASIC LAYOUT (FALLBACK) ========== */

.giri-note-basic-layout {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.giri-sidebar {
    box-shadow: var(--gn-shadow-lg);
}

.giri-sidebar button {
    transition: all var(--gn-transition-normal);
}

.giri-sidebar button:hover {
    transform: translateY(-2px);
    box-shadow: var(--gn-shadow-md);
}

.giri-main button {
    transition: all var(--gn-transition-normal);
}

.giri-main button:hover {
    transform: translateY(-1px);
    box-shadow: var(--gn-shadow-sm);
}

/* ========== ANIMATIONS ========== */

@keyframes giri-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes giri-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes giri-glow {
    0%, 100% { box-shadow: 0 0 5px var(--gn-primary); }
    50% { box-shadow: 0 0 20px var(--gn-primary); }
}

.giri-animate-in { animation: giri-fade-in var(--gn-transition-slow); }
.giri-pulse { animation: giri-pulse 2s infinite; }
.giri-glow { animation: giri-glow 2s infinite; }

/* ========== SCROLLBAR STYLING ========== */

.giri-note-basic-layout ::-webkit-scrollbar,
.notes-v6-layout ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.giri-note-basic-layout ::-webkit-scrollbar-track,
.notes-v6-layout ::-webkit-scrollbar-track {
    background: transparent;
}

.giri-note-basic-layout ::-webkit-scrollbar-thumb,
.notes-v6-layout ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent, #a371f7) 20%, transparent);
    border-radius: 4px;
}

.giri-note-basic-layout ::-webkit-scrollbar-thumb:hover,
.notes-v6-layout ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent, #a371f7) 40%, transparent);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
    .giri-sidebar { width: 100% !important; }
    .giri-keyboard-hints { display: none; }
    .giri-quick-actions { gap: 4px !important; }
    .giri-quick-actions button { width: 32px; height: 32px; }
}

/* ========== ACCESSIBILITY ========== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== FOCUS STATES ========== */

.giri-note-basic-layout button:focus-visible,
.notes-v6-btn-icon:focus-visible,
.notes-v6-btn-primary:focus-visible {
    outline: 2px solid var(--gn-primary);
    outline-offset: 2px;
}

/* ========== UTILITIES ========== */

.giri-gradient-text {
    background: var(--gn-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.giri-glass {
    background: color-mix(in srgb, var(--bg-secondary, #0f1420) 60%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.giri-border-glow {
    border: 1px solid var(--gn-border);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #a371f7) 10%, transparent);
}

.giri-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--gn-shadow-md);
}

/* ========== PREMIUM EDITOR DESIGN - v2.0 (theme-aware) ========== */

.notes-v6-command-bar {
    background: color-mix(in srgb, var(--bg-primary, #0a0e1a) 95%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--accent, #a371f7) 15%, transparent) !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--accent, #a371f7) 10%, transparent) !important;
}

.notes-v6-btn-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-muted, #6b7280) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
.notes-v6-btn-icon:hover {
    background: color-mix(in srgb, var(--accent, #a371f7) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent, #a371f7) 25%, transparent) !important;
    color: var(--accent, #a371f7) !important;
}

.notes-v6-quick-search {
    flex: 1 !important;
    max-width: 320px !important;
    padding: 6px 12px !important;
    background: color-mix(in srgb, var(--text, #fff) 4%, transparent) !important;
    border: 1px solid var(--border, rgba(255,255,255,0.07)) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    color: var(--text-muted, #4b5563) !important;
    font-size: 13px !important;
}
.notes-v6-quick-search:hover {
    background: color-mix(in srgb, var(--accent, #a371f7) 6%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent, #a371f7) 20%, transparent) !important;
    color: var(--text-muted, #9ca3af) !important;
}
.notes-v6-quick-search kbd {
    margin-left: auto !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    background: color-mix(in srgb, var(--accent, #a371f7) 12%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--accent, #a371f7) 20%, transparent) !important;
    border-radius: 4px !important;
    color: var(--accent, #a371f7) !important;
    font-family: 'SF Mono', 'Monaco', monospace !important;
}

/* === EDITOR CONTAINER === */
.notes-v6-editor-container {
    background: var(--bg-primary, #0d1117) !important;
}

/* === NOTE TITLE === */
.notes-v6-note-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--text, #e6edf3) !important;
    background: transparent !important;
    border: none !important;
    padding: 32px 48px 12px !important;
    width: 100% !important;
    outline: none !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
}
.notes-v6-note-title::placeholder { color: var(--text-muted, #3d4451) !important; }

/* === EDITOR CONTENT AREA === */
.notes-v6-editor-content,
.notes-editor-content,
[contenteditable="true"].notes-editor {
    padding: 0 48px 48px !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: var(--text, #c9d1d9) !important;
    max-width: 760px !important;
}

/* === TOOLBAR === */
.notes-v6-toolbar,
.notes-toolbar {
    padding: 6px 48px !important;
    background: color-mix(in srgb, var(--bg-primary, #0a0e1a) 80%, transparent) !important;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.05)) !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    flex-wrap: wrap !important;
}

/* === RIGHT PANEL === */
.notes-v6-backlinks-panel {
    background: color-mix(in srgb, var(--bg-secondary, #0f1420) 95%, transparent) !important;
    border-left: 1px solid color-mix(in srgb, var(--accent, #a371f7) 12%, transparent) !important;
}
.notes-v6-panel-header {
    padding: 12px 16px 0 !important;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.05)) !important;
}
.notes-v6-panel-tab {
    padding: 8px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-muted, #6b7280) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    margin-bottom: -1px !important;
}
.notes-v6-panel-tab.active {
    color: var(--accent, #a371f7) !important;
    border-bottom-color: var(--accent, #a371f7) !important;
}
.notes-v6-panel-content,
#notes-v6-panel-content {
    padding: 16px !important;
    font-size: 13px !important;
    color: var(--text-muted, #9ca3af) !important;
}

/* === LAYOUT OVERALL === */
.notes-v6-layout {
    background: var(--bg-primary, #0a0e1a) !important;
}
.notes-v6-main {
    background: var(--bg-primary, #0d1117) !important;
}

/* === HIDE OLD SIDEBAR ARTIFACTS === */
.notes-v6-sidebar-tabs { display: none !important; }
.notes-v6-sidebar-header { display: none !important; }
.notes-v6-sidebar-footer { display: none !important; }
.notes-v6-sidebar-content { display: none !important; }

/* === HIDE BACKLINKS PANEL === */
.notes-v6-backlinks-panel { display: none !important; }
.notes-v6-resize-handle { display: none !important; }
/* ===== css/notes-layout-v6.css?v=2602240010 ===== */
/**
 * NOTES LAYOUT v6.0 CSS - World Class Design
 * ProductiveApp - Multi-panes resizable layout
 */

/* ========== LAYOUT STRUCTURE ========== */

.notes-v6-layout {
    display: flex;
    height: 100%;
    width: 100%;
    background: var(--bg-primary, #0a0e1a);
    color: var(--text-primary, #e4e7ec);
    overflow: hidden;
    position: relative;
}

.notes-v6-layout.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

/* ========== SIDEBAR ========== */

.notes-v6-sidebar {
    min-width: 200px;
    max-width: 400px;
    background: var(--bg-secondary, #0f1420);
    border-right: 1px solid var(--border-color, rgba(255,255,255,0.08));
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.notes-v6-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
    flex-shrink: 0;
}

.notes-v6-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notes-v6-logo svg {
    color: var(--primary-color, var(--accent));
    flex-shrink: 0;
}

.notes-v6-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.notes-v6-header-actions {
    display: flex;
    gap: 6px;
}

/* Sidebar Tabs */
.notes-v6-sidebar-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 12px 0 12px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
    flex-shrink: 0;
}

.notes-v6-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px 6px 0 0;
    color: var(--text-secondary, #9ca3af);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.notes-v6-tab svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    flex-shrink: 0;
}

.notes-v6-tab:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary, #e4e7ec);
}

.notes-v6-tab.active {
    background: var(--bg-primary, #0a0e1a);
    color: var(--primary-color, var(--accent));
    border-bottom: 2px solid var(--primary-color, var(--accent));
}

.notes-v6-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color, var(--accent));
    box-shadow: 0 0 8px var(--primary-color, var(--accent));
}

/* Sidebar Content */
.notes-v6-sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
}

.notes-v6-sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.notes-v6-sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.notes-v6-sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}

.notes-v6-sidebar-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.15);
}

/* Sidebar Footer */
.notes-v6-sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
    flex-shrink: 0;
}

.notes-v6-btn-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--primary-color, var(--accent)) 0%, var(--accent-light) 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent);
}

.notes-v6-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}

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

.notes-v6-btn-primary svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

/* ========== RESIZE HANDLES ========== */

.notes-v6-resize-handle {
    width: 4px;
    background: transparent;
    cursor: col-resize;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s ease;
    z-index: 10;
}

.notes-v6-resize-handle::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px;
    right: -2px;
}

.notes-v6-resize-handle:hover,
.notes-v6-resize-handle.dragging {
    background: var(--primary-color, var(--accent));
}

.notes-v6-resize-handle.dragging {
    box-shadow: 0 0 12px var(--primary-color, var(--accent));
}

/* ========== MAIN EDITOR AREA ========== */

.notes-v6-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 400px;
    background: var(--bg-primary, #0a0e1a);
    overflow: hidden;
}

/* Command Bar */
.notes-v6-command-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary, #0f1420);
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
    flex-shrink: 0;
}

.notes-v6-btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-v6-btn-icon:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #e4e7ec);
}

.notes-v6-btn-icon svg {
    width: 16px;
    height: 16px;
}

/* Quick Search */
.notes-v6-quick-search {
    flex: 1;
    max-width: 500px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-v6-quick-search:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--primary-color, var(--accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.notes-v6-quick-search svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary, #9ca3af);
}

.notes-v6-search-placeholder {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary, #9ca3af);
}

.notes-v6-quick-search kbd {
    padding: 2px 6px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
    font-family: monospace;
}

/* View Controls */
.notes-v6-view-controls {
    display: flex;
    gap: 4px;
    padding: 0 8px;
    border-left: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-right: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

/* Tabs */
.notes-v6-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg-secondary, #0f1420);
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
    overflow-x: auto;
    flex-shrink: 0;
}

.notes-v6-tabs::-webkit-scrollbar {
    height: 4px;
}

/* Editor Container */
.notes-v6-editor-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
}

.notes-v6-editor-container::-webkit-scrollbar {
    width: 8px;
}

.notes-v6-editor-container::-webkit-scrollbar-track {
    background: transparent;
}

.notes-v6-editor-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}

.notes-v6-editor-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.15);
}

/* ========== BACKLINKS PANEL ========== */

.notes-v6-backlinks-panel {
    min-width: 200px;
    max-width: 500px;
    background: var(--bg-secondary, #0f1420);
    border-left: 1px solid var(--border-color, rgba(255,255,255,0.08));
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.notes-v6-panel-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
    flex-shrink: 0;
}

.notes-v6-panel-tabs {
    display: flex;
    gap: 8px;
}

.notes-v6-panel-tab {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary, #9ca3af);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-v6-panel-tab:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary, #e4e7ec);
}

.notes-v6-panel-tab.active {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--primary-color, var(--accent));
}

.notes-v6-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.notes-v6-panel-content::-webkit-scrollbar {
    width: 6px;
}

.notes-v6-panel-content::-webkit-scrollbar-track {
    background: transparent;
}

.notes-v6-panel-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}

/* ========== PLACEHOLDERS ========== */

.notes-v6-placeholder {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary, #9ca3af);
    font-size: 14px;
    line-height: 1.6;
}

/* ========== SPLIT VIEW ========== */

.notes-v6-layout[data-split="vertical"] .notes-v6-editor-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.notes-v6-layout[data-split="horizontal"] .notes-v6-editor-container {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 1024px) {
    .notes-v6-sidebar {
        max-width: 280px;
    }

    .notes-v6-backlinks-panel {
        max-width: 320px;
    }

    .notes-v6-layout[data-split="vertical"] .notes-v6-editor-container,
    .notes-v6-layout[data-split="horizontal"] .notes-v6-editor-container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
}

@media (max-width: 768px) {
    .notes-v6-sidebar,
    .notes-v6-backlinks-panel {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 100;
    }

    .notes-v6-sidebar {
        left: 0;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3);
    }

    .notes-v6-backlinks-panel {
        right: 0;
        box-shadow: -4px 0 20px rgba(0,0,0,0.3);
    }
}

/* ========== ANIMATIONS ========== */

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.notes-v6-sidebar-content > * {
    animation: slideInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notes-v6-panel-content > * {
    animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== DARK MODE OVERRIDES ========== */

:root[data-theme*="light"] .notes-v6-layout {
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --border-color: rgba(0,0,0,0.08);
}

:root[data-theme*="light"] .notes-v6-sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
}

:root[data-theme*="light"] .notes-v6-btn-primary {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 15%, transparent);
}


/* ===== css/notes-components-v6.css?v=2602240010 ===== */
/**
 * NOTES COMPONENTS v6.0 CSS - All UI components
 * ProductiveApp - World Class Edition
 *
 * Includes:
 * - Tags View
 * - Daily Notes
 * - Backlinks Panel
 * - AI Bridge
 * - Wiki Links
 */

/* ========== TAGS VIEW ========== */

.notes-tags-view {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.notes-tags-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.notes-tags-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e4e7ec);
}

.notes-tags-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-tags-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #e4e7ec);
}

.notes-tags-tree {
    flex: 1;
    overflow-y: auto;
}

.notes-tag-node {
    margin-bottom: 2px;
}

.notes-tag-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-tag-item:hover {
    background: rgba(255,255,255,0.05);
}

.notes-tag-chevron {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
}

.notes-tag-spacer {
    width: 12px;
    display: inline-block;
}

.notes-tag-icon {
    font-size: 14px;
    line-height: 1;
}

.notes-tag-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary, #e4e7ec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notes-tag-count {
    padding: 2px 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
}

.notes-tag-children {
    margin-left: 0;
}

.notes-tags-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.notes-tags-empty svg {
    margin-bottom: 12px;
    opacity: 0.3;
}

.notes-tags-empty p {
    margin: 0 0 4px 0;
    font-size: 14px;
    color: var(--text-primary, #e4e7ec);
}

.notes-tags-hint {
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
}

/* ========== DAILY NOTES VIEW ========== */

.notes-daily-view {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.notes-daily-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.notes-daily-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e4e7ec);
}

.notes-daily-today-btn {
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--primary-color, var(--accent)) 0%, var(--accent-light) 100%);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-daily-today-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.notes-daily-calendar {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.notes-calendar-header {
    text-align: center;
    margin-bottom: 8px;
}

.notes-calendar-month {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #e4e7ec);
}

.notes-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.notes-calendar-day-name {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
    padding: 4px 0;
    text-transform: uppercase;
}

.notes-calendar-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    color: var(--text-primary, #e4e7ec);
}

.notes-calendar-cell:not(.empty):hover {
    background: rgba(255,255,255,0.08);
}

.notes-calendar-cell.today {
    background: var(--primary-color, var(--accent));
    color: white;
    font-weight: 600;
}

.notes-calendar-cell.has-note {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    font-weight: 600;
}

.notes-calendar-dot {
    position: absolute;
    bottom: 2px;
    width: 3px;
    height: 3px;
    background: currentColor;
    border-radius: 50%;
}

.notes-daily-list {
    flex: 1;
    overflow-y: auto;
}

.notes-daily-list h5 {
    margin: 0 0 12px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
    text-transform: uppercase;
}

.notes-daily-item {
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-daily-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--primary-color, var(--accent));
}

.notes-daily-item-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color, var(--accent));
    margin-bottom: 4px;
}

.notes-daily-item-preview {
    font-size: 11px;
    color: var(--text-secondary, #9ca3af);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notes-daily-empty {
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
}

/* ========== BACKLINKS PANEL ========== */

.notes-backlinks-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.notes-backlinks-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    text-align: center;
}

.notes-backlinks-empty svg {
    margin-bottom: 16px;
    opacity: 0.3;
}

.notes-backlinks-empty p {
    margin: 0 0 4px 0;
    font-size: 14px;
    color: var(--text-primary, #e4e7ec);
}

.notes-backlinks-hint {
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
}

.notes-backlinks-section {
    margin-bottom: 20px;
}

.notes-backlinks-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.notes-backlinks-section-title {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
    text-transform: uppercase;
}

.notes-backlinks-count {
    padding: 2px 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
}

.notes-backlinks-section-empty {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
    font-style: italic;
}

.notes-backlinks-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notes-backlink-item {
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-backlink-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--primary-color, var(--accent));
}

.notes-backlink-item.unlinked {
    border-color: rgba(251, 191, 36, 0.3);
}

.notes-backlink-item-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.notes-backlink-item-header svg {
    flex-shrink: 0;
    color: var(--text-secondary, #9ca3af);
}

.notes-backlink-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #e4e7ec);
}

.notes-backlink-preview {
    font-size: 11px;
    color: var(--text-secondary, #9ca3af);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========== AI BRIDGE ========== */

.notes-ai-sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.notes-ai-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.notes-ai-sidebar-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e4e7ec);
}

.notes-ai-refresh-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-ai-refresh-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #e4e7ec);
    transform: rotate(90deg);
}

.notes-ai-clusters-list {
    flex: 1;
    overflow-y: auto;
}

.notes-ai-cluster-item {
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-ai-cluster-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--primary-color, var(--accent));
}

.notes-ai-cluster-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.notes-ai-cluster-icon {
    font-size: 16px;
}

.notes-ai-cluster-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #e4e7ec);
}

.notes-ai-cluster-count {
    padding: 2px 6px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--primary-color, var(--accent));
}

.notes-ai-cluster-keywords {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.notes-ai-cluster-keywords .keyword {
    padding: 2px 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    font-size: 10px;
    color: var(--text-secondary, #9ca3af);
}

.notes-ai-empty,
.notes-ai-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.notes-ai-empty svg,
.notes-ai-panel-empty svg {
    margin-bottom: 12px;
    opacity: 0.3;
}

.notes-ai-empty p,
.notes-ai-panel-empty p {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--text-primary, #e4e7ec);
}

.notes-ai-generate-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--primary-color, var(--accent)) 0%, var(--accent-light) 100%);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-ai-generate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* AI Panel */
.notes-ai-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.notes-ai-section {
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 8px;
}

.notes-ai-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.notes-ai-section-header h5 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #e4e7ec);
}

.notes-ai-section-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-ai-section-btn:hover {
    background: rgba(255,255,255,0.08);
    transform: scale(1.1);
}

.notes-ai-placeholder,
.notes-ai-loading,
.notes-ai-error {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    border-radius: 6px;
}

.notes-ai-placeholder {
    color: var(--text-secondary, #9ca3af);
    font-style: italic;
}

.notes-ai-loading {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--primary-color, var(--accent));
}

.notes-ai-error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.notes-ai-tags-container,
.notes-ai-summary-container,
.notes-ai-similar-container {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary, #e4e7ec);
}

.notes-ai-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.notes-ai-tag-suggestion {
    padding: 4px 10px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid var(--primary-color, var(--accent));
    border-radius: 4px;
    color: var(--primary-color, var(--accent));
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-ai-tag-suggestion:hover {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
    transform: translateY(-1px);
}

.notes-ai-summary-container p {
    margin: 0;
}

.notes-ai-similar-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notes-ai-similar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notes-ai-similar-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--primary-color, var(--accent));
}

.notes-ai-similar-item svg {
    flex-shrink: 0;
    color: var(--text-secondary, #9ca3af);
}

.notes-ai-similar-item span {
    font-size: 12px;
    color: var(--text-primary, #e4e7ec);
}

/* ========== WIKI LINKS ========== */

.wiki-link {
    color: var(--primary-color, var(--accent));
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px dashed var(--primary-color, var(--accent));
    transition: all 0.2s ease;
}

.wiki-link:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-bottom-style: solid;
}

.wiki-link.missing {
    color: #f59e0b;
    border-bottom-color: #f59e0b;
}

.wiki-link.missing:hover {
    background: rgba(245, 158, 11, 0.1);
}

/* ========== SCROLLBARS ========== */

.notes-tags-tree::-webkit-scrollbar,
.notes-daily-list::-webkit-scrollbar,
.notes-ai-clusters-list::-webkit-scrollbar {
    width: 6px;
}

.notes-tags-tree::-webkit-scrollbar-track,
.notes-daily-list::-webkit-scrollbar-track,
.notes-ai-clusters-list::-webkit-scrollbar-track {
    background: transparent;
}

.notes-tags-tree::-webkit-scrollbar-thumb,
.notes-daily-list::-webkit-scrollbar-thumb,
.notes-ai-clusters-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}

.notes-tags-tree::-webkit-scrollbar-thumb:hover,
.notes-daily-list::-webkit-scrollbar-thumb:hover,
.notes-ai-clusters-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.15);
}


/* ===== css/notes-command-palette.css?v=2602240010 ===== */
/**
 * NOTES COMMAND PALETTE CSS - World Class Design
 * ProductiveApp v6.0
 */

/* ========== OVERLAY ========== */

.notes-command-palette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    z-index: 1100;
    animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========== PALETTE CONTAINER ========== */

.notes-command-palette {
    width: 100%;
    max-width: 640px;
    max-height: 70vh;
    background: var(--bg-secondary, #0f1420);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ========== HEADER ========== */

.notes-command-palette-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.notes-command-palette-icon {
    color: var(--primary-color, var(--accent));
    flex-shrink: 0;
}

.notes-command-palette-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary, #e4e7ec);
    font-size: 16px;
    font-weight: 400;
    padding: 0;
}

.notes-command-palette-input::placeholder {
    color: var(--text-secondary, #9ca3af);
}

.notes-command-palette-hint {
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
    font-family: monospace;
}

/* ========== RESULTS ========== */

.notes-command-palette-results {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 50vh;
}

.notes-command-palette-results::-webkit-scrollbar {
    width: 8px;
}

.notes-command-palette-results::-webkit-scrollbar-track {
    background: transparent;
}

.notes-command-palette-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.notes-command-palette-results::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Result Item */
.notes-command-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.notes-command-result:hover {
    background: rgba(255, 255, 255, 0.04);
}

.notes-command-result.selected {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-left-color: var(--primary-color, var(--accent));
}

.notes-command-result-icon {
    font-size: 20px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notes-command-result-content {
    flex: 1;
    min-width: 0;
}

.notes-command-result-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #e4e7ec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.notes-command-result-subtitle {
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notes-command-result-meta {
    display: flex;
    gap: 6px;
    align-items: center;
}

.notes-command-result-meta .badge {
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary, #9ca3af);
    letter-spacing: 0.5px;
}

.notes-command-result-meta .badge.command {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent-light);
}

.notes-command-result-meta .badge.tag {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

/* Type-specific icons */
.notes-command-result.type-note .notes-command-result-icon {
    filter: grayscale(0.3);
}

.notes-command-result.type-command .notes-command-result-icon {
    filter: hue-rotate(120deg);
}

.notes-command-result.type-tag .notes-command-result-icon {
    filter: hue-rotate(240deg);
}

/* ========== EMPTY STATE ========== */

.notes-command-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-secondary, #9ca3af);
}

.notes-command-empty svg {
    margin-bottom: 16px;
    opacity: 0.3;
}

.notes-command-empty p {
    font-size: 14px;
    margin: 0;
}

/* ========== FOOTER ========== */

.notes-command-palette-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.notes-command-palette-shortcuts {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    color: var(--text-secondary, #9ca3af);
}

.notes-command-palette-shortcuts span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.notes-command-palette-shortcuts kbd {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    font-family: monospace;
    color: var(--text-secondary, #9ca3af);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
    .notes-command-palette-overlay {
        padding-top: 10vh;
    }

    .notes-command-palette {
        max-width: 90%;
        max-height: 80vh;
    }

    .notes-command-palette-shortcuts {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ========== LIGHT THEME ========== */

:root[data-theme*="light"] .notes-command-palette-overlay {
    background: rgba(0, 0, 0, 0.3);
}

:root[data-theme*="light"] .notes-command-palette {
    --bg-secondary: #ffffff;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    border-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme*="light"] .notes-command-result:hover {
    background: rgba(0, 0, 0, 0.04);
}

:root[data-theme*="light"] .notes-command-result.selected {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}


/* ===== css/notes-ai-classifier.css?v=2602240010 ===== */
/**
 * Notes AI Classifier CSS
 * ProductiveApp v5.0
 */

/* Modal Overlay */
.ai-classification-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: fadeIn 0.2s ease;
}

/* Modal Container */
.ai-classification-modal {
    background: var(--bg-primary, #1a1a2e);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header */
.ai-classification-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ai-classification-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.ai-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ai-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Body */
.ai-classification-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.ai-classification-section {
    margin-bottom: 20px;
}

.ai-classification-section label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #888);
    margin-bottom: 8px;
}

/* Category Badge */
.category-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subcategory Tag */
.subcategory-tag {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-size: 13px;
    color: var(--text-primary, #fff);
}

/* Keywords */
.keywords-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.keyword-chip {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 12px;
    font-size: 12px;
    color: var(--text-primary, #fff);
    animation: fadeIn 0.3s ease;
}

/* Summary */
.ai-summary {
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #667eea;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary, #fff);
    font-style: italic;
}

/* Confidence Bar */
.confidence-bar-container {
    width: 100%;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.confidence-bar {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 13px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation: expandWidth 0.8s ease;
}

/* Footer */
.ai-classification-footer {
    padding: 16px 24px;
    background: var(--bg-secondary, #16213e);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.ai-classification-footer button {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

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

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Classify All Progress */
.classify-all-progress {
    text-align: center;
    padding: 40px 20px;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

#classify-status {
    font-size: 14px;
    color: var(--text-secondary, #888);
}

/* Classify Stats */
.classify-stat {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary, #888);
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #fff);
}

/* Note Badge (in notes list) */
.note-category-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    color: white;
    margin-left: 8px;
    vertical-align: middle;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes expandWidth {
    from {
        width: 0;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 600px) {
    .ai-classification-modal {
        width: 95%;
        max-width: none;
    }

    .ai-classification-body {
        padding: 16px;
    }

    .ai-classification-header {
        padding: 16px;
    }

    .ai-classification-header h3 {
        font-size: 16px;
    }
}


/* ===== css/modules/notes.css?v=2602241400 ===== */
/* ============================================================================
   NOTES MODULE - Premium Divine Style (TeamTalk inspired)
   ProductiveApp v5.0 - Phase 2
   ============================================================================ */

/* ========== CSS VARIABLES ========== */
:root {
    --notes-gold: #d4a574;
    --notes-gold-light: #e8c9a1;
    --notes-gold-dark: #b8936a;
    --notes-gold-glow: rgba(212, 165, 116, 0.25);
    --notes-glass: rgba(25, 22, 30, 0.6);
    --notes-glass-border: rgba(212, 165, 116, 0.12);
    --notes-divine-shadow: 0 8px 40px rgba(0, 0, 0, 0.4),
                           0 0 80px rgba(212, 165, 116, 0.08);
}

/* ========== LAYOUT ========== */

#view-notes {
    display: none; /* isolated: hidden by default */
    grid-template-columns: 320px 1fr;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(15, 12, 20, 1) 0%,
        rgba(20, 18, 26, 1) 50%,
        rgba(18, 15, 24, 1) 100%);
    position: relative;
}

#view-notes.active {
  display: grid;
}

#view-notes::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(212, 165, 116, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(124, 159, 255, 0.02) 0%, transparent 50%);
    pointer-events: none;
}

.notes-sidebar {
    background: linear-gradient(135deg,
        rgba(20, 18, 24, 0.95) 0%,
        rgba(30, 25, 35, 0.95) 100%);
    border-right: 1px solid var(--notes-glass-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--notes-divine-shadow);
    backdrop-filter: blur(20px);
    position: relative;
    z-index: 10;
}

.notes-sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom,
        transparent,
        var(--notes-gold-glow) 50%,
        transparent);
    opacity: 0.5;
}

.notes-sidebar-tree {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 12px;
}

.notes-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.notes-editor {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ========== SIDEBAR HEADER - Divine Premium ========== */

.sidebar-toolbar {
    padding: 20px 16px;
    border-bottom: 1px solid var(--notes-glass-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(180deg,
        rgba(212, 165, 116, 0.04) 0%,
        transparent 100%);
}

.notes-sidebar-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--notes-gold-light);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: -0.3px;
}

.notes-sidebar-title span {
    background: linear-gradient(135deg, var(--notes-gold-light), var(--notes-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px var(--notes-gold-glow);
}

.sidebar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--notes-glass);
    border: 1px solid var(--notes-glass-border);
    border-radius: 12px;
    color: var(--notes-gold-light);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}

.sidebar-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(212, 165, 116, 0.15) 0%,
        transparent 50%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.sidebar-btn:hover {
    background: rgba(212, 165, 116, 0.12);
    border-color: var(--notes-gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(212, 165, 116, 0.2);
}

.sidebar-btn:hover::before {
    opacity: 1;
}

.sidebar-btn-primary {
    background: linear-gradient(135deg, var(--notes-gold), var(--notes-gold-dark));
    border-color: transparent;
    color: #1a1a1a;
    font-weight: 600;
}

.sidebar-btn-primary::before {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 50%);
}

.sidebar-btn-primary:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 32px var(--notes-gold-glow),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.sidebar-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

/* ========== SIDEBAR SEARCH - Premium Glass ========== */

.sidebar-search {
    padding: 0 16px 16px;
    position: relative;
}

.sidebar-search-icon {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--notes-gold);
    pointer-events: none;
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.sidebar-search-input {
    width: 100%;
    padding: 13px 16px 13px 46px;
    background: var(--notes-glass);
    border: 1px solid var(--notes-glass-border);
    border-radius: 14px;
    color: #fff;
    font-size: 14px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(12px);
    box-sizing: border-box;
}

.sidebar-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.sidebar-search-input:focus {
    outline: none;
    border-color: var(--notes-gold);
    background: rgba(212, 165, 116, 0.06);
    box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.08),
                0 6px 20px rgba(0, 0, 0, 0.15);
}

/* ========== SIDEBAR FOLDERS - Divine Tree ========== */

.sidebar-folders {
    flex: 1;
}

.sidebar-folder-item {
    margin-bottom: 2px;
    user-select: none;
}

.sidebar-folder-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 1px solid transparent;
    background: var(--notes-glass);
}

.sidebar-folder-header::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(135deg,
        rgba(212, 165, 116, 0.1) 0%,
        transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-folder-header:hover {
    background: rgba(212, 165, 116, 0.08);
    border-color: rgba(212, 165, 116, 0.15);
    transform: translateX(4px);
}

.sidebar-folder-header:hover::before {
    opacity: 1;
}

.sidebar-folder-item.drag-over > .sidebar-folder-header {
    background: rgba(212, 165, 116, 0.15);
    border: 1px dashed var(--notes-gold);
    box-shadow: 0 4px 16px rgba(212, 165, 116, 0.2);
}

.sidebar-folder-chevron {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #888);
    transition: transform 0.2s;
}

.sidebar-folder-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
}

.sidebar-folder-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-folder-count {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--notes-gold-light);
    background: rgba(212, 165, 116, 0.12);
    padding: 3px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
    font-weight: 600;
}

.notes-count {
    font-size: 1rem;
    font-weight: 600;
    color: var(--notes-gold);
    background: rgba(212, 165, 116, 0.15);
    padding: 4px 12px;
    border-radius: 12px;
}

.sidebar-folder-menu {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--text-muted, #888);
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
}

.sidebar-folder-header:hover .sidebar-folder-menu {
    opacity: 1;
}

.sidebar-folder-menu:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text, #fff);
}

.sidebar-folder-children {
    padding-left: 16px;
    margin-top: 2px;
}

/* ========== SIDEBAR NOTES - Premium Cards ========== */

.sidebar-note-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 3px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    border: 1px solid transparent;
    background: var(--notes-glass);
    position: relative;
}

.sidebar-note-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--notes-gold), var(--notes-gold-dark));
    border-radius: 12px 0 0 12px;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.sidebar-note-item:hover {
    background: rgba(212, 165, 116, 0.08);
    border-color: rgba(212, 165, 116, 0.15);
    transform: translateX(4px);
}

.sidebar-note-item:hover::before {
    opacity: 0.3;
}

.sidebar-note-item.active {
    background: linear-gradient(135deg,
        rgba(212, 165, 116, 0.15) 0%,
        rgba(212, 165, 116, 0.08) 100%);
    border-color: rgba(212, 165, 116, 0.3);
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateX(6px);
}

.sidebar-note-item.active::before {
    opacity: 1;
}

.sidebar-note-item.dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

.sidebar-note-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--text-muted, #888);
}

.sidebar-note-title {
    flex: 1;
    font-size: 13px;
    color: var(--text, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== SIDEBAR SECTIONS ========== */

.sidebar-section {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted, #888);
}

/* ========== SIDEBAR EMPTY STATE ========== */

.sidebar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.sidebar-empty p {
    color: var(--text-muted, #888);
    font-size: 13px;
    margin-bottom: 16px;
}

/* ========== CONTEXT MENU ========== */

.sidebar-context-menu {
    position: fixed;
    background: var(--surface, #1e1e2e);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    padding: 6px;
    min-width: 200px;
    z-index: 1100;
    backdrop-filter: blur(12px);
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text, #fff);
    cursor: pointer;
    transition: background 0.2s;
}

.context-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.context-menu-danger {
    color: #ef4444;
}

.context-menu-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.context-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 6px 0;
}

/* ========== CLUSTER BADGES ========== */

.note-cluster-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid;
    margin-left: 6px;
}

.note-connections-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted, #888);
    margin-left: 6px;
}

.note-connections-indicator svg {
    width: 14px;
    height: 14px;
}

/* ========== CLUSTER CONTROL PANEL ========== */

.cluster-control-panel {
    padding: 16px;
    background: var(--surface, rgba(255, 255, 255, 0.03));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cluster-info {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
}

.cluster-count,
.cluster-connections {
    color: var(--text, #fff);
    font-weight: 500;
}

.cluster-cache {
    font-size: 12px;
    color: var(--text-muted, #888);
}

.cluster-cache.expired {
    color: #f59e0b;
}

.cluster-actions {
    display: flex;
    gap: 8px;
}

.cluster-btn {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text, #fff);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.cluster-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.cluster-btn-primary {
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    border-color: transparent;
}

.cluster-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ========== EDITOR WRAPPER - Divine Premium ========== */

.notes-editor-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg,
        rgba(20, 18, 24, 0.6) 0%,
        rgba(25, 22, 30, 0.6) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    margin: 16px;
    overflow: hidden;
    box-shadow: var(--notes-divine-shadow);
    border: 1px solid var(--notes-glass-border);
}

.notes-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    background: linear-gradient(180deg,
        rgba(212, 165, 116, 0.06) 0%,
        transparent 100%);
    border-bottom: 1px solid var(--notes-glass-border);
}

.note-title-wrapper {
    flex: 1;
    position: relative;
}

.note-title-input {
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--notes-gold-light);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-family: var(--font-heading, 'Inter', sans-serif);
    transition: all 0.3s ease;
}

.note-title-input::placeholder {
    background: linear-gradient(135deg, var(--notes-gold-light), var(--notes-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.4;
}

.note-title-input:focus {
    outline: none;
    text-shadow: 0 0 40px var(--notes-gold-glow);
}

.note-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
}

.note-action-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--notes-glass);
    border: 1px solid var(--notes-glass-border);
    color: var(--notes-gold-light);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}

.note-action-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(212, 165, 116, 0.2) 0%,
        transparent 50%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.note-action-btn:hover {
    background: rgba(212, 165, 116, 0.12);
    border-color: var(--notes-gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(212, 165, 116, 0.2);
}

.note-action-btn:hover::before {
    opacity: 1;
}

.note-delete-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.note-delete-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.notes-editor-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    min-height: 0;
}

.notes-editor-content::-webkit-scrollbar {
    width: 6px;
}

.notes-editor-content::-webkit-scrollbar-track {
    background: transparent;
}

.notes-editor-content::-webkit-scrollbar-thumb {
    background: rgba(212, 165, 116, 0.2);
    border-radius: 3px;
}

.notes-editor-content::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 165, 116, 0.35);
}

.note-textarea {
    width: 100%;
    min-height: 100%;
    height: auto;
    padding: 28px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.8;
    font-family: 'Inter', -apple-system, sans-serif;
    resize: none;
    overflow: visible;
    box-sizing: border-box;
}

.note-textarea::placeholder {
    color: rgba(255, 255, 255, 0.25);
    font-style: italic;
}

.note-textarea:focus {
    outline: none;
}

.notes-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    background: var(--notes-glass);
    border-top: 1px solid var(--notes-glass-border);
    backdrop-filter: blur(12px);
}

.save-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

.save-indicator.saved {
    color: var(--notes-gold);
}

.save-indicator.saving {
    color: #60a5fa;
}

.save-indicator.unsaved {
    color: #fbbf24;
}

.word-count {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
    #view-notes {
        grid-template-columns: 1fr;
    }

    .notes-sidebar {
        display: none;
    }

    .notes-sidebar.mobile-visible {
        display: flex;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 1000;
    }

    .notes-editor-wrapper {
        margin: 12px;
        border-radius: 16px;
    }

    .note-title-input {
        font-size: 1.5rem;
    }

    .note-textarea {
        padding: 20px;
        font-size: 15px;
    }
}

/* ========== SCROLLBAR STYLING ========== */

.notes-sidebar-tree::-webkit-scrollbar {
    width: 6px;
}

.notes-sidebar-tree::-webkit-scrollbar-track {
    background: transparent;
}

.notes-sidebar-tree::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.notes-sidebar-tree::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ========== ANIMATIONS ========== */

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

.sidebar-folder-item,
.sidebar-note-item {
    animation: slideIn 0.2s ease-out;
}

/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   NOTES v6.0 — Split view, zen mode, toolbar extras, wiki links
   ============================================================ */

/* ===== MARKDOWN CONTENT AREA — revert to overflow:hidden (panels handle their own scroll) ===== */
.notes-editor-content {
    flex: 1;
    overflow: hidden !important;
    padding: 0;
    min-height: 0;
}

/* ===== TWO-PANEL SPLIT CONTAINER ===== */
.notes-md-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden;
}

.notes-md-container.notes-md-split .notes-md-editor-panel,
.notes-md-container.notes-md-split .notes-md-preview-panel {
    flex: 1;
    min-width: 0;
}

.notes-md-container.notes-md-split .notes-md-editor-panel {
    border-right: 1px solid rgba(212, 165, 116, 0.15);
}

.notes-md-container.notes-md-edit .notes-md-editor-panel,
.notes-md-container.notes-md-preview .notes-md-preview-panel {
    flex: 1;
    min-width: 0;
}

/* ===== EDITOR PANEL ===== */
.notes-md-editor-panel {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative;
}

.notes-md-editor-panel::-webkit-scrollbar { width: 6px; }
.notes-md-editor-panel::-webkit-scrollbar-track { background: transparent; }
.notes-md-editor-panel::-webkit-scrollbar-thumb { background: rgba(212, 165, 116, 0.15); border-radius: 3px; }
.notes-md-editor-panel::-webkit-scrollbar-thumb:hover { background: rgba(212, 165, 116, 0.3); }

/* Textarea grows with content — panel scrolls */
.note-textarea {
    min-height: 100% !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box;
}

/* ===== PREVIEW PANEL ===== */
.notes-md-preview-panel {
    overflow-y: auto;
    padding: 28px 32px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.015);
}

.notes-md-preview-panel::-webkit-scrollbar { width: 6px; }
.notes-md-preview-panel::-webkit-scrollbar-track { background: transparent; }
.notes-md-preview-panel::-webkit-scrollbar-thumb { background: rgba(212, 165, 116, 0.2); border-radius: 3px; }
.notes-md-preview-panel::-webkit-scrollbar-thumb:hover { background: rgba(212, 165, 116, 0.35); }

/* ===== MARKDOWN PREVIEW TYPOGRAPHY ===== */
.notes-md-preview h1 {
    font-size: 1.85em; font-weight: 700;
    color: var(--notes-gold-light, #e8c9a1);
    border-bottom: 1px solid rgba(212, 165, 116, 0.2);
    padding-bottom: 0.3em; margin: 1em 0 0.5em;
}
.notes-md-preview h2 {
    font-size: 1.45em; font-weight: 600;
    color: var(--notes-gold-light, #e8c9a1);
    margin: 0.9em 0 0.4em;
}
.notes-md-preview h3 {
    font-size: 1.2em; font-weight: 600;
    color: rgba(232, 201, 161, 0.85);
    margin: 0.7em 0 0.3em;
}
.notes-md-preview h4, .notes-md-preview h5, .notes-md-preview h6 {
    font-weight: 600; color: rgba(232, 201, 161, 0.75); margin: 0.6em 0 0.3em;
}
.notes-md-preview p { margin: 0.7em 0; }
.notes-md-preview strong { color: var(--notes-gold-light, #e8c9a1); font-weight: 600; }
.notes-md-preview em { color: rgba(255,255,255,0.85); font-style: italic; }
.notes-md-preview a { color: var(--accent-light, #7c9fff); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.notes-md-preview a:hover { border-bottom-color: var(--accent-light, #7c9fff); }
.notes-md-preview code {
    padding: 2px 7px; background: rgba(212, 165, 116, 0.1);
    border: 1px solid rgba(212, 165, 116, 0.2); border-radius: 4px;
    font-family: 'Monaco', 'Menlo', monospace; font-size: 0.87em; color: #f59e0b;
}
.notes-md-preview pre {
    padding: 16px; background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.07); border-radius: 10px;
    overflow-x: auto; margin: 1em 0;
}
.notes-md-preview pre code { background: none; border: none; padding: 0; color: #d4d4d8; font-size: 0.93em; }
.notes-md-preview blockquote {
    margin: 1em 0; padding: 12px 20px;
    border-left: 3px solid rgba(212, 165, 116, 0.5);
    background: rgba(212, 165, 116, 0.05);
    border-radius: 0 8px 8px 0; color: rgba(255,255,255,0.7); font-style: italic;
}
.notes-md-preview ul, .notes-md-preview ol { margin: 0.7em 0; padding-left: 1.8em; }
.notes-md-preview li { margin: 0.3em 0; }
.notes-md-preview li input[type="checkbox"] { margin-right: 7px; accent-color: var(--accent, #7c9fff); }
.notes-md-preview hr { border: none; height: 1px; background: rgba(212, 165, 116, 0.2); margin: 1.5em 0; }
.notes-md-preview table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.93em; }
.notes-md-preview th { background: rgba(212, 165, 116, 0.1); padding: 10px 12px; border: 1px solid rgba(212, 165, 116, 0.15); font-weight: 600; text-align: left; }
.notes-md-preview td { padding: 8px 12px; border: 1px solid rgba(255,255,255,0.06); }
.notes-md-preview tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.notes-md-preview img { max-width: 100%; height: auto; border-radius: 8px; margin: 1em 0; }

.preview-empty {
    color: rgba(255,255,255,0.2); font-style: italic;
    text-align: center; margin-top: 80px; font-size: 14px;
}

/* ===== FOOTER RIGHT ===== */
.note-footer-right {
    display: flex; align-items: center; gap: 12px;
}
.note-reading-time {
    font-size: 11px; color: rgba(212, 165, 116, 0.45); font-style: italic;
}

/* ===== ZEN MODE ===== */
.notes-editor-wrapper.notes-zen-mode {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    z-index: 9999 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* ===== TOOLBAR — SPACER + RIGHT SECTION ===== */
.toolbar-spacer {
    flex: 1;
    min-width: 8px;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Mode buttons active state */
.toolbar-mode-btn.active {
    background: rgba(212, 165, 116, 0.18) !important;
    color: var(--notes-gold, #d4a574) !important;
    border: 1px solid rgba(212, 165, 116, 0.35) !important;
}

/* Format buttons active state */
.toolbar-btn[data-format].active {
    background: rgba(212, 165, 116, 0.15);
    color: var(--notes-gold, #d4a574);
}

.toolbar-zen-btn.active {
    background: rgba(212, 165, 116, 0.18) !important;
    color: var(--notes-gold, #d4a574) !important;
}

/* ===== WIKI AUTOCOMPLETE ===== */
.wiki-autocomplete {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 28px;
    width: 290px;
    background: linear-gradient(135deg, rgba(20, 16, 28, 0.98) 0%, rgba(25, 20, 35, 0.98) 100%);
    border: 1px solid rgba(212, 165, 116, 0.25);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(212, 165, 116, 0.05);
    z-index: 200;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
    backdrop-filter: blur(16px);
}

.wiki-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.12s ease;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.wiki-ac-item:last-child { border-bottom: none; }
.wiki-ac-item:hover, .wiki-ac-item.selected { background: rgba(212, 165, 116, 0.12); }
.wiki-ac-icon { font-size: 14px; flex-shrink: 0; }
.wiki-ac-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wiki-ac-title { font-size: 13px; font-weight: 500; color: var(--notes-gold-light, #e8c9a1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiki-ac-preview { font-size: 11px; color: rgba(255,255,255,0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== TEMPLATES POPUP ===== */
.note-templates-popup {
    position: fixed;
    width: 220px;
    background: linear-gradient(135deg, rgba(20, 16, 28, 0.98) 0%, rgba(25, 20, 35, 0.98) 100%);
    border: 1px solid rgba(212, 165, 116, 0.2);
    border-radius: 12px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.65);
    z-index: 1000;
    overflow: hidden;
    padding: 6px;
    backdrop-filter: blur(20px);
}
.template-popup-header {
    padding: 8px 12px 6px;
    font-size: 10px; font-weight: 700;
    color: rgba(212, 165, 116, 0.6);
    text-transform: uppercase; letter-spacing: 0.8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 4px;
}
.template-popup-btn {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 12px;
    background: transparent; border: none; border-radius: 8px;
    color: rgba(255,255,255,0.82); font-size: 13px;
    cursor: pointer; text-align: left;
    transition: background 0.12s, color 0.12s;
}
.template-popup-btn:hover {
    background: rgba(212, 165, 116, 0.1);
    color: var(--notes-gold-light, #e8c9a1);
}

/* ===== EXPORT POPUP ===== */
.note-export-popup {
    position: fixed;
    width: 220px;
    background: linear-gradient(135deg, rgba(20, 16, 28, 0.98) 0%, rgba(25, 20, 35, 0.98) 100%);
    border: 1px solid rgba(212, 165, 116, 0.2);
    border-radius: 12px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.65);
    z-index: 1000;
    overflow: hidden;
    padding: 6px;
    backdrop-filter: blur(20px);
}
.export-popup-header {
    padding: 8px 12px 6px;
    font-size: 10px; font-weight: 700;
    color: rgba(212, 165, 116, 0.6);
    text-transform: uppercase; letter-spacing: 0.8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 4px;
}
.export-popup-btn {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 12px;
    background: transparent; border: none; border-radius: 8px;
    color: rgba(255,255,255,0.82); font-size: 13px;
    cursor: pointer; text-align: left;
    transition: background 0.12s, color 0.12s;
}
.export-popup-btn:hover {
    background: rgba(212, 165, 116, 0.1);
    color: var(--notes-gold-light, #e8c9a1);
}
.export-popup-close {
    position: absolute; top: 8px; right: 10px;
    background: none; border: none;
    color: rgba(255,255,255,0.35); cursor: pointer;
    font-size: 15px; line-height: 1; padding: 4px;
    transition: color 0.15s;
}
.export-popup-close:hover { color: rgba(255,255,255,0.7); }

/* ===== WIKI LINKS in preview ===== */
.wiki-link { cursor: pointer; border-radius: 3px; padding: 1px 3px; transition: all 0.15s; font-weight: 500; }
.wiki-link.exists { color: var(--accent-light, #7c9fff); background: rgba(124, 159, 255, 0.08); border-bottom: 1px solid rgba(124, 159, 255, 0.3); }
.wiki-link.exists:hover { background: rgba(124, 159, 255, 0.15); text-decoration: none; }
.wiki-link.missing { color: rgba(255,160,100,0.8); border-bottom: 1px dashed rgba(255,160,100,0.4); }
.wiki-link.missing:hover { background: rgba(255,160,100,0.08); }


/* ===== css/modules/notes-search.css?v=2602240010 ===== */
/* ============================================================================
   NOTES SEARCH - Premium Search Modal (Ctrl+K)
   ProductiveApp v5.0 - Phase 2 (TeamTalk Style)
   ============================================================================ */

/* ========== MODAL OVERLAY - Divine Glass ========== */

.search-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(10, 8, 15, 0.9) 100%);
    backdrop-filter: blur(20px);
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========== MODAL CARD - Premium Glass ========== */

.search-modal {
    width: 90%;
    max-width: 680px;
    max-height: 75vh;
    background: linear-gradient(135deg,
        rgba(20, 18, 24, 0.98) 0%,
        rgba(30, 25, 35, 0.98) 100%);
    border: 1px solid rgba(212, 165, 116, 0.15);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6),
                0 0 100px rgba(212, 165, 116, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideDown 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(30px);
}

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

/* ========== HEADER ========== */

.search-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.search-modal-input {
    flex: 1;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text, #fff);
    font-size: 18px;
    font-weight: 500;
}

.search-modal-input:focus {
    outline: none;
}

.search-modal-input::placeholder {
    color: var(--text-muted, #888);
}

.search-modal-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text, #fff);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

/* ========== BODY ========== */

.search-modal-body {
    flex: 1;
    overflow-y: auto;
    max-height: 50vh;
}

/* ========== SEARCH HISTORY ========== */

.search-history {
    padding: 16px 0;
}

.search-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted, #888);
}

.search-history-header button {
    background: none;
    border: none;
    color: var(--accent-light);
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.search-history-header button:hover {
    opacity: 0.8;
}

.search-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    cursor: pointer;
    transition: background 0.2s;
}

.search-history-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.search-history-item svg {
    flex-shrink: 0;
    color: var(--text-muted, #888);
}

.search-history-item span {
    font-size: 14px;
    color: var(--text, #fff);
}

/* ========== RESULTS ========== */

.search-results-header {
    padding: 16px 24px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted, #888);
}

.search-results-list {
    padding: 0 0 16px;
}

.search-result-item {
    padding: 16px 24px;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--accent-light);
}

.search-result-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text, #fff);
    margin-bottom: 8px;
}

.search-result-snippets {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.search-result-snippet {
    font-size: 13px;
    color: var(--text-muted, #aaa);
    line-height: 1.5;
}

.search-result-meta {
    font-size: 12px;
    color: var(--text-muted, #888);
}

.search-highlight {
    background: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 500;
}

/* ========== NO RESULTS ========== */

.search-no-results {
    padding: 40px 24px;
    text-align: center;
}

.search-no-results p {
    font-size: 14px;
    color: var(--text-muted, #888);
}

/* ========== SCROLLBAR ========== */

.search-modal-body::-webkit-scrollbar {
    width: 6px;
}

.search-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.search-modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.search-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
    .search-modal-overlay {
        padding-top: 5vh;
    }

    .search-modal {
        width: 95%;
        max-height: 80vh;
    }

    .search-modal-header {
        padding: 16px 20px;
    }

    .search-modal-input {
        font-size: 16px;
    }

    .search-result-item {
        padding: 14px 20px;
    }
}

/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
    .search-modal-overlay,
    .search-modal {
        animation: none !important;
    }

    * {
        transition-duration: 0.01ms !important;
    }
}


/* ===== css/modules/notes-markdown.css?v=2602241400 ===== */
/* ============================================================================
   NOTES MARKDOWN - Premium Split View Editor
   ProductiveApp v5.0 - Phase 2 (TeamTalk Style)
   ============================================================================ */

/* ========== CONTAINER - Divine Premium ========== */

.markdown-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(15, 12, 20, 0.95) 0%,
        rgba(20, 18, 26, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4),
                0 0 80px rgba(212, 165, 116, 0.08);
    border: 1px solid rgba(212, 165, 116, 0.12);
}

.markdown-container.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    border-radius: 0;
    margin: 0;
}

/* ========== TOOLBAR - Premium Glass ========== */

.markdown-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(180deg,
        rgba(212, 165, 116, 0.06) 0%,
        transparent 100%);
    border-bottom: 1px solid rgba(212, 165, 116, 0.12);
    flex-shrink: 0;
    backdrop-filter: blur(12px);
}

.markdown-toolbar-left,
.markdown-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.md-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(25, 22, 30, 0.6);
    border: 1px solid rgba(212, 165, 116, 0.12);
    border-radius: 10px;
    color: rgba(212, 165, 116, 0.9);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.md-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(212, 165, 116, 0.2) 0%,
        transparent 50%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.md-btn:hover {
    background: rgba(212, 165, 116, 0.12);
    border-color: #d4a574;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 165, 116, 0.2);
}

.md-btn:hover::before {
    opacity: 1;
}

.md-btn.active {
    background: linear-gradient(135deg,
        rgba(212, 165, 116, 0.2) 0%,
        rgba(212, 165, 116, 0.1) 100%);
    border-color: rgba(212, 165, 116, 0.4);
    box-shadow: 0 4px 16px rgba(212, 165, 116, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.md-btn svg {
    width: 16px;
    height: 16px;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
}

.md-word-count {
    font-size: 12px;
    color: var(--text-muted, #888);
    padding: 0 8px;
}

/* ========== PANELS ========== */

.markdown-panels {
    flex: 1;
    display: grid;
    overflow: hidden;
}

.markdown-container.split .markdown-panels {
    grid-template-columns: 1fr 1fr;
}

.markdown-container.edit .markdown-panels {
    grid-template-columns: 1fr;
}

.markdown-container.preview .markdown-panels {
    grid-template-columns: 1fr;
}

.markdown-editor-panel,
.markdown-preview-panel {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.markdown-editor-panel {
    background: var(--bg, #0f0f1a);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.markdown-preview-panel {
    background: var(--surface, rgba(255, 255, 255, 0.02));
}

/* ========== TEXTAREA ========== */

.markdown-textarea {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 24px;
    background: transparent;
    border: none;
    color: var(--text, #fff);
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.7;
    resize: none;
    overflow-y: auto;
}

.markdown-textarea:focus {
    outline: none;
}

.markdown-textarea::placeholder {
    color: var(--text-muted, #888);
    font-style: italic;
}

/* ========== PREVIEW ========== */

.markdown-preview {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 15px;
    line-height: 1.7;
    color: var(--text, #fff);
}

.preview-empty {
    color: var(--text-muted, #888);
    font-style: italic;
    text-align: center;
    margin-top: 80px;
}

/* Markdown content styles */
.markdown-preview h1 {
    font-size: 2em;
    font-weight: 700;
    margin: 1em 0 0.5em;
    color: var(--text, #fff);
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
    padding-bottom: 0.3em;
}

.markdown-preview h2 {
    font-size: 1.6em;
    font-weight: 600;
    margin: 0.8em 0 0.4em;
    color: var(--text, #fff);
}

.markdown-preview h3 {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0.6em 0 0.3em;
    color: var(--text, #fff);
}

.markdown-preview p {
    margin: 0.8em 0;
}

.markdown-preview a {
    color: var(--accent-light);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.markdown-preview a:hover {
    border-bottom-color: var(--accent-light);
}

.markdown-preview code {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
    color: #f59e0b;
}

.markdown-preview pre {
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow-x: auto;
    margin: 1em 0;
}

.markdown-preview pre code {
    padding: 0;
    background: none;
    border: none;
    color: #d4d4d8;
}

.markdown-preview blockquote {
    margin: 1em 0;
    padding: 12px 20px;
    border-left: 4px solid color-mix(in srgb, var(--accent) 50%, transparent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--text-muted, #aaa);
}

.markdown-preview ul,
.markdown-preview ol {
    margin: 0.8em 0;
    padding-left: 2em;
}

.markdown-preview li {
    margin: 0.4em 0;
}

.markdown-preview table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
    font-size: 0.95em;
}

.markdown-preview table th {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    font-weight: 600;
}

.markdown-preview table td {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.markdown-preview hr {
    border: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 2em 0;
}

.markdown-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1em 0;
}

/* Task lists */
.markdown-preview input[type="checkbox"] {
    margin-right: 8px;
}

/* ========== EMPTY VIEW ========== */

.markdown-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px;
}

.markdown-empty svg {
    color: var(--text-muted, #888);
    margin-bottom: 24px;
    opacity: 0.5;
}

.markdown-empty h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text, #fff);
    margin-bottom: 8px;
}

.markdown-empty p {
    font-size: 14px;
    color: var(--text-muted, #888);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
    .markdown-container.split .markdown-panels {
        grid-template-columns: 1fr;
    }

    .markdown-editor-panel {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .markdown-toolbar-left {
        flex-wrap: wrap;
    }

    .md-word-count {
        display: none;
    }
}

/* ========== SCROLLBAR ========== */

.markdown-textarea::-webkit-scrollbar,
.markdown-preview::-webkit-scrollbar {
    width: 8px;
}

.markdown-textarea::-webkit-scrollbar-track,
.markdown-preview::-webkit-scrollbar-track {
    background: transparent;
}

.markdown-textarea::-webkit-scrollbar-thumb,
.markdown-preview::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.markdown-textarea::-webkit-scrollbar-thumb:hover,
.markdown-preview::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
    }
}


/* ===== css/tasks-ai.css?v=2602240010 ===== */
/**
 * Tasks AI Styles
 * ProductiveApp v4.3
 */

/* AI Actions Menu */
.tasks-ai-menu {
    position: fixed;
    width: 320px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    z-index: 1100;
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.tasks-ai-menu.active {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.tasks-ai-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #e07840, #f59e0b);
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.tasks-ai-menu-header svg {
    flex-shrink: 0;
}

.tasks-ai-menu-items {
    padding: 8px;
}

.tasks-ai-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    margin-bottom: 4px;
}

.tasks-ai-menu-item:hover {
    background: var(--bg-tertiary);
    border-color: #e07840;
}

.tasks-ai-menu-item svg {
    flex-shrink: 0;
    color: #e07840;
    margin-top: 2px;
}

.tasks-ai-menu-item strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.tasks-ai-menu-item small {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.3;
}

/* Loading Modal */
.tasks-ai-loading-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1150;
    opacity: 0;
    transition: opacity 0.2s;
}

.tasks-ai-loading-modal.active {
    opacity: 1;
}

.tasks-ai-loading-content {
    text-align: center;
    padding: 32px;
    background: var(--bg-secondary);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.tasks-ai-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(224, 120, 64, 0.2);
    border-top-color: #e07840;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.tasks-ai-loading-content p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Result Modal */
.tasks-ai-result-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1150;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 20px;
}

.tasks-ai-result-modal.active {
    opacity: 1;
}

.tasks-ai-result-modal.active .tasks-ai-result-content {
    transform: scale(1) translateY(0);
}

.tasks-ai-result-content {
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    background: var(--bg-secondary);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tasks-ai-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-primary);
}

.tasks-ai-result-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-icon {
    font-size: 24px;
}

.tasks-ai-result-header button {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.tasks-ai-result-header button:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.tasks-ai-result-body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.tasks-ai-result-body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* Subtasks List */
.ai-subtasks-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-subtasks-list li {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-left: 3px solid #e07840;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
}

.ai-subtasks-list li::before {
    content: '✓';
    display: inline-block;
    margin-right: 8px;
    color: #10b981;
    font-weight: bold;
}

/* Comparison */
.ai-comparison {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ai-comparison-item {
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.ai-comparison-item label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.ai-comparison-item p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
}

.ai-suggestion {
    font-weight: 500;
    color: #e07840 !important;
}

/* Priority Result */
.ai-priority-result {
    text-align: center;
}

.ai-priority-badge {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ai-priority-badge.urgent {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.ai-priority-badge.normal {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.ai-priority-badge.basse {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.ai-priority-result p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* Footer */
.tasks-ai-result-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
}

/* Responsive */
@media (max-width: 768px) {
    .tasks-ai-menu {
        max-width: calc(100% - 40px);
        left: 20px !important;
        right: 20px !important;
    }

    .tasks-ai-result-content {
        max-width: 100%;
        max-height: 90vh;
    }

    .ai-comparison {
        flex-direction: column;
    }
}


/* ===== css/settings-health.css?v=2602240010 ===== */
/* =============================================
   SETTINGS HEALTH - ProductiveApp v5.0
   Styles pour l'onglet Santé Système
   ============================================= */

.health-loading,
.health-error-msg {
    text-align: center;
    padding: 40px 20px;
    font-size: 14px;
    color: var(--text-muted);
}

.health-error-msg {
    color: var(--danger);
}

/* Status Row */
.health-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.health-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
}

.health-status-healthy {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.health-status-degraded {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.health-status-unhealthy,
.health-status-error {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.3);
}

.health-timestamp {
    font-size: 12px;
    color: var(--text-muted);
}

/* Metrics Grid */
.health-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.health-metric-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.2s ease;
}

.health-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.health-metric-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.health-metric-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 500;
}

.health-metric-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.health-metric-detail {
    font-size: 11px;
    color: var(--text-muted);
}

/* Section Titles */
.health-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Alerts */
.health-alerts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.health-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid;
}

.health-alert-critical {
    background: rgba(248, 113, 113, 0.1);
    border-left-color: #f87171;
}

.health-alert-warning {
    background: rgba(251, 191, 36, 0.1);
    border-left-color: #fbbf24;
}

.health-alert-info {
    background: rgba(96, 165, 250, 0.1);
    border-left-color: #60a5fa;
}

.health-alert-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.health-alert-content {
    flex: 1;
}

.health-alert-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.health-alert-desc {
    font-size: 12px;
    color: var(--text-muted);
}

/* Errors */
.health-no-errors {
    text-align: center;
    padding: 32px 20px;
    font-size: 14px;
    color: var(--text-muted);
    background: rgba(74, 222, 128, 0.05);
    border-radius: 8px;
    margin-bottom: 24px;
}

.health-errors {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
    max-height: 400px;
    overflow-y: auto;
}

.health-error {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.health-error:hover {
    background: var(--bg-tertiary);
}

.health-error-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.health-error-content {
    flex: 1;
    min-width: 0;
}

.health-error-message {
    font-size: 13px;
    color: var(--text);
    margin-bottom: 4px;
    word-break: break-word;
}

.health-error-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Actions */
.health-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 768px) {
    .health-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .health-status-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .health-metrics {
        grid-template-columns: 1fr;
    }

    .health-actions {
        flex-direction: column;
    }

    .health-actions .settings-btn {
        width: 100%;
    }
}


/* ===== css/settings-notifications.css?v=2602240010 ===== */
/**
 * Settings Notifications - Ultra Premium Design v2.0
 * Inspired by: Stripe Dashboard, Notion, Linear
 */

.settings-notif-ultra {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* ========================================
   HERO SECTION
======================================== */
.notif-hero {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 48px;
  margin-bottom: 40px;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb, 99, 102, 241), 0.05),
    rgba(var(--accent-rgb, 99, 102, 241), 0.02)
  );
  border-radius: 24px;
  border: 1px solid rgba(var(--accent-rgb, 99, 102, 241), 0.1);
  position: relative;
  overflow: hidden;
}

.notif-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--accent-rgb, 99, 102, 241), 0.3),
    transparent
  );
}

.hero-visual {
  position: relative;
}

.bell-animation {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb, 99, 102, 241), 0.15),
    rgba(var(--accent-rgb, 99, 102, 241), 0.05)
  );
  border-radius: 24px;
  position: relative;
  box-shadow: 0 8px 32px rgba(var(--accent-rgb, 99, 102, 241), 0.2);
  animation: bellFloat 4s ease-in-out infinite;
}

@keyframes bellFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(-5deg); }
  50% { transform: translateY(0px) rotate(0deg); }
  75% { transform: translateY(-8px) rotate(5deg); }
}

.bell-animation svg {
  color: var(--accent-color);
  filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb, 99, 102, 241), 0.3));
}

.active-pulse {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

.hero-content {
  flex: 1;
}

.hero-title {
  margin: 0 0 8px;
  font-size: 2.25rem;
  font-weight: 800;
  background: linear-gradient(135deg,
    var(--text-primary),
    var(--accent-color)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.03em;
}

.hero-subtitle {
  margin: 0 0 16px;
  font-size: 1.125rem;
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.6;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.status-badge.active {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.inactive {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

/* ========================================
   CARDS GRID
======================================== */
.notif-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.notif-card-premium {
  position: relative;
  background: rgba(var(--bg-card-rgb, 255, 255, 255), 0.03);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.notif-card-premium.main-card {
  grid-column: 1 / -1;
}

.card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background: radial-gradient(circle,
    rgba(var(--accent-rgb, 99, 102, 241), 0.08) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.notif-card-premium:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15),
              0 0 0 1px rgba(var(--accent-rgb, 99, 102, 241), 0.1);
}

.notif-card-premium:hover .card-glow {
  opacity: 1;
}

/* Card Headers */
.card-header-flex {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

.card-header-simple {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.icon-bg {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.gradient-1 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-2 {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.gradient-3 {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.icon-bg svg {
  color: #fff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.card-content-flex {
  flex: 1;
}

.card-content-flex h3,
.card-header-simple h3 {
  margin: 0 0 4px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.card-content-flex p,
.card-desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Toggle Ultra Premium */
.toggle-ultra {
  width: 56px;
  height: 32px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle-ultra input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #fff, #f0f0f0);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.toggle-ultra input:checked + .toggle-track {
  background: linear-gradient(135deg, var(--accent-color), rgba(var(--accent-rgb, 99, 102, 241), 0.8));
  border-color: transparent;
}

.toggle-ultra input:checked + .toggle-track .toggle-thumb {
  transform: translateX(24px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb, 99, 102, 241), 0.4);
}

/* CTA Button */
.card-cta {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-activate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--accent-color), rgba(var(--accent-rgb, 99, 102, 241), 0.8));
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb, 99, 102, 241), 0.3);
}

.btn-activate:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb, 99, 102, 241), 0.4);
}

/* Reminder Chips */
.reminder-showcase {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.reminder-chip-ultra {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb, 99, 102, 241), 0.12),
    rgba(var(--accent-rgb, 99, 102, 241), 0.06)
  );
  border: 1px solid rgba(var(--accent-rgb, 99, 102, 241), 0.25);
  border-radius: 12px;
  transition: all 0.3s ease;
  animation: chipAppear 0.3s ease;
}

@keyframes chipAppear {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes chipRemove {
  to { opacity: 0; transform: scale(0.8); }
}

.reminder-chip-ultra:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb, 99, 102, 241), 0.25);
}

.chip-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-color);
}

.chip-close {
  background: none;
  border: none;
  color: var(--accent-color);
  cursor: pointer;
  padding: 2px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chip-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.btn-add-custom {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px dashed rgba(var(--accent-rgb, 99, 102, 241), 0.3);
  border-radius: 12px;
  color: var(--accent-color);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-add-custom:hover {
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.08);
  border-color: var(--accent-color);
  transform: translateY(-1px);
}

/* Time Selector */
.time-selector {
  display: flex;
  align-items: center;
  gap: 16px;
}

.time-block {
  flex: 1;
}

.time-block label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.time-input-ultra {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 1.125rem;
  font-weight: 600;
  transition: all 0.3s ease;
  font-family: 'Courier New', monospace;
}

.time-input-ultra:focus {
  outline: none;
  border-color: var(--accent-color);
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.08);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 99, 102, 241), 0.1);
}

.time-arrow {
  font-size: 1.5rem;
  color: var(--text-secondary);
  margin-top: 28px;
}

/* Bottom Actions */
.notif-actions-ultra {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.btn-test,
.btn-save-ultra {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 14px;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-test {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

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

.btn-save-ultra {
  background: linear-gradient(135deg, var(--accent-color), rgba(var(--accent-rgb, 99, 102, 241), 0.8));
  color: #fff;
  box-shadow: 0 8px 24px rgba(var(--accent-rgb, 99, 102, 241), 0.3);
}

.btn-save-ultra:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(var(--accent-rgb, 99, 102, 241), 0.4);
}

/* Responsive */
@media (max-width: 768px) {
  .settings-notif-ultra {
    padding: 24px 16px;
  }

  .notif-hero {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .notif-grid {
    grid-template-columns: 1fr;
  }

  .notif-actions-ultra {
    flex-direction: column;
  }

  .time-selector {
    flex-direction: column;
    gap: 16px;
  }

  .time-arrow {
    transform: rotate(90deg);
    margin: 0;
  }
}


/* ===== css/auth.css?v=2602251200 ===== */
/* =============================================
   AUTH - Login Styles with Avatars
   ProductiveApp v4.0
============================================= */

/* === LOGIN SCREEN === */
.login-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary, #12121a);
    background-image: radial-gradient(ellipse at 50% 0%, var(--accent-glow, color-mix(in srgb, var(--accent) 10%, transparent)) 0%, transparent 50%);
    overflow: hidden;
}

.login-screen.hidden {
    display: none;
}

/* Email login toggle button */
.email-login-toggle {
    margin-top: 30px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.email-login-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: var(--accent);
}

.email-login-toggle.hidden {
    display: none;
}

/* Remove all ugly outlines */
.login-screen button,
.login-screen img,
.login-screen *:focus {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* === LOGIN CONTAINER === */
.login-container {
    text-align: center;
    z-index: 10;
    padding: 40px;
    max-width: 450px;
    width: 100%;
}

.login-logo {
    width: 100px;
    height: 100px;
    border-radius: 24px;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(212, 175, 55, 0.3);
    animation: logoFloat 3s ease-in-out infinite;
}

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

.login-container h1 {
    color: #d4af37;
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0 0 8px;
    text-shadow: 0 2px 20px rgba(212, 175, 55, 0.3);
}

.login-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    margin: 0 0 40px;
}

/* === USER CAROUSEL === */
.user-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.carousel-arrow {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-arrow:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: #d4af37;
    transform: scale(1.1);
}

/* === USER SELECT GRID === */
.user-select-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 280px;
}

.user-select-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: transparent;
    border: none;
    outline: none;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 200px;
    -webkit-tap-highlight-color: transparent;
}

.user-select-btn:hover,
.user-select-btn:focus,
.user-select-btn:active {
    background: transparent;
    border: none;
    outline: none;
    transform: scale(1.05);
}

.user-select-btn:focus-visible {
    outline: none;
}

/* === AVATAR CONTAINER === */
.avatar-orbit-container {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar-img-login {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    outline: none;
    -webkit-user-drag: none;
    user-select: none;
}

.user-select-btn:hover .user-avatar-img-login {
    border-color: #d4af37;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
    transform: scale(1.02);
}

.user-name-select {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
}

/* === FIRE BREATH PARTICLES === */
.fire-breath-container {
    position: absolute;
    inset: -20px;
    pointer-events: none;
    overflow: visible;
}

.breath-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffaa00 0%, #ff6600 50%, transparent 100%);
    animation: breathParticle 2s ease-out infinite;
    opacity: 0;
}

@keyframes breathParticle {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    20% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: scale(2) rotate(360deg) translateY(-50px);
    }
}

/* === PASSWORD FORM === */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 320px;
    margin: 0 auto;
    padding: 30px;
    background: var(--bg-card, rgba(255, 255, 255, 0.03));
    border-radius: 20px;
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
    animation: formAppear 0.4s ease-out;
}

@keyframes formAppear {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.login-form.hidden {
    display: none;
}

/* Hide carousel when showing password */
.user-carousel.hidden {
    display: none;
}

.login-subtitle.hidden {
    display: none;
}

#login-username {
    color: #fff;
    font-size: 1.1rem;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.login-selected-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #d4af37;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
}

#login-password {
    padding: 14px 20px;
    font-size: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    outline: none;
    transition: all 0.3s ease;
}

#login-password::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

#login-password:focus {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

#login-btn {
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, #d4af37 0%, #b8962e 100%);
    color: #000;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4);
}

#back-btn {
    padding: 12px 24px;
    font-size: 14px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#back-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

/* === ERROR TEXT === */
.error-text {
    color: #ff6b6b;
    font-size: 14px;
    min-height: 20px;
    margin-top: 16px;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* === CAROUSEL ANIMATIONS === */
@keyframes cardReveal {
    0% {
        opacity: 0;
        transform: scale(0.8) rotateY(-20deg);
    }
    100% {
        opacity: 1;
        transform: scale(1.1) rotateY(0);
    }
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(100px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1.1);
    }
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1.1);
    }
}

/* === FIRE BUBBLES BACKGROUND === */
.fire-bubble {
    position: fixed;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.6) 0%, rgba(255, 140, 0, 0.3) 50%, transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    animation: fireBubbleRise linear infinite;
    z-index: 1;
}

@keyframes fireBubbleRise {
    0% {
        opacity: 0;
        transform: translateY(100vh) scale(0);
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: translateY(-100vh) scale(1);
    }
}

/* === RESPONSIVE === */
@media (max-width: 600px) {
    .login-container {
        padding: 20px;
    }

    .login-logo {
        width: 80px;
        height: 80px;
    }

    .login-container h1 {
        font-size: 1.8rem;
    }

    .avatar-orbit-container {
        width: 120px;
        height: 120px;
    }

    .user-avatar-img-login {
        width: 110px;
        height: 110px;
    }

    .carousel-arrow {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

/* =============================================
   LOGIN CARD v2 — fixes UI (2026-02-25)
   ============================================= */

/* Supprimer l'icône email native du navigateur (Edge/Chrome) */
#login-email::-webkit-contacts-auto-fill-button,
#login-email::-webkit-credentials-auto-fill-button,
.login-form-new input[type="email"]::-webkit-contacts-auto-fill-button,
.login-form-new input[type="email"]::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Masquer icône auto-fill Edge */
input[type="email"]::-ms-reveal,
input[type="email"]::-ms-clear {
    display: none;
}

/* Spinner caché par défaut — pas de rectangle fantôme */
.btn-spinner {
    display: none !important;
}

.btn-spinner:not(.hidden) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    animation: spin 0.8s linear infinite;
}

/* Bouton SE CONNECTER — style complet, aucun héritage */
.login-btn-new {
    display: block !important;
    width: 100% !important;
    padding: 16px 32px !important;
    background: linear-gradient(135deg, #d4af37 0%, #c49b20 100%) !important;
    color: #1a1200 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    border: none !important;
    outline: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: filter 0.2s ease !important;
    position: static !important;
    overflow: visible !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.login-btn-new:hover {
    filter: brightness(1.1) !important;
}

.login-btn-new:active {
    filter: brightness(0.95) !important;
}

.login-btn-new:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.login-btn-new::before,
.login-btn-new::after {
    display: none !important;
    content: none !important;
}
/* ===== css/gamification.css?v=2602240010 ===== */
/* =============================================
   GAMIFICATION - ProductiveApp v4.0
   Dark mode with purple accent (var(--accent-light))
============================================= */

:root {
    --gam-bg: #12121a;
    --gam-card: #1e1e28;
    --gam-card-hover: #252532;
    --gam-accent: var(--accent-light);
    --gam-accent-glow: color-mix(in srgb, var(--accent) 30%, transparent);
    --gam-accent-muted: color-mix(in srgb, var(--accent) 20%, transparent);
    --gam-text: #f5f5f5;
    --gam-text-muted: #71717a;
    --gam-border: color-mix(in srgb, var(--accent) 20%, transparent);
    --gam-success: #22c55e;
    --gam-gold: #fbbf24;
    --gam-silver: #94a3b8;
    --gam-bronze: #d97706;
}

/* === GAMIFICATION VIEW === */
.gamification-view {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.gamification-header {
    margin-bottom: 32px;
}

.gamification-header h1 {
    font-size: 1.8rem;
    color: var(--gam-text);
    display: flex;
    align-items: center;
    gap: 12px;
}

.gamification-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

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

/* === PROFILE CARD === */
.gam-profile-card {
    background: var(--gam-card);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--gam-border);
    display: flex;
    align-items: center;
    gap: 20px;
}

.gam-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--gam-accent);
    box-shadow: 0 0 20px var(--gam-accent-glow);
    object-fit: cover;
}

.gam-profile-info {
    flex: 1;
}

.gam-profile-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--gam-text);
    margin-bottom: 4px;
}

.gam-profile-level {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.gam-level-badge {
    background: linear-gradient(135deg, var(--gam-accent) 0%, var(--accent-light) 100%);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.gam-xp-total {
    color: var(--gam-text-muted);
    font-size: 0.85rem;
}

/* XP Progress Bar */
.gam-xp-bar-container {
    width: 100%;
}

.gam-xp-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--gam-text-muted);
    margin-bottom: 6px;
}

.gam-xp-bar {
    height: 8px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 4px;
    overflow: hidden;
}

.gam-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gam-accent) 0%, var(--accent-light) 100%);
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.gam-xp-bar-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: xpShine 2s ease-in-out infinite;
}

@keyframes xpShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* === ACHIEVEMENTS GRID === */
.gam-achievements {
    background: var(--gam-card);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--gam-border);
}

.gam-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gam-text);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gam-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.gam-achievement {
    background: var(--gam-bg);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.gam-achievement:hover {
    transform: translateY(-2px);
    border-color: var(--gam-border);
}

.gam-achievement.unlocked {
    border-color: var(--gam-accent);
    box-shadow: 0 4px 20px var(--gam-accent-glow);
}

.gam-achievement.locked {
    opacity: 0.5;
    filter: grayscale(1);
}

.gam-achievement-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.gam-achievement-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gam-text);
    margin-bottom: 4px;
}

.gam-achievement-desc {
    font-size: 0.7rem;
    color: var(--gam-text-muted);
    line-height: 1.3;
}

.gam-achievement-date {
    font-size: 0.65rem;
    color: var(--gam-accent);
    margin-top: 8px;
}

/* === STREAK CALENDAR === */
.gam-streak {
    background: var(--gam-card);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--gam-border);
}

.gam-streak-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.gam-streak-count {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gam-accent);
}

.gam-streak-count span {
    font-size: 0.85rem;
    color: var(--gam-text-muted);
    font-weight: 400;
}

.gam-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.gam-calendar-day {
    aspect-ratio: 1;
    border-radius: 6px;
    background: var(--gam-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--gam-text-muted);
    transition: all 0.2s ease;
}

.gam-calendar-day.active {
    background: var(--gam-accent);
    color: #fff;
    font-weight: 600;
}

.gam-calendar-day.today {
    border: 2px solid var(--gam-accent);
    box-shadow: 0 0 10px var(--gam-accent-glow);
}

.gam-calendar-day.future {
    opacity: 0.3;
}

/* === LEADERBOARD === */
.gam-leaderboard {
    background: var(--gam-card);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--gam-border);
}

.gam-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gam-leaderboard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--gam-bg);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.gam-leaderboard-item:hover {
    background: var(--gam-card-hover);
}

.gam-leaderboard-item.current-user {
    border: 1px solid var(--gam-accent);
    background: var(--gam-accent-muted);
}

.gam-rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.gam-rank.gold { background: var(--gam-gold); color: #000; }
.gam-rank.silver { background: var(--gam-silver); color: #000; }
.gam-rank.bronze { background: var(--gam-bronze); color: #fff; }
.gam-rank.default { background: var(--gam-bg); color: var(--gam-text-muted); }

.gam-lb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.gam-lb-info {
    flex: 1;
}

.gam-lb-name {
    font-weight: 600;
    color: var(--gam-text);
    font-size: 0.9rem;
}

.gam-lb-level {
    font-size: 0.75rem;
    color: var(--gam-text-muted);
}

.gam-lb-xp {
    font-weight: 600;
    color: var(--gam-accent);
    font-size: 0.9rem;
}

/* === XP GAIN ANIMATION === */
.gam-xp-gain {
    position: fixed;
    pointer-events: none;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gam-accent);
    text-shadow: 0 0 10px var(--gam-accent-glow);
    animation: xpGainFloat 1.5s ease-out forwards;
    z-index: 9999;
}

@keyframes xpGainFloat {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-60px) scale(1.2); }
}

/* === LOADING STATE === */
.gam-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--gam-text-muted);
}

.gam-loading::after {
    content: '';
    width: 24px;
    height: 24px;
    border: 2px solid var(--gam-accent-muted);
    border-top-color: var(--gam-accent);
    border-radius: 50%;
    margin-left: 12px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* ===== css/gamification-premium.css?v=2602240010 ===== */
/**
 * GAMIFICATION PREMIUM — Expérience jeu vidéo immersive
 * v2.0 — 2026-02-23
 * Couleurs : violet #6c47ff · or #ffd700 · fond dark #0d0d1a
 */

/* ─── VARIABLES ──────────────────────────────────────────── */
#view-gamification {
    --gv: #6c47ff;
    --gv2: #9d6eff;
    --gold: #ffd700;
    --gold2: #ffb800;
    --fire: #ff6b35;
    --ok: #00e5a0;
    --bg: #0d0d1a;
    --bg2: #111128;
    --card: rgba(255,255,255,0.04);
    --border: rgba(108,71,255,0.2);
    --text: #e8e8ff;
    --muted: #8888aa;
    padding: 0 !important;
    overflow-y: auto;
    height: calc(100vh - 60px);
    background: var(--bg);
    position: relative;
}

/* ─── STARFIELD ──────────────────────────────────────────── */
.gv-stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.gv-star {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    animation: gv-twinkle var(--d, 3s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    opacity: 0;
}

@keyframes gv-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: var(--op, 0.7); transform: scale(1); }
}

/* ─── LAYOUT ─────────────────────────────────────────────── */
.gv-wrap {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 32px 80px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ─── HERO ───────────────────────────────────────────────── */
.gv-hero {
    background: linear-gradient(135deg, rgba(108,71,255,0.15) 0%, rgba(13,13,26,0.8) 60%);
    border: 1px solid rgba(108,71,255,0.3);
    border-radius: 24px;
    padding: 40px 48px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.gv-hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(108,71,255,0.25) 0%, transparent 70%);
    pointer-events: none;
}

/* Avatar avec level ring SVG */
.gv-avatar-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.gv-avatar-ring {
    position: absolute;
    inset: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
}

.gv-avatar-ring-bg {
    fill: none;
    stroke: rgba(108,71,255,0.2);
    stroke-width: 4;
}

.gv-avatar-ring-fill {
    fill: none;
    stroke: url(#gv-ring-grad);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4,0,0.2,1);
    transform: rotate(-90deg);
    transform-origin: center;
}

.gv-avatar-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c47ff, #9d6eff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 40px rgba(108,71,255,0.5);
    position: relative;
    z-index: 1;
    letter-spacing: -1px;
}

.gv-avatar-level-badge {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: #000;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 99px;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 0 2px 12px rgba(255,215,0,0.5);
}

/* Hero center: level + xp */
.gv-hero-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gv-level-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.gv-level-num {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent-light), #6c47ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.gv-level-label {
    font-size: 0.9rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.gv-rank-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(255,215,0,0.4);
    letter-spacing: 1px;
}

.gv-xp-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gv-xp-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--muted);
}

.gv-xp-label span:last-child {
    color: var(--text);
    font-weight: 600;
}

.gv-xp-bar-wrap {
    background: rgba(255,255,255,0.07);
    border-radius: 99px;
    height: 12px;
    overflow: hidden;
    position: relative;
}

.gv-xp-bar {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #6c47ff, var(--accent-light), #6c47ff);
    background-size: 200% 100%;
    animation: gv-shimmer 2s infinite linear;
    transition: width 1.5s cubic-bezier(0.4,0,0.2,1);
    position: relative;
}

.gv-xp-bar::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: gv-sweep 2.5s infinite;
}

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

@keyframes gv-sweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* Hero right: quick stats */
.gv-hero-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

.gv-quick-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 10px 16px;
    min-width: 130px;
}

.gv-quick-stat-icon {
    font-size: 1.4rem;
}

.gv-quick-stat-val {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.gv-quick-stat-lbl {
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gv-quick-stat--fire .gv-quick-stat-val { color: var(--fire); }
.gv-quick-stat--gold .gv-quick-stat-val { color: var(--gold); }
.gv-quick-stat--ok .gv-quick-stat-val { color: var(--ok); }

/* ─── TABS ───────────────────────────────────────────────── */
.gv-tabs {
    display: flex;
    gap: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 6px;
}

.gv-tab {
    flex: 1;
    padding: 12px 20px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.gv-tab:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text);
}

.gv-tab.active {
    background: linear-gradient(135deg, rgba(108,71,255,0.3), rgba(157,110,255,0.2));
    border: 1px solid rgba(108,71,255,0.4);
    color: #fff;
}

.gv-tab-icon { font-size: 1.1rem; }

/* ─── PANELS ─────────────────────────────────────────────── */
.gv-panel { display: none; }
.gv-panel.active { display: block; }

/* ─── BADGES PANEL ───────────────────────────────────────── */
.gv-badges-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.gv-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.gv-section-count {
    font-size: 0.8rem;
    color: var(--muted);
    background: rgba(255,255,255,0.06);
    padding: 3px 10px;
    border-radius: 99px;
}

/* Hexagonal grid */
.gv-hex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 0;
}

.gv-hex-item {
    width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}

.gv-hex {
    width: 72px;
    height: 72px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    position: relative;
    transition: transform 0.3s, filter 0.3s;
}

.gv-hex-item:hover .gv-hex {
    transform: scale(1.12) translateY(-3px);
}

.gv-hex--unlocked {
    background: linear-gradient(135deg, #ffd700, #ffb800, #ff8c00);
    box-shadow: 0 0 20px rgba(255,215,0,0.4), 0 4px 16px rgba(0,0,0,0.4);
    animation: gv-hex-pulse 3s ease-in-out infinite;
}

@keyframes gv-hex-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255,215,0,0.4), 0 4px 16px rgba(0,0,0,0.4); }
    50% { box-shadow: 0 0 35px rgba(255,215,0,0.65), 0 4px 20px rgba(0,0,0,0.5); }
}

.gv-hex--legendary {
    background: linear-gradient(135deg, #ffd700, #ff6b35, #ff1493);
    box-shadow: 0 0 25px rgba(255,100,50,0.5);
    animation: gv-hex-legendary 4s ease-in-out infinite;
}

@keyframes gv-hex-legendary {
    0%, 100% { box-shadow: 0 0 20px rgba(255,100,50,0.5); }
    33% { box-shadow: 0 0 35px rgba(255,215,0,0.7); }
    66% { box-shadow: 0 0 35px rgba(255,20,147,0.6); }
}

.gv-hex--locked {
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    filter: grayscale(100%);
    opacity: 0.4;
}

.gv-hex--locked .gv-hex-emoji {
    filter: blur(3px);
    opacity: 0.5;
}

.gv-hex-lock {
    position: absolute;
    font-size: 0.9rem;
    opacity: 0.8;
}

.gv-hex-name {
    font-size: 0.68rem;
    color: var(--muted);
    text-align: center;
    font-weight: 600;
    max-width: 90px;
    line-height: 1.3;
}

.gv-hex-item--unlocked .gv-hex-name {
    color: var(--gold2);
}

/* Newly unlocked animation */
@keyframes gv-badge-unlock {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    60% { transform: scale(1.3) rotate(10deg); }
    80% { transform: scale(0.9) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.gv-hex-item--new .gv-hex {
    animation: gv-badge-unlock 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Next badges section */
.gv-next-badges {
    margin-top: 28px;
}

.gv-next-title {
    font-size: 0.85rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gv-next-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.08);
}

.gv-next-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gv-next-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 14px 18px;
    transition: border-color 0.2s;
}

.gv-next-card:hover {
    border-color: rgba(108,71,255,0.25);
}

.gv-next-icon {
    font-size: 2rem;
    opacity: 0.5;
    filter: grayscale(80%);
}

.gv-next-info { flex: 1; }

.gv-next-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 2px;
}

.gv-next-desc {
    font-size: 0.78rem;
    color: var(--muted);
}

.gv-next-reward {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.gv-next-xp {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gv2);
}

.gv-next-coin {
    font-size: 0.78rem;
    color: var(--gold2);
}

/* ─── LEADERBOARD ────────────────────────────────────────── */
.gv-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Podium top 3 */
.gv-podium {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.gv-podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 12px;
    border-radius: 18px;
    border: 1px solid transparent;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.gv-podium-item::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.08;
}

.gv-podium-item--1 {
    background: rgba(255,215,0,0.06);
    border-color: rgba(255,215,0,0.3);
    order: 2;
    padding-top: 32px;
}

.gv-podium-item--1::before { background: linear-gradient(180deg, #ffd700, transparent); }

.gv-podium-item--2 {
    background: rgba(192,192,192,0.06);
    border-color: rgba(192,192,192,0.2);
    order: 1;
    margin-top: 20px;
}

.gv-podium-item--2::before { background: linear-gradient(180deg, #c0c0c0, transparent); }

.gv-podium-item--3 {
    background: rgba(205,127,50,0.06);
    border-color: rgba(205,127,50,0.2);
    order: 3;
    margin-top: 40px;
}

.gv-podium-item--3::before { background: linear-gradient(180deg, #cd7f32, transparent); }

.gv-podium-crown {
    font-size: 1.8rem;
    position: absolute;
    top: -2px;
}

.gv-podium-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c47ff, #9d6eff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
}

.gv-podium-item--1 .gv-podium-avatar {
    width: 64px; height: 64px; font-size: 1.5rem;
    box-shadow: 0 0 20px rgba(255,215,0,0.4);
}

.gv-podium-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}

.gv-podium-xp {
    font-size: 0.75rem;
    color: var(--muted);
}

.gv-podium-item--1 .gv-podium-xp { color: var(--gold2); font-weight: 700; }

/* Leaderboard rows */
.gv-lb-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    transition: all 0.2s;
}

.gv-lb-row:hover {
    border-color: rgba(108,71,255,0.2);
    background: rgba(108,71,255,0.05);
}

.gv-lb-row--me {
    border-color: rgba(108,71,255,0.4) !important;
    background: rgba(108,71,255,0.08) !important;
}

.gv-lb-rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--muted);
    flex-shrink: 0;
}

.gv-lb-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c47ff, #9d6eff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.gv-lb-info { flex: 1; }

.gv-lb-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}

.gv-lb-level {
    font-size: 0.72rem;
    color: var(--muted);
}

.gv-lb-xp {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gv2);
}

.gv-lb-flame {
    font-size: 1.2rem;
    animation: gv-flame 0.6s ease-in-out infinite alternate;
}

@keyframes gv-flame {
    from { transform: scale(1) rotate(-3deg); }
    to { transform: scale(1.15) rotate(3deg); }
}

.gv-lb-empty {
    text-align: center;
    padding: 48px;
    color: var(--muted);
}

.gv-lb-empty-icon { font-size: 3rem; margin-bottom: 12px; }

/* ─── STREAK CALENDAR ────────────────────────────────────── */
.gv-streak-hero {
    background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(255,50,50,0.05));
    border: 1px solid rgba(255,107,53,0.25);
    border-radius: 20px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 24px;
}

.gv-streak-fire {
    font-size: 5rem;
    animation: gv-fire-bounce 1s ease-in-out infinite;
    line-height: 1;
}

@keyframes gv-fire-bounce {
    0%, 100% { transform: scale(1) rotate(-3deg); }
    50% { transform: scale(1.1) rotate(3deg); }
}

.gv-streak-info { flex: 1; }

.gv-streak-num {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--fire);
    line-height: 1;
    text-shadow: 0 0 30px rgba(255,107,53,0.4);
}

.gv-streak-label {
    font-size: 1rem;
    color: var(--muted);
    margin-top: 4px;
}

.gv-streak-best {
    text-align: right;
}

.gv-streak-best-val {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--gold);
}

.gv-streak-best-lbl {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Calendar 30 days */
.gv-cal-title {
    font-size: 0.82rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 14px;
}

.gv-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.gv-cal-day-header {
    text-align: center;
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 600;
    padding: 4px 0;
}

.gv-cal-day {
    aspect-ratio: 1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s;
    position: relative;
}

.gv-cal-day--active {
    background: linear-gradient(135deg, rgba(255,107,53,0.25), rgba(255,50,50,0.1));
    border-color: rgba(255,107,53,0.4);
    color: var(--fire);
    font-size: 0.85rem;
}

.gv-cal-day--today {
    border-color: var(--gv);
    box-shadow: 0 0 10px rgba(108,71,255,0.3);
    color: var(--text);
}

.gv-cal-day--empty {
    background: transparent;
    border-color: transparent;
}

/* ─── XP HISTORY ─────────────────────────────────────────── */
.gv-xp-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gv-xp-entry {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
}

.gv-xp-entry-amount {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ok);
    white-space: nowrap;
    min-width: 60px;
}

.gv-xp-entry-reason {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text);
}

.gv-xp-entry-date {
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
}

/* ─── LEVEL UP MODAL ─────────────────────────────────────── */
.gv-levelup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: gv-fadeIn 0.3s ease;
}

.gv-levelup-box {
    text-align: center;
    padding: 48px 56px;
    background: linear-gradient(135deg, rgba(108,71,255,0.3), rgba(13,13,26,0.9));
    border: 2px solid rgba(108,71,255,0.5);
    border-radius: 28px;
    backdrop-filter: blur(24px);
    animation: gv-levelup 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 80px rgba(108,71,255,0.4);
}

@keyframes gv-levelup {
    from { transform: scale(0.5) rotate(-10deg); opacity: 0; }
    to { transform: scale(1) rotate(0deg); opacity: 1; }
}

.gv-levelup-emoji { font-size: 5rem; animation: gv-spin 1s ease; }

@keyframes gv-spin {
    from { transform: rotate(-360deg) scale(0); }
    to { transform: rotate(0deg) scale(1); }
}

.gv-levelup-title {
    font-size: 2rem;
    font-weight: 900;
    color: var(--gold);
    margin: 16px 0 8px;
    text-shadow: 0 0 30px rgba(255,215,0,0.5);
}

.gv-levelup-sub {
    font-size: 1.1rem;
    color: var(--muted);
    margin-bottom: 28px;
}

.gv-levelup-close {
    background: linear-gradient(135deg, #6c47ff, #9d6eff);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s;
}

.gv-levelup-close:hover { transform: scale(1.05); }

@keyframes gv-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ─── EMPTY STATES ───────────────────────────────────────── */
.gv-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--muted);
}

.gv-empty-icon { font-size: 3rem; margin-bottom: 12px; }
.gv-empty-msg { font-size: 0.95rem; }

/* ─── LOADING SKELETON ───────────────────────────────────── */
.gv-skel {
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 100%);
    background-size: 200%;
    animation: gv-skel 1.5s infinite;
    border-radius: 12px;
}

@keyframes gv-skel {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .gv-wrap { padding: 16px 16px 60px; gap: 16px; }
    .gv-hero { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
    .gv-hero-stats { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
    .gv-level-num { font-size: 3rem; }
    .gv-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .gv-tab { min-width: 100px; font-size: 0.78rem; }
    .gv-podium { grid-template-columns: 1fr; }
    .gv-podium-item { order: unset !important; margin-top: 0 !important; }
    .gv-hex-grid { justify-content: center; }
}


/* ===== css/gamification-rpg.css?v=2602240010 ===== */
/* =====================================================
   GAMIFICATION RPG — Style Jeu Vidéo v201
   ProductiveApp : Legends
   ===================================================== */

/* ─── VARIABLES ──────────────────────────────────── */
:root {
  --gam-gold:     #f59e0b;
  --gam-gold2:    #fbbf24;
  --gam-purple:   var(--accent-light);
  --gam-purple2:  var(--accent-light);
  --gam-blue:     #3b82f6;
  --gam-teal:     #14b8a6;
  --gam-red:      #ef4444;
  --gam-green:    #10b981;
  --gam-dark:     #0f0f1a;
  --gam-dark2:    #1a1a2e;
  --gam-panel:    #16213e;
  --gam-border:   color-mix(in srgb, var(--accent) 30%, transparent);
  --gam-text:     #e2e8f0;
  --gam-muted:    #94a3b8;
  --gam-glow:     0 0 20px color-mix(in srgb, var(--accent) 40%, transparent);
  --gam-glow-gold: 0 0 20px rgba(245,158,11,0.5);
  --gam-radius:   12px;
}

/* ─── SIDEBAR XP MINI BAR ────────────────────────── */
.sidebar-xp-mini {
  margin: 8px 12px 4px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid var(--gam-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.sidebar-xp-mini:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: var(--gam-purple);
}
.sidebar-xp-mini-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.sidebar-xp-level-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gam-gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sidebar-xp-level-badge .lv-num {
  background: linear-gradient(135deg, var(--gam-gold), var(--gam-purple));
  color: #fff;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
}
.sidebar-xp-pct {
  font-size: 10px;
  color: var(--gam-muted);
}
.sidebar-xp-bar-track {
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.sidebar-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gam-purple), var(--gam-gold));
  border-radius: 3px;
  transition: width 1.2s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.sidebar-xp-name {
  font-size: 9px;
  color: var(--gam-purple2);
  margin-top: 3px;
  text-align: right;
  font-style: italic;
}
.sidebar-collapsed .sidebar-xp-mini {
  display: none;
}

/* ─── XP GAIN POPUP ──────────────────────────────── */
#xp-popup-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}
.xp-popup {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(26,26,46,0.98), rgba(15,15,26,0.98));
  border: 1px solid var(--gam-gold);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 220px;
  max-width: 300px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), var(--gam-glow-gold);
  animation: xpPopupIn 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
  pointer-events: all;
  position: relative;
  overflow: hidden;
}
.xp-popup::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(245,158,11,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.xp-popup-icon {
  font-size: 24px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(245,158,11,0.8));
}
.xp-popup-content {
  flex: 1;
}
.xp-popup-amount {
  font-size: 20px;
  font-weight: 900;
  color: var(--gam-gold);
  line-height: 1;
  text-shadow: 0 0 10px rgba(245,158,11,0.6);
}
.xp-popup-label {
  font-size: 12px;
  color: var(--gam-text);
  margin-top: 2px;
}
.xp-popup-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.xp-popup.hiding {
  animation: xpPopupOut 0.3s ease-in forwards;
}
@keyframes xpPopupIn {
  from { opacity: 0; transform: translateX(100px) scale(0.8); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes xpPopupOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(60px) scale(0.9); }
}
.xp-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gam-gold);
  animation: particleFly var(--dur, 0.8s) ease-out forwards;
  left: var(--x, 50%);
  top: var(--y, 50%);
}
@keyframes particleFly {
  to { transform: translate(var(--tx, 0px), var(--ty, -40px)) scale(0); opacity: 0; }
}

/* ─── LEVEL UP OVERLAY ───────────────────────────── */
#levelup-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: luFadeIn 0.4s ease forwards;
  backdrop-filter: blur(8px);
}
#levelup-overlay.hiding {
  animation: luFadeOut 0.5s ease forwards;
}
@keyframes luFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes luFadeOut { from { opacity: 1; } to { opacity: 0; } }
.levelup-box {
  text-align: center;
  position: relative;
  animation: luBoxIn 0.6s cubic-bezier(0.16,1,0.3,1) 0.1s both;
}
@keyframes luBoxIn {
  from { transform: scale(0.5) translateY(60px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.levelup-burst {
  font-size: 80px;
  animation: luBurst 0.8s cubic-bezier(0.36,0.07,0.19,0.97) both;
  filter: drop-shadow(0 0 30px rgba(245,158,11,1));
  line-height: 1;
}
@keyframes luBurst {
  0%   { transform: scale(0) rotate(-10deg); }
  60%  { transform: scale(1.3) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.levelup-title {
  font-size: 56px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gam-gold), var(--gam-purple2), var(--gam-gold2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin: 16px 0 8px;
  text-shadow: none;
  filter: drop-shadow(0 0 20px rgba(245,158,11,0.5));
  animation: luTitle 1s ease 0.3s both;
}
@keyframes luTitle {
  from { transform: scaleX(0.3); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
.levelup-level {
  font-size: 96px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 40px rgba(245,158,11,0.8), 0 0 80px color-mix(in srgb, var(--accent) 50%, transparent);
  animation: luLevel 0.8s cubic-bezier(0.16,1,0.3,1) 0.4s both;
}
@keyframes luLevel {
  from { transform: scale(3); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.levelup-name {
  font-size: 28px;
  color: var(--gam-purple2);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 8px 0 20px;
  animation: luName 0.6s ease 0.6s both;
}
@keyframes luName {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.levelup-close {
  background: linear-gradient(135deg, var(--gam-purple), var(--gam-blue));
  color: #fff;
  border: none;
  padding: 12px 36px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 1px;
  animation: luClose 0.4s ease 0.8s both;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 50%, transparent);
  transition: transform 0.2s, box-shadow 0.2s;
}
.levelup-close:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 70%, transparent);
}
@keyframes luClose {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.levelup-particles-wrap {
  position: absolute;
  inset: -100px;
  pointer-events: none;
  overflow: hidden;
}
.lu-particle {
  position: absolute;
  border-radius: 50%;
  animation: luParticle var(--d, 2s) ease-out var(--delay, 0s) both;
  left: var(--x, 50%);
  bottom: -10px;
}
@keyframes luParticle {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(calc(var(--rise, -200px))) scale(0); opacity: 0; }
}

/* ─── BADGE UNLOCK POPUP ─────────────────────────── */
.badge-unlock-popup {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), rgba(15,15,26,0.98));
  border: 1px solid var(--gam-purple);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 240px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), var(--gam-glow);
  animation: xpPopupIn 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
  pointer-events: all;
}
.badge-unlock-icon-wrap {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--gam-purple), var(--gam-blue));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 0 15px color-mix(in srgb, var(--accent) 60%, transparent);
}
.badge-unlock-text-new {
  font-size: 9px;
  font-weight: 700;
  color: var(--gam-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.badge-unlock-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--gam-text);
}
.badge-unlock-desc {
  font-size: 11px;
  color: var(--gam-muted);
}

/* ─── PAGE GAMIFICATION ──────────────────────────── */
#view-gamification {
  background: var(--gam-dark);
  min-height: 100%;
  overflow-y: auto;
}
.gam-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* HERO */
.gam-hero {
  background: linear-gradient(135deg, var(--gam-dark2) 0%, color-mix(in srgb, var(--accent) 15%, transparent) 100%);
  border: 1px solid var(--gam-border);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.gam-hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 250px; height: 250px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%);
  pointer-events: none;
}
.gam-avatar-container {
  position: relative;
  flex-shrink: 0;
}
.gam-avatar-ring-svg {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}
.gam-avatar-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 4;
}
.gam-avatar-ring-fill {
  fill: none;
  stroke: url(#gamRingGrad);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.16,1,0.3,1);
}
.gam-avatar-circle {
  position: absolute;
  inset: 12px;
  background: linear-gradient(135deg, var(--gam-purple), var(--gam-blue));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.gam-level-badge {
  position: absolute;
  bottom: -4px; right: -4px;
  background: linear-gradient(135deg, var(--gam-gold), #f97316);
  color: #000;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 20px;
  border: 2px solid var(--gam-dark);
  white-space: nowrap;
}
.gam-hero-info {
  flex: 1;
  min-width: 0;
}
.gam-hero-level-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.gam-hero-level-num {
  font-size: 48px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.gam-hero-level-lbl {
  font-size: 12px;
  color: var(--gam-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.gam-hero-rank {
  font-size: 20px;
  font-weight: 700;
  color: var(--gam-gold);
  margin-bottom: 12px;
}
.gam-hero-xp-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gam-muted);
  margin-bottom: 6px;
}
.gam-hero-xp-label strong { color: var(--gam-text); }
.gam-xp-track {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}
.gam-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gam-purple), var(--gam-gold));
  border-radius: 4px;
  width: 0%;
  transition: width 1.5s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
}
.gam-xp-pct {
  font-size: 11px;
  color: var(--gam-purple2);
  font-weight: 700;
  text-align: right;
}
.gam-hero-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.gam-stat-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--gam-text);
}
.gam-stat-chip .icon { font-size: 14px; }
.gam-stat-chip strong { color: var(--gam-gold); font-weight: 700; }

/* TABS */
.gam-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--gam-border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
}
.gam-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--gam-muted);
  padding: 9px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}
.gam-tab:hover { color: var(--gam-text); background: rgba(255,255,255,0.04); }
.gam-tab.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), rgba(59,130,246,0.15));
  color: #fff;
  border: 1px solid var(--gam-border);
}

/* PANELS */
.gam-panel { display: none; }
.gam-panel.active { display: block; animation: fadeInUp 0.3s ease; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* SECTION TITLE */
.gam-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gam-text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gam-section-count {
  font-size: 12px;
  color: var(--gam-muted);
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 20px;
}

/* BADGES HEX GRID */
.gam-hex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.gam-hex-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 72px;
  cursor: pointer;
  transition: transform 0.2s;
}
.gam-hex-item:hover { transform: scale(1.08) translateY(-3px); }
.gam-hex {
  width: 64px;
  height: 72px;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  position: relative;
}
.gam-hex--unlocked {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, transparent), rgba(59,130,246,0.3));
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent);
}
.gam-hex--legendary {
  background: linear-gradient(135deg, rgba(245,158,11,0.5), rgba(249,115,22,0.4));
  box-shadow: 0 0 20px rgba(245,158,11,0.6), 0 0 40px rgba(245,158,11,0.2);
  animation: legendaryPulse 3s ease-in-out infinite;
}
@keyframes legendaryPulse {
  0%,100% { box-shadow: 0 0 20px rgba(245,158,11,0.6), 0 0 40px rgba(245,158,11,0.2); }
  50%     { box-shadow: 0 0 30px rgba(245,158,11,0.9), 0 0 60px rgba(245,158,11,0.4); }
}
.gam-hex--locked {
  background: rgba(255,255,255,0.04);
  filter: grayscale(1);
  opacity: 0.4;
}
.gam-hex-name {
  font-size: 9px;
  color: var(--gam-muted);
  text-align: center;
  line-height: 1.2;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gam-hex-item--unlocked .gam-hex-name { color: var(--gam-purple2); }

/* LEADERBOARD PODIUM */
.gam-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 28px;
  padding: 20px 0 0;
}
.gam-podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.gam-podium-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gam-purple), var(--gam-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  border: 3px solid transparent;
}
.gam-podium-slot:nth-child(1) .gam-podium-avatar { border-color: var(--gam-gold); box-shadow: 0 0 16px rgba(245,158,11,0.5); width: 64px; height: 64px; font-size: 24px; }
.gam-podium-slot:nth-child(2) .gam-podium-avatar { border-color: #94a3b8; }
.gam-podium-slot:nth-child(3) .gam-podium-avatar { border-color: #cd7f32; }
.gam-podium-name { font-size: 12px; font-weight: 600; color: var(--gam-text); }
.gam-podium-xp   { font-size: 11px; color: var(--gam-gold); font-weight: 700; }
.gam-podium-bar {
  width: 80px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 40%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  border: 1px solid var(--gam-border);
  border-bottom: none;
}
.gam-podium-slot:nth-child(1) .gam-podium-bar { height: 80px; background: linear-gradient(180deg, rgba(245,158,11,0.5), rgba(245,158,11,0.1)); border-color: rgba(245,158,11,0.4); }
.gam-podium-slot:nth-child(2) .gam-podium-bar { height: 60px; order: 1; }
.gam-podium-slot:nth-child(2) .gam-podium-name { order: 2; }
.gam-podium-slot:nth-child(2) .gam-podium-xp { order: 3; }
.gam-podium-slot:nth-child(2) .gam-podium-avatar { order: 0; }
.gam-podium-rank { font-size: 18px; }
.gam-podium-slot:nth-child(1) .gam-podium-rank::after { content: ' 🥇'; }
.gam-podium-slot:nth-child(2) .gam-podium-rank::after { content: ' 🥈'; }
.gam-podium-slot:nth-child(3) .gam-podium-rank::after { content: ' 🥉'; }
.gam-lb-list { display: flex; flex-direction: column; gap: 6px; }
.gam-lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 14px;
  transition: all 0.2s;
}
.gam-lb-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--gam-border); }
.gam-lb-row.mine { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--gam-purple); }
.gam-lb-rank { font-size: 14px; font-weight: 700; color: var(--gam-muted); width: 28px; text-align: center; flex-shrink: 0; }
.gam-lb-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--gam-purple), var(--gam-blue)); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.gam-lb-info { flex: 1; min-width: 0; }
.gam-lb-name { font-size: 14px; font-weight: 600; color: var(--gam-text); }
.gam-lb-level { font-size: 11px; color: var(--gam-purple2); }
.gam-lb-xp { font-size: 14px; font-weight: 700; color: var(--gam-gold); }

/* STREAK CALENDAR */
.gam-streak-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.gam-streak-fire {
  font-size: 48px;
  filter: drop-shadow(0 0 16px rgba(239,68,68,0.8));
  animation: fireFlicker 2s ease-in-out infinite;
}
@keyframes fireFlicker {
  0%,100% { transform: scale(1) rotate(-1deg); }
  50%     { transform: scale(1.05) rotate(1deg); }
}
.gam-streak-days {
  font-size: 56px;
  font-weight: 900;
  color: var(--gam-red);
  line-height: 1;
  text-shadow: 0 0 20px rgba(239,68,68,0.5);
}
.gam-streak-label { font-size: 13px; color: var(--gam-muted); text-transform: uppercase; letter-spacing: 1px; }
.gam-heatmap {
  display: grid;
  grid-template-columns: repeat(52, 1fr);
  gap: 2px;
  margin-top: 16px;
}
.gam-heatmap-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: transform 0.1s;
}
.gam-heatmap-cell:hover { transform: scale(1.5); z-index: 1; }
.gam-heatmap-cell[data-level="1"] { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.gam-heatmap-cell[data-level="2"] { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.gam-heatmap-cell[data-level="3"] { background: color-mix(in srgb, var(--accent) 75%, transparent); }
.gam-heatmap-cell[data-level="4"] { background: color-mix(in srgb, var(--accent) 100%, transparent); }

/* XP HISTORY */
.gam-history-list { display: flex; flex-direction: column; gap: 6px; }
.gam-history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 10px 14px;
}
.gam-history-icon { font-size: 20px; flex-shrink: 0; }
.gam-history-info { flex: 1; }
.gam-history-action { font-size: 13px; color: var(--gam-text); font-weight: 500; }
.gam-history-date { font-size: 11px; color: var(--gam-muted); }
.gam-history-xp { font-size: 16px; font-weight: 800; color: var(--gam-gold); }

/* SKELETON */
.gam-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* STARS BG */
.gam-stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.gam-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: twinkle var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes twinkle {
  0%,100% { opacity: 0.1; transform: scale(1); }
  50%     { opacity: 0.6; transform: scale(1.3); }
}

/* RESPONSIVE */
@media (max-width: 640px) {
  .gam-hero { flex-direction: column; text-align: center; }
  .gam-hero-stats { justify-content: center; }
  .gam-tab { font-size: 11px; }
  .gam-hex-grid { gap: 8px; }
  .gam-hex { width: 52px; height: 58px; }
  .gam-podium { gap: 8px; }
}


/* ===== css/xp-feedback.css?v=2603080300 ===== */
/**
 * XP FEEDBACK SYSTEM - CSS
 * Animations et styles pour le feedback XP global
 */

/* =============================================
   FLOATING XP NUMBERS
   ============================================= */
.xp-float-global {
  position: fixed;
  z-index: 1200;
  pointer-events: none;
  animation: xpFloatUp 2.5s ease-out forwards;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 28px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
               0 0 20px rgba(16, 185, 129, 0.6);
}

.xp-float-global .xp-value {
  color: #10b981;
  font-size: 32px;
  letter-spacing: -0.5px;
}

.xp-float-global .xp-icon {
  font-size: 28px;
  animation: xpIconPulse 0.5s ease-in-out 3;
}

@keyframes xpFloatUp {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.8);
  }
  20% {
    opacity: 1;
    transform: translateY(-20px) scale(1.2);
  }
  80% {
    opacity: 1;
    transform: translateY(-60px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(0.8);
  }
}

@keyframes xpIconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

/* =============================================
   SIDEBAR XP BAR (Quick Win #2)
   ============================================= */
.sidebar-xp-mini {
  padding: 12px 16px;
  margin: 8px 12px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-xp-mini:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent);
}

.xp-bar-mini {
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}

.xp-bar-fill-mini {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-light) 0%, #3b82f6 50%, #10b981 100%);
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Shine effect sur la barre */
.xp-bar-fill-mini::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: xpBarShine 2s ease-in-out infinite;
}

@keyframes xpBarShine {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 200%;
  }
}

.xp-text-mini {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.3px;
}

/* Pulse animation quand proche du level up */
.sidebar-xp-mini.near-levelup {
  animation: xpNearLevelup 1.5s ease-in-out infinite;
}

@keyframes xpNearLevelup {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 20px 4px color-mix(in srgb, var(--accent) 40%, transparent);
  }
}

/* =============================================
   LEVEL UP ANIMATION (Simple version)
   ============================================= */
.levelup-flash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9998;
  animation: levelupFlash 1s ease-out forwards;
}

@keyframes levelupFlash {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* =============================================
   ACHIEVEMENT UNLOCK TOAST (Enhanced)
   ============================================= */
.toast.achievement-unlock {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 95%, transparent) 0%, rgba(59, 130, 246, 0.95) 100%);
  border: 2px solid #f59e0b;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--accent) 40%, transparent),
              0 0 20px rgba(245, 158, 11, 0.3);
  animation: achievementPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes achievementPop {
  0% {
    transform: scale(0.8) translateY(20px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* =============================================
   MINI PIP (minimal mode)
   ============================================= */
.xp-mini-pip {
  position: absolute;
  top: -8px;
  right: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 2px 8px;
  border-radius: 10px;
  pointer-events: none;
  animation: miniPipUp 1.8s ease-out forwards;
  z-index: 100;
}
.xp-mini-pip.loss { color: #ef4444; background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.25); }
@keyframes miniPipUp {
  0% { opacity: 0; transform: translateY(4px) scale(0.8); }
  15% { opacity: 1; transform: translateY(-4px) scale(1.1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20px) scale(0.9); }
}

/* =============================================
   CHEST DROP OVERLAY
   ============================================= */
.chest-drop-overlay {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.4s ease;
}
.chest-drop-overlay.visible { opacity: 1; }
.chest-drop-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(108,71,255,0.15) 0%, rgba(0,0,0,0.85) 100%);
  backdrop-filter: blur(8px);
}
.chest-drop-content {
  position: relative; text-align: center;
  animation: chestBounceIn 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes chestBounceIn {
  0% { transform: scale(0.3) translateY(100px); opacity: 0; }
  60% { transform: scale(1.05) translateY(-10px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Chest glow ring */
.chest-glow-ring {
  position: absolute; top: 50%; left: 50%; width: 200px; height: 200px;
  transform: translate(-50%, -70%);
  background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, rgba(108,71,255,0.1) 50%, transparent 70%);
  border-radius: 50%;
  animation: chestGlowPulse 2s ease-in-out infinite;
}
@keyframes chestGlowPulse {
  0%, 100% { transform: translate(-50%, -70%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -70%) scale(1.4); opacity: 1; }
}

/* Chest box */
.chest-box {
  position: relative; width: 120px; height: 100px; margin: 0 auto 24px;
  cursor: pointer; transition: transform 0.2s;
}
.chest-box:hover { transform: scale(1.08); }
.chest-box:active { transform: scale(0.95); }

.chest-body {
  position: absolute; bottom: 0; width: 120px; height: 60px;
  background: linear-gradient(135deg, #b45309, #d97706, #f59e0b);
  border-radius: 8px 8px 12px 12px;
  box-shadow: inset 0 -4px 12px rgba(0,0,0,0.3), 0 8px 30px rgba(245,158,11,0.3);
  border: 2px solid #fbbf24;
}
.chest-body::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 24px; height: 24px; background: #fbbf24;
  border-radius: 50%; border: 3px solid #92400e;
  box-shadow: 0 0 12px rgba(251,191,36,0.6);
}

.chest-lid {
  position: absolute; bottom: 50px; width: 130px; left: -5px; height: 40px;
  background: linear-gradient(135deg, #d97706, #f59e0b, #fbbf24);
  border-radius: 12px 12px 4px 4px;
  box-shadow: inset 0 2px 8px rgba(255,255,255,0.2), 0 -2px 8px rgba(0,0,0,0.2);
  border: 2px solid #fbbf24;
  transform-origin: bottom center;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chest-box.opening .chest-lid {
  transform: rotateX(-110deg) translateY(-10px);
}
.chest-box.opened .chest-lid {
  transform: rotateX(-110deg) translateY(-10px);
}
.chest-box.opened::before {
  content: ''; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 120px;
  background: radial-gradient(ellipse, rgba(251,191,36,0.6) 0%, rgba(245,158,11,0.2) 40%, transparent 70%);
  animation: chestBeam 1s ease-out forwards;
  pointer-events: none;
}
@keyframes chestBeam {
  0% { height: 0; opacity: 0; }
  50% { height: 120px; opacity: 1; }
  100% { height: 200px; opacity: 0; }
}

/* Sparkle particles around chest */
.chest-sparkles { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.chest-sparkle {
  position: absolute; width: 4px; height: 4px;
  background: #fbbf24; border-radius: 50%;
  animation: sparkleOrbit 2.5s ease-in-out infinite;
  animation-delay: var(--delay);
}
@keyframes sparkleOrbit {
  0%, 100% { transform: rotate(var(--angle)) translateX(var(--dist)) scale(0); opacity: 0; }
  50% { transform: rotate(var(--angle)) translateX(var(--dist)) scale(1); opacity: 1; }
}

/* Chest reward reveal */
.chest-reward-reveal {
  position: relative; text-align: center;
  animation: rewardRevealIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes rewardRevealIn {
  0% { transform: scale(0.5) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.chest-reward-glow {
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 300px; height: 300px; pointer-events: none;
  animation: chestGlowPulse 2s ease-in-out infinite;
}
.chest-reward-icon { font-size: 80px; margin-bottom: 16px; filter: drop-shadow(0 4px 20px rgba(245,158,11,0.5)); }
.chest-reward-rarity {
  display: inline-block; padding: 4px 16px; border: 1px solid; border-radius: 20px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 12px;
}
.chest-reward-name { font-size: 1.4rem; font-weight: 800; color: #e5e5f0; margin-bottom: 8px; }
.chest-reward-desc { font-size: 0.9rem; color: #a0a0bb; margin-bottom: 16px; max-width: 300px; margin-left: auto; margin-right: auto; }
.chest-reward-value { font-size: 1.6rem; font-weight: 900; margin-bottom: 20px; }
.chest-reward-close {
  padding: 12px 40px; background: linear-gradient(135deg, #6c47ff, #a78bfa);
  color: #fff; border: none; border-radius: 14px; font-size: 0.95rem;
  font-weight: 700; cursor: pointer; transition: transform 0.15s;
}
.chest-reward-close:hover { transform: scale(1.05); }

.chest-title { font-size: 1.8rem; font-weight: 800; color: #fbbf24; margin-bottom: 8px; text-shadow: 0 2px 16px rgba(251,191,36,0.5); }
.chest-subtitle { font-size: 0.9rem; color: #a0a0bb; margin-bottom: 16px; }
.chest-skip { font-size: 0.78rem; color: #666; cursor: pointer; text-decoration: underline; opacity: 0.6; transition: opacity 0.2s; }
.chest-skip:hover { opacity: 1; }

/* =============================================
   MOBILE RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .xp-float-global {
    font-size: 20px;
  }

  .xp-float-global .xp-value {
    font-size: 24px;
  }

  .xp-float-global .xp-icon {
    font-size: 20px;
  }

  .sidebar-xp-mini {
    margin: 6px 8px;
    padding: 10px 12px;
  }

  .xp-bar-mini {
    height: 4px;
    margin-bottom: 6px;
  }

  .xp-text-mini {
    font-size: 10px;
  }
}

/* =============================================
   ANIMATIONS DÉSACTIVÉES (accessibility)
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .xp-float-global,
  .xp-bar-fill-mini,
  .levelup-flash,
  .toast.achievement-unlock {
    animation: none !important;
    transition: none !important;
  }

  .xp-float-global {
    opacity: 1;
  }
}

/* =============================================
   THEME ADAPTATION
   ============================================= */
[data-theme="light"] .sidebar-xp-mini {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}

[data-theme="light"] .xp-bar-mini {
  background: rgba(0, 0, 0, 0.1);
}

/* =============================================
/* =============================================
   LOGIN BONUS CELEBRATION
   ============================================= */
.login-bonus-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1200;
  background: radial-gradient(ellipse at 50% 30%, #1a1035 0%, #0a0a14 60%, #000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.login-bonus-overlay.visible {
  opacity: 1;
}

.login-bonus-content {
  text-align: center;
  animation: loginBonusPopIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  max-width: 700px;
  padding: 0 20px;
}

@keyframes loginBonusPopIn {
  0% { transform: scale(0.3) translateY(80px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.login-bonus-title {
  font-size: 42px;
  font-weight: 800;
  margin: 0 0 32px 0;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 12px rgba(245, 158, 11, 0.5));
}

/* ── 3 CARDS ── */
.lb-cards {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0 0 28px;
}

.lb-card {
  position: relative;
  background: #16162a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px 24px 22px;
  min-width: 170px;
  flex: 1;
  max-width: 210px;
  text-align: center;
  overflow: hidden;
  animation: lbCardIn 0.6s cubic-bezier(.175,.885,.32,1.275) both;
}

.lb-card:nth-child(1) { animation-delay: 0.15s; }
.lb-card:nth-child(2) { animation-delay: 0.3s; }
.lb-card:nth-child(3) { animation-delay: 0.45s; }

@keyframes lbCardIn {
  from { opacity: 0; transform: translateY(30px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Subtle top glow per card */
.lb-card::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: var(--card-glow, rgba(255,255,255,0.15));
  border-radius: 0 0 50% 50%;
  box-shadow: 0 0 20px 8px var(--card-glow, rgba(255,255,255,0.05));
}

.lb-card-streak {
  --card-glow: rgba(251, 191, 36, 0.4);
  border-color: rgba(251, 191, 36, 0.15);
}
.lb-card-level {
  --card-glow: color-mix(in srgb, var(--rank-color, #a855f7) 50%, transparent);
  border-color: color-mix(in srgb, var(--rank-color, #a855f7) 20%, transparent);
}
.lb-card-xp {
  --card-glow: rgba(52, 211, 153, 0.4);
  border-color: rgba(52, 211, 153, 0.15);
}

.lb-card-icon {
  font-size: 44px;
  margin-bottom: 12px;
}

.lb-card-value {
  font-size: 38px;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 6px;
}

.lb-card-streak .lb-card-value { color: #fbbf24; }
.lb-card-level .lb-card-value { color: var(--rank-color, #a855f7); }
.lb-card-xp .lb-card-value { color: #34d399; }

.lb-card-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}

.lb-card-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 500;
}

.lb-card-record {
  color: #fbbf24 !important;
  font-weight: 700 !important;
}

/* ── MILESTONES ── */
.login-bonus-milestone {
  padding: 14px 28px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 14px;
  font-size: 20px;
  font-weight: 700;
  color: #34d399;
  margin-bottom: 14px;
}

.login-bonus-milestone.legendary {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.login-bonus-next {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 8px;
}

/* ── MOBILE ── */
@media (max-width: 768px) {
  .login-bonus-title { font-size: 28px; margin-bottom: 20px; }
  .lb-cards { flex-direction: column; align-items: center; gap: 12px; }
  .lb-card { min-width: 240px; max-width: 280px; padding: 20px 16px 16px; }
  .lb-card-value { font-size: 30px; }
  .lb-card-icon { font-size: 36px; }
  .login-bonus-milestone { font-size: 16px; padding: 12px 20px; }
  .login-bonus-next { font-size: 13px; }
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .login-bonus-overlay,
  .login-bonus-content,
  .login-bonus-icon,
  .login-bonus-title,
  .login-bonus-xp,
  .streak-number,
  .login-bonus-milestone,
  .achievement-unlock-modal,
  .achievement-unlock-content,
  .achievement-icon,
  .achievement-rays {
    animation: none !important;
    transition: none !important;
  }
}

/* =============================================
   ACHIEVEMENT UNLOCK ANIMATION (Quick Win #4)
   ============================================= */
.achievement-unlock-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.achievement-unlock-modal.visible {
  opacity: 1;
}

.achievement-unlock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.95) 100%);
  backdrop-filter: blur(8px);
}

.achievement-unlock-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 60px 40px;
  max-width: 600px;
  animation: achievementPopIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes achievementPopIn {
  0% {
    transform: scale(0.3) translateY(200px) rotate(-10deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.1) translateY(-20px) rotate(2deg);
  }
  100% {
    transform: scale(1) translateY(0) rotate(0);
    opacity: 1;
  }
}

/* Rays de lumière */
.achievement-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background:
    linear-gradient(0deg, transparent 40%, rgba(255, 215, 0, 0.2) 50%, transparent 60%),
    linear-gradient(60deg, transparent 40%, rgba(255, 215, 0, 0.2) 50%, transparent 60%),
    linear-gradient(120deg, transparent 40%, rgba(255, 215, 0, 0.2) 50%, transparent 60%),
    linear-gradient(180deg, transparent 40%, rgba(255, 215, 0, 0.2) 50%, transparent 60%),
    linear-gradient(240deg, transparent 40%, rgba(255, 215, 0, 0.2) 50%, transparent 60%),
    linear-gradient(300deg, transparent 40%, rgba(255, 215, 0, 0.2) 50%, transparent 60%);
  animation: achievementRaysRotate 8s linear infinite;
  pointer-events: none;
  opacity: 0.8;
}

@keyframes achievementRaysRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Glow central */
.achievement-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
  animation: achievementGlowPulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes achievementGlowPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 1;
  }
}

/* Icône achievement */
.achievement-icon-container {
  position: relative;
  display: inline-block;
  margin-bottom: 24px;
}

.achievement-icon {
  font-size: 120px;
  display: inline-block;
  animation: achievementIconBounce 1s ease-out;
  filter: drop-shadow(0 8px 32px rgba(255, 215, 0, 0.8));
}

@keyframes achievementIconBounce {
  0% {
    transform: scale(0) rotate(-180deg);
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
  70% {
    transform: scale(0.9) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

.achievement-unlock-title {
  font-size: 32px;
  font-weight: 900;
  margin: 0 0 16px 0;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 3px;
  animation: achievementTitleGlow 2s ease-in-out infinite;
}

@keyframes achievementTitleGlow {
  0%, 100% {
    filter: drop-shadow(0 4px 16px rgba(251, 191, 36, 0.6));
  }
  50% {
    filter: drop-shadow(0 4px 24px rgba(251, 191, 36, 1));
  }
}

.achievement-name {
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 16px 0;
  color: #fff;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
  animation: achievementNameSlide 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-delay: 0.2s;
  animation-fill-mode: backwards;
}

@keyframes achievementNameSlide {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.achievement-description {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 24px 0;
  line-height: 1.6;
  animation: achievementDescFade 0.8s ease-out;
  animation-delay: 0.4s;
  animation-fill-mode: backwards;
}

@keyframes achievementDescFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Badge de rareté */
.achievement-rarity-badge {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 24px;
  animation: achievementBadgeFlip 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-delay: 0.6s;
  animation-fill-mode: backwards;
}

@keyframes achievementBadgeFlip {
  from {
    transform: rotateY(90deg) scale(0.5);
    opacity: 0;
  }
  to {
    transform: rotateY(0) scale(1);
    opacity: 1;
  }
}

.achievement-rarity-badge.rarity-common {
  background: linear-gradient(135deg, #9ca3af, #d1d5db);
  color: #1f2937;
  box-shadow: 0 4px 16px rgba(156, 163, 175, 0.5);
}

.achievement-rarity-badge.rarity-rare {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: #fff;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.6);
}

.achievement-rarity-badge.rarity-epic {
  background: linear-gradient(135deg, var(--accent-light), var(--accent-light));
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: achievementBadgeFlip 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), epicPulse 2s ease-in-out infinite;
  animation-delay: 0.6s, 1.4s;
  animation-fill-mode: backwards, forwards;
}

.achievement-rarity-badge.rarity-legendary {
  background: linear-gradient(135deg, #f59e0b, #fbbf24, #ef4444);
  color: #000;
  box-shadow: 0 4px 24px rgba(245, 158, 11, 0.9);
  animation: achievementBadgeFlip 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), legendaryShine 2s ease-in-out infinite;
  animation-delay: 0.6s, 1.4s;
  animation-fill-mode: backwards, forwards;
}

@keyframes epicPulse {
  0%, 100% {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 60%, transparent);
  }
  50% {
    box-shadow: 0 4px 32px color-mix(in srgb, var(--accent) 100%, transparent);
  }
}

@keyframes legendaryShine {
  0%, 100% {
    box-shadow: 0 4px 24px rgba(245, 158, 11, 0.9);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 8px 48px rgba(245, 158, 11, 1);
    filter: brightness(1.3);
  }
}

/* Récompenses */
.achievement-rewards {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
  animation: achievementRewardsPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-delay: 0.8s;
  animation-fill-mode: backwards;
}

@keyframes achievementRewardsPop {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.reward-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  animation: rewardItemFloat 2s ease-in-out infinite;
}

.reward-item:nth-child(1) {
  animation-delay: 0s;
}

.reward-item:nth-child(2) {
  animation-delay: 0.3s;
}

@keyframes rewardItemFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.reward-icon {
  font-size: 24px;
}

.reward-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

/* Bouton continuer */
.achievement-close-btn {
  padding: 16px 48px;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  border: none;
  border-radius: 12px;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
  animation: achievementButtonAppear 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-delay: 1s;
  animation-fill-mode: backwards;
}

@keyframes achievementButtonAppear {
  from {
    transform: translateY(50px) scale(0.8);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.achievement-close-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.6);
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.achievement-close-btn:active {
  transform: translateY(-2px) scale(1.02);
}

/* Variantes de couleurs selon rareté du modal */
.achievement-unlock-modal.rarity-legendary .achievement-rays {
  background:
    linear-gradient(0deg, transparent 40%, rgba(245, 158, 11, 0.3) 50%, transparent 60%),
    linear-gradient(60deg, transparent 40%, rgba(245, 158, 11, 0.3) 50%, transparent 60%),
    linear-gradient(120deg, transparent 40%, rgba(245, 158, 11, 0.3) 50%, transparent 60%),
    linear-gradient(180deg, transparent 40%, rgba(245, 158, 11, 0.3) 50%, transparent 60%),
    linear-gradient(240deg, transparent 40%, rgba(245, 158, 11, 0.3) 50%, transparent 60%),
    linear-gradient(300deg, transparent 40%, rgba(245, 158, 11, 0.3) 50%, transparent 60%);
}

.achievement-unlock-modal.rarity-epic .achievement-glow {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 70%);
}

.achievement-unlock-modal.rarity-legendary .achievement-glow {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.5) 0%, transparent 70%);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .achievement-unlock-content {
    padding: 40px 24px;
    max-width: 90%;
  }

  .achievement-icon {
    font-size: 80px;
  }

  .achievement-unlock-title {
    font-size: 24px;
  }

  .achievement-name {
    font-size: 28px;
  }

  .achievement-description {
    font-size: 16px;
  }

  .achievement-rarity-badge {
    font-size: 12px;
    padding: 6px 16px;
  }

  .achievement-rewards {
    flex-direction: column;
    gap: 12px;
  }

  .reward-item {
    padding: 10px 20px;
  }

  .reward-icon {
    font-size: 20px;
  }

  .reward-value {
    font-size: 16px;
  }

  .achievement-close-btn {
    padding: 14px 32px;
    font-size: 16px;
  }
}

/* ===== css/messaging.css?v=2602240010 ===== */
/**
 * TeamTalk - Premium Messaging Experience
 * Ultra-luxe design with divine light effects
 * Desert gold + cosmic glow aesthetic
 */

/* ========== CSS Variables for TeamTalk ========== */
:root {
    --tt-gold: #d4a574;
    --tt-gold-light: #e8c9a8;
    --tt-gold-glow: rgba(212, 165, 116, 0.4);
    --tt-amber: #e07b39;
    --tt-cosmic: #7c9fff;
    --tt-cosmic-glow: rgba(124, 159, 255, 0.3);
    --tt-glass: rgba(255, 255, 255, 0.03);
    --tt-glass-border: rgba(255, 255, 255, 0.08);
    --tt-divine-glow: 0 0 60px rgba(212, 165, 116, 0.15),
                       0 0 100px rgba(124, 159, 255, 0.1);
}

/* ========== Main Container - Divine Aura ========== */
.msg-container {
    display: flex;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(20, 18, 24, 0.98) 0%,
        rgba(30, 25, 35, 0.98) 50%,
        rgba(25, 22, 30, 0.98) 100%);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--tt-divine-glow),
                0 25px 80px -20px rgba(0, 0, 0, 0.6);
    border: 1px solid var(--tt-glass-border);
    position: relative;
}

/* Divine light rays overlay */
.msg-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(212, 165, 116, 0.03) 30deg,
        transparent 60deg,
        rgba(124, 159, 255, 0.02) 90deg,
        transparent 120deg
    );
    animation: divineRotate 60s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes divineRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========== Sidebar - Conversations List ========== */
.msg-sidebar {
    width: 340px;
    min-width: 300px;
    background: linear-gradient(180deg,
        rgba(30, 28, 35, 0.95) 0%,
        rgba(25, 23, 30, 0.98) 100%);
    border-right: 1px solid var(--tt-glass-border);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(20px);
}

/* Sidebar ambient glow */
.msg-sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--tt-gold) 30%,
        var(--tt-cosmic) 70%,
        transparent 100%);
    opacity: 0.3;
}

.msg-sidebar-header {
    padding: 24px;
    border-bottom: 1px solid var(--tt-glass-border);
    background: linear-gradient(180deg,
        rgba(212, 165, 116, 0.05) 0%,
        transparent 100%);
}

.msg-sidebar-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tt-gold-light);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: -0.5px;
}

.msg-sidebar-title span {
    background: linear-gradient(135deg, var(--tt-gold-light), var(--tt-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px var(--tt-gold-glow);
}

/* New conversation button - Luxe */
.msg-new-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--tt-gold), var(--tt-amber));
    color: #1a1a1a;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px var(--tt-gold-glow),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.msg-new-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.msg-new-btn:hover {
    transform: scale(1.08) rotate(5deg);
    box-shadow: 0 8px 30px var(--tt-gold-glow);
}

.msg-new-btn:hover::before {
    opacity: 1;
}

.msg-new-btn svg {
    stroke-width: 2.5;
}

/* Search bar - Premium glass */
.msg-search {
    position: relative;
}

.msg-search-input {
    width: 100%;
    padding: 14px 18px 14px 48px;
    border-radius: 14px;
    border: 1px solid var(--tt-glass-border);
    background: var(--tt-glass);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
}

.msg-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.msg-search-input:focus {
    outline: none;
    border-color: var(--tt-gold);
    background: rgba(212, 165, 116, 0.05);
    box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.1),
                0 8px 30px rgba(0, 0, 0, 0.2);
}

.msg-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tt-gold);
    width: 20px;
    height: 20px;
    opacity: 0.6;
}

/* ========== Conversations List ========== */
.msg-conv-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--tt-gold-glow) transparent;
}

.msg-conv-list::-webkit-scrollbar {
    width: 6px;
}

.msg-conv-list::-webkit-scrollbar-track {
    background: transparent;
}

.msg-conv-list::-webkit-scrollbar-thumb {
    background: var(--tt-gold-glow);
    border-radius: 3px;
}

.msg-conv-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 6px;
    position: relative;
    border: 1px solid transparent;
    background: var(--tt-glass);
}

.msg-conv-item:hover {
    background: rgba(212, 165, 116, 0.08);
    border-color: rgba(212, 165, 116, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.msg-conv-item.active {
    background: linear-gradient(135deg,
        rgba(212, 165, 116, 0.15) 0%,
        rgba(124, 159, 255, 0.1) 100%);
    border-color: var(--tt-gold);
    box-shadow: 0 0 0 1px var(--tt-gold),
                0 0 30px var(--tt-gold-glow),
                0 8px 30px rgba(0, 0, 0, 0.3);
}

/* Conversation Avatar - Luxury */
.msg-conv-avatar {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg,
        rgba(212, 165, 116, 0.2) 0%,
        rgba(124, 159, 255, 0.15) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--tt-glass-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.msg-conv-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 50%);
}

.msg-conv-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Online presence dot ── */
.msg-conv-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
}

.msg-conv-avatar-wrap .msg-conv-avatar {
    width: 52px;
    height: 52px;
}

.msg-online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 13px;
    height: 13px;
    background: #22c55e;
    border-radius: 50%;
    border: 2.5px solid rgba(20, 18, 24, 0.98);
    z-index: 5;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
    animation: onlinePulse 2s ease-in-out infinite;
}

@keyframes onlinePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

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

.msg-conv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.msg-conv-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
    letter-spacing: -0.3px;
}

.msg-conv-item.active .msg-conv-name {
    color: var(--tt-gold-light);
}

.msg-conv-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.msg-conv-preview {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}

/* Unread badge - Gold glow */
/* ── Double check (read receipt) ── */
.msg-check {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
    margin-left: 4px;
    vertical-align: middle;
    letter-spacing: -3px;
    display: inline-block;
}
.msg-check.msg-check-read {
    color: #22d3ee;
}

/* ── Message timestamp divider ── */
.msg-time-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 8px;
    padding: 0 20px;
}
.msg-time-divider::before,
.msg-time-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.06);
}
.msg-time-divider-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.msg-conv-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--tt-gold), var(--tt-amber));
    color: #1a1a1a;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    animation: badgeGlow 2s ease-in-out infinite;
    box-shadow: 0 0 15px var(--tt-gold-glow);
}

@keyframes badgeGlow {
    0%, 100% { box-shadow: 0 0 15px var(--tt-gold-glow); }
    50% { box-shadow: 0 0 25px var(--tt-gold-glow), 0 0 40px rgba(212, 165, 116, 0.2); }
}

/* ========== Chat Zone ========== */
.msg-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: transparent;
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* Chat header - Glass + gold accent */
.msg-chat-header {
    padding: 20px 28px;
    border-bottom: 1px solid var(--tt-glass-border);
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(180deg,
        rgba(212, 165, 116, 0.05) 0%,
        transparent 100%);
    backdrop-filter: blur(20px);
    position: relative;
}

.msg-chat-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 90%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--tt-gold) 50%,
        transparent 100%);
    opacity: 0.3;
}

.msg-chat-avatar {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        rgba(212, 165, 116, 0.2) 0%,
        rgba(124, 159, 255, 0.15) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--tt-glass-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.msg-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.msg-chat-avatar.group {
    background: linear-gradient(135deg, var(--tt-gold), var(--tt-cosmic));
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
}

/* Online status indicator */
.msg-status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #52525b;
    border: 2px solid rgba(30, 28, 35, 0.95);
    transition: all 0.3s ease;
}

.msg-status-dot.online {
    background: #22c55e;
    box-shadow: 0 0 10px #22c55e,
                0 0 20px rgba(34, 197, 94, 0.4);
    animation: pulseOnline 2s ease-in-out infinite;
}

@keyframes pulseOnline {
    0%, 100% { box-shadow: 0 0 10px #22c55e; }
    50% { box-shadow: 0 0 15px #22c55e, 0 0 25px rgba(34, 197, 94, 0.5); }
}

.msg-chat-info {
    flex: 1;
}

.msg-chat-name {
    font-weight: 600;
    color: var(--tt-gold-light);
    font-size: 1.1rem;
    letter-spacing: -0.3px;
}

.msg-chat-status {
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0.8;
}

/* Header actions */
.msg-chat-actions {
    display: flex;
    gap: 8px;
}

.msg-chat-action {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--tt-glass);
    border: 1px solid var(--tt-glass-border);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.msg-chat-action:hover {
    background: rgba(212, 165, 116, 0.1);
    border-color: var(--tt-gold);
    color: var(--tt-gold);
    transform: scale(1.05);
}

.msg-chat-action svg {
    width: 20px;
    height: 20px;
}

/* ========== Messages Area ========== */
.msg-messages {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 165, 116, 0.2) transparent;
}

.msg-messages::-webkit-scrollbar {
    width: 6px;
}

.msg-messages::-webkit-scrollbar-thumb {
    background: rgba(212, 165, 116, 0.2);
    border-radius: 3px;
}

/* Message bubbles */
.msg-bubble-wrapper {
    display: flex;
    flex-direction: column;
    animation: bubbleSlide 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes bubbleSlide {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.msg-bubble-wrapper.mine {
    align-items: flex-end;
}

.msg-bubble-wrapper.theirs {
    align-items: flex-start;
}

.msg-bubble {
    max-width: 70%;
    padding: 14px 18px;
    border-radius: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    position: relative;
    word-break: break-word;
}

/* My messages - Gold gradient */
.msg-bubble-wrapper.mine .msg-bubble {
    background: linear-gradient(135deg, var(--tt-gold), var(--tt-amber));
    color: #1a1a1a;
    border-bottom-right-radius: 6px;
    box-shadow: 0 4px 20px var(--tt-gold-glow),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Their messages - Glass */
.msg-bubble-wrapper.theirs .msg-bubble {
    background: var(--tt-glass);
    color: var(--text-primary);
    border-bottom-left-radius: 6px;
    border: 1px solid var(--tt-glass-border);
    backdrop-filter: blur(10px);
}

.msg-bubble-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0.7;
}

.msg-bubble-wrapper.mine .msg-bubble-time {
    justify-content: flex-end;
}

.msg-check {
    font-size: 0.8rem;
}

.msg-check.read {
    color: var(--tt-gold);
}

/* Sender info in groups */
.msg-bubble-sender {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding-left: 2px;
}

.msg-bubble-sender-avatar {
    font-size: 1rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.msg-bubble-sender-name {
    font-size: 0.78rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--tt-gold), var(--tt-cosmic));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.msg-edited {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-style: italic;
    opacity: 0.6;
}

/* ========== File Attachments ========== */
.msg-attachment {
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--tt-glass-border);
}

.msg-attachment-image {
    max-width: 300px;
    max-height: 200px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.msg-attachment-image:hover {
    transform: scale(1.02);
}

.msg-attachment-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--tt-glass);
    backdrop-filter: blur(10px);
    min-width: 200px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.msg-attachment-file:hover {
    background: rgba(212, 165, 116, 0.1);
}

.msg-attachment-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.msg-attachment-icon.pdf {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.msg-attachment-icon.doc {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.msg-attachment-icon.default {
    background: var(--tt-glass);
    border: 1px solid var(--tt-glass-border);
}

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

.msg-attachment-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-attachment-size {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.msg-attachment-download {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--tt-gold);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.msg-attachment-file:hover .msg-attachment-download {
    opacity: 1;
}

/* ========== Typing Indicator ========== */
.msg-typing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: linear-gradient(90deg,
        rgba(212, 165, 116, 0.05) 0%,
        transparent 100%);
}

.msg-typing-dots {
    display: flex;
    gap: 5px;
}

.msg-typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tt-gold);
    animation: typingPulse 1.4s infinite ease-in-out;
}

.msg-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.msg-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingPulse {
    0%, 60%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-6px) scale(1.1);
        opacity: 1;
    }
}

/* ========== Input Area - Luxury ========== */
.msg-input-area {
    padding: 20px 28px;
    border-top: 1px solid var(--tt-glass-border);
    display: flex;
    align-items: flex-end;
    gap: 14px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(212, 165, 116, 0.03) 100%);
    backdrop-filter: blur(20px);
    position: relative;
}

.msg-input-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--tt-gold) 50%,
        transparent 100%);
    opacity: 0.2;
}

/* File upload buttons */
.msg-input-actions {
    display: flex;
    gap: 6px;
}

.msg-action-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--tt-glass);
    border: 1px solid var(--tt-glass-border);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.msg-action-btn:hover {
    background: rgba(212, 165, 116, 0.1);
    border-color: var(--tt-gold);
    color: var(--tt-gold);
    transform: translateY(-2px);
}

.msg-action-btn svg {
    width: 20px;
    height: 20px;
}

.msg-action-btn input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Input wrapper */
.msg-input-wrapper {
    flex: 1;
    position: relative;
}

.msg-input {
    width: 100%;
    padding: 16px 20px;
    padding-right: 54px;
    border-radius: 18px;
    border: 1px solid var(--tt-glass-border);
    background: var(--tt-glass);
    color: var(--text-primary);
    font-size: 0.95rem;
    resize: none;
    min-height: 52px;
    max-height: 150px;
    line-height: 1.5;
    transition: all 0.3s ease;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
}

.msg-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.msg-input:focus {
    outline: none;
    border-color: var(--tt-gold);
    background: rgba(212, 165, 116, 0.05);
    box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.1),
                0 8px 30px rgba(0, 0, 0, 0.2);
}

.msg-emoji-btn {
    position: absolute;
    right: 16px;
    bottom: 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.3rem;
    opacity: 0.5;
    transition: all 0.3s ease;
    filter: grayscale(0.3);
}

.msg-emoji-btn:hover {
    opacity: 1;
    transform: scale(1.15) rotate(10deg);
    filter: grayscale(0);
}

/* Send button - Premium gold */
.msg-send-btn {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--tt-gold), var(--tt-amber));
    color: #1a1a1a;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px var(--tt-gold-glow),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.msg-send-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.msg-send-btn:hover {
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 8px 30px var(--tt-gold-glow);
}

.msg-send-btn:hover::before {
    opacity: 1;
}

.msg-send-btn:active {
    transform: scale(0.95);
}

.msg-send-btn svg {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
}

/* ========== File Upload Preview ========== */
.msg-upload-preview {
    display: flex;
    gap: 10px;
    padding: 12px 28px;
    background: rgba(212, 165, 116, 0.05);
    border-bottom: 1px solid var(--tt-glass-border);
    flex-wrap: wrap;
}

.msg-upload-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--tt-glass-border);
    background: var(--tt-glass);
}

.msg-upload-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.msg-upload-item.file {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.msg-upload-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.msg-upload-remove:hover {
    background: #ef4444;
    transform: scale(1.1);
}

/* ========== Empty State - Divine ========== */
.msg-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
    position: relative;
}

/* Floating particles */
.msg-empty::before,
.msg-empty::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--tt-gold-glow) 0%, transparent 70%);
    animation: floatParticle 8s ease-in-out infinite;
    opacity: 0.3;
}

.msg-empty::before {
    top: 20%;
    left: 20%;
}

.msg-empty::after {
    bottom: 20%;
    right: 20%;
    animation-delay: 4s;
    background: radial-gradient(circle, var(--tt-cosmic-glow) 0%, transparent 70%);
}

@keyframes floatParticle {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -20px) scale(1.1); }
}

.msg-empty-icon {
    width: 100px;
    height: 100px;
    border-radius: 28px;
    background: linear-gradient(135deg,
        rgba(212, 165, 116, 0.2) 0%,
        rgba(124, 159, 255, 0.15) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin-bottom: 28px;
    border: 1px solid var(--tt-glass-border);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3),
                0 0 60px var(--tt-gold-glow);
    position: relative;
    z-index: 1;
    animation: iconFloat 4s ease-in-out infinite;
}

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

.msg-empty-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, var(--tt-gold-light), var(--tt-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.msg-empty-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    max-width: 320px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

/* ========== New Conversation Modal ========== */
.msg-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.msg-modal {
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    background: linear-gradient(180deg,
        rgba(35, 32, 42, 0.98) 0%,
        rgba(28, 25, 35, 0.98) 100%);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--tt-glass-border);
    box-shadow: 0 0 80px var(--tt-gold-glow),
                0 30px 60px rgba(0, 0, 0, 0.5);
    animation: modalSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlide {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.msg-modal-header {
    padding: 24px;
    border-bottom: 1px solid var(--tt-glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg,
        rgba(212, 165, 116, 0.08) 0%,
        transparent 100%);
}

.msg-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--tt-gold-light), var(--tt-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.msg-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--tt-glass);
    border: 1px solid var(--tt-glass-border);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.msg-modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}

.msg-modal-body {
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
}

/* User selection for new conversation */
.msg-user-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 8px;
    border: 1px solid transparent;
    background: var(--tt-glass);
}

.msg-user-option:hover {
    background: rgba(212, 165, 116, 0.1);
    border-color: var(--tt-gold);
    transform: translateX(6px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.msg-user-option.selected {
    background: linear-gradient(135deg,
        rgba(212, 165, 116, 0.2) 0%,
        rgba(124, 159, 255, 0.1) 100%);
    border-color: var(--tt-gold);
}

.msg-user-avatar {
    font-size: 1.8rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg,
        rgba(212, 165, 116, 0.2) 0%,
        rgba(124, 159, 255, 0.15) 100%);
    border: 1px solid var(--tt-glass-border);
}

.msg-user-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 1rem;
}

.msg-user-option:hover .msg-user-name {
    color: var(--tt-gold-light);
}

/* Group creation */
.msg-group-input {
    width: 100%;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid var(--tt-glass-border);
    background: var(--tt-glass);
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.msg-group-input:focus {
    outline: none;
    border-color: var(--tt-gold);
    box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.1);
}

.msg-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--tt-glass-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.msg-modal-btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.msg-modal-btn.primary {
    background: linear-gradient(135deg, var(--tt-gold), var(--tt-amber));
    color: #1a1a1a;
    box-shadow: 0 4px 20px var(--tt-gold-glow);
}

.msg-modal-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--tt-gold-glow);
}

.msg-modal-btn.secondary {
    background: var(--tt-glass);
    color: var(--text-primary);
    border: 1px solid var(--tt-glass-border);
}

.msg-modal-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ========== View Container ========== */
#view-team-messaging {
    padding: 28px;
    height: calc(100vh - 56px);
    position: relative;
    overflow: hidden;
}

/* ========== Image Lightbox ========== */
.msg-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    cursor: zoom-out;
    animation: fadeIn 0.3s ease;
}

.msg-lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.5);
}

.msg-lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--tt-glass);
    border: 1px solid var(--tt-glass-border);
    color: white;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.msg-lightbox-close:hover {
    background: #ef4444;
}

/* ========== Responsive ========== */
@media (max-width: 900px) {
    .msg-sidebar {
        width: 280px;
        min-width: 260px;
    }
}

@media (max-width: 768px) {
    .msg-container {
        border-radius: 0;
    }

    .msg-sidebar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: 85%;
        max-width: 320px;
    }

    .msg-sidebar.visible {
        transform: translateX(0);
        box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5);
    }

    .msg-chat {
        width: 100%;
    }

    #view-team-messaging {
        padding: 0;
        height: 100vh;
    }

    .msg-messages {
        padding: 16px;
    }

    .msg-input-area {
        padding: 16px;
    }
}

/* ========== Loading Skeleton ========== */
.msg-skeleton {
    background: linear-gradient(90deg,
        var(--tt-glass) 0%,
        rgba(212, 165, 116, 0.1) 50%,
        var(--tt-glass) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 12px;
}

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

.msg-skeleton-conv {
    height: 72px;
    margin-bottom: 8px;
}

.msg-skeleton-bubble {
    height: 60px;
    max-width: 60%;
    margin-bottom: 12px;
}

.msg-skeleton-bubble.mine {
    margin-left: auto;
}


/* ===== css/notifications.css?v=2602240010 ===== */
/**
 * Notifications Module - Premium Styles
 * Glassmorphism slide-in panel with micro-animations
 */

/* ========== Badge in Navbar ========== */
.notif-badge-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-badge-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s ease;
    position: relative;
}

.notif-badge-btn:hover {
    background: var(--hover);
    color: var(--text-primary);
}

.notif-badge-btn svg {
    width: 22px;
    height: 22px;
}

.notif-badge-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    animation: badgeAppear 0.3s ease;
}

.notif-badge-count.hidden {
    display: none;
}

@keyframes badgeAppear {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.notif-badge-count.pulse {
    animation: badgePulse 1s ease infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4); }
    50% { transform: scale(1.1); box-shadow: 0 4px 16px rgba(239, 68, 68, 0.6); }
}

/* ========== Overlay ========== */
.notif-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9998;
}

.notif-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* ========== Panel ========== */
.notif-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100vw;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(20px);
}

.notif-panel.visible {
    transform: translateX(0);
}

/* ========== Header ========== */
.notif-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-translucent, rgba(30, 30, 40, 0.9));
    backdrop-filter: blur(20px);
}

.notif-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.notif-title-icon {
    font-size: 1.2rem;
}

.notif-header-actions {
    display: flex;
    gap: 8px;
}

.notif-action-btn {
    padding: 8px 14px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notif-action-btn:hover {
    background: var(--hover);
    color: var(--text-primary);
    border-color: var(--accent);
}

.notif-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

.notif-close-btn:hover {
    background: var(--hover);
    color: var(--text-primary);
}

/* ========== List ========== */
.notif-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

/* ========== Item ========== */
.notif-item {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    animation: notifSlideIn 0.3s ease;
    background: var(--background);
    border: 1px solid transparent;
}

@keyframes notifSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.notif-item:hover {
    background: var(--hover);
    transform: translateX(-4px);
}

.notif-item.unread {
    border-left: 3px solid var(--accent);
    background: var(--accent-muted, color-mix(in srgb, var(--accent) 8%, transparent));
}

.notif-item.unread::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}

.notif-item.removing {
    animation: notifRemove 0.3s ease forwards;
}

@keyframes notifRemove {
    to { opacity: 0; transform: translateX(100%); height: 0; padding: 0; margin: 0; }
}

.notif-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.notif-icon.mention { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.notif-icon.assignment { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
.notif-icon.achievement { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.notif-icon.task_due { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }
.notif-icon.message { background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%); }

.notif-content {
    flex: 1;
    min-width: 0;
}

.notif-content-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-bottom: 4px;
    line-height: 1.3;
}

.notif-content-body {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.notif-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.notif-delete-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
}

.notif-item:hover .notif-delete-btn {
    opacity: 1;
}

.notif-delete-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ========== Empty State ========== */
.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    text-align: center;
    padding: 40px;
}

.notif-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 20px;
    opacity: 0.5;
}

.notif-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.notif-empty-text {
    font-size: 0.85rem;
    max-width: 220px;
}

/* ========== Footer ========== */
.notif-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: center;
}

.notif-settings-link {
    font-size: 0.85rem;
    color: var(--accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.notif-settings-link:hover {
    text-decoration: underline;
}

/* ========== Responsive ========== */
@media (max-width: 480px) {
    .notif-panel {
        width: 100vw;
    }
}

/* ========== Date Grouping ========== */
.notif-group {
    margin-bottom: 4px;
}

.notif-group-label {
    padding: 8px 20px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    opacity: 0.7;
}

/* ========== Unread dot ========== */
.notif-unread-dot {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary, var(--accent));
    flex-shrink: 0;
}

.notif-item {
    position: relative;
}

.notif-item.unread {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    border-left: 2px solid var(--primary, var(--accent));
}

.notif-item.removing {
    animation: notifFadeOut 0.3s ease forwards;
}

@keyframes notifFadeOut {
    to { opacity: 0; transform: translateX(100%); max-height: 0; }
}

/* ========== Type icon wrapper ========== */
.notif-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--surface-2, rgba(255,255,255,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}


/* ===== css/notifications-premium.css?v=2603071200 ===== */
/**
 * NOTIFICATIONS PREMIUM v1.0
 * Design ultra haut de gamme avec glassmorphism et IA
 */

/* ========== SIDEBAR BELL ICON — Notification Center ========== */
/* Fix: overflow visible pour ne pas rogner le badge notification */
.sidebar-profile {
  overflow: visible !important;
}


.sidebar-notif-bell {
  overflow: visible;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  flex-shrink: 0;
  border-radius: 8px;
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
}

.sidebar-notif-bell svg {
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,0.45);
  transition: all 0.25s ease;
}

.sidebar-notif-bell:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}

.sidebar-notif-bell:hover svg {
  color: rgba(255,255,255,0.85);
  animation: bellRing 0.4s ease;
}

.sidebar-notif-bell:active {
  transform: translateY(0);
  background: rgba(255,255,255,0.04);
}

/* Badge compteur — petit dot overlay sur la cloche */
.sidebar-notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--accent, #e11d48);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
  z-index: 2;
  border: 1.5px solid var(--surface, #0f172a);
  box-sizing: border-box;
}
.sidebar-notif-badge.hidden {
  display: none !important;
}

/* Animations */
@keyframes bellRing {
  0%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(-10deg); }
  20%, 40% { transform: rotate(10deg); }
  50% { transform: rotate(0deg); }
}

@keyframes badgeAppear {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes badgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, #ef4444) 40%, transparent);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent, #ef4444) 60%, transparent);
  }
}

/* ========== PREMIUM PANEL ========== */

.notif-premium-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}

.notif-premium-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.notif-premium-panel {
  position: fixed;
  top: 0;
  right: -480px;
  width: 480px;
  height: 100vh;
  background: var(--surface, linear-gradient(135deg, #111827 0%, #1f2937 100%));
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.notif-premium-panel.visible {
  right: 0;
}

/* Header */
.notif-premium-header {
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 15%, transparent) 0%,
    rgba(59, 130, 246, 0.1) 100%);
  flex-shrink: 0;
}

.notif-premium-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.notif-premium-title-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f7e5a0, #d4af37, #b8860b);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.notif-premium-title-icon svg {
  width: 18px;
  height: 18px;
  color: #1a1a2e;
}

.notif-premium-title h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.notif-premium-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-left: 44px;
}

/* Tabs */
.notif-premium-tabs {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}

.notif-premium-tab {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.notif-premium-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.notif-premium-tab.active {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 20%, transparent) 0%,
    rgba(59, 130, 246, 0.1) 100%);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent-light);
}

.notif-premium-tab-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-premium-tab.active .notif-premium-tab-badge {
  background: var(--accent-light);
}

/* List */
.notif-premium-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notif-premium-list::-webkit-scrollbar {
  width: 6px;
}

.notif-premium-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.notif-premium-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 3px;
}

.notif-premium-list::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Empty state */
.notif-premium-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
}

.notif-premium-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 10%, transparent) 0%,
    rgba(59, 130, 246, 0.05) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.notif-premium-empty-icon svg {
  width: 40px;
  height: 40px;
  color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.notif-premium-empty h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.notif-premium-empty p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* Item */
.notif-premium-item {
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: visible;
}

.notif-premium-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #f7e5a0, #d4af37, #b8860b);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.notif-premium-item:hover {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 10%, transparent) 0%,
    rgba(59, 130, 246, 0.05) 100%);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateX(4px);
}

.notif-premium-item:hover::before {
  opacity: 1;
}

.notif-premium-item.unread {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 15%, transparent) 0%,
    rgba(59, 130, 246, 0.1) 100%);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.notif-premium-item.unread::before {
  opacity: 1;
}

.notif-premium-item-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.notif-premium-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.notif-premium-item-icon.priority-urgent {
  background: transparent;
  animation: goldPulse 2.5s ease infinite;
}

.notif-premium-item-icon.priority-high {
  background: transparent;
}

.notif-premium-item-icon.priority-medium {
  background: transparent;
}

.notif-premium-item-icon.priority-low {
  background: transparent;
  opacity: 0.7;
}

@keyframes goldPulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6)); }
}

.notif-premium-item-content {
  flex: 1;
  min-width: 0;
}

.notif-premium-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.notif-premium-item-message {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.notif-premium-item-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.notif-premium-item-time {
  font-size: 12px;
  color: var(--text-tertiary);
}

.notif-premium-item-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.notif-premium-item-action {
  padding: 4px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-light);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notif-premium-item-action:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Footer */
.notif-premium-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.notif-premium-btn {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.notif-premium-btn-primary {
  background: linear-gradient(135deg, #f7e5a0, #d4af37, #b8860b);
  color: #1a1a2e;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.notif-premium-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.45);
}

.notif-premium-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.notif-premium-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Close button */
.notif-premium-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.notif-premium-close:hover {
  background: rgba(255, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

.notif-premium-close svg {
  width: 18px;
  height: 18px;
}

/* Responsive */
@media (max-width: 768px) {
  .notif-premium-panel {
    width: 100%;
    right: -100%;
  }
}

/* ========== PANEL FIX v1.1 — Mar 2026 ========== */

/* 1. Panel width: 380px fixed */
.notif-premium-panel {
  width: 380px;
  right: -380px;
  max-width: 100vw;
  visibility: hidden;
  pointer-events: none;
}
.notif-premium-panel.visible {
  right: 0;
  visibility: visible;
  pointer-events: auto;
}

/* 2. Header layout fix */
.notif-premium-header {
  padding: 20px 20px 14px;
  flex-shrink: 0;
  overflow: visible;
}
.notif-premium-title {
  padding-right: 40px;
}
.notif-premium-title h2 {
  font-size: 17px;
}

/* Subtitle + Tout lu on same row */
.notif-premium-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.notif-premium-header-row .notif-premium-subtitle {
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.notif-premium-markall-header {
  flex-shrink: 0;
  padding: 5px 12px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  white-space: nowrap;
}

/* 3. Tabs: horizontal scroll, never truncated */
.notif-premium-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin-top: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.notif-premium-tabs::-webkit-scrollbar {
  display: none;
}
.notif-premium-tab {
  flex: 0 0 auto;
  padding: 5px 10px;
  font-size: 11px;
  min-height: 30px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* 4. Badge in tabs: centered */
.notif-premium-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}

/* 5. List: proper flex overflow */
.notif-premium-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 12px;
}

/* 6. Footer shrink-proof */
.notif-premium-footer {
  flex-shrink: 0;
  padding: 14px 20px;
}

/* 7. Close button position */
.notif-premium-close {
  top: 20px;
  right: 20px;
}

/* 8. Group badge alignment */
.notif-group-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}

/* 9. Responsive */
@media (max-width: 480px) {
  .notif-premium-panel {
    width: 100vw;
    right: -100vw;
  }
  .notif-premium-panel.visible {
    right: 0;
  }
}

/* ========== Hide Spotify player behind notification panel ========== */
.notif-premium-panel.visible ~ .sp-player,
.notif-premium-overlay.visible ~ .sp-player,
body:has(.notif-premium-panel.visible) .sp-player {
  z-index: 1 !important;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, z-index 0s;
}

/* ========== PREMIUM LAYOUT FIX v1.2 — Mar 2026 ========== */

/* 1. Group header: two-line layout */
.notif-group-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 10px 14px !important;
}

.notif-group-header-line1 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-group-header-line2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-left: 28px; /* align under label (badge 20px + gap 8px) */
}

.notif-group-header-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Remove old left/right containers (no longer used) */
.notif-group-header-left,
.notif-group-header-right {
    display: none !important;
}

/* 2. Tabs: single line scrollable, hidden scrollbar */
.notif-premium-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    gap: 5px !important;
    padding-bottom: 2px !important;
}
.notif-premium-tabs::-webkit-scrollbar {
    display: none !important;
}
.notif-premium-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* 3. Footer button: no line break */
.notif-premium-btn-primary {
    white-space: nowrap !important;
}

/* 4. Consistent 16px panel padding */
.notif-premium-header {
    padding: 16px 16px 12px !important;
}
.notif-premium-list {
    padding: 16px !important;
}
.notif-premium-footer {
    padding: 16px !important;
}
.notif-premium-close {
    top: 16px !important;
    right: 16px !important;
}

/* ========== FIX: Tout lu btn + close btn styling — Mar 2026 ========== */

/* Close button: transparent bg, subtle, not a white square */
.notif-premium-close {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted, rgba(255,255,255,0.4)) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
}
.notif-premium-close:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border: none !important;
    color: #ef4444 !important;
}

/* Tout lu header button: muted style, not bright white */
.notif-premium-markall-header {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-muted, rgba(255,255,255,0.5)) !important;
}
.notif-premium-markall-header:hover {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #22c55e !important;
}
/* ===== css/analytics.css?v=2602240010 ===== */
/**
 * Analytics Module - Premium Styles
 * Dashboard with glassmorphism cards and charts
 */

/* ========== Container ========== */
.analytics-container {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.analytics-header {
    margin-bottom: 32px;
}

.analytics-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.analytics-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* ========== Stats Cards Row ========== */
.analytics-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

@media (max-width: 1024px) {
    .analytics-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .analytics-stats-row {
        grid-template-columns: 1fr;
    }
}

.analytics-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.analytics-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-secondary, var(--accent)));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.analytics-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.analytics-stat-card:hover::before {
    opacity: 1;
}

.analytics-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.analytics-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--accent-muted, color-mix(in srgb, var(--accent) 15%, transparent));
}

.analytics-stat-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.analytics-stat-trend.up {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
}

.analytics-stat-trend.down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

.analytics-stat-trend.neutral {
    color: var(--text-muted);
    background: var(--hover);
}

.analytics-stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 8px;
}

.analytics-stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ========== Charts Section ========== */
.analytics-charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

@media (max-width: 900px) {
    .analytics-charts-row {
        grid-template-columns: 1fr;
    }
}

.analytics-chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}

.analytics-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.analytics-chart-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.analytics-chart-period {
    display: flex;
    gap: 8px;
}

.analytics-period-btn {
    padding: 6px 14px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.analytics-period-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.analytics-period-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.analytics-chart-canvas {
    width: 100%;
    height: 250px;
}

/* ========== Streak & Productivity ========== */
.analytics-streak-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.analytics-streak-main {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, var(--accent-muted, color-mix(in srgb, var(--accent) 10%, transparent)) 0%, transparent 100%);
    border-radius: 12px;
}

.analytics-streak-icon {
    font-size: 3rem;
    margin-bottom: 8px;
}

.analytics-streak-value {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.analytics-streak-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.analytics-streak-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.analytics-streak-stat {
    text-align: center;
    padding: 16px;
    background: var(--background);
    border-radius: 10px;
}

.analytics-streak-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.analytics-streak-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ========== Recent Activity ========== */
.analytics-activity-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}

.analytics-activity-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.analytics-activity-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.analytics-activity-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.analytics-activity-item:hover {
    background: var(--hover);
}

.analytics-activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.analytics-activity-icon.note { background: rgba(59, 130, 246, 0.15); }
.analytics-activity-icon.task { background: rgba(34, 197, 94, 0.15); }
.analytics-activity-icon.message { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.analytics-activity-icon.achievement { background: rgba(245, 158, 11, 0.15); }

.analytics-activity-content {
    flex: 1;
    min-width: 0;
}

.analytics-activity-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-activity-text strong {
    color: var(--accent);
}

.analytics-activity-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ========== Loading ========== */
.analytics-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    color: var(--text-muted);
}

.analytics-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* ===== css/formateur-analytics.css?v=2602240010 ===== */
/* ============================================================
   FORMATEUR ANALYTICS DASHBOARD — fa-* classes
   ============================================================ */

/* Root */
.fa-root { max-width: 1280px; margin: 0 auto; padding: 0 4px 40px; }

/* Header */
.fa-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 28px; padding-bottom: 20px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.07));
}
.fa-header-left { display: flex; align-items: center; gap: 16px; }
.fa-header-icon {
    width: 46px; height: 46px; border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    display: flex; align-items: center; justify-content: center; color: #fff;
    flex-shrink: 0;
}
.fa-title { font-size: 22px; font-weight: 800; color: var(--text, #fff); margin: 0; }
.fa-subtitle { font-size: 13px; color: var(--text-muted, #9ca3af); margin: 2px 0 0; }

/* Buttons */
.fa-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
    border-radius: 10px; border: none; cursor: pointer; font-size: 13px;
    font-weight: 600; transition: all .18s; }
.fa-btn-primary { background: var(--accent); color: #fff; }
.fa-btn-primary:hover { background: var(--accent); }
.fa-btn-secondary { background: var(--surface, #1e1e2e); color: var(--text, #fff);
    border: 1px solid var(--border, rgba(255,255,255,.1)); }
.fa-btn-secondary:hover { background: var(--surface-hover, rgba(255,255,255,.06)); }
.fa-btn-ghost { background: none; color: var(--text-muted, #9ca3af); padding: 6px 10px; }
.fa-btn-ghost:hover { color: var(--text, #fff); }
.fa-btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 8px; }

/* Back button */
.fa-back-btn { margin-bottom: 20px; }

/* Formation header */
.fa-formation-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.fa-formation-emoji { font-size: 38px; }
.fa-formation-title { font-size: 20px; font-weight: 800; color: var(--text,#fff); margin: 0; }
.fa-formation-meta { font-size: 13px; color: var(--text-muted,#9ca3af); margin: 2px 0 0; }

/* KPI Grid */
.fa-kpi-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;
}
.fa-kpi-grid--6 { grid-template-columns: repeat(6, 1fr); }
@media(max-width:900px) {
    .fa-kpi-grid { grid-template-columns: repeat(2,1fr); }
    .fa-kpi-grid--6 { grid-template-columns: repeat(3,1fr); }
}
@media(max-width:600px) {
    .fa-kpi-grid, .fa-kpi-grid--6 { grid-template-columns: repeat(2,1fr); }
}

.fa-kpi-card {
    background: var(--surface, #1e1e2e);
    border: 1px solid var(--border, rgba(255,255,255,.07));
    border-radius: 16px; padding: 18px 20px;
    position: relative; overflow: hidden; transition: transform .18s;
}
.fa-kpi-card:hover { transform: translateY(-2px); }
.fa-kpi-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: 16px 16px 0 0;
}
.fa-kpi--indigo::before { background: var(--accent); }
.fa-kpi--violet::before { background: var(--accent-light); }
.fa-kpi--emerald::before { background: #10b981; }
.fa-kpi--cyan::before { background: #06b6d4; }
.fa-kpi--amber::before { background: #f59e0b; }
.fa-kpi--rose::before { background: #f43f5e; }
.fa-kpi--up::before { background: #22c55e; }
.fa-kpi--down::before { background: #ef4444; }

.fa-kpi-icon { font-size: 22px; margin-bottom: 10px; }
.fa-kpi-value { font-size: 28px; font-weight: 800; color: var(--text,#fff); line-height: 1; margin-bottom: 4px; }
.fa-kpi-label { font-size: 12px; color: var(--text-muted,#9ca3af); font-weight: 500; }

/* Insights row */
.fa-insights-row { display: flex; gap: 16px; margin-bottom: 24px; }
@media(max-width:600px) { .fa-insights-row { flex-direction: column; } }
.fa-insight {
    flex: 1; border-radius: 14px; padding: 16px 18px;
    border: 1px solid var(--border, rgba(255,255,255,.07));
}
.fa-insight--best { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.2); }
.fa-insight--risk { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.2); }
.fa-insight-label { font-size: 11px; color: var(--text-muted,#9ca3af); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.fa-insight-value { font-size: 16px; font-weight: 700; color: var(--text,#fff); margin-bottom: 4px; }
.fa-insight-meta { font-size: 12px; color: var(--text-muted,#9ca3af); }

/* Cards */
.fa-card {
    background: var(--surface, #1e1e2e);
    border: 1px solid var(--border, rgba(255,255,255,.07));
    border-radius: 16px; padding: 20px; margin-bottom: 20px;
}
.fa-card-header {
    font-size: 14px; font-weight: 700; color: var(--text,#fff);
    margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}

/* Charts Row */
.fa-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
@media(max-width:768px) { .fa-charts-row { grid-template-columns: 1fr; } }

/* Tables */
.fa-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fa-table thead tr { border-bottom: 1px solid var(--border, rgba(255,255,255,.07)); }
.fa-table th { text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-muted,#9ca3af); padding: 0 10px 10px; }
.fa-table td { padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,.04);
    color: var(--text,#fff); }
.fa-table tr:last-child td { border-bottom: none; }
.fa-table tbody tr:hover td { background: rgba(255,255,255,.025); }
.fa-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Status badges */
.fa-badge {
    display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 700;
}
.fa-badge--green { background: rgba(34,197,94,.15); color: #22c55e; }
.fa-badge--gray  { background: rgba(156,163,175,.15); color: #9ca3af; }
.fa-badge--amber { background: rgba(245,158,11,.15); color: #f59e0b; }
.fa-badge--red   { background: rgba(239,68,68,.15); color: #ef4444; margin-left: 8px; }

/* Formation name cell */
.fa-formation-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.fa-emoji { font-size: 18px; }

/* Progress bars */
.fa-progress-wrap {
    display: flex; align-items: center; gap: 8px; min-width: 100px;
}
.fa-progress-bar {
    height: 6px; border-radius: 3px; flex: 1; max-width: 80px;
    transition: width .3s;
}
.fa-progress-label { font-size: 12px; font-weight: 700; color: var(--text-muted,#9ca3af); }

/* Stat classes */
.fa-stat-ok     { color: #22c55e !important; }
.fa-stat-warn   { color: #f59e0b !important; }
.fa-stat-danger { color: #ef4444 !important; }

/* Dropout chart */
.fa-dropout-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.fa-dropout-item { display: flex; align-items: center; gap: 10px; }
.fa-dropout-label { font-size: 12px; color: var(--text,#fff); width: 140px; flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-dropout-bar-wrap { flex: 1; height: 8px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; }
.fa-dropout-bar { height: 100%; border-radius: 4px; transition: width .4s; }
.fa-dropout-pct { font-size: 12px; font-weight: 700; width: 36px; text-align: right; }

/* Student cell */
.fa-student-cell { display: flex; align-items: center; gap: 8px; }
.fa-avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--accent);
    color: #fff; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Lesson title */
.fa-lesson-title { font-weight: 600; }

/* States */
.fa-loading {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; padding: 60px 20px; color: var(--text-muted,#9ca3af);
}
.fa-spinner {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.1); border-top-color: var(--accent-light);
    animation: fa-spin .7s linear infinite;
}
@keyframes fa-spin { to { transform: rotate(360deg); } }

.fa-error {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 60px 20px; color: var(--text-muted,#9ca3af); text-align: center;
}
.fa-error span { font-size: 32px; }

.fa-empty { padding: 20px; text-align: center; color: var(--text-muted,#9ca3af); font-size: 13px; }

/* ── Additional elements (fa-av, fa-lesson-name, fa-dropout) ── */
.fa-av {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
    color: #fff; font-size: 10px; font-weight: 700; margin-right: 6px;
    flex-shrink: 0;
}
.fa-lesson-name { font-weight: 600; max-width: 200px; }
.fa-lessons-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fa-lessons-table th {
    text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase;
    letter-spacing: .04em; color: rgba(255,255,255,.4); padding: 0 8px 8px;
}
.fa-lessons-table td { padding: 9px 8px; border-bottom: 1px solid rgba(255,255,255,.04); color: rgba(255,255,255,.85); }
.fa-lessons-table tr:last-child td { border-bottom: none; }
.fa-lessons-table tbody tr:hover td { background: rgba(255,255,255,.025); }
.fa-dropout-list { display: flex; flex-direction: column; gap: 9px; padding: 4px 0; }
.fa-dropout-item { display: flex; align-items: center; gap: 8px; }
.fa-dropout-label { font-size: 12px; color: rgba(255,255,255,.8); width: 130px; flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-dropout-bar-wrap { flex: 1; height: 7px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; }
.fa-dropout-bar { height: 100%; border-radius: 4px; transition: width .4s; }


/* ===== css/advanced-analytics.css?v=2602240010 ===== */
/**
 * ADVANCED ANALYTICS CSS v1.0
 * Dashboard formateur — Insights profonds sur l'apprentissage
 */

/* ═══════════════════════════════════════════════════════════
   CONTENEUR PRINCIPAL
═══════════════════════════════════════════════════════════ */

.adv-analytics {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.adv-analytics-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.adv-analytics-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    flex: 1;
}

.adv-analytics-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 3px 0 0;
}

/* ═══════════════════════════════════════════════════════════
   GRILLE DES SECTIONS
═══════════════════════════════════════════════════════════ */

.adv-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.adv-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

@media (max-width: 1100px) {
    .adv-grid-2, .adv-grid-3 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   CARTES SECTION
═══════════════════════════════════════════════════════════ */

.adv-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.adv-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    gap: 10px;
}

.adv-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.adv-card-body {
    padding: 20px;
}

.adv-card-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent-light);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ═══════════════════════════════════════════════════════════
   SECTION TEMPS RÉEL
═══════════════════════════════════════════════════════════ */

.adv-realtime-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    animation: rtPulse 1.8s ease-out infinite;
    flex-shrink: 0;
}

@keyframes rtPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.adv-realtime-kpis {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.adv-rt-kpi {
    flex: 1;
    min-width: 100px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    text-align: center;
}

.adv-rt-kpi-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.adv-rt-kpi-value.green { color: #10b981; }
.adv-rt-kpi-value.purple { color: var(--accent-light); }
.adv-rt-kpi-value.orange { color: #f59e0b; }

.adv-rt-kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.adv-feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}

.adv-feed-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid var(--border);
    animation: feedSlideIn 0.3s ease;
}

@keyframes feedSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.adv-feed-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
}

.adv-feed-dot.orange { background: #f59e0b; }
.adv-feed-dot.purple { background: var(--accent-light); }

.adv-feed-name {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.adv-feed-lesson {
    color: var(--text-muted);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adv-feed-time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   COURBE D'ENGAGEMENT
═══════════════════════════════════════════════════════════ */

.adv-engagement-chart {
    position: relative;
    height: 260px;
}

.adv-engagement-chart canvas {
    width: 100% !important;
}

.adv-drop-points {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.adv-drop-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ═══════════════════════════════════════════════════════════
   HEATMAP 7×24
═══════════════════════════════════════════════════════════ */

.adv-heatmap {
    overflow-x: auto;
}

.adv-heatmap-grid {
    display: grid;
    grid-template-columns: 40px repeat(24, 1fr);
    gap: 2px;
    min-width: 540px;
}

.adv-heatmap-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 10px;
    color: var(--text-muted);
    padding-right: 6px;
    white-space: nowrap;
}

.adv-heatmap-hour {
    font-size: 9px;
    color: var(--text-muted);
    text-align: center;
    padding-bottom: 2px;
}

.adv-heatmap-cell {
    height: 20px;
    border-radius: 3px;
    background: rgba(124, 58, 237, var(--intensity, 0.05));
    transition: transform 0.1s;
    cursor: default;
    position: relative;
}

.adv-heatmap-cell:hover {
    transform: scale(1.3);
    z-index: 2;
}

.adv-heatmap-cell:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 20, 0.95);
    color: #fff;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 99;
}

.adv-heatmap-insight {
    margin-top: 12px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════
   TABLEAU TEMPS MOYEN PAR LEÇON
═══════════════════════════════════════════════════════════ */

.adv-time-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.adv-time-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.adv-time-table td {
    padding: 9px 12px;
    color: var(--text);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
}

.adv-time-table tr:last-child td {
    border-bottom: none;
}

.adv-time-table tr:hover td {
    background: rgba(255,255,255,0.03);
}

.adv-time-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.adv-time-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

.adv-time-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent-light);
    transition: width 0.6s ease;
}

.adv-time-bar-fill.green  { background: #10b981; }
.adv-time-bar-fill.red    { background: #ef4444; }
.adv-time-bar-fill.orange { background: #f59e0b; }

.adv-time-val {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    min-width: 48px;
    text-align: right;
}

.adv-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
}

.adv-time-badge.green {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.adv-time-badge.red {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.adv-time-badge.neutral {
    background: rgba(255,255,255,0.07);
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════
   POINTS DE FRICTION
═══════════════════════════════════════════════════════════ */

.adv-friction-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adv-friction-item {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.2s;
}

.adv-friction-item.critical {
    border-color: rgba(239, 68, 68, 0.35);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, var(--bg-tertiary) 100%);
}

.adv-friction-item.warning {
    border-color: rgba(245, 158, 11, 0.3);
}

.adv-friction-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.adv-friction-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    background: rgba(239, 68, 68, 0.12);
}

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

.adv-friction-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adv-friction-module {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.adv-friction-dropout {
    font-size: 22px;
    font-weight: 800;
    color: #ef4444;
    line-height: 1;
    flex-shrink: 0;
}

.adv-friction-dropout.warning { color: #f59e0b; }

.adv-friction-bars {
    display: flex;
    gap: 12px;
}

.adv-friction-metric {
    flex: 1;
}

.adv-friction-metric-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.adv-friction-bar-bg {
    height: 5px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}

.adv-friction-bar-fg {
    height: 100%;
    border-radius: 3px;
    background: #ef4444;
    transition: width 0.8s ease;
}

.adv-friction-bar-fg.green { background: #10b981; }

.adv-friction-ai {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

.adv-ai-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════
   COHORTES
═══════════════════════════════════════════════════════════ */

.adv-cohort-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.adv-cohort-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.adv-cohort-table td {
    padding: 10px 12px;
    color: var(--text);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
}

.adv-cohort-table tr:last-child td { border-bottom: none; }

.adv-cohort-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.adv-cohort-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.07);
    border-radius: 3px;
    overflow: hidden;
    min-width: 80px;
}

.adv-cohort-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    transition: width 0.7s ease;
}

/* ═══════════════════════════════════════════════════════════
   PROFIL ÉTUDIANT (MODAL TIMELINE)
═══════════════════════════════════════════════════════════ */

.adv-student-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: advOverlayIn 0.2s ease;
}

@keyframes advOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.adv-student-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 100px rgba(0,0,0,0.5);
    animation: advModalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes advModalIn {
    from { opacity: 0; transform: scale(0.93) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.adv-student-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.adv-student-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.adv-student-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.adv-student-email {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.adv-student-modal-close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 16px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.adv-student-modal-close:hover {
    background: var(--bg-primary);
    color: var(--text);
}

.adv-student-kpis {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.adv-student-kpi {
    flex: 1;
    min-width: 90px;
    text-align: center;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    border: 1px solid var(--border);
}

.adv-student-kpi-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.adv-student-kpi-val.purple { color: var(--accent-light); }
.adv-student-kpi-val.green  { color: #10b981; }

.adv-student-kpi-lbl {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.adv-churn-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    align-self: center;
}

.adv-churn-badge.low    { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
.adv-churn-badge.medium { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.adv-churn-badge.high   { background: rgba(239,68,68,0.15);  color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }

/* Timeline */
.adv-timeline-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.adv-timeline-module {
    margin-bottom: 20px;
}

.adv-timeline-module-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.adv-timeline-lesson {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 6px;
    font-size: 13px;
}

.adv-timeline-lesson.completed {
    border-color: rgba(16, 185, 129, 0.25);
}

.adv-timeline-lesson.in-progress {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.adv-timeline-lesson-status {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

.adv-timeline-lesson-status.done   { background: rgba(16,185,129,0.2); color: #10b981; }
.adv-timeline-lesson-status.active { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-light); }
.adv-timeline-lesson-status.empty  { background: rgba(255,255,255,0.06); color: var(--text-muted); }

.adv-timeline-lesson-name {
    flex: 1;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adv-timeline-lesson-time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.adv-timeline-lesson-bar {
    width: 70px;
    height: 5px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.adv-timeline-lesson-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: 3px;
}

.adv-timeline-lesson-bar-fill.green { background: #10b981; }

/* ═══════════════════════════════════════════════════════════
   ÉTAT VIDE / CHARGEMENT
═══════════════════════════════════════════════════════════ */

.adv-empty {
    text-align: center;
    padding: 32px;
    color: var(--text-muted);
    font-size: 13px;
}

.adv-empty-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.adv-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: var(--text-muted);
    font-size: 13px;
}

.adv-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: advSpin 0.7s linear infinite;
}

@keyframes advSpin {
    to { transform: rotate(360deg); }
}

/* Refresh polling indicator */
.adv-polling-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    padding: 3px 8px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border);
}


/* ===== css/peer-evaluation.css?v=2602240010 ===== */
/**
 * PEER EVALUATION — Évaluation collaborative
 * Préfixe : .peer-*   (isolé du reste de l'app)
 */

/* ── Layout principal ───────────────────────────────────────────────────────── */
.peer-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    animation: peerFadeIn 0.3s ease;
}
@keyframes peerFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Onglets ────────────────────────────────────────────────────────────────── */
.peer-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg-secondary, #1a1a2e);
    border-radius: 12px 12px 0 0;
    padding: 6px 6px 0;
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-bottom: none;
}
.peer-tab {
    padding: 9px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted, rgba(255,255,255,.45));
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.peer-tab:hover { color: var(--text, #fff); background: rgba(255,255,255,.05); }
.peer-tab.active {
    background: var(--bg-primary, #0d0d1a);
    color: var(--accent-light);
    box-shadow: 0 -2px 0 var(--accent) inset;
}
.peer-tab-badge {
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
    min-width: 18px;
    text-align: center;
}

.peer-body {
    background: var(--bg-primary, #0d0d1a);
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 0 0 12px 12px;
    padding: 24px;
    min-height: 400px;
}

/* ── Cards exercices ────────────────────────────────────────────────────────── */
.peer-exercises-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.peer-exercise-card {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 14px;
    padding: 20px;
    transition: border-color 0.2s, transform 0.2s;
    cursor: default;
}
.peer-exercise-card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    transform: translateY(-2px);
}
.peer-exercise-card.inactive { opacity: 0.5; }

.peer-exercise-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.peer-type-text   { background: rgba(59,130,246,.15); color: #60a5fa; }
.peer-type-file   { background: rgba(249,115,22,.15);  color: #fb923c; }
.peer-type-video  { background: rgba(239,68,68,.15);   color: #f87171; }
.peer-type-code   { background: rgba(16,185,129,.15);  color: #34d399; }

.peer-exercise-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text, #fff);
    margin: 0 0 6px;
    line-height: 1.3;
}
.peer-exercise-lesson {
    font-size: 12px;
    color: var(--text-muted, rgba(255,255,255,.45));
    margin-bottom: 14px;
}
.peer-exercise-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-muted, rgba(255,255,255,.45));
    border-top: 1px solid var(--border, rgba(255,255,255,.08));
    padding-top: 12px;
    margin-top: 12px;
}
.peer-exercise-stat strong {
    color: var(--text, #fff);
    display: block;
    font-size: 20px;
    font-weight: 700;
}
.peer-exercise-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

/* ── Bouton créer ───────────────────────────────────────────────────────────── */
.peer-btn-create {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--accent), var(--accent));
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    font-family: inherit;
}
.peer-btn-create:hover { opacity: 0.9; transform: translateY(-1px); }

.peer-btn-sm {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255,255,255,.1));
    background: transparent;
    color: var(--text-muted, rgba(255,255,255,.5));
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.peer-btn-sm:hover { background: rgba(255,255,255,.06); color: var(--text, #fff); }
.peer-btn-sm.danger:hover { background: rgba(239,68,68,.1); color: #f87171; border-color: rgba(239,68,68,.3); }
.peer-btn-sm.primary { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-light); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.peer-btn-sm.primary:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* ── Modal exercice ─────────────────────────────────────────────────────────── */
.peer-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: peerFadeIn 0.2s ease;
}
.peer-modal {
    background: var(--bg-primary, #0d0d1a);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 18px;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.peer-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
}
.peer-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text, #fff);
}
.peer-modal-close {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,.06);
    color: var(--text-muted, rgba(255,255,255,.5));
    cursor: pointer;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
    font-family: inherit;
}
.peer-modal-close:hover { background: rgba(255,255,255,.12); color: var(--text, #fff); }
.peer-modal-body { padding: 20px 24px 24px; }

/* ── Formulaire exercice ────────────────────────────────────────────────────── */
.peer-form-group { margin-bottom: 16px; }
.peer-form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, rgba(255,255,255,.55));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.peer-form-input,
.peer-form-textarea,
.peer-form-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 10px;
    color: var(--text, #fff);
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.peer-form-input:focus,
.peer-form-textarea:focus,
.peer-form-select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}
.peer-form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.peer-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Critères d'évaluation ──────────────────────────────────────────────────── */
.peer-criteria-list { display: flex; flex-direction: column; gap: 8px; }
.peer-criterion-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 10px;
    padding: 8px 12px;
}
.peer-criterion-row input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text, #fff);
    font-size: 13px;
    font-family: inherit;
    outline: none;
}
.peer-criterion-score {
    width: 52px;
    text-align: center;
    background: transparent;
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 6px;
    padding: 3px 6px;
    color: var(--text, #fff);
    font-size: 12px;
    font-family: inherit;
}
.peer-criterion-remove {
    width: 24px; height: 24px;
    border: none;
    background: transparent;
    color: rgba(239,68,68,.5);
    cursor: pointer;
    font-size: 14px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
    font-family: inherit;
}
.peer-criterion-remove:hover { background: rgba(239,68,68,.1); color: #f87171; }
.peer-add-criterion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--accent);
    background: none;
    border: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    margin-top: 4px;
}
.peer-add-criterion:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

/* ── Table soumissions ──────────────────────────────────────────────────────── */
.peer-submissions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.peer-submissions-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, rgba(255,255,255,.45));
    border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
}
.peer-submissions-table td {
    padding: 12px 12px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.05));
    vertical-align: middle;
    color: var(--text, #fff);
}
.peer-submissions-table tr:hover td { background: rgba(255,255,255,.02); }

/* ── Status badges ──────────────────────────────────────────────────────────── */
.peer-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.peer-status-pending    { background: rgba(251,191,36,.12);  color: #fbbf24; }
.peer-status-evaluating { background: rgba(59,130,246,.12);  color: #60a5fa; }
.peer-status-completed  { background: rgba(16,185,129,.12);  color: #34d399; }
.peer-status-override   { background: color-mix(in srgb, var(--accent) 12%, transparent);  color: var(--accent-light); }

/* ── Score display ──────────────────────────────────────────────────────────── */
.peer-score {
    font-weight: 700;
    font-size: 15px;
    color: #34d399;
}
.peer-score-na { color: var(--text-muted, rgba(255,255,255,.3)); font-size: 12px; }

/* ── Panel détail soumission ────────────────────────────────────────────────── */
.peer-submission-detail {
    background: var(--bg-secondary, #1a1a2e);
    border-radius: 12px;
    border: 1px solid var(--border, rgba(255,255,255,.08));
    padding: 16px;
    margin-top: 8px;
}
.peer-submission-content {
    font-size: 13px;
    color: var(--text, rgba(255,255,255,.85));
    line-height: 1.6;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
    font-family: inherit;
}
.peer-feedback-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.peer-feedback-item {
    background: var(--bg-primary, #0d0d1a);
    border-radius: 10px;
    border-left: 3px solid var(--accent);
    padding: 10px 14px;
}
.peer-feedback-scores {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.peer-feedback-score-tag {
    font-size: 11px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-light);
    padding: 2px 8px;
    border-radius: 6px;
}
.peer-feedback-text {
    font-size: 12px;
    color: var(--text, rgba(255,255,255,.75));
    line-height: 1.5;
    margin: 6px 0 0;
}
.peer-helpful-btns {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.peer-helpful-btn {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--border, rgba(255,255,255,.1));
    background: transparent;
    color: var(--text-muted, rgba(255,255,255,.4));
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.peer-helpful-btn.yes:hover { background: rgba(16,185,129,.1); color: #34d399; border-color: rgba(16,185,129,.3); }
.peer-helpful-btn.no:hover  { background: rgba(239,68,68,.1);  color: #f87171; border-color: rgba(239,68,68,.3); }
.peer-helpful-btn.active-yes { background: rgba(16,185,129,.15); color: #34d399; border-color: rgba(16,185,129,.4); }
.peer-helpful-btn.active-no  { background: rgba(239,68,68,.1);   color: #f87171; border-color: rgba(239,68,68,.3); }

/* ── Évaluation — grille de notation ───────────────────────────────────────── */
.peer-eval-panel {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
}
.peer-eval-panel-header {
    padding: 14px 18px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.peer-eval-panel-title { font-size: 14px; font-weight: 700; color: var(--text, #fff); }
.peer-eval-panel-body  { padding: 18px; }

.peer-criterion-eval {
    margin-bottom: 16px;
}
.peer-criterion-eval-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text, rgba(255,255,255,.85));
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.peer-criterion-eval-label span {
    font-size: 11px;
    color: var(--text-muted, rgba(255,255,255,.4));
}
.peer-stars {
    display: flex;
    gap: 6px;
}
.peer-star {
    width: 32px; height: 32px;
    font-size: 22px;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--border, rgba(255,255,255,.15));
    transition: color 0.15s, transform 0.1s;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.peer-star:hover,
.peer-star.active { color: #f59e0b; transform: scale(1.1); }

.peer-eval-feedback-area {
    margin-top: 4px;
}
.peer-eval-feedback-area textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px 12px;
    background: var(--bg-primary, #0d0d1a);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 10px;
    color: var(--text, #fff);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.5;
    transition: border-color 0.2s;
}
.peer-eval-feedback-area textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}
.peer-char-counter {
    font-size: 11px;
    color: var(--text-muted, rgba(255,255,255,.3));
    text-align: right;
    margin-top: 4px;
}
.peer-char-counter.ok { color: #34d399; }

/* ── Empty state ────────────────────────────────────────────────────────────── */
.peer-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--text-muted, rgba(255,255,255,.35));
}
.peer-empty-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.5;
}
.peer-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text, rgba(255,255,255,.6));
    margin-bottom: 6px;
}

/* ── KPI barre recap ────────────────────────────────────────────────────────── */
.peer-kpi-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.peer-kpi {
    flex: 1;
    min-width: 120px;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 12px;
    padding: 14px 16px;
    text-align: center;
}
.peer-kpi-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--accent-light);
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}
.peer-kpi-label {
    font-size: 11px;
    color: var(--text-muted, rgba(255,255,255,.4));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Filtre exercice ────────────────────────────────────────────────────────── */
.peer-filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.peer-filter-bar select {
    padding: 7px 12px;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 8px;
    color: var(--text, #fff);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.peer-filter-bar select:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* ── Loading ────────────────────────────────────────────────────────────────── */
.peer-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 24px;
    color: var(--text-muted, rgba(255,255,255,.4));
    font-size: 13px;
}
.peer-spinner {
    width: 20px; height: 20px;
    border: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: peerSpin 0.7s linear infinite;
}
@keyframes peerSpin { to { transform: rotate(360deg); } }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .peer-exercises-grid { grid-template-columns: 1fr; }
    .peer-form-row { grid-template-columns: 1fr; }
    .peer-kpi-bar { gap: 8px; }
    .peer-kpi { min-width: 100px; }
    .peer-modal { border-radius: 14px; }
}


/* ===== css/reports.css?v=2602240010 ===== */
/**
 * Reports View Styles
 * ProductiveApp v4.0
 */

/* Period Selector */
.reports-period-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 4px;
    background: var(--bg-card);
    border-radius: 12px;
    width: fit-content;
}

.period-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.period-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.period-btn.active {
    background: var(--accent);
    color: white;
}

/* Reports Content */
.reports-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.reports-loading,
.reports-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--text-muted);
}

.reports-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Summary Cards */
.reports-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.report-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

.report-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-card-icon svg {
    width: 24px;
    height: 24px;
}

.report-card-content {
    flex: 1;
}

.report-card-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.report-card-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Charts Section */
.reports-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

/* Report Section */
.report-section {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-color);
}

.report-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.report-section h3 svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
}

/* Activity Chart */
.activity-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 150px;
    padding-top: 20px;
}

.activity-bar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.activity-bar {
    width: 100%;
    max-width: 40px;
    background: linear-gradient(180deg, var(--accent), var(--accent-light));
    border-radius: 6px 6px 0 0;
    min-height: 4px;
    position: relative;
    transition: height 0.3s ease;
}

.activity-bar:hover {
    opacity: 0.8;
}

.activity-count {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.activity-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
    text-align: center;
    white-space: nowrap;
}

/* Status Distribution */
.status-distribution {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.status-bar {
    display: flex;
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-tertiary);
}

.status-segment {
    transition: width 0.3s ease;
}

.status-segment.todo {
    background: var(--text-muted);
}

.status-segment.in-progress {
    background: var(--warning);
}

.status-segment.done {
    background: var(--success);
}

.status-segment.empty {
    background: var(--bg-tertiary);
}

.status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

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

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

/* Projects List */
.projects-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.projects-list .no-data {
    color: var(--text-muted);
    text-align: center;
    padding: 24px;
}

.project-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    gap: 16px;
}

.project-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.project-name {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-count {
    font-size: 12px;
    color: var(--text-muted);
}

.project-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 150px;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--success);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-percent {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 40px;
    text-align: right;
}

/* Responsive */
@media (max-width: 768px) {
    .reports-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .reports-charts {
        grid-template-columns: 1fr;
    }

    .project-progress {
        min-width: 100px;
    }

    .activity-label {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .reports-summary {
        grid-template-columns: 1fr;
    }

    .report-card {
        padding: 16px;
    }

    .report-card-value {
        font-size: 24px;
    }
}

/* ══════════════════════════════════════════════════════════
   REPORTS v5.0 — Dashboard données réelles
   Classes préfixées "rpt-" pour éviter tout conflit
══════════════════════════════════════════════════════════ */

/* Wrap */
.rpt-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg-primary, #0f1117);
}

/* ── Header ── */
.rpt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 12px;
}

.rpt-header-left  { display: flex; align-items: center; gap: 12px; }
.rpt-header-right { display: flex; align-items: center; gap: 10px; }

.rpt-logo-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-color, var(--accent));
  flex-shrink: 0;
}

.rpt-title    { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--text-primary, #e2e8f0); line-height: 1.2; }
.rpt-subtitle { margin: 2px 0 0; font-size: 0.78rem; color: var(--text-secondary, #94a3b8); }

.rpt-live-badge {
  font-size: 0.72rem; font-weight: 700;
  color: #10b981;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.3);
  border-radius: 20px;
  padding: 3px 10px;
  letter-spacing: .04em;
}

.rpt-btn-refresh {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: var(--text-secondary, #94a3b8);
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.rpt-btn-refresh:hover { background: rgba(255,255,255,.08); color: var(--text-primary, #e2e8f0); }
.rpt-btn-refresh.rpt-spin svg { animation: rpt-spin .8s linear infinite; }
@keyframes rpt-spin { to { transform: rotate(360deg); } }

.rpt-timestamp {
  font-size: 0.72rem;
  color: var(--text-secondary, #64748b);
  margin: 12px 24px 4px;
  opacity: .7;
}

/* ── Body scroll ── */
.rpt-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

/* ── Skeleton ── */
.rpt-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.rpt-skel-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.rpt-skel-h, .rpt-skel-v {
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: rpt-shimmer 1.5s ease-in-out infinite;
}
.rpt-skel-h  { height: 18px; width: 60%; }
.rpt-skel-v  { height: 48px; }
.rpt-skel-sm { height: 16px; width: 80%; }
@keyframes rpt-shimmer { to { background-position: -200% 0; } }

/* ── Error ── */
.rpt-error {
  text-align: center; padding: 40px;
  color: #ef4444; font-size: .9rem;
}

/* ── Section ── */
.rpt-section {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.rpt-section:hover { box-shadow: 0 4px 20px rgba(0,0,0,.3); }

.rpt-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.rpt-section-icon { font-size: 1.15rem; }
.rpt-section-title {
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text-primary, #e2e8f0);
  letter-spacing: .01em;
}

.rpt-section-body { padding: 16px 20px 20px; }

/* ── Two-column layout ── */
.rpt-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 680px) { .rpt-cols-2 { grid-template-columns: 1fr; } }

/* ── KPI cards ── */
.rpt-kpi-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.rpt-kpi {
  flex: 1;
  min-width: 80px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all .15s;
}
.rpt-kpi:hover { background: rgba(255,255,255,.07); transform: translateY(-1px); }

.rpt-kpi-val {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.rpt-kpi-label { font-size: .72rem; font-weight: 600; color: var(--text-secondary, #94a3b8); }
.rpt-kpi-sub   { font-size: .65rem; color: var(--text-secondary, #64748b); opacity: .7; }

/* Colors */
.rpt-kpi-blue   .rpt-kpi-val { color: #3b82f6; }
.rpt-kpi-green  .rpt-kpi-val { color: #10b981; }
.rpt-kpi-orange .rpt-kpi-val { color: #f59e0b; }
.rpt-kpi-purple .rpt-kpi-val { color: var(--accent-light); }
.rpt-kpi-slate  .rpt-kpi-val { color: #94a3b8; }
.rpt-kpi-gold   .rpt-kpi-val { color: #d4af37; }
.rpt-kpi-flame  .rpt-kpi-val { color: #f97316; }

/* ── Progress bar ── */
.rpt-progress-block { margin-top: 4px; }
.rpt-progress-label {
  display: flex; justify-content: space-between;
  font-size: .78rem; color: var(--text-secondary, #94a3b8);
  margin-bottom: 6px;
}
.rpt-progress-label strong { color: var(--text-primary, #e2e8f0); }

.rpt-bar {
  height: 8px;
  background: rgba(255,255,255,.06);
  border-radius: 4px;
  overflow: hidden;
}
.rpt-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .6s cubic-bezier(.34,1.56,.64,1);
  width: 0%;
}
.rpt-bar-green { background: linear-gradient(90deg, #10b981, #34d399); }
.rpt-bar-gold  { background: linear-gradient(90deg, #d4af37, #f59e0b); }

.rpt-xp-next {
  font-size: .72rem; color: var(--text-secondary, #64748b);
  margin: 6px 0 0; opacity: .7;
}

/* ── Revenue cards ── */
.rpt-revenue-cards {
  display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap;
}
.rpt-rev-card {
  flex: 1; min-width: 140px;
  background: linear-gradient(135deg, rgba(16,185,129,.1), rgba(16,185,129,.05));
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.rpt-rev-label { font-size: .72rem; font-weight: 700; color: #10b981; text-transform: uppercase; letter-spacing: .06em; }
.rpt-rev-val   { font-size: 1.4rem; font-weight: 800; color: var(--text-primary, #e2e8f0); margin: 2px 0; }
.rpt-rev-sub   { font-size: .7rem; color: var(--text-secondary, #64748b); }

/* ── File types ── */
.rpt-file-types { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rpt-ftag {
  font-size: .7rem; font-weight: 600;
  padding: 3px 8px; border-radius: 20px;
}
.rpt-ftag-img { background: rgba(59,130,246,.12); color: #3b82f6; border: 1px solid rgba(59,130,246,.2); }
.rpt-ftag-vid { background: rgba(239,68,68,.12);  color: #ef4444; border: 1px solid rgba(239,68,68,.2); }
.rpt-ftag-pdf { background: rgba(245,158,11,.12); color: #f59e0b; border: 1px solid rgba(245,158,11,.2); }

/* ── CRM ── */
.rpt-crm-value {
  font-size: .82rem; color: var(--text-secondary, #94a3b8);
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.rpt-crm-value strong { color: #10b981; }

/* ── Team ── */
.rpt-team-note { font-size: .82rem; color: var(--text-secondary, #94a3b8); margin: 4px 0 0; }

/* ── Empty state ── */
.rpt-empty {
  font-size: .8rem;
  color: var(--text-secondary, #64748b);
  text-align: center;
  padding: 8px 0 2px;
  opacity: .6;
  font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .rpt-body { padding: 12px 14px 24px; }
  .rpt-header { padding: 12px 16px; }
  .rpt-kpi-val { font-size: 1.25rem; }
  .rpt-kpi-row { gap: 6px; }
  .rpt-kpi { padding: 10px; }
}


/* ===== css/ai-reports.css?v=2602240010 ===== */
/**
 * AI Reports Styles - PREMIUM EDITION
 * ProductiveApp v4.0
 *
 * Ultra smooth animations & beautiful effects
 */

/* =============================================
   CSS VARIABLES
   ============================================= */

:root {
    --ai-gradient-1: linear-gradient(135deg, #e07840 0%, #f59e0b 50%, #fbbf24 100%);
    --ai-gradient-2: linear-gradient(135deg, var(--accent-light) 0%, #ec4899 100%);
    --ai-gradient-3: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --ai-glass: rgba(255, 255, 255, 0.05);
    --ai-glass-border: rgba(255, 255, 255, 0.1);
    --ai-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.1);
    --ai-shadow-glow: 0 0 40px rgba(224, 120, 64, 0.3);
}

/* =============================================
   DASHBOARD LAYOUT
   ============================================= */

.ai-reports-dashboard {
    padding: 32px;
    max-width: 1400px;
    margin: 0 auto;
    animation: ai-pageEnter 0.6s ease-out;
}

@keyframes ai-pageEnter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-reports-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 24px;
}

.ai-reports-title h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    background: var(--ai-gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: ai-shimmer 3s ease-in-out infinite;
    background-size: 200% 100%;
}

@keyframes ai-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.ai-reports-title p {
    color: var(--text-muted);
    margin: 0;
    font-size: 1rem;
    opacity: 0.8;
}

.ai-reports-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* =============================================
   PREMIUM BUTTONS
   ============================================= */

.ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border: none;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ai-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s;
}

.ai-btn::after {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.3), transparent 30%);
    animation: ai-btnRotate 4s linear infinite;
    opacity: 0;
    z-index: -1;
}

@keyframes ai-btnRotate {
    to { transform: rotate(360deg); }
}

.ai-btn:hover::before {
    opacity: 1;
}

.ai-btn:hover::after {
    opacity: 1;
}

.ai-btn-primary {
    background: var(--ai-gradient-1);
    color: white;
    box-shadow: 0 4px 20px rgba(224, 120, 64, 0.4),
                inset 0 1px 0 rgba(255,255,255,0.2);
}

.ai-btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(224, 120, 64, 0.5),
                0 0 60px rgba(224, 120, 64, 0.2),
                inset 0 1px 0 rgba(255,255,255,0.3);
}

.ai-btn-primary:active {
    transform: translateY(-1px) scale(0.98);
}

.ai-btn-secondary {
    background: var(--ai-glass);
    color: var(--text);
    border: 1px solid var(--ai-glass-border);
    backdrop-filter: blur(10px);
}

.ai-btn-secondary:hover {
    background: rgba(224, 120, 64, 0.1);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.ai-btn-accent {
    background: var(--ai-gradient-2);
    color: white;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 40%, transparent),
                inset 0 1px 0 rgba(255,255,255,0.2);
}

.ai-btn-accent:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 50%, transparent),
                0 0 60px color-mix(in srgb, var(--accent) 20%, transparent);
}

.ai-btn-ghost {
    background: transparent;
    color: var(--accent);
    padding: 10px 18px;
}

.ai-btn-ghost:hover {
    background: rgba(224, 120, 64, 0.1);
    transform: translateX(4px);
}

.ai-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.ai-btn-icon {
    font-size: 1.2rem;
    transition: transform 0.3s;
}

.ai-btn:hover .ai-btn-icon {
    transform: scale(1.2) rotate(10deg);
}

/* Premium Spinner */
.ai-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: ai-spin 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

/* Select */
.ai-select {
    padding: 14px 44px 14px 18px;
    border: 1px solid var(--ai-glass-border);
    border-radius: 14px;
    background: var(--ai-glass);
    backdrop-filter: blur(10px);
    color: var(--text);
    font-size: 0.95rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e07840' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    transition: all 0.3s;
}

.ai-select:hover, .ai-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(224, 120, 64, 0.15);
    outline: none;
}

/* =============================================
   STATS CARDS - GLASSMORPHISM
   ============================================= */

.ai-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.ai-stat-card {
    background: var(--ai-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--ai-glass-border);
    border-radius: 20px;
    padding: 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--ai-gradient-1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(224, 120, 64, 0.15) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s;
}

.ai-stat-card:not(.loading)::before {
    transform: scaleX(1);
}

.ai-stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--ai-shadow-glow);
    border-color: rgba(224, 120, 64, 0.3);
}

.ai-stat-card:hover::after {
    opacity: 1;
}

.ai-stat-card.loading {
    animation: ai-pulse 1.5s ease-in-out infinite;
}

@keyframes ai-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.01); }
}

.ai-stat-icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
    animation: ai-iconFloat 3s ease-in-out infinite;
}

@keyframes ai-iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.ai-stat-value {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--text) 0%, var(--score-color, var(--accent)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
}

.ai-stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* =============================================
   CHARTS - PREMIUM CARDS
   ============================================= */

.ai-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
    margin-bottom: 40px;
}

.ai-chart-card {
    background: var(--ai-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--ai-glass-border);
    border-radius: 20px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.ai-chart-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(224, 120, 64, 0.5), transparent 40%, transparent 60%, rgba(245, 158, 11, 0.3));
    -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;
    opacity: 0;
    transition: opacity 0.4s;
}

.ai-chart-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ai-shadow-soft), 0 0 40px rgba(224, 120, 64, 0.1);
}

.ai-chart-card:hover::before {
    opacity: 1;
}

.ai-chart-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 24px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-chart-container {
    position: relative;
    height: 240px;
}

/* =============================================
   ANALYSIS SECTION - GLASSMORPHISM
   ============================================= */

.ai-analysis-section {
    background: var(--ai-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--ai-glass-border);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.ai-analysis-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(224, 120, 64, 0.05) 0%, transparent 50%);
    animation: ai-ambientRotate 20s linear infinite;
}

@keyframes ai-ambientRotate {
    to { transform: rotate(360deg); }
}

.ai-analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}

.ai-analysis-header h3 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text);
}

.ai-analysis-placeholder {
    color: var(--text-muted);
    text-align: center;
    padding: 60px;
    font-style: italic;
    font-size: 1.1rem;
}

.ai-analysis-card {
    display: flex;
    gap: 32px;
    margin-bottom: 28px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.ai-analysis-score {
    text-align: center;
    flex-shrink: 0;
}

.ai-score-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(
        var(--score-color, var(--accent)) calc(var(--score, 0) * 3.6deg),
        rgba(255,255,255,0.1) 0deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 12px;
    box-shadow: 0 0 30px rgba(224, 120, 64, 0.3);
    animation: ai-scorePulse 2s ease-in-out infinite;
}

@keyframes ai-scorePulse {
    0%, 100% { box-shadow: 0 0 30px rgba(224, 120, 64, 0.3); }
    50% { box-shadow: 0 0 50px rgba(224, 120, 64, 0.5); }
}

.ai-score-circle::before {
    content: '';
    position: absolute;
    inset: 10px;
    background: var(--bg-card);
    border-radius: 50%;
}

.ai-score-circle span {
    position: relative;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text);
}

.ai-analysis-score > span {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ai-analysis-text {
    flex: 1;
}

.ai-analysis-text p {
    color: var(--text);
    line-height: 1.8;
    margin: 0;
    font-size: 1rem;
}

/* SWOT Sections - Premium */
.ai-swot-section {
    padding: 20px 24px;
    border-radius: 16px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.ai-swot-section:hover {
    transform: translateX(4px);
}

.ai-swot-section h4 {
    margin: 0 0 14px 0;
    font-size: 1rem;
    font-weight: 600;
}

.ai-swot-section ul {
    margin: 0;
    padding-left: 24px;
}

.ai-swot-section li {
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.6;
}

.ai-strengths {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-left: 4px solid #10b981;
}

.ai-weaknesses {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-left: 4px solid #f59e0b;
}

.ai-recommendations {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-left: 4px solid #3b82f6;
    padding: 20px 24px;
    border-radius: 16px;
}

.ai-recommendations h4 {
    margin: 0 0 14px 0;
}

.ai-recommendations ul {
    margin: 0;
    padding-left: 24px;
}

.ai-recommendations li {
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.6;
}

/* =============================================
   REPORTS LIST - PREMIUM
   ============================================= */

.ai-reports-history {
    background: var(--ai-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--ai-glass-border);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 40px;
}

.ai-reports-history h3 {
    margin: 0 0 24px 0;
    font-size: 1.3rem;
    color: var(--text);
}

.ai-reports-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ai-report-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-report-item:hover {
    background: rgba(224, 120, 64, 0.1);
    border-color: rgba(224, 120, 64, 0.3);
    transform: translateX(8px);
    box-shadow: -8px 0 30px rgba(224, 120, 64, 0.1);
}

.ai-report-item-icon {
    font-size: 1.8rem;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ai-glass);
    border-radius: 14px;
    transition: transform 0.3s;
}

.ai-report-item:hover .ai-report-item-icon {
    transform: scale(1.1) rotate(5deg);
}

.ai-report-item-info {
    flex: 1;
}

.ai-report-item-info h4 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    color: var(--text);
    font-weight: 600;
}

.ai-report-item-date {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.ai-report-item-score {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--score-color, var(--accent));
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(224, 120, 64, 0.15), rgba(224, 120, 64, 0.05));
    border-radius: 24px;
    border: 1px solid rgba(224, 120, 64, 0.2);
}

.ai-no-reports {
    color: var(--text-muted);
    text-align: center;
    padding: 60px;
    font-size: 1.1rem;
}

/* =============================================
   META SYNTHESIS - PREMIUM
   ============================================= */

.ai-meta-section {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent) 0%, rgba(236, 72, 153, 0.15) 100%);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    position: relative;
    overflow: hidden;
}

.ai-meta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 50%),
                radial-gradient(circle at 70% 50%, rgba(236, 72, 153, 0.2) 0%, transparent 50%);
    animation: ai-metaGlow 4s ease-in-out infinite alternate;
}

@keyframes ai-metaGlow {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

.ai-meta-header {
    position: relative;
    z-index: 1;
}

.ai-meta-header h3 {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    color: var(--text);
}

.ai-meta-header p {
    color: var(--text-muted);
    margin: 0 0 28px 0;
    font-size: 1rem;
}

/* =============================================
   MODAL - ULTRA PREMIUM
   ============================================= */

.ai-report-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    transition: opacity 0.4s ease;
    padding: 24px;
}

.ai-report-modal.open {
    opacity: 1;
}

.ai-report-modal-content {
    background: var(--bg-card);
    border-radius: 28px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.85) translateY(40px);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4),
                0 0 100px rgba(224, 120, 64, 0.1);
    border: 1px solid var(--ai-glass-border);
}

.ai-report-modal.open .ai-report-modal-content {
    transform: scale(1) translateY(0);
}

.ai-report-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 32px;
    background: var(--ai-gradient-1);
    position: relative;
    overflow: hidden;
}

.ai-report-modal-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: ai-headerShine 3s ease-in-out infinite;
}

@keyframes ai-headerShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.ai-report-modal-header h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
    position: relative;
    z-index: 1;
}

.ai-modal-close {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255,255,255,0.2);
    color: white;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.ai-modal-close:hover {
    background: rgba(255,255,255,0.3);
    transform: rotate(90deg) scale(1.1);
}

.ai-report-modal-body {
    padding: 32px;
    overflow-y: auto;
    flex: 1;
}

.ai-report-score-large {
    text-align: center;
    margin-bottom: 40px;
}

.ai-score-ring {
    width: 140px;
    height: 140px;
    margin: 0 auto 16px;
    position: relative;
    filter: drop-shadow(0 0 20px rgba(224, 120, 64, 0.4));
}

.ai-score-ring svg {
    transform: rotate(-90deg);
    animation: ai-ringAppear 1s ease-out;
}

@keyframes ai-ringAppear {
    from {
        opacity: 0;
        transform: rotate(-90deg) scale(0.8);
    }
    to {
        opacity: 1;
        transform: rotate(-90deg) scale(1);
    }
}

.ai-score-ring circle:last-child {
    animation: ai-scoreFill 1.5s ease-out forwards;
    stroke-dasharray: 0 283;
}

@keyframes ai-scoreFill {
    to {
        stroke-dasharray: var(--score-dash, 0) 283;
    }
}

.ai-score-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 800;
    color: var(--text);
    animation: ai-valueAppear 0.5s ease-out 0.5s both;
}

@keyframes ai-valueAppear {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ai-score-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.ai-report-analysis {
    margin-bottom: 32px;
}

.ai-report-analysis h3 {
    margin: 0 0 20px 0;
    color: var(--text);
    font-size: 1.2rem;
}

.ai-report-analysis p {
    color: var(--text);
    line-height: 1.9;
    white-space: pre-wrap;
    font-size: 1rem;
}

/* Full SWOT in modal */
.ai-swot {
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    animation: ai-swotAppear 0.5s ease-out both;
}

.ai-swot:nth-child(1) { animation-delay: 0.1s; }
.ai-swot:nth-child(2) { animation-delay: 0.2s; }
.ai-swot:nth-child(3) { animation-delay: 0.3s; }
.ai-swot:nth-child(4) { animation-delay: 0.4s; }

@keyframes ai-swotAppear {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ai-swot h3 {
    margin: 0 0 18px 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.ai-swot ul, .ai-swot ol {
    margin: 0;
    padding-left: 28px;
}

.ai-swot li {
    margin-bottom: 12px;
    line-height: 1.8;
    font-size: 1.15rem;
}

.ai-strengths-full {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.35) 0%, rgba(16, 185, 129, 0.2) 100%);
    border: 1px solid rgba(16, 185, 129, 0.5);
}

.ai-weaknesses-full {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.35) 0%, rgba(245, 158, 11, 0.2) 100%);
    border: 1px solid rgba(245, 158, 11, 0.5);
}

.ai-opportunities {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.35) 0%, rgba(59, 130, 246, 0.2) 100%);
    border: 1px solid rgba(59, 130, 246, 0.5);
}

.ai-threats {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.35) 0%, rgba(239, 68, 68, 0.2) 100%);
    border: 1px solid rgba(239, 68, 68, 0.5);
}

.ai-recommendations-full {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent) 0%, color-mix(in srgb, var(--accent) 20%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    padding: 24px;
    border-radius: 16px;
}

.ai-recommendations-full h3 {
    margin: 0 0 18px 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.ai-recommendations-full ol {
    margin: 0;
    padding-left: 28px;
    counter-reset: item;
}

.ai-recommendations-full li {
    margin-bottom: 16px;
    line-height: 1.8;
    color: var(--text);
    font-size: 1.15rem;
}

.ai-report-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding: 24px 32px;
    background: var(--ai-glass);
    border-top: 1px solid var(--ai-glass-border);
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
    .ai-reports-dashboard {
        padding: 20px;
    }

    .ai-reports-header {
        flex-direction: column;
    }

    .ai-reports-title h2 {
        font-size: 1.8rem;
    }

    .ai-reports-actions {
        width: 100%;
    }

    .ai-reports-actions .ai-btn {
        flex: 1;
        justify-content: center;
    }

    .ai-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .ai-stat-value {
        font-size: 2rem;
    }

    .ai-charts-grid {
        grid-template-columns: 1fr;
    }

    .ai-analysis-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ai-report-modal-content {
        max-height: 95vh;
        margin: 10px;
        border-radius: 20px;
    }

    .ai-report-modal-header {
        padding: 20px 24px;
    }

    .ai-report-modal-body {
        padding: 24px;
    }
}

/* =============================================
   ENTRANCE ANIMATIONS
   ============================================= */

.ai-stat-card,
.ai-chart-card,
.ai-report-item {
    animation: ai-fadeSlideUp 0.6s ease-out both;
}

@keyframes ai-fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-stat-card:nth-child(1) { animation-delay: 0.1s; }
.ai-stat-card:nth-child(2) { animation-delay: 0.15s; }
.ai-stat-card:nth-child(3) { animation-delay: 0.2s; }
.ai-stat-card:nth-child(4) { animation-delay: 0.25s; }

.ai-chart-card:nth-child(1) { animation-delay: 0.2s; }
.ai-chart-card:nth-child(2) { animation-delay: 0.3s; }
.ai-chart-card:nth-child(3) { animation-delay: 0.4s; }
.ai-chart-card:nth-child(4) { animation-delay: 0.5s; }

.ai-report-item:nth-child(1) { animation-delay: 0.1s; }
.ai-report-item:nth-child(2) { animation-delay: 0.15s; }
.ai-report-item:nth-child(3) { animation-delay: 0.2s; }
.ai-report-item:nth-child(4) { animation-delay: 0.25s; }
.ai-report-item:nth-child(5) { animation-delay: 0.3s; }

/* Error state */
.ai-error {
    color: #ef4444;
    text-align: center;
    padding: 40px;
    font-size: 1rem;
}

/* =============================================
   FULLPAGE VIEW & NAVIGATION
   ============================================= */

.ai-reports-fullpage {
    min-height: 100vh;
    padding-top: 20px;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 100%);
}

.ai-reports-fullpage.hidden {
    display: none;
}

.ai-reports-nav {
    padding: 16px 32px;
    margin-bottom: 8px;
}

.ai-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--ai-glass);
    border: 1px solid var(--ai-glass-border);
    border-radius: 12px;
    color: var(--text, #ffffff);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ai-btn-back:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-4px);
    box-shadow: var(--ai-shadow-soft);
}

.ai-btn-back span {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.ai-btn-back:hover span {
    transform: translateX(-4px);
}

/* Hide tasks view when showing reports */
.view-tasks.hidden {
    display: none !important;
}


/* ===== css/psycho-audit.css?v=2602241200 ===== */
/* ===================================================================
   PSYCHO-AUDIT v7.0 — Premium Mental Wellness Design
   ProductiveApp 2026 — Full redesign
   =================================================================== */

/* ─── ANIMATIONS ──────────────────────────────────────────────────── */
@keyframes paFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes paSlideIn {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes paPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
    50%       { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@keyframes paSpin {
    to { transform: rotate(360deg); }
}
@keyframes paBarGrow {
    from { width: 0; }
}

/* ─── WRAPPER ─────────────────────────────────────────────────────── */
.pa-premium-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    animation: paFadeIn 0.4s ease;
}

/* ─── HEADER ──────────────────────────────────────────────────────── */
.pa-premium-header {
    position: relative;
    text-align: center;
    padding: 40px 32px 28px;
    overflow: hidden;
    flex-shrink: 0;
}
.pa-premium-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 70% at 50% 0%,
        color-mix(in srgb, var(--accent) 22%, transparent) 0%,
        color-mix(in srgb, var(--accent) 8%, transparent) 50%,
        transparent 100%);
    pointer-events: none;
}
.pa-premium-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
}
.pa-premium-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 10px;
    position: relative;
}
.pa-premium-title {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-light) 40%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}
.pa-premium-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 13px;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent);
    animation: paPulse 3s ease infinite;
}
.pa-premium-subtitle {
    color: var(--text-secondary, rgba(255,255,255,0.45));
    font-size: 13px;
    margin: 0;
    letter-spacing: 0.3px;
    position: relative;
}

/* ─── TABS ────────────────────────────────────────────────────────── */
.pa-premium-tabs {
    display: flex;
    gap: 3px;
    padding: 5px;
    margin: 0 20px 20px;
    background: var(--surface, rgba(30,30,46,0.8));
    border-radius: 18px;
    border: 1px solid var(--border, rgba(255,255,255,0.07));
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
}
.pa-premium-tabs::-webkit-scrollbar { display: none; }
.pa-tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 10px;
    border: none;
    border-radius: 13px;
    background: transparent;
    color: var(--text-secondary, rgba(255,255,255,0.38));
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    min-width: 60px;
    white-space: nowrap;
}
.pa-tab-btn:hover:not(.active) {
    color: var(--text, rgba(255,255,255,0.8));
    background: rgba(255,255,255,0.05);
}
.pa-tab-btn.active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--accent) 25%, transparent));
    color: #fff;
    box-shadow: 0 2px 14px color-mix(in srgb, var(--accent) 25%, transparent);
}
.pa-tab-icon { font-size: 18px; line-height: 1; }
.pa-tab-label { font-size: 11px; font-weight: 600; letter-spacing: 0.2px; }

/* ─── CONTENT AREA ────────────────────────────────────────────────── */
.pa-premium-content {
    flex: 1;
    padding: 0 20px 40px;
    overflow-y: auto;
}

/* ─── WIZARD ──────────────────────────────────────────────────────── */
.pa-wizard {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Progress Header ── */
.pa-prog-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--surface, rgba(30,30,46,0.6));
    border: 1px solid var(--border, rgba(255,255,255,0.07));
    border-radius: 16px;
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.pa-prog-dots {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 160px;
    flex-shrink: 0;
}
.pa-prog-dots::-webkit-scrollbar { display: none; }
.pa-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.12);
    background: transparent;
    color: var(--text-secondary, rgba(255,255,255,0.35));
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
    flex-shrink: 0;
}
.pa-dot:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent-light); }
.pa-dot.active {
    border-color: var(--accent-light);
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: #fff;
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
}
.pa-dot.done {
    border-color: #22c55e;
    background: rgba(34,197,94,0.15);
    color: #22c55e;
}
.pa-prog-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.07);
    border-radius: 100px;
    overflow: hidden;
}
.pa-prog-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-light), var(--accent), var(--accent));
    border-radius: 100px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation: paBarGrow 0.8s ease;
}
.pa-prog-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary, rgba(255,255,255,0.45));
    flex-shrink: 0;
    min-width: 44px;
    text-align: right;
}

/* ── Step Card ── */
.pa-step-card {
    background: var(--surface, rgba(30,30,46,0.5));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 22px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: paSlideIn 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.pa-axis-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
}
.pa-axis-emoji {
    font-size: 32px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    flex-shrink: 0;
}
.pa-axis-step-num {
    font-size: 11px;
    color: var(--text-secondary, rgba(255,255,255,0.38));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 5px;
}
.pa-axis-step-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text, #fff);
    line-height: 1.2;
}

/* ── Question Card ── */
.pa-qcard {
    background: var(--surface-hover, rgba(255,255,255,0.035));
    border: 1px solid var(--border, rgba(255,255,255,0.06));
    border-left: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 14px;
    padding: 18px 20px;
    transition: border-color 0.25s, background 0.25s;
}
.pa-qcard--done {
    border-left-color: #22c55e;
    background: rgba(34,197,94,0.04);
}
.pa-q-num {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-secondary, rgba(255,255,255,0.28));
    margin-bottom: 8px;
}
.pa-q-text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text, #fff);
    margin-bottom: 16px;
    font-weight: 450;
}

/* ── Rating Buttons ── */
.pa-rating-row {
    display: flex;
    gap: 7px;
}
.pa-rbtn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 11px 4px;
    background: rgba(255,255,255,0.03);
    border: 1.5px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    color: var(--text-secondary, rgba(255,255,255,0.45));
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    min-width: 0;
}
.pa-rbtn:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--accent-light);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    transform: translateY(-2px);
}
.pa-rbtn.active {
    border-color: var(--accent-light);
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: #fff;
    box-shadow: 0 3px 14px color-mix(in srgb, var(--accent) 35%, transparent);
    transform: translateY(-2px);
}
.pa-rbtn-num {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}
.pa-rbtn-lbl {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: center;
    line-height: 1.2;
}

/* ── Navigation ── */
.pa-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid var(--border, rgba(255,255,255,0.07));
    gap: 12px;
}
.pa-nav-prev {
    padding: 11px 22px;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    font-family: inherit;
}
.pa-nav-prev:hover {
    border-color: rgba(255,255,255,0.28);
    color: #fff;
    background: rgba(255,255,255,0.04);
}
.pa-nav-next {
    padding: 13px 30px;
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    border: none;
    border-radius: 13px;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.2s;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 38%, transparent);
    font-family: inherit;
}
.pa-nav-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 50%, transparent);
}
.pa-nav-next--hint {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--accent) 60%, transparent));
    box-shadow: none;
}
.pa-btn-analyze {
    padding: 14px 36px;
    background: linear-gradient(135deg, var(--accent-light), var(--accent), var(--accent));
    border: none;
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.25s;
    box-shadow: 0 6px 26px color-mix(in srgb, var(--accent) 42%, transparent);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
}
.pa-btn-analyze:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px color-mix(in srgb, var(--accent) 55%, transparent);
}
.pa-btn-analyze--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}
.pa-hint-text {
    text-align: center;
    color: var(--text-secondary, rgba(255,255,255,0.38));
    font-size: 13px;
    margin: 4px 0 0;
}

/* ─── RESULTS ─────────────────────────────────────────────────────── */
.pa-results {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: paFadeIn 0.4s ease;
}

/* Score Hero */
.pa-score-hero {
    background: var(--surface, rgba(30,30,46,0.5));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 22px;
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 32px;
    position: relative;
    overflow: hidden;
}
.pa-score-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%,
        color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%);
    pointer-events: none;
}
.pa-score-ring { flex-shrink: 0; }
.pa-score-info { flex: 1; }
.pa-score-label {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 6px;
    line-height: 1;
}
.pa-score-date {
    font-size: 13px;
    color: var(--text-secondary, rgba(255,255,255,0.4));
    margin-bottom: 14px;
}
.pa-score-xp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    color: #f59e0b;
}

/* Axes Grid */
.pa-axes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background: var(--surface, rgba(30,30,46,0.5));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 22px;
    padding: 22px;
}
.pa-axis-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-secondary, rgba(255,255,255,0.55));
}
.pa-axis-bar-track {
    height: 5px;
    background: rgba(255,255,255,0.06);
    border-radius: 100px;
    overflow: hidden;
}
.pa-axis-bar-fill {
    height: 100%;
    border-radius: 100px;
    animation: paBarGrow 1s ease;
}

/* Radar */
.pa-radar-wrap {
    background: var(--surface, rgba(30,30,46,0.5));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 22px;
    padding: 24px;
    text-align: center;
}
.pa-radar-wrap h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--text, #fff);
}

/* Recommendations */
.pa-recs {
    background: var(--surface, rgba(30,30,46,0.5));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 22px;
    padding: 24px;
}
.pa-recs h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--text, #fff);
}
.pa-recs-grid { display: flex; flex-direction: column; gap: 10px; }
.pa-rec-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.03);
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.pa-rec-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.pa-rec-area {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-light);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}
.pa-rec-text { font-size: 14px; color: var(--text, #fff); line-height: 1.55; }

/* Trend */
.pa-trend {
    background: var(--surface, rgba(30,30,46,0.5));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 22px;
    padding: 24px;
}
.pa-trend h3 { font-size: 15px; font-weight: 700; margin: 0 0 16px; color: var(--text, #fff); }
.pa-trend-diff {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    margin-top: 12px;
}

/* Actions */
.pa-actions-row { display: flex; gap: 12px; flex-wrap: wrap; }
.pa-btn-reset {
    flex: 1;
    padding: 14px;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 13px;
    color: var(--text, #fff);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    font-family: inherit;
}
.pa-btn-reset:hover {
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.04);
}
.pa-report-container { margin-top: 4px; }

/* ─── THERAPY / LIBRARY / PROGRAMS / JOURNAL ─────────────────────── */
.pa-therapy-tab,
.pa-library-tab,
.pa-programs-tab,
.pa-journal-tab {
    max-width: 700px;
    margin: 0 auto;
    animation: paFadeIn 0.35s ease;
}

/* Empty state */
.pa-therapy-empty,
.pa-library-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary, rgba(255,255,255,0.4));
}
.pa-empty-icon { font-size: 52px; margin-bottom: 16px; display: block; }
.pa-therapy-empty h3,
.pa-library-empty h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text, #fff);
    margin: 0 0 10px;
}
.pa-therapy-empty p,
.pa-library-empty p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px;
}

/* ─── Section Titles — PREMIUM REDESIGN ─────────────────────────────────────── */
.pa-section-title {
    font-size: 12px;
    font-weight: 900;
    color: rgba(255,255,255,0.92);
    margin: 32px 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 14px 20px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent) 0%, color-mix(in srgb, var(--accent) 5%, transparent) 55%, transparent 100%);
    border-left: 3px solid var(--accent-light);
    border-radius: 0 14px 14px 0;
    position: relative;
    overflow: hidden;
}
.pa-section-title::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%);
    border-radius: 0 2px 2px 0;
}
.pa-section-title:first-child { margin-top: 0; }
/* Urgent section (Premiers secours) */
.pa-section-title--urgent {
    border-left-color: #ef4444;
    background: linear-gradient(90deg, rgba(239,68,68,0.14) 0%, rgba(239,68,68,0.04) 55%, transparent 100%);
}
.pa-section-title--urgent::before { background: linear-gradient(180deg, #f87171 0%, #dc2626 100%); }
.pa-section-title--urgent .pa-section-icon { animation: paUrgentBlink 1.5s ease-in-out infinite; }
@keyframes paUrgentBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.92); } }
/* Daily section (Pratique quotidienne) */
.pa-section-title--daily { border-left-color: #f59e0b; background: linear-gradient(90deg, rgba(245,158,11,0.12) 0%, transparent 100%); }
.pa-section-title--daily::before { background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%); }
/* Deep work section */
.pa-section-title--deep { border-left-color: var(--accent); }

.pa-section-icon { font-size: 20px; }
.pa-section-desc { color: rgba(255,255,255,0.5); font-size: 13px; margin: -12px 0 20px; padding-left: 8px; line-height: 1.5; }

/* Filter bar */
.pa-filter-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
    margin-bottom: 24px;
}
.pa-filter-bar::-webkit-scrollbar { display: none; }
.pa-filter-btn {
    padding: 8px 16px;
    border-radius: 100px;
    border: 1.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.22s;
    font-family: inherit;
    letter-spacing: 0.3px;
}
.pa-filter-btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent-light); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.pa-filter-btn.active {
    border-color: var(--accent-light);
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: #fff;
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ─── Exercise Cards — PREMIUM REDESIGN ─────────────────────────────────────── */
.pa-exercise-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}
.pa-exercise-card {
    background: rgba(18,18,32,0.85);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, border-color 0.28s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 190px;
    isolation: isolate;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pa-exercise-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.pa-exercise-card:hover {
    transform: translateY(-8px) scale(1.015);
    border-color: var(--card-accent-rgb, color-mix(in srgb, var(--accent) 50%, transparent));
    box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px var(--card-accent-rgb, color-mix(in srgb, var(--accent) 20%, transparent));
}
/* Urgent cards */
.pa-exercise-card.urgent {
    border-color: rgba(239,68,68,0.2);
    animation: paUrgentGlow 3s ease-in-out infinite;
}
.pa-exercise-card.urgent:hover {
    border-color: rgba(239,68,68,0.55);
    box-shadow: 0 24px 60px rgba(239,68,68,0.13), 0 0 0 1px rgba(239,68,68,0.28);
}
@keyframes paUrgentGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    50%       { box-shadow: 0 0 24px 2px rgba(239,68,68,0.09); }
}

/* Accent bar (top color strip) */
.pa-ex-card-accent {
    height: 5px;
    width: 100%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.pa-ex-card-accent::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.40) 50%, transparent 100%);
    transform: translateX(-150%);
}
.pa-exercise-card:hover .pa-ex-card-accent::after {
    animation: paAccentShimmer 0.65s ease forwards;
}
@keyframes paAccentShimmer {
    from { transform: translateX(-150%); }
    to   { transform: translateX(200%); }
}

.pa-ex-card-body {
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 1;
}
.pa-ex-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 13px;
}
.pa-ex-card-diff {
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 8px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.pa-ex-card-duration {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    font-weight: 600;
    letter-spacing: 0.2px;
}
.pa-ex-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.32;
}
.pa-ex-card-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.56);
    margin-bottom: 0;
    line-height: 1.55;
    flex: 1;
}
.pa-ex-card-evidence {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 13px;
    margin-top: 13px;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.pa-evidence-badge {
    font-size: 11px;
    font-weight: 800;
    background: rgba(34,197,94,0.14);
    color: #4ade80;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid rgba(34,197,94,0.22);
    white-space: nowrap;
}
.pa-evidence-by {
    font-size: 11px;
    color: rgba(255,255,255,0.42);
    flex: 1;
    font-style: italic;
}
.pa-ex-card-cta {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.13);
    color: rgba(255,255,255,0.35);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1;
}
.pa-exercise-card:hover .pa-ex-card-cta {
    background: var(--card-accent-rgb, color-mix(in srgb, var(--accent) 22%, transparent));
    border-color: var(--card-accent-rgb, color-mix(in srgb, var(--accent) 45%, transparent));
    color: #fff;
    transform: translateX(3px) scale(1.08);
}

/* Category section */
.pa-category-section { margin-bottom: 28px; }
.pa-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface, rgba(30,30,46,0.4));
    border-radius: 14px;
    margin-bottom: 12px;
    border-left: 3px solid transparent;
}
.pa-category-icon { font-size: 24px; }
.pa-category-info h3 { font-size: 14px; font-weight: 700; color: var(--text, #fff); margin: 0 0 3px; }
.pa-category-info p { font-size: 12px; color: var(--text-secondary, rgba(255,255,255,0.4)); margin: 0; }

/* Exercise Detail */
.pa-exercise-detail { animation: paFadeIn 0.3s ease; }
.pa-back-btn {
    background: none;
    border: none;
    color: var(--accent-light);
    font-size: 14px;
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-weight: 600;
    transition: color 0.2s;
}
.pa-back-btn:hover { color: #f59e0b; }
.pa-ex-detail-header {
    text-align: center;
    padding: 28px 24px;
    background: var(--surface, rgba(30,30,46,0.5));
    border-radius: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--border, rgba(255,255,255,0.07));
}
.pa-ex-detail-header h2 { font-size: 22px; font-weight: 700; color: var(--text, #fff); margin-bottom: 8px; }
.pa-ex-detail-subtitle { color: var(--text-secondary, rgba(255,255,255,0.45)); font-size: 13px; margin-bottom: 16px; }
.pa-ex-detail-meta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.pa-meta-item { font-size: 13px; color: var(--text-secondary, rgba(255,255,255,0.45)); }

.pa-ex-evidence-box {
    background: linear-gradient(135deg, rgba(34,197,94,0.07), rgba(34,197,94,0.03));
    border: 1px solid rgba(34,197,94,0.18);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 14px;
}
.pa-evidence-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pa-evidence-icon { font-size: 20px; }
.pa-evidence-header h3 { font-size: 14px; font-weight: 700; color: #22c55e; margin: 0; }
.pa-evidence-text { color: var(--text, #fff); font-size: 13px; line-height: 1.7; margin-bottom: 10px; }
.pa-evidence-footer { display: flex; align-items: center; gap: 10px; }
.pa-evidence-org { font-size: 11px; color: var(--text-secondary, rgba(255,255,255,0.4)); }

.pa-ex-description {
    background: var(--surface, rgba(30,30,46,0.5));
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 14px;
    border: 1px solid var(--border, rgba(255,255,255,0.07));
}
.pa-ex-description p { color: var(--text, #fff); font-size: 14px; line-height: 1.75; margin: 0; }

/* Steps */
.pa-steps-section {
    background: var(--surface, rgba(30,30,46,0.5));
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 14px;
    border: 1px solid var(--border, rgba(255,255,255,0.07));
}
.pa-steps-section h3 { font-size: 14px; font-weight: 700; color: var(--text, #fff); margin: 0 0 14px; }
.pa-step-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pa-step-item:last-child { border-bottom: none; padding-bottom: 0; }
.pa-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent-light);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pa-step-content-title { font-size: 13px; font-weight: 600; color: var(--text, #fff); margin-bottom: 3px; }
.pa-step-content-inst { font-size: 12px; color: var(--text-secondary, rgba(255,255,255,0.5)); line-height: 1.5; }
.pa-step-duration { font-size: 11px; color: color-mix(in srgb, var(--accent) 70%, transparent); margin-top: 3px; }

/* Exercise Actions */
.pa-ex-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pa-btn-start {
    flex: 2;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    border: none;
    border-radius: 13px;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.2s;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.pa-btn-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 45%, transparent);
}
.pa-btn-program {
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    border: none;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}
.pa-btn-program:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent); }

/* Program cards */
.pa-programs-header, .pa-therapy-header, .pa-library-header {
    margin-bottom: 20px;
}
.pa-programs-header h2,
.pa-therapy-header h2,
.pa-library-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text, #fff);
    margin: 0 0 6px;
}
.pa-programs-header p,
.pa-therapy-header p,
.pa-library-header p {
    font-size: 13px;
    color: var(--text-secondary, rgba(255,255,255,0.45));
    margin: 0;
}
.pa-program-card {
    background: var(--surface, rgba(30,30,46,0.5));
    border: 1px solid var(--border, rgba(255,255,255,0.07));
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 14px;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
}
.pa-program-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.pa-program-card.recommended { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.pa-program-rec-badge {
    display: inline-flex;
    padding: 3px 10px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-light);
    margin-bottom: 12px;
}
.pa-program-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pa-program-card-icon { font-size: 28px; }
.pa-program-card-info h3 { font-size: 16px; font-weight: 700; color: var(--text, #fff); margin: 0 0 3px; }
.pa-program-card-subtitle { font-size: 12px; color: var(--text-secondary, rgba(255,255,255,0.45)); margin: 0; }
.pa-program-card-desc { font-size: 13px; color: var(--text-secondary, rgba(255,255,255,0.55)); line-height: 1.5; margin: 0 0 12px; }
.pa-program-card-meta { display: flex; gap: 14px; flex-wrap: wrap; }

/* Daily routine */
.pa-daily-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: var(--surface, rgba(30,30,46,0.4));
    border-radius: 13px;
    margin-bottom: 8px;
    cursor: pointer;
    border: 1px solid var(--border, rgba(255,255,255,0.06));
    transition: all 0.2s;
}
.pa-daily-slot:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.pa-daily-time {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-light);
    min-width: 90px;
    flex-shrink: 0;
}
.pa-daily-info { flex: 1; }
.pa-daily-name { font-size: 14px; font-weight: 600; color: var(--text, #fff); margin-bottom: 2px; }
.pa-daily-reason { font-size: 12px; color: var(--text-secondary, rgba(255,255,255,0.4)); }
.pa-daily-arrow { color: color-mix(in srgb, var(--accent) 60%, transparent); font-size: 16px; }

/* Journal */
.pa-journal-entry {
    background: var(--surface, rgba(30,30,46,0.5));
    border: 1px solid var(--border, rgba(255,255,255,0.07));
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 12px;
}
.pa-journal-date { font-size: 11px; color: var(--text-secondary, rgba(255,255,255,0.38)); margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; }
.pa-journal-form { display: flex; flex-direction: column; gap: 10px; }
.pa-journal-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.09);
    border-radius: 11px;
    color: var(--text, #fff);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.pa-journal-input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.pa-journal-input::placeholder { color: var(--text-secondary, rgba(255,255,255,0.3)); }

/* Program suggestion */
.pa-program-suggestion {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 7%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 18px;
    padding: 20px;
    margin-top: 14px;
}
.pa-program-suggestion-inner { display: flex; align-items: center; gap: 14px; }
.pa-program-icon { font-size: 32px; flex-shrink: 0; }
.pa-program-info { flex: 1; }
.pa-program-info h4 { font-size: 14px; font-weight: 700; color: var(--text, #fff); margin: 0 0 4px; }
.pa-program-info p { font-size: 13px; color: var(--text-secondary, rgba(255,255,255,0.45)); margin: 0; }

/* Recommended section */
.pa-recommended-section { margin-top: 20px; }
.pa-therapy-section { margin-bottom: 24px; }

/* Buttons */
.pa-btn-primary {
    padding: 13px 24px;
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    border: none;
    border-radius: 13px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.pa-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent); }
.pa-btn-secondary {
    padding: 11px 20px;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 11px;
    color: var(--text, #fff);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    font-family: inherit;
}
.pa-btn-secondary:hover { border-color: rgba(255,255,255,0.28); }

/* AI Report */
.pa-report-btn {
    flex: 1;
    padding: 14px 24px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: none;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    font-family: inherit;
}
.pa-report-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,185,129,0.35); }
.pa-report-loading { text-align: center; padding: 32px; color: var(--text-secondary, rgba(255,255,255,0.4)); }
.pa-report-loading .loading-spinner {
    width: 32px; height: 32px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: paSpin 1s linear infinite;
    margin: 0 auto 12px;
}
.pa-report-content {
    background: rgba(255,255,255,0.04);
    border-radius: 14px;
    padding: 20px;
    color: var(--text, #fff);
    font-size: 14px;
    line-height: 1.65;
    margin-top: 14px;
}
.pa-report-content h3 { font-size: 18px; color: var(--accent-light); margin: 16px 0 8px; }
.pa-report-content h4 { font-size: 15px; color: #f59e0b; margin: 12px 0 6px; }
.pa-report-content ul { margin: 8px 0; padding-left: 20px; }
.pa-report-content li { margin: 4px 0; }
.pa-report-content hr { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 16px 0; }
.pa-report-empty { text-align: center; color: var(--text-secondary, rgba(255,255,255,0.4)); padding: 24px; }

/* History */
.pa-history-section { margin-top: 16px; }
.pa-history-section h3 { font-size: 15px; font-weight: 700; color: var(--text, #fff); margin: 0 0 14px; }
.pa-history-list { display: flex; flex-direction: column; gap: 8px; }
.pa-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border-radius: 11px;
}
.pa-history-date { font-size: 12px; color: var(--text-secondary, rgba(255,255,255,0.4)); min-width: 80px; }
.pa-history-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 100px; overflow: hidden; }
.pa-history-fill { height: 100%; border-radius: 100px; }
.pa-history-score { font-size: 13px; font-weight: 700; min-width: 36px; text-align: right; }

/* ─── LEGACY COMPAT (for pa-styles.js injected classes still used) ─ */
.trends-svg, .evolution-svg { width: 100%; height: 100%; }
.chart-empty, .trends-empty { text-align: center; padding: 20px; color: var(--text-secondary, rgba(255,255,255,0.4)); font-size: 13px; }

/* ─── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pa-premium-header { padding: 28px 16px 20px; }
    .pa-premium-title { font-size: 26px; }
    .pa-premium-tabs { margin: 0 12px 14px; }
    .pa-premium-content { padding: 0 12px 30px; }
    .pa-step-card { padding: 18px; }
    .pa-score-hero { flex-direction: column; text-align: center; gap: 20px; }
    .pa-axes-grid { grid-template-columns: 1fr; }
    .pa-rating-row { gap: 5px; }
    .pa-rbtn-lbl { display: none; }
    .pa-prog-dots { max-width: 100px; }
    .pa-axis-step-name { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════════════
   INTRO LANDING PAGE
   ═══════════════════════════════════════════════════════════════════ */

.pa-intro {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 8px 0 24px;
}

.pa-intro-hero {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 28px 24px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent) 0%, rgba(59,130,246,0.08) 100%);
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.pa-intro-silhouette {
    flex-shrink: 0;
    opacity: 0.85;
    filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 40%, transparent));
}

.pa-intro-text {
    flex: 1;
    min-width: 0;
}

.pa-intro-title {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--accent) 100%, transparent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 8px;
    line-height: 1.2;
}

.pa-intro-subtitle {
    font-size: 15px;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    margin: 0 0 16px;
    line-height: 1.5;
}

.pa-intro-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.pa-intro-meta span {
    font-size: 12px;
    padding: 4px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    color: var(--text-secondary, rgba(255,255,255,0.6));
}

.pa-intro-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 40%, transparent);
}

.pa-intro-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 50%, transparent);
}

.pa-intro-dims {
    background: rgba(255,255,255,0.02);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 20px;
}

.pa-intro-dims-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 14px;
}

.pa-intro-dims-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.pa-intro-dim-card {
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid var(--dim-color, var(--accent-light));
    border-radius: 10px;
    transition: background 0.15s ease;
}

.pa-intro-dim-card:hover {
    background: rgba(255,255,255,0.06);
}

.pa-intro-dim-icon {
    font-size: 22px;
    display: block;
    margin-bottom: 6px;
}

.pa-intro-dim-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin-bottom: 3px;
}

.pa-intro-dim-desc {
    font-size: 11px;
    color: var(--text-secondary, rgba(255,255,255,0.45));
    line-height: 1.4;
}

.pa-intro-history-hint {
    margin-top: 14px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius: 10px;
    font-size: 13px;
    color: color-mix(in srgb, var(--accent) 90%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pa-intro-history-hint a {
    color: var(--accent-light);
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   META RADAR + SCORES (results section)
   ═══════════════════════════════════════════════════════════════════ */

.pa-meta-radar-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px 0 16px;
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
}

.pa-meta-score-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.pa-meta-score-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.pa-meta-score-label {
    font-size: 13px;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    width: 100px;
    flex-shrink: 0;
}

.pa-meta-score-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 100px;
    overflow: hidden;
}

.pa-meta-score-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 0.6s ease;
}

.pa-meta-score-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #fff);
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   AI ANALYSIS BOX
   ═══════════════════════════════════════════════════════════════════ */

.pa-ai-analysis {
    margin: 20px 0;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    overflow: hidden;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.pa-ai-analysis-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font-size: 13px;
    font-weight: 700;
    color: color-mix(in srgb, var(--accent) 100%, transparent);
    letter-spacing: 0.03em;
}

.pa-ai-analysis-text {
    padding: 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary, rgba(255,255,255,0.75));
    white-space: pre-wrap;
}

.pa-ai-analysis-text.loading {
    color: var(--text-secondary, rgba(255,255,255,0.4));
    font-style: italic;
    animation: pa-pulse 1.8s ease-in-out infinite;
}

@keyframes pa-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.pa-ai-analysis-error {
    color: rgba(239,68,68,0.7);
    font-size: 13px;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   HISTORY COMPARE (results)
   ═══════════════════════════════════════════════════════════════════ */

.pa-history-compare {
    margin-top: 20px;
    padding: 16px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
}

.pa-history-compare h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--text-primary, rgba(255,255,255,0.85));
}

.pa-history-compare p {
    font-size: 13px;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   PROFIL TAB
   ═══════════════════════════════════════════════════════════════════ */

.pa-profil-tab {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 4px 0 24px;
}

.pa-profil-empty {
    text-align: center;
    padding: 48px 24px;
    background: rgba(255,255,255,0.02);
    border-radius: 16px;
    border: 1px dashed rgba(255,255,255,0.1);
}

.pa-profil-empty p {
    font-size: 15px;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    margin: 0 0 16px;
}

.pa-profil-type-card {
    padding: 24px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent) 0%, color-mix(in srgb, var(--accent) 8%, transparent) 100%);
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    text-align: center;
}

.pa-profil-type-badge {
    font-size: 52px;
    display: block;
    margin-bottom: 12px;
    line-height: 1;
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 40%, transparent));
}

.pa-profil-type-name {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 8px;
    background: linear-gradient(135deg, #fff 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pa-profil-type-desc {
    font-size: 14px;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    margin: 0;
    line-height: 1.6;
    max-width: 400px;
    margin-inline: auto;
}

.pa-profil-radar-row {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 20px;
    background: rgba(255,255,255,0.02);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
}

.pa-profil-radar-wrap {
    flex-shrink: 0;
}

.pa-profil-dims {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pa-profil-dim-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pa-profil-dim-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.pa-profil-dim-label {
    font-size: 12px;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    width: 90px;
    flex-shrink: 0;
}

.pa-profil-dim-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.07);
    border-radius: 100px;
    overflow: hidden;
}

.pa-profil-dim-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 0.6s ease;
}

.pa-profil-dim-score {
    font-size: 12px;
    font-weight: 700;
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}

.pa-profil-insights {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pa-profil-forces,
.pa-profil-growth,
.pa-profil-workstyle {
    padding: 18px;
    background: rgba(255,255,255,0.02);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
}

.pa-profil-forces h3,
.pa-profil-growth h3,
.pa-profil-workstyle h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--text-primary, rgba(255,255,255,0.85));
}

.pa-profil-force-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    margin-bottom: 8px;
}

.pa-profil-force-item:last-child { margin-bottom: 0; }

.pa-profil-force-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.pa-profil-force-item strong {
    font-size: 13px;
    color: var(--text-primary, rgba(255,255,255,0.85));
    display: block;
    margin-bottom: 2px;
}

.pa-profil-force-desc {
    font-size: 12px;
    color: var(--text-secondary, rgba(255,255,255,0.45));
    line-height: 1.4;
}

.pa-profil-growth-item {
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    margin-bottom: 8px;
}

.pa-profil-growth-item:last-child { margin-bottom: 0; }

.pa-profil-growth-item strong {
    font-size: 13px;
    color: var(--text-primary, rgba(255,255,255,0.85));
}

.pa-profil-growth-item p {
    font-size: 12px;
    color: var(--text-secondary, rgba(255,255,255,0.45));
    margin: 4px 0 0;
    line-height: 1.4;
}

.pa-profil-workstyle p {
    font-size: 14px;
    color: var(--text-secondary, rgba(255,255,255,0.65));
    margin: 0;
    line-height: 1.6;
}

.pa-profil-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding-top: 4px;
}

/* ─── RESPONSIVE ─ */
@media (max-width: 640px) {
    .pa-intro-hero { flex-direction: column; text-align: center; padding: 20px 16px; }
    .pa-intro-silhouette { display: none; }
    .pa-intro-title { font-size: 24px; }
    .pa-intro-dims-grid { grid-template-columns: 1fr 1fr; }
    .pa-profil-radar-row { flex-direction: column; }
    .pa-profil-dim-label { width: 70px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONGLET SIGNAUX — Portrait comportemental + Life Insights
   Ajouté ProductiveApp 2026
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-signaux-tab {
    padding: 0 0 40px;
    animation: paFadeIn .35s ease;
}

.pa-signaux-header {
    text-align: center;
    padding: 32px 24px 28px;
    position: relative;
}

.pa-signaux-header h2 {
    font-size: 26px;
    font-weight: 800;
    background: linear-gradient(135deg, #a78bfa, #67e8f9, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 8px;
    letter-spacing: -.5px;
}

.pa-signaux-lead {
    font-size: 13px;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    margin: 0;
    letter-spacing: .3px;
}

/* Blocs */
.pa-signaux-block {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    margin: 0 16px 20px;
    overflow: hidden;
    transition: border-color .25s;
}

.pa-signaux-block:hover {
    border-color: rgba(167,139,250,0.2);
}

.pa-signaux-block-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.pa-signaux-block-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pa-signaux-block-icon {
    font-size: 22px;
    line-height: 1;
}

.pa-signaux-block-meta h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, rgba(255,255,255,0.9));
    margin: 0 0 4px;
}

.pa-signaux-block-meta p {
    font-size: 12px;
    color: var(--text-secondary, rgba(255,255,255,0.4));
    margin: 0;
}

.pa-signaux-behavioral-wrap,
.pa-signaux-insights-wrap {
    padding: 20px;
}

/* Skeleton loaders */
.pa-signaux-skeleton { padding: 4px 0; }
.pa-sk-line {
    height: 12px;
    background: rgba(255,255,255,0.07);
    border-radius: 6px;
    animation: paBarGrow 1.4s ease-in-out infinite alternate;
}
.pa-sk-grid-ph {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 16px;
    height: 60px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
}

.pa-signaux-no-data {
    text-align: center;
    padding: 32px 20px;
}
.pa-signaux-no-icon { font-size: 36px; margin-bottom: 12px; }
.pa-signaux-no-data p {
    font-size: 13px;
    color: var(--text-secondary, rgba(255,255,255,0.45));
    line-height: 1.6;
}
.pa-signaux-empty {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary, rgba(255,255,255,0.4));
    padding: 24px 20px;
    margin: 0;
}
.pa-signaux-error {
    font-size: 13px;
    color: rgba(239,68,68,.7);
    padding: 12px 0;
    margin: 0;
}

/* ── Life Insights inside Signaux ── */
.pa-li-snapshot {
    background: linear-gradient(135deg, rgba(167,139,250,0.08), rgba(103,232,249,0.05));
    border: 1px solid rgba(167,139,250,0.15);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.pa-li-snapshot-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #a78bfa;
    margin-bottom: 8px;
}

.pa-li-snapshot-summary {
    font-size: 13px;
    color: var(--text-primary, rgba(255,255,255,0.8));
    margin: 0 0 10px;
    line-height: 1.5;
}

.pa-li-snapshot-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pa-li-snap-item {
    font-size: 12px;
    background: rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 4px 12px;
    color: var(--text-secondary, rgba(255,255,255,0.65));
}

/* Stats grid */
.pa-li-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

@media (max-width: 480px) {
    .pa-li-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.pa-li-stat-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 14px 10px;
    text-align: center;
    transition: background .2s, border-color .2s;
}

.pa-li-stat-card:hover {
    background: rgba(167,139,250,0.07);
    border-color: rgba(167,139,250,0.15);
}

.pa-li-stat-icon { font-size: 20px; margin-bottom: 6px; }

.pa-li-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent, #a78bfa);
    line-height: 1;
    margin-bottom: 4px;
}

.pa-li-stat-label {
    font-size: 11px;
    color: var(--text-secondary, rgba(255,255,255,0.4));
}

/* Insights list */
.pa-li-insights-list { display: flex; flex-direction: column; gap: 10px; }

.pa-li-insight-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    position: relative;
    transition: border-color .2s, background .2s;
}

.pa-li-insight-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(167,139,250,0.2);
}

.pa-li-insight-card.is-read {
    opacity: .5;
}

.pa-li-insight-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.pa-li-insight-body { flex: 1; min-width: 0; }

.pa-li-insight-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, rgba(255,255,255,0.85));
    margin-bottom: 4px;
    line-height: 1.4;
}

.pa-li-insight-msg {
    font-size: 12px;
    color: var(--text-secondary, rgba(255,255,255,0.45));
    line-height: 1.5;
}

.pa-li-mark-read {
    background: rgba(167,139,250,0.15);
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    color: #a78bfa;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}
.pa-li-mark-read:hover { background: rgba(167,139,250,0.3); }

/* ═══════════════════════════════════════════════════════════════════════════
   ONGLET RAPPORT — Analyse IA profonde
   ═══════════════════════════════════════════════════════════════════════════ */

.pa-rapport-tab {
    padding: 0 0 48px;
    animation: paFadeIn .35s ease;
}

/* Hero section */
.pa-rapport-hero {
    position: relative;
    margin: 16px 16px 0;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(99,102,241,0.12) 0%,
        rgba(139,92,246,0.08) 50%,
        rgba(6,182,212,0.06) 100%);
    border: 1px solid rgba(139,92,246,0.2);
}

.pa-rapport-hero-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(139,92,246,0.15) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 50%, rgba(6,182,212,0.08) 0%, transparent 60%);
    pointer-events: none;
}

.pa-rapport-hero-content {
    position: relative;
    padding: 36px 28px 32px;
    text-align: center;
}

.pa-rapport-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(139,92,246,0.18);
    border: 1px solid rgba(139,92,246,0.3);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #c4b5fd;
    margin-bottom: 18px;
}

.pa-rapport-title {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, #e0d7ff 0%, #a78bfa 40%, #67e8f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 10px;
    letter-spacing: -.5px;
    line-height: 1.2;
}

.pa-rapport-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin: 0 0 24px;
    line-height: 1.5;
}

/* Pilliers du rapport */
.pa-rapport-pillars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.pa-rapport-pillar {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
    transition: background .2s, border-color .2s;
}

.pa-rapport-pillar:hover {
    background: rgba(167,139,250,0.12);
    border-color: rgba(167,139,250,0.25);
    color: #c4b5fd;
}

/* Frameworks badges (état vide) */
.pa-rapport-frameworks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 20px 0 28px;
}

.pa-rapport-fw-badge {
    background: rgba(167,139,250,0.1);
    border: 1px solid rgba(167,139,250,0.2);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 12px;
    color: #c4b5fd;
}

/* Container du rapport généré */
.pa-rapport-tab .pa-report-container {
    margin: 24px 16px 0;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    padding: 24px;
    transition: border-color .25s;
}

.pa-rapport-tab .pa-report-container:hover {
    border-color: rgba(167,139,250,0.15);
}

/* Amélioration du bouton générer rapport */
.pa-rapport-tab .pa-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 20px rgba(99,102,241,0.3);
}

.pa-rapport-tab .pa-report-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(99,102,241,0.45);
}

/* Contenu rapport généré */
.pa-ai-report-content {
    line-height: 1.75;
    color: var(--text-primary, rgba(255,255,255,0.85));
}

.pa-ai-report-content h2 {
    font-size: 17px;
    font-weight: 700;
    color: #c4b5fd;
    margin: 24px 0 10px;
    border-bottom: 1px solid rgba(167,139,250,0.15);
    padding-bottom: 8px;
}

.pa-ai-report-content h3 {
    font-size: 14px;
    font-weight: 600;
    color: #a5b4fc;
    margin: 18px 0 8px;
}

.pa-ai-report-content p {
    font-size: 14px;
    margin: 0 0 12px;
    color: rgba(255,255,255,0.75);
}

.pa-ai-report-content strong {
    color: rgba(255,255,255,0.92);
    font-weight: 600;
}

.pa-ai-report-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
}

.pa-ai-report-content th {
    background: rgba(167,139,250,0.1);
    color: #c4b5fd;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(167,139,250,0.2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.pa-ai-report-content td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    vertical-align: top;
}

.pa-ai-report-content hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 20px 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .pa-rapport-hero-content { padding: 28px 20px 24px; }
    .pa-rapport-title { font-size: 22px; }
    .pa-rapport-tab .pa-report-container { margin: 16px 8px 0; padding: 16px; }
    .pa-signaux-block { margin: 0 8px 16px; }
    .pa-li-stats-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ===== css/reports-premium.css?v=2602240010 ===== */
/**
 * REPORTS PREMIUM CSS - ProductiveApp
 * Glassmorphism, animations, premium layout
 */

/* ===== VARIABLES ===== */
:root {
    --rp-glass: rgba(255, 255, 255, 0.035);
    --rp-glass-border: rgba(255, 255, 255, 0.07);
    --rp-glass-hover: rgba(255, 255, 255, 0.07);
    --rp-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    --rp-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.2);
    --rp-shadow-glow: 0 0 30px rgba(224, 120, 64, 0.12);
    --rp-radius: 20px;
    --rp-radius-sm: 12px;
    --rp-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== GLASS CARD BASE ===== */
.glass-card {
    background: var(--rp-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--rp-glass-border);
    border-radius: var(--rp-radius);
    transition: all var(--rp-transition);
}
.glass-card:hover {
    border-color: rgba(224, 120, 64, 0.15);
    box-shadow: var(--rp-shadow);
    transform: translateY(-2px);
}

/* ===== ENTRANCE ANIMATIONS ===== */
.entrance-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.entrance-fade.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ===== REPORTS PAGE ===== */
.reports-page {
    padding: 0;
    max-width: 1400px;
    margin: 0 auto;
}
.reports-page .view-header {
    margin-bottom: 24px;
}

/* ===== TAB NAVIGATION ===== */
.reports-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 32px;
    background: var(--rp-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--rp-glass-border);
    padding: 5px;
    border-radius: 16px;
}
.reports-tab {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: var(--text-muted, #888);
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.3px;
}
.reports-tab:hover {
    color: var(--text, #fff);
    background: rgba(255,255,255,0.04);
}
.reports-tab.active {
    background: linear-gradient(135deg, var(--accent, #e07840), rgba(224,120,64,0.85));
    color: white;
    box-shadow: 0 4px 16px rgba(224,120,64,0.3);
}
.reports-tab svg { width: 16px; height: 16px; }
.reports-tab-content { display: none; }
.reports-tab-content.active { display: block; }

/* ===== PERIOD SELECTOR ===== */
.reports-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.period-selector {
    display: flex;
    gap: 4px;
    background: var(--rp-glass);
    border: 1px solid var(--rp-glass-border);
    padding: 4px;
    border-radius: 12px;
}
.period-btn {
    padding: 8px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted, #888);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}
.period-btn:hover { color: var(--text, #fff); background: rgba(255,255,255,0.05); }
.period-btn.active {
    background: var(--accent, #e07840);
    color: white;
}
.period-navigation {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nav-btn {
    width: 36px; height: 36px;
    border: 1px solid var(--rp-glass-border);
    background: var(--rp-glass);
    border-radius: 10px;
    color: var(--text-muted, #888);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.nav-btn:hover { color: var(--text, #fff); border-color: var(--accent, #e07840); }
.nav-btn svg { width: 16px; height: 16px; }
.period-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #fff);
    min-width: 160px;
    text-align: center;
}

/* ===== KPI GRID (6 cards) ===== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 36px;
}
.kpi-card {
    border-radius: var(--rp-radius);
    padding: 22px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--rp-glass-border);
    transition: all var(--rp-transition);
}
.kpi-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--rp-shadow-glow);
    border-color: rgba(224,120,64,0.2);
}
.kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.kpi-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kpi-icon svg { width: 20px; height: 20px; }
.kpi-icon-green { background: rgba(34,197,94,0.12); color: #22c55e; }
.kpi-icon-blue { background: rgba(59,130,246,0.12); color: #3b82f6; }
.kpi-icon-orange { background: rgba(224,120,64,0.12); color: #e07840; }
.kpi-icon-red { background: rgba(239,68,68,0.12); color: #ef4444; }
.kpi-icon-purple { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-light); }
.kpi-icon-cyan { background: rgba(6,182,212,0.12); color: #06b6d4; }

.kpi-icon-fire {
    animation: fireGlow 1.5s ease-in-out infinite alternate;
}
@keyframes fireGlow {
    from { box-shadow: 0 0 6px rgba(239,68,68,0.25); }
    to { box-shadow: 0 0 18px rgba(239,68,68,0.5); }
}

.kpi-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text, #fff);
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}
.kpi-label {
    font-size: 0.78rem;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.kpi-trend {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
}
.trend-up { background: rgba(34,197,94,0.12); color: #22c55e; }
.trend-down { background: rgba(239,68,68,0.12); color: #ef4444; }
.trend-flat { background: rgba(148,163,184,0.12); color: #94a3b8; }

.kpi-sparkline {
    margin-top: 10px;
    height: 28px;
    opacity: 0.85;
}
.kpi-mini-gauge {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}
.kpi-mini-rings {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}
.mini-ring-item {
    position: relative;
}

/* ===== PREMIUM SECTIONS ===== */
.premium-section {
    margin-bottom: 36px;
}
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text, #fff);
    margin: 0;
    letter-spacing: 0.2px;
}
.section-title svg { width: 18px; height: 18px; color: var(--accent, #e07840); }
.reports-section {
    margin-bottom: 36px;
}
.reports-section .section-title {
    margin-bottom: 14px;
}

/* ===== CONTRIBUTION HEATMAP ===== */
.heatmap-card {
    padding: 20px 24px;
    overflow: visible;
}
.heatmap-wrapper {
    min-width: 600px;
}
.hm-cell {
    transition: opacity 0.15s;
}
.hm-cell:hover {
    opacity: 0.8;
    stroke: rgba(255,255,255,0.3);
    stroke-width: 1;
}
.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 10px;
}
.heatmap-legend-label {
    font-size: 0.7rem;
    color: var(--text-muted, #64748b);
    opacity: 0.7;
}
.heatmap-legend-cells {
    display: flex;
    gap: 3px;
}
.hm-legend-cell {
    width: 11px;
    height: 11px;
    border-radius: 2px;
}

/* ===== PRODUCTIVITY TIMELINE ===== */
.timeline-card {
    padding: 24px;
    height: 280px;
}

/* ===== PROJECT HEALTH GRID ===== */
.project-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin-bottom: 36px;
}
.project-health-card {
    padding: 22px;
}
.project-health-card:hover {
    transform: translateY(-4px);
}
.phc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.phc-icon { font-size: 1.4rem; }
.phc-name {
    flex: 1;
    font-weight: 600;
    color: var(--text, #fff);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.phc-health { display: flex; align-items: center; }
.health-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    display: inline-block;
    animation: healthPulse 2s ease-in-out infinite;
}
@keyframes healthPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}
.phc-ring {
    display: flex;
    justify-content: center;
    margin: 14px 0;
}
.phc-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 14px;
}
.phc-stat { text-align: center; }
.phc-stat-count {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text, #fff);
}
.phc-stat-label {
    font-size: 0.68rem;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.phc-bar {
    display: flex;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg-tertiary, rgba(255,255,255,0.04));
}
.phc-bar-done {
    background: var(--success, #10b981);
    transition: width 1.2s ease-out;
}
.phc-bar-inprogress {
    background: var(--warning, #f59e0b);
    transition: width 1.2s ease-out;
}

/* ===== PROGRESS RING ANIMATION ===== */
.progress-ring-anim {
    transition: stroke-dashoffset 1.5s ease-out;
}

/* ===== GAUGE SECTION ===== */
.gauge-section {
    padding: 28px;
    text-align: center;
    margin-bottom: 36px;
}
.gauge-score-path {
    transition: stroke-dasharray 2s ease-out;
}
.gauge-needle-anim {
    animation: needleAppear 1.5s ease-out;
}
@keyframes needleAppear {
    0% { opacity: 0; }
    40% { opacity: 0; }
    100% { opacity: 1; }
}

/* ===== CHARTS GRID (6 charts, 3x2) ===== */
.charts-grid-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}
.chart-card {
    padding: 22px;
}
.chart-card:hover {
    transform: translateY(-3px);
}
.chart-card h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text, #fff);
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.chart-card h3 span { font-size: 1rem; }
.chart-container {
    position: relative;
    height: 210px;
}
.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Work Pattern Heatmap (inside chart-card) */
.work-pattern-svg {
    width: 100%;
    height: 100%;
}
.wp-cell {
    transition: opacity 0.15s;
}
.wp-cell:hover {
    opacity: 0.7;
    stroke: rgba(255,255,255,0.4);
    stroke-width: 0.5;
}

/* ===== SWOT SECTION ===== */
.swot-section {
    margin-bottom: 36px;
}
.swot-section .section-title {
    margin-bottom: 16px;
}
.swot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.swot-card {
    padding: 22px;
    border-radius: var(--rp-radius);
    border: 1px solid var(--rp-glass-border);
    transition: all var(--rp-transition);
}
.swot-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--rp-shadow);
}
.swot-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.swot-icon { font-size: 1.3rem; }
.swot-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text, #fff);
    margin: 0;
}
.swot-card ul {
    padding-left: 18px;
    margin: 0;
    list-style: none;
}
.swot-card li {
    color: var(--text, #fff);
    margin-bottom: 8px;
    line-height: 1.5;
    font-size: 0.85rem;
    position: relative;
    padding-left: 12px;
    opacity: 0.9;
}
.swot-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
}
.swot-placeholder {
    text-align: center;
    padding: 40px;
    color: var(--text-muted, #888);
    font-size: 0.9rem;
}

/* ===== RECOMMENDATIONS ===== */
.recommendations-section {
    padding: 28px;
    margin-bottom: 36px;
}
.recommendations-section .section-title {
    margin-bottom: 18px;
}
.recommendation-item {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    margin-bottom: 10px;
    transition: all 0.3s;
    align-items: flex-start;
}
.recommendation-item:hover {
    background: rgba(224,120,64,0.06);
    transform: translateX(4px);
}
.rec-number {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    background: rgba(224,120,64,0.12);
    color: var(--accent, #e07840);
}
.rec-text {
    font-size: 0.88rem;
    color: var(--text, #fff);
    line-height: 1.5;
    opacity: 0.9;
}

/* ===== AI GENERATE ACTIONS ===== */
.ai-actions-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    align-items: center;
}
.ai-actions-bar select {
    padding: 10px 16px;
    background: var(--rp-glass);
    border: 1px solid var(--rp-glass-border);
    border-radius: 10px;
    color: var(--text, #fff);
    font-size: 13px;
    cursor: pointer;
}
.ai-actions-bar select option {
    background: var(--bg-primary, #0f0f23);
    color: var(--text, #fff);
}
.ai-btn-gen {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-btn-gen:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ai-btn-primary-gen {
    background: linear-gradient(135deg, var(--accent, #e07840), rgba(224,120,64,0.85));
    color: white;
    box-shadow: 0 4px 12px rgba(224,120,64,0.25);
}
.ai-btn-primary-gen:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(224,120,64,0.35);
}
.ai-btn-secondary-gen {
    background: var(--rp-glass);
    border: 1px solid var(--rp-glass-border);
    color: var(--text, #fff);
}
.ai-btn-secondary-gen:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.ai-btn-accent-gen {
    background: linear-gradient(135deg, var(--accent-light), var(--accent-light));
    color: white;
}
.ai-btn-accent-gen:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Spinner */
.ai-spin {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: aiSpin 0.7s linear infinite;
}
@keyframes aiSpin {
    to { transform: rotate(360deg); }
}

/* ===== AUDIT PREMIUM TAB ===== */
.audit-premium-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 0;
}
.audit-header {
    text-align: center;
    margin-bottom: 36px;
}
.audit-header h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text, #fff);
    margin: 0 0 8px 0;
}
.audit-header p {
    color: var(--text-muted, #888);
    font-size: 0.95rem;
    margin: 0;
}
.audit-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 18px;
}
.audit-type-card {
    padding: 26px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: var(--rp-glass);
    border: 1px solid var(--rp-glass-border);
    border-radius: var(--rp-radius);
    transition: all var(--rp-transition);
}
.audit-type-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent, #e07840), rgba(224,120,64,0.4));
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: left;
}
.audit-type-card:hover::before { transform: scaleX(1); }
.audit-type-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--rp-shadow-glow);
    border-color: rgba(224,120,64,0.2);
}
.audit-type-icon { font-size: 2.2rem; margin-bottom: 14px; }
.audit-type-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text, #fff);
    margin: 0 0 6px 0;
}
.audit-type-card p {
    font-size: 0.82rem;
    color: var(--text-muted, #888);
    margin: 0 0 16px 0;
    line-height: 1.5;
}
.audit-type-meta {
    margin-bottom: 14px;
}
.audit-time {
    font-size: 0.72rem;
    color: var(--text-muted, #888);
    padding: 4px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 20px;
}
.audit-generate-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent, #e07840), rgba(224,120,64,0.85));
    color: white;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}
.audit-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(224,120,64,0.3);
}

/* ===== REPORT HISTORY (existing reports-list) ===== */
.reports-list { margin-top: 8px; }
.report-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--rp-glass);
    border: 1px solid var(--rp-glass-border);
    border-radius: var(--rp-radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s;
}
.report-list-item:hover {
    border-color: rgba(224,120,64,0.2);
    transform: translateX(4px);
    background: var(--rp-glass-hover);
}

/* Summary cards (legacy compat for existing reports-summary layout) */
.reports-summary {
    margin-bottom: 0;
}
.summary-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-muted, #888);
}

/* ===== REPORT DETAIL MODAL ===== */
.report-detail-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
}
.report-detail-modal .modal-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}
.report-detail-modal .modal-content {
    position: relative;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    margin: 5vh auto;
    background: var(--bg-card, #1a1a2e);
    border: 1px solid var(--rp-glass-border);
    border-radius: var(--rp-radius);
    overflow: auto;
}
.report-detail-modal .modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--rp-glass-border);
}
.report-detail-modal .modal-body {
    padding: 24px;
}
.btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-muted, #888);
    cursor: pointer;
    font-size: 13px;
}
.btn-back:hover { color: var(--text, #fff); }

/* ===== EMPTY STATES ===== */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted, #888);
}
.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}
.empty-state p {
    margin: 0;
    font-size: 0.9rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .charts-grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .charts-grid-6 { grid-template-columns: 1fr; }
    .swot-grid { grid-template-columns: 1fr; }
    .reports-filters { flex-direction: column; align-items: stretch; }
    .period-navigation { justify-content: center; }
    .project-health-grid { grid-template-columns: 1fr; }
    .ai-actions-bar { flex-direction: column; }
}
@media (max-width: 640px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .kpi-value { font-size: 1.6rem; }
    .reports-tabs { flex-direction: column; }
    .audit-types-grid { grid-template-columns: 1fr; }
}

/* ===== AI REPORT MODAL (from ai-reports-view) ===== */
.ai-report-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ai-report-modal.open { opacity: 1; }
.ai-report-modal-content {
    width: 90%;
    max-width: 750px;
    max-height: 85vh;
    background: var(--bg-card, #1a1a2e);
    border: 1px solid var(--rp-glass-border);
    border-radius: var(--rp-radius);
    overflow: auto;
    transform: scale(0.92);
    transition: transform 0.3s ease;
}
.ai-report-modal.open .ai-report-modal-content { transform: scale(1); }
.ai-report-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--rp-glass-border);
}
.ai-report-modal-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text, #fff);
    margin: 0;
}
.ai-modal-close {
    width: 36px; height: 36px;
    border: none;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    color: var(--text-muted, #888);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.ai-modal-close:hover { background: rgba(255,255,255,0.1); color: var(--text, #fff); }
.ai-report-modal-body {
    padding: 24px;
}
.ai-report-score-large {
    text-align: center;
    margin-bottom: 24px;
}
.ai-score-ring {
    display: inline-block;
    position: relative;
    width: 100px; height: 100px;
}
.ai-score-ring svg { width: 100%; height: 100%; }
.ai-score-value {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text, #fff);
}
.ai-score-label {
    display: block;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ai-report-analysis { margin-bottom: 20px; }
.ai-report-analysis h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text, #fff);
    margin: 0 0 10px 0;
}
.ai-report-analysis p {
    font-size: 0.88rem;
    color: var(--text, #fff);
    opacity: 0.85;
    line-height: 1.6;
    white-space: pre-line;
}
.ai-swot {
    padding: 16px;
    border-radius: var(--rp-radius-sm);
    margin-bottom: 12px;
    border-left: 4px solid;
}
.ai-strengths-full { background: rgba(16,185,129,0.06); border-color: #10b981; }
.ai-weaknesses-full { background: rgba(245,158,11,0.06); border-color: #f59e0b; }
.ai-opportunities { background: rgba(59,130,246,0.06); border-color: #3b82f6; }
.ai-threats { background: rgba(239,68,68,0.06); border-color: #ef4444; }
.ai-swot h3, .ai-recommendations-full h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text, #fff);
    margin: 0 0 8px 0;
}
.ai-swot ul, .ai-recommendations-full ol {
    padding-left: 20px;
    margin: 0;
}
.ai-swot li, .ai-recommendations-full li {
    font-size: 0.85rem;
    color: var(--text, #fff);
    opacity: 0.85;
    margin-bottom: 6px;
    line-height: 1.5;
}
.ai-recommendations-full {
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--rp-radius-sm);
    background: rgba(224,120,64,0.05);
    border-left: 4px solid var(--accent, #e07840);
}
.ai-report-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--rp-glass-border);
}
.ai-report-modal-footer button {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

/* View button styles */
.btn { display: inline-flex; align-items: center; gap: 6px; }
.btn-primary {
    background: linear-gradient(135deg, var(--accent, #e07840), rgba(224,120,64,0.85));
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(224,120,64,0.3);
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary svg { width: 16px; height: 16px; }

/* AI Reports list items */
.ai-no-reports, .ai-error {
    text-align: center;
    padding: 24px;
    color: var(--text-muted, #888);
    font-size: 0.85rem;
}
.ai-report-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.ai-report-item:hover {
    background: rgba(224,120,64,0.06);
    transform: translateX(4px);
}
.ai-report-item-icon { font-size: 1.2rem; }
.ai-report-item-info { flex: 1; }
.ai-report-item-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text, #fff);
    margin: 0 0 2px 0;
}
.ai-report-item-date {
    font-size: 0.72rem;
    color: var(--text-muted, #888);
}
.ai-report-item-score {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--score-color, var(--accent, #e07840));
}


/* ===== css/premium-enhancements.css?v=2602240002 ===== */
/**
 * PREMIUM ENHANCEMENTS v1.0 - Effets visuels ultra-premium
 * Glassmorphism avancé + Animations fluides + Micro-interactions
 */

/* ============================================
   GLOBAL PREMIUM SHADOWS & GLOWS
   ============================================ */

:root {
  --shadow-premium-sm: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-premium-md: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-premium-lg: 0 8px 32px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-premium-xl: 0 16px 64px rgba(0, 0, 0, 0.20), 0 8px 32px rgba(0, 0, 0, 0.12);
  
  --glow-gold: 0 0 20px rgba(212, 175, 55, 0.3), 0 0 40px rgba(212, 175, 55, 0.15);
  --glow-accent: 0 0 20px var(--accent-color-rgb, rgba(59, 130, 246, 0.3));
  
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  
  --transition-premium: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================
   BUTTONS PREMIUM
   ============================================ */

button, .btn, .cal-v7-btn, [class*="btn-"] {
  position: relative;
  overflow: hidden;
  transition: var(--transition-premium);
  box-shadow: var(--shadow-premium-sm);
}

button:hover, .btn:hover, .cal-v7-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-premium-md);
}

button:active, .btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-premium-sm);
}

/* Ripple effect on click */
button::before, .btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.28s ease-out, height 0.28s ease-out;
}

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

/* Primary buttons with gradient */
.cal-v7-btn-primary, .btn-primary, button[class*="primary"] {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-color-dark, #2563eb) 100%);
  border: none;
  color: white;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-premium-md), var(--glow-accent);
}

.cal-v7-btn-primary:hover {
  box-shadow: var(--shadow-premium-lg), var(--glow-accent);
  filter: brightness(1.1);
}

/* ============================================
   CARDS & CONTAINERS PREMIUM
   ============================================ */

/* SCOPED: glass only for explicitly named glass components
   — was [class*="card"],[class*="panel"] which matched everything */
.calendar-v7-container, .cal-v7-modal-content,
.glass-card, .glass-panel, .glass-widget,
.glass-kpi, .kpi-card, .glass-modal-content {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 16px;
  transition: var(--transition-premium);
}

.calendar-v7-container:hover {
  box-shadow: var(--shadow-premium-lg);
  border-color: rgba(255, 255, 255, 0.18);
}

/* ============================================
   CALENDAR SPECIFIC ENHANCEMENTS
   ============================================ */

/* Header premium */
.cal-v7-header {
  background: linear-gradient(135deg, 
    rgba(var(--accent-color-rgb, 59, 130, 246), 0.15) 0%,
    rgba(var(--accent-color-rgb, 59, 130, 246), 0.05) 100%);
  backdrop-filter: blur(10px);
  border-radius: 12px 12px 0 0;
  padding: 24px;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
}

.cal-v7-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%,
    var(--accent-color) 50%,
    transparent 100%);
  opacity: 0.6;
}

.cal-v7-title {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Filter chips premium */
.cal-v7-filter-chip {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 8px 16px;
  transition: var(--transition-bounce);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.cal-v7-filter-chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%);
  transition: left 0.25s ease-out;
}

.cal-v7-filter-chip:hover::before {
  left: 100%;
}

.cal-v7-filter-chip:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-premium-md);
  border-color: rgba(255, 255, 255, 0.25);
}

.cal-v7-filter-chip.active {
  background: linear-gradient(135deg, 
    var(--accent-color) 0%, 
    var(--accent-color-dark, #2563eb) 100%);
  border-color: transparent;
  color: white;
  font-weight: 600;
  box-shadow: var(--shadow-premium-md), var(--glow-accent);
}

/* Calendar grid cells */
.cal-v7-day-cell {
  transition: var(--transition-premium);
  position: relative;
}

.cal-v7-day-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, 
    rgba(var(--accent-color-rgb, 59, 130, 246), 0.1) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 8px;
}

.cal-v7-day-cell:hover::before {
  opacity: 1;
}

.cal-v7-day-cell:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-premium-sm);
  border-radius: 8px;
}

/* Event items premium */
.cal-v7-event-item {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border-left: 4px solid var(--accent-color);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 4px 0;
  transition: var(--transition-premium);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.cal-v7-event-item::after {
  content: '';
  position: absolute;
  top: 0;
  right: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%);
  transition: right 0.22s ease-out;
}

.cal-v7-event-item:hover::after {
  right: 100%;
}

.cal-v7-event-item:hover {
  transform: translateX(4px) scale(1.02);
  box-shadow: var(--shadow-premium-md);
  border-left-width: 6px;
}

/* ============================================
   MODAL PREMIUM
   ============================================ */

.cal-v7-modal-overlay {
  backdrop-filter: blur(10px) brightness(0.75);
  -webkit-backdrop-filter: blur(10px) brightness(0.75);
  background: rgba(0,0,0,0.35);
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cal-v7-modal-content {
  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-premium-xl);
  border: 2px solid var(--glass-border);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Input fields premium */
.cal-v7-modal-content input,
.cal-v7-modal-content select,
.cal-v7-modal-content textarea {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 12px 16px;
  transition: var(--transition-premium);
  backdrop-filter: blur(8px);
}

.cal-v7-modal-content input:focus,
.cal-v7-modal-content select:focus,
.cal-v7-modal-content textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(var(--accent-color-rgb, 59, 130, 246), 0.15),
              var(--shadow-premium-sm);
  transform: scale(1.01);
  background: rgba(255, 255, 255, 0.12);
}

/* ============================================
   SCROLLBAR PREMIUM
   ============================================ */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--glass-bg);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, 
    var(--accent-color) 0%,
    var(--accent-color-dark, #2563eb) 100%);
  border-radius: 10px;
  border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, 
    var(--accent-color-dark, #2563eb) 0%,
    var(--accent-color) 100%);
  box-shadow: var(--glow-accent);
}

/* ============================================
   TOOLTIPS PREMIUM
   ============================================ */

[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
  box-shadow: var(--shadow-premium-lg);
  animation: tooltipFade 0.2s ease-out;
}

@keyframes tooltipFade {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(-8px); }
}

/* ============================================
   RESPONSIVE PREMIUM TOUCHES
   ============================================ */

@media (max-width: 768px) {
  .calendar-v7-container {
    border-radius: 12px;
  }
  
  .cal-v7-header {
    padding: 16px;
  }
  
  .cal-v7-title {
    font-size: 22px;
  }
}

/* ============================================
   DARK MODE SPECIFIC ENHANCEMENTS
   ============================================ */

[data-theme*="dark"] .cal-v7-header,
[data-theme*="nuit"] .cal-v7-header,
[data-theme*="midnight"] .cal-v7-header {
  background: linear-gradient(135deg, 
    rgba(var(--accent-color-rgb, 59, 130, 246), 0.2) 0%,
    rgba(var(--accent-color-rgb, 59, 130, 246), 0.08) 100%);
}

[data-theme*="dark"] .cal-v7-event-item,
[data-theme*="nuit"] .cal-v7-event-item,
[data-theme*="midnight"] .cal-v7-event-item {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ============================================
   LOADING STATES PREMIUM
   ============================================ */

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.loading-skeleton {
  background: linear-gradient(90deg,
    var(--glass-bg) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    var(--glass-bg) 100%);
  background-size: 2000px 100%;
  animation: shimmer 2s infinite linear;
  border-radius: 8px;
}

/* ============================================
   MICRO-INTERACTIONS
   ============================================ */

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.pulse-animation {
  animation: pulse 2s infinite;
}

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

.float-animation {
  animation: float 3s ease-in-out infinite;
}


/* ===== css/performance-boost.css?v=2602240010 ===== */
/**
 * ================================================
 * PERFORMANCE BOOST - Ultra Fluidité
 * Force GPU acceleration + optimisations critiques
 * v3 — BUGFIX: retire auth-login-overlay de backface-visibility/isolation
 *              retire .sidebar de contain (casse le rendu dans certains browsers)
 * ================================================
 */

/* GPU Acceleration Globale */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Force GPU sur éléments animés — NE PAS inclure .main-content/.view-container
   NE PAS inclure .auth-login-overlay (backface-visibility:hidden peut l'invisibiliser)
   (crée des stacking contexts qui cassent z-index et positionnement des vues) */
.modal,
.modal-overlay,
.card,
.task-item,
.note-item,
.project-card,
[class*=btn],
[class*=button],
[class*=tooltip],
[class*=dropdown],
[class*=menu] {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Optimisation Scrolling — NE PAS inclure .main-content ni .view-container
   (overflow:auto les rendrait conteneurs de scroll → window.scrollTo(0,0) inopérant) */
.sidebar,
[class*=scrollable] {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
}

/* Disable animations sur éléments cachés (performance) */
.hidden,
[hidden],
.view-container:not(.active) {
    will-change: auto !important;
    transform: none !important;
}





/* Réduire repaints - containment — NE PAS inclure .view-container ni .sidebar
   (contain:layout isole le layout et peut casser le rendu) */
.card,
.modal {
    contain: layout style paint;
}

/* Optimisation Images */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Optimisation Fonts - pas de FOIT */
@font-face {
    font-display: swap;
}

/* Débounce hover effects sur mobile */
@media (hover: none) {
    *:hover {
        transition-duration: 0ms !important;
    }
}

/* Performance - désactiver animations si prefers-reduced-motion */
@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;
    }
}

/* Cursor: pointer cache pour éviter repaints */
[class*=btn],
[class*=button],
a,
button,
[onclick],
[role=button] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Optimisation Canvas Animations */
canvas {
    will-change: transform;
    transform: translateZ(0);
}

/* Defer non-critical animations */
.fire-bubble,
.particle,
[class*=sparkle],
[class*=glow] {
    will-change: auto;
}

/* Performance: Composite layers pour overlays — sans isolation (évite stacking context bugs) */
.modal-overlay,
.chatbot-panel {
    transform: translateZ(0);
}


/* ===== js/modules/auth/login.css?v=2602250020 ===== */
/* =============================================
   PRODUCTIVEAPP - AUTH LOGIN CSS v3.0
   Design premium split-screen — Maha Giri
   ============================================= */

/* === OVERLAY === */
.auth-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    overflow: hidden;
    animation: authFadeIn 0.5s ease;
}

@keyframes authFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* === PARTICULES DORÉES === */
.auth-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.auth-particles span {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #d4af37;
    border-radius: 50%;
    animation: authParticleFloat linear infinite;
    opacity: 0;
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.9);
}

.auth-particles span:nth-child(1)  { left: 7%;  animation-duration: 20s; animation-delay: 0s;    }
.auth-particles span:nth-child(2)  { left: 18%; animation-duration: 26s; animation-delay: 3s;   width: 3px; height: 3px; }
.auth-particles span:nth-child(3)  { left: 32%; animation-duration: 17s; animation-delay: 5s;   }
.auth-particles span:nth-child(4)  { left: 46%; animation-duration: 30s; animation-delay: 1s;   width: 1px; height: 1px; }
.auth-particles span:nth-child(5)  { left: 61%; animation-duration: 22s; animation-delay: 7s;   }
.auth-particles span:nth-child(6)  { left: 78%; animation-duration: 16s; animation-delay: 4s;   width: 3px; height: 3px; }
.auth-particles span:nth-child(7)  { left: 13%; animation-duration: 32s; animation-delay: 9s;   width: 1px; height: 1px; }
.auth-particles span:nth-child(8)  { left: 42%; animation-duration: 21s; animation-delay: 2s;   }
.auth-particles span:nth-child(9)  { left: 70%; animation-duration: 27s; animation-delay: 11s;  width: 1px; height: 1px; }
.auth-particles span:nth-child(10) { left: 88%; animation-duration: 19s; animation-delay: 6s;   }
.auth-particles span:nth-child(11) { left: 25%; animation-duration: 24s; animation-delay: 13s;  width: 1px; height: 1px; }
.auth-particles span:nth-child(12) { left: 55%; animation-duration: 29s; animation-delay: 8s;   width: 3px; height: 3px; }

@keyframes authParticleFloat {
    0%   { transform: translateY(105vh) scale(0); opacity: 0; }
    6%   { opacity: 0.9; transform: translateY(90vh) scale(1); }
    94%  { opacity: 0.3; }
    100% { transform: translateY(-5vh) scale(0.4); opacity: 0; }
}

/* === LAYOUT SPLIT-SCREEN === */
.auth-login-layout {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* === PANNEAU GAUCHE (formulaire) === */
.auth-login-left {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 44px;
    position: relative;
    z-index: 2;
    background: #05001a;
    overflow: hidden;
}

/* No divider — full screen */
.auth-login-left::after { display: none; }

/* === PANNEAU DROIT — masqué, form full screen === */
.auth-login-right {
    display: none !important;
}

.auth-master-image {
    position: absolute;
    inset: 0;
    animation: authImageReveal 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.auth-master-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    filter: brightness(0.72) saturate(1.2) contrast(1.04);
    transform: scale(1.05);
    transition: transform 10s ease;
}

.auth-login-right:hover .auth-master-image img {
    transform: scale(1);
}

.auth-master-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6,6,6,0.65) 0%, rgba(6,6,6,0.2) 25%, transparent 60%),
        linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.55) 100%),
        radial-gradient(ellipse at 65% 25%, rgba(212, 175, 55, 0.07) 0%, transparent 55%);
    z-index: 1;
    pointer-events: none;
}

@keyframes authImageReveal {
    from { opacity: 0; clip-path: inset(0 100% 0 0); }
    to   { opacity: 1; clip-path: inset(0 0% 0 0); }
}

/* === BOX FORMULAIRE — Glassmorphism === */
.auth-login-box {
    width: 100%;
    max-width: 440px;
    text-align: center;
    position: relative;
    z-index: 3;
    background: rgba(6, 2, 22, 0.60);
    backdrop-filter: blur(32px) saturate(1.5);
    -webkit-backdrop-filter: blur(32px) saturate(1.5);
    border: 1px solid rgba(160, 80, 255, 0.14);
    border-radius: 32px;
    padding: 52px 48px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 16px 56px rgba(0, 0, 0, 0.60),
        0 0 100px rgba(100, 20, 200, 0.14),
        0 0 160px rgba(255, 80, 20, 0.07);
    animation: authBoxEnter 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@keyframes authBoxEnter {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === LOGO === */
.auth-login-logo {
    margin-bottom: 22px;
    animation: authLogoEnter 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

.auth-login-logo img {
    width: 130px;
    height: 130px;
    border-radius: 0;
    object-fit: contain;
    border: none;
    background: transparent;
    filter:
        drop-shadow(0 0 28px rgba(212, 175, 55, 0.70))
        drop-shadow(0 0 60px rgba(255, 140, 20, 0.38))
        drop-shadow(0 0 100px rgba(220, 100, 20, 0.20));
    animation: authLogoPulse 5s ease-in-out infinite 2s;
}

@keyframes authLogoEnter {
    from { opacity: 0; transform: scale(0.55) rotate(-12deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes authLogoPulse {
    0%, 100% {
        filter: drop-shadow(0 0 28px rgba(212,175,55,0.70)) drop-shadow(0 0 60px rgba(255,140,20,0.38)) drop-shadow(0 0 100px rgba(220,100,20,0.20));
    }
    50% {
        filter: drop-shadow(0 0 40px rgba(244,208,63,0.90)) drop-shadow(0 0 80px rgba(255,160,30,0.55)) drop-shadow(0 0 130px rgba(220,100,20,0.30));
    }
}

/* === TITRE === */
.auth-login-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0 0 3px 0;
    background: linear-gradient(135deg, #f0d265 0%, #d4af37 35%, #f5d77a 65%, #c49b2e 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: authTitleEnter 0.7s ease 0.35s both, authTitleShimmer 6s linear infinite 3.5s;
}

@keyframes authTitleEnter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes authTitleShimmer {
    from { background-position: 0% center; }
    to   { background-position: 200% center; }
}

/* === TAGLINE === */
.auth-login-tagline {
    color: rgba(212, 175, 55, 0.38);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin: 0 0 34px 0;
    animation: authTitleEnter 0.7s ease 0.45s both;
}

/* === SUBTITLE === */
.auth-subtitle {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.88rem;
    margin: 0 0 20px 0;
    letter-spacing: 0.3px;
    animation: authTitleEnter 0.6s ease 0.55s both;
}

/* === PHASES === */
.auth-phase { transition: opacity 0.3s ease; }
.auth-phase.hidden { display: none !important; }

/* === INPUTS === */
.auth-inputs {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 12px;
}

.auth-input-wrapper {
    position: relative;
    animation: authInputSlide 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-input-wrapper:nth-child(1) { animation-delay: 0.6s; }
.auth-input-wrapper:nth-child(2) { animation-delay: 0.72s; }

@keyframes authInputSlide {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: translateX(0); }
}

.auth-input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: rgba(180, 100, 255, 0.45);
    pointer-events: none;
    transition: color 0.3s ease;
}

.auth-input-wrapper:focus-within .auth-input-icon {
    color: rgba(255, 160, 80, 0.85);
}

.auth-inputs input {
    width: 100%;
    padding: 14px 16px 14px 42px;
    border: 1px solid rgba(180, 100, 255, 0.28);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(110, 35, 200, 0.32) 0%, rgba(70, 20, 150, 0.28) 100%);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.93rem;
    outline: none;
    transition: all 0.35s ease;
    box-sizing: border-box;
    font-family: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 18px rgba(100,30,200,0.15);
}

.auth-inputs input:hover {
    border-color: rgba(200, 120, 255, 0.38);
    background: rgba(100, 30, 160, 0.28);
}

.auth-inputs input:focus {
    border-color: rgba(255, 150, 60, 0.65);
    background: rgba(90, 25, 150, 0.32);
    box-shadow:
        0 0 0 3px rgba(200, 80, 255, 0.10),
        0 0 24px rgba(255, 120, 40, 0.12);
}

.auth-inputs input::placeholder { color: rgba(255, 255, 255, 0.20); }

/* Autofill override */
.auth-inputs input:-webkit-autofill,
.auth-inputs input:-webkit-autofill:hover,
.auth-inputs input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(8, 3, 25, 0.97) inset;
    -webkit-text-fill-color: rgba(255,255,255,0.92);
    border-color: rgba(180, 80, 255, 0.35);
    transition: background-color 5000s ease-in-out 0s;
}

/* === ERREUR === */
.auth-error {
    color: #ff7373;
    font-size: 0.83rem;
    min-height: 20px;
    margin-bottom: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: left;
    padding-left: 2px;
}

.auth-error.visible { opacity: 1; }
.auth-error.shake { animation: authShake 0.4s ease; }

@keyframes authShake {
    0%, 100% { transform: translateX(0); }
    25%  { transform: translateX(-7px); }
    75%  { transform: translateX(7px); }
}

/* === REMEMBER ME === */
.auth-remember-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.78rem;
    cursor: pointer;
    margin-bottom: 16px;
    user-select: none;
    transition: color 0.2s ease;
    text-align: left;
}

.auth-remember-label:hover { color: rgba(255, 255, 255, 0.55); }

.auth-remember-checkbox {
    width: 14px;
    height: 14px;
    accent-color: #d4af37;
    cursor: pointer;
    flex-shrink: 0;
}

/* === BOUTON PRINCIPAL === */
.auth-btn {
    width: 100%;
    padding: 16px 28px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0d265 0%, #d4af37 30%, #c49b2e 60%, #d4af37 100%);
    background-size: 300% auto;
    color: #0a0800;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    animation: authInputSlide 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.82s both,
               authBtnShimmer 4s ease-in-out infinite 2s;
    box-shadow:
        0 4px 15px rgba(212, 175, 55, 0.3),
        0 0 0 1px rgba(212, 175, 55, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

@keyframes authBtnShimmer {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* Shine sweep */
.auth-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    transform: skewX(-25deg);
    animation: authBtnShineSweep 4s ease-in-out infinite 3s;
    pointer-events: none;
    z-index: 2;
}

@keyframes authBtnShineSweep {
    0%, 100% { left: -75%; opacity: 0; }
    10% { opacity: 1; }
    60% { left: 125%; opacity: 1; }
    70%, 100% { left: 125%; opacity: 0; }
}

/* Glow border effect */
.auth-btn::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f0d265, #d4af37, #b08828, #d4af37, #f0d265);
    background-size: 400% auto;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: authBtnGlowRotate 6s linear infinite;
    filter: blur(6px);
}

@keyframes authBtnGlowRotate {
    0% { background-position: 0% center; }
    100% { background-position: 400% center; }
}

.auth-btn:hover::after {
    opacity: 1;
}

.auth-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 12px 35px rgba(212, 175, 55, 0.4),
        0 0 20px rgba(212, 175, 55, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background-position: 100% center;
}

.auth-btn:active {
    transform: translateY(-1px) scale(0.99);
    box-shadow:
        0 4px 12px rgba(212, 175, 55, 0.25),
        inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition-duration: 0.1s;
}

.auth-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    animation: none;
}

.auth-btn:disabled::before,
.auth-btn:disabled::after {
    animation: none;
    opacity: 0;
}

.auth-btn-text {
    position: relative;
    z-index: 3;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.auth-btn-arrow {
    width: 18px;
    height: 18px;
    position: relative;
    z-index: 3;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.auth-btn:hover .auth-btn-arrow {
    transform: translateX(5px);
}

/* === MEMBER GRID === */
.auth-member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 11px;
    max-height: 380px;
    overflow-y: auto;
    padding: 4px;
}

.auth-member-grid::-webkit-scrollbar { width: 4px; }
.auth-member-grid::-webkit-scrollbar-track { background: transparent; }
.auth-member-grid::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.18);
    border-radius: 2px;
}

/* === MEMBER BUTTON === */
.auth-member-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 16px 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(212, 175, 55, 0.09);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
    animation: authMemberPop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes authMemberPop {
    from { opacity: 0; transform: scale(0.82) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Golden bottom bar on hover */
.auth-member-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    transform: scaleX(0);
    transition: transform 0.35s ease;
    border-radius: 1px;
}

.auth-member-btn:hover {
    background: rgba(212, 175, 55, 0.06);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(212, 175, 55, 0.1);
}

.auth-member-btn:hover::after { transform: scaleX(1); }
.auth-member-btn:active { transform: translateY(-2px); }

/* === MEMBER AVATAR === */
.auth-member-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(212, 175, 55, 0.18);
    transition: all 0.35s ease;
}

.auth-member-btn:hover .auth-member-avatar {
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.2);
    transform: scale(1.07);
}

/* === MEMBER NAME === */
.auth-member-name {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.83rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 88px;
    transition: color 0.3s ease;
}

.auth-member-btn:hover .auth-member-name { color: #f5d77a; }

/* === MEMBER ROLE === */
.auth-member-role {
    color: rgba(212, 175, 55, 0.35);
    font-size: 0.66rem;
    letter-spacing: 0.4px;
    transition: color 0.3s ease;
}

.auth-member-btn:hover .auth-member-role { color: rgba(212, 175, 55, 0.7); }


/* === PREMIUM BACKGROUND ANIMATIONS (performance-aware) === */

/* Animated gradient orbs — only on capable devices */
.auth-login-left::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(160, 80, 255, 0.12) 0%, transparent 70%);
    top: -200px;
    left: -200px;
    animation: authOrbFloat1 18s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

@keyframes authOrbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(80px, 50px) scale(1.15); }
    66% { transform: translate(-40px, 80px) scale(0.9); }
}

.auth-login-layout::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.07) 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
    animation: authOrbFloat2 22s ease-in-out infinite 3s;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

@keyframes authOrbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(-60px, -70px) scale(1.2); }
    70% { transform: translate(30px, -30px) scale(0.85); }
}

.auth-login-layout::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 100, 50, 0.06) 0%, transparent 70%);
    top: 50%;
    left: 60%;
    animation: authOrbFloat3 25s ease-in-out infinite 6s;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

@keyframes authOrbFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-100px, 40px) scale(1.1); }
}

/* Subtle grid lines (ultra premium feel) */
.auth-login-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(160, 80, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(160, 80, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 0;
    pointer-events: none;
    animation: authGridFade 2s ease-out 1s both;
}

@keyframes authGridFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Reduced motion: disable heavy animations */
@media (prefers-reduced-motion: reduce) {
    .auth-login-left::before,
    .auth-login-layout::before,
    .auth-login-layout::after,
    .auth-particles span,
    .auth-btn::before {
        animation: none !important;
    }
    .auth-login-overlay::before {
        animation: none !important;
    }
    .auth-btn {
        animation: authInputSlide 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.82s both !important;
    }
}

/* === HIDE CHATBOT ON LOGIN === */
.auth-login-overlay ~ #chatbot-toggle,
.auth-login-overlay ~ #chatbot-window,
body:not(.logged-in) #chatbot-toggle,
body:not(.logged-in) #chatbot-window {
    display: none !important;
}

/* === RESPONSIVE ≤ 900px === */
@media (max-width: 900px) {
    .auth-login-layout {
        flex-direction: column;
    }

    .auth-login-left {
        flex: none;
        width: 100%;
        height: 100%;
        background:
            radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.06) 0%, transparent 55%),
            linear-gradient(160deg, #070707 0%, #0e0c09 100%);
    }

    .auth-login-left::after { display: none; }
    .auth-login-right { display: none !important; }
}


/* === PREMIUM BACKGROUND ANIMATIONS (performance-aware) === */

/* Animated gradient orbs — only on capable devices */
.auth-login-left::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(160, 80, 255, 0.12) 0%, transparent 70%);
    top: -200px;
    left: -200px;
    animation: authOrbFloat1 18s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

@keyframes authOrbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(80px, 50px) scale(1.15); }
    66% { transform: translate(-40px, 80px) scale(0.9); }
}

.auth-login-layout::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.07) 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
    animation: authOrbFloat2 22s ease-in-out infinite 3s;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

@keyframes authOrbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(-60px, -70px) scale(1.2); }
    70% { transform: translate(30px, -30px) scale(0.85); }
}

.auth-login-layout::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 100, 50, 0.06) 0%, transparent 70%);
    top: 50%;
    left: 60%;
    animation: authOrbFloat3 25s ease-in-out infinite 6s;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

@keyframes authOrbFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-100px, 40px) scale(1.1); }
}

/* Subtle grid lines (ultra premium feel) */
.auth-login-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(160, 80, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(160, 80, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 0;
    pointer-events: none;
    animation: authGridFade 2s ease-out 1s both;
}

@keyframes authGridFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Reduced motion: disable heavy animations */
@media (prefers-reduced-motion: reduce) {
    .auth-login-left::before,
    .auth-login-layout::before,
    .auth-login-layout::after,
    .auth-particles span,
    .auth-btn::before {
        animation: none !important;
    }
    .auth-login-overlay::before {
        animation: none !important;
    }
    .auth-btn {
        animation: authInputSlide 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.82s both !important;
    }
}

/* === HIDE CHATBOT ON LOGIN === */
.auth-login-overlay ~ #chatbot-toggle,
.auth-login-overlay ~ #chatbot-window,
body:not(.logged-in) #chatbot-toggle,
body:not(.logged-in) #chatbot-window {
    display: none !important;
}

/* === RESPONSIVE ≤ 480px === */
@media (max-width: 480px) {
    .auth-login-left { padding: 28px 20px; }
    .auth-login-title { font-size: 1.75rem; }
    .auth-login-logo img { width: 70px; height: 70px; }
    .auth-member-grid { grid-template-columns: repeat(2, 1fr); }
    .auth-member-avatar { width: 50px; height: 50px; }
    .auth-member-name { font-size: 0.78rem; max-width: 74px; }
}

/* === LOGGED IN : exit animation === */
body.logged-in .auth-login-overlay {
    animation: authFadeOut 0.4s ease forwards;
    pointer-events: none;
}

@keyframes authFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* === PERFORMANCE TIERS === */

/* LOW: old phones, 2GB RAM, 2 cores — minimal effects */
.auth-perf-low .auth-particles { display: none !important; }
.auth-perf-low .auth-login-left::before,
.auth-perf-low .auth-login-layout::before,
.auth-perf-low .auth-login-layout::after { display: none !important; }
.auth-perf-low .auth-login-overlay::before { display: none !important; }
.auth-perf-low .auth-btn::before { animation: none !important; }
.auth-perf-low .auth-btn { animation: authInputSlide 0.5s ease 0.82s both !important; }
.auth-perf-low .auth-login-logo img { animation: none !important; }

/* MID: decent phones, 4GB RAM, 4 cores — particles + button only */
.auth-perf-mid .auth-login-left::before,
.auth-perf-mid .auth-login-layout::before,
.auth-perf-mid .auth-login-layout::after {
    animation-duration: 30s !important; /* slower = less GPU */
}
.auth-perf-mid .auth-particles span:nth-child(n+8) { display: none; }

/* HIGH: powerful devices — everything enabled, extra sparkle */
.auth-perf-high .auth-login-box {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 16px 56px rgba(0, 0, 0, 0.60),
        0 0 100px rgba(100, 20, 200, 0.18),
        0 0 200px rgba(255, 80, 20, 0.08),
        0 0 300px rgba(212, 175, 55, 0.05);
}

/* ===== css/auth-autofill-fix.css?v=2602240010 ===== */
/* =============================================
   AUTH AUTOFILL FIX — Navigateurs Chrome/Edge/Safari
   Empêche le fond blanc du remplissage auto
   ============================================= */

/* Fix autofill Chrome/Edge — override fond blanc */
.auth-inputs input:-webkit-autofill,
.auth-inputs input:-webkit-autofill:hover,
.auth-inputs input:-webkit-autofill:focus,
.auth-inputs input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.55) inset !important;
    box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.55) inset !important;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: #ffffff;
}

/* Fix Firefox autofill */
.auth-inputs input:autofill {
    background: rgba(0, 0, 0, 0.55) !important;
    color: #ffffff !important;
}

/* Sécurité : texte toujours blanc dans les inputs auth */
.auth-inputs input,
.auth-inputs input:focus,
.auth-inputs input:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ===== css/style-views.css?v=2602240200 ===== */
/* ================================================
   VIEWS - Linear/Raycast Premium Style
   ProductiveApp v4.0
   ================================================ */

/* === GOOGLE FONT === */
/* [CORDEE] Google Fonts @import removed - loaded via <link> tag */

/* === ADDITIONAL VIEW VARIABLES (non-conflicting with themes) === */
:root {
    --bg-elevated: var(--bg-tertiary);
    --border-secondary: var(--border);
    --text-quaternary: var(--text-muted);
    --accent-hover: var(--accent-light);
    --accent-subtle: var(--bg-card);
    --error: var(--danger);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.35);
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    /* Aliases pour modules utilisant --text-primary / --border-primary */
    --text-primary:    var(--text, #f0f0f0);
    --text-secondary:  var(--text-muted, #9ca3af);
    --text-tertiary:   var(--text-muted, #6b7280);
    --border-primary:  var(--border, rgba(255,255,255,.14));
}

/* === BASE === */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === MAIN CONTENT === */
.main-content {
    /* margin-left handled by style-base.css + style-sidebar.css */
    min-height: 100vh;
    background: transparent; /* Let body gradient show through */
}

@media (max-width: 768px) {
    .main-content {
        margin-left: 0 !important;
    }
}

/* === VIEW CONTAINER === */
.view-container {
    display: none;
    padding: 8px 40px 32px 40px; /* padding-top réduit à 8px */
    max-width: 1200px;
    margin: 0 auto; /* BUGFIX 2026-02-12: Removed negative margin-top that was cutting off content */
}

/* FIX 2026-03-08: Force display:none on inactive views — ID selectors in module CSS
   (e.g. #view-giri-studio { display:flex }) override .view-container { display:none }
   because ID > class in specificity. Use !important to always win. */
.view-container:not(.active) {
    display: none !important;
}

.view-container.active {
    display: block;
}

#view-tasks .app-container {
    margin: 0 auto !important;
}

/* === NOTES VIEW (full-height layout) === */
#view-notes.active {
    display: block;
    padding: 0;
    max-width: none;
    height: calc(100vh - 60px);
    overflow: hidden;
    position: relative;
}

/* === GALAXY VIEW (Excalidraw iframe) === */
#view-galaxy {
    position: relative; /* Pour que .cosmic-toolbar position:absolute soit relative à ce conteneur */
    padding: 0;
    max-width: none;
    height: calc(100vh - 60px);
    margin: 0;
}

#view-galaxy.active {
    display: flex;
}

#galaxy-iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    background: var(--bg-primary);
}

/* === PSYCHO-AUDIT VIEW === */
#view-psycho-audit {
    min-height: calc(100vh - 100px);
    position: relative;
    z-index: 1;
}

@keyframes viewFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* fadeIn premium — 10px slide-up */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Animation sur vues actives */
/* fadeIn on .active removed — handled by view-transitions.css view-entering */

/* === VIEW HEADER === */
.view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.view-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.4px;
}

.view-title-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    border-radius: var(--radius-md);
    color: var(--accent);
}

.view-title-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
}

.view-actions {
    display: flex;
    gap: 8px;
}

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

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

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
}

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

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
}

/* ================================================
   DASHBOARD
   ================================================ */

/* Stats Grid */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

@media (max-width: 1024px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .dashboard-stats {
        grid-template-columns: 1fr;
    }
}

.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all var(--transition);
    cursor: pointer;
}

.stat-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
    transform: translateY(-2px);
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.stat-icon.notes {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-light, #fb923c);
}

.stat-icon.projects {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-light);
}

.stat-icon.tasks {
    background: color-mix(in srgb, var(--success, #fbbf24) 12%, transparent);
    color: var(--success, #fbbf24);
}

.stat-icon.urgent {
    background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent);
    color: var(--danger, #f87171);
}

.stat-content h3 {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.5px;
    line-height: 1;
}

.stat-content p {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 6px 0 0;
}

/* Dashboard Sections */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-section {
    background: color-mix(in srgb, var(--bg-secondary, rgba(16,16,26,0.60)) 85%, transparent) !important;
    border: 1px solid var(--ds-card-border, rgba(255,255,255,0.07)) !important;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.dashboard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-primary);
}

.dashboard-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-section-content {
    padding: 12px;
}

/* Quick Actions */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px;
}

.quick-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
}

.quick-action:hover {
    background: var(--bg-elevated);
    border-color: var(--border-secondary);
    transform: translateY(-1px);
}

.quick-action-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--accent-subtle);
    color: var(--accent);
}

.quick-action span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Activity List */
.activity-list {
    max-height: 320px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    transition: background var(--transition);
}

.activity-item:hover {
    background: var(--bg-tertiary);
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-content strong {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-content p {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 2px 0 0;
}

.activity-time {
    font-size: 11px;
    color: var(--text-quaternary);
    flex-shrink: 0;
}

/* Progress Bar */
.progress-section {
    padding: 20px;
}

.progress-bar-container {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
}

.progress-bar-container > div {
    height: 100%;
    transition: width 500ms ease-out;
}

.progress-legend {
    display: flex;
    gap: 20px;
    margin-top: 14px;
}

.progress-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.progress-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

/* ================================================
   PROJECTS VIEW
   ================================================ */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.project-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 20px;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--project-color, var(--accent));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    opacity: 0;
    transition: opacity var(--transition);
}

.project-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
    transform: translateY(-2px);
}

.project-card:hover::before {
    opacity: 1;
}

.project-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.project-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--bg-tertiary);
}

.project-title h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.project-title p {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 3px 0 0;
}

.project-stats {
    display: flex;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary);
}

.project-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.project-stat svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* New Project Card */
.project-card.new {
    border-style: dashed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    color: var(--text-tertiary);
    background: transparent;
}

.project-card.new::before {
    display: none;
}

.project-card.new:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.project-card.new svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    margin-bottom: 8px;
}

.project-card.new span {
    font-size: 13px;
    font-weight: 500;
}

/* ================================================
   NOTES VIEW
   ================================================ */

.notes-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    height: calc(100vh - 140px);
}

@media (max-width: 768px) {
    .notes-layout {
        grid-template-columns: 1fr;
    }
}

/* Notes Sidebar */
.notes-sidebar {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notes-sidebar-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notes-sidebar-header h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.note-item {
    padding: 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    margin-bottom: 4px;
}

.note-item:hover {
    background: var(--bg-tertiary);
}

.note-item.active {
    background: var(--accent-subtle);
}

.note-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-item-preview {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 4px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.note-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-quaternary);
}

.note-tag {
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

/* Notes Editor */
.notes-editor {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notes-editor-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.note-title-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.note-title-input::placeholder {
    color: var(--text-quaternary);
}

.notes-editor-toolbar {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    gap: 2px;
}

.toolbar-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--transition);
}

.toolbar-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.toolbar-btn.active {
    background: var(--accent-subtle);
    color: var(--accent);
}

.toolbar-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border-primary);
    margin: 6px 8px;
}

.notes-editor-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.note-textarea {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: none;
    border: none;
    outline: none;
    resize: none;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
    font-family: inherit;
}

.note-textarea::placeholder {
    color: var(--text-quaternary);
}

.notes-editor-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-quaternary);
}

.save-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}

.save-indicator.saving { color: var(--accent); }
.save-indicator.saved { color: var(--success); }

/* Empty State */
.notes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
}

.notes-empty svg {
    width: 48px;
    height: 48px;
    stroke: var(--text-quaternary);
    stroke-width: 1;
    fill: none;
    margin-bottom: 16px;
}

.notes-empty h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.notes-empty p {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0 0 20px;
}

/* ================================================
   MODALS
   ================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
    padding: 20px;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-overlay .modal-card {
    width: 100%;
    max-width: 440px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    transform: translateY(-8px) scale(0.98);
    transition: transform var(--transition);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.modal-overlay.active .modal-card {
    transform: translateY(0) scale(1);
}

.modal-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--transition);
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-close svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-primary);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Form Elements */
.form-group {
    margin-bottom: 16px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    transition: all var(--transition);
    outline: none;
}

.form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.form-input::placeholder {
    color: var(--text-quaternary);
}

/* Color Picker */
.color-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.color-option {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition);
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.selected {
    border-color: white;
    box-shadow: 0 0 0 2px var(--accent);
}

/* Icon Picker */
.icon-picker {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

.icon-option {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
}

.icon-option:hover {
    background: var(--bg-elevated);
}

.icon-option.selected {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

/* ================================================
   RESPONSIVE
   ================================================ */

@media (max-width: 768px) {
    .view-container {
        padding: 20px 16px;
    }

    .view-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .notes-sidebar {
        display: none;
    }
}

/* ================================================
   THEME SUPPORT
   ================================================ */

[data-theme="minimal"] {
    --bg-primary: #fafafa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f4f4f5;
    --bg-elevated: #e4e4e7;
    --border-primary: rgba(0, 0, 0, 0.06);
    --border-secondary: rgba(0, 0, 0, 0.1);
    --text-primary: #18181b;
    --text-secondary: #52525b;
    --text-tertiary: #71717a;
    --text-quaternary: #a1a1aa;
}

/* ================================================
   THEME ENHANCEMENT - Full App Theming v1.0
   Makes accent color prominent throughout main content
   ================================================ */

/* --- Body: subtle accent-tinted radial glow --- */
body.logged-in::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 20% 0%, var(--accent-glow) 0%, transparent 55%),
                radial-gradient(ellipse at 85% 100%, var(--accent-glow) 0%, transparent 55%);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s ease;
}

/* --- View Title: accent underline bar --- */
.view-title {
    position: relative;
    padding-bottom: 12px;
}

.view-title::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 36px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    opacity: 0.7;
}

/* --- Stat Cards: accent top bar --- */
.stat-card {
    border-top: 2px solid var(--accent);
}

.stat-card:hover {
    box-shadow: 0 8px 24px -4px var(--accent-glow);
    border-top-color: var(--accent-light);
}

/* --- Dashboard Sections: accent left border --- */
.dashboard-section {
    background: color-mix(in srgb, var(--bg-secondary, rgba(16,16,26,0.60)) 85%, transparent) !important;
    border: 1px solid var(--ds-card-border, rgba(255,255,255,0.07)) !important;
    border-left: 3px solid var(--accent);
}

/* --- Quick Actions: accent hover glow --- */
.quick-action:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px -2px var(--accent-glow);
}

.quick-action-icon {
    border: 1px solid var(--border);
}

/* --- Project Cards: accent top bar visible --- */
.project-card::before {
    opacity: 0.5;
}

.project-card:hover::before {
    opacity: 1;
}

.project-card:hover {
    box-shadow: 0 8px 24px -4px var(--accent-glow);
}

/* --- Note sidebar: accent on active --- */
.note-item.active {
    border-left: 3px solid var(--accent);
}

.note-item:hover {
    border-left: 3px solid var(--border);
}

/* --- Activity icons: accent-tinted border --- */
.activity-icon {
    border: 1px solid var(--border);
}

/* --- Progress bars: accent fill --- */
.progress-bar-container > div:first-child {
    background: var(--accent);
}

/* --- Form focus: accent ring --- */
.form-input:focus,
.view-container input:focus,
.view-container textarea:focus,
.view-container select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* --- Tabs: accent active indicator --- */
.tab-btn.active,
.nav-tab.active,
.section-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: var(--bg-card);
}

/* --- Scrollbar: accent-tinted thumb --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}
/* ===== css/projects.css?v=2602240010 ===== */
/* ================================================
   PROJECTS VIEW - Premium Design 11/10
   ProductiveApp v5.0 - Ultra Modern & Elegant
   ================================================ */

/* === PROJECTS GRID === */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    margin-top: 32px;
    animation: projectsGridFadeIn 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes projectsGridFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === PROJECT CARD === */
.project-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--project-color, var(--accent)), transparent);
    opacity: 0;
    transition: opacity 350ms ease;
}

.project-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: var(--project-color, var(--accent));
    box-shadow:
        0 12px 40px -8px rgba(0, 0, 0, 0.3),
        0 0 0 1px var(--project-color, var(--accent))33,
        0 0 60px -10px var(--project-color, var(--accent))40;
}

.project-card:hover::before {
    opacity: 1;
}

.project-card:active {
    transform: translateY(-2px) scale(0.99);
}

/* === NEW PROJECT CARD === */
.project-card.new {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-tertiary) 100%);
    border: 2px dashed var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 15px;
    min-height: 200px;
}

.project-card.new svg {
    width: 32px;
    height: 32px;
    opacity: 0.6;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: all 300ms ease;
}

.project-card.new:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--accent)10 100%);
    transform: translateY(-2px);
}

.project-card.new:hover svg {
    opacity: 1;
    transform: scale(1.15) rotate(90deg);
}

/* === PROJECT CARD ACTION BUTTONS === */
.project-actions-overlay {
    visibility: hidden;
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.project-card:hover .project-actions-overlay {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.project-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 180ms ease;
    backdrop-filter: blur(8px);
}

.project-action-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    pointer-events: none;
}

.project-edit-btn {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent-light);
}

.project-edit-btn:hover {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent-light);
    transform: scale(1.1);
}

.project-delete-btn {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.project-delete-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    transform: scale(1.1);
}

/* === PROJECT HEADER === */
.project-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.project-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    background: var(--project-color, var(--accent))15;
    border: 1px solid var(--project-color, var(--accent))30;
    transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.project-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, var(--project-color, var(--accent))30, transparent);
    opacity: 0;
    transition: opacity 350ms ease;
}

.project-card:hover .project-icon {
    transform: scale(1.08) rotate(-3deg);
    background: var(--project-color, var(--accent))25;
    box-shadow: 0 8px 24px var(--project-color, var(--accent))35;
}

.project-card:hover .project-icon::after {
    opacity: 1;
}

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

.project-title h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-title p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === PROJECT STATS === */
.project-stats {
    display: flex;
    gap: 20px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.project-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.project-stat svg {
    width: 16px;
    height: 16px;
    opacity: 0.6;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: all 250ms ease;
}

.project-card:hover .project-stat svg {
    opacity: 1;
    stroke: var(--project-color, var(--accent));
}

/* === PROJECT DETAIL HEADER ACTIONS === */
.view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.view-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.view-header-actions .btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    margin-right: 6px;
    vertical-align: middle;
}

/* === PROJECT DETAIL CONTAINER === */
.project-detail-container {
    max-width: 900px;
    margin: 0 auto;
    animation: projectDetailSlideIn 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes projectDetailSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-detail-header {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--project-color)08 100%);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.project-detail-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--project-color), transparent);
}

.project-detail-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    flex-shrink: 0;
    box-shadow: 0 8px 32px var(--project-color)30;
}

.project-detail-info {
    flex: 1;
}

.project-detail-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.project-detail-desc {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.project-detail-stats {
    display: flex;
    gap: 32px;
    padding: 28px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 40px;
}

.project-detail-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 500;
}

.project-detail-stat svg {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    stroke: var(--accent);
    stroke-width: 2;
    fill: none;
}

/* === EMPTY STATE === */
.project-empty-state {
    text-align: center;
    padding: 80px 40px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    animation: emptyStatePulse 1s ease-in-out;
}

@keyframes emptyStatePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.95; }
}

.project-empty-icon {
    font-size: 72px;
    margin-bottom: 24px;
    opacity: 0.8;
    animation: emptyIconFloat 3s ease-in-out infinite;
}

@keyframes emptyIconFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.project-empty-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    letter-spacing: -0.01em;
}

.project-empty-text {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0 0 32px 0;
    line-height: 1.6;
}

/* === CREATE MODAL === */
#project-create-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px;
}

#project-create-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    max-width: 680px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    transform: scale(0.95) translateY(20px);
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

#project-create-modal.active .modal-card {
    transform: scale(1) translateY(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.modal-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.015em;
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms ease;
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-close svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.modal-body {
    padding: 28px 32px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

/* Custom scrollbar for modal body */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0;
}

.modal-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
    transition: background 200ms ease;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.form-group {
    margin-bottom: 32px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    letter-spacing: -0.005em;
}

.form-input {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    transition: all 200ms ease;
    font-family: inherit;
    line-height: 1.5;
}

.form-textarea {
    resize: vertical;
    min-height: 56px;
    max-height: 140px;
}

.form-input:focus {
    outline: none;
    background: var(--bg-card);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent)20;
}

.form-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* === AI SUGGEST BUTTON - PREMIUM DESIGN === */
.ai-suggest-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    background-size: 200% 200%;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 4px 16px rgba(102, 126, 234, 0.25),
        0 2px 8px rgba(118, 75, 162, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: aiGradientShift 8s ease infinite;
}

/* Compact variant for better modal layout */
.ai-suggest-btn-compact {
    width: 100%;
    justify-content: center;
    padding: 11px 18px;
    font-size: 13.5px;
    margin-top: 10px;
}

@keyframes aiGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.ai-suggest-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 600ms ease;
}

.ai-suggest-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 8px 28px rgba(102, 126, 234, 0.4),
        0 4px 16px rgba(118, 75, 162, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ai-suggest-btn:hover::before {
    left: 100%;
}

.ai-suggest-btn:active {
    transform: translateY(-1px) scale(0.98);
    transition: all 150ms ease;
}

.ai-suggest-btn.loading {
    cursor: wait;
    pointer-events: none;
    animation: aiLoadingPulse 1.5s ease-in-out infinite;
}

@keyframes aiLoadingPulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.25);
    }
    50% {
        opacity: 0.85;
        box-shadow: 0 6px 24px rgba(102, 126, 234, 0.4);
    }
}

/* Icon Container */
.ai-btn-icon-container {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* AI Brain Icon */
.ai-brain {
    position: absolute;
    inset: 0;
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    animation: aiBrainPulse 3s ease-in-out infinite;
    transform-origin: center;
}

@keyframes aiBrainPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.08);
    }
}

/* Sparkle Animations */
.ai-sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    fill: currentColor;
    opacity: 0;
    filter: drop-shadow(0 0 4px currentColor);
}

.ai-sparkle-1 {
    top: -2px;
    right: -2px;
    animation: aiSparkle1 2.5s ease-in-out infinite;
}

.ai-sparkle-2 {
    bottom: -2px;
    left: -2px;
    animation: aiSparkle2 2.5s ease-in-out infinite 0.6s;
}

@keyframes aiSparkle1 {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    10%, 25% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
    30%, 100% {
        opacity: 0;
        transform: scale(0.5) rotate(360deg);
    }
}

@keyframes aiSparkle2 {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    10%, 25% {
        opacity: 1;
        transform: scale(1) rotate(-180deg);
    }
    30%, 100% {
        opacity: 0;
        transform: scale(0.5) rotate(-360deg);
    }
}

/* Button Text */
.ai-btn-text {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.01em;
}

/* Shine Effect */
.ai-btn-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 60%,
        transparent 100%
    );
    opacity: 0;
    animation: aiShine 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes aiShine {
    0%, 100% {
        opacity: 0;
        transform: translateX(-100%) skewX(-20deg);
    }
    50% {
        opacity: 1;
        transform: translateX(100%) skewX(-20deg);
    }
}

/* Hover state enhancements */
.ai-suggest-btn:hover .ai-brain {
    animation: aiBrainHover 0.6s ease-out forwards;
}

@keyframes aiBrainHover {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.15) rotate(5deg); }
    100% { transform: scale(1.1) rotate(0deg); }
}

.ai-suggest-btn:hover .ai-sparkle {
    animation-duration: 1.5s;
}

/* Loading state - disable animations */
.ai-suggest-btn.loading .ai-brain,
.ai-suggest-btn.loading .ai-sparkle-1,
.ai-suggest-btn.loading .ai-sparkle-2 {
    animation: aiLoadingSpin 1.2s linear infinite;
}

@keyframes aiLoadingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ai-suggest-btn.loading .ai-btn-icon-container {
    opacity: 0.7;
}

/* === COLOR PICKER === */
.color-picker {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    justify-items: center;
    justify-content: space-evenly;
}

.color-option {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.color-option::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    padding: 3px;
    background: linear-gradient(135deg, currentColor, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 250ms ease;
}

.color-option::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: scale(0.5) rotate(-15deg);
    transition: all 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.color-option:hover {
    transform: scale(1.2) translateY(-2px);
    box-shadow:
        0 8px 24px currentColor,
        0 0 30px currentColor,
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.color-option:hover::before {
    opacity: 0.6;
}

.color-option.selected {
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.15);
    box-shadow:
        0 6px 20px currentColor,
        0 0 40px currentColor,
        inset 0 2px 4px rgba(255, 255, 255, 0.4);
    animation: colorPulse 2s ease-in-out infinite;
}

@keyframes colorPulse {
    0%, 100% {
        box-shadow:
            0 6px 20px currentColor,
            0 0 40px currentColor,
            inset 0 2px 4px rgba(255, 255, 255, 0.4);
    }
    50% {
        box-shadow:
            0 8px 28px currentColor,
            0 0 50px currentColor,
            inset 0 2px 4px rgba(255, 255, 255, 0.5);
    }
}

.color-option.selected::before {
    opacity: 1;
}

.color-option.selected::after {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* === ICON PICKER === */
.icon-picker {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    justify-items: center;
    justify-content: space-evenly;
}

.icon-option {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-card) 100%);
    border: 2px solid transparent;
    transition: all 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.icon-option::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent, var(--accent)20, transparent);
    opacity: 0;
    transition: opacity 250ms ease;
    animation: iconRotate 8s linear infinite;
    animation-play-state: paused;
}

@keyframes iconRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon-option:hover {
    background: linear-gradient(135deg, var(--accent)10 0%, var(--accent)05 100%);
    border-color: var(--accent)40;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.2),
        0 0 20px var(--accent)30;
}

/* Alternating rotation - odd rotate left, even rotate right */
.icon-option:nth-child(odd):hover {
    transform: scale(1.2) rotate(-5deg);
}

.icon-option:nth-child(even):hover {
    transform: scale(1.2) rotate(5deg);
}

.icon-option:hover::before {
    opacity: 1;
    animation-play-state: running;
}

.icon-option.selected {
    background: linear-gradient(135deg, var(--accent)25 0%, var(--accent)15 100%);
    border-color: var(--accent);
    transform: scale(1.15);
    box-shadow:
        0 6px 20px var(--accent)40,
        0 0 30px var(--accent)25,
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% {
        box-shadow:
            0 6px 20px var(--accent)40,
            0 0 30px var(--accent)25,
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow:
            0 8px 28px var(--accent)50,
            0 0 40px var(--accent)35,
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

/* === MODAL FOOTER === */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 32px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.btn-large {
    padding: 14px 28px;
    font-size: 16px;
    border-radius: 12px;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .project-detail-header {
        flex-direction: column;
        text-align: center;
        padding: 32px 24px;
    }

    .project-detail-title {
        font-size: 26px;
    }

    .project-detail-stats {
        flex-direction: column;
        gap: 16px;
    }

    .color-picker {
        grid-template-columns: repeat(6, 1fr);
    }

    .icon-picker {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* === LOADING STATES === */
.project-card.loading {
    pointer-events: none;
    opacity: 0.6;
    animation: projectPulse 1.5s ease-in-out infinite;
}

@keyframes projectPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.4; }
}


/* ===== css/giri-academy.css?v=2602240010 ===== */
/**
 * GIRI ACADEMY CSS v2.1
 * Interface formateur premium — Glassmorphism + Design System
 */

/* ═══════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL
═══════════════════════════════════════════════════════════ */

#view-giri-academy {
    display: none;
    flex-direction: column;
    /* FIX: height:100% resolves to 0 when parent has only min-height → overflow:hidden clips everything */
    min-height: calc(100vh - 60px);
    overflow: visible;
    background: var(--bg-primary);
    /* Override view-container defaults */
    padding: 0;
    max-width: none;
    margin: 0;
}

#view-giri-academy.active {
    display: flex;
}

.academy-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    backdrop-filter: blur(12px);
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}

.academy-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.academy-header-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}

.academy-header-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.academy-header-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

.academy-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.academy-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════
   BOUTONS
═══════════════════════════════════════════════════════════ */

.btn-academy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-academy:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

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

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: #fff;
}

.btn-primary:hover {
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
}

.btn-success {
    background: linear-gradient(135deg, #059669, #34d399);
    color: #fff;
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════
   LISTE DES FORMATIONS
═══════════════════════════════════════════════════════════ */

.formation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2rem;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .formation-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1.5rem;
    }
}

.formation-card {
    background: linear-gradient(145deg, rgba(25,25,40,0.9), rgba(20,20,35,0.95));
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
}

.formation-card:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 25px 50px rgba(0,0,0,0.3), 0 0 30px color-mix(in srgb, var(--accent) 10%, transparent);
}

.formation-thumbnail {
    height: 160px;
    background: linear-gradient(135deg, rgba(109,40,217,0.25), color-mix(in srgb, var(--accent) 12%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.formation-thumbnail::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 65%),
                radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 50%);
}

.formation-thumbnail-emoji {
    font-size: 52px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

.formation-status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-published {
    background: rgba(16, 185, 129, 0.25);
    color: #fff;
    border: 1px solid rgba(16, 185, 129, 0.45);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.status-draft {
    background: rgba(245, 158, 11, 0.25);
    color: #fff;
    border: 1px solid rgba(245, 158, 11, 0.45);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.formation-card-body {
    padding: 18px;
}

.formation-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 6px;
    line-height: 1.3;
}

.formation-card-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.formation-card-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}

.formation-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.formation-meta-item svg {
    opacity: 0.7;
}

.formation-meta-value {
    font-weight: 600;
    color: var(--text);
}

.formation-card-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent-light);
    margin-bottom: 14px;
}

.formation-card-actions {
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   ÉDITEUR DE FORMATION
═══════════════════════════════════════════════════════════ */

.editor-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    height: 100%;
}

.editor-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

.editor-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.editor-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.editor-section-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.editor-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.editor-section-body {
    padding: 20px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    transition: border-color 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

/* ═══════════════════════════════════════════════════════════
   MODULES & LEÇONS (Drag & Drop)
═══════════════════════════════════════════════════════════ */

.modules-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.module-item {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent) 0%, color-mix(in srgb, var(--accent) 3%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 4px;
}

.module-item.dragging {
    opacity: 0.5;
    border: 2px dashed var(--accent);
}

.module-item.drag-over {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.module-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1.1rem 1.4rem;
    background: transparent;
    cursor: pointer;
    user-select: none;
}

.module-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    opacity: 0.5;
    flex-shrink: 0;
}

.module-drag-handle:active {
    cursor: grabbing;
}

.module-expand-icon {
    flex-shrink: 0;
    transition: transform 0.2s;
    color: var(--text-muted);
}

.module-expand-icon.expanded {
    transform: rotate(90deg);
}

.module-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.module-title-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.01em;
    padding: 12px 16px;
    cursor: text;
}

.module-title-input:focus {
    outline: none;
    color: var(--accent-light);
}

.module-lesson-count {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--accent-light);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.module-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.module-body {
    padding: 12px 16px;
    display: none;
    border-top: 1px solid var(--border);
}

.module-body.open {
    display: block;
}

.lessons-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.lesson-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s;
}

.lesson-item:hover {
    border-color: var(--accent);
    background: var(--bg-secondary);
}

.lesson-item.dragging {
    opacity: 0.4;
}

.lesson-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    opacity: 0.4;
    font-size: 12px;
    flex-shrink: 0;
}

.lesson-type-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.type-video { background: rgba(239, 68, 68, 0.15); }
.type-text { background: rgba(59, 130, 246, 0.15); }
.type-pdf { background: rgba(245, 158, 11, 0.15); }
.type-quiz { background: rgba(16, 185, 129, 0.15); }

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

.lesson-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lesson-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.lesson-preview-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent-light);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    font-weight: 600;
    flex-shrink: 0;
}

.lesson-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Boutons action leçon — clairs, visibles, hover coloré */
.btn-lesson-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}

.btn-lesson-action:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.1);
}

.btn-lesson-action.btn-lesson-preview:hover {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent-light);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

.btn-lesson-action.btn-lesson-edit:hover {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent-light);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

.btn-lesson-action.btn-lesson-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
}

.btn-lesson-action.btn-lesson-stats:hover {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.25);
}

.btn-lesson-action svg {
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   MODAL ÉDITEUR DE LEÇON
═══════════════════════════════════════════════════════════ */

.academy-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.academy-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    animation: modalPop 0.25s ease;
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.94) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.academy-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.academy-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.academy-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s;
}

.academy-modal-close:hover {
    background: var(--bg-primary);
    color: var(--text);
}

.academy-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.academy-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

/* Lesson type tabs */
.lesson-type-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.lesson-type-tab {
    flex: 1;
    min-width: 80px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--bg-tertiary);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.lesson-type-tab:hover {
    border-color: var(--accent);
    color: var(--text);
}

.lesson-type-tab.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent-light);
}

.lesson-type-tab .tab-icon {
    display: block;
    font-size: 20px;
    margin-bottom: 4px;
}

/* Quiz builder */
.quiz-question {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.quiz-option input[type="radio"],
.quiz-option input[type="checkbox"] {
    accent-color: var(--accent);
}

/* Upload zone */
.upload-zone {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-muted);
}

.upload-zone:hover,
.upload-zone.drag-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    color: var(--text);
}

.upload-zone-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.upload-progress {
    margin-top: 12px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
}

.upload-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════
   GESTION ÉTUDIANTS
═══════════════════════════════════════════════════════════ */

.students-header {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.students-search {
    flex: 1;
    min-width: 280px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
}

.students-search:focus {
    outline: none;
    border-color: var(--accent);
}

.students-table {
    width: 100%;
    border-collapse: collapse;
}

.students-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.students-table td {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.students-table tr:last-child td {
    border-bottom: none;
}

.students-table tr:hover td {
    background: var(--bg-tertiary);
}

.student-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.student-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-bar-container {
    background: var(--bg-tertiary);
    border-radius: 4px;
    height: 8px;
    width: 120px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #34d399);
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════
   STATISTIQUES
═══════════════════════════════════════════════════════════ */

.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.stats-kpi-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.stats-kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

.stats-kpi-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--accent-light);
    margin-bottom: 4px;
    line-height: 1;
}

.stats-kpi-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.stats-kpi-trend {
    font-size: 12px;
    margin-top: 6px;
    font-weight: 600;
}

.trend-up { color: #10b981; }
.trend-down { color: #ef4444; }

/* ═══════════════════════════════════════════════════════════
   ÉTATS VIDES & LOADING
═══════════════════════════════════════════════════════════ */

.academy-empty {
    text-align: center;
    padding: 64px 24px;
    color: var(--text-muted);
}

.academy-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.academy-empty-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.academy-empty-desc {
    font-size: 14px;
    line-height: 1.6;
    max-width: 360px;
    margin: 0 auto 24px;
}

.academy-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px;
    flex-direction: column;
    gap: 16px;
    color: var(--text-muted);
}

.academy-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: academySpin 0.8s linear infinite;
}

@keyframes academySpin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   BREADCRUMB NAVIGATION
═══════════════════════════════════════════════════════════ */

.academy-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.academy-breadcrumb a {
    color: var(--accent-light);
    text-decoration: none;
    cursor: pointer;
}

.academy-breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb-sep {
    opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

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

    .editor-sidebar {
        order: -1;
    }
}

@media (max-width: 640px) {
    .academy-header {
        padding: 14px 16px;
    }

    .academy-body {
        padding: 16px;
    }

    .formation-grid {
        grid-template-columns: 1fr;
    }

    .stats-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .students-table {
        font-size: 13px;
    }

    .students-table th,
    .students-table td {
        padding: 10px 10px;
    }
}

/* ═══════════════════════════════════════════════════════════
   DRIP CONTENT — Progressive unlock panel
═══════════════════════════════════════════════════════════ */

.module-drip-panel {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drip-panel-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.drip-delay-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drip-days-input {
    width: 80px !important;
    flex-shrink: 0;
}

.drip-days-label {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.form-control-sm {
    padding: 6px 10px !important;
    font-size: 13px !important;
    border-radius: 7px !important;
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM ENHANCEMENTS v2.0 — Ultra Design 2035
═══════════════════════════════════════════════════════════ */

/* --- Keyframes --- */
@keyframes academyShimmer {
    0%   { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(250%) skewX(-15deg); }
}

@keyframes academyPulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
    50%       { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent); }
}

@keyframes academyFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}

@keyframes academyGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes academyBorderRotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Header premium --- */
.academy-header {
    background: rgba(15, 10, 30, 0.85) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    position: relative;
    overflow: hidden;
}

.academy-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-light), var(--accent), transparent);
    background-size: 200% 100%;
    animation: academyGradientShift 4s ease infinite;
}

/* --- Icon badge premium avec pulse --- */
.academy-header-icon {
    animation: academyPulseGlow 3s ease-in-out infinite;
    position: relative;
}

.academy-header-icon::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light), var(--accent));
    background-size: 200% 200%;
    animation: academyGradientShift 3s ease infinite;
    opacity: 0.5;
    z-index: -1;
}

/* --- Titre et breadcrumb élégants --- */
.academy-header-title {
    background: linear-gradient(135deg, var(--text) 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Formation cards ultra-premium --- */
.formation-card {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.formation-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, transparent, color-mix(in srgb, var(--accent) 0%, transparent), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: all 0.35s ease;
    pointer-events: none;
}

.formation-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35),
        0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
        0 0 40px color-mix(in srgb, var(--accent) 10%, transparent);
}

.formation-card:hover::before {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 60%, transparent), rgba(167, 139, 250, 0.3), color-mix(in srgb, var(--accent) 60%, transparent));
}

/* Shimmer effect on card hover */
.formation-thumbnail {
    position: relative;
    overflow: hidden;
}

.formation-thumbnail::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    transform: skewX(-15deg);
    transition: none;
    pointer-events: none;
}

.formation-card:hover .formation-thumbnail::after {
    animation: academyShimmer 0.7s ease forwards;
}

/* Emoji flottant sur hover */
.formation-card:hover .formation-thumbnail-emoji {
    animation: academyFloat 2s ease-in-out infinite;
}

/* --- Formation card prix neon --- */
.formation-card-price {
    font-size: 20px;
    background: linear-gradient(135deg, var(--accent-light), var(--accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.4));
}

/* --- Status badges améliorés --- */
.status-published {
    background: rgba(16, 185, 129, 0.25);
    color: #fff;
    border: 1px solid rgba(16, 185, 129, 0.45);
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.status-draft {
    background: rgba(245, 158, 11, 0.25);
    color: #fff;
    border: 1px solid rgba(245, 158, 11, 0.45);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* --- Modules items premium --- */
.module-item {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.module-item:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    transform: translateX(4px);
    box-shadow: 0 4px 24px color-mix(in srgb, var(--accent) 18%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent) 0%, color-mix(in srgb, var(--accent) 6%, transparent) 100%);
}

.module-item.dragging {
    transform: none;
}

/* --- Lesson items premium --- */
.lesson-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.lesson-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.lesson-item:hover::after {
    opacity: 1;
}

.lesson-item:hover {
    transform: translateX(4px);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* --- KPI Stats cards glassmorphism premium --- */
.stats-kpi-grid {
    gap: 16px;
}

.stats-kpi-card {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.stats-kpi-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
    border-radius: 50%;
    transition: all 0.4s ease;
}

.stats-kpi-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.25),
        0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.stats-kpi-card:hover::before {
    top: -30%;
    right: -10%;
    transform: scale(1.5);
}

.stats-kpi-value {
    background: linear-gradient(135deg, var(--text) 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Boutons premium --- */
.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent), var(--accent-light));
    background-size: 200% 200%;
    animation: academyGradientShift 4s ease infinite;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 35%, transparent);
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: skewX(-15deg);
}

.btn-primary:hover::after {
    animation: academyShimmer 0.6s ease forwards;
}

.btn-primary:hover {
    box-shadow: 0 8px 25px color-mix(in srgb, var(--accent) 50%, transparent);
    transform: translateY(-2px);
}

/* --- Editor sections premium --- */
.editor-section {
    transition: all 0.25s ease;
}

.editor-section:hover {
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.editor-section-header:hover {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}

/* --- Upload zone animation --- */
.upload-zone {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.upload-zone:hover {
    transform: scale(1.01);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 8%, transparent) inset;
}

/* --- Progress bar animée --- */
.upload-progress-bar {
    background: linear-gradient(90deg, var(--accent), var(--accent), var(--accent-light), var(--accent), var(--accent));
    background-size: 200% 100%;
    animation: academyGradientShift 1.5s linear infinite;
}

/* --- Scrollbar custom violet --- */
.academy-body::-webkit-scrollbar,
.academy-modal-body::-webkit-scrollbar,
.editor-main::-webkit-scrollbar,
.editor-sidebar::-webkit-scrollbar {
    width: 6px;
}

.academy-body::-webkit-scrollbar-track,
.academy-modal-body::-webkit-scrollbar-track,
.editor-main::-webkit-scrollbar-track,
.editor-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.academy-body::-webkit-scrollbar-thumb,
.academy-modal-body::-webkit-scrollbar-thumb,
.editor-main::-webkit-scrollbar-thumb,
.editor-sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent), var(--accent-light));
    border-radius: 3px;
    opacity: 0.6;
}

/* --- Modal premium --- */
.academy-modal-content {
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.academy-modal-header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
    border-bottom-color: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* --- Students table premium --- */
.students-table tbody tr {
    transition: all 0.15s ease;
}

.students-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    box-shadow: inset 3px 0 0 var(--accent);
}

/* --- Search input premium --- */
.students-search {
    transition: all 0.25s ease;
}

.students-search:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: var(--accent);
    outline: none;
}

/* --- Tabs navigation premium --- */
.academy-tabs {
    position: relative;
}

.academy-tab {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.academy-tab.active {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-light);
    border-bottom: 2px solid var(--accent);
}

.academy-tab::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.academy-tab:hover::after {
    opacity: 1;
}

/* --- Drip panel premium --- */
.module-drip-panel {
    border-color: color-mix(in srgb, var(--accent) 20%, transparent);
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    transition: all 0.2s ease;
}

.module-drip-panel:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* --- Lesson type tabs premium --- */
.lesson-type-tab.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-light);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* --- Empty state --- */
.academy-empty {
    text-align: center;
    padding: 80px 24px;
    color: var(--text-muted);
}

.academy-empty-icon {
    font-size: 72px;
    margin-bottom: 16px;
    animation: academyFloat 3s ease-in-out infinite;
    display: block;
}

.academy-empty-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.academy-empty-desc {
    font-size: 14px;
    margin-bottom: 28px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* --- Responsive premium --- */
@media (max-width: 768px) {
    .formation-card:hover {
        transform: translateY(-3px) scale(1.005);
    }
    .academy-header::after {
        height: 1.5px;
    }
}

/* ═══════════════════════════════════════════════════════════
   EMOJI PICKER — 2026-02-20
═══════════════════════════════════════════════════════════ */

.emoji-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-card, rgba(255,255,255,0.05));
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.4rem;
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
}

.emoji-trigger:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    transform: scale(1.03);
}

.emoji-trigger-hint {
    font-size: 0.75rem;
    color: var(--text-muted, #71717a);
    font-family: 'Inter', sans-serif;
}

.emoji-picker-dropdown {
    /* position/top/left définis en JS via getBoundingClientRect() */
    position: fixed;
    background: rgba(15, 15, 22, 0.98);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 16px;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    z-index: 1000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
    backdrop-filter: blur(20px);
    animation: emojiPickerIn 0.15s ease-out;
    min-width: 280px;
}

@keyframes emojiPickerIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.emoji-option {
    font-size: 1.4rem;
    padding: 8px;
    border-radius: 8px;
    background: transparent;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    line-height: 1;
}

.emoji-option:hover {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    transform: scale(1.25);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.emoji-option.selected {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ═══════════════════════════════════════════════════════════
   MODAL ADD MODULE — Premium (replaces system prompt)
═══════════════════════════════════════════════════════════ */

#academy-add-module-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: aamFadeIn 0.18s ease;
}

@keyframes aamFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.aam-modal {
    background: rgba(15, 15, 21, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: aamSlideUp 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

@keyframes aamSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.aam-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
}

.aam-modal-icon { font-size: 24px; line-height: 1; }

.aam-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.3px;
}

.aam-modal-body { padding: 20px 24px; }

.aam-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: rgba(167, 139, 250, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
}

.aam-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 13px 16px;
    color: #fff;
    font-size: 15px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.aam-input::placeholder { color: rgba(255, 255, 255, 0.25); }

.aam-input:focus {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.aam-input.aam-shake {
    animation: aamShake 0.35s ease;
    border-color: rgba(239, 68, 68, 0.6);
}

@keyframes aamShake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-8px); }
    40%       { transform: translateX(8px); }
    60%       { transform: translateX(-5px); }
    80%       { transform: translateX(5px); }
}

.aam-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.aam-btn-cancel {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.aam-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.aam-btn-create {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}

.aam-btn-create:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 50%, transparent);
}

.aam-btn-create:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

.aam-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: aamSpin 0.7s linear infinite;
}

/* ================================================================
   STUDENT MANAGER v2.0 — Tableau premium style System.io
   ================================================================ */

/* Stats bar */
.sm-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.sm-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sm-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 10%, transparent);
}

.sm-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    margin-bottom: 6px;
}

.sm-stat-value.sm-stat-green  { color: #10b981; }
.sm-stat-value.sm-stat-purple { color: var(--accent-light); }
.sm-stat-value.sm-stat-orange { color: #f59e0b; }

.sm-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Toolbar */
.sm-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sm-search-wrap {
    position: relative;
    flex: 1;
    min-width: 280px;
}

.sm-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.sm-search {
    width: 100%;
    padding: 10px 14px 10px 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sm-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Filter tabs */
.sm-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sm-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sm-filter-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--text);
}

.sm-filter-btn.active {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent-light);
    font-weight: 600;
}

.sm-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.sm-filter-btn.active .sm-filter-count {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Table wrapper */
.sm-table-wrap {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

/* Table */
.sm-table {
    width: 100%;
    border-collapse: collapse;
}

.sm-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.sm-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}

.sm-table tbody tr:last-child td {
    border-bottom: none;
}

.sm-table tbody tr {
    transition: background 0.15s ease;
}

.sm-table tbody tr:hover td {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.sm-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}

/* Student info cell */
.sm-student-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sm-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.sm-student-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.sm-student-email {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Progress bar */
.sm-progress-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    height: 8px;
    flex: 1;
    overflow: hidden;
    min-width: 80px;
}

.sm-progress-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Badges status */
.sm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.sm-badge-green {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.sm-badge-blue {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-light);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.sm-badge-gray {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* Streak indicator */
.sm-streak {
    font-size: 11px;
    color: #f59e0b;
    font-weight: 600;
}

/* Action buttons */
.sm-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary, var(--bg-secondary));
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.sm-action-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    transform: scale(1.08);
}

.sm-action-btn.sm-action-danger:hover {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
}

.sm-action-btn.sm-action-cert:hover {
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.1);
}

.sm-action-btn.sm-action-cert:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ── Student Notes Badge ─────────────────────────────────────────────────── */

.sm-note-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), #a855f7);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1;
}

/* ── Student Notes Panel (modal) ─────────────────────────────────────────── */

.sn-note {
    background: rgba(255, 235, 100, 0.07);
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 10px;
    padding: 12px 14px;
    transition: box-shadow 0.15s;
}

.sn-note:hover {
    box-shadow: 0 2px 12px rgba(255, 215, 0, 0.1);
}

.sn-note--pinned {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.35);
    border-left: 3px solid #f59e0b;
}

.sn-note-body {
    margin-bottom: 8px;
}

.sn-note-content {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

.sn-note-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sn-note-date {
    font-size: 11px;
    color: var(--text-muted);
}

.sn-note-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.sn-note:hover .sn-note-actions {
    opacity: 1;
}

.sn-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 5px;
    border-radius: 5px;
    transition: background 0.15s;
    line-height: 1;
}

.sn-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sn-btn--danger:hover {
    background: rgba(239, 68, 68, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
    .sm-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .sm-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .sm-table th:nth-child(4),
    .sm-table td:nth-child(4) { display: none; }
}

@keyframes aamSpin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   FIX PROPORTIONS v3.2 — Alias .ga-* + grid corrections
   (Préfixe obligatoire : ga- = Giri Academy)
═══════════════════════════════════════════════════════════ */

/* Fix grid — alias .ga-formations-grid + .formations-grid */
.formations-grid, .ga-formations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2rem;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Fix sticky header — alias .ga-page-header + .formations-header */
.ga-page-header, .formations-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(15, 10, 30, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Fix cartes — alias .ga-formation-card */
.ga-formation-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    cursor: pointer;
}

.ga-formation-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 30px color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Header carte avec emoji */
.ga-card-header, .formation-card-header {
    height: 140px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
}

.ga-card-emoji {
    font-size: 4rem;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* Body carte */
.ga-card-body, .formation-card-body {
    padding: 1.5rem;
}

.ga-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.ga-card-desc {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Stats */
.ga-card-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Prix */
.ga-card-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-light);
    margin-bottom: 1rem;
}

/* Actions */
.ga-card-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 768px) {
    .formations-grid, .ga-formations-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   QUIZ EDITOR v1.0
   ═══════════════════════════════════════════════════════════════ */

.qe-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
}

.qe-modal {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid rgba(167,139,250,0.2);
    border-radius: 16px;
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.qe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.qe-header-left { display: flex; align-items: center; gap: 14px; }
.qe-header-icon { font-size: 28px; }
.qe-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.qe-subtitle { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }

.qe-close {
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-muted);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.qe-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }

.qe-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.qe-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px;
    color: var(--text-muted);
    font-size: 15px;
}

.qe-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    height: 100%;
    overflow: hidden;
}

/* Settings panel */
.qe-settings-panel {
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qe-settings-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.qe-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
}
.qe-toggle-label input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
}

.qe-stats {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.qe-stat {
    flex: 1;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.qe-stat span { display: block; font-size: 22px; font-weight: 700; color: var(--accent-light); }
.qe-stat small { font-size: 11px; color: var(--text-muted); }

/* Questions panel */
.qe-questions-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.qe-questions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.qe-questions-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.qe-add-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.qe-add-btns .btn-academy { font-size: 12px; padding: 5px 10px; }

.qe-questions-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qe-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

/* Question card */
.qe-question {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.2s;
}
.qe-question:hover { border-color: rgba(167,139,250,0.3); }

.qe-question-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qe-q-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-light);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    padding: 3px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}

.qe-type-sel {
    flex: 1;
    max-width: 160px;
    font-size: 13px;
}

.qe-points { font-size: 13px; }

.qe-q-text {
    resize: vertical;
    min-height: 54px;
    font-size: 14px;
}

/* Options */
.qe-options { display: flex; flex-direction: column; gap: 6px; }

.qe-opt {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qe-opt-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.qe-opt input[type="radio"],
.qe-opt input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.qe-opt-text { font-size: 13px; }

.qe-text-hint {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px dashed rgba(255,255,255,0.1);
}

/* Feedbacks */
.qe-feedbacks { display: flex; flex-direction: column; gap: 6px; }
.qe-feedbacks .form-control { font-size: 12px; }

/* Footer */
.qe-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 700px) {
    .qe-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .qe-settings-panel { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); overflow: visible; }
    .qe-add-btns { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════
   STUDENT PREVIEW MODAL — v1.0
   Aperçu formateur de la vue étudiant
═══════════════════════════════════════════════════════════ */

.ga-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: gaFadeIn 0.2s ease;
}

@keyframes gaFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ga-preview-modal {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 20px;
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 32px 100px rgba(0,0,0,0.6), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
    animation: gaSlideUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes gaSlideUp {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ga-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    flex-shrink: 0;
}

.ga-preview-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-light);
}

.ga-preview-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-light);
    animation: gaPulseDot 2s ease-in-out infinite;
}

@keyframes gaPulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.7); }
}

.ga-preview-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.ga-preview-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }

.ga-preview-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Student course hero */
.ga-student-hero {
    padding: 36px 32px 28px;
    background: linear-gradient(135deg, rgba(109,40,217,0.2), color-mix(in srgb, var(--accent) 10%, transparent));
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}

.ga-student-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%);
    pointer-events: none;
}

.ga-student-emoji {
    font-size: 56px;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
    display: block;
}

.ga-student-title {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.2;
}

.ga-student-desc {
    font-size: 15px;
    color: rgba(255,255,255,0.65);
    margin: 0 0 20px;
    line-height: 1.6;
    max-width: 560px;
}

.ga-student-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.ga-student-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.55);
}

.ga-student-meta-item strong {
    color: rgba(255,255,255,0.85);
    font-weight: 600;
}

.ga-enroll-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ga-enroll-price {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent-light), var(--accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ga-enroll-btn {
    padding: 12px 28px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--accent), var(--accent));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent);
    transition: all 0.2s;
}
.ga-enroll-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 50%, transparent); }

/* Modules list student view */
.ga-student-modules {
    padding: 24px 32px;
}

.ga-student-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 16px;
}

.ga-student-module {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
}

.ga-student-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: rgba(255,255,255,0.03);
    cursor: pointer;
}

.ga-student-module-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
}

.ga-student-module-count {
    font-size: 12px;
    color: var(--text-muted);
    padding: 3px 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 20px;
}

.ga-student-lessons {
    border-top: 1px solid rgba(255,255,255,0.05);
}

.ga-student-lesson {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
}

.ga-student-lesson:last-child { border-bottom: none; }
.ga-student-lesson:hover { background: rgba(255,255,255,0.03); }

.ga-lesson-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.ga-lesson-icon.type-video { background: rgba(239,68,68,0.12); }
.ga-lesson-icon.type-text  { background: rgba(59,130,246,0.12); }
.ga-lesson-icon.type-pdf   { background: rgba(245,158,11,0.12); }
.ga-lesson-icon.type-quiz  { background: rgba(16,185,129,0.12); }
.ga-lesson-icon.type-builder { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.ga-lesson-name {
    flex: 1;
    font-size: 13px;
    color: var(--text);
}

.ga-lesson-free-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(16,185,129,0.12);
    color: #34d399;
    border: 1px solid rgba(16,185,129,0.25);
    font-weight: 600;
}

.ga-lesson-lock {
    font-size: 14px;
    color: var(--text-muted);
    opacity: 0.5;
}

.ga-lesson-duration {
    font-size: 12px;
    color: var(--text-muted);
}

/* btn-preview in formation cards */
.btn-preview-formation {
    background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
    color: var(--accent-light) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
}
.btn-preview-formation:hover {
    background: color-mix(in srgb, var(--accent) 22%, transparent) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

/* ═══════════════════════════════════════════════════════════
   PHASE 2 PREMIUM — Modals, Inputs, Buttons, Editors v800
   Overrides complets pour cohérence totale avec Tunnel Club
═══════════════════════════════════════════════════════════ */

/* ── VARIABLES ACADEMY PREMIUM ── */
:root {
    --ga-bg-dark:       rgba(15, 10, 30, 0.95);
    --ga-bg-card:       rgba(255, 255, 255, 0.03);
    --ga-border:        color-mix(in srgb, var(--accent) 20%, transparent);
    --ga-border-subtle: rgba(255, 255, 255, 0.08);
    --ga-violet:        #8B5CF6;
    --ga-violet-dark:   #7C3AED;
    --ga-violet-light:  var(--accent-light);
    --ga-glow-sm:       0 0 20px color-mix(in srgb, var(--accent) 15%, transparent);
    --ga-glow-md:       0 0 40px color-mix(in srgb, var(--accent) 22%, transparent);
    --ga-transition:    0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────
   MODALS — Glassmorphism dark premium
───────────────────────────────────────────── */

.academy-modal-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.academy-modal {
    background: var(--ga-bg-dark) !important;
    border: 1px solid var(--ga-border) !important;
    border-radius: 20px !important;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.academy-modal-header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent) !important;
    padding: 20px 24px !important;
}

.academy-modal-title {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

.academy-modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(0, 0, 0, 0.15);
}

.academy-modal-close {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.academy-modal-close:hover {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #f87171 !important;
}

/* ─────────────────────────────────────────────
   INPUTS, TEXTAREAS, SELECTS — Dark premium
───────────────────────────────────────────── */

.form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text) !important;
    border-radius: 10px !important;
    transition: border-color var(--ga-transition), box-shadow var(--ga-transition) !important;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

.form-control:focus {
    outline: none !important;
    border-color: var(--ga-violet) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
}

select.form-control {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(167,139,250,0.7)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 32px !important;
}

select.form-control option {
    background: #1a1030;
    color: #fff;
}

.form-label {
    color: rgba(167, 139, 250, 0.8) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

/* Inputs dans sections editor */
.editor-section {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 14px !important;
    transition: border-color var(--ga-transition) !important;
}

.editor-section:hover {
    border-color: color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

.editor-section-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.editor-section-header:hover {
    background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
}

.editor-section-title {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* ─────────────────────────────────────────────
   BOUTONS — Cohérence totale
───────────────────────────────────────────── */

/* Réinitialisation base */
.btn-academy {
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all var(--ga-transition) !important;
    border: none !important;
    position: relative;
    overflow: hidden;
}

/* Primary — violet gradient + shimmer hover */
.btn-primary.btn-academy,
.btn-academy.btn-primary {
    background: linear-gradient(135deg, var(--accent-light), var(--accent)) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent) !important;
}

.btn-primary.btn-academy:hover,
.btn-academy.btn-primary:hover {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 55%, transparent) !important;
    transform: translateY(-2px) !important;
    filter: brightness(1.08);
}

/* Secondary — transparent + violet border */
.btn-secondary.btn-academy,
.btn-academy.btn-secondary {
    background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
    color: var(--ga-violet-light) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

.btn-secondary.btn-academy:hover,
.btn-academy.btn-secondary:hover {
    background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important;
    box-shadow: var(--ga-glow-sm) !important;
    transform: translateY(-1px) !important;
}

/* Danger — rouge semi-transparent */
.btn-danger.btn-academy,
.btn-academy.btn-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.28) !important;
}

.btn-danger.btn-academy:hover,
.btn-academy.btn-danger:hover {
    background: rgba(239, 68, 68, 0.22) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Success — vert semi-transparent */
.btn-success.btn-academy,
.btn-academy.btn-success {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.32) !important;
}

.btn-success.btn-academy:hover,
.btn-academy.btn-success:hover {
    background: rgba(16, 185, 129, 0.28) !important;
    border-color: rgba(16, 185, 129, 0.55) !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Icon buttons */
.btn-icon.btn-academy,
.btn-academy.btn-icon {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

.btn-icon.btn-academy:hover,
.btn-academy.btn-icon:hover {
    background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
    color: var(--ga-violet-light) !important;
    transform: scale(1.08) !important;
}

/* ─────────────────────────────────────────────
   LESSON TYPE TABS
───────────────────────────────────────────── */

.lesson-type-tab {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 2px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.45) !important;
    border-radius: 12px !important;
    transition: all var(--ga-transition) !important;
}

.lesson-type-tab:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
    color: var(--ga-violet-light) !important;
}

.lesson-type-tab.active {
    background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
    border-color: var(--ga-violet) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 25%, transparent) !important;
}

/* ─────────────────────────────────────────────
   ACADEMY TABS (navigation principale)
───────────────────────────────────────────── */

.academy-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex;
    gap: 4px;
    padding: 0 24px;
    background: rgba(15, 10, 30, 0.5);
}

.academy-tab {
    padding: 12px 18px !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    background: transparent !important;
    cursor: pointer;
    transition: all var(--ga-transition) !important;
}

.academy-tab:hover {
    color: rgba(255, 255, 255, 0.75) !important;
    background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
}

.academy-tab.active {
    color: #fff !important;
    border-bottom-color: var(--ga-violet) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

.academy-tab::after {
    display: none !important;
}

/* ─────────────────────────────────────────────
   QUIZ EDITOR — Questions glassmorphism
───────────────────────────────────────────── */

.qe-modal {
    background: var(--ga-bg-dark) !important;
    border: 1px solid var(--ga-border) !important;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.qe-header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

.qe-title {
    color: #fff !important;
}

.qe-settings-panel {
    background: rgba(0, 0, 0, 0.15) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.qe-questions-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: rgba(0, 0, 0, 0.1) !important;
}

.qe-question {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    transition: border-color var(--ga-transition) !important;
}

.qe-question:hover {
    border-color: rgba(167, 139, 250, 0.28) !important;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 8%, transparent) !important;
}

.qe-q-num {
    background: color-mix(in srgb, var(--accent) 20%, transparent) !important;
    color: var(--ga-violet-light) !important;
    border-radius: 6px !important;
}

.qe-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

.qe-close {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.qe-close:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ─────────────────────────────────────────────
   MODULE ITEMS — Refresh
───────────────────────────────────────────── */

.module-item {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

.module-header:hover {
    background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
}

.module-body {
    background: rgba(0, 0, 0, 0.12) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ─────────────────────────────────────────────
   LESSON ITEMS — Refresh
───────────────────────────────────────────── */

.lesson-item {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 10px !important;
}

.lesson-item:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
}

/* ─────────────────────────────────────────────
   STUDENTS TABLE — Refresh
───────────────────────────────────────────── */

.sm-table-wrap {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.sm-search {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text) !important;
}

.sm-search::placeholder { color: rgba(255, 255, 255, 0.3) !important; }

.sm-search:focus {
    border-color: var(--ga-violet) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent) !important;
    outline: none !important;
}

/* ─────────────────────────────────────────────
   STATS KPI CARDS — Refresh
───────────────────────────────────────────── */

.stats-kpi-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.sm-stat-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* ─────────────────────────────────────────────
   UPLOAD ZONE — Refresh
───────────────────────────────────────────── */

.upload-zone {
    border: 2px dashed color-mix(in srgb, var(--accent) 25%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 3%, transparent) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    border-radius: 14px !important;
}

.upload-zone:hover,
.upload-zone.drag-active {
    border-color: var(--ga-violet) !important;
    background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
    color: var(--ga-violet-light) !important;
}

/* ─────────────────────────────────────────────
   DRIP PANEL — Refresh
───────────────────────────────────────────── */

.module-drip-panel {
    background: color-mix(in srgb, var(--accent) 5%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent) !important;
    border-radius: 10px !important;
}

/* ─────────────────────────────────────────────
   QUIZ OPTIONS (radio/checkbox + inputs)
───────────────────────────────────────────── */

.qe-opt-text.form-control,
.qe-q-text.form-control,
.qe-type-sel.form-control,
.qe-points.form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.qe-text-hint {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px dashed rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ─────────────────────────────────────────────
   ADD MODULE MODAL (aam) — déjà ok mais refresh
───────────────────────────────────────────── */

.aam-modal {
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

/* ─────────────────────────────────────────────
   EMOJI PICKER — Refresh
───────────────────────────────────────────── */

.emoji-trigger {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    transition: all var(--ga-transition) !important;
}

.emoji-trigger:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 38%, transparent) !important;
}

/* ─────────────────────────────────────────────
   FORMATION EDITOR — Section body input zone
───────────────────────────────────────────── */

.editor-section-body {
    padding: 20px !important;
}

/* Input module title */
.module-title-input {
    color: var(--text) !important;
    caret-color: var(--ga-violet-light) !important;
}

.module-title-input:focus {
    color: var(--ga-violet-light) !important;
}

/* ─────────────────────────────────────────────
   SCROLLBARS — Consistent purple
───────────────────────────────────────────── */

.qe-questions-list::-webkit-scrollbar,
.qe-settings-panel::-webkit-scrollbar,
.sm-table-wrap::-webkit-scrollbar {
    width: 5px;
}

.qe-questions-list::-webkit-scrollbar-track,
.qe-settings-panel::-webkit-scrollbar-track,
.sm-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.qe-questions-list::-webkit-scrollbar-thumb,
.qe-settings-panel::-webkit-scrollbar-thumb,
.sm-table-wrap::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 50%, transparent), color-mix(in srgb, var(--accent) 30%, transparent));
    border-radius: 4px;
}

/* END PHASE 2 PREMIUM v800 */

/* ═══════════════════════════════════════════════════════════
   PHASE 3 — ANIMATIONS v900
   Cartes, modals, boutons, inputs, progress, skeletons
═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   KEYFRAMES NOUVEAUX
───────────────────────────────────────────── */

@keyframes gaFadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes gaFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes gaSlideInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes gaSlideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(80px);
    }
}

@keyframes gaModalIn {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(16px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes gaRipple {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

@keyframes gaProgressFill {
    from { width: 0%; }
}

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

@keyframes gaSkeletonPulse {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}

@keyframes gaSkeletonShimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

@keyframes gaSpinnerRing {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes gaPulseRing {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
    70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

@keyframes gaCountUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes gaToastProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

@keyframes gaBorderGlow {
    0%, 100% { border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
    50%       { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
}

/* ─────────────────────────────────────────────
   1. CARTES FORMATIONS — Stagger fadeInUp
───────────────────────────────────────────── */

/* Désactiver l'animation sur mobile pour perf */
@media (prefers-reduced-motion: no-preference) {

    .formation-grid .formation-card,
    .formations-grid .formation-card,
    .ga-formations-grid .ga-formation-card,
    .formation-grid .ga-formation-card {
        opacity: 0;
        animation: gaFadeInUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* Stagger via nth-child (jusqu'à 12 cartes) */
    .formation-grid .formation-card:nth-child(1),
    .formations-grid .formation-card:nth-child(1),
    .ga-formations-grid .ga-formation-card:nth-child(1)  { animation-delay: 0.04s; }

    .formation-grid .formation-card:nth-child(2),
    .formations-grid .formation-card:nth-child(2),
    .ga-formations-grid .ga-formation-card:nth-child(2)  { animation-delay: 0.10s; }

    .formation-grid .formation-card:nth-child(3),
    .formations-grid .formation-card:nth-child(3),
    .ga-formations-grid .ga-formation-card:nth-child(3)  { animation-delay: 0.16s; }

    .formation-grid .formation-card:nth-child(4),
    .formations-grid .formation-card:nth-child(4),
    .ga-formations-grid .ga-formation-card:nth-child(4)  { animation-delay: 0.22s; }

    .formation-grid .formation-card:nth-child(5),
    .formations-grid .formation-card:nth-child(5),
    .ga-formations-grid .ga-formation-card:nth-child(5)  { animation-delay: 0.28s; }

    .formation-grid .formation-card:nth-child(6),
    .formations-grid .formation-card:nth-child(6),
    .ga-formations-grid .ga-formation-card:nth-child(6)  { animation-delay: 0.34s; }

    .formation-grid .formation-card:nth-child(n+7),
    .formations-grid .formation-card:nth-child(n+7),
    .ga-formations-grid .ga-formation-card:nth-child(n+7) { animation-delay: 0.40s; }

    /* KPI stats cards stagger */
    .stats-kpi-card,
    .sm-stat-card {
        opacity: 0;
        animation: gaFadeInUp 0.4s ease forwards;
    }

    .stats-kpi-card:nth-child(1), .sm-stat-card:nth-child(1) { animation-delay: 0.05s; }
    .stats-kpi-card:nth-child(2), .sm-stat-card:nth-child(2) { animation-delay: 0.12s; }
    .stats-kpi-card:nth-child(3), .sm-stat-card:nth-child(3) { animation-delay: 0.19s; }
    .stats-kpi-card:nth-child(4), .sm-stat-card:nth-child(4) { animation-delay: 0.26s; }

} /* end prefers-reduced-motion */

/* ─────────────────────────────────────────────
   2. MODALS — Entrée premium
───────────────────────────────────────────── */

/* Override de modalPop avec gaModalIn */
.academy-modal {
    animation: gaModalIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.academy-modal-overlay {
    animation: gaFadeIn 0.2s ease !important;
}

/* Classe de sortie ajoutée par JS */
.academy-modal.ga-closing {
    animation: gaModalIn 0.2s ease reverse forwards !important;
}

.academy-modal-overlay.ga-closing {
    animation: gaFadeIn 0.2s ease reverse forwards !important;
}

/* Quiz editor modal */
.qe-overlay {
    animation: gaFadeIn 0.2s ease;
}

.qe-modal {
    animation: gaModalIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* AAM modal déjà animé → refresh */
.aam-modal {
    animation: gaModalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ─────────────────────────────────────────────
   3. BOUTONS — Ripple + hover scale
───────────────────────────────────────────── */

/* Ripple container */
.btn-academy {
    position: relative;
    overflow: hidden;
}

/* Le ripple est injecté par JS en <span class="ga-ripple"> */
.ga-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    pointer-events: none;
    transform: scale(0);
    animation: gaRipple 0.55s ease-out forwards;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
}

/* Hover scale doux */
.btn-academy:hover {
    transform: translateY(-1px) scale(1.02) !important;
}

.btn-academy:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Pas de scale sur btn-icon */
.btn-academy.btn-icon:hover {
    transform: scale(1.08) !important;
}

/* ─────────────────────────────────────────────
   4. INPUTS — Focus glow animé
───────────────────────────────────────────── */

.form-control {
    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease !important;
}

/* Animation border glow (optionnel, pour les modals) */
.academy-modal .form-control:focus,
.aam-modal .form-control:focus {
    animation: gaBorderGlow 1.5s ease-in-out 1;
}

/* Textarea resize smooth */
textarea.form-control {
    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        height 0.15s ease !important;
}

/* ─────────────────────────────────────────────
   5. PROGRESS BARS — Remplissage animé + shimmer
───────────────────────────────────────────── */

/* Barre upload */
.upload-progress-bar {
    animation:
        gaProgressFill 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards,
        gaShimmerPass 2s linear infinite !important;
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        var(--accent-light) 30%,
        var(--accent-light) 50%,
        var(--accent-light) 70%,
        var(--accent) 100%
    ) !important;
    background-size: 200% 100% !important;
}

/* Progress student */
.progress-bar-fill {
    animation: gaProgressFill 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* Progress sm-table */
.sm-progress-fill {
    animation: gaProgressFill 0.9s cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

/* Shimmer sur les barres au repos */
.progress-bar-fill,
.sm-progress-fill {
    position: relative;
    overflow: hidden;
}

.progress-bar-fill::after,
.sm-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.2) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: gaShimmerPass 2.5s ease-in-out infinite;
}

/* ─────────────────────────────────────────────
   6. TOASTS ACADEMY — Slide in/out
───────────────────────────────────────────── */

.ga-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1200;
    background: rgba(15, 10, 30, 0.96);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 14px;
    padding: 14px 18px 10px;
    min-width: 280px;
    max-width: 380px;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
    backdrop-filter: blur(12px);
    animation: gaSlideInRight 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ga-toast.ga-toast-exit {
    animation: gaSlideOutRight 0.25s ease forwards;
}

.ga-toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text, #fff);
    font-weight: 500;
}

.ga-toast-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.ga-toast-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.ga-toast-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-light), var(--accent-light));
    border-radius: 2px;
    animation: gaToastProgress 3s linear forwards;
}

/* Variantes couleurs */
.ga-toast-success .ga-toast-progress-bar { background: linear-gradient(90deg, #059669, #34d399); }
.ga-toast-success { border-color: rgba(16, 185, 129, 0.35); }

.ga-toast-error .ga-toast-progress-bar { background: linear-gradient(90deg, #dc2626, #f87171); }
.ga-toast-error { border-color: rgba(239, 68, 68, 0.35); }

.ga-toast-warning .ga-toast-progress-bar { background: linear-gradient(90deg, #d97706, #fbbf24); }
.ga-toast-warning { border-color: rgba(245, 158, 11, 0.35); }

/* ─────────────────────────────────────────────
   7. SKELETON LOADERS — Cartes en chargement
───────────────────────────────────────────── */

.ga-skeleton-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    overflow: hidden;
    pointer-events: none;
}

.ga-skeleton-thumb {
    height: 160px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 0px,
        color-mix(in srgb, var(--accent) 12%, transparent) 200px,
        rgba(255, 255, 255, 0.03) 400px
    );
    background-size: 600px 100%;
    animation: gaSkeletonShimmer 1.6s ease-in-out infinite;
}

.ga-skeleton-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ga-skeleton-line {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0px,
        color-mix(in srgb, var(--accent) 10%, transparent) 200px,
        rgba(255, 255, 255, 0.04) 400px
    );
    background-size: 600px 100%;
    animation: gaSkeletonShimmer 1.6s ease-in-out infinite;
}

.ga-skeleton-line.ga-sk-title  { width: 70%; height: 18px; }
.ga-skeleton-line.ga-sk-desc   { width: 90%; animation-delay: 0.1s; }
.ga-skeleton-line.ga-sk-desc2  { width: 60%; animation-delay: 0.15s; }
.ga-skeleton-line.ga-sk-price  { width: 30%; height: 20px; margin-top: 4px; animation-delay: 0.2s; }
.ga-skeleton-line.ga-sk-btn    { width: 45%; height: 32px; border-radius: 8px; margin-top: 6px; animation-delay: 0.25s; }

/* ─────────────────────────────────────────────
   8. SPINNER VIOLET ACADEMY
───────────────────────────────────────────── */

.ga-spinner {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-top-color: var(--accent-light);
    border-radius: 50%;
    animation: gaSpinnerRing 0.75s linear infinite;
}

.ga-spinner-sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.ga-spinner-lg {
    width: 56px;
    height: 56px;
    border-width: 4px;
    border-top-color: var(--accent-light);
}

/* Loading state pour le container principal */
.academy-loading {
    animation: gaFadeIn 0.3s ease;
}

.academy-spinner {
    border: 3px solid color-mix(in srgb, var(--accent) 20%, transparent) !important;
    border-top-color: var(--accent-light) !important;
    animation: gaSpinnerRing 0.75s linear infinite !important;
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* ─────────────────────────────────────────────
   9. STATS VALEURS — CountUp animation
───────────────────────────────────────────── */

.stats-kpi-value,
.sm-stat-value {
    animation: gaCountUp 0.4s ease both;
}

.stats-kpi-card:nth-child(1) .stats-kpi-value { animation-delay: 0.2s; }
.stats-kpi-card:nth-child(2) .stats-kpi-value { animation-delay: 0.27s; }
.stats-kpi-card:nth-child(3) .stats-kpi-value { animation-delay: 0.34s; }
.stats-kpi-card:nth-child(4) .stats-kpi-value { animation-delay: 0.41s; }

/* ─────────────────────────────────────────────
   10. LESSON ITEMS — Stagger dans modules
───────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    .lessons-list .lesson-item {
        opacity: 0;
        animation: gaFadeInUp 0.3s ease forwards;
    }

    .lessons-list .lesson-item:nth-child(1) { animation-delay: 0.02s; }
    .lessons-list .lesson-item:nth-child(2) { animation-delay: 0.06s; }
    .lessons-list .lesson-item:nth-child(3) { animation-delay: 0.10s; }
    .lessons-list .lesson-item:nth-child(4) { animation-delay: 0.14s; }
    .lessons-list .lesson-item:nth-child(5) { animation-delay: 0.18s; }
    .lessons-list .lesson-item:nth-child(n+6) { animation-delay: 0.22s; }
}

/* ─────────────────────────────────────────────
   11. ACTIVE BADGE SUR TABS — Pulse subtil
───────────────────────────────────────────── */

.academy-tab.active {
    position: relative;
}

.academy-tab.active::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 2px;
    background: var(--ga-violet, var(--accent-light));
    border-radius: 2px 2px 0 0;
    animation: gaBorderGlow 2.5s ease-in-out infinite;
}

/* ─────────────────────────────────────────────
   12. HEADER ICON — Pulse ring
───────────────────────────────────────────── */

.academy-header-icon {
    animation: gaPulseRing 3s ease-in-out infinite,
               academyPulseGlow 3s ease-in-out infinite !important;
}

/* ─────────────────────────────────────────────
   13. EMPTY STATE — Float + fade
───────────────────────────────────────────── */

.academy-empty {
    animation: gaFadeIn 0.5s ease;
}

/* ─────────────────────────────────────────────
   14. MODULE ITEMS — Stagger ouverture
───────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    .modules-list .module-item {
        opacity: 0;
        animation: gaFadeInUp 0.35s ease forwards;
    }

    .modules-list .module-item:nth-child(1) { animation-delay: 0.04s; }
    .modules-list .module-item:nth-child(2) { animation-delay: 0.10s; }
    .modules-list .module-item:nth-child(3) { animation-delay: 0.16s; }
    .modules-list .module-item:nth-child(4) { animation-delay: 0.22s; }
    .modules-list .module-item:nth-child(n+5) { animation-delay: 0.28s; }
}

/* ─────────────────────────────────────────────
   15. QUIZ QUESTIONS — Stagger
───────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    .qe-questions-list .qe-question {
        opacity: 0;
        animation: gaFadeInUp 0.3s ease forwards;
    }

    .qe-questions-list .qe-question:nth-child(1) { animation-delay: 0.04s; }
    .qe-questions-list .qe-question:nth-child(2) { animation-delay: 0.09s; }
    .qe-questions-list .qe-question:nth-child(3) { animation-delay: 0.14s; }
    .qe-questions-list .qe-question:nth-child(4) { animation-delay: 0.19s; }
    .qe-questions-list .qe-question:nth-child(n+5) { animation-delay: 0.24s; }
}

/* ─────────────────────────────────────────────
   16. STUDENTS TABLE — Rows stagger
───────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    .sm-table tbody tr {
        opacity: 0;
        animation: gaFadeInUp 0.28s ease forwards;
    }

    .sm-table tbody tr:nth-child(1)  { animation-delay: 0.04s; }
    .sm-table tbody tr:nth-child(2)  { animation-delay: 0.08s; }
    .sm-table tbody tr:nth-child(3)  { animation-delay: 0.12s; }
    .sm-table tbody tr:nth-child(4)  { animation-delay: 0.16s; }
    .sm-table tbody tr:nth-child(5)  { animation-delay: 0.20s; }
    .sm-table tbody tr:nth-child(6)  { animation-delay: 0.24s; }
    .sm-table tbody tr:nth-child(n+7) { animation-delay: 0.28s; }
}

/* ─────────────────────────────────────────────
   17. RIPPLE JS HELPER — Info class
   (Le ripple est activé via JS : voir giri-academy.js)
───────────────────────────────────────────── */

/*
  Usage JS pour le ripple :
  document.querySelectorAll('.btn-academy').forEach(btn => {
      btn.addEventListener('click', e => {
          const r = document.createElement('span');
          r.className = 'ga-ripple';
          const rect = btn.getBoundingClientRect();
          r.style.left = (e.clientX - rect.left) + 'px';
          r.style.top  = (e.clientY - rect.top) + 'px';
          btn.appendChild(r);
          setTimeout(() => r.remove(), 600);
      });
  });
*/

/* ─────────────────────────────────────────────
   18. RESPECT prefers-reduced-motion
───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .formation-card,
    .ga-formation-card,
    .stats-kpi-card,
    .sm-stat-card,
    .lesson-item,
    .module-item,
    .qe-question,
    .sm-table tbody tr {
        opacity: 1 !important;
        animation: none !important;
    }

    .academy-modal,
    .qe-modal,
    .aam-modal {
        animation: none !important;
    }

    .progress-bar-fill::after,
    .sm-progress-fill::after,
    .upload-progress-bar {
        animation: none !important;
    }

    .ga-toast {
        animation: gaFadeIn 0.1s ease !important;
    }
}

/* END PHASE 3 ANIMATIONS v900 */

/* ═══════════════════════════════════════════════════════════════════
   ACADEMY DASHBOARD v1.0 — Tableau de bord formateur
   ═══════════════════════════════════════════════════════════════════ */

.ga-dashboard {
    padding: 0 0 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Header ── */
.ga-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 32px 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.ga-dash-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ga-dash-header-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent);
    flex-shrink: 0;
}
.ga-dash-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
    line-height: 1.2;
}
.ga-dash-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* ── KPI Grid ── */
.ga-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 0 32px 24px;
}
@media (max-width: 1100px) { .ga-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .ga-kpi-grid { grid-template-columns: 1fr; } }

.ga-kpi-card {
    background: linear-gradient(145deg, rgba(25,22,45,0.9), rgba(18,15,35,0.95));
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
.ga-kpi-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.2s;
}
.ga-kpi-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
.ga-kpi-card:hover::before { opacity: 1; }

.ga-kpi-purple { border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.ga-kpi-purple .ga-kpi-icon-wrap { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ga-kpi-purple .ga-kpi-value     { color: var(--accent-light); }

.ga-kpi-green { border-color: rgba(16,185,129,0.2); }
.ga-kpi-green .ga-kpi-icon-wrap { background: rgba(16,185,129,0.15); }
.ga-kpi-green .ga-kpi-value     { color: #34d399; }

.ga-kpi-blue { border-color: rgba(59,130,246,0.2); }
.ga-kpi-blue .ga-kpi-icon-wrap { background: rgba(59,130,246,0.15); }
.ga-kpi-blue .ga-kpi-value     { color: #60a5fa; }

.ga-kpi-amber { border-color: rgba(245,158,11,0.2); }
.ga-kpi-amber .ga-kpi-icon-wrap { background: rgba(245,158,11,0.15); }
.ga-kpi-amber .ga-kpi-value     { color: #fbbf24; }

.ga-kpi-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.4rem;
}
.ga-kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ga-kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.ga-kpi-label { font-size: 12px; font-weight: 600; color: var(--text); opacity: 0.9; }
.ga-kpi-sub   { font-size: 11px; color: var(--text-muted); }

/* Loading skeleton */
.ga-kpi-loading { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); min-height: 88px; }
.ga-kpi-shimmer {
    position: absolute; inset: 0; border-radius: 16px;
    background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,0.04) 50%, transparent 80%);
    background-size: 200% 100%;
    animation: gaShimmer 1.6s infinite;
}
@keyframes gaShimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }

/* ── Dashboard Body ── */
.ga-dash-body {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    padding: 0 32px;
}
@media (max-width: 1050px) { .ga-dash-body { grid-template-columns: 1fr; } }

.ga-dash-main { display: flex; flex-direction: column; gap: 20px; }
.ga-dash-side  { display: flex; flex-direction: column; gap: 20px; }

/* ── Sections ── */
.ga-dash-section {
    background: linear-gradient(145deg, rgba(25,22,45,0.85), rgba(18,15,35,0.9));
    border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 16px;
    padding: 20px;
}
.ga-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.ga-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.3px;
}
.ga-activity-badge {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
    color: var(--accent-light);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
}

/* ── Chart ── */
.ga-chart-wrap {
    position: relative;
    height: 180px;
}
.ga-chart-wrap canvas { width: 100% !important; height: 100% !important; }
.ga-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Top Formations ── */
.ga-top-list { display: flex; flex-direction: column; gap: 2px; }
.ga-top-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.15s;
}
.ga-top-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ga-top-rank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-light);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ga-top-emoji { font-size: 1.4rem; flex-shrink: 0; }
.ga-top-info  { flex: 1; min-width: 0; }
.ga-top-name  { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.ga-top-meta  { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; }
.ga-top-sep   { opacity: 0.4; }

/* ── Activity Feed ── */
.ga-activity-list { display: flex; flex-direction: column; gap: 2px; }
.ga-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 4px;
    border-radius: 8px;
    transition: background 0.15s;
}
.ga-activity-item:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ga-activity-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent));
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.ga-activity-content { flex: 1; min-width: 0; }
.ga-activity-text    { font-size: 12px; color: var(--text); line-height: 1.5; }
.ga-activity-verb    { color: var(--text-muted); }
.ga-activity-formation { color: var(--accent-light); font-size: 11px; }
.ga-activity-time    { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ── Skeleton rows ── */
.ga-skel-row    { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.ga-skel-circle { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.06); flex-shrink: 0; animation: gaShimmer 1.6s infinite; }
.ga-skel-line   { height: 12px; border-radius: 6px; background: rgba(255,255,255,0.06); animation: gaShimmer 1.6s infinite; }

/* ── Empty state ── */
.ga-empty-msg { font-size: 13px; color: var(--text-muted); padding: 12px 4px; margin: 0; }

/* ── "← Back" button on formation list ── */
.ga-btn-back-dashboard {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}
.ga-btn-back-dashboard:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* END ACADEMY DASHBOARD v1.0 */

/* ═══════════════════════════════════════════════════════════════════════════
   GAMIFICATION VIEW — Phase 4
   Leaderboard formateur, badges catalogue, stats XP
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout ───────────────────────────────────────────────────────────────── */

.ga-gamif-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 24px;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    font-size: 14px;
}

.ga-gamif-content {
    padding: 24px;
}

.ga-gamif-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: auto auto;
    gap: 20px;
    max-width: 1200px;
}

.ga-gamif-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ga-gamif-card--wide {
    grid-row: 1 / span 2;
}

.ga-gamif-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.ga-gamif-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0;
}

.ga-gamif-badge-count {
    font-size: 12px;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    background: rgba(255,255,255,0.06);
    padding: 3px 10px;
    border-radius: 20px;
}

/* ── Leaderboard ──────────────────────────────────────────────────────────── */

.ga-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ga-leaderboard-header {
    display: grid;
    grid-template-columns: 60px 1fr 120px 100px 80px 80px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ga-leaderboard-row {
    display: grid;
    grid-template-columns: 60px 1fr 120px 100px 80px 80px;
    align-items: center;
    padding: 12px;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.ga-leaderboard-row:hover {
    background: rgba(255,255,255,0.04);
}

.ga-leaderboard-row--podium {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}

.ga-leaderboard-row--podium:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.ga-leaderboard-rank {
    font-size: 18px;
    text-align: center;
}

.ga-leaderboard-student {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ga-leaderboard-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.ga-leaderboard-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.ga-leaderboard-level {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ga-level-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-light);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-block;
    width: fit-content;
}

.ga-level-name {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
}

.ga-leaderboard-xp {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.ga-xp-value {
    font-size: 16px;
    font-weight: 700;
    color: #fcd34d;
}

.ga-xp-label {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
}

.ga-badge-count-chip {
    font-size: 12px;
    color: var(--text-primary, #fff);
    background: rgba(255,255,255,0.06);
    padding: 4px 10px;
    border-radius: 20px;
}

.ga-streak-chip {
    font-size: 12px;
    color: #fb923c;
    background: rgba(251,146,60,0.12);
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

.ga-streak-none {
    color: rgba(255,255,255,0.2);
    font-size: 14px;
}

/* ── Badge stats ──────────────────────────────────────────────────────────── */

.ga-badge-stats {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ga-badge-stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ga-badge-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.ga-badge-stat-info {
    flex: 1;
    min-width: 0;
}

.ga-badge-stat-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #fff);
    margin-bottom: 4px;
}

.ga-badge-stat-bar-wrap {
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}

.ga-badge-stat-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.ga-badge-stat-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #fff);
    min-width: 24px;
    text-align: right;
}

/* ── Badges catalogue ─────────────────────────────────────────────────────── */

.ga-badges-catalog {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ga-badge-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background 0.15s ease;
    cursor: default;
}

.ga-badge-item:hover {
    background: rgba(255,255,255,0.04);
}

.ga-badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.ga-badge-info {
    min-width: 0;
}

.ga-badge-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin-bottom: 2px;
}

.ga-badge-desc {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Empty & error states ─────────────────────────────────────────────────── */

.ga-gamif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: rgba(255,255,255,0.35);
    font-size: 13px;
    text-align: center;
}

.ga-gamif-empty span {
    font-size: 32px;
}

.ga-gamif-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px;
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    text-align: center;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .ga-gamif-grid {
        grid-template-columns: 1fr;
    }
    .ga-gamif-card--wide {
        grid-row: auto;
    }
    .ga-leaderboard-header,
    .ga-leaderboard-row {
        grid-template-columns: 50px 1fr 80px 70px;
    }
    .ga-leaderboard-header > :nth-child(5),
    .ga-leaderboard-header > :nth-child(6),
    .ga-leaderboard-row > :nth-child(5),
    .ga-leaderboard-row > :nth-child(6) {
        display: none;
    }
}

/* ── Formation Questions View ──────────────────────────────── */
.ga-questions-wrap { padding: 24px 32px; max-width: 860px; }
@media (max-width: 768px) { .ga-questions-wrap { padding: 16px; } }
.ga-questions-header {
    display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px;
}
.ga-questions-title { font-size: 20px; font-weight: 800; margin: 0 0 4px; color: var(--ga-text); }
.ga-questions-subtitle { font-size: 13px; color: var(--ga-muted); margin: 0; }
.ga-questions-empty {
    text-align: center; padding: 64px 24px; color: var(--ga-muted);
}
.ga-q-icon { font-size: 40px; display: block; margin-bottom: 12px; }
.ga-questions-empty p { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.ga-questions-empty small { font-size: 13px; }
.ga-q-lesson-group { margin-bottom: 32px; }
.ga-q-lesson-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--ga-muted);
    text-transform: uppercase; letter-spacing: 0.6px;
    padding-bottom: 10px; border-bottom: 1px solid var(--ga-border);
    margin-bottom: 14px;
}
.ga-q-badge-warn {
    margin-left: auto; background: rgba(239,68,68,0.12); color: #ef4444;
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
    text-transform: none; letter-spacing: 0;
}
.ga-q-badge-ok {
    margin-left: auto; background: rgba(34,197,94,0.12); color: #22c55e;
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
    text-transform: none; letter-spacing: 0;
}
.ga-q-item {
    background: var(--ga-surface); border: 1px solid var(--ga-border);
    border-radius: 12px; padding: 16px 18px; margin-bottom: 12px;
    transition: border-color 0.2s;
}
.ga-q-item.unanswered { border-color: rgba(239,68,68,0.25); }
.ga-q-item.answered   { border-color: rgba(34,197,94,0.20); }
.ga-q-item-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ga-q-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--ga-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
.ga-q-meta { flex: 1; min-width: 0; }
.ga-q-author { font-size: 13px; font-weight: 700; display: block; }
.ga-q-time { font-size: 11px; color: var(--ga-muted); }
.ga-q-status { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ga-q-replied {
    font-size: 11px; font-weight: 700; color: #22c55e;
    background: rgba(34,197,94,0.10); padding: 2px 8px; border-radius: 20px;
}
.ga-q-unreplied {
    font-size: 11px; font-weight: 700; color: #f59e0b;
    background: rgba(245,158,11,0.10); padding: 2px 8px; border-radius: 20px;
}
.ga-q-pinned { font-size: 14px; }
.ga-q-content {
    font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.80);
    margin-bottom: 12px;
}
.ga-q-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ga-q-reply-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ga-border); }
.ga-q-reply-ta {
    width: 100%; min-height: 72px; resize: vertical;
    background: var(--ga-bg); border: 1px solid var(--ga-border);
    border-radius: 8px; color: var(--ga-text); font-family: inherit;
    font-size: 13px; padding: 10px 12px; outline: none;
    transition: border-color 0.2s;
}
.ga-q-reply-ta:focus { border-color: var(--ga-primary); }
.ga-q-reply-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }


/* ════════════════════════════════════════════════════════════════
   ACADEMY SEARCH — Modal Spotlight/Raycast
   Classes : .gas-* (giri academy search)
   ════════════════════════════════════════════════════════════════ */

/* ── Bouton search dans le header ── */
.ga-btn-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.ga-btn-search:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--text);
}
.ga-btn-search span { display: none; }
@media (min-width: 640px) { .ga-btn-search span { display: inline; } }

.ga-kbd {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: var(--bg-tertiary, rgba(255,255,255,0.06));
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: inherit;
}

/* ── Overlay backdrop ── */
.gas-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(60px, 12vh, 120px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.gas-overlay.gas-visible {
    opacity: 1;
    pointer-events: all;
}

/* ── Dialog ── */
.gas-dialog {
    width: min(640px, calc(100vw - 32px));
    background: var(--bg-card, #1e1e2e);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 16px;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
        0 24px 64px rgba(0,0,0,0.45),
        0 8px 24px rgba(0,0,0,0.25);
    overflow: hidden;
    transform: translateY(-12px) scale(0.98);
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 200px);
}
.gas-overlay.gas-visible .gas-dialog {
    transform: translateY(0) scale(1);
}

/* ── Input row ── */
.gas-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    flex-shrink: 0;
}
.gas-icon-search { color: var(--text-muted); flex-shrink: 0; }
.gas-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 16px;
    font-family: inherit;
    caret-color: var(--accent);
}
.gas-input::placeholder { color: var(--text-muted); }
.gas-esc-hint {
    padding: 3px 7px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}

/* ── Results zone ── */
.gas-results {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 30%, transparent) transparent;
}
.gas-results::-webkit-scrollbar { width: 4px; }
.gas-results::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 2px;
}

/* ── Groups ── */
.gas-group { padding: 8px 0; }
.gas-group + .gas-group {
    border-top: 1px solid var(--border, rgba(255,255,255,0.06));
    margin-top: 4px;
}
.gas-group-title {
    padding: 4px 16px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Result items ── */
.gas-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.12s;
    border-radius: 0;
}
.gas-item:hover,
.gas-item.gas-selected {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.gas-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
}
.gas-avatar {
    font-size: 12px !important;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent)) !important;
}
.gas-item-body {
    flex: 1;
    min-width: 0;
}
.gas-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Highlight des termes trouvés */
.gas-item-title mark,
.gas-item-headline mark {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
    color: var(--accent-light);
    border-radius: 2px;
    padding: 0 2px;
    font-style: normal;
}
.gas-item-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gas-item-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.15s, transform 0.15s;
}
.gas-item:hover .gas-item-arrow,
.gas-item.gas-selected .gas-item-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* Badges status */
.gas-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.gas-badge-pub  { background: rgba(16,185,129,0.15); color: #10b981; }
.gas-badge-draft { background: rgba(251,191,36,0.15); color: #f59e0b; }

/* ── États vides / loading ── */
.gas-hint,
.gas-empty,
.gas-loading,
.gas-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px 24px;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}
.gas-hint p, .gas-empty p { font-size: 13px; margin: 0; }
.gas-loading {
    flex-direction: row;
    padding: 20px;
    gap: 12px;
}
.gas-spinner-sm {
    width: 18px;
    height: 18px;
    border: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: gasSpin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes gasSpin { to { transform: rotate(360deg); } }

/* ── Footer hints ── */
.gas-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid var(--border, rgba(255,255,255,0.06));
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.gas-footer kbd {
    padding: 1px 5px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 10px;
    font-family: inherit;
}
.gas-footer-right { margin-left: auto; }

/* ── Responsive mobile ── */
@media (max-width: 480px) {
    .gas-overlay { padding-top: 16px; align-items: flex-start; }
    .gas-dialog {
        width: 100vw;
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
    }
    .gas-footer { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORAGE WIDGET — Phase 5
   Jauge circulaire de stockage pour le dashboard formateur
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Widget container ─────────────────────────────────────────────────────── */

.sw-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.sw-widget {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 20px;
    transition: border-color 0.3s ease;
}

.sw-widget--warn {
    border-color: rgba(245,158,11,0.3);
    background: rgba(245,158,11,0.04);
}

.sw-widget--alert {
    border-color: rgba(239,68,68,0.4);
    background: rgba(239,68,68,0.05);
    animation: gaBorderGlow 2s ease-in-out infinite;
}

.sw-widget--error {
    opacity: 0.6;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.sw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sw-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #fff);
}

.sw-plan-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-light);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Body (gauge + types) ─────────────────────────────────────────────────── */

.sw-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* ── Gauge ────────────────────────────────────────────────────────────────── */

.sw-gauge-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sw-gauge-svg {
    width: 90px;
    height: 90px;
}

.sw-gauge-track {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 8;
}

.sw-gauge-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}

.sw-gauge-pct {
    fill: #fff;
    font-size: 18px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
}

.sw-gauge-label {
    fill: rgba(255,255,255,0.4);
    font-size: 8px;
    text-anchor: middle;
    dominant-baseline: middle;
}

.sw-gauge-info {
    text-align: center;
}

.sw-used {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #fff);
}

.sw-quota {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
}

/* ── Type breakdown ───────────────────────────────────────────────────────── */

.sw-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sw-type-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.sw-type-icon {
    font-size: 14px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.sw-type-name {
    color: rgba(255,255,255,0.5);
    min-width: 60px;
    text-transform: capitalize;
}

.sw-type-bar-wrap {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}

.sw-type-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: 2px;
    transition: width 0.6s ease;
}

.sw-type-size {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    min-width: 48px;
    text-align: right;
}

.sw-no-files {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    padding: 8px 0;
}

/* ── Alert banner ─────────────────────────────────────────────────────────── */

.sw-alert {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sw-alert--red {
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    color: #fca5a5;
}

.sw-alert--orange {
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.25);
    color: #fcd34d;
}

.sw-btn-upgrade {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, var(--accent), #5b21b6);
    color: #fff;
    transition: opacity 0.15s ease;
}

.sw-btn-upgrade:hover { opacity: 0.85; }

.sw-btn-upgrade--soft {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.sw-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 11px;
    color: rgba(255,255,255,0.3);
}

/* ── Plans Modal ──────────────────────────────────────────────────────────── */

.sw-plans-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sw-plans-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}

.sw-plans-panel {
    position: relative;
    z-index: 1;
    background: rgba(15,10,30,0.97);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 20px;
    padding: 28px;
    width: min(520px, 90vw);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.sw-plans-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.sw-plans-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.sw-plans-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.sw-plans-close:hover { background: rgba(255,255,255,0.1); }

.sw-plans-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sw-plan-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 16px 20px;
    transition: border-color 0.2s ease;
}

.sw-plan-card:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.sw-plan-card--current {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.sw-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sw-plan-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.sw-plan-storage {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
}

.sw-plan-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-light);
}

.sw-plan-feat {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 8px;
}

.sw-plan-current-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-light);
    padding: 4px 12px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 20px;
    display: inline-block;
}

/* ─── LessonAnalytics v1.0 ─────────────────────────────────────────────────── */

.ga-analytics-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px;
    overflow-y: auto;
}

.ga-analytics-modal {
    background: var(--card-bg, #1e1e2e);
    border-radius: 16px;
    width: 100%;
    max-width: 1000px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    min-height: 400px;
    border: 1px solid rgba(255,255,255,0.08);
}

.ga-analytics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.ga-analytics-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text, #f1f5f9);
    display: flex;
    align-items: center;
}

.ga-analytics-close {
    background: rgba(255,255,255,0.06);
    border: none;
    color: var(--muted, #94a3b8);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}
.ga-analytics-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

.ga-analytics-body {
    padding: 24px;
    flex: 1;
    overflow-x: auto;
}

.ga-analytics-loading,
.ga-analytics-error,
.ga-analytics-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--muted, #94a3b8);
    font-size: 14px;
}
.ga-analytics-error { color: #f87171; }

/* Alerts */
.ga-analytics-alerts {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ga-analytics-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}
.ga-analytics-alert-danger {
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.25);
    color: #fca5a5;
}
.ga-analytics-alert-warn {
    background: rgba(234,179,8,0.10);
    border: 1px solid rgba(234,179,8,0.25);
    color: #fde68a;
}
.ga-analytics-alert-icon { font-size: 16px; flex-shrink: 0; }

/* Table */
.ga-analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ga-analytics-table th {
    text-align: left;
    padding: 8px 12px;
    color: var(--muted, #94a3b8);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ga-analytics-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text, #f1f5f9);
    vertical-align: middle;
}
.ga-analytics-table tr:hover td { background: rgba(255,255,255,0.03); }

.ga-analytics-lesson-name {
    font-weight: 500;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ga-lesson-type-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(108,99,255,0.12);
    color: var(--accent-light);
    white-space: nowrap;
}

.ga-stat-num { text-align: center; font-variant-numeric: tabular-nums; }
.ga-stat-ok     { color: #4ade80; }
.ga-stat-warn   { color: #fbbf24; }
.ga-stat-danger { color: #f87171; }

.ga-analytics-detail-btn {
    background: rgba(108,99,255,0.15);
    border: 1px solid rgba(108,99,255,0.3);
    color: var(--accent-light);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.ga-analytics-detail-btn:hover {
    background: rgba(108,99,255,0.3);
    color: #fff;
}

/* Detail panel */
.ga-analytics-back-btn {
    background: none;
    border: none;
    color: var(--accent-light);
    font-size: 13px;
    cursor: pointer;
    padding: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.ga-analytics-back-btn:hover { color: #fff; }

.ga-analytics-detail-header { margin-bottom: 20px; }
.ga-analytics-detail-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text, #f1f5f9);
    margin: 0 0 6px;
}
.ga-analytics-detail-meta { font-size: 13px; color: var(--muted, #94a3b8); }

.ga-analytics-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.ga-analytics-chart-wrap {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.06);
}
.ga-analytics-chart-label {
    text-align: center;
    font-size: 12px;
    color: var(--muted, #94a3b8);
    margin-top: 8px;
    font-weight: 600;
}

.ga-analytics-students-table .ga-student-av-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(108,99,255,0.2);
    color: var(--accent-light);
    font-size: 10px;
    font-weight: 700;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .ga-analytics-charts-row { grid-template-columns: 1fr; }
    .ga-analytics-modal { border-radius: 12px; }
    .ga-analytics-overlay { padding: 16px 8px; }
}

/* ── Storage Widget (Dashboard) ─────────────────────────────────────────── */

.ga-storage-plan-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-light);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.ga-storage-body {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0 4px;
}

.ga-storage-gauge { flex-shrink: 0; }

.ga-storage-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ga-storage-quota {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}

.ga-storage-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ga-storage-breakdown span {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.06);
    padding: 2px 7px;
    border-radius: 8px;
}

.ga-storage-alert {
    font-size: 12px;
    font-weight: 500;
    padding: 7px 10px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.ga-storage-alert--orange {
    background: rgba(245,158,11,0.12);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.25);
}

.ga-storage-alert--red {
    background: rgba(239,68,68,0.12);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.25);
    animation: ga-pulse-red 2s ease-in-out infinite;
}

@keyframes ga-pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    50%       { box-shadow: 0 0 0 4px rgba(239,68,68,0.15); }
}

.ga-storage-upgrade-btn {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, var(--accent), #5b21b6);
    color: white;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.ga-storage-upgrade-btn:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════
   CERTIFICATE EDITOR — .fce-* (tabs) + .gce-* (editor + preview)
   ═══════════════════════════════════════════════════════════════ */

/* ── Tabs formation-editor ─────────────────────────────────────── */
.fce-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
}
.fce-tab {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s;
    position: relative;
    bottom: -1px;
}
.fce-tab:hover { color: var(--text-primary); background: rgba(255,255,255,.05); }
.fce-tab--active {
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid var(--bg-primary);
}

/* ── Layout éditeur certificat ─────────────────────────────────── */
.gce-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 0;
    height: calc(100vh - 110px);
    overflow: hidden;
}

/* ── Panel gauche (options) ────────────────────────────────────── */
.gce-panel {
    background: var(--bg-secondary);
    border-right: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.gce-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}
.gce-panel-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; }
.gce-panel-actions { display: flex; gap: 8px; }

.gce-form {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.gce-form::-webkit-scrollbar { width: 4px; }
.gce-form::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

/* ── Sections ──────────────────────────────────────────────────── */
.gce-section {
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: rgba(255,255,255,.02);
}
.gce-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

/* ── Fields ────────────────────────────────────────────────────── */
.gce-field { margin-bottom: 10px; }
.gce-field:last-child { margin-bottom: 0; }
.gce-label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.gce-input {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    padding: 7px 10px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.gce-input:focus { outline: none; border-color: var(--accent-light); }

.gce-upload-row { display: flex; gap: 6px; align-items: center; }
.gce-upload-row .gce-input { flex: 1; }
.gce-btn-upload { flex-shrink: 0; padding: 7px 10px !important; }

.gce-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Color pickers ─────────────────────────────────────────────── */
.gce-color-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gce-color-wrap { display: flex; gap: 6px; align-items: center; }
.gce-color {
    width: 36px;
    height: 32px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    padding: 2px;
    background: var(--bg-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.gce-hex { flex: 1; font-family: monospace; }

/* ── Toggles ───────────────────────────────────────────────────── */
.gce-toggles { display: flex; flex-direction: column; gap: 8px; }
.gce-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 6px 0;
}
.gce-toggle-label { font-size: 13px; color: var(--text-secondary); }
.gce-toggle { display: none; }
.gce-toggle-switch {
    width: 36px;
    height: 20px;
    background: rgba(255,255,255,.12);
    border-radius: 10px;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s;
}
.gce-toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 14px; height: 14px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}
.gce-toggle:checked + .gce-toggle-switch { background: var(--accent); }
.gce-toggle:checked + .gce-toggle-switch::after { transform: translateX(16px); }

/* ── Preview colonne droite ────────────────────────────────────── */
.gce-preview-col {
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.gce-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
.gce-preview-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.gce-preview-hint { font-size: 12px; color: var(--text-muted); }

.gce-preview-wrap {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #1a1a2e;
}

/* ── Certificat Preview HTML ───────────────────────────────────── */
.gce-cert {
    width: 700px;
    min-height: 495px;
    background: #fefcf7;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    font-family: Helvetica, Arial, sans-serif;
    flex-shrink: 0;
}
.gce-cert-border-outer {
    position: absolute;
    inset: 6px;
    border: 3px solid var(--cert-accent, #B88A0B);
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}
.gce-cert-border-inner {
    position: absolute;
    inset: 15px;
    border: 1px solid color-mix(in srgb, var(--cert-accent, #B88A0B) 60%, transparent);
    border-radius: 1px;
    pointer-events: none;
    z-index: 1;
}

/* Header certificat */
.gce-cert-header {
    height: 75px;
    background: var(--cert-primary, #1A2339);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}
.gce-cert-logo { max-height: 52px; max-width: 240px; object-fit: contain; }
.gce-cert-header-text { text-align: center; }
.gce-cert-tenant { color: #fff; font-size: 14px; font-weight: bold; margin-bottom: 4px; }
.gce-cert-subtitle-header { font-size: 10px; font-style: italic; }

/* Corps certificat */
.gce-cert-body {
    padding: 18px 40px 16px;
    text-align: center;
    position: relative;
}
/* Ornements coins */
.gce-cert-ornament-tl, .gce-cert-ornament-tr,
.gce-cert-ornament-bl, .gce-cert-ornament-br {
    position: absolute;
    width: 18px; height: 18px;
    border: 1.5px solid var(--cert-accent, #B88A0B);
    opacity: 0.4;
}
.gce-cert-ornament-tl { top: 22px; left: 22px; border-right: none; border-bottom: none; }
.gce-cert-ornament-tr { top: 22px; right: 22px; border-left: none; border-bottom: none; }
.gce-cert-ornament-bl { bottom: 30px; left: 22px; border-right: none; border-top: none; }
.gce-cert-ornament-br { bottom: 30px; right: 22px; border-left: none; border-top: none; }

.gce-cert-title {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    margin-top: 4px;
}
.gce-cert-decor {
    width: 140px;
    height: 2px;
    margin: 0 auto 10px;
    border-radius: 1px;
}
.gce-cert-subtitle { font-size: 11px; font-style: italic; color: #666; margin-bottom: 6px; }
.gce-cert-student-name {
    font-size: 28px;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 4px;
    line-height: 1.1;
}
.gce-cert-name-line { width: 220px; height: 1px; margin: 0 auto 10px; opacity: 0.6; }
.gce-cert-body-text { font-size: 11px; font-style: italic; color: #666; margin-bottom: 6px; }
.gce-cert-formation-title { font-size: 16px; font-weight: bold; margin-bottom: 8px; line-height: 1.2; }
.gce-cert-date { font-size: 10px; color: #888; margin-bottom: 10px; }

/* Zone signature */
.gce-cert-signature-area { margin-top: 8px; }
.gce-cert-sig-img { max-height: 36px; max-width: 110px; object-fit: contain; margin-bottom: 4px; }
.gce-cert-sig-line { width: 100px; height: 1px; margin: 0 auto 4px; opacity: 0.5; }
.gce-cert-sig-name { font-size: 10px; font-weight: bold; color: #1A2339; }
.gce-cert-sig-title { font-size: 9px; color: #888; }

/* Footer certificat */
.gce-cert-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 24px;
    font-size: 8px;
    color: #aaa;
    background: rgba(0,0,0,.02);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .gce-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; }
    .gce-preview-col { min-height: 400px; }
    .gce-preview-wrap { padding: 12px; }
    .gce-cert { width: 100%; min-width: 320px; }
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM PREMIUM v3.0 — Notion · Linear · Stripe Level
   2026-02-21 — Typography · Spacing · Cards · Forms · Tables
═══════════════════════════════════════════════════════════════ */

/* ─── Keyframes supplémentaires ─────────────────────────────── */
@keyframes gaFadeSlideUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes gaStagger {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ─── Rendu typographique global ─────────────────────────────── */
#view-giri-academy {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* ─── Header — plus imposant, plus clair ─────────────────────── */
.academy-header-title {
    font-size: 21px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
}
.academy-header-subtitle {
    font-size: 13px !important;
    color: #9CA3AF !important;
    letter-spacing: 0.01em !important;
    margin-top: 2px !important;
}

/* ─── Formation cards — Notion style ─────────────────────────── */
.formation-card {
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(255,255,255,0.03) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08) !important;
    transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out !important;
}
.formation-card:hover {
    transform: translateY(-4px) scale(1.015) !important;
    border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.22),
        0 2px 8px rgba(0,0,0,0.12),
        0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent),
        0 0 30px color-mix(in srgb, var(--accent) 6%, transparent) !important;
}
.formation-card-body {
    padding: 22px !important;
}
.formation-card-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.35 !important;
    color: #E5E7EB !important;
    margin-bottom: 8px !important;
}
.formation-card-desc {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    color: #9CA3AF !important;
    margin-bottom: 16px !important;
}
.formation-card-meta {
    gap: 20px !important;
    margin-bottom: 16px !important;
}
.formation-meta-item {
    font-size: 13px !important;
    color: #9CA3AF !important;
}
.formation-meta-value {
    font-weight: 600 !important;
    color: #D1D5DB !important;
}
.formation-card-actions {
    padding-top: 16px !important;
    gap: 8px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.formation-thumbnail {
    height: 175px !important;
    aspect-ratio: 16 / 9;
}
.formation-thumbnail-emoji {
    font-size: 54px !important;
}

/* Stagger entry animation sur les cartes */
.formation-grid .formation-card {
    animation: gaStagger 0.38s ease both;
}
.formation-grid .formation-card:nth-child(1) { animation-delay: 0.03s; }
.formation-grid .formation-card:nth-child(2) { animation-delay: 0.08s; }
.formation-grid .formation-card:nth-child(3) { animation-delay: 0.13s; }
.formation-grid .formation-card:nth-child(4) { animation-delay: 0.18s; }
.formation-grid .formation-card:nth-child(5) { animation-delay: 0.22s; }
.formation-grid .formation-card:nth-child(6) { animation-delay: 0.26s; }
.formation-grid .formation-card:nth-child(n+7) { animation-delay: 0.30s; }

/* ─── Boutons — Linear style ──────────────────────────────────── */
.btn-academy {
    min-height: 38px !important;
    padding: 9px 18px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.005em !important;
    transition: all 200ms ease-out !important;
    gap: 7px !important;
}
.btn-academy:hover {
    transform: translateY(-1px) !important;
}
.btn-academy:active {
    transform: translateY(0) scale(0.98) !important;
}
.btn-sm {
    min-height: 32px !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
}
.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent)) !important;
    animation: none !important;
    box-shadow: 0 2px 8px rgba(109,40,217,0.4), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent) !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
    box-shadow: 0 4px 16px rgba(109,40,217,0.5), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
.btn-secondary {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #D1D5DB !important;
}
.btn-secondary:hover {
    background: rgba(255,255,255,0.09) !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: #E5E7EB !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* ─── Formulaires — touch-friendly ───────────────────────────── */
.form-control {
    min-height: 44px !important;
    padding: 11px 15px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    background: rgba(255,255,255,0.04) !important;
    color: #E5E7EB !important;
    line-height: 1.5 !important;
    transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease !important;
}
.form-control:focus {
    outline: none !important;
    border-color: color-mix(in srgb, var(--accent) 80%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
}
.form-control::placeholder {
    color: #4B5563 !important;
}
textarea.form-control {
    min-height: 100px !important;
    line-height: 1.65 !important;
    resize: vertical !important;
}
select.form-control {
    cursor: pointer !important;
}
.form-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #6B7280 !important;
    margin-bottom: 8px !important;
}
.form-group {
    margin-bottom: 20px !important;
}

/* ─── Sections éditeur ────────────────────────────────────────── */
.editor-section {
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(255,255,255,0.022) !important;
    transition: border-color 200ms ease, box-shadow 200ms ease !important;
}
.editor-section:hover {
    border-color: color-mix(in srgb, var(--accent) 20%, transparent) !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.12) !important;
}
.editor-section-header {
    padding: 15px 20px !important;
}
.editor-section-title {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #6B7280 !important;
}
.editor-section-body {
    padding: 20px !important;
}

/* ─── Modules & Leçons ────────────────────────────────────────── */
.module-item {
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(255,255,255,0.02) !important;
    margin-bottom: 8px !important;
    transition: all 200ms ease-out !important;
}
.module-item:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
    transform: translateX(2px) !important;
    background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.15), inset 3px 0 0 color-mix(in srgb, var(--accent) 70%, transparent) !important;
}
.module-header {
    padding: 14px 18px !important;
}
.module-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: #E5E7EB !important;
}
.lesson-item {
    padding: 10px 14px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    background: rgba(255,255,255,0.015) !important;
    transition: all 180ms ease-out !important;
}
.lesson-item:hover {
    border-color: color-mix(in srgb, var(--accent) 25%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
    transform: translateX(3px) !important;
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 50%, transparent) !important;
}
.lesson-item:hover::after {
    opacity: 0 !important;
}
.lesson-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #D1D5DB !important;
    letter-spacing: -0.01em !important;
}
.lesson-meta {
    font-size: 12px !important;
    color: #6B7280 !important;
}

/* ─── Tableaux étudiants — sans bordures dures ────────────────── */
.students-table {
    border-collapse: separate !important;
    border-spacing: 0 2px !important;
}
.students-table th {
    padding: 11px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    color: #6B7280 !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    background: transparent !important;
}
.students-table td {
    padding: 13px 16px !important;
    font-size: 14px !important;
    color: #D1D5DB !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    transition: background 140ms ease !important;
}
.students-table tr:last-child td {
    border-bottom: none !important;
}
.students-table tbody tr:hover td {
    background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
}
.students-table tbody tr:nth-child(even) td {
    background: rgba(255,255,255,0.013);
}
.students-table tbody tr:nth-child(even):hover td {
    background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
}

/* Search input */
.students-search {
    min-height: 42px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    background: rgba(255,255,255,0.04) !important;
    padding: 10px 14px !important;
    color: #E5E7EB !important;
    font-size: 14px !important;
    transition: all 200ms ease !important;
}
.students-search:focus {
    border-color: color-mix(in srgb, var(--accent) 70%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent) !important;
    outline: none !important;
    background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
}

/* ─── Modales — Stripe style ──────────────────────────────────── */
.academy-modal {
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow:
        0 32px 100px rgba(0,0,0,0.6),
        0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
    background: #12101e !important;
}
.academy-modal-header {
    padding: 22px 26px !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
}
.academy-modal-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: #E5E7EB !important;
}
.academy-modal-body {
    padding: 26px !important;
}
.academy-modal-footer {
    padding: 18px 26px !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(0,0,0,0.12) !important;
}
.academy-modal-overlay {
    background: rgba(0,0,0,0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* ─── Stats KPI — Linear style ────────────────────────────────── */
.stats-kpi-grid {
    gap: 16px !important;
    margin-bottom: 32px !important;
}
.stats-kpi-card {
    border-radius: 12px !important;
    padding: 22px 24px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(255,255,255,0.025) !important;
    transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out !important;
}
.stats-kpi-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 20%, transparent) !important;
}
.stats-kpi-value {
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
}
.stats-kpi-label {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #6B7280 !important;
}

/* ─── Breadcrumb ──────────────────────────────────────────────── */
.academy-breadcrumb {
    font-size: 13px !important;
    color: #6B7280 !important;
    gap: 6px !important;
    margin-bottom: 24px !important;
}
.academy-breadcrumb a {
    color: var(--accent-light) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 150ms ease !important;
}
.academy-breadcrumb a:hover {
    color: var(--accent-light) !important;
    text-decoration: none !important;
}

/* ─── Empty state ─────────────────────────────────────────────── */
.academy-empty {
    padding: 80px 24px !important;
    animation: gaFadeSlideUp 0.4s ease both !important;
}
.academy-empty-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    color: #E5E7EB !important;
    margin-bottom: 10px !important;
}
.academy-empty-desc {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #6B7280 !important;
    max-width: 380px !important;
    margin: 0 auto 28px !important;
}

/* ─── Lesson type tabs ────────────────────────────────────────── */
.lesson-type-tab {
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(255,255,255,0.03) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #9CA3AF !important;
    padding: 10px 12px !important;
    transition: all 180ms ease-out !important;
}
.lesson-type-tab:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
    color: #E5E7EB !important;
}
.lesson-type-tab.active {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
    color: var(--accent-light) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

/* ─── Upload zone ─────────────────────────────────────────────── */
.upload-zone {
    border-radius: 12px !important;
    border: 2px dashed rgba(255,255,255,0.1) !important;
    padding: 40px 32px !important;
    background: rgba(255,255,255,0.015) !important;
    transition: all 240ms ease !important;
}
.upload-zone:hover,
.upload-zone.drag-active {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 5%, transparent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 7%, transparent) !important;
    transform: none !important;
}

/* ─── Loading spinner ─────────────────────────────────────────── */
.academy-spinner {
    width: 34px !important;
    height: 34px !important;
    border: 2.5px solid rgba(255,255,255,0.07) !important;
    border-top-color: var(--accent) !important;
}

/* ─── Module lesson count badge ───────────────────────────────── */
.module-lesson-count {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent) !important;
    color: var(--accent-light) !important;
    letter-spacing: 0.01em !important;
}

/* ─── Student avatar ──────────────────────────────────────────── */
.student-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

/* ─── Analytics modal ─────────────────────────────────────────── */
.ga-analytics-modal {
    border-radius: 16px !important;
    background: #12101e !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 32px 100px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.ga-analytics-header {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
    padding: 20px 24px !important;
}
.ga-analytics-table th {
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #6B7280 !important;
    font-weight: 700 !important;
    padding: 11px 14px !important;
}
.ga-analytics-table td {
    padding: 12px 14px !important;
    color: #D1D5DB !important;
    font-size: 13.5px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.ga-analytics-table tr:hover td {
    background: color-mix(in srgb, var(--accent) 5%, transparent) !important;
}

/* ─── Quiz builder ────────────────────────────────────────────── */
.quiz-question {
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(255,255,255,0.025) !important;
    padding: 16px !important;
    margin-bottom: 14px !important;
    transition: border-color 200ms ease !important;
}
.quiz-question:hover {
    border-color: color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

/* ─── Progress bar étudiants ──────────────────────────────────── */
.progress-bar-container {
    border-radius: 6px !important;
    height: 6px !important;
    background: rgba(255,255,255,0.07) !important;
    overflow: hidden !important;
}
.progress-bar-fill {
    border-radius: 6px !important;
    background: linear-gradient(90deg, var(--accent), var(--accent-light)) !important;
}

/* ─── Status badges formatés ──────────────────────────────────── */
.formation-status-badge {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    padding: 4px 10px !important;
}
.status-published {
    background: rgba(16,185,129,0.15) !important;
    border: 1px solid rgba(16,185,129,0.35) !important;
    color: #34d399 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.status-draft {
    background: rgba(245,158,11,0.15) !important;
    border: 1px solid rgba(245,158,11,0.35) !important;
    color: #fbbf24 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* ─── Scrollbars raffinées ────────────────────────────────────── */
.academy-body::-webkit-scrollbar,
.academy-modal-body::-webkit-scrollbar,
.editor-main::-webkit-scrollbar,
.editor-sidebar::-webkit-scrollbar,
.ga-analytics-body::-webkit-scrollbar {
    width: 5px !important;
}
.academy-body::-webkit-scrollbar-thumb,
.academy-modal-body::-webkit-scrollbar-thumb,
.editor-main::-webkit-scrollbar-thumb,
.editor-sidebar::-webkit-scrollbar-thumb,
.ga-analytics-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 40%, transparent) !important;
    border-radius: 3px !important;
}
.academy-body::-webkit-scrollbar-thumb:hover,
.editor-main::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 65%, transparent) !important;
}
.academy-body::-webkit-scrollbar-track,
.editor-main::-webkit-scrollbar-track {
    background: transparent !important;
}

/* ─── Responsive fine-tuning ──────────────────────────────────── */
@media (max-width: 768px) {
    .formation-card-body { padding: 18px !important; }
    .formation-card-title { font-size: 16px !important; }
    .academy-modal-body { padding: 20px !important; }
    .academy-modal-header { padding: 18px 20px !important; }
    .stats-kpi-value { font-size: 26px !important; }
}

/* ─── Désactiver les animations excessives du header ─────────── */
.academy-header::after {
    animation: none !important;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), rgba(167,139,250,0.8), color-mix(in srgb, var(--accent) 60%, transparent), transparent) !important;
}
.academy-header-icon {
    animation: none !important;
}
.academy-header-icon::before {
    display: none !important;
}
.btn-primary {
    animation: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACADEMY v3.0 — APPLE / NETFLIX LEVEL  (10/10)
   Couche finale — ne jamais modifier les sections au-dessus
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. VARIABLES PREMIUM DARK MODE ──────────────────────────────────────── */
#view-giri-academy {
    --ga-deep:       #0a0612;
    --ga-surface:    rgba(255,255,255,0.028);
    --ga-surface-2:  rgba(255,255,255,0.055);
    --ga-border:     rgba(255,255,255,0.05);
    --ga-border-h:   color-mix(in srgb, var(--accent) 38%, transparent);
    --ga-violet:     var(--accent);
    --ga-violet-br:  var(--accent-light);
    --ga-glow:       color-mix(in srgb, var(--accent) 18%, transparent);
    --ga-warm:       rgba(255,248,240,0.92);
    --ga-muted:      rgba(200,190,220,0.5);
}

/* ─── 2. TYPOGRAPHIE — plus grand, plus bold ──────────────────────────────── */
.formation-card-title,
.ga-card-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
    line-height: 1.25 !important;
    color: rgba(255,248,240,0.95) !important;
}

.formation-card-desc,
.ga-card-desc {
    font-size: 13.5px !important;
    color: rgba(200,185,220,0.65) !important;
    line-height: 1.6 !important;
}

.stats-kpi-value,
.sm-stat-value {
    font-size: 32px !important;
    font-weight: 900 !important;
    letter-spacing: -1px !important;
}

.academy-header-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}

/* ─── 3. HEADER — gradient animé dramatique ───────────────────────────────── */
@keyframes ga-hdr-glow {
    0%   { opacity: 0.6; background-position: 0% 50%; }
    50%  { opacity: 1;   background-position: 100% 50%; }
    100% { opacity: 0.6; background-position: 0% 50%; }
}

.academy-header {
    background: rgba(10,6,18,0.93) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, transparent) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent),
        0 4px 32px rgba(0,0,0,0.38) !important;
}

.academy-header::after {
    animation: ga-hdr-glow 5s ease infinite !important;
    height: 1.5px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(109,40,217,0.5) 20%,
        var(--accent-light) 50%,
        rgba(109,40,217,0.5) 80%,
        transparent 100%) !important;
    background-size: 200% 100% !important;
}

/* ─── 4. ICON HEADER — glow pulsant ──────────────────────────────────────── */
@keyframes ga-icon-pulse {
    0%, 100% { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
    50%       { box-shadow: 0 4px 24px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent); }
}

.academy-header-icon {
    animation: ga-icon-pulse 3.5s ease-in-out infinite !important;
    border-radius: 14px !important;
}

.academy-header-icon::before {
    display: none !important;
}

/* ─── 5. FORMATION CARDS — 3D perspective + shadows multicouches ──────────── */
.formation-grid,
.formations-grid,
.ga-formations-grid {
    /* perspective removed - caused 3D tilt */
    gap: 2.2rem !important;
    padding: 2.5rem !important;
}

@keyframes ga-card-in {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.formation-card,
.ga-formation-card {
    border: 0.5px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.025) !important;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.25),
        0 8px 32px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
    animation: ga-card-in 0.5s cubic-bezier(0.34,1.2,0.64,1) both !important;
    /* transform-style: preserve-3d removed - caused overlay distortion */
    will-change: transform, box-shadow !important;
}

.formation-card:nth-child(1), .ga-formation-card:nth-child(1) { animation-delay: 0ms !important; }
.formation-card:nth-child(2), .ga-formation-card:nth-child(2) { animation-delay: 65ms !important; }
.formation-card:nth-child(3), .ga-formation-card:nth-child(3) { animation-delay: 130ms !important; }
.formation-card:nth-child(4), .ga-formation-card:nth-child(4) { animation-delay: 195ms !important; }
.formation-card:nth-child(5), .ga-formation-card:nth-child(5) { animation-delay: 260ms !important; }
.formation-card:nth-child(6), .ga-formation-card:nth-child(6) { animation-delay: 325ms !important; }
.formation-card:nth-child(n+7), .ga-formation-card:nth-child(n+7) { animation-delay: 390ms !important; }

.formation-card:hover,
.ga-formation-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: color-mix(in srgb, var(--accent) 42%, transparent) !important;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.3),
        0 20px 60px rgba(0,0,0,0.4),
        0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
        0 0 50px color-mix(in srgb, var(--accent) 12%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* ─── 6. THUMBNAIL — overlay premium ─────────────────────────────────────── */
.formation-thumbnail,
.ga-card-header {
    height: 170px !important;
    background: linear-gradient(
        145deg,
        rgba(109,40,217,0.22) 0%,
        color-mix(in srgb, var(--accent) 12%, transparent) 60%,
        rgba(16,10,30,0.8) 100%
    ) !important;
}

.formation-thumbnail::before {
    background:
        radial-gradient(ellipse at 25% 35%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 60%),
        radial-gradient(ellipse at 80% 75%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%) !important;
}

/* ─── 7. PRIX — neon premium ──────────────────────────────────────────────── */
.formation-card-price,
.ga-card-price {
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-light) 50%, var(--accent-light) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 10px rgba(167,139,250,0.5)) !important;
}

/* ─── 8. BOUTONS — ripple CSS + micro-bounce ──────────────────────────────── */
@keyframes ga-ripple {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.5; }
    80%  { transform: translate(-50%, -50%) scale(4); opacity: 0.12; }
    100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; }
}

@keyframes ga-btn-press {
    0%   { transform: translateY(-2px) scale(1.02); }
    40%  { transform: translateY(1px) scale(0.98); }
    70%  { transform: translateY(-1px) scale(1.01); }
    100% { transform: translateY(0) scale(1); }
}

.btn-academy {
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1) !important;
    letter-spacing: 0.01em !important;
}

.btn-academy::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 0;
}

.btn-academy:active::before {
    animation: ga-ripple 0.55s ease-out forwards;
}

.btn-academy:active {
    animation: ga-btn-press 0.28s ease forwards !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 50%, var(--accent-light) 100%) !important;
    animation: none !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent), 0 1px 3px rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(167,139,250,0.28) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 50%, var(--accent-light) 100%) !important;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 55%, transparent), 0 2px 8px rgba(0,0,0,0.4) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.btn-secondary {
    border: 0.5px solid rgba(255,255,255,0.1) !important;
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(8px) !important;
}

.btn-secondary:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
    transform: translateY(-1px) !important;
}

/* ─── 9. FORM CONTROLS — focus ultra-premium ─────────────────────────────── */
.form-control,
.aam-input,
.sm-search,
.students-search {
    border: 0.5px solid rgba(255,255,255,0.1) !important;
    background: rgba(255,255,255,0.035) !important;
    color: rgba(255,248,240,0.92) !important;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}

.form-control:focus,
.aam-input:focus,
.sm-search:focus,
.students-search:focus {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent), 0 2px 12px color-mix(in srgb, var(--accent) 10%, transparent) !important;
    outline: none !important;
}

/* ─── 10. MODALS — animation entrée fluide ────────────────────────────────── */
@keyframes ga-modal-in {
    0%   { opacity: 0; transform: scale(0.91) translateY(20px); filter: blur(4px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.academy-modal {
    animation: ga-modal-in 0.32s cubic-bezier(0.34,1.4,0.64,1) !important;
    border: 0.5px solid color-mix(in srgb, var(--accent) 25%, transparent) !important;
    background: rgba(12,8,22,0.97) !important;
    backdrop-filter: blur(32px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
    box-shadow:
        0 32px 96px rgba(0,0,0,0.65),
        0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 60px color-mix(in srgb, var(--accent) 7%, transparent) !important;
}

.academy-modal-overlay {
    background: rgba(0,0,0,0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.academy-modal-header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, color-mix(in srgb, var(--accent) 4%, transparent) 100%) !important;
    border-bottom: 0.5px solid color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

/* ─── 11. KPI CARDS — glassmorphism profond ───────────────────────────────── */
.stats-kpi-card,
.sm-stat-card {
    background: rgba(255,255,255,0.03) !important;
    border: 0.5px solid rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.stats-kpi-card:hover,
.sm-stat-card:hover {
    transform: translateY(-6px) scale(1.03) !important;
    border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
    box-shadow:
        0 12px 40px rgba(0,0,0,0.35),
        0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent),
        0 0 30px color-mix(in srgb, var(--accent) 10%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ─── 12. SKELETON LOADERS ────────────────────────────────────────────────── */
@keyframes ga-skeleton {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.ga-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 25%,
        color-mix(in srgb, var(--accent) 8%, transparent) 37%,
        rgba(255,255,255,0.04) 63%
    );
    background-size: 800px 100%;
    animation: ga-skeleton 1.6s ease-in-out infinite;
    border-radius: 8px;
}

.ga-skeleton-card {
    height: 280px;
    border-radius: 20px;
    border: 0.5px solid rgba(255,255,255,0.05);
}

.ga-skeleton-title {
    height: 20px;
    width: 70%;
    margin-bottom: 10px;
}

.ga-skeleton-text {
    height: 13px;
    width: 90%;
    margin-bottom: 6px;
}

.ga-skeleton-text:last-child {
    width: 60%;
}

/* ─── 13. MODULES & LEÇONS — polish final ────────────────────────────────── */
.module-item {
    border: 0.5px solid color-mix(in srgb, var(--accent) 15%, transparent) !important;
    background: rgba(255,255,255,0.02) !important;
}

.module-item:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 12%, transparent), inset 3px 0 0 color-mix(in srgb, var(--accent) 60%, transparent) !important;
    transform: translateX(0) !important;
}

.lesson-item {
    border: 0.5px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.02) !important;
    border-radius: 10px !important;
    transition: all 0.2s cubic-bezier(0.34,1.3,0.64,1) !important;
}

.lesson-item:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 5%, transparent) !important;
    transform: translateX(6px) !important;
    box-shadow: -3px 0 0 color-mix(in srgb, var(--accent) 55%, transparent) !important;
}

/* ─── 14. TABLE STUDENTS — accent barre latérale ─────────────────────────── */
.sm-table tbody tr:hover td:first-child {
    box-shadow: inset 4px 0 0 var(--accent-light) !important;
}

.sm-table tbody tr:hover td {
    background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
}

/* ─── 15. ACTIVE ELEMENTS — glow violet ──────────────────────────────────── */
.academy-tab.active {
    background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
    color: var(--accent-light) !important;
    border-bottom: 2px solid var(--accent-light) !important;
    box-shadow: inset 0 -2px 12px color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

.sm-filter-btn.active {
    background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important;
    color: var(--accent-light) !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

.lesson-type-tab.active {
    box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 25%, transparent), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ─── 16. EDITOR SECTIONS — depth & subtlety ─────────────────────────────── */
.editor-section {
    border: 0.5px solid rgba(255,255,255,0.07) !important;
    background: rgba(255,255,255,0.025) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

.editor-section:hover {
    border-color: color-mix(in srgb, var(--accent) 22%, transparent) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ─── 17. UPLOAD ZONE — premium ───────────────────────────────────────────── */
.upload-zone {
    border: 1px dashed color-mix(in srgb, var(--accent) 25%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 2%, transparent) !important;
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.34,1.4,0.64,1) !important;
}

.upload-zone:hover,
.upload-zone.drag-active {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 40px color-mix(in srgb, var(--accent) 6%, transparent) inset !important;
    transform: scale(1.008) !important;
}

/* ─── 18. EMPTY STATE — plus impactant ────────────────────────────────────── */
.academy-empty-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    background: linear-gradient(135deg, rgba(255,248,240,0.95), var(--accent-light)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.academy-empty-desc {
    font-size: 15px !important;
    color: rgba(200,185,220,0.6) !important;
    max-width: 380px !important;
}

/* ─── 19. SPINNER premium ─────────────────────────────────────────────────── */
.academy-spinner {
    border: 2px solid color-mix(in srgb, var(--accent) 12%, transparent) !important;
    border-top-color: var(--accent-light) !important;
    border-right-color: rgba(167,139,250,0.5) !important;
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

/* ─── 20. SPACING GÉNÉREUX — 24px minimum ────────────────────────────────── */
.editor-section-body {
    padding: 24px !important;
}

.form-group {
    margin-bottom: 20px !important;
}

.academy-modal-body {
    padding: 28px !important;
}

.academy-modal-footer {
    padding: 20px 28px !important;
}

.formation-card-body,
.ga-card-body {
    padding: 22px !important;
}

.formation-card-meta {
    margin-bottom: 18px !important;
    gap: 20px !important;
}

/* ─── 21. RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .formation-card:hover,
    .ga-formation-card:hover {
        transform: translateY(-4px) scale(1.01) !important;
    }
    .formation-grid,
    .formations-grid,
    .ga-formations-grid {
        gap: 1.4rem !important;
        padding: 1.25rem !important;
    }
    .formation-card-body,
    .ga-card-body {
        padding: 18px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .formation-card,
    .ga-formation-card {
        animation: none !important;
    }
    .formation-card:hover,
    .ga-formation-card:hover {
        transform: translateY(-4px) !important;
    }
    .academy-header::after {
        animation: none !important;
    }
    .academy-header-icon {
        animation: none !important;
    }
    .btn-academy:active::before {
        animation: none !important;
    }
}
/* ═══ END v3.0 ════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   STRIPE CONNECT — academy-stripe-connect.js                        v1.0
   ═══════════════════════════════════════════════════════════════════════════ */

.ga-connect-page { padding: 28px; max-width: 1000px; margin: 0 auto; }
.ga-connect-header { margin-bottom: 28px; }
.ga-connect-back { margin-bottom: 20px; }
.ga-connect-title-block { display: flex; align-items: center; gap: 16px; }
.ga-connect-icon-big { font-size: 40px; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 40%, transparent)); }
.ga-connect-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.ga-connect-subtitle { font-size: 14px; color: var(--text-muted); margin: 0; }
.ga-connect-body { width: 100%; }
.ga-connect-loading { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 14px; padding: 40px 0; }
.ga-connect-spinner { width: 20px; height: 20px; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent-light); border-radius: 50%; animation: ga-spin 0.8s linear infinite; }
.ga-connect-spinner-inline { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: ga-spin 0.8s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes ga-spin { to { transform: rotate(360deg); } }
.ga-connect-grid { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
@media (max-width: 768px) { .ga-connect-grid { grid-template-columns: 1fr; } .ga-connect-page { padding: 16px; } }
.ga-connect-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 28px; }
.ga-connect-main-card { border-color: color-mix(in srgb, var(--accent) 20%, transparent); background: color-mix(in srgb, var(--accent) 4%, transparent); }
.ga-connect-info-card { background: rgba(255,255,255,0.03); }
.ga-connect-inactive { border-color: rgba(255,255,255,0.06); opacity: 0.85; }
.ga-connect-status-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 100px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 24px; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25); color: #f87171; }
.ga-connect-status-active { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.25); color: #4ade80; }
.ga-connect-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ga-connect-status-dot-active { animation: ga-pulse-dot 1.5s ease infinite; }
@keyframes ga-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } }
.ga-connect-hero { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px; }
.ga-connect-hero-icon { width: 72px; height: 72px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); display: flex; align-items: center; justify-content: center; color: var(--accent-light); flex-shrink: 0; }
.ga-connect-hero-icon-active { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.25); color: #4ade80; }
.ga-connect-hero-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px; }
.ga-connect-hero-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0; }
.ga-connect-features { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ga-connect-feature { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 6px 12px; font-size: 13px; color: var(--text-secondary); }
.ga-connect-info-row { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.ga-connect-info-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: rgba(255,255,255,0.03); border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); }
.ga-connect-info-label { font-size: 13px; color: var(--text-muted); }
.ga-connect-info-value { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ga-connect-card-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.06em; }
.ga-connect-steps { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.ga-connect-step { display: flex; gap: 14px; align-items: flex-start; }
.ga-connect-step-num { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--accent-light); flex-shrink: 0; }
.ga-connect-step-done { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.3); color: #4ade80; }
.ga-connect-step strong { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.ga-connect-step p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; }
.ga-connect-commission-box { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 12px; padding: 16px; text-align: center; }
.ga-connect-commission-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.ga-connect-commission-value { font-size: 36px; font-weight: 800; background: linear-gradient(135deg, var(--accent-light), var(--accent-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; margin-bottom: 4px; }
.ga-connect-commission-note { font-size: 12px; color: var(--text-muted); }
.ga-connect-error { text-align: center; padding: 40px; color: var(--text-muted); }
.ga-connect-error p { font-size: 14px; margin-top: 12px; }

/* Formation editor price toggle */
.ga-price-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
.ga-price-toggle-btn { flex: 1; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--text-muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; text-align: center; }
.ga-price-toggle-btn:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text-primary); }
.ga-price-toggle-btn.ga-active-free { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.3); color: #4ade80; font-weight: 600; }
.ga-price-toggle-btn.ga-active-paid { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent-light); font-weight: 600; }
.ga-price-field-wrap { position: relative; }
.ga-price-currency { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-muted); pointer-events: none; }
.ga-checkout-link { margin-top: 8px; padding: 8px 12px; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 8px; font-size: 12px; color: var(--accent-light); display: flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; }
.ga-checkout-link:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* ═══ END Stripe Connect ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   RESOURCES MANAGER
═══════════════════════════════════════════════════════════ */

.fce-resources-container { padding: 0; }
.rm-wrapper { padding: 24px 0; display: flex; flex-direction: column; gap: 16px; max-width: 820px; margin: 0 auto; }
.rm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rm-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.rm-info-bar { font-size: 13px; color: var(--text-muted); background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent); border-radius: 10px; padding: 10px 14px; line-height: 1.5; }
.rm-list { display: flex; flex-direction: column; gap: 8px; }
.rm-loading { color: var(--text-muted); font-size: 13px; text-align: center; padding: 40px 0; }
.rm-empty { text-align: center; padding: 48px 20px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.rm-group { display: flex; flex-direction: column; gap: 6px; }
.rm-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 4px 0 2px; display: flex; align-items: center; gap: 6px; }
.rm-count { background: rgba(255,255,255,0.08); border-radius: 10px; padding: 1px 6px; font-size: 10px; font-weight: 600; }
.rm-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-secondary, rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; transition: border-color 0.2s, background 0.2s; }
.rm-row:hover { background: rgba(255,255,255,0.05); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.rm-row-icon { font-size: 20px; flex-shrink: 0; }
.rm-row-info { flex: 1; min-width: 0; }
.rm-row-title { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-row-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-row-stats { display: flex; align-items: center; }
.rm-dl-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.rm-row-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s; }
.rm-row:hover .rm-row-actions { opacity: 1; }

/* Modal */
.rm-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rm-modal { background: var(--bg-primary, #1e1e2e); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; width: 100%; max-width: 560px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 80px rgba(0,0,0,0.6); }
.rm-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.rm-modal-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.rm-modal-close { background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.2s; }
.rm-modal-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.rm-modal-body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.rm-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
.rm-field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.rm-field-row { display: flex; gap: 12px; }
.rm-field--small { max-width: 110px; flex: 0 0 110px; }
.rm-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.rm-required { color: #ef4444; }
.rm-input { width: 100%; padding: 9px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: var(--text-primary); font-size: 13px; box-sizing: border-box; transition: border-color 0.2s; font-family: inherit; }
.rm-input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.rm-input option { background: #1e1e2e; }
.rm-textarea { resize: vertical; min-height: 60px; }
.rm-input-num { text-align: right; }
.rm-unlock-wrap { display: flex; align-items: center; gap: 6px; }
.rm-unit { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.rm-upload-zone { border: 2px dashed color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 10px; padding: 16px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
.rm-upload-zone:hover, .rm-upload-zone--over { border-color: var(--accent-light); background: color-mix(in srgb, var(--accent) 5%, transparent); color: var(--accent-light); }
.rm-upload-icon { font-size: 20px; }
.rm-toggle-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 0; }
.rm-toggle-wrap input[type="checkbox"] { display: none; }
.rm-toggle-slider { width: 36px; height: 20px; border-radius: 10px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); position: relative; transition: background 0.25s; flex-shrink: 0; }
.rm-toggle-slider::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: transform 0.25s; }
.rm-toggle-wrap input:checked ~ .rm-toggle-slider { background: color-mix(in srgb, var(--accent) 50%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.rm-toggle-wrap input:checked ~ .rm-toggle-slider::after { transform: translateX(16px); }
.rm-toggle-label { font-size: 13px; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   VIDEO INTELLIGENCE PANEL — .vi-panel (lesson-editor.js)
   Panel "Intelligence Vidéo" — glassmorphism violet, cohérent avec l'academy
   ══════════════════════════════════════════════════════════════════════════ */

/* Panel wrapper */
.vi-panel {
    margin-top: 12px;
    border-radius: 12px;
    overflow: hidden;
}

/* Header toggle */
.vi-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 12px;
    user-select: none;
    transition: background 0.2s, border-color 0.2s;
}

.vi-header:hover {
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Body (déplié) */
#vi-body {
    border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: rgba(255, 255, 255, 0.02);
    padding: 16px;
}

/* Badges de statut */
.vi-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.03em;
    transition: all 0.2s;
    white-space: nowrap;
}

.vi-badge-idle {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.vi-badge-processing {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
    animation: vi-pulse 1.5s ease-in-out infinite;
}

.vi-badge-done {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.vi-badge-error {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

@keyframes vi-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* Lignes de résultats */
.vi-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    font-size: 13px;
    color: rgba(255, 248, 240, 0.75);
    transition: background 0.15s;
}

.vi-result-row:hover {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.vi-result-val {
    margin-left: auto;
    font-weight: 600;
    color: var(--accent-light);
    font-size: 12px;
}

/* Section chapitres dans le panel VI */
.vi-chapters-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

.vi-chapter-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 7px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.vi-chapter-ts {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-light);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    padding: 2px 7px;
    border-radius: 4px;
    font-family: monospace;
}

.vi-chapter-title {
    font-weight: 600;
    color: rgba(255, 248, 240, 0.85);
    line-height: 1.4;
}

.vi-chapter-summary {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESOURCES AI — Panel Génération Intelligente
   Préfixe .ra-* exclusif à ce module
   ══════════════════════════════════════════════════════════════════════════════ */

/* Bouton IA dans toolbar ResourcesManager */
.rm-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-academy.btn-ai {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: #fff;
    border: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
    transition: all 0.2s;
}
.btn-academy.btn-ai:hover {
    background: linear-gradient(135deg, #7C3AED, #6D28D9);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 50%, transparent);
    transform: translateY(-1px);
}

.btn-academy.btn-ghost {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.12);
    transition: all 0.2s;
}
.btn-academy.btn-ghost:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
}

/* ── Overlay principal ──────────────────────────────────────────────────────── */

.ra-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ra-panel {
    background: #1A1330;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 16px;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 60px color-mix(in srgb, var(--accent) 8%, transparent);
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */

.ra-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 100%);
    flex-shrink: 0;
}

.ra-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ra-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}

.ra-header-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #F5F3FF;
}

.ra-header-sub {
    margin: 2px 0 0;
    font-size: 11px;
    color: rgba(167, 139, 250, 0.8);
}

.ra-close {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.ra-close:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

/* ── Onglets ─────────────────────────────────────────────────────────────────── */

.ra-tabs {
    display: flex;
    gap: 4px;
    padding: 14px 24px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.ra-tab {
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px 11px;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}
.ra-tab:hover {
    color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.04);
}
.ra-tab--active {
    color: #A78BFA;
    border-bottom-color: #8B5CF6;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* ── Corps / Panes ───────────────────────────────────────────────────────────── */

.ra-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.ra-tab-pane {
    display: none;
}
.ra-tab-pane--active {
    display: block;
}

/* ── Feature Card ───────────────────────────────────────────────────────────── */

.ra-feature-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 20px;
}

.ra-feature-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.ra-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.ra-feature-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: #F5F3FF;
}

.ra-feature-desc {
    margin: 0;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
}

/* ── Formulaire ─────────────────────────────────────────────────────────────── */

.ra-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ra-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ra-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.45);
}

.ra-required {
    color: #EF4444;
}

.ra-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    color: #F5F3FF;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
    font-family: inherit;
}
.ra-input:focus {
    outline: none;
    border-color: #8B5CF6;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.ra-input--error {
    border-color: #EF4444 !important;
    animation: ra-shake 0.3s ease;
}
@keyframes ra-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.ra-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.ra-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
}

/* ── Bouton Générer ─────────────────────────────────────────────────────────── */

.ra-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent);
    margin-top: 4px;
}
.ra-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 50%, transparent);
}
.ra-generate-btn:active {
    transform: translateY(0);
}

.ra-generate-btn--blue {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
    box-shadow: 0 4px 16px rgba(59,130,246,0.35);
}
.ra-generate-btn--blue:hover {
    box-shadow: 0 8px 24px rgba(59,130,246,0.5);
}

.ra-generate-btn--green {
    background: linear-gradient(135deg, #10B981, #059669);
    box-shadow: 0 4px 16px rgba(16,185,129,0.35);
}
.ra-generate-btn--green:hover {
    box-shadow: 0 8px 24px rgba(16,185,129,0.5);
}

.ra-btn-icon {
    font-size: 18px;
}

/* ── Info box (workbook) ──────────────────────────────────────────────────────── */

.ra-info-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
}

.ra-modules-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ra-module-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}

.ra-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8B5CF6;
    flex-shrink: 0;
}

.ra-module-chip--more {
    color: color-mix(in srgb, var(--accent) 90%, transparent);
    border-color: color-mix(in srgb, var(--accent) 20%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* ── Spinner de génération ───────────────────────────────────────────────────── */

.ra-generating {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 48px 24px;
    text-align: center;
}

.ra-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-top-color: #8B5CF6;
    border-radius: 50%;
    animation: ra-spin 0.9s linear infinite;
}

@keyframes ra-spin {
    to { transform: rotate(360deg); }
}

.ra-gen-label {
    font-size: 16px;
    font-weight: 700;
    color: #F5F3FF;
    margin: 0;
}

.ra-gen-hint {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    margin: 0;
}

/* ── Succès ─────────────────────────────────────────────────────────────────── */

.ra-success {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 48px 24px;
    text-align: center;
}

.ra-success-icon {
    font-size: 56px;
    animation: ra-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ra-pop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.ra-success-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #F5F3FF;
}

.ra-success-desc {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    max-width: 380px;
    line-height: 1.5;
}

.ra-success-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

.ra-btn-close-success {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.ra-btn-close-success:hover {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.8);
}

/* ── Badge transcription ─────────────────────────────────────────────────────── */

.ra-transcript-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    animation: ra-fade-in 0.3s ease;
}

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

.ra-transcript-badge--loading {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    color: rgba(167,139,250,0.8);
}

.ra-transcript-badge--ok {
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.25);
    color: #6EE7B7;
}

.ra-transcript-badge--none {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.2);
    color: rgba(253,230,138,0.8);
}

/* ── Responsive mobile 640px ────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .ra-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .ra-panel {
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
    }

    .ra-panel-header {
        padding: 16px 16px 12px;
    }

    .ra-header-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
        border-radius: 10px;
    }

    .ra-header-title {
        font-size: 15px;
    }

    .ra-tabs {
        padding: 10px 16px 0;
        gap: 2px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ra-tabs::-webkit-scrollbar { display: none; }

    .ra-tab {
        font-size: 12px;
        padding: 7px 12px 9px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .ra-body {
        padding: 14px 16px;
    }

    .ra-feature-header {
        gap: 10px;
        margin-bottom: 14px;
    }

    .ra-feature-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .ra-feature-title {
        font-size: 14px;
    }

    .ra-feature-card {
        padding: 14px;
    }

    .ra-generate-btn {
        padding: 11px 16px;
        font-size: 13px;
    }

    .ra-success-icon { font-size: 44px; }
    .ra-success-title { font-size: 18px; }
    .ra-success-desc { font-size: 13px; }

    .ra-success-actions {
        flex-direction: column;
        width: 100%;
    }

    .ra-btn-close-success {
        width: 100%;
        text-align: center;
    }
}

/* ── Responsive mobile toolbar ResourcesManager ─────────────────────────────── */

@media (max-width: 600px) {
    .rm-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .rm-toolbar-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .rm-toolbar-actions .btn-academy {
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* ════════════════════════════════════════════════════════
   FORMATION CARDS v2.0 — Design Premium
   Overlay hover + footer propre (3 actions max)
   ════════════════════════════════════════════════════════ */

/* Override: hide old button soup */
.fcard .formation-card-actions { display: none !important; }
.fcard .formation-card-price   { display: none !important; }

/* ── THUMBNAIL ───────────────────────────────────────── */
.fcard-thumb {
    height: 170px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(109,40,217,0.28), color-mix(in srgb, var(--accent) 14%, transparent));
}
.fcard-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 35%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 60%),
        radial-gradient(circle at 80% 75%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 50%);
}

/* Price tag — bottom left of thumbnail */
.fcard-price-tag {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent));
    padding: 3px 10px;
    border-radius: 20px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);
    z-index: 2;
    letter-spacing: 0.3px;
}

/* ── OVERLAY (visible on card hover) ────────────────── */
.fcard-overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 7, 20, 0.82);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 3;
}
.fcard:hover .fcard-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Icon action buttons in overlay */
.fca-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: all 0.15s;
    min-width: 64px;
}
.fca-icon:hover {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.fca-icon svg { flex-shrink: 0; }

/* ── CARD BODY ───────────────────────────────────────── */
.fcard-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.fcard-body .formation-card-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 5px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fcard-body .formation-card-desc {
    font-size: 12.5px;
    margin: 0 0 12px;
    -webkit-line-clamp: 2;
}

/* ── META ROW ────────────────────────────────────────── */
.fcard-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.fcard-meta .formation-meta-item {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
}
.fcard-meta .formation-meta-value {
    font-weight: 700;
    color: var(--text);
}
.fcard-free-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #34d399;
    background: rgba(52,211,153,0.12);
    border: 1px solid rgba(52,211,153,0.25);
    padding: 2px 8px;
    border-radius: 20px;
}

/* ── FOOTER (3 actions max) ──────────────────────────── */
.fcard-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--border, rgba(255,255,255,0.07));
    padding-top: 14px;
}

/* Primary: Éditer */
.fca-btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-light);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s;
    letter-spacing: 0.2px;
}
.fca-btn-edit:hover {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 25%, transparent);
}

.fcard-footer-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Studio IA */
.fca-btn-studio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--accent), var(--accent));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.fca-btn-studio:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Publish toggle — icon-only */
.fca-btn-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1px solid;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s;
    flex-shrink: 0;
}
.fca-btn-toggle--off {
    background: rgba(52,211,153,0.1);
    border-color: rgba(52,211,153,0.3);
    color: #34d399;
}
.fca-btn-toggle--off:hover {
    background: rgba(52,211,153,0.2);
    border-color: rgba(52,211,153,0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52,211,153,0.25);
}
.fca-btn-toggle--on {
    background: rgba(245,158,11,0.1);
    border-color: rgba(245,158,11,0.3);
    color: #f59e0b;
}
.fca-btn-toggle--on:hover {
    background: rgba(245,158,11,0.2);
    border-color: rgba(245,158,11,0.5);
    transform: translateY(-1px);
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 520px) {
    .fca-icon { min-width: 54px; padding: 8px; font-size: 9px; }
    .fca-btn-studio span { display: none; }
}


/* ===== css/certificate-editor-v2.css?v=2602240010 ===== */
/* =====================================================
   CERTIFICATE EDITOR V2 — Premium Split UI
   Préfixe : .cev2-*
   ===================================================== */

/* ── Layout split ─────────────────────────────────── */
.cev2-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #0a0a0f;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  font-size: 13px;
  color: #e2e8f0;
}

/* ── Left panel ───────────────────────────────────── */
.cev2-panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.07);
  background: #0d0d14;
  overflow: hidden;
}

.cev2-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  background: rgba(255,255,255,0.02);
  gap: 10px;
  flex-wrap: wrap;
}

.cev2-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.cev2-panel-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cev2-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}

.cev2-scroll::-webkit-scrollbar { width: 4px; }
.cev2-scroll::-webkit-scrollbar-track { background: transparent; }
.cev2-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ── Sections ─────────────────────────────────────── */
.cev2-section {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.cev2-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: rgba(212,175,55,0.7);
  margin-bottom: 12px;
}

/* ── Templates grid ───────────────────────────────── */
.cev2-templates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cev2-template-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.cev2-template-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(212,175,55,0.3);
  transform: translateY(-1px);
}

.cev2-template-card.active {
  background: rgba(212,175,55,0.1);
  border-color: rgba(212,175,55,0.5);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.2);
}

.cev2-tpl-icon { font-size: 22px; margin-bottom: 5px; }
.cev2-tpl-name { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.cev2-tpl-desc { font-size: 10px; color: rgba(255,255,255,0.35); line-height: 1.4; }

/* ── Fields ───────────────────────────────────────── */
.cev2-field {
  margin-bottom: 12px;
}

.cev2-field:last-child { margin-bottom: 0; }

.cev2-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: default;
}

.cev2-input,
.cev2-select {
  width: 100%;
  padding: 8px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
  appearance: none;
}

.cev2-input::placeholder { color: rgba(255,255,255,0.22); }

.cev2-input:focus,
.cev2-select:focus {
  border-color: rgba(212,175,55,0.45);
  background: rgba(255,255,255,0.09);
}

.cev2-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.cev2-select option {
  background: #1a1a2e;
  color: #e2e8f0;
}

.cev2-num {
  width: 100%;
  -moz-appearance: textfield;
}

.cev2-num::-webkit-outer-spin-button,
.cev2-num::-webkit-inner-spin-button { -webkit-appearance: none; }

.cev2-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cev2-row .cev2-input { flex: 1; }

/* ── Color inputs ─────────────────────────────────── */
.cev2-color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cev2-color-field {}

.cev2-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cev2-color-pick {
  width: 38px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  cursor: pointer;
  padding: 2px;
  background: rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.cev2-color-hex {
  flex: 1;
  padding: 7px 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-family: 'Courier New', monospace;
  outline: none;
  transition: border-color 0.15s;
}

.cev2-color-hex:focus { border-color: rgba(212,175,55,0.45); }

/* ── Typography sizes ─────────────────────────────── */
.cev2-sizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cev2-size-field {}

/* ── Toggles ──────────────────────────────────────── */
.cev2-toggles { display: flex; flex-direction: column; gap: 10px; }

.cev2-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.cev2-toggle-row:last-child { border-bottom: none; }

.cev2-toggle-label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  flex: 1;
}

.cev2-toggle-wrap { position: relative; flex-shrink: 0; }

.cev2-toggle-cb {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cev2-toggle-sw {
  display: block;
  width: 36px;
  height: 20px;
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  transition: background 0.2s;
  position: relative;
  cursor: pointer;
}

.cev2-toggle-sw::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.cev2-toggle-cb:checked + .cev2-toggle-sw {
  background: linear-gradient(135deg, #d4af37, #f4d03f);
}

.cev2-toggle-cb:checked + .cev2-toggle-sw::after {
  transform: translateX(16px);
  background: #000;
}

/* ── Variables chips ──────────────────────────────── */
.cev2-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.cev2-var-chip {
  display: inline-block;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 12px;
  font-size: 11px;
  color: var(--accent-light);
  cursor: pointer;
  font-family: 'Courier New', monospace;
  transition: all 0.12s;
}

.cev2-var-chip:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent-light);
}

/* ── Buttons ──────────────────────────────────────── */
.cev2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1;
}

.cev2-btn-primary {
  padding: 8px 16px;
  background: linear-gradient(135deg, #d4af37, #f4d03f);
  color: #000;
  box-shadow: 0 3px 12px rgba(212,175,55,0.25);
}

.cev2-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(212,175,55,0.38);
}

.cev2-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.cev2-btn-ghost {
  padding: 8px 12px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.1);
}

.cev2-btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
}

.cev2-btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  flex-shrink: 0;
}

.cev2-btn-icon:hover {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
}

.cev2-btn-export {
  padding: 7px 14px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent-light);
  border-radius: 8px;
}

.cev2-btn-export:hover {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent-light);
}

/* ── Right preview column ─────────────────────────── */
.cev2-preview-col {
  display: flex;
  flex-direction: column;
  background: #111118;
  overflow: hidden;
}

.cev2-preview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.02);
}

.cev2-preview-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
}

.cev2-preview-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  flex: 1;
  min-width: 0;
}

.cev2-export-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Canvas wrapper ───────────────────────────────── */
.cev2-canvas-wrap {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Damier pattern */
  background-image:
    linear-gradient(45deg, #1a1a24 25%, transparent 25%),
    linear-gradient(-45deg, #1a1a24 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a1a24 75%),
    linear-gradient(-45deg, transparent 75%, #1a1a24 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: #14141e;
}

#cev2-canvas {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 8px 40px rgba(0,0,0,0.6),
    0 24px 80px rgba(0,0,0,0.4);
  display: block;
  cursor: crosshair;
}

.cev2-canvas-status {
  padding: 6px 20px;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.2);
  flex-shrink: 0;
  font-family: 'Courier New', monospace;
}

/* ── Upload btn in row ────────────────────────────── */
.cev2-upload-btn { border-radius: 8px; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1100px) {
  .cev2-layout {
    grid-template-columns: 320px 1fr;
  }
}

@media (max-width: 860px) {
  .cev2-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    overflow-y: auto;
  }

  .cev2-panel {
    max-height: 60vh;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  .cev2-canvas-wrap {
    padding: 16px;
    min-height: 300px;
  }

  .cev2-templates-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Print ────────────────────────────────────────── */
@media print {
  .cev2-panel,
  .cev2-preview-header,
  .cev2-canvas-status { display: none !important; }

  .cev2-layout {
    display: block;
  }

  .cev2-canvas-wrap {
    background: none;
    padding: 0;
  }

  #cev2-canvas {
    width: 100% !important;
    height: auto !important;
    box-shadow: none;
  }
}


/* ===== css/mentoring-duo.css?v=2602240010 ===== */
/**
 * Mentoring Duo — CSS Premium
 * Design system pair-à-pair
 * v=100
 */

/* ─── ROOT ─────────────────────────────────────────────────────────────────── */
.sm-root {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 0 40px;
    font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    color: var(--text-primary, #e2e8f0);
}

/* ─── HEADER ───────────────────────────────────────────────────────────────── */
.sm-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 24px 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent) 0%, rgba(59,130,246,0.08) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.sm-header-icon {
    font-size: 2.4rem;
    line-height: 1;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 60%, transparent));
}

.sm-header-text h2 {
    margin: 0 0 4px;
    font-size: 1.4rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-light), #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sm-header-text p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.6;
}

/* ─── TABS ─────────────────────────────────────────────────────────────────── */
.sm-tabs {
    display: flex;
    gap: 2px;
    padding: 12px 20px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow-x: auto;
    scrollbar-width: none;
}
.sm-tabs::-webkit-scrollbar { display: none; }

.sm-tab {
    position: relative;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255,255,255,0.5);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.sm-tab:hover {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.05);
}

.sm-tab.active {
    color: var(--accent-light);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.sm-tab-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    background: var(--accent-light);
    border-radius: 50%;
    animation: sm-pulse 2s infinite;
}

@keyframes sm-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(1.3); }
}

/* ─── BODY ─────────────────────────────────────────────────────────────────── */
.sm-body {
    padding: 24px;
    min-height: 300px;
}

.sm-loading {
    text-align: center;
    padding: 60px 20px;
    opacity: 0.5;
    font-size: 1.1rem;
}

.sm-error {
    text-align: center;
    padding: 40px;
    color: #f87171;
}

.sm-empty, .sm-empty-state {
    text-align: center;
    padding: 48px 20px;
    opacity: 0.6;
}

.sm-empty-state .sm-empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.sm-empty-state h3 { margin: 0 0 8px; font-size: 1.1rem; }
.sm-empty-state p  { margin: 0 0 20px; font-size: 0.85rem; }

/* ─── STATUS CARDS ─────────────────────────────────────────────────────────── */
.sm-status-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.sm-status-card.accepted  { background: rgba(16,185,129,0.1);  border-color: rgba(16,185,129,0.3);  }
.sm-status-card.pending   { background: rgba(245,158,11,0.1);  border-color: rgba(245,158,11,0.3);  }
.sm-status-card.approved  { background: color-mix(in srgb, var(--accent) 10%, transparent);  border-color: color-mix(in srgb, var(--accent) 30%, transparent);  }
.sm-status-card.rejected  { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.2);   }

.sm-status-icon { font-size: 1.8rem; flex-shrink: 0; }
.sm-status-info { flex: 1; }
.sm-status-info strong { display: block; font-size: 0.95rem; margin-bottom: 4px; }
.sm-status-info span   { font-size: 0.82rem; opacity: 0.7; }

/* ─── HERO STATS ───────────────────────────────────────────────────────────── */
.sm-hero { margin-bottom: 24px; }

.sm-hero-stats {
    display: flex;
    gap: 16px;
}

.sm-stat {
    flex: 1;
    text-align: center;
    padding: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
}

.sm-stat-value { font-size: 2rem; font-weight: 800; color: var(--accent-light); }
.sm-stat-label { font-size: 0.75rem; opacity: 0.5; margin-top: 4px; }

/* ─── CTA GRID ─────────────────────────────────────────────────────────────── */
.sm-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.sm-cta-card {
    position: relative;
    padding: 24px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s;
    overflow: hidden;
}

.sm-cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
    opacity: 0;
    transition: opacity 0.25s;
}

.sm-cta-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-2px); }
.sm-cta-card:hover::before { opacity: 1; }

.sm-cta-icon { font-size: 2rem; margin-bottom: 12px; }
.sm-cta-card h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 600; }
.sm-cta-card p  { margin: 0; font-size: 0.8rem; opacity: 0.6; line-height: 1.5; }

.sm-cta-arrow {
    position: absolute;
    bottom: 16px;
    right: 16px;
    font-size: 1.2rem;
    opacity: 0.3;
    transition: all 0.25s;
}
.sm-cta-card:hover .sm-cta-arrow { opacity: 0.8; transform: translateX(4px); }

/* ─── SECTIONS ─────────────────────────────────────────────────────────────── */
.sm-section { margin-top: 28px; }
.sm-section h3 { margin: 0 0 16px; font-size: 0.95rem; font-weight: 600; opacity: 0.9; }

/* ─── REQUEST / MENTEE CARDS ───────────────────────────────────────────────── */
.sm-request-card, .sm-mentee-card, .sm-request-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: 10px;
    margin-bottom: 10px;
    transition: all 0.2s;
}

.sm-mentee-card { cursor: pointer; }
.sm-mentee-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); }

.sm-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
    flex-shrink: 0;
}

.sm-request-info, .sm-mentee-info, .sm-request-details {
    flex: 1;
    min-width: 0;
}

.sm-request-info strong, .sm-mentee-info strong, .sm-request-details strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
}

.sm-request-info span, .sm-request-details p, .sm-mentee-meta {
    font-size: 0.78rem;
    opacity: 0.6;
    margin: 2px 0 0;
}

.sm-mentee-meta { display: flex; gap: 12px; flex-wrap: wrap; }
.sm-unread { color: var(--accent-light); font-weight: 600; }
.sm-request-msg { margin: 4px 0 2px !important; }
.sm-request-date { font-size: 0.75rem !important; }

.sm-request-actions, .sm-mentee-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ─── STATUS BADGE ─────────────────────────────────────────────────────────── */
.sm-badge {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

.sm-badge.pending   { background: rgba(245,158,11,0.15); color: #f59e0b; }
.sm-badge.accepted  { background: rgba(16,185,129,0.15); color: #10b981; }
.sm-badge.completed { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-light); }
.sm-badge.declined  { background: rgba(239,68,68,0.1);   color: #f87171; }

/* ─── BUTTONS ──────────────────────────────────────────────────────────────── */
.sm-btn-primary {
    padding: 9px 18px;
    background: linear-gradient(135deg, var(--accent), var(--accent));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.sm-btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.sm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.sm-btn-secondary {
    padding: 8px 16px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
}
.sm-btn-secondary:hover { background: rgba(255,255,255,0.12); }

.sm-btn-success {
    padding: 7px 14px;
    background: rgba(16,185,129,0.15);
    color: #10b981;
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: 7px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.sm-btn-success:hover { background: rgba(16,185,129,0.25); }

.sm-btn-danger {
    padding: 7px 14px;
    background: rgba(239,68,68,0.1);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 7px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.sm-btn-danger:hover { background: rgba(239,68,68,0.2); }

.sm-btn-ghost {
    padding: 7px 14px;
    background: transparent;
    color: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.sm-btn-ghost:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); }

.sm-btn-sm { padding: 6px 12px !important; font-size: 0.78rem !important; }
.sm-btn-large { padding: 13px 28px !important; font-size: 0.95rem !important; }

/* ─── MENTOR DASHBOARD ─────────────────────────────────────────────────────── */
.sm-mentor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 12px;
}

.sm-mentor-badge {
    padding: 6px 16px;
    border: 2px solid;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.sm-mentor-trust { display: flex; align-items: center; gap: 10px; }
.sm-trust-label { font-size: 0.75rem; opacity: 0.5; white-space: nowrap; }
.sm-trust-bar {
    width: 100px;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}
.sm-trust-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 3px;
    transition: width 0.6s ease;
}
.sm-trust-value { font-size: 0.8rem; font-weight: 600; color: #10b981; }

.sm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.sm-kpi {
    text-align: center;
    padding: 18px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
}

.sm-kpi-value { font-size: 1.6rem; font-weight: 800; color: var(--accent-light); line-height: 1; }
.sm-kpi-label { font-size: 0.7rem; opacity: 0.5; margin-top: 6px; }

/* ─── TESTIMONIALS ─────────────────────────────────────────────────────────── */
.sm-testimonials { display: flex; flex-direction: column; gap: 12px; }

.sm-testimonial {
    padding: 16px 20px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 10px;
    border-left: 3px solid var(--accent);
}

.sm-testimonial-stars { font-size: 0.9rem; margin-bottom: 8px; }
.sm-testimonial p { margin: 0 0 8px; font-size: 0.85rem; opacity: 0.85; font-style: italic; }
.sm-testimonial span { font-size: 0.75rem; opacity: 0.5; }

/* ─── MATCHING ─────────────────────────────────────────────────────────────── */
.sm-match-header { margin-bottom: 20px; }
.sm-match-header h3 { margin: 0 0 6px; font-size: 1.1rem; }
.sm-match-header p  { margin: 0; font-size: 0.82rem; opacity: 0.55; }

.sm-match-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.sm-match-card {
    position: relative;
    padding: 24px 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    text-align: center;
    transition: all 0.25s;
}

.sm-match-card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 15%, transparent);
}

.sm-match-rank {
    position: absolute;
    top: 12px;
    left: 14px;
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.4;
}

.sm-match-score-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 3px 9px;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-light);
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
}

.sm-match-avatar-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
}

.sm-match-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

.sm-match-level {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    border: 2px solid rgba(0,0,0,0.3);
}

.sm-match-name { margin: 0 0 6px; font-size: 0.95rem; font-weight: 700; }
.sm-match-rating { font-size: 0.78rem; opacity: 0.65; margin-bottom: 12px; }

.sm-match-reasons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-bottom: 12px;
}

.sm-reason-tag {
    padding: 3px 9px;
    background: rgba(16,185,129,0.12);
    color: #34d399;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

.sm-match-bio {
    font-size: 0.78rem;
    opacity: 0.55;
    font-style: italic;
    margin: 0 0 12px;
    line-height: 1.5;
}

.sm-match-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-bottom: 16px;
}

.sm-tag {
    padding: 3px 9px;
    background: rgba(255,255,255,0.07);
    border-radius: 12px;
    font-size: 0.7rem;
    opacity: 0.8;
}

.sm-tag.removable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sm-tag.removable button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.85rem;
    opacity: 0.6;
}

.sm-match-cta { width: 100%; margin-top: auto; }

/* ─── APPLY FORM ───────────────────────────────────────────────────────────── */
.sm-apply-form {
    max-width: 600px;
    margin: 0 auto;
}

.sm-apply-header {
    text-align: center;
    margin-bottom: 28px;
}

.sm-apply-icon { font-size: 2.5rem; margin-bottom: 10px; }
.sm-apply-header h3 { margin: 0 0 8px; font-size: 1.2rem; }
.sm-apply-header p  { margin: 0; font-size: 0.85rem; opacity: 0.6; }

.sm-field { margin-bottom: 20px; }

.sm-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 8px;
    opacity: 0.8;
}

.sm-required { color: #f87171; }

.sm-field input[type="text"],
.sm-field input[type="date"],
.sm-field textarea {
    width: 100%;
    padding: 11px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: var(--text-primary, #e2e8f0);
    font-size: 0.88rem;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.sm-field input:focus,
.sm-field textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: rgba(255,255,255,0.07);
}

.sm-char-count {
    display: block;
    text-align: right;
    font-size: 0.72rem;
    opacity: 0.4;
    margin-top: 4px;
}

.sm-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sm-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 7px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    transition: all 0.2s;
}

.sm-checkbox:has(input:checked) {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent-light);
}

.sm-checkbox input { display: none; }

.sm-tags-input {
    padding: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    min-height: 46px;
    transition: border-color 0.2s;
}

.sm-tags-input:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

.sm-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.sm-tags-input input {
    background: none;
    border: none;
    color: inherit;
    font-size: 0.85rem;
    width: 180px;
    outline: none;
    padding: 2px 4px;
}

.sm-apply-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.sm-apply-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    opacity: 0.5;
}

/* ─── ALERTS ───────────────────────────────────────────────────────────────── */
.sm-alert {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.82rem;
    margin-bottom: 20px;
    line-height: 1.5;
}
.sm-alert.info    { background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.25); }
.sm-alert.warning { background: rgba(245,158,11,0.1);  border: 1px solid rgba(245,158,11,0.25); }

/* ─── DUO SPACE ────────────────────────────────────────────────────────────── */
.sm-duo-root { display: flex; flex-direction: column; gap: 0; }

.sm-duo-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.sm-duo-tab {
    padding: 7px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: rgba(255,255,255,0.5);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
}

.sm-duo-tab:hover { color: rgba(255,255,255,0.8); }

.sm-duo-tab.active {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent-light);
    font-weight: 600;
}

.sm-duo-body { min-height: 400px; }

/* ─── CHAT ─────────────────────────────────────────────────────────────────── */
.sm-chat-container {
    display: flex;
    flex-direction: column;
    height: 520px;
}

.sm-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px 12px 0 0;
    scroll-behavior: smooth;
}

.sm-messages::-webkit-scrollbar { width: 4px; }
.sm-messages::-webkit-scrollbar-track { background: transparent; }
.sm-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.sm-chat-empty {
    text-align: center;
    padding: 40px;
    opacity: 0.4;
    font-size: 0.9rem;
}

.sm-msg {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    animation: sm-msgIn 0.2s ease;
}

@keyframes sm-msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sm-msg.me { flex-direction: row-reverse; }

.sm-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    align-self: flex-end;
}

.sm-msg-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 12px;
}

.sm-msg.other .sm-msg-bubble {
    background: rgba(255,255,255,0.06);
    border-radius: 4px 12px 12px 12px;
}

.sm-msg.me .sm-msg-bubble {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 12px 4px 12px 12px;
}

.sm-msg-sender {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.6;
    margin-bottom: 4px;
}

.sm-msg-content {
    font-size: 0.88rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.sm-msg-time {
    display: block;
    font-size: 0.68rem;
    opacity: 0.35;
    margin-top: 5px;
    text-align: right;
}

.sm-msg.other .sm-msg-time { text-align: left; }

.sm-chat-input-area {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: none;
    border-radius: 0 0 12px 12px;
}

.sm-chat-input-area textarea {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: inherit;
    font-size: 0.88rem;
    font-family: inherit;
    resize: none;
    transition: border-color 0.2s;
}

.sm-chat-input-area textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.sm-send-btn {
    padding: 0 20px;
    background: linear-gradient(135deg, var(--accent), var(--accent));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
    align-self: flex-end;
    height: 44px;
}

.sm-send-btn:hover { opacity: 0.85; transform: scale(1.05); }

/* ─── OBJECTIVES ───────────────────────────────────────────────────────────── */
.sm-objectives { display: flex; flex-direction: column; gap: 0; }

.sm-obj-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.sm-obj-header h4 { margin: 0; font-size: 1rem; }

.sm-obj-section { margin-bottom: 24px; }
.sm-obj-section h5 { margin: 0 0 12px; font-size: 0.82rem; opacity: 0.5; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

.sm-obj-card {
    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: 10px;
    margin-bottom: 10px;
}

.sm-obj-card.active { border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.sm-obj-card.completed { opacity: 0.6; }

.sm-obj-info { flex: 1; }
.sm-obj-info strong { font-size: 0.88rem; }
.sm-obj-info p { margin: 4px 0 0; font-size: 0.78rem; opacity: 0.6; }
.sm-obj-meta { display: flex; gap: 12px; font-size: 0.72rem; opacity: 0.5; margin-top: 4px; }

.sm-obj-actions { display: flex; gap: 8px; }
.sm-obj-check { font-size: 1.2rem; flex-shrink: 0; }
.sm-obj-date { font-size: 0.72rem; opacity: 0.5; }

/* ─── CHECK-INS ────────────────────────────────────────────────────────────── */
.sm-checkins { display: flex; flex-direction: column; gap: 0; }

.sm-checkin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.sm-checkin-header h4 { margin: 0; }

.sm-checkin-card {
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    margin-bottom: 14px;
}

.sm-checkin-week {
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.sm-checkin-mood { font-size: 0.85rem; margin-bottom: 10px; }

.sm-checkin-section {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}

.sm-checkin-section strong { display: block; font-size: 0.78rem; margin-bottom: 5px; opacity: 0.6; }
.sm-checkin-section p { margin: 0; font-size: 0.85rem; line-height: 1.5; }
.sm-checkin-section.blockers { border-left: 2px solid #f59e0b; }
.sm-checkin-section.advice   { border-left: 2px solid #10b981; }

.sm-checkin-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}
.sm-checkin-date { font-size: 0.72rem; opacity: 0.4; }

.sm-mood-picker {
    display: flex;
    gap: 8px;
}

.sm-mood-btn {
    padding: 8px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    color: inherit;
}

.sm-mood-btn:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.sm-mood-btn.selected { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

/* ─── MODAL ────────────────────────────────────────────────────────────────── */
.sm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: sm-fadeIn 0.2s ease;
}

@keyframes sm-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sm-modal {
    width: 100%;
    max-width: 500px;
    background: #1a1430;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 16px;
    overflow: hidden;
    animation: sm-slideUp 0.25s ease;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

@keyframes sm-slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.sm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sm-modal-header h3 { margin: 0; font-size: 1rem; }
.sm-modal-header button {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
}
.sm-modal-header button:hover { color: white; }

.sm-modal-body { padding: 20px; }
.sm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ─── PROFILE ──────────────────────────────────────────────────────────────── */
.sm-profile-form { max-width: 500px; }
.sm-profile-form h3 { margin: 0 0 24px; }

.sm-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
}

.sm-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.sm-toggle input { opacity: 0; width: 0; height: 0; }

.sm-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 24px;
    cursor: pointer;
    transition: 0.3s;
}

.sm-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.sm-toggle input:checked + .sm-toggle-slider { background: var(--accent); }
.sm-toggle input:checked + .sm-toggle-slider::before { transform: translateX(20px); }

.sm-mentor-level-badge {
    padding: 16px 20px;
    border-radius: 12px;
    margin: 20px 0;
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

.sm-level-desc {
    font-size: 0.78rem;
    font-weight: 400;
    margin-top: 6px;
    opacity: 0.8;
}

.sm-discount-card {
    padding: 14px 18px;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 10px;
    font-size: 0.85rem;
}

/* ─── SUCCESS STATE ────────────────────────────────────────────────────────── */
.sm-success-state {
    text-align: center;
    padding: 60px 20px;
}

.sm-success-icon { font-size: 4rem; margin-bottom: 16px; }
.sm-success-state h3 { margin: 0 0 12px; font-size: 1.2rem; }
.sm-success-state p  { margin: 0 0 24px; opacity: 0.6; }

/* ─── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .sm-match-grid { grid-template-columns: 1fr; }
    .sm-kpi-grid   { grid-template-columns: repeat(2, 1fr); }
    .sm-cta-grid   { grid-template-columns: 1fr; }

    .sm-apply-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .sm-mentor-header { flex-direction: column; gap: 12px; align-items: flex-start; }
    .sm-hero-stats { flex-direction: column; }
}


/* ===== css/smart-video.css?v=2602240010 ===== */
/**
 * Smart Video Player — Mahayawen Intelligence
 * Design premium : player augmenté + quiz + transcription
 */

/* ── Wrapper principal ────────────────────────────────────────────────────── */

.svp-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

/* ── Zone player ──────────────────────────────────────────────────────────── */

.svp-player-area {
    border-radius: 16px;
    overflow: hidden;
    background: #0a0612;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.5),
        0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

.svp-iframe-wrap {
    position: relative;
    padding-top: 56.25%; /* 16:9 */
    background: #000;
}

.svp-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.svp-no-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 240px;
    gap: 12px;
    color: rgba(255,255,255,0.4);
}

.svp-no-video-icon {
    font-size: 48px;
}

/* ── Barre langues ────────────────────────────────────────────────────────── */

.svp-lang-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    flex-wrap: wrap;
}

.svp-lang-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 4px;
}

.svp-lang-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.svp-lang-btn:hover {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    color: #fff;
}

.svp-lang-btn.svp-lang-active {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
    color: var(--accent-light);
    font-weight: 600;
}

.svp-lang-off {
    color: rgba(255,255,255,0.35);
    font-size: 11px;
}

/* ── En-têtes de section ──────────────────────────────────────────────────── */

.svp-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.svp-section-icon {
    font-size: 20px;
}

.svp-section-title {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,248,240,0.92);
    margin: 0;
    flex: 1;
}

/* ── Quiz ─────────────────────────────────────────────────────────────────── */

.svp-quiz-section {
    background: rgba(255,255,255,0.03);
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 16px;
    padding: 24px;
}

.svp-quiz-score {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-light);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    padding: 3px 10px;
    border-radius: 20px;
}

.svp-quiz-questions {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.svp-question {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 18px;
    transition: border-color 0.2s;
}

.svp-question:hover {
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

.svp-question-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.svp-q-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-light);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.svp-q-text {
    font-size: 14px;
    color: rgba(255,248,240,0.88);
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
}

.svp-q-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 600px) {
    .svp-q-options { grid-template-columns: 1fr; }
}

.svp-opt-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.svp-opt-btn:not(:disabled):hover {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: #fff;
}

.svp-opt-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.svp-opt-correct {
    background: rgba(16,185,129,0.15) !important;
    border-color: rgba(16,185,129,0.5) !important;
    color: #6ee7b7 !important;
}

.svp-opt-correct .svp-opt-letter {
    background: rgba(16,185,129,0.3);
}

.svp-opt-wrong {
    background: rgba(239,68,68,0.12) !important;
    border-color: rgba(239,68,68,0.4) !important;
    color: #fca5a5 !important;
}

.svp-opt-wrong .svp-opt-letter {
    background: rgba(239,68,68,0.25);
}

.svp-q-footer {
    margin-top: 10px;
}

.svp-rewatch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent-light);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.svp-rewatch-btn:hover {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Résultat quiz */

.svp-quiz-result {
    margin-top: 24px;
    padding: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), rgba(59,130,246,0.08));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    text-align: center;
    animation: svpResultIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes svpResultIn {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.svp-result-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.svp-result-text {
    font-size: 15px;
    color: rgba(255,248,240,0.9);
    font-weight: 500;
    margin: 0 0 16px;
}

.svp-retry-btn {
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent-light);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.svp-retry-btn:hover {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── Transcription ────────────────────────────────────────────────────────── */

.svp-transcript-section {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    overflow: hidden;
}

.svp-transcript-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,248,240,0.85);
    transition: background 0.15s;
}

.svp-transcript-toggle::-webkit-details-marker { display: none; }

.svp-transcript-toggle:hover {
    background: rgba(255,255,255,0.03);
}

.svp-transcript-count {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    font-weight: 400;
    flex: 1;
}

.svp-chevron {
    font-size: 16px;
    color: rgba(255,255,255,0.35);
    transition: transform 0.2s;
}

.svp-transcript-section[open] .svp-chevron {
    transform: rotate(90deg);
}

.svp-transcript-content {
    max-height: 360px;
    overflow-y: auto;
    padding: 8px 20px 16px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 30%, transparent) transparent;
}

.svp-seg {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    margin: 0;
}

.svp-seg:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.svp-seg.svp-seg-active {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.svp-seg-time {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-light);
    font-family: 'SF Mono', 'Fira Code', monospace;
    flex-shrink: 0;
    min-width: 38px;
}

.svp-seg-text {
    font-size: 13px;
    color: rgba(255,255,255,0.72);
    line-height: 1.55;
}

/* ── Chapitres intelligents ─────────────────────────────────────────────── */

.svp-chapters-section {
    background: rgba(255,255,255,0.02);
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 14px;
    padding: 18px;
}

.svp-chapters-count {
    margin-left: auto;
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    font-weight: 500;
}

/* Barre timeline */
.svp-chapters-timeline {
    position: relative;
    height: 36px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    margin: 14px 0 12px;
    overflow: visible;
    cursor: pointer;
}

.svp-ch-progress-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), rgba(167,139,250,0.3));
    border-radius: 6px;
    transition: width 0.5s ease;
    pointer-events: none;
}

/* Marqueurs timeline */
.svp-ch-marker {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.15s;
}

.svp-ch-marker:hover { transform: translateX(-50%) scale(1.15); }

.svp-ch-marker-dot {
    width: 10px;
    height: 36px;
    background: rgba(167,139,250,0.6);
    border-radius: 0;
    transition: background 0.2s;
}

.svp-ch-marker-active .svp-ch-marker-dot {
    background: var(--accent-light);
    box-shadow: 0 0 8px rgba(167,139,250,0.6);
}

.svp-ch-marker-label {
    position: absolute;
    top: -22px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(15,10,30,0.85);
    padding: 2px 5px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}

.svp-ch-marker:hover .svp-ch-marker-label { opacity: 1; }

/* Liste des chapitres */
.svp-chapters-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 30%, transparent) transparent;
}

.svp-chapter-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 9px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    font-family: inherit;
}

.svp-chapter-item:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    transform: translateX(2px);
}

.svp-chapter-item.svp-ch-active {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-color: rgba(167,139,250,0.4);
}

.svp-chapter-item.svp-ch-active .svp-chapter-num {
    background: var(--accent);
    color: #fff;
}

.svp-chapter-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent-light);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    transition: background 0.2s, color 0.2s;
}

.svp-chapter-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.svp-chapter-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,248,240,0.88);
    line-height: 1.4;
}

.svp-chapter-summary {
    font-size: 11px;
    color: rgba(255,255,255,0.38);
    line-height: 1.4;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.svp-chapter-ts {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-light);
    font-family: 'SF Mono', 'Fira Code', monospace;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    padding: 2px 7px;
    border-radius: 5px;
    align-self: center;
}

/* Karaoké — segment actif dans transcription */
.svp-seg.svp-seg-active .svp-seg-text {
    color: #fff;
    font-weight: 600;
}

.svp-seg.svp-seg-active .svp-seg-time {
    color: var(--accent-light);
}


/* ===== css/booking.css?v=2602240010 ===== */
/**
 * booking.css — Module Booking formateur
 * Préfixe : .bk-*
 * v=100
 */

/* ─── Layout principal ───────────────────────────────────────────────────── */
.bk-wrapper {
    padding: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.bk-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.bk-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0 0 4px;
}

.bk-subtitle {
    color: var(--text-secondary, #a0a0b0);
    margin: 0;
    font-size: 0.9rem;
}

/* ─── Onglets ─────────────────────────────────────────────────────────────── */
.bk-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-color, rgba(255,255,255,0.1));
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.bk-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #a0a0b0);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.bk-tab:hover { color: var(--text-primary, #fff); }

.bk-tab.active {
    color: var(--accent, #8B5CF6);
    border-bottom-color: var(--accent, #8B5CF6);
}

.bk-tab-icon { font-size: 1.1rem; }

/* ─── Section header ──────────────────────────────────────────────────────── */
.bk-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.bk-section-header-sm { margin-top: 32px; }

.bk-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0 0 4px;
}

.bk-section-subtitle {
    color: var(--text-secondary, #a0a0b0);
    font-size: 0.82rem;
    margin: 0;
}

/* ─── Boutons ─────────────────────────────────────────────────────────────── */
.bk-btn-primary {
    padding: 8px 18px;
    background: var(--accent, #8B5CF6);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: opacity 0.2s;
}

.bk-btn-primary:hover:not(:disabled) { opacity: 0.85; }
.bk-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.bk-btn-secondary {
    padding: 8px 16px;
    background: var(--bg-secondary, rgba(255,255,255,0.08));
    color: var(--text-primary, #fff);
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

.bk-btn-secondary:hover { background: var(--bg-hover, rgba(255,255,255,0.12)); }

.bk-btn-ghost {
    padding: 8px 16px;
    background: transparent;
    color: var(--text-secondary, #a0a0b0);
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.2s, color 0.2s;
}

.bk-btn-ghost:hover {
    background: var(--bg-hover, rgba(255,255,255,0.06));
    color: var(--text-primary, #fff);
}

.bk-btn-icon {
    padding: 6px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    font-size: 1rem;
    transition: background 0.2s;
    line-height: 1;
}

.bk-btn-icon:hover { background: rgba(255,255,255,0.08); }
.bk-btn-icon.bk-danger:hover { background: rgba(239,68,68,0.15); }

.bk-btn-sm { padding: 6px 12px; font-size: 0.8rem; }
.bk-btn-xs { padding: 4px 10px; font-size: 0.78rem; }

/* ─── Formulaires ─────────────────────────────────────────────────────────── */
.bk-form-group { margin-bottom: 16px; }
.bk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.bk-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary, #a0a0b0);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bk-input {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-input, rgba(255,255,255,0.05));
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    border-radius: 8px;
    color: var(--text-primary, #fff);
    font-size: 0.9rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.bk-input:focus {
    outline: none;
    border-color: var(--accent, #8B5CF6);
}

.bk-input-sm { padding: 6px 10px; font-size: 0.82rem; width: auto; }

.bk-textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-input, rgba(255,255,255,0.05));
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    border-radius: 8px;
    color: var(--text-primary, #fff);
    font-size: 0.9rem;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.bk-textarea:focus {
    outline: none;
    border-color: var(--accent, #8B5CF6);
}

.bk-textarea-lg { min-height: 200px; font-family: 'Courier New', monospace; font-size: 0.85rem; }

.bk-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 12px;
}

.bk-toggle-row input[type="checkbox"] { display: none; }

.bk-toggle-switch {
    width: 44px;
    height: 24px;
    background: var(--bg-secondary, rgba(255,255,255,0.1));
    border-radius: 12px;
    position: relative;
    transition: background 0.3s;
    flex-shrink: 0;
}

.bk-toggle-switch::after {
    content: '';
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
}

.bk-toggle-row input:checked + .bk-toggle-switch {
    background: var(--accent, #8B5CF6);
}

.bk-toggle-row input:checked + .bk-toggle-switch::after {
    transform: translateX(20px);
}

/* ─── Modals ──────────────────────────────────────────────────────────────── */
.bk-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bk-modal {
    background: var(--bg-card, #1e1e2e);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 48px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
}

.bk-modal-sm { max-width: 420px; }
.bk-modal-lg { max-width: 680px; }

.bk-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
    flex-shrink: 0;
}

.bk-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0;
}

.bk-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary, #a0a0b0);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.bk-modal-close:hover { background: rgba(255,255,255,0.08); }

.bk-modal-body { padding: 20px 24px; flex: 1; }

.bk-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
    flex-shrink: 0;
}

/* ─── Offres ──────────────────────────────────────────────────────────────── */
.bk-offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.bk-offer-card {
    background: var(--bg-card, rgba(255,255,255,0.04));
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.bk-offer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.bk-offer-inactive { opacity: 0.5; }

.bk-offer-color-bar { height: 4px; }

.bk-offer-body { padding: 16px; }

.bk-offer-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.bk-offer-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0;
    flex: 1;
}

.bk-offer-actions { display: flex; gap: 4px; }

.bk-offer-desc {
    font-size: 0.82rem;
    color: var(--text-secondary, #a0a0b0);
    margin: 0 0 10px;
    line-height: 1.4;
}

.bk-offer-meta { display: flex; flex-wrap: wrap; gap: 6px; }

/* ─── Color picker ────────────────────────────────────────────────────────── */
.bk-color-picker { display: flex; flex-wrap: wrap; gap: 8px; }

.bk-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.15s, border-color 0.15s;
}

.bk-color-swatch:hover { transform: scale(1.15); }
.bk-color-swatch.selected { border-color: #fff; transform: scale(1.1); }

/* ─── Tags ────────────────────────────────────────────────────────────────── */
.bk-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary, #a0a0b0);
}

.bk-tag-off { background: rgba(239,68,68,0.15); color: #f87171; }

/* ─── Disponibilités ──────────────────────────────────────────────────────── */
.bk-avail-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.bk-avail-day {
    background: var(--bg-card, rgba(255,255,255,0.04));
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    overflow: hidden;
}

.bk-avail-day-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06));
}

.bk-day-name {
    font-weight: 600;
    color: var(--text-primary, #fff);
    font-size: 0.9rem;
    min-width: 100px;
}

.bk-avail-slots {
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bk-avail-slots.bk-hidden { display: none; }

.bk-slot-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bk-slot-sep {
    color: var(--text-secondary, #a0a0b0);
    font-size: 1rem;
}

/* ─── Exceptions ──────────────────────────────────────────────────────────── */
.bk-exc-list { display: flex; flex-direction: column; gap: 8px; }

.bk-exc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-card, rgba(255,255,255,0.04));
    border-radius: 8px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    flex-wrap: wrap;
}

.bk-exc-date { font-weight: 600; font-size: 0.875rem; color: var(--text-primary, #fff); }
.bk-exc-reason { color: var(--text-secondary, #a0a0b0); font-size: 0.82rem; flex: 1; }
.bk-exc-avail { color: #10b981; background: rgba(16,185,129,0.12); padding: 2px 8px; border-radius: 10px; font-size: 0.78rem; }
.bk-exc-off   { color: #f87171; background: rgba(239,68,68,0.12); padding: 2px 8px; border-radius: 10px; font-size: 0.78rem; }

/* ─── Sessions ────────────────────────────────────────────────────────────── */
.bk-filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.bk-filter-tab {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    background: transparent;
    color: var(--text-secondary, #a0a0b0);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    transition: all 0.2s;
}

.bk-filter-tab:hover { color: var(--text-primary, #fff); }

.bk-filter-tab.active {
    background: var(--accent, #8B5CF6);
    color: #fff;
    border-color: var(--accent, #8B5CF6);
}

.bk-sessions-list { display: flex; flex-direction: column; gap: 16px; }

.bk-session-group {}

.bk-session-date-header {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #a0a0b0);
    margin: 0 0 8px;
    padding: 0 4px;
}

.bk-session-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card, rgba(255,255,255,0.04));
    border-radius: 10px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 6px;
}

.bk-session-row:hover { background: var(--bg-hover, rgba(255,255,255,0.07)); }

.bk-session-time {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent, #8B5CF6);
    min-width: 55px;
    text-align: center;
}

.bk-session-info { flex: 1; }

.bk-session-client {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #fff);
}

.bk-session-meta {
    font-size: 0.78rem;
    color: var(--text-secondary, #a0a0b0);
    margin-top: 2px;
}

.bk-session-right { display: flex; align-items: center; gap: 8px; }

/* ─── Status badges ───────────────────────────────────────────────────────── */
.bk-status-badge {
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bk-status-confirmed { background: rgba(16,185,129,0.15); color: #10b981; }
.bk-status-completed { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-light); }
.bk-status-cancelled { background: rgba(239,68,68,0.15);  color: #f87171; }
.bk-status-noshow    { background: rgba(245,158,11,0.15); color: #fbbf24; }
.bk-pay-free         { background: rgba(16,185,129,0.12); color: #6ee7b7; }
.bk-pay-pending      { background: rgba(245,158,11,0.12); color: #fcd34d; }
.bk-pay-paid         { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-light); }
.bk-pay-refunded     { background: rgba(239,68,68,0.12);  color: #fca5a5; }

/* ─── Session detail modal ────────────────────────────────────────────────── */
.bk-session-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.bk-detail-full { grid-column: 1 / -1; }
.bk-detail-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary, #a0a0b0); margin-bottom: 4px; }
.bk-detail-value { font-size: 0.9rem; color: var(--text-primary, #fff); }
.bk-detail-message { background: rgba(255,255,255,0.04); padding: 10px 12px; border-radius: 8px; font-size: 0.85rem; line-height: 1.5; }

.bk-notes-section { border-top: 1px solid var(--border-color, rgba(255,255,255,0.08)); padding-top: 16px; }

/* ─── Séquences email ─────────────────────────────────────────────────────── */
.bk-seq-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    min-height: 400px;
}

.bk-seq-sidebar {
    background: var(--bg-card, rgba(255,255,255,0.03));
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    overflow: hidden;
}

.bk-seq-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.05));
    transition: background 0.2s;
}

.bk-seq-item:hover { background: rgba(255,255,255,0.04); }
.bk-seq-item.active { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.bk-seq-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.bk-seq-item-info { flex: 1; }
.bk-seq-item-label { font-size: 0.875rem; font-weight: 600; color: var(--text-primary, #fff); }
.bk-seq-item-desc { font-size: 0.75rem; color: var(--text-secondary, #a0a0b0); margin-top: 2px; line-height: 1.3; }
.bk-seq-status { font-size: 1rem; flex-shrink: 0; }

.bk-seq-editor {
    background: var(--bg-card, rgba(255,255,255,0.03));
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    padding: 20px;
}

.bk-seq-editor-header { margin-bottom: 20px; }
.bk-seq-editor-header h4 { font-size: 1rem; font-weight: 700; color: var(--text-primary, #fff); margin: 0 0 4px; }
.bk-seq-editor-desc { font-size: 0.82rem; color: var(--text-secondary, #a0a0b0); margin: 0; }

.bk-seq-vars {
    font-size: 0.78rem;
    color: var(--text-secondary, #a0a0b0);
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.bk-var-tag {
    padding: 2px 7px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent-light);
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    transition: background 0.2s;
}

.bk-var-tag:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }

.bk-seq-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ─── Ma page ─────────────────────────────────────────────────────────────── */
.bk-mypage-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
}

.bk-slug-row {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-input, rgba(255,255,255,0.05));
}

.bk-slug-prefix {
    padding: 9px 12px;
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary, #a0a0b0);
    font-size: 0.82rem;
    white-space: nowrap;
    border-right: 1px solid var(--border-color, rgba(255,255,255,0.08));
    flex-shrink: 0;
}

.bk-slug-row .bk-input {
    border: none;
    background: transparent;
    border-radius: 0;
}

.bk-mypage-preview {
    background: var(--bg-card, rgba(255,255,255,0.04));
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    padding: 20px;
    position: sticky;
    top: 20px;
}

.bk-preview-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary, #fff); margin: 0 0 14px; }
.bk-preview-link-box { min-height: 80px; }
.bk-preview-url { margin-bottom: 12px; }

.bk-link {
    color: var(--accent, #8B5CF6);
    text-decoration: none;
    word-break: break-all;
}

.bk-link:hover { text-decoration: underline; }
.bk-link-lg { font-size: 0.9rem; }

.bk-preview-actions { display: flex; gap: 8px; }
.bk-form-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ─── États communs ───────────────────────────────────────────────────────── */
.bk-loading {
    padding: 32px;
    text-align: center;
    color: var(--text-secondary, #a0a0b0);
    font-size: 0.9rem;
}

.bk-error {
    padding: 16px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 8px;
    color: #f87171;
    font-size: 0.875rem;
}

.bk-empty-state {
    padding: 48px 32px;
    text-align: center;
    color: var(--text-secondary, #a0a0b0);
}

.bk-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }

.bk-empty-state p {
    margin: 4px 0;
    font-size: 0.9rem;
    color: var(--text-primary, #e0e0e0);
}

.bk-empty-sub { font-size: 0.82rem !important; color: var(--text-secondary, #a0a0b0) !important; }
.bk-empty-sm { padding: 16px; text-align: center; color: var(--text-secondary, #a0a0b0); font-size: 0.85rem; }

.bk-divider { border: none; border-top: 1px solid var(--border-color, rgba(255,255,255,0.08)); margin: 28px 0; }

.bk-hint { font-size: 0.78rem; color: var(--text-secondary, #a0a0b0); margin: 4px 0 0; }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .bk-wrapper { padding: 16px; }
    .bk-form-row { grid-template-columns: 1fr; }
    .bk-seq-layout { grid-template-columns: 1fr; }
    .bk-mypage-layout { grid-template-columns: 1fr; }
    .bk-session-detail-grid { grid-template-columns: 1fr; }
    .bk-tabs { gap: 2px; }
    .bk-tab { padding: 8px 10px; font-size: 0.78rem; }
    .bk-tab-label { display: none; }
}


/* ===== css/replays.css?v=2602240010 ===== */
/**
 * Replays CSS — Lives → Formations automatiquement
 * Préfixe : .ga-rep-* (Giri Academy Replays)
 */

/* ── Layout principal ────────────────────────────────────────────────────── */

.ga-rep-view {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.ga-rep-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.ga-rep-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ga-rep-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.ga-rep-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

/* ── Filtres de statut ───────────────────────────────────────────────────── */

.ga-rep-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ga-rep-filter-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.1);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.ga-rep-filter-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.ga-rep-filter-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

/* ── Grille de replays ───────────────────────────────────────────────────── */

.ga-rep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.ga-rep-card {
    background: var(--bg-secondary);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.ga-rep-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    border-color: rgba(255,255,255,.15);
}

.ga-rep-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--bg-tertiary);
    overflow: hidden;
}

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

.ga-rep-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), rgba(59,130,246,.15));
    font-size: 2.5rem;
}

.ga-rep-card-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

/* ── Badge de statut ─────────────────────────────────────────────────────── */

.ga-rep-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.ga-rep-badge--processing {
    background: rgba(245,158,11,.15);
    color: #f59e0b;
    animation: ga-rep-pulse 2s ease-in-out infinite;
}

.ga-rep-badge--transcribing {
    background: rgba(59,130,246,.15);
    color: #3b82f6;
    animation: ga-rep-pulse 1.5s ease-in-out infinite;
}

.ga-rep-badge--chaptering {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent-light);
    animation: ga-rep-pulse 1.5s ease-in-out infinite;
}

.ga-rep-badge--ready {
    background: rgba(16,185,129,.15);
    color: #10b981;
}

.ga-rep-badge--published {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
}

.ga-rep-badge--failed {
    background: rgba(239,68,68,.15);
    color: #ef4444;
}

@keyframes ga-rep-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .55; }
}

/* ── Infos de la carte ───────────────────────────────────────────────────── */

.ga-rep-card-body {
    padding: 14px;
}

.ga-rep-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.ga-rep-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    flex: 1;
}

.ga-rep-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.ga-rep-card-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ga-rep-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.06);
}

/* ── État vide ───────────────────────────────────────────────────────────── */

.ga-rep-empty {
    text-align: center;
    padding: 64px 24px;
    color: var(--text-muted);
}

.ga-rep-empty-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
    opacity: .5;
}

.ga-rep-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 8px;
}

.ga-rep-empty-desc {
    font-size: 13px;
    line-height: 1.6;
    max-width: 360px;
    margin: 0 auto 20px;
}

/* ── Loading ─────────────────────────────────────────────────────────────── */

.ga-rep-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--text-muted);
    font-size: 14px;
}

.ga-rep-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,.1);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: ga-rep-spin .7s linear infinite;
}

@keyframes ga-rep-spin {
    to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════════════════
   REPLAY EDITOR
   ════════════════════════════════════════════════════════════════════════════ */

.ga-rep-editor {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    padding: 20px 24px;
    align-items: start;
}

@media (max-width: 960px) {
    .ga-rep-editor {
        grid-template-columns: 1fr;
    }
}

/* ── Colonne principale ──────────────────────────────────────────────────── */

.ga-rep-editor-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ga-rep-player-wrap {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
    position: relative;
}

.ga-rep-player-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.ga-rep-player-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: rgba(255,255,255,.4);
    font-size: 13px;
}

/* ── Panneau section ─────────────────────────────────────────────────────── */

.ga-rep-panel {
    background: var(--bg-secondary);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    overflow: hidden;
}

.ga-rep-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
    cursor: pointer;
    user-select: none;
}

.ga-rep-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ga-rep-panel-count {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-light);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
}

.ga-rep-panel-toggle {
    font-size: 11px;
    color: var(--text-muted);
    transition: transform .2s;
}

.ga-rep-panel.collapsed .ga-rep-panel-toggle {
    transform: rotate(-90deg);
}

.ga-rep-panel-body {
    padding: 0;
    transition: max-height .2s ease;
}

.ga-rep-panel.collapsed .ga-rep-panel-body {
    display: none;
}

/* ── Chapitres ───────────────────────────────────────────────────────────── */

.ga-rep-chapter-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.ga-rep-chapter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .12s;
}

.ga-rep-chapter-item:last-child {
    border-bottom: none;
}

.ga-rep-chapter-item:hover {
    background: rgba(255,255,255,.03);
}

.ga-rep-chapter-time {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-primary);
    min-width: 44px;
    font-family: monospace;
}

.ga-rep-chapter-title-input {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    padding: 4px 8px;
    transition: border-color .15s, background .15s;
}

.ga-rep-chapter-title-input:hover {
    border-color: rgba(255,255,255,.1);
    background: rgba(255,255,255,.03);
}

.ga-rep-chapter-title-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.ga-rep-chapter-del {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity .15s, color .15s;
}

.ga-rep-chapter-item:hover .ga-rep-chapter-del {
    opacity: 1;
}

.ga-rep-chapter-del:hover {
    color: #ef4444;
}

/* ── Questions du quiz ───────────────────────────────────────────────────── */

.ga-rep-quiz-list {
    list-style: none;
    margin: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ga-rep-quiz-item {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: 12px 14px;
}

.ga-rep-quiz-question {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.ga-rep-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ga-rep-quiz-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 6px;
}

.ga-rep-quiz-option.correct {
    background: rgba(16,185,129,.12);
    color: #10b981;
    font-weight: 600;
}

/* ── Colonne latérale ────────────────────────────────────────────────────── */

.ga-rep-editor-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 16px;
}

.ga-rep-info-card {
    background: var(--bg-secondary);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 16px;
}

.ga-rep-info-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px;
    line-height: 1.35;
}

.ga-rep-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    color: var(--text-secondary);
}

.ga-rep-info-row:last-child {
    border-bottom: none;
}

.ga-rep-info-label {
    color: var(--text-muted);
}

/* ── Publication ─────────────────────────────────────────────────────────── */

.ga-rep-publish-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), rgba(59,130,246,.08));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 12px;
    padding: 18px;
}

.ga-rep-publish-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ga-rep-select {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    padding: 8px 10px;
    margin-bottom: 10px;
    appearance: none;
    cursor: pointer;
    transition: border-color .15s;
}

.ga-rep-select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.ga-rep-published-info {
    background: rgba(16,185,129,.08);
    border: 1px solid rgba(16,185,129,.2);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Transcription ───────────────────────────────────────────────────────── */

.ga-rep-transcript {
    max-height: 320px;
    overflow-y: auto;
    padding: 12px 16px;
    scrollbar-width: thin;
}

.ga-rep-transcript-seg {
    display: flex;
    gap: 10px;
    padding: 5px 0;
    font-size: 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,.03);
    line-height: 1.5;
}

.ga-rep-transcript-time {
    font-family: monospace;
    font-size: 10px;
    color: var(--accent-primary);
    opacity: .7;
    min-width: 38px;
    flex-shrink: 0;
    padding-top: 2px;
}

/* ── Processing overlay ──────────────────────────────────────────────────── */

.ga-rep-processing {
    text-align: center;
    padding: 48px 24px;
}

.ga-rep-processing-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    animation: ga-rep-pulse 1.5s ease-in-out infinite;
}

.ga-rep-processing-status {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.ga-rep-processing-desc {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 360px;
    margin: 0 auto 20px;
}

.ga-rep-progress-bar {
    width: 100%;
    max-width: 320px;
    height: 4px;
    background: rgba(255,255,255,.08);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.ga-rep-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), #3b82f6);
    border-radius: 2px;
    animation: ga-rep-progress 2.5s ease-in-out infinite;
    transform-origin: left;
}

@keyframes ga-rep-progress {
    0%   { width: 5%; }
    50%  { width: 75%; }
    100% { width: 5%; }
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.ga-rep-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .15s;
    white-space: nowrap;
}

.ga-rep-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.ga-rep-btn--primary {
    background: var(--accent-primary);
    color: #fff;
}

.ga-rep-btn--primary:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.ga-rep-btn--secondary {
    background: rgba(255,255,255,.07);
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,.1);
}

.ga-rep-btn--secondary:hover:not(:disabled) {
    background: rgba(255,255,255,.12);
}

.ga-rep-btn--danger {
    background: rgba(239,68,68,.12);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,.2);
}

.ga-rep-btn--danger:hover:not(:disabled) {
    background: rgba(239,68,68,.22);
}

.ga-rep-btn--sm {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 6px;
}

.ga-rep-btn--full {
    width: 100%;
    justify-content: center;
}


/* ===== css/revenue-dashboard.css?v=2602240010 ===== */
/**
 * REVENUE DASHBOARD v1.0 — Giri Academy
 * Styles pour le dashboard revenus formateurs
 */

/* ─── Layout page ────────────────────────────────────────────────────────── */

.rv-page {
    padding: 28px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .rv-page { padding: 16px; }
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

.rv-header {
    margin-bottom: 24px;
}

.rv-back {
    margin-bottom: 16px;
}

.rv-header-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.rv-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.rv-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.rv-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ─── KPI Grid ───────────────────────────────────────────────────────────── */

.rv-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media (max-width: 900px) { .rv-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rv-kpi-grid { grid-template-columns: 1fr; } }

.rv-kpi-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: border-color 0.2s, transform 0.2s;
}

.rv-kpi-card:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    transform: translateY(-2px);
}

.rv-kpi-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.rv-kpi-body { flex: 1; min-width: 0; }

.rv-kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.rv-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 4px;
    transition: color 0.3s;
}

.rv-kpi-sub {
    font-size: 11px;
    color: var(--text-muted);
}

/* ─── Shimmer ────────────────────────────────────────────────────────────── */

.rv-shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75%);
    background-size: 200% 100%;
    animation: rv-shimmer-anim 1.5s infinite;
    border-radius: 6px;
    color: transparent !important;
    pointer-events: none;
}

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

.rv-shimmer-row {
    padding: 10px 0;
}

.rv-shimmer-line {
    height: 14px;
    width: 100%;
    display: block;
    border-radius: 6px;
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */

.rv-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 20px;
}

.rv-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 8px;
}

.rv-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.rv-card-badge {
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    padding: 3px 10px;
    flex-shrink: 0;
}

/* ─── Main grid ──────────────────────────────────────────────────────────── */

.rv-main-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 1024px) { .rv-main-grid { grid-template-columns: 1fr; } }

/* ─── Chart card ─────────────────────────────────────────────────────────── */

.rv-chart-card { display: flex; flex-direction: column; }

.rv-period-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 3px;
}

.rv-period-btn {
    padding: 4px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.rv-period-btn:hover { color: var(--text-primary); }

.rv-period-btn.active {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-light);
    font-weight: 600;
}

.rv-chart-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.rv-chart-tab {
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: transparent;
    border-radius: 100px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.rv-chart-tab:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text-primary); }

.rv-chart-tab.active {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent-light);
    font-weight: 600;
}

.rv-chart-wrap {
    position: relative;
    height: 220px;
    flex: 1;
}

.rv-chart-wrap canvas { width: 100% !important; height: 100% !important; }

.rv-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
}

.rv-chart-empty span { font-size: 32px; opacity: 0.4; }
.rv-chart-empty p { font-size: 13px; margin: 0; }

/* ─── Top formations ─────────────────────────────────────────────────────── */

.rv-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.rv-top-row:last-child { border-bottom: none; }

.rv-top-rank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-light);
    flex-shrink: 0;
}

.rv-top-emoji { font-size: 18px; flex-shrink: 0; }

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

.rv-top-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-top-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.rv-top-revenue { text-align: right; flex-shrink: 0; }

.rv-top-amount {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.rv-top-trend {
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

/* ─── Secondary grid ─────────────────────────────────────────────────────── */

.rv-secondary-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 1024px) { .rv-secondary-grid { grid-template-columns: 1fr; } }

/* ─── Recent sales ───────────────────────────────────────────────────────── */

.rv-live-dot {
    font-size: 11px;
    font-weight: 600;
    color: #4ade80;
    letter-spacing: 0.05em;
    animation: rv-blink 2s ease-in-out infinite;
}

@keyframes rv-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.rv-sale-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.rv-sale-row:last-child { border-bottom: none; }

.rv-sale-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 30%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-light);
    flex-shrink: 0;
}

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

.rv-sale-email {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-sale-formation {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-sale-right { text-align: right; flex-shrink: 0; }

.rv-sale-amount {
    font-size: 14px;
    font-weight: 700;
    color: #4ade80;
}

.rv-sale-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* Source badges */
.rv-src-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.rv-src-direct { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-light); }
.rv-src-aff    { background: rgba(16,185,129,0.15); color: #34d399; }
.rv-src-coupon { background: rgba(245,158,11,0.15); color: #fbbf24; }

/* ─── Donut charts ───────────────────────────────────────────────────────── */

.rv-donut-wrap {
    position: relative;
    height: 150px;
    margin-bottom: 12px;
}

.rv-donut-wrap canvas { width: 100% !important; height: 100% !important; }

/* ─── Legend ─────────────────────────────────────────────────────────────── */

.rv-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rv-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.rv-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rv-legend-label {
    flex: 1;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-legend-pct {
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}

/* ─── Forecast ───────────────────────────────────────────────────────────── */

.rv-forecast-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--accent) 4%, transparent));
    border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}

.rv-forecast-body { display: flex; flex-direction: column; gap: 20px; }

@media (min-width: 768px) {
    .rv-forecast-body { flex-direction: row; align-items: flex-start; }
}

.rv-forecast-message {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex: 1;
}

.rv-forecast-message p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.rv-forecast-months {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.rv-forecast-curr {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 12px;
    padding: 12px 16px;
    text-align: center;
}

.rv-forecast-curr-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.rv-forecast-curr-val {
    font-size: 20px;
    font-weight: 800;
}

.rv-forecast-month {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 10px 14px;
    text-align: center;
    min-width: 100px;
}

.rv-forecast-month-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 5px;
    text-transform: capitalize;
}

.rv-forecast-month-val {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ─── Trend colors ───────────────────────────────────────────────────────── */

.rv-trend-up   { color: #4ade80; }
.rv-trend-down { color: #f87171; }
.rv-trend-flat { color: #94a3b8; }

/* ─── Empty state ────────────────────────────────────────────────────────── */

.rv-empty-state {
    padding: 28px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════════
   REVENUE INTELLIGENCE v1.0
   Alertes | Objectifs | Paniers abandonnés | Insights IA
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── Badge bouton Intelligence (header) ─────────────────────────────────── */

.rv-intel-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: #fff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* ─── Panel Intelligence (slide-in sous le dashboard) ───────────────────── */

.rv-intelligence-panel {
    margin-top: 24px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    background: rgba(15,10,30,0.95);
    backdrop-filter: blur(12px);
    overflow: hidden;
    animation: riSlideDown 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

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

.rv-intel-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
}

.rv-intel-panel-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #e2e8f0;
}

.rv-intel-close {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #94a3b8;
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.rv-intel-close:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }

/* ─── Tabs Intelligence ───────────────────────────────────────────────────── */

.ri-wrap { padding: 0; }

.ri-tabs {
    display: flex;
    gap: 4px;
    padding: 16px 24px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ri-tab {
    position: relative;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -1px;
}
.ri-tab:hover  { color: #94a3b8; }
.ri-tab.active { color: var(--accent-light); border-bottom-color: #8B5CF6; }

.ri-badge {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 16px; height: 16px;
    background: #8B5CF6;
    color: #fff;
    border-radius: 8px;
    font-size: 9px; font-weight: 700;
    line-height: 16px; text-align: center;
    padding: 0 4px;
}
.ri-badge--red { background: #ef4444; }

.ri-panel { padding: 20px 24px 24px; }

/* ─── Loading / Empty ─────────────────────────────────────────────────────── */

.ri-loading {
    padding: 40px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}

.ri-empty {
    padding: 48px 24px;
    text-align: center;
}
.ri-empty-icon { font-size: 40px; margin-bottom: 12px; }
.ri-empty p    { color: #94a3b8; margin: 4px 0; font-size: 14px; }
.ri-empty-sub  { color: #64748b !important; font-size: 12px !important; max-width: 340px; margin: 0 auto !important; }

/* ─── Alertes ─────────────────────────────────────────────────────────────── */

.ri-alerts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.ri-alerts-count { font-size: 13px; color: #64748b; }

.ri-alerts-list { display: flex; flex-direction: column; gap: 8px; }

.ri-alert-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border-left: 3px solid transparent;
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.ri-alert-row:hover { background: rgba(255,255,255,0.06); }

.ri-alert--unread { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ri-alert--gold   { border-left-color: #FBBF24; }
.ri-alert--red    { border-left-color: #EF4444; }
.ri-alert--violet { border-left-color: #8B5CF6; }
.ri-alert--blue   { border-left-color: #3B82F6; }
.ri-alert--orange { border-left-color: #F59E0B; }

.ri-alert-icon { font-size: 20px; flex-shrink: 0; width: 32px; text-align: center; }
.ri-alert-body { flex: 1; min-width: 0; }
.ri-alert-msg  { margin: 0 0 4px; font-size: 13px; color: #e2e8f0; line-height: 1.5; }
.ri-alert-time { font-size: 11px; color: #64748b; }

.ri-alert-read-btn {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #64748b;
    width: 26px; height: 26px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
    transition: all 0.2s;
}
.ri-alert-read-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-light); }

.ri-btn-ghost {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    color: #64748b;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.ri-btn-ghost:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-light); }

/* ─── Objectifs ───────────────────────────────────────────────────────────── */

.ri-goals-wrap { display: flex; flex-direction: column; gap: 20px; }

.ri-goal-current {
    padding: 20px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.3s;
}
.ri-goal--achieved {
    border-color: rgba(251,191,36,0.4);
    background: rgba(251,191,36,0.05);
    box-shadow: 0 0 30px rgba(251,191,36,0.1);
}

.ri-goal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.ri-goal-title { font-size: 15px; font-weight: 700; color: #e2e8f0; display: flex; align-items: center; gap: 8px; }

.ri-goal-achieved-badge {
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    color: #000;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Jauge circulaire */
.ri-gauge-wrap {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.ri-gauge-svg { width: 120px; height: 120px; flex-shrink: 0; }

.ri-gauge-track { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 10; }
.ri-gauge-fill  {
    fill: none;
    stroke: #8B5CF6;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dasharray 1s cubic-bezier(0.34,1.56,0.64,1);
}
.ri-gauge-fill--gold { stroke: #FBBF24; }

.ri-gauge-pct   { fill: #e2e8f0; font-size: 22px; font-weight: 800; text-anchor: middle; }
.ri-gauge-label { fill: #64748b;  font-size: 10px; text-anchor: middle; }

.ri-gauge-amounts {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.ri-gauge-achieved, .ri-gauge-target, .ri-gauge-remaining {
    display: flex; flex-direction: column; align-items: center;
}
.ri-gauge-sep   { color: #64748b; font-size: 18px; }
.ri-gauge-num   { font-size: 20px; font-weight: 800; color: #e2e8f0; }
.ri-gauge-num--accent { color: var(--accent-light); }
.ri-gauge-sub   { font-size: 11px; color: #64748b; margin-top: 2px; }

/* Barre progression */
.ri-progress-bar-wrap { margin-top: 16px; }
.ri-progress-bar {
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.ri-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8B5CF6, #6366F1);
    border-radius: 4px;
    transition: width 1s cubic-bezier(0.34,1.56,0.64,1);
}
.ri-progress-fill--gold { background: linear-gradient(90deg, #FBBF24, #F59E0B); }

.ri-goal-empty { padding: 24px; text-align: center; color: #64748b; font-size: 13px; }

/* Formulaire objectif */
.ri-goal-form {
    padding: 20px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.ri-goal-form h4 { margin: 0 0 16px; font-size: 14px; color: var(--accent-light); }

.ri-goal-form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ri-goal-form-row label { font-size: 12px; color: #64748b; }

.ri-goal-input-wrap { display: flex; align-items: center; gap: 8px; }
.ri-input {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px 14px;
    color: #e2e8f0;
    font-size: 16px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s;
}
.ri-input:focus { border-color: #8B5CF6; }
.ri-input-suffix { font-size: 14px; color: #94a3b8; }

.ri-goal-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ri-preset-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #94a3b8;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.ri-preset-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: #8B5CF6; color: var(--accent-light); }

.ri-goal-form-actions { display: flex; gap: 8px; }

/* Historique objectifs */
.ri-goal-history { margin-top: 8px; }
.ri-goal-history h4 { font-size: 14px; color: #94a3b8; margin-bottom: 12px; }
.ri-history-list { display: flex; flex-direction: column; gap: 10px; }

.ri-history-row {
    display: grid;
    grid-template-columns: 100px 1fr 140px;
    align-items: center;
    gap: 12px;
}
.ri-history-month { font-size: 12px; color: #64748b; text-transform: capitalize; }
.ri-history-bar-wrap { display: flex; align-items: center; gap: 8px; }
.ri-history-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.ri-history-fill { height: 100%; background: color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 3px; transition: width 0.8s ease; }
.ri-history-fill--gold { background: rgba(251,191,36,0.6); }
.ri-history-pct { font-size: 11px; color: #64748b; min-width: 32px; text-align: right; }
.ri-history-amounts { font-size: 12px; color: #94a3b8; text-align: right; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.ri-history-check { color: #4ade80; font-size: 14px; }

/* ─── Célébration ─────────────────────────────────────────────────────────── */

.ri-celebrate-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: riOverlayIn 0.3s ease;
}
@keyframes riOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.ri-celebrate-box {
    background: linear-gradient(135deg, #1a0a3e, #0f0a1e);
    border: 2px solid rgba(251,191,36,0.5);
    border-radius: 24px;
    padding: 48px 40px;
    text-align: center;
    max-width: 440px;
    animation: riCelebIn 0.5s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 0 80px rgba(251,191,36,0.2);
}
@keyframes riCelebIn { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.ri-celebrate-emoji { font-size: 64px; margin-bottom: 16px; animation: riSpin 0.8s ease; }
@keyframes riSpin { from { transform: rotate(-20deg) scale(0.5); } to { transform: rotate(0) scale(1); } }

.ri-celebrate-box h2 { font-size: 28px; font-weight: 800; color: #FBBF24; margin: 0 0 12px; }
.ri-celebrate-box p  { color: #94a3b8; font-size: 15px; margin-bottom: 24px; }
.ri-celebrate-fireworks { font-size: 28px; letter-spacing: 8px; margin-bottom: 24px; animation: riFire 1s ease infinite alternate; }
@keyframes riFire { from { transform: scale(1); } to { transform: scale(1.1); } }

/* ─── Paniers abandonnés ──────────────────────────────────────────────────── */

.ri-cart-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.ri-cart-stat {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.06);
}
.ri-cart-stat-val { font-size: 20px; font-weight: 800; color: #e2e8f0; }
.ri-cart-stat-lab { font-size: 11px; color: #64748b; margin-top: 4px; }

.ri-val--green  { color: #4ade80; }
.ri-val--red    { color: #f87171; }
.ri-val--violet { color: var(--accent-light); }

.ri-recovery-bar-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ri-recovery-bar {
    flex: 1; height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px; overflow: hidden;
}
.ri-recovery-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    border-radius: 4px;
    transition: width 1s ease;
}
.ri-recovery-label { font-size: 12px; color: #64748b; white-space: nowrap; }

/* Table paniers */
.ri-carts-list { overflow-x: auto; }
.ri-carts-header {
    display: grid;
    grid-template-columns: 200px 1fr 80px 90px 90px 160px;
    gap: 8px;
    padding: 8px 12px;
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    min-width: 700px;
}
.ri-cart-row {
    display: grid;
    grid-template-columns: 200px 1fr 80px 90px 90px 160px;
    gap: 8px;
    align-items: center;
    padding: 12px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    min-width: 700px;
    transition: background 0.15s;
}
.ri-cart-row:hover { background: rgba(255,255,255,0.03); }
.ri-cart-row--dimmed { opacity: 0.6; }

.ri-cart-formation { display: flex; align-items: center; gap: 8px; }
.ri-cart-emoji { font-size: 16px; }
.ri-cart-title { font-size: 12px; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.ri-cart-email { font-size: 12px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; }
.ri-cart-amount { font-size: 13px; font-weight: 600; color: var(--accent-light); }
.ri-cart-date { font-size: 11px; color: #64748b; }

.ri-cart-reminders { display: flex; align-items: center; gap: 6px; }
.ri-reminder-dots { display: flex; gap: 4px; }
.ri-reminder-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
}
.ri-dot--sent { background: #8B5CF6; border-color: #8B5CF6; }
.ri-reminder-label { font-size: 11px; color: #64748b; }

.ri-cart-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.ri-btn-remind {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent-light);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.ri-btn-remind:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.ri-btn-remind--coupon {
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.3);
    color: #FBBF24;
}
.ri-btn-remind--coupon:hover { background: rgba(251,191,36,0.2); }

.ri-remind-done { font-size: 11px; color: #4ade80; }

/* ─── Insights IA ─────────────────────────────────────────────────────────── */

.ri-insights-header { margin-bottom: 16px; }
.ri-insights-intro { font-size: 13px; color: #64748b; display: flex; align-items: center; gap: 8px; margin: 0; }
.ri-ai-badge {
    background: linear-gradient(135deg, #8B5CF6, #6366F1);
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.ri-insights-list { display: flex; flex-direction: column; gap: 12px; }

.ri-insight-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 4px solid var(--accent, #8B5CF6);
    transition: all 0.2s;
    animation: riCardIn 0.4s ease both;
}
@keyframes riCardIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }

.ri-insight-card:hover { background: rgba(255,255,255,0.05); transform: translateX(2px); }

.ri-insight-icon { font-size: 24px; flex-shrink: 0; width: 36px; text-align: center; }
.ri-insight-body { flex: 1; min-width: 0; }
.ri-insight-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #e2e8f0; }
.ri-insight-msg { margin: 0 0 10px; font-size: 13px; color: #94a3b8; line-height: 1.6; }

.ri-insight-action {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    color: #64748b;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.ri-insight-action:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-light); }

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 680px) {
    /* Tabs : scroll horizontal sur mobile */
    .ri-tabs { overflow-x: auto; flex-wrap: nowrap; padding: 12px 16px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .ri-tabs::-webkit-scrollbar { display: none; }
    .ri-tab { white-space: nowrap; flex-shrink: 0; padding: 8px 12px; font-size: 12px; }
    .ri-panel { padding: 16px; }

    /* Jauge SVG : centrée et réduite */
    .ri-gauge-wrap { flex-direction: column; align-items: center; gap: 16px; }
    .ri-gauge-svg { width: 100px; height: 100px; }
    .ri-gauge-amounts { justify-content: center; gap: 12px; }
    .ri-gauge-num { font-size: 16px; }
    .ri-gauge-pct { font-size: 18px; }

    /* Historique : 3 colonnes réduites */
    .ri-history-row { grid-template-columns: 70px 1fr 80px; font-size: 12px; }

    /* Table paniers : 2 colonnes + scroll */
    .ri-carts-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ri-carts-header, .ri-cart-row { grid-template-columns: 1fr 1fr; min-width: unset; }
    .ri-carts-header span:nth-child(n+3),
    .ri-cart-row > div:nth-child(n+3) { display: none; }
    .ri-cart-actions { gap: 4px; flex-direction: column; }
    .ri-btn-remind { font-size: 11px; padding: 4px 8px; }

    /* Formulaire objectif : col unique */
    .ri-goal-form-actions { flex-direction: column; }
    .ri-preset-btns { gap: 4px; }
    .ri-preset-btn { font-size: 11px; padding: 4px 8px; }

    /* Insights : stack vertical compact */
    .ri-insight-card { gap: 10px; }
    .ri-insight-icon { width: 28px; font-size: 20px; }

    /* Stats paniers : 2 colonnes sur mobile */
    .ri-cart-stats { grid-template-columns: 1fr 1fr; }
}

/* ─── Main Tab Navigation ─────────────────────────────────────────────────── */

.rv-main-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 5px;
}

.rv-main-tab {
    flex: 1;
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
}

.rv-main-tab:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
}

.rv-main-tab.active {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent-light);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.rv-main-tab .rv-intel-badge {
    position: relative;
    top: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 6px;
}

@media (max-width: 640px) {
    .rv-main-tabs { overflow-x: auto; }
    .rv-main-tab { flex: none; font-size: 12px; padding: 8px 12px; }
}

/* ─── Panel wrapper ───────────────────────────────────────────────────────── */

.rv-panel { }

/* ─── Experiments (re-*) ──────────────────────────────────────────────────── */

.re-page { padding: 4px 0; }

.re-header { margin-bottom: 20px; }
.re-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.re-subtitle { font-size: 13px; color: var(--text-muted); margin: 0; }

.re-create-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 24px;
}

.re-create-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px;
}

.re-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

@media (max-width: 700px) {
    .re-form { grid-template-columns: 1fr 1fr; }
}

.re-field { display: flex; flex-direction: column; gap: 5px; }
.re-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.re-input {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.re-input:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.re-input::placeholder { color: rgba(255,255,255,0.25); }

.re-submit-btn {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent-light);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.re-submit-btn:hover { background: color-mix(in srgb, var(--accent) 35%, transparent); }

.re-list-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 12px; }

.re-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 12px;
}

.re-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 8px;
}

.re-exp-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }

.re-badge-active { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3); font-size: 11px; padding: 2px 8px; border-radius: 20px; }
.re-badge-done   { background: color-mix(in srgb, var(--accent) 15%, transparent);  color: var(--accent-light); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);  font-size: 11px; padding: 2px 8px; border-radius: 20px; }

.re-variants {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.re-variant {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px;
    position: relative;
    transition: border-color 0.2s;
}

.re-variant-winner {
    border-color: rgba(16,185,129,0.4);
    background: rgba(16,185,129,0.06);
}

.re-variant-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.re-variant-price { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.re-variant-bar-wrap { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.re-variant-bar { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.re-variant-bar-a { background: var(--accent); }
.re-variant-bar-b { background: #10b981; }
.re-variant-stats { font-size: 12px; color: var(--text-muted); }
.re-variant-crown { position: absolute; top: 8px; right: 8px; font-size: 16px; }

.re-conclusion {
    font-size: 12px;
    color: #94a3b8;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    border-left: 3px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

.re-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ─── Reports (rr-*) ──────────────────────────────────────────────────────── */

.rr-page { padding: 4px 0; }
.rr-header { margin-bottom: 20px; }
.rr-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.rr-subtitle { font-size: 13px; color: var(--text-muted); margin: 0; }

.rr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 700px) { .rr-grid { grid-template-columns: 1fr; } }

.rr-report-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rr-report-icon { font-size: 28px; }
.rr-report-label { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.rr-report-desc { font-size: 13px; color: var(--text-muted); }

.rr-report-btn {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent-light);
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    align-self: flex-start;
    margin-top: 4px;
}
.rr-report-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.rr-report-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.rr-report-content { margin-top: 8px; }

.rr-report-data { }
.rr-report-period { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }

.rr-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.rr-kpi {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 12px;
}
.rr-kpi-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.rr-kpi-val { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.rr-kpi-evo { font-size: 11px; margin-top: 2px; }
.rr-evo-up { color: #4ade80; }
.rr-evo-down { color: #f87171; }
.rr-kpi--warn .rr-kpi-val { color: #f59e0b; }

.rr-top-section { margin-bottom: 12px; }
.rr-top-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }

.rr-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
}

.rr-top-rank {
    width: 20px;
    height: 20px;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.rr-top-emoji { flex-shrink: 0; }
.rr-top-title { flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-top-rev { color: #4ade80; font-weight: 600; flex-shrink: 0; }

.rr-report-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.rr-pdf-btn, .rr-csv-btn {
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}
.rr-pdf-btn { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }
.rr-pdf-btn:hover { background: rgba(239,68,68,0.28); }
.rr-csv-btn { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.3); }
.rr-csv-btn:hover { background: rgba(16,185,129,0.28); }

.rr-generated-at { font-size: 11px; color: var(--text-muted); margin-left: auto; }

/* ─── Predictions & Fiscal responsive ────────────────────────────────────── */

@media (max-width: 640px) {
    .re-variants { grid-template-columns: 1fr; }
    .rr-kpis { grid-template-columns: repeat(2, 1fr); }
}


/* ===== css/revenue-intelligence.css?v=2602240010 ===== */
/**
 * Revenue Intelligence — Styles extraits
 * Extraits de revenue-intelligence.js
 */

/* ── Utilitaire masquage (remplace les style=display:none inline) ── */
.ri-hidden {
    display: none;
}


/* ===== css/giri-media-library.css?v=2602240010 ===== */
/**
 * Giri Media Library v1.0
 * Médiathèque visuelle centrale — styles
 */

/* ── Overlay ──────────────────────────────────────────────────────────────── */
.gml-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity .25s ease;
    backdrop-filter: blur(4px);
}
.gml-overlay--open { opacity: 1; }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.gml-modal {
    background: #1a1a2e;
    border: 1px solid rgba(163, 113, 247, .25);
    border-radius: 16px;
    width: 100%;
    max-width: 1100px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(163,113,247,.1);
    transform: translateY(8px);
    transition: transform .25s ease;
}
.gml-overlay--open .gml-modal { transform: translateY(0); }

/* ── Header ───────────────────────────────────────────────────────────────── */
.gml-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    gap: 16px;
    flex-shrink: 0;
}
.gml-header-left { display: flex; align-items: center; gap: 12px; }
.gml-header-right { display: flex; align-items: center; gap: 10px; }

.gml-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
}
.gml-sel-count {
    font-size: .8rem;
    font-weight: 600;
    background: rgba(163,113,247,.2);
    color: #a371f7;
    border: 1px solid rgba(163,113,247,.4);
    padding: 3px 10px;
    border-radius: 20px;
}

/* ── Recherche ────────────────────────────────────────────────────────────── */
.gml-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.gml-search-icon {
    position: absolute;
    left: 10px;
    font-size: .9rem;
    pointer-events: none;
}
.gml-search {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 8px 12px 8px 32px;
    color: #e2e8f0;
    font-size: .88rem;
    width: 240px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.gml-search::placeholder { color: rgba(255,255,255,.35); }
.gml-search:focus {
    border-color: rgba(163,113,247,.5);
    box-shadow: 0 0 0 3px rgba(163,113,247,.12);
}
.gml-close-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: color .2s, background .2s;
    line-height: 1;
}
.gml-close-btn:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ── Body / Grille ────────────────────────────────────────────────────────── */
.gml-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(163,113,247,.3) transparent;
}
.gml-body::-webkit-scrollbar { width: 6px; }
.gml-body::-webkit-scrollbar-thumb { background: rgba(163,113,247,.3); border-radius: 3px; }

.gml-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.gml-card {
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(255,255,255,.08);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .2s;
    position: relative;
    user-select: none;
}
.gml-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 4px 12px rgba(163,113,247,.15);
    border-color: rgba(163,113,247,.35);
}
.gml-card--selected {
    border-color: #a371f7;
    box-shadow: 0 0 0 3px rgba(163,113,247,.25), 0 8px 24px rgba(163,113,247,.2);
    transform: translateY(-2px);
}
.gml-card--selected:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 0 3px rgba(163,113,247,.35), 0 16px 40px rgba(163,113,247,.25);
}

/* ── Thumbnail 16:9 ───────────────────────────────────────────────────────── */
.gml-thumb-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    background: rgba(0,0,0,.3);
    overflow: hidden;
}
.gml-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.gml-card:hover .gml-thumb { transform: scale(1.04); }

.gml-thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: linear-gradient(135deg, rgba(163,113,247,.08), rgba(0,0,0,.2));
}

/* Badge durée */
.gml-duration-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    letter-spacing: .3px;
}

/* Overlay check */
.gml-check-overlay {
    position: absolute;
    inset: 0;
    background: rgba(163,113,247,.0);
    transition: background .2s;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 8px;
}
.gml-card--selected .gml-check-overlay,
.gml-card:hover .gml-check-overlay {
    background: rgba(163,113,247,.08);
}
.gml-checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 6px;
    background: rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    color: #fff;
    font-weight: 700;
    transition: all .18s;
    backdrop-filter: blur(4px);
}
.gml-checkbox--checked {
    background: #a371f7;
    border-color: #a371f7;
    box-shadow: 0 0 8px rgba(163,113,247,.6);
}

/* Play hover */
.gml-hover-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: rgba(255,255,255,.0);
    transition: color .2s;
    pointer-events: none;
}
.gml-card:hover .gml-hover-play { color: rgba(255,255,255,.6); }

/* Card body */
.gml-card-body { padding: 10px 12px 12px; }
.gml-card-title {
    font-size: .82rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gml-card-meta {
    font-size: .73rem;
    color: rgba(255,255,255,.4);
}

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.gml-card--skeleton { pointer-events: none; }

@keyframes gml-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.gml-skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,.04) 25%,
        rgba(255,255,255,.1)  50%,
        rgba(255,255,255,.04) 75%
    );
    background-size: 800px 100%;
    animation: gml-shimmer 1.5s infinite linear;
    border-radius: 4px;
}
.gml-skeleton--thumb {
    position: absolute;
    inset: 0;
    border-radius: 0;
}
.gml-skeleton--title {
    height: 12px;
    width: 80%;
    margin-bottom: 6px;
}
.gml-skeleton--meta {
    height: 10px;
    width: 50%;
}

/* ── Empty / Error ────────────────────────────────────────────────────────── */
.gml-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,.4);
}
.gml-empty-icon { font-size: 3rem; margin-bottom: 12px; }
.gml-empty p    { margin: 4px 0; font-size: .9rem; }
.gml-empty-sub  { font-size: .8rem; opacity: .6; }
.gml-error {
    grid-column: 1/-1;
    text-align: center;
    padding: 40px;
    color: #f87171;
    font-size: .9rem;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.gml-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 0;
}
.gml-page-btn {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    color: #e2e8f0;
    padding: 7px 16px;
    font-size: .85rem;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.gml-page-btn:hover:not(:disabled) {
    background: rgba(163,113,247,.15);
    border-color: rgba(163,113,247,.4);
}
.gml-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.gml-page-info { font-size: .85rem; color: rgba(255,255,255,.5); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.gml-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,.07);
    gap: 12px;
    flex-shrink: 0;
}
.gml-footer-info { font-size: .83rem; color: rgba(255,255,255,.35); }
.gml-footer-actions { display: flex; gap: 10px; }

.gml-btn-ghost {
    background: none;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    color: rgba(255,255,255,.6);
    padding: 9px 18px;
    font-size: .88rem;
    cursor: pointer;
    transition: all .2s;
}
.gml-btn-ghost:hover { background: rgba(255,255,255,.06); color: #fff; }

.gml-btn-confirm {
    background: linear-gradient(135deg, var(--accent), #a371f7);
    border: none;
    border-radius: 8px;
    color: #fff;
    padding: 9px 22px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 4px 12px rgba(163,113,247,.3);
}
.gml-btn-confirm:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(163,113,247,.45);
}
.gml-btn-confirm:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .gml-grid { grid-template-columns: repeat(3, 1fr); }
    .gml-search { width: 180px; }
}
@media (max-width: 600px) {
    .gml-grid       { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .gml-body       { padding: 14px 14px; }
    .gml-header     { padding: 14px 16px; }
    .gml-footer     { padding: 12px 16px; flex-wrap: wrap; }
    .gml-search     { width: 140px; }
    .gml-title      { font-size: .95rem; }
    .gml-modal      { border-radius: 12px; }
}

/* ── Bouton Aperçu rapide (apparu au hover) ───────────────────────────────── */
.gml-preview-btn {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: rgba(0, 0, 0, .78);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 20px;
    color: #fff;
    font-size: .73rem;
    font-weight: 600;
    padding: 5px 14px;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease, background .15s;
    backdrop-filter: blur(4px);
    z-index: 3;
    letter-spacing: .3px;
    pointer-events: none;
}
.gml-card:hover .gml-preview-btn {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.gml-preview-btn:hover {
    background: rgba(163, 113, 247, .85);
    border-color: rgba(163, 113, 247, .6);
    box-shadow: 0 4px 12px rgba(163, 113, 247, .4);
}


/* ===== css/mahayawen-studio.css?v=2602240010 ===== */
/**
 * MAHAYAWEN STUDIO v2.0
 * CSS — Interface 3 panneaux : Chat · Médiathèque · Preview
 * v2.0 : Voix interim, workflows, historique, content blocks, Unsplash suggestions
 */

/* ═══ STUDIO ROOT ═══════════════════════════════════════════════════════════ */

.mws-studio {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 60px);
    background: #080510;
    overflow: hidden;
    position: relative; /* needed for history panel absolute positioning */
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    color: rgba(255,248,240,0.9);
}

/* ═══ HEADER ════════════════════════════════════════════════════════════════ */

.mws-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    background: rgba(8,5,16,0.97);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-shrink: 0;
    gap: 12px;
    position: relative;
    z-index: 20;
}

.mws-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(109,40,217,0.5) 20%, var(--accent-light) 50%, rgba(109,40,217,0.5) 80%, transparent);
    background-size: 200% 100%;
    animation: mwsHdrLine 5s ease infinite;
}

@keyframes mwsHdrLine {
    0%, 100% { background-position: 0% 50%; opacity: 0.6; }
    50% { background-position: 100% 50%; opacity: 1; }
}

.mws-header-left,
.mws-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mws-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9px;
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mws-back-btn:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.18);
    color: #fff;
    transform: translateX(-2px);
}

.mws-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    background: linear-gradient(135deg, rgba(109,40,217,0.28), color-mix(in srgb, var(--accent) 18%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.09em;
    color: var(--accent-light);
    text-transform: uppercase;
    white-space: nowrap;
}

.mws-badge-star {
    font-size: 11px;
    animation: mwsStarSpin 10s linear infinite;
    display: inline-block;
}

@keyframes mwsStarSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.mws-formation-name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,248,240,0.88);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mws-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
}

.mws-stat span {
    font-weight: 700;
    color: var(--accent-light);
}

.mws-stat-sep {
    opacity: 0.3;
}

.mws-publish-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(16,185,129,0.25), rgba(52,211,153,0.18));
    border: 1px solid rgba(16,185,129,0.38);
    border-radius: 10px;
    color: #34d399;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s ease;
    white-space: nowrap;
}

.mws-publish-btn:hover {
    background: linear-gradient(135deg, rgba(16,185,129,0.4), rgba(52,211,153,0.28));
    box-shadow: 0 4px 16px rgba(16,185,129,0.28);
    transform: translateY(-1px);
}

/* ═══ BODY — 3 panneaux ═════════════════════════════════════════════════════ */

.mws-body {
    display: grid;
    grid-template-columns: minmax(400px,2fr) 240px minmax(260px,1fr);
    flex: 1;
    overflow: hidden;
    height: 0; /* force child overflow */
    min-height: 0;
}

.mws-panel {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
    min-height: 0;
}

.mws-panel:last-child { border-right: none; }

.mws-panel-hd {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 15px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.09em;
    color: rgba(167,139,250,0.75);
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    flex-shrink: 0;
}

/* ═══ CHAT PANEL ════════════════════════════════════════════════════════════ */

.mws-p-chat { background: rgba(7,5,15,0.9); }

.mws-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 25%, transparent) transparent;
}

.mws-messages::-webkit-scrollbar { width: 4px; }
.mws-messages::-webkit-scrollbar-track { background: transparent; }
.mws-messages::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 2px; }

/* Messages */

.mws-msg {
    display: flex;
    gap: 9px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.4,0.64,1);
}

.mws-msg.visible {
    opacity: 1;
    transform: translateY(0);
}

.mws-msg-user { flex-direction: row-reverse; }

.mws-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
    animation: mwsAvatarGlow 4s ease-in-out infinite;
}

@keyframes mwsAvatarGlow {
    0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent); }
    50% { box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent); }
}

.mws-bubble { max-width: 88%; }
.mws-msg-user .mws-bubble { display: flex; flex-direction: column; align-items: flex-end; }

.mws-bubble-text {
    padding: 10px 13px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.55;
}

.mws-msg-assistant .mws-bubble-text {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 4px 16px 16px 16px;
    color: rgba(255,248,240,0.88);
}

.mws-msg-user .mws-bubble-text {
    background: linear-gradient(135deg, rgba(109,40,217,0.32), color-mix(in srgb, var(--accent) 22%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 16px 4px 16px 16px;
    color: rgba(255,255,255,0.95);
}

.mws-bubble-text strong { color: var(--accent-light); }
.mws-bubble-text em { color: rgba(255,255,255,0.55); font-style: italic; text-decoration: underline dotted; cursor: pointer; }
.mws-bubble-text code { background: color-mix(in srgb, var(--accent) 18%, transparent); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

.mws-bubble-extra { margin-top: 7px; width: 100%; }

/* Typing dots */

.mws-typing-msg .mws-bubble { }

.mws-dots {
    display: flex;
    gap: 4px;
    padding: 11px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 4px 16px 16px 16px;
    width: fit-content;
}

.mws-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(167,139,250,0.65);
    animation: mwsDot 1.2s ease-in-out infinite;
}

.mws-dots span:nth-child(2) { animation-delay: 0.2s; }
.mws-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes mwsDot {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
    40% { transform: scale(1.3); opacity: 1; }
}

/* Proposal */

.mws-proposal {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 12px;
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 4px;
}

.mws-prop-analysis {
    font-size: 11.5px;
    color: rgba(200,185,220,0.65);
    font-style: italic;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mws-prop-mod {
    padding: 7px 9px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mws-prop-mod-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.88); }
.mws-prop-mod-files { font-size: 11px; color: rgba(200,185,220,0.5); }

.mws-prop-tips {
    font-size: 11px;
    color: rgba(167,139,250,0.65);
    padding: 6px 8px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-radius: 6px;
}

.mws-prop-btns { display: flex; gap: 7px; padding-top: 2px; }

.mws-btn-apply {
    flex: 1;
    padding: 8px 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border: none;
    border-radius: 9px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}

.mws-btn-apply:hover { transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 50%, transparent); }
.mws-btn-apply:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.mws-btn-reject {
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9px;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.18s ease;
}

.mws-btn-reject:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Place card */

.mws-place-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mws-place-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}

.mws-select {
    width: 100%;
    padding: 8px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    cursor: pointer;
    outline: none;
}

.mws-select:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

.mws-btn-place-confirm {
    width: 100%;
    padding: 9px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 32%, transparent);
}

.mws-btn-place-confirm:hover { transform: translateY(-1px); box-shadow: 0 5px 18px color-mix(in srgb, var(--accent) 48%, transparent); }
.mws-btn-place-confirm:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* Input zone */

.mws-input-zone {
    flex-shrink: 0;
    padding: 11px;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(7,5,15,0.98);
}

.mws-quick-row {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.mws-qbtn {
    padding: 5px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.mws-qbtn:hover {
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent-light);
}

.mws-input-row {
    display: flex;
    gap: 7px;
    align-items: center;
}

.mws-voice-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.11);
    color: rgba(255,255,255,0.55);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
    overflow: visible;
}

.mws-voice-btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent-light); }

.mws-voice-btn.listening {
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.5);
    color: #ef4444;
    animation: mwsVoicePulse 1s ease-in-out infinite;
}

@keyframes mwsVoicePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    50% { box-shadow: 0 0 0 6px rgba(239,68,68,0.18); }
}

.mws-input {
    flex: 1;
    padding: 9px 13px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: rgba(255,248,240,0.92);
    font-size: 13px;
    outline: none;
    transition: all 0.2s ease;
}

.mws-input:focus {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
}

.mws-input::placeholder { color: rgba(255,255,255,0.22); font-size: 12.5px; }

.mws-send-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border: none;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}

.mws-send-btn:hover {
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ═══ MEDIA PANEL ═══════════════════════════════════════════════════════════ */

.mws-p-media { background: rgba(7,5,14,0.9); }

.mws-filters {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.mws-flt {
    padding: 3px 7px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: rgba(255,255,255,0.4);
    font-size: 10.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.mws-flt:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: rgba(255,255,255,0.7); }
.mws-flt.active { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--accent-light); }

/* Drop zone */

.mws-drop-zone {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 22px 14px;
    border: 1.5px dashed color-mix(in srgb, var(--accent) 22%, transparent);
    margin: 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34,1.4,0.64,1);
    text-align: center;
}

.mws-drop-zone.drag-over {
    border-color: color-mix(in srgb, var(--accent) 65%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 9%, transparent), 0 0 40px color-mix(in srgb, var(--accent) 6%, transparent) inset;
    transform: scale(1.01);
}

.mws-drop-zone.compact {
    padding: 10px 14px;
    gap: 5px;
    min-height: auto;
}

.mws-drop-zone.compact .mws-drop-text,
.mws-drop-zone.compact .mws-drop-sub { display: none; }

.mws-drop-zone.compact .mws-drop-icon { font-size: 18px; }

.mws-drop-icon { font-size: 32px; opacity: 0.55; }
.mws-drop-text { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.65); }
.mws-drop-sub { font-size: 11.5px; color: rgba(255,255,255,0.3); line-height: 1.4; }

.mws-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    border-radius: 9px;
    color: var(--accent-light);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

.mws-upload-label:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); transform: translateY(-1px); }

/* Media grid */

.mws-media-grid {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    padding: 0 10px 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 25%, transparent) transparent;
}

.mws-media-grid::-webkit-scrollbar { width: 4px; }
.mws-media-grid::-webkit-scrollbar-track { background: transparent; }
.mws-media-grid::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 2px; }

.mws-media-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 11px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34,1.3,0.64,1);
    position: relative;
    animation: mwsCardIn 0.3s cubic-bezier(0.34,1.4,0.64,1) both;
}

@keyframes mwsCardIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.mws-media-card:hover {
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.mws-media-card:hover .mws-mc-actions { opacity: 1; }

.mws-media-card.uploaded { border-color: rgba(16,185,129,0.3); }

.mws-mc-thumb {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    position: relative;
    font-size: 22px;
}

.mws-mc-dur {
    position: absolute;
    bottom: 3px; right: 5px;
    font-size: 9.5px; font-weight: 700;
    background: rgba(0,0,0,0.72);
    color: #fff;
    padding: 2px 5px;
    border-radius: 4px;
}

.mws-mc-check {
    position: absolute;
    top: 4px; right: 5px;
    width: 15px; height: 15px;
    background: #10b981;
    border-radius: 50%;
    font-size: 9px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}

.mws-mc-name {
    padding: 5px 7px;
    font-size: 10.5px;
    color: rgba(255,255,255,0.68);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mws-mc-actions {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    gap: 3px;
    padding: 5px;
    background: rgba(0,0,0,0.72);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.mws-mc-btn {
    flex: 1;
    padding: 5px;
    border-radius: 6px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mws-mc-place { background: color-mix(in srgb, var(--accent) 75%, transparent); color: #fff; }
.mws-mc-place:hover { background: color-mix(in srgb, var(--accent) 100%, transparent); }
.mws-mc-del { background: rgba(239,68,68,0.65); color: #fff; }
.mws-mc-del:hover { background: rgba(239,68,68,0.9); }

/* ═══ PREVIEW PANEL ═════════════════════════════════════════════════════════ */

.mws-p-preview { background: rgba(8,5,16,0.92); }

.mws-add-mod-btn {
    margin-left: auto;
    padding: 4px 10px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    border-radius: 8px;
    color: var(--accent-light);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.mws-add-mod-btn:hover {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    transform: translateY(-1px);
}

.mws-preview {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 25%, transparent) transparent;
}

.mws-preview::-webkit-scrollbar { width: 4px; }
.mws-preview::-webkit-scrollbar-track { background: transparent; }
.mws-preview::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 2px; }

.mws-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 8px;
    text-align: center;
    padding: 24px;
}

.mws-preview-empty-icon { font-size: 44px; opacity: 0.35; }
.mws-preview-empty-title { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.4); }
.mws-preview-empty-sub { font-size: 12px; color: rgba(255,255,255,0.22); }

/* Modules */

.mws-prev-mod {
    background: rgba(255,255,255,0.025);
    border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
    border-radius: 13px;
    overflow: hidden;
    transition: border-color 0.3s ease;
    animation: mwsModIn 0.35s cubic-bezier(0.34,1.4,0.64,1) both;
}

@keyframes mwsModIn {
    from { opacity: 0; transform: translateX(12px) scale(0.97); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

.mws-prev-mod.mws-flash {
    border-color: color-mix(in srgb, var(--accent) 65%, transparent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 28%, transparent);
    animation: mwsFlash 0.6s ease;
}

@keyframes mwsFlash {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 50%, transparent); }
}

.mws-prev-mod-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 13px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.mws-prev-mod-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
}

.mws-prev-mod-count {
    font-size: 10.5px;
    color: rgba(167,139,250,0.7);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.mws-prev-lessons {
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Lessons */

.mws-prev-lesson {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
    animation: mwsLessonIn 0.28s cubic-bezier(0.34,1.4,0.64,1) both;
}

@keyframes mwsLessonIn {
    from { opacity: 0; transform: translateX(6px); }
    to { opacity: 1; transform: translateX(0); }
}

.mws-prev-lesson:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    transform: translateX(3px);
    box-shadow: -2px 0 0 color-mix(in srgb, var(--accent) 50%, transparent);
}

.mws-prev-lesson-icon { font-size: 13px; flex-shrink: 0; }
.mws-prev-lesson-title { flex: 1; font-size: 12px; color: rgba(255,255,255,0.78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mws-prev-lesson-dur { font-size: 10.5px; color: rgba(255,255,255,0.3); flex-shrink: 0; }

.mws-prev-add-lesson {
    width: 100%;
    padding: 6px;
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.28);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.18s ease;
    margin-top: 2px;
}

.mws-prev-add-lesson:hover {
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
    color: rgba(167,139,250,0.75);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* ═══ V2.0 — NOUVEAUX COMPOSANTS ════════════════════════════════════════════ */

/* History button in header */
.mws-history-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 6px;
}
.mws-history-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent-light);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Workflow buttons row */
.mws-workflow-row {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.mws-wbtn {
    padding: 5px 11px;
    border-radius: 18px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
    font-weight: 500;
}

.mws-wbtn-complete {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 16%, transparent));
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent-light);
}
.mws-wbtn-complete:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 38%, transparent), color-mix(in srgb, var(--accent) 28%, transparent));
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent);
}

.mws-wbtn-launch {
    background: linear-gradient(135deg, rgba(16,185,129,0.16), rgba(5,150,105,0.12));
    border-color: rgba(16,185,129,0.32);
    color: #6ee7b7;
}
.mws-wbtn-launch:hover {
    background: linear-gradient(135deg, rgba(16,185,129,0.28), rgba(5,150,105,0.22));
    border-color: rgba(16,185,129,0.55);
    transform: translateY(-1px);
}

.mws-wbtn-optimize {
    background: linear-gradient(135deg, rgba(245,158,11,0.16), rgba(217,119,6,0.12));
    border-color: rgba(245,158,11,0.32);
    color: #fcd34d;
}
.mws-wbtn-optimize:hover {
    background: linear-gradient(135deg, rgba(245,158,11,0.28), rgba(217,119,6,0.22));
    border-color: rgba(245,158,11,0.55);
    transform: translateY(-1px);
}

/* Voice waveform animation */
.mws-waveform {
    display: none;
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    gap: 2px;
    align-items: flex-end;
    height: 10px;
}

.mws-waveform span {
    display: block;
    width: 2px;
    background: #ef4444;
    border-radius: 1px;
    animation: mwsWave 0.8s ease-in-out infinite;
}
.mws-waveform span:nth-child(1) { height: 4px; animation-delay: 0s; }
.mws-waveform span:nth-child(2) { height: 8px; animation-delay: 0.1s; }
.mws-waveform span:nth-child(3) { height: 10px; animation-delay: 0.2s; }
.mws-waveform span:nth-child(4) { height: 6px; animation-delay: 0.3s; }
.mws-waveform span:nth-child(5) { height: 4px; animation-delay: 0.4s; }

@keyframes mwsWave {
    0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* Input wrap for interim transcript */
.mws-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}

.mws-input-wrap .mws-input {
    flex: none;
}

.mws-interim {
    display: none;
    font-size: 11px;
    color: rgba(167,139,250,0.6);
    font-style: italic;
    padding: 3px 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: mwsInterimPulse 1.5s ease-in-out infinite;
}

@keyframes mwsInterimPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* History panel */
.mws-history-panel {
    position: absolute;
    top: 54px; right: 0;
    width: 340px;
    max-height: calc(100% - 60px);
    background: #0f0b1e;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    border-radius: 14px 0 0 14px;
    display: flex;
    flex-direction: column;
    z-index: 100;
    box-shadow: -8px 8px 40px rgba(0,0,0,0.5);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.34,1.1,0.64,1);
    overflow: hidden;
}

.mws-history-panel.open {
    transform: translateX(0);
}

.mws-history-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}

.mws-history-close {
    background: none; border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer; font-size: 14px;
    padding: 4px 8px; border-radius: 6px;
    transition: all 0.15s ease;
}
.mws-history-close:hover { color: #fff; background: rgba(255,255,255,0.08); }

.mws-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.mws-history-empty {
    color: rgba(255,255,255,0.35);
    font-size: 12px;
    text-align: center;
    padding: 24px 16px;
    line-height: 1.6;
}

.mws-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 6px;
    transition: all 0.15s ease;
}

.mws-history-item:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}

.mws-history-item-info { flex: 1; min-width: 0; }

.mws-history-item-label {
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.82);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mws-history-item-meta {
    font-size: 10.5px;
    color: rgba(255,255,255,0.35);
    margin-top: 2px;
}

.mws-history-restore {
    padding: 5px 10px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 7px;
    color: var(--accent-light);
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.mws-history-restore:hover {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.mws-save-version-btn {
    margin: 8px;
    padding: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 10px;
    color: var(--accent-light);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
.mws-save-version-btn:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 32%, transparent), color-mix(in srgb, var(--accent) 22%, transparent));
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Restore confirm dialog (replaces browser confirm()) */
.mws-restore-dialog {
    position: absolute;
    inset: 0;
    background: rgba(8,5,16,0.88);
    backdrop-filter: blur(8px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mws-restore-dialog.visible { opacity: 1; }

.mws-restore-dialog-inner {
    background: linear-gradient(145deg, #130e24, #1a1230);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    width: 100%;
    max-width: 280px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    transform: scale(0.92);
    transition: transform 0.22s cubic-bezier(0.34,1.2,0.64,1);
}

.mws-restore-dialog.visible .mws-restore-dialog-inner { transform: scale(1); }

.mws-restore-icon { font-size: 2rem; margin-bottom: 10px; }

.mws-restore-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin-bottom: 10px;
}

.mws-restore-desc {
    font-size: 12px;
    color: rgba(196,181,253,0.8);
    line-height: 1.5;
    margin-bottom: 8px;
}
.mws-restore-desc strong { color: var(--accent-light); }
.mws-restore-desc small { color: rgba(255,255,255,0.35); font-size: 10.5px; }

.mws-restore-warn {
    font-size: 11px;
    color: rgba(251,191,36,0.75);
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.18);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 16px;
}

.mws-restore-btns {
    display: flex;
    gap: 8px;
}

.mws-restore-cancel {
    flex: 1;
    padding: 9px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.mws-restore-cancel:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }

.mws-restore-ok {
    flex: 1.4;
    padding: 9px;
    background: linear-gradient(135deg, var(--accent), var(--accent));
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}
.mws-restore-ok:hover {
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    transform: translateY(-1px);
}

/* Content block (scripts, emails) */
.mws-content-block {
    margin-top: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.25);
    overflow: hidden;
}

.mws-cb-script { border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.mws-cb-email  { border-color: rgba(16,185,129,0.25); }
.mws-cb-posts  { border-color: rgba(245,158,11,0.25); }

.mws-cb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mws-cb-title {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}

.mws-copy-btn {
    padding: 4px 10px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 6px;
    color: var(--accent-light);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.mws-copy-btn:hover {
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.mws-cb-body {
    padding: 12px;
    font-size: 12px;
    color: rgba(255,248,240,0.75);
    line-height: 1.7;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* Email sequence */
.mws-email-sequence {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mws-email-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: rgba(16,185,129,0.06);
    border: 1px solid rgba(16,185,129,0.18);
    border-radius: 10px;
}

.mws-email-day {
    min-width: 36px;
    font-size: 11px;
    font-weight: 700;
    color: #6ee7b7;
    padding-top: 2px;
}

.mws-email-subject {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}

.mws-email-preview {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    font-style: italic;
    margin: 2px 0 4px;
}

.mws-email-body {
    font-size: 11.5px;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
    max-height: 80px;
    overflow: hidden;
}

.mws-email-cta {
    font-size: 11px;
    color: #6ee7b7;
    margin-top: 4px;
    font-weight: 500;
}

/* Social posts */
.mws-social-posts {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mws-social-post {
    padding: 10px 12px;
    background: rgba(245,158,11,0.06);
    border: 1px solid rgba(245,158,11,0.18);
    border-radius: 10px;
}

.mws-social-platform {
    font-size: 12px;
    font-weight: 700;
    color: #fcd34d;
    margin-bottom: 6px;
}

.mws-social-content {
    font-size: 12px;
    color: rgba(255,255,255,0.72);
    line-height: 1.5;
    margin-bottom: 6px;
    max-height: 80px;
    overflow: hidden;
}

.mws-social-tags {
    display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px;
}
.mws-social-tags span {
    font-size: 10.5px;
    color: rgba(167,139,250,0.7);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    padding: 1px 6px;
    border-radius: 8px;
}

/* Optimization audit */
.mws-audit {
    margin-top: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
}

.mws-audit-score {
    font-size: 22px;
    font-weight: 800;
    padding: 14px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.2);
}

.mws-audit-section {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 12px 4px;
    margin-top: 4px;
}

.mws-audit-strength {
    font-size: 12px;
    color: rgba(110,231,183,0.8);
    padding: 3px 14px;
}

.mws-optim-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 7px 12px;
    margin: 2px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
}

.mws-optim-prio { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.mws-optim-action { font-size: 12px; color: rgba(255,255,255,0.78); font-weight: 500; }
.mws-optim-impact { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.mws-quickwin {
    font-size: 12px;
    color: #fcd34d;
    padding: 4px 14px 6px;
}

/* Unsplash image suggestions */
.mws-img-suggestions {
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.mws-img-sugg-hd {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.mws-img-sugg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.mws-img-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.2s ease;
    aspect-ratio: 16/11;
    background: rgba(255,255,255,0.04);
}

.mws-img-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: scale(1.03); }
.mws-img-card.added { border-color: rgba(16,185,129,0.5); opacity: 0.6; }
.mws-img-card.loading { opacity: 0.5; pointer-events: none; }

.mws-img-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.mws-img-card-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--accent) 70%, transparent);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.mws-img-card:hover .mws-img-card-overlay { opacity: 1; }

/* Local SVG stock cards — SVGs fill correctly without cover */
.mws-img-local img { object-fit: contain; background: rgba(255,255,255,0.03); }

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
    .mws-body { grid-template-columns: 320px 1fr; }
    .mws-p-media { display: none; }
}

@media (max-width: 700px) {
    .mws-body { grid-template-columns: 1fr; }
    .mws-p-preview { display: none; }
    .mws-badge { display: none; }
    .mws-stats { display: none; }
    .mws-formation-name { max-width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
    .mws-msg, .mws-prev-mod, .mws-prev-lesson, .mws-media-card {
        animation: none !important; opacity: 1 !important; transform: none !important;
    }
    .mws-header::after { animation: none !important; }
    .mws-badge-star { animation: none !important; }
    .mws-avatar { animation: none !important; }
}

/* ── Create formation/module buttons ───────────────────── */
.mws-create-row {
    display: flex;
    gap: 8px;
    padding: 6px 14px 2px;
    flex-wrap: wrap;
}
.mws-cbtn {
    flex: 1;
    min-width: 130px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    text-align: center;
}
.mws-cbtn-formation {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent-light);
}
.mws-cbtn-formation:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 38%, transparent), color-mix(in srgb, var(--accent) 30%, transparent));
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
    transform: translateY(-1px);
}
.mws-cbtn-module {
    background: linear-gradient(135deg, rgba(16,185,129,0.16), rgba(5,150,105,0.12));
    border-color: rgba(16,185,129,0.38);
    color: #34d399;
}
.mws-cbtn-module:hover {
    background: linear-gradient(135deg, rgba(16,185,129,0.28), rgba(5,150,105,0.22));
    border-color: rgba(16,185,129,0.6);
    transform: translateY(-1px);
}


/* ===== css/first-formation-onboarding.css?v=2602240010 ===== */
/* ============================================================
   FIRST FORMATION ONBOARDING v1.0
   Préfixe : .ffo-*
   Palette : #0a0a10 (noir) · #f59e0b (or) · var(--accent-light) (violet) · #10b981 (vert)
   ============================================================ */

/* ── Overlay ─────────────────────────────────────────────── */
.ffo-overlay {
    position: fixed;
    inset: 0;
    background: #06060d;
    z-index: 1100;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.ffo-overlay.ffo-fadeout {
    animation: ffo-fadeout .6s ease forwards;
}
@keyframes ffo-fadeout { to { opacity: 0; } }

/* ── Canvas fond particules ──────────────────────────────── */
.ffo-bg-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* ── Stage (conteneur des écrans) ───────────────────────── */
.ffo-stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* ── Barre d'interface bas ───────────────────────────────── */
.ffo-ui-bar {
    position: absolute;
    bottom: 24px;
    left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    z-index: 10;
    pointer-events: none;
}

.ffo-skip-btn {
    pointer-events: all;
    background: none;
    border: none;
    color: rgba(255,255,255,.28);
    font-size: 12px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: color .2s, background .2s;
    letter-spacing: .02em;
}
.ffo-skip-btn:hover { color: rgba(255,255,255,.55); background: rgba(255,255,255,.05); }

.ffo-sound-btn {
    pointer-events: all;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.5);
    font-size: 16px;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 8px;
    transition: background .2s;
}
.ffo-sound-btn:hover { background: rgba(255,255,255,.1); }

/* ── Écrans ──────────────────────────────────────────────── */
.ffo-screen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: opacity .45s ease, transform .45s ease;
}

.ffo-screen.ffo-screen-enter {
    opacity: 0;
    transform: translateY(18px);
}

.ffo-screen.ffo-screen-exit {
    opacity: 0;
    transform: translateY(-18px);
    pointer-events: none;
}

/* ── Contenu écran commun ────────────────────────────────── */
.ffo-s {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
    max-width: 620px;
    width: 100%;
}

.ffo-s-center {
    gap: 22px;
}

/* ── Indicateur de progression (dots) ───────────────────── */
.ffo-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.ffo-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    transition: background .3s, transform .3s;
}
.ffo-dot.ffo-dot-done   { background: rgba(245,158,11,.45); }
.ffo-dot.ffo-dot-active { background: #f59e0b; transform: scale(1.3); }

/* ── Écran 1 : Accueil ───────────────────────────────────── */
.ffo-s1 {
    position: relative;
    gap: 32px;
}

/* Lueur centrale dorée */
.ffo-s1-glow {
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,.12) 0%, rgba(245,158,11,0) 70%);
    pointer-events: none;
    animation: ffo-glow-pulse 4s ease-in-out infinite;
}
@keyframes ffo-glow-pulse {
    0%, 100% { transform: scale(1);    opacity: .7; }
    50%       { transform: scale(1.15); opacity: 1;  }
}

/* Anneaux décoratifs */
.ffo-s1-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(245,158,11,.08);
    pointer-events: none;
    animation: ffo-ring-expand 8s linear infinite;
}
.ffo-ring1 { width: 320px; height: 320px; animation-delay: 0s; }
.ffo-ring2 { width: 500px; height: 500px; animation-delay: 2s; opacity: .5; }

@keyframes ffo-ring-expand {
    0%   { transform: scale(.85); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: scale(1.3);  opacity: 0; }
}

/* Titre "lettre par lettre" */
.ffo-typed-title {
    font-size: clamp(32px, 6vw, 58px);
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0;
    min-height: 1.2em;
}

.ffo-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(6px);
    animation: ffo-char-appear .5s ease forwards;
}
@keyframes ffo-char-appear {
    to { opacity: 1; transform: translateY(0); }
}

/* Sous-titre */
.ffo-s1-sub {
    font-size: 16px;
    color: rgba(255,255,255,.5);
    line-height: 1.6;
    margin: 0;
    max-width: 400px;
    transition: opacity .9s ease, transform .9s ease;
}

/* ── Boutons ──────────────────────────────────────────────── */
.ffo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, opacity .2s;
    letter-spacing: .01em;
}

.ffo-btn:disabled {
    opacity: .38;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.ffo-btn.ffo-btn-gold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #0a0a0a;
    box-shadow: 0 4px 20px rgba(245,158,11,.3);
}
.ffo-btn.ffo-btn-gold:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(245,158,11,.45);
}

.ffo-btn.ffo-btn-lg {
    padding: 16px 36px;
    font-size: 16px;
    border-radius: 14px;
}

/* Respiration */
.ffo-btn-pulse {
    animation: ffo-btn-breathe 2.8s ease-in-out infinite;
}
@keyframes ffo-btn-breathe {
    0%, 100% { box-shadow: 0 4px 20px rgba(245,158,11,.3); }
    50%       { box-shadow: 0 6px 32px rgba(245,158,11,.55); }
}
.ffo-btn-pulse:hover { animation: none; }

.ffo-arrow {
    display: inline-block;
    transition: transform .2s;
}
.ffo-btn:not(:disabled):hover .ffo-arrow { transform: translateX(4px); }

/* ── Écran 2 : Sujet ─────────────────────────────────────── */
.ffo-q-title {
    font-size: clamp(22px, 4.5vw, 38px);
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.ffo-q-sub {
    margin: -12px 0 0;
    font-size: 13px;
    color: rgba(255,255,255,.35);
}

.ffo-input-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
}

.ffo-big-input {
    width: 100%;
    box-sizing: border-box;
    background: none;
    border: none;
    border-bottom: 2px solid rgba(255,255,255,.15);
    color: #fff;
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 500;
    padding: 12px 4px;
    text-align: center;
    outline: none;
    caret-color: #f59e0b;
    transition: border-color .25s;
    font-family: inherit;
}
.ffo-big-input::placeholder { color: rgba(255,255,255,.25); }
.ffo-big-input:focus { border-bottom-color: rgba(245,158,11,.6); }
.ffo-big-input:focus + .ffo-input-underline { transform: scaleX(1); }

.ffo-input-underline {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f59e0b, transparent);
    transform: scaleX(0);
    transition: transform .35s ease;
    pointer-events: none;
}

/* ── Écran 3 : Audience ──────────────────────────────────── */
.ffo-audience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 520px;
}

.ffo-aud-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 18px 12px 14px;
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s;
    user-select: none;
}

.ffo-aud-card:hover {
    border-color: rgba(245,158,11,.4);
    background: rgba(245,158,11,.06);
    transform: translateY(-2px);
}

.ffo-aud-card.ffo-selected {
    border-color: #f59e0b;
    background: rgba(245,158,11,.1);
}

.ffo-aud-emoji { font-size: 28px; line-height: 1; }

.ffo-aud-label {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}

.ffo-aud-desc {
    font-size: 11px;
    color: rgba(255,255,255,.38);
    line-height: 1.3;
}

.ffo-aud-check {
    position: absolute;
    top: 8px; right: 8px;
    width: 18px; height: 18px;
    border: 1.5px solid rgba(255,255,255,.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    color: transparent;
    background: transparent;
    transition: all .2s;
}
.ffo-aud-card.ffo-selected .ffo-aud-check {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #0a0a0a;
    font-weight: 700;
}

/* ── Écran 4 : Format ────────────────────────────────────── */
.ffo-format-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 500px;
}

.ffo-fmt-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 12px 16px;
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s;
    user-select: none;
}
.ffo-fmt-card:hover {
    border-color: rgba(245,158,11,.4);
    background: rgba(245,158,11,.07);
    transform: translateY(-2px);
}
.ffo-fmt-card.ffo-selected {
    border-color: #f59e0b;
    background: rgba(245,158,11,.12);
    box-shadow: 0 0 0 1px rgba(245,158,11,.3), 0 4px 16px rgba(245,158,11,.15);
}

.ffo-fmt-emoji { font-size: 30px; line-height: 1; }
.ffo-fmt-label { font-size: 14px; font-weight: 700; color: #fff; }
.ffo-fmt-desc  { font-size: 11px; color: rgba(255,255,255,.38); }

/* ── Écran 5 : Magie ─────────────────────────────────────── */
.ffo-s5 {
    gap: 20px;
}

.ffo-s5-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #f59e0b;
    margin: 0;
    animation: ffo-eyebrow-pulse 2s ease-in-out infinite;
}
@keyframes ffo-eyebrow-pulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

.ffo-s5-title {
    font-size: clamp(20px, 4vw, 32px);
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -.01em;
}

.ffo-constel {
    display: block;
    max-width: 100%;
}

.ffo-s5-prog {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ffo-prog-track {
    position: relative;
    height: 4px;
    background: rgba(255,255,255,.08);
    border-radius: 2px;
    overflow: visible;
}

.ffo-prog-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24);
    border-radius: 2px;
    transition: width .8s cubic-bezier(.22,.61,.36,1);
}

.ffo-prog-dot {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 10px; height: 10px;
    background: #f59e0b;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(245,158,11,.6);
    transition: left .8s cubic-bezier(.22,.61,.36,1);
}

.ffo-prog-msg {
    font-size: 13px;
    color: rgba(255,255,255,.45);
    margin: 0;
    min-height: 1.4em;
    transition: opacity .3s;
}

/* ── Écran 6 : Révélation ────────────────────────────────── */
.ffo-s6 {
    gap: 24px;
    max-width: 560px;
}

.ffo-s6-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.ffo-s6-badge {
    font-size: 52px;
    animation: ffo-badge-pop .5s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes ffo-badge-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.ffo-s6-title {
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.ffo-s6-sub {
    font-size: 14px;
    color: rgba(255,255,255,.45);
    margin: 0;
}

/* Carte révélation */
.ffo-reveal-card {
    width: 100%;
    background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    border: 1px solid rgba(245,158,11,.2);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(245,158,11,.08) inset;
}

.ffo-rc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(245,158,11,.06);
}

.ffo-rc-emoji { font-size: 28px; flex-shrink: 0; }

.ffo-rc-meta { display: flex; flex-direction: column; gap: 3px; text-align: left; }

.ffo-rc-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.ffo-rc-sub {
    font-size: 11px;
    color: rgba(255,255,255,.35);
}

.ffo-rc-modules {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ffo-rc-mod {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 6px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    /* transition géré inline via JS */
}
.ffo-rc-mod:last-child { border-bottom: none; }

.ffo-rc-num {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(245,158,11,.15);
    color: #f59e0b;
    font-size: 10px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.ffo-rc-mname {
    font-size: 13px;
    color: rgba(255,255,255,.75);
    text-align: left;
}

/* ── Confetti ─────────────────────────────────────────────── */
@keyframes ffo-confetti-fall {
    0%   { transform: translateY(0)    rotate(0deg)    scale(1); opacity: .9; }
    80%  { opacity: .8; }
    100% { transform: translateY(105vh) rotate(720deg) scale(0.8); opacity: 0; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 520px) {
    .ffo-audience-grid,
    .ffo-format-grid { grid-template-columns: 1fr; }

    .ffo-typed-title { font-size: 28px; }
    .ffo-q-title     { font-size: 22px; }
    .ffo-btn         { padding: 12px 20px; font-size: 14px; }
    .ffo-btn.ffo-btn-lg { padding: 14px 26px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .ffo-char              { animation: none !important; opacity: 1; transform: none; }
    .ffo-btn-pulse         { animation: none !important; }
    .ffo-s1-glow,
    .ffo-s1-ring,
    .ffo-s5-eyebrow        { animation: none !important; }
    .ffo-screen            { transition: opacity .2s !important; }
}


/* ===== css/sacred-transitions.css?v=2602240010 ===== */
/**
 * SACRED TRANSITIONS v1.0 — Giri Academy
 * Transitions fluides · Journey Map · Breathing Overlay · Confetti
 */

/* ═══════════════════════════════════════════════════════════
   TRANSITIONS DE PAGE
═══════════════════════════════════════════════════════════ */

.academy-view-enter {
    animation: academySlideIn 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes academySlideIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stagger sur les listes */
.stagger-enter > * {
    animation: staggerFadeUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.stagger-enter > *:nth-child(1)  { animation-delay: 0ms; }
.stagger-enter > *:nth-child(2)  { animation-delay: 45ms; }
.stagger-enter > *:nth-child(3)  { animation-delay: 90ms; }
.stagger-enter > *:nth-child(4)  { animation-delay: 135ms; }
.stagger-enter > *:nth-child(5)  { animation-delay: 180ms; }
.stagger-enter > *:nth-child(n+6){ animation-delay: 220ms; }

@keyframes staggerFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Modals */
.sacred-modal-enter {
    animation: sacredModalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes sacredModalIn {
    from { opacity: 0; transform: scale(0.88) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Images blur → sharp */
.img-blur-load { filter: blur(10px); transition: filter 0.5s ease; }
.img-blur-load.loaded { filter: blur(0); }

/* Bouton pulsant CTA */
@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(167,139,250,0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(167,139,250,0); }
    100% { box-shadow: 0 0 0 0 rgba(167,139,250,0); }
}
.btn-pulse { animation: pulseRing 2.2s ease-in-out infinite; }

/* Checkmark celebration */
@keyframes checkExplode {
    0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
    60%  { transform: scale(1.35) rotate(8deg); opacity: 1; }
    80%  { transform: scale(0.92) rotate(-3deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.check-celebrate { animation: checkExplode 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }

/* Glow doré (complétion) */
@keyframes goldGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
    50%       { box-shadow: 0 0 22px 8px rgba(245,158,11,0.3); }
}
.gold-glow { animation: goldGlow 2s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════
   CONFETTI
═══════════════════════════════════════════════════════════ */

@keyframes sjmConfetti {
    from { opacity: 1; transform: translate(0,0) rotate(0deg); }
    to   { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 200px)) rotate(var(--rot, 720deg)); }
}

/* ═══════════════════════════════════════════════════════════
   STUDENT JOURNEY MAP
═══════════════════════════════════════════════════════════ */

.sjm-wrapper {
    padding: 32px 24px;
    max-width: 900px;
    margin: 0 auto;
}

.sjm-header {
    text-align: center;
    margin-bottom: 40px;
}

.sjm-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 6px;
}

.sjm-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.sjm-path-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 20px 0;
    position: relative;
}

/* Connecteur entre modules */
.sjm-connector {
    width: 60px;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.sjm-connector-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}

.sjm-connector--done .sjm-connector-fill { background: linear-gradient(90deg, #059669, #34d399); }

/* Nœud module */
.sjm-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.sjm-node:hover { transform: translateY(-4px); }

.sjm-node-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.12);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.sjm-node--done .sjm-node-icon {
    background: rgba(5,150,105,0.2);
    border-color: #34d399;
    box-shadow: 0 0 16px rgba(52,211,153,0.3);
}

.sjm-node--active .sjm-node-icon {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border-color: var(--accent-light);
    box-shadow: 0 0 16px rgba(167,139,250,0.3);
    animation: goldGlow 2s ease-in-out infinite;
}

.sjm-node--locked .sjm-node-icon {
    opacity: 0.4;
    filter: grayscale(1);
}

.sjm-check { color: #34d399; font-weight: 700; font-size: 20px; }

.sjm-node-label {
    text-align: center;
    max-width: 90px;
}

.sjm-node-title {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90px;
}

.sjm-node-meta {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Tooltip au survol */
.sjm-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20,20,35,0.95);
    border: 1px solid rgba(167,139,250,0.3);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--accent-light);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.sjm-node:hover .sjm-tooltip { opacity: 1; }

/* Avatar étudiant */
.sjm-avatar {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    filter: drop-shadow(0 2px 8px rgba(167,139,250,0.7));
    animation: avatarFloat 3s ease-in-out infinite;
    z-index: 2;
}

@keyframes avatarFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(-6px); }
}

/* Certificat final */
.sjm-certificate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 32px auto 0;
    padding: 20px;
    border-radius: 16px;
    border: 2px dashed rgba(255,255,255,0.1);
    max-width: 160px;
    text-align: center;
    transition: all 0.5s ease;
}

.sjm-certificate--earned {
    border-style: solid;
    border-color: #f59e0b;
    background: rgba(245,158,11,0.08);
    animation: goldGlow 2.5s ease-in-out infinite;
}

.sjm-cert-icon { font-size: 36px; }

.sjm-cert-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.sjm-certificate--earned .sjm-cert-label { color: #f59e0b; }

.sjm-empty {
    color: var(--text-muted);
    font-size: 14px;
    padding: 32px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   BREATHING OVERLAY (Delights)
═══════════════════════════════════════════════════════════ */

#delights-breathing {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sacredModalIn 0.6s cubic-bezier(0.34,1.2,0.64,1) both;
}

.breathing-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(15,10,30,0.92) 0%, rgba(5,5,15,0.97) 100%);
    backdrop-filter: blur(12px);
    cursor: pointer;
}

.breathing-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.breathing-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), rgba(167,139,250,0.1));
    border: 2px solid rgba(167,139,250,0.4);
    transform: scale(1);
    transition: transform 4s ease-in-out;
    box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 20%, transparent);
}

.breathing-text {
    font-size: 18px;
    color: rgba(255,255,255,0.75);
    margin: 0;
    font-weight: 300;
    letter-spacing: 1px;
}

.breathing-close {
    background: transparent;
    border: 1px solid rgba(167,139,250,0.3);
    color: rgba(167,139,250,0.7);
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 12px;
}

.breathing-close:hover {
    background: rgba(167,139,250,0.1);
    color: var(--accent-light);
}

/* ═══════════════════════════════════════════════════════════
   GAMIFICATION ADVANCED — LEVEL-UP · STREAK · BADGE
═══════════════════════════════════════════════════════════ */

/* ── Level-Up Flash ─────────────────────────────────────── */
@keyframes levelUpFlash {
    0%   { transform: scale(1);    opacity: 1; }
    20%  { transform: scale(1.18); opacity: 1; background: rgba(255,215,0,0.25); }
    50%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; background: transparent; }
}

.level-up-animate {
    animation: levelUpFlash 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Badge drop-in ──────────────────────────────────────── */
@keyframes badgeDrop {
    0%   { transform: translateY(-60px) scale(0.5) rotate(-15deg); opacity: 0; }
    60%  { transform: translateY(6px)   scale(1.15) rotate(3deg);  opacity: 1; }
    80%  { transform: translateY(-4px)  scale(0.95) rotate(-1deg); opacity: 1; }
    100% { transform: translateY(0)     scale(1)    rotate(0deg);  opacity: 1; }
}

.badge-unlock-animate {
    animation: badgeDrop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Streak flame color variants ────────────────────────── */
.sga-flame-orange { filter: drop-shadow(0 0 5px #f97316); }
.sga-flame-blue   { filter: drop-shadow(0 0 7px #3b82f6); color: #3b82f6; }
.sga-flame-violet { filter: drop-shadow(0 0 9px var(--accent-light)); color: var(--accent-light); }
.sga-flame-rainbow {
    filter: drop-shadow(0 0 10px rgba(167,139,250,0.9));
    animation: rainbowFlame 2s linear infinite;
}

@keyframes rainbowFlame {
    0%   { filter: drop-shadow(0 0 10px #f59e0b); }
    25%  { filter: drop-shadow(0 0 10px #ef4444); }
    50%  { filter: drop-shadow(0 0 10px var(--accent-light)); }
    75%  { filter: drop-shadow(0 0 10px #3b82f6); }
    100% { filter: drop-shadow(0 0 10px #f59e0b); }
}

/* ── Student Gamification Advanced Widget ───────────────── */
.sga-widget,
.sga-leaderboard {
    background: var(--bg-secondary, rgba(255,255,255,0.04));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sga-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sga-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text, #e2e8f0);
}

.sga-badge-live {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #10b981;
    border: 1px solid #10b981;
    border-radius: 4px;
    padding: 1px 6px;
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

.sga-level-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sga-avatar-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    transition: box-shadow 0.3s;
}

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

.sga-tier-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 4px;
}

.sga-level-num {
    font-size: 13px;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 6px;
}

.sga-level-num strong { color: var(--text, #e2e8f0); font-size: 15px; }

.sga-xp-bar-wrap { display: flex; align-items: center; gap: 8px; }

.sga-xp-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 99px;
    overflow: hidden;
}

.sga-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-light), var(--accent-light));
    border-radius: 99px;
    transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}

.sga-xp-text { font-size: 11px; color: var(--text-muted, #94a3b8); white-space: nowrap; }

.sga-streak-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
}

.sga-streak-flame { font-size: 20px; }

.sga-streak-days { font-size: 13px; color: var(--text-muted, #94a3b8); flex: 1; }
.sga-streak-days strong { color: var(--text, #e2e8f0); }

.sga-streak-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(249,115,22,0.15);
    color: #f97316;
}

.sga-streak-badge--violet { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-light); }
.sga-streak-badge--rainbow {
    background: linear-gradient(135deg, rgba(245,158,11,0.15), color-mix(in srgb, var(--accent) 15%, transparent));
    color: var(--accent-light);
}

.sga-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #94a3b8);
}

.sga-challenges { display: flex; flex-direction: column; gap: 6px; }

.sga-challenge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    transition: background 0.2s;
}

.sga-challenge--done {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.2);
}

.sga-challenge-icon { font-size: 14px; }
.sga-challenge-label { flex: 1; font-size: 13px; color: var(--text, #e2e8f0); }
.sga-challenge-xp { font-size: 11px; font-weight: 700; color: var(--accent-light); }

.sga-badges { display: flex; flex-wrap: wrap; gap: 8px; }

.sga-badge-item {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: default;
    transition: transform 0.2s;
}

.sga-badge-item:hover { transform: scale(1.15); }

.sga-badge-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    font-weight: 700;
}

/* Leaderboard */
.sga-lb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sga-lb-table th {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #94a3b8);
    padding: 0 8px 8px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.sga-lb-table td {
    padding: 8px;
    color: var(--text, #e2e8f0);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sga-lb-me td { background: rgba(167,139,250,0.08); font-weight: 600; }
.sga-lb-rank { font-size: 16px; width: 28px; }
.sga-lb-level { color: var(--text-muted, #94a3b8); }
.sga-lb-xp { font-weight: 700; color: var(--accent-light); }
.sga-lb-streak { color: #f97316; }

.sga-refresh-btn {
    background: none;
    border: none;
    color: var(--text-muted, #94a3b8);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.2s, transform 0.3s;
}
.sga-refresh-btn:hover { color: var(--text, #e2e8f0); transform: rotate(180deg); }

.sga-loading { color: var(--text-muted, #94a3b8); font-size: 13px; text-align: center; padding: 20px 0; }
.sga-error   { color: #ef4444; font-size: 13px; text-align: center; padding: 10px 0; }
.sga-empty   { color: var(--text-muted, #94a3b8); font-size: 12px; font-style: italic; }

/* Profile frame glow for rainbow tier */
.sga-avatar-wrap.frame-rainbow {
    animation: rainbowFrame 3s linear infinite;
}

@keyframes rainbowFrame {
    0%   { box-shadow: 0 0 16px #f59e0b; }
    25%  { box-shadow: 0 0 16px #ef4444; }
    50%  { box-shadow: 0 0 16px var(--accent-light); }
    75%  { box-shadow: 0 0 16px #3b82f6; }
    100% { box-shadow: 0 0 16px #f59e0b; }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .academy-view-enter, .stagger-enter > *, .sacred-modal-enter,
    .check-celebrate, .btn-pulse, .gold-glow, .sjm-avatar,
    #delights-breathing, .level-up-animate, .badge-unlock-animate,
    .sga-flame-rainbow, .sga-avatar-wrap, .sga-badge-live {
        animation: none !important; transition: none !important;
    }
}


/* ===== css/formation-templates.css?v=2602240010 ===== */
/* ══════════════════════════════════════════════════════════════
   FORMATION TEMPLATES v1.0 — Glassmorphism Design
   ══════════════════════════════════════════════════════════════ */

/* ── Overlay ─────────────────────────────────────────────────── */
.ft-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: ft-fade-in 0.2s ease;
}

@keyframes ft-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal ───────────────────────────────────────────────────── */
.ft-modal {
    background: var(--bg-secondary, #1e1e2e);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    animation: ft-slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ft-slide-up {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ──────────────────────────────────────────────────── */
.ft-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
    flex-shrink: 0;
}

.ft-modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}

.ft-modal-close {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 8px;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: background 0.15s, color 0.15s;
}
.ft-modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ── Tabs ────────────────────────────────────────────────────── */
.ft-tabs {
    display: flex;
    gap: 4px;
    padding: 16px 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.ft-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 8px 16px;
    margin-bottom: -1px;
    border-radius: 8px 8px 0 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ft-tab:hover {
    color: var(--text-primary, #e2e8f0);
    background: rgba(255, 255, 255, 0.04);
}
.ft-tab-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* ── Body / Panels ───────────────────────────────────────────── */
.ft-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.ft-panel {
    display: none;
    padding: 24px;
    flex-direction: column;
    gap: 16px;
}
.ft-panel-active {
    display: flex;
}

/* ── Form elements ───────────────────────────────────────────── */
.ft-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ft-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ft-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-primary, #e2e8f0);
    font-size: 0.9375rem;
    padding: 10px 14px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
}
.ft-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.ft-textarea { min-height: 80px; }

.ft-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.ft-row .ft-form-group { flex: 1; }

/* ── Emoji picker ────────────────────────────────────────────── */
.ft-emoji-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 6px 12px;
    position: relative;
    transition: border-color 0.15s;
    white-space: nowrap;
}
.ft-emoji-trigger:hover { border-color: var(--accent); }
.ft-emoji-hint { font-size: 0.75rem; color: var(--text-secondary, #94a3b8); }

.ft-emoji-picker {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--bg-elevated, #2a2a3e);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px;
    width: 220px;
    z-index: 100;
}
.ft-emoji-opt {
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.375rem;
    padding: 4px;
    transition: background 0.1s;
    line-height: 1;
}
.ft-emoji-opt:hover { background: rgba(255, 255, 255, 0.12); }

/* ── Actions ─────────────────────────────────────────────────── */
.ft-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}

.ft-btn {
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 20px;
    transition: all 0.15s;
    font-family: inherit;
}
.ft-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.ft-btn-primary {
    background: var(--accent);
    color: #fff;
}
.ft-btn-primary:hover:not(:disabled) {
    background: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}
.ft-btn-secondary {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-secondary, #94a3b8);
}
.ft-btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary, #e2e8f0);
}
.ft-btn-full { width: 100%; justify-content: center; }

/* ── Templates grid ──────────────────────────────────────────── */
.ft-templates-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: var(--text-secondary, #94a3b8);
    justify-content: center;
}

.ft-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ft-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes ft-spin { to { transform: rotate(360deg); } }

.ft-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    padding: 20px 24px 24px;
}

.ft-empty {
    padding: 40px;
    text-align: center;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.9rem;
}

/* ── Template card ───────────────────────────────────────────── */
.ft-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    padding: 16px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ft-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.ft-card-emoji {
    font-size: 2.25rem;
    line-height: 1;
}

.ft-card-body { display: flex; flex-direction: column; gap: 6px; }
.ft-card-top  { display: flex; gap: 6px; flex-wrap: wrap; }

.ft-badge {
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    text-transform: uppercase;
}
.ft-badge-giri {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.ft-card-name {
    color: var(--text-primary, #e2e8f0);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.ft-card-desc {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.8rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ft-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.ft-card-meta span {
    color: var(--text-tertiary, #64748b);
    font-size: 0.75rem;
}

/* ── Preview panel (slide from right) ───────────────────────── */
.ft-preview {
    position: absolute;
    inset: 0;
    background: var(--bg-secondary, #1e1e2e);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}
.ft-preview-visible { transform: translateX(0); }

.ft-preview-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.ft-preview-back {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 8px;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 6px 12px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s;
}
.ft-preview-back:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #e2e8f0);
}

.ft-preview-emoji { font-size: 2.5rem; flex-shrink: 0; }

.ft-preview-info { display: flex; flex-direction: column; gap: 6px; }
.ft-preview-title {
    color: var(--text-primary, #e2e8f0);
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0;
}
.ft-preview-desc {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

/* ── Preview structure ───────────────────────────────────────── */
.ft-preview-structure {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ft-preview-struct-title {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.ft-module-row {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    overflow: hidden;
}

.ft-module-label {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary, #e2e8f0);
    display: flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 8px;
    padding: 10px 14px;
}

.ft-module-icon { font-size: 1rem; }

.ft-drip-badge {
    background: rgba(245, 158, 11, 0.15);
    border-radius: 5px;
    color: #f59e0b;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: auto;
    padding: 2px 6px;
}

.ft-lessons-list {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}

.ft-lesson-row {
    align-items: center;
    color: var(--text-secondary, #94a3b8);
    display: flex;
    font-size: 0.8125rem;
    gap: 8px;
    padding: 5px 14px 5px 28px;
}
.ft-lesson-row:hover { background: rgba(255, 255, 255, 0.03); }

.ft-lesson-icon { font-size: 0.875rem; flex-shrink: 0; }
.ft-lesson-title { flex: 1; }

.ft-preview-tag {
    background: rgba(16, 185, 129, 0.15);
    border-radius: 4px;
    color: #10b981;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    text-transform: uppercase;
}

/* ── Preview use form ────────────────────────────────────────── */
.ft-preview-use-form {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

/* ── Save-as-template info ───────────────────────────────────── */
.ft-save-info {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 10px;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
    padding: 12px 14px;
}
.ft-save-info strong { color: var(--text-primary, #e2e8f0); }

/* ── Scrollbar ───────────────────────────────────────────────── */
.ft-body::-webkit-scrollbar,
.ft-preview::-webkit-scrollbar { width: 4px; }
.ft-body::-webkit-scrollbar-track,
.ft-preview::-webkit-scrollbar-track { background: transparent; }
.ft-body::-webkit-scrollbar-thumb,
.ft-preview::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}


/* ===== css/academy-coupons.css?v=2602240010 ===== */
/**
 * Academy Coupons CSS — Glassmorphism design
 * Préfixe : .ga-coup-* (namespace Academy Coupons)
 */

/* ─── Layout principal ─────────────────────────────────────────────────────── */

.ga-coupons {
    padding: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.ga-coup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}

.ga-coup-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ga-coup-header-icon {
    width: 52px; height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent), #a855f7);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}

.ga-coup-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary, #fff);
    margin: 0;
}

.ga-coup-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-secondary, rgba(255,255,255,0.55));
    margin: 4px 0 0;
}

/* ─── KPI Cards ─────────────────────────────────────────────────────────────── */

.ga-coup-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.ga-coup-kpi {
    background: var(--color-surface, rgba(255,255,255,0.06));
    border: 1px solid var(--color-border, rgba(255,255,255,0.1));
    border-radius: 16px;
    padding: 18px 20px;
    backdrop-filter: blur(12px);
    transition: transform 0.2s, box-shadow 0.2s;
}

.ga-coup-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.ga-coup-kpi-val {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-primary, #fff);
    line-height: 1;
    margin-bottom: 4px;
}

.ga-coup-kpi-label {
    font-size: 0.78rem;
    color: var(--color-text-secondary, rgba(255,255,255,0.5));
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ga-coup-kpi-sub {
    font-size: 0.75rem;
    color: var(--color-accent, var(--accent));
    margin-top: 6px;
}

/* ─── Barre de recherche + filtres ────────────────────────────────────────── */

.ga-coup-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.ga-coup-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.ga-coup-search-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary, rgba(255,255,255,0.4));
    pointer-events: none;
}

.ga-coup-search {
    width: 100%;
    padding: 9px 12px 9px 38px;
    background: var(--color-surface, rgba(255,255,255,0.07));
    border: 1px solid var(--color-border, rgba(255,255,255,0.12));
    border-radius: 10px;
    color: var(--color-text-primary, #fff);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.ga-coup-search:focus { border-color: var(--accent); }
.ga-coup-search::placeholder { color: var(--color-text-secondary, rgba(255,255,255,0.4)); }

.ga-coup-filter {
    padding: 8px 14px;
    background: var(--color-surface, rgba(255,255,255,0.07));
    border: 1px solid var(--color-border, rgba(255,255,255,0.12));
    border-radius: 10px;
    color: var(--color-text-primary, #fff);
    font-size: 0.85rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.ga-coup-filter:focus { border-color: var(--accent); }
.ga-coup-filter option { background: #1a1a2e; }

/* ─── Tableau des coupons ──────────────────────────────────────────────────── */

.ga-coup-table-wrap {
    background: var(--color-surface, rgba(255,255,255,0.05));
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-radius: 16px;
    overflow: hidden;
}

.ga-coup-table {
    width: 100%;
    border-collapse: collapse;
}

.ga-coup-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-secondary, rgba(255,255,255,0.45));
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
    background: rgba(0,0,0,0.15);
    white-space: nowrap;
}

.ga-coup-table td {
    padding: 14px 16px;
    font-size: 0.875rem;
    color: var(--color-text-primary, #fff);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: middle;
}

.ga-coup-table tr:last-child td { border-bottom: none; }

.ga-coup-table tr:hover td { background: rgba(255,255,255,0.03); }

/* Code promo */
.ga-coup-code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--accent-light);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.ga-coup-code:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); }

.ga-coup-code-copy {
    opacity: 0.6;
    font-size: 11px;
    transition: opacity 0.15s;
}

.ga-coup-code:hover .ga-coup-code-copy { opacity: 1; }

/* Badges type */
.ga-coup-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.ga-coup-badge.percent {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.ga-coup-badge.fixed {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

/* Status badge */
.ga-coup-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

.ga-coup-status.active {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
}

.ga-coup-status.inactive {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.ga-coup-status.expired {
    background: rgba(156, 163, 175, 0.12);
    color: #9ca3af;
}

.ga-coup-status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Progress bar utilisations */
.ga-coup-uses-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ga-coup-uses-track {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}

.ga-coup-uses-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #a855f7);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.ga-coup-uses-text {
    font-size: 0.75rem;
    color: var(--color-text-secondary, rgba(255,255,255,0.5));
    white-space: nowrap;
    min-width: 42px;
    text-align: right;
}

/* Actions */
.ga-coup-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ga-coup-btn-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-secondary, rgba(255,255,255,0.5));
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.ga-coup-btn-icon:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
    color: var(--color-text-primary, #fff);
}

.ga-coup-btn-icon.danger:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

.ga-coup-btn-icon.success:hover {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
    color: #34d399;
}

/* État vide */
.ga-coup-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--color-text-secondary, rgba(255,255,255,0.4));
}

.ga-coup-empty-icon { font-size: 3rem; margin-bottom: 12px; }
.ga-coup-empty-title { font-size: 1.1rem; font-weight: 600; color: var(--color-text-primary, #fff); margin-bottom: 8px; }
.ga-coup-empty-desc { font-size: 0.85rem; margin-bottom: 24px; }

/* ─── Modal Créer / Éditer ─────────────────────────────────────────────────── */

.ga-coup-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: gaFadeIn 0.15s ease;
}

@keyframes gaFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ga-coup-modal {
    background: var(--color-bg-elevated, #1a1040);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 20px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    animation: gaSlideUp 0.2s ease;
}

@keyframes gaSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.ga-coup-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.ga-coup-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary, #fff);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ga-coup-modal-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    border: none;
    color: var(--color-text-secondary, rgba(255,255,255,0.5));
    cursor: pointer;
    font-size: 18px;
    transition: all 0.15s;
}

.ga-coup-modal-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

.ga-coup-modal-body { padding: 24px; }

.ga-coup-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ga-coup-form-group {
    margin-bottom: 16px;
}

.ga-coup-form-group.full { grid-column: 1 / -1; }

.ga-coup-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary, rgba(255,255,255,0.6));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.ga-coup-input,
.ga-coup-select,
.ga-coup-textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: var(--color-text-primary, #fff);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.ga-coup-input:focus,
.ga-coup-select:focus,
.ga-coup-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.ga-coup-input::placeholder,
.ga-coup-textarea::placeholder { color: rgba(255,255,255,0.3); }

.ga-coup-select option { background: #1a1040; }

.ga-coup-textarea {
    resize: vertical;
    min-height: 70px;
    font-family: inherit;
}

/* Input code avec bouton générer */
.ga-coup-code-input-wrap {
    display: flex;
    gap: 8px;
}

.ga-coup-code-input-wrap .ga-coup-input {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ga-coup-gen-btn {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 10px;
    color: var(--accent-light);
    cursor: pointer;
    font-size: 0.8rem;
    white-space: nowrap;
    transition: all 0.15s;
    flex-shrink: 0;
}

.ga-coup-gen-btn:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent); }

/* Type toggle */
.ga-coup-type-toggle {
    display: flex;
    gap: 8px;
}

.ga-coup-type-opt {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: var(--color-text-secondary, rgba(255,255,255,0.5));
    cursor: pointer;
    text-align: center;
    font-size: 0.85rem;
    transition: all 0.15s;
}

.ga-coup-type-opt.active {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border-color: var(--accent);
    color: var(--accent-light);
    font-weight: 600;
}

/* Toggle switch */
.ga-coup-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 8px;
}

.ga-coup-toggle-label {
    font-size: 0.875rem;
    color: var(--color-text-primary, #fff);
}

.ga-coup-toggle {
    position: relative;
    width: 44px; height: 24px;
    cursor: pointer;
}

.ga-coup-toggle input { display: none; }

.ga-coup-toggle-track {
    width: 44px; height: 24px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    transition: background 0.2s;
    position: relative;
}

.ga-coup-toggle input:checked + .ga-coup-toggle-track { background: var(--accent); }

.ga-coup-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ga-coup-toggle input:checked + .ga-coup-toggle-track::after { transform: translateX(20px); }

/* Modal footer */
.ga-coup-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

/* Boutons principaux */
.ga-coup-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}

.ga-coup-btn.primary {
    background: linear-gradient(135deg, var(--accent), #a855f7);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

.ga-coup-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent); }
.ga-coup-btn.primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.ga-coup-btn.ghost {
    background: rgba(255,255,255,0.06);
    color: var(--color-text-secondary, rgba(255,255,255,0.6));
    border: 1px solid rgba(255,255,255,0.1);
}

.ga-coup-btn.ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ─── Toast notification ────────────────────────────────────────────────────── */

.ga-coup-toast {
    position: fixed;
    bottom: 24px; right: 24px;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 9999;
    animation: gaToastIn 0.25s ease;
    max-width: 300px;
}

@keyframes gaToastIn {
    from { transform: translateX(40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.ga-coup-toast.success { background: rgba(16, 185, 129, 0.9); color: #fff; }
.ga-coup-toast.error   { background: rgba(239, 68, 68, 0.9); color: #fff; }
.ga-coup-toast.info    { background: color-mix(in srgb, var(--accent) 90%, transparent); color: #fff; }

/* ─── Widget étudiant (champ code promo checkout) ─────────────────────────── */

.ga-checkout-promo {
    background: var(--color-surface, rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 16px;
    margin: 16px 0;
}

.ga-checkout-promo-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary, rgba(255,255,255,0.55));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ga-checkout-promo-row {
    display: flex;
    gap: 8px;
}

.ga-checkout-promo-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: var(--color-text-primary, #fff);
    font-size: 0.9rem;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    outline: none;
    transition: border-color 0.2s;
}

.ga-checkout-promo-input:focus { border-color: var(--accent); }
.ga-checkout-promo-input::placeholder { font-family: inherit; font-weight: 400; letter-spacing: normal; color: rgba(255,255,255,0.35); text-transform: none; }

.ga-checkout-promo-input.valid   { border-color: #10b981; background: rgba(16, 185, 129, 0.08); }
.ga-checkout-promo-input.invalid { border-color: #ef4444; background: rgba(239, 68, 68, 0.08); }

.ga-checkout-promo-btn {
    padding: 10px 16px;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 10px;
    color: var(--accent-light);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.ga-checkout-promo-btn:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); }
.ga-checkout-promo-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Résultat code promo */
.ga-checkout-discount {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    animation: gaFadeIn 0.2s ease;
}

.ga-checkout-discount.success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.ga-checkout-discount.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.ga-checkout-discount-info { display: flex; flex-direction: column; gap: 2px; }

.ga-checkout-discount-code {
    font-weight: 700;
    color: #34d399;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.ga-checkout-discount-detail {
    font-size: 0.8rem;
    color: var(--color-text-secondary, rgba(255,255,255,0.55));
}

.ga-checkout-price-wrap {
    text-align: right;
}

.ga-checkout-price-original {
    text-decoration: line-through;
    color: rgba(255,255,255,0.35);
    font-size: 0.85rem;
}

.ga-checkout-price-final {
    font-size: 1.3rem;
    font-weight: 700;
    color: #34d399;
}

.ga-checkout-promo-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.15s;
    flex-shrink: 0;
}

.ga-checkout-promo-remove:hover { color: #f87171; }

/* Loading spinner */
.ga-coup-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .ga-coupons { padding: 16px; }
    .ga-coup-form-row { grid-template-columns: 1fr; }
    .ga-coup-table th:nth-child(n+5),
    .ga-coup-table td:nth-child(n+5) { display: none; }
    .ga-coup-kpi-grid { grid-template-columns: 1fr 1fr; }
}


/* ===== css/academy-affiliates.css?v=2602240010 ===== */
/**
 * Academy Affiliates CSS v1.0 — Glassmorphism design
 * Préfixe : .ga-aff-* (namespace Academy Affiliates)
 */

/* ─── Layout ───────────────────────────────────────────────────────────────── */

.ga-affiliates {
    padding: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.ga-aff-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}

.ga-aff-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ga-aff-header-icon {
    width: 52px; height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #059669, #10b981);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.35);
}

.ga-aff-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary, #fff);
    margin: 0;
}

.ga-aff-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-secondary, rgba(255,255,255,0.55));
    margin: 4px 0 0;
}

/* ─── KPI Cards ─────────────────────────────────────────────────────────────── */

.ga-aff-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.ga-aff-kpi {
    background: var(--color-surface, rgba(255,255,255,0.06));
    border: 1px solid var(--color-border, rgba(255,255,255,0.1));
    border-radius: 16px;
    padding: 18px 20px;
    backdrop-filter: blur(12px);
    transition: transform 0.2s;
}

.ga-aff-kpi:hover { transform: translateY(-2px); }

.ga-aff-kpi-val {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-primary, #fff);
    line-height: 1;
    margin-bottom: 4px;
}

.ga-aff-kpi-label {
    font-size: 0.78rem;
    color: var(--color-text-secondary, rgba(255,255,255,0.5));
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ga-aff-kpi-sub {
    font-size: 0.75rem;
    color: #10b981;
    margin-top: 6px;
}

/* ─── Toolbar ───────────────────────────────────────────────────────────────── */

.ga-aff-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.ga-aff-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.ga-aff-search-wrap svg {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.4);
    pointer-events: none;
}

.ga-aff-search {
    width: 100%;
    padding: 9px 12px 9px 38px;
    background: var(--color-surface, rgba(255,255,255,0.07));
    border: 1px solid var(--color-border, rgba(255,255,255,0.12));
    border-radius: 10px;
    color: var(--color-text-primary, #fff);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.ga-aff-search:focus { border-color: #10b981; }
.ga-aff-search::placeholder { color: rgba(255,255,255,0.4); }

.ga-aff-filter {
    padding: 8px 14px;
    background: var(--color-surface, rgba(255,255,255,0.07));
    border: 1px solid var(--color-border, rgba(255,255,255,0.12));
    border-radius: 10px;
    color: var(--color-text-primary, #fff);
    font-size: 0.85rem;
    cursor: pointer;
    outline: none;
}

.ga-aff-filter:focus { border-color: #10b981; }
.ga-aff-filter option { background: #0d1f1a; }

/* ─── Table affiliés ────────────────────────────────────────────────────────── */

.ga-aff-table-wrap {
    background: var(--color-surface, rgba(255,255,255,0.05));
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-radius: 16px;
    overflow: hidden;
}

.ga-aff-table {
    width: 100%;
    border-collapse: collapse;
}

.ga-aff-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.45);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.15);
    white-space: nowrap;
}

.ga-aff-table td {
    padding: 14px 16px;
    font-size: 0.875rem;
    color: var(--color-text-primary, #fff);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: middle;
}

.ga-aff-table tr:last-child td { border-bottom: none; }
.ga-aff-table tr:hover td { background: rgba(255,255,255,0.03); }

/* Nom + email */
.ga-aff-name { font-weight: 600; }
.ga-aff-email { font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-top: 2px; }

/* Code référence */
.ga-aff-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    font-weight: 700;
    color: #34d399;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.ga-aff-code:hover { background: rgba(16, 185, 129, 0.2); }

/* Commission badge */
.ga-aff-comm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

/* Status badge */
.ga-aff-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

.ga-aff-status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ga-aff-status.active   { background: rgba(16,185,129,0.12); color: #34d399; }
.ga-aff-status.pending  { background: rgba(245,158,11,0.12); color: #fbbf24; }
.ga-aff-status.suspended{ background: rgba(239,68,68,0.12); color: #f87171; }

/* Stats mini */
.ga-aff-stats-mini {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ga-aff-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
}

.ga-aff-stat-row strong { color: #fff; font-weight: 600; }

/* Boutons actions */
.ga-aff-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ga-aff-btn-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.15s;
}

.ga-aff-btn-icon:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
    color: #fff;
}

.ga-aff-btn-icon.danger:hover {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.25);
    color: #f87171;
}

.ga-aff-btn-icon.success:hover {
    background: rgba(16,185,129,0.12);
    border-color: rgba(16,185,129,0.25);
    color: #34d399;
}

/* État vide */
.ga-aff-empty {
    text-align: center;
    padding: 60px 24px;
    color: rgba(255,255,255,0.4);
}

.ga-aff-empty-icon { font-size: 3rem; margin-bottom: 12px; }
.ga-aff-empty-title { font-size: 1.1rem; font-weight: 600; color: #fff; margin-bottom: 8px; }
.ga-aff-empty-desc { font-size: 0.85rem; margin-bottom: 24px; }

/* ─── Panneau détail affilié ────────────────────────────────────────────────── */

.ga-aff-panel {
    background: var(--color-bg-elevated, #0d1f1a);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 20px;
    padding: 24px;
    margin-top: 20px;
    animation: gaAffPanelIn 0.2s ease;
}

@keyframes gaAffPanelIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ga-aff-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
}

.ga-aff-panel-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.ga-aff-panel-subtitle {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

/* Lien affilié */
.ga-aff-link-box {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.ga-aff-link-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.ga-aff-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ga-aff-link-url {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    word-break: break-all;
    line-height: 1.4;
}

/* Token dashboard */
.ga-aff-token-box {
    background: rgba(245, 158, 11, 0.07);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.ga-aff-token-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

/* Tableau ventes */
.ga-aff-sales-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.ga-aff-sales-table th {
    padding: 8px 12px;
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ga-aff-sales-table td {
    padding: 10px 12px;
    color: rgba(255,255,255,0.8);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.ga-aff-sale-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
}

.ga-aff-sale-status.pending   { background: rgba(245,158,11,0.12); color: #fbbf24; }
.ga-aff-sale-status.confirmed { background: rgba(59,130,246,0.12); color: #60a5fa; }
.ga-aff-sale-status.paid      { background: rgba(16,185,129,0.12); color: #34d399; }

/* Bouton payer */
.ga-aff-payout-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
}

.ga-aff-payout-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(5,150,105,0.45); }
.ga-aff-payout-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ─── Modal Créer / Éditer ─────────────────────────────────────────────────── */

.ga-aff-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: gaFadeIn 0.15s ease;
}

@keyframes gaFadeIn { from { opacity: 0; } to { opacity: 1; } }

.ga-aff-modal {
    background: var(--color-bg-elevated, #0d1f1a);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    animation: gaAffSlideUp 0.2s ease;
}

@keyframes gaAffSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.ga-aff-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.ga-aff-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.ga-aff-modal-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.15s;
}

.ga-aff-modal-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

.ga-aff-modal-body { padding: 24px; }

.ga-aff-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ga-aff-form-group { margin-bottom: 16px; }
.ga-aff-form-group.full { grid-column: 1 / -1; }

.ga-aff-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.ga-aff-input,
.ga-aff-select {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.ga-aff-input:focus, .ga-aff-select:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.ga-aff-input::placeholder { color: rgba(255,255,255,0.3); }
.ga-aff-select option { background: #0d1f1a; }

/* Code auto-génération */
.ga-aff-code-wrap {
    display: flex;
    gap: 8px;
}

.ga-aff-code-wrap .ga-aff-input {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ga-aff-gen-btn {
    padding: 10px 14px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    color: #34d399;
    cursor: pointer;
    font-size: 0.8rem;
    white-space: nowrap;
    transition: all 0.15s;
    flex-shrink: 0;
}

.ga-aff-gen-btn:hover { background: rgba(16, 185, 129, 0.2); }

.ga-aff-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

/* Boutons génériques */
.ga-aff-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}

.ga-aff-btn.primary {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
}

.ga-aff-btn.primary:hover { transform: translateY(-1px); }
.ga-aff-btn.primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.ga-aff-btn.ghost {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.1);
}

.ga-aff-btn.ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Copy btn */
.ga-aff-copy-btn {
    padding: 6px 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.ga-aff-copy-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* Toast */
.ga-aff-toast {
    position: fixed;
    bottom: 24px; right: 24px;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 9999;
    animation: gaAffToastIn 0.25s ease;
    max-width: 300px;
}

@keyframes gaAffToastIn {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.ga-aff-toast.success { background: rgba(16, 185, 129, 0.9); color: #fff; }
.ga-aff-toast.error   { background: rgba(239, 68, 68, 0.9); color: #fff; }
.ga-aff-toast.info    { background: rgba(5, 150, 105, 0.9); color: #fff; }

/* Spinner */
.ga-aff-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Dashboard affilié (vue publique) ─────────────────────────────────────── */

.ga-aff-pub-dashboard {
    padding: 32px 24px;
    max-width: 900px;
    margin: 0 auto;
}

.ga-aff-pub-header {
    text-align: center;
    margin-bottom: 32px;
}

.ga-aff-pub-title {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.ga-aff-pub-subtitle {
    font-size: 1rem;
    color: rgba(255,255,255,0.55);
}

.ga-aff-pub-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.ga-aff-pub-kpi {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    backdrop-filter: blur(10px);
}

.ga-aff-pub-kpi-val {
    font-size: 2rem;
    font-weight: 700;
    color: #10b981;
    line-height: 1;
    margin-bottom: 6px;
}

.ga-aff-pub-kpi-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ga-aff-pub-link-box {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.ga-aff-pub-link-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.ga-aff-pub-link-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ga-aff-pub-link-url {
    flex: 1;
    padding: 10px 14px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    word-break: break-all;
    line-height: 1.4;
    border: 1px solid rgba(16,185,129,0.15);
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .ga-affiliates { padding: 16px; }
    .ga-aff-form-row { grid-template-columns: 1fr; }
    .ga-aff-table th:nth-child(n+4),
    .ga-aff-table td:nth-child(n+4) { display: none; }
    .ga-aff-kpi-grid { grid-template-columns: 1fr 1fr; }
}


/* ===== css/academy-analytics.css?v=2602240010 ===== */
.anat-wrapper {
    padding: 24px;
    background: var(--bg-dark, #0f0f1a);
    min-height: 100%;
    color: var(--text-primary, #e2e8f0);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.anat-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.anat-title { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.anat-subtitle { font-size: 13px; color: var(--text-muted, #64748b); margin: 0; }

.anat-period-btns { display: flex; gap: 6px; }
.anat-period-btn {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid rgba(167,139,250,.3);
    background: transparent;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    font-size: 12px;
    transition: all .2s;
}
.anat-period-btn.active,
.anat-period-btn:hover {
    background: rgba(167,139,250,.15);
    border-color: var(--accent-light);
    color: var(--accent-light);
}

/* ── KPI Cards ───────────────────────────────────────────────────────────── */
.anat-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.anat-kpi {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 20px;
    transition: transform .2s, box-shadow .2s;
}
.anat-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.anat-kpi-icon  { font-size: 22px; margin-bottom: 10px; }
.anat-kpi-value { font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.anat-kpi-label { font-size: 12px; color: var(--text-muted, #64748b); margin-bottom: 6px; }
.anat-kpi-sub   { font-size: 11px; color: var(--text-muted, #64748b); }

.anat-kpi--students .anat-kpi-value  { color: var(--accent-light); }
.anat-kpi--completion .anat-kpi-value { color: #34d399; }
.anat-kpi--revenue .anat-kpi-value   { color: #fbbf24; }
.anat-kpi--time .anat-kpi-value      { color: #67e8f9; }

.anat-kpi-bar { height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.anat-kpi-bar-fill { height: 100%; background: linear-gradient(90deg, #34d399, #059669); border-radius: 2px; transition: width .5s; }

.anat-kpi--skeleton { background: rgba(255,255,255,.03); }
.anat-skeleton-block { height: 80px; border-radius: 8px; background: rgba(255,255,255,.06); animation: anat-pulse 1.5s infinite; }
@keyframes anat-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ── Charts ──────────────────────────────────────────────────────────────── */
.anat-charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 900px) { .anat-charts-row { grid-template-columns: 1fr; } }

.anat-chart-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 20px;
}
.anat-chart-title { font-size: 13px; font-weight: 600; margin: 0 0 14px; color: var(--text-secondary, #94a3b8); }
.anat-chart-wrap  { position: relative; height: 220px; }

/* ── Heatmap ─────────────────────────────────────────────────────────────── */
.anat-heatmap-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    overflow-x: auto;
}
.anat-heatmap-legend {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 6px;
    min-width: 480px;
}
.anat-hm-label { font-size: 11px; text-align: center; color: var(--text-muted, #64748b); }
.anat-heatmap-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(24, 1fr);
    gap: 3px;
    min-width: 480px;
    height: 160px;
}
.anat-hm-cell {
    border-radius: 2px;
    background: rgba(167,139,250, calc(0.08 + var(--i, 0) * 0.7));
    cursor: pointer;
    transition: transform .1s;
}
.anat-hm-cell:hover { transform: scale(1.3); z-index: 2; }

/* ── Two-col layout ──────────────────────────────────────────────────────── */
.anat-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 900px) { .anat-two-col { grid-template-columns: 1fr; } }

/* ── Dropout Section ─────────────────────────────────────────────────────── */
.anat-section {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 20px;
}
.anat-section-title { font-size: 13px; font-weight: 600; margin: 0 0 14px; color: var(--text-secondary, #94a3b8); }

.anat-dropout-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255,255,255,.03);
    margin-bottom: 8px;
    border-left: 3px solid #f59e0b;
}
.anat-dropout-item--critical { border-left-color: #ef4444; }
.anat-dropout-left { display: flex; align-items: center; gap: 10px; }
.anat-dropout-badge {
    font-size: 13px; font-weight: 700;
    padding: 2px 8px; border-radius: 6px; white-space: nowrap;
}
.anat-badge--red    { background: rgba(239,68,68,.15);  color: #f87171; }
.anat-badge--orange { background: rgba(245,158,11,.15); color: #fbbf24; }
.anat-dropout-lesson { font-size: 13px; font-weight: 500; }
.anat-dropout-module { font-size: 11px; color: var(--text-muted, #64748b); }
.anat-dropout-bar-wrap { height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.anat-dropout-bar { height: 100%; border-radius: 2px; }

/* AI Box */
.anat-ai-box {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    margin-top: 12px;
}
.anat-ai-icon { font-size: 18px; flex-shrink: 0; }
.anat-ai-text { font-size: 12px; color: #c7d2fe; line-height: 1.5; }

/* ── At-Risk Table ───────────────────────────────────────────────────────── */
.anat-risk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.anat-risk-table th {
    text-align: left; padding: 8px 10px;
    color: var(--text-muted, #64748b);
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-weight: 500;
}
.anat-risk-row td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.anat-risk-row:last-child td { border-bottom: none; }
.anat-risk-name { display: flex; align-items: center; gap: 8px; }
.anat-risk-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
.anat-risk-email { font-size: 11px; color: var(--text-muted, #64748b); }
.anat-risk-badge { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.anat-risk--high   { background: rgba(239,68,68,.15); color: #f87171; }
.anat-risk--medium { background: rgba(245,158,11,.15); color: #fbbf24; }

.anat-progress-wrap { display: flex; align-items: center; gap: 6px; }
.anat-progress-bar { flex: 1; height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.anat-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 2px; }
.anat-progress-pct { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.anat-empty { color: var(--text-muted, #64748b); font-size: 13px; padding: 16px 0; }
.anat-error { color: #f87171; font-size: 13px; padding: 16px 0; }
.anat-loading { color: var(--text-muted, #64748b); font-size: 13px; padding: 16px 0; }


/* ===== css/page-builder.css?v=2602240010 ===== */
/**
 * PAGE BUILDER CSS v1.0
 * Éditeur visuel pour les leçons Giri Academy
 * Préfixe : .pb-* (page builder, sous-module academy)
 */

/* ── Overlay plein écran ─────────────────────────────── */
.pb-overlay {
    position: fixed;
    inset: 0;
    background: #0a0a14;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pb-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── Toolbar ─────────────────────────────────────────── */
.pb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    background: #12122a;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    padding: 0 16px;
    flex-shrink: 0;
    gap: 12px;
}

.pb-toolbar-left,
.pb-toolbar-center,
.pb-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pb-toolbar-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}

/* ── Layout 3 colonnes ───────────────────────────────── */
.pb-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Palette (gauche) ────────────────────────────────── */
.pb-palette {
    width: 250px;
    background: #12122a;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    overflow-y: auto;
    flex-shrink: 0;
    padding: 10px;
}

.pb-palette-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.35);
    padding: 10px 4px 6px;
}

.pb-palette-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 4px;
}

.pb-comp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 4px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 8px;
    cursor: grab;
    transition: all 0.18s;
    user-select: none;
    text-align: center;
}

.pb-comp-item:hover {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent);
}

.pb-comp-item:active { cursor: grabbing; }
.pb-comp-icon { font-size: 20px; line-height: 1; }
.pb-comp-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    line-height: 1.2;
}

/* ── Canvas (centre) ─────────────────────────────────── */
.pb-canvas-wrapper {
    flex: 1;
    background: #1a1a2e;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px;
}

.pb-canvas {
    width: 100%;
    max-width: 860px;
    min-height: 320px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: outline 0.15s;
}

.pb-canvas.drag-over {
    outline: 2px dashed var(--accent-light);
    outline-offset: -4px;
    background: #fdfaff;
}

.pb-canvas-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    gap: 10px;
    color: #9ca3af;
    text-align: center;
    padding: 32px;
}

.pb-canvas-empty-icon { font-size: 48px; opacity: 0.4; }
.pb-canvas-empty p { margin: 0; font-size: 14px; line-height: 1.6; }

/* ── Blocs ───────────────────────────────────────────── */
.pb-block {
    position: relative;
    border: 2px solid transparent;
    transition: border-color 0.12s;
    cursor: pointer;
}

.pb-block:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.pb-block.selected { border-color: var(--accent-light); }
.pb-block.pb-dragging { opacity: 0.4; }
.pb-block.drag-over-top { border-top: 3px solid var(--accent-light); }
.pb-block.drag-over-bottom { border-bottom: 3px solid var(--accent-light); }

.pb-block-drag {
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    cursor: grab;
    color: color-mix(in srgb, var(--accent) 50%, transparent);
    font-size: 14px;
    display: none;
    padding: 4px;
    z-index: 5;
    line-height: 1;
    user-select: none;
}

.pb-block:hover .pb-block-drag { display: block; }
.pb-block-drag:active { cursor: grabbing; }

.pb-block-controls {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    gap: 4px;
    z-index: 10;
}

.pb-block:hover .pb-block-controls,
.pb-block.selected .pb-block-controls { display: flex; }

.pb-block-inner { padding: 16px 24px 16px 30px; }

.pb-btn-icon-sm {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.pb-btn-delete { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.pb-btn-delete:hover { background: rgba(239, 68, 68, 0.35); }
.pb-btn-move-up,
.pb-btn-move-down { background: rgba(0,0,0,0.08); color: #4b5563; }
.pb-btn-move-up:hover,
.pb-btn-move-down:hover { background: rgba(0,0,0,0.18); }

/* ── Rendu des blocs (canvas blanc = vue étudiant) ──── */
.pb-render-h1 { font-size: 2rem; font-weight: 800; color: #111; line-height: 1.2; margin: 0; }
.pb-render-h2 { font-size: 1.5rem; font-weight: 700; color: #1a1a2e; line-height: 1.3; margin: 0; }
.pb-render-h3 { font-size: 1.2rem; font-weight: 600; color: #374151; line-height: 1.4; margin: 0; }
.pb-render-p  { font-size: 15px; color: #374151; line-height: 1.7; margin: 0; }

.pb-render-image { display: block; max-width: 100%; border-radius: 8px; }
.pb-render-image-placeholder {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; background: #f3f4f6; border-radius: 8px;
    min-height: 120px; font-size: 32px; color: #9ca3af; gap: 8px;
}
.pb-render-caption { font-size: 12px; color: #9ca3af; text-align: center; margin: 6px 0 0; }

.pb-render-video-wrap {
    position: relative; padding-top: 56.25%;
    background: #111; border-radius: 8px; overflow: hidden;
}
.pb-render-video-wrap iframe,
.pb-render-video-wrap video {
    position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}
.pb-render-video-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: #f3f4f6; border-radius: 8px; min-height: 120px;
    font-size: 28px; color: #9ca3af; gap: 8px;
}

.pb-render-pdf-placeholder {
    display: flex; align-items: center; gap: 10px;
    background: #f9fafb; padding: 14px 16px; border-radius: 8px;
    border: 1px solid #e5e7eb; font-size: 14px; color: #6b7280;
}

.pb-render-divider { border: none; margin: 4px 0; }
.pb-render-divider.solid  { border-top-style: solid;  border-top-width: 1px; }
.pb-render-divider.dashed { border-top-style: dashed; border-top-width: 1px; }
.pb-render-divider.dotted { border-top-style: dotted; border-top-width: 1px; }
.pb-render-divider.double { border-top-style: double; border-top-width: 3px; }

.pb-render-btn-wrap { display: flex; }
.pb-render-btn-wrap.center { justify-content: center; }
.pb-render-btn-wrap.right  { justify-content: flex-end; }

.pb-render-btn {
    display: inline-block; padding: 10px 24px; border-radius: 8px;
    font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: none;
}
.pb-render-btn.primary   { background: var(--accent); color: #fff; }
.pb-render-btn.secondary { background: transparent; color: var(--accent); border: 2px solid var(--accent); }
.pb-render-btn.outline   { background: transparent; color: #374151; border: 2px solid #d1d5db; }

.pb-render-html-preview { font-size: 14px; color: #374151; }

.pb-render-download {
    display: flex; align-items: center; gap: 12px;
    background: #f5f3ff; border: 1px solid var(--accent-light); border-radius: 10px;
    padding: 14px 18px; text-decoration: none; color: inherit;
}
.pb-render-download-icon { font-size: 24px; }
.pb-render-download-info { flex: 1; }
.pb-render-download-label { font-size: 14px; font-weight: 600; color: #374151; }
.pb-render-download-size  { font-size: 12px; color: #9ca3af; }
.pb-render-download-btn {
    font-size: 12px; font-weight: 600; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 6px 12px; border-radius: 6px;
}

.pb-render-accordion { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.pb-render-accordion-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; background: #f9fafb; cursor: pointer;
    font-size: 14px; font-weight: 600; color: #374151;
}
.pb-render-accordion-body {
    padding: 14px 16px; font-size: 14px; color: #4b5563;
    line-height: 1.6; border-top: 1px solid #e5e7eb;
}

/* ── Panneau propriétés (droite) ─────────────────────── */
.pb-properties {
    width: 300px;
    background: #12122a;
    border-left: 1px solid rgba(255,255,255,0.07);
    overflow-y: auto;
    flex-shrink: 0;
    padding: 16px;
}

.pb-props-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; min-height: 220px; gap: 12px; text-align: center;
}
.pb-props-empty-icon { font-size: 36px; opacity: 0.25; }
.pb-props-empty p {
    font-size: 13px; color: rgba(255,255,255,0.35);
    margin: 0; max-width: 180px; line-height: 1.5;
}

.pb-props-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pb-props-header-icon { font-size: 20px; }
.pb-props-header-title { font-size: 14px; font-weight: 700; color: #fff; }

.pb-props-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; color: rgba(255,255,255,0.3); margin: 14px 0 8px;
}

.pb-form-group { margin-bottom: 10px; }

.pb-form-label {
    display: block; font-size: 12px;
    color: rgba(255,255,255,0.55); margin-bottom: 4px;
}

.pb-form-control {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; padding: 7px 10px;
    font-size: 13px; color: #fff; outline: none;
    transition: border-color 0.2s; font-family: inherit;
}
.pb-form-control:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.pb-form-control-sm { padding: 5px 8px; font-size: 12px; }

.pb-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 26px;
    cursor: pointer;
}

.pb-form-select option { background: #1a1a2e; }

.pb-form-textarea { resize: vertical; min-height: 72px; font-family: inherit; }

.pb-color-row { display: flex; align-items: center; gap: 8px; }
.pb-color-input {
    width: 36px; height: 36px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 2px; cursor: pointer; background: none; flex-shrink: 0;
}

.pb-radio-group { display: flex; gap: 5px; }
.pb-radio-btn {
    flex: 1; text-align: center; padding: 6px 4px;
    font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; cursor: pointer;
    color: rgba(255,255,255,0.5); transition: all 0.15s;
}
.pb-radio-btn.active,
.pb-radio-btn:hover {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: #fff;
}

/* ── Boutons généraux ────────────────────────────────── */
.pb-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 7px; font-size: 13px;
    font-weight: 600; cursor: pointer; border: none;
    transition: all 0.18s; white-space: nowrap;
}
.pb-btn-primary { background: var(--accent); color: #fff; }
.pb-btn-primary:hover { background: var(--accent); }
.pb-btn-secondary {
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.12);
}
.pb-btn-secondary:hover { background: rgba(255,255,255,0.14); }
.pb-btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; font-size: 15px; }

/* ── Modal Aperçu ────────────────────────────────────── */
.pb-preview-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.82);
    z-index: 1100; display: flex;
    align-items: center; justify-content: center; padding: 40px;
    animation: pbOverlayIn 0.18s ease;
}
@keyframes pbOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.pb-preview-modal {
    background: #fff; border-radius: 16px;
    width: 100%; max-width: 900px; max-height: 90vh;
    overflow-y: auto; box-shadow: 0 40px 80px rgba(0,0,0,0.6);
    animation: pbModalIn 0.22s cubic-bezier(0.34,1.2,0.64,1);
}
@keyframes pbModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pb-preview-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #e5e7eb;
    position: sticky; top: 0; background: #fff; z-index: 1;
}
.pb-preview-header h4 { margin: 0; font-size: 15px; color: #374151; }
.pb-preview-header button {
    background: none; border: none; font-size: 18px; cursor: pointer; color: #6b7280;
}
.pb-preview-content { padding: 32px; }

/* ── Modal HTML ──────────────────────────────────────── */
.pb-html-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.82);
    z-index: 1100; display: flex;
    align-items: center; justify-content: center; padding: 40px;
    animation: pbOverlayIn 0.18s ease;
}
.pb-html-inner {
    background: #1e1e2e; border-radius: 16px;
    width: 100%; max-width: 900px; max-height: 85vh;
    display: flex; flex-direction: column;
    box-shadow: 0 40px 80px rgba(0,0,0,0.6); overflow: hidden;
    animation: pbModalIn 0.22s cubic-bezier(0.34,1.2,0.64,1);
}
.pb-html-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); flex-shrink: 0;
}
.pb-html-header h4 { margin: 0; font-size: 15px; color: #e2e8f0; }
.pb-html-code {
    flex: 1; overflow-y: auto; padding: 20px;
    font-family: 'Fira Code','Cascadia Code','Consolas', monospace;
    font-size: 12.5px; line-height: 1.7;
    color: #a5f3fc; white-space: pre; background: #0f0f1a; margin: 0;
}

/* ── Intégration lesson editor ───────────────────────── */
.lesson-editor-toggle {
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 12px;
}

.lesson-editor-toggle-btn {
    flex: 1;
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.lesson-editor-toggle-btn.active { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-light); }

.lesson-builder-open-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    border: 2px dashed color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    cursor: pointer;
    color: var(--accent-light);
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    transition: all 0.2s;
    box-sizing: border-box;
}

.lesson-builder-open-btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); transform: translateY(-1px); }

.lesson-builder-status { font-size: 12px; color: rgba(255,255,255,0.35); text-align: center; margin-top: 6px; }

/* ── Intégration LessonEditor ────────────────────────── */
.pb-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 10px;
}
.pb-toggle-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
}
.pb-badge-ok    { background: rgba(16,185,129,0.12); color: #10b981; border: 1px solid rgba(16,185,129,0.25); }
.pb-badge-empty { background: rgba(156,163,175,0.10); color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.08); }

.pb-toggle-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.pb-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pb-preview-more {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.3);
}

/* ── Scrollbars ──────────────────────────────────────── */
.pb-palette::-webkit-scrollbar,
.pb-properties::-webkit-scrollbar,
.pb-canvas-wrapper::-webkit-scrollbar { width: 4px; }
.pb-palette::-webkit-scrollbar-track,
.pb-properties::-webkit-scrollbar-track,
.pb-canvas-wrapper::-webkit-scrollbar-track { background: transparent; }
.pb-palette::-webkit-scrollbar-thumb,
.pb-properties::-webkit-scrollbar-thumb,
.pb-canvas-wrapper::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 2px;
}


/* ===== css/bundle-manager.css?v=2602240010 ===== */
/* ══════════════════════════════════════════════════════════════
   BUNDLE MANAGER v1.0 — Glassmorphism Design
   ══════════════════════════════════════════════════════════════ */

/* ── Header ──────────────────────────────────────────────────── */
.bm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 12px;
}

.bm-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bm-header-icon {
    font-size: 2rem;
    line-height: 1;
}

.bm-title {
    color: var(--text-primary, #e2e8f0);
    font-size: 1.375rem;
    font-weight: 800;
    margin: 0;
}

.bm-subtitle {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.875rem;
    margin: 2px 0 0;
}

.bm-header-actions { display: flex; gap: 10px; }

/* ── Body ────────────────────────────────────────────────────── */
.bm-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
}

.bm-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    padding: 60px;
    color: var(--text-secondary, #94a3b8);
}

/* ── Grid ────────────────────────────────────────────────────── */
.bm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

/* ── Empty state ─────────────────────────────────────────────── */
.bm-empty {
    text-align: center;
    padding: 80px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.bm-empty-icon { font-size: 3.5rem; }
.bm-empty h3 { color: var(--text-primary, #e2e8f0); font-size: 1.25rem; }
.bm-empty p  { color: var(--text-secondary, #94a3b8); font-size: 0.9rem; max-width: 400px; }

/* ── Card ────────────────────────────────────────────────────── */
.bm-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    padding: 20px;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.bm-card:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.bm-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.bm-card-emoji { font-size: 2rem; line-height: 1; }

.bm-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.bm-status {
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
}
.bm-status-live  { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.bm-status-draft { background: rgba(100, 116, 139, 0.15); color: #94a3b8; }

.bm-savings {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
}

.bm-card-name {
    color: var(--text-primary, #e2e8f0);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.bm-card-desc {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.8125rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Pricing ─────────────────────────────────────────────────── */
.bm-card-pricing {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.bm-orig-price {
    color: var(--text-tertiary, #64748b);
    font-size: 0.9375rem;
    text-decoration: line-through;
}
.bm-bundle-price {
    color: var(--text-primary, #e2e8f0);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ── Formation pills ─────────────────────────────────────────── */
.bm-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.bm-pill {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 8px;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 10px;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bm-pill-more {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-tertiary, #64748b);
}

/* ── Stats ───────────────────────────────────────────────────── */
.bm-card-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 12px;
    margin-top: 4px;
}
.bm-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 8px;
}
.bm-stat:last-child { border-right: none; }
.bm-stat-val {
    color: var(--text-primary, #e2e8f0);
    font-size: 1rem;
    font-weight: 700;
}
.bm-stat-lbl {
    color: var(--text-tertiary, #64748b);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Card actions ────────────────────────────────────────────── */
.bm-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.bm-card-actions .btn-academy { flex: 1; min-width: 0; justify-content: center; font-size: 0.8rem; }

/* ── Modal formations list ───────────────────────────────────── */
.bm-summary {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 10px;
    color: var(--text-secondary, #94a3b8);
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    gap: 4px;
    margin-bottom: 12px;
    padding: 10px 14px;
}
.bm-summary strong { color: var(--text-primary, #e2e8f0); }

.bm-formations-list {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    max-height: 260px;
    overflow-y: auto;
}
.bm-formations-list::-webkit-scrollbar { width: 4px; }
.bm-formations-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.bm-formation-opt {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    transition: background 0.12s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.bm-formation-opt:last-child { border-bottom: none; }
.bm-formation-opt:hover { background: rgba(255, 255, 255, 0.04); }
.bm-formation-opt-selected { background: color-mix(in srgb, var(--accent) 8%, transparent) !important; }

.bm-f-emoji { font-size: 1.375rem; flex-shrink: 0; }
.bm-f-info  { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.bm-f-title { color: var(--text-primary, #e2e8f0); font-size: 0.875rem; font-weight: 600; }
.bm-f-price { color: var(--text-secondary, #94a3b8); font-size: 0.75rem; }

.bm-f-tick {
    color: var(--accent);
    font-size: 1.125rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.12s;
}
.bm-formation-opt-selected .bm-f-tick { opacity: 1; }


/* ===== css/import-videos.css?v=2602240010 ===== */
/* ============================================================
   IMPORT VIDÉOS EN MASSE v2.0 — Styles modal
   Préfixe : .iv-*
   ============================================================ */

/* ── Overlay ─────────────────────────────────────────────── */
.iv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
    z-index: 9900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}

/* ── Modal ───────────────────────────────────────────────── */
.iv-modal {
    background: var(--bg-secondary, #1e1e2e);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    width: 100%;
    max-width: 1000px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.6);
}

/* ── Header ──────────────────────────────────────────────── */
.iv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}

.iv-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.iv-header-icon {
    font-size: 28px;
    line-height: 1;
}

.iv-header-title {
    margin: 0 0 2px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text, #fff);
}

.iv-header-sub {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted, rgba(255,255,255,.5));
}

.iv-close-btn {
    background: none;
    border: none;
    color: var(--text-muted, rgba(255,255,255,.4));
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    transition: background .15s, color .15s;
}
.iv-close-btn:hover { background: rgba(255,255,255,.08); color: var(--text, #fff); }

/* ── Guidance Bar ────────────────────────────────────────── */
.iv-guidance-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 10px 24px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
    flex-shrink: 0;
}

.iv-guidance-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    padding: 4px 12px;
}

.iv-guidance-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.iv-guidance-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.iv-guidance-text strong {
    font-size: 11px;
    font-weight: 700;
    color: var(--text, #fff);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.iv-guidance-text span {
    font-size: 11px;
    color: var(--text-muted, rgba(255,255,255,.45));
    line-height: 1.3;
}

.iv-guidance-text em { color: var(--accent-light); font-style: normal; }

.iv-guidance-sep {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,.08);
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .iv-guidance-bar { display: none; }
}

/* ── Body ────────────────────────────────────────────────── */
.iv-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.iv-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 20px;
}

@media (max-width: 700px) { .iv-layout { grid-template-columns: 1fr; } }

.iv-col-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, rgba(255,255,255,.4));
    margin-bottom: 10px;
}

/* ── Tabs ────────────────────────────────────────────────── */
.iv-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: rgba(255,255,255,.04);
    border-radius: 8px;
    padding: 3px;
}

.iv-tab {
    flex: 1;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    background: none;
    color: var(--text-muted, rgba(255,255,255,.5));
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.iv-tab.active,
.iv-tab:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-light); }
.iv-tab.active { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent-light); font-weight: 600; }

.iv-tab-panel { display: none; }
.iv-tab-panel.active { display: block; }

/* ── Dropzone ────────────────────────────────────────────── */
.iv-dropzone {
    border: 2px dashed color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 12px;
    padding: 28px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    color: var(--text-muted, rgba(255,255,255,.5));
    font-size: 13px;
}
.iv-dropzone:hover, .iv-dropzone.iv-dz-hover {
    border-color: var(--accent-light);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.iv-dz-icon { font-size: 32px; margin-bottom: 4px; }
.iv-dropzone strong { color: var(--text, #fff); font-size: 14px; }

/* ── URLs tab ────────────────────────────────────────────── */
.iv-url-hint {
    font-size: 11px;
    color: var(--text-muted, rgba(255,255,255,.4));
    margin-bottom: 6px;
}

.iv-urls-textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-tertiary, rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: var(--text, #fff);
    font-size: 12px;
    padding: 10px 12px;
    resize: vertical;
    font-family: monospace;
    line-height: 1.6;
    transition: border-color .2s;
}
.iv-urls-textarea:focus { outline: none; border-color: var(--accent-light); }

/* URL Preview */
.iv-url-preview { margin-top: 8px; }

.iv-url-preview-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 6px;
    padding: 4px;
    background: rgba(0,0,0,.15);
}

.iv-url-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,.03);
    font-size: 11px;
}
.iv-url-valid   { border-left: 2px solid rgba(16,185,129,.4); }
.iv-url-unknown { border-left: 2px solid rgba(255,255,255,.1); }

.iv-url-platform-icon { font-size: 13px; flex-shrink: 0; }

.iv-url-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.iv-url-title { color: var(--text, #fff); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-url-short { color: rgba(255,255,255,.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }

.iv-url-status-icon { font-size: 11px; color: rgba(255,255,255,.3); flex-shrink: 0; }
.iv-url-valid .iv-url-status-icon { color: #10b981; }

.iv-url-more {
    font-size: 10px;
    color: rgba(255,255,255,.3);
    text-align: center;
    padding: 4px;
    font-style: italic;
}

/* URL Test Result */
.iv-url-test-result {
    padding: 8px 10px;
    background: rgba(16,185,129,.07);
    border: 1px solid rgba(16,185,129,.2);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.iv-url-test-ok { font-size: 12px; font-weight: 600; color: #10b981; }
.iv-url-badges  { display: flex; flex-wrap: wrap; gap: 4px; }
.iv-url-badge   {
    padding: 2px 7px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent-light);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}
.iv-url-empty { font-size: 11px; color: rgba(255,255,255,.35); text-align: center; padding: 8px; font-style: italic; }

/* URL Actions */
.iv-url-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.iv-url-actions .btn-academy { flex: 1; justify-content: center; }

/* Bouton outline */
.btn-academy.btn-outline {
    background: none;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent-light);
    transition: background .15s, border-color .15s;
}
.btn-academy.btn-outline:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: var(--accent-light);
}

/* ── Drive CTA ───────────────────────────────────────────── */
.iv-drive-cta {
    text-align: center;
    padding: 28px 16px;
    background: rgba(255,255,255,.03);
    border-radius: 12px;
    border: 1px dashed rgba(255,255,255,.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.iv-drive-icon { font-size: 32px; }
.iv-drive-cta strong { font-size: 14px; color: var(--text, #fff); }
.iv-drive-cta p { margin: 0; font-size: 12px; color: var(--text-muted, rgba(255,255,255,.4)); }

/* ── Options row ─────────────────────────────────────────── */
.iv-options-row { margin-top: 12px; }

.iv-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted, rgba(255,255,255,.6));
    cursor: pointer;
}
.iv-checkbox-label input[type="checkbox"] { accent-color: var(--accent-light); width: 14px; height: 14px; }

/* ── Items header ────────────────────────────────────────── */
.iv-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.iv-rename-hint {
    font-size: 10px;
    font-weight: 400;
    color: rgba(167,139,250,.6);
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
}

.iv-clear-btn {
    background: none;
    border: none;
    font-size: 11px;
    color: rgba(239,68,68,.7);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.iv-clear-btn:hover { color: #ef4444; background: rgba(239,68,68,.1); }

/* ── Items list ──────────────────────────────────────────── */
.iv-items-list {
    height: 160px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(0,0,0,.15);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}

.iv-items-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 4px;
    color: var(--text-muted, rgba(255,255,255,.3));
    font-size: 13px;
    padding: 20px;
    text-align: center;
}
.iv-items-empty span { font-size: 24px; }
.iv-items-empty p { margin: 4px 0 0; }
.iv-items-empty small { font-size: 11px; opacity: .7; }

/* ── Item row ────────────────────────────────────────────── */
.iv-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .15s;
}
.iv-item-row:last-child { border-bottom: none; }
.iv-item-row:hover { background: rgba(255,255,255,.03); }

.iv-item-status-icon { font-size: 14px; flex-shrink: 0; }

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

.iv-item-title-input {
    width: 100%;
    box-sizing: border-box;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--text, #fff);
    font-size: 12px;
    padding: 1px 2px;
    transition: border-color .15s;
}
.iv-item-title-input:focus { outline: none; border-bottom-color: var(--accent-light); }
.iv-item-title-input[readonly] { opacity: .6; cursor: default; }

.iv-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 10px;
    color: var(--text-muted, rgba(255,255,255,.35));
    flex-wrap: wrap;
}

.iv-tag {
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.iv-tag-file  { background: rgba(16,185,129,.15); color: #10b981; }
.iv-tag-url   { background: rgba(59,130,246,.15); color: #60a5fa; }
.iv-tag-drive { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-light); }

.iv-item-size, .iv-item-url { color: rgba(255,255,255,.3); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }

.iv-item-folder-badge {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-light);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iv-item-progress {
    height: 3px;
    background: rgba(255,255,255,.08);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}
.iv-item-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: 2px;
    transition: width .3s;
}

.iv-item-error { font-size: 10px; color: #f87171; margin-top: 2px; }

.iv-item-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,.2);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 3px;
    flex-shrink: 0;
    transition: color .15s, background .15s;
}
.iv-item-remove:hover { color: #ef4444; background: rgba(239,68,68,.12); }

/* ── Strategy box ────────────────────────────────────────── */
.iv-strategy-box {
    margin-top: 14px;
    padding: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
}

/* Grille 2×2 pour 4 stratégies */
.iv-strategy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
}

.iv-strat-option { cursor: pointer; }
.iv-strat-option input[type="radio"] { display: none; }

.iv-strat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 6px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    text-align: center;
    transition: border-color .2s, background .2s;
    font-size: 11px;
    color: var(--text-muted, rgba(255,255,255,.5));
}
.iv-strat-card span { font-size: 18px; }
.iv-strat-card strong { font-size: 11px; color: var(--text, #fff); line-height: 1.2; }
.iv-strat-card small { font-size: 9px; opacity: .65; line-height: 1.2; }

.iv-strat-option input:checked + .iv-strat-card {
    border-color: var(--accent-light);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-light);
}
.iv-strat-option:hover .iv-strat-card { border-color: rgba(167,139,250,.4); }

/* ── Folder Organizer ────────────────────────────────────── */
.iv-folder-organizer {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.iv-folder-create {
    display: flex;
    gap: 6px;
    align-items: center;
}

.iv-folder-name-input {
    flex: 1;
    background: var(--bg-tertiary, rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    color: var(--text, #fff);
    font-size: 12px;
    padding: 6px 10px;
    transition: border-color .2s;
}
.iv-folder-name-input:focus { outline: none; border-color: var(--accent-light); }
.iv-folder-name-input::placeholder { color: rgba(255,255,255,.25); }

.iv-add-folder-btn {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent-light);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.iv-add-folder-btn:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent-light); }

/* Liste de dossiers / board */
.iv-folder-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}

.iv-folder-empty-hint {
    font-size: 11px;
    color: rgba(255,255,255,.3);
    text-align: center;
    padding: 12px;
    font-style: italic;
    border: 1px dashed rgba(255,255,255,.1);
    border-radius: 6px;
}

/* Dossier carte */
.iv-folder-card,
.iv-folder-unassigned {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0,0,0,.12);
}

.iv-folder-card { border-color: color-mix(in srgb, var(--accent) 20%, transparent); }

.iv-folder-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.iv-folder-card .iv-folder-card-header { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.iv-folder-card-icon { font-size: 13px; flex-shrink: 0; }
.iv-folder-card-name { flex: 1; font-size: 12px; font-weight: 600; color: var(--text, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.iv-folder-card-count {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-light);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.iv-folder-card-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,.2);
    cursor: pointer;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    transition: color .15s, background .15s;
    flex-shrink: 0;
}
.iv-folder-card-remove:hover { color: #ef4444; background: rgba(239,68,68,.1); }

/* Zone de drop */
.iv-folder-drop-zone {
    min-height: 36px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background .15s;
}

.iv-folder-drop-zone.iv-drop-active {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    outline: 2px dashed color-mix(in srgb, var(--accent) 50%, transparent);
    outline-offset: -2px;
    border-radius: 4px;
}

.iv-folder-zone-empty {
    font-size: 10px;
    color: rgba(255,255,255,.2);
    text-align: center;
    padding: 6px;
    font-style: italic;
}

/* Item dans le folder board */
.iv-folder-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,.04);
    cursor: grab;
    transition: background .15s, opacity .15s;
    border: 1px solid transparent;
}
.iv-folder-item:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.08); }
.iv-folder-item.iv-dragging { opacity: .4; cursor: grabbing; }

.iv-folder-drag-handle {
    color: rgba(255,255,255,.2);
    font-size: 13px;
    cursor: grab;
    flex-shrink: 0;
    user-select: none;
}

.iv-folder-item-icon { font-size: 12px; flex-shrink: 0; }

.iv-folder-item-title {
    flex: 1;
    font-size: 11px;
    color: var(--text, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iv-folder-item-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,.2);
    cursor: pointer;
    font-size: 9px;
    padding: 1px 3px;
    border-radius: 3px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s, color .15s;
}
.iv-folder-item:hover .iv-folder-item-remove { opacity: 1; }
.iv-folder-item-remove:hover { color: #ef4444; }

/* ── Structure Preview ───────────────────────────────────── */
.iv-structure-preview {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.iv-preview-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255,255,255,.3);
    margin-bottom: 6px;
}

.iv-preview-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.iv-preview-module {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: rgba(255,255,255,.03);
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,.05);
    font-size: 11px;
}
.iv-preview-module span { font-size: 13px; flex-shrink: 0; }
.iv-preview-module strong { flex: 1; color: var(--text, #fff); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.iv-preview-count {
    padding: 1px 6px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent-light);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.iv-preview-unassigned { opacity: .6; }
.iv-preview-unassigned .iv-preview-count { background: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }

.iv-preview-more {
    font-size: 10px;
    color: rgba(255,255,255,.3);
    font-style: italic;
    text-align: center;
    padding: 2px;
}

.iv-preview-hint {
    font-size: 11px;
    color: rgba(255,255,255,.3);
    font-style: italic;
    text-align: center;
    padding: 6px;
}

/* ── Footer ──────────────────────────────────────────────── */
.iv-footer {
    padding: 14px 24px;
    border-top: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.iv-progress-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.iv-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.iv-progress-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,.08);
    border-radius: 3px;
    overflow: hidden;
}

.iv-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: 3px;
    transition: width .4s;
}

.iv-progress-text { font-size: 12px; color: var(--text-muted, rgba(255,255,255,.5)); white-space: nowrap; min-width: 50px; }

.iv-current-file { font-size: 11px; color: var(--text-muted, rgba(255,255,255,.4)); }

.iv-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ── Spinner ─────────────────────────────────────────────── */
.iv-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: iv-spin .7s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}
@keyframes iv-spin { to { transform: rotate(360deg); } }

/* ── Summary ─────────────────────────────────────────────── */
.iv-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    gap: 12px;
}

.iv-summary-icon { font-size: 52px; }

.iv-summary h3 {
    margin: 0;
    font-size: 20px;
    color: var(--text, #fff);
}

.iv-summary-stats {
    display: flex;
    gap: 20px;
    margin-top: 4px;
}

.iv-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.iv-summary-stat strong { font-size: 28px; font-weight: 700; color: var(--accent-light); }
.iv-summary-stat span { font-size: 12px; color: var(--text-muted, rgba(255,255,255,.5)); }
.iv-stat-error strong { color: #f87171; }

.iv-summary-errors {
    background: rgba(239,68,68,.07);
    border: 1px solid rgba(239,68,68,.2);
    border-radius: 8px;
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    width: 100%;
    max-width: 500px;
}
.iv-summary-errors strong { color: #f87171; display: block; margin-bottom: 6px; }
.iv-err-line { color: rgba(255,255,255,.6); margin: 2px 0; }
.iv-err-more { color: rgba(255,255,255,.35); margin-top: 4px; font-style: italic; }


/* ===== css/formation-community.css?v=2602240010 ===== */
/**
 * Formation Community CSS — Formateur side
 * Préfixe: .ga-com-*
 * Version: v100
 */

/* ── Wrapper ───────────────────────────────────────────────────────────── */
.ga-com-wrap {
    min-height: 100%;
    background: var(--bg-primary, #0f0a1e);
}

/* ── Header ────────────────────────────────────────────────────────────── */
.ga-com-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--bg-secondary, rgba(22, 17, 43, 0.95));
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,.07));
    flex-wrap: wrap;
}

.ga-com-header-info { flex: 1; min-width: 0; }

.ga-com-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary, #f3f4f6);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ga-com-subtitle {
    font-size: 13px;
    color: var(--text-muted, #9ca3af);
    margin-top: 3px;
}

.ga-com-announce-btn {
    padding: 9px 18px;
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
    white-space: nowrap;
}

.ga-com-announce-btn:hover { opacity: .88; transform: translateY(-1px); }

/* ── Stats KPIs ─────────────────────────────────────────────────────────── */
.ga-com-stats {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,.07));
    overflow-x: auto;
}

.ga-com-stat {
    flex: 1;
    min-width: 100px;
    padding: 16px 20px;
    border-right: 1px solid var(--border-color, rgba(255,255,255,.07));
    text-align: center;
}
.ga-com-stat:last-child { border-right: none; }

.ga-com-stat-val {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary, #f3f4f6);
    line-height: 1;
}

.ga-com-stat-lbl {
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
    margin-top: 4px;
}

.ga-com-stat-warn .ga-com-stat-val { color: #f59e0b; }
.ga-com-stat-gold .ga-com-stat-val { color: #fbbf24; }
.ga-com-stat-blue .ga-com-stat-val { color: #60a5fa; }

/* ── Announce modal ──────────────────────────────────────────────────────── */
.ga-com-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(6px);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ga-com-modal {
    background: var(--bg-card, #16112b);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 540px;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
}

.ga-com-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.ga-com-modal-head h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #f3f4f6);
}

.ga-com-modal-close {
    background: none;
    border: none;
    color: var(--text-muted, #9ca3af);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 6px;
    transition: color .2s, background .2s;
}
.ga-com-modal-close:hover { color: #f3f4f6; background: rgba(255,255,255,.08); }

.ga-com-modal-ta {
    width: 100%;
    background: var(--bg-input, rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    color: var(--text-primary, #f3f4f6);
    font-family: inherit;
    font-size: 13px;
    padding: 12px;
    resize: vertical;
    min-height: 120px;
    max-height: 280px;
    outline: none;
    transition: border-color .2s;
}
.ga-com-modal-ta:focus { border-color: var(--accent); }

.ga-com-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.ga-com-char-count {
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
}

/* ── Filters ─────────────────────────────────────────────────────────────── */
.ga-com-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,.07));
}

.ga-com-filter {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.1);
    background: none;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.ga-com-filter:hover { color: var(--text-primary, #f3f4f6); border-color: rgba(255,255,255,.2); }
.ga-com-filter.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Feed + Post cards ───────────────────────────────────────────────────── */
.ga-com-feed {
    padding: 16px 24px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ga-com-loading {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

.ga-spinner-sm {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ga-spin .7s linear infinite;
}
@keyframes ga-spin { to { transform: rotate(360deg); } }

.ga-com-post {
    background: var(--bg-card, rgba(30,24,54,.7));
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s;
}
.ga-com-post:hover { border-color: rgba(255,255,255,.13); }

.ga-com-post-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px 8px;
}

.ga-com-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--accent-light);
    flex-shrink: 0;
}

.ga-com-post-meta { flex: 1; min-width: 0; }

.ga-com-post-author {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #f3f4f6);
}

.ga-com-post-time {
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
    margin-top: 3px;
}

.ga-com-instructor-badge {
    display: inline-block;
    padding: 2px 7px;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-light);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 6px;
}

.ga-com-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 6px;
}
.ga-com-type-badge.introduction { background: rgba(59,130,246,.15); color: #60a5fa; }
.ga-com-type-badge.victoire     { background: rgba(245,158,11,.15); color: #fbbf24; }
.ga-com-type-badge.question     { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-light); }
.ga-com-type-badge.evenement    { background: rgba(16,185,129,.15); color: #34d399; }
.ga-com-type-badge.annonce      { background: rgba(244,63,94,.12);  color: #fb7185; }

.ga-com-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 6px;
}
.ga-com-badge-gold  { background: rgba(245,158,11,.15); color: #fbbf24; }
.ga-com-badge-green { background: rgba(34,197,94,.12); color: #4ade80; }

.ga-com-post-body {
    padding: 0 16px 10px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(243,244,246,.8);
    white-space: pre-wrap;
    word-break: break-word;
}

.ga-com-post-stats {
    display: flex;
    gap: 16px;
    padding: 6px 16px;
    font-size: 12px;
    color: var(--text-muted, #9ca3af);
    border-top: 1px solid rgba(255,255,255,.05);
}

.ga-com-post-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,.07);
    flex-wrap: wrap;
}

.ga-com-action {
    padding: 6px 12px;
    background: none;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: var(--text-muted, #9ca3af);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.ga-com-action:hover { color: var(--text-primary, #f3f4f6); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05); }
.ga-com-action-delete:hover { color: #f43f5e !important; border-color: rgba(244,63,94,.3) !important; background: rgba(244,63,94,.08) !important; }

/* ── Comments area ───────────────────────────────────────────────────────── */
.ga-com-comments-area {
    padding: 12px 16px 16px;
    background: rgba(255,255,255,.02);
    border-top: 1px solid rgba(255,255,255,.07);
}

.ga-com-comment {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.ga-com-comment-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted, #9ca3af);
    flex-shrink: 0;
}

.ga-com-comment-body {
    flex: 1;
    background: var(--bg-card, rgba(22,17,43,.5));
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    padding: 8px 12px;
}

.ga-com-comment-author {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary, #f3f4f6);
}

.ga-com-comment-text {
    font-size: 12px;
    color: rgba(243,244,246,.7);
    margin-top: 3px;
    line-height: 1.5;
}

.ga-com-action-sm {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(34,197,94,.1);
    border: 1px solid rgba(34,197,94,.2);
    border-radius: 6px;
    color: #4ade80;
    cursor: pointer;
    margin-top: 6px;
    transition: all .15s;
}
.ga-com-action-sm:hover { background: rgba(34,197,94,.2); }

.ga-com-no-comments {
    font-size: 12px;
    color: var(--text-muted, #9ca3af);
    padding: 8px 0;
}

.ga-com-reply-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.ga-com-reply-input {
    flex: 1;
    background: var(--bg-input, rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: var(--text-primary, #f3f4f6);
    font-family: inherit;
    font-size: 12px;
    padding: 8px 12px;
    outline: none;
    transition: border-color .2s;
}
.ga-com-reply-input:focus { border-color: var(--accent); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.ga-com-empty {
    text-align: center;
    padding: 64px 24px;
    color: var(--text-muted, #9ca3af);
}
.ga-com-empty-icon {
    font-size: 40px;
    margin-bottom: 16px;
    display: block;
}
.ga-com-empty p {
    font-size: 14px;
    line-height: 1.6;
}

/* ── Load more ───────────────────────────────────────────────────────────── */
.ga-com-load-more {
    width: 100%;
    padding: 12px;
    background: var(--bg-card, rgba(30,24,54,.5));
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    color: var(--text-muted, #9ca3af);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all .2s;
}
.ga-com-load-more:hover { color: var(--text-primary, #f3f4f6); border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.04); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ga-com-header { padding: 14px 16px; gap: 10px; }
    .ga-com-announce-btn { width: 100%; text-align: center; order: 3; }
    .ga-com-stats { flex-wrap: wrap; }
    .ga-com-stat { min-width: 90px; padding: 12px 14px; }
    .ga-com-filters { padding: 12px 16px; }
    .ga-com-feed { padding: 12px 16px 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABS NAVIGATION — Communauté 2035
   ═══════════════════════════════════════════════════════════════════════════ */
.ga-com-tabs-nav {
    display: flex; gap: 4px; padding: 16px 24px 0; overflow-x: auto;
    border-bottom: 1px solid rgba(255,255,255,.08); background: var(--bg-primary, #0F0A1E);
}
.ga-com-tab-btn {
    padding: 10px 18px; border: none; background: transparent; color: var(--text-muted, #9CA3AF);
    font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 8px 8px 0 0;
    transition: all .2s; white-space: nowrap; flex-shrink: 0;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ga-com-tab-btn:hover { color: var(--text-primary, #F9FAFB); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ga-com-tab-active { color: #8B5CF6 !important; border-bottom-color: #8B5CF6 !important; background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.ga-com-tab-loading { padding: 40px; text-align: center; color: var(--text-muted, #9CA3AF); }
.ga-com-empty-tab { padding: 40px; text-align: center; color: var(--text-muted, #9CA3AF); font-size: 14px; }

/* ── Circles (instructor view) ── */
.ga-com-circles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; padding: 24px; }
.ga-com-circle-card { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 12px; padding: 16px; }
.ga-com-circle-name { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.ga-com-circle-meta { font-size: 12px; color: var(--text-muted, #9CA3AF); margin-bottom: 8px; }
.ga-com-circle-status { font-size: 11px; padding: 3px 8px; border-radius: 12px; font-weight: 500; }

/* ── Wiki (instructor table) ── */
.ga-com-wiki-table { width: 100%; border-collapse: collapse; margin: 16px 24px; width: calc(100% - 48px); font-size: 13px; }
.ga-com-wiki-table th { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.1); color: var(--text-muted, #9CA3AF); font-weight: 500; }
.ga-com-wiki-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.ga-com-badge-approved { background: rgba(16,185,129,.15); color: #10B981; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
.ga-com-badge-pending { background: rgba(245,158,11,.15); color: #F59E0B; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
.ga-btn-xs { padding: 4px 10px; font-size: 12px; border-radius: 6px; }

/* ── Challenges (instructor) ── */
.ga-com-chall-wrap { padding: 24px; }
.ga-com-btn-new-chall { margin-bottom: 16px; }
.ga-com-chall-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(255,255,255,.03); border-radius: 10px; margin-bottom: 10px; }
.ga-com-chall-emoji { font-size: 24px; flex-shrink: 0; }
.ga-com-chall-info { flex: 1; }
.ga-com-chall-del { background: none; border: none; cursor: pointer; font-size: 18px; opacity: .5; padding: 4px 8px; border-radius: 6px; }
.ga-com-chall-del:hover { opacity: 1; background: rgba(239,68,68,.15); }
.ga-com-chall-form { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 12px; padding: 16px; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.ga-com-input { width: 100%; padding: 10px 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: var(--text-primary, #F9FAFB); font-size: 13px; box-sizing: border-box; }
.ga-com-input:focus { outline: none; border-color: #8B5CF6; }

/* ═══════════════════════════════════════════════════════════════════════════
   STUDY CIRCLES — .cc-*
   ═══════════════════════════════════════════════════════════════════════════ */
.cc-wrap { padding: 24px; }
.cc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.cc-title { margin: 0; font-size: 20px; font-weight: 700; flex: 1; }
.cc-btn-create { flex-shrink: 0; }
.cc-section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #9CA3AF); margin-bottom: 14px; font-weight: 600; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.cc-card { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 14px; padding: 16px; transition: transform .2s, box-shadow .2s; }
.cc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 20%, transparent); }
.cc-card-full { opacity: .65; }
.cc-card-name { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.cc-card-meta { font-size: 12px; color: var(--text-muted, #9CA3AF); margin-bottom: 10px; }
.cc-card-members { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cc-members-count { font-size: 13px; font-weight: 500; }
.cc-badge-status { font-size: 11px; padding: 3px 8px; border-radius: 10px; font-weight: 600; }
.cc-open { background: rgba(16,185,129,.15); color: #10B981; }
.cc-full { background: rgba(156,163,175,.15); color: #9CA3AF; }
.cc-badge-mine { font-size: 11px; color: #8B5CF6; font-weight: 600; }
.cc-btn-join { width: 100%; }
.cc-mine-card { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), rgba(59,130,246,.15)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 16px; padding: 20px; margin-bottom: 24px; }
.cc-mine-badge { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #8B5CF6; font-weight: 700; margin-bottom: 8px; }
.cc-mine-name { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.cc-mine-meta { font-size: 13px; color: var(--text-muted, #9CA3AF); margin-bottom: 16px; }
.cc-mine-actions { display: flex; gap: 10px; }
.cc-btn-visio { flex: 1; }
.cc-btn-leave { padding: 8px 14px; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); border-radius: 8px; color: #EF4444; font-size: 13px; cursor: pointer; }
.cc-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 3000; }
.cc-modal { background: var(--bg-secondary, #1A1030); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 18px; padding: 28px; width: min(400px, 90vw); display: flex; flex-direction: column; gap: 14px; }
.cc-modal h3 { margin: 0 0 4px; font-size: 18px; }
.cc-modal label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted, #9CA3AF); }
.cc-input { padding: 10px 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: var(--text-primary, #F9FAFB); font-size: 14px; }
.cc-input:focus { outline: none; border-color: #8B5CF6; }
.cc-range { width: 100%; accent-color: #8B5CF6; }
.cc-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.cc-btn-cancel { padding: 8px 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-primary, #F9FAFB); }
.cc-empty, .cc-loading { text-align: center; padding: 40px; color: var(--text-muted, #9CA3AF); font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   WIKI — .cw-*
   ═══════════════════════════════════════════════════════════════════════════ */
.cw-wrap { padding: 24px; }
.cw-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.cw-title { margin: 0; font-size: 20px; font-weight: 700; flex: 1; }
.cw-search-bar { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 8px 12px; flex: 1; min-width: 180px; }
.cw-search-input { background: none; border: none; color: var(--text-primary, #F9FAFB); font-size: 13px; flex: 1; outline: none; }
.cw-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }
@media (max-width: 768px) { .cw-layout { grid-template-columns: 1fr; } }
.cw-list { border-right: 1px solid rgba(255,255,255,.08); padding-right: 20px; }
.cw-art-row { padding: 12px; border-radius: 10px; cursor: pointer; transition: background .15s; margin-bottom: 4px; }
.cw-art-row:hover { background: rgba(255,255,255,.05); }
.cw-art-active { background: color-mix(in srgb, var(--accent) 12%, transparent) !important; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.cw-art-row-title { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.cw-art-row-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.cw-badge-approved { background: rgba(16,185,129,.15); color: #10B981; font-size: 10px; padding: 2px 6px; border-radius: 8px; font-weight: 600; }
.cw-badge-pending { background: rgba(245,158,11,.15); color: #F59E0B; font-size: 10px; padding: 2px 6px; border-radius: 8px; font-weight: 600; }
.cw-badge-version { background: color-mix(in srgb, var(--accent) 15%, transparent); color: #8B5CF6; font-size: 10px; padding: 2px 6px; border-radius: 8px; font-weight: 600; }
.cw-badge-helpful { font-size: 11px; color: var(--text-muted, #9CA3AF); }
.cw-article-view { padding: 4px; }
.cw-article-title { font-size: 22px; font-weight: 700; margin: 0 0 10px; }
.cw-article-meta { font-size: 12px; color: var(--text-muted, #9CA3AF); margin-bottom: 12px; }
.cw-approved-banner { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); border-radius: 8px; padding: 8px 14px; font-size: 13px; color: #10B981; margin-bottom: 16px; }
.cw-article-body { line-height: 1.7; font-size: 14px; white-space: pre-wrap; background: rgba(255,255,255,.03); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.cw-article-actions { display: flex; gap: 10px; }
.cw-btn-helpful { padding: 8px 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-primary, #F9FAFB); }
.cw-empty-detail { display: flex; align-items: center; justify-content: center; height: 200px; color: var(--text-muted, #9CA3AF); font-size: 14px; }
.cw-empty, .cw-loading { text-align: center; padding: 40px; color: var(--text-muted, #9CA3AF); }
.cw-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 3000; }
.cw-modal { background: var(--bg-secondary, #1A1030); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 18px; padding: 28px; width: min(560px, 92vw); display: flex; flex-direction: column; gap: 14px; }
.cw-input, .cw-textarea { width: 100%; padding: 10px 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: var(--text-primary, #F9FAFB); font-size: 14px; box-sizing: border-box; font-family: inherit; }
.cw-textarea { resize: vertical; min-height: 120px; }
.cw-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.cw-btn-cancel { padding: 8px 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-primary, #F9FAFB); }

/* ═══════════════════════════════════════════════════════════════════════════
   CHALLENGES — .chall-*
   ═══════════════════════════════════════════════════════════════════════════ */
.chall-wrap { padding: 24px; }
.chall-header { margin-bottom: 20px; }
.chall-title { margin: 0; font-size: 20px; font-weight: 700; }
.chall-tabs { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; }
.chall-tab { padding: 8px 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; background: transparent; color: var(--text-muted, #9CA3AF); font-size: 13px; cursor: pointer; white-space: nowrap; transition: all .2s; }
.chall-tab:hover { border-color: #8B5CF6; color: #8B5CF6; }
.chall-tab-active { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: #8B5CF6; color: #8B5CF6; font-weight: 600; }
.chall-card { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 18px; padding: 24px; margin-bottom: 24px; }
.chall-card-top { display: flex; gap: 16px; margin-bottom: 20px; align-items: flex-start; }
.chall-emoji { font-size: 36px; flex-shrink: 0; }
.chall-card-name { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.chall-card-desc { font-size: 13px; color: var(--text-muted, #9CA3AF); }
.chall-days { margin-top: 6px; font-size: 12px; color: #F59E0B; font-weight: 500; }
.chall-progress-section { margin-bottom: 20px; }
.chall-progress-numbers { font-size: 14px; color: var(--text-muted, #9CA3AF); margin-bottom: 8px; }
.chall-current { font-size: 28px; font-weight: 800; color: var(--text-primary, #F9FAFB); }
.chall-target { font-size: 16px; }
.chall-bar-track { height: 16px; background: rgba(255,255,255,.08); border-radius: 8px; overflow: hidden; position: relative; }
.chall-bar-fill { height: 100%; background: linear-gradient(90deg, #8B5CF6, #3B82F6, #06B6D4); border-radius: 8px; position: relative; transition: width 1s cubic-bezier(.4,0,.2,1); }
.chall-bar-success { background: linear-gradient(90deg, #10B981, #34D399) !important; }
.chall-bar-shimmer { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%); animation: challShimmer 2s infinite; }
@keyframes challShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.chall-pct-label { text-align: right; font-size: 20px; font-weight: 800; margin-top: 6px; color: #8B5CF6; }
.chall-reward { font-size: 13px; color: var(--text-muted, #9CA3AF); margin-bottom: 16px; }
.chall-btn-contrib { width: 100%; font-size: 15px; padding: 12px; }
.chall-victory-banner { background: linear-gradient(135deg, rgba(16,185,129,.2), rgba(52,211,153,.1)); border: 1px solid rgba(16,185,129,.4); border-radius: 12px; padding: 16px; text-align: center; font-size: 16px; font-weight: 700; color: #10B981; margin-bottom: 20px; }
.chall-leaderboard { background: rgba(255,255,255,.03); border-radius: 14px; padding: 16px; }
.chall-lb-title { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.chall-lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.chall-lb-podium { background: rgba(245,158,11,.04); border-radius: 8px; padding: 10px 8px; }
.chall-lb-rank { width: 28px; text-align: center; font-weight: 700; font-size: 14px; }
.chall-lb-avatar { width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 30%, transparent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.chall-lb-name { flex: 1; font-size: 13px; font-weight: 500; }
.chall-lb-count { font-size: 12px; color: var(--text-muted, #9CA3AF); }
.chall-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 3000; }
.chall-modal { background: var(--bg-secondary, #1A1030); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 18px; padding: 28px; width: min(380px, 90vw); display: flex; flex-direction: column; gap: 14px; }
.chall-modal h3 { margin: 0; font-size: 18px; }
.chall-modal label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted, #9CA3AF); }
.chall-input { padding: 10px 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: var(--text-primary, #F9FAFB); font-size: 14px; }
.chall-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.chall-btn-cancel { padding: 8px 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-primary, #F9FAFB); }
.chall-empty, .chall-loading { text-align: center; padding: 40px; color: var(--text-muted, #9CA3AF); }

/* ═══════════════════════════════════════════════════════════════════════════
   MATCHING — .match-*
   ═══════════════════════════════════════════════════════════════════════════ */
.match-wrap { padding: 24px; display: flex; flex-direction: column; gap: 32px; }
.match-profile-card { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), rgba(59,130,246,.08)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 18px; padding: 24px; }
.match-profile-badge { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.match-level-icon { font-size: 36px; }
.match-level-name { font-size: 20px; font-weight: 800; }
.match-score-section { margin-bottom: 16px; }
.match-score-label { font-size: 12px; color: var(--text-muted, #9CA3AF); text-transform: uppercase; letter-spacing: .06em; }
.match-score-value { font-size: 28px; font-weight: 800; margin: 4px 0 10px; }
.match-progress-bar-track { height: 8px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.match-progress-bar-fill { height: 100%; border-radius: 4px; transition: width .8s; }
.match-progress-text { font-size: 12px; color: var(--text-muted, #9CA3AF); }
.match-max-level { font-size: 13px; color: #F59E0B; font-weight: 600; }
.match-stats-row { display: flex; gap: 20px; }
.match-stat { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.04); border-radius: 10px; padding: 12px 20px; }
.match-stat-val { font-size: 22px; font-weight: 800; }
.match-stat-label { font-size: 11px; color: var(--text-muted, #9CA3AF); margin-top: 4px; }
.match-separator { border-top: 1px solid rgba(255,255,255,.08); }
.match-section-title { font-size: 16px; font-weight: 700; margin: 0 0 16px; }
.match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.match-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px; display: flex; align-items: center; gap: 12px; transition: border-color .2s; }
.match-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.match-card-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff; flex-shrink: 0; }
.match-card-info { flex: 1; min-width: 0; }
.match-card-name { font-weight: 600; font-size: 14px; }
.match-card-level { font-size: 12px; color: var(--text-muted, #9CA3AF); margin-top: 2px; }
.match-card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.match-tag { font-size: 10px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: #8B5CF6; padding: 2px 6px; border-radius: 8px; }
.match-btn-connect { font-size: 12px; padding: 7px 12px; flex-shrink: 0; }
.match-empty, .match-loading { text-align: center; padding: 40px; color: var(--text-muted, #9CA3AF); }

/* ═══════════════════════════════════════════════════════════════════════════
   LEARNING PATHS — .lp-*
   ═══════════════════════════════════════════════════════════════════════════ */
.lp-wrap { padding: 24px; max-width: 1100px; }
.lp-header { margin-bottom: 28px; }
.lp-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.lp-subtitle { color: var(--text-muted, #9CA3AF); font-size: 14px; margin: 0; }
.lp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .lp-grid { grid-template-columns: 1fr; } }
.lp-card { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 18px; padding: 24px; }
.lp-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lp-card-head h3 { margin: 0; font-size: 16px; flex: 1; }
.lp-card-desc { font-size: 13px; color: var(--text-muted, #9CA3AF); margin-bottom: 20px; }
.lp-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.lp-toggle input { opacity: 0; width: 0; height: 0; }
.lp-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: rgba(255,255,255,.15); border-radius: 12px; transition: .3s; }
.lp-toggle-slider::before { position: absolute; content: ''; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; }
.lp-toggle input:checked + .lp-toggle-slider { background: #8B5CF6; }
.lp-toggle input:checked + .lp-toggle-slider::before { transform: translateX(20px); }
.lp-disabled-msg { color: var(--text-muted, #9CA3AF); font-size: 13px; text-align: center; padding: 20px 0; }
.lp-thresholds { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.lp-threshold { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 10px; }
.lp-t-beginner { background: rgba(16,185,129,.15); color: #10B981; }
.lp-t-intermediate { background: rgba(245,158,11,.15); color: #F59E0B; }
.lp-t-advanced { background: rgba(239,68,68,.15); color: #EF4444; }
.lp-quiz-meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.lp-input, .lp-textarea { width: 100%; padding: 10px 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: var(--text-primary, #F9FAFB); font-size: 13px; box-sizing: border-box; font-family: inherit; }
.lp-textarea { resize: vertical; min-height: 60px; }
.lp-question-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.lp-q-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lp-q-num { background: color-mix(in srgb, var(--accent) 20%, transparent); color: #8B5CF6; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; flex-shrink: 0; }
.lp-q-text { flex: 1; }
.lp-q-del { background: none; border: none; cursor: pointer; color: rgba(239,68,68,.7); font-size: 16px; padding: 4px 8px; border-radius: 6px; }
.lp-q-del:hover { background: rgba(239,68,68,.15); color: #EF4444; }
.lp-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; cursor: pointer; transition: border-color .15s; }
.lp-option-correct { border-color: #10B981 !important; background: rgba(16,185,129,.08) !important; }
.lp-opt-input { flex: 1; font-size: 12px; }
.lp-correct-check { color: #10B981; font-size: 14px; opacity: 0; }
.lp-option-correct .lp-correct-check { opacity: 1; }
.lp-empty-q { text-align: center; color: var(--text-muted, #9CA3AF); padding: 20px 0; font-size: 13px; }
.lp-btn-add-q { width: 100%; padding: 10px; border: 2px dashed color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 10px; background: transparent; color: #8B5CF6; font-size: 13px; cursor: pointer; margin: 4px 0 16px; transition: border-color .2s; }
.lp-btn-add-q:hover { border-color: #8B5CF6; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.lp-actions { display: flex; justify-content: flex-end; }
.lp-kpi-row { display: flex; gap: 12px; margin-bottom: 16px; }
.lp-kpi { flex: 1; text-align: center; padding: 14px; border-radius: 12px; }
.lp-kpi-beginner { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.2); }
.lp-kpi-intermediate { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.2); }
.lp-kpi-advanced { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2); }
.lp-kpi-val { font-size: 28px; font-weight: 800; }
.lp-kpi-lbl { font-size: 12px; color: var(--text-muted, #9CA3AF); margin: 4px 0 2px; }
.lp-kpi-pct { font-size: 13px; font-weight: 600; }
.lp-bar-distribution { height: 12px; border-radius: 6px; overflow: hidden; display: flex; margin-bottom: 10px; }
.lp-bar-seg { height: 100%; transition: width .8s; }
.lp-seg-beginner { background: #10B981; }
.lp-seg-intermediate { background: #F59E0B; }
.lp-seg-advanced { background: #EF4444; }
.lp-total-label { font-size: 12px; color: var(--text-muted, #9CA3AF); text-align: right; }
.lp-blocking { margin-top: 16px; }
.lp-blocking-title { font-size: 13px; font-weight: 700; margin: 0 0 10px; }
.lp-blocking-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.lp-blocking-pct { color: #EF4444; font-weight: 600; }
.lp-empty, .lp-loading { text-align: center; padding: 40px; color: var(--text-muted, #9CA3AF); font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   STUDENT ADAPTIVE PATH — .sap-*
   ═══════════════════════════════════════════════════════════════════════════ */
.sap-quiz-overlay { position: fixed; inset: 0; background: rgba(15,10,30,.95); z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sap-quiz-modal { background: linear-gradient(135deg, #1A1030, #0F0A1E); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 24px; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; padding: 36px; }
.sap-quiz-header { text-align: center; margin-bottom: 32px; }
.sap-quiz-logo { font-size: 48px; margin-bottom: 12px; }
.sap-quiz-title { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.sap-quiz-desc { font-size: 14px; color: var(--text-muted, #9CA3AF); margin: 0 0 20px; }
.sap-quiz-progress-bar { height: 6px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.sap-quiz-progress-fill { height: 100%; background: linear-gradient(90deg, #8B5CF6, #3B82F6); border-radius: 3px; transition: width .4s; }
.sap-quiz-progress-text { font-size: 12px; color: var(--text-muted, #9CA3AF); }
.sap-q-text { font-size: 18px; font-weight: 700; margin-bottom: 20px; line-height: 1.5; }
.sap-q-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.sap-option { padding: 14px 18px; background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.1); border-radius: 12px; color: var(--text-primary, #F9FAFB); font-size: 14px; text-align: left; cursor: pointer; transition: all .2s; }
.sap-option:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sap-option-selected { border-color: #8B5CF6 !important; background: color-mix(in srgb, var(--accent) 15%, transparent) !important; font-weight: 600; }
.sap-btn-next { width: 100%; padding: 14px; font-size: 15px; }
.sap-loading-result { text-align: center; padding: 40px; color: var(--text-muted, #9CA3AF); }
.sap-result { text-align: center; padding: 20px 0; }
.sap-result-icon { font-size: 64px; margin-bottom: 12px; }
.sap-result-level { font-size: 28px; font-weight: 900; margin-bottom: 8px; }
.sap-result-score { font-size: 16px; color: var(--text-muted, #9CA3AF); margin-bottom: 12px; }
.sap-result-desc { font-size: 14px; color: var(--text-muted, #9CA3AF); margin-bottom: 28px; max-width: 360px; margin-left: auto; margin-right: auto; }
.sap-btn-start { font-size: 16px; padding: 14px 28px; }
.sap-dashboard { padding: 4px; }
.sap-level-badge { display: flex; align-items: center; gap: 16px; padding: 20px; border: 2px solid; border-radius: 16px; margin-bottom: 24px; }
.sap-level-icon { font-size: 36px; }
.sap-level-label { font-size: 18px; font-weight: 800; }
.sap-level-score { font-size: 13px; color: var(--text-muted, #9CA3AF); margin-top: 4px; }
.sap-recs-title { font-size: 16px; font-weight: 700; margin: 0 0 14px; }
.sap-rec-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; margin-bottom: 8px; }
.sap-rec-required { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.sap-rec-optional { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.sap-rec-icon { font-size: 18px; flex-shrink: 0; }
.sap-rec-name { flex: 1; font-size: 13px; font-weight: 500; }
.sap-rec-badge { font-size: 11px; padding: 3px 8px; border-radius: 8px; font-weight: 600; background: color-mix(in srgb, var(--accent) 15%, transparent); color: #8B5CF6; }
.sap-empty, .sap-loading { text-align: center; padding: 40px; color: var(--text-muted, #9CA3AF); }

/* Lesson difficulty buttons */
.lesson-diff-btn { user-select: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   CERCLES D'ÉTUDE — INSTRUCTOR VIEW v2.0 (.ga-circ-*)
   ═══════════════════════════════════════════════════════════════════════════ */

.ga-circ-wrap { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.ga-circ-topbar { display: flex; align-items: center; justify-content: space-between; }
.ga-circ-title { margin: 0; font-size: 18px; font-weight: 700; }
.ga-circ-new-btn { flex-shrink: 0; }

/* Formulaire création cercle */
.ga-circ-new-form { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ga-circ-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ga-circ-form-row .ga-com-input { flex: 1; min-width: 120px; }
.ga-circ-max-lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted, #9CA3AF); white-space: nowrap; }
.ga-circ-cancel { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 8px 16px; color: var(--text-muted, #9CA3AF); cursor: pointer; font-size: 13px; transition: all .2s; }
.ga-circ-cancel:hover { background: rgba(255,255,255,.1); }

/* Grille cercles */
.ga-circ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ga-circ-card { background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, box-shadow .2s; cursor: pointer; }
.ga-circ-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 15%, transparent); }
.ga-circ-card-name { font-size: 15px; font-weight: 700; }
.ga-circ-card-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted, #9CA3AF); }
.ga-circ-members-badge { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-light); padding: 2px 8px; border-radius: 10px; font-weight: 500; }
.ga-circ-goals-badge { background: rgba(16,185,129,.12); color: #10b981; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
.ga-circ-last-msg { font-size: 12px; color: var(--text-muted, #6b7280); font-style: italic; background: rgba(255,255,255,.03); padding: 6px 10px; border-radius: 8px; border-left: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.ga-circ-no-msg { font-size: 12px; color: rgba(156,163,175,.4); }
.ga-circ-card-actions { display: flex; gap: 8px; margin-top: 4px; }
.ga-circ-open-btn { flex: 1; padding: 8px 14px; font-size: 13px; }
.ga-circ-del-btn { background: none; border: none; cursor: pointer; font-size: 16px; opacity: .5; padding: 6px 10px; border-radius: 8px; transition: all .2s; }
.ga-circ-del-btn:hover { opacity: 1; background: rgba(239,68,68,.15); }

/* Panneau détail cercle (slide-in) */
.ga-circ-detail { background: var(--bg-primary, #0F0A1E); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 16px; padding: 0; overflow: hidden; }
.ga-circ-detail-header { padding: 20px 24px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.ga-circ-back-btn { background: none; border: none; color: var(--text-muted, #9CA3AF); cursor: pointer; font-size: 13px; padding: 0 0 8px; display: block; transition: color .2s; }
.ga-circ-back-btn:hover { color: #8B5CF6; }
.ga-circ-detail-header h3 { margin: 6px 0 4px; font-size: 18px; font-weight: 800; }
.ga-circ-detail-meta { font-size: 13px; color: var(--text-muted, #9CA3AF); display: flex; gap: 12px; }

/* Onglets dans détail */
.ga-circ-detail-tabs { display: flex; gap: 2px; padding: 0 24px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.2); }
.ga-circ-dtab { padding: 12px 18px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted, #9CA3AF); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s; margin-bottom: -1px; }
.ga-circ-dtab:hover { color: var(--accent-light); }
.ga-circ-dtab-active { color: #8B5CF6 !important; border-bottom-color: #8B5CF6 !important; }
.ga-circ-dtab-panel { display: block; }

/* Chat cercle */
.ga-circ-chat-wrap { display: flex; flex-direction: column; height: 400px; }
.ga-circ-chat-msgs { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 30%, transparent) transparent; }
.ga-circ-msg { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 10px 14px; max-width: 80%; }
.ga-circ-msg-instructor { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); align-self: flex-end; }
.ga-circ-msg-author { font-size: 11px; font-weight: 700; color: var(--accent-light); display: block; margin-bottom: 3px; }
.ga-circ-msg-time { font-size: 10px; color: rgba(156,163,175,.5); float: right; margin-top: 2px; }
.ga-circ-msg-text { font-size: 13px; line-height: 1.5; word-break: break-word; }
.ga-circ-chat-input-row { display: flex; gap: 10px; padding: 12px 24px; border-top: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.2); }
.ga-circ-chat-input { flex: 1; padding: 10px 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: var(--text-primary, #F9FAFB); font-size: 13px; }
.ga-circ-chat-input:focus { outline: none; border-color: #8B5CF6; }
.ga-circ-send-btn { flex-shrink: 0; padding: 10px 18px; }
.ga-circ-no-msg { color: var(--text-muted, #9CA3AF); font-size: 13px; text-align: center; padding: 30px 0; }

/* Membres */
.ga-circ-members-list { padding: 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.ga-circ-member { display: flex; align-items: center; gap: 14px; padding: 12px; background: rgba(255,255,255,.03); border-radius: 12px; border: 1px solid rgba(255,255,255,.06); }
.ga-circ-member-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #8B5CF6, #3B82F6); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.ga-circ-member-name { font-size: 14px; font-weight: 600; }
.ga-circ-member-meta { font-size: 12px; color: var(--text-muted, #9CA3AF); margin-top: 2px; }

/* Objectifs */
.ga-circ-goals-wrap { padding: 16px 24px; }
.ga-circ-goals-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.ga-circ-goal-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px 16px; transition: border-color .2s; }
.ga-circ-goal-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.ga-circ-goal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ga-circ-goal-name { font-size: 14px; font-weight: 700; }
.ga-circ-goal-pct { font-size: 14px; font-weight: 800; }
.ga-circ-goal-bar-track { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.ga-circ-goal-bar-fill { height: 100%; border-radius: 3px; transition: width .6s cubic-bezier(.34,1.2,.64,1); }
.ga-circ-goal-footer { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-muted, #9CA3AF); flex-wrap: wrap; }
.ga-circ-goal-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ga-circ-goal-progress-input { padding: 4px 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: var(--text-primary, #F9FAFB); font-size: 12px; }
.ga-circ-goal-save { background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.3); color: #10b981; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; transition: all .2s; }
.ga-circ-goal-save:hover { background: rgba(16,185,129,.25); }
.ga-circ-goal-del { background: none; border: none; font-size: 14px; cursor: pointer; opacity: .5; padding: 4px 8px; border-radius: 6px; transition: all .2s; }
.ga-circ-goal-del:hover { opacity: 1; background: rgba(239,68,68,.15); }
.ga-circ-new-goal-form { background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.ga-circ-add-goal-btn { align-self: flex-start; font-size: 13px; padding: 8px 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   EVENTS COMMUNAUTAIRES (.ga-evt-*)
   ═══════════════════════════════════════════════════════════════════════════ */

.ga-evt-wrap { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.ga-evt-form { background: rgba(59,130,246,.07); border: 1px solid rgba(59,130,246,.2); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ga-evt-list { display: flex; flex-direction: column; gap: 12px; }
.ga-evt-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; transition: border-color .2s; }
.ga-evt-row:hover { border-color: rgba(59,130,246,.3); }
.ga-evt-icon { font-size: 28px; flex-shrink: 0; margin-top: 2px; }
.ga-evt-info { flex: 1; }
.ga-evt-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.ga-evt-meta { font-size: 12px; color: var(--text-muted, #9CA3AF); display: flex; gap: 10px; flex-wrap: wrap; }
.ga-evt-link { display: inline-block; margin-top: 6px; font-size: 12px; color: #60a5fa; text-decoration: none; }
.ga-evt-link:hover { text-decoration: underline; }
.ga-evt-del { flex-shrink: 0; }


/* ===== css/enriched-content.css?v=2602240010 ===== */
/* Enriched Content — Styles etudiant */
.enriched-area-wrap{margin:24px 0;padding:0;}
.ec-quiz-wrap,.ec-exercise-wrap,.ec-checklist-wrap,.ec-cta-wrap,.ec-resources-wrap{background:var(--bg-secondary,#1a1a2e);border:1px solid var(--border-color,rgba(255,255,255,.1));border-radius:12px;padding:24px;margin:0 0 20px;}
.ec-block-title{font-size:18px;font-weight:700;margin:0 0 16px;color:var(--text-primary,#fff);}
.ec-question{margin-bottom:20px;}
.ec-question-text{font-weight:600;margin-bottom:10px;color:var(--text-primary,#fff);}
.ec-option{display:block;width:100%;text-align:left;padding:10px 16px;margin:6px 0;background:var(--bg-tertiary,rgba(255,255,255,.05));border:1px solid var(--border-color,rgba(255,255,255,.1));border-radius:8px;cursor:pointer;color:var(--text-primary,#fff);transition:all .2s;font-size:14px;}
.ec-option:hover{background:color-mix(in srgb, var(--accent) 20%, transparent);border-color:var(--accent);}
.ec-option-correct{background:rgba(34,197,94,.2);border-color:#22c55e;color:#22c55e;}
.ec-option-wrong{background:rgba(239,68,68,.2);border-color:#ef4444;color:#ef4444;}
.ec-feedback{display:none;padding:8px 12px;border-radius:6px;font-size:13px;margin-top:8px;font-weight:600;}
.ec-feedback-ok{background:rgba(34,197,94,.15);color:#22c55e;}
.ec-feedback-ko{background:rgba(239,68,68,.15);color:#ef4444;}
.ec-quiz-score{display:none;margin-top:16px;padding:12px 16px;background:var(--accent);color:#fff;border-radius:8px;font-weight:700;text-align:center;}
.ec-score-perfect{background:linear-gradient(135deg,#22c55e,#16a34a);}
.ec-quiz-reset{margin-top:12px;padding:8px 16px;background:transparent;border:1px solid var(--border-color,rgba(255,255,255,.2));border-radius:6px;cursor:pointer;color:var(--text-secondary,rgba(255,255,255,.7));font-size:13px;}
.ec-exercise-note{width:100%;min-height:100px;padding:12px;background:var(--bg-tertiary,rgba(255,255,255,.05));border:1px solid var(--border-color,rgba(255,255,255,.1));border-radius:8px;color:var(--text-primary,#fff);font-size:14px;resize:vertical;margin-bottom:10px;}
.ec-save-btn{padding:8px 16px;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px;margin-right:8px;}
.ec-exercise-done{padding:8px 16px;background:transparent;border:1px solid var(--border-color,rgba(255,255,255,.2));border-radius:6px;cursor:pointer;color:var(--text-secondary,rgba(255,255,255,.7));font-size:13px;}
.ec-done-active{background:rgba(34,197,94,.2);border-color:#22c55e;color:#22c55e;}
.ec-check-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-color,rgba(255,255,255,.06));}
.ec-check-item input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--accent);flex-shrink:0;margin-top:2px;}
.ec-item-done label{text-decoration:line-through;opacity:.5;}
.ec-progress-bar{background:var(--bg-tertiary,rgba(255,255,255,.05));border-radius:99px;height:8px;margin:16px 0 4px;overflow:hidden;}
.ec-progress-bar-inner{height:100%;background:var(--accent);border-radius:99px;transition:width .4s;}
.ec-progress-label{font-size:12px;color:var(--text-secondary,rgba(255,255,255,.5));}
.ec-complete-msg{margin-top:16px;padding:12px;background:rgba(34,197,94,.15);border:1px solid #22c55e;border-radius:8px;color:#22c55e;font-weight:600;text-align:center;}
.ec-cta-wrap{text-align:center;background:linear-gradient(135deg,color-mix(in srgb, var(--accent) 15%, transparent),rgba(168,85,247,.15));border-color:color-mix(in srgb, var(--accent) 30%, transparent);}
.ec-cta-btn{display:inline-block;padding:12px 28px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:15px;cursor:pointer;transition:transform .2s,opacity .2s;text-decoration:none;}
.ec-cta-btn:hover{opacity:.9;transform:translateY(-1px);}
.ec-cta-clicked{transform:scale(.97);opacity:.8;}
.ec-resources-list{list-style:none;padding:0;margin:0;}
.ec-resources-list li{padding:10px 0;border-bottom:1px solid var(--border-color,rgba(255,255,255,.06));}
.ec-resources-list a{color:var(--accent);text-decoration:none;font-weight:500;}
.ec-free-html-wrap{font-size:15px;line-height:1.6;color:var(--text-primary,#fff);}

/* === MISSING TEXTAREA CLASSES (added to prevent height collapse) === */
.ec-html-textarea {
    width: 100%;
    min-height: 300px;
    padding: 12px 14px;
    background: var(--bg-tertiary, rgba(255,255,255,.05));
    border: 1px solid var(--border-color, rgba(255,255,255,.1));
    border-radius: 8px;
    color: var(--text-primary, #fff);
    font-size: 13px;
    font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.5;
}
.ec-html-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, transparent); }

.ec-field-textarea {
    width: 100%;
    min-height: 70px;
    padding: 10px 12px;
    background: var(--bg-tertiary, rgba(255,255,255,.04));
    border: 1px solid var(--border-color, rgba(255,255,255,.1));
    border-radius: 8px;
    color: var(--text-primary, #fff);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.5;
}
.ec-field-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, transparent); }

.ec-exercise-textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px 14px;
    background: var(--bg-tertiary, rgba(255,255,255,.04));
    border: 1px solid var(--border-color, rgba(255,255,255,.1));
    border-radius: 10px;
    color: var(--text-primary, #fff);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.6;
    transition: border-color .2s;
}
.ec-exercise-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 4%, transparent); }
.ec-exercise-textarea::placeholder { color: var(--text-secondary, rgba(255,255,255,.35)); }


/* ===== css/community.css?v=2602240010 ===== */
/* ═══════════════════════════════════════════════════════════
   COMMUNITY v1.0 — Vue formateur premium
   Préfixe : .com-*
   ═══════════════════════════════════════════════════════════ */

/* ── Root ─────────────────────────────────────────────────── */
.com-root {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 16px 40px;
    font-family: var(--font, 'Inter', sans-serif);
}

/* ── Loading ──────────────────────────────────────────────── */
.com-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted, #9ca3af);
    font-size: 14px;
}
.com-spinner {
    width: 28px; height: 28px;
    border: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-top-color: var(--accent-light);
    border-radius: 50%;
    animation: com-spin .7s linear infinite;
}
.com-spinner-sm {
    width: 18px; height: 18px;
    border: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-top-color: var(--accent-light);
    border-radius: 50%;
    animation: com-spin .7s linear infinite;
}
@keyframes com-spin { to { transform: rotate(360deg); } }
.com-loading-inline {
    display: flex; align-items: center; justify-content: center; padding: 24px;
}

/* ── Header ───────────────────────────────────────────────── */
.com-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.com-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.com-header-icon {
    font-size: 2rem;
    line-height: 1;
}
.com-header-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text, #f3f4f6);
    margin-bottom: 4px;
}
.com-header-sub {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.com-stat-chip {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-light);
}

/* ── Buttons ──────────────────────────────────────────────── */
.com-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .2s;
}
.com-btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: #fff;
}
.com-btn-primary:hover { opacity: .88; transform: translateY(-1px); }
.com-btn-ghost {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent-light);
}
.com-btn-ghost:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.com-btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 8px; }

/* ── Pinned section ───────────────────────────────────────── */
.com-section { margin-bottom: 20px; }
.com-pinned-section {
    background: rgba(251,191,36,.04);
    border: 1px solid rgba(251,191,36,.18);
    border-radius: 14px;
    padding: 16px;
}
.com-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-muted, #9ca3af);
    margin-bottom: 12px;
}

/* ── Compose ──────────────────────────────────────────────── */
.com-compose {
    background: var(--bg-secondary, #1e1836);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
    animation: com-slide-in .25s ease;
}
@keyframes com-slide-in { from { opacity: 0; transform: translateY(-8px); } }
.com-compose-inner { padding: 16px; }
.com-compose-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.com-compose-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted, #9ca3af);
    font-size: 16px; padding: 2px 6px; border-radius: 6px;
}
.com-compose-close:hover { background: rgba(255,255,255,.08); }
.com-compose-ta {
    width: 100%;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    color: var(--text, #f3f4f6);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    padding: 12px 14px;
    resize: vertical;
    min-height: 100px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s;
}
.com-compose-ta:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.com-compose-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.com-char {
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
    margin-right: auto;
}
.com-char-warn { color: #f59e0b !important; }

/* ── Sort bar ─────────────────────────────────────────────── */
.com-sort-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.com-sort-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.1);
    background: none;
    color: var(--text-muted, #9ca3af);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.com-sort-btn:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-light); }
.com-sort-btn.active {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent-light);
}

/* ── Post card ────────────────────────────────────────────── */
.com-post {
    background: var(--bg-secondary, #1e1836);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    margin-bottom: 12px;
    transition: border-color .2s;
    overflow: hidden;
}
.com-post:hover { border-color: rgba(255,255,255,.12); }
.com-post-pinned {
    border-color: rgba(251,191,36,.2);
    background: rgba(251,191,36,.03);
}
.com-post-instructor {
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

.com-post-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px 8px;
}
.com-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-light);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    flex-shrink: 0;
}
.com-avatar-inst {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--accent) 30%, transparent));
    color: var(--accent-light);
}
.com-post-meta { flex: 1; min-width: 0; }
.com-post-author-row {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.com-post-author {
    font-size: 13px; font-weight: 600;
    color: var(--text, #f3f4f6);
}
.com-post-time {
    font-size: 11px; color: var(--text-muted, #9ca3af);
    margin-top: 2px;
}
.com-post-actions-top {
    display: flex; gap: 4px;
    opacity: 0; transition: opacity .2s;
}
.com-post:hover .com-post-actions-top { opacity: 1; }
.com-action-sm {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted, #9ca3af); font-size: 14px;
    padding: 4px 6px; border-radius: 6px;
    transition: background .15s;
}
.com-action-sm:hover { background: rgba(255,255,255,.08); }

.com-post-body {
    padding: 0 16px 12px;
    font-size: 14px; line-height: 1.65;
    color: var(--text, #f3f4f6);
    white-space: pre-wrap; word-break: break-word;
}

.com-post-foot {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px 12px;
    border-top: 1px solid rgba(255,255,255,.06);
    flex-wrap: wrap;
}
.com-action-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    background: none; color: var(--text-muted, #9ca3af);
    font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all .2s;
}
.com-action-btn:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.15);
}
.com-like-btn.com-liked { color: #f87171; border-color: rgba(248,113,113,.3); }
.com-like-btn.com-liked svg { fill: currentColor; }
.com-like-btn.com-liked:hover { background: rgba(248,113,113,.1); }

/* Like pulse animation */
@keyframes com-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}
.com-like-pulse svg { animation: com-pulse .55s ease; }

.com-maha-reply {
    margin-left: auto;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    color: var(--accent-light);
}
.com-maha-reply:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* ── Badges ───────────────────────────────────────────────── */
.com-badge-formateur {
    display: inline-flex; align-items: center;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 10px; font-weight: 700;
    color: var(--accent-light);
    white-space: nowrap;
}
.com-badge-formateur-sm {
    display: inline-flex; align-items: center;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 9px; font-weight: 700;
    color: var(--accent-light);
    margin-left: 5px;
}
.com-badge-pinned {
    display: inline-flex; align-items: center;
    background: rgba(251,191,36,.12);
    border: 1px solid rgba(251,191,36,.25);
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 10px; font-weight: 700;
    color: #fcd34d;
    white-space: nowrap;
}

/* ── Replies ──────────────────────────────────────────────── */
.com-replies-wrap {
    background: rgba(0,0,0,.15);
    border-top: 1px solid rgba(255,255,255,.06);
}
.com-replies { padding: 12px 16px; }
.com-comment {
    display: flex; gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.com-comment:last-child { border-bottom: none; }
.com-comment-av {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #9ca3af;
    flex-shrink: 0;
}
.com-comment-inst .com-comment-av {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-light);
}
.com-comment-body { flex: 1; }
.com-comment-author {
    font-size: 12px; font-weight: 600;
    color: var(--text, #f3f4f6);
    display: flex; align-items: center;
}
.com-comment-text {
    font-size: 13px; color: #d1d5db;
    line-height: 1.5; margin-top: 2px;
    white-space: pre-wrap; word-break: break-word;
}
.com-comment-time {
    font-size: 10px; color: var(--text-muted, #9ca3af); margin-top: 3px;
}
.com-no-reply {
    font-size: 12px; color: var(--text-muted, #9ca3af);
    padding: 4px 0; font-style: italic;
}

/* Reply form */
.com-reply-form {
    display: flex; gap: 8px; margin-top: 10px; align-items: center;
}
.com-reply-input {
    flex: 1;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    padding: 7px 12px;
    color: var(--text, #f3f4f6);
    font-family: inherit; font-size: 13px;
    outline: none;
    transition: border-color .2s;
}
.com-reply-input:focus { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* ── Load more ────────────────────────────────────────────── */
.com-load-more {
    width: 100%; padding: 11px;
    margin-top: 8px;
    border-radius: 10px;
    border: 1px dashed rgba(255,255,255,.12);
    background: none;
    color: var(--text-muted, #9ca3af);
    font-size: 13px; cursor: pointer;
    transition: all .2s;
}
.com-load-more:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-light); }

/* ── Empty state ──────────────────────────────────────────── */
.com-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted, #9ca3af);
}
.com-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.com-empty-title { font-size: 16px; font-weight: 600; color: var(--text, #f3f4f6); margin-bottom: 6px; }
.com-empty-sub { font-size: 13px; }


/* ===== css/billing.css?v=2602240010 ===== */
/**
 * Billing & Plans CSS
 * Page de pricing + feature gate modals
 */

/* =============================================
   CONTAINER & LAYOUT
   ============================================= */

.billing-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.billing-header {
  text-align: center;
  margin-bottom: 48px;
}

.billing-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-primary, #ffffff);
  margin: 0 0 12px;
  background: linear-gradient(135deg, var(--accent-primary, var(--accent)), var(--accent-secondary, #2563eb));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.billing-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  max-width: 520px;
  margin: 0 auto 24px;
  line-height: 1.6;
}

/* =============================================
   INTERVAL TOGGLE
   ============================================= */

.billing-interval-toggle {
  display: inline-flex;
  background: var(--card-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  border-radius: 40px;
  padding: 4px;
  gap: 4px;
  margin: 0 auto;
}

.interval-btn {
  padding: 8px 20px;
  border-radius: 36px;
  border: none;
  background: transparent;
  color: var(--text-secondary, rgba(255,255,255,0.5));
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.interval-btn.active {
  background: var(--accent-primary, var(--accent));
  color: #fff;
}

.discount-badge {
  background: #10b981;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
}

/* =============================================
   CURRENT PLAN BANNER
   ============================================= */

.billing-current-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--accent-primary, var(--accent));
  border-radius: 12px;
  padding: 12px 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.current-plan-label { color: var(--text-secondary, rgba(255,255,255,0.6)); font-size: 0.9rem; }
.current-plan-expiry { color: var(--text-secondary, rgba(255,255,255,0.5)); font-size: 0.85rem; margin-left: auto; }
.cancel-warning { color: #f59e0b; font-size: 0.85rem; }

.btn-manage-billing {
  padding: 7px 16px;
  background: transparent;
  border: 1px solid var(--accent-primary, var(--accent));
  color: var(--accent-primary, var(--accent));
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.2s;
}
.btn-manage-billing:hover { background: var(--accent-primary, var(--accent)); color: #fff; }

/* =============================================
   PLAN CARDS GRID
   ============================================= */

.billing-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}

.billing-plan-card {
  background: var(--card-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  border-radius: 20px;
  padding: 28px 24px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.billing-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
}

.billing-plan-card.popular {
  border-color: var(--accent-primary, var(--accent));
  box-shadow: 0 0 0 1px var(--accent-primary, var(--accent)), 0 8px 32px color-mix(in srgb, var(--accent) 20%, transparent);
}

.billing-plan-card.current {
  border-color: #10b981;
  box-shadow: 0 0 0 1px #10b981;
}

.popular-badge, .current-plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.popular-badge { background: var(--accent-primary, var(--accent)); color: #fff; }
.current-plan-badge { background: #10b981; color: #fff; }

/* =============================================
   PLAN HEADER / PRICE
   ============================================= */

.plan-header { margin-bottom: 20px; }

.plan-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin-bottom: 6px;
}

.plan-description {
  font-size: 0.85rem;
  color: var(--text-secondary, rgba(255,255,255,0.55));
  line-height: 1.5;
  margin-bottom: 16px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.price-amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary, #fff);
}

.price-interval {
  font-size: 0.9rem;
  color: var(--text-secondary, rgba(255,255,255,0.5));
}

.price-custom {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-secondary, rgba(255,255,255,0.6));
}

.price-monthly-equiv {
  width: 100%;
  font-size: 0.78rem;
  color: #10b981;
  margin-top: 2px;
}

/* =============================================
   PLAN HIGHLIGHTS
   ============================================= */

.plan-highlights {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.plan-highlight {
  font-size: 0.85rem;
  color: var(--text-primary, rgba(255,255,255,0.85));
  display: flex;
  align-items: center;
  gap: 6px;
}

/* =============================================
   PLAN FEATURES LIST
   ============================================= */

.plan-features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 24px;
}

.feature-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
}

.feature-row.enabled { color: var(--text-primary, rgba(255,255,255,0.85)); }
.feature-row.disabled { color: var(--text-secondary, rgba(255,255,255,0.3)); text-decoration: line-through; }

.feature-icon {
  width: 18px;
  text-align: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.feature-row.enabled .feature-icon { color: #10b981; }
.feature-row.disabled .feature-icon { color: rgba(255,255,255,0.2); }

/* =============================================
   PLAN CTA BUTTONS
   ============================================= */

.plan-cta { margin-top: auto; }

.btn-plan {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none;
  display: block;
}

.btn-plan.upgrade {
  background: linear-gradient(135deg, var(--accent-primary, var(--accent)), var(--accent-secondary, #2563eb));
  color: #fff;
}
.btn-plan.upgrade:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-plan.current {
  background: #10b981;
  color: #fff;
  cursor: default;
}

.btn-plan.downgrade {
  background: transparent;
  border: 1px solid var(--border-color, rgba(255,255,255,0.2));
  color: var(--text-secondary, rgba(255,255,255,0.5));
}
.btn-plan.downgrade:hover { border-color: rgba(255,255,255,0.4); color: var(--text-primary, #fff); }

.btn-plan.enterprise {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
}
.btn-plan.enterprise:hover { opacity: 0.9; }

.btn-plan.disabled {
  background: var(--card-bg, rgba(255,255,255,0.05));
  color: var(--text-secondary, rgba(255,255,255,0.3));
  cursor: not-allowed;
}

/* =============================================
   PLAN BADGES (inline)
   ============================================= */

.plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}
.plan-badge.plan-free { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
.plan-badge.plan-pro { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-light); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.plan-badge.plan-business { background: rgba(37,99,235,0.2); color: #60a5fa; border: 1px solid rgba(37,99,235,0.4); }
.plan-badge.plan-enterprise { background: rgba(245,158,11,0.2); color: #fbbf24; border: 1px solid rgba(245,158,11,0.4); }

/* =============================================
   STRIPE NOTICE
   ============================================= */

.billing-stripe-notice {
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 12px;
  padding: 14px 20px;
  text-align: center;
  font-size: 0.9rem;
  color: #fbbf24;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.billing-stripe-notice a { color: #fbbf24; }

/* =============================================
   FAQ
   ============================================= */

.billing-faq { border-top: 1px solid var(--border-color, rgba(255,255,255,0.08)); padding-top: 40px; }
.billing-faq h2 { font-size: 1.4rem; font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 24px; }

.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }

.faq-item {
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border-color, rgba(255,255,255,0.07));
  border-radius: 12px;
  padding: 20px;
}
.faq-item h3 { font-size: 0.95rem; font-weight: 600; color: var(--text-primary, #fff); margin: 0 0 8px; }
.faq-item p { font-size: 0.85rem; color: var(--text-secondary, rgba(255,255,255,0.55)); margin: 0; line-height: 1.6; }
.faq-item a { color: var(--accent-primary, var(--accent)); }

/* =============================================
   ERROR STATE
   ============================================= */

.billing-error {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary, rgba(255,255,255,0.5));
}
.billing-error button {
  margin-top: 12px;
  padding: 8px 20px;
  background: var(--accent-primary, var(--accent));
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* =============================================
   FEATURE GATE MODAL
   ============================================= */

.feature-gate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.feature-gate-modal {
  background: var(--modal-bg, #1a1a2e);
  border: 1px solid var(--accent-primary, var(--accent));
  border-radius: 20px;
  padding: 40px 32px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: slideUp 0.2s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.feature-gate-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--text-secondary, rgba(255,255,255,0.4));
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.2s;
}
.feature-gate-close:hover { color: var(--text-primary, #fff); }

.feature-gate-icon { font-size: 2.5rem; margin-bottom: 16px; }

.feature-gate-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin: 0 0 10px;
}

.feature-gate-description {
  font-size: 0.9rem;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  line-height: 1.6;
  margin: 0 0 24px;
}

.feature-gate-plans {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 28px;
}

.gate-current-plan, .gate-required-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gate-plan-label { font-size: 0.75rem; color: var(--text-secondary, rgba(255,255,255,0.4)); }
.plan-badge.required { box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent); }

.gate-arrow { font-size: 1.4rem; color: var(--text-secondary, rgba(255,255,255,0.3)); }

.feature-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-upgrade-now {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent-primary, var(--accent)), var(--accent-secondary, #2563eb));
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-upgrade-now:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-see-plans {
  width: 100%;
  padding: 11px;
  background: transparent;
  border: 1px solid var(--border-color, rgba(255,255,255,0.15));
  color: var(--text-primary, rgba(255,255,255,0.8));
  border-radius: 10px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-see-plans:hover { border-color: rgba(255,255,255,0.35); }

.btn-gate-cancel {
  background: transparent;
  border: none;
  color: var(--text-secondary, rgba(255,255,255,0.4));
  font-size: 0.85rem;
  cursor: pointer;
  padding: 6px;
  text-decoration: underline;
}

/* =============================================
   LOCKED FEATURE ELEMENTS
   ============================================= */

.feature-locked {
  position: relative;
  cursor: pointer;
}

.plan-required-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.05em;
}
.plan-badge-pro { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-light); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.plan-badge-business { background: rgba(37,99,235,0.2); color: #60a5fa; border: 1px solid rgba(37,99,235,0.4); }
.plan-badge-enterprise { background: rgba(245,158,11,0.2); color: #fbbf24; border: 1px solid rgba(245,158,11,0.4); }

/* =============================================
   SKELETON LOADING
   ============================================= */

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.06) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
  .billing-container { padding: 24px 16px 60px; }
  .billing-title { font-size: 1.7rem; }
  .billing-plans-grid { grid-template-columns: 1fr; }
  .billing-current-banner { flex-direction: column; align-items: flex-start; }
  .btn-manage-billing { margin-left: 0; width: 100%; }
  .feature-gate-modal { padding: 32px 20px; }
  .feature-gate-plans { flex-direction: column; }
}


/* ===== css/feedback.css?v=2602240010 ===== */
/* =====================================================
   FEEDBACK SYSTEM — Styles complets
   Bouton flottant + Modal + Vue admin
   ===================================================== */

/* ── Bouton flottant FAB ─────────────────────────────── */

.feedback-fab {
  position: fixed;
  bottom: 88px; /* au-dessus du chatbot */
  right: 20px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  font-family: inherit;
}

.feedback-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 50%, transparent);
}

.feedback-fab:active {
  transform: translateY(0);
}

.feedback-fab svg {
  flex-shrink: 0;
}

/* ── Overlay modal ───────────────────────────────────── */

.feedback-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  animation: feedbackFadeIn 0.15s ease;
}

@keyframes feedbackFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Modal box ───────────────────────────────────────── */

.feedback-modal {
  background: var(--bg-secondary, #1e1e2e);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: feedbackSlideIn 0.2s ease;
}

@keyframes feedbackSlideIn {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.feedback-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}

.feedback-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #fff);
}

.feedback-modal-close {
  background: none;
  border: none;
  color: var(--text-muted, #888);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.feedback-modal-close:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary, #fff);
}

/* ── Corps du modal ─────────────────────────────────── */

.feedback-modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Types */
.feedback-type-row {
  display: flex;
  gap: 8px;
}

.feedback-type-btn {
  flex: 1;
  padding: 8px 10px;
  background: var(--bg-tertiary, rgba(255,255,255,0.05));
  border: 2px solid transparent;
  border-radius: 10px;
  color: var(--text-secondary, #aaa);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.feedback-type-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary, #fff);
}

.feedback-type-btn.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--text-primary, #fff);
}

/* Page URL */
.feedback-page-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #888);
}

.feedback-page-label {
  font-weight: 600;
}

.feedback-page-url {
  font-family: monospace;
  color: var(--accent);
  font-size: 11px;
  word-break: break-all;
}

/* Textarea */
.feedback-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-tertiary, rgba(255,255,255,0.05));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 10px;
  color: var(--text-primary, #fff);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.feedback-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.feedback-textarea-error {
  border-color: #ef4444 !important;
  animation: feedbackShake 0.3s ease;
}

@keyframes feedbackShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Screenshot */
.feedback-screenshot-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feedback-screenshot-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #888);
  font-weight: 500;
}

.feedback-capture-btn {
  align-self: flex-start;
  padding: 7px 12px;
  background: var(--bg-tertiary, rgba(255,255,255,0.05));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  color: var(--text-secondary, #aaa);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.feedback-capture-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary, #fff);
}

.feedback-screenshot-preview {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.feedback-screenshot-preview img {
  max-width: 100%;
  max-height: 120px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  object-fit: cover;
}

.feedback-remove-screenshot {
  background: rgba(0,0,0,0.6);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Footer modal ────────────────────────────────────── */

.feedback-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}

.feedback-cancel-btn {
  padding: 9px 18px;
  background: none;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  border-radius: 8px;
  color: var(--text-secondary, #aaa);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.feedback-cancel-btn:hover {
  border-color: var(--text-secondary, #aaa);
  color: var(--text-primary, #fff);
}

.feedback-submit-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.feedback-submit-btn:hover:not(:disabled) {
  background: var(--accent-hover, var(--accent));
}

.feedback-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Toast fallback ──────────────────────────────────── */

.feedback-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  animation: feedbackToastIn 0.3s ease, feedbackToastOut 0.3s ease 2.7s forwards;
}

.feedback-toast-success {
  background: #22c55e;
  color: #fff;
}

.feedback-toast-error {
  background: #ef4444;
  color: #fff;
}

@keyframes feedbackToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes feedbackToastOut {
  to { opacity: 0; transform: translateX(-50%) translateY(10px); }
}

/* =====================================================
   ADMIN VIEW
   ===================================================== */

.feedback-admin-wrapper {
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.feedback-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.feedback-admin-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin: 0;
}

.feedback-admin-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.feedback-admin-select {
  padding: 7px 10px;
  background: var(--bg-secondary, #1e1e2e);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  color: var(--text-primary, #fff);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.feedback-admin-refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--bg-tertiary, rgba(255,255,255,0.05));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  color: var(--text-secondary, #aaa);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.feedback-admin-refresh-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary, #fff);
}

/* Stats */
.feedback-admin-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.feedback-stat-card {
  flex: 1;
  min-width: 80px;
  padding: 14px 16px;
  background: var(--bg-secondary, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px;
  text-align: center;
}

.feedback-stat-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary, #fff);
}

.feedback-stat-label {
  font-size: 12px;
  color: var(--text-muted, #888);
  margin-top: 2px;
}

.feedback-stat-bug .feedback-stat-value { color: #ef4444; }
.feedback-stat-new .feedback-stat-value { color: #f59e0b; }
.feedback-stat-done .feedback-stat-value { color: #22c55e; }

/* Liste */
.feedback-admin-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feedback-admin-loading,
.feedback-admin-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-muted, #888);
  font-size: 14px;
}

.feedback-admin-item {
  background: var(--bg-secondary, rgba(255,255,255,0.03));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s;
}

.feedback-admin-item:hover {
  border-color: rgba(255,255,255,0.15);
}

.feedback-admin-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.feedback-admin-type-badge {
  padding: 3px 10px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.feedback-admin-status-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.feedback-status-new {
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.3);
  color: #f59e0b;
}

.feedback-status-progress {
  background: rgba(59,130,246,0.15);
  border: 1px solid rgba(59,130,246,0.3);
  color: #3b82f6;
}

.feedback-status-resolved {
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.3);
  color: #22c55e;
}

.feedback-admin-date {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted, #888);
}

.feedback-admin-user {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #ccc);
}

.feedback-admin-email {
  font-weight: 400;
  color: var(--text-muted, #888);
  font-size: 12px;
}

.feedback-admin-description {
  font-size: 14px;
  color: var(--text-primary, #fff);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.feedback-admin-page {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #888);
  font-family: monospace;
  word-break: break-all;
}

.feedback-admin-screenshot {
  margin-top: 4px;
}

.feedback-admin-screenshot-thumb {
  max-width: 200px;
  max-height: 120px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  cursor: pointer;
  transition: max-width 0.3s, max-height 0.3s;
  object-fit: cover;
}

.feedback-admin-screenshot-expanded {
  max-width: 100% !important;
  max-height: 400px !important;
}

.feedback-admin-note {
  font-size: 13px;
  color: var(--text-secondary, #aaa);
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  font-style: italic;
}

.feedback-admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.feedback-admin-action-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: all 0.15s;
}

.feedback-action-progress {
  background: rgba(59,130,246,0.1);
  border-color: rgba(59,130,246,0.3);
  color: #3b82f6;
}

.feedback-action-progress:hover {
  background: rgba(59,130,246,0.2);
}

.feedback-action-resolve {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.3);
  color: #22c55e;
}

.feedback-action-resolve:hover {
  background: rgba(34,197,94,0.2);
}

.feedback-action-note {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: var(--text-secondary, #aaa);
}

.feedback-action-note:hover {
  border-color: var(--accent);
  color: var(--text-primary, #fff);
}

.feedback-admin-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* FAB feedback désactivé — remplacé par le footer */
.feedback-fab { display: none !important; }


/* ===== css/pwa.css?v=2602240010 ===== */
/**
 * PWA Styles - Toasts, Install Prompt, Offline indicator
 * ProductiveApp v4.0
 */

/* XP Toast */
.xp-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #d4af37, #f4d03f);
    color: #1a1a1f;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
    animation: toastSlideIn 0.3s ease, toastFadeOut 0.3s ease 2.7s forwards;
    z-index: 1200;
}

.xp-toast span {
    font-size: 20px;
}

/* Achievement Toast */
.achievement-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #1a1a1f, #2d2d35);
    border: 2px solid #d4af37;
    color: #fff;
    padding: 16px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: toastSlideIn 0.4s ease, toastFadeOut 0.3s ease 4.7s forwards;
    z-index: 1200;
    max-width: 350px;
}

.achievement-toast span {
    font-size: 32px;
}

.achievement-toast div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.achievement-toast strong {
    font-size: 16px;
    color: #d4af37;
}

.achievement-toast small {
    font-size: 13px;
    color: #999;
}

/* Animations */
@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

/* Install Prompt */
.pwa-install-prompt {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1a1a1f, #2d2d35);
    border: 1px solid #d4af37;
    color: #fff;
    padding: 16px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1200;
    animation: slideUp 0.4s ease;
}

.pwa-install-prompt img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.pwa-install-prompt .text {
    flex: 1;
}

.pwa-install-prompt .text strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}

.pwa-install-prompt .text small {
    color: #999;
    font-size: 13px;
}

.pwa-install-prompt .actions {
    display: flex;
    gap: 8px;
}

.pwa-install-prompt button {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.pwa-install-prompt .install-btn {
    background: #d4af37;
    color: #1a1a1f;
}

.pwa-install-prompt .install-btn:hover {
    background: #f4d03f;
}

.pwa-install-prompt .dismiss-btn {
    background: transparent;
    color: #999;
    border: 1px solid #444;
}

.pwa-install-prompt .dismiss-btn:hover {
    border-color: #666;
    color: #fff;
}

@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* Offline Indicator */
.offline-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ef4444;
    color: #fff;
    text-align: center;
    padding: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 1200;
    animation: slideDown 0.3s ease;
}

.offline-indicator.online {
    background: #22c55e;
    animation: slideDown 0.3s ease, fadeOut 0.3s ease 2s forwards;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

/* Standalone mode adjustments */
@media (display-mode: standalone) {
    .app-header {
        padding-top: env(safe-area-inset-top, 0);
    }

    body {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}


/* ===== css/calendar-v7.css?v=2602240010 ===== */
/**
 * Calendar View v7.0 - Glassmorphism Premium
 * Refonte complète avec design moderne
 */

:root {
  --cal-glass-bg: rgba(255, 255, 255, 0.03);
  --cal-glass-border: rgba(255, 255, 255, 0.1);
  --cal-glass-hover: rgba(255, 255, 255, 0.05);
  --cal-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --cal-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --cal-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --cal-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);

  /* Event Type Colors */
  --cal-urgent: #EF4444;     /* Red - Tâches urgentes */
  --cal-meeting: #3B82F6;    /* Blue - Meetings */
  --cal-deadline: #F59E0B;   /* Orange - Deadlines */
  --cal-personal: #10B981;   /* Green - Personnel */
  --cal-reminder: #8B5CF6;   /* Purple - Rappels */
  --cal-general: #6366F1;    /* Indigo - Général */
}

/* Container */
.calendar-v7-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  gap: 20px;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb, 99, 102, 241), 0.03) 0%,
    rgba(var(--accent-rgb, 99, 102, 241), 0.01) 100%);
}

/* Header avec glassmorphism */
.cal-v7-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 24px;
  background: var(--cal-glass-bg);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid var(--cal-glass-border);
  box-shadow: var(--cal-shadow-md);
}

.cal-v7-header-left {
  flex: 1;
}

.cal-v7-title {
  margin: 0 0 6px 0;
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cal-v7-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.cal-v7-header-right {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Buttons avec glassmorphism */
.cal-v7-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

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

.cal-v7-btn:hover::before {
  width: 300px;
  height: 300px;
}

.cal-v7-btn-primary {
  background: linear-gradient(135deg, var(--accent-color), rgba(var(--accent-rgb, 99, 102, 241), 0.8));
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb, 99, 102, 241), 0.4);
}

.cal-v7-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb, 99, 102, 241), 0.5);
}

.cal-v7-btn-secondary {
  background: var(--cal-glass-bg);
  backdrop-filter: blur(10px);
  color: var(--text-primary);
  border: 1px solid var(--cal-glass-border);
  box-shadow: var(--cal-shadow-sm);
}

.cal-v7-btn-secondary:hover {
  background: var(--cal-glass-hover);
  border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.3);
  transform: translateY(-1px);
}

.cal-v7-btn svg {
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 1;
}

/* Toolbar glassmorphism */
.cal-v7-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--cal-glass-bg);
  backdrop-filter: blur(20px);
  border-radius: 14px;
  border: 1px solid var(--cal-glass-border);
  box-shadow: var(--cal-shadow-md);
  gap: 16px;
}

.cal-v7-toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cal-v7-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--cal-glass-border);
  background: var(--cal-glass-bg);
  backdrop-filter: blur(10px);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cal-v7-nav-btn:hover {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
  transform: scale(1.05);
}

.cal-v7-current-label {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  padding-left: 12px;
  border-left: 2px solid var(--accent-color);
}

.cal-v7-toolbar-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* View Switcher */
.cal-v7-view-switcher {
  display: flex;
  background: var(--cal-glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--cal-glass-border);
}

.cal-v7-view-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.cal-v7-view-btn.active {
  background: var(--accent-color);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb, 99, 102, 241), 0.3);
}

.cal-v7-view-btn:not(.active):hover {
  color: var(--text-primary);
  background: var(--cal-glass-hover);
}

/* Filters Panel */
.cal-v7-filters {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: var(--cal-glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid var(--cal-glass-border);
  flex-wrap: wrap;
}

.cal-v7-filter-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.cal-v7-filter-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.cal-v7-filter-chip.active {
  border-color: currentColor;
  box-shadow: 0 2px 8px currentColor;
}

.cal-v7-filter-chip:hover {
  transform: scale(1.05);
}

.cal-v7-filter-chip.urgent { background: rgba(239, 68, 68, 0.15); color: var(--cal-urgent); }
.cal-v7-filter-chip.meeting { background: rgba(59, 130, 246, 0.15); color: var(--cal-meeting); }
.cal-v7-filter-chip.deadline { background: rgba(245, 158, 11, 0.15); color: var(--cal-deadline); }
.cal-v7-filter-chip.personal { background: rgba(16, 185, 129, 0.15); color: var(--cal-personal); }
.cal-v7-filter-chip.reminder { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--cal-reminder); }
.cal-v7-filter-chip.general { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--cal-general); }

/* Content Area */
.cal-v7-content {
  flex: 1;
  overflow: auto;
  background: var(--cal-glass-bg);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid var(--cal-glass-border);
  box-shadow: var(--cal-shadow-md);
  padding: 16px;
}

/* Month View */
.cal-v7-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  background: var(--cal-glass-border);
  border-radius: 12px;
  overflow: hidden;
}

.cal-v7-month-day-header {
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb, 99, 102, 241), 0.1),
    rgba(var(--accent-rgb, 99, 102, 241), 0.05));
  backdrop-filter: blur(10px);
  padding: 14px 10px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cal-v7-month-day {
  background: var(--cal-glass-bg);
  backdrop-filter: blur(10px);
  min-height: 110px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.cal-v7-month-day::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent, rgba(var(--accent-rgb, 99, 102, 241), 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cal-v7-month-day:hover {
  background: var(--cal-glass-hover);
  transform: scale(1.02);
  box-shadow: var(--cal-shadow-sm);
}

.cal-v7-month-day:hover::before {
  opacity: 1;
}

.cal-v7-month-day.today {
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb, 99, 102, 241), 0.15),
    rgba(var(--accent-rgb, 99, 102, 241), 0.08));
  border: 2px solid var(--accent-color);
  box-shadow: 0 0 20px rgba(var(--accent-rgb, 99, 102, 241), 0.3);
}

.cal-v7-month-day.other-month {
  opacity: 0.3;
  pointer-events: none;
}

.cal-v7-month-day-number {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.cal-v7-month-day.today .cal-v7-month-day-number {
  color: var(--accent-color);
  font-size: 1.1rem;
}

.cal-v7-month-day-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.cal-v7-event-badge {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  line-height: 1.4;
  cursor: move;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cal-v7-event-badge:hover {
  transform: translateX(3px) scale(1.02);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Event Type Colors */
.cal-v7-event-badge.urgent { background: var(--cal-urgent); color: #fff; }
.cal-v7-event-badge.meeting { background: var(--cal-meeting); color: #fff; }
.cal-v7-event-badge.deadline { background: var(--cal-deadline); color: #fff; }
.cal-v7-event-badge.personal { background: var(--cal-personal); color: #fff; }
.cal-v7-event-badge.reminder { background: var(--cal-reminder); color: #fff; }
.cal-v7-event-badge.general { background: var(--cal-general); color: #fff; }

.cal-v7-more-events {
  font-size: 0.7rem;
  color: var(--accent-color);
  padding: 3px 6px;
  font-weight: 700;
  margin-top: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cal-v7-more-events:hover {
  transform: scale(1.05);
}

/* Week View */
.cal-v7-week-grid {
  display: grid;
  grid-template-columns: 70px repeat(7, 1fr);
  gap: 1px;
  background: var(--cal-glass-border);
  border-radius: 12px;
  overflow: hidden;
}

.cal-v7-week-time-header {
  background: var(--cal-glass-bg);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--cal-glass-border);
}

.cal-v7-week-day-header {
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb, 99, 102, 241), 0.1),
    rgba(var(--accent-rgb, 99, 102, 241), 0.05));
  backdrop-filter: blur(10px);
  padding: 14px;
  text-align: center;
  border-bottom: 2px solid var(--cal-glass-border);
  transition: all 0.3s ease;
}

.cal-v7-week-day-header.today {
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb, 99, 102, 241), 0.25),
    rgba(var(--accent-rgb, 99, 102, 241), 0.15));
  border-bottom-color: var(--accent-color);
}

.cal-v7-week-day-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.cal-v7-week-day-number {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cal-v7-week-day-header.today .cal-v7-week-day-number {
  color: var(--accent-color);
  font-size: 1.3rem;
}

.cal-v7-week-time {
  background: var(--cal-glass-bg);
  backdrop-filter: blur(10px);
  padding: 10px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: right;
  border-right: 2px solid var(--cal-glass-border);
  font-weight: 600;
}

.cal-v7-week-cell {
  background: var(--cal-glass-bg);
  backdrop-filter: blur(5px);
  min-height: 70px;
  padding: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.cal-v7-week-cell:hover {
  background: var(--cal-glass-hover);
  box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb, 99, 102, 241), 0.2);
}

.cal-v7-event-block {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  margin-bottom: 3px;
  cursor: move;
  transition: all 0.3s ease;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.cal-v7-event-block:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cal-v7-event-time {
  font-weight: 700;
  font-size: 0.75rem;
  margin-bottom: 2px;
  opacity: 0.95;
}

.cal-v7-event-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Day View */
.cal-v7-day-view {
  padding: 20px;
}

.cal-v7-day-timeline {
  display: flex;
  flex-direction: column;
}

.cal-v7-day-hour {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 20px;
  min-height: 90px;
  border-bottom: 1px solid var(--cal-glass-border);
}

.cal-v7-day-hour-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 700;
  padding-top: 10px;
  text-align: right;
}

.cal-v7-day-hour-content {
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.cal-v7-day-hour-content:hover {
  background: var(--cal-glass-hover);
  box-shadow: var(--cal-shadow-sm);
}

/* Agenda/List View */
.cal-v7-agenda-view {
  padding: 20px;
}

.cal-v7-agenda-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--cal-glass-border);
}

.cal-v7-agenda-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.cal-v7-agenda-count {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.cal-v7-agenda-group {
  margin-bottom: 32px;
}

.cal-v7-agenda-date-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb, 99, 102, 241), 0.1),
    rgba(var(--accent-rgb, 99, 102, 241), 0.05));
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border-left: 4px solid var(--accent-color);
}

.cal-v7-agenda-date-header.today {
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb, 99, 102, 241), 0.2),
    rgba(var(--accent-rgb, 99, 102, 241), 0.1));
  box-shadow: 0 4px 12px rgba(var(--accent-rgb, 99, 102, 241), 0.2);
}

.cal-v7-agenda-day {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.cal-v7-agenda-date-label {
  display: flex;
  flex-direction: column;
}

.cal-v7-agenda-weekday {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cal-v7-agenda-month {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.cal-v7-agenda-events {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 20px;
}

.cal-v7-agenda-event {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--cal-glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid var(--cal-glass-border);
  transition: all 0.3s ease;
  cursor: pointer;
  border-left: 4px solid;
}

.cal-v7-agenda-event:hover {
  background: var(--cal-glass-hover);
  transform: translateX(4px);
  box-shadow: var(--cal-shadow-sm);
}

.cal-v7-agenda-event.urgent { border-left-color: var(--cal-urgent); }
.cal-v7-agenda-event.meeting { border-left-color: var(--cal-meeting); }
.cal-v7-agenda-event.deadline { border-left-color: var(--cal-deadline); }
.cal-v7-agenda-event.personal { border-left-color: var(--cal-personal); }
.cal-v7-agenda-event.reminder { border-left-color: var(--cal-reminder); }
.cal-v7-agenda-event.general { border-left-color: var(--cal-general); }

.cal-v7-agenda-event-time {
  flex-shrink: 0;
  width: 80px;
  text-align: right;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.cal-v7-agenda-event-content {
  flex: 1;
}

.cal-v7-agenda-event-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.cal-v7-agenda-event-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.cal-v7-agenda-event-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.cal-v7-agenda-no-events {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.cal-v7-agenda-no-events svg {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.cal-v7-agenda-no-events p {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

/* Modal glassmorphism */
.cal-v7-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cal-v7-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
}

.cal-v7-modal-content {
  position: relative;
  background: var(--bg-primary);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  width: 95%;
  max-width: 800px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--cal-shadow-xl);
  border: 1px solid var(--cal-glass-border);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cal-v7-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  border-bottom: 1px solid var(--cal-glass-border);
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb, 99, 102, 241), 0.05),
    transparent);
  flex-shrink: 0;
}

.cal-v7-modal-header h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cal-v7-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--cal-glass-bg);
  backdrop-filter: blur(10px);
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 1px solid var(--cal-glass-border);
}

.cal-v7-close-btn:hover {
  background: var(--cal-urgent);
  color: #fff;
  transform: rotate(90deg);
  border-color: var(--cal-urgent);
}

.cal-v7-modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}

.cal-v7-form-group {
  margin-bottom: 20px;
}

.cal-v7-form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cal-v7-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--cal-glass-border);
  background: var(--cal-glass-bg);
  backdrop-filter: blur(10px);
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.cal-v7-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 99, 102, 241), 0.15);
  background: var(--cal-glass-hover);
}

.cal-v7-color-input {
  width: 70px;
  height: 45px;
  border: 1px solid var(--cal-glass-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cal-v7-color-input:hover {
  transform: scale(1.05);
}

.cal-v7-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cal-v7-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 28px;
  border-top: 1px solid var(--cal-glass-border);
  background: linear-gradient(to top,
    rgba(var(--accent-rgb, 99, 102, 241), 0.02),
    transparent);
  flex-shrink: 0;
}

/* AI Assistant Panel glassmorphism */
.cal-v7-ai-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
}

.cal-v7-ai-panel-content {
  background: var(--bg-primary);
  backdrop-filter: blur(20px);
  width: 90%;
  max-width: 480px;
  height: 100%;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--cal-glass-border);
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.cal-v7-ai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  border-bottom: 1px solid var(--cal-glass-border);
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb, 99, 102, 241), 0.1),
    transparent);
}

.cal-v7-ai-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cal-v7-ai-body {
  flex: 1;
  padding: 28px;
  overflow: auto;
}

.cal-v7-ai-hint {
  padding: 14px;
  background: var(--cal-glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border-left: 4px solid var(--accent-color);
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.cal-v7-ai-input {
  width: 100%;
  min-height: 120px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--cal-glass-border);
  background: var(--cal-glass-bg);
  backdrop-filter: blur(10px);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.cal-v7-ai-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 99, 102, 241), 0.15);
}

.cal-v7-ai-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.cal-v7-ai-result {
  margin-top: 20px;
  padding: 14px;
  border-radius: 10px;
  font-size: 0.95rem;
}

.cal-v7-ai-loading {
  background: var(--cal-glass-bg);
  color: var(--text-secondary);
  padding: 14px;
  text-align: center;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.cal-v7-ai-success {
  background: rgba(16, 185, 129, 0.15);
  border-left: 4px solid #10B981;
  color: #10B981;
  padding: 14px;
}

.cal-v7-ai-error {
  background: rgba(239, 68, 68, 0.15);
  border-left: 4px solid #EF4444;
  color: #EF4444;
  padding: 14px;
}

.cal-v7-ai-info {
  background: rgba(59, 130, 246, 0.15);
  border-left: 4px solid #3B82F6;
  color: #3B82F6;
  padding: 14px;
}

.cal-v7-ai-slots {
  padding: 16px;
  background: var(--cal-glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid var(--cal-glass-border);
}

.cal-v7-ai-slots h4 {
  margin: 0 0 14px 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cal-v7-ai-slot {
  padding: 12px 14px;
  background: var(--bg-primary);
  border-radius: 8px;
  border: 1px solid var(--cal-glass-border);
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: var(--text-primary);
  transition: all 0.3s ease;
  cursor: pointer;
}

.cal-v7-ai-slot:hover {
  border-color: var(--accent-color);
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.08);
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 768px) {
  .calendar-v7-container {
    padding: 16px;
    gap: 16px;
  }

  .cal-v7-header {
    flex-direction: column;
    padding: 16px 20px;
  }

  .cal-v7-header-right {
    width: 100%;
  }

  .cal-v7-btn {
    flex: 1;
    justify-content: center;
  }

  .cal-v7-toolbar {
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
  }

  .cal-v7-toolbar-left,
  .cal-v7-toolbar-right {
    width: 100%;
    justify-content: center;
  }

  .cal-v7-filters {
    justify-content: center;
  }

  .cal-v7-month-day {
    min-height: 70px;
    padding: 6px;
  }

  .cal-v7-month-day-number {
    font-size: 0.85rem;
  }

  .cal-v7-event-badge {
    font-size: 0.7rem;
  }

  .cal-v7-week-grid {
    grid-template-columns: 55px repeat(7, 1fr);
  }

  .cal-v7-agenda-event {
    flex-direction: column;
    gap: 8px;
  }

  .cal-v7-agenda-event-time {
    width: 100%;
    text-align: left;
  }

  .cal-v7-modal-content {
    width: 95%;
  }

  .cal-v7-ai-panel-content {
    width: 100%;
  }

  .cal-v7-form-row {
    grid-template-columns: 1fr;
  }
}


/* ===== css/giri-calendar.css?v=2602240010 ===== */
/**
 * Giri Calendar v1.0 — Design Premium Dark
 * Module calendrier interactif
 */

/* ══════════════════════════════════════════════════
   ROOT / VARIABLES
══════════════════════════════════════════════════ */
:root {
  --gcal-bg:          #0f1117;
  --gcal-surface:     rgba(255,255,255,0.03);
  --gcal-surface-2:   rgba(255,255,255,0.06);
  --gcal-border:      rgba(255,255,255,0.08);
  --gcal-border-h:    rgba(255,255,255,0.15);
  --gcal-text:        #e2e8f0;
  --gcal-text-2:      #94a3b8;
  --gcal-text-3:      #64748b;
  --gcal-accent:      var(--accent-color, var(--accent));
  --gcal-accent-rgb:  var(--accent-rgb, 99,102,241);
  --gcal-today-bg:    rgba(99,102,241,0.10);
  --gcal-today-ring:  rgba(99,102,241,0.5);
  --gcal-weekend:     rgba(255,255,255,0.01);
  --gcal-other:       rgba(255,255,255,0.02);
  --gcal-hour-h:      52px;
  --gcal-shadow:      0 4px 24px rgba(0,0,0,0.4);
  --gcal-shadow-xl:   0 20px 60px rgba(0,0,0,0.6);
  --gcal-radius:      14px;
  --gcal-radius-sm:   8px;
}

/* ══════════════════════════════════════════════════
   CONTAINER
══════════════════════════════════════════════════ */
.gcal-root {
  height: 100%;
  overflow: hidden;
  /* NE PAS mettre display:flex ici — override .view-container { display:none }
     La règle flex est appliquée UNIQUEMENT quand la vue est active */
}

/* Flex layout only when calendar view is active */
.view-container.active.gcal-root {
  display: flex;
  flex-direction: column;
}

.gcal-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  background: var(--bg-primary, #0f1117);
  overflow: hidden;
}

/* ══════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════ */
.gcal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--gcal-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.gcal-header-left, .gcal-header-center, .gcal-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gcal-header-right { gap: 8px; }

.gcal-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gcal-logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--gcal-accent-rgb),.3), rgba(var(--gcal-accent-rgb),.1));
  border: 1px solid rgba(var(--gcal-accent-rgb),.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gcal-accent);
  flex-shrink: 0;
}

.gcal-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gcal-text);
  line-height: 1.2;
}

.gcal-period {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--gcal-text-2);
  font-weight: 500;
}

/* Nav buttons */
.gcal-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--gcal-surface);
  border: 1px solid var(--gcal-border);
  border-radius: 10px;
  padding: 4px;
}

.gcal-nav-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--gcal-text);
  border-radius: 7px;
  cursor: pointer;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.gcal-nav-btn:hover { background: var(--gcal-surface-2); }

.gcal-nav-today {
  padding: 4px 12px;
  border: none;
  background: transparent;
  color: var(--gcal-text-2);
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all .15s;
}
.gcal-nav-today:hover { background: var(--gcal-surface-2); color: var(--gcal-text); }

/* View buttons */
.gcal-views {
  display: flex;
  background: var(--gcal-surface);
  border: 1px solid var(--gcal-border);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
}

.gcal-view-btn {
  padding: 5px 14px;
  border: none;
  background: transparent;
  color: var(--gcal-text-2);
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all .15s;
  white-space: nowrap;
}
.gcal-view-btn:hover { color: var(--gcal-text); background: var(--gcal-surface-2); }
.gcal-view-btn.active {
  background: var(--gcal-accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--gcal-accent-rgb),.4);
}

/* Action buttons */
.gcal-btn-create {
  padding: 8px 16px;
  border: none;
  border-radius: var(--gcal-radius-sm);
  background: var(--gcal-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(var(--gcal-accent-rgb),.4);
}
.gcal-btn-create:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(var(--gcal-accent-rgb),.5);
}

.gcal-btn-sync {
  width: 36px;
  height: 36px;
  border: 1px solid var(--gcal-border);
  border-radius: var(--gcal-radius-sm);
  background: var(--gcal-surface);
  color: var(--gcal-text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.gcal-btn-sync:hover { color: var(--gcal-text); border-color: var(--gcal-border-h); }
.gcal-btn-sync.spin svg { animation: gcal-spin .8s linear infinite; }

@keyframes gcal-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════
   BODY
══════════════════════════════════════════════════ */
.gcal-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════════════════
   MONTH VIEW
══════════════════════════════════════════════════ */
.gcal-month {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.gcal-month-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--gcal-border);
  flex-shrink: 0;
}

.gcal-day-name {
  padding: 10px 8px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gcal-text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(255,255,255,0.015);
}

.gcal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  flex: 1;
  overflow: hidden;
  border-left: 1px solid var(--gcal-border);
}

.gcal-mcell {
  border-right: 1px solid var(--gcal-border);
  border-bottom: 1px solid var(--gcal-border);
  padding: 6px;
  min-height: 90px;
  overflow: hidden;
  cursor: default;
  transition: background .15s;
  position: relative;
}
.gcal-mcell:hover { background: var(--gcal-surface); }
.gcal-mcell.other  { background: var(--gcal-other); }
.gcal-mcell.weekend { background: var(--gcal-weekend); }
.gcal-mcell.today  { background: var(--gcal-today-bg); box-shadow: inset 0 0 0 2px var(--gcal-today-ring); }
.gcal-mcell.drop-over { background: rgba(var(--gcal-accent-rgb),.12); }

.gcal-mday-num {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gcal-text-2);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  margin-bottom: 4px;
  transition: all .15s;
}
.gcal-mday-num:hover { background: var(--gcal-surface-2); color: var(--gcal-text); }
.gcal-mday-num.today {
  background: var(--gcal-accent);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(var(--gcal-accent-rgb),.5);
}
.gcal-mcell.other .gcal-mday-num { color: var(--gcal-text-3); }

.gcal-mday-evs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Event chips (month) */
.gcal-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--ec) 15%, transparent);
  color: var(--ec);
  border-left: 2px solid var(--ec);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: all .12s;
  user-select: none;
}
.gcal-chip:hover {
  background: color-mix(in srgb, var(--ec) 25%, transparent);
  transform: translateX(1px);
}

.gcal-chip-time { opacity: .7; font-weight: 500; flex-shrink: 0; }
.gcal-chip-title { overflow: hidden; text-overflow: ellipsis; }
.gcal-chip-bell  { font-size: .6rem; flex-shrink: 0; }

.gcal-more {
  font-size: 0.68rem;
  color: var(--gcal-text-3);
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 4px;
  transition: color .15s;
}
.gcal-more:hover { color: var(--gcal-accent); }

/* ══════════════════════════════════════════════════
   WEEK / DAY SHARED
══════════════════════════════════════════════════ */
.gcal-week, .gcal-day-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.gcal-week-head, .gcal-allday-row {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--gcal-border);
}

.gcal-tgutter {
  width: 52px;
  flex-shrink: 0;
  border-right: 1px solid var(--gcal-border);
}
.gcal-tgutter-sm {
  font-size: 0.62rem;
  color: var(--gcal-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  text-align: center;
  line-height: 1.2;
}

.gcal-wcol-head {
  flex: 1;
  padding: 8px 4px;
  text-align: center;
  border-right: 1px solid var(--gcal-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.gcal-wcol-head.today { background: var(--gcal-today-bg); }

.gcal-wday-s {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gcal-text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.gcal-wday-n {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gcal-text-2);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all .15s;
}
.gcal-wday-n.today {
  background: var(--gcal-accent);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(var(--gcal-accent-rgb),.5);
}

/* All-day row */
.gcal-allday-row {
  min-height: 28px;
  background: rgba(255,255,255,0.015);
}

.gcal-allday-col {
  flex: 1;
  border-right: 1px solid var(--gcal-border);
  padding: 3px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gcal-allday-pill {
  background: color-mix(in srgb, var(--ec) 20%, transparent);
  color: var(--ec);
  border-left: 3px solid var(--ec);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all .12s;
}
.gcal-allday-pill:hover { background: color-mix(in srgb, var(--ec) 30%, transparent); }

/* All-day bar (day view) */
.gcal-allday-bar {
  padding: 8px 16px;
  border-bottom: 1px solid var(--gcal-border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

/* Time grid body */
.gcal-week-body, .gcal-day-grid {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  scrollbar-width: thin;
  scrollbar-color: var(--gcal-border) transparent;
}

.gcal-time-col {
  width: 52px;
  flex-shrink: 0;
  border-right: 1px solid var(--gcal-border);
}

.gcal-hlabel {
  height: var(--gcal-hour-h);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2px 6px 0 0;
  font-size: 0.65rem;
  color: var(--gcal-text-3);
  font-weight: 500;
}

/* Week columns */
.gcal-wcol {
  flex: 1;
  position: relative;
  border-right: 1px solid var(--gcal-border);
  min-width: 0;
}
.gcal-wcol.today { background: var(--gcal-today-bg); }

/* Day column */
.gcal-dcol {
  flex: 1;
  position: relative;
  min-width: 0;
}
.gcal-dcol.today { background: var(--gcal-today-bg); }

.gcal-hslot {
  height: var(--gcal-hour-h);
  border-bottom: 1px solid var(--gcal-border);
  cursor: pointer;
  transition: background .1s;
}
.gcal-hslot:hover { background: rgba(var(--gcal-accent-rgb),.05); }

/* Time events */
.gcal-wev, .gcal-dev {
  position: absolute;
  left: 3px;
  right: 3px;
  background: color-mix(in srgb, var(--ec) 20%, rgba(15,17,23,.8));
  border-left: 3px solid var(--ec);
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  overflow: hidden;
  transition: all .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  user-select: none;
  z-index: 1;
}
.gcal-wev:hover, .gcal-dev:hover {
  background: color-mix(in srgb, var(--ec) 30%, rgba(15,17,23,.85));
  transform: translateX(2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  z-index: 2;
}

.gcal-wev-title, .gcal-dev-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ec);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcal-wev-time, .gcal-dev-time {
  font-size: 0.65rem;
  color: color-mix(in srgb, var(--ec) 70%, white);
  opacity: .8;
}
.gcal-dev-loc { font-size: 0.65rem; color: var(--gcal-text-3); margin-top: 2px; }

/* Current time line */
.gcal-nowline {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #ef4444;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 0 6px rgba(239,68,68,.6);
}
.gcal-nowdot {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239,68,68,.8);
}

/* ══════════════════════════════════════════════════
   MODALS / OVERLAYS
══════════════════════════════════════════════════ */
.gcal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gcal-popup {
  background: #1a1d27;
  border: 1px solid var(--gcal-border-h);
  border-radius: 18px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--gcal-shadow-xl);
  animation: gcal-popup-in .2s cubic-bezier(.34,1.56,.64,1);
  scrollbar-width: thin;
  scrollbar-color: var(--gcal-border) transparent;
}
@keyframes gcal-popup-in {
  from { transform: scale(.92) translateY(10px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.gcal-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--gcal-border);
}
.gcal-pop-head h3 { margin: 0; font-size: 1.1rem; color: var(--gcal-text); font-weight: 700; }

.gcal-pop-close {
  width: 32px; height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--gcal-surface-2);
  color: var(--gcal-text-2);
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.gcal-pop-close:hover { background: var(--gcal-surface); color: var(--gcal-text); }

/* Day popup */
.gcal-day-pop .gcal-pop-head { border: none; }
.gcal-pop-evs { padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.gcal-pop-ev {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--gcal-surface);
  cursor: pointer; font-size: 0.85rem;
  color: var(--gcal-text); transition: background .15s;
}
.gcal-pop-ev:hover { background: var(--gcal-surface-2); }
.gcal-pop-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ══════════════════════════════════════════════════
   EVENT FORM
══════════════════════════════════════════════════ */
.gcal-form-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}

.gcal-fg { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.gcal-frow { display: flex; gap: 12px; }
.gcal-flabel { font-size: 0.72rem; font-weight: 700; color: var(--gcal-text-2); text-transform: uppercase; letter-spacing: .06em; }

.gcal-input {
  padding: 10px 14px;
  border-radius: var(--gcal-radius-sm);
  border: 1px solid var(--gcal-border);
  background: rgba(255,255,255,0.04);
  color: var(--gcal-text);
  font-size: 0.9rem;
  transition: border-color .15s, background .15s;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.gcal-input:focus {
  outline: none;
  border-color: rgba(var(--gcal-accent-rgb),.6);
  background: rgba(var(--gcal-accent-rgb),.05);
}

.gcal-title-inp {
  font-size: 1.05rem;
  font-weight: 600;
  padding: 12px 14px;
}
.gcal-textarea {
  min-height: 80px;
  resize: vertical;
}
.gcal-color-inp {
  width: 100%;
  height: 42px;
  padding: 4px;
  cursor: pointer;
}
.gcal-fg-color { max-width: 100px; }

/* Toggle */
.gcal-allday-fg { justify-content: flex-end; align-items: flex-end; }
.gcal-toggle { position: relative; display: inline-block; cursor: pointer; }
.gcal-toggle input { display: none; }
.gcal-toggle-track {
  width: 44px; height: 24px;
  background: var(--gcal-surface-2);
  border: 1px solid var(--gcal-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 2px;
  transition: all .2s;
}
.gcal-toggle input:checked + .gcal-toggle-track {
  background: rgba(var(--gcal-accent-rgb),.3);
  border-color: rgba(var(--gcal-accent-rgb),.5);
}
.gcal-toggle-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gcal-text-3);
  transition: all .2s;
}
.gcal-toggle input:checked + .gcal-toggle-track .gcal-toggle-thumb {
  transform: translateX(20px);
  background: var(--gcal-accent);
}

/* Form footer */
.gcal-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--gcal-border);
  gap: 12px;
}
.gcal-foot-right { display: flex; gap: 8px; margin-left: auto; }

.gcal-btn-prim {
  padding: 9px 20px;
  border: none;
  border-radius: var(--gcal-radius-sm);
  background: var(--gcal-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 2px 12px rgba(var(--gcal-accent-rgb),.4);
}
.gcal-btn-prim:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(var(--gcal-accent-rgb),.5); }

.gcal-btn-sec {
  padding: 9px 20px;
  border: 1px solid var(--gcal-border);
  border-radius: var(--gcal-radius-sm);
  background: var(--gcal-surface);
  color: var(--gcal-text-2);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all .15s;
}
.gcal-btn-sec:hover { background: var(--gcal-surface-2); color: var(--gcal-text); }

.gcal-btn-danger {
  padding: 9px 16px;
  border: 1px solid rgba(239,68,68,.3);
  border-radius: var(--gcal-radius-sm);
  background: rgba(239,68,68,.1);
  color: #ef4444;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all .15s;
}
.gcal-btn-danger:hover { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.5); }

/* ══════════════════════════════════════════════════
   EVENT DETAIL
══════════════════════════════════════════════════ */
.gcal-detail { position: relative; overflow: hidden; }
.gcal-detail-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--ec);
}

.gcal-type-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.gcal-detail-body { padding: 16px 20px 8px; }
.gcal-detail-title {
  margin: 0 0 16px;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gcal-text);
  line-height: 1.3;
}
.gcal-detail-meta { display: flex; flex-direction: column; gap: 8px; }
.gcal-detail-row {
  font-size: 0.875rem;
  color: var(--gcal-text-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gcal-detail-desc {
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--gcal-text-2);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .gcal-header { padding: 12px 16px; gap: 8px; }
  .gcal-logo-icon { display: none; }
  .gcal-title { font-size: 1rem; }
  .gcal-views { display: none; }
  .gcal-btn-create { padding: 7px 12px; font-size: 0.8rem; }
  .gcal-frow { flex-direction: column; }
  .gcal-popup { border-radius: 14px; }
  .gcal-month-grid { grid-template-rows: repeat(6, minmax(70px, 1fr)); }
  .gcal-chip-time { display: none; }
  .gcal-header-left { min-width: 0; }
}

@media (max-width: 480px) {
  .gcal-mday-num { width: 22px; height: 22px; font-size: 0.75rem; }
  .gcal-chip { font-size: 0.65rem; padding: 1px 4px; }
  .gcal-header { flex-wrap: wrap; }
  .gcal-header-center, .gcal-header-right { flex-wrap: wrap; }
  .gcal-fg-color { max-width: none; }
}

/* ===== CURRENT TIME LINE ===== */
.gcal-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #ef4444 5%, #ef4444 100%);
  z-index: 10;
  pointer-events: none;
  animation: gcalNowPulse 2s ease-in-out infinite;
}
.gcal-now-dot {
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239,68,68,0.8);
}
@keyframes gcalNowPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ===== CALENDAR CSS SCOPING — prevent bleed ===== */
/* All gcal- classes are already scoped, :root vars use --gcal- prefix */
/* Extra safety: scope inside .gcal-root */
.gcal-root { contain: layout style; }
/* ── Task dots in month cells (addon) ── */
#view-calendar .gcal-task-dots {
  display: flex; flex-wrap: wrap; gap: 3px;
  padding: 2px 2px 0;
}
#view-calendar .gcal-task-dot {
  width: 6px; height: 6px; border-radius: 50%;
  opacity: 0.7; transition: opacity 0.2s;
}
#view-calendar .gcal-task-dot.done {
  opacity: 0.3;
  background: #22c55e !important;
}
#view-calendar .gcal-task-dot-more {
  font-size: 0.55rem; color: var(--gcal-text-2);
  line-height: 6px;
}
/* Week col task indicator */
#view-calendar .gcal-wcol-tasks {
  display: block; font-size: 0.62rem;
  color: var(--gcal-accent); opacity: 0.8;
  margin-top: 2px;
}


/* ===== css/calendar-premium.css?v=2602240010 ===== */
/**
 * Calendar Premium v2.0 — Styles additionnels
 * Side panel | Nowline animée | Tasks intégration | Resize | Push notif UI
 * SCOPED under #view-calendar (.gcal-root)
 */

/* ══════════════════════════════════════════════════
   SIDE PANEL
══════════════════════════════════════════════════ */
#view-calendar .gcal-sidepanel {
  position: absolute;
  top: 0; right: 0;
  width: 300px;
  height: 100%;
  background: var(--bg-secondary, #12151e);
  border-left: 1px solid rgba(255,255,255,0.08);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#view-calendar .gcal-sidepanel.open {
  transform: translateX(0);
  box-shadow: -8px 0 32px rgba(0,0,0,0.4);
}
#view-calendar .gcal-wrap {
  position: relative;
  overflow: hidden;
}
#view-calendar .gcal-sp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
#view-calendar .gcal-sp-title {
  font-size: 1rem; font-weight: 700;
  color: var(--text-primary, #e2e8f0);
}
#view-calendar .gcal-sp-close {
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.06); border: none; border-radius: 6px;
  color: var(--text-secondary, #94a3b8); cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
#view-calendar .gcal-sp-close:hover { background: rgba(255,255,255,0.1); color: var(--text-primary, #e2e8f0); }
#view-calendar .gcal-sp-body {
  flex: 1; overflow-y: auto; padding: 16px;
}
#view-calendar .gcal-sp-section {
  margin-bottom: 20px;
}
#view-calendar .gcal-sp-section-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-secondary, #64748b);
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
#view-calendar .gcal-sp-add {
  background: rgba(var(--accent-rgb,99,102,241),0.15);
  color: var(--accent-color, var(--accent));
  border: 1px solid rgba(var(--accent-rgb,99,102,241),0.3);
  border-radius: 6px; padding: 3px 10px;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
}
#view-calendar .gcal-sp-add:hover {
  background: rgba(var(--accent-rgb,99,102,241),0.25);
}
#view-calendar .gcal-sp-empty {
  font-size: 0.8rem; color: var(--text-secondary, #64748b);
  text-align: center; padding: 16px 0; margin: 0;
}
#view-calendar .gcal-sp-ev {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px; border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 8px; cursor: pointer;
  transition: all 0.2s;
}
#view-calendar .gcal-sp-ev:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}
#view-calendar .gcal-sp-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-top: 4px;
}
#view-calendar .gcal-sp-ev-title {
  font-size: 0.85rem; font-weight: 600;
  color: var(--text-primary, #e2e8f0);
}
#view-calendar .gcal-sp-ev-time {
  font-size: 0.75rem; color: var(--text-secondary, #94a3b8); margin-top: 2px;
}
/* Tasks in side panel */
#view-calendar .gcal-sp-task {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(255,255,255,0.1);
}
#view-calendar .gcal-sp-task-high { border-left-color: #EF4444; }
#view-calendar .gcal-sp-task-medium { border-left-color: #F59E0B; }
#view-calendar .gcal-sp-task-low { border-left-color: #10B981; }
#view-calendar .gcal-sp-task-check {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; color: transparent; flex-shrink: 0;
  transition: all 0.2s;
}
#view-calendar .gcal-sp-task-check.done {
  background: #22c55e; border-color: #22c55e; color: #fff;
}
#view-calendar .gcal-sp-task-title {
  font-size: 0.8rem; color: var(--text-primary, #e2e8f0);
}

/* ══════════════════════════════════════════════════
   NOWLINE ANIMÉE
══════════════════════════════════════════════════ */
@keyframes gcal-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.8); opacity: 0.6; }
}
@keyframes gcal-nowline-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(239,68,68,0.5); }
  50%       { box-shadow: 0 0 12px rgba(239,68,68,0.9); }
}
#view-calendar .gcal-nowline {
  position: absolute; left: 0; right: 0;
  height: 2px; background: #EF4444; z-index: 8; pointer-events: none;
  animation: gcal-nowline-glow 2s ease-in-out infinite;
}
#view-calendar .gcal-nowdot {
  position: absolute; left: -5px; top: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #EF4444; display: block;
  animation: gcal-pulse 2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════
   TASKS DANS VUE JOUR (day view tasks section)
══════════════════════════════════════════════════ */
#view-calendar .gcal-day-tasks {
  margin: 16px 0;
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}
#view-calendar .gcal-day-tasks-title {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-secondary, #64748b);
  margin-bottom: 12px;
}
#view-calendar .gcal-day-task-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  margin-bottom: 6px; cursor: default;
  transition: background 0.15s;
}
#view-calendar .gcal-day-task-item:hover { background: rgba(255,255,255,0.04); }
#view-calendar .gcal-day-task-icon {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; flex-shrink: 0;
}
#view-calendar .gcal-day-task-icon.done {
  background: #22c55e22; border-color: #22c55e; color: #22c55e;
}
#view-calendar .gcal-day-task-text { font-size: 0.82rem; color: var(--text-primary, #e2e8f0); }
#view-calendar .gcal-day-task-text.done { text-decoration: line-through; opacity: 0.5; }
#view-calendar .gcal-day-task-priority {
  font-size: 0.65rem; padding: 2px 6px; border-radius: 4px;
  margin-left: auto; flex-shrink: 0;
}
#view-calendar .gcal-day-task-priority.urgent,
#view-calendar .gcal-day-task-priority.high {
  background: rgba(239,68,68,0.15); color: #EF4444;
}
#view-calendar .gcal-day-task-priority.medium {
  background: rgba(245,158,11,0.15); color: #F59E0B;
}
#view-calendar .gcal-day-task-priority.low {
  background: rgba(16,185,129,0.15); color: #10B981;
}

/* ══════════════════════════════════════════════════
   WEEK VIEW — event blocks résizables
══════════════════════════════════════════════════ */
#view-calendar .gcal-wev-resize-handle,
#view-calendar .gcal-dev-resize-handle {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 6px; cursor: s-resize;
  background: rgba(255,255,255,0.15);
  border-radius: 0 0 4px 4px;
  opacity: 0;
  transition: opacity 0.2s;
}
#view-calendar .gcal-wev:hover .gcal-wev-resize-handle,
#view-calendar .gcal-dev:hover .gcal-dev-resize-handle {
  opacity: 1;
}

/* ══════════════════════════════════════════════════
   NOTIFICATION PERMISSION TOAST
══════════════════════════════════════════════════ */
.gcal-notif-permission-bar {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--bg-secondary, #1a1f2e);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 14px 20px;
  display: flex; align-items: center; gap: 16px;
  z-index: 9999; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  backdrop-filter: blur(20px);
  max-width: 480px; width: calc(100% - 48px);
  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.gcal-notif-permission-bar .gcal-npb-icon {
  font-size: 1.5rem; flex-shrink: 0;
}
.gcal-notif-permission-bar .gcal-npb-text {
  flex: 1;
}
.gcal-notif-permission-bar .gcal-npb-text strong {
  display: block; font-size: 0.9rem; color: var(--text-primary, #e2e8f0);
  margin-bottom: 2px;
}
.gcal-notif-permission-bar .gcal-npb-text span {
  font-size: 0.78rem; color: var(--text-secondary, #94a3b8);
}
.gcal-notif-permission-bar .gcal-npb-btn {
  padding: 8px 16px; border-radius: 8px; border: none;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s; flex-shrink: 0;
}
.gcal-notif-permission-bar .gcal-npb-yes {
  background: var(--accent-color, var(--accent)); color: #fff;
}
.gcal-notif-permission-bar .gcal-npb-yes:hover { opacity: 0.85; }
.gcal-notif-permission-bar .gcal-npb-no {
  background: rgba(255,255,255,0.06); color: var(--text-secondary, #94a3b8);
}
.gcal-notif-permission-bar .gcal-npb-no:hover { background: rgba(255,255,255,0.1); }

/* ══════════════════════════════════════════════════
   MORNING BRIEF NOTIFICATION
══════════════════════════════════════════════════ */
.gcal-morning-brief {
  position: fixed; top: 80px; right: 24px;
  width: 340px; background: var(--bg-secondary, #1a1f2e);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 20px;
  z-index: 9998; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  backdrop-filter: blur(20px);
  animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.gcal-morning-brief .gcal-mb-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.gcal-morning-brief .gcal-mb-icon { font-size: 1.5rem; }
.gcal-morning-brief .gcal-mb-title {
  font-size: 1rem; font-weight: 700; color: var(--text-primary, #e2e8f0);
}
.gcal-morning-brief .gcal-mb-date {
  font-size: 0.78rem; color: var(--text-secondary, #94a3b8);
}
.gcal-morning-brief .gcal-mb-close {
  margin-left: auto; background: none; border: none;
  color: var(--text-secondary, #94a3b8); cursor: pointer; font-size: 1rem;
}
.gcal-morning-brief .gcal-mb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.03);
}
.gcal-morning-brief .gcal-mb-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.gcal-morning-brief .gcal-mb-text { font-size: 0.82rem; color: var(--text-primary, #e2e8f0); }
.gcal-morning-brief .gcal-mb-time { font-size: 0.72rem; color: var(--text-secondary, #94a3b8); margin-left: auto; }
.gcal-morning-brief .gcal-mb-empty { font-size: 0.82rem; color: var(--text-secondary, #94a3b8); text-align: center; padding: 12px 0; }
.gcal-morning-brief .gcal-mb-footer {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 0.75rem; color: var(--text-secondary, #94a3b8);
  text-align: center;
}

/* Day stats bar (overload indicator) */
#view-calendar .gcal-day-overload-badge {
  position: absolute; top: 4px; right: 4px;
  background: rgba(239,68,68,0.2); color: #EF4444;
  border: 1px solid rgba(239,68,68,0.4);
  border-radius: 4px; padding: 1px 5px;
  font-size: 0.6rem; font-weight: 700;
  pointer-events: none;
}


/* ===== css/responsive.css?v=2602240010 ===== */
/**
 * RESPONSIVE CSS - ProductiveApp v5.0
 * Complete mobile-first responsive design
 * Breakpoints: 768px (tablet), 480px (mobile)
 */

/* ===== MOBILE BOTTOM NAV ===== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--surface, #1e1e2e);
    border-top: 1px solid var(--border, #333);
    z-index: 9999;
    padding: 0 4px env(safe-area-inset-bottom, 0);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.mobile-nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 12px;
    background: none;
    border: none;
    color: var(--text-secondary, #888);
    font-size: 10px;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    min-width: 56px;
    min-height: 44px; /* Apple HIG touch target */
}

.mobile-nav-item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    transition: all 0.2s;
}

.mobile-nav-item.active {
    color: var(--accent);
}

.mobile-nav-item.active svg {
    stroke-width: 2.2;
}

.mobile-nav-item:active {
    transform: scale(0.9);
}

.mobile-nav-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.2s;
}

.mobile-nav-item.active .mobile-nav-dot {
    opacity: 1;
}

/* ===== TABLET (< 1024px) ===== */
@media (max-width: 1024px) {
    .tasks-view.columns-view {
        gap: 12px;
    }

    .task-column {
        min-width: 260px;
    }

    .skeleton-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== TABLET PORTRAIT (< 768px) ===== */
@media (max-width: 768px) {
    /* Sidebar: hidden by default, overlay on toggle */
    #app-sidebar {
        transform: translateX(-100%);
        position: fixed !important;
        z-index: 1100;
        width: 280px !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #app-sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar-mobile-overlay.active {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        /* z-index managed by ux-fixes.css --z-sidebar-overlay */
    }

    .sidebar-mobile-toggle {
        display: flex !important;
    }

    /* Main content: full width */
    .main-content {
        margin-left: 0 !important;
        padding-bottom: 72px; /* Space for bottom nav */
        width: 100% !important;
    }

    /* Show mobile bottom nav */
    .mobile-bottom-nav {
        display: block;
    }

    /* App header: compact */
    .app-header {
        padding: 8px 12px;
        flex-wrap: nowrap;
    }

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

    .user-badge .user-name {
        display: none;
    }

    /* Project dropdown inside filter bar */
    .pf-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
    .pf-count { display: none; }
    .filter-sep { display: none; }
    .add-project-btn { display: none; }
    .project-dropdown-list {
        min-width: 240px;
        max-width: calc(100vw - 40px);
    }

    /* User filter bar: compact */
    .user-filter-bar {
        padding: 4px 8px;
        gap: 6px;
        flex-wrap: wrap;
    }

    .user-filter-bar label {
        display: none;
    }

    /* Task input: stack vertically */
    .task-input-section {
        flex-direction: column;
        gap: 8px;
        padding: 8px 12px;
    }

    .task-input-section input[type="text"] {
        width: 100%;
    }

    .task-input-section select {
        width: 100%;
    }

    .task-input-section .btn-primary {
        width: 100%;
        padding: 12px;
    }

    /* Tasks: single column */
    .tasks-view.columns-view {
        flex-direction: column;
        gap: 16px;
        padding: 0 8px;
    }

    .task-column {
        min-width: 100%;
    }

    /* Journal section: compact */
    .journal-input-row {
        flex-direction: column;
        gap: 6px;
    }

    .journal-input-row input,
    .journal-input-row select,
    .journal-input-row button {
        width: 100%;
    }

    /* Notes: full width */
    .notes-container {
        flex-direction: column;
    }

    .notes-sidebar {
        width: 100% !important;
        max-height: 200px;
        overflow-y: auto;
    }

    .notes-editor {
        width: 100% !important;
    }

    /* Accounting: responsive */
    .acc-wrapper {
        padding: 8px;
    }

    .acc-dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    .acc-contacts-grid {
        grid-template-columns: 1fr !important;
    }

    /* Galaxy: hide toolbar extras */
    .galaxy-toolbar-sep,
    #galaxy-toggle-orbits,
    #galaxy-toggle-autorotate {
        display: none;
    }

    /* Reports: single column */
    .reports-grid {
        grid-template-columns: 1fr !important;
    }

    /* Settings: full width sections */
    .settings-grid {
        grid-template-columns: 1fr !important;
    }

    /* Messaging: full width */
    .messaging-container {
        flex-direction: column;
    }

    .messaging-sidebar {
        width: 100% !important;
        max-height: 250px;
    }

    .messaging-main {
        width: 100% !important;
    }

    /* Breadcrumb: smaller */
    .breadcrumb-bar {
        padding: 4px 12px 0;
    }

    .breadcrumb {
        font-size: 11px;
    }

    /* Quick Add: full width */
    .quick-add-modal {
        width: 95vw !important;
        max-width: 95vw !important;
        bottom: 72px !important; /* Above bottom nav */
    }

    /* Command Palette: full width */
    .command-palette-modal,
    .global-search-modal {
        width: 95vw !important;
        max-width: 95vw !important;
        margin-top: 20px !important;
    }

    /* Pomodoro: smaller */
    .pomodoro-widget {
        bottom: 76px !important; /* Above bottom nav */
    }

    /* Psycho-audit: responsive */
    .questionnaire,
    .results {
        padding: 12px;
    }

    .axis-group {
        margin-bottom: 16px;
    }

    /* Analytics: single column */
    .analytics-grid {
        grid-template-columns: 1fr !important;
    }

    /* Calendar: compact */
    .calendar-grid {
        font-size: 12px;
    }

    .calendar-day {
        min-height: 60px;
        padding: 2px;
    }

    /* Gamification: responsive */
    .gamification-grid {
        grid-template-columns: 1fr !important;
    }

    /* Theme modal: full screen */
    .theme-modal {
        width: 95vw !important;
        max-height: 85vh !important;
    }

    /* Toast: full width */
    .toast-container {
        right: 8px !important;
        left: 8px !important;
        top: 8px !important;
    }

    .toast {
        width: 100% !important;
    }
}

/* ===== MOBILE SMALL (< 480px) ===== */
@media (max-width: 480px) {
    .app-header {
        padding: 6px 8px;
    }

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

    .header-right .menu-container {
        margin-left: 4px;
    }

    .galaxy-icon-container {
        display: none;
    }

    .project-dropdown { display: none; }
    .add-project-btn { display: none; }

    .task-item {
        padding: 10px;
    }

    .task-item .task-title {
        font-size: 13px;
    }

    .empty-state-title {
        font-size: 16px;
    }

    .empty-state-subtitle {
        font-size: 12px;
    }

    /* Score badge in psycho-audit */
    .score-badge {
        width: 100px;
        height: 100px;
    }

    .score-value {
        font-size: 32px;
    }

    /* Compact cards */
    .dashboard-card,
    .analytics-card,
    .report-card {
        padding: 12px;
    }

    /* Breadcrumb: hide on very small */
    .breadcrumb-bar {
        display: none;
    }
}

/* ===== LANDSCAPE PHONE ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .mobile-bottom-nav {
        height: 48px;
    }

    .mobile-nav-item {
        font-size: 9px;
    }

    .mobile-nav-item svg {
        width: 18px;
        height: 18px;
    }

    .main-content {
        padding-bottom: 56px;
    }
}

/* ===== SAFE AREA (notched phones) ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(64px + env(safe-area-inset-bottom));
    }

    @media (max-width: 768px) {
        .main-content {
            padding-bottom: calc(72px + env(safe-area-inset-bottom));
        }
    }
}

/* ===== TOUCH IMPROVEMENTS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn, button, .project-dropdown-btn, .menu-item {
        min-height: 44px;
    }

    /* Remove hover effects on touch */
    .task-item:hover,
    .note-item:hover,
    .project-card:hover {
        transform: none;
    }

    /* Smooth scrolling */
    .view-container,
    .task-list,
    .notes-list {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Disable text selection on interactive elements */
    .mobile-nav-item,
    .sidebar-item,
    .project-dropdown-btn {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ===== PRINT ===== */
@media print {
    #app-sidebar,
    .mobile-bottom-nav,
    .sidebar-mobile-toggle,
    .animation-fab,
    .pomodoro-widget,
    .toast-container,
    .chatbot-toggle {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .view-container {
        break-inside: avoid;
    }
}


/* ===== css/global-search.css?v=2602240010 ===== */
/**
 * GLOBAL SEARCH v1.0 — Spotlight Premium
 * Cmd+K / Ctrl+K overlay — glassmorphism dark
 */

/* ── OVERLAY ─────────────────────────────────────────────────────────────── */
#gs-overlay {
    position: fixed;
    inset: 0;
    z-index: 9900;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

#gs-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ── MODAL ───────────────────────────────────────────────────────────────── */
.gs-modal {
    width: 640px;
    max-width: calc(100vw - 32px);
    background: rgba(18, 18, 28, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent),
        0 32px 80px rgba(0, 0, 0, 0.6),
        0 8px 32px color-mix(in srgb, var(--accent) 10%, transparent);
    overflow: hidden;
    transform: scale(0.95) translateY(-10px);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
}

#gs-overlay.active .gs-modal {
    transform: scale(1) translateY(0);
}

/* ── INPUT ROW ───────────────────────────────────────────────────────────── */
.gs-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.gs-icon-search {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.gs-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 17px;
    color: #f0f0f0;
    caret-color: var(--accent-light);
    font-weight: 400;
}

.gs-input::placeholder { color: rgba(255, 255, 255, 0.3); }

.gs-badge-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.gs-kbd {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 3px 7px;
    font-family: ui-monospace, monospace;
}

.gs-close-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.gs-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* ── BODY ────────────────────────────────────────────────────────────────── */
.gs-body {
    flex: 1;
    overflow-y: auto;
    min-height: 120px;
    max-height: 480px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 30%, transparent) transparent;
}

.gs-body::-webkit-scrollbar { width: 4px; }
.gs-body::-webkit-scrollbar-track { background: transparent; }
.gs-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 4px; }

/* ── EMPTY / HISTORY / QUICK ACTIONS ────────────────────────────────────── */
.gs-empty-state {
    padding: 24px 20px;
}

.gs-empty-icon {
    font-size: 36px;
    text-align: center;
    margin-bottom: 10px;
}

.gs-empty-text {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.gs-empty-sub {
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    margin-top: 8px;
}

.gs-empty-sub kbd {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11px;
    font-family: ui-monospace, monospace;
}

.gs-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.25);
    padding: 0 4px;
    margin-bottom: 8px;
    margin-top: 16px;
}

/* History items */
.gs-history-wrap {
    margin-bottom: 8px;
}

.gs-hist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    transition: all 0.12s;
}

.gs-hist-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
}

/* Quick actions */
.gs-quick-actions { margin-top: 4px; }

.gs-quick-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.12s;
}

.gs-quick-item:hover, .gs-quick-item:focus {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.gs-quick-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; }

.gs-quick-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-family: ui-monospace, monospace;
    min-width: 140px;
}

.gs-quick-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
}

/* ── RESULTS ─────────────────────────────────────────────────────────────── */
.gs-results {
    padding: 8px 10px;
}

/* Groups */
.gs-group {
    margin-bottom: 8px;
}

.gs-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gc, var(--accent-light));
    padding: 8px 10px 4px;
    opacity: 0.8;
}

.gs-group-count {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    margin-left: auto;
    font-weight: 600;
}

/* Result items */
.gs-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.1s;
    position: relative;
}

.gs-item:hover,
.gs-item.selected {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.gs-item.selected {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    outline: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    outline-offset: -1px;
}

.gs-item-icon {
    font-size: 18px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

.gs-item-body {
    flex: 1;
    min-width: 0;
}

.gs-item-title {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-item-excerpt {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-item-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.gs-item-arrow {
    color: rgba(255, 255, 255, 0.2);
    font-size: 18px;
    flex-shrink: 0;
}

.gs-item:hover .gs-item-arrow,
.gs-item.selected .gs-item-arrow {
    color: rgba(255, 255, 255, 0.5);
}

/* Badge (task status) */
.gs-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

/* Highlight */
.gs-hl {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent-light);
    border-radius: 3px;
    padding: 0 2px;
    font-style: normal;
}

/* ── SPINNER ─────────────────────────────────────────────────────────────── */
.gs-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.gs-spin {
    width: 24px;
    height: 24px;
    border: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-top-color: var(--accent-light);
    border-radius: 50%;
    animation: gs-rotate 0.7s linear infinite;
}

@keyframes gs-rotate { to { transform: rotate(360deg); } }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.gs-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.gs-footer kbd {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    margin-right: 4px;
}

.gs-footer-brand {
    margin-left: auto;
    color: color-mix(in srgb, var(--accent) 50%, transparent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* ── FLASH ANIMATION (found item) ────────────────────────────────────────── */
.gs-flash {
    animation: gs-flash-anim 1.5s ease;
}

@keyframes gs-flash-anim {
    0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent); }
    100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #gs-overlay { padding-top: 20px; align-items: flex-start; }
    .gs-modal { border-radius: 14px 14px 0 0; max-height: 85vh; }
    .gs-input { font-size: 16px; } /* prevent zoom on iOS */
    .gs-quick-label { min-width: auto; }
    .gs-quick-desc { display: none; }
}


/* ===== css/mobile.css?v=2602240010 ===== */
/**
 * ═══════════════════════════════════════════════════════════════
 * MOBILE.CSS v1.0 — ProductiveApp Mobile Enhancements
 * ═══════════════════════════════════════════════════════════════
 *
 * Compléments à responsive.css (ne duplique pas l'existant) :
 *   1.  Tablet sidebar 70px icônes (769-1024px)
 *   2.  Font-size 16px min — anti-zoom iOS
 *   3.  Touch targets 44px strict (Apple HIG)
 *   4.  prefers-reduced-motion
 *   5.  Dashboard — cards adaptées
 *   6.  Tasks — swipe hints & filtres scrollables
 *   7.  CRM — table scroll horizontal + stats 2-col
 *   8.  Academy — grille 1 colonne
 *   9.  Notes — éditeur plein écran slide-in sidebar
 *   10. Header mobile — logo centré
 *   11. Images — performance & contenu
 *   12. Scroll & touch — momentum, snap, overscroll
 *   13. Forms & modals — bottom sheet pattern
 *   14. Gamification — compact mobile
 *   15. PWA — safe areas + install banner
 *   16. Productive Tools — 2-col mobile
 *   17. Sidebar hamburger — améliorations visuelles
 *   18. Misc — analytics, billing, drive, tunnels…
 */

/* ═══════════════════════════════════════════════════════════════
   1. TABLET (769-1024px) — Sidebar icônes 70px
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {
  body.logged-in #app-sidebar {
    width: 70px !important;
    min-width: 70px !important;
    overflow: hidden;
  }

  /* Masquer tout le texte, garder icônes */
  body.logged-in #app-sidebar .sidebar-label,
  body.logged-in #app-sidebar .sidebar-brand-name,
  body.logged-in #app-sidebar .sidebar-brand-version,
  body.logged-in #app-sidebar .sidebar-profile-info,
  body.logged-in #app-sidebar .sidebar-tag,
  body.logged-in #app-sidebar .sidebar-badge,
  body.logged-in #app-sidebar .sidebar-section-label,
  body.logged-in #app-sidebar .sidebar-notif-bell,
  body.logged-in #app-sidebar .sidebar-brand,
  body.logged-in #app-sidebar .sidebar-collapse-btn {
    display: none !important;
  }

  /* Items centrés icône seulement */
  body.logged-in #app-sidebar .sidebar-item {
    justify-content: center;
    padding: 10px 0;
  }

  /* Avatar centré, pas de texte */
  body.logged-in #app-sidebar .sidebar-profile {
    padding: 12px 0;
    justify-content: center;
  }

  body.logged-in #app-sidebar .sidebar-header {
    justify-content: center;
    padding: 12px 0;
  }

  /* Contenu principal décalé */
  body.logged-in .main-content {
    margin-left: 70px !important;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Header: pas de padding inutile */
  .app-header {
    padding-left: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   2. FONT-SIZE 16px MIN — Prevents iOS auto-zoom on focus
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   3. TOUCH TARGETS — 44px minimum (Apple HIG)
   ═══════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
  button,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  [role="button"],
  .sidebar-item,
  .tab-btn,
  .pa-tab-btn,
  .menu-item,
  .dropdown-item,
  .nav-item,
  .action-btn,
  .icon-btn,
  .task-item-action-btn,
  .filter-btn,
  .sort-btn {
    min-height: 44px;
  }

  /* Petits boutons icône: zone de tap élargie */
  .icon-btn-sm,
  .btn-xs {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Checkbox/radio plus grands */
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px;
    height: 22px;
    cursor: pointer;
  }

  /* Liens dans les listes */
  a.nav-link,
  a.sidebar-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   4. PREFERS-REDUCED-MOTION
   ═══════════════════════════════════════════════════════════════ */

@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;
  }

  /* Sidebar: pas de transition (mais slide toujours fonctionnel) */
  #app-sidebar {
    transition: none !important;
  }

  /* Gamification: pas d'étoiles */
  .gv-star { display: none; }

  /* Loading shimmer: statique */
  .skeleton,
  [class*="shimmer"],
  [class*="skeleton"] {
    animation: none !important;
    background: var(--surface-hover, #2a2a3e) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   5. DASHBOARD — Cards adaptées mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Stats: 2 colonnes */
  .stats-row,
  .stat-cards-row,
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Charts: 1 colonne */
  .dash-charts-grid,
  .dashboard-charts,
  .charts-grid {
    grid-template-columns: 1fr !important;
  }

  /* Span-2 annulé */
  .dash-charts-grid > [style*="grid-column"],
  .col-span-2 {
    grid-column: 1 / -1 !important;
  }

  /* Activity feed compact */
  .activity-feed-item {
    padding: 8px 12px;
    font-size: 13px;
  }

  /* Cartes revenue: stack */
  .revenue-card,
  .metric-card-row {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .stats-row,
  .stat-cards-row {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   6. TASKS — Swipe actions & filtres scrollables
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Task item: prêt pour swipe */
  .task-item {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
  }

  /* Filtres/tabs: scroll horizontal */
  .tasks-filters,
  .task-tabs,
  .filter-bar,
  .tabs-bar {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .tasks-filters::-webkit-scrollbar,
  .task-tabs::-webkit-scrollbar,
  .filter-bar::-webkit-scrollbar,
  .tabs-bar::-webkit-scrollbar {
    display: none;
  }

  /* Boutons de filtre: snap */
  .filter-btn,
  .tab-btn {
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  /* Tasks 2.0 Supreme: colonnes pleine largeur */
  .t2s-columns-view {
    flex-direction: column;
    gap: 16px;
  }

  .t2s-column {
    min-width: 100% !important;
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   7. CRM — Table scroll horizontal + stats adaptées
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Stats: 2 colonnes */
  .crm-stats,
  .giri-crm-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  /* Tables: scroll horizontal */
  .crm-table-wrapper,
  .crm-contacts-table,
  .crm-deals-table,
  .data-table-container,
  .table-scroll-x,
  .contacts-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }

  .crm-table-wrapper table,
  .data-table,
  .contacts-table {
    min-width: 600px;
  }

  /* Header CRM: stack */
  .crm-header,
  .giri-crm-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .crm-header-actions {
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .crm-header-actions > * {
    flex: 1;
    min-width: 120px;
    text-align: center;
  }

  /* Pipeline: scroll ok, cards compactes */
  .crm-pipeline-stage {
    min-width: 260px !important;
  }
}

@media (max-width: 480px) {
  .crm-stats,
  .giri-crm-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   8. GIRI ACADEMY — Grille 1 colonne mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Formations: 1 colonne */
  .formation-grid,
  .academy-grid,
  .courses-grid,
  .formations-list-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Header: stack */
  .academy-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .academy-header-actions {
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

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

  /* Body: padding réduit */
  .academy-body {
    padding: 12px !important;
  }

  /* Formation card: compact */
  .formation-card {
    border-radius: 12px;
  }

  /* Tabs academy: scroll horizontal */
  .academy-tabs {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .academy-tabs::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   9. NOTES — Éditeur plein écran, sidebar slide-in
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Layout Giri Note v6: sidebar cachée */
  .giri-note-layout,
  .notes-layout-v6,
  .gn-layout {
    position: relative;
    overflow: hidden;
  }

  /* Sidebar notes: slide depuis la gauche */
  .gn-sidebar,
  .giri-note-sidebar,
  .notes-sidebar-v6 {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px !important;
    max-width: 85vw;
    z-index: 600;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-primary, #0a0a0f);
    border-right: 1px solid var(--border, #333);
    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
  }

  .gn-sidebar.open,
  .giri-note-sidebar.open,
  .notes-sidebar-v6.open {
    transform: translateX(0);
  }

  /* Éditeur: plein écran */
  .gn-editor,
  .giri-note-editor,
  .notes-editor-v6 {
    width: 100% !important;
    flex: 1;
  }

  /* Bouton toggle notes sidebar */
  .gn-sidebar-toggle,
  .notes-sidebar-toggle {
    display: flex !important;
    min-height: 44px;
    min-width: 44px;
    align-items: center;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   10. HEADER — Logo centré, hamburger à gauche
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .app-header {
    position: relative;
    padding-left: 60px !important;
    padding-right: 12px !important;
  }

  /* Titre centré */
  .app-header .header-center,
  .app-header .app-title-wrap,
  .app-header > .page-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
  }

  /* Breadcrumb: caché mobile */
  .breadcrumb-bar {
    display: none !important;
  }

  /* Texte de titre: taille correcte */
  .page-title,
  .view-title,
  .header-title {
    font-size: 16px;
    font-weight: 600;
  }
}

/* ═══════════════════════════════════════════════════════════════
   11. IMAGES — Performance & layout stable
   ═══════════════════════════════════════════════════════════════ */

/* Toutes les images: responsive par défaut */
img,
video {
  max-width: 100%;
  height: auto;
}

/* Éviter reflow sur les avatars */
.sidebar-avatar img,
.user-avatar img,
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Formation covers: ratio fixe évite layout shift */
.formation-cover,
.course-thumbnail,
.formation-card-image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

/* Content visibility sur éléments hors viewport */
.view-container:not(.active) {
  content-visibility: auto;
  contain-intrinsic-size: 0 800px;
}

/* ═══════════════════════════════════════════════════════════════
   12. SCROLL & TOUCH — Momentum, snap, overscroll
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Momentum scrolling iOS */
  .view-container,
  .task-list,
  .notes-list,
  .crm-pipeline,
  .table-scroll-x,
  .sidebar-nav,
  .modal-body,
  .dropdown-list {
    -webkit-overflow-scrolling: touch;
  }

  /* Overscroll: contenu ne bouge pas la page */
  .view-container,
  .modal-body {
    overscroll-behavior-y: contain;
  }

  /* Body: pas de scroll horizontal */
  body {
    overflow-x: hidden;
  }

  /* Cards sliders: scroll snap */
  .cards-slider,
  .stats-slider,
  .media-slider {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    display: flex;
    gap: 12px;
    padding: 4px 4px 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .cards-slider::-webkit-scrollbar,
  .stats-slider::-webkit-scrollbar { display: none; }

  .cards-slider > *,
  .stats-slider > * {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: min(85vw, 320px);
  }
}

/* ═══════════════════════════════════════════════════════════════
   13. FORMS & MODALS — Bottom sheet pattern mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Modals: bottom sheet */
  .modal-overlay .modal,
  .modal-content,
  .dialog-content {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Handle bar au-dessus du bottom sheet */
  .modal-overlay .modal::before,
  .modal-content::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border, #444);
    border-radius: 2px;
    margin: 8px auto 0;
  }

  /* Form rows: colonnes → stack */
  .form-row,
  .input-group-row,
  .form-inline {
    flex-direction: column !important;
    gap: 12px;
  }

  .form-row > *,
  .input-group-row > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Selects: natif sur mobile (meilleure UX) */
  select {
    -webkit-appearance: auto;
    appearance: auto;
  }

  /* Boutons d'action: pleine largeur dans les modals */
  .modal-footer,
  .dialog-actions {
    display: flex;
    gap: 8px;
    flex-direction: column;
  }

  .modal-footer .btn,
  .dialog-actions .btn {
    width: 100%;
    min-height: 48px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   14. GAMIFICATION — Compact mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Hero compact */
  .gv-hero {
    padding: 20px 16px;
    gap: 12px;
  }

  /* Stats: 2 colonnes */
  .gv-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  /* Badges: 3 par ligne */
  .gv-badges-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
  }

  .gv-hex {
    width: 72px !important;
    height: 72px !important;
  }

  /* Tabs: scroll horizontal */
  .gv-tabs {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .gv-tabs::-webkit-scrollbar { display: none; }

  /* Leaderboard: compact */
  .gv-podium {
    gap: 4px;
  }

  .gv-podium-1st { max-width: 110px; }
  .gv-podium-2nd,
  .gv-podium-3rd { max-width: 90px; }
}

/* ═══════════════════════════════════════════════════════════════
   15. PWA — Safe areas + install banner
   ═══════════════════════════════════════════════════════════════ */

/* Safe areas pour notch/Dynamic Island */
@supports (padding: max(0px)) {
  .app-header {
    padding-top: max(10px, env(safe-area-inset-top));
  }

  #app-sidebar {
    padding-top: max(0px, env(safe-area-inset-top));
  }

  .mobile-bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    height: calc(64px + env(safe-area-inset-bottom));
  }

  @media (max-width: 768px) {
    .main-content {
      padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }
  }
}

/* Install banner */
.pwa-install-banner {
  display: none;
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  right: 12px;
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--border, #333);
  border-radius: 16px;
  padding: 14px;
  z-index: 800;
  gap: 12px;
  align-items: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: mb-slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pwa-install-banner.visible { display: flex; }

.pwa-install-banner-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.pwa-install-banner-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary, #888);
  line-height: 1.4;
}

.pwa-install-banner-text strong {
  display: block;
  color: var(--text, #fff);
  font-size: 14px;
  margin-bottom: 2px;
}

.pwa-install-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  flex-shrink: 0;
}

.pwa-dismiss-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #888);
  cursor: pointer;
  font-size: 20px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
}

@keyframes mb-slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   16. PRODUCTIVE TOOLS — 2 colonnes mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .pt-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .pt-card {
    padding: 16px 12px !important;
  }

  .pt-search-bar,
  .pt-search {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pt-stats {
    gap: 12px;
    flex-wrap: wrap;
  }

  .pt-stat {
    min-width: 60px;
  }

  /* Modal coming-soon: bottom sheet */
  .pt-modal {
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 400px) {
  .pt-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   17. HAMBURGER & OVERLAY — Améliorations visuelles
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .sidebar-mobile-toggle {
    top: 10px !important;
    left: 8px !important;
    z-index: 1050 !important;
    background: var(--bg-primary, #0a0a0f) !important;
    border: 1px solid var(--border, #333) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  }

  /* Overlay avec blur léger */
  .sidebar-mobile-overlay,
  #sidebar-mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1049;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .sidebar-mobile-overlay.active,
  #sidebar-mobile-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* Sidebar: ombre portée en slide */
  #app-sidebar {
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.6) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   18. MISC — Analytics, billing, drive, tunnels, settings
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Analytics */
  .analytics-overview-grid,
  .analytics-chart-grid,
  .formateur-analytics-grid {
    grid-template-columns: 1fr !important;
  }

  /* Settings */
  .settings-section,
  .settings-card {
    padding: 16px !important;
    border-radius: 12px;
  }

  /* Billing */
  .billing-plans-grid,
  .pricing-grid,
  .plans-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tunnel club */
  .tunnel-cards-grid,
  .tc-cards-grid {
    grid-template-columns: 1fr !important;
  }

  /* Team Vision */
  .team-vision-grid,
  .tv-grid {
    grid-template-columns: 1fr !important;
  }

  /* Booking */
  .booking-layout,
  .giri-booking-layout {
    flex-direction: column;
  }

  /* Drive */
  .drive-files-grid,
  .giri-drive-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Automations */
  .automation-card,
  .automation-item {
    flex-direction: column;
    gap: 8px;
  }

  /* Journal */
  .journal-entry-header {
    flex-direction: column;
    gap: 8px;
  }

  /* Galaxy toolbar: compact */
  .cosmic-toolbar {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Reports */
  .reports-grid,
  .report-cards-grid {
    grid-template-columns: 1fr !important;
  }

  .report-detail-header {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  /* Drive: 1 colonne sur très petit */
  .drive-files-grid,
  .giri-drive-grid {
    grid-template-columns: 1fr !important;
  }

  /* Journal: padding réduit */
  .journal-entry {
    padding: 12px;
  }

  /* Psycho-audit: compact */
  .pa-premium-wrapper {
    padding: 0 !important;
  }

  .pa-premium-header {
    padding: 20px 12px 14px !important;
  }

  /* Giri Report */
  .gr-resources-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   19. HEADER TABLET (769-1024px) — Compact
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {
  .app-header {
    padding: 8px 16px;
  }

  /* Masquer texte superflu dans header */
  .header-subtitle,
  .header-workspace-name {
    display: none;
  }

  /* Breadcrumb: condensé */
  .breadcrumb-bar {
    padding: 4px 16px 0;
  }

  /* Cards: 2 colonnes max */
  .dashboard-grid,
  .analytics-overview-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ===== css/ux-fixes.css?v=2602240010 ===== */
/**
 * UX-FIXES.CSS — ProductiveApp v5.0
 * Correctifs UX complets basés sur audit exhaustif — 2026-02-23
 * 25 correctifs prioritaires sur 40 issues identifiées
 */

/* ═══════════════════════════════════════════════════════════════
   1. SYSTÈME Z-INDEX CENTRALISÉ
   Hiérarchie officielle:
     1-99    : base (cartes, inputs, contenu)
     100-499 : dropdowns, tooltips, popovers
     500-999 : composants flottants (FAB, notes-sidebar)
    1000     : sidebar principale
    1050     : bouton hamburger
    1100     : overlay sidebar + bottom nav
    2000     : modals / dialogs
    3000     : toasts / notifications
    4000+    : critique uniquement
   ═══════════════════════════════════════════════════════════════ */

:root {
    --z-base: 1;
    --z-dropdown: 100;
    --z-floating: 500;
    --z-sidebar: 1000;
    --z-sidebar-toggle: 1050;
    --z-sidebar-overlay: 1100;
    --z-modal: 2000;
    --z-toast: 3000;
    --z-critical: 4000;
}

/* ═══════════════════════════════════════════════════════════════
   2. CORRECTIONS Z-INDEX — Sidebar & Overlay
   ═══════════════════════════════════════════════════════════════ */

/* Sidebar principale */
#app-sidebar,
.sidebar {
    z-index: var(--z-sidebar) !important;
}

/* Hamburger — au-dessus du sidebar */
.sidebar-mobile-toggle,
#sidebar-hamburger {
    z-index: var(--z-sidebar-toggle) !important;
}

/* Overlay sidebar mobile — au-dessus du sidebar */
.sidebar-mobile-overlay,
#sidebar-mobile-overlay {
    z-index: var(--z-sidebar-overlay) !important;
}

/* Bottom nav — même niveau que l'overlay */
.mobile-bottom-nav {
    z-index: var(--z-sidebar-overlay) !important;
}

/* Header menu dropdown — au-dessus du contenu mais sous les modals */
.menu-dropdown,
.header-menu-dropdown {
    z-index: calc(var(--z-modal) - 100) !important;
}

/* Status dropdown sidebar */
.sidebar-status-dropdown {
    z-index: calc(var(--z-sidebar) + 200) !important;
}

/* Modals : systématiquement à 2000 */
.modal-overlay,
.modal-backdrop,
.dialog-overlay {
    z-index: var(--z-modal) !important;
}

/* Toasts & notifications : au-dessus des modals */
.toast-container {
    z-index: var(--z-toast) !important;
}

/* Toasts spécifiques des composants: ramener à 3000 */
.notif-premium-panel,
.notifications-panel,
.gcrm-toast,
.pt-toast,
.billing-toast {
    z-index: var(--z-toast) !important;
}

/* FAB & flottants : sous le sidebar overlay */
.animation-fab,
.chatbot-toggle,
.maha-mobile-fab,
#maha-mobile-fab,
.pwa-install-banner {
    z-index: var(--z-floating) !important;
}

/* Mahayawen mobile panel: au-dessus du sidebar sur mobile */
#maha-mobile-panel {
    z-index: calc(var(--z-sidebar-overlay) + 10) !important;
}

/* Giri Vision quickbar: sous le bottom nav */
.vision-mobile-quickbar {
    z-index: calc(var(--z-sidebar-overlay) - 50) !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. MOBILE NAV — Touch targets 48px minimum
   Apple HIG: 44px min; on ajoute 4px de confort
   ═══════════════════════════════════════════════════════════════ */

.mobile-nav-item {
    min-height: 48px !important;
    padding: 8px 10px !important;
    position: relative;
}

.mobile-nav-item svg {
    width: 22px;
    height: 22px;
}

/* Zone de tap étendue via pseudo-élément */
.mobile-nav-item::before {
    content: '';
    position: absolute;
    inset: -4px -8px;
}

/* Animation dot améliorée — transform au lieu de opacity seul */
.mobile-nav-dot {
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    transform: scale(0) !important;
}

.mobile-nav-item.active .mobile-nav-dot {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. FOCUS VISIBLE — Accessibilité clavier
   ═══════════════════════════════════════════════════════════════ */

.sidebar-item:focus-visible,
.mobile-nav-item:focus-visible,
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
    border-radius: 8px !important;
}

/* Retirer le focus par défaut sur ces éléments */
.sidebar-item:focus:not(:focus-visible),
.mobile-nav-item:focus:not(:focus-visible) {
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   5. SIDEBAR ACTIVE — Indicateur plus visible
   ═══════════════════════════════════════════════════════════════ */

/* Barre active plus épaisse */
.sidebar-item.active::before {
    width: 4px !important;
    height: 26px !important;
    border-radius: 0 4px 4px 0 !important;
    box-shadow: 2px 0 8px var(--sb-accent, color-mix(in srgb, var(--accent) 40%, transparent));
}

/* Badge visible en mode replié — masqué (user request) */
.sidebar.collapsed .sidebar-badge {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. TABLET (769-1024px) — Sidebar icon-only avec tooltips
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {
    /* Curseur pointer + transition hover */
    body.logged-in #app-sidebar .sidebar-item {
        transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    }

    body.logged-in #app-sidebar .sidebar-item:hover {
        transform: translateX(2px);
    }

    /* Tooltip natif via title= attribute (ajouté par sidebar-render.js patch) */
    /* Tooltip custom sidebar-events.js patch active ce cas */
}

/* ═══════════════════════════════════════════════════════════════
   7. PROJECT DROPDOWN — Accès restauré à <480px
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    /* Rétablir l'affichage du dropdown (caché à tort) */
    .project-dropdown {
        display: flex !important;
        max-width: 150px;
        overflow: hidden;
    }

    .project-dropdown-btn {
        padding: 4px 8px !important;
        gap: 4px !important;
    }

    .pf-name {
        max-width: 80px !important;
        font-size: 12px !important;
    }

    /* Cacher uniquement le bouton d'ajout (peu d'espace) */
    .add-project-btn {
        display: none !important;
    }
}

/* Augmenter légèrement le max-width à 481-768px */
@media (min-width: 481px) and (max-width: 768px) {
    .pf-name {
        max-width: 130px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   8. DASHBOARD STATS — Breakpoints affinés
   ═══════════════════════════════════════════════════════════════ */

/* Grande tablette / petit desktop (1025-1400px) : 3 colonnes */
@media (min-width: 1025px) and (max-width: 1400px) {
    .dashboard-stats {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Tablet landscape (769-1024px) : 2 colonnes */
@media (min-width: 769px) and (max-width: 1024px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   9. MODALS — Safe area pour téléphones avec notch
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .modal-overlay .modal,
    .modal-content,
    .dialog-content {
        padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
    }

    /* Theme modal: scroll fluide */
    .theme-modal {
        max-height: 85dvh !important;
        overflow-y: auto;
    }

    /* Quick add: bien au-dessus du bottom nav */
    .quick-add-modal {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   10. CONTENU PRINCIPAL — Pas d'overlap avec bottom nav
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .main-content {
        padding-bottom: max(80px, calc(72px + env(safe-area-inset-bottom, 0px))) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   11. POMODORO & FAB — Au-dessus du bottom nav, pas dessous
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .pomodoro-widget {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .animation-fab {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .chatbot-toggle {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   12. PROFILE NAME — Lisibilité améliorée
   ═══════════════════════════════════════════════════════════════ */

/* Légèrement plus petit pour afficher plus de caractères */
.sidebar-profile-name {
    font-size: 13px !important;
    letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════
   13. HEADER MENU — Dropdown z-index et positionnement
   ═══════════════════════════════════════════════════════════════ */

.menu-container {
    position: relative;
}

.menu-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 180px;
    z-index: calc(var(--z-modal) - 100) !important;
}

@media (max-width: 768px) {
    .menu-dropdown {
        right: 0 !important;
        left: auto !important;
        max-width: calc(100vw - 16px);
    }
}

/* ═══════════════════════════════════════════════════════════════
   14. FILTER BAR — Texte tronqué avec indication visuelle
   ═══════════════════════════════════════════════════════════════ */

/* Gradient fade pour indiquer text-overflow */
.pf-name {
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   15. FORM INPUTS — Marges sur mobile pour éviter les bords
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .form-row,
    .input-group-row,
    .form-inline {
        padding-left: 2px;
        padding-right: 2px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   16. SIDEBAR TOOLTIP — Visible sur tablet (769-1024px)
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar-tooltip {
        left: calc(70px + 12px) !important;
        display: block !important; /* Ne jamais cacher sur tablette */
    }
}

/* ═══════════════════════════════════════════════════════════════
   17. TASK COLUMN — Scroll complet sans bottom nav overlap
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .task-list,
    .tasks-list,
    .t2s-task-list {
        padding-bottom: 16px;
    }

    /* Dernier élément visible */
    .task-list > *:last-child,
    .tasks-list > *:last-child {
        margin-bottom: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   18. SIDEBAR MOBILE — Overlay correction z-index
   L'overlay doit être entre le sidebar (1000) et les modals (2000)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Sidebar correctement positionnée */
    #app-sidebar.mobile-open {
        z-index: calc(var(--z-sidebar-overlay) + 1) !important; /* 1101 */
    }
}

/* ═══════════════════════════════════════════════════════════════
   19. NOTES SIDEBAR — z-index dans le contexte fullscreen
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Notes sidebar: dans le contexte fullscreen notes */
    .gn-sidebar.open,
    .giri-note-sidebar.open,
    .notes-sidebar-v6.open {
        z-index: calc(var(--z-modal) + 100) !important; /* 2100 */
    }
}

/* ═══════════════════════════════════════════════════════════════
   20. LANDSCAPE — Bottom nav réduit
   ═══════════════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
    .mobile-bottom-nav {
        height: 52px !important;
    }

    .mobile-nav-item {
        min-height: 44px !important;
        padding: 6px 10px !important;
        font-size: 9px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   21. RESPONSIVE — Sidebar overlay transition cohérente
   ═══════════════════════════════════════════════════════════════ */

.sidebar-mobile-overlay {
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
    opacity: 0;
    visibility: hidden;
}

.sidebar-mobile-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ═══════════════════════════════════════════════════════════════
   22. THEME MODAL — Accessible sur petits écrans
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .theme-modal {
        width: 100vw !important;
        max-height: 90dvh !important;
        border-radius: 20px 20px 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   23. SIDEBAR SECTION LABELS — Plus lisibles en icon-only
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {
    /* Dividers en lieu de section labels */
    body.logged-in #app-sidebar .sidebar-section-label {
        height: 1px;
        background: var(--sb-border);
        margin: 6px 8px;
        padding: 0;
        font-size: 0;
        overflow: hidden;
    }
}

/* ═══════════════════════════════════════════════════════════════
   24. CRM MODAL OVERLAY — z-index normalisé
   ═══════════════════════════════════════════════════════════════ */

.gcrm-overlay,
.crm-modal-overlay {
    z-index: var(--z-modal) !important;
}

/* ═══════════════════════════════════════════════════════════════
   25. BILLING / NOTIFICATIONS — z-index normalisé
   ═══════════════════════════════════════════════════════════════ */

.billing-modal-overlay,
.billing-overlay {
    z-index: var(--z-modal) !important;
}

.notif-premium-panel {
    z-index: var(--z-toast) !important;
}


/* ===== css/keyboard-shortcuts.css?v=2602240010 ===== */
/* ================================================
   KEYBOARD SHORTCUTS OVERLAY
   ProductiveApp v4.0
   ================================================ */

/* === OVERLAY === */
.kb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    padding: 20px;
}

.kb-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* === CARD === */
.kb-card {
    background: var(--bg-secondary, #1a1a24);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-top: 3px solid var(--accent, #e07840);
    border-radius: 16px;
    width: 100%;
    max-width: 680px;
    max-height: 80vh;
    overflow: hidden;
    transform: translateY(-8px) scale(0.97);
    transition: transform 0.2s ease;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.kb-overlay.active .kb-card {
    transform: translateY(0) scale(1);
}

/* === HEADER === */
.kb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}

.kb-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text, #f5f5f5);
    display: flex;
    align-items: center;
    gap: 10px;
}

.kb-title svg {
    width: 22px;
    height: 22px;
    stroke: var(--accent, #e07840);
    stroke-width: 2;
    fill: none;
}

.kb-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--text-muted, #888);
    cursor: pointer;
    transition: all 0.15s ease;
}

.kb-close:hover {
    background: var(--bg-tertiary, #2a2a34);
    color: var(--text, #f5f5f5);
}

/* === CONTENT === */
.kb-content {
    padding: 16px 24px 24px;
    overflow-y: auto;
    max-height: calc(80vh - 80px);
}

/* === SECTION === */
.kb-section {
    margin-bottom: 20px;
}

.kb-section:last-child {
    margin-bottom: 0;
}

.kb-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent, #e07840);
    margin-bottom: 10px;
    padding-left: 4px;
}

/* === SHORTCUT ROWS === */
.kb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.1s ease;
}

.kb-row:hover {
    background: var(--bg-card, rgba(255,255,255,0.03));
}

.kb-label {
    font-size: 13px;
    color: var(--text, #f5f5f5);
    font-weight: 500;
}

.kb-keys {
    display: flex;
    align-items: center;
    gap: 4px;
}

.kb-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    background: var(--bg-tertiary, #2a2a34);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-bottom-width: 2px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #aaa);
    font-family: 'SF Mono', 'Fira Code', monospace;
    white-space: nowrap;
}

.kb-plus {
    font-size: 10px;
    color: var(--text-muted, #666);
    margin: 0 2px;
}

/* === FOOTER === */
.kb-footer {
    padding: 12px 24px;
    border-top: 1px solid var(--border, rgba(255,255,255,0.08));
    text-align: center;
    font-size: 12px;
    color: var(--text-muted, #666);
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .kb-card {
        max-width: 100%;
        max-height: 90vh;
    }

    .kb-content {
        max-height: calc(90vh - 80px);
    }

    .kb-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px 12px;
    }
}


/* ===== css/command-palette.css?v=2602240010 ===== */
/* =============================================
   PRODUCTIVEAPP - COMMAND PALETTE CSS
   Palette de commandes premium (Cmd+K / Ctrl+K)
   Glassmorphism design with theme integration
   ============================================= */

/* === BACKDROP === */
.cmd-palette-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease, visibility 150ms ease;
}

.cmd-palette-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* === MODAL CONTAINER === */
.cmd-palette-modal {
    width: 100%;
    max-width: 600px;
    background: rgba(20, 20, 30, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 16px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.5),
        0 0 1px rgba(255, 255, 255, 0.1),
        0 0 40px var(--accent-glow, rgba(100, 100, 255, 0.08));
    overflow: hidden;
    transform: scale(0.95) translateY(-10px);
    opacity: 0;
    transition: transform 150ms cubic-bezier(0.32, 0.72, 0, 1), opacity 150ms ease;
}

.cmd-palette-backdrop.active .cmd-palette-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* === SEARCH SECTION === */
.cmd-palette-search {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.cmd-palette-search-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: 12px;
    color: var(--text-muted, #888);
    opacity: 0.6;
}

.cmd-palette-search-icon svg {
    width: 100%;
    height: 100%;
}

.cmd-palette-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text, #fff);
    font-size: 18px;
    font-family: inherit;
    padding: 18px 16px;
    caret-color: var(--accent);
}

.cmd-palette-input::placeholder {
    color: var(--text-muted, #666);
    opacity: 0.6;
}

/* === RESULTS LIST === */
.cmd-palette-results {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
    scroll-behavior: smooth;
}

.cmd-palette-results::-webkit-scrollbar {
    width: 4px;
}

.cmd-palette-results::-webkit-scrollbar-track {
    background: transparent;
}

.cmd-palette-results::-webkit-scrollbar-thumb {
    background: var(--border, rgba(255, 255, 255, 0.12));
    border-radius: 4px;
}

.cmd-palette-results::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted, rgba(255, 255, 255, 0.25));
}

/* === CATEGORY HEADER === */
.cmd-palette-category {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    padding: 10px 12px 6px;
    user-select: none;
}

/* === RESULT ITEM === */
.cmd-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 80ms ease;
    user-select: none;
}

.cmd-palette-item:hover {
    background: var(--accent, color-mix(in srgb, var(--accent) 12%, transparent));
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.cmd-palette-item.active {
    background: var(--accent, color-mix(in srgb, var(--accent) 18%, transparent));
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.cmd-palette-item-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}

.cmd-palette-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cmd-palette-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text, #e5e5e5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-palette-item.active .cmd-palette-item-title {
    color: #fff;
}

.cmd-palette-item-subtitle {
    font-size: 12px;
    color: var(--text-muted, #777);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === CATEGORY TAG === */
.cmd-palette-tag {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.06));
    color: var(--text-muted, #888);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}

/* === SHORTCUT HINT === */
.cmd-palette-shortcut {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 3px;
}

.cmd-palette-shortcut kbd {
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.06));
    color: var(--text-muted, #888);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    line-height: 1.4;
}

/* === EMPTY STATE === */
.cmd-palette-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--text-muted, #666);
    font-size: 14px;
}

.cmd-palette-empty-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* === FOOTER === */
.cmd-palette-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 16px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    font-size: 12px;
    color: var(--text-muted, #555);
    user-select: none;
}

.cmd-palette-footer-hint {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cmd-palette-footer-hint kbd {
    font-family: inherit;
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #777);
    line-height: 1.5;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .cmd-palette-backdrop {
        padding-top: 5vh;
        padding-left: 12px;
        padding-right: 12px;
    }

    .cmd-palette-modal {
        max-width: 100%;
        border-radius: 12px;
    }

    .cmd-palette-input {
        font-size: 16px;
        padding: 14px 12px;
    }

    .cmd-palette-results {
        max-height: 50vh;
    }

    .cmd-palette-shortcut {
        display: none;
    }

    .cmd-palette-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    .cmd-palette-backdrop,
    .cmd-palette-modal,
    .cmd-palette-item {
        transition: none;
    }
}


/* ===== css/quick-add.css?v=2602240010 ===== */
/* ================================================
   QUICK-ADD FAB + FOCUS/ZEN MODE
   ProductiveApp v1.0
   Premium floating action button & zen mode overlay
   ================================================ */

/* ==========================================
   QUICK-ADD FAB - Main Button
   ========================================== */
.quick-add-fab {
    display: none !important; /* Hidden: overlaps Pomodoro, redundant with task input */
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light, var(--accent)) 100%);
    color: #fff;
    cursor: pointer;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 20px var(--accent-glow, color-mix(in srgb, var(--accent) 30%, transparent));
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.quick-add-fab svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

/* Hover */
.quick-add-fab:hover {
    transform: scale(1.1);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.4),
        0 0 32px var(--accent-glow, color-mix(in srgb, var(--accent) 50%, transparent));
}

/* Active/pressed */
.quick-add-fab:active {
    transform: scale(0.95);
}

/* Open state - rotate + to x */
.quick-add-fab.open svg {
    transform: rotate(45deg);
}

/* Subtle pulse when closed */
@keyframes quickAddPulse {
    0%, 100% {
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.3),
            0 0 20px var(--accent-glow, color-mix(in srgb, var(--accent) 30%, transparent));
    }
    50% {
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.3),
            0 0 28px var(--accent-glow, color-mix(in srgb, var(--accent) 45%, transparent));
    }
}

.quick-add-fab:not(.open) {
    animation: quickAddPulse 3s ease-in-out infinite;
}

/* ==========================================
   QUICK-ADD MENU - Radial Items
   ========================================== */
.quick-add-menu {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 899;
    pointer-events: none;
}

.quick-add-menu-item {
    position: absolute;
    bottom: 8px;
    right: 6px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: scale(0.4) translateY(0);
    pointer-events: none;
    transition:
        opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
    outline: none;
    font-family: inherit;
}

.quick-add-menu-item svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.quick-add-menu-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 12px var(--accent-glow, color-mix(in srgb, var(--accent) 25%, transparent));
    transform: scale(1.1) translateY(var(--item-offset)) !important;
}

.quick-add-menu-item:active {
    transform: scale(0.95) translateY(var(--item-offset)) !important;
}

/* Staggered fan-out positions (upward from FAB) */
.quick-add-menu-item:nth-child(1) { --item-offset: -70px; }
.quick-add-menu-item:nth-child(2) { --item-offset: -126px; }
.quick-add-menu-item:nth-child(3) { --item-offset: -182px; }
.quick-add-menu-item:nth-child(4) { --item-offset: -238px; }

/* Open state - items visible with staggered animation */
.quick-add-menu.open .quick-add-menu-item {
    opacity: 1;
    pointer-events: auto;
}

.quick-add-menu.open .quick-add-menu-item:nth-child(1) {
    transform: scale(1) translateY(-70px);
    transition-delay: 0.03s;
}

.quick-add-menu.open .quick-add-menu-item:nth-child(2) {
    transform: scale(1) translateY(-126px);
    transition-delay: 0.06s;
}

.quick-add-menu.open .quick-add-menu-item:nth-child(3) {
    transform: scale(1) translateY(-182px);
    transition-delay: 0.09s;
}

.quick-add-menu.open .quick-add-menu-item:nth-child(4) {
    transform: scale(1) translateY(-238px);
    transition-delay: 0.12s;
}

/* Close animation - reverse stagger */
.quick-add-menu:not(.open) .quick-add-menu-item:nth-child(4) {
    transition-delay: 0s;
}
.quick-add-menu:not(.open) .quick-add-menu-item:nth-child(3) {
    transition-delay: 0.03s;
}
.quick-add-menu:not(.open) .quick-add-menu-item:nth-child(2) {
    transition-delay: 0.06s;
}
.quick-add-menu:not(.open) .quick-add-menu-item:nth-child(1) {
    transition-delay: 0.09s;
}

/* ==========================================
   TOOLTIP - Label to the left
   ========================================== */
.quick-add-tooltip {
    position: absolute;
    right: 54px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-secondary);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    transform: translateY(-50%) translateX(8px);
}

.quick-add-menu-item:hover .quick-add-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ==========================================
   BACKDROP (optional subtle overlay)
   ========================================== */
.quick-add-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 898;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.quick-add-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================
   HIDE WHEN NOT LOGGED IN
   ========================================== */
body:not(.logged-in) .quick-add-fab,
body:not(.logged-in) .quick-add-menu,
body:not(.logged-in) .quick-add-backdrop {
    display: none !important;
}

/* ==========================================
   MOBILE RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .quick-add-fab {
        bottom: 80px;
        right: 16px;
        width: 48px;
        height: 48px;
    }

    .quick-add-fab svg {
        width: 20px;
        height: 20px;
    }

    .quick-add-menu {
        bottom: 80px;
        right: 16px;
    }

    .quick-add-menu-item {
        width: 40px;
        height: 40px;
    }

    .quick-add-menu-item svg {
        width: 18px;
        height: 18px;
    }

    /* Tighter spacing on mobile */
    .quick-add-menu-item:nth-child(1) { --item-offset: -60px; }
    .quick-add-menu-item:nth-child(2) { --item-offset: -110px; }
    .quick-add-menu-item:nth-child(3) { --item-offset: -160px; }
    .quick-add-menu-item:nth-child(4) { --item-offset: -210px; }

    .quick-add-menu.open .quick-add-menu-item:nth-child(1) {
        transform: scale(1) translateY(-60px);
    }
    .quick-add-menu.open .quick-add-menu-item:nth-child(2) {
        transform: scale(1) translateY(-110px);
    }
    .quick-add-menu.open .quick-add-menu-item:nth-child(3) {
        transform: scale(1) translateY(-160px);
    }
    .quick-add-menu.open .quick-add-menu-item:nth-child(4) {
        transform: scale(1) translateY(-210px);
    }

    .quick-add-tooltip {
        display: none;
    }
}

/* ==========================================
   REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    .quick-add-fab {
        animation: none !important;
    }

    .quick-add-fab svg,
    .quick-add-menu-item {
        transition: none !important;
    }
}


/* ================================================
   FOCUS / ZEN MODE
   ================================================ */

/* ==========================================
   ZEN MODE - Body class toggles
   ========================================== */

/* Hide sidebar */
body.zen-mode .sidebar {
    transform: translateX(-100%);
    pointer-events: none;
}

/* Hide animation controls FAB + panel */
body.zen-mode .anim-ctrl-fab,
body.zen-mode .anim-ctrl-panel {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.5) !important;
}

/* Hide chatbot FAB + panel */
body.zen-mode .chatbot-fab,
body.zen-mode .chatbot-panel,
body.zen-mode #chatbot-toggle,
body.zen-mode #chatbot-window {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.5) !important;
}

/* Hide quick-add FAB + menu */
body.zen-mode .quick-add-fab,
body.zen-mode .quick-add-menu,
body.zen-mode .quick-add-backdrop {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.5) !important;
}

/* Maximize main content */
body.zen-mode .main-content {
    margin-left: 0 !important;
    max-width: 100% !important;
    transition: margin-left 0.4s ease;
}

/* Smooth transition for sidebar hiding */
body.zen-mode .sidebar {
    transition: transform 0.4s ease;
}

/* Ensure sidebar returns smoothly */
body:not(.zen-mode) .sidebar {
    transition: transform 0.4s ease, width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   ZEN MODE - Top Indicator Bar
   ========================================== */
.zen-mode-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light, var(--accent)) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    z-index: 1100;
    opacity: 0;
    transform: translateY(-100%);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
    pointer-events: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Visible when zen mode is active */
body.zen-mode .zen-mode-bar {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.zen-mode-bar-label {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.9;
}

.zen-mode-bar-label svg {
    width: 14px;
    height: 14px;
}

.zen-mode-bar-separator {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.3);
}

.zen-mode-bar-hint {
    opacity: 0.7;
    font-size: 11px;
}

.zen-mode-bar-exit {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: inherit;
    margin-left: 4px;
}

.zen-mode-bar-exit:hover {
    background: rgba(255, 255, 255, 0.35);
}

.zen-mode-bar-exit:active {
    background: rgba(255, 255, 255, 0.15);
}

/* Push content down when zen bar is visible */
body.zen-mode .main-content {
    padding-top: 36px;
}

/* ==========================================
   ZEN MODE - Mobile
   ========================================== */
@media (max-width: 768px) {
    .zen-mode-bar {
        height: 32px;
        font-size: 11px;
    }

    .zen-mode-bar-hint {
        display: none;
    }

    .zen-mode-bar-separator {
        display: none;
    }

    body.zen-mode .main-content {
        padding-top: 32px;
    }
}

/* ==========================================
   ZEN MODE - Reduced motion
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    .zen-mode-bar {
        transition: none !important;
    }

    body.zen-mode .sidebar {
        transition: none !important;
    }

    body.zen-mode .main-content {
        transition: none !important;
    }

    body.zen-mode .anim-ctrl-fab,
    body.zen-mode .chatbot-fab,
    body.zen-mode .quick-add-fab {
        transition: none !important;
    }
}


/* ===== css/productive-animations.css?v=2602240010 ===== */
/**
 * ═══════════════════════════════════════════════════════
 * PRODUCTIVE ANIMATIONS v1.0
 * Bibliothèque d'animations réutilisables — MAHA MODE
 * 60fps · Glassmorphism · Ripple · Particles · 3D Cards
 * ═══════════════════════════════════════════════════════
 */

/* ─── Variables ──────────────────────────────────────── */
:root {
  --pa-gold: #f59e0b;
  --pa-gold-light: #fcd34d;
  --pa-purple: var(--accent);
  --pa-purple-light: var(--accent-light);
  --pa-glass-bg: rgba(255,255,255,0.07);
  --pa-glass-border: rgba(255,255,255,0.15);
  --pa-glass-shadow: 0 8px 32px rgba(0,0,0,0.37);
  --pa-ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --pa-ease-smooth: cubic-bezier(0.4,0,0.2,1);
  --pa-ease-bounce: cubic-bezier(0.68,-0.55,0.265,1.55);
}

/* ─── KEYFRAMES ──────────────────────────────────────── */

@keyframes pa-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pa-fade-in-up {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pa-fade-in-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pa-slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pa-zoom-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pa-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
  50%       { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); }
}

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

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

@keyframes pa-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pa-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pa-ripple {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes pa-particle-float {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.8; }
  33%  { transform: translateY(-40px) translateX(20px) scale(1.1); opacity: 1; }
  66%  { transform: translateY(-80px) translateX(-10px) scale(0.9); opacity: 0.6; }
  100% { transform: translateY(-120px) translateX(5px) scale(0.5); opacity: 0; }
}

@keyframes pa-gold-particle {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-100px) translateX(var(--dx, 30px)) rotate(720deg); opacity: 0; }
}

@keyframes pa-typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes pa-blink {
  0%, 100% { border-right-color: transparent; }
  50%       { border-right-color: var(--pa-purple); }
}

@keyframes pa-wave {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(15deg); }
  75%       { transform: rotate(-10deg); }
}

@keyframes pa-heartbeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.15); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.15); }
  70%       { transform: scale(1); }
}

@keyframes pa-stagger-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── UTILITY CLASSES ─────────────────────────────────── */

.pa-fade-in      { animation: pa-fade-in 0.4s var(--pa-ease-smooth) both; }
.pa-fade-in-up   { animation: pa-fade-in-up 0.5s var(--pa-ease-smooth) both; }
.pa-fade-in-left { animation: pa-fade-in-left 0.4s var(--pa-ease-smooth) both; }
.pa-slide-right  { animation: pa-slide-in-right 0.4s var(--pa-ease-smooth) both; }
.pa-zoom-in      { animation: pa-zoom-in 0.35s var(--pa-ease-spring) both; }
.pa-float        { animation: pa-float 3s ease-in-out infinite; }
.pa-pulse-glow   { animation: pa-pulse-glow 2s ease-in-out infinite; }
.pa-spin         { animation: pa-spin 1s linear infinite; }
.pa-spin-slow    { animation: pa-spin-slow 4s linear infinite; }
.pa-heartbeat    { animation: pa-heartbeat 1.5s ease-in-out infinite; }

/* Stagger delays */
.pa-delay-1  { animation-delay: 0.05s; }
.pa-delay-2  { animation-delay: 0.10s; }
.pa-delay-3  { animation-delay: 0.15s; }
.pa-delay-4  { animation-delay: 0.20s; }
.pa-delay-5  { animation-delay: 0.25s; }
.pa-delay-6  { animation-delay: 0.30s; }
.pa-delay-7  { animation-delay: 0.35s; }
.pa-delay-8  { animation-delay: 0.40s; }

/* ─── GLASSMORPHISM ───────────────────────────────────── */

.pa-glass {
  background: var(--pa-glass-bg);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--pa-glass-border);
  box-shadow: var(--pa-glass-shadow);
}

.pa-glass-strong {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(24px) saturate(2);
  -webkit-backdrop-filter: blur(24px) saturate(2);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}

.pa-glass-dark {
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ─── CARDS 3D HOVER ──────────────────────────────────── */

.pa-card-3d {
  transform-style: preserve-3d;
  transition: transform 0.3s var(--pa-ease-smooth), box-shadow 0.3s var(--pa-ease-smooth);
  will-change: transform;
  cursor: pointer;
}

.pa-card-3d:hover {
  transform: perspective(800px) rotateX(-4deg) rotateY(4deg) translateY(-6px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1);
}

.pa-card-3d:active {
  transform: perspective(800px) rotateX(0) rotateY(0) translateY(-2px) scale(0.99);
}

/* ─── RIPPLE EFFECT ───────────────────────────────────── */

.pa-ripple {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.pa-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  border-radius: 50%;
  pointer-events: none;
  transition: none;
}

.pa-ripple:active::after {
  animation: pa-ripple 0.5s var(--pa-ease-smooth) forwards;
}

/* ─── SHIMMER LOADING ─────────────────────────────────── */

.pa-shimmer {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.05) 100%
  );
  background-size: 200% 100%;
  animation: pa-shimmer 1.5s ease-in-out infinite;
}

/* ─── GOLDEN GLOW ─────────────────────────────────────── */

.pa-gold-glow {
  box-shadow:
    0 0 20px rgba(245,158,11,0.3),
    0 0 60px rgba(245,158,11,0.15),
    inset 0 1px 0 rgba(245,158,11,0.2);
}

.pa-gold-text {
  background: linear-gradient(135deg, #f59e0b, #fcd34d, #f59e0b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pa-shimmer 3s linear infinite;
}

/* ─── PARTICLE CONTAINER ──────────────────────────────── */

.pa-particles-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.pa-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pa-gold);
  animation: pa-gold-particle 3s ease-out forwards infinite;
}

.pa-particle:nth-child(odd) {
  background: var(--pa-purple-light);
  width: 4px;
  height: 4px;
}

/* ─── PROGRESS BAR ANIMATED ───────────────────────────── */

.pa-progress {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}

.pa-progress-bar {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--pa-gold));
  transition: width 0.6s var(--pa-ease-smooth);
  position: relative;
}

.pa-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: pa-shimmer 1.5s ease-in-out infinite;
}

/* ─── BADGE PULSE ─────────────────────────────────────── */

.pa-badge-pulse {
  position: relative;
}

.pa-badge-pulse::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: var(--pa-gold);
  opacity: 0;
  animation: pa-pulse-glow 2s ease-in-out infinite;
}

/* ─── TOOLTIP ANIMATED ────────────────────────────────── */

.pa-tooltip {
  position: relative;
}

.pa-tooltip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9999;
}

.pa-tooltip[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── MODAL GLASSMORPHISM ─────────────────────────────── */

.pa-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  animation: pa-fade-in 0.2s var(--pa-ease-smooth) both;
}

.pa-modal {
  background: rgba(15,15,35,0.92);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
  animation: pa-zoom-in 0.3s var(--pa-ease-spring) both;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

/* ─── BUTTON EFFECTS ──────────────────────────────────── */

.pa-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.15s var(--pa-ease-smooth), box-shadow 0.15s var(--pa-ease-smooth);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pa-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.pa-btn:active {
  transform: translateY(0) scale(0.97);
}

.pa-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pa-btn-gold {
  background: linear-gradient(135deg, var(--pa-gold), #d97706);
  color: #1a1a2e;
  border: none;
  font-weight: 700;
}

/* ─── PAGE TRANSITION ─────────────────────────────────── */

.pa-page-enter {
  animation: pa-fade-in-up 0.4s var(--pa-ease-smooth) both;
}

.pa-page-exit {
  animation: pa-fade-in-up 0.3s var(--pa-ease-smooth) reverse both;
}

/* ─── STAGGER CHILDREN ────────────────────────────────── */

.pa-stagger > * {
  opacity: 0;
  animation: pa-stagger-in 0.4s var(--pa-ease-smooth) forwards;
}

.pa-stagger > *:nth-child(1)  { animation-delay: 0.05s; }
.pa-stagger > *:nth-child(2)  { animation-delay: 0.10s; }
.pa-stagger > *:nth-child(3)  { animation-delay: 0.15s; }
.pa-stagger > *:nth-child(4)  { animation-delay: 0.20s; }
.pa-stagger > *:nth-child(5)  { animation-delay: 0.25s; }
.pa-stagger > *:nth-child(6)  { animation-delay: 0.30s; }
.pa-stagger > *:nth-child(7)  { animation-delay: 0.35s; }
.pa-stagger > *:nth-child(8)  { animation-delay: 0.40s; }

/* ─── RESPONSIVE CHECKS ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 768px) {
  .pa-card-3d:hover {
    transform: translateY(-3px) scale(1.01);
  }
}

/* ═══════════════════════════════════════════════════════
   PRODUCTIVE ANIMATIONS v101 — MAHA ELEVATION
   Badges · 3D Mouse Track · Flip Cards · Tutorial
   Count-Up · Typing Cursor · Confetti · Cloud Sync
   ═══════════════════════════════════════════════════════ */

/* ─── KEYFRAMES v101 ──────────────────────────────────── */

@keyframes pa-count-up {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

@keyframes pa-badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; }
  50%       { transform: scale(1.06); box-shadow: 0 0 0 4px transparent; }
}

@keyframes pa-badge-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes pa-cloud-sync {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  25%  { transform: translateY(-3px) rotate(-15deg); opacity: 0.7; }
  50%  { transform: translateY(-5px) rotate(0deg); opacity: 0.5; }
  75%  { transform: translateY(-2px) rotate(15deg); opacity: 0.7; }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}

@keyframes pa-flip-in {
  0%   { transform: perspective(600px) rotateY(-90deg); opacity: 0; }
  100% { transform: perspective(600px) rotateY(0deg);   opacity: 1; }
}

@keyframes pa-flip-out {
  0%   { transform: perspective(600px) rotateY(0deg);   opacity: 1; }
  100% { transform: perspective(600px) rotateY(90deg);  opacity: 0; }
}

@keyframes pa-tutorial-pop {
  0%   { transform: scale(0.85) translateY(10px); opacity: 0; }
  60%  { transform: scale(1.03) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0);        opacity: 1; }
}

@keyframes pa-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes pa-confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(calc(100vh + 20px)) rotate(720deg); opacity: 0; }
}

@keyframes pa-card-enter-stagger {
  from { opacity: 0; transform: translateY(30px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pa-suggest-bounce {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-6px); }
  60%       { transform: translateY(-3px); }
}

/* ─── BADGES ──────────────────────────────────────────── */

.productive-badge-popular {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #f59e0b, #d97706, #f59e0b);
  background-size: 200% auto;
  color: #1a1a2e;
  animation: pa-badge-shimmer 2.5s linear infinite, pa-badge-pulse 2s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(245,158,11,0.4);
}

.productive-badge-popular::before { content: '🔥'; font-size: 9px; }

.productive-badge-new {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent), var(--accent-light), var(--accent));
  background-size: 200% auto;
  color: #fff;
  animation: pa-badge-shimmer 3s linear infinite;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
}

.productive-badge-new::before { content: '✨'; font-size: 9px; }

/* ─── 3D CARD MOUSE TRACK ─────────────────────────────── */

.productive-card-hover-3d {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
  will-change: transform;
}

/* JS will set --rotX and --rotY via style */
.productive-card-hover-3d.tracking {
  transform: perspective(800px)
             rotateX(var(--rotX, 0deg))
             rotateY(var(--rotY, 0deg))
             translateZ(8px)
             scale(1.02);
  box-shadow: var(--shadow-x, 0px) var(--shadow-y, 0px) 40px rgba(0,0,0,0.35),
              0 0 0 1px rgba(255,255,255,0.08);
}

/* ─── FLIP CARD ───────────────────────────────────────── */

.productive-flip-enter {
  animation: pa-flip-in 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}

.productive-flip-exit {
  animation: pa-flip-out 0.2s ease both;
}

/* ─── COUNT-UP ANIMATION ──────────────────────────────── */

.productive-count-up {
  display: inline-block;
  animation: pa-count-up 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ─── TYPING CURSOR ───────────────────────────────────── */

.productive-typing-cursor::after {
  content: '|';
  color: var(--accent);
  animation: pa-cursor-blink 1s step-start infinite;
  margin-left: 1px;
  font-weight: 300;
}

/* ─── CLOUD SYNC ICON ─────────────────────────────────── */

.gw-cloud-syncing {
  animation: pa-cloud-sync 1.2s ease-in-out infinite;
  display: inline-block;
}

/* ─── TUTORIAL OVERLAY ────────────────────────────────── */

.pt-tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
}

.pt-tutorial-spotlight {
  position: fixed;
  border-radius: 12px;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 60%, transparent),
    0 0 0 9999px rgba(0,0,0,0.55);
  z-index: 1110;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
}

.pt-tutorial-card {
  position: fixed;
  z-index: 1100;
  background: rgba(15,15,40,0.97);
  backdrop-filter: blur(24px);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 16px;
  padding: 20px 24px;
  max-width: 280px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  animation: pa-tutorial-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  pointer-events: all;
}

.pt-tutorial-step {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.pt-tutorial-emoji {
  font-size: 28px;
  display: block;
  margin-bottom: 8px;
}

.pt-tutorial-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}

.pt-tutorial-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin: 0 0 16px;
}

.pt-tutorial-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
}

.pt-tutorial-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: background 0.2s, transform 0.2s;
}

.pt-tutorial-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}

.pt-tutorial-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pt-tutorial-skip {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  flex: 1;
  text-align: left;
}

.pt-tutorial-skip:hover { color: rgba(255,255,255,0.6); }

.pt-tutorial-next {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.pt-tutorial-next:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ─── ZEN TYPING OVERLAY ──────────────────────────────── */

.gw-focus-zen-text {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-style: italic;
  color: color-mix(in srgb, var(--accent) 35%, transparent);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
  letter-spacing: 0.05em;
  font-family: 'Georgia', serif;
}

.gw-focus-zen-text.productive-typing-cursor::after {
  color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ─── SUGGEST TOOL BUTTON ─────────────────────────────── */

.pt-suggest-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 50px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  animation: pa-suggest-bounce 3s ease-in-out infinite;
}

.pt-suggest-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: #fff;
  transform: translateY(-2px);
  animation: none;
}

/* ─── CARD STAGGER ENTRANCE ───────────────────────────── */

.pt-card-stagger {
  opacity: 0;
  animation: pa-card-enter-stagger 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

/* ─── EXPORT SUCCESS GLOW ─────────────────────────────── */

.gw-export-success-flash {
  animation: pa-pulse-glow 0.4s ease 3;
}

@media (prefers-reduced-motion: reduce) {
  .productive-badge-popular,
  .productive-badge-new,
  .pt-suggest-btn { animation: none; }
}


/* ===== css/productive-tools.css?v=2602240010 ===== */
/* ═══════════════════════════════════════════════════════════
   PRODUCTIVE TOOLS v4.0 — MAHA MEGA PREMIUM 2026
   Glass · Particles · Glow · Ultra Dark Premium
   ═══════════════════════════════════════════════════════════ */

/* ── ROOT ─────────────────────────────────────────────────── */
.pt2-root {
    position: relative;
    min-height: 100vh;
    background: var(--bg-primary, #0d0e1a);
    overflow: hidden;
    padding-bottom: 80px;
}

/* ── CANVAS PARTICLES ────────────────────────────────────── */
.pt2-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

/* ── HERO ─────────────────────────────────────────────────── */
.pt2-hero {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 40px 48px 32px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 12%, transparent) 0%,
        color-mix(in srgb, var(--accent) 8%, transparent) 40%,
        rgba(236,72,153,.06) 100%);
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-wrap: wrap;
}

.pt2-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 0% 50%,
        color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

.pt2-hero-left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

/* Emblem */
.pt2-hero-emblem {
    position: relative;
    width: 72px; height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pt2-hero-emoji {
    font-size: 36px;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 60%, transparent));
}

.pt2-hero-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
    animation: pt2-ring-spin 6s linear infinite;
}

.pt2-hero-ring--2 {
    inset: -10px;
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    animation-duration: 10s;
    animation-direction: reverse;
}

@keyframes pt2-ring-spin {
    to { transform: rotate(360deg); }
}

.pt2-hero-text {}

.pt2-hero-title {
    margin: 0 0 6px;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -1px;
    line-height: 1.1;
}

.pt2-hero-title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--accent-light), var(--accent-light), #e879f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pt2-hero-sub {
    margin: 0;
    font-size: 14px;
    color: rgba(148,163,184,.7);
    font-weight: 400;
}

/* Stats */
.pt2-hero-stats {
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 8px;
    flex-shrink: 0;
}

.pt2-hstat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 20px;
    border-radius: 12px;
    min-width: 80px;
    transition: background .2s;
}

.pt2-hstat:hover { background: rgba(255,255,255,.05); }

.pt2-hstat-n {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pt2-hstat-l {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(148,163,184,.6);
    font-weight: 600;
}

.pt2-hstat--active .pt2-hstat-n { color: #34d399; text-shadow: 0 0 20px rgba(52,211,153,.5); }
.pt2-hstat--dev .pt2-hstat-n    { color: #fbbf24; }
.pt2-hstat--total .pt2-hstat-n  { color: var(--accent-light); }

/* ── SEARCH ───────────────────────────────────────────────── */
.pt2-search-wrap {
    position: relative;
    z-index: 1;
    margin: 24px 48px 0;
}

.pt2-search-ico {
    position: absolute;
    left: 18px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px;
    color: rgba(148,163,184,.5);
    pointer-events: none;
}

.pt2-search-inp {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 44px 14px 48px;
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(255,255,255,.08);
    border-radius: 14px;
    color: #e2e8f0;
    font-size: 15px;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
    backdrop-filter: blur(12px);
}

.pt2-search-inp::placeholder { color: rgba(148,163,184,.4); }

.pt2-search-inp:focus {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 12%, transparent);
}

.pt2-search-clear {
    position: absolute;
    right: 14px; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.1);
    border: none;
    color: #94a3b8;
    width: 26px; height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.pt2-search-clear:hover { background: rgba(255,255,255,.2); }

/* ── TABS ─────────────────────────────────────────────────── */
.pt2-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    padding: 20px 48px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.pt2-tabs::-webkit-scrollbar { display: none; }

.pt2-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(255,255,255,.07);
    border-radius: 50px;
    color: rgba(148,163,184,.7);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
    flex-shrink: 0;
}

.pt2-tab:hover {
    background: rgba(255,255,255,.07);
    color: #e2e8f0;
    border-color: rgba(255,255,255,.15);
}

.pt2-tab--on {
    background: rgba(var(--tc, 99,102,241), .15);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent-light);
    box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 15%, transparent);
}

.pt2-tab--on[data-cat="documents"]    { background: color-mix(in srgb, var(--accent) 12%, transparent);  border-color: color-mix(in srgb, var(--accent) 50%, transparent);  color: var(--accent-light); }
.pt2-tab--on[data-cat="creation"]     { background: rgba(236,72,153,.12);  border-color: rgba(236,72,153,.5);  color: #f9a8d4; }
.pt2-tab--on[data-cat="processing"]   { background: rgba(245,158,11,.12);  border-color: rgba(245,158,11,.5);  color: #fcd34d; }
.pt2-tab--on[data-cat="intelligence"] { background: color-mix(in srgb, var(--accent) 12%, transparent);  border-color: color-mix(in srgb, var(--accent) 50%, transparent);  color: var(--accent-light); }
.pt2-tab--on[data-cat="all"]          { background: color-mix(in srgb, var(--accent) 12%, transparent);  border-color: color-mix(in srgb, var(--accent) 50%, transparent);  color: var(--accent-light); }

.pt2-tab-count {
    background: rgba(255,255,255,.1);
    padding: 1px 7px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
}

/* ── RECENTS ──────────────────────────────────────────────── */
.pt2-recents {
    position: relative;
    z-index: 1;
    margin: 20px 48px 0;
    padding: 14px 18px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pt2-recents-hd {
    font-size: 12px;
    font-weight: 600;
    color: rgba(148,163,184,.6);
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pt2-recents-ico { font-size: 14px; }

.pt2-recents-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pt2-recent-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(var(--tc,99,102,241),.1);
    border: 1px solid rgba(var(--tc,99,102,241),.25);
    border-radius: 50px;
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
}
.pt2-recent-chip:hover {
    background: rgba(var(--tc,99,102,241),.2);
    transform: translateY(-1px);
}

/* ── SECTIONS ─────────────────────────────────────────────── */
.pt2-section {
    position: relative;
    z-index: 1;
    margin: 32px 48px 0;
}

.pt2-section-hd {
    margin-bottom: 18px;
}

.pt2-section-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: -.02em;
}

.pt2-section-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pt2-dot--active { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.6); animation: pt2-dot-pulse 2s infinite; }
.pt2-dot--soon   { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,.4); }

@keyframes pt2-dot-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(52,211,153,.6); }
    50%       { box-shadow: 0 0 14px rgba(52,211,153,.9); }
}

.pt2-section-cnt {
    background: rgba(255,255,255,.08);
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(148,163,184,.8);
}

.pt2-section-sub {
    margin: 6px 0 0;
    font-size: 13px;
    color: rgba(148,163,184,.5);
}

/* ── GRID ─────────────────────────────────────────────────── */
.pt2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
}

/* ── CARDS ────────────────────────────────────────────────── */
.pt2-card {
    position: relative;
    background: rgba(255,255,255,.03);
    border-radius: 20px;
    padding: 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1),
                box-shadow .25s ease,
                background .2s;
    overflow: hidden;
    border: 1.5px solid rgba(255,255,255,.06);
}

.pt2-card-border {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 1.5px solid transparent;
    background: linear-gradient(135deg, var(--tc,var(--accent)), transparent 60%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}

.pt2-card-glow {
    position: absolute;
    top: -30%; left: -10%;
    width: 60%; height: 60%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--tc-rgb,99,102,241),.25) 0%, transparent 70%);
    filter: blur(20px);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}

.pt2-card--on:hover {
    transform: translateY(-4px) scale(1.01);
    background: rgba(255,255,255,.05);
    box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(var(--tc-rgb,99,102,241),.2);
}

.pt2-card--on:hover .pt2-card-border { opacity: 1; }
.pt2-card--on:hover .pt2-card-glow   { opacity: 1; }

.pt2-card--off {
    opacity: .65;
}
.pt2-card--off:hover {
    opacity: .8;
    transform: translateY(-2px);
}

.pt2-card--launching {
    animation: pt2-launch .18s ease;
}
@keyframes pt2-launch {
    0%   { transform: scale(1); }
    50%  { transform: scale(.96); }
    100% { transform: scale(1); }
}

/* Card top */
.pt2-card-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pt2-card-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(var(--tc-rgb,99,102,241),.12);
    border: 1px solid rgba(var(--tc-rgb,99,102,241),.2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .2s;
}
.pt2-card--on:hover .pt2-card-icon-wrap {
    background: rgba(var(--tc-rgb,99,102,241),.2);
}

.pt2-card-ico {
    font-size: 24px;
    line-height: 1;
}

.pt2-card-badges {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.pt2-badge-new {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: linear-gradient(135deg, rgba(249,115,22,.2), rgba(239,68,68,.2));
    border: 1px solid rgba(249,115,22,.35);
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    color: #fb923c;
    width: fit-content;
}

.pt2-badge-on {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: rgba(52,211,153,.12);
    border: 1px solid rgba(52,211,153,.3);
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    color: #34d399;
    width: fit-content;
}

.pt2-badge-off {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: rgba(251,191,36,.1);
    border: 1px solid rgba(251,191,36,.25);
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    color: #fbbf24;
    width: fit-content;
}

.pt2-fav {
    background: none;
    border: none;
    color: rgba(148,163,184,.3);
    font-size: 18px;
    cursor: pointer;
    padding: 2px;
    transition: color .2s, transform .2s;
    line-height: 1;
    flex-shrink: 0;
    margin-left: auto;
}
.pt2-fav:hover  { color: #fbbf24; transform: scale(1.2); }
.pt2-fav--on    { color: #fbbf24; }

/* Card body */
.pt2-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.pt2-card-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.pt2-card-desc {
    margin: 0;
    font-size: 13px;
    color: rgba(148,163,184,.7);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pt2-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.pt2-tag {
    padding: 3px 9px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50px;
    font-size: 11px;
    color: rgba(148,163,184,.7);
    font-weight: 500;
}

/* Card footer */
.pt2-card-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,.05);
}

.pt2-launch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: linear-gradient(135deg, var(--tc,var(--accent)), color-mix(in srgb, var(--tc,var(--accent)) 80%, var(--accent-light)));
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
.pt2-launch:hover {
    transform: translateX(2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent);
    filter: brightness(1.1);
}

.pt2-notify {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: rgba(255,255,255,.05);
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 10px;
    color: rgba(148,163,184,.8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.pt2-notify:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    color: #e2e8f0;
}

/* Coming soon mask */
.pt2-card-soon-mask {
    position: absolute;
    top: 16px; right: 16px;
    width: 32px; height: 32px;
    background: rgba(0,0,0,.5);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    pointer-events: none;
}

/* ── EMPTY ────────────────────────────────────────────────── */
.pt2-empty {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 80px 40px;
    margin: 32px 48px 0;
}

.pt2-empty-ico   { font-size: 56px; margin-bottom: 16px; }
.pt2-empty-title { font-size: 20px; font-weight: 700; color: #e2e8f0; margin-bottom: 8px; }
.pt2-empty-sub   { font-size: 14px; color: rgba(148,163,184,.5); margin-bottom: 24px; }
.pt2-empty-btn {
    padding: 11px 28px;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 12px;
    color: var(--accent-light);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.pt2-empty-btn:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* ── MODAL ────────────────────────────────────────────────── */
.pt2-modal-ov {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(12px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .2s;
}
.pt2-modal-ov--in { opacity: 1; }

.pt2-modal {
    position: relative;
    background: linear-gradient(160deg, #1a1d2e 0%, #12141f 100%);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    padding: 40px 36px 36px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 40px 80px rgba(0,0,0,.6);
    overflow: hidden;
    animation: pt2-modal-in .25s cubic-bezier(.34,1.56,.64,1);
}

@keyframes pt2-modal-in {
    from { transform: scale(.88) translateY(20px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

.pt2-modal-glow {
    position: absolute;
    top: -30%; left: -10%;
    width: 70%; height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--tc,var(--accent)), transparent 60%);
    opacity: .15;
    filter: blur(30px);
    pointer-events: none;
}

.pt2-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    color: #94a3b8;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.pt2-modal-close:hover { background: rgba(255,255,255,.15); color: #e2e8f0; }

.pt2-modal-ico   { font-size: 52px; text-align: center; margin-bottom: 16px; }

.pt2-modal-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid;
    margin-bottom: 14px;
}

.pt2-modal-name  { margin: 0 0 10px; font-size: 24px; font-weight: 800; color: #f1f5f9; }
.pt2-modal-desc  { margin: 0 0 16px; font-size: 14px; color: rgba(148,163,184,.75); line-height: 1.6; }
.pt2-modal-tags  { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }

.pt2-modal-form-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(148,163,184,.7);
    margin: 0 0 12px;
}

.pt2-modal-row {
    display: flex;
    gap: 10px;
}

.pt2-modal-email {
    flex: 1;
    padding: 11px 16px;
    background: rgba(255,255,255,.05);
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 12px;
    color: #e2e8f0;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
}
.pt2-modal-email:focus { border-color: var(--tc,var(--accent)); }
.pt2-modal-email::placeholder { color: rgba(148,163,184,.4); }

.pt2-modal-send {
    padding: 11px 20px;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s;
    white-space: nowrap;
}
.pt2-modal-send:hover { filter: brightness(1.15); }

.pt2-modal-ok {
    display: none;
    text-align: center;
    padding: 14px;
    background: rgba(52,211,153,.1);
    border: 1px solid rgba(52,211,153,.3);
    border-radius: 12px;
    color: #34d399;
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
}
.pt2-modal-ok--visible { display: block; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .pt2-hero  { padding: 28px 24px 24px; flex-direction: column; align-items: flex-start; }
    .pt2-search-wrap, .pt2-tabs, .pt2-section, .pt2-recents, .pt2-empty { margin-left: 20px; margin-right: 20px; }
    .pt2-grid  { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (max-width: 600px) {
    .pt2-hero  { padding: 20px 16px; }
    .pt2-search-wrap, .pt2-tabs, .pt2-section, .pt2-recents, .pt2-empty { margin-left: 12px; margin-right: 12px; }
    .pt2-grid  { grid-template-columns: 1fr; }
    .pt2-hero-stats { width: 100%; justify-content: stretch; }
    .pt2-hstat { flex: 1; }
    .pt2-hero-title { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR TOOLS PANEL — Expansion inline
   ═══════════════════════════════════════════════════════════ */

.sb-tools-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    color: rgba(148,163,184,.5);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), color .2s;
    flex-shrink: 0;
}
.sb-tools-arrow--up { transform: rotate(-180deg); color: var(--accent-light); }
.sb-tools-trigger--open .sb-tools-arrow { color: var(--accent-light); }

.sb-tools-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s;
    opacity: 0;
    margin: 0 8px;
}
.sb-tools-panel--open {
    max-height: 700px;
    opacity: 1;
}

.sb-tools-inner {
    padding: 8px 0 4px;
    border-left: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
    margin-left: 20px;
    padding-left: 12px;
}

.sb-tools-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 8px;
    font-size: 11px;
    font-weight: 600;
}
.sb-tools-header-active { color: #34d399; }
.sb-tools-header-sep    { color: rgba(148,163,184,.3); }
.sb-tools-header-soon   { color: rgba(148,163,184,.4); }

.sb-tool-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s, transform .15s;
    margin-bottom: 2px;
}
.sb-tool-item:hover {
    background: rgba(var(--stc-rgb, 99,102,241), .1);
    transform: translateX(2px);
}
.sb-tool-item--soon {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

.sb-tool-ico {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.sb-tool-name {
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(226,232,240,.8);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-tool-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sb-tool-dot--on  { background: #34d399; box-shadow: 0 0 4px rgba(52,211,153,.7); }
.sb-tool-dot--off { background: rgba(148,163,184,.25); }
/* ═══════════════════════════════════════════════════════════
   PT2 CARDS REDESIGN — App Launcher Style
   Remplace le style "formulaire" par des tuiles premium
   ═══════════════════════════════════════════════════════════ */

/* Reset des vieilles règles pt2-card internes */
.pt2-card-top,
.pt2-card-body,
.pt2-card-foot {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── NOUVELLE CARTE ─────────────────────────────────────── */
.pt2-card {
    position: relative;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 18px !important;
    padding: 0 !important;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1),
                box-shadow .22s ease,
                border-color .22s;
}

/* Bande de couleur en haut */
.pt2-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--tc, var(--accent));
    opacity: 0;
    transition: opacity .2s;
    border-radius: 18px 18px 0 0;
}

.pt2-card--on:hover {
    transform: translateY(-5px) scale(1.01) !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.4),
                0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent),
                0 0 30px color-mix(in srgb, var(--accent) 8%, transparent) !important;
}
.pt2-card--on:hover::before { opacity: 1; }

/* ── TOP : icône + badges + fav ─────────────────────────── */
.pt2-card-top {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 18px 18px 0 !important;
}

.pt2-card-icon-wrap {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.06) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: background .2s !important;
}

.pt2-card--on:hover .pt2-card-icon-wrap {
    background: color-mix(in srgb, var(--tc, var(--accent)) 18%, transparent) !important;
}

.pt2-card-ico {
    font-size: 22px !important;
}

.pt2-card-badges {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
    padding-top: 2px !important;
}

/* ── BODY : nom + desc + tags ───────────────────────────── */
.pt2-card-body {
    padding: 12px 18px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 1 !important;
}

.pt2-card-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    letter-spacing: -.02em !important;
    line-height: 1.2 !important;
}

.pt2-card-desc {
    font-size: 12.5px !important;
    color: rgba(148,163,184,.65) !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.pt2-card-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.pt2-tag {
    padding: 2px 8px !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 50px !important;
    font-size: 10.5px !important;
    color: rgba(148,163,184,.6) !important;
    font-weight: 500 !important;
}

/* ── FOOTER : bouton ────────────────────────────────────── */
.pt2-card-foot {
    padding: 14px 18px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-top: auto !important;
}

.pt2-launch {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: var(--tc, var(--accent)) !important;
    border: none !important;
    border-radius: 9px !important;
    color: #fff !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: filter .15s, transform .15s !important;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 35%, transparent) !important;
    opacity: .92;
}
.pt2-launch:hover {
    filter: brightness(1.15) !important;
    transform: translateX(1px) !important;
    opacity: 1;
}

.pt2-notify {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 9px !important;
    color: rgba(148,163,184,.7) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all .15s !important;
}
.pt2-notify:hover {
    background: rgba(255,255,255,.07) !important;
    color: #e2e8f0 !important;
}

/* Fade dans la grille */
.pt2-card {
    animation: pt2-card-fadein .3s ease both;
}
@keyframes pt2-card-fadein {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pt2-card:nth-child(1)  { animation-delay: .03s; }
.pt2-card:nth-child(2)  { animation-delay: .06s; }
.pt2-card:nth-child(3)  { animation-delay: .09s; }
.pt2-card:nth-child(4)  { animation-delay: .12s; }
.pt2-card:nth-child(5)  { animation-delay: .15s; }
.pt2-card:nth-child(6)  { animation-delay: .18s; }
.pt2-card:nth-child(7)  { animation-delay: .21s; }
.pt2-card:nth-child(8)  { animation-delay: .24s; }

/* ─── Productive Tools sticky header + smooth open ─── */
/* Quand le panel est ouvert, l'item reste visible en haut */
.sidebar-item.sb-tools-trigger--open {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--sb-bg, #0f1117);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    padding-bottom: 8px;
    margin-bottom: 0;
}

/* Transition douce du panel */
.sb-tools-panel {
    transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}

/* Fond léger du panel ouvert */
.sb-tools-panel--open {
    background: color-mix(in srgb, var(--accent) 3%, transparent);
    border-radius: 0 0 10px 10px;
    margin-bottom: 4px;
}


/* ===== css/productivity-tools.css?v=2602240010 ===== */
/* ================================================
   PRODUCTIVITY TOOLS - Pomodoro Timer & Time Tracker
   ProductiveApp Premium
   Glassmorphism, theme-aware, responsive
   ================================================ */

/* ================================================
   POMODORO TIMER - COMPACT (Pill)
   ================================================ */

.pomodoro-pill {
    position: fixed;
    bottom: 24px;
    left: 90px;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-xl, 50px);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    color: var(--bg-primary, #1a1410);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 20px var(--accent-glow, rgba(224, 120, 64, 0.4)),
                0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease,
                opacity 0.25s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    letter-spacing: 0.5px;
}

.pomodoro-pill:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 28px var(--accent-glow, rgba(224, 120, 64, 0.5)),
                0 4px 12px rgba(0, 0, 0, 0.4);
}

.pomodoro-pill.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8) translateY(10px);
}

.pomodoro-pill__icon {
    font-size: 1.1rem;
    line-height: 1;
}

.pomodoro-pill__time {
    font-variant-numeric: tabular-nums;
}

.pomodoro-pill__action {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* Pulsing animation when timer is running */
@keyframes pomodoroPulse {
    0%, 100% {
        box-shadow: 0 4px 20px var(--accent-glow, rgba(224, 120, 64, 0.4)),
                    0 2px 8px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px var(--accent-glow, rgba(224, 120, 64, 0.4)),
                    0 2px 8px rgba(0, 0, 0, 0.3),
                    0 0 20px var(--accent-glow, rgba(224, 120, 64, 0.5));
    }
}

.pomodoro-pill.running {
    animation: pomodoroPulse 2s ease-in-out infinite;
}

/* Break state colors */
.pomodoro-pill.on-break {
    background: linear-gradient(135deg, var(--success, #22c55e) 0%, #4ade80 100%);
    box-shadow: 0 4px 20px var(--success-glow, rgba(34, 197, 94, 0.4)),
                0 2px 8px rgba(0, 0, 0, 0.3);
}

@keyframes pomodoroBreakPulse {
    0%, 100% {
        box-shadow: 0 4px 20px var(--success-glow, rgba(34, 197, 94, 0.4)),
                    0 2px 8px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px var(--success-glow, rgba(34, 197, 94, 0.4)),
                    0 2px 8px rgba(0, 0, 0, 0.3),
                    0 0 20px var(--success-glow, rgba(34, 197, 94, 0.5));
    }
}

.pomodoro-pill.on-break.running {
    animation: pomodoroBreakPulse 2s ease-in-out infinite;
}


/* ================================================
   POMODORO TIMER - EXPANDED (Card)
   ================================================ */

.pomodoro-card {
    position: fixed;
    bottom: 24px;
    left: 90px;
    z-index: 9998;
    width: 280px;
    padding: 24px 20px 20px;
    border-radius: var(--radius-lg, 20px);
    background: rgba(45, 33, 23, 0.85);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid var(--border, rgba(224, 120, 64, 0.2));
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5),
                0 0 1px rgba(255, 255, 255, 0.1) inset;
    color: var(--text, #f5e6d3);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    user-select: none;
}

.pomodoro-card.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92) translateY(12px);
}

/* Close / Collapse button */
.pomodoro-card__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #a89078);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
}

.pomodoro-card__close:hover {
    color: var(--text, #f5e6d3);
    background: var(--bg-card, rgba(224, 120, 64, 0.08));
}

/* Header label */
.pomodoro-card__label {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent, #e07840);
    margin-bottom: 16px;
}

.pomodoro-card__label.break-label {
    color: var(--success, #22c55e);
}

/* SVG Progress Ring */
.pomodoro-card__ring-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    position: relative;
}

.pomodoro-ring {
    width: 120px;
    height: 120px;
    transform: rotate(-90deg);
}

.pomodoro-ring__bg {
    fill: none;
    stroke: var(--border, rgba(224, 120, 64, 0.2));
    stroke-width: 6;
}

.pomodoro-ring__progress {
    fill: none;
    stroke: var(--accent, #e07840);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.pomodoro-ring__progress.break-stroke {
    stroke: var(--success, #22c55e);
}

/* Time display inside ring */
.pomodoro-card__time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text, #f5e6d3);
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

/* Session info */
.pomodoro-card__session {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted, #a89078);
    margin-bottom: 16px;
    letter-spacing: 0.3px;
}

/* Controls row */
.pomodoro-card__controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.pomodoro-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border, rgba(224, 120, 64, 0.2));
    background: var(--bg-card, rgba(224, 120, 64, 0.08));
    color: var(--text, #f5e6d3);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.pomodoro-btn:hover {
    background: var(--accent, #e07840);
    color: var(--bg-primary, #1a1410);
    border-color: var(--accent, #e07840);
    transform: scale(1.08);
    box-shadow: 0 4px 16px var(--accent-glow, rgba(224, 120, 64, 0.3));
}

.pomodoro-btn.primary-action {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    color: var(--bg-primary, #1a1410);
    border: none;
    font-size: 1.15rem;
    box-shadow: 0 4px 16px var(--accent-glow, rgba(224, 120, 64, 0.3));
}

.pomodoro-btn.primary-action:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 24px var(--accent-glow, rgba(224, 120, 64, 0.5));
}

/* Settings toggle */
.pomodoro-card__settings-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.pomodoro-settings-btn {
    background: none;
    border: none;
    color: var(--text-muted, #a89078);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--radius-sm, 8px);
    transition: color 0.2s, background 0.2s;
    letter-spacing: 0.3px;
}

.pomodoro-settings-btn:hover {
    color: var(--text, #f5e6d3);
    background: var(--bg-card, rgba(224, 120, 64, 0.08));
}

/* Settings panel (inside card) */
.pomodoro-card__settings {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    margin-top: 0;
}

.pomodoro-card__settings.open {
    max-height: 200px;
    opacity: 1;
    margin-top: 8px;
}

.pomodoro-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.78rem;
    color: var(--text-muted, #a89078);
}

.pomodoro-setting-row label {
    flex: 1;
}

.pomodoro-setting-row input[type="number"] {
    width: 52px;
    padding: 4px 6px;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--border, rgba(224, 120, 64, 0.2));
    background: var(--bg-secondary, #2d2117);
    color: var(--text, #f5e6d3);
    font-size: 0.78rem;
    text-align: center;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    -moz-appearance: textfield;
}

.pomodoro-setting-row input[type="number"]::-webkit-outer-spin-button,
.pomodoro-setting-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pomodoro-setting-row input[type="number"]:focus {
    outline: none;
    border-color: var(--accent, #e07840);
}

/* Completed sessions badge */
.pomodoro-card__completed {
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-muted, #a89078);
    margin-top: 6px;
    opacity: 0.7;
}


/* ================================================
   TIME TRACKER - Components
   ================================================ */

/* In-task compact tracker */
.time-tracker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-xl, 50px);
    background: var(--bg-card, rgba(224, 120, 64, 0.08));
    border: 1px solid var(--border, rgba(224, 120, 64, 0.2));
    font-size: 0.78rem;
    color: var(--text-muted, #a89078);
    transition: border-color 0.2s, background 0.2s;
}

.time-tracker.active {
    border-color: var(--success, #22c55e);
    background: rgba(34, 197, 94, 0.08);
}

.time-tracker-display {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text, #f5e6d3);
    font-size: 0.82rem;
}

.time-tracker-icon {
    font-size: 0.85rem;
    line-height: 1;
}

/* Pulsing green dot for active timer */
.time-tracker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success, #22c55e);
    display: none;
    flex-shrink: 0;
}

.time-tracker.active .time-tracker-dot {
    display: block;
    animation: ttDotPulse 1.5s ease-in-out infinite;
}

@keyframes ttDotPulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 var(--success-glow, rgba(34, 197, 94, 0.4));
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
    }
}

/* Start / Stop button */
.time-tracker-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border, rgba(224, 120, 64, 0.2));
    background: var(--bg-secondary, #2d2117);
    color: var(--text, #f5e6d3);
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    padding: 0;
    line-height: 1;
}

.time-tracker-btn:hover {
    background: var(--accent, #e07840);
    color: var(--bg-primary, #1a1410);
    border-color: var(--accent, #e07840);
    transform: scale(1.1);
}

.time-tracker-btn.stop-btn {
    border-color: var(--danger, #ef4444);
}

.time-tracker-btn.stop-btn:hover {
    background: var(--danger, #ef4444);
    border-color: var(--danger, #ef4444);
    color: #fff;
}


/* ================================================
   TIME TRACKER - Floating indicator (when running)
   ================================================ */

.time-tracker-floating {
    position: fixed;
    bottom: 24px;
    left: 90px;
    z-index: 9997;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-xl, 50px);
    background: rgba(34, 197, 94, 0.15);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: var(--text, #f5e6d3);
    font-size: 0.82rem;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.2),
                0 2px 8px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: default;
    user-select: none;
    white-space: nowrap;
}

.time-tracker-floating.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(0.9);
}

.time-tracker-floating__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success, #22c55e);
    animation: ttDotPulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.time-tracker-floating__time {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

.time-tracker-floating__task {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted, #a89078);
    font-size: 0.75rem;
}

.time-tracker-floating__stop {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger, #ef4444);
    font-size: 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
    padding: 0;
    line-height: 1;
}

.time-tracker-floating__stop:hover {
    background: var(--danger, #ef4444);
    color: #fff;
    transform: scale(1.12);
}


/* ================================================
   TIME TRACKER - Log table (in task detail/modal)
   ================================================ */

.time-tracker-log {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    margin-top: 10px;
}

.time-tracker-log th {
    text-align: left;
    padding: 8px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted, #a89078);
    border-bottom: 1px solid var(--border, rgba(224, 120, 64, 0.2));
}

.time-tracker-log td {
    padding: 8px 10px;
    color: var(--text, #f5e6d3);
    border-bottom: 1px solid rgba(224, 120, 64, 0.08);
    vertical-align: middle;
}

.time-tracker-log tr:last-child td {
    border-bottom: none;
}

.time-tracker-log tr:hover td {
    background: var(--bg-card, rgba(224, 120, 64, 0.08));
}

.time-tracker-log__duration {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--accent, #e07840);
}

.time-tracker-log__date {
    font-size: 0.72rem;
    color: var(--text-muted, #a89078);
}

.time-tracker-log__total {
    font-weight: 700;
    color: var(--accent, #e07840);
    border-top: 2px solid var(--border, rgba(224, 120, 64, 0.2));
}

.time-tracker-log__empty {
    text-align: center;
    color: var(--text-muted, #a89078);
    padding: 20px 10px;
    font-style: italic;
}

/* Delete entry button */
.time-tracker-log__delete {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted, #a89078);
    font-size: 0.7rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
    opacity: 0;
}

.time-tracker-log tr:hover .time-tracker-log__delete {
    opacity: 1;
}

.time-tracker-log__delete:hover {
    color: var(--danger, #ef4444);
    background: rgba(239, 68, 68, 0.1);
}


/* ================================================
   SIDEBAR BUTTON (optional trigger)
   ================================================ */

.sidebar-pomodoro-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-muted, #a89078);
    font-size: 0.85rem;
}

.sidebar-pomodoro-btn:hover {
    background: var(--bg-card, rgba(224, 120, 64, 0.08));
    color: var(--text, #f5e6d3);
}

.sidebar-pomodoro-btn .sidebar-icon {
    font-size: 1rem;
}

.sidebar-pomodoro-btn.active {
    color: var(--accent, #e07840);
}


/* ================================================
   POMODORO - Positioning when time tracker visible
   Shift pomodoro up when both are shown
   ================================================ */

.pomodoro-pill.has-tracker,
.pomodoro-card.has-tracker {
    bottom: 64px;
}


/* ================================================
   RESPONSIVE
   ================================================ */

@media (max-width: 768px) {
    .pomodoro-pill {
        left: 16px;
        bottom: 80px;
    }

    .pomodoro-card {
        left: 12px;
        right: 12px;
        bottom: 80px;
        width: auto;
    }

    .time-tracker-floating {
        left: 16px;
        bottom: 80px;
    }

    .pomodoro-pill.has-tracker,
    .pomodoro-card.has-tracker {
        bottom: 120px;
    }
}


/* ================================================
   REDUCED MOTION
   ================================================ */

@media (prefers-reduced-motion: reduce) {
    .pomodoro-pill.running,
    .pomodoro-pill.on-break.running {
        animation: none;
    }

    .time-tracker.active .time-tracker-dot,
    .time-tracker-floating__dot {
        animation: none;
        opacity: 1;
    }

    .pomodoro-card,
    .pomodoro-pill,
    .time-tracker-floating {
        transition-duration: 0.01ms;
    }
}


/* ===== css/kanban.css?v=2602240010 ===== */
/* =============================================
   PRODUCTIVEAPP - KANBAN BOARD + NOTIFICATION CENTER
   Premium Kanban board & Notification dropdown
   v1.0 - 2026-02-07
   ============================================= */

/* =============================================
   KANBAN BOARD
   ============================================= */

/* === VIEW TOGGLE (Bulles | Kanban) === */
.kanban-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px;
    margin-left: 12px;
}

.kanban-view-toggle-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: inherit;
}

.kanban-view-toggle-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.kanban-view-toggle-btn:hover {
    color: var(--text);
}

.kanban-view-toggle-btn.active {
    background: var(--accent);
    color: var(--bg-primary);
    box-shadow: 0 2px 8px var(--accent-glow);
}

/* === BOARD CONTAINER === */
.kanban-board {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: calc(100vh - 220px);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.kanban-board::-webkit-scrollbar {
    height: 6px;
}

.kanban-board::-webkit-scrollbar-track {
    background: transparent;
}

.kanban-board::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.kanban-board::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* === FILTERS BAR === */
.kanban-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    flex-wrap: wrap;
}

.kanban-filter-select {
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

.kanban-filter-select:hover,
.kanban-filter-select:focus {
    border-color: var(--accent);
    outline: none;
}

.kanban-filter-select option {
    background: var(--bg-secondary);
    color: var(--text);
}

.kanban-filter-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === COLUMN === */
.kanban-column {
    min-width: 280px;
    max-width: 340px;
    flex: 1;
    background: var(--bg-secondary);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 240px);
    transition: background 0.2s ease;
}

.kanban-column.drag-over {
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-secondary));
}

/* === COLUMN HEADER === */
.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 2px solid var(--accent);
    flex-shrink: 0;
}

.kanban-column-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kanban-column-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.2px;
}

.kanban-column-count {
    min-width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.kanban-column-add-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-family: inherit;
}

.kanban-column-add-btn:hover {
    background: var(--accent);
    color: var(--bg-primary);
}

.kanban-column-add-btn svg {
    width: 16px;
    height: 16px;
}

/* Column color variants */
.kanban-column[data-status="todo"] .kanban-column-header {
    border-bottom-color: var(--accent);
}

.kanban-column[data-status="in_progress"] .kanban-column-header {
    border-bottom-color: var(--warning);
}

.kanban-column[data-status="review"] .kanban-column-header {
    border-bottom-color: var(--accent-light);
}

.kanban-column[data-status="done"] .kanban-column-header {
    border-bottom-color: var(--success);
}

/* === COLUMN BODY (scrollable task list) === */
.kanban-column-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.kanban-column-body::-webkit-scrollbar {
    width: 4px;
}

.kanban-column-body::-webkit-scrollbar-track {
    background: transparent;
}

.kanban-column-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

/* === TASK CARD === */
.kanban-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    cursor: grab;
    user-select: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, border-color 0.18s ease;
    position: relative;
}

.kanban-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.kanban-card:active {
    cursor: grabbing;
}

/* Dragging state */
.kanban-card.dragging {
    opacity: 0.9;
    transform: rotate(2deg) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--accent);
    z-index: 1000;
    transition: none;
}

/* Drop placeholder */
.kanban-drop-placeholder {
    border: 2px dashed var(--accent);
    background: var(--bg-card);
    border-radius: 10px;
    min-height: 60px;
    transition: all 0.2s ease;
    opacity: 0.7;
}

/* Card title */
.kanban-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card project name */
.kanban-card-project {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--accent);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.kanban-card-project-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Card metadata row */
.kanban-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kanban-card-meta-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Priority dot */
.kanban-card-priority {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kanban-card-priority.urgent {
    background: var(--danger);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

.kanban-card-priority.normal {
    background: var(--warning);
}

.kanban-card-priority.zen {
    background: var(--success);
}

/* Due date */
.kanban-card-due {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}

.kanban-card-due svg {
    width: 12px;
    height: 12px;
}

.kanban-card-due.overdue {
    color: var(--danger);
    font-weight: 600;
}

.kanban-card-due.due-soon {
    color: var(--warning);
}

/* Assignee avatar */
.kanban-card-assignee {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    flex-shrink: 0;
    cursor: default;
}

.kanban-card-assignee[title]:hover {
    border-color: var(--accent);
}

/* === EMPTY COLUMN STATE === */
.kanban-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    margin: 8px;
    min-height: 100px;
    text-align: center;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.kanban-empty svg {
    width: 28px;
    height: 28px;
    color: var(--text-muted);
    margin-bottom: 8px;
    opacity: 0.5;
}

.kanban-empty-text {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.kanban-column.drag-over .kanban-empty {
    border-color: var(--accent);
    opacity: 1;
    background: var(--bg-card);
}

/* === INLINE CREATE FORM === */
.kanban-inline-create {
    padding: 10px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.kanban-inline-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text);
    font-size: 0.8rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}

.kanban-inline-input:focus {
    border-color: var(--accent);
}

.kanban-inline-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.kanban-inline-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.kanban-inline-save {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: var(--accent);
    color: var(--bg-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.kanban-inline-save:hover {
    box-shadow: 0 2px 8px var(--accent-glow);
}

.kanban-inline-cancel {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.kanban-inline-cancel:hover {
    border-color: var(--text-muted);
    color: var(--text);
}

/* === SORT INDICATOR === */
.kanban-sort-btn {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}

.kanban-sort-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

.kanban-sort-btn svg {
    width: 12px;
    height: 12px;
}

/* === CARD MOVE ANIMATION === */
@keyframes kanbanCardEnter {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.kanban-card.entering {
    animation: kanbanCardEnter 0.25s ease forwards;
}

/* =============================================
   NOTIFICATION CENTER
   ============================================= */

/* === BELL BUTTON — DISABLED (user request) === */
.notif-center-bell {
    display: none !important;
}

/* Unread badge — DISABLED */
.notif-center-badge {
    display: none !important;
}

.notif-center-badge.hidden {
    display: none;
}

@keyframes notifBadgePop {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* === DROPDOWN PANEL === */
.notif-center-panel {
    position: fixed;
    top: 60px;
    right: 16px;
    width: 360px;
    max-height: 480px;
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,255,0.03) inset;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: top right;
    animation: notifPanelSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.notif-center-panel.hidden {
    display: none;
}

@keyframes notifPanelSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Panel header */
.notif-center-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.notif-center-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.notif-center-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.notif-center-mark-all {
    padding: 5px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.notif-center-mark-all:hover {
    background: var(--bg-card);
}

.notif-center-close {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-family: inherit;
}

.notif-center-close:hover {
    background: var(--bg-card);
    color: var(--text);
}

.notif-center-close svg {
    width: 14px;
    height: 14px;
}

/* Panel body (scrollable list) */
.notif-center-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.notif-center-body::-webkit-scrollbar {
    width: 4px;
}

.notif-center-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

/* === NOTIFICATION ITEM === */
.notif-center-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
    border-left: 3px solid transparent;
}

.notif-center-item:hover {
    background: var(--bg-card);
}

/* Unread state */
.notif-center-item.unread {
    border-left-color: var(--accent);
}

.notif-center-item.unread .notif-center-item-title {
    font-weight: 600;
}

/* Category colors for unread border */
.notif-center-item.unread.type-info {
    border-left-color: #3b82f6;
}

.notif-center-item.unread.type-success {
    border-left-color: var(--success);
}

.notif-center-item.unread.type-warning {
    border-left-color: #f59e0b;
}

.notif-center-item.unread.type-alert {
    border-left-color: var(--danger);
}

/* Icon */
.notif-center-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.notif-center-item-icon.type-info {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.notif-center-item-icon.type-success {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.notif-center-item-icon.type-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.notif-center-item-icon.type-alert {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.notif-center-item-icon svg {
    width: 16px;
    height: 16px;
}

/* Content */
.notif-center-item-content {
    flex: 1;
    min-width: 0;
}

.notif-center-item-title {
    font-size: 0.8rem;
    color: var(--text);
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 2px;
}

.notif-center-item-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-center-item-time {
    font-size: 0.65rem;
    color: var(--text-muted);
    opacity: 0.7;
    margin-top: 4px;
    white-space: nowrap;
}

/* Dismiss button */
.notif-center-item-dismiss {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    transition: all 0.15s ease;
    font-family: inherit;
}

.notif-center-item:hover .notif-center-item-dismiss {
    display: flex;
}

.notif-center-item-dismiss:hover {
    background: var(--bg-secondary);
    color: var(--text);
}

/* Empty state */
.notif-center-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.notif-center-empty svg {
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    opacity: 0.3;
    margin-bottom: 12px;
}

.notif-center-empty-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.6;
}

/* Panel footer */
.notif-center-footer {
    padding: 10px 18px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-center-footer-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.notif-center-footer-btn:hover {
    background: var(--bg-card);
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
    /* Stack columns vertically on mobile */
    .kanban-board {
        flex-direction: column;
        overflow-x: hidden;
        min-height: auto;
        gap: 12px;
    }

    .kanban-column {
        min-width: 100%;
        max-width: 100%;
        max-height: none;
    }

    .kanban-column-body {
        max-height: 300px;
    }

    /* Full-width notification panel on mobile */
    .notif-center-panel {
        right: 8px;
        left: 8px;
        width: auto;
        max-height: 70vh;
    }

    .kanban-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
    }

    .kanban-view-toggle {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .kanban-column-body {
        max-height: 250px;
    }

    .notif-center-panel {
        top: 50px;
        right: 4px;
        left: 4px;
        border-radius: 12px;
    }
}

/* =============================================
   PRINT STYLES
   ============================================= */
@media print {
    .kanban-board {
        overflow: visible;
    }

    .kanban-column {
        break-inside: avoid;
        max-height: none;
    }

    .kanban-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .notif-center-panel,
    .notif-center-bell {
        display: none !important;
    }
}


/* ===== css/habit-tracker.css?v=2602240010 ===== */
/* ================================================
   HABIT TRACKER + DAILY REVIEW - ProductiveApp
   ================================================ */

/* Habit Tracker */
.habit-tracker { padding: 24px; }
.habit-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.habit-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.habit-add-btn {
    padding: 8px 16px; border-radius: var(--radius-md, 8px);
    background: var(--accent); color: #fff; border: none; cursor: pointer;
    font-size: 0.8rem; font-weight: 600; transition: opacity 0.2s;
}
.habit-add-btn:hover { opacity: 0.85; }

.habit-grid { display: flex; flex-direction: column; gap: 12px; }
.habit-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px); transition: border-color 0.2s;
}
.habit-row:hover { border-color: var(--accent); }
.habit-icon { font-size: 1.3rem; flex-shrink: 0; }
.habit-info { flex: 1; min-width: 0; }
.habit-name { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.habit-streak { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
.habit-streak strong { color: var(--accent); }

.habit-days { display: flex; gap: 4px; }
.habit-day {
    width: 28px; height: 28px; border-radius: 6px;
    border: 1.5px solid var(--border); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; color: var(--text-secondary); transition: all 0.2s;
    background: transparent; position: relative;
}
.habit-day:hover { border-color: var(--accent); }
.habit-day.checked {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.habit-day.today { border-color: var(--accent); font-weight: 700; }

.habit-progress-bar {
    width: 80px; height: 6px; border-radius: 3px; background: var(--bg-secondary);
    overflow: hidden; flex-shrink: 0;
}
.habit-progress-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.3s; }

.habit-delete {
    width: 28px; height: 28px; border-radius: 6px; border: none;
    background: transparent; color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; font-size: 0.9rem;
}
.habit-delete:hover { background: color-mix(in srgb, var(--danger, #ef4444) 15%, transparent); color: var(--danger, #ef4444); }

/* Add Habit Modal */
.habit-modal-overlay {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all 0.25s;
}
.habit-modal-overlay.active { opacity: 1; visibility: visible; }
.habit-modal {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-xl, 16px); padding: 24px; width: 90%; max-width: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.habit-modal h3 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
.habit-modal input, .habit-modal select {
    width: 100%; padding: 10px 12px; border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border); background: var(--bg-secondary);
    color: var(--text-primary); font-size: 0.85rem; margin-bottom: 12px;
}
.habit-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.habit-modal-actions button {
    padding: 8px 16px; border-radius: var(--radius-md, 8px); border: none;
    cursor: pointer; font-size: 0.8rem; font-weight: 600;
}
.habit-modal-save { background: var(--accent); color: #fff; }
.habit-modal-cancel { background: var(--bg-secondary); color: var(--text-secondary); }

/* Emoji picker for habits */
.habit-emoji-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.habit-emoji-btn {
    width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid var(--border);
    background: transparent; font-size: 1.1rem; cursor: pointer; transition: all 0.15s;
}
.habit-emoji-btn:hover, .habit-emoji-btn.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }

/* ================================================
   DAILY REVIEW WIZARD
   ================================================ */
.daily-review-overlay {
    position: fixed; inset: 0; z-index: 1150;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all 0.3s;
}
.daily-review-overlay.active { opacity: 1; visibility: visible; }
.daily-review-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-xl, 16px); width: 90%; max-width: 560px;
    max-height: 85vh; overflow-y: auto; box-shadow: 0 24px 80px rgba(0,0,0,0.4);
    border-top: 3px solid var(--accent);
}
.daily-review-header {
    padding: 24px 24px 16px; border-bottom: 1px solid var(--border);
}
.daily-review-header h2 { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); }
.daily-review-header p { font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; }

.daily-review-progress {
    display: flex; gap: 4px; padding: 0 24px; margin-top: 12px;
}
.daily-review-step {
    flex: 1; height: 4px; border-radius: 2px; background: var(--border);
    transition: background 0.3s;
}
.daily-review-step.active { background: var(--accent); }
.daily-review-step.done { background: var(--success, #22c55e); }

.daily-review-body { padding: 24px; }
.daily-review-section { margin-bottom: 20px; }
.daily-review-section h3 { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.daily-review-section p { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 12px; }

.daily-review-task-list { display: flex; flex-direction: column; gap: 8px; }
.daily-review-task {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: var(--bg-secondary); border-radius: var(--radius-md, 8px);
    border: 1px solid transparent;
}
.daily-review-task.completed { opacity: 0.5; text-decoration: line-through; }
.daily-review-task-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; flex-shrink: 0; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.daily-review-task-check.checked { background: var(--success, #22c55e); border-color: var(--success, #22c55e); color: #fff; }
.daily-review-task-title { font-size: 0.85rem; color: var(--text-primary); }

.daily-review-textarea {
    width: 100%; min-height: 80px; padding: 12px; border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border); background: var(--bg-secondary);
    color: var(--text-primary); font-size: 0.85rem; resize: vertical;
}

.daily-review-rating { display: flex; gap: 6px; margin-top: 8px; }
.daily-review-star {
    width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid var(--border);
    background: transparent; font-size: 1.2rem; cursor: pointer; transition: all 0.2s;
}
.daily-review-star:hover, .daily-review-star.active { border-color: var(--warning, #f59e0b); background: color-mix(in srgb, var(--warning, #f59e0b) 15%, transparent); }

.daily-review-footer {
    padding: 16px 24px; border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
}
.daily-review-footer button { padding: 10px 20px; border-radius: var(--radius-md, 8px); border: none; cursor: pointer; font-size: 0.85rem; font-weight: 600; }
.daily-review-prev { background: var(--bg-secondary); color: var(--text-secondary); }
.daily-review-next { background: var(--accent); color: #fff; }
.daily-review-skip { background: transparent; color: var(--text-secondary); text-decoration: underline; font-weight: 400; }


/* ===== css/life-insights.css?v=2602240010 ===== */
/* Life Insights Module - ProductiveApp */
.li-wrap {
    padding: 24px;
    max-width: 900px;
    margin: 0 auto;
    color: var(--text-primary, #e2e8f0);
}
.li-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}
.li-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.li-subtitle {
    color: var(--text-secondary, #94a3b8);
    margin: 0;
    font-size: 0.9rem;
}
.li-analyze-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.li-analyze-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.li-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.li-stat-card {
    background: var(--bg-card, rgba(255,255,255,0.05));
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    transition: transform 0.2s;
}
.li-stat-card:hover { transform: translateY(-2px); }
.li-stat-icon { font-size: 1.5rem; display: block; margin-bottom: 8px; }
.li-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent, #a78bfa);
    line-height: 1;
    margin-bottom: 4px;
}
.li-stat-label { font-size: 0.8rem; color: var(--text-secondary, #94a3b8); }

.li-snapshot {
    background: var(--bg-card, rgba(255,255,255,0.05));
    border: 1px solid var(--accent, #a78bfa);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.li-snapshot-title { font-size: 1rem; font-weight: 600; margin: 0 0 10px 0; }
.li-snapshot-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--text-secondary, #94a3b8);
}
.li-score { color: var(--accent, #a78bfa); font-weight: 600; }
.li-ai-summary {
    margin: 10px 0 0 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #94a3b8);
    font-style: italic;
}

.li-section { margin-top: 8px; }
.li-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.li-section-header h2 { font-size: 1.1rem; font-weight: 600; margin: 0; }
.li-badge {
    background: var(--accent, #a78bfa);
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 700;
}

.li-insight-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--bg-card, rgba(255,255,255,0.04));
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 10px;
    transition: border-color 0.2s, opacity 0.2s;
    position: relative;
}
.li-insight-card:hover { border-color: var(--accent, #a78bfa); }
.li-insight-card.is-read { opacity: 0.55; }
.li-insight-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.li-insight-body { flex: 1; }
.li-insight-title { font-size: 0.95rem; font-weight: 600; display: block; margin-bottom: 4px; }
.li-insight-desc { margin: 4px 0; font-size: 0.875rem; color: var(--text-secondary, #94a3b8); }
.li-recommendation {
    margin: 8px 0 0 0;
    font-size: 0.85rem;
    color: #86efac;
    background: rgba(134,239,172,0.08);
    border-radius: 6px;
    padding: 6px 10px;
}
.li-mark-read {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    border-radius: 50%;
    width: 26px;
    height: 26px;
    cursor: pointer;
    color: #86efac;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.li-mark-read:hover { background: rgba(134,239,172,0.15); }

.li-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary, #94a3b8);
    background: var(--bg-card, rgba(255,255,255,0.03));
    border-radius: 10px;
    border: 1px dashed var(--border-color, rgba(255,255,255,0.1));
}
.li-error {
    padding: 40px 20px;
    text-align: center;
    color: #f87171;
}
.li-error button {
    margin-top: 12px;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}
.li-skeleton-header {
    height: 60px;
    background: var(--bg-card, rgba(255,255,255,0.05));
    border-radius: 8px;
    margin-bottom: 20px;
    animation: li-pulse 1.5s infinite;
}
.li-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.li-skeleton-grid::before, .li-skeleton-grid::after {
    content: '';
    height: 90px;
    background: var(--bg-card, rgba(255,255,255,0.05));
    border-radius: 8px;
    grid-column: span 2;
    animation: li-pulse 1.5s infinite;
}
@keyframes li-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}


/* ===== css/mail-zen.css?v=2602240010 ===== */
/**
 * MAIL ZEN v9.0 - Design Premium Ultra Raffiné
 * Interface professionnelle élégante
 * Variables CSS du thème UNIQUEMENT
 */

/* ===== CONTAINER PRINCIPAL ===== */
/* IMPORTANT: Use #view-mail.active to not override .view-container { display: none } */
#view-mail.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary, #0f0f19);
  overflow-y: auto;
  padding: 24px 28px;
  gap: 20px;
}

/* ===== HEADER PREMIUM ===== */
.mail-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mail-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.mail-header-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Icône envelope premium */
.mail-header-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, transparent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
  flex-shrink: 0;
}

.mail-header-text {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mail-header-text h1 {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #ffffff);
  letter-spacing: -0.02em;
}

/* Badge premium compact */
.mail-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mail-header-badge.ok {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.mail-header-badge.error {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Bouton Composer premium */
.mail-compose-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 85%, transparent));
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 30%, transparent);
  white-space: nowrap;
}

.mail-compose-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 90%, transparent), color-mix(in srgb, var(--accent) 95%, transparent));
}

.mail-compose-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ===== STATS BAR PREMIUM ===== */
.mail-stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
  border-radius: 10px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.07));
}

.mail-stats-items {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.82rem;
  color: var(--text-secondary, #888);
}

.mail-stats-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mail-stats-item strong {
  color: var(--text-primary, #fff);
  font-weight: 600;
}

.mail-stats-item svg {
  opacity: 0.6;
}

/* Point séparateur */
.mail-stats-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-color, rgba(255, 255, 255, 0.2));
  flex-shrink: 0;
}

.mail-stats-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 0.78rem;
  color: var(--text-secondary, #888);
  background: transparent;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mail-stats-toggle:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.06));
  color: var(--text-primary, #ffffff);
  border-color: rgba(255,255,255,0.15);
}

/* ===== TABS PREMIUM AVEC ICÔNES ===== */
.mail-tabs {
  display: flex;
  gap: 2px;
  padding: 0 0 0 0;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  overflow-x: auto;
  scrollbar-width: none;
}

.mail-tabs::-webkit-scrollbar { display: none; }

.mail-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary, #888);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  position: relative;
  bottom: -1px;
}

.mail-tab-icon {
  display: flex;
  align-items: center;
  opacity: 0.65;
  transition: opacity 0.18s ease;
  flex-shrink: 0;
}

.mail-tab-label {
  letter-spacing: 0.01em;
}

.mail-tab:hover {
  color: var(--text-primary, #ffffff);
  background: rgba(255,255,255,0.03);
}

.mail-tab:hover .mail-tab-icon {
  opacity: 0.85;
}

.mail-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.mail-tab.active .mail-tab-icon {
  opacity: 1;
}

/* ===== TAB CONTENT ===== */
.mail-tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  gap: 16px;
}

.mail-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== TOOLBAR (liste envoyés) ===== */
.mail-sent-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.mail-sent-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary, #ffffff);
}

.mail-filters {
  display: flex;
  gap: 8px;
}

.mail-filter-btn {
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary, #a0a0a0);
  background: transparent;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mail-filter-btn:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.05));
  color: var(--text-primary, #ffffff);
}

.mail-filter-btn.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

/* ===== SEARCH BAR ===== */
.mail-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  transition: border-color 0.15s ease;
}

.mail-search-bar:focus-within {
  border-color: var(--accent);
}

.mail-search-icon {
  color: var(--text-secondary, #a0a0a0);
}

.mail-search-input {
  flex: 1;
  padding: 0;
  font-size: 0.9rem;
  color: var(--text-primary, #ffffff);
  background: transparent;
  border: none;
  outline: none;
}

.mail-search-input::placeholder {
  color: var(--text-secondary, #a0a0a0);
}

.mail-search-clear {
  padding: 4px 8px;
  font-size: 1rem;
  color: var(--text-secondary, #a0a0a0);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.mail-search-clear:hover {
  color: var(--text-primary, #ffffff);
}

/* ===== LISTE COMPACTE (Gmail-style) ===== */
.mail-list-compact {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.02));
}

.mail-row {
  display: grid;
  grid-template-columns: 32px 40px 180px 1fr 100px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
  cursor: pointer;
  transition: background 0.12s ease;
}

.mail-row:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.05));
}

.mail-row:last-child {
  border-bottom: none;
}

.mail-row-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.mail-row-status {
  font-size: 1.2rem;
  text-align: center;
}

.mail-row-status.sent {
  opacity: 0.6;
}

.mail-row-status.opened {
  opacity: 1;
}

.mail-row-status.failed {
  opacity: 0.8;
}

.mail-row-recipient {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary, #ffffff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-row-content {
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
}

.mail-row-subject {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary, #ffffff);
  flex-shrink: 0;
}

.mail-row-preview {
  font-size: 0.85rem;
  color: var(--text-secondary, #a0a0a0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-row-date {
  font-size: 0.8rem;
  color: var(--text-secondary, #a0a0a0);
  text-align: right;
  white-space: nowrap;
}

/* ===== RESPONSIVE MOBILE ===== */
@media (max-width: 768px) {
  .mail-row {
    grid-template-columns: 32px 40px 1fr 80px;
    gap: 8px;
  }

  .mail-row-recipient {
    display: none; /* Masqué sur mobile */
  }

  .mail-sent-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== ÉTATS VIDES ET ERREURS ===== */
.mail-empty,
.mail-error,
.mail-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-secondary, #a0a0a0);
  animation: mailListFadeIn 0.35s ease;
}

.mail-empty p,
.mail-error p {
  margin: 10px 0;
  font-size: 0.9rem;
}

.mail-loading {
  gap: 14px;
  font-size: 0.88rem;
}

/* Spinner animé premium */
.spinner {
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== MODAL DÉTAIL PREMIUM ===== */
.mail-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 20px;
  animation: overlayIn 0.2s ease;
}

@keyframes overlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mail-modal {
  background: var(--bg-primary, #0f0f19);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 16px;
  max-width: 700px;
  width: 100%;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.04);
  animation: modalSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mail-modal-large {
  max-width: 900px;
}

.mail-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  background: rgba(255,255,255,0.02);
  border-radius: 16px 16px 0 0;
}

.mail-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary, #ffffff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80%;
}

.mail-modal-close {
  font-size: 1.4rem;
  color: var(--text-secondary, #888);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.mail-modal-close:hover {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
}

.mail-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.mail-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
  border-radius: 8px;
  margin-bottom: 20px;
}

.mail-detail-meta-row {
  display: flex;
  gap: 12px;
  font-size: 0.9rem;
}

.mail-detail-meta-label {
  font-weight: 600;
  color: var(--text-secondary, #a0a0a0);
  min-width: 80px;
}

.mail-detail-meta-value {
  color: var(--text-primary, #ffffff);
}

.mail-detail-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 8px;
}

.mail-detail-status-badge.opened {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.mail-status-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
}

.mail-status-badge.sent {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.mail-status-badge.failed {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.mail-status-badge.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.mail-detail-body {
  padding: 20px;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.02));
  border-radius: 8px;
  min-height: 200px;
}

.mail-detail-html-wrapper {
  width: 100%;
  min-height: 400px;
}

.mail-detail-html-iframe {
  width: 100%;
  min-height: 400px;
  border: none;
  background: #ffffff;
  border-radius: 6px;
}

.mail-detail-text {
  white-space: pre-wrap;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: var(--text-primary, #ffffff);
  margin: 0;
  line-height: 1.6;
}

.mail-modal-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

/* ===== OVERRIDES POUR THÈMES CLAIRS ===== */
[data-theme*="light"] .mail-header-text h1,
[data-theme*="light"] .mail-sent-title,
[data-theme*="light"] .mail-row-recipient,
[data-theme*="light"] .mail-row-subject,
[data-theme*="light"] .mail-inbox-from,
[data-theme*="light"] .mail-inbox-subject {
  color: #1a1a1a;
}

[data-theme*="light"] .mail-search-input,
[data-theme*="light"] .mail-inbox-search-input {
  color: #1a1a1a;
}

[data-theme*="light"] .mail-detail-text {
  color: #1a1a1a;
}

/* Thème sunset - texte blanc avec shadow */
[data-theme="sunset"] .mail-row-subject,
[data-theme="sunset"] .mail-row-recipient,
[data-theme="sunset"] .mail-inbox-from,
[data-theme="sunset"] .mail-inbox-subject {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Thème sahara - texte marron foncé avec shadow blanc */
[data-theme="sahara"] .mail-row-subject,
[data-theme="sahara"] .mail-row-recipient,
[data-theme="sahara"] .mail-inbox-from,
[data-theme="sahara"] .mail-inbox-subject {
  color: #2c1810;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* =============================================
   INBOX - Boite de réception (Mail Pro V2)
   ============================================= */

/* Ligne non lue = fond légèrement différent */
.mail-row-unread {
  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.05);
}

/* Point de statut non lu */
.mail-unread-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: transparent;
  margin-right: 4px;
}

.mail-unread-dot.unread {
  background: var(--color-primary, var(--accent));
}

/* Bouton étoile */
.mail-star-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 6px;
  color: var(--text-muted, #888);
  line-height: 1;
  flex-shrink: 0;
}

.mail-star-btn:hover,
.mail-star-btn.starred {
  color: #f59e0b;
}

/* Texte en gras pour les emails non lus */
.bold {
  font-weight: 700;
  color: var(--text-primary, inherit);
}

/* Badge non lus dans le titre */
.mail-unread-badge {
  display: inline-block;
  background: var(--color-primary, var(--accent));
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
}

/* =============================================
   INBOX v3.0 - Design Ultra Premium
   Superhuman-inspired, breathable, élégant
   ============================================= */

/* ===== TOOLBAR PREMIUM ===== */
.mail-inbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0 10px 0;
  flex-wrap: wrap;
}

.mail-inbox-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mail-inbox-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #ffffff);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}

/* Compteur bulle */
.mail-inbox-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary, #a0a0a0);
  background: var(--bg-secondary, rgba(255,255,255,0.07));
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  min-width: 24px;
  text-align: center;
}

/* Badge non lus - accentué */
.mail-inbox-unread-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 90%, transparent));
  padding: 2px 9px;
  border-radius: 20px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: unreadPulse 2.5s ease-in-out infinite;
}

@keyframes unreadPulse {
  0%, 100% { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent); }
  50% { box-shadow: 0 2px 14px color-mix(in srgb, var(--accent) 65%, transparent); }
}

/* Groupe de filtres pills */
.mail-inbox-filters {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--bg-secondary, rgba(255,255,255,0.03));
  border-radius: 22px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.07));
}

/* Pills filtre */
.mail-inbox-filter-btn {
  padding: 5px 13px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary, #888);
  background: transparent;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.mail-inbox-filter-btn:hover {
  color: var(--text-primary, #fff);
  background: rgba(255,255,255,0.07);
}

.mail-inbox-filter-btn.active {
  color: var(--text-primary, #fff);
  background: var(--bg-primary, rgba(255,255,255,0.12));
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* Pas de séparateur via ::before */
.mail-inbox-filters::before { display: none; }

/* Bouton IA Triage - distinctif et magique */
.mail-ai-triage-btn {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 18%, transparent)) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent) !important;
  color: var(--accent-light) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  padding: 5px 13px !important;
  border-radius: 18px !important;
  transition: all 0.2s ease !important;
}

.mail-ai-triage-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 30%, transparent)) !important;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important;
  color: #e9d5ff !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent) !important;
  transform: none !important;
}

/* ===== BARRE DE RECHERCHE ULTRA PREMIUM ===== */
.mail-inbox-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--bg-secondary, rgba(255,255,255,0.03));
  border: 1.5px solid var(--border-color, rgba(255,255,255,0.07));
  border-radius: 12px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.mail-inbox-search:focus-within {
  background: rgba(255,255,255,0.05);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent), 0 2px 12px rgba(0,0,0,0.1);
}

.mail-inbox-search-icon {
  color: var(--text-secondary, #666);
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

.mail-inbox-search:focus-within .mail-inbox-search-icon {
  color: var(--accent);
  transform: scale(1.05);
}

.mail-inbox-search-input {
  flex: 1;
  padding: 0;
  font-size: 0.9rem;
  color: var(--text-primary, #fff);
  background: transparent;
  border: none;
  outline: none;
  letter-spacing: 0.01em;
}

.mail-inbox-search-input::placeholder {
  color: var(--text-secondary, #555);
  font-size: 0.88rem;
}

.mail-inbox-search-clear {
  width: 22px;
  height: 22px;
  font-size: 0.8rem;
  color: var(--text-secondary, #666);
  background: var(--bg-secondary, rgba(255,255,255,0.06));
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.mail-inbox-search-clear:hover {
  color: var(--text-primary, #fff);
  background: rgba(239,68,68,0.15);
}

/* ===== ÉTAT VIDE ===== */
.mail-inbox-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
  text-align: center;
  color: var(--text-secondary, #a0a0a0);
  gap: 14px;
}

.mail-inbox-empty-icon { font-size: 3.5rem; opacity: 0.35; }
.mail-inbox-empty p { font-size: 0.95rem; margin: 0; opacity: 0.7; }

/* ===== LISTE ===== */
.mail-inbox-list {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color, rgba(255,255,255,0.07));
  background: var(--bg-secondary, rgba(255,255,255,0.015));
  animation: mailListFadeIn 0.3s ease;
}

@keyframes mailListFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== LIGNE EMAIL ===== */
.mail-inbox-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  position: relative;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.04));
  transition: background 0.12s ease, transform 0.12s ease;
  min-height: 68px;
}

.mail-inbox-row:last-child { border-bottom: none; }

.mail-inbox-row:hover {
  background: rgba(255,255,255,0.045);
  transform: translateX(2px);
}

.mail-inbox-row:active {
  transform: translateX(1px);
  background: rgba(255,255,255,0.03);
}

/* Accent gauche non-lu */
.mail-inbox-row.unread {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.mail-inbox-row.unread::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: linear-gradient(to bottom, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent));
  border-radius: 0 3px 3px 0;
}

/* ===== AVATAR ===== */
.mail-inbox-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mail-inbox-row:hover .mail-inbox-avatar {
  transform: scale(1.06);
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
}

/* ===== BODY DE LA LIGNE ===== */
.mail-inbox-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mail-inbox-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mail-inbox-from {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-secondary, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease;
}

.mail-inbox-row.unread .mail-inbox-from {
  font-weight: 700;
  color: var(--text-primary, #fff);
}

.mail-inbox-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Étoile - invisible par défaut, apparaît au hover */
.mail-inbox-star-btn {
  font-size: 0.9rem;
  color: var(--text-secondary, #555);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 6px;
  line-height: 1;
  transition: all 0.18s ease;
  opacity: 0;
}

.mail-inbox-row:hover .mail-inbox-star-btn { opacity: 1; }
.mail-inbox-star-btn.starred { color: #f59e0b; opacity: 1; }
.mail-inbox-star-btn:hover { color: #f59e0b; transform: scale(1.2); background: rgba(245,158,11,0.1); }

/* Date - compacte et discrète */
.mail-inbox-date {
  font-size: 0.75rem;
  color: var(--text-secondary, #777);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.mail-inbox-row.unread .mail-inbox-date {
  color: var(--accent);
  font-weight: 600;
}

/* Contenu : sujet + preview (ligne 2) */
.mail-inbox-content-row {
  display: flex;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
  gap: 0;
}

.mail-inbox-subject {
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--text-secondary, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  max-width: 280px;
  transition: color 0.15s ease;
}

.mail-inbox-row.unread .mail-inbox-subject {
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.mail-inbox-preview {
  font-size: 0.82rem;
  color: var(--text-secondary, #555);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* Pip non-lu - glow animé */
.mail-inbox-unread-pip {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent);
  flex-shrink: 0;
  animation: pipGlow 2s ease-in-out infinite;
}

@keyframes pipGlow {
  0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent); opacity: 1; }
  50% { box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 90%, transparent); opacity: 0.85; }
}

/* ===== THÈMES CLAIRS ===== */
[data-theme="ivory"] .mail-inbox-from,
[data-theme="paper"] .mail-inbox-from,
[data-theme="snow"] .mail-inbox-from,
[data-theme="porcelain"] .mail-inbox-from { color: #777; }

[data-theme="ivory"] .mail-inbox-row.unread .mail-inbox-from,
[data-theme="paper"] .mail-inbox-row.unread .mail-inbox-from,
[data-theme="snow"] .mail-inbox-row.unread .mail-inbox-from,
[data-theme="porcelain"] .mail-inbox-row.unread .mail-inbox-from { color: #111; }

[data-theme="ivory"] .mail-inbox-subject,
[data-theme="paper"] .mail-inbox-subject,
[data-theme="snow"] .mail-inbox-subject { color: #888; }

[data-theme="ivory"] .mail-inbox-row.unread .mail-inbox-subject,
[data-theme="paper"] .mail-inbox-row.unread .mail-inbox-subject,
[data-theme="snow"] .mail-inbox-row.unread .mail-inbox-subject { color: #111; }

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .mail-inbox-toolbar { flex-direction: column; align-items: flex-start; }
  .mail-inbox-subject { max-width: 150px; }
  .mail-inbox-row { padding: 12px 14px; min-height: 64px; }
  .mail-inbox-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 0.72rem;
  }
}

/* Version propre sans monospace - emails plain text */
.mail-detail-text-clean {
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-primary, #ffffff);
  margin: 0;
  word-break: break-word;
  white-space: normal;
}

[data-theme="ivory"] .mail-detail-text-clean,
[data-theme="paper"] .mail-detail-text-clean,
[data-theme="snow"] .mail-detail-text-clean {
  color: #1a1a1a;
}

/* =============================================
   MAIL UX UPGRADES - Boutons & Search Premium
   ============================================= */

/* Boutons mail : plus de padding, plus de présence */
#view-mail .btn {
  padding: 10px 20px;
  font-size: 0.9rem;
  border-radius: 8px;
  font-weight: 500;
  white-space: nowrap;
}

#view-mail .btn-outline {
  padding: 9px 18px;
  border: 1.5px solid var(--border-color, rgba(255,255,255,0.2));
}

/* Search bar - version Premium (full-height, bien visible) */
#view-mail .mail-inbox-search,
#view-mail .mail-search-bar {
  padding: 13px 20px;
  border-radius: 12px;
  background: var(--bg-secondary, rgba(255,255,255,0.04));
  border: 1.5px solid var(--border-color, rgba(255,255,255,0.1));
  font-size: 1rem;
  gap: 12px;
}

#view-mail .mail-inbox-search:focus-within,
#view-mail .mail-search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  background: var(--bg-secondary, rgba(255,255,255,0.06));
}

#view-mail .mail-inbox-search-input,
#view-mail .mail-search-input {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

/* Sections vides des onglets - plus d'espace */
#view-mail .mail-contacts-empty,
#view-mail .mail-empty {
  padding: 60px 40px;
  gap: 16px;
}

/* Toolbar des contacts / campagnes - breathing room */
#view-mail .mail-contacts-header,
#view-mail .mail-section-header {
  padding: 8px 0 20px 0;
  gap: 16px;
}


/* =============================================
   MAIL AI v1.0 - Styles Intelligence Artificielle
   Smart Reply | Priority Triage | Extract Tasks
   ============================================= */

/* Bouton IA principal (gradient violet-bleu) */
.btn-ai {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
  white-space: nowrap;
}

.btn-ai:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 50%, transparent);
  transform: translateY(-1px);
}

.btn-ai:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Bouton IA secondaire (subtil) */
.btn-ai-subtle {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-ai-subtle:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

.btn-ai-subtle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Spinner IA inline */
.mail-ai-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

/* Bouton triage IA dans la toolbar inbox */
.mail-ai-triage-btn {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent) 15%, transparent));
  border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
  color: var(--accent, var(--accent-light)) !important;
}

.mail-ai-triage-btn:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent) 25%, transparent)) !important;
}

/* Badge de priorité IA sur les lignes inbox */
.mail-ai-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid;
  margin-top: 4px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Footer modal avec boutons IA */
.mail-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.mail-modal-footer-ai {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mail-modal-footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Modal de confirmation des tâches IA */
.mail-ai-task-modal {
  max-width: 560px;
}

.mail-ai-modal-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.mail-ai-icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-top: 2px;
}

.mail-ai-modal-title h3 {
  margin: 0;
  font-size: 1.1rem;
}

.mail-ai-modal-subtitle {
  margin: 4px 0 0 0;
  font-size: 0.82rem;
  color: var(--text-secondary, #a0a0a0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 350px;
}

/* Liste des tâches extraites */
.mail-ai-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mail-ai-task-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-secondary, rgba(255,255,255,0.03));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 10px;
  transition: background 0.15s ease;
}

.mail-ai-task-item:hover {
  background: var(--bg-hover, rgba(255,255,255,0.06));
}

/* Checkbox stylée */
.mail-ai-task-check {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
}

.mail-ai-task-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.mail-ai-task-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mail-ai-task-title {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.1));
  color: var(--text-primary, #fff);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 2px 0;
  outline: none;
  transition: border-color 0.15s ease;
}

.mail-ai-task-title:focus {
  border-bottom-color: var(--accent);
}

.mail-ai-task-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mail-ai-task-priority {
  font-size: 0.78rem;
  color: var(--text-secondary, #a0a0a0);
}

.mail-ai-task-date {
  font-size: 0.78rem;
  color: var(--text-secondary, #a0a0a0);
}

/* Footer modal tâches */
.mail-ai-footer-note {
  font-size: 0.8rem;
  color: var(--text-secondary, #a0a0a0);
}

.mail-ai-footer-actions {
  display: flex;
  gap: 8px;
}

/* ============================================================
   SEARCH BAR UPGRADE — Plus d'espace, plus de respiration
   ============================================================ */

/* Override global : conteneur plus grand, texte libéré */
#view-mail .mail-inbox-search,
#view-mail .mail-search-bar {
  padding: 16px 22px !important;
  min-height: 56px;
  border-radius: 14px !important;
  background: var(--bg-secondary, rgba(255,255,255,0.04)) !important;
  border: 1.5px solid var(--border-color, rgba(255,255,255,0.1)) !important;
  gap: 14px !important;
}

#view-mail .mail-inbox-search:focus-within,
#view-mail .mail-search-bar:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent), 0 4px 16px rgba(0,0,0,0.08) !important;
  background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
}

#view-mail .mail-inbox-search-icon {
  width: 20px;
  height: 20px;
  opacity: 0.5;
  transition: opacity 0.2s, color 0.2s, transform 0.2s;
}

#view-mail .mail-inbox-search:focus-within .mail-inbox-search-icon {
  opacity: 1;
  color: var(--accent) !important;
  transform: scale(1.08);
}

#view-mail .mail-inbox-search-input,
#view-mail .mail-search-input {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0.015em !important;
  padding: 4px 0 !important;
}

#view-mail .mail-inbox-search-input::placeholder,
#view-mail .mail-search-input::placeholder {
  font-size: 0.95rem !important;
  opacity: 0.45;
}

/* ============================================================
   MAIL TEMPLATES v3.0 — Générateur IA Épuré
   Palette indigo/violet, glassmorphism discret
   ============================================================ */

.mt-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

/* ---- Header du module ---- */
.mt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}

.mt-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mt-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.mt-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
  letter-spacing: -0.01em;
}

.mt-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary, #888);
  margin-top: 1px;
}

/* ---- Onglets vue (Generator / Library) ---- */
.mt-tabs {
  display: flex;
  gap: 4px;
  padding: 16px 24px 0;
}

.mt-tab {
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary, #888);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mt-tab:hover {
  background: var(--bg-secondary, rgba(255,255,255,0.05));
  color: var(--text-primary, #fff);
}

.mt-tab.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent-light);
  font-weight: 600;
}

.mt-tab svg {
  flex-shrink: 0;
}

/* ---- Zone scrollable ---- */
.mt-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 20%, transparent) transparent;
}

.mt-body::-webkit-scrollbar {
  width: 4px;
}

.mt-body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 4px;
}

/* ---- Card d'input (générateur) ---- */
.mt-input-card {
  background: var(--bg-secondary, rgba(255,255,255,0.03));
  border: 1.5px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.mt-gen-overlay {
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.mt-gen-overlay.hidden {
  display: none;
}

.mt-gen-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--accent-light);
}

.mt-gen-spinner::before {
  content: '';
  width: 28px;
  height: 28px;
  border: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: mtSpin 0.7s linear infinite;
}

.mt-gen-spinner-text {
  font-size: 0.85rem;
  color: var(--accent-light);
  opacity: 0.8;
}

@keyframes mtSpin {
  to { transform: rotate(360deg); }
}

.mt-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary, #666);
  margin-bottom: 6px;
}

.mt-textarea {
  width: 100%;
  min-height: 72px;
  padding: 12px 14px;
  background: var(--bg-primary, rgba(0,0,0,0.2));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 10px;
  color: var(--text-primary, #fff);
  font-size: 0.9rem;
  line-height: 1.55;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
  box-sizing: border-box;
}

.mt-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}

.mt-textarea::placeholder {
  color: var(--text-secondary, #555);
  font-size: 0.87rem;
}

/* Tone selector */
.mt-tone-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mt-tone-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mt-tone-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  background: transparent;
  color: var(--text-secondary, #888);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.16s ease;
}

.mt-tone-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text-primary, #fff);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

.mt-tone-btn.active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent-light);
  font-weight: 600;
}

/* Generate button */
.mt-generate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 25%, transparent);
}

.mt-generate-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent);
  background: linear-gradient(135deg, #5457e5 0%, var(--accent) 100%);
}

.mt-generate-btn:active:not(:disabled) {
  transform: translateY(0);
}

.mt-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Result block ---- */
.mt-result {
  background: var(--bg-secondary, rgba(255,255,255,0.03));
  border: 1.5px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 14px;
  overflow: hidden;
  animation: mtResultSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes mtResultSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mt-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.mt-result-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--accent-light);
  font-weight: 500;
}

.mt-cat-badge {
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-light);
}

.mt-result-actions {
  display: flex;
  gap: 6px;
}

.mt-btn-sm {
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  background: transparent;
  color: var(--text-secondary, #888);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.mt-btn-sm:hover {
  background: var(--bg-secondary, rgba(255,255,255,0.06));
  color: var(--text-primary, #fff);
}

.mt-btn-use {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}

.mt-btn-use:hover {
  background: linear-gradient(135deg, #5457e5 0%, var(--accent) 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.mt-btn-save {
  color: var(--text-secondary, #888);
}

.mt-btn-save:hover {
  color: #fbbf24;
  border-color: rgba(251,191,36,0.3);
  background: rgba(251,191,36,0.06);
}

/* Champs éditables du résultat */
.mt-result-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mt-field-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.05));
}

.mt-field-row:last-child {
  border-bottom: none;
}

.mt-field-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-secondary, #666);
  margin-bottom: 6px;
}

.mt-field-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text-primary, #fff);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 2px 0;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.mt-field-input:focus {
  border-bottom-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.mt-field-textarea {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary, #fff);
  font-size: 0.87rem;
  line-height: 1.65;
  resize: vertical;
  outline: none;
  min-height: 120px;
  padding: 2px 0;
  font-family: inherit;
  box-sizing: border-box;
}

.mt-edit-hint {
  font-size: 0.75rem;
  color: var(--text-secondary, #666);
  margin-top: 8px;
  font-style: italic;
  opacity: 0.7;
}

/* ---- Quick Picks ---- */
.mt-quickpicks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mt-quickpicks-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary, #666);
}

.mt-quickpicks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.mt-quick-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--bg-secondary, rgba(255,255,255,0.03));
  border: 1px solid var(--border-color, rgba(255,255,255,0.07));
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.16s ease;
  text-align: left;
}

.mt-quick-item:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  transform: translateY(-1px);
}

.mt-quick-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mt-quick-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
}

.mt-quick-name {
  font-size: 0.82rem;
  color: var(--text-primary, #fff);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-quick-cat {
  font-size: 0.73rem;
  color: var(--text-secondary, #888);
  margin-top: 1px;
}

.mt-see-all-btn {
  grid-column: 1 / -1;
  padding: 8px 14px;
  background: transparent;
  border: 1px dashed var(--border-color, rgba(255,255,255,0.1));
  border-radius: 10px;
  color: var(--text-secondary, #888);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.mt-see-all-btn:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent-light);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ---- Library view ---- */
.mt-library {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.mt-lib-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
}

.mt-lib-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mt-lib-icon {
  font-size: 0.95rem;
}

.mt-lib-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
  flex: 1;
}

.mt-lib-count {
  font-size: 0.75rem;
  color: var(--text-secondary, #888);
  background: var(--bg-secondary, rgba(255,255,255,0.06));
  padding: 2px 8px;
  border-radius: 10px;
}

.mt-lib-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mt-lib-card {
  background: var(--bg-secondary, rgba(255,255,255,0.03));
  border: 1px solid var(--border-color, rgba(255,255,255,0.07));
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.18s ease;
  cursor: pointer;
}

.mt-lib-card:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateX(2px);
}

.mt-lib-card-body {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  gap: 12px;
}

.mt-lib-card-text {
  flex: 1;
  min-width: 0;
}

.mt-lib-card-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin-bottom: 3px;
}

.mt-lib-card-subject {
  font-size: 0.8rem;
  color: var(--text-secondary, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-lib-card-preview {
  font-size: 0.77rem;
  color: var(--text-secondary, #666);
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mt-lib-card-actions {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.mt-lib-card:hover .mt-lib-card-actions {
  opacity: 1;
}

/* Empty + Error states */
.mt-empty, .mt-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
  color: var(--text-secondary, #888);
  text-align: center;
}

.mt-empty-icon {
  font-size: 2.5rem;
  opacity: 0.4;
}

.mt-empty p, .mt-error p {
  font-size: 0.9rem;
}

/* Variables placeholders highlight */
.mt-var-pill {
  display: inline-block;
  padding: 1px 6px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 4px;
  font-size: 0.8em;
  color: var(--accent-light);
  font-family: monospace;
}

/* Light theme adjustments */
[data-theme*="light"] .mt-input-card,
[data-theme*="light"] .mt-lib-card,
[data-theme*="light"] .mt-result {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
}

[data-theme*="light"] .mt-generate-btn {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 20%, transparent);
}

[data-theme*="light"] .mt-textarea {
  background: rgba(0,0,0,0.04);
  color: #1a1a2e;
}

[data-theme*="light"] .mt-field-input,
[data-theme*="light"] .mt-field-textarea {
  color: #1a1a2e;
}

[data-theme*="light"] .mt-title {
  color: #1a1a2e;
}

[data-theme*="light"] .mt-subtitle,
[data-theme*="light"] .mt-label,
[data-theme*="light"] .mt-quickpicks-label {
  color: #555;
}

[data-theme*="light"] .mt-tone-btn {
  color: #555;
  border-color: rgba(0,0,0,0.12);
}

[data-theme*="light"] .mt-tone-btn.active {
  color: var(--accent);
}

[data-theme*="light"] .mt-tab {
  color: #666;
}

[data-theme*="light"] .mt-tab.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}

[data-theme*="light"] .mt-quick-name {
  color: #1a1a2e;
}

[data-theme*="light"] .mt-lib-card-title {
  color: #1a1a2e;
}

[data-theme*="light"] .mt-result-fields,
[data-theme*="light"] .mt-result-header {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

/* Generating state animation */
@keyframes mtGeneratingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.mt-generate-btn.generating {
  animation: mtGeneratingPulse 1.4s ease-in-out infinite;
  pointer-events: none;
}



/* ===== css/giri-mail.css?v=2602240010 ===== */
/* =============================================
   GIRI MAIL — Ultra Premium Full-Screen UI
   Design Superhuman × Linear × Arc Browser
   ============================================= */

/* ===== FULL-SCREEN OVERRIDE ===== */
/* Force la vue mail à prendre TOUT l'espace disponible */
#view-mail {
  display: none;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

#view-mail.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary, #0f0f19);
  overflow-y: auto;
  padding: 24px 28px;
  gap: 20px;
}

/* ===== ROOT LAYOUT ===== */
.gm-layout {
  display: grid;
  grid-template-columns: 240px 340px 1fr;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #07071010;
  color: #e2e8f0;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  font-size: 14px;
  position: relative;
}

/* Ambient glow background */
.gm-layout::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(212,175,55,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ===== SIDEBAR ===== */
.gm-sidebar {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--bg-secondary, #0a0a14) 0%, var(--bg-primary, #080810) 100%);
  border-right: 1px solid rgba(255,255,255,0.05);
  padding: 20px 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}

.gm-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 10px;
}

.gm-brand-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #d4af37, #f4d03f);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #000;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(212,175,55,0.3);
}

.gm-brand-name {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.75) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Compose Button */
.gm-compose-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 14px 14px;
  padding: 11px 16px;
  background: linear-gradient(135deg, #d4af37, #f0c84a);
  color: #000;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 20px rgba(212,175,55,0.3), 0 1px 0 rgba(255,255,255,0.15) inset;
  letter-spacing: 0.2px;
  position: relative;
  overflow: hidden;
}

.gm-compose-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  border-radius: inherit;
  pointer-events: none;
}

.gm-compose-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px rgba(212,175,55,0.45);
}

.gm-compose-btn:active {
  transform: translateY(0) scale(0.99);
}

.gm-compose-btn svg { flex-shrink: 0; }

/* Nav */
.gm-nav {
  flex: 1;
  padding: 0 10px;
}

.gm-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 10px;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: all 0.14s ease;
  user-select: none;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
  position: relative;
}

.gm-nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  transform: translateX(2px);
}

.gm-nav-item.active {
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(212,175,55,0.08));
  color: #d4af37;
  font-weight: 600;
  border: 1px solid rgba(212,175,55,0.15);
}

.gm-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: #d4af37;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(212,175,55,0.6);
}

.gm-nav-item.active svg { stroke: #d4af37; }

.gm-nav-item span:first-of-type { flex: 1; }

/* Badges */
.gm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
  background: var(--accent, #6366f1);
  color: #fff;
  animation: gm-badge-pulse 2s ease-in-out infinite;
  letter-spacing: 0;
}

.gm-badge-gold { background: linear-gradient(135deg, #d4af37, #f0c84a); color: #000; animation: none; }
.gm-badge-amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #000; animation: none; }

@keyframes gm-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #6366f1) 50%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #6366f1) 0%, transparent); }
}

/* Sidebar Footer */
.gm-sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: auto;
}

.gm-kbd-hints {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.gm-kbd-hints div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.22);
}

/* ===== KBD ===== */
kbd, .gm-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  font-size: 10px;
  font-family: inherit;
  color: rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.05);
  line-height: 1.5;
  letter-spacing: 0.5px;
}

/* ===== EMAIL LIST PANEL ===== */
.gm-list-panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
  background: #0c0c18;
  position: relative;
  z-index: 1;
}

.gm-list-header {
  padding: 16px 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
  background: rgba(255,255,255,0.01);
}

.gm-search-wrap {
  position: relative;
  margin-bottom: 12px;
}

.gm-search-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  stroke: rgba(255,255,255,0.25);
  pointer-events: none;
}

.gm-search {
  width: 100%;
  padding: 10px 12px 10px 38px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 13px;
  outline: none;
  transition: all 0.18s ease;
  box-sizing: border-box;
}

.gm-search::placeholder { color: rgba(255,255,255,0.25); }

.gm-search:focus {
  border-color: rgba(212,175,55,0.35);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.08);
}

.gm-list-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.28);
  padding-bottom: 12px;
}

.gm-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.gm-list::-webkit-scrollbar { width: 3px; }
.gm-list::-webkit-scrollbar-track { background: transparent; }
.gm-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* ===== EMAIL ITEMS ===== */
.gm-email-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all 0.12s ease;
  position: relative;
}

.gm-email-item:hover {
  background: rgba(255,255,255,0.035);
}

.gm-email-item.gm-selected {
  background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.05));
  border-left: 2px solid #d4af37;
}

.gm-email-item.gm-unread .gm-item-from {
  font-weight: 700;
  color: #fff;
}

.gm-email-item.gm-unread .gm-item-subject {
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}

/* Avatar */
.gm-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.gm-avatar-lg {
  width: 46px;
  height: 46px;
  font-size: 19px;
  border-radius: 13px;
}

.gm-item-avatar { flex-shrink: 0; padding-top: 1px; }
.gm-item-content { flex: 1; min-width: 0; }

.gm-item-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.gm-item-from {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.gm-item-date {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
}

.gm-item-subject {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.gm-item-preview {
  font-size: 12px;
  color: rgba(255,255,255,0.27);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.gm-item-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 2px;
  opacity: 0;
  transition: opacity 0.12s;
  flex-shrink: 0;
}

.gm-email-item:hover .gm-item-actions { opacity: 1; }

.gm-item-star {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  color: rgba(255,255,255,0.25);
  transition: color 0.12s, transform 0.15s;
  display: flex;
  align-items: center;
}

.gm-item-star:hover { color: #d4af37; transform: scale(1.2); }
.gm-item-star.gm-starred { color: #d4af37; opacity: 1 !important; }

.gm-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #6366f1);
  margin-top: 2px;
  box-shadow: 0 0 6px var(--accent, #6366f1);
}

/* ===== READER ===== */
.gm-reader {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #07071010;
  height: 100%;
  min-height: 0;
  flex: 1;
  position: relative;
  z-index: 1;
}

/* Subtle ambient light on reader */
.gm-reader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.15), transparent);
  pointer-events: none;
}

.gm-reader-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex: 1;
  gap: 12px;
  color: rgba(255,255,255,0.2);
  text-align: center;
  padding-bottom: 60px;
}

.gm-reader-empty-icon {
  font-size: 64px;
  opacity: 0.12;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 30px rgba(212,175,55,0.2));
  animation: gm-float 4s ease-in-out infinite;
}

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

.gm-reader-empty p {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.22);
  margin: 0;
  letter-spacing: 0.2px;
}

.gm-reader-empty span {
  font-size: 12px;
  color: rgba(255,255,255,0.13);
  display: flex;
  align-items: center;
  gap: 6px;
}

.gm-reader-empty kbd {
  display: inline-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: 5px;
  padding: 1px 7px;
  font-size: 11px;
  font-family: inherit;
  color: rgba(255,255,255,0.3);
  line-height: 1.6;
}

.gm-reader-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Reader Toolbar */
.gm-reader-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
  gap: 8px;
  background: rgba(255,255,255,0.01);
  backdrop-filter: blur(10px);
}

.gm-reader-toolbar-left {
  display: flex;
  gap: 6px;
}

.gm-tool-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.14s ease;
  font-weight: 500;
}

.gm-tool-btn:hover {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}

.gm-tool-danger:hover {
  background: rgba(239,68,68,0.1);
  color: #f87171;
  border-color: rgba(239,68,68,0.2);
}

.gm-reply-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(212,175,55,0.08));
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 9px;
  color: #d4af37;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.2px;
}

.gm-reply-btn:hover {
  background: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(212,175,55,0.15));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212,175,55,0.2);
}

/* Reader Content */
.gm-reader-subject {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  padding: 28px 32px 18px;
  line-height: 1.3;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

.gm-reader-meta {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 0 32px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}

.gm-reader-meta-info { flex: 1; }

.gm-reader-from {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.gm-reader-addr {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  font-weight: 400;
}

.gm-reader-to {
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  margin-bottom: 3px;
}

.gm-reader-date {
  font-size: 12px;
  color: rgba(255,255,255,0.28);
}

.gm-reader-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  color: rgba(255,255,255,0.75);
  line-height: 1.8;
  font-size: 15px;
}

.gm-reader-body::-webkit-scrollbar { width: 4px; }
.gm-reader-body::-webkit-scrollbar-track { background: transparent; }
.gm-reader-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.gm-reader-body a { color: #d4af37; text-decoration: none; border-bottom: 1px solid rgba(212,175,55,0.3); }
.gm-reader-body a:hover { border-bottom-color: #d4af37; }
.gm-reader-body img { max-width: 100%; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.gm-reader-body pre {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 18px;
  overflow-x: auto;
  font-size: 13px;
  color: rgba(255,255,255,0.68);
  line-height: 1.6;
}

/* Reply Box */
.gm-reader-reply-box {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 18px 32px 22px;
  flex-shrink: 0;
}

.gm-reply-inner {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.gm-reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 15px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.02);
}

.gm-reply-editor {
  min-height: 110px;
  max-height: 220px;
  overflow-y: auto;
  padding: 15px;
  font-size: 14px;
  color: rgba(255,255,255,0.82);
  outline: none;
  line-height: 1.7;
}

.gm-reply-editor:empty:before {
  content: attr(placeholder);
  color: rgba(255,255,255,0.18);
  pointer-events: none;
}

.gm-reply-footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ===== COMPOSER MODAL ===== */
.gm-composer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 2000;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 24px;
  backdrop-filter: blur(8px);
}

.gm-composer-backdrop.open {
  display: flex;
}

.gm-composer {
  background: linear-gradient(160deg, #14142a, #0f0f1e);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  width: 580px;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 32px 100px rgba(0,0,0,0.7),
    0 0 0 1px rgba(212,175,55,0.12),
    0 1px 0 rgba(255,255,255,0.05) inset;
  animation: gm-composer-slide 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

@keyframes gm-composer-slide {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.gm-composer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}

.gm-composer-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
}

.gm-composer-actions { display: flex; gap: 6px; }

.gm-icon-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  transition: all 0.12s;
  font-size: 12px;
}

.gm-icon-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.gm-composer-fields {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.gm-composer-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.gm-composer-field:last-child { border-bottom: none; }

.gm-composer-field label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  width: 38px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.gm-field-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  color: rgba(255,255,255,0.88);
  font-family: inherit;
}

.gm-field-input::placeholder { color: rgba(255,255,255,0.22); }

.gm-composer-body {
  flex: 1;
  overflow: hidden;
  min-height: 170px;
}

.gm-body-editor {
  width: 100%;
  height: 100%;
  min-height: 170px;
  padding: 16px 20px;
  box-sizing: border-box;
  background: none;
  outline: none;
  font-size: 14px;
  color: rgba(255,255,255,0.82);
  line-height: 1.7;
  font-family: inherit;
  overflow-y: auto;
}

.gm-body-editor:empty:before {
  content: attr(placeholder);
  color: rgba(255,255,255,0.18);
  pointer-events: none;
}

.gm-composer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  gap: 8px;
}

.gm-composer-format { display: flex; gap: 4px; }

.gm-fmt-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 7px;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  transition: all 0.12s;
}

.gm-fmt-btn:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.92);
}

.gm-composer-send-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gm-send-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.18);
}

.gm-send-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #d4af37, #f0c84a);
  color: #000;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(212,175,55,0.35);
  letter-spacing: 0.3px;
}

.gm-send-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(212,175,55,0.5);
}

.gm-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ===== STATES ===== */
.gm-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
}

.gm-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255,255,255,0.06);
  border-top-color: #d4af37;
  border-radius: 50%;
  animation: gm-spin 0.65s linear infinite;
  box-shadow: 0 0 12px rgba(212,175,55,0.2);
}

.gm-spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: gm-spin 0.65s linear infinite;
  vertical-align: middle;
}

@keyframes gm-spin { to { transform: rotate(360deg); } }

.gm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 28px;
  gap: 14px;
  color: rgba(255,255,255,0.2);
  font-size: 13px;
}

/* ===== TOAST ===== */
.gm-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  z-index: 9999;
  opacity: 0;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.gm-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.gm-toast-success {
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  color: #34d399;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(52,211,153,0.1);
}

.gm-toast-error {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  color: #f87171;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(248,113,113,0.1);
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 900px) {
  .gm-layout {
    grid-template-columns: 62px 1fr;
  }

  .gm-sidebar {
    align-items: center;
    padding: 12px 0;
  }

  .gm-brand-name,
  .gm-nav-item span,
  .gm-compose-btn span:not(.gm-badge),
  .gm-compose-btn kbd,
  .gm-sidebar-footer { display: none; }

  .gm-compose-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    margin: 4px 7px 12px;
    border-radius: 12px;
  }

  .gm-nav-item {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
    margin: 0 7px 3px;
  }

  .gm-nav-item.active::before { display: none; }

  .gm-reader { display: none; }
}

@media (max-width: 600px) {
  .gm-layout { grid-template-columns: 1fr; }
  .gm-sidebar { display: none; }

  .gm-composer {
    width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 85vh;
  }

  .gm-composer-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  .gm-reader-subject { font-size: 18px; padding: 18px 18px 14px; }
  .gm-reader-meta { padding: 0 18px 14px; }
  .gm-reader-body { padding: 18px; }
}

/* ===== OVERRIDE MAIL PRO OLD STYLES ===== */
#view-mail .mail-header,
#view-mail .mail-3col-layout,
#view-mail .mail-hero {
  display: none !important;
}
#view-mail:has(.gm-layout) .mail-header,
#view-mail:has(.gm-layout) .mail-3col-layout,
#view-mail:has(.gm-layout) .mail-hero {
  display: none !important;
}


/* ===== css/mail-premium.css?v=2602240010 ===== */
/* =============================================
   MAIL PRO — PREMIUM REDESIGN (12/10)
   Theme-aware · Animated · Glassmorphism
   ============================================= */

/* ── Entry Animations ── */
@keyframes mailSlideLeft {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes mailSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mailFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mailEmptyPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1);   opacity: 0.4; }
  50%       { transform: translate(-50%,-50%) scale(1.2); opacity: 0.7; }
}
@keyframes mailItemIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes mailGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%       { box-shadow: 0 0 0 5px transparent; }
}
@keyframes mailShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── Theme-Aware Layout ── */
.gm-layout {
  background: var(--bg-primary) !important;
  color: var(--text) !important;
}

/* ── Sidebar ── */
.gm-sidebar {
  background: var(--bg-secondary) !important;
  border-right: 1px solid var(--border) !important;
  animation: mailSlideLeft 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  position: relative;
}

/* Shimmer top accent line */
.gm-sidebar::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--accent),
    var(--accent-light, #f0d975),
    var(--accent),
    transparent
  );
  margin-bottom: 14px;
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── Brand ── */
.gm-brand {
  border-bottom: 1px solid var(--border) !important;
}
.gm-brand-icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-light, #f0d975)) !important;
  box-shadow: 0 3px 12px var(--accent-glow) !important;
}
.gm-brand-name {
  color: var(--text) !important;
  font-weight: 700 !important;
}

/* ── Compose Button ── */
.gm-compose-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-light, #f0d975)) !important;
  box-shadow: 0 4px 18px var(--accent-glow) !important;
  color: #000 !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  position: relative;
  overflow: hidden;
}
.gm-compose-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.25) 50%,
    transparent 100%
  );
  background-size: 200% auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gm-compose-btn:hover::after {
  opacity: 1;
  animation: mailShimmer 1s linear;
}
.gm-compose-btn:hover {
  filter: brightness(1.12) !important;
  box-shadow: 0 6px 28px var(--accent-glow) !important;
  transform: translateY(-1px) !important;
}

/* ── Nav Items ── */
.gm-nav-item {
  color: var(--text-muted) !important;
  transition: all 0.15s ease !important;
  border-left: 3px solid transparent;
}
.gm-nav-item:hover {
  background: var(--bg-tertiary) !important;
  color: var(--text) !important;
  transform: translateX(3px) !important;
}
.gm-nav-item.active {
  background: rgba(0,0,0,0) !important;
  background: var(--accent-glow) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 8px 8px 0 !important;
  padding-left: 10px !important;
}
.gm-nav-item.active svg { stroke: var(--accent) !important; }

/* ── Badges ── */
.gm-badge {
  background: var(--accent) !important;
  color: #000 !important;
  box-shadow: 0 2px 8px var(--accent-glow) !important;
  animation: mailGlow 2.5s ease-in-out infinite !important;
}
.gm-badge-gold, .gm-badge-amber {
  background: var(--accent) !important;
  color: #000 !important;
  animation: none !important;
}

/* ── KBD hints ── */
.gm-kbd-hints div { color: var(--text-muted) !important; opacity: 0.4; }
kbd, .gm-kbd {
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
  background: var(--bg-tertiary) !important;
}
.gm-sidebar-footer { border-top: 1px solid var(--border) !important; }

/* ── List Panel ── */
.gm-list-panel {
  background: var(--bg-secondary) !important;
  border-right: 1px solid var(--border) !important;
  animation: mailSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;
}
.gm-list-header { border-bottom: 1px solid var(--border) !important; }
.gm-list-title { color: var(--text-muted) !important; }

/* ── Search ── */
.gm-search {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  transition: all 0.2s ease !important;
}
.gm-search:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  background: var(--bg-primary) !important;
}
.gm-search::placeholder { color: var(--text-muted) !important; }
.gm-search-ico { stroke: var(--text-muted) !important; }

/* ── Email Items ── */
.gm-email-item {
  border-bottom: 1px solid var(--border) !important;
  transition: all 0.18s ease !important;
  position: relative !important;
  animation: mailItemIn 0.3s ease both;
}
.gm-email-item:nth-child(1) { animation-delay: 0.05s; }
.gm-email-item:nth-child(2) { animation-delay: 0.10s; }
.gm-email-item:nth-child(3) { animation-delay: 0.15s; }
.gm-email-item:nth-child(4) { animation-delay: 0.20s; }
.gm-email-item:nth-child(n+5) { animation-delay: 0.22s; }

/* Left accent bar on hover */
.gm-email-item::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transform: scaleY(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gm-email-item:hover::before { transform: scaleY(1); }

.gm-email-item:hover {
  background: var(--bg-tertiary) !important;
  transform: translateX(3px) !important;
}
.gm-email-item.gm-selected {
  background: var(--accent-glow) !important;
  border-left: 3px solid var(--accent) !important;
}
.gm-email-item.gm-selected::before { display: none; }

.gm-item-from     { color: var(--text) !important; }
.gm-item-date     { color: var(--text-muted) !important; }
.gm-item-subject  { color: var(--text-muted) !important; }
.gm-item-preview  { color: var(--text-muted) !important; opacity: 0.55; }

.gm-email-item.gm-unread .gm-item-from    { color: var(--text) !important; font-weight: 700 !important; }
.gm-email-item.gm-unread .gm-item-subject { color: var(--text) !important; font-weight: 600 !important; }

.gm-unread-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 6px var(--accent-glow);
  animation: mailGlow 2.5s ease-in-out infinite !important;
}
.gm-item-star:hover { color: var(--accent) !important; }
.gm-item-star.gm-starred { color: var(--accent) !important; }

/* ── Reader Panel ── */
.gm-reader {
  background: var(--bg-primary) !important;
  animation: mailFadeIn 0.5s ease 0.1s both;
}

/* Beautiful Empty State */
.gm-reader-empty {
  position: relative;
  overflow: hidden;
  color: var(--text-muted) !important;
}
.gm-reader-empty::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 380px; height: 380px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    var(--accent-glow) 0%,
    transparent 65%
  );
  animation: mailEmptyPulse 5s ease-in-out infinite;
  pointer-events: none;
}
.gm-reader-empty-icon {
  font-size: 56px !important;
  color: var(--accent) !important;
  opacity: 0.25 !important;
  filter: drop-shadow(0 0 16px var(--accent));
}
.gm-reader-empty p   { color: var(--text-muted) !important; font-size: 16px !important; font-weight: 500 !important; }
.gm-reader-empty span { color: var(--text-muted) !important; opacity: 0.5; }

/* ── Reader Toolbar ── */
.gm-reader-toolbar {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border) !important;
}
.gm-tool-btn {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  transition: all 0.15s ease !important;
}
.gm-tool-btn:hover {
  color: var(--text) !important;
  border-color: var(--accent) !important;
  background: var(--accent-glow) !important;
}
.gm-tool-danger:hover {
  background: rgba(239,68,68,0.1) !important;
  color: #f87171 !important;
  border-color: rgba(239,68,68,0.3) !important;
}
.gm-reply-btn {
  background: var(--accent-glow) !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
}
.gm-reply-btn:hover {
  background: var(--accent) !important;
  color: #000 !important;
  font-weight: 700 !important;
}

/* ── Reader Content ── */
.gm-reader-subject {
  color: var(--text) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  padding: 24px 28px 16px !important;
  line-height: 1.3 !important;
}
.gm-reader-meta {
  border-bottom: 1px solid var(--border) !important;
  background: none !important;
}
.gm-reader-from  { color: var(--text) !important; }
.gm-reader-addr  { color: var(--text-muted) !important; }
.gm-reader-to    { color: var(--text-muted) !important; }
.gm-reader-date  { color: var(--text-muted) !important; }
.gm-reader-body  {
  color: var(--text) !important;
  opacity: 0.85;
}
.gm-reader-body a { color: var(--accent) !important; }

/* ── Reply Box ── */
.gm-reader-reply-box { border-top: 1px solid var(--border) !important; }
.gm-reply-inner {
  border: 1px solid var(--border) !important;
  background: var(--bg-secondary) !important;
}
.gm-reply-header {
  background: var(--bg-tertiary) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}
.gm-reply-editor { color: var(--text) !important; }
.gm-reply-footer { border-top: 1px solid var(--border) !important; }

/* ── Composer ── */
.gm-composer-backdrop { backdrop-filter: blur(10px) !important; }
.gm-composer {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.5),
    0 0 0 1px var(--accent-glow) !important;
}
.gm-composer-header {
  background: var(--bg-tertiary) !important;
  border-bottom: 1px solid var(--border) !important;
}
.gm-composer-title { color: var(--text-muted) !important; }
.gm-icon-btn {
  background: var(--bg-secondary) !important;
  color: var(--text-muted) !important;
}
.gm-icon-btn:hover {
  background: var(--bg-primary) !important;
  color: var(--text) !important;
}
.gm-composer-field { border-bottom: 1px solid var(--border) !important; }
.gm-composer-field label { color: var(--text-muted) !important; }
.gm-field-input {
  color: var(--text) !important;
  background: transparent !important;
}
.gm-field-input::placeholder { color: var(--text-muted) !important; opacity: 0.5; }
.gm-body-editor { color: var(--text) !important; }
.gm-body-editor:empty:before { color: var(--text-muted) !important; opacity: 0.4; }
.gm-composer-toolbar { border-top: 1px solid var(--border) !important; }
.gm-fmt-btn {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}
.gm-fmt-btn:hover {
  background: var(--accent-glow) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.gm-send-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-light, #f0d975)) !important;
  color: #000 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px var(--accent-glow) !important;
}
.gm-send-btn:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 6px 22px var(--accent-glow) !important;
  transform: translateY(-1px) !important;
}
.gm-send-hint { color: var(--text-muted) !important; }

/* ── Spinner ── */
.gm-spinner { border-top-color: var(--accent) !important; }

/* ── Toast ── */
.gm-toast-success {
  background: rgba(16,185,129,0.1) !important;
  border: 1px solid rgba(16,185,129,0.3) !important;
  backdrop-filter: blur(8px);
}
.gm-toast-error {
  background: rgba(239,68,68,0.1) !important;
  border: 1px solid rgba(239,68,68,0.3) !important;
  backdrop-filter: blur(8px);
}

/* ── Premium: Reading pane gradient subject ── */
.gm-reader-inner .gm-reader-subject {
  background: linear-gradient(
    135deg,
    var(--text) 0%,
    var(--accent-light, #f0d975) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: none;
}

/* ── Premium: Avatar ── */
.gm-avatar {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* ── Responsive: < 900px ── */
@media (max-width: 900px) {
  .gm-layout {
    grid-template-columns: 60px 1fr !important;
  }
  .gm-reader { display: none !important; }
  .gm-sidebar::before { display: none; }
}

@media (max-width: 600px) {
  .gm-layout { grid-template-columns: 1fr !important; }
  .gm-sidebar { display: none !important; }
}


/* ===== css/prompt-forge.css?v=2602282300 ===== */
/* Rebuilt Sat Feb 28 23:45:44 UTC 2026 */
/**
 * PROMPT FORGE CSS v5.0 — Dark Gold Luxe
 * Design premium pour débutants IA — ultra lisible, motivant, professionnel
 */

/* ─── VARIABLES ────────────────────────────────────────── */
:root {
    --pf-gold:        #f59e0b;
    --pf-gold-l:      #fbbf24;
    --pf-gold-ll:     #fcd34d;
    --pf-gold-10:     rgba(245,158,11,.10);
    --pf-gold-20:     rgba(245,158,11,.20);
    --pf-gold-30:     rgba(245,158,11,.30);
    --pf-gold-glow:   rgba(245,158,11,.45);
    --pf-bg:          #0a0806;
    --pf-surface:     rgba(255,255,255,.042);
    --pf-surface-hov: rgba(255,255,255,.072);
    --pf-border:      rgba(245,158,11,.13);
    --pf-border-sub:  rgba(255,255,255,.07);
    --pf-text:        #f2ead8;
    --pf-text-muted:  rgba(242,234,216,.52);
    --pf-text-dim:    rgba(242,234,216,.32);
    --pf-r:           14px;
    --pf-r-sm:        8px;
    --pf-r-lg:        20px;
}

/* ─── VIEW CONTAINER ───────────────────────────────────── */
#view-prompt-forge {
    display: none;
    padding: 0;
    overflow: hidden;
    background: var(--pf-bg);
}
#view-prompt-forge.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
}

/* ─── ROOT ─────────────────────────────────────────────── */
.pf-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(245,158,11,.07), transparent),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(124,58,237,.04), transparent),
        var(--pf-bg);
    overflow: hidden;
}

.pf-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 28px 36px 40px;
    scrollbar-width: thin;
    scrollbar-color: rgba(245,158,11,.18) transparent;
}
.pf-body::-webkit-scrollbar { width: 4px; }
.pf-body::-webkit-scrollbar-thumb { background: rgba(245,158,11,.18); border-radius: 4px; }

/* ─── HERO ─────────────────────────────────────────────── */
.pf-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 32px 0;
    text-align: center;
    flex-shrink: 0;
}

/* Ligne orbe + texte côte à côte */
.pf-hero-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Orb compact */
.pf-hero-orb {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pf-orb-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid transparent;
}
.pf-orb-ring-1 {
    inset: 4px;
    border-color: rgba(245,158,11,.4);
    animation: pfOrbSpin 6s linear infinite;
}
.pf-orb-ring-2 {
    inset: -2px;
    border-color: rgba(245,158,11,.15);
    animation: pfOrbSpin 10s linear infinite reverse;
}
.pf-orb-ring-3 { display: none; }
@keyframes pfOrbSpin { to { transform: rotate(360deg); } }

.pf-orb-core {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(245,158,11,.25), rgba(245,158,11,.08));
    border: 1px solid rgba(245,158,11,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 22px rgba(245,158,11,.25), inset 0 1px 0 rgba(255,255,255,.08);
    animation: pfOrbPulse 3s ease-in-out infinite;
}
@keyframes pfOrbPulse {
    0%,100% { box-shadow: 0 0 22px rgba(245,158,11,.2), inset 0 1px 0 rgba(255,255,255,.08); }
    50%      { box-shadow: 0 0 38px rgba(245,158,11,.38), inset 0 1px 0 rgba(255,255,255,.08); }
}

.pf-orb-particles { display: none; }

/* Hero text — aligné à gauche quand côte à côte */
.pf-hero-text { text-align: left; }
.pf-hero-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.4px;
    margin: 0 0 2px;
    background: linear-gradient(135deg, var(--pf-gold-ll) 0%, var(--pf-gold) 50%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}
.pf-hero-sub {
    font-size: 12.5px;
    color: var(--pf-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* ─── FLOW HORIZONTAL — les 3 étapes ── */
.pf-hero-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 40px;
    flex-wrap: nowrap;
}
.pf-hf-step {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.pf-hf-icon { font-size: 14px; line-height: 1; }
.pf-hf-label {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--pf-text-muted);
}
.pf-hf-arrow {
    color: rgba(245,158,11,.4);
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

/* Badges — masqués, remplacés par le flow */
.pf-hero-badges { display: none; }
.pf-hbadge, .pf-hbadge-gold { display: none; }

/* ─── TABS ─────────────────────────────────────────────── */
.pf-tabs {
    display: flex;
    gap: 2px;
    padding: 14px 36px 0;
    flex-shrink: 0;
    border-bottom: 1px solid var(--pf-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.pf-tabs::-webkit-scrollbar { display: none; }

.pf-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pf-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--pf-r-sm) var(--pf-r-sm) 0 0;
    cursor: pointer;
    transition: color .18s, background .18s;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
}
.pf-tab svg { opacity: .6; flex-shrink: 0; transition: opacity .18s; }
.pf-tab:hover { color: var(--pf-text); background: rgba(255,255,255,.04); }
.pf-tab:hover svg { opacity: 1; }
.pf-tab.active {
    color: var(--pf-gold);
    font-weight: 700;
    background: var(--pf-gold-10);
}
.pf-tab.active svg { opacity: 1; color: var(--pf-gold); }
.pf-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pf-gold), transparent);
    border-radius: 1px;
}
.pf-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--pf-gold);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    border-radius: 9px;
    margin-left: 2px;
}

/* ─── FORGE VIEW ───────────────────────────────────────── */
.pf-forge-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

/* Step card */
.pf-step-card {
    display: flex;
    gap: 16px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-r);
    padding: 22px;
    transition: border-color .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
}
.pf-step-card:focus-within {
    border-color: rgba(245,158,11,.4);
    box-shadow: 0 0 0 3px rgba(245,158,11,.06), 0 4px 24px rgba(0,0,0,.3);
}

.pf-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pf-gold-20);
    border: 1px solid var(--pf-gold-30);
    color: var(--pf-gold);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.pf-step-body { flex: 1; min-width: 0; }

.pf-step-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.pf-step-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pf-text);
}
.pf-step-hint {
    font-size: 11.5px;
    color: var(--pf-text-dim);
}

/* Goal textarea */
.pf-goal-textarea {
    width: 100%;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--pf-r-sm);
    color: var(--pf-text);
    font-size: 14.5px;
    line-height: 1.65;
    padding: 14px 16px;
    resize: vertical;
    min-height: 110px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color .2s;
}
.pf-goal-textarea::placeholder { color: rgba(242,234,216,.22); font-style: italic; }
.pf-goal-textarea:focus { outline: none; border-color: rgba(245,158,11,.3); }

.pf-goal-footer {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pf-goal-tip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--pf-text-dim);
}
.pf-goal-tip svg { flex-shrink: 0; opacity: .6; }

/* Forging overlay */
.pf-forging-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,8,6,.92);
    border-radius: var(--pf-r);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 10;
    backdrop-filter: blur(8px);
}
.pf-forging-icon {
    animation: pfForgePulse .9s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 18px var(--pf-gold));
}
@keyframes pfForgePulse {
    0%   { transform: scale(1) rotate(-4deg); }
    100% { transform: scale(1.14) rotate(4deg); }
}
.pf-forging-label {
    font-size: 13px;
    color: var(--pf-gold);
    font-weight: 600;
    letter-spacing: .4px;
}
.pf-forging-dots { display: flex; gap: 5px; }
.pf-forging-dots span {
    width: 7px; height: 7px;
    background: var(--pf-gold);
    border-radius: 50%;
    animation: pfDot .6s ease-in-out infinite alternate;
}
.pf-forging-dots span:nth-child(2) { animation-delay: .14s; }
.pf-forging-dots span:nth-child(3) { animation-delay: .28s; }
@keyframes pfDot { 0% { transform:translateY(0); opacity:.35; } 100% { transform:translateY(-8px); opacity:1; } }

/* FORGE CTA button */
.pf-forge-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 17px 28px;
    background: linear-gradient(135deg, #b45309, var(--pf-gold), var(--pf-gold-l), #fbbf24);
    background-size: 200% 200%;
    color: #0a0806;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
    border: none;
    border-radius: var(--pf-r);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 6px 28px rgba(245,158,11,.4), inset 0 1px 0 rgba(255,255,255,.15);
    position: relative;
    overflow: hidden;
    animation: pfCtaShift 4s ease-in-out infinite;
}
@keyframes pfCtaShift {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.pf-forge-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,.15) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform .65s;
}
.pf-forge-cta:hover::after { transform: translateX(120%); }
.pf-forge-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 36px rgba(245,158,11,.55);
}
.pf-forge-cta:active { transform: translateY(0); }
.pf-forge-cta:disabled { opacity: .65; cursor: not-allowed; transform: none; animation: none; }

.pf-cta-icon { flex-shrink: 0; opacity: .9; }
.pf-cta-spinner {
    width: 17px; height: 17px;
    border: 2px solid rgba(0,0,0,.3);
    border-top-color: #000;
    border-radius: 50%;
    animation: pfSpin .7s linear infinite;
}
@keyframes pfSpin { to { transform: rotate(360deg); } }

/* Error */
.pf-error-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(239,68,68,.09);
    border: 1px solid rgba(239,68,68,.22);
    border-radius: var(--pf-r-sm);
    color: #fca5a5;
    font-size: 13px;
}

/* Loading */
.pf-loading-msg {
    text-align: center;
    padding: 60px;
    color: var(--pf-text-muted);
    font-size: 14px;
}

/* ─── INTRO STEPS (avant génération) ──────────────────── */
.pf-intro-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    background: var(--pf-surface);
    border: 1px solid var(--pf-border-sub);
    border-radius: var(--pf-r);
    overflow: hidden;
}
.pf-intro-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px 16px;
}
.pf-intro-arrow {
    font-size: 20px;
    color: var(--pf-text-dim);
    display: flex;
    align-items: center;
    padding: 24px 0;
    flex-shrink: 0;
}
.pf-is-icon {
    font-size: 28px;
    line-height: 1;
}
.pf-is-text strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--pf-text);
    margin-bottom: 4px;
}
.pf-is-text span {
    display: block;
    font-size: 11.5px;
    color: var(--pf-text-muted);
    line-height: 1.5;
}

/* ─── RESULT CARD ──────────────────────────────────────── */
.pf-result-card {
    background: var(--pf-surface);
    border: 1px solid rgba(245,158,11,.22);
    border-radius: var(--pf-r);
    overflow: hidden;
    animation: pfResultIn .3s ease-out;
    box-shadow: 0 0 60px rgba(245,158,11,.05);
}
@keyframes pfResultIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

.pf-result-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: rgba(245,158,11,.05);
    border-bottom: 1px solid var(--pf-border);
    flex-wrap: wrap;
}
.pf-result-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pf-text);
}
.pf-cat-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: color-mix(in srgb, var(--cc, #f59e0b) 14%, transparent);
    color: var(--cc, var(--pf-gold));
    border: 1px solid color-mix(in srgb, var(--cc, #f59e0b) 28%, transparent);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
}

/* Result actions */
.pf-result-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}
.pf-rab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--pf-r-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    transition: all .17s;
    white-space: nowrap;
}
.pf-rab-copy {
    background: rgba(255,255,255,.06);
    color: var(--pf-text-muted);
    border-color: rgba(255,255,255,.1);
}
.pf-rab-copy:hover { background: rgba(255,255,255,.12); color: var(--pf-text); transform: translateY(-1px); }
.pf-rab-save {
    background: rgba(16,185,129,.1);
    color: #6ee7b7;
    border-color: rgba(16,185,129,.22);
}
.pf-rab-save:hover { background: rgba(16,185,129,.2); transform: translateY(-1px); }
.pf-rab-launch {
    background: var(--pf-gold-10);
    color: var(--pf-gold);
    border-color: var(--pf-gold-20);
}
.pf-rab-launch:hover { background: var(--pf-gold-20); transform: translateY(-1px); }

/* Prompt textarea edit */
.pf-result-body { padding: 16px 18px; }
.pf-prompt-edit {
    width: 100%;
    min-height: 260px;
    background: rgba(0,0,0,.32);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--pf-r-sm);
    color: var(--pf-text);
    font-size: 13.5px;
    line-height: 1.72;
    padding: 16px 18px;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}
.pf-prompt-edit:focus {
    outline: none;
    border-color: rgba(245,158,11,.32);
    box-shadow: 0 0 0 3px rgba(245,158,11,.06);
}
.pf-result-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px 14px;
    font-size: 11px;
    color: var(--pf-text-dim);
}
.pf-result-footer svg { flex-shrink: 0; opacity: .6; }

/* ─── EXAMPLES VIEW ────────────────────────────────────── */
.pf-examples-view { max-width: 900px; margin: 0 auto; width: 100%; }
.pf-examples-intro {
    text-align: center;
    margin-bottom: 22px;
    color: var(--pf-text-muted);
    font-size: 13.5px;
    line-height: 1.6;
}
.pf-examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
}
.pf-example-card {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-r);
    overflow: hidden;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.pf-example-card:hover {
    border-color: rgba(245,158,11,.32);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.pf-example-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    cursor: pointer;
    gap: 10px;
}
.pf-example-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pf-text);
    flex: 1;
    min-width: 0;
}
.pf-example-cat-badge {
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    background: var(--pf-gold-10);
    color: var(--pf-gold);
    white-space: nowrap;
    flex-shrink: 0;
}
.pf-example-toggle {
    font-size: 11px;
    color: var(--pf-text-dim);
    transition: transform .2s;
    flex-shrink: 0;
}
.pf-example-card.open .pf-example-toggle { transform: rotate(180deg); }
.pf-example-card-body { display: none; padding: 0 16px 14px; }
.pf-example-card.open .pf-example-card-body { display: block; }
.pf-example-preview {
    font-size: 12px;
    color: var(--pf-text-muted);
    line-height: 1.65;
    background: rgba(0,0,0,.22);
    border-radius: var(--pf-r-sm);
    padding: 12px;
    margin-bottom: 10px;
    max-height: 140px;
    overflow-y: auto;
    white-space: pre-wrap;
}
.pf-example-use-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 16px;
    background: var(--pf-gold-10);
    color: var(--pf-gold);
    border: 1px solid var(--pf-gold-20);
    border-radius: var(--pf-r-sm);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
}
.pf-example-use-btn:hover { background: var(--pf-gold-20); transform: translateY(-1px); }

/* ─── LIBRARY VIEW ─────────────────────────────────────── */
.pf-lib-view { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; width: 100%; }

.pf-lib-empty {
    text-align: center;
    padding: 70px 20px;
    max-width: 480px;
    margin: 0 auto;
}
.pf-lib-empty-icon { font-size: 56px; margin-bottom: 16px; line-height: 1; }
.pf-lib-empty h3 { font-size: 18px; font-weight: 700; color: var(--pf-text); margin: 0 0 8px; }
.pf-lib-empty p { font-size: 13.5px; color: var(--pf-text-muted); line-height: 1.6; margin: 0 0 22px; }

/* Selection bar */
.pf-sel-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--pf-gold-10);
    border: 1px solid var(--pf-gold-20);
    border-radius: var(--pf-r-sm);
}
.pf-sel-count { font-size: 13px; color: var(--pf-gold); font-weight: 600; flex: 1; }
.pf-sel-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(239,68,68,.1);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,.2);
    border-radius: var(--pf-r-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.pf-sel-delete:hover { background: rgba(239,68,68,.2); }
.pf-sel-cancel {
    padding: 6px 10px;
    background: transparent;
    color: var(--pf-text-muted);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--pf-r-sm);
    font-size: 12px;
    cursor: pointer;
    transition: color .15s;
}
.pf-sel-cancel:hover { color: var(--pf-text); }

/* Category groups */
.pf-cat-group {
    border: 1px solid color-mix(in srgb, var(--gc, #f59e0b) 20%, transparent);
    border-radius: var(--pf-r);
    overflow: hidden;
}
.pf-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--gc, #f59e0b) 6%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--gc, #f59e0b) 12%, transparent);
    gap: 10px;
    flex-wrap: wrap;
}
.pf-cat-title { display: flex; align-items: center; gap: 8px; }
.pf-cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gc, var(--pf-gold)); flex-shrink: 0; }
.pf-cat-icon { font-size: 16px; }
.pf-cat-name { font-size: 13px; font-weight: 700; color: var(--pf-text); }
.pf-cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: color-mix(in srgb, var(--gc, #f59e0b) 15%, transparent);
    color: var(--gc, var(--pf-gold));
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}
.pf-sel-all-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--pf-text-muted);
    cursor: pointer;
}
.pf-sel-all-label input { accent-color: var(--pf-gold); }
.pf-cat-cards { display: flex; flex-direction: column; }

/* Prompt cards in library */
.pf-pcard {
    display: flex;
    align-items: stretch;
    border-top: 1px solid rgba(255,255,255,.04);
    transition: background .18s;
}
.pf-pcard:hover { background: rgba(255,255,255,.03); }
.pf-pcard.selected { background: color-mix(in srgb, var(--cc, #f59e0b) 5%, transparent); }

.pf-pcard-check-wrap {
    padding: 14px 12px;
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
}
.pf-pcard-check-wrap input { accent-color: var(--pf-gold); cursor: pointer; }

.pf-pcard-main { flex: 1; padding: 14px 10px 14px 4px; min-width: 0; }
.pf-pcard-title {
    margin: 0 0 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pf-text);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pf-pcard-preview {
    margin: 0 0 5px;
    font-size: 12px;
    color: var(--pf-text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pf-pcard-date { font-size: 10.5px; color: var(--pf-text-dim); }

.pf-pcard-acts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 10px 12px;
    flex-shrink: 0;
}
.pf-pca {
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(255,255,255,.05);
    color: var(--pf-text-muted);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}
.pf-pca:hover { background: rgba(255,255,255,.1); color: var(--pf-text); transform: translateY(-1px); }
.pf-pca-use { color: var(--pf-gold); border-color: var(--pf-gold-20); background: var(--pf-gold-10); }
.pf-pca-use:hover { background: var(--pf-gold-20); }
.pf-pca-del { color: #fca5a5; border-color: rgba(239,68,68,.2); background: rgba(239,68,68,.06); }
.pf-pca-del:hover { background: rgba(239,68,68,.15); }

/* CTA secondary */
.pf-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #b45309, var(--pf-gold));
    color: #0a0806;
    font-size: 14px;
    font-weight: 800;
    border: none;
    border-radius: var(--pf-r);
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 4px 20px rgba(245,158,11,.3);
}
.pf-cta-secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(245,158,11,.45); }

/* ─── DIALOGUE VIEW ─────────────────────────────────────── */
.pf-dialogue-view {
    display: flex;
    flex-direction: column;
    height: 560px;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-r);
    overflow: hidden;
}
.pf-dialogue-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--pf-gold-20) transparent;
}
.pf-dialogue-messages::-webkit-scrollbar { width: 4px; }
.pf-dialogue-messages::-webkit-scrollbar-thumb { background: var(--pf-gold-20); border-radius: 4px; }

.pf-msg { display: flex; gap: 10px; align-items: flex-start; animation: pfMsgIn .25s ease-out; }
@keyframes pfMsgIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.pf-msg--user { flex-direction: row-reverse; }
.pf-msg-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.pf-msg--ai .pf-msg-avatar { background: var(--pf-gold-10); color: var(--pf-gold); }
.pf-msg--user .pf-msg-avatar { background: rgba(99,102,241,.15); color: #a5b4fc; }
.pf-msg-bubble {
    max-width: 74%;
    padding: 11px 16px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.65;
}
.pf-msg--ai .pf-msg-bubble {
    background: rgba(255,255,255,.05);
    color: var(--pf-text);
    border-radius: 4px 12px 12px 12px;
}
.pf-msg--user .pf-msg-bubble {
    background: var(--pf-gold-10);
    color: var(--pf-text);
    border: 1px solid var(--pf-gold-20);
    border-radius: 12px 4px 12px 12px;
}
.pf-msg--typing .pf-msg-bubble {
    padding: 14px 18px;
    display: flex;
    gap: 4px;
    align-items: center;
}
.pf-typing-dot {
    width: 6px; height: 6px;
    background: var(--pf-text-muted);
    border-radius: 50%;
    animation: pfTyping .9s ease-in-out infinite;
}
.pf-typing-dot:nth-child(2) { animation-delay: .15s; }
.pf-typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes pfTyping { 0%,80%,100% { transform:scale(.6);opacity:.3; } 40% { transform:scale(1);opacity:1; } }

.pf-dialogue-input-area {
    border-top: 1px solid var(--pf-border);
    padding: 12px 16px;
    background: rgba(0,0,0,.18);
}
.pf-dialogue-imported-prompt {
    font-size: 11.5px;
    color: var(--pf-gold);
    background: var(--pf-gold-10);
    border: 1px solid var(--pf-gold-20);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background .18s;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.pf-dialogue-imported-prompt:hover { background: var(--pf-gold-20); }
.pf-dialogue-row { display: flex; gap: 8px; align-items: flex-end; }
.pf-dialogue-textarea {
    flex: 1;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--pf-r-sm);
    color: var(--pf-text);
    font-size: 13.5px;
    font-family: inherit;
    padding: 10px 14px;
    resize: none;
    min-height: 42px;
    max-height: 120px;
    transition: border-color .2s;
}
.pf-dialogue-textarea:focus { outline: none; border-color: var(--pf-gold-30); }
.pf-dialogue-textarea::placeholder { color: rgba(242,234,216,.22); }
.pf-dialogue-send {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, #b45309, var(--pf-gold));
    color: #000;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .18s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pf-dialogue-send:hover { transform: scale(1.08); box-shadow: 0 4px 16px var(--pf-gold-glow); }
.pf-dialogue-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.pf-dialogue-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--pf-text-muted);
    font-size: 13px;
}
.pf-dialogue-empty-icon { font-size: 40px; margin-bottom: 10px; }

/* ─── TOAST ─────────────────────────────────────────────── */
.pf-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    padding: 12px 20px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    z-index: 9999;
    transform: translateY(14px);
    opacity: 0;
    transition: all .26s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 10px 40px rgba(0,0,0,.45);
    max-width: 320px;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pf-toast.visible { transform: translateY(0); opacity: 1; }
.pf-toast-success { background: #064e3b; color: #6ee7b7; border: 1px solid rgba(16,185,129,.25); }
.pf-toast-warning { background: #78350f; color: var(--pf-gold-l); border: 1px solid var(--pf-gold-20); }
.pf-toast-info    { background: #1e3a5f; color: #93c5fd; border: 1px solid rgba(59,130,246,.25); }
.pf-toast-error   { background: #7f1d1d; color: #fca5a5; border: 1px solid rgba(239,68,68,.25); }

/* ─── LIGHT THEMES ──────────────────────────────────────── */
[data-theme="minimal"] #view-prompt-forge,
[data-theme="academie"] #view-prompt-forge,
[data-theme="ivory"] #view-prompt-forge {
    --pf-bg: #f8fafc;
    --pf-surface: rgba(0,0,0,.03);
    --pf-surface-hov: rgba(0,0,0,.06);
    --pf-border: rgba(245,158,11,.22);
    --pf-border-sub: rgba(0,0,0,.08);
    --pf-text: #1e293b;
    --pf-text-muted: rgba(30,41,59,.58);
    --pf-text-dim: rgba(30,41,59,.35);
}

/* ─── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 768px) {
    .pf-body { padding: 18px 16px 32px; }
    .pf-hero { padding: 20px 16px 0; }
    .pf-tabs { padding: 10px 16px 0; }
    .pf-hero-title { font-size: 22px; }
    .pf-intro-steps { flex-direction: column; }
    .pf-intro-arrow { display: none; }
    .pf-intro-step { flex-direction: row; text-align: left; padding: 14px 16px; }
    .pf-is-icon { font-size: 22px; flex-shrink: 0; }
    .pf-result-topbar { flex-direction: column; align-items: flex-start; }
    .pf-result-actions { width: 100%; }
    .pf-dialogue-view { height: 460px; }
    .pf-msg-bubble { max-width: 86%; }
    .pf-examples-grid { grid-template-columns: 1fr; }
    .pf-pcard-acts { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .pf-hero-badges { gap: 4px; }
    .pf-hbadge { font-size: 10px; padding: 2px 7px; }
    .pf-step-card { padding: 14px; gap: 10px; }
    .pf-forge-cta { font-size: 13px; padding: 14px; }
}


/* ===== css/mahayawen-hub.css?v=2602250003 ===== */
/* =============================================
   MAHAYAWEN HUB — v500 · Premium 2026
   Glassmorphism · Flex cards · Zero white hover
   ============================================= */

/* ── VIEW CONTAINER ── */
#view-mahayawen-hub.active {
    display: block !important;
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* ── MAIN CONTAINER ── */
.mh-container {
    width: 100%;
    min-height: 100vh;
    background: var(--bg-primary, #080810);
    position: relative;
    overflow: hidden;
    padding-bottom: 80px;
    box-sizing: border-box;
}

/* ── BACKGROUND LAYERS ── */
.mh-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
    z-index: 0;
}

.mh-container::after {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(99,102,241,0.12) 0%, rgba(6,182,212,0.06) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ── HERO ── */
.mh-hero {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 52px 24px 32px;
    text-align: center;
}

.mh-orb {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 28px;
}
.mh-orb-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(99,102,241,0.35);
    animation: mh-orbit 6s linear infinite;
}
.mh-orb-ring::after {
    content: '';
    position: absolute;
    top: -4px; left: 50%;
    transform: translateX(-50%);
    width: 8px; height: 8px;
    background: #818cf8;
    border-radius: 50%;
    box-shadow: 0 0 12px #818cf8, 0 0 24px rgba(129,140,248,0.5);
}
.mh-orb-ring-2 {
    inset: 12px;
    border-color: rgba(6,182,212,0.3);
    animation: mh-orbit 4s linear infinite reverse;
}
.mh-orb-ring-2::after {
    background: #06b6d4;
    box-shadow: 0 0 12px #06b6d4, 0 0 24px rgba(6,182,212,0.5);
}
.mh-orb-core {
    position: absolute;
    inset: 22px;
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
@keyframes mh-orbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.mh-hero-title {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin: 0 0 10px;
    background: linear-gradient(135deg, #fff 0%, #c7d2fe 50%, #67e8f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}
.mh-hero-tagline {
    font-size: 15px;
    color: rgba(255,255,255,0.42);
    margin: 0 0 14px;
    max-width: 440px;
    line-height: 1.55;
}
.mh-hero-version {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    color: rgba(129,140,248,0.9);
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.2);
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ── STATUS BAR ── */
.mh-status-bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    margin: 0 0 52px;
}
.mh-status-dot {
    width: 7px; height: 7px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 8px #22c55e, 0 0 16px rgba(34,197,94,0.4);
    animation: mh-pulse 2s ease-in-out infinite;
}
@keyframes mh-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.6; transform:scale(0.8); }
}

/* ── SECTION TITLE ── */
.mh-section-title {
    position: relative;
    z-index: 1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.22);
    text-align: center;
    margin: 0 0 28px;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
}

/* ── CARDS GRID ── */
.mh-cards-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: min(1200px, 90%);
    margin: 0 auto 60px;
    padding: 0 32px;
    box-sizing: border-box;
}
@media (max-width: 720px) { .mh-cards-grid { grid-template-columns: repeat(2,1fr); padding: 0 20px; } }
@media (max-width: 480px) { .mh-cards-grid { grid-template-columns: 1fr; padding: 0 16px; } }

/* ── COLOR VARS PAR MODULE ── */
.mh-card[data-type="chat"]        { --c: 6,182,212;   --ch: #06b6d4; }
.mh-card[data-type="promptforge"] { --c: 245,158,11;  --ch: #f59e0b; }
.mh-card[data-type="academy"]     { --c: 168,85,247;  --ch: #a855f7; }
.mh-card[data-type="notes"]       { --c: 52,211,153;  --ch: #34d399; }
.mh-card[data-type="analyse"]     { --c: 99,102,241;  --ch: #6366f1; }
.mh-card[data-type="tunnels"]     { --c: 249,115,22;  --ch: #f97316; }

/* ── CARD — FLEX LAYOUT ── */
.mh-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, rgba(18,18,28,0.85));
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 20px;
    padding: 28px 24px 24px;
    cursor: pointer;
    transition:
        transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
    outline: none;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 4px 24px rgba(0,0,0,0.35);
    will-change: transform;
}

/* Top specular highlight */
.mh-card::before {
    content: '';
    position: absolute;
    top: 0; left: 20px; right: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    pointer-events: none;
    z-index: 0;
}

/* Bottom ambient color glow */
.mh-card::after {
    content: '';
    position: absolute;
    bottom: -20px; left: 20%; right: 20%;
    height: 80px;
    background: radial-gradient(ellipse, rgba(var(--c),0.18) 0%, transparent 70%);
    pointer-events: none;
    transition: opacity 0.3s;
    opacity: 0.5;
    filter: blur(8px);
    z-index: 0;
}

/* ── HOVER STATE ── */
.mh-card:hover,
.mh-card:focus {
    background:
        linear-gradient(135deg, rgba(var(--c), 0.12), rgba(var(--c), 0.04)),
        rgba(14,14,22,0.92);
    border-color: rgba(var(--c), 0.4);
    transform: translateY(-6px) scale(1.01);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 0 0 1px rgba(var(--c), 0.12),
        0 20px 56px rgba(var(--c), 0.16),
        0 4px 16px rgba(0,0,0,0.45);
}
.mh-card:hover::after,
.mh-card:focus::after { opacity: 1; }

.mh-card:focus-visible {
    outline: 2px solid rgba(var(--c), 0.5);
    outline-offset: 3px;
}

/* ── CRITICAL: zero white-rectangle on inner elements hover ── */
/* Prevents global premium-enhancements.css / button styles from bleeding in */
.mh-card .mh-card-title,
.mh-card .mh-card-desc,
.mh-card .mh-card-footer,
.mh-card .mh-card-footer *,
.mh-card .mh-card-badge,
.mh-card .mh-card-title:hover,
.mh-card .mh-card-desc:hover,
.mh-card .mh-card-footer:hover,
.mh-card .mh-card-footer *:hover,
.mh-card .mh-card-badge:hover {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
}
/* Icon-wrap keeps its own styled hover */
.mh-card .mh-card-icon-wrap {
    background: linear-gradient(135deg, rgba(var(--c), 0.18), rgba(var(--c), 0.08)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 4px 16px rgba(var(--c), 0.1) !important;
    border: 1px solid rgba(var(--c), 0.22) !important;
    overflow: hidden !important;
    transform: none;
}
.mh-card:hover .mh-card-icon-wrap,
.mh-card:focus .mh-card-icon-wrap {
    background: rgba(var(--c), 0.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 0 24px rgba(var(--c), 0.35) !important;
    transform: scale(1.08) !important;
}

/* ── CARD BADGE ── */
.mh-card-badge {
    position: absolute;
    top: 16px; right: 16px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 6px;
    z-index: 2;
}

/* ── ICON ── */
.mh-card-icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    transition: background 0.2s, box-shadow 0.25s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── TITLE ── */
.mh-card .mh-card-title {
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    margin: 0 0 10px;
    letter-spacing: -0.3px;
    line-height: 1.3;
    padding: 0 !important;
    border-radius: 0 !important;
    transition: color 0.2s;
}
.mh-card:hover .mh-card-title,
.mh-card:focus .mh-card-title {
    color: #fff;
}

/* ── DESCRIPTION ── */
.mh-card .mh-card-desc {
    position: relative;
    z-index: 1;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    line-height: 1.65;
    margin: 0;
    flex: 1;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ── FOOTER "OUVRIR" — premium clean text link ── */
.mh-card-footer {
    /* Remove absolute: now flows naturally at bottom of flex card */
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 20px;
    padding: 0 !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(var(--c), 0.55);
    transition: color 0.2s ease;
    /* Strict: no bg, no border, no shadow from global rules */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.mh-card-footer span {
    display: inline-block;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    transition: transform 0.2s ease;
}
.mh-card-footer span:last-child {
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.mh-card:hover .mh-card-footer,
.mh-card:focus .mh-card-footer {
    color: var(--ch) !important;
}
.mh-card:hover .mh-card-footer span:last-child,
.mh-card:focus .mh-card-footer span:last-child {
    transform: translateX(5px) !important;
}

/* ── STATS ROW ── */
.mh-stats-row {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 14px;
    max-width: min(1200px, 90%);
    margin: 0 auto 52px;
    padding: 0 32px;
    box-sizing: border-box;
}
.mh-stat {
    flex: 1;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
    transition: background 0.2s, border-color 0.2s;
}
.mh-stat:hover {
    background: rgba(99,102,241,0.07);
    border-color: rgba(99,102,241,0.2);
}
.mh-stat-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #c7d2fe, #67e8f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 4px;
}
.mh-stat-label {
    font-size: 10px;
    color: rgba(255,255,255,0.28);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* ── CHAT CTA ── */
.mh-chat-cta-wrap {
    position: relative;
    z-index: 1;
    max-width: min(1200px, 90%);
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}
.mh-chat-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 32px;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 20px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.mh-chat-cta:hover {
    background: rgba(99,102,241,0.14);
    border-color: rgba(99,102,241,0.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 16px 48px rgba(99,102,241,0.15);
}
.mh-chat-cta-icon {
    font-size: 36px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 12px rgba(99,102,241,0.5));
}
.mh-chat-cta-body { flex: 1; }
.mh-chat-cta-body h3 {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    margin: 0 0 4px;
    background: none !important;
    box-shadow: none !important;
}
.mh-chat-cta-body p {
    font-size: 13px;
    color: rgba(255,255,255,0.42);
    margin: 0;
    line-height: 1.5;
    background: none !important;
}
.mh-chat-cta-btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #06b6d4) !important;
    border: none !important;
    border-radius: 10px;
    padding: 12px 24px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(99,102,241,0.35) !important;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
}
.mh-chat-cta-btn:hover {
    opacity: 0.9 !important;
    transform: scale(1.04) translateY(-1px) !important;
    box-shadow: 0 8px 28px rgba(99,102,241,0.5) !important;
}
.mh-chat-cta-btn::before { display: none !important; }

/* ── ANIMATIONS ── */
@keyframes mh-fadeup {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mh-hero       { animation: mh-fadeup 0.5s ease both; }
.mh-status-bar { animation: mh-fadeup 0.5s 0.08s ease both; }
.mh-cards-grid { animation: mh-fadeup 0.5s 0.14s ease both; }
.mh-stats-row  { animation: mh-fadeup 0.5s 0.20s ease both; }
.mh-chat-cta   { animation: mh-fadeup 0.5s 0.26s ease both; }

.mh-card { animation: mh-fadeup 0.45s ease both; }
.mh-card:nth-child(1) { animation-delay: 0.10s; }
.mh-card:nth-child(2) { animation-delay: 0.16s; }
.mh-card:nth-child(3) { animation-delay: 0.22s; }
.mh-card:nth-child(4) { animation-delay: 0.28s; }
.mh-card:nth-child(5) { animation-delay: 0.34s; }
.mh-card:nth-child(6) { animation-delay: 0.40s; }

/* =============================================================
   ANTI-GLASS OVERRIDE
   premium-enhancements.css [class*=card] applique glass à TOUT
   ce qui contient card dans la classe — on neutralise ici.
   ============================================================= */

/* Grille = container pur, pas une card */
.mh-cards-grid {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Cartes : neutralise le glass overlay blanc, garde nos styles */
.mh-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* background, border, border-radius sont définis plus haut */
}
/* Titre de section : idem */
.mh-section-title {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
}

/* =============================================================
   SHADOW DEPTH + SPEED FIX
   ============================================================= */

/* Ombre de relief sur les cartes */
.mh-card {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 1px 3px rgba(0,0,0,0.55),
        0 6px 16px rgba(0,0,0,0.35),
        0 20px 44px rgba(0,0,0,0.18) !important;
    transition:
        transform 0.15s cubic-bezier(0.34,1.56,0.64,1),
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease !important;
}
.mh-card:hover,
.mh-card:focus {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 0 0 1px rgba(var(--c), 0.18),
        0 4px 12px rgba(0,0,0,0.5),
        0 16px 40px rgba(var(--c), 0.22),
        0 32px 60px rgba(0,0,0,0.28) !important;
}


/* ===== css/pf-loading.css?v=2602240010 ===== */
/* =============================================
   PROMPT FORGE — PREMIUM LOADING OVERLAY v100
   ============================================= */

/* Overlay plein écran sur la section input */
.pf-loading-premium {
    position: absolute;
    inset: 0;
    z-index: 50;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pf-lp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 25, 0.92);
    backdrop-filter: blur(12px);
    border-radius: 16px;
}

.pf-lp-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 24px;
}

/* -------- ORB -------- */
.pf-lp-orb-wrap {
    position: relative;
    width: 100px;
    height: 100px;
}

.pf-lp-orb-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(135deg, var(--accent-light) 0%, var(--accent) 55%, #3b0764 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    animation: pfOrbPulse 1.8s ease-in-out infinite;
    box-shadow:
        0 0 0 0 color-mix(in srgb, var(--accent) 80%, transparent),
        0 0 30px color-mix(in srgb, var(--accent) 50%, transparent);
}

@keyframes pfOrbPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent), 0 0 30px color-mix(in srgb, var(--accent) 50%, transparent);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 20px color-mix(in srgb, var(--accent) 0%, transparent), 0 0 60px color-mix(in srgb, var(--accent) 60%, transparent);
        transform: scale(1.06);
    }
}

/* Waves */
.pf-lp-orb-wave {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
    animation: pfWaveExpand 2s ease-out infinite;
}

.pf-lp-wave-2 { animation-delay: 0.6s; }
.pf-lp-wave-3 { animation-delay: 1.2s; }

@keyframes pfWaveExpand {
    0%   { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* Rings orbitaux */
.pf-lp-orb-ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
    animation: pfRingRotate 3s linear infinite;
}

.pf-lp-orb-ring::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-light);
    transform: translateX(-50%);
    box-shadow: 0 0 8px var(--accent-light);
}

.pf-lp-orb-ring-2 {
    inset: -22px;
    border-color: color-mix(in srgb, var(--accent) 18%, transparent);
    animation-duration: 5s;
    animation-direction: reverse;
}

.pf-lp-orb-ring-2::after {
    background: var(--accent-light);
    box-shadow: 0 0 8px var(--accent-light);
}

.pf-lp-orb-ring-3 {
    inset: -36px;
    border-color: color-mix(in srgb, var(--accent) 10%, transparent);
    animation-duration: 8s;
}

.pf-lp-orb-ring-3::after {
    background: var(--accent);
    width: 4px;
    height: 4px;
}

@keyframes pfRingRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* -------- ROTATING TEXT -------- */
.pf-lp-texts {
    height: 28px;
    overflow: hidden;
    position: relative;
    width: 260px;
    text-align: center;
}

.pf-lp-text {
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--accent-light);
    letter-spacing: 0.03em;
    opacity: 0;
    transform: translateY(14px);
    transition: all 0.5s cubic-bezier(.4,0,.2,1);
}

.pf-lp-text.active {
    opacity: 1;
    transform: translateY(0);
}

.pf-lp-text.leaving {
    opacity: 0;
    transform: translateY(-14px);
}

/* -------- PROGRESS BAR -------- */
.pf-lp-bar-wrap {
    width: 220px;
    height: 4px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 99px;
    overflow: hidden;
}

.pf-lp-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent-light));
    border-radius: 99px;
    transition: width 0.4s ease;
    box-shadow: 0 0 8px rgba(167,139,250,0.5);
    animation: pfBarShimmer 1.5s ease-in-out infinite;
}

@keyframes pfBarShimmer {
    0%, 100% { filter: brightness(1); }
    50%       { filter: brightness(1.3); }
}

.pf-lp-percent {
    font-size: 0.75rem;
    color: rgba(167,139,250,0.6);
    font-weight: 600;
    letter-spacing: 0.08em;
}


/* ===== css/journal.css?v=2602240010 ===== */
/**
 * JOURNAL - Styles
 * ProductiveApp - Journal personnel avec isolation utilisateur
 */

/* Badge utilisateur personnel */
.journal-user-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, color-mix(in srgb, var(--accent) 10%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    animation: badgeFadeIn 0.5s ease-out;
}

.journal-user-badge .user-avatar {
    font-size: 18px;
    line-height: 1;
}

.journal-user-badge .user-name {
    color: var(--text-primary, #333);
    font-weight: 600;
}

.journal-user-badge .privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
}

/* Animation d'apparition */
@keyframes badgeFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header journal ajusté */
.journal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.journal-header h2 {
    margin: 0;
}

#journal-title {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Empty state personnalisé */
.journal-section .empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary, #666);
    font-size: 15px;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    border-radius: 12px;
    border: 2px dashed color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Responsive */
@media (max-width: 768px) {
    .journal-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .journal-user-badge {
        width: 100%;
        justify-content: center;
    }
}


/* ===== css/automations.css?v=2602240010 ===== */
/**
 * Automatisations — CSS v=100
 */

/* ── Layout ───────────────────────────────────────────────────────────────── */
.auto-wrap {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.auto-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

.auto-header-left { display: flex; flex-direction: column; gap: 4px; }

.auto-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    margin: 0;
}

.auto-subtitle {
    font-size: 14px;
    color: var(--text-secondary, #94a3b8);
    margin: 0;
}

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.auto-btn-primary {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
    white-space: nowrap;
}
.auto-btn-primary:hover { opacity: .88; transform: translateY(-1px); }

.auto-btn-outline {
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .2s;
}
.auto-btn-outline:hover { border-color: #8B5CF6; color: #8B5CF6; }

.auto-btn-back {
    background: transparent;
    border: none;
    color: var(--text-secondary, #94a3b8);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 0;
}
.auto-btn-back:hover { color: var(--text-primary, #f1f5f9); }

.auto-btn-sm {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    color: var(--text-secondary, #94a3b8);
    font-size: 12px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background .15s;
}
.auto-btn-sm:hover { background: rgba(255,255,255,.12); color: var(--text-primary, #f1f5f9); }
.auto-btn-run  { border-color: #10B98140; }
.auto-btn-run:hover  { background: #10B98120; color: #10B981; }
.auto-btn-danger { border-color: #EF444440; }
.auto-btn-danger:hover { background: #EF444420; color: #EF4444; }

.auto-btn-add-step {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 8px;
    color: #8B5CF6;
    font-size: 13px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background .2s;
}
.auto-btn-add-step:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.auto-card {
    background: var(--card-bg, rgba(255,255,255,.04));
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 14px;
    padding: 20px;
    transition: border-color .2s, transform .2s;
}
.auto-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); transform: translateY(-2px); }

.auto-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.auto-card-info { display: flex; align-items: center; gap: 12px; }
.auto-trigger-icon { font-size: 24px; }
.auto-card-name { font-weight: 600; color: var(--text-primary, #f1f5f9); font-size: 15px; }
.auto-card-trigger { font-size: 12px; color: var(--text-secondary, #94a3b8); margin-top: 2px; }

.auto-toggle-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* Toggle switch */
.auto-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.auto-toggle input { opacity: 0; width: 0; height: 0; }
.auto-toggle-slider {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.15);
    border-radius: 24px;
    cursor: pointer;
    transition: background .25s;
}
.auto-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .25s;
}
.auto-toggle input:checked + .auto-toggle-slider { background: #8B5CF6; }
.auto-toggle input:checked + .auto-toggle-slider::before { transform: translateX(20px); }

.auto-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}

.auto-card-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
    padding: 12px;
    background: rgba(255,255,255,.03);
    border-radius: 8px;
}
.auto-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.auto-stat-n { font-size: 18px; font-weight: 700; color: var(--text-primary, #f1f5f9); }
.auto-stat span:last-child { font-size: 11px; color: var(--text-secondary, #94a3b8); }

.auto-card-desc { font-size: 13px; color: var(--text-secondary, #94a3b8); margin: 0 0 12px; }

.auto-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Empty ────────────────────────────────────────────────────────────────── */
.auto-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--text-secondary, #94a3b8);
}
.auto-empty-icon { font-size: 48px; margin-bottom: 16px; }
.auto-empty h3 { color: var(--text-primary, #f1f5f9); margin: 0 0 8px; font-size: 18px; }
.auto-empty p  { margin: 0 0 24px; }

.auto-loading { text-align: center; padding: 40px; color: var(--text-secondary, #94a3b8); }

/* ── Builder Layout ───────────────────────────────────────────────────────── */
.auto-builder-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .auto-builder-layout { grid-template-columns: 1fr; }
}

.auto-builder-config, .auto-builder-steps {
    background: var(--card-bg, rgba(255,255,255,.04));
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 14px;
    padding: 20px;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.auto-field-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.auto-field-group label { font-size: 13px; font-weight: 600; color: var(--text-secondary, #94a3b8); }

.auto-input {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: var(--text-primary, #f1f5f9);
    font-size: 14px;
    padding: 9px 12px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color .2s;
    font-family: inherit;
    resize: vertical;
    min-height: 70px;
}
.auto-input:focus { border-color: #8B5CF6; }
.auto-input::placeholder { color: rgba(255,255,255,.3); }

.auto-trigger-config { margin-top: 4px; }
.auto-tc { margin-top: 12px; }
.auto-tc label { display: block; font-size: 12px; color: var(--text-secondary, #94a3b8); margin-bottom: 4px; font-weight: 600; }

/* ── Steps ────────────────────────────────────────────────────────────────── */
.auto-steps-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.auto-steps-header h3 { margin: 0; font-size: 15px; color: var(--text-primary, #f1f5f9); }

.auto-steps-flow { display: flex; flex-direction: column; gap: 0; }

.auto-step-arrow { text-align: center; color: color-mix(in srgb, var(--accent) 50%, transparent); font-size: 18px; padding: 4px 0; }

.auto-step {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: 14px;
    transition: border-color .2s;
}
.auto-step:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

.auto-step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.auto-step-icon { font-size: 20px; }
.auto-step-type {
    flex: 1;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    color: var(--text-primary, #f1f5f9);
    font-size: 13px;
    padding: 6px 8px;
}
.auto-step-del {
    background: transparent;
    border: none;
    color: #EF4444;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.auto-step-delay {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary, #94a3b8);
    margin-bottom: 10px;
}
.auto-delay-input { width: 60px !important; padding: 4px 8px !important; }

.auto-step-config { margin-top: 4px; }
.auto-sc { display: flex; flex-direction: column; gap: 8px; }
.auto-sc-hint { font-size: 12px; color: var(--text-secondary, #94a3b8); margin: 0; }

.auto-steps-empty {
    text-align: center;
    padding: 32px;
    color: var(--text-secondary, #94a3b8);
    font-size: 13px;
    border: 1px dashed rgba(255,255,255,.1);
    border-radius: 10px;
    margin-top: 8px;
}

/* ── Logs Table ───────────────────────────────────────────────────────────── */
.auto-logs-table-wrap { overflow-x: auto; }

.auto-logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.auto-logs-table th {
    text-align: left;
    padding: 10px 12px;
    color: var(--text-secondary, #94a3b8);
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.auto-logs-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    color: var(--text-primary, #f1f5f9);
    vertical-align: middle;
}
.auto-logs-table tr:last-child td { border-bottom: none; }
.auto-logs-table tr:hover td { background: rgba(255,255,255,.03); }

.auto-log-status { font-weight: 600; text-transform: capitalize; }
.auto-log-error  { color: #EF4444; font-size: 12px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ===== css/giri-drive.css?v=2602252200 ===== */
/* =====================================================
   GIRI DRIVE v3.0 — Premium Cloud Storage UI
   Namespace: .gd-*
   ===================================================== */

/* ─── Conteneur principal ────────────────────────────── */
.gd-container {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 100%;
}

/* ─── HERO HEADER ────────────────────────────────────── */
.gd-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.4rem 1.6rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 10%, transparent) 0%,
    color-mix(in srgb, var(--accent) 4%, transparent) 60%,
    transparent 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
}

.gd-hero::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  pointer-events: none;
}

.gd-hero-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.gd-hero-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  border-radius: 14px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent);
}

.gd-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary, #f1f5f9);
  margin: 0 0 0.2rem;
  letter-spacing: -0.02em;
}

/* ─── Breadcrumb ─────────────────────────────────────── */
.gd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
}

.gd-bc-item {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  border-radius: 5px;
  transition: color 0.15s, background 0.15s;
}

.gd-bc-item:hover { color: rgba(255,255,255,0.85); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.gd-bc-active { color: var(--accent-light) !important; font-weight: 600; cursor: default; }
.gd-bc-root { color: rgba(255,255,255,0.5); }
.gd-bc-sep { color: rgba(255,255,255,0.18); font-size: 0.75rem; user-select: none; }

/* ─── Boutons hero ────────────────────────────────────── */
.gd-hero-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.gd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.52rem 1.05rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap;
  line-height: 1;
}

.gd-btn-primary {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}

.gd-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 55%, transparent);
  filter: brightness(1.08);
}

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

.gd-btn-ghost {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.1);
}

.gd-btn-ghost:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-light);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  transform: translateY(-1px);
}

/* ─── QUOTA BAR ──────────────────────────────────────── */
.gd-quota-wrap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding: 0.65rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
}

.gd-quota-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
}

.gd-quota-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-light), var(--accent));
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}

.gd-quota-fill.gd-quota-warn {
  background: linear-gradient(90deg, #f59e0b, #f97316);
}

.gd-quota-fill.gd-quota-critical {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  animation: gdQuotaPulse 2s ease infinite;
}

@keyframes gdQuotaPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}

.gd-quota-label {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.42);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── TOOLBAR ────────────────────────────────────────── */
.gd-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* Search */
.gd-search-wrap {
  flex: 1;
  min-width: 180px;
  position: relative;
  display: flex;
  align-items: center;
}

.gd-search-icon {
  position: absolute;
  left: 0.75rem;
  color: rgba(255,255,255,0.35);
  pointer-events: none;
  flex-shrink: 0;
}

.gd-search-input {
  width: 100%;
  padding: 0.52rem 2.2rem 0.52rem 2.1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 0.83rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.gd-search-input::placeholder { color: rgba(255,255,255,0.3); }

.gd-search-input:focus {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.gd-search-clear {
  position: absolute;
  right: 0.6rem;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.gd-search-clear:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* Toolbar right */
.gd-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Sort */
.gd-sort-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem 0.3rem 0.5rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 9px;
  transition: border-color 0.15s;
}

.gd-sort-wrap:focus-within {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.gd-sort-select {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  padding: 0;
}

.gd-sort-select option { background: #14141f; color: #fff; }

/* View toggle */
.gd-view-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 9px;
  padding: 2px;
}

.gd-view-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: rgba(255,255,255,0.38);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.gd-view-btn:hover { color: rgba(255,255,255,0.7); }
.gd-view-btn.active {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-light);
}

/* ─── Stats bar ──────────────────────────────────────── */
.gd-stats-bar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  min-height: 24px;
}

.gd-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.45);
  padding: 0.22rem 0.55rem;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
}

.gd-stat-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.gd-stat-sep { color: rgba(255,255,255,0.12); font-size: 0.85rem; }

/* ─── Barre de progression upload ───────────────────── */
.gd-upload-progress {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding: 0.65rem 1rem;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 10px;
  animation: gdFadeIn 0.2s ease;
}

.gd-upload-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}

.gd-upload-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-light), var(--accent), #06b6d4);
  border-radius: 99px;
  transition: width 0.3s ease;
  background-size: 200% 100%;
  animation: gdBarShimmer 1.5s linear infinite;
}

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

.gd-upload-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}

/* ─── Zone de dépôt ──────────────────────────────────── */
.gd-drop-zone {
  border: 2px dashed transparent;
  border-radius: 16px;
  transition: border-color 0.2s, background 0.2s;
  min-height: 300px;
  position: relative;
}

.gd-drag-over {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important;
  background: color-mix(in srgb, var(--accent) 5%, transparent) !important;
  animation: gdDashAnim 0.6s linear infinite;
}

.gd-drag-over::after {
  content: '📁 Déposer ici pour uploader';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent-light);
  font-size: 1.4rem;
  font-weight: 700;
  pointer-events: none;
  background: rgba(10,10,20,0.88);
  padding: 1.2rem 2.2rem;
  border-radius: 14px;
  border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--accent) 25%, transparent);
}

@keyframes gdDashAnim {
  0%   { border-color: var(--accent-light); }
  50%  { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
  100% { border-color: var(--accent-light); }
}

/* ─── GRILLE fichiers ────────────────────────────────── */
.gd-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 1rem;
  padding: 0.25rem;
}

/* ─── Carte fichier (vue grille) ─────────────────────── */
.gd-file-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.028);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), box-shadow 0.22s, border-color 0.22s;
  animation: gdCardIn 0.35s cubic-bezier(0.4,0,0.2,1) both;
}

@keyframes gdCardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.gd-file-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 12px 32px color-mix(in srgb, var(--accent) 18%, transparent),
    0 4px 12px rgba(0,0,0,0.3);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.gd-file-card:hover .gd-card-actions { opacity: 1; transform: translateY(0); }

/* Dossier — teinte dorée subtile */
.gd-folder-card { border-color: rgba(245,158,11,0.12); }
.gd-folder-card:hover {
  box-shadow: 0 12px 32px rgba(245,158,11,0.14), 0 4px 12px rgba(0,0,0,0.3);
  border-color: rgba(245,158,11,0.32);
}

/* ─── Thumbnail ──────────────────────────────────────── */
.gd-card-preview {
  width: 100%;
  aspect-ratio: 1 / 0.85;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.gd-card-thumb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gd-card-thumb[style*="background-image"] {
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

.gd-file-card:hover .gd-card-thumb[style*="background-image"] {
  transform: scale(1.04);
}

.gd-card-thumb-icon {
  font-size: 2.8rem;
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--icon-color, var(--accent-light)) 18%, transparent), transparent 70%);
  position: relative;
}

.gd-card-thumb-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 62% 68%, rgba(0,0,0,0.18), transparent 60%);
}

.gd-card-thumb-video {
  background: linear-gradient(135deg, #1e1b4b, #0f172a);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gd-play-icon {
  width: 44px;
  height: 44px;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  padding-left: 3px;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 50%, transparent);
  transition: transform 0.2s, box-shadow 0.2s;
}

.gd-file-card:hover .gd-play-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 65%, transparent);
}

/* ─── Infos carte ────────────────────────────────────── */
.gd-card-info {
  padding: 0.6rem 0.7rem 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.gd-card-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd-card-size {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
  margin-top: 0.15rem;
}

/* ─── Actions carte ──────────────────────────────────── */
.gd-card-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.4rem;
  background: rgba(0,0,0,0.22);
  border-top: 1px solid rgba(255,255,255,0.05);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.18s, transform 0.18s;
}

.gd-icon-btn {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.55);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.gd-icon-btn:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent-light); transform: scale(1.1); }
.gd-icon-btn-del:hover { background: rgba(239,68,68,0.18) !important; color: #f87171 !important; }

/* ─── VUE LISTE ──────────────────────────────────────── */
.gd-files-list {
  display: flex !important;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.25rem;
  grid-template-columns: unset !important;
}

.gd-list-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 1rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  animation: gdListIn 0.28s cubic-bezier(0.4,0,0.2,1) both;
}

@keyframes gdListIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.gd-list-row:hover {
  background: rgba(255,255,255,0.05);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  transform: translateX(3px);
}

.gd-folder-row { border-color: rgba(245,158,11,0.1); }
.gd-folder-row:hover { border-color: rgba(245,158,11,0.28); }

.gd-list-row:hover .gd-list-actions { opacity: 1; }

.gd-list-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}

.gd-list-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.gd-list-name-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd-list-meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-shrink: 0;
}

.gd-list-size {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.32);
  min-width: 60px;
  text-align: right;
}

.gd-list-date {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.26);
  min-width: 90px;
  text-align: right;
}

.gd-list-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  opacity: 0;
  transition: opacity 0.18s;
  flex-shrink: 0;
}

/* ─── États vide / erreur / loading ─────────────────── */
.gd-loading, .gd-empty, .gd-error {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 4.5rem 2rem;
  color: rgba(255,255,255,0.3);
  text-align: center;
}

/* Pour vue liste */
.gd-files-list .gd-empty,
.gd-files-list .gd-loading,
.gd-files-list .gd-error {
  width: 100%;
}

.gd-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid color-mix(in srgb, var(--accent) 14%, transparent);
  border-top-color: var(--accent-light);
  border-radius: 50%;
  animation: gdSpin 0.75s linear infinite;
}

@keyframes gdSpin { to { transform: rotate(360deg); } }

.gd-empty-icon { opacity: 0.28; margin-bottom: 0.4rem; }
.gd-empty-title { font-size: 0.98rem; font-weight: 600; color: rgba(255,255,255,0.42); }
.gd-empty-hint { font-size: 0.8rem; color: rgba(255,255,255,0.25); max-width: 270px; line-height: 1.55; }
.gd-empty-hint strong { color: var(--accent-light); }

.gd-error-icon { font-size: 2.5rem; opacity: 0.55; }
.gd-error p { font-size: 0.88rem; }

/* ─── Partage — Badge & Modal ─────────────────────────── */
.gd-share-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent-light), #06b6d4);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 20px;
  margin-left: 4px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─── Modal Prévisualisation ─────────────────────────── */
.gd-preview-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}

.gd-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(10px);
  cursor: zoom-out;
}

.gd-preview-panel {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 1100px;
  max-height: 92vh;
  background: rgba(12,12,22,0.97);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
  animation: gdFadeIn 0.22s ease;
}

.gd-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  background: rgba(255,255,255,0.02);
}

.gd-preview-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd-preview-hdr-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

.gd-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.8rem;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.gd-preview-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-light); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.gd-preview-close-btn:hover { background: rgba(239,68,68,0.14); color: #f87171; border-color: rgba(239,68,68,0.28); }

.gd-preview-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: rgba(0,0,0,0.15);
}

.gd-preview-img { max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: 0 0 14px 14px; }
.gd-preview-video { width: 100%; max-height: 76vh; border-radius: 0 0 14px 14px; }
.gd-preview-iframe { width: 100%; height: 72vh; border: none; }

.gd-preview-audio-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 2rem;
}

.gd-preview-audio-icon { font-size: 4rem; opacity: 0.65; }
.gd-preview-audio-name { font-size: 1rem; font-weight: 600; color: rgba(255,255,255,0.65); text-align: center; }
.gd-preview-audio { width: 100%; max-width: 400px; }

.gd-preview-nope {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 3rem;
  text-align: center;
}

.gd-preview-nope-icon { font-size: 4rem; }
.gd-preview-nope-hint { font-size: 0.8rem; color: rgba(255,255,255,0.32); margin-bottom: 0.5rem; }

/* ─── Modal Déplacement ──────────────────────────────── */
.gd-move-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9100;
}

.gd-move-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
}

.gd-move-panel {
  position: relative;
  z-index: 1;
  background: rgba(14,14,24,0.98);
  backdrop-filter: blur(24px);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 18px;
  padding: 1.5rem;
  width: 340px;
  max-width: 90vw;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03);
  animation: gdFadeIn 0.2s ease;
}

.gd-move-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 1.1rem;
}

.gd-move-title svg { color: var(--accent-light); }

.gd-move-select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 9px;
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.gd-move-select:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.gd-move-select option { background: #12121e; color: #fff; }

.gd-move-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }

/* ─── Modal Partage ──────────────────────────────────── */
.gd-share-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9200;
}

.gd-share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.76);
  backdrop-filter: blur(6px);
}

.gd-share-panel {
  position: relative;
  z-index: 1;
  background: rgba(14,14,24,0.98);
  backdrop-filter: blur(24px);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 20px;
  padding: 1.8rem;
  width: 420px;
  max-width: 94vw;
  box-shadow:
    0 24px 80px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 0 1px rgba(255,255,255,0.03);
  animation: gdFadeIn 0.22s ease;
}

.gd-share-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 1.2rem;
}

.gd-share-url-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; }

.gd-share-url-input {
  flex: 1;
  padding: 0.52rem 0.8rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px;
  color: rgba(255,255,255,0.75);
  font-size: 0.78rem;
  font-family: monospace;
  outline: none;
}

.gd-share-copy-btn {
  padding: 0.52rem 0.9rem;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 9px;
  color: var(--accent-light);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.gd-share-copy-btn:hover { background: color-mix(in srgb, var(--accent) 35%, transparent); }

.gd-share-expiry-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.48);
}

.gd-share-expiry-btn {
  padding: 0.28rem 0.65rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 6px;
  color: rgba(255,255,255,0.65);
  font-size: 0.77rem;
  cursor: pointer;
  transition: all 0.15s;
}

.gd-share-expiry-btn:hover,
.gd-share-expiry-btn.active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent-light);
}

.gd-share-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gd-share-disable-btn {
  padding: 0.38rem 0.8rem;
  background: rgba(239,68,68,0.09);
  border: 1px solid rgba(239,68,68,0.22);
  border-radius: 7px;
  color: #f87171;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s;
}

.gd-share-disable-btn:hover { background: rgba(239,68,68,0.18); }

/* ─── Drive Picker (dans Messaging) ──────────────────── */
.gd-picker-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9300;
}

.gd-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
}

.gd-picker-panel {
  position: relative;
  z-index: 1;
  background: rgba(14,14,24,0.98);
  backdrop-filter: blur(24px);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 20px;
  padding: 1.5rem;
  width: 480px;
  max-width: 94vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  animation: gdFadeIn 0.22s ease;
}

.gd-picker-title {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 0.9rem;
}

.gd-picker-search {
  width: 100%;
  padding: 0.52rem 0.8rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px;
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
  outline: none;
  margin-bottom: 0.8rem;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.gd-picker-search:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

.gd-picker-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.gd-picker-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.52rem 0.7rem;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid transparent;
}

.gd-picker-item:hover { background: rgba(255,255,255,0.05); }
.gd-picker-item.selected {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.gd-picker-icon { font-size: 1.2rem; }
.gd-picker-name { flex: 1; font-size: 0.84rem; color: rgba(255,255,255,0.82); }
.gd-picker-size { font-size: 0.74rem; color: rgba(255,255,255,0.36); }

.gd-picker-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

/* ─── Animations globales ────────────────────────────── */
@keyframes gdFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .gd-container { padding: 1rem; }
  .gd-hero { padding: 1rem 1.1rem; }
  .gd-hero-icon { width: 40px; height: 40px; border-radius: 12px; }
  .gd-title { font-size: 1.2rem; }
  .gd-btn span { display: none; }
  .gd-btn { padding: 0.5rem 0.65rem; }
  .gd-files-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 0.7rem; }
  .gd-preview-panel { width: 96vw; max-height: 90vh; }
  .gd-list-meta { display: none; }
  .gd-toolbar { flex-direction: column; align-items: stretch; }
  .gd-toolbar-right { justify-content: flex-end; }
}

@media (max-width: 480px) {
  .gd-files-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .gd-quota-label { display: none; }
}



/* ===== css/giri-crm.css?v=2602240010 ===== */
/* ================================================================
   GIRI CRM — Premium CSS
   Kanban · Glassmorphism · Pipeline · Mobile-first
   v1.0 — 2026
   ================================================================ */

/* ── VARIABLES ───────────────────────────────────────────────── */
.gcrm-app {
    --gcrm-bg:         var(--bg-primary, #0f172a);
    --gcrm-bg2:        var(--bg-secondary, #1e293b);
    --gcrm-bg3:        var(--bg-tertiary, #334155);
    --gcrm-border:     var(--border-color, rgba(148,163,184,.15));
    --gcrm-text:       var(--text-primary, #f1f5f9);
    --gcrm-muted:      var(--text-secondary, #94a3b8);
    --gcrm-accent:     var(--accent-color, var(--accent));
    --gcrm-radius:     12px;
    --gcrm-radius-sm:  8px;
    --gcrm-shadow:     0 4px 24px rgba(0,0,0,.3);
    --gcrm-glass:      rgba(255,255,255,.03);
    --gcrm-transition: .2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    font-family: inherit;
    color: var(--gcrm-text);
    background: var(--gcrm-bg);
}

/* ── HEADER ──────────────────────────────────────────────────── */
.gcrm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px 14px;
    border-bottom: 1px solid var(--gcrm-border);
    background: var(--gcrm-glass);
    backdrop-filter: blur(10px);
    gap: 16px;
}
.gcrm-header-brand { display: flex; align-items: center; gap: 14px; }
.gcrm-logo {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--accent), #a855f7);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}
.gcrm-title { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--gcrm-text); }
.gcrm-subtitle { font-size: 0.8rem; color: var(--gcrm-muted); margin: 2px 0 0; }
.gcrm-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── TABS ────────────────────────────────────────────────────── */
.gcrm-tabs {
    display: flex;
    gap: 2px;
    padding: 12px 24px 0;
    background: var(--gcrm-bg);
    border-bottom: 1px solid var(--gcrm-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.gcrm-tabs::-webkit-scrollbar { display: none; }
.gcrm-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 18px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--gcrm-muted);
    font-size: 0.88rem; font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 6px 6px 0 0;
    transition: var(--gcrm-transition);
    font-family: inherit;
}
.gcrm-tab:hover { color: var(--gcrm-text); background: var(--gcrm-bg2); }
.gcrm-tab.active {
    color: var(--gcrm-accent);
    border-bottom-color: var(--gcrm-accent);
    background: var(--gcrm-bg2);
}

/* ── BODY ────────────────────────────────────────────────────── */
.gcrm-body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.gcrm-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border-radius: var(--gcrm-radius-sm);
    border: 1px solid var(--gcrm-border);
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
    transition: var(--gcrm-transition);
    font-family: inherit;
    white-space: nowrap;
    background: transparent;
    color: var(--gcrm-text);
}
.gcrm-btn:hover { filter: brightness(1.1); }
.gcrm-btn-primary {
    background: var(--gcrm-accent);
    border-color: var(--gcrm-accent);
    color: #fff;
}
.gcrm-btn-primary:hover { opacity: .88; }
.gcrm-btn-secondary { background: var(--gcrm-bg2); }
.gcrm-btn-danger { background: transparent; border-color: #ef4444; color: #ef4444; }
.gcrm-btn-danger:hover { background: #ef444420; }
.gcrm-btn-sm { padding: 5px 12px; font-size: 0.8rem; }
.gcrm-icon-btn {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--gcrm-border);
    border-radius: 6px;
    background: var(--gcrm-bg2);
    color: var(--gcrm-muted);
    cursor: pointer;
    transition: var(--gcrm-transition);
    font-size: 0;
}
.gcrm-icon-btn:hover { border-color: var(--gcrm-accent); color: var(--gcrm-accent); }
.gcrm-icon-btn--danger:hover { border-color: #ef4444; color: #ef4444; }

/* ── INPUTS ──────────────────────────────────────────────────── */
.gcrm-input, .gcrm-select, .gcrm-textarea {
    width: 100%; box-sizing: border-box;
    padding: 9px 12px;
    background: var(--gcrm-bg2);
    border: 1px solid var(--gcrm-border);
    border-radius: var(--gcrm-radius-sm);
    color: var(--gcrm-text);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color var(--gcrm-transition);
    outline: none;
}
.gcrm-input:focus, .gcrm-select:focus, .gcrm-textarea:focus {
    border-color: var(--gcrm-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.gcrm-textarea { resize: vertical; line-height: 1.5; }
.gcrm-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }

/* ── TOOLBAR ─────────────────────────────────────────────────── */
.gcrm-toolbar {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 24px;
    background: var(--gcrm-bg);
    border-bottom: 1px solid var(--gcrm-border);
    flex-wrap: wrap;
}
.gcrm-search-box {
    display: flex; align-items: center; gap: 8px;
    background: var(--gcrm-bg2);
    border: 1px solid var(--gcrm-border);
    border-radius: var(--gcrm-radius-sm);
    padding: 0 12px;
    flex: 1; min-width: 200px; max-width: 360px;
    transition: border-color var(--gcrm-transition);
}
.gcrm-search-box:focus-within { border-color: var(--gcrm-accent); }
.gcrm-search-icon { color: var(--gcrm-muted); flex-shrink: 0; }
.gcrm-search-input {
    flex: 1; background: none; border: none; outline: none;
    color: var(--gcrm-text); font-size: 0.9rem; padding: 9px 0;
    font-family: inherit;
}
.gcrm-search-input::placeholder { color: var(--gcrm-muted); }
.gcrm-toolbar-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.gcrm-toolbar-filters .gcrm-select,
.gcrm-toolbar-filters .gcrm-input { width: auto; min-width: 140px; flex: 1; max-width: 200px; }
.gcrm-toolbar-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* ── KPI CARDS ───────────────────────────────────────────────── */
.gcrm-kpis { padding: 16px 24px 0; }
.gcrm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.gcrm-kpi-card {
    background: var(--gcrm-bg2);
    border: 1px solid var(--gcrm-border);
    border-radius: var(--gcrm-radius);
    padding: 16px;
    display: flex; gap: 12px; align-items: flex-start;
    transition: border-color var(--gcrm-transition), transform var(--gcrm-transition);
}
.gcrm-kpi-card:hover { border-color: var(--gcrm-accent); transform: translateY(-2px); }
.gcrm-kpi-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}
.gcrm-kpi-value { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.gcrm-kpi-label { font-size: 0.82rem; font-weight: 600; color: var(--gcrm-text); margin-top: 4px; }
.gcrm-kpi-sub { font-size: 0.75rem; color: var(--gcrm-muted); }
.gcrm-kpi-skeleton {
    height: 80px;
    background: linear-gradient(90deg, var(--gcrm-bg2) 0%, var(--gcrm-bg3) 50%, var(--gcrm-bg2) 100%);
    background-size: 200% 100%;
    animation: gcrm-shimmer 1.5s infinite;
    border-radius: var(--gcrm-radius);
}
@keyframes gcrm-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ── TABLE ───────────────────────────────────────────────────── */
.gcrm-contact-list { padding: 16px 24px; overflow-x: auto; }
.gcrm-table {
    width: 100%; border-collapse: collapse; font-size: 0.875rem;
}
.gcrm-table th {
    padding: 10px 14px;
    text-align: left; font-weight: 600; font-size: 0.78rem;
    color: var(--gcrm-muted); text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--gcrm-border);
    white-space: nowrap;
}
.gcrm-table td { padding: 12px 14px; border-bottom: 1px solid var(--gcrm-border); vertical-align: middle; }
.gcrm-row { cursor: pointer; transition: background var(--gcrm-transition); }
.gcrm-row:hover { background: var(--gcrm-bg2); }
.gcrm-row:hover .gcrm-row-actions { opacity: 1; }
.gcrm-row-actions { display: flex; gap: 4px; opacity: 0; transition: opacity var(--gcrm-transition); }
.gcrm-table-sm td, .gcrm-table-sm th { padding: 8px 12px; }

/* ── CONTACT CELL ────────────────────────────────────────────── */
.gcrm-contact-cell { display: flex; align-items: center; gap: 10px; }
.gcrm-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
    color: #fff; flex-shrink: 0;
}
.gcrm-avatar-sm { width: 30px; height: 30px; font-size: 0.7rem; }
.gcrm-contact-name { font-weight: 600; color: var(--gcrm-text); }
.gcrm-contact-meta { font-size: 0.78rem; color: var(--gcrm-muted); margin-top: 2px; }
.gcrm-source, .gcrm-date { color: var(--gcrm-muted); font-size: 0.82rem; }

/* ── BADGES ──────────────────────────────────────────────────── */
.gcrm-badge {
    display: inline-block;
    padding: 3px 9px; border-radius: 20px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.gcrm-badge--lead     { background: #3b82f620; color: #3b82f6; }
.gcrm-badge--prospect { background: #f59e0b20; color: #f59e0b; }
.gcrm-badge--client   { background: #10b98120; color: #10b981; }
.gcrm-badge--inactive { background: #94a3b820; color: #94a3b8; }
.gcrm-badge--source   { background: var(--gcrm-bg3); color: var(--gcrm-muted); }

/* ── TAGS ────────────────────────────────────────────────────── */
.gcrm-tags-cell { display: flex; gap: 4px; flex-wrap: wrap; }
.gcrm-tag {
    background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-light);
    padding: 2px 8px; border-radius: 20px; font-size: 0.72rem; font-weight: 500;
}
.gcrm-tag--more { background: var(--gcrm-bg3); color: var(--gcrm-muted); }

/* ── PAGINATION ──────────────────────────────────────────────── */
.gcrm-pagination {
    padding: 12px 24px;
    display: flex; gap: 12px; align-items: center; justify-content: center;
    border-top: 1px solid var(--gcrm-border);
}
.gcrm-pagination-info { color: var(--gcrm-muted); font-size: 0.85rem; }

/* ── CONTACTS LAYOUT ─────────────────────────────────────────── */
.gcrm-contacts-layout { display: flex; flex-direction: column; height: 100%; }

/* ═══════════════════════════════════════════════════════════════
   PIPELINE / KANBAN
═══════════════════════════════════════════════════════════════ */
.gcrm-pipeline-layout { display: flex; flex-direction: column; height: 100%; padding: 20px 24px; gap: 16px; }
.gcrm-pipeline-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }

.gcrm-board {
    display: flex; gap: 14px;
    overflow-x: auto; overflow-y: hidden;
    flex: 1; min-height: 0;
    padding-bottom: 8px;
}
.gcrm-board::-webkit-scrollbar { height: 6px; }
.gcrm-board::-webkit-scrollbar-track { background: var(--gcrm-bg2); border-radius: 3px; }
.gcrm-board::-webkit-scrollbar-thumb { background: var(--gcrm-bg3); border-radius: 3px; }

.gcrm-column {
    min-width: 270px; max-width: 300px; flex: 1;
    background: var(--gcrm-bg2);
    border-radius: var(--gcrm-radius);
    border: 1px solid var(--gcrm-border);
    display: flex; flex-direction: column;
    transition: border-color var(--gcrm-transition);
    overflow: hidden;
}
.gcrm-column.drag-over {
    border-color: var(--gcrm-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.gcrm-col-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px 12px;
    border-bottom: 2px solid var(--gcrm-border);
    flex-shrink: 0;
}
.gcrm-col-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.88rem; }
.gcrm-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gcrm-col-count {
    background: var(--gcrm-bg3); color: var(--gcrm-muted);
    padding: 1px 8px; border-radius: 12px; font-size: 0.78rem; font-weight: 600;
}
.gcrm-col-value { padding: 6px 16px; font-size: 0.8rem; color: var(--gcrm-muted); border-bottom: 1px solid var(--gcrm-border); }
.gcrm-cards {
    flex: 1; overflow-y: auto; padding: 10px;
    display: flex; flex-direction: column; gap: 8px;
    min-height: 60px;
}
.gcrm-cards::-webkit-scrollbar { width: 4px; }
.gcrm-cards::-webkit-scrollbar-thumb { background: var(--gcrm-bg3); border-radius: 2px; }
.gcrm-col-empty { text-align: center; color: var(--gcrm-muted); font-size: 0.8rem; padding: 20px; }

/* ── DEAL CARDS ──────────────────────────────────────────────── */
.gcrm-deal-card {
    background: var(--gcrm-bg);
    border: 1px solid var(--gcrm-border);
    border-radius: var(--gcrm-radius-sm);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    transition: transform var(--gcrm-transition), box-shadow var(--gcrm-transition), border-color var(--gcrm-transition);
}
.gcrm-deal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    border-color: var(--gcrm-accent);
}
.gcrm-deal-bar { width: 3px; flex-shrink: 0; }
.gcrm-deal-content { flex: 1; padding: 10px 12px; }
.gcrm-deal-title { font-weight: 600; font-size: 0.88rem; color: var(--gcrm-text); margin-bottom: 5px; }
.gcrm-deal-contact {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.78rem; color: var(--gcrm-muted); margin-bottom: 8px;
}
.gcrm-deal-footer { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.gcrm-deal-amount { font-weight: 700; font-size: 0.88rem; color: var(--gcrm-accent); }
.gcrm-deal-date { font-size: 0.75rem; color: var(--gcrm-muted); }
.gcrm-deal-prob { font-size: 0.75rem; font-weight: 600; }

/* ── DEAL DETAIL HEADER ──────────────────────────────────────── */
.gcrm-deal-header-badge {
    padding: 4px 12px; border-radius: 20px;
    font-size: 0.82rem; font-weight: 700;
    flex-shrink: 0;
}

/* ── STAGE BUTTONS ───────────────────────────────────────────── */
.gcrm-stage-buttons { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.gcrm-stage-btn {
    padding: 6px 14px;
    border: 1px solid var(--stage-color, var(--accent));
    border-radius: 20px;
    background: transparent;
    color: var(--stage-color, var(--accent));
    font-size: 0.8rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: var(--gcrm-transition);
    opacity: .7;
}
.gcrm-stage-btn:hover, .gcrm-stage-btn.active {
    background: var(--stage-color, var(--accent));
    color: #fff; opacity: 1;
}

/* ── ACTIVITY FORM ───────────────────────────────────────────── */
.gcrm-activity-form { display: flex; gap: 8px; align-items: stretch; }
.gcrm-activity-form .gcrm-input { flex: 1; }
.gcrm-activity-form .gcrm-select { width: auto; }

/* ═══════════════════════════════════════════════════════════════
   STATS — GLASSMORPHISM
═══════════════════════════════════════════════════════════════ */
.gcrm-stats-layout { padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.gcrm-stats-section-title {
    font-size: 0.8rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gcrm-muted); margin-bottom: 14px;
}
.gcrm-stats-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }

.gcrm-stat-glass {
    background: linear-gradient(135deg,
        rgba(255,255,255,.04) 0%,
        rgba(255,255,255,.01) 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-top-color: rgba(255,255,255,.15);
    border-radius: var(--gcrm-radius);
    padding: 20px 18px;
    text-align: center;
    backdrop-filter: blur(10px);
    position: relative; overflow: hidden;
    transition: transform var(--gcrm-transition), box-shadow var(--gcrm-transition);
}
.gcrm-stat-glass::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, var(--stat-color, var(--accent)) 0%, transparent 70%);
    opacity: .08; pointer-events: none;
}
.gcrm-stat-glass:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.3); }
.gcrm-stat-glass-icon { font-size: 1.5rem; margin-bottom: 10px; }
.gcrm-stat-glass-value {
    font-size: 1.5rem; font-weight: 800;
    color: var(--stat-color, var(--accent));
    line-height: 1;
}
.gcrm-stat-glass-label { font-size: 0.78rem; color: var(--gcrm-muted); margin-top: 6px; font-weight: 500; }

/* Status bars */
.gcrm-status-bars { display: flex; flex-direction: column; gap: 12px; max-width: 600px; }
.gcrm-status-bar-row { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.gcrm-status-bar-label { min-width: 80px; color: var(--gcrm-text); font-weight: 500; }
.gcrm-status-bar-track { flex: 1; height: 8px; background: var(--gcrm-bg2); border-radius: 4px; overflow: hidden; }
.gcrm-status-bar-fill { height: 100%; border-radius: 4px; transition: width .6s ease; }
.gcrm-status-bar-value { min-width: 32px; text-align: right; font-weight: 700; color: var(--gcrm-text); }
.gcrm-status-bar-pct { min-width: 36px; color: var(--gcrm-muted); font-size: 0.78rem; }

/* Recent contacts */
.gcrm-recent-contacts { display: flex; flex-direction: column; gap: 4px; max-width: 600px; }
.gcrm-recent-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: var(--gcrm-radius-sm);
    cursor: pointer; transition: background var(--gcrm-transition);
}
.gcrm-recent-row:hover { background: var(--gcrm-bg2); }
.gcrm-recent-info { flex: 1; }

/* ═══════════════════════════════════════════════════════════════
   RELANCES
═══════════════════════════════════════════════════════════════ */
.gcrm-relances-layout { padding: 24px; }
.gcrm-relances-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.gcrm-section-title-h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; }
.gcrm-relances-placeholder { text-align: center; padding: 60px 20px; }
.gcrm-relances-summary {
    background: var(--gcrm-bg2); border: 1px solid var(--gcrm-border);
    border-radius: var(--gcrm-radius-sm); padding: 12px 16px;
    margin-bottom: 16px; font-size: 0.9rem; color: var(--gcrm-muted);
}
.gcrm-relances-list { display: flex; flex-direction: column; gap: 6px; }
.gcrm-relance-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--gcrm-bg2);
    border: 1px solid var(--gcrm-border); border-radius: var(--gcrm-radius-sm);
    transition: border-color var(--gcrm-transition);
}
.gcrm-relance-row:hover { border-color: var(--gcrm-accent); }
.gcrm-relance-urgency { width: 4px; height: 36px; border-radius: 2px; flex-shrink: 0; }
.gcrm-urgency--high   .gcrm-relance-urgency { background: #ef4444; }
.gcrm-urgency--medium .gcrm-relance-urgency { background: #f59e0b; }
.gcrm-urgency--low    .gcrm-relance-urgency { background: #10b981; }
.gcrm-relance-info { flex: 1; min-width: 0; }
.gcrm-relance-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gcrm-relance-age { font-size: 0.78rem; font-weight: 600; }
.gcrm-urgency-text--high   { color: #ef4444; }
.gcrm-urgency-text--medium { color: #f59e0b; }
.gcrm-urgency-text--low    { color: #10b981; }
.gcrm-relance-actions { display: flex; gap: 6px; }

/* ═══════════════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════════════ */
.gcrm-modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 9000;
    justify-content: center; align-items: center;
    padding: 16px;
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .25s ease;
}
.gcrm-modal-overlay.open { opacity: 1; }
.gcrm-modal {
    background: var(--bg-primary, #0f172a);
    border: 1px solid var(--gcrm-border);
    border-radius: 16px;
    width: 100%; max-width: 680px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
    transform: translateY(20px);
    transition: transform .25s ease;
}
.gcrm-modal-overlay.open .gcrm-modal { transform: translateY(0); }
.gcrm-modal::-webkit-scrollbar { width: 6px; }
.gcrm-modal::-webkit-scrollbar-thumb { background: var(--gcrm-bg3); border-radius: 3px; }

.gcrm-modal-header {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gcrm-border);
    position: sticky; top: 0; background: inherit; z-index: 1;
}
.gcrm-modal-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.gcrm-modal-contact-info { flex: 1; }
.gcrm-modal-name { font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; color: var(--gcrm-text); }
.gcrm-modal-sub { font-size: 0.82rem; color: var(--gcrm-muted); }
.gcrm-modal-close {
    width: 32px; height: 32px; flex-shrink: 0;
    border: none; background: none; cursor: pointer;
    color: var(--gcrm-muted); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: var(--gcrm-transition); font-size: 0;
}
.gcrm-modal-close:hover { background: var(--gcrm-bg3); color: var(--gcrm-text); }

.gcrm-modal-body { padding: 20px 24px; }
.gcrm-modal-footer {
    display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
    padding: 16px 24px;
    border-top: 1px solid var(--gcrm-border);
    position: sticky; bottom: 0; background: inherit;
}

/* ── MODAL COLUMNS ───────────────────────────────────────────── */
.gcrm-modal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.gcrm-modal-col { display: flex; flex-direction: column; gap: 0; }
.gcrm-section-title {
    font-size: 0.75rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gcrm-muted); margin-bottom: 8px;
}

/* ── DETAIL STATS ────────────────────────────────────────────── */
.gcrm-detail-stats {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr));
    gap: 10px; margin-bottom: 16px;
}
.gcrm-detail-stat {
    background: var(--gcrm-bg2); border: 1px solid var(--gcrm-border);
    border-radius: var(--gcrm-radius-sm); padding: 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.gcrm-detail-stat-value { font-size: 1rem; font-weight: 700; color: var(--gcrm-text); }
.gcrm-detail-stat-label { font-size: 0.75rem; color: var(--gcrm-muted); }

/* ── NOTES & TAGS ────────────────────────────────────────────── */
.gcrm-note-form, .gcrm-tag-form { display: flex; flex-direction: column; gap: 8px; }
.gcrm-tag-form { flex-direction: row; }
.gcrm-tag-form .gcrm-input { flex: 1; }
.gcrm-note-display {
    background: var(--gcrm-bg2); border: 1px solid var(--gcrm-border);
    border-radius: var(--gcrm-radius-sm); padding: 10px 12px;
    font-size: 0.85rem; color: var(--gcrm-muted); white-space: pre-wrap;
}

/* ── MINI DEALS ──────────────────────────────────────────────── */
.gcrm-mini-deals { display: flex; flex-direction: column; gap: 6px; }
.gcrm-mini-deal {
    background: var(--gcrm-bg2); border: 1px solid var(--gcrm-border);
    border-radius: var(--gcrm-radius-sm); padding: 10px 12px;
    display: flex; align-items: center; gap: 10px;
}
.gcrm-mini-deal-stage { padding: 2px 8px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; flex-shrink: 0; }
.gcrm-mini-deal-title { flex: 1; font-size: 0.85rem; font-weight: 500; }
.gcrm-mini-deal-amount { font-size: 0.85rem; font-weight: 700; color: var(--gcrm-accent); }

/* ── TIMELINE ────────────────────────────────────────────────── */
.gcrm-timeline { display: flex; flex-direction: column; gap: 2px; }
.gcrm-timeline-item { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.gcrm-timeline-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
    background: var(--gcrm-bg3);
}
.gcrm-tl--call      { background: #3b82f6; }
.gcrm-tl--email     { background: var(--accent); }
.gcrm-tl--meeting   { background: #10b981; }
.gcrm-tl--note      { background: #f59e0b; }
.gcrm-tl--task      { background: #a855f7; }
.gcrm-tl--import    { background: #94a3b8; }
.gcrm-tl--status_change { background: #f97316; }
.gcrm-tl--tag_added { background: #14b8a6; }
.gcrm-timeline-content { flex: 1; }
.gcrm-timeline-title { font-size: 0.85rem; font-weight: 500; color: var(--gcrm-text); }
.gcrm-timeline-time { font-size: 0.75rem; color: var(--gcrm-muted); }

/* ── FORM GRID ───────────────────────────────────────────────── */
.gcrm-form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.gcrm-form-group { display: flex; flex-direction: column; gap: 5px; }
.gcrm-span2 { grid-column: 1 / -1; }
.gcrm-label { font-size: 0.78rem; font-weight: 600; color: var(--gcrm-muted); }

/* ── IMPORT ──────────────────────────────────────────────────── */
.gcrm-import-drop {
    border: 2px dashed var(--gcrm-border);
    border-radius: var(--gcrm-radius);
    padding: 32px 20px; text-align: center;
    color: var(--gcrm-muted);
    transition: border-color var(--gcrm-transition), background var(--gcrm-transition);
}
.gcrm-import-drop.drag-over { border-color: var(--gcrm-accent); background: color-mix(in srgb, var(--accent) 4%, transparent); }
.gcrm-import-drop svg { color: var(--gcrm-muted); margin-bottom: 8px; }
.gcrm-import-hint { font-size: 0.78rem; margin-top: 8px; }
.gcrm-import-hint code { background: var(--gcrm-bg2); padding: 2px 6px; border-radius: 4px; font-family: monospace; }
.gcrm-import-summary { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-light); border-radius: var(--gcrm-radius-sm); padding: 10px 14px; font-size: 0.9rem; margin-bottom: 12px; }
.gcrm-import-table-wrap { overflow-x: auto; border-radius: var(--gcrm-radius-sm); border: 1px solid var(--gcrm-border); }

/* ── STATES ──────────────────────────────────────────────────── */
.gcrm-loading {
    display: flex; align-items: center; gap: 12px;
    justify-content: center; padding: 40px 20px;
    color: var(--gcrm-muted); font-size: 0.9rem;
}
.gcrm-spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--gcrm-bg3);
    border-top-color: var(--gcrm-accent);
    border-radius: 50%;
    animation: gcrm-spin .7s linear infinite;
}
@keyframes gcrm-spin { to { transform: rotate(360deg); } }

.gcrm-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 20px; text-align: center;
    gap: 10px;
}
.gcrm-empty-icon { font-size: 2.5rem; }
.gcrm-empty-title { font-size: 1rem; font-weight: 600; color: var(--gcrm-text); }
.gcrm-empty-sub { font-size: 0.85rem; color: var(--gcrm-muted); }
.gcrm-error { padding: 16px 20px; background: #ef444415; border: 1px solid #ef444430; border-radius: var(--gcrm-radius-sm); color: #ef4444; font-size: 0.88rem; }

/* ── TOAST ───────────────────────────────────────────────────── */
.gcrm-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 10000;
    padding: 12px 20px; border-radius: 10px;
    font-size: 0.9rem; font-weight: 500; color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    animation: gcrm-toast-in .3s ease;
}
@keyframes gcrm-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.gcrm-toast--success { background: #10b981; }
.gcrm-toast--error   { background: #ef4444; }
.gcrm-toast--warning { background: #f59e0b; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .gcrm-header { padding: 14px 16px 12px; }
    .gcrm-tabs { padding: 8px 12px 0; }
    .gcrm-tab { padding: 8px 12px; font-size: 0.82rem; }
    .gcrm-toolbar { padding: 12px 16px; gap: 8px; }
    .gcrm-toolbar-actions { width: 100%; justify-content: flex-end; margin-left: 0; }
    .gcrm-search-box { max-width: 100%; }
    .gcrm-kpis { padding: 12px 16px 0; }
    .gcrm-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
    .gcrm-contact-list { padding: 12px 16px; }
    .gcrm-table th:nth-child(3),
    .gcrm-table td:nth-child(3),
    .gcrm-table th:nth-child(5),
    .gcrm-table td:nth-child(5) { display: none; }
    .gcrm-pipeline-layout { padding: 12px 16px; }
    .gcrm-board { gap: 10px; }
    .gcrm-column { min-width: 230px; }
    .gcrm-stats-layout { padding: 16px; }
    .gcrm-stats-row { grid-template-columns: repeat(2, 1fr); }
    .gcrm-modal { max-height: 95vh; border-radius: 12px 12px 0 0; align-self: flex-end; }
    .gcrm-modal-overlay { align-items: flex-end; padding: 0; }
    .gcrm-modal-cols { grid-template-columns: 1fr; }
    .gcrm-form-grid { grid-template-columns: 1fr; }
    .gcrm-span2 { grid-column: 1; }
    .gcrm-relances-layout { padding: 16px; }
    .gcrm-relances-header { flex-direction: column; gap: 12px; }
    .gcrm-relance-row { flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .gcrm-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .gcrm-table th:nth-child(4),
    .gcrm-table td:nth-child(4) { display: none; }
    .gcrm-stats-row { grid-template-columns: 1fr 1fr; }
    .gcrm-detail-stats { grid-template-columns: 1fr 1fr; }
}


/* ===== css/giri-report.css?v=2602240010 ===== */
/**
 * GIRI REPORT — Styles glassmorphism
 * v1.0 — 2026-02-23
 */

/* ─── LAYOUT ──────────────────────────────────────────────── */
#view-giri-report {
    padding: 0 !important;
    overflow-y: auto;
    height: calc(100vh - 60px);
}

.gr-dashboard {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 40px 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ─── HEADER ─────────────────────────────────────────────── */
.gr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.gr-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-light), #38bdf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gr-subtitle {
    color: var(--text-muted, #94a3b8);
    font-size: 0.85rem;
    margin: 4px 0 0;
}

.gr-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* ─── CARDS ──────────────────────────────────────────────── */
.gr-card {
    background: var(--glass-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-radius: 16px;
    padding: 24px 28px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.2s;
}

.gr-card:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.gr-card--error {
    border-color: rgba(239,68,68,0.4);
    text-align: center;
    padding: 48px;
    color: var(--text-muted, #94a3b8);
}

.gr-icon-xl {
    display: block;
    font-size: 3rem;
    margin-bottom: 12px;
}

.gr-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.gr-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #e2e8f0);
}

/* ─── PM2 GRID ───────────────────────────────────────────── */
.gr-pm2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
}

.gr-stat {
    text-align: center;
    padding: 16px 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}

.gr-stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}

.gr-stat-total {
    font-size: 1rem;
    opacity: 0.6;
}

.gr-stat-unit {
    font-size: 0.85rem;
    opacity: 0.7;
}

.gr-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ─── RESOURCES GRID ─────────────────────────────────────── */
.gr-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.gr-card--resource {
    padding: 20px 24px;
}

.gr-resource-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.gr-resource-icon {
    font-size: 1.4rem;
}

.gr-resource-label {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
}

.gr-resource-pct {
    font-size: 1.2rem;
    font-weight: 700;
}

.gr-progress-wrap {
    background: rgba(255,255,255,0.07);
    border-radius: 99px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.gr-progress-bar {
    height: 100%;
    border-radius: 99px;
    transition: width 0.6s ease;
}

.gr-progress--ok  { background: linear-gradient(90deg, #10b981, #34d399); }
.gr-progress--warn { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.gr-progress--err { background: linear-gradient(90deg, #ef4444, #f87171); }

.gr-resource-detail {
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
}

/* ─── COLOR UTILITIES ────────────────────────────────────── */
.gr-ok   { color: #34d399; }
.gr-warn { color: #fbbf24; }
.gr-err  { color: #f87171; }
.gr-muted { color: var(--text-muted, #94a3b8); font-size: 0.88rem; }

/* ─── BADGE ──────────────────────────────────────────────── */
.gr-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 99px;
    text-transform: uppercase;
}

.gr-badge--ok   { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
.gr-badge--warn { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.gr-badge--err  { background: rgba(239,68,68,0.15);  color: #f87171; border: 1px solid rgba(248,113,113,0.3); }

/* ─── BUTTONS ────────────────────────────────────────────── */
.gr-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.gr-btn--ghost {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: var(--text-primary, #e2e8f0);
}

.gr-btn--ghost:hover {
    background: rgba(255,255,255,0.09);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.gr-btn--ghost.active {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent-light);
}

.gr-btn--deploy {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}

.gr-btn--deploy:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent);
}

.gr-btn--deploy:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.gr-btn--sm {
    padding: 5px 12px;
    font-size: 0.78rem;
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    color: var(--text-primary, #e2e8f0);
}

.gr-btn--sm:hover {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.gr-btn--sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── TABS ───────────────────────────────────────────────── */
.gr-tabs {
    display: flex;
    gap: 4px;
}

.gr-tab {
    padding: 5px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.2s;
}

.gr-tab:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary, #e2e8f0);
}

.gr-tab.active {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent-light);
    font-weight: 600;
}

/* ─── LOGS ───────────────────────────────────────────────── */
.gr-panel {
    display: none;
}

.gr-panel.active {
    display: block;
}

.gr-log {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 16px;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.78rem;
    line-height: 1.6;
    color: #94a3b8;
    max-height: 320px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

.gr-log--error {
    color: #fca5a5;
    border-color: rgba(239,68,68,0.15);
}

.gr-log--deploy {
    color: #86efac;
    border-color: rgba(16,185,129,0.15);
}

/* ─── SMOKE TESTS ────────────────────────────────────────── */
.gr-smoke {
    padding: 8px 0;
}

.gr-smoke-score {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 12px;
}

.gr-pct {
    font-size: 1.4rem;
}

.gr-smoke-ratio {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.7;
}

.gr-smoke-fails {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gr-smoke-fails li {
    font-size: 0.82rem;
    padding: 4px 8px;
    background: rgba(239,68,68,0.08);
    border-radius: 6px;
    border-left: 3px solid #ef4444;
}

.gr-loading {
    color: var(--text-muted, #94a3b8);
    font-style: italic;
    font-size: 0.88rem;
}

/* ─── SKELETON ───────────────────────────────────────────── */
.gr-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.gr-skeleton {
    height: 140px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 100%);
    background-size: 200% 100%;
    animation: gr-shimmer 1.5s infinite;
}

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

/* ─── TOAST ──────────────────────────────────────────────── */
.gr-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 500;
    z-index: 99999;
    backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.25s ease;
    pointer-events: none;
}

.gr-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.gr-toast--ok  {
    background: rgba(16,185,129,0.15);
    border: 1px solid rgba(52,211,153,0.35);
    color: #34d399;
}

.gr-toast--err {
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(248,113,113,0.35);
    color: #f87171;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .gr-dashboard {
        padding: 20px 16px 40px;
    }
    .gr-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .gr-header-actions {
        width: 100%;
    }
    .gr-pm2-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .gr-title {
        font-size: 1.4rem;
    }
}


/* ===== css/giri-compress.css?v=2602240010 ===== */
/**
 * GIRI COMPRESS v1.0
 * Compresseur universel — Images, PDF, Vidéo, Audio
 */

/* ── Wrapper ────────────────────────────────────────── */
.gc-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  color: var(--text-primary, #e2e8f0);
}

/* ── Header ─────────────────────────────────────────── */
.gc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.gc-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gc-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}

.gc-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gc-subtitle {
  font-size: .8rem;
  color: var(--text-muted, #94a3b8);
  margin: 0;
  letter-spacing: .02em;
}

/* ── Preset buttons ──────────────────────────────────── */
.gc-presets {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gc-preset-label {
  font-size: .8rem;
  color: var(--text-muted, #94a3b8);
  margin-right: 4px;
}

.gc-preset-btn {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border-color, rgba(255,255,255,.1));
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}

.gc-preset-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.gc-preset-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ── Drop zone ───────────────────────────────────────── */
.gc-dropzone {
  border: 2px dashed var(--border-color, rgba(255,255,255,.1));
  border-radius: 16px;
  padding: 52px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--card-bg, rgba(255,255,255,.02));
  transition: border-color .2s, background .2s;
  cursor: default;
}

.gc-dropzone.gc-drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.gc-drop-icon {
  color: var(--text-muted, #64748b);
  margin-bottom: 16px;
  transition: color .2s;
}
.gc-drag-over .gc-drop-icon { color: var(--accent); }

.gc-drop-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 6px;
}

.gc-drop-sub {
  font-size: .78rem;
  color: var(--text-muted, #64748b);
  margin: 0 0 20px;
  letter-spacing: .03em;
}

/* ── Buttons ─────────────────────────────────────────── */
.gc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.gc-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.gc-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.gc-btn-primary:hover:not(:disabled) { filter: brightness(1.1); }

.gc-btn-ghost {
  background: var(--btn-ghost-bg, rgba(255,255,255,.06));
  color: var(--text-secondary, #94a3b8);
  border: 1px solid var(--border-color, rgba(255,255,255,.08));
}
.gc-btn-ghost:hover:not(:disabled) {
  background: var(--btn-ghost-hover, rgba(255,255,255,.1));
  color: var(--text-primary, #e2e8f0);
}

.gc-btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, .3);
}
.gc-btn-success:hover:not(:disabled) { filter: brightness(1.1); }

.gc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: var(--btn-ghost-bg, rgba(255,255,255,.06));
  color: var(--text-muted, #64748b);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.gc-icon-btn:hover { background: rgba(255,255,255,.12); color: var(--text-primary, #e2e8f0); }
.gc-dl-btn:hover   { background: rgba(16, 185, 129, .15); color: #10b981; }
.gc-remove-btn:hover { background: rgba(239, 68, 68, .15); color: #ef4444; }

/* ── File list ───────────────────────────────────────── */
.gc-file-list {
  margin-top: 20px;
  border: 1px solid var(--border-color, rgba(255,255,255,.08));
  border-radius: 14px;
  background: var(--card-bg, rgba(255,255,255,.02));
  overflow: hidden;
}

.gc-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,.06));
}

.gc-list-count {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
}

.gc-list-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── File items ──────────────────────────────────────── */
.gc-items {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
}

.gc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--item-bg, rgba(255,255,255,.03));
  border: 1px solid var(--border-color, rgba(255,255,255,.05));
  transition: background .15s;
}
.gc-item:hover { background: var(--item-hover, rgba(255,255,255,.055)); }

.gc-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gc-type-image { background: rgba(59, 130, 246, .15); color: #3b82f6; }
.gc-type-pdf   { background: rgba(239, 68, 68, .15);  color: #ef4444; }
.gc-type-video { background: rgba(168, 85, 247, .15); color: #a855f7; }
.gc-type-audio { background: rgba(16, 185, 129, .15); color: #10b981; }
.gc-type-file  { background: rgba(100, 116, 139, .15); color: #64748b; }

.gc-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gc-item-name {
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gc-item-size {
  font-size: .72rem;
  color: var(--text-muted, #64748b);
}

.gc-item-status {
  flex-shrink: 0;
}

.gc-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Badges ──────────────────────────────────────────── */
.gc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
}

.gc-badge-pending {
  background: rgba(100, 116, 139, .15);
  color: #94a3b8;
}

.gc-badge-loading {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

.gc-badge-error {
  background: rgba(239, 68, 68, .15);
  color: #ef4444;
}

/* ── Result stats per item ───────────────────────────── */
.gc-result-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
}

.gc-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.gc-stat-label {
  font-size: .65rem;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.gc-stat-val { font-weight: 600; }

.gc-stat-after { color: #10b981; }

.gc-stat-arrow {
  color: var(--text-muted, #64748b);
  font-size: .8rem;
}

.gc-savings {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: .72rem;
  font-weight: 700;
}
.gc-savings-pos  { background: rgba(16, 185, 129, .15); color: #10b981; }
.gc-savings-zero { background: rgba(100, 116, 139, .1);  color: #64748b; }

/* ── Spinner ─────────────────────────────────────────── */
.gc-spinner-sm {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gc-spin .6s linear infinite;
  vertical-align: middle;
}

@keyframes gc-spin {
  to { transform: rotate(360deg); }
}

/* ── Results footer ──────────────────────────────────── */
.gc-results-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--border-color, rgba(255,255,255,.06));
  background: var(--footer-bg, rgba(16, 185, 129, .04));
}

.gc-total-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
}

.gc-total-label {
  color: var(--text-muted, #64748b);
  font-weight: 500;
}

.gc-total-val {
  font-weight: 700;
}

/* ── Scrollbar ───────────────────────────────────────── */
.gc-items::-webkit-scrollbar { width: 4px; }
.gc-items::-webkit-scrollbar-track { background: transparent; }
.gc-items::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 600px) {
  .gc-header { flex-direction: column; align-items: flex-start; }
  .gc-result-stats { flex-wrap: wrap; gap: 4px; }
  .gc-list-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .gc-results-footer { flex-direction: column; align-items: flex-start; }
}


/* ===== css/giri-brain.css?v=2602240010 ===== */
/**
 * GIRI BRAIN v1.0 — CSS
 * Design glassmorphism cohérent avec ProductiveApp
 */

/* ── Variables ────────────────────────────────────────────────────────────── */
#view-giri-brain {
  --gb-bg:        rgba(255,255,255,0.03);
  --gb-surface:   rgba(255,255,255,0.06);
  --gb-border:    rgba(255,255,255,0.1);
  --gb-text:      #e2e8f0;
  --gb-text-muted:#94a3b8;
  --gb-accent:    var(--accent-light);
  --gb-accent2:   var(--accent);
  --gb-green:     #10b981;
  --gb-yellow:    #f59e0b;
  --gb-red:       #ef4444;
  --gb-radius:    12px;
  --gb-radius-sm: 8px;
  --gb-shadow:    0 4px 20px rgba(0,0,0,0.3);
  color: var(--gb-text);
  font-size: 14px;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.gb-wrap {
  display: flex;
  height: 100%;
  min-height: 0;
  gap: 0;
  overflow: hidden;
}

/* ── Left panel ───────────────────────────────────────────────────────────── */
.gb-left {
  width: 280px;
  min-width: 220px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  background: var(--gb-surface);
  border-right: 1px solid var(--gb-border);
  overflow: hidden;
  flex-shrink: 0;
}

.gb-left-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--gb-border);
}

.gb-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gb-search-wrap {
  position: relative;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gb-border);
}
.gb-search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gb-text-muted);
  pointer-events: none;
}
.gb-search-input {
  width: 100%;
  padding: 7px 10px 7px 30px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius-sm);
  color: var(--gb-text);
  font-size: 13px;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.gb-search-input:focus { border-color: var(--gb-accent); }
.gb-search-input::placeholder { color: var(--gb-text-muted); }

.gb-file-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.gb-empty-list {
  text-align: center;
  padding: 32px 16px;
  color: var(--gb-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.gb-empty-list svg { display: block; margin: 0 auto 12px; }

.gb-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  border-radius: 0;
  transition: background .15s;
  border-left: 3px solid transparent;
}
.gb-file-item:hover  { background: rgba(255,255,255,0.05); }
.gb-file-item.active { background: color-mix(in srgb, var(--accent) 12%, transparent); border-left-color: var(--gb-accent); }

.gb-file-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }

.gb-file-info { min-width: 0; }
.gb-file-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--gb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gb-file-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--gb-text-muted);
  margin-top: 2px;
}

/* Status dots */
.gb-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.gb-status-pending     { background: var(--gb-text-muted); }
.gb-status-processing,
.gb-status-analyzing   { background: var(--gb-yellow); animation: gb-pulse 1s infinite; }
.gb-status-transcribed { background: #3b82f6; }
.gb-status-done        { background: var(--gb-green); }
.gb-status-error       { background: var(--gb-red); }

@keyframes gb-pulse {
  0%,100% { opacity: 1; } 50% { opacity: 0.4; }
}

/* ── Right panel ──────────────────────────────────────────────────────────── */
.gb-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Welcome ──────────────────────────────────────────────────────────────── */
.gb-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
}
.gb-welcome-icon { font-size: 56px; margin-bottom: 16px; }
.gb-welcome h3   { font-size: 20px; font-weight: 700; margin: 0 0 10px; color: var(--gb-text); }
.gb-welcome p    { color: var(--gb-text-muted); line-height: 1.7; margin: 0 0 24px; }
.gb-welcome-hint { font-size: 12px !important; margin: 12px 0 0 !important; }

/* ── Detail ───────────────────────────────────────────────────────────────── */
.gb-detail {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gb-detail-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gb-border);
  flex-shrink: 0;
}

.gb-detail-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.gb-detail-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--gb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gb-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.gb-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--gb-text-muted);
  margin-bottom: 12px;
}
.gb-meta span {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--gb-border);
  padding: 2px 8px;
  border-radius: 20px;
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.gb-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.gb-badge-pending     { background: rgba(148,163,184,0.15); color: #94a3b8; }
.gb-badge-processing,
.gb-badge-analyzing   { background: rgba(245,158,11,0.15); color: var(--gb-yellow); }
.gb-badge-transcribed { background: rgba(59,130,246,0.15); color: #60a5fa; }
.gb-badge-done        { background: rgba(16,185,129,0.12); color: var(--gb-green); }
.gb-badge-error       { background: rgba(239,68,68,0.15);  color: var(--gb-red); }

/* ── Player ───────────────────────────────────────────────────────────────── */
.gb-player-wrap {
  margin-top: 4px;
}
.gb-audio-player {
  width: 100%;
  height: 36px;
  border-radius: var(--gb-radius-sm);
  accent-color: var(--gb-accent);
}
.gb-video-player {
  width: 100%;
  max-height: 180px;
  border-radius: var(--gb-radius-sm);
  background: #000;
}
.gb-player-info {
  font-size: 11px;
  color: var(--gb-text-muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Progress ─────────────────────────────────────────────────────────────── */
.gb-progress-wrap {
  margin-top: 8px;
}
.gb-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.gb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gb-accent), var(--gb-accent2));
  border-radius: 4px;
  transition: width .5s ease;
  width: 0%;
}
.gb-progress-steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.gb-step {
  font-size: 11px;
  padding: 3px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--gb-border);
  border-radius: 20px;
  color: var(--gb-text-muted);
  transition: all .3s;
}
.gb-step.gb-step-done   { background: rgba(16,185,129,0.1); border-color: var(--gb-green); color: var(--gb-green); }
.gb-step.gb-step-active { background: rgba(245,158,11,0.12); border-color: var(--gb-yellow); color: var(--gb-yellow); animation: gb-pulse 1s infinite; }
.gb-processing-msg      { font-size: 13px; color: var(--gb-text-muted); margin: 0; }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.gb-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--gb-border);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.gb-tabs::-webkit-scrollbar { display: none; }

.gb-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--gb-text-muted);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  margin-bottom: -1px;
}
.gb-tab:hover { color: var(--gb-text); }
.gb-tab.active {
  color: var(--gb-accent);
  border-bottom-color: var(--gb-accent);
  font-weight: 600;
}

/* ── Tab content ──────────────────────────────────────────────────────────── */
.gb-tab-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gb-panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gb-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.gb-panel-empty {
  text-align: center;
  color: var(--gb-text-muted);
  padding: 40px 20px;
  font-size: 13px;
}
.gb-panel-error {
  text-align: center;
  color: var(--gb-red);
  padding: 40px 20px;
  font-size: 13px;
}

/* ── Transcript ───────────────────────────────────────────────────────────── */
.gb-transcript-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gb-border);
  background: var(--gb-bg);
  flex-shrink: 0;
  color: var(--gb-text-muted);
}
.gb-ts-search-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--gb-text);
  font-size: 13px;
  outline: none;
}
.gb-ts-search-input::placeholder { color: var(--gb-text-muted); }
.gb-ts-count { font-size: 12px; color: var(--gb-accent); white-space: nowrap; }

.gb-transcript-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.gb-ts-seg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--gb-radius-sm);
  margin: 2px 0;
  transition: background .15s;
  position: relative;
}
.gb-ts-seg:hover { background: rgba(255,255,255,0.04); }
.gb-ts-seg:hover .gb-ts-copy { opacity: 1; }
.gb-ts-seg.gb-ts-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left: 2px solid var(--gb-accent);
}
.gb-ts-seg.gb-ts-match { background: rgba(245,158,11,0.06); }

.gb-ts-ts {
  font-size: 11px;
  color: var(--gb-accent);
  font-family: monospace;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 1px;
}
.gb-ts-ts:hover { text-decoration: underline; }

.gb-ts-speaker {
  font-size: 11px;
  font-weight: 600;
  color: var(--gb-accent2);
  white-space: nowrap;
  flex-shrink: 0;
}

.gb-ts-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--gb-text);
  flex: 1;
}

.gb-ts-copy {
  background: none;
  border: none;
  color: var(--gb-text-muted);
  cursor: pointer;
  padding: 2px;
  opacity: 0;
  transition: opacity .2s;
  flex-shrink: 0;
}
.gb-ts-copy:hover { color: var(--gb-text); }

mark.gb-ts-hl {
  background: rgba(245,158,11,0.3);
  color: var(--gb-text);
  border-radius: 2px;
  padding: 0 2px;
}

/* ── Summary ──────────────────────────────────────────────────────────────── */
.gb-summary-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--gb-text);
  padding: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
}

/* ── Key Points ───────────────────────────────────────────────────────────── */
.gb-keypoints-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.gb-keypoints-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  margin: 6px 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius-sm);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gb-text);
  transition: background .15s;
}
.gb-keypoints-list li::before {
  content: "→";
  color: var(--gb-accent);
  font-weight: 700;
  flex-shrink: 0;
}
.gb-keypoints-list li:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ── Speakers ─────────────────────────────────────────────────────────────── */
.gb-speakers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 16px 20px;
}
.gb-speaker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  text-align: center;
  transition: transform .2s, background .2s;
}
.gb-speaker-card:hover { background: rgba(255,255,255,0.07); transform: translateY(-2px); }
.gb-speaker-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: hsl(calc(var(--spk-hue, 260) * 1deg), 60%, 50%);
}
.gb-speaker-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gb-text);
}

/* ── Blog ─────────────────────────────────────────────────────────────────── */
.gb-blog-header {
  display: flex;
  justify-content: flex-end;
  padding: 8px 16px;
  border-bottom: 1px solid var(--gb-border);
  flex-shrink: 0;
}
.gb-blog-content { background: rgba(255,255,255,0.02); }
.gb-blog-text {
  font-size: 14px;
  line-height: 1.85;
  color: var(--gb-text);
  white-space: pre-wrap;
}

/* ── Export ───────────────────────────────────────────────────────────────── */
.gb-export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  padding: 20px;
}
.gb-export-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  text-align: center;
  transition: all .2s;
}
.gb-export-card:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--gb-accent); }
.gb-export-icon  { font-size: 28px; }
.gb-export-label { font-size: 14px; font-weight: 700; color: var(--gb-text); }
.gb-export-desc  { font-size: 12px; color: var(--gb-text-muted); }
.gb-export-info  { padding: 0 20px 16px; font-size: 12px; color: var(--gb-text-muted); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.gb-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: linear-gradient(135deg, var(--gb-accent), var(--gb-accent2));
  color: #fff;
  border: none;
  border-radius: var(--gb-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
}
.gb-btn-primary:hover { opacity: .9; transform: translateY(-1px); }
.gb-btn-primary.gb-btn-lg { padding: 11px 22px; font-size: 15px; }

.gb-btn-ghost {
  padding: 7px 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--gb-border);
  color: var(--gb-text);
  border-radius: var(--gb-radius-sm);
  font-size: 13px;
  cursor: pointer;
  transition: background .2s;
}
.gb-btn-ghost:hover { background: rgba(255,255,255,0.12); }

.gb-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--gb-border);
  color: var(--gb-text);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background .2s;
}
.gb-btn-sm:hover { background: rgba(255,255,255,0.12); }

.gb-btn-icon {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--gb-border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--gb-text-muted);
  transition: all .2s;
}
.gb-btn-icon:hover { background: rgba(255,255,255,0.12); color: var(--gb-text); }
.gb-btn-danger:hover { background: rgba(239,68,68,0.12); border-color: var(--gb-red); color: var(--gb-red); }

.gb-btn-export {
  padding: 7px 14px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent-light);
  border-radius: var(--gb-radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  width: 100%;
}
.gb-btn-export:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ── Upload Modal ─────────────────────────────────────────────────────────── */
.gb-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.gb-modal {
  background: #1e1b2e;
  border: 1px solid var(--gb-border);
  border-radius: 16px;
  width: 480px;
  max-width: 92vw;
  box-shadow: var(--gb-shadow);
  overflow: hidden;
}

.gb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--gb-border);
}
.gb-modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--gb-text); }
.gb-modal-close {
  background: none; border: none;
  color: var(--gb-text-muted); font-size: 18px; cursor: pointer;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: background .2s;
}
.gb-modal-close:hover { background: rgba(255,255,255,0.1); color: var(--gb-text); }

.gb-modal-body { padding: 20px; }

.gb-drop-zone {
  border: 2px dashed var(--gb-border);
  border-radius: var(--gb-radius);
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.gb-drop-zone:hover,
.gb-drop-zone.gb-drop-over {
  border-color: var(--gb-accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.gb-drop-icon  { color: var(--gb-text-muted); margin-bottom: 12px; }
.gb-drop-text  { font-size: 15px; font-weight: 600; color: var(--gb-text); margin: 0 0 6px; }
.gb-drop-hint  { font-size: 13px; color: var(--gb-text-muted); margin: 0 0 14px; }
.gb-drop-formats { font-size: 11px; color: var(--gb-text-muted); margin: 0; line-height: 1.7; }

.gb-upload-form { padding-top: 4px; }
.gb-selected-file {
  font-size: 13px;
  color: var(--gb-accent);
  margin-bottom: 14px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: var(--gb-radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.gb-label { display: block; font-size: 12px; color: var(--gb-text-muted); margin-bottom: 6px; font-weight: 500; }
.gb-input {
  width: 100%;
  padding: 9px 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius-sm);
  color: var(--gb-text);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s;
}
.gb-input:focus { border-color: var(--gb-accent); }
.gb-input::placeholder { color: var(--gb-text-muted); }

.gb-upload-progress { margin-top: 14px; }
.gb-upload-track {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.gb-upload-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gb-accent), var(--gb-accent2));
  border-radius: 4px;
  width: 0%;
  transition: width .3s;
}
.gb-upload-label { font-size: 12px; color: var(--gb-text-muted); }

.gb-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--gb-border);
}

.gb-modal-footer .gb-btn-primary:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .gb-wrap { flex-direction: column; }
  .gb-left { width: 100%; max-width: 100%; min-width: unset; height: 200px; border-right: none; border-bottom: 1px solid var(--gb-border); }
  .gb-file-list { flex-direction: row; display: flex; overflow-x: auto; overflow-y: hidden; }
  .gb-file-item { min-width: 160px; }
  .gb-export-grid { grid-template-columns: 1fr 1fr; }
  .gb-speakers-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   GIRI BRAIN v1.1 — MODE MAHA
   Animations transcendantes · Waveform · Confetti · Tutorial
   ══════════════════════════════════════════════════════════════ */

/* ── Keyframes globaux ────────────────────────────────────────────────────── */
@keyframes gb-enter {
  from { opacity:0; transform:translateY(18px) scale(.97); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}
@keyframes gb-slide-left {
  from { opacity:0; transform:translateX(-24px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes gb-slide-right {
  from { opacity:0; transform:translateX(24px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes gb-pop {
  0%   { transform:scale(0.7); opacity:0; }
  70%  { transform:scale(1.06); opacity:1; }
  100% { transform:scale(1); }
}
@keyframes gb-shimmer {
  0%   { background-position:200% center; }
  100% { background-position:-200% center; }
}
@keyframes gb-glow-ring {
  0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
  50%      { box-shadow: 0 0 0 6px rgba(251,191,36,0.18); }
}
@keyframes gb-float {
  0%,100% { transform:translateY(0) rotate(0deg); }
  33%     { transform:translateY(-6px) rotate(2deg); }
  66%     { transform:translateY(3px) rotate(-1deg); }
}
@keyframes gb-step-bounce {
  0%,100% { transform:scale(1) translateY(0); }
  40%     { transform:scale(1.18) translateY(-3px); }
  70%     { transform:scale(0.95) translateY(1px); }
}
@keyframes gb-cursor-blink {
  0%,100% { opacity:1; } 50% { opacity:0; }
}
@keyframes gb-particle-drift {
  0%   { transform:translateY(0)    translateX(0)    scale(1);   opacity:.9; }
  100% { transform:translateY(-80px) translateX(20px) scale(0.3); opacity:0; }
}
@keyframes gb-confetti-fall {
  0%   { transform:translateY(-20px) rotate(0deg)   scaleX(1); opacity:1; }
  100% { transform:translateY(110vh)  rotate(720deg) scaleX(-1); opacity:0; }
}
@keyframes gb-tutorial-in {
  from { opacity:0; transform:scale(.92) translateY(10px); }
  to   { opacity:1; transform:scale(1)   translateY(0); }
}

/* ── Hero enter ───────────────────────────────────────────────────────────── */
.gb-wrap { animation: gb-enter .45s cubic-bezier(.22,1,.36,1) both; }
.gb-left  { animation: gb-slide-left  .4s .05s cubic-bezier(.22,1,.36,1) both; }
.gb-right { animation: gb-slide-right .4s .08s cubic-bezier(.22,1,.36,1) both; }

.gb-file-item {
  animation: gb-enter .3s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--item-idx, 0) * 40ms);
}

/* ── Progress bar MAHA ───────────────────────────────────────────────────── */
.gb-progress-wrap { position:relative; }

.gb-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 6px;
  overflow: visible;
  margin-bottom: 14px;
  position: relative;
}
.gb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-light), var(--accent), var(--accent-light), var(--accent));
  background-size: 200% 100%;
  border-radius: 6px;
  transition: width .6s cubic-bezier(.22,1,.36,1);
  animation: gb-shimmer 2.5s linear infinite;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* 4-step pipeline icons */
.gb-progress-steps {
  display: flex;
  justify-content: space-between;
  gap: 0;
  margin-bottom: 10px;
  position: relative;
}
.gb-progress-steps::before {
  content: '';
  position: absolute;
  top: 18px; left: 18px; right: 18px;
  height: 1px;
  background: var(--gb-border);
  z-index: 0;
}

.gb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
  min-width: 60px;
  text-align: center;
  padding: 0;
  background: none;
  border: none;
  font-size: 10px;
  color: var(--gb-text-muted);
  transition: all .35s;
}
.gb-step-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 2px solid var(--gb-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all .35s;
  position: relative;
}
.gb-step-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--gb-text-muted);
  white-space: nowrap;
  transition: color .35s;
}

.gb-step.gb-step-done .gb-step-icon {
  background: rgba(16,185,129,0.15);
  border-color: var(--gb-green);
  box-shadow: 0 0 12px rgba(16,185,129,0.3);
  animation: gb-pop .4s cubic-bezier(.22,1,.36,1);
}
.gb-step.gb-step-done .gb-step-label { color: var(--gb-green); }

.gb-step.gb-step-active .gb-step-icon {
  background: rgba(245,158,11,0.15);
  border-color: var(--gb-yellow);
  box-shadow: 0 0 14px rgba(245,158,11,0.4);
  animation: gb-step-bounce 1.2s ease-in-out infinite;
}
.gb-step.gb-step-active .gb-step-label { color: var(--gb-yellow); font-weight: 700; }

.gb-processing-msg {
  font-size: 13px;
  color: var(--gb-text-muted);
  margin: 0;
  text-align: center;
  font-style: italic;
  animation: gb-pulse 2s ease-in-out infinite;
}

/* ── Player MAHA — waveform ───────────────────────────────────────────────── */
.gb-player-wrap {
  margin-top: 8px;
  position: relative;
}

.gb-waveform-container {
  position: relative;
  border-radius: var(--gb-radius-sm);
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  margin-bottom: 6px;
}

.gb-waveform-canvas {
  display: block;
  width: 100%;
  height: 64px;
  border-radius: var(--gb-radius-sm);
}

.gb-audio-player {
  width: 100%;
  height: 32px;
  accent-color: var(--gb-accent);
  border-radius: 4px;
}

/* Particules dorées autour player */
.gb-player-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--gb-radius-sm);
  z-index: 2;
}

.gb-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fbbf24, #f59e0b);
  animation: gb-particle-drift 2s ease-out forwards;
  pointer-events: none;
}

/* Player glow quand en lecture */
.gb-player-wrap.gb-playing .gb-waveform-container {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 40px rgba(251,191,36,0.05);
  animation: gb-glow-ring 2s ease-in-out infinite;
}

/* ── Transcript — segment actif MAHA ─────────────────────────────────────── */
.gb-ts-seg.gb-ts-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-left: 3px solid var(--gb-accent);
  box-shadow:
    inset 0 0 12px color-mix(in srgb, var(--accent) 8%, transparent),
    0 0 0 1px rgba(251,191,36,0.12);
  transform: translateX(2px);
  transition: all .2s cubic-bezier(.22,1,.36,1);
}
.gb-ts-seg.gb-ts-active .gb-ts-text {
  color: #f1f5f9;
}
.gb-ts-seg.gb-ts-active .gb-ts-ts {
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251,191,36,0.5);
}

/* ── Typing effect ────────────────────────────────────────────────────────── */
.gb-typing-cursor::after {
  content: '|';
  animation: gb-cursor-blink .8s ease-in-out infinite;
  color: var(--gb-accent);
  font-weight: 300;
  margin-left: 1px;
}

/* ── Confetti canvas ──────────────────────────────────────────────────────── */
#gb-confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1200;
}

/* ── Tutorial overlay ─────────────────────────────────────────────────────── */
.gb-tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
}

.gb-tutorial-spotlight {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(2px);
  pointer-events: all;
  z-index: 1110;
  transition: all .4s;
}

.gb-tutorial-card {
  position: fixed;
  z-index: 1150;
  width: 340px;
  max-width: 90vw;
  background: linear-gradient(135deg, rgba(30,27,46,0.98) 0%, rgba(20,15,40,0.98) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent), inset 0 1px 0 rgba(255,255,255,0.07);
  pointer-events: all;
  animation: gb-tutorial-in .4s cubic-bezier(.22,1,.36,1) both;
}

.gb-tut-step-indicator {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.gb-tut-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: all .3s;
}
.gb-tut-dot.active {
  width: 20px;
  border-radius: 3px;
  background: var(--gb-accent);
}

.gb-tut-icon {
  font-size: 36px;
  margin-bottom: 12px;
  display: block;
  animation: gb-float 3s ease-in-out infinite;
}
.gb-tut-title {
  font-size: 17px;
  font-weight: 800;
  color: #f1f5f9;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #e2e8f0, var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gb-tut-desc {
  font-size: 13px;
  color: var(--gb-text-muted);
  line-height: 1.65;
  margin: 0 0 20px;
}
.gb-tut-highlight {
  color: var(--accent-light);
  font-weight: 600;
}
.gb-tut-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gb-tut-skip {
  background: none;
  border: none;
  color: var(--gb-text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .2s;
}
.gb-tut-skip:hover { color: var(--gb-text); }

.gb-tut-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  background: linear-gradient(135deg, var(--gb-accent), var(--gb-accent2));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.gb-tut-next:hover { transform:translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent); }

/* Hole découpé dans overlay tutorial */
.gb-tut-hole {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.72);
  border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  pointer-events: none;
  transition: all .4s cubic-bezier(.22,1,.36,1);
  animation: gb-glow-ring 2s ease-in-out infinite;
}

/* ── Done celebration banner ─────────────────────────────────────────────── */
.gb-done-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(16,185,129,0.15), color-mix(in srgb, var(--accent) 10%, transparent));
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: var(--gb-radius-sm);
  margin-top: 10px;
  animation: gb-enter .5s cubic-bezier(.22,1,.36,1) both;
}
.gb-done-banner-icon  { font-size: 22px; animation: gb-float 2s ease-in-out infinite; }
.gb-done-banner-text  { font-size: 13px; color: var(--gb-green); font-weight: 600; }
.gb-done-banner-sub   { font-size: 11px; color: var(--gb-text-muted); }

/* ── Summary glassmorphism card ───────────────────────────────────────────── */
.gb-summary-text {
  animation: gb-enter .4s .1s cubic-bezier(.22,1,.36,1) both;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  background: linear-gradient(135deg, rgba(255,255,255,0.04), color-mix(in srgb, var(--accent) 3%, transparent));
}

/* ── Key points stagger animation ─────────────────────────────────────────── */
.gb-keypoints-list li {
  animation: gb-slide-left .35s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--kp-idx, 0) * 60ms);
  border-left: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.gb-keypoints-list li:hover {
  border-left-color: var(--gb-accent);
  transform: translateX(3px);
}

/* ── Speaker cards ────────────────────────────────────────────────────────── */
.gb-speaker-card {
  animation: gb-pop .4s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--spk-idx, 0) * 80ms);
}
.gb-speaker-avatar {
  transition: transform .3s, box-shadow .3s;
  box-shadow: 0 0 0 0 transparent;
}
.gb-speaker-card:hover .gb-speaker-avatar {
  transform: scale(1.08) rotate(3deg);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* ── Export cards MAHA ────────────────────────────────────────────────────── */
.gb-export-card {
  animation: gb-pop .4s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--exp-idx, 0) * 80ms);
}
.gb-export-icon { transition: transform .3s; }
.gb-export-card:hover .gb-export-icon { transform: scale(1.2) rotate(-5deg); }

/* ── Welcome pulsing icon ─────────────────────────────────────────────────── */
.gb-welcome-icon {
  animation: gb-float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 40%, transparent));
}
.gb-welcome h3 {
  background: linear-gradient(135deg, #e2e8f0, var(--accent-light), var(--accent));
  background-size: 200%;
  animation: gb-shimmer 4s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Upload modal MAHA ────────────────────────────────────────────────────── */
.gb-modal { animation: gb-pop .35s cubic-bezier(.22,1,.36,1) both; }
.gb-drop-zone {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 4%, transparent) 0%,
    color-mix(in srgb, var(--accent) 4%, transparent) 100%
  );
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.gb-drop-zone.gb-drop-over {
  border-color: var(--gb-accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: scale(1.01);
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 15%, transparent);
}
.gb-drop-icon svg { transition: transform .3s; }
.gb-drop-zone:hover .gb-drop-icon svg,
.gb-drop-zone.gb-drop-over .gb-drop-icon svg {
  transform: translateY(-6px) scale(1.1);
}

/* ── Tab active indicator MAHA ────────────────────────────────────────────── */
.gb-tab.active {
  position: relative;
}
.gb-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 50%;
  transform: translateX(-50%);
  width: 30px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gb-accent), transparent);
  border-radius: 2px;
}

/* ── Scrollbar MAHA ───────────────────────────────────────────────────────── */
.gb-transcript-list::-webkit-scrollbar,
.gb-panel-content::-webkit-scrollbar { width: 4px; }
.gb-transcript-list::-webkit-scrollbar-track,
.gb-panel-content::-webkit-scrollbar-track { background: transparent; }
.gb-transcript-list::-webkit-scrollbar-thumb,
.gb-panel-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gb-accent), var(--gb-accent2));
  border-radius: 4px;
}

/* ── Video player frame ───────────────────────────────────────────────────── */
.gb-video-player {
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  transition: box-shadow .3s;
}
.gb-player-wrap.gb-playing .gb-video-player {
  box-shadow: 0 4px 30px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 60px rgba(251,191,36,0.05);
}


/* ===== css/giri-sign.css?v=2602240010 ===== */
/* ================================================
   GIRI SIGN v1.0 — Signature électronique PDF
   Préfixe : .gs-*
   Thème : glassmorphism + CSS vars
   ================================================ */

/* ─── Layout principal ─────────────────────────────────────────── */

.gs-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 0;
    background: var(--bg-primary, #0f0f14);
    color: var(--text-primary, #e8dcc8);
    font-family: var(--font-main, 'Inter', sans-serif);
    overflow: hidden;
}

/* ─── Header ───────────────────────────────────────────────────── */

.gs-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--bg-glass, rgba(255,255,255,0.04));
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    flex-shrink: 0;
}

.gs-header-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--accent, #e07840) 0%, var(--accent-light, #f09050) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gs-header-icon svg { color: #fff; }

.gs-header-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #e8dcc8);
}

.gs-header-sub {
    font-size: 0.75rem;
    color: var(--text-muted, #8a7e6a);
    margin-top: 1px;
}

.gs-header-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ─── Boutons ──────────────────────────────────────────────────── */

.gs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.gs-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.gs-btn-primary {
    background: linear-gradient(135deg, var(--accent, #e07840) 0%, var(--accent-light, #f09050) 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px var(--accent-glow, rgba(224,120,64,0.3));
}

.gs-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--accent-glow, rgba(224,120,64,0.4));
}

.gs-btn-secondary {
    background: var(--bg-glass, rgba(255,255,255,0.06));
    color: var(--text-primary, #e8dcc8);
    border-color: var(--border, rgba(255,255,255,0.10));
}

.gs-btn-secondary:hover:not(:disabled) {
    background: var(--bg-hover, rgba(255,255,255,0.10));
    border-color: var(--accent, #e07840);
}

.gs-btn-danger {
    background: rgba(220,50,50,0.15);
    color: #f08080;
    border-color: rgba(220,50,50,0.3);
}

.gs-btn-danger:hover:not(:disabled) {
    background: rgba(220,50,50,0.25);
}

.gs-btn-icon {
    padding: 8px;
    background: var(--bg-glass, rgba(255,255,255,0.06));
    color: var(--text-muted, #8a7e6a);
    border-color: var(--border, rgba(255,255,255,0.10));
    border-radius: 8px;
}

.gs-btn-icon:hover:not(:disabled) {
    color: var(--text-primary, #e8dcc8);
    background: var(--bg-hover, rgba(255,255,255,0.10));
}

/* ─── Zone d'upload PDF (landing) ─────────────────────────────── */

.gs-upload-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.gs-drop-area {
    width: 100%;
    max-width: 520px;
    border: 2px dashed var(--border, rgba(255,255,255,0.15));
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-glass, rgba(255,255,255,0.03));
    position: relative;
}

.gs-drop-area.drag-over {
    border-color: var(--accent, #e07840);
    background: var(--bg-hover, rgba(224,120,64,0.08));
    transform: scale(1.02);
}

.gs-drop-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
    filter: drop-shadow(0 0 20px var(--accent-glow, rgba(224,120,64,0.3)));
}

.gs-drop-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary, #e8dcc8);
    margin-bottom: 8px;
}

.gs-drop-sub {
    font-size: 0.88rem;
    color: var(--text-muted, #8a7e6a);
    margin-bottom: 24px;
    line-height: 1.5;
}

.gs-drop-btn-wrap {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.gs-drop-input { display: none; }

/* ─── Workspace principal (PDF + panneaux) ─────────────────────── */

.gs-workspace {
    flex: 1;
    display: flex;
    min-height: 0;
    gap: 0;
    overflow: hidden;
}

/* ─── Panneau gauche : PDF viewer ───────────────────────────────── */

.gs-pdf-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border, rgba(255,255,255,0.08));
    position: relative;
}

.gs-pdf-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-glass, rgba(255,255,255,0.04));
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    flex-shrink: 0;
    flex-wrap: wrap;
}

.gs-pdf-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary, #e8dcc8);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gs-page-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.gs-page-info {
    font-size: 0.8rem;
    color: var(--text-muted, #8a7e6a);
    white-space: nowrap;
}

.gs-zoom-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gs-zoom-val {
    font-size: 0.8rem;
    color: var(--text-muted, #8a7e6a);
    min-width: 42px;
    text-align: center;
}

/* PDF render area */

.gs-pdf-viewport {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 16px;
    background: var(--bg-secondary, #1a1a22);
    position: relative;
}

.gs-page-wrap {
    position: relative;
    display: inline-block;
    box-shadow: 0 4px 30px rgba(0,0,0,0.5);
    border-radius: 4px;
    cursor: crosshair;
    flex-shrink: 0;
}

.gs-page-wrap canvas {
    display: block;
    border-radius: 4px;
}

.gs-page-num-badge {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    pointer-events: none;
    white-space: nowrap;
}

/* ─── Éléments de signature sur PDF (draggables) ──────────────── */

.gs-sig-element {
    position: absolute;
    cursor: move;
    border: 2px dashed var(--accent, #e07840);
    border-radius: 4px;
    background: transparent;
    user-select: none;
    touch-action: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.gs-sig-element:hover,
.gs-sig-element.selected {
    border-color: var(--accent, #e07840);
    box-shadow: 0 0 0 3px var(--accent-glow, rgba(224,120,64,0.25));
}

.gs-sig-element img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    display: block;
}

.gs-sig-element-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Dancing Script', 'Brush Script MT', cursive;
    font-size: clamp(14px, 3cqw, 36px);
    color: #1a1a50;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
}

.gs-sig-controls {
    position: absolute;
    top: -28px;
    right: 0;
    display: none;
    gap: 4px;
    background: var(--bg-primary, #0f0f14);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 6px;
    padding: 2px 4px;
}

.gs-sig-element.selected .gs-sig-controls,
.gs-sig-element:hover .gs-sig-controls {
    display: flex;
}

.gs-sig-ctrl-btn {
    background: none;
    border: none;
    color: var(--text-muted, #8a7e6a);
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 0.72rem;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

.gs-sig-ctrl-btn:hover { color: var(--text-primary, #e8dcc8); background: rgba(255,255,255,0.08); }
.gs-sig-ctrl-btn.del:hover { color: #f08080; }

.gs-resize-handle {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    background: var(--accent, #e07840);
    border-radius: 2px;
    cursor: se-resize;
    border: 2px solid var(--bg-primary, #0f0f14);
}

/* ─── Panneau droit : outils ────────────────────────────────────── */

.gs-tools-panel {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--bg-primary, #0f0f14);
    gap: 0;
}

.gs-tools-section {
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    padding: 16px;
}

.gs-tools-section:last-child { border-bottom: none; }

.gs-tools-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #8a7e6a);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ─── Onglets type de signature ─────────────────────────────────── */

.gs-sig-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    background: var(--bg-glass, rgba(255,255,255,0.04));
    border-radius: 8px;
    padding: 3px;
}

.gs-sig-tab {
    flex: 1;
    text-align: center;
    padding: 6px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    color: var(--text-muted, #8a7e6a);
    transition: all 0.2s ease;
    border: none;
    background: none;
}

.gs-sig-tab.active {
    background: var(--accent, #e07840);
    color: #fff;
    box-shadow: 0 2px 8px var(--accent-glow, rgba(224,120,64,0.3));
}

/* ─── Canvas de dessin ──────────────────────────────────────────── */

.gs-canvas-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border, rgba(255,255,255,0.10));
    background: #fff;
    cursor: crosshair;
}

.gs-sig-canvas {
    display: block;
    width: 100%;
    touch-action: none;
}

.gs-canvas-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-size: 0.82rem;
    color: #bbb;
    font-style: italic;
    transition: opacity 0.3s;
}

.gs-canvas-hint.hidden { opacity: 0; }

.gs-canvas-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* ─── Slider couleur / épaisseur ────────────────────────────────── */

.gs-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.gs-slider-label {
    font-size: 0.75rem;
    color: var(--text-muted, #8a7e6a);
    min-width: 60px;
}

.gs-slider {
    flex: 1;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--border, rgba(255,255,255,0.15));
    outline: none;
    cursor: pointer;
}

.gs-slider::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent, #e07840);
    cursor: pointer;
}

.gs-color-pick {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid var(--border, rgba(255,255,255,0.15));
    cursor: pointer;
    padding: 0;
    background: none;
}

/* ─── Upload signature image ────────────────────────────────────── */

.gs-img-drop {
    border: 2px dashed var(--border, rgba(255,255,255,0.15));
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.82rem;
    color: var(--text-muted, #8a7e6a);
}

.gs-img-drop:hover, .gs-img-drop.drag-over {
    border-color: var(--accent, #e07840);
    background: rgba(224,120,64,0.06);
    color: var(--text-primary, #e8dcc8);
}

.gs-img-drop-icon { font-size: 2rem; margin-bottom: 6px; }

.gs-img-preview {
    margin-top: 10px;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border, rgba(255,255,255,0.10));
    max-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gs-img-preview img {
    max-height: 100px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/* ─── Signature typographiée ────────────────────────────────────── */

.gs-type-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.9rem;
    background: var(--bg-glass, rgba(255,255,255,0.04));
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 8px;
    color: var(--text-primary, #e8dcc8);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
    margin-bottom: 10px;
}

.gs-type-input:focus { border-color: var(--accent, #e07840); }

.gs-font-selector {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.gs-font-opt {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border, rgba(255,255,255,0.10));
    background: var(--bg-glass, rgba(255,255,255,0.04));
    color: var(--text-muted, #8a7e6a);
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.gs-font-opt.active {
    border-color: var(--accent, #e07840);
    color: var(--text-primary, #e8dcc8);
    background: rgba(224,120,64,0.10);
}

.gs-type-preview {
    background: #fff;
    border-radius: 6px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #1a1a50;
    padding: 8px 12px;
    border: 1px solid var(--border, rgba(255,255,255,0.10));
    overflow: hidden;
    word-break: break-all;
    margin-bottom: 8px;
}

/* ─── Signatures sauvegardées ───────────────────────────────────── */

.gs-saved-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
}

.gs-saved-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    background: var(--bg-glass, rgba(255,255,255,0.03));
    cursor: pointer;
    transition: all 0.2s;
}

.gs-saved-item:hover {
    border-color: var(--accent, #e07840);
    background: rgba(224,120,64,0.06);
}

.gs-saved-thumb {
    width: 60px;
    height: 36px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.08);
}

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

.gs-saved-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary, #e8dcc8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gs-saved-date {
    font-size: 0.7rem;
    color: var(--text-muted, #8a7e6a);
}

.gs-saved-del {
    background: none;
    border: none;
    color: var(--text-muted, #8a7e6a);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
}

.gs-saved-del:hover { color: #f08080; }

.gs-no-saved {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted, #8a7e6a);
    padding: 12px 0;
    font-style: italic;
}

/* ─── Extras : date, initiales ──────────────────────────────────── */

.gs-extras-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gs-extra-btn {
    flex: 1;
    min-width: 100px;
    padding: 8px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255,255,255,0.10));
    background: var(--bg-glass, rgba(255,255,255,0.04));
    color: var(--text-muted, #8a7e6a);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.gs-extra-btn:hover {
    border-color: var(--accent, #e07840);
    color: var(--text-primary, #e8dcc8);
    background: rgba(224,120,64,0.06);
}

/* ─── Signataires multiples ─────────────────────────────────────── */

.gs-signers-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.gs-signer-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.gs-signer-item.active {
    border-color: var(--accent, #e07840);
    background: rgba(224,120,64,0.08);
}

.gs-signer-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gs-signer-name {
    flex: 1;
    color: var(--text-primary, #e8dcc8);
    font-weight: 500;
}

.gs-signer-del {
    background: none;
    border: none;
    color: var(--text-muted, #8a7e6a);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px 4px;
}

.gs-signer-del:hover { color: #f08080; }

.gs-add-signer-row {
    display: flex;
    gap: 6px;
}

.gs-add-signer-input {
    flex: 1;
    padding: 7px 10px;
    font-size: 0.82rem;
    background: var(--bg-glass, rgba(255,255,255,0.04));
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 6px;
    color: var(--text-primary, #e8dcc8);
    outline: none;
}

.gs-add-signer-input:focus { border-color: var(--accent, #e07840); }

/* ─── Download & actions finales ────────────────────────────────── */

.gs-download-section {
    padding: 16px;
    background: var(--bg-glass, rgba(255,255,255,0.03));
    border-top: 1px solid var(--border, rgba(255,255,255,0.08));
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gs-download-info {
    font-size: 0.75rem;
    color: var(--text-muted, #8a7e6a);
    text-align: center;
}

/* ─── Toast feedback ────────────────────────────────────────────── */

.gs-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: rgba(30,30,40,0.95);
    border: 1px solid var(--border, rgba(255,255,255,0.15));
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    z-index: 1100;
    animation: gs-toast-in 0.3s ease;
    pointer-events: none;
}

.gs-toast.success { border-color: rgba(80,200,100,0.4); }
.gs-toast.error   { border-color: rgba(220,80,80,0.4); }
.gs-toast.fade-out { animation: gs-toast-out 0.3s ease forwards; }

@keyframes gs-toast-in  { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }
@keyframes gs-toast-out { from { opacity:1; transform: translateY(0); } to { opacity:0; transform: translateY(12px); } }

/* ─── Loading overlay ───────────────────────────────────────────── */

.gs-loading {
    position: absolute;
    inset: 0;
    background: rgba(15,15,20,0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 100;
    backdrop-filter: blur(4px);
}

.gs-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent, #e07840);
    border-radius: 50%;
    animation: gs-spin 0.7s linear infinite;
}

.gs-loading-text {
    font-size: 0.85rem;
    color: var(--text-muted, #8a7e6a);
}

@keyframes gs-spin { to { transform: rotate(360deg); } }

/* ─── Scrollbar ─────────────────────────────────────────────────── */

.gs-pdf-viewport::-webkit-scrollbar,
.gs-tools-panel::-webkit-scrollbar,
.gs-saved-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.gs-pdf-viewport::-webkit-scrollbar-track,
.gs-tools-panel::-webkit-scrollbar-track,
.gs-saved-list::-webkit-scrollbar-track { background: transparent; }

.gs-pdf-viewport::-webkit-scrollbar-thumb,
.gs-tools-panel::-webkit-scrollbar-thumb,
.gs-saved-list::-webkit-scrollbar-thumb {
    background: var(--border, rgba(255,255,255,0.12));
    border-radius: 3px;
}

/* ─── Responsive ────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .gs-workspace { flex-direction: column; }
    .gs-pdf-panel { border-right: none; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); min-height: 50vh; }
    .gs-tools-panel { width: 100%; max-height: 400px; }
}

@media (max-width: 600px) {
    .gs-header { padding: 12px 16px; }
    .gs-header-title { font-size: 0.95rem; }
    .gs-drop-area { padding: 40px 20px; }
    .gs-drop-title { font-size: 1.1rem; }
}

/* ════════════════════════════════════════════════════════════════
   GIRI SIGN — MODE MAHA v101
   Animations sacrées · Confetti · Tutorial · Glow doré
   ════════════════════════════════════════════════════════════════ */

/* ─── Hero entrance ──────────────────────────────────────────── */

.gs-wrap {
    animation: gs-hero-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes gs-hero-enter {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.gs-header {
    animation: gs-slide-down 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@keyframes gs-slide-down {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0);     }
}

/* ─── Drop area entrée ────────────────────────────────────────── */

.gs-drop-area {
    animation: gs-float-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes gs-float-in {
    from { opacity: 0; transform: scale(0.92) translateY(24px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.gs-drop-icon {
    animation: gs-icon-bounce 2.8s ease-in-out infinite;
}

@keyframes gs-icon-bounce {
    0%, 100% { transform: translateY(0)    rotate(0deg);   }
    30%       { transform: translateY(-8px) rotate(-4deg);  }
    60%       { transform: translateY(-4px) rotate(3deg);   }
}

/* ─── Canvas signature reveal ─────────────────────────────────── */

.gs-canvas-wrap {
    animation: gs-canvas-reveal 0.5s ease both;
    position: relative;
}

@keyframes gs-canvas-reveal {
    from { opacity: 0; filter: blur(8px); transform: scale(0.97); }
    to   { opacity: 1; filter: blur(0);   transform: scale(1);    }
}

/* Lueur active quand on dessine */
.gs-canvas-wrap.drawing {
    box-shadow: 0 0 0 2px var(--accent, #e07840),
                0 0 24px rgba(224, 120, 64, 0.25);
    transition: box-shadow 0.2s ease;
}

/* ─── Signature placée : glow sacré + entrée ──────────────────── */

.gs-sig-element {
    animation: gs-sig-land 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes gs-sig-land {
    0%   { opacity: 0; transform: scale(0.6); filter: blur(4px); }
    60%  { opacity: 1; transform: scale(1.08); filter: blur(0);  }
    100% { opacity: 1; transform: scale(1);   filter: blur(0);   }
}

.gs-sig-element.selected,
.gs-sig-element:hover {
    box-shadow: 0 0 0 2px var(--accent, #e07840),
                0 0 20px rgba(224, 120, 64, 0.4),
                0 0 40px rgba(224, 120, 64, 0.15);
}

/* Glow sacré continu sur les éléments sélectionnés */
.gs-sig-element.selected {
    animation: gs-holy-glow 2s ease-in-out infinite;
}

@keyframes gs-holy-glow {
    0%, 100% { box-shadow: 0 0 0 2px var(--accent,#e07840), 0 0 16px rgba(224,120,64,0.4), 0 0 40px rgba(224,120,64,0.12); }
    50%       { box-shadow: 0 0 0 2px var(--accent,#e07840), 0 0 28px rgba(224,120,64,0.65), 0 0 60px rgba(255,200,80,0.20); }
}

/* ─── Bouton download : pulse sacré ───────────────────────────── */

#gs-download-btn:not(:disabled),
#gs-download-btn2:not(:disabled) {
    animation: gs-download-pulse 3s ease-in-out infinite;
}

@keyframes gs-download-pulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(224,120,64,0.30); }
    50%       { box-shadow: 0 4px 28px rgba(224,120,64,0.65), 0 0 0 4px rgba(224,120,64,0.12); }
}

/* ─── Particules dorées canvas ─────────────────────────────────── */

.gs-particle-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    border-radius: 8px;
}

/* ─── Confetti overlay ────────────────────────────────────────── */

.gs-confetti-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1200;
    width: 100vw;
    height: 100vh;
}

/* ─── Flash placement ─────────────────────────────────────────── */

.gs-place-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%),
        rgba(255,215,0,0.22) 0%,
        rgba(224,120,64,0.10) 30%,
        transparent 70%);
    animation: gs-flash-out 0.6s ease forwards;
}

@keyframes gs-flash-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ─── Tutorial overlay ─────────────────────────────────────────── */

.gs-tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(10, 10, 16, 0.88);
    backdrop-filter: blur(12px) saturate(0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: gs-tuto-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes gs-tuto-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.gs-tutorial-card {
    width: 480px;
    max-width: calc(100vw - 32px);
    background: var(--bg-glass, rgba(30, 28, 36, 0.95));
    border: 1px solid rgba(224, 120, 64, 0.35);
    border-radius: 24px;
    padding: 36px 32px 28px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6),
                0 0 0 1px rgba(255,255,255,0.05),
                inset 0 1px 0 rgba(255,255,255,0.08);
    animation: gs-card-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
    position: relative;
    overflow: hidden;
}

.gs-tutorial-card::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(224,120,64,0.15) 0%, transparent 70%);
    pointer-events: none;
}

@keyframes gs-card-pop {
    from { opacity: 0; transform: scale(0.88) translateY(20px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.gs-tuto-logo {
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 8px;
    animation: gs-logo-spin 6s linear infinite;
    display: block;
}

@keyframes gs-logo-spin {
    0%, 80%  { transform: rotate(0deg); }
    90%      { transform: rotate(12deg); }
    100%     { transform: rotate(0deg); }
}

.gs-tuto-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary, #e8dcc8);
    margin-bottom: 4px;
    background: linear-gradient(135deg, #ffd700 0%, #e07840 60%, #ff9060 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gs-tuto-sub {
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted, #8a7e6a);
    margin-bottom: 28px;
}

/* Étapes du tutorial */
.gs-tuto-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}

.gs-tuto-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.3s;
}

.gs-tuto-step.visible {
    opacity: 1;
    transform: translateX(0);
}

.gs-tuto-step:hover {
    border-color: rgba(224,120,64,0.3);
    background: rgba(224,120,64,0.05);
}

.gs-tuto-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent,#e07840) 0%, #ffd700 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(224,120,64,0.4);
}

.gs-tuto-step-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
}

.gs-tuto-step-body {
    flex: 1;
    min-width: 0;
}

.gs-tuto-step-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary, #e8dcc8);
    margin-bottom: 2px;
}

.gs-tuto-step-desc {
    font-size: 0.76rem;
    color: var(--text-muted, #8a7e6a);
    line-height: 1.45;
}

/* Progress dots */
.gs-tuto-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.gs-tuto-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    transition: all 0.3s ease;
}

.gs-tuto-dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--accent, #e07840);
}

/* Actions */
.gs-tuto-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.gs-tuto-skip {
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-muted, #8a7e6a);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
}

.gs-tuto-skip:hover {
    border-color: rgba(255,255,255,0.25);
    color: var(--text-primary, #e8dcc8);
}

.gs-tuto-next {
    background: linear-gradient(135deg, var(--accent,#e07840) 0%, #ffd700 100%);
    border: none;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 3px 12px rgba(224,120,64,0.4);
}

.gs-tuto-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(224,120,64,0.5);
}

/* ─── Sidebar icon animation entrée ──────────────────────────── */

.gs-tools-section {
    animation: gs-section-in 0.4s ease both;
}

.gs-tools-section:nth-child(1) { animation-delay: 0.05s; }
.gs-tools-section:nth-child(2) { animation-delay: 0.12s; }
.gs-tools-section:nth-child(3) { animation-delay: 0.18s; }
.gs-tools-section:nth-child(4) { animation-delay: 0.24s; }
.gs-tools-section:nth-child(5) { animation-delay: 0.30s; }

@keyframes gs-section-in {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0);    }
}

/* ─── Sound visualizer subtle (canvas dessin actif) ──────────── */

@keyframes gs-ring-pulse {
    0%   { transform: scale(1);    opacity: 0.6; }
    100% { transform: scale(2.2);  opacity: 0;   }
}

.gs-sound-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 2px solid rgba(255,215,0,0.5);
    border-radius: 50%;
    pointer-events: none;
    animation: gs-ring-pulse 0.8s ease-out forwards;
    z-index: 10;
}

/* ─── Saved signatures hover lift ────────────────────────────── */

.gs-saved-item {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.gs-saved-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* ─── Extra btn hover sacred ──────────────────────────────────── */

.gs-extra-btn {
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

.gs-extra-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,215,0,0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.gs-extra-btn:hover::after { opacity: 1; }

.gs-extra-btn:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: var(--accent, #e07840);
    color: var(--text-primary, #e8dcc8);
    box-shadow: 0 4px 16px rgba(224,120,64,0.2);
}

/* ─── Workspace slide-in ──────────────────────────────────────── */

#gs-workspace {
    animation: gs-workspace-reveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes gs-workspace-reveal {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1);    }
}

/* ─── Mobile améliorations ────────────────────────────────────── */

@media (max-width: 600px) {
    .gs-tutorial-card { padding: 24px 20px 20px; }
    .gs-tuto-title    { font-size: 1.25rem; }
    .gs-tuto-steps    { gap: 10px; }
    .gs-tuto-step     { padding: 10px 12px; }
}


/* ===== productive-tools/apps/studio/giri-studio.css?v=2602240010 ===== */
/**
 * ════════════════════════════════════════════════════════
 * GIRI STUDIO — Styles
 * ProductiveApp v2.0
 * ════════════════════════════════════════════════════════
 */

/* ── Reset / base ────────────────────────────────────────────────────────────── */
#view-giri-studio {
  --gs-bg:         #0d0d14;
  --gs-surface:    #14141f;
  --gs-surface2:   #1c1c2e;
  --gs-border:     rgba(255,255,255,0.08);
  --gs-text:       #e2e2f0;
  --gs-text-muted: #8888a8;
  --gs-accent:     var(--accent);
  --gs-accent-h:   var(--accent);
  --gs-rec:        #ef4444;
  --gs-rec-h:      #dc2626;
  --gs-success:    #22c55e;
  --gs-warn:       #f59e0b;
  --gs-error:      #ef4444;
  --gs-pro:        #f59e0b;
  --gs-radius:     10px;
  --gs-radius-sm:  6px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--gs-bg);
  color: var(--gs-text);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 14px;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────────── */
.gs-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────────────────── */
.gs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--gs-surface);
  border-bottom: 1px solid var(--gs-border);
  flex-shrink: 0;
  gap: 16px;
}

.gs-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gs-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  color: var(--gs-text);
}

.gs-logo i { color: var(--gs-accent); width: 18px; height: 18px; }

.gs-limit-badge,
.gs-pro-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 99px;
  font-weight: 600;
}

.gs-limit-badge {
  background: rgba(245, 158, 11, 0.15);
  color: var(--gs-warn);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.gs-pro-badge {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── Timer ───────────────────────────────────────────────────────────────────── */
.gs-timer-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
}

.gs-timer {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: var(--gs-text-muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
  transition: color 0.3s;
}

.gs-timer--active { color: var(--gs-rec); }
.gs-timer--warn   { color: var(--gs-warn) !important; }
.gs-timer--danger { color: var(--gs-error) !important; animation: gs-pulse 0.5s ease-in-out infinite alternate; }

@keyframes gs-pulse {
  from { opacity: 1; }
  to   { opacity: 0.4; }
}

/* ── Status bar ──────────────────────────────────────────────────────────────── */
.gs-status-bar {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  border-bottom: 1px solid var(--gs-border);
}

.gs-status--info      { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-light); }
.gs-status--success   { background: rgba(34, 197, 94, 0.15);  color: #86efac; }
.gs-status--error     { background: rgba(239, 68, 68, 0.15);  color: #fca5a5; }
.gs-status--warn      { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.gs-status--recording {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  animation: gs-blink 1.5s ease-in-out infinite alternate;
}

@keyframes gs-blink {
  from { background: rgba(239, 68, 68, 0.1); }
  to   { background: rgba(239, 68, 68, 0.3); }
}

/* ── Main layout ─────────────────────────────────────────────────────────────── */
.gs-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 0;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
.gs-sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--gs-surface);
  border-right: 1px solid var(--gs-border);
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.gs-section {
  margin-bottom: 16px;
}

.gs-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gs-text-muted);
  margin-bottom: 8px;
}

/* ── Source grid ─────────────────────────────────────────────────────────────── */
.gs-source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.gs-source-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  background: var(--gs-surface2);
  color: var(--gs-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.2;
}

.gs-source-btn i { width: 16px; height: 16px; }

.gs-source-btn:hover {
  border-color: var(--gs-accent);
  color: var(--gs-text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.gs-source-btn.active {
  border-color: var(--gs-accent);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-light);
}

.gs-source-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Toggles ─────────────────────────────────────────────────────────────────── */
.gs-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 0;
  font-size: 13px;
  color: var(--gs-text-muted);
}

.gs-toggle input[type="checkbox"] {
  accent-color: var(--gs-accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.gs-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gs-toggle-label i { width: 14px; height: 14px; }

/* ── Recording controls ──────────────────────────────────────────────────────── */
.gs-rec-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gs-btn-row {
  display: flex;
  gap: 6px;
}

.gs-btn-row > * { flex: 1; }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--gs-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.gs-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.gs-btn i { width: 14px; height: 14px; flex-shrink: 0; }

.gs-btn--rec {
  background: var(--gs-rec);
  color: #fff;
  padding: 12px;
  font-size: 15px;
  border-radius: var(--gs-radius);
  animation: none;
}

.gs-btn--rec:hover:not(:disabled) {
  background: var(--gs-rec-h);
  transform: scale(1.02);
}

.gs-btn--rec.gs-recording {
  animation: gs-rec-pulse 1.5s ease-in-out infinite;
}

@keyframes gs-rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.gs-btn--stop {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
}

.gs-btn--stop:hover:not(:disabled) {
  background: var(--gs-rec);
  color: #fff;
}

.gs-btn--secondary {
  background: var(--gs-surface2);
  color: var(--gs-text-muted);
  border-color: var(--gs-border);
}

.gs-btn--secondary:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  color: var(--gs-text);
  border-color: rgba(255,255,255,0.15);
}

.gs-btn--primary {
  background: var(--gs-accent);
  color: #fff;
  border-color: transparent;
}

.gs-btn--primary:hover:not(:disabled) {
  background: var(--gs-accent-h);
}

.gs-btn--export {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent-light);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 12px 20px;
  font-size: 14px;
}

.gs-btn--export:hover:not(:disabled) {
  background: var(--gs-accent);
  color: #fff;
}

.gs-btn--export-mp4 {
  background: rgba(34, 197, 94, 0.1);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.2);
}

.gs-btn--export-mp4:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.25);
}

.gs-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  background: transparent;
  color: var(--gs-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.gs-icon-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--gs-text);
  border-color: rgba(255,255,255,0.15);
}

.gs-icon-btn--danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
}

.gs-icon-btn i { width: 14px; height: 14px; }

.gs-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  background: var(--gs-surface2);
  color: var(--gs-text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  justify-content: center;
}

.gs-toggle-btn:hover { background: rgba(255,255,255,0.08); color: var(--gs-text); }

.gs-toggle-btn.active {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-light);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.gs-toggle-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.gs-toggle-btn i { width: 14px; height: 14px; }

/* ── Annotation tools ────────────────────────────────────────────────────────── */
.gs-annot-row { margin-bottom: 8px; }

.gs-annot-tools { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }

.gs-tool-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gs-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--gs-border);
  border-radius: 6px;
  background: var(--gs-surface2);
  color: var(--gs-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.gs-tool-btn:hover { background: rgba(255,255,255,0.08); color: var(--gs-text); }
.gs-tool-btn.active {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent-light);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.gs-tool-btn i { width: 13px; height: 13px; }

input[type="color"] {
  width: 30px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--gs-border);
  border-radius: 6px;
  background: var(--gs-surface2);
  cursor: pointer;
}

input[type="range"] {
  flex: 1;
  accent-color: var(--gs-accent);
  height: 4px;
}

/* ── Main area ───────────────────────────────────────────────────────────────── */
.gs-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── Record area ─────────────────────────────────────────────────────────────── */
.gs-record-area {
  background: var(--bg-primary, #080810);
  border-bottom: 1px solid var(--gs-border);
  min-height: 200px;
  max-height: 280px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.gs-record-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--gs-text-muted);
  padding: 32px;
}

.gs-placeholder-icon i { width: 48px; height: 48px; opacity: 0.3; }
.gs-placeholder-text   { font-size: 16px; font-weight: 600; opacity: 0.6; }
.gs-placeholder-sub    { font-size: 13px; opacity: 0.4; }

.gs-live-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* ── Tabs ────────────────────────────────────────────────────────────────────── */
.gs-tabs {
  display: flex;
  border-bottom: 1px solid var(--gs-border);
  background: var(--gs-surface);
  flex-shrink: 0;
  overflow-x: auto;
}

.gs-tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--gs-text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.gs-tab-btn i { width: 14px; height: 14px; }

.gs-tab-btn:hover { color: var(--gs-text); background: rgba(255,255,255,0.04); }

.gs-tab-btn.active {
  color: var(--gs-text);
  border-bottom-color: var(--gs-accent);
}

.gs-badge {
  background: var(--gs-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
}

/* ── Tab panels ──────────────────────────────────────────────────────────────── */
.gs-tab-panels {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.gs-tab-panel {
  display: none;
  height: 100%;
  overflow-y: auto;
  padding: 16px;
}

.gs-tab-panel.active { display: block; }

/* ── Preview ─────────────────────────────────────────────────────────────────── */
.gs-preview-wrap { display: flex; flex-direction: column; gap: 16px; }

.gs-preview-player {
  width: 100%;
  max-height: 320px;
  background: #000;
  border-radius: var(--gs-radius);
  border: 1px solid var(--gs-border);
}

/* ── Trim ────────────────────────────────────────────────────────────────────── */
.gs-trim-section {
  background: var(--gs-surface2);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gs-trim-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.gs-trim-header i { width: 14px; height: 14px; }

.gs-trim-label {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--gs-text-muted);
}

.gs-trim-sliders {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gs-trim-sliders label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--gs-text-muted);
}

.gs-trim-sliders input[type="range"] {
  flex: 1;
  accent-color: var(--gs-accent);
}

/* ── Clips ───────────────────────────────────────────────────────────────────── */
.gs-clips-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.gs-clips-actions { display: flex; gap: 6px; }

.gs-clips-list { display: flex; flex-direction: column; gap: 6px; }

.gs-clip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  background: var(--gs-surface2);
  cursor: pointer;
  transition: all 0.15s;
}

.gs-clip-item:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); }

.gs-clip-item.selected {
  border-color: var(--gs-accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.gs-clip-thumb {
  width: 40px;
  height: 30px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gs-clip-icon i { width: 16px; height: 16px; color: var(--gs-text-muted); }

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

.gs-clip-title {
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-clip-meta {
  font-size: 11px;
  color: var(--gs-text-muted);
  margin-top: 2px;
}

.gs-clip-actions { display: flex; gap: 4px; flex-shrink: 0; }

.gs-empty {
  text-align: center;
  padding: 32px;
  color: var(--gs-text-muted);
  font-size: 13px;
  opacity: 0.6;
}

/* ── Subtitles ───────────────────────────────────────────────────────────────── */
.gs-sub-header {
  margin-bottom: 12px;
}

.gs-sub-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.gs-select {
  padding: 7px 10px;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  background: var(--gs-surface2);
  color: var(--gs-text);
  font-size: 13px;
  cursor: pointer;
}

.gs-sub-textarea {
  width: 100%;
  height: calc(100% - 60px);
  min-height: 200px;
  background: #08080f;
  color: var(--gs-text);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  padding: 14px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.7;
  resize: vertical;
  box-sizing: border-box;
}

.gs-sub-textarea:focus { outline: none; border-color: var(--gs-accent); }

/* ── Export ──────────────────────────────────────────────────────────────────── */
.gs-export-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
}

.gs-export-info { color: var(--gs-text-muted); font-size: 13px; text-align: center; }

.gs-export-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.gs-export-note {
  font-size: 12px;
  color: var(--gs-text-muted);
  text-align: center;
  opacity: 0.7;
}

.gs-export-note i { width: 12px; height: 12px; vertical-align: middle; }

/* ── Spinner ─────────────────────────────────────────────────────────────────── */
.gs-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: rgba(255,255,255,0.8);
  border-radius: 50%;
  animation: gs-spin 0.7s linear infinite;
  vertical-align: middle;
}

@keyframes gs-spin {
  to { transform: rotate(360deg); }
}

/* ── Modal ───────────────────────────────────────────────────────────────────── */
.gs-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.gs-modal.active { display: flex; }

.gs-modal-content {
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: 14px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.gs-modal-content h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gs-modal-content h2 i { width: 20px; height: 20px; }

.gs-modal-content p {
  font-size: 14px;
  color: var(--gs-text-muted);
  line-height: 1.6;
  margin: 0;
}

.gs-modal-icon i { width: 40px; height: 40px; color: var(--gs-pro); }

.gs-modal-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

/* ── Form elements ───────────────────────────────────────────────────────────── */
.gs-form-group {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gs-form-group label { font-size: 12px; color: var(--gs-text-muted); font-weight: 500; }

.gs-input {
  padding: 8px 12px;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  background: var(--gs-surface2);
  color: var(--gs-text);
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}

.gs-input:focus { outline: none; border-color: var(--gs-accent); }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .gs-sidebar {
    width: 100%;
    min-width: unset;
    max-height: 220px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--gs-border);
    padding: 10px 12px;
    gap: 12px;
  }

  .gs-layout { flex-direction: column; }

  .gs-section { margin-bottom: 0; min-width: 140px; }

  .gs-source-grid { grid-template-columns: 1fr 1fr 1fr 1fr; min-width: 240px; }

  .gs-timer { font-size: 22px; }

  .gs-record-area { min-height: 140px; max-height: 180px; }

  .gs-export-actions { flex-direction: column; align-items: stretch; }
}

/* ── Scrollbar ───────────────────────────────────────────────────────────────── */
#view-giri-studio ::-webkit-scrollbar { width: 6px; height: 6px; }
#view-giri-studio ::-webkit-scrollbar-track { background: transparent; }
#view-giri-studio ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
}
#view-giri-studio ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ════════════════════════════════════════════════════════
   GIRI STUDIO — MAHA PREMIUM ENHANCEMENTS v3.0
   Loom-competitor level — Visual upgrades
   ════════════════════════════════════════════════════════ */

/* ── Premium header gradient ─────────────────────────────────────────────────── */
.gs-header {
  background: linear-gradient(135deg, #14141f 0%, #1a1426 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  position: relative;
  overflow: hidden;
}

.gs-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 50%, rgba(236,72,153,0.03) 100%);
  pointer-events: none;
}

/* ── Logo glow ───────────────────────────────────────────────────────────────── */
.gs-logo {
  position: relative;
}

.gs-logo::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Record button premium ───────────────────────────────────────────────────── */
.gs-btn--rec {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 4px 20px rgba(239,68,68,0.4);
  border-radius: 12px !important;
  min-height: 52px !important;
  font-size: 16px !important;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

.gs-btn--rec::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  transition: transform 0.4s;
  transform: translateX(-100%);
}

.gs-btn--rec:hover:not(:disabled)::before {
  transform: translateX(100%);
}

.gs-btn--rec:hover:not(:disabled) {
  transform: scale(1.02) !important;
  box-shadow: 0 6px 28px rgba(239,68,68,0.55) !important;
}

.gs-btn--rec.gs-recording {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
  animation: gs-rec-pulse-premium 1.5s ease-in-out infinite !important;
}

@keyframes gs-rec-pulse-premium {
  0%, 100% { box-shadow: 0 4px 20px rgba(239,68,68,0.4), 0 0 0 0 rgba(239,68,68,0.5); }
  50%       { box-shadow: 0 4px 20px rgba(239,68,68,0.4), 0 0 0 10px rgba(239,68,68,0); }
}

/* ── Sidebar premium ─────────────────────────────────────────────────────────── */
.gs-sidebar {
  background: linear-gradient(180deg, #14141f 0%, #111120 100%);
  border-right: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}

/* ── Source buttons premium ──────────────────────────────────────────────────── */
.gs-source-btn.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent) 0%, color-mix(in srgb, var(--accent) 15%, transparent) 100%) !important;
  border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important;
  color: var(--accent-light) !important;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ── Timer premium ───────────────────────────────────────────────────────────── */
.gs-timer {
  background: linear-gradient(135deg, rgba(15,15,30,0.8) 0%, rgba(20,20,40,0.6) 100%);
  padding: 6px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace !important;
}

.gs-timer--active {
  color: #fca5a5 !important;
  border-color: rgba(239,68,68,0.2) !important;
  background: linear-gradient(135deg, rgba(239,68,68,0.08) 0%, rgba(220,38,38,0.05) 100%) !important;
}

/* ── Preview area premium ────────────────────────────────────────────────────── */
.gs-preview-area {
  background: linear-gradient(135deg, #0a0a18 0%, #0d0d1e 100%) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

/* ── Tab buttons premium ─────────────────────────────────────────────────────── */
.gs-tab.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent) 0%, color-mix(in srgb, var(--accent) 12%, transparent) 100%) !important;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
  color: var(--accent-light) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* ── Clip items premium ──────────────────────────────────────────────────────── */
.gs-clip {
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.gs-clip:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
  transform: translateY(-1px);
}

.gs-clip.selected {
  border-color: var(--gs-accent) !important;
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── Section titles premium ──────────────────────────────────────────────────── */
.gs-section-title {
  background: linear-gradient(90deg, var(--accent-light) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
}

/* ── Share button (Loom's killer feature) ────────────────────────────────────── */
.gs-btn--share {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 40%, transparent) !important;
  transition: all 0.2s !important;
}

.gs-btn--share:hover:not(:disabled) {
  box-shadow: 0 6px 28px color-mix(in srgb, var(--accent) 55%, transparent) !important;
  transform: scale(1.02) !important;
}

/* ── Premium glow on main layout ─────────────────────────────────────────────── */
.gs-wrapper {
  position: relative;
}

.gs-wrapper::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 600px; height: 300px;
  background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--accent) 4%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Status bar premium ──────────────────────────────────────────────────────── */
.gs-status-bar {
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

.gs-status--recording {
  background: linear-gradient(90deg, rgba(239,68,68,0.15) 0%, rgba(220,38,38,0.1) 100%) !important;
  border-bottom: 1px solid rgba(239,68,68,0.2) !important;
}

/* ── Export buttons premium ──────────────────────────────────────────────────── */
.gs-btn--export {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent) 0%, rgba(109,40,217,0.15) 100%) !important;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

.gs-btn--export:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%) !important;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 40%, transparent) !important;
  transform: scale(1.01) !important;
}

/* ── Pro badge premium ───────────────────────────────────────────────────────── */
.gs-pro-badge {
  background: linear-gradient(135deg, rgba(245,158,11,0.2) 0%, rgba(217,119,6,0.15) 100%) !important;
  border-color: rgba(245,158,11,0.4) !important;
  animation: gs-pro-shimmer 3s ease infinite;
}

@keyframes gs-pro-shimmer {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
  50%       { box-shadow: 0 0 12px 2px rgba(245,158,11,0.1); }
}

/* ── Webcam PiP premium ──────────────────────────────────────────────────────── */
.gs-pip-video {
  border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent) !important;
  border-radius: 50% !important;
}

/* ── Main area (no sidebar at top in mobile) ─────────────────────────────────── */
.gs-main {
  position: relative;
}

/* ── Subtitle / transcript area ──────────────────────────────────────────────── */
.gs-subs-area {
  font-family: 'Inter', sans-serif;
  line-height: 1.7;
  font-size: 14px;
  color: var(--gs-text-muted);
}

/* ── Annotation toolbar premium ──────────────────────────────────────────────── */
.gs-annot-bar {
  background: rgba(20,20,30,0.95) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}


/* ===== css/giri-word.css?v=2602250001 ===== */
/**
 * ════════════════════════════════════════════════════════
 * GIRI WORD v4.0 — MAHA PREMIUM
 * Theme support · Page sizes · Folders · White mode
 * ════════════════════════════════════════════════════════
 */

/* ── View Container ─────────────────────────────────────── */
#view-giri-word {
  display: none;
  flex-direction: column;
  height: calc(100vh - 60px);
  overflow: hidden;
  background: var(--bg-primary, #0d0e1a);
  color: var(--text, #e2e8f0);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

#view-giri-word.active {
  display: flex !important;
  padding: 0 !important;
  max-width: none !important;
}

/* ── Focus mode active on body ──────────────────────────── */
body.gw-focus-active .sidebar,
body.gw-focus-active .app-header {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* ── Focus banner ───────────────────────────────────────── */
.gw-focus-banner {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent, #6366f1), var(--accent-light, #818cf8), #ec4899);
  z-index: 1100;
  animation: gw-banner-slide 0.3s ease;
}
.gw-focus-banner.active { display: block; }

@keyframes gw-banner-slide {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Main container ─────────────────────────────────────── */
.gw-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.gw-container.focus-mode .gw-toolbar {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  padding: 0;
  border: none;
}

.gw-container.focus-mode .gw-body {
  height: 100%;
}

/* ── Toolbar ────────────────────────────────────────────── */
.gw-toolbar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 12px;
  background: var(--bg-secondary, #14141f);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  min-height: 48px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  transition: all 0.3s ease;
}
.gw-toolbar::-webkit-scrollbar { display: none; }

/* Theme-aware border */
[data-theme="ivory"] .gw-toolbar,
[data-theme="sakura"] .gw-toolbar,
[data-theme="pastel"] .gw-toolbar,
[data-theme="mint"] .gw-toolbar {
  border-bottom-color: rgba(0,0,0,0.1);
}

/* ── Toolbar section ────────────────────────────────────── */
.gw-toolbar-section {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  border-right: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.gw-toolbar-section:last-child {
  border-right: none;
}

[data-theme="ivory"] .gw-toolbar-section,
[data-theme="sakura"] .gw-toolbar-section,
[data-theme="pastel"] .gw-toolbar-section,
[data-theme="mint"] .gw-toolbar-section {
  border-right-color: rgba(0,0,0,0.08);
}

/* ── Title input ────────────────────────────────────────── */
.gw-title-input {
  background: none;
  border: none;
  outline: none;
  color: var(--text, #e2e8f0);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  min-width: 180px;
  max-width: 300px;
  transition: background 0.2s;
}
.gw-title-input:hover { background: rgba(128,128,128,0.08); }
.gw-title-input:focus { background: color-mix(in srgb, var(--accent, #6366f1) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 30%, transparent); }

/* ── Toolbar buttons ────────────────────────────────────── */
.gw-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  flex-shrink: 0;
}
.gw-btn:hover {
  background: rgba(128,128,128,0.12);
  color: var(--text, #e2e8f0);
}
.gw-btn.active {
  background: color-mix(in srgb, var(--accent, #6366f1) 20%, transparent);
  color: var(--accent-light, #818cf8);
}
.gw-btn:active {
  transform: scale(0.94);
}

/* ── Autosave indicator ─────────────────────────────────── */
.gw-autosave-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  transition: background 0.3s;
  flex-shrink: 0;
}
.gw-autosave-dot.saving {
  background: #f59e0b;
  animation: gw-dot-pulse 0.8s ease infinite;
}
@keyframes gw-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Export panel ───────────────────────────────────────── */
.gw-export-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-tertiary, #1c1c2e);
  border: 1px solid rgba(128,128,128,0.15);
  border-radius: 12px;
  padding: 8px;
  min-width: 180px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  z-index: 200;
  display: none;
  animation: gw-export-in 0.15s ease;
}
.gw-export-panel.open { display: block; }

@keyframes gw-export-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gw-export-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 8px 8px;
  border-bottom: 1px solid rgba(128,128,128,0.1);
  margin-bottom: 4px;
}

.gw-export-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text, #e2e8f0);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}
.gw-export-btn:hover { background: color-mix(in srgb, var(--accent, #6366f1) 15%, transparent); }
.gw-export-btn svg { width: 16px; height: 16px; color: var(--accent, #6366f1); flex-shrink: 0; }

/* ── Body layout ────────────────────────────────────────── */
.gw-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: 0;
}

/* ══════════════════════════════════════════════════════════
 * SIDEBAR — Documents + Folders
 * ══════════════════════════════════════════════════════════ */
.gw-sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--bg-secondary, #14141f);
  border-right: 1px solid rgba(128,128,128,0.08);
  overflow-y: auto;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.25s ease;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent, #6366f1) 20%, transparent) transparent;
  display: flex;
  flex-direction: column;
}
.gw-sidebar.hidden {
  width: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: none;
}

.gw-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 8px;
  flex-shrink: 0;
}

.gw-sidebar-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted, #475569);
}

.gw-sidebar-actions {
  display: flex;
  gap: 4px;
}

.gw-sidebar-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, #475569);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.gw-sidebar-action-btn:hover {
  background: rgba(128,128,128,0.12);
  color: var(--accent-light, #818cf8);
}

/* ── Folder styles ──────────────────────────────────────── */
.gw-folder {
  margin: 0 6px 2px;
}

.gw-folder-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.gw-folder-header:hover {
  background: rgba(128,128,128,0.08);
}

.gw-folder-chevron {
  font-size: 10px;
  color: var(--text-muted, #475569);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.gw-folder.open .gw-folder-chevron {
  transform: rotate(90deg);
}

.gw-folder-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.gw-folder-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #e2e8f0);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gw-folder-count {
  font-size: 10px;
  color: var(--text-muted, #475569);
  flex-shrink: 0;
}

.gw-folder-actions {
  display: none;
  gap: 2px;
}
.gw-folder-header:hover .gw-folder-actions {
  display: flex;
}

.gw-folder-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted, #475569);
  font-size: 11px;
  cursor: pointer;
}
.gw-folder-action:hover {
  background: rgba(128,128,128,0.15);
  color: var(--accent-light, #818cf8);
}

.gw-folder-children {
  display: none;
  padding-left: 12px;
}
.gw-folder.open .gw-folder-children {
  display: block;
}

/* ── Document item ──────────────────────────────────────── */
.gw-doc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin: 1px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.gw-doc-item:hover {
  background: rgba(128,128,128,0.08);
  border-color: rgba(128,128,128,0.06);
}
.gw-doc-item.active {
  background: color-mix(in srgb, var(--accent, #6366f1) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent, #6366f1) 30%, transparent);
}

.gw-doc-icon {
  font-size: 14px;
  flex-shrink: 0;
}

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

.gw-doc-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gw-doc-meta {
  font-size: 10px;
  color: var(--text-muted, #475569);
  margin-top: 1px;
}

.gw-doc-actions {
  display: none;
  gap: 2px;
  flex-shrink: 0;
}
.gw-doc-item:hover .gw-doc-actions {
  display: flex;
}

.gw-doc-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-size: 10px;
  cursor: pointer;
}
.gw-doc-action-btn:hover {
  background: rgba(128,128,128,0.15);
  color: #ef4444;
}

/* ── Templates panel (inside sidebar) ───────────────────── */
.gw-templates-section {
  border-top: 1px solid rgba(128,128,128,0.08);
  padding: 8px 0;
  margin-top: auto;
}

.gw-template-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 1px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.gw-template-item:hover {
  background: rgba(128,128,128,0.08);
  border-color: rgba(128,128,128,0.06);
}
.gw-template-item.active {
  background: color-mix(in srgb, var(--accent, #6366f1) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent, #6366f1) 30%, transparent);
}

.gw-template-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.gw-template-info { min-width: 0; }
.gw-template-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gw-template-cat {
  font-size: 9px;
  color: var(--text-muted, #475569);
  margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════
 * PAGE SETTINGS BAR
 * ══════════════════════════════════════════════════════════ */
.gw-page-settings {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  background: var(--bg-tertiary, #0f0f1f);
  border-bottom: 1px solid rgba(128,128,128,0.06);
  flex-shrink: 0;
  font-size: 11px;
}

.gw-ps-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gw-ps-label {
  color: var(--text-muted, #475569);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gw-ps-select {
  height: 26px;
  padding: 0 8px;
  background: rgba(128,128,128,0.08);
  border: 1px solid rgba(128,128,128,0.12);
  border-radius: 6px;
  color: var(--text, #e2e8f0);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.gw-ps-select:hover {
  border-color: rgba(128,128,128,0.25);
}
.gw-ps-select:focus {
  border-color: var(--accent, #6366f1);
}
.gw-ps-select option {
  background: var(--bg-secondary, #14141f);
  color: var(--text, #e2e8f0);
}

.gw-ps-color-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 2px solid rgba(128,128,128,0.2);
  cursor: pointer;
  transition: all 0.15s;
}
.gw-ps-color-btn:hover {
  transform: scale(1.1);
}
.gw-ps-color-btn.active {
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent, #6366f1) 40%, transparent);
}

/* ── Editor wrapper ─────────────────────────────────────── */
.gw-editor-wrap {
  flex: 1;
  overflow: auto;
  background: var(--bg-primary, #0d0e1a);
  display: flex;
  justify-content: center;
  padding: 24px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent, #6366f1) 20%, transparent) transparent;
}

/* ── Editor inner (the page) ────────────────────────────── */
.gw-editor-inner {
  width: 100%;
  max-width: 820px;
  transition: max-width 0.3s ease;
}

/* Page size variants */
.gw-editor-inner.gw-size-a4     { max-width: 794px; }
.gw-editor-inner.gw-size-a5     { max-width: 559px; }
.gw-editor-inner.gw-size-letter { max-width: 816px; }
.gw-editor-inner.gw-size-legal  { max-width: 816px; }
.gw-editor-inner.gw-size-b5     { max-width: 665px; }
.gw-editor-inner.gw-size-full   { max-width: 100%; }

/* ── Editor page (document simulation) ──────────────────── */
.gw-editor-page {
  background: var(--bg-tertiary, #1e1e30);
  border-radius: 8px;
  min-height: calc(100vh - 200px);
  padding: 48px 56px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(128,128,128,0.06);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Page color variants */
.gw-editor-page.gw-page-white {
  background: #ffffff;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.08);
}
.gw-editor-page.gw-page-cream {
  background: #FFF8F0;
  box-shadow: 0 2px 20px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
}
.gw-editor-page.gw-page-sepia {
  background: #F4ECD8;
  box-shadow: 0 2px 20px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
}
.gw-editor-page.gw-page-dark {
  background: var(--bg-tertiary, #1e1e30);
}

/* Text color on light pages */
.gw-editor-page.gw-page-white .ql-editor,
.gw-editor-page.gw-page-cream .ql-editor,
.gw-editor-page.gw-page-sepia .ql-editor {
  color: #1a1a2e !important;
}
.gw-editor-page.gw-page-white .ql-editor h1,
.gw-editor-page.gw-page-cream .ql-editor h1,
.gw-editor-page.gw-page-sepia .ql-editor h1 {
  color: #111827 !important;
}
.gw-editor-page.gw-page-white .ql-editor h2,
.gw-editor-page.gw-page-cream .ql-editor h2,
.gw-editor-page.gw-page-sepia .ql-editor h2 {
  color: #1f2937 !important;
}
.gw-editor-page.gw-page-white .ql-editor h3,
.gw-editor-page.gw-page-cream .ql-editor h3,
.gw-editor-page.gw-page-sepia .ql-editor h3 {
  color: #374151 !important;
}
.gw-editor-page.gw-page-white .ql-editor strong,
.gw-editor-page.gw-page-cream .ql-editor strong,
.gw-editor-page.gw-page-sepia .ql-editor strong {
  color: #111827 !important;
}
.gw-editor-page.gw-page-white .ql-editor em,
.gw-editor-page.gw-page-cream .ql-editor em,
.gw-editor-page.gw-page-sepia .ql-editor em {
  color: #4b5563 !important;
}
.gw-editor-page.gw-page-white .ql-editor.ql-blank::before,
.gw-editor-page.gw-page-cream .ql-editor.ql-blank::before,
.gw-editor-page.gw-page-sepia .ql-editor.ql-blank::before {
  color: #9ca3af !important;
}
.gw-editor-page.gw-page-white .ql-editor blockquote,
.gw-editor-page.gw-page-cream .ql-editor blockquote,
.gw-editor-page.gw-page-sepia .ql-editor blockquote {
  color: #4b5563 !important;
  background: rgba(0,0,0,0.03) !important;
}

/* Focus mode — wider page */
.gw-container.focus-mode .gw-editor-page {
  max-width: 900px;
  margin: 0 auto;
}

/* ── Quill editor reset ─────────────────────────────────── */
#gw-quill-editor {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text, #dde2f0);
  font-family: 'Inter', 'Georgia', 'Times New Roman', serif;
}

.gw-editor-page .ql-toolbar { display: none !important; }
.gw-editor-page .ql-container {
  border: none !important;
  font-size: 15px;
  font-family: 'Inter', 'Georgia', serif;
}
.gw-editor-page .ql-editor {
  padding: 0;
  color: var(--text, #dde2f0);
  min-height: 300px;
  font-size: 15px;
  line-height: 1.75;
}
.gw-editor-page .ql-editor.ql-blank::before {
  color: var(--text-muted, #3d4566);
  font-style: italic;
  font-size: 15px;
}

/* Quill headings */
.gw-editor-page .ql-editor h1 {
  font-size: 2em;
  font-weight: 800;
  color: var(--text, #f1f5f9);
  margin: 0.8em 0 0.4em;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.gw-editor-page .ql-editor h2 {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--text, #e2e8f0);
  margin: 0.7em 0 0.35em;
}
.gw-editor-page .ql-editor h3 {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--text-muted, #cbd5e1);
  margin: 0.6em 0 0.3em;
}
.gw-editor-page .ql-editor p { margin: 0.4em 0; }
.gw-editor-page .ql-editor ul,
.gw-editor-page .ql-editor ol {
  padding-left: 1.5em;
  margin: 0.5em 0;
}
.gw-editor-page .ql-editor li { margin: 0.25em 0; }
.gw-editor-page .ql-editor blockquote {
  border-left: 3px solid var(--accent, #6366f1);
  padding: 8px 0 8px 16px;
  margin: 16px 0;
  color: var(--text-muted, #94a3b8);
  font-style: italic;
  background: color-mix(in srgb, var(--accent, #6366f1) 6%, transparent);
  border-radius: 0 8px 8px 0;
}
.gw-editor-page .ql-editor strong { color: var(--text, #f1f5f9); font-weight: 700; }
.gw-editor-page .ql-editor em { color: var(--accent-light, #818cf8); }

/* ── Tooltip ────────────────────────────────────────────── */
.gw-btn[data-tip] { position: relative; }
.gw-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,15,35,0.95);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  z-index: 100;
}
.gw-btn[data-tip]:hover::after { opacity: 1; }

/* ── Enter animation ────────────────────────────────────── */
@keyframes pa-fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pa-page-enter { animation: pa-fade-in-up 0.3s ease both; }

/* ══════════════════════════════════════════════════════════
 * STATS BAR
 * ══════════════════════════════════════════════════════════ */
.gw-stats-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 16px;
  height: 28px;
  background: color-mix(in srgb, var(--bg-primary, #0f0f1f) 90%, black);
  border-bottom: 1px solid rgba(128,128,128,0.06);
  font-size: 11px;
  color: var(--text-muted, #475569);
  flex-shrink: 0;
  overflow: hidden;
}

.gw-stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  white-space: nowrap;
}

.gw-stat-sep {
  width: 1px;
  height: 14px;
  background: rgba(128,128,128,0.1);
  flex-shrink: 0;
}

/* ── Level Badge ────────────────────────────────────────── */
.gw-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.3s ease;
}

/* ── XP Area ────────────────────────────────────────────── */
.gw-xp-area {
  gap: 6px !important;
  padding: 0 10px !important;
}

.gw-xp-track {
  width: 60px;
  height: 4px;
  background: rgba(128,128,128,0.1);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.gw-xp-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  overflow: hidden;
}

.gw-xp-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: gw-xp-shine 2s ease-in-out infinite;
}

@keyframes gw-xp-shine {
  0%   { left: -60%; }
  100% { left: 160%; }
}

.gw-xp-num {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}

/* ── Toolbar Separator ──────────────────────────────────── */
.gw-toolbar-sep {
  width: 1px;
  height: 24px;
  background: rgba(128,128,128,0.1);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── Ambient Sound Buttons ──────────────────────────────── */
.gw-amb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: none;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-muted, #475569);
  position: relative;
}

.gw-amb-btn:hover {
  background: rgba(128,128,128,0.1);
  border-color: rgba(128,128,128,0.15);
  color: var(--text, #94a3b8);
  transform: scale(1.1);
}

.gw-amb-btn.active {
  background: color-mix(in srgb, var(--accent, #6366f1) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent, #6366f1) 35%, transparent);
  color: var(--accent-light, #818cf8);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent, #6366f1) 25%, transparent);
  animation: gw-amb-pulse 2s ease-in-out infinite;
}

@keyframes gw-amb-pulse {
  0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--accent, #6366f1) 25%, transparent); }
  50%       { box-shadow: 0 0 16px color-mix(in srgb, var(--accent, #6366f1) 40%, transparent); }
}

.gw-amb-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: rgba(15,15,35,0.95);
  color: #e2e8f0; font-size: 10px; font-weight: 500;
  padding: 3px 7px; border-radius: 5px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
  border: 1px solid rgba(255,255,255,0.08); z-index: 100;
}
.gw-amb-btn[data-tip]:hover::after { opacity: 1; }

/* ── Inspire Button ─────────────────────────────────────── */
.gw-inspire-btn {
  width: auto !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(245,158,11,0.08)) !important;
  border: 1px solid rgba(251,191,36,0.25) !important;
  color: #fbbf24 !important;
  letter-spacing: 0.02em;
  transition: all 0.2s ease !important;
}
.gw-inspire-btn:hover {
  background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(245,158,11,0.18)) !important;
  box-shadow: 0 0 16px rgba(251,191,36,0.25) !important;
  transform: scale(1.02);
}
.gw-inspire-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Autocorrect Button ─────────────────────────────────── */
.gw-autocorrect-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 0 10px !important;
  width: auto !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  height: 30px;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--accent, #6366f1) 8%, transparent) !important;
  color: var(--text-muted, #64748b) !important;
  border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 15%, transparent) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.03em;
}
.gw-autocorrect-btn.active {
  background: color-mix(in srgb, var(--accent, #6366f1) 18%, transparent) !important;
  color: var(--accent-light, #818cf8) !important;
  border-color: color-mix(in srgb, var(--accent, #6366f1) 35%, transparent) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent, #6366f1) 20%, transparent) !important;
}
.gw-ac-pulse {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #22d3ee; flex-shrink: 0; opacity: 0.4; transition: all 0.3s;
}
.gw-ac-pulse.active { opacity:1; animation: gw-pulse-anim 0.8s ease infinite; background: var(--accent, #6366f1); }
@keyframes gw-pulse-anim { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.6);opacity:0.6} }
.gw-corrections-badge {
  display: none; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: linear-gradient(135deg, var(--accent, #6366f1), color-mix(in srgb, var(--accent, #6366f1) 80%, black)); color:#fff;
  font-size:10px; font-weight:700; border-radius:9px; margin-left:-6px; margin-top:-8px;
  align-self:flex-start; box-shadow: 0 2px 6px color-mix(in srgb, var(--accent, #6366f1) 50%, transparent);
  animation: gw-badge-pop 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.gw-corrections-badge.visible { display: inline-flex; }
@keyframes gw-badge-pop { from{transform:scale(0)} to{transform:scale(1)} }
.gw-tpl-ai-btn { display:flex;align-items:center;gap:6px;width:calc(100% - 16px);margin:8px 8px 4px;padding:7px 10px;background:color-mix(in srgb,var(--accent,#6366f1) 10%,transparent);border:1px dashed color-mix(in srgb,var(--accent,#6366f1) 40%,transparent);border-radius:8px;color:color-mix(in srgb,var(--accent,#6366f1) 90%,white);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit;letter-spacing:.02em; }
.gw-tpl-ai-btn:hover { background:color-mix(in srgb,var(--accent,#6366f1) 18%,transparent);border-color:color-mix(in srgb,var(--accent,#6366f1) 60%,transparent);transform:translateY(-1px); }
.gw-tpl-ai-btn.loading { opacity:.6;cursor:wait; }
.gw-tpl-ai-btn.loading .gw-tpl-ai-ico { animation:gw-spin 1s linear infinite; }
@keyframes gw-spin { to{transform:rotate(360deg)} }
.gw-tpl-ai-ico { font-size:13px;flex-shrink:0; }
.gw-tpl-ai-txt { flex:1;text-align:left; }

/* ── Autocorrect Bar ────────────────────────────────────── */
.gw-ac-bar {
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  height: 0; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #6366f1) 12%, transparent), color-mix(in srgb, var(--accent, #6366f1) 8%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--accent, #6366f1) 15%, transparent);
  font-size: 12px; font-weight: 500; color: var(--accent-light, #a5b4fc);
  transition: height 0.25s ease; flex-shrink: 0;
}
.gw-ac-bar.visible { height: 34px; }
.gw-ac-bar-ico { font-size:14px; flex-shrink:0; }
#gw-ac-bar-msg { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
.gw-ac-bar-undo {
  display:inline-flex; align-items:center; gap:4px; padding:3px 10px;
  border:1px solid color-mix(in srgb, var(--accent, #6366f1) 30%, transparent); border-radius:6px;
  background: color-mix(in srgb, var(--accent, #6366f1) 15%, transparent); color: var(--accent-light, #818cf8); font-size:11px; font-weight:600; cursor:pointer; flex-shrink:0;
}
.gw-ac-bar-undo:hover { background: color-mix(in srgb, var(--accent, #6366f1) 30%, transparent); }
.gw-ac-bar-close {
  display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:50%; background: rgba(128,128,128,0.08); color: var(--text-muted, #64748b); font-size:12px; cursor:pointer; border:none;
}
.gw-ac-bar-close:hover { background: rgba(128,128,128,0.15); color: var(--text, #e2e8f0); }

/* ── Find & Replace Panel ───────────────────────────────── */
.gw-findreplace {
  flex-direction: column; gap: 6px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--bg-primary, #0f0f1f) 90%, black);
  border-bottom: 1px solid rgba(128,128,128,0.08);
  flex-shrink: 0;
  animation: pa-fade-in-up 0.2s ease both;
}

.gw-fr-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gw-fr-input {
  flex: 1;
  height: 28px;
  padding: 0 10px;
  background: rgba(128,128,128,0.08);
  border: 1px solid rgba(128,128,128,0.12);
  border-radius: 6px;
  color: var(--text, #e2e8f0);
  font-size: 12px;
  outline: none;
  max-width: 240px;
  transition: border-color 0.15s;
}
.gw-fr-input:focus { border-color: var(--accent, #6366f1); background: color-mix(in srgb, var(--accent, #6366f1) 6%, transparent); }

.gw-fr-btn {
  height: 28px;
  padding: 0 10px;
  background: rgba(128,128,128,0.08);
  border: 1px solid rgba(128,128,128,0.1);
  border-radius: 6px;
  color: var(--text-muted, #94a3b8);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.gw-fr-btn:hover { background: rgba(128,128,128,0.15); color: var(--text, #e2e8f0); }
.gw-fr-btn--action {
  background: color-mix(in srgb, var(--accent, #6366f1) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent, #6366f1) 30%, transparent);
  color: var(--accent-light, #818cf8);
}
.gw-fr-btn--action:hover { background: color-mix(in srgb, var(--accent, #6366f1) 25%, transparent); }

.gw-fr-count {
  font-size: 11px;
  color: var(--text-muted, #475569);
  min-width: 60px;
}

/* ── Daily Goal Ring ────────────────────────────────────── */
.gw-goal-ring {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 72px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
  transition: transform 0.2s ease;
}
.gw-goal-ring:hover { transform: scale(1.08); }

.gw-goal-svg {
  width: 60px; height: 60px;
  transform: rotate(-90deg);
  position: absolute; top: 0;
}

.gw-goal-track {
  fill: none;
  stroke: rgba(128,128,128,0.1);
  stroke-width: 4;
}

.gw-goal-prog {
  fill: none;
  stroke: var(--text-muted, #475569);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 150.796;
  stroke-dashoffset: 150.796;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.34,1.56,0.64,1), stroke 0.4s ease;
}

.gw-goal-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-top: 2px;
}

.gw-goal-words {
  font-size: 13px;
  font-weight: 800;
  color: var(--text, #e2e8f0);
  line-height: 1;
}

.gw-goal-total {
  font-size: 9px;
  color: var(--text-muted, #475569);
  line-height: 1;
}

.gw-goal-label {
  font-size: 9px;
  color: var(--text-muted, #475569);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.gw-goal-ring.gw-goal-done .gw-goal-words { color: #10b981; }
.gw-goal-ring.gw-goal-done { animation: gw-goal-bounce 0.6s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes gw-goal-bounce { 0%{transform:scale(1)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }

body.gw-focus-active .gw-goal-ring { opacity: 0; pointer-events: none; }

/* ── XP Popup ───────────────────────────────────────────── */
.gw-xp-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  animation: gw-xp-float 2s ease-out forwards;
}
@keyframes gw-xp-float {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-50px); }
}
.gw-xp-popup-amount {
  font-size: 14px;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251,191,36,0.6);
}
.gw-xp-popup-reason {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
}

/* ── Achievement Popup ──────────────────────────────────── */
.gw-achievement-popup {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9997;
  background: linear-gradient(135deg, rgba(15,15,35,0.98), rgba(20,20,50,0.98));
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 14px;
  padding: 0;
  min-width: 280px;
  max-width: 340px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.gw-achievement-popup.hiding { opacity: 0; transform: translateX(-20px); }

.gw-ach-header {
  padding: 8px 14px 4px;
  background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(245,158,11,0.08));
  border-bottom: 1px solid rgba(251,191,36,0.15);
}
.gw-ach-unlocked {
  font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fbbf24;
}
.gw-ach-body {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
}
.gw-ach-icon { font-size: 28px; flex-shrink: 0; }
.gw-ach-info { flex: 1; min-width: 0; }
.gw-ach-name { font-size: 14px; font-weight: 800; color: #f1f5f9; margin-bottom: 2px; }
.gw-ach-desc { font-size: 11px; color: #64748b; }
.gw-ach-xp { font-size: 16px; font-weight: 900; color: #fbbf24; text-shadow: 0 0 12px rgba(251,191,36,0.5); flex-shrink: 0; }

/* ── Level Up Modal ─────────────────────────────────────── */
.gw-levelup-modal {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  animation: pa-fade-in-up 0.4s ease both; cursor: pointer;
}
.gw-levelup-modal.hiding { opacity:0; transition: opacity 0.4s; }

.gw-levelup-inner {
  background: linear-gradient(135deg, #0f0f2a, #1a1a3e);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
  padding: 40px 48px; text-align: center; max-width: 360px;
  box-shadow: 0 16px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
  animation: gw-levelup-bounce 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes gw-levelup-bounce { 0%{transform:scale(0.6);opacity:0} 100%{transform:scale(1);opacity:1} }

.gw-levelup-stars { font-size: 18px; letter-spacing: 8px; margin-bottom: 16px; animation: gw-spin-slow 3s linear infinite; }
@keyframes gw-spin-slow { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
.gw-levelup-badge { font-size: 56px; margin-bottom: 12px; animation: gw-badge-float 2s ease-in-out infinite; }
@keyframes gw-badge-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.gw-levelup-title { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #64748b; margin-bottom: 8px; }
.gw-levelup-name  { font-size: 22px; font-weight: 900; margin-bottom: 10px; }
.gw-levelup-sub   { font-size: 13px; color: #64748b; margin-bottom: 24px; }
.gw-levelup-close {
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--accent, #6366f1), color-mix(in srgb, var(--accent, #6366f1) 80%, black));
  color: #fff; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.gw-levelup-close:hover { transform: scale(1.04); box-shadow: 0 4px 20px color-mix(in srgb, var(--accent, #6366f1) 50%, transparent); }

/* ── Milestone Toast ────────────────────────────────────── */
.gw-milestone-toast {
  position: fixed; top: 80px; left: 50%;
  transform: translateX(-50%) translateY(-20px); z-index: 9996;
  display: flex; align-items: center; gap: 10px; padding: 12px 20px;
  background: rgba(15,15,35,0.96); border: 1px solid; border-radius: 12px;
  font-size: 13px; font-weight: 600; color: #e2e8f0; opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); white-space: nowrap;
}
.gw-milestone-toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }
.gw-milestone-ico  { font-size:18px; flex-shrink:0; }
.gw-milestone-xp   { font-size:14px; font-weight:900; margin-left:6px; }

/* ── Flow State Indicator ───────────────────────────────── */
.gw-flow-indicator {
  position: fixed; top: 90px; right: 20px; z-index: 200;
  display: flex; align-items: center; gap: 6px; padding: 6px 14px;
  background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.35);
  border-radius: 20px; font-size: 12px; font-weight: 700; color: #a78bfa;
  opacity: 0; transform: translateX(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  backdrop-filter: blur(8px); pointer-events: none;
}
.gw-flow-indicator.visible { opacity:1; transform:translateX(0); }
.gw-flow-wave { font-size:16px; animation: gw-wave-anim 1.5s ease infinite; }
@keyframes gw-wave-anim { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.gw-flow-score { font-size:11px; opacity:0.7; }

/* ── Flow active — page glow ────────────────────────────── */
.gw-editor-page.gw-flow-active {
  box-shadow: 0 4px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(139,92,246,0.08),
              0 0 60px rgba(139,92,246,0.06);
  animation: gw-flow-glow 3s ease-in-out infinite;
}
@keyframes gw-flow-glow {
  0%,100% { box-shadow: 0 4px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(139,92,246,0.08), 0 0 60px rgba(139,92,246,0.06); }
  50%      { box-shadow: 0 4px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(139,92,246,0.15), 0 0 80px rgba(139,92,246,0.12); }
}

/* ── Focus mode upgrades ────────────────────────────────── */
.gw-container.focus-mode .gw-stats-bar   { display: none; }
.gw-container.focus-mode .gw-ac-bar      { display: none; }
.gw-container.focus-mode .gw-findreplace { display: none !important; }
.gw-container.focus-mode .gw-page-settings { display: none; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .gw-toolbar { min-height: 44px; }
  .gw-editor-wrap { padding: 16px 12px; }
  .gw-editor-page { padding: 24px 20px; }
  .gw-sidebar { width: 200px; min-width: 200px; }
  .gw-title-input { min-width: 120px; max-width: 200px; }
  .gw-page-settings { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 600px) {
  .gw-sidebar { display: none; }
  .gw-editor-wrap { padding: 12px 8px; }
  .gw-editor-page { padding: 20px 16px; min-height: calc(100vh - 120px); }
  .gw-stats-bar { display: none; }
  .gw-title-input { min-width: 100px; }
  .gw-page-settings { display: none; }
}

@media (max-width: 768px) {
  .gw-stats-bar { font-size:10px; padding:0 8px; }
  .gw-stat-item { padding:0 5px; }
  .gw-xp-track  { width: 40px; }
  .gw-goal-ring { bottom: 16px; right: 16px; width:60px; height:68px; }
  .gw-goal-svg  { width:52px; height:52px; }
  .gw-achievement-popup { left:12px; right:12px; min-width:unset; max-width:unset; }
  .gw-levelup-inner { padding:28px 24px; }
}

@media (max-width: 500px) {
  .gw-inspire-btn { display: none; }
}

/* ── Folder rename input ────────────────────────────────── */
.gw-folder-rename-input {
  background: rgba(128,128,128,0.1);
  border: 1px solid var(--accent, #6366f1);
  border-radius: 4px;
  color: var(--text, #e2e8f0);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  outline: none;
  width: 100%;
}
/* ===== css/giri-translate.css?v=2602240010 ===== */
/* ============================================================
   GIRI TRANSLATE - CSS
   ProductiveApp v4.1.0
   Glassmorphism · Dark mode · Responsive
   ============================================================ */

/* ─── Layout ─────────────────────────────────────────────── */
#view-giri-translate {
  padding: 24px;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}

.gt-app {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  font-family: inherit;
}

/* ─── Header ─────────────────────────────────────────────── */
.gt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.gt-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary, #e2e8f0);
}

.gt-icon-title {
  width: 28px; height: 28px;
  stroke: var(--accent, #6c63ff);
}

.gt-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 99px;
  background: linear-gradient(135deg, #6c63ff, var(--accent-light));
  color: #fff;
  vertical-align: middle;
}

.gt-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gt-rate-display {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--text-secondary, #94a3b8);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 5px 10px;
  border-radius: 8px;
}
.gt-rate-display svg {
  width: 13px; height: 13px;
  flex-shrink: 0;
}

/* ─── Panels Container ──────────────────────────────────── */
.gt-panels {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 420px;
  position: relative;
}

/* ─── Panel ──────────────────────────────────────────────── */
.gt-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.2s;
}
.gt-panel:focus-within {
  border-color: rgba(108,99,255,0.4);
  box-shadow: 0 0 0 3px rgba(108,99,255,0.1);
}

.gt-panel-source { border-radius: 16px 0 0 16px; border-right: none; }
.gt-panel-target { border-radius: 0 16px 16px 0; border-left: none; }

/* ─── Panel Header ───────────────────────────────────────── */
.gt-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  gap: 8px;
}

.gt-lang-select {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--text-primary, #e2e8f0);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 6px 10px;
  outline: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  max-width: 220px;
}
.gt-lang-select:hover { background: rgba(255,255,255,0.12); }
.gt-lang-select:focus { border-color: rgba(108,99,255,0.5); }
.gt-lang-select option { background: #1e293b; color: #e2e8f0; }

.gt-panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ─── Icon buttons ───────────────────────────────────────── */
.gt-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.gt-btn-icon svg { width: 16px; height: 16px; pointer-events: none; }
.gt-btn-icon:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary, #e2e8f0);
}
.gt-btn-icon:active { transform: scale(0.92); }
.gt-btn-icon.speaking {
  color: #6c63ff;
  background: rgba(108,99,255,0.15);
  animation: gt-pulse 1s infinite;
}
.gt-btn-copy.copied {
  color: #10b981 !important;
  background: rgba(16,185,129,0.15) !important;
}

@keyframes gt-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ─── Textarea ───────────────────────────────────────────── */
.gt-textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: var(--text-primary, #e2e8f0);
  font-size: 1rem;
  line-height: 1.6;
  padding: 16px;
  font-family: inherit;
  min-height: 280px;
}
.gt-textarea::placeholder { color: var(--text-muted, #475569); }

/* ─── Result ─────────────────────────────────────────────── */
.gt-result-wrap {
  flex: 1;
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.gt-result {
  flex: 1;
  padding: 16px;
  color: var(--text-primary, #e2e8f0);
  font-size: 1rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  transition: opacity 0.18s ease;
  overflow: auto;
}
.gt-result.error { color: #f87171; }

.gt-placeholder {
  color: var(--text-muted, #475569);
  font-style: italic;
}

.gt-error-msg { color: #f87171; }

/* ─── Loader ─────────────────────────────────────────────── */
.gt-loader {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.875rem;
}

.gt-spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(108,99,255,0.2);
  border-top-color: #6c63ff;
  border-radius: 50%;
  animation: gt-spin 0.7s linear infinite;
}

@keyframes gt-spin { to { transform: rotate(360deg); } }

/* ─── Panel Footer ───────────────────────────────────────── */
.gt-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  min-height: 34px;
}

.gt-char-count {
  font-size: 0.75rem;
  color: var(--text-muted, #475569);
  transition: color 0.2s;
}
.gt-char-count.gt-char-warn { color: #f59e0b; }
.gt-char-count.gt-char-over { color: #ef4444; }

.gt-detected {
  font-size: 0.75rem;
  color: #6c63ff;
  font-weight: 500;
  animation: gt-fadein 0.3s ease;
}

.gt-result-chars {
  font-size: 0.75rem;
  color: var(--text-muted, #475569);
}

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

/* ─── Switch Button ──────────────────────────────────────── */
.gt-switch-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: relative;
}

.gt-btn-switch {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(108,99,255,0.4);
  background: rgba(108,99,255,0.12);
  color: var(--accent-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, transform 0.25s;
  flex-shrink: 0;
}
.gt-btn-switch svg { width: 18px; height: 18px; pointer-events: none; }
.gt-btn-switch:hover {
  background: rgba(108,99,255,0.25);
  border-color: rgba(108,99,255,0.7);
}
.gt-btn-switch:active { transform: scale(0.9); }
.gt-btn-switch.spinning { animation: gt-spin-once 0.4s ease; }

@keyframes gt-spin-once {
  from { transform: rotate(0deg); }
  to   { transform: rotate(180deg); }
}

/* ─── History Button ─────────────────────────────────────── */
.gt-btn-history {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary, #94a3b8);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.gt-btn-history svg { width: 14px; height: 14px; flex-shrink: 0; }
.gt-btn-history:hover { background: rgba(255,255,255,0.12); color: var(--text-primary, #e2e8f0); }
.gt-btn-history.active {
  background: rgba(108,99,255,0.18);
  border-color: rgba(108,99,255,0.4);
  color: var(--accent-light);
}

/* ─── History Panel ──────────────────────────────────────── */
.gt-history-panel {
  position: absolute;
  top: 0; right: -320px;
  width: 300px;
  height: 100%;
  min-height: 420px;
  background: rgba(15,23,42,0.95);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease, right 0.25s ease;
  pointer-events: none;
  z-index: 10;
  backdrop-filter: blur(16px);
  overflow: hidden;
}
.gt-history-panel.open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

.gt-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #e2e8f0);
  flex-shrink: 0;
}
.gt-history-header-actions {
  display: flex;
  gap: 4px;
}

.gt-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.gt-history-list::-webkit-scrollbar { width: 4px; }
.gt-history-list::-webkit-scrollbar-track { background: transparent; }
.gt-history-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.gt-history-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted, #475569);
  font-size: 0.875rem;
  font-style: italic;
}

.gt-history-item {
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 4px;
}
.gt-history-item:hover { background: rgba(255,255,255,0.07); }

.gt-history-item-langs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #6c63ff;
  font-weight: 600;
  margin-bottom: 4px;
}
.gt-history-item-langs svg { width: 10px; height: 10px; }
.gt-history-time {
  margin-left: auto;
  color: var(--text-muted, #475569);
  font-weight: 400;
}

.gt-history-item-src {
  font-size: 0.8rem;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gt-history-item-tgt {
  font-size: 0.8rem;
  color: var(--text-primary, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  #view-giri-translate { padding: 16px; }

  .gt-panels {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
  }
  .gt-panel-source { border-radius: 16px; border-right: 1px solid rgba(255,255,255,0.1); }
  .gt-panel-target { border-radius: 16px; border-left: 1px solid rgba(255,255,255,0.1); }

  .gt-switch-wrap { order: 2; height: 48px; }
  .gt-panel-source { order: 1; }
  .gt-panel-target { order: 3; }
  .gt-btn-switch { transform: rotate(90deg); }
  .gt-btn-switch.spinning { animation: gt-spin-once-v 0.4s ease; }

  @keyframes gt-spin-once-v {
    from { transform: rotate(90deg); }
    to   { transform: rotate(270deg); }
  }

  .gt-textarea { min-height: 140px; }
  .gt-result-wrap { min-height: 120px; }

  .gt-history-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: 360px;
    border-radius: 16px 0 0 16px;
    min-height: 100vh;
  }

  .gt-lang-select { max-width: 160px; font-size: 0.8rem; }
  .gt-title { font-size: 1.2rem; }
}

/* ============================================================
   GIRI TRANSLATE — MODE MAHA v101
   Animations hero · Confetti · Particules dorées · Tutorial
   ============================================================ */

/* ─── Hero enter — container apparaît depuis le bas ─────── */
#view-giri-translate .gt-app {
  animation: gt-hero-enter 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes gt-hero-enter {
  from { opacity: 0; transform: translateY(32px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ─── Panels fade-in décalé ──────────────────────────────── */
.gt-panel-source {
  animation: gt-panel-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.gt-panel-target {
  animation: gt-panel-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}
.gt-switch-wrap {
  animation: gt-panel-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}
.gt-header {
  animation: gt-panel-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.0s both;
}
@keyframes gt-panel-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ─── Glow hover panels ──────────────────────────────────── */
.gt-panel {
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.gt-panel:hover {
  border-color: rgba(108, 99, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(108,99,255,0.15),
              0 8px 32px rgba(108,99,255,0.12),
              inset 0 1px 0 rgba(255,255,255,0.06);
}
.gt-panel:focus-within {
  border-color: rgba(108, 99, 255, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(108,99,255,0.18),
              0 12px 40px rgba(108,99,255,0.18),
              inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* ─── Particules dorées canvas ───────────────────────────── */
#gt-particles-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  border-radius: 16px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}
.gt-panel:hover #gt-particles-canvas { opacity: 1; }

/* ─── Titre hover shimmer ────────────────────────────────── */
.gt-title span:first-of-type {
  background: linear-gradient(90deg,
    var(--text-primary, #e2e8f0) 0%,
    var(--accent-light) 40%,
    #f59e0b 60%,
    var(--text-primary, #e2e8f0) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gt-shimmer 4s linear infinite;
}
@keyframes gt-shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* ─── Pulse bouton switch au hover ───────────────────────── */
.gt-btn-switch {
  position: relative;
}
.gt-btn-switch::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108,99,255,0.3) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s, transform 0.3s;
}
.gt-btn-switch:hover::before {
  opacity: 1;
  transform: scale(1);
  animation: gt-ring-pulse 1.2s ease-in-out infinite;
}
@keyframes gt-ring-pulse {
  0%,100% { transform: scale(1);    opacity: 0.6; }
  50%      { transform: scale(1.3); opacity: 0.2; }
}

/* ─── Result success flash ───────────────────────────────── */
.gt-result.success-flash {
  animation: gt-success-flash 0.5s ease;
}
@keyframes gt-success-flash {
  0%   { background: transparent; }
  30%  { background: rgba(108,99,255,0.12); }
  100% { background: transparent; }
}

/* ─── Confetti canvas ────────────────────────────────────── */
#gt-confetti-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 1200;
}

/* ─── Tutorial overlay ───────────────────────────────────── */
.gt-tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gt-tut-fadein 0.4s ease both;
}
@keyframes gt-tut-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.gt-tutorial-card {
  background: linear-gradient(145deg, rgba(17,24,39,0.97), rgba(30,27,75,0.97));
  border: 1px solid rgba(108,99,255,0.4);
  border-radius: 24px;
  padding: 40px 44px;
  max-width: 480px;
  width: calc(100% - 40px);
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5),
              0 0 0 1px rgba(108,99,255,0.2),
              inset 0 1px 0 rgba(255,255,255,0.08);
  animation: gt-tut-card-in 0.45s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes gt-tut-card-in {
  from { opacity: 0; transform: scale(0.88) translateY(24px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.gt-tut-step-icon {
  font-size: 3.5rem;
  margin-bottom: 16px;
  display: block;
  animation: gt-tut-bounce 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}
@keyframes gt-tut-bounce {
  from { transform: scale(0) rotate(-20deg); }
  to   { transform: scale(1) rotate(0deg);   }
}

.gt-tut-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 10px;
  line-height: 1.3;
}
.gt-tut-desc {
  font-size: 0.95rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 28px;
}
.gt-tut-desc strong { color: var(--accent-light); }

.gt-tut-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
}
.gt-tut-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: background 0.3s, transform 0.3s;
}
.gt-tut-dot.active {
  background: #6c63ff;
  transform: scale(1.3);
}

.gt-tut-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.gt-tut-btn-skip {
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #64748b;
  font-size: 0.875rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.gt-tut-btn-skip:hover { color: #94a3b8; border-color: rgba(255,255,255,0.25); }
.gt-tut-btn-next {
  padding: 11px 28px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #6c63ff, var(--accent-light));
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(108,99,255,0.4);
}
.gt-tut-btn-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(108,99,255,0.5);
}
.gt-tut-btn-next:active { transform: scale(0.97); }

/* ─── Sound ripple on translate btn area ─────────────────── */
@keyframes gt-sound-ripple {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0;   }
}
.gt-sound-ripple {
  position: absolute;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,0.4), transparent 70%);
  pointer-events: none;
  animation: gt-sound-ripple 0.7s ease-out forwards;
}

/* ─── Translation counter badge ──────────────────────────── */
.gt-trad-count {
  position: absolute;
  top: -8px; right: -8px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  animation: gt-count-pop 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes gt-count-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ─── Loader shimmer track ───────────────────────────────── */
.gt-loader-track {
  width: 120px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  margin-top: 8px;
}
.gt-loader-track::after {
  content: '';
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, #6c63ff, transparent);
  border-radius: 3px;
  animation: gt-track-slide 1s ease-in-out infinite;
}
@keyframes gt-track-slide {
  from { transform: translateX(-150%); }
  to   { transform: translateX(350%);  }
}

/* ─── Mobile ajustements MAHA ────────────────────────────── */
@media (max-width: 768px) {
  .gt-tutorial-card { padding: 28px 24px; }
  .gt-tut-step-icon { font-size: 2.8rem; }
  .gt-tut-title { font-size: 1.2rem; }
}


/* ===== productive-tools/apps/qr/giri-qr.css?v=2602240010 ===== */
/* ════════════════════════════════════════════════════════
   GIRI QR — Générateur QR Code Pro v1.0
   ProductiveApp · Glassmorphism Design System
   ════════════════════════════════════════════════════════ */

/* ─── Wrapper ──────────────────────────────────────────── */
.gq-wrap {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--text-primary, #e2e8f0);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0 40px;
  min-height: 100vh;
}

/* ─── Header ───────────────────────────────────────────── */
.gq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 28px;
}
.gq-header-left { display: flex; align-items: center; gap: 16px; }
.gq-logo-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 40%, transparent);
}
.gq-title {
  font-size: 22px; font-weight: 800;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0; letter-spacing: -0.3px;
}
.gq-subtitle { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary, #94a3b8); }
.gq-badge {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent-light);
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
  letter-spacing: 0.5px;
}

/* ─── Layout ───────────────────────────────────────────── */
.gq-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  padding: 0 24px;
}
@media (max-width: 900px) {
  .gq-layout { grid-template-columns: 1fr; }
  .gq-panel-right { order: -1; }
}

/* ─── Card ─────────────────────────────────────────────── */
.gq-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
  transition: border-color 0.2s;
}
.gq-card:hover { border-color: rgba(255,255,255,0.12); }

/* ─── Section Title ────────────────────────────────────── */
.gq-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 16px;
}
.gq-gallery-count {
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 10px;
  margin-left: 4px;
}
.gq-ml-auto { margin-left: auto; }

/* ─── Tabs ─────────────────────────────────────────────── */
.gq-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}
.gq-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--text-secondary, #94a3b8);
  font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.18s;
  white-space: nowrap;
}
.gq-tab:hover {
  background: rgba(255,255,255,0.08);
  color: #e2e8f0;
  border-color: var(--tab-color, var(--accent));
  transform: translateY(-1px);
}
.gq-tab.active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: var(--tab-color, var(--accent));
  color: var(--tab-color, var(--accent-light));
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--tab-color, var(--accent))20;
}
.gq-tab-icon { font-size: 16px; line-height: 1; }
.gq-tab-label { font-size: 12px; }

/* ─── Form Fields ──────────────────────────────────────── */
.gq-form { display: flex; flex-direction: column; gap: 14px; }
.gq-field { display: flex; flex-direction: column; gap: 6px; }
.gq-field label {
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  letter-spacing: 0.3px;
}
.gq-field input,
.gq-field select,
.gq-field textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--text-primary, #e2e8f0);
  font-size: 14px; padding: 10px 14px;
  outline: none; transition: border-color 0.18s, box-shadow 0.18s;
  font-family: inherit; width: 100%; box-sizing: border-box;
}
.gq-field input:focus,
.gq-field select:focus,
.gq-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.gq-field textarea { resize: vertical; min-height: 80px; }
.gq-field select { cursor: pointer; }
.gq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gq-check-field { justify-content: flex-end; padding-bottom: 2px; }
.gq-check-field label { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }
.gq-check-field input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }

.gq-input-icon { position: relative; }
.gq-input-icon input { padding-right: 42px; }
.gq-eye-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 16px; padding: 4px; color: var(--text-secondary, #94a3b8);
}
.gq-info, .gq-hint {
  font-size: 12px; color: var(--text-secondary, #94a3b8);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 8px; padding: 10px 12px;
  border-left: 3px solid var(--accent);
}
.gq-hint { background: rgba(255,255,255,0.03); border-left-color: rgba(255,255,255,0.15); }

/* ─── Customization ────────────────────────────────────── */
.gq-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gq-opt-group { display: flex; flex-direction: column; gap: 10px; }
.gq-opt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.gq-opt-row label { font-size: 12px; font-weight: 600; color: var(--text-secondary, #94a3b8); white-space: nowrap; }

.gq-color-pick { display: flex; align-items: center; gap: 8px; }
.gq-color-pick input[type="color"] {
  width: 36px; height: 28px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px; padding: 2px 3px;
  background: none; cursor: pointer;
}
.gq-color-hex {
  font-size: 11px; font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--text-secondary, #94a3b8);
  background: rgba(255,255,255,0.05);
  padding: 3px 7px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
}

.gq-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.1); outline: none; cursor: pointer;
  flex: 1;
}
.gq-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  cursor: pointer; box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 50%, transparent);
}
.gq-select-sm {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; color: var(--text-primary, #e2e8f0);
  font-size: 12px; padding: 6px 10px; outline: none; cursor: pointer;
  width: 100%;
}

/* ─── Logo Section ─────────────────────────────────────── */
.gq-logo-section { margin-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 14px; }
.gq-logo-actions { display: flex; gap: 8px; }
.gq-logo-prev { margin-top: 10px; padding: 10px; background: rgba(255,255,255,0.03); border-radius: 10px; }
.gq-logo-prev img { display: block; }

/* ─── Buttons ──────────────────────────────────────────── */
.gq-btn-ghost {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; color: var(--text-secondary, #94a3b8);
  font-size: 12px; padding: 7px 12px; cursor: pointer;
  transition: all 0.18s; display: inline-flex; align-items: center; gap: 5px;
}
.gq-btn-ghost:hover { background: rgba(255,255,255,0.09); color: #e2e8f0; }
.gq-btn-ghost.gq-danger:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: #ef4444; }
.gq-small { font-size: 11px; padding: 5px 10px; }
.gq-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border: none; border-radius: 10px; color: #fff;
  font-size: 14px; font-weight: 600; padding: 11px 20px;
  cursor: pointer; transition: all 0.18s; display: inline-flex; align-items: center; gap: 6px;
}
.gq-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent); }

/* ─── Batch ────────────────────────────────────────────── */
.gq-batch-ta {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; color: var(--text-primary, #e2e8f0);
  font-size: 13px; padding: 10px 14px; resize: vertical;
  font-family: 'SF Mono', 'Fira Code', monospace;
  outline: none; margin-bottom: 12px;
}
.gq-batch-ta:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.gq-batch-actions { display: flex; align-items: center; gap: 12px; }
.gq-batch-count { font-size: 12px; color: var(--text-secondary, #94a3b8); }

/* ─── Preview Zone ─────────────────────────────────────── */
.gq-preview-card { position: sticky; top: 20px; }
.gq-preview-zone {
  min-height: 200px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 12px; margin-bottom: 16px; padding: 20px;
  position: relative; overflow: hidden;
}
.gq-preview-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gq-placeholder-icon { font-size: 48px; opacity: 0.2; }
.gq-preview-placeholder p { font-size: 13px; color: var(--text-secondary, #94a3b8); text-align: center; margin: 0; line-height: 1.6; }
.gq-preview-loader {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(15,20,40,0.5);
}
.gq-spinner-ring {
  width: 36px; height: 36px;
  border: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%; animation: gq-spin 0.8s linear infinite;
}
@keyframes gq-spin { to { transform: rotate(360deg); } }

#gq-qr-output canvas {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  max-width: 100%; height: auto;
}

/* ─── Content Preview ──────────────────────────────────── */
.gq-content-preview { margin-top: 12px; }
.gq-content-label { font-size: 11px; font-weight: 600; color: var(--text-secondary, #94a3b8); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.gq-content-text {
  display: block; font-size: 11px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--accent-light);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 6px; padding: 6px 10px;
  word-break: break-all; line-height: 1.5;
  max-height: 60px; overflow: hidden;
}

/* ─── Export Buttons ───────────────────────────────────── */
.gq-export-btns {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;
}
.gq-btn-export {
  flex: 1; min-width: 60px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px; color: var(--text-secondary, #94a3b8);
  font-size: 12px; font-weight: 600;
  padding: 9px 8px; cursor: pointer;
  transition: all 0.18s; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.gq-btn-export:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); color: var(--accent-light); transform: translateY(-1px); }
.gq-btn-save { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.2); color: #10b981; }
.gq-btn-save:hover { background: rgba(16,185,129,0.2); border-color: #10b981; color: #34d399; }

/* ─── Gallery ──────────────────────────────────────────── */
.gq-gallery {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 460px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 30%, transparent) transparent;
}
.gq-gallery::-webkit-scrollbar { width: 4px; }
.gq-gallery::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 2px; }
.gq-gallery-empty {
  text-align: center; padding: 30px 20px;
  font-size: 13px; color: rgba(148,163,184,0.5);
}
.gq-gallery-item {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 10px 12px;
  transition: border-color 0.18s;
}
.gq-gallery-item:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.gq-gallery-qr {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 6px; object-fit: contain;
  background: #fff; padding: 2px;
}
.gq-gallery-info { flex: 1; min-width: 0; }
.gq-gallery-type { font-size: 12px; font-weight: 600; color: #e2e8f0; margin-bottom: 2px; }
.gq-gallery-content {
  font-size: 11px; color: var(--text-secondary, #94a3b8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.gq-gallery-date { font-size: 10px; color: rgba(148,163,184,0.5); margin-top: 2px; }
.gq-gallery-actions { display: flex; gap: 6px; flex-shrink: 0; }
.gq-gal-dl, .gq-gal-del {
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px; color: var(--text-secondary, #94a3b8);
  font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.gq-gal-dl:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); color: var(--accent-light); }
.gq-gal-del:hover { background: rgba(239,68,68,0.2); border-color: #ef4444; color: #ef4444; }

/* ─── Toast ────────────────────────────────────────────── */
.gq-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(16px);
  background: rgba(30,35,60,0.95); backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: #e2e8f0; font-size: 13px; font-weight: 500;
  padding: 10px 20px; border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 9999; opacity: 0; transition: all 0.25s ease;
  pointer-events: none;
}
.gq-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── No lib message ───────────────────────────────────── */
.gq-no-lib {
  font-size: 13px; color: var(--text-secondary, #94a3b8);
  padding: 20px; text-align: center;
}

/* ─── Dark theme — always dark (app override) ──────────── */
/* Light mode OS preference is DISABLED — app uses forced dark theme */
#view-giri-qr {
  background: #0d0e1a;
  color: #e2e8f0;
}
.gq-wrap {
  color: #e2e8f0 !important;
}
.gq-card {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.07) !important;
}
.gq-field input,
.gq-field select,
.gq-field textarea,
.gq-batch-ta,
.gq-select-sm {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #e2e8f0 !important;
}
.gq-field label {
  color: #94a3b8 !important;
}
.gq-tab {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #94a3b8 !important;
}

/* ─── Scrollbar global (panel gauche) ──────────────────── */
.gq-panel-left { max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 20%, transparent) transparent; }

/* ════════════════════════════════════════════════════════
   GIRI QR — MAHA PREMIUM ENHANCEMENTS v2.0
   ════════════════════════════════════════════════════════ */

/* ── View container — always dark ────────────────────────────────────────────── */
#view-giri-qr {
  background: #0d0e1a !important;
  min-height: 100vh;
}

/* ── Remove white border connectors ──────────────────────────────────────────── */
.gq-card {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
}

.gq-card:hover {
  border-color: color-mix(in srgb, var(--accent) 20%, transparent) !important;
  background: color-mix(in srgb, var(--accent) 3%, transparent) !important;
}

/* ── Header premium ──────────────────────────────────────────────────────────── */
.gq-header {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 100%);
  padding: 24px 24px 16px !important;
  margin-bottom: 20px !important;
}

/* ── QR preview area premium ─────────────────────────────────────────────────── */
.gq-preview-zone {
  background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
  border: 1px dashed color-mix(in srgb, var(--accent) 20%, transparent) !important;
  border-radius: 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
}

.gq-preview-zone canvas,
.gq-preview-zone img {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* ── Tabs premium ────────────────────────────────────────────────────────────── */
.gq-tabs {
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  padding: 6px;
  gap: 4px !important;
  margin-bottom: 20px !important;
}

.gq-tab {
  border-radius: 8px !important;
  padding: 7px 12px !important;
  transition: all 0.2s !important;
}

.gq-tab.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent) 0%, color-mix(in srgb, var(--accent) 12%, transparent) 100%) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
  color: var(--accent-light) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

/* ── Form fields premium ─────────────────────────────────────────────────────── */
.gq-field input:focus,
.gq-field select:focus,
.gq-field textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent) !important;
  background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
}

/* ── Section titles premium ──────────────────────────────────────────────────── */
.gq-section-title {
  background: linear-gradient(90deg, var(--accent-light) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700 !important;
}

/* ── Export buttons premium ──────────────────────────────────────────────────── */
.gq-btn-export {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent) 0%, color-mix(in srgb, var(--accent) 8%, transparent) 100%) !important;
  border-color: color-mix(in srgb, var(--accent) 25%, transparent) !important;
  color: var(--accent-light) !important;
  border-radius: 10px !important;
  transition: all 0.2s !important;
}

.gq-btn-export:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent) 0%, color-mix(in srgb, var(--accent) 20%, transparent) 100%) !important;
  border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

/* ── Gallery items premium ───────────────────────────────────────────────────── */
.gq-gallery-item {
  border-radius: 12px !important;
  transition: all 0.2s !important;
}

.gq-gallery-item:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 20%, transparent) !important;
  transform: translateY(-1px) !important;
}

/* ── Generate button premium ─────────────────────────────────────────────────── */
.gq-btn-generate {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%) !important;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 40%, transparent) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  transition: all 0.2s !important;
}

.gq-btn-generate:hover:not(:disabled) {
  transform: scale(1.02) !important;
  box-shadow: 0 6px 28px color-mix(in srgb, var(--accent) 50%, transparent) !important;
}

/* ── Color pickers premium ───────────────────────────────────────────────────── */
.gq-color-pick input[type="color"] {
  border-radius: 8px !important;
  border-color: rgba(255,255,255,0.1) !important;
  transition: box-shadow 0.2s !important;
}

.gq-color-pick input[type="color"]:hover {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

/* ── Layout — remove outer borders ──────────────────────────────────────────── */
.gq-layout {
  gap: 24px !important;
  padding: 0 20px !important;
}

/* ── Wrap — no white background ─────────────────────────────────────────────── */
.gq-wrap {
  background: transparent !important;
}

/* ── Sliders premium ─────────────────────────────────────────────────────────── */
.gq-slider {
  accent-color: var(--accent);
}

.gq-slider::-webkit-slider-thumb {
  background: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

/* ── Badge premium ───────────────────────────────────────────────────────────── */
.gq-badge {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent) 0%, color-mix(in srgb, var(--accent) 12%, transparent) 100%) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
}


/* ===== css/style-overrides.css?v=2603081200 ===== */
/* ── Remove focus outline on project chips ── */
.project-chip { outline: none !important; }
.project-chip:focus { outline: none !important; box-shadow: none; }

/* === DONE PERIOD FILTER (custom dropdown) === */
.dpf-wrap {
    position: relative;
    margin-left: auto;
    margin-right: 8px;
    z-index: 20;
}
.bubbles-done-header .dpf-wrap { margin-left: 0; }

/* ── trigger button ── */
.dpf-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text, #ccc);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 2px 10px 2px 8px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    line-height: 1.6;
}
.dpf-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
}
.dpf-wrap.open .dpf-trigger,
.dpf-trigger:focus-visible {
    border-color: var(--accent, #daa520);
    box-shadow: 0 0 0 2px rgba(218, 165, 32, 0.12);
}
.dpf-arrow {
    font-size: 10px;
    opacity: 0.5;
    transition: transform 0.2s;
}
.dpf-wrap.open .dpf-arrow { transform: rotate(180deg); }

/* ── dropdown menu ── */
.dpf-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: rgba(18, 18, 24, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.dpf-wrap.open .dpf-menu {
    display: block;
    /* force reflow before adding visible class via JS */
}
.dpf-wrap.open .dpf-menu.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── options ── */
.dpf-opt {
    padding: 5px 12px 5px 10px;
    font-size: 12px;
    color: var(--text, #ccc);
    cursor: pointer;
    transition: background 0.12s;
    white-space: nowrap;
    position: relative;
}
.dpf-opt:hover {
    background: rgba(255, 255, 255, 0.07);
}
.dpf-opt.selected {
    color: var(--accent, #daa520);
    padding-left: 22px;
}
.dpf-opt.selected::before {
    content: '✓';
    position: absolute;
    left: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--accent, #daa520);
}

/* ── bubbles-done header layout ── */
.bubbles-done-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.bubbles-done-header h2 { margin: 0; }

/* ══════════════════════════════════════════════════
   TASKS VIEW — HEADER + FILTER BAR + INPUT REDESIGN
   ══════════════════════════════════════════════════ */

/* Masque le header global (géré via sidebar) */
.app-header {
    display: none !important;
}

/* ── Header tasks — centré, élégant, aéré ── */
#view-tasks .app-header {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 36px 0 24px;
    margin-bottom: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 8px;
}

/* Cache sidebar extras */
#view-tasks .app-header .header-left,
#view-tasks .app-header .header-right {
    display: none !important;
}

/* ══════════════════════════════════════════════════
   TASKS HEADER — CINÉMATOGRAPHIQUE
   ══════════════════════════════════════════════════ */

/* Zone header étendue avec halo profond */
#view-tasks .app-header {
    position: relative !important;
    padding: 36px 32px 28px !important;
    overflow: visible !important;
}

/* Halo radial doré depuis le titre */
#view-tasks .app-header::before {
    content: '' !important;
    position: absolute !important;
    top: -40px; left: 50%; transform: translateX(-50%) !important;
    width: 600px; height: 260px !important;
    background: radial-gradient(
        ellipse at 50% 30%,
        rgba(212,175,55,0.13) 0%,
        rgba(212,175,55,0.05) 40%,
        transparent 70%
    ) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Ligne dorée fine en bas du header */
#view-tasks .app-header::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0; left: 15%; right: 15% !important;
    height: 1px !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,0.18) 20%,
        rgba(212,175,55,0.55) 50%,
        rgba(212,175,55,0.18) 80%,
        transparent
    ) !important;
}

/* ── TITRE PRINCIPAL ── */
#view-tasks .app-title {
    position: relative !important;
    z-index: 1 !important;
    font-family: 'Inter', 'SF Pro Display', system-ui, sans-serif !important;
    font-size: clamp(2rem, 3.5vw, 3.2rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    text-transform: none !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-align: center !important;
    background: linear-gradient(
        160deg,
        #ede0b8 0%,
        #f5d878 28%,
        #fff8e7 50%,
        #f0c84a 72%,
        #c9972a 100%
    ) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: tasksGlow 8s ease-in-out infinite !important;
    filter: drop-shadow(0 0 28px rgba(212,175,55,0.28)) !important;
}

#view-tasks .app-title::before,
#view-tasks .app-title::after { content: none !important; }

/* ── SOUS-TITRE DYNAMIQUE ── */
#view-tasks .vision-subtitle {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    text-align: center !important;
    margin-top: 8px !important;
    font-family: inherit !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    text-transform: none !important;
    color: rgba(212,175,55,0.5) !important;
}

@keyframes tasksGlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ══════════════════════════════════════════════════
   FILTER BAR — aéré, qualité premium
   ══════════════════════════════════════════════════ */

.user-filter-bar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 20px !important;
    margin-bottom: 14px !important;
    background: color-mix(in srgb, var(--bg-card, #1e1e2e) 85%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--border, #333) 60%, transparent) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.user-filter-bar label {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--text-muted, rgba(255,255,255,0.4)) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Boutons filter (custom-select-btn) */
.custom-select-btn,
.project-dropdown-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 14px !important;
    background: color-mix(in srgb, var(--bg-secondary, #1a1a2e) 80%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--border, #333) 70%, transparent) !important;
    border-radius: 10px !important;
    color: var(--text, #fff) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: border-color 0.2s, background 0.2s !important;
    white-space: nowrap !important;
}

.custom-select-btn:hover,
.project-dropdown-btn:hover {
    border-color: color-mix(in srgb, var(--accent, #d4af37) 50%, transparent) !important;
    background: color-mix(in srgb, var(--bg-secondary, #1a1a2e) 100%, transparent) !important;
}

.select-arrow, .pf-arrow {
    font-size: 0.65rem !important;
    opacity: 0.5 !important;
    transition: transform 0.2s !important;
    margin-left: 2px !important;
}

.filter-sep {
    width: 1px !important;
    height: 22px !important;
    background: color-mix(in srgb, var(--border, #333) 80%, transparent) !important;
    flex-shrink: 0 !important;
    margin: 0 2px !important;
}

/* ══════════════════════════════════════════════════
   TASK INPUT SECTION — large, premium, respirant
   ══════════════════════════════════════════════════ */

.task-input-section {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 14px 20px !important;
    background: color-mix(in srgb, var(--bg-card, #1e1e2e) 85%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--border, #333) 60%, transparent) !important;
    border-radius: 16px !important;
    margin-bottom: 22px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: border-color 0.25s !important;
}

.task-input-section:focus-within {
    border-color: color-mix(in srgb, var(--accent, #d4af37) 45%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #d4af37) 8%, transparent) !important;
}

#task-input {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    background: color-mix(in srgb, var(--bg-primary, #0d0d18) 70%, transparent) !important;
    color: var(--text, #fff) !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    outline: none !important;
    transition: border-color 0.2s !important;
}

#task-input::placeholder {
    color: var(--text-muted, rgba(255,255,255,0.3)) !important;
    font-style: italic !important;
}

#task-input:focus {
    border-color: color-mix(in srgb, var(--accent, #d4af37) 35%, transparent) !important;
}

/* Selects dans la barre d'ajout */
.task-input-section select {
    padding: 9px 32px 9px 14px !important;
    border-radius: 10px !important;
    border: 1px solid color-mix(in srgb, var(--border, #333) 80%, transparent) !important;
    background-color: color-mix(in srgb, var(--bg-secondary, #1a1a2e) 90%, transparent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 10px !important;
    color: var(--text, #fff) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: border-color 0.2s !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.task-input-section select:hover {
    border-color: color-mix(in srgb, var(--accent, #d4af37) 45%, transparent) !important;
    transform: none !important;
    box-shadow: none !important;
}

.task-input-section select:focus {
    border-color: color-mix(in srgb, var(--accent, #d4af37) 55%, transparent) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Options du dropdown - fond sombre lisible */
.task-input-section select option {
    background: var(--bg-secondary, #1a1a1f) !important;
    color: var(--text-primary, #ffffff) !important;
    padding: 12px 16px;
    font-weight: 500;
}
.task-input-section select option:hover,
.task-input-section select option:checked {
    background: linear-gradient(135deg, var(--accent-muted, rgba(224, 120, 64, 0.3)) 0%, var(--accent-muted, rgba(224, 120, 64, 0.2)) 100%) !important;
    color: var(--text-primary, #ffffff) !important;
}

/* Style PREMIUM pour select de priorité */
#priority-select {
    background-color: var(--bg-secondary, #1f1a18);
    border: 2px solid var(--accent-muted, rgba(224, 120, 64, 0.4));
    box-shadow: 0 4px 20px var(--accent-glow, rgba(224, 120, 64, 0.2));
}

#priority-select:hover {
    background-color: var(--bg-tertiary, #2a2320);
    border-color: var(--accent, #e07840);
    box-shadow: 0 8px 30px var(--accent-glow, rgba(224, 120, 64, 0.4));
}

/* Style PREMIUM pour select assignation */
#assign-select {
    background-color: var(--bg-secondary, #1a1a1f);
    border: 2px solid rgba(100, 116, 139, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}

#assign-select:hover {
    background-color: var(--bg-tertiary, #252528);
    border-color: rgba(148, 163, 184, 0.6);
    box-shadow: 0 6px 20px rgba(100, 116, 139, 0.25);
}
#add-task-btn {
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 10px;
}

/* === BOUTON SUPPRESSION PROJET (dans dropdown) === */
/* Styles principaux dans style-base.css (.pf-option-delete) */
.chip-delete { display: none; }
.chip-delete:hover {
    background: #ef4444;
    color: white;
    transform: scale(1.1);
}

/* === FILTRE UTILISATEUR - Élégant === */
.user-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--bg-card);
    border-radius: 25px;
    margin: 0 0 16px 0;
    width: fit-content;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px var(--accent-glow, transparent);
}
.user-filter-bar label {
    font-size: 0.85rem;
    color: var(--text-muted);
}
/* === CUSTOM USER SELECT DROPDOWN === */
.custom-user-select {
    position: relative;
}
.custom-select-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 2px solid var(--accent-muted, rgba(224, 120, 64, 0.3));
    background-color: var(--bg-secondary, #1a1a1f);
    color: var(--text-primary, #ffffff);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.custom-select-btn:hover {
    background-color: var(--bg-tertiary, #252528);
    border-color: var(--accent);
    box-shadow: 0 4px 15px var(--accent-glow, rgba(224, 120, 64, 0.25));
}
.custom-select-btn .select-avatar {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-select-btn .select-avatar img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}
.custom-select-btn .select-arrow {
    font-size: 0.7rem;
    color: var(--accent);
    transition: transform 0.2s;
}
.custom-user-select.open .select-arrow {
    transform: rotate(180deg);
}
.custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 100%;
    background: var(--bg-secondary, #1a1a1f);
    border: 2px solid var(--accent-muted, rgba(224, 120, 64, 0.3));
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}
.custom-user-select.open .custom-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.custom-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-primary, #ffffff);
    font-weight: 500;
}
.custom-select-option:first-child {
    border-radius: 10px 10px 0 0;
}
.custom-select-option:last-child {
    border-radius: 0 0 10px 10px;
}
.custom-select-option:hover {
    background: var(--accent-muted, rgba(224, 120, 64, 0.2));
}
.custom-select-option.active {
    background: var(--accent-muted, rgba(224, 120, 64, 0.3));
}
.custom-select-option img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}
.custom-select-option .option-emoji {
    font-size: 1.1rem;
}

/* === FIX DROPDOWN PROJET — z-index + overflow === */
/* La barre de filtres doit être au-dessus du contenu quand un dropdown est ouvert */
.user-filter-bar {
    position: relative;
    z-index: 200;
}
/* Le dropdown lui-même passe au-dessus de TOUT le contenu */
.project-dropdown-list {
    z-index: 9999 !important;
}
/* Idem pour le dropdown utilisateur */
.custom-select-options {
    z-index: 9999 !important;
}

/* === BOUTON IA GÉNÉRATION TÂCHES === */
.ai-gen-filter-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(139,92,246,.35);
    background: rgba(139,92,246,.12);
    color: #a78bfa;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .12s, box-shadow .15s;
    flex-shrink: 0;
}
.ai-gen-filter-btn.active {
    background: rgba(245,158,11,.2);
    border-color: rgba(245,158,11,.45);
    box-shadow: 0 0 14px rgba(245,158,11,.3);
}
.ai-gen-filter-btn:hover {
    background: rgba(139,92,246,.25);
    box-shadow: 0 0 12px rgba(139,92,246,.3);
    transform: scale(1.08);
}

/* === OPTION "+ Nouveau projet" dans le dropdown === */
.pf-new-project {
    color: var(--accent, #8b5cf6) !important;
    font-weight: 600 !important;
}
.pf-new-project .pf-option-icon {
    color: var(--accent, #8b5cf6);
    font-size: 1.1rem;
    font-weight: 700;
}
.pf-new-project:hover {
    background: rgba(139,92,246,.1) !important;
}

/* === BOUTON URGENT (Gyrophare) === */
.urgent-filter-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border, rgba(255,255,255,0.12));
    background: var(--bg-card, rgba(255,255,255,0.04));
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    flex-shrink: 0;
}
/* Kill global ripple + premium tooltip on gyrophare */
.urgent-filter-btn::before,
.urgent-filter-btn::after {
    content: none !important;
    display: none !important;
}
/* Diagonal slash element for off state */
.gyro-slash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 110%;
    background: #ef4444;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(-45deg);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}
/* Off state: muted + slash visible */
.urgent-filter-btn.gyro-off {
    opacity: 0.6;
    border-color: var(--border, rgba(255,255,255,0.12));
    background: transparent;
}
.urgent-filter-btn.gyro-off .gyro-slash { opacity: 0.7; }
.urgent-filter-btn.gyro-off .gyrophare-icon {
    filter: grayscale(0.7) opacity(0.55);
}
.urgent-filter-btn.gyro-off:hover { opacity: 0.9; }
/* Dot indicator top-right (notification badge style) */
.gyro-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    transform: scale(0);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transition: transform 0.3s ease, background 0.3s ease;
    pointer-events: none;
    z-index: 2;
}
.urgent-filter-btn.active .gyro-dot { transform: scale(1); }
.mode-urgent .gyro-dot    { background: #ef4444; box-shadow: 0 0 4px #ef4444; }
.mode-important .gyro-dot { background: #f59e0b; box-shadow: 0 0 4px #f59e0b; }
.mode-normal .gyro-dot    { background: #3b82f6; box-shadow: 0 0 4px #3b82f6; }
.mode-zen .gyro-dot       { background: #e5e5e5; box-shadow: 0 0 4px rgba(255,255,255,0.5); }
/* Floating tooltip label above gyrophare */
.gyro-label {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--bg-secondary, #1a1a1f);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 100;
}
.gyro-label.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.gyro-label:empty { display: none; }
.gyro-label-urgent    { color: #ef4444; }
.gyro-label-important { color: #f59e0b; }
.gyro-label-normal    { color: #3b82f6; }
.gyro-label-zen       { color: #e5e5e5; }
.gyrophare-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    transition: all 0.3s ease;
}
.urgent-filter-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}
/* Mode URGENT (Rouge) */
.urgent-filter-btn.mode-urgent {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.15) 100%);
    border-color: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.6), 0 0 40px rgba(239, 68, 68, 0.3);
    animation: gyroGlowRed 1.2s ease-in-out infinite;
}
.urgent-filter-btn.mode-urgent .gyrophare-icon {
    animation: gyroSpin 0.8s linear infinite;
    filter: drop-shadow(0 0 12px rgba(239, 68, 68, 1)) drop-shadow(0 0 25px rgba(255, 100, 100, 0.8));
}
@keyframes gyroGlowRed {
    0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.6), 0 0 40px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 35px rgba(239, 68, 68, 0.8), 0 0 60px rgba(239, 68, 68, 0.5); }
}

/* Mode IMPORTANT (Orange/Accent) */
.urgent-filter-btn.mode-important {
    background: radial-gradient(circle, rgba(224, 120, 64, 0.3) 0%, rgba(224, 120, 64, 0.15) 100%);
    border-color: var(--accent, #e07840);
    box-shadow: 0 0 15px rgba(224, 120, 64, 0.4), 0 0 30px rgba(224, 120, 64, 0.2);
    animation: gyroGlowOrange 1.4s ease-in-out infinite;
}
.urgent-filter-btn.mode-important .gyrophare-icon {
    animation: gyroSpin 1.2s linear infinite;
    filter: drop-shadow(0 0 10px rgba(224, 120, 64, 0.9));
}
@keyframes gyroGlowOrange {
    0%, 100% { box-shadow: 0 0 15px rgba(224, 120, 64, 0.4), 0 0 30px rgba(224, 120, 64, 0.2); }
    50% { box-shadow: 0 0 25px rgba(224, 120, 64, 0.6), 0 0 45px rgba(224, 120, 64, 0.35); }
}

/* Mode NORMAL (Bleu) */
.urgent-filter-btn.mode-normal {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.15) 100%);
    border-color: #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6), 0 0 40px rgba(59, 130, 246, 0.3);
    animation: gyroGlowBlue 1.2s ease-in-out infinite;
}
.urgent-filter-btn.mode-normal .gyrophare-icon {
    animation: gyroSpin 1s linear infinite;
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 1)) drop-shadow(0 0 25px rgba(100, 150, 255, 0.8));
}
@keyframes gyroGlowBlue {
    0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6), 0 0 40px rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 35px rgba(59, 130, 246, 0.8), 0 0 60px rgba(59, 130, 246, 0.5); }
}

/* Mode ZEN (Blanc) */
.urgent-filter-btn.mode-zen {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(200, 200, 200, 0.15) 100%);
    border-color: #e5e5e5;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 40px rgba(255, 255, 255, 0.3);
    animation: gyroGlowWhite 1.5s ease-in-out infinite;
}
.urgent-filter-btn.mode-zen .gyrophare-icon {
    animation: gyroFloat 2s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1)) drop-shadow(0 0 25px rgba(220, 220, 255, 0.8));
}
@keyframes gyroGlowWhite {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.2); }
    50% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.7), 0 0 50px rgba(255, 255, 255, 0.4); }
}
@keyframes gyroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes gyroSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Particules désactivées */
.urgent-particles { display: none; }

/* === BULLES === */
body .bubble {
    padding: 16px 20px !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    background: var(--bubble-bg, linear-gradient(145deg, rgba(224, 120, 64, 0.2) 0%, rgba(180, 80, 40, 0.1) 100%)) !important;
    border: 2px solid var(--bubble-border, rgba(224, 120, 64, 0.4)) !important;
    box-shadow: var(--bubble-glow, 0 4px 20px rgba(224, 120, 64, 0.2)) !important;
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
body .bubble:hover {
    transform: translateY(-4px) scale(1.02) !important;
}

body .bubble .bubble-text {
    color: var(--text-primary, #ffffff) !important;
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
}

body .bubble .bubble-description {
    color: var(--bubble-text-muted, #444) !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0,0,0,0.2);
    font-style: normal;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

body .bubble.inprogress {
    background: var(--bubble-inprogress-bg, linear-gradient(145deg, rgba(251, 191, 36, 0.5) 0%, rgba(249, 115, 22, 0.3) 100%)) !important;
    border: 2px solid var(--bubble-inprogress-border, rgba(251, 191, 36, 0.8)) !important;
    box-shadow: var(--bubble-inprogress-glow, 0 0 25px rgba(251, 191, 36, 0.5)) !important;
    animation: glowPulse 2.5s ease-in-out infinite !important;
}

body .bubble.done {
    background: var(--bubble-done-bg, linear-gradient(145deg, rgba(34, 197, 94, 0.35) 0%, rgba(22, 163, 74, 0.2) 100%)) !important;
    border: 2px solid var(--bubble-done-border, rgba(34, 197, 94, 0.5)) !important;
}
body .bubble.done .bubble-text {
    text-decoration: line-through !important;
    opacity: 0.6 !important;
}

/* === TEXTE VISIBLE PARTOUT === */
.bubble .bubble-text,
.bubble.inprogress .bubble-text,
.bubble.done .bubble-text {
    color: var(--text-primary, #ffffff) !important;
}

[data-theme="matrix"] .bubble .bubble-description,
[data-theme="midnight"] .bubble .bubble-description,
[data-theme="hacker"] .bubble .bubble-description,
[data-theme="fantasy"] .bubble .bubble-description,
[data-theme="ocean"] .bubble .bubble-description,
[data-theme="forest"] .bubble .bubble-description {
    color: #aaa !important;
}

[data-theme="matrix"] .bubble {
    background: linear-gradient(145deg, rgba(0, 255, 102, 0.15) 0%, rgba(0, 180, 70, 0.1) 100%) !important;
    border-color: rgba(0, 255, 102, 0.4) !important;
}
[data-theme="matrix"] .bubble.inprogress {
    background: linear-gradient(145deg, rgba(0, 255, 102, 0.3) 0%, rgba(0, 200, 80, 0.2) 100%) !important;
    border-color: rgba(0, 255, 102, 0.7) !important;
    box-shadow: 0 0 25px rgba(0, 255, 102, 0.4) !important;
}
[data-theme="matrix"] .bubble.done {
    background: linear-gradient(145deg, rgba(0, 255, 102, 0.1) 0%, rgba(0, 150, 60, 0.08) 100%) !important;
    border-color: rgba(0, 255, 102, 0.3) !important;
}

[data-theme="midnight"] .bubble {
    background: linear-gradient(145deg, rgba(100, 130, 255, 0.15) 0%, rgba(80, 100, 200, 0.1) 100%) !important;
    border-color: rgba(100, 130, 255, 0.4) !important;
}
[data-theme="midnight"] .bubble.inprogress {
    background: linear-gradient(145deg, rgba(100, 130, 255, 0.3) 0%, rgba(80, 100, 200, 0.2) 100%) !important;
    border-color: rgba(100, 130, 255, 0.7) !important;
}

[data-theme="hacker"] .bubble {
    background: linear-gradient(145deg, rgba(0, 255, 0, 0.1) 0%, rgba(0, 200, 0, 0.05) 100%) !important;
    border-color: rgba(0, 255, 0, 0.3) !important;
}
[data-theme="hacker"] .bubble.inprogress {
    background: linear-gradient(145deg, rgba(0, 255, 0, 0.2) 0%, rgba(0, 200, 0, 0.15) 100%) !important;
    border-color: rgba(0, 255, 0, 0.6) !important;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3) !important;
}

[data-theme="fantasy"] .bubble {
    background: linear-gradient(145deg, rgba(191, 107, 255, 0.2) 0%, rgba(140, 80, 200, 0.1) 100%) !important;
    border-color: rgba(191, 107, 255, 0.4) !important;
}
[data-theme="fantasy"] .bubble.inprogress {
    background: linear-gradient(145deg, rgba(191, 107, 255, 0.35) 0%, rgba(140, 80, 200, 0.2) 100%) !important;
    border-color: rgba(191, 107, 255, 0.7) !important;
    box-shadow: 0 0 25px rgba(191, 107, 255, 0.4) !important;
}

/* Texte NOIR sur thèmes CLAIRS pour lisibilité */
[data-theme="ivory"] .bubble .bubble-text,
[data-theme="ivory"] .bubble.inprogress .bubble-text,
[data-theme="ivory"] .bubble.done .bubble-text,
[data-theme="ivory"] .task-bubble .task-text,
[data-theme="ivory"] .task-bubble.inprogress .task-text,
[data-theme="ivory"] .task-bubble.done .task-text,
[data-theme="sakura"] .bubble .bubble-text,
[data-theme="sakura"] .bubble.inprogress .bubble-text,
[data-theme="sakura"] .bubble.done .bubble-text,
[data-theme="sakura"] .task-bubble .task-text,
[data-theme="sakura"] .task-bubble.inprogress .task-text,
[data-theme="sakura"] .task-bubble.done .task-text,
[data-theme="pastel"] .bubble .bubble-text,
[data-theme="pastel"] .bubble.inprogress .bubble-text,
[data-theme="pastel"] .bubble.done .bubble-text,
[data-theme="pastel"] .task-bubble .task-text,
[data-theme="pastel"] .task-bubble.inprogress .task-text,
[data-theme="pastel"] .task-bubble.done .task-text,
[data-theme="mint"] .bubble .bubble-text,
[data-theme="mint"] .bubble.inprogress .bubble-text,
[data-theme="mint"] .bubble.done .bubble-text,
[data-theme="mint"] .task-bubble .task-text,
[data-theme="mint"] .task-bubble.inprogress .task-text,
[data-theme="mint"] .task-bubble.done .task-text,
[data-theme="paper"] .bubble .bubble-text,
[data-theme="paper"] .bubble.inprogress .bubble-text,
[data-theme="paper"] .bubble.done .bubble-text,
[data-theme="paper"] .task-bubble .task-text,
[data-theme="paper"] .task-bubble.inprogress .task-text,
[data-theme="paper"] .task-bubble.done .task-text,
[data-theme="porcelain"] .bubble .bubble-text,
[data-theme="porcelain"] .bubble.inprogress .bubble-text,
[data-theme="porcelain"] .bubble.done .bubble-text,
[data-theme="porcelain"] .task-bubble .task-text,
[data-theme="porcelain"] .task-bubble.inprogress .task-text,
[data-theme="porcelain"] .task-bubble.done .task-text,
[data-theme="zen"] .bubble .bubble-text,
[data-theme="zen"] .bubble.inprogress .bubble-text,
[data-theme="zen"] .bubble.done .bubble-text,
[data-theme="zen"] .task-bubble .task-text,
[data-theme="zen"] .task-bubble.inprogress .task-text,
[data-theme="zen"] .task-bubble.done .task-text,
[data-theme="watercolor"] .bubble .bubble-text,
[data-theme="watercolor"] .bubble.inprogress .bubble-text,
[data-theme="watercolor"] .bubble.done .bubble-text,
[data-theme="watercolor"] .task-bubble .task-text,
[data-theme="watercolor"] .task-bubble.inprogress .task-text,
[data-theme="watercolor"] .task-bubble.done .task-text,
[data-theme="nordic"] .bubble .bubble-text,
[data-theme="nordic"] .bubble.inprogress .bubble-text,
[data-theme="nordic"] .bubble.done .bubble-text,
[data-theme="nordic"] .task-bubble .task-text,
[data-theme="nordic"] .task-bubble.inprogress .task-text,
[data-theme="nordic"] .task-bubble.done .task-text,
[data-theme="printemps"] .bubble .bubble-text,
[data-theme="printemps"] .bubble.inprogress .bubble-text,
[data-theme="printemps"] .bubble.done .bubble-text,
[data-theme="printemps"] .task-bubble .task-text,
[data-theme="printemps"] .task-bubble.inprogress .task-text,
[data-theme="printemps"] .task-bubble.done .task-text,
[data-theme="ete"] .bubble .bubble-text,
[data-theme="ete"] .bubble.inprogress .bubble-text,
[data-theme="ete"] .bubble.done .bubble-text,
[data-theme="ete"] .task-bubble .task-text,
[data-theme="ete"] .task-bubble.inprogress .task-text,
[data-theme="ete"] .task-bubble.done .task-text,
[data-theme="pearl"] .bubble .bubble-text,
[data-theme="pearl"] .bubble.inprogress .bubble-text,
[data-theme="pearl"] .bubble.done .bubble-text,
[data-theme="pearl"] .task-bubble .task-text,
[data-theme="pearl"] .task-bubble.inprogress .task-text,
[data-theme="pearl"] .task-bubble.done .task-text,
[data-theme="snow"] .bubble .bubble-text,
[data-theme="snow"] .bubble.inprogress .bubble-text,
[data-theme="snow"] .bubble.done .bubble-text,
[data-theme="snow"] .task-bubble .task-text,
[data-theme="snow"] .task-bubble.inprogress .task-text,
[data-theme="snow"] .task-bubble.done .task-text,
[data-theme="bamboo"] .bubble .bubble-text,
[data-theme="bamboo"] .bubble.inprogress .bubble-text,
[data-theme="bamboo"] .bubble.done .bubble-text,
[data-theme="bamboo"] .task-bubble .task-text,
[data-theme="bamboo"] .task-bubble.inprogress .task-text,
[data-theme="bamboo"] .task-bubble.done .task-text,
[data-theme="provence"] .bubble .bubble-text,
[data-theme="provence"] .bubble.inprogress .bubble-text,
[data-theme="provence"] .bubble.done .bubble-text,
[data-theme="provence"] .task-bubble .task-text,
[data-theme="provence"] .task-bubble.inprogress .task-text,
[data-theme="provence"] .task-bubble.done .task-text,
[data-theme="academie"] .bubble .bubble-text,
[data-theme="academie"] .bubble.inprogress .bubble-text,
[data-theme="academie"] .bubble.done .bubble-text,
[data-theme="academie"] .task-bubble .task-text,
[data-theme="academie"] .task-bubble.inprogress .task-text,
[data-theme="academie"] .task-bubble.done .task-text {
    color: var(--text, #1a1a1a) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

/* Texte blanc sur thèmes sombres */
[data-theme="bubblegum"] .bubble .bubble-text,
[data-theme="sunset"] .bubble .bubble-text {
    color: #ffffff !important;
}

@keyframes glowPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.92; }
}

/* === BOUTON EDIT (CRAYON) === */
/* Toujours présent, discret, s'illumine au hover */
.bubble .edit-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.22);
    transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.bubble .edit-btn:hover {
    background: rgba(224, 120, 64, 0.15);
    color: #e07840;
}
.bubble .edit-btn:active {
    transform: scale(0.88);
}
.bubble .edit-btn svg {
    display: block;
    flex-shrink: 0;
}
/* Tâche avec note — icône orange subtile */
.bubble .edit-btn.has-note {
    color: rgba(224, 120, 64, 0.45);
}
.bubble .edit-btn.has-note:hover {
    color: #e07840;
    background: rgba(224, 120, 64, 0.15);
}

/* Thèmes sombres */
[data-theme="matrix"] .bubble .edit-btn:hover,
[data-theme="matrix"] .bubble .edit-btn.has-note:hover { background: rgba(0,255,102,0.1); color: #00ff66; }
[data-theme="matrix"] .bubble .edit-btn.has-note { color: rgba(0,255,102,0.35); }
[data-theme="hacker"] .bubble .edit-btn:hover,
[data-theme="hacker"] .bubble .edit-btn.has-note:hover { background: rgba(0,255,0,0.1); color: #00ff00; }
[data-theme="midnight"] .bubble .edit-btn:hover { background: rgba(100,130,255,0.1); color: #6482ff; }
[data-theme="fantasy"] .bubble .edit-btn:hover { background: rgba(191,107,255,0.1); color: #bf6bff; }

/* === EDIT TASK MODAL - CENTERED OVERLAY === */
/* ALWAYS hidden by default - only JS can show it via .modal-visible class */
#edit-task-modal {
    display: none !important;
    position: fixed !important;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
/* CRITICAL: Force hide on startup, only show when explicitly requested */
#edit-task-modal {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Only visible when JS explicitly adds modal-visible class */
#edit-task-modal.modal-visible {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* === MODAL LARGE (task edit, reports) === */
.modal-box.modal-box-large {
    max-width: 620px;
    width: 94%;
    max-height: 85vh;
    overflow: hidden;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
}

/* --- HEADER fixe --- */
.modal-header-fixed {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 18px 32px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.modal-header-fixed h3 {
    font-size: 1.3rem;
    margin: 0;
    color: var(--text-primary, #fff);
    font-weight: 700;
}
.modal-close-x {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted, rgba(255,255,255,0.5));
    font-size: 1.7rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.2s ease;
    line-height: 1;
}
.modal-close-x:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #fff);
}

/* --- BODY — flex column, textarea absorbs remaining space --- */
.modal-body-scroll {
    flex: 1;
    overflow: hidden;
    padding: 16px 32px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Textarea is the only flexible element — shrinks/grows to fit */
.modal-body-scroll .modal-textarea {
    flex: 1 1 80px;
    min-height: 80px;
    max-height: 300px;
    overflow-y: auto;
    resize: none;
    margin-bottom: 12px;
    padding: 12px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent, #daa520) transparent;
}
.modal-body-scroll .modal-textarea::-webkit-scrollbar {
    width: 5px;
}
.modal-body-scroll .modal-textarea::-webkit-scrollbar-track {
    background: transparent;
}
.modal-body-scroll .modal-textarea::-webkit-scrollbar-thumb {
    background: var(--accent, #daa520);
    border-radius: 3px;
}
/* All other elements in body: fixed size */
.modal-body-scroll .modal-input,
.modal-body-scroll .modal-selects-row {
    flex-shrink: 0;
}

/* --- FOOTER fixe --- */
.modal-footer-fixed {
    padding: 14px 32px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.modal-footer-fixed .modal-status-actions {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.modal-footer-fixed .modal-status-actions:empty {
    display: none;
}
.modal-footer-fixed .modal-actions {
    margin-top: 0;
}

/* Legacy compat: h3 inside modal-box-large (non-restructured modals) */
.modal-box-large > h3 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: var(--text-primary, #fff);
    text-align: center;
    font-weight: 700;
}
.modal-box-large .modal-input {
    font-size: 1.05rem;
    padding: 12px 16px;
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-primary, rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: var(--text-primary, #fff);
    margin-bottom: 10px;
}
.modal-box-large .modal-input:focus {
    outline: none;
    border-color: var(--accent, #daa520);
    box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.2);
}

/* === LOGIN SCREEN CINÉMATIQUE === */

/* === PREMIUM REPORT MODALS === */
.modal-box.modal-box-premium,
.modal-box.modal-box-results {
    max-width: 620px;
    width: 94%;
    max-height: 88vh;
    overflow-y: auto;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: var(--accent, #daa520) transparent;
}

/* Particules flottantes dorées */
.login-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255, 200, 100, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 40% 70%, rgba(255, 215, 0, 0.6) 0%, transparent 100%),
        radial-gradient(3px 3px at 60% 20%, rgba(255, 180, 80, 0.7) 0%, transparent 100%),
        radial-gradient(2px 2px at 80% 50%, rgba(255, 200, 100, 0.5) 0%, transparent 100%),
        radial-gradient(3px 3px at 10% 80%, rgba(255, 215, 0, 0.6) 0%, transparent 100%),
        radial-gradient(2px 2px at 90% 90%, rgba(255, 180, 80, 0.4) 0%, transparent 100%);
    animation: floatingParticles 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes floatingParticles {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0.6; }
    25% { transform: translateY(-20px) translateX(10px); opacity: 1; }
    50% { transform: translateY(-10px) translateX(-10px); opacity: 0.8; }
    75% { transform: translateY(-30px) translateX(5px); opacity: 1; }
}

/* Animation d'entrée cinématique pour le logo - FLUIDE */
.login-logo {
    opacity: 0;
    animation: logoEntrance 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards !important;
}

@keyframes logoEntrance {
    0% {
        transform: scale(0.3);
        opacity: 0;
        filter: blur(15px);
    }
    60% {
        transform: scale(1.02);
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

/* Animation titre - Effet WOW spectaculaire et fluide */
.login-container h1 {
    opacity: 0;
    animation: titleWow 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards !important;
    background: linear-gradient(135deg, #fff 0%, #ffd700 25%, #ff8c00 50%, #ffd700 75%, #fff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

@keyframes titleWow {
    0% {
        opacity: 0;
        transform: translateY(25px) scale(0.9);
        filter: blur(8px);
        background-position: 200% center;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        background-position: 0% center;
    }
}

/* Glow animé sur le titre */
.login-container h1::after {
    content: 'ProductiveApp';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: inherit;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: blur(8px);
    opacity: 0.5;
    z-index: -1;
    animation: titleGlow 2s ease-in-out infinite alternate;
}

@keyframes titleGlow {
    0% { opacity: 0.3; filter: blur(8px); }
    100% { opacity: 0.6; filter: blur(12px); }
}

.login-container {
    position: relative;
}

/* Sous-titre - fluide après titre */
.login-container > p {
    opacity: 0;
    animation: fadeInSlow 0.8s cubic-bezier(0.22, 1, 0.36, 1) 2s forwards !important;
}

@keyframes fadeInSlow {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* === CARROUSEL UTILISATEURS - PIÉDESTAL === */
.user-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    opacity: 0;
    animation: carouselAppear 0.8s cubic-bezier(0.22, 1, 0.36, 1) 2.5s forwards;
    position: relative;
}

@keyframes carouselAppear {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.carousel-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 200, 100, 0.3);
    background: rgba(0, 0, 0, 0.4);
    color: rgba(255, 200, 100, 0.7);
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 10;
}

.carousel-arrow:hover {
    background: var(--accent-muted);
    border-color: var(--accent-light);
    color: var(--text);
    transform: scale(1.15);
    box-shadow: 0 0 25px var(--accent-glow, transparent);
}

/* Conteneur piédestal - UN SEUL profil visible */
.user-select-grid {
    display: flex !important;
    gap: 0 !important;
    padding: 30px !important;
    overflow: hidden !important;
    scroll-behavior: smooth;
    width: 220px !important;
    justify-content: center;
    position: relative;
}

/* Léger glow subtil autour du piédestal - PAS de carré */
.user-select-grid::before {
    display: none;
}

/* Profil sur piédestal avec ZOOM */
/* Profil sans cadre - juste l'icône */
.user-select-btn {
    min-width: 180px !important;
    flex-shrink: 0 !important;
    opacity: 0;
    display: none;
    transform: scale(1.1);
    position: relative;
    z-index: 5;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 20px !important;
}

.user-select-btn:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Animation d'entrée du premier profil */
@keyframes cardReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1.1);
        filter: blur(0);
    }
}

/* Animations de glissement gauche/droite */
@keyframes slideInFromRight {
    0% { opacity: 0; transform: translateX(100px) scale(0.8); }
    100% { opacity: 1; transform: translateX(0) scale(1.1); }
}

@keyframes slideInFromLeft {
    0% { opacity: 0; transform: translateX(-100px) scale(0.8); }
    100% { opacity: 1; transform: translateX(0) scale(1.1); }
}

@keyframes slideOutToLeft {
    0% { opacity: 1; transform: translateX(0) scale(1.1); }
    100% { opacity: 0; transform: translateX(-100px) scale(0.8); }
}

@keyframes slideOutToRight {
    0% { opacity: 1; transform: translateX(0) scale(1.1); }
    100% { opacity: 0; transform: translateX(100px) scale(0.8); }
}

/* Glow et shimmer désactivés */
.user-select-btn::before,
.user-select-btn::after {
    display: none !important;
}

/* Container pour l'avatar et ses particules */
.avatar-orbit-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
}

/* Images avatars login avec léger glow subtil */
.user-avatar-img-login {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 2;
    /* Léger glow doré subtil */
    filter: drop-shadow(0 0 12px rgba(255, 200, 100, 0.35));
}

.user-select-btn:hover .user-avatar-img-login {
    transform: scale(1.08);
    filter: drop-shadow(0 0 18px rgba(255, 200, 100, 0.5));
}

/* Conteneur des particules de souffle */
.fire-breath-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    pointer-events: none;
    z-index: 1;
}

/* Particule de souffle de feu */
.breath-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

/* === BULLES DE FEU TRAVERSANTES === */
.fire-bubbles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.fire-bubble {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: fireBubbleTraverse linear forwards;
}

/* Animation traverse de gauche à droite */
@keyframes fireBubbleTraverse {
    0% {
        transform: translateX(-100px) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 100px)) scale(0.5);
        opacity: 0;
    }
}

/* Animation traverse de droite à gauche */
@keyframes fireBubbleTraverseReverse {
    0% {
        transform: translateX(calc(100vw + 100px)) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(-100px) scale(0.5);
        opacity: 0;
    }
}

/* === MODAL TEXTAREA === */
.modal-textarea {
    width: 100%;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-primary, rgba(0, 0, 0, 0.3));
    color: var(--text);
    font-size: 1rem;
    line-height: 1.7;
    resize: vertical;
    min-height: 180px;
    margin-bottom: 16px;
    font-family: inherit;
    box-sizing: border-box;
    transition: all 0.3s ease;
}
.modal-textarea:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow, rgba(224, 120, 64, 0.15));
    background: var(--bg-secondary, rgba(0, 0, 0, 0.4));
}
.modal-textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

/* === SÉLECTEURS PROJET/USER === */
.modal-selects-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.modal-select-group { flex: 1; }
.modal-select-group label {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.modal-select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-primary, rgba(0, 0, 0, 0.3));
    color: var(--text);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.modal-select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow, color-mix(in srgb, var(--accent) 15%, transparent));
}

/* === MODAL STATUS ACTIONS === */
.modal-status-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.modal-action-btn {
    padding: 11px 18px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-warning { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: #1a1a1a; }
.btn-success { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: white; }
.btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; }
.modal-action-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* === RESPONSIVE MOBILE === */
@media (max-width: 768px) {
    .app-header {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
    }
    .app-title {
        font-size: 1.5rem !important;
        order: -1;
        width: 100%;
        text-align: center;
    }
    .header-left, .header-right { flex: 1; }
    
    .pf-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
    
    .task-input-section {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px;
    }
    #task-input { width: 100%; min-width: auto; }
    .task-input-section select { flex: 1; min-width: 80px; }
    
    .tasks-view.columns-view { flex-direction: column; gap: 16px; }
    .task-column { min-width: auto; width: 100%; }
    
    .bubbles-view { flex-direction: column; gap: 16px; }
    .bubbles-column { width: 100%; }
    
    .modal-box {
        width: 95%;
        padding: 24px;
        border-radius: 20px;
    }
    .modal-box.modal-box-large {
        width: 96%;
        max-width: none;
        max-height: 92vh;
        padding: 0;
    }
    .modal-header-fixed { padding: 16px 20px 12px; }
    .modal-body-scroll { padding: 16px 20px; }
    .modal-footer-fixed { padding: 12px 20px 16px; }
    .modal-body-scroll .modal-textarea { min-height: 60px; max-height: 150px; }
    .modal-selects-row { flex-direction: column; gap: 10px; }
    .modal-status-actions { justify-content: center; }
    .modal-action-btn { flex: 1; min-width: 100px; }
    .modal-actions { flex-direction: column; gap: 10px; }
    .modal-actions button { min-width: auto; }
    
    .journal-input-row { flex-wrap: wrap; }
    .journal-input-row select,
    .journal-input-row input { flex: 1; min-width: 120px; }
}

@media (max-width: 480px) {
    .app-title { font-size: 1.2rem !important; }
    .user-badge .user-name { display: none; }
    .header-right .icon-btn { padding: 8px; font-size: 1rem; }
    
    .bubble { padding: 12px 14px !important; }
    .bubble .bubble-text { font-size: 0.95rem !important; }
    
    .modal-box-large h3 { font-size: 1.1rem; }
    .modal-action-btn { padding: 8px 12px; font-size: 0.8rem; }
}

/* === CHATBOT FONT SIZE === */
.chatbot-panel[data-font="small"] .chatbot-messages,
.chatbot-panel[data-font="small"] .chat-msg { font-size: 0.75rem !important; }
.chatbot-panel[data-font="medium"] .chatbot-messages,
.chatbot-panel[data-font="medium"] .chat-msg { font-size: 0.95rem !important; }
.chatbot-panel[data-font="large"] .chatbot-messages,
.chatbot-panel[data-font="large"] .chat-msg { font-size: 1.15rem !important; }
.chatbot-panel[data-font="xlarge"] .chatbot-messages,
.chatbot-panel[data-font="xlarge"] .chat-msg { font-size: 1.4rem !important; }
#chatbot-font-size {
    font-size: 0.75rem;
    padding: 4px 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    color: white;
    cursor: pointer;
}
#chatbot-font-size:hover { background: rgba(255,255,255,0.2); }

/* === CHATBOT STYLE WHATSAPP VERT PREMIUM === */

/* Bouton FAB - Transparent pour laisser voir la boule dorée */
.chatbot-fab {
    background: transparent !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    border: none !important;
    animation: none !important;
}

.chatbot-fab:hover {
    transform: scale(1.12) !important;
    box-shadow:
        0 6px 30px rgba(37, 211, 102, 0.7),
        0 0 60px rgba(37, 211, 102, 0.4) !important;
}

@keyframes fabGlowGreen {
    0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.5), 0 0 40px rgba(37,211,102,0.25); }
    50% { box-shadow: 0 4px 25px rgba(37,211,102,0.7), 0 0 50px rgba(37,211,102,0.35); }
}

/* Panel style WhatsApp - Desktop */
.chatbot-panel {
    width: 420px !important;
    min-width: 380px !important;
    max-width: 500px !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow:
        0 8px 40px rgba(0,0,0,0.5),
        0 0 60px rgba(37, 211, 102, 0.15) !important;
    border: 1px solid rgba(37, 211, 102, 0.2) !important;
}

.chatbot-panel.large {
    width: 600px !important;
    max-width: 90vw !important;
    height: 75vh !important;
}

/* Masquer l'UI d'enregistrement avec croix jaune - SUPPRIMÉ */
.audio-recorder-ui {
    display: none !important;
}

/* Bouton fermer - clignotement subtil */
#chatbot-close {
    animation: subtlePulse 3s ease-in-out infinite;
}

@keyframes subtlePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Header vert premium */
.chatbot-header {
    background: linear-gradient(135deg, #075e54 0%, #128c7e 100%) !important;
    padding: 12px 16px !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.3);
}

.chatbot-controls button {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

.chatbot-controls button:hover {
    background: rgba(37,211,102,0.3) !important;
    box-shadow: 0 0 15px rgba(37,211,102,0.3);
}

/* Zone de saisie */
.chatbot-input-area {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    background: #0b141a !important;
    border-top: 1px solid rgba(37, 211, 102, 0.15) !important;
}

/* Conteneur boutons média */
.chat-media-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Boutons média VERT PREMIUM */
.chat-media-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(37, 211, 102, 0.15) !important;
    color: #25d366 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
    padding: 0 !important;
}

.chat-media-btn svg {
    width: 20px !important;
    height: 20px !important;
    transition: all 0.25s ease !important;
}

.chat-media-btn:hover {
    background: rgba(37, 211, 102, 0.25) !important;
    color: #2eec77 !important;
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.4) !important;
    transform: scale(1.08) !important;
}

/* Micro en enregistrement - GROS et ROUGE */
.chat-media-btn.recording,
#chat-mic-btn.recording {
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%) !important;
    color: white !important;
    animation: micRecordBig 0.7s ease-in-out infinite !important;
    box-shadow:
        0 0 25px rgba(255, 68, 68, 0.7),
        0 0 50px rgba(255, 68, 68, 0.4) !important;
    position: relative;
    z-index: 10;
}

.chat-media-btn.recording svg,
#chat-mic-btn.recording svg {
    width: 28px !important;
    height: 28px !important;
}

@keyframes micRecordBig {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 25px rgba(255,68,68,0.7), 0 0 50px rgba(255,68,68,0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 35px rgba(255,68,68,0.9), 0 0 70px rgba(255,68,68,0.5);
    }
}

/* Champ texte style WhatsApp */
.chatbot-input-area input[type="text"] {
    flex: 1 !important;
    min-width: 0 !important;
    background: #2a2a30 !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 10px 16px !important;
    color: white !important;
    font-size: 0.95rem !important;
}

.chatbot-input-area input[type="text"]::placeholder {
    color: rgba(255,255,255,0.4) !important;
}

.chatbot-input-area input[type="text"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(37,211,102,0.3) !important;
}

/* Bouton envoi style WhatsApp */
.chatbot-input-area > button#chatbot-send {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    border: none !important;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
    color: white !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    flex-shrink: 0;
}

.chatbot-input-area > button#chatbot-send svg {
    width: 20px;
    height: 20px;
}

.chatbot-input-area > button#chatbot-send:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(37,211,102,0.4);
}

/* Messages style WhatsApp */
.chatbot-messages {
    background: #0b141a !important;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
}

.chat-msg {
    max-width: 85% !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    margin: 4px 12px !important;
    position: relative;
}

.chat-msg.user {
    background: linear-gradient(135deg, #005c4b 0%, #025144 100%) !important;
    margin-left: auto !important;
    border-bottom-right-radius: 4px !important;
}

.chat-msg.assistant {
    background: #1f2c34 !important;
    margin-right: auto !important;
    border-bottom-left-radius: 4px !important;
    white-space: pre-wrap !important;
}

/* Indicateur d'envoi média */
.chat-msg.media-preview {
    padding: 8px !important;
}

.chat-msg.media-preview img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
}

.chat-msg.media-preview audio {
    max-width: 100%;
}

/* Mobile : PLEIN ÉCRAN comme ChatGPT */
@media (max-width: 768px) {
    /* Panel chatbot mobile - FULL SCREEN avec layout flex correct */
    .chatbot-panel {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        right: 0 !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        position: fixed !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .chatbot-panel.large {
        height: 100vh !important;
        max-height: 100vh !important;
    }

    /* Messages prennent tout l'espace disponible */
    .chatbot-messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

    /* Zone de saisie mobile - EN BAS, COMPACTE */
    .chatbot-input-area {
        flex-shrink: 0 !important;
        position: relative !important;
        bottom: auto !important;
        padding: 8px 10px !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        background: #0b141a !important;
    }

    /* Boutons média plus petits sur mobile */
    .chat-media-buttons {
        gap: 4px !important;
        flex-shrink: 0 !important;
    }

    .chat-media-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .chat-media-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Micro enregistrement mobile - MÊME TAILLE pour éviter tremblement */
    .chat-media-btn.recording,
    #chat-mic-btn.recording {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        position: relative !important;
        left: auto !important;
        transform: none !important;
        bottom: auto !important;
        z-index: 10 !important;
        flex-shrink: 0 !important;
        animation: micPulseSmall 0.8s ease-in-out infinite !important;
    }

    .chat-media-btn.recording svg,
    #chat-mic-btn.recording svg {
        width: 18px !important;
        height: 18px !important;
    }

    @keyframes micPulseSmall {
        0%, 100% { box-shadow: 0 0 10px rgba(255,68,68,0.5); }
        50% { box-shadow: 0 0 20px rgba(255,68,68,0.8); }
    }

    /* Champ texte mobile - prend l'espace */
    .chatbot-input-area input[type="text"] {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 10px 14px !important;
        font-size: 16px !important; /* Évite zoom iOS */
    }

    /* Bouton envoi mobile - TOUJOURS VISIBLE */
    .chatbot-input-area > button#chatbot-send {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        flex-shrink: 0 !important;
    }

    .chatbot-input-area > button#chatbot-send svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* FAB mobile */
    .chatbot-fab {
        width: 56px !important;
        height: 56px !important;
        bottom: 20px !important;
        right: 20px !important;
    }

    .chatbot-fab img {
        width: 100% !important;
        height: 100% !important;
    }
}

/* === NOTES RÉTRACTABLES === */
.note-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    margin-top: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--accent);
    transition: all 0.2s ease;
}
.note-toggle:hover {
    background: var(--accent-muted);
    transform: scale(1.02);
}
.note-toggle.expanded {
    background: var(--accent-muted);
}
.note-dot {
    font-size: 0.6rem;
}
.note-arrow {
    font-size: 0.6rem;
    transition: transform 0.2s ease;
}
.note-toggle.expanded .note-arrow {
    transform: rotate(180deg);
}

.bubble-description {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted, #666);
    white-space: pre-wrap;
    word-break: break-word;
    border-left: 3px solid var(--accent, #e07840);
    animation: slideDown 0.2s ease;
}
.bubble-description.hidden {
    display: none;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 500px;
        transform: translateY(0);
    }
}

/* Thèmes sombres - notes */
[data-theme="matrix"] .note-toggle {
    background: rgba(0, 255, 102, 0.1);
    border-color: rgba(0, 255, 102, 0.3);
    color: #00ff66;
}
[data-theme="matrix"] .bubble-description {
    background: rgba(0, 255, 102, 0.05);
    border-left-color: #00ff66;
    color: #aaa;
}

[data-theme="midnight"] .note-toggle {
    background: rgba(100, 130, 255, 0.1);
    border-color: rgba(100, 130, 255, 0.3);
    color: #6482ff;
}
[data-theme="midnight"] .bubble-description {
    background: rgba(100, 130, 255, 0.05);
    border-left-color: #6482ff;
    color: #aaa;
}

[data-theme="hacker"] .note-toggle {
    background: rgba(0, 255, 0, 0.1);
    border-color: rgba(0, 255, 0, 0.3);
    color: #00ff00;
}
[data-theme="hacker"] .bubble-description {
    background: rgba(0, 255, 0, 0.05);
    border-left-color: #00ff00;
    color: #aaa;
}

[data-theme="fantasy"] .note-toggle {
    background: rgba(191, 107, 255, 0.1);
    border-color: rgba(191, 107, 255, 0.3);
    color: #bf6bff;
}
[data-theme="fantasy"] .bubble-description {
    background: rgba(191, 107, 255, 0.05);
    border-left-color: #bf6bff;
    color: #aaa;
}

/* === VUE 2 COLONNES === */
.bubbles-view .hint {
    font-size: 0.7rem;
    font-weight: normal;
    opacity: 0.6;
}
.bubbles-view .bubble { cursor: pointer; }
.bubbles-view .bubble:active { transform: scale(0.98) !important; }
.bubbles-view .task-actions { display: none !important; }

/* === BARRE RECHERCHE TÂCHES === */
.search-container {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: 8px;
    position: relative;
}
.search-container.expanded {
    gap: 6px;
}

.search-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary, #888);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.search-toggle-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--accent, #daa520);
    transform: scale(1.1);
}
.search-toggle-btn.active {
    background: var(--accent, #daa520);
    color: #000;
    box-shadow: 0 0 12px rgba(218, 165, 32, 0.4);
}

.search-input {
    width: 0;
    padding: 0;
    border: none;
    background: rgba(0,0,0,0.3);
    color: var(--text-primary, #fff);
    border-radius: 20px;
    font-size: 0.9rem;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: -36px;
}
.search-input::placeholder {
    color: var(--text-secondary, #666);
}
.search-container.expanded .search-input {
    width: 200px;
    padding: 8px 32px 8px 14px;
    margin-left: 0;
    opacity: 1;
    border: 1px solid rgba(218, 165, 32, 0.3);
}
.search-input:focus {
    outline: none;
    border-color: var(--accent, #daa520);
    box-shadow: 0 0 8px rgba(218, 165, 32, 0.2);
}

.search-count {
    position: absolute;
    right: 8px;
    font-size: 0.7rem;
    color: var(--accent, #daa520);
    opacity: 0;
    transition: opacity 0.2s;
}
.search-container.expanded .search-count {
    opacity: 1;
}

/* Highlight des tâches trouvées */
.bubble.search-match {
    box-shadow: 0 0 0 2px var(--accent, #daa520), 0 4px 15px rgba(218, 165, 32, 0.3) !important;
}
.bubble.search-hidden {
    opacity: 0.15;
    transform: scale(0.98);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .search-container.expanded .search-input {
        width: 140px;
    }
}

/* === LOGIN MOBILE OPTIMISÉ === */
@media (max-width: 500px) {
    /* Réduire le padding global */
    .login-container {
        padding: 20px 15px !important;
        margin: 10px !important;
        max-width: calc(100vw - 20px) !important;
    }
    
    /* Logo plus petit et moins de marge */
    .login-logo {
        width: 80px !important;
        height: 80px !important;
        margin-bottom: 15px !important;
    }
    
    /* Titre plus compact */
    .login-container h1 {
        font-size: 1.8rem !important;
        margin-bottom: 5px !important;
    }
    
    /* Sous-titre */
    .login-container > p {
        font-size: 0.95rem !important;
        margin-bottom: 15px !important;
    }
    
    /* Carousel ajusté */
    .user-carousel {
        margin-top: 15px !important;
        gap: 15px !important;
    }
    
    /* Flèches plus petites */
    .carousel-arrow {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.5rem !important;
    }
    
    /* Container profil */
    .user-select-grid {
        width: 180px !important;
        padding: 15px !important;
    }
    
    /* Avatar login plus petit */
    .user-avatar-img-login {
        width: 90px !important;
        height: 90px !important;
    }
    
    /* Nom utilisateur - VISIBLE et pas coupé */
    .user-name-select {
        font-size: 0.95rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
        padding: 0 5px !important;
    }
    
    /* Bouton profil */
    .user-select-btn {
        min-width: 150px !important;
        padding: 10px !important;
    }
    
    /* Masquer l'image de fond du Maître */
    .login-screen::after {
        display: none !important;
    }
}

/* Très petits écrans */
@media (max-width: 360px) {
    .login-logo {
        width: 60px !important;
        height: 60px !important;
    }
    
    .login-container h1 {
        font-size: 1.5rem !important;
    }
    
    .user-avatar-img-login {
        width: 70px !important;
        height: 70px !important;
    }
    
    .user-name-select {
        font-size: 0.85rem !important;
    }
}

/* ================================================
   SIDEBAR INTEGRATION - ProductiveApp v4.4
   ================================================ */

/* Main content: position relative pour les vues absolues */
.main-content {
    position: relative;
}

/* Galaxy View: couvrir le viewport à droite de la sidebar */
#view-galaxy.active {
    position: fixed !important;
    top: 0 !important;
    left: var(--sb-width-open, 260px) !important;
    width: calc(100vw - var(--sb-width-open, 260px)) !important;
    height: 100vh !important;
    background: #030308 !important;
    z-index: 100 !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    border-radius: 0 !important;
    transition: background-color 0.6s ease, left 0.3s cubic-bezier(0.4,0,0.2,1), width 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* Galaxy View: adjust for collapsed sidebar */
body.sidebar-collapsed #view-galaxy.active {
    left: var(--sb-width-closed, 64px) !important;
    width: calc(100vw - var(--sb-width-closed, 64px)) !important;
}

/* Galaxy View: mobile — full width, no sidebar offset */
@media (max-width: 768px) {
    #view-galaxy.active {
        left: 0 !important;
        width: 100vw !important;
    }
}

/* Galaxy View: skin désert — fond sable clair opaque */
#view-galaxy.active[data-galaxy-skin="desert"] {
    background: #f5f0e8 !important;
}

/* Masquer le Pomodoro et le bouton bug-report quand Galaxy View est active */
body.galaxy-active .pomodoro-widget,
body.galaxy-active #pomodoro-widget,
body.galaxy-active #bug-report-fab {
    display: none !important;
}

/* Galaxy toolbar: toujours visible en 2D, positionnée en bas du Galaxy View */
#view-galaxy.active:not(.mode-3d) .cosmic-toolbar {
    display: flex !important;
    bottom: 40px !important;
    z-index: 200 !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

/* Masquer l'ancien header quand sidebar est active */
body.logged-in .header-left .user-badge {
    display: none;
}

/* Garder le galaxy icon visible dans le header */
body.logged-in .header-left .galaxy-icon-container {
    display: flex;
}

/* Ajuster le contenu principal pour la sidebar */
@media (min-width: 769px) {
    /* Par défaut: sidebar OUVERTE (260px) */
    body.logged-in .main-content {
        margin-left: 260px !important;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Quand sidebar REPLIÉE (64px) */
    body.logged-in.sidebar-collapsed .main-content {
        margin-left: 64px !important;
    }
}

@media (max-width: 768px) {
    body.logged-in .main-content {
        margin-left: 0 !important;
    }
}

/* Highlight animation for search results */
@keyframes taskHighlight {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    50% { box-shadow: 0 0 20px 5px rgba(245, 158, 11, 0.5); }
}

.task-bubble.highlight,
.task-card.highlight {
    animation: taskHighlight 0.5s ease 3;
}

/* Sidebar accent color sync with theme */
[data-theme="executive"] { --sidebar-accent: #d4af37; }
[data-theme="corporate"] { --sidebar-accent: #3b82f6; }
[data-theme="minimal"] { --sidebar-accent: #374151; }
[data-theme="slate"] { --sidebar-accent: #64748b; }
[data-theme="obsidian"] { --sidebar-accent: #a1a1aa; }
[data-theme="academie"] { --sidebar-accent: #92400e; }
[data-theme="sunset"] { --sidebar-accent: #f97316; }
[data-theme="ocean"] { --sidebar-accent: #06b6d4; }
[data-theme="forest"] { --sidebar-accent: #22c55e; }
[data-theme="bubblegum"] { --sidebar-accent: #ec4899; }
[data-theme="aurora"] { --sidebar-accent: var(--accent-light); }
[data-theme="matrix"] { --sidebar-accent: #22c55e; }
[data-theme="cyberpunk"] { --sidebar-accent: #f0abfc; }
[data-theme="terminal"] { --sidebar-accent: #22c55e; }
[data-theme="midnight"] { --sidebar-accent: var(--accent-light); }

/* Mobile: Ajuster le contenu quand sidebar drawer est ouverte */
@media (max-width: 768px) {
    body.sidebar-mobile-open .app-container {
        transform: translateX(280px);
        transition: transform 0.3s ease;
    }

    /* Augmenter z-index du mobile toggle pour qu'il soit au-dessus */
    .sidebar-mobile-toggle {
        z-index: 998;
        background: var(--bg-card, rgba(15, 15, 20, 0.95)) !important;
        border: 1px solid var(--border, rgba(255, 255, 255, 0.1)) !important;
    }
}

/* ================================================
   CHATBOT IMPROVEMENTS
   - Ball fades when chat opens
   - Chat positioned at ball
   - Minimum dimensions fixed
   ================================================ */

/* Hide chatbot before login */
/* Chatbot FAB masqué — remplacé par maha-orb */
.chatbot-fab,
body.logged-in .chatbot-fab,
#chatbot-toggle,
body.logged-in #chatbot-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Panel stays hidden until opened */
.chatbot-panel.hidden {
    display: none !important;
}

/* Global search overlay - COMPLETELY REMOVED FROM UI */
.global-search-overlay,
.global-search-overlay.active,
.global-search-overlay.show,
.global-search-overlay[class],
#global-search-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ================================================
   CONFIRM MODAL - Theme-aware Premium
   ================================================ */

.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.confirm-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 3D Relief Premium Modal - TeamTalk inspired */
.confirm-modal {
    position: relative;
    background: linear-gradient(180deg,
        rgba(35, 32, 45, 0.98) 0%,
        rgba(25, 23, 32, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 40px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    transform: scale(0.8) translateY(40px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* 3D relief shadow - subtle depth effect */
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.03) inset,
        0 -2px 0 rgba(0, 0, 0, 0.3) inset,
        0 25px 60px -15px rgba(0, 0, 0, 0.5),
        0 10px 30px -10px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    backdrop-filter: blur(20px);
}

/* 3D Relief border - Premium TeamTalk style (no rotation) */
.confirm-modal::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%);
    border-radius: 25px;
    z-index: -1;
    pointer-events: none;
}

/* Top accent line */
.confirm-modal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
    border-radius: 2px;
}

.confirm-modal-overlay.active .confirm-modal {
    transform: scale(1) translateY(0);
}

.confirm-modal-icon {
    font-size: 52px;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.confirm-modal-title {
    color: var(--text-primary, #fff);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 12px;
}

.confirm-modal-message {
    color: var(--text-secondary, rgba(255, 255, 255, 0.65));
    font-size: 1rem;
    margin: 0 0 32px;
    line-height: 1.6;
}

.confirm-modal-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.confirm-modal-btn {
    position: relative;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 130px;
    overflow: hidden;
}

.confirm-modal-btn.cancel {
    background: var(--bg-secondary, rgba(255, 255, 255, 0.08));
    color: var(--text-secondary, rgba(255, 255, 255, 0.8));
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.12));
}

.confirm-modal-btn.cancel:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.12));
    color: var(--text-primary, #fff);
    transform: translateY(-2px);
}

.confirm-modal-btn.confirm {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 15px var(--accent-glow, color-mix(in srgb, var(--accent) 40%, transparent));
}

.confirm-modal-btn.confirm:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--accent-glow, color-mix(in srgb, var(--accent) 50%, transparent));
}

.confirm-modal-btn.confirm.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.confirm-modal-btn.confirm.danger:hover {
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5);
}

/* ================================================
   SIDEBAR TOGGLE - Clean style (inside sidebar)
   ================================================ */

/* Toggle is now handled in style-sidebar.css */

/* chatbot-fab masqué — maha-orb le remplace */

.chatbot-fab.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.8) !important;
}

/* Panel position - starts from bottom-right where ball is */
.chatbot-panel {
    bottom: 20px !important;
    right: 20px !important;
    min-height: 450px !important;
    max-height: 70vh !important;
    transform-origin: bottom right !important;
    animation: chatPanelOpen 0.3s ease forwards !important;
}

@keyframes chatPanelOpen {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.chatbot-panel.closing {
    animation: chatPanelClose 0.25s ease forwards !important;
}

@keyframes chatPanelClose {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
}

/* Fix button cutoff - ensure footer has enough space */
.chatbot-input-area {
    min-height: 60px !important;
    padding: 12px 14px !important;
}

/* ================================================
   MENU DROPDOWN ANIMATION
   Fade + scale for smooth appearance
   ================================================ */

.menu-dropdown,
.dropdown-menu,
#menu-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95) translateY(-8px);
    transform-origin: top right;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.menu-dropdown.active,
.menu-dropdown.show,
.dropdown-menu.active,
.dropdown-menu.show,
#menu-dropdown.active,
#menu-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

/* ================================================
   LOGIN FORM v2.0 - Team Auth + Member Picker
   ================================================ */

/* Container du formulaire login */
.login-form-container {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards;
    max-width: 320px;
    margin: 0 auto;
}

.login-form-container .login-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.login-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.login-inputs input {
    padding: 14px 18px;
    border-radius: 12px;
    border: 2px solid rgba(255, 200, 100, 0.2);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.login-inputs input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.login-inputs input:focus {
    border-color: rgba(255, 200, 100, 0.6);
    background: rgba(0, 0, 0, 0.5);
    outline: none;
    box-shadow: 0 0 20px rgba(255, 200, 100, 0.15);
}

.login-btn {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
    border: none;
    border-radius: 12px;
    color: #1a1a1f;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(255, 140, 0, 0.3);
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255, 140, 0, 0.5);
}

.login-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.login-btn .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-top-color: #1a1a1f;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* === MEMBER PICKER - HORIZONTAL RESPONSIVE === */
.member-picker-container {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
    width: 100%;
    max-width: 100vw;
    padding: 0 20px;
    box-sizing: border-box;
}

.member-picker-container.hidden {
    display: none;
}

.member-picker-container .login-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-weight: 600;
    text-align: center;
}

/* Grille horizontale responsive */
.member-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 15px 10px 25px;
    margin: 0 auto;
    max-width: 850px;
    justify-content: center;
    flex-wrap: wrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.member-grid::-webkit-scrollbar {
    display: none;
}

.member-select-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 2px solid rgba(255, 200, 100, 0.15) !important;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    scroll-snap-align: center;
    flex-shrink: 0;
    width: 110px;
    pointer-events: auto !important;
    position: relative;
    z-index: 100;
}

.member-select-btn:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(255, 200, 100, 0.5);
    background: rgba(255, 200, 100, 0.08);
    box-shadow: 0 12px 30px rgba(255, 140, 0, 0.2);
}

.member-select-btn .user-avatar-img-login {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 200, 100, 0.25);
    transition: all 0.3s ease;
}

.member-select-btn:hover .user-avatar-img-login {
    border-color: rgba(255, 200, 100, 0.7);
    box-shadow: 0 0 20px rgba(255, 200, 100, 0.3);
}

.member-name {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.member-role {
    color: rgba(255, 200, 100, 0.6);
    font-size: 0.7rem;
    font-weight: 500;
}

/* Responsive mobile - slider horizontal */
@media (max-width: 768px) {
    .member-grid {
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
    }

    .member-select-btn {
        width: 95px;
        padding: 12px;
    }

    .member-select-btn .user-avatar-img-login {
        width: 48px;
        height: 48px;
    }

    .member-name {
        font-size: 0.75rem;
        max-width: 85px;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === FIX LOGIN SCREEN - DISABLED (Using AuthLogin now) === */
/* COMMENTED OUT 2026-02-13 - Old login system no longer used
.login-screen {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #0f0f1a 100%) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
*/

/* Removed generic border reset - was breaking member buttons */

.login-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 400px !important;
    width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Logo et titre */
.login-logo {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 15px !important;
    border-radius: 20px !important;
}

.login-container h1 {
    font-size: 2rem !important;
    margin-bottom: 8px !important;
}

/* "Tout le monde" option spéciale */
.member-select-btn.member-all {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent) 0%, color-mix(in srgb, var(--accent) 20%, transparent) 100%);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.member-select-btn.member-all:hover {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Hide old elements */
.user-carousel,
#password-form,
#email-login-form {
    display: none !important;
}

/* === FIX: Hide ALL app elements before login === */
body:not(.logged-in) .main-content,
body:not(.logged-in) .sidebar,
body:not(.logged-in) #app-sidebar,
body:not(.logged-in) #app-header,
body:not(.logged-in) .header,
body:not(.logged-in) .sidebar-mobile-toggle,
body:not(.logged-in) .sidebar-mobile-overlay,
body:not(.logged-in) .global-search-overlay,
body:not(.logged-in) .chatbot-panel,
body:not(.logged-in) #chatbot-panel,
body:not(.logged-in) .chatbot-fab,
body:not(.logged-in) #chatbot-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Remove any borders/outlines on login */
.login-screen,
.login-screen *,
.login-container,
.login-form-container,
.member-picker-container {
    outline: none !important;
}

/* Fix inputs styling */
.login-inputs input {
    border: 2px solid rgba(255, 200, 100, 0.2) !important;
}

/* FIX: Removed opacity:0 and pointer-events:none that was hiding inputs on focus */

/* Ensure login screen covers everything - DISABLED 2026-02-13 */
/*
.login-screen:not(.hidden) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #0f0f1a 100%) !important;
}
*/

/* === EXTRA FIX: Remove any outlines/borders on login === */
.login-screen,
.login-container,
#login-screen,
.login-form-container,
.member-picker-container,
.login-inputs,
.member-grid {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Only allow borders on specific elements */
.member-select-btn {
    border: 2px solid rgba(255, 200, 100, 0.15) !important;
}

.member-select-btn:hover {
    border: 2px solid rgba(255, 200, 100, 0.5) !important;
}

.login-inputs input {
    border: 2px solid rgba(255, 200, 100, 0.2) !important;
}

.login-inputs input:focus {
    border: 2px solid rgba(255, 200, 100, 0.5) !important;
}

/* === FIX: User avatar in header badge === */
.user-avatar-img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--accent, #d4af37) !important;
    flex-shrink: 0 !important;
}

.user-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.user-badge .user-name {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

/* ================================================
   CLEAN LOGIN FIX - Remove all visual bugs
   ================================================ */

/* Hide the border/glow around login container */
.login-container::before {
    display: none !important;
}

/* Hide any stray overlays before login */
body:not(.logged-in) *:not(.login-screen):not(.login-screen *):not(.fire-bubble) {
    /* This is too aggressive, let's be more specific */
}

/* Specifically hide the sidebar-mobile-overlay */
.sidebar-mobile-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body.logged-in .sidebar-mobile-overlay.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Login form inputs need proper styling */
#login-email,
#login-password {
    border: 2px solid rgba(255, 200, 100, 0.3) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
}

#login-email:focus,
#login-password:focus {
    border-color: rgba(255, 200, 100, 0.6) !important;
    box-shadow: 0 0 15px rgba(255, 200, 100, 0.15) !important;
}

/* Login button clickable */
#login-btn {
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 100 !important;
    position: relative !important;
}

/* ================================================
   CLEAN LOGIN SCREEN - Simple and Stable
   ================================================ */

/* Hide visual effects on login screen */
.login-screen::before,
.login-screen::after,
.login-container::before,
.login-container::after,
#login-btn::before,
#login-btn::after {
    display: none !important;
}

/* Clean background - DISABLED 2026-02-13 */
/*
.login-screen {
    background: linear-gradient(165deg, #0a0a0a 0%, #1a1410 40%, #2d2117 100%) !important;
}
*/

/* CRITICAL FIX: Hide login-screen when logged in (2026-02-13) */
body.logged-in .login-screen {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}

/* CRITICAL FIX: FORCE auth-login-overlay to be visible (2026-02-13) */
body:not(.logged-in) .auth-login-overlay,
body:not(.logged-in) #auth-login-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1100 !important;
}

/* Login button - simple and clickable */
#login-btn {
    animation: none !important;
    cursor: pointer !important;
}

/* Member grid - stable layout */
#member-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
}

/* Member buttons - stable and clickable */
.member-select-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 15px !important;
    background: rgba(255, 200, 100, 0.1) !important;
    border: 2px solid rgba(255, 200, 100, 0.3) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: transform 0.2s, border-color 0.2s !important;
    width: 100px !important;
    min-height: 120px !important;
}

.member-select-btn:hover {
    transform: scale(1.05) !important;
    border-color: rgba(255, 200, 100, 0.8) !important;
}

.member-select-btn img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin-bottom: 8px !important;
}

.member-select-btn .member-name {
    font-size: 12px !important;
    color: #fff !important;
    text-align: center !important;
}

.member-select-btn .member-role {
    font-size: 10px !important;
    color: rgba(255, 200, 100, 0.7) !important;
}

/* ================================================
   PROJECT DETAIL VIEW - Empty State
   ================================================ */

.project-detail-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 0 20px;
}

.project-detail-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px;
    background: var(--bg-card, rgba(0, 0, 0, 0.3));
    border-radius: 20px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    margin-bottom: 24px;
}

.project-detail-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    flex-shrink: 0;
}

.project-detail-info {
    flex: 1;
}

.project-detail-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0 0 8px 0;
}

.project-detail-desc {
    font-size: 1rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    margin: 0;
}

.project-detail-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.project-detail-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.2));
    border-radius: 12px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 0.95rem;
}

.project-detail-stat svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* Empty state */
.project-empty-state {
    text-align: center;
    padding: 60px 30px;
    background: var(--bg-card, rgba(0, 0, 0, 0.2));
    border-radius: 24px;
    border: 2px dashed var(--border, rgba(255, 255, 255, 0.15));
}

.project-empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.8;
}

.project-empty-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0 0 12px 0;
}

.project-empty-text {
    font-size: 1rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    margin: 0 0 30px 0;
}

.btn-large {
    padding: 16px 32px !important;
    font-size: 1.1rem !important;
}

.btn-large svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    margin-right: 8px;
    vertical-align: middle;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .project-detail-container {
        margin: 20px auto;
    }

    .project-detail-header {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }

    .project-detail-icon {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    .project-detail-title {
        font-size: 1.4rem;
    }

    .project-detail-stats {
        flex-direction: column;
        gap: 10px;
    }

    .project-empty-state {
        padding: 40px 20px;
    }

    .project-empty-icon {
        font-size: 3rem;
    }

    .project-empty-title {
        font-size: 1.2rem;
    }
}

/* ================================================
   3D RELIEF PREMIUM STYLING - Theme Aware
   Uses CSS variables to respect active theme
   ================================================ */

/* === Relief Variables - Theme Aware === */
:root {
    /* Relief uses theme colors via CSS variables */
    --relief-inset-light: rgba(255, 255, 255, 0.05);
    --relief-inset-dark: rgba(0, 0, 0, 0.15);
    --relief-border-light: rgba(255, 255, 255, 0.08);
    --relief-shadow-soft: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
}

/* === Task Cards - Subtle 3D with Theme Colors === */
.bubble,
.task-card,
.dashboard-card,
.stat-card,
.note-card {
    /* Let theme background show through, just add depth */
    border: 1px solid var(--border, var(--relief-border-light)) !important;
    border-top-color: var(--relief-border-light) !important;
    box-shadow: 
        0 1px 0 var(--relief-inset-light) inset,
        0 -1px 0 var(--relief-inset-dark) inset,
        var(--relief-shadow-soft) !important;
    transition: all 0.25s ease !important;
}

.bubble:hover,
.task-card:hover,
.dashboard-card:hover {
    border-color: var(--accent, currentColor) !important;
    box-shadow: 
        0 1px 0 var(--relief-inset-light) inset,
        0 -1px 0 var(--relief-inset-dark) inset,
        0 15px 40px -10px rgba(0, 0, 0, 0.4),
        0 0 25px var(--accent-glow, color-mix(in srgb, var(--accent) 15%, transparent)) !important;
    transform: translateY(-2px);
}

/* === Input Fields - Glass with Theme === */
.modal-input,
.modal-textarea,
.modal-select,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    background: var(--bg-secondary, rgba(0, 0, 0, 0.3)) !important;
    border: 1px solid var(--border, var(--relief-border-light)) !important;
    border-radius: 12px !important;
    box-shadow: 
        0 1px 0 var(--relief-inset-dark) inset !important;
    transition: all 0.3s ease !important;
}

.modal-input:focus,
.modal-textarea:focus,
.modal-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--accent) !important;
    box-shadow: 
        0 1px 0 var(--relief-inset-dark) inset,
        0 0 0 3px var(--accent-glow, color-mix(in srgb, var(--accent) 15%, transparent)) !important;
    outline: none !important;
}

/* Galaxy inline text edit — override everything above */
input[type="text"].cosmic-inline-text-edit,
input[type="text"].cosmic-inline-text-edit:focus,
input[type="text"].cosmic-inline-text-edit:focus-visible,
input[type="text"].cosmic-inline-text-edit:active {
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    animation: none !important;
}

/* === Buttons - 3D with Theme Accent === */
.btn,
.btn-primary,
.btn-secondary,
.modal-action-btn,
.confirm-modal-btn {
    position: relative;
    border-radius: 12px !important;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1)) !important;
    border-top-color: var(--relief-border-light) !important;
    box-shadow: 
        0 1px 0 var(--relief-inset-light) inset,
        0 -1px 0 var(--relief-inset-dark) inset,
        0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.modal-action-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 
        0 1px 0 var(--relief-inset-light) inset,
        0 -1px 0 var(--relief-inset-dark) inset,
        0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

.btn:active,
.btn-primary:active,
.btn-secondary:active {
    transform: translateY(0) !important;
    box-shadow: 
        0 1px 0 var(--relief-inset-dark) inset !important;
}

/* === Dashboard Widgets - Theme Aware === */
.dash-chart-card,
.analytics-card,
.settings-card,
.report-card {
    background: var(--bg-card, var(--surface, rgba(26, 26, 46, 0.9))) !important;
    border: 1px solid var(--border, var(--relief-border-light)) !important;
    border-top-color: var(--relief-border-light) !important;
    border-radius: 16px !important;
    box-shadow: 
        0 1px 0 var(--relief-inset-light) inset,
        0 15px 40px -15px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
}

/* === Sidebar Items - Respects Theme === */
.sidebar-nav-item,
.nav-item {
    border-radius: 10px !important;
    transition: all 0.25s ease !important;
}

.sidebar-nav-item:hover,
.nav-item:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.05)) !important;
    box-shadow: 
        0 1px 0 var(--relief-inset-light) inset,
        0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.sidebar-nav-item.active,
.nav-item.active {
    background: var(--accent-muted, color-mix(in srgb, var(--accent) 10%, transparent)) !important;
    border: 1px solid var(--accent, currentColor) !important;
    box-shadow: 
        0 1px 0 var(--relief-inset-light) inset,
        0 0 15px var(--accent-glow, color-mix(in srgb, var(--accent) 10%, transparent)) !important;
}

/* === Chatbot Panel - Theme Glass === */
.chatbot-panel {
    background: var(--bg-card, var(--surface, rgba(26, 26, 46, 0.98))) !important;
    border: 1px solid var(--border, var(--relief-border-light)) !important;
    border-top-color: var(--relief-border-light) !important;
    box-shadow: 
        0 1px 0 var(--relief-inset-light) inset,
        -10px 0 40px rgba(0, 0, 0, 0.4),
        0 0 40px var(--accent-glow, color-mix(in srgb, var(--accent) 5%, transparent)) !important;
    backdrop-filter: blur(15px);
}

/* === FAB Button - Theme Accent === */
.fab-btn {
    background: var(--accent, linear-gradient(145deg, var(--accent), var(--accent))) !important;
    border: none !important;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.15) inset,
        0 -2px 0 rgba(0, 0, 0, 0.2) inset,
        0 8px 25px rgba(0, 0, 0, 0.35),
        0 0 25px var(--accent-glow, color-mix(in srgb, var(--accent) 25%, transparent)) !important;
}

/* .chatbot-fab masqué — maha-orb le remplace */

.fab-btn:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.2) inset,
        0 -2px 0 rgba(0, 0, 0, 0.25) inset,
        0 15px 40px rgba(0, 0, 0, 0.45),
        0 0 40px var(--accent-glow, color-mix(in srgb, var(--accent) 35%, transparent)) !important;
}

.chatbot-fab:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* === Galaxy View: boule dorée sans cercle derrière === */
body.galaxy-active .chatbot-fab {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

body.galaxy-active .chatbot-fab:hover {
    box-shadow: none !important;
    transform: scale(1.1) !important;
}

/* === Scrollbars - Theme Accent === */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary, rgba(0, 0, 0, 0.2));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    opacity: 0.5;
    border-radius: 4px;
    border: 1px solid var(--relief-inset-light);
}

::-webkit-scrollbar-thumb:hover {
    opacity: 0.8;
}

/* === Remove ALL Rotating Animations === */
.modal-box::before,
.confirm-modal::before,
.card::before {
    animation: none !important;
}

/* === DISABLE Divine Rotate Animations (golden spinning backgrounds) === */
#view-team-messaging::before,
#view-campaigns::before,
.ai-btn::after,
.msg-container::before {
    animation: none !important;
    opacity: 0 !important;
}

/* Force disable ALL rotating animations (golden spinning) */
@keyframes divineRotate { from, to { transform: none; } }
@keyframes campaignDivineRotate { from, to { transform: none; } }
@keyframes ai-btnRotate { from, to { transform: none; } }
@keyframes ai-ambientRotate { from, to { transform: none; } }
@keyframes borderRotate { from, to { transform: none; } }
@keyframes ringRotate { from, to { transform: none; } }
@keyframes sparkleRotate { from, to { transform: none; } }
@keyframes sunRotate { from, to { transform: none; } }
@keyframes pageFlip { from, to { transform: none; } }

/* Disable ALL ::before pseudo-elements that rotate */
*[class*="view-"]::before,
*[class*="modal"]::before,
.ai-btn::after {
    animation: none !important;
}

/* === CRITICAL: Force hide modals with .hidden class === */
#edit-task-modal.hidden,
#theme-modal.hidden,
#project-modal.hidden,
#premium-report-modal.hidden,
#premium-results-modal.hidden,
.modal.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* === Modal Styles - Theme Aware === */
.modal-box,
.confirm-modal {
    background: var(--bg-card, var(--surface, rgba(30, 30, 45, 0.98))) !important;
    border: 1px solid var(--border, var(--relief-border-light)) !important;
    border-top-color: var(--relief-border-light) !important;
    box-shadow: 
        0 2px 0 var(--relief-inset-light) inset,
        0 -2px 0 var(--relief-inset-dark) inset,
        0 25px 60px -15px rgba(0, 0, 0, 0.5),
        0 0 0 1px var(--relief-inset-light) !important;
    backdrop-filter: blur(20px);
}

/* === Theme-specific overrides === */

/* Light themes (Minimal, Academie) */
[data-theme="minimal"],
[data-theme="academie"] {
    --relief-inset-light: rgba(255, 255, 255, 0.5);
    --relief-inset-dark: rgba(0, 0, 0, 0.08);
    --relief-border-light: rgba(0, 0, 0, 0.1);
}

[data-theme="minimal"] .bubble,
[data-theme="minimal"] .task-card,
[data-theme="minimal"] .modal-box,
[data-theme="academie"] .bubble,
[data-theme="academie"] .task-card,
[data-theme="academie"] .modal-box {
    box-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 -1px 0 rgba(0, 0, 0, 0.05) inset,
        0 10px 30px -10px rgba(0, 0, 0, 0.15) !important;
}

/* Matrix/Hacker themes - Green glow */
[data-theme="matrix"],
[data-theme="hacker"] {
    --accent-glow: rgba(0, 255, 100, 0.2);
}

/* Cyberpunk theme - Pink glow */
[data-theme="cyberpunk"] {
    --accent-glow: rgba(255, 0, 150, 0.2);
}

/* Ocean theme - Blue glow */
[data-theme="ocean"] {
    --accent-glow: rgba(0, 150, 255, 0.2);
}

/* Forest theme - Green glow */
[data-theme="forest"] {
    --accent-glow: rgba(34, 197, 94, 0.2);
}

/* Sunset theme - Orange glow */
[data-theme="sunset"] {
    --accent-glow: rgba(255, 150, 50, 0.2);
}

/* Aurora theme - Purple glow */
[data-theme="aurora"] {
    --accent-glow: rgba(150, 100, 255, 0.2);
}

/* =============================================
   CAMPAIGNS LAYOUT FIXES
   ============================================= */

/* Remove rotating divine light animation */
#view-campaigns::before {
    animation: none !important;
    display: none !important;
}

/* Fix campaigns view to take full width */
#view-campaigns {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Campaigns content takes full width with proper padding */
.campaigns-content {
    width: 100% !important;
    padding: 0 !important;
}

/* Campaigns panels - center content with max-width */
.campaigns-panel {
    width: 100% !important;
    box-sizing: border-box !important;
}

.campaigns-list-panel,
.templates-panel {
    padding: 32px 48px !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Stats row - full width and centered */
.campaign-stats-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
}

/* Table container - full width */
.campaigns-table-container {
    width: 100% !important;
}

/* Templates grid - better distribution */
.templates-grid {
    width: 100% !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}

/* Contacts panel - proper layout */
.contacts-panel {
    width: 100% !important;
}

/* Header and tabs - full width with centered content */
.campaigns-header,
.campaigns-tabs {
    width: 100% !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
}

/* =============================================
   CANVAS BACKGROUND ANIMATION
   ============================================= */

/* Canvas behind content but visible through transparent body */
#matrix-bg {
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Body transparent so canvas shows through (gradient on html provides fallback) */
body {
    background: transparent !important;
}

/* App container transparent too */
.app-container {
    background: transparent !important;
}

/* Content above canvas, transparent background to let animation show through */
.main-content, .view-container {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

/* Sidebar keeps opaque background for readability */
#app-sidebar {
    position: relative !important;
    z-index: 100 !important;
    background: var(--bg-primary) !important;
}

/* =============================================
   CRITICAL FIX: Sidebar Layout Restoration v2.0
   Fixes: Sidebar 100% width + horizontal layout bug
   Date: 2026-02-12
   ============================================= */

/* Sidebar MUST be 260px wide, vertical, fixed to left */
.sidebar,
#app-sidebar {
    width: var(--sb-width-open, 260px) !important;
    max-width: 260px !important;
    min-width: 260px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 100 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* BUGFIX 2026-02-12: Force width with ultra-high specificity (sidebar width 100% bug) */
body.logged-in aside#app-sidebar.sidebar {
    width: 260px !important;
    max-width: 260px !important;
    min-width: 260px !important;
}

/* Collapsed sidebar state (64px) */
body.sidebar-collapsed .sidebar,
body.sidebar-collapsed #app-sidebar,
body.logged-in.sidebar-collapsed aside#app-sidebar.sidebar {
    width: var(--sb-width-closed, 64px) !important;
    max-width: 64px !important;
    min-width: 64px !important;
}

/* Main content MUST have proper left margin for sidebar */
.main-content {
    margin-left: var(--sb-width-open, 260px) !important;
    min-height: 100vh !important;
    position: relative !important;
    z-index: 1 !important;
    width: calc(100% - var(--sb-width-open, 260px)) !important;
    /* margin-top removed - let views manage their own top spacing */
}

/* Main content when sidebar collapsed */
body.sidebar-collapsed .main-content {
    margin-left: var(--sb-width-closed, 64px) !important;
    width: calc(100% - var(--sb-width-closed, 64px)) !important;
}

/* Mobile: no margin, sidebar overlay */
@media (max-width: 768px) {
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .sidebar,
    #app-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    body.sidebar-mobile-open .sidebar,
    body.sidebar-mobile-open #app-sidebar {
        transform: translateX(0);
    }
}

/* ==============================================================
   PIP-BOY 3000 MARK IV — VAULT-TEC INDUSTRIES
   Uses body.theme-pipboy class (added by themes.js)
   ============================================================== */

/* ─── 1. POLICE VT323 SUR TOUT ─── */
body.theme-pipboy,
body.theme-pipboy *,
body.theme-pipboy *::before,
body.theme-pipboy *::after {
    font-family: 'VT323', monospace !important;
}

/* Reset du titre app (override Cormorant Garamond gradient) */
body.theme-pipboy .app-title {
    font-family: 'VT323', monospace !important;
    -webkit-text-fill-color: #00FF77 !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    background: none !important;
    color: #00FF77 !important;
    font-size: 2rem !important;
    letter-spacing: 6px !important;
    text-transform: uppercase !important;
}

/* Titres en majuscules */
body.theme-pipboy h1,
body.theme-pipboy h2,
body.theme-pipboy h3,
body.theme-pipboy h4 {
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

/* ─── 2. SCANLINES CRT (couvre TOUT l'ecran) ─── */
body.theme-pipboy::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: 9999;
}

/* ─── 3. GLOW VERT SUR TOUT LE TEXTE ─── */
body.theme-pipboy {
    text-shadow: 0 0 8px rgba(0, 255, 119, 0.6) !important;
    color: #00FF77 !important;
}

/* ─── 4. VIGNETTE CRT (bords sombres) ─── */
body.theme-pipboy::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 35%,
        rgba(0, 0, 0, 0.2) 60%,
        rgba(0, 0, 0, 0.5) 85%,
        rgba(0, 0, 0, 0.75) 100%
    );
    pointer-events: none;
    z-index: 9998;
}

/* ─── 5. FOND PLEASE STAND BY ─── */
body.theme-pipboy {
    background-color: #080808 !important;
}

/* Le div #pipboy-standby est injecte par JS — voir themes.js */
#pipboy-standby {
    display: none;
}
body.theme-pipboy #pipboy-standby {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}
#pipboy-standby-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'VT323', monospace;
    font-size: 42px;
    color: rgba(0, 255, 119, 0.04);
    white-space: nowrap;
    letter-spacing: 8px;
    text-transform: uppercase;
    animation: pipboy-pulse 4s ease-in-out infinite;
    text-align: center;
    line-height: 1.6;
}
#pipboy-standby-sub {
    position: absolute;
    top: calc(50% + 40px);
    left: 50%;
    transform: translate(-50%, 0);
    font-family: 'VT323', monospace;
    font-size: 18px;
    color: rgba(0, 255, 119, 0.03);
    white-space: nowrap;
    letter-spacing: 4px;
    text-transform: uppercase;
    animation: pipboy-pulse 4s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes pipboy-pulse {
    0%, 100% { opacity: 0.03; }
    50% { opacity: 0.08; }
}

/* ─── 6. CARTES : border-radius 0, border vert, fond quasi noir ─── */
body.theme-pipboy .bubble,
body.theme-pipboy .task-card,
body.theme-pipboy .card {
    border-radius: 0 !important;
    border: 1px solid #00FF77 !important;
    background: rgba(0, 10, 5, 0.9) !important;
    box-shadow: inset 0 0 15px rgba(0, 255, 119, 0.03) !important;
}

/* ─── 7. ZERO BORDER-RADIUS partout ─── */
body.theme-pipboy .modal-box,
body.theme-pipboy .modal-content,
body.theme-pipboy button,
body.theme-pipboy .btn,
body.theme-pipboy input,
body.theme-pipboy textarea,
body.theme-pipboy select,
body.theme-pipboy .badge,
body.theme-pipboy .tag,
body.theme-pipboy .chip,
body.theme-pipboy .project-dropdown-btn,
body.theme-pipboy .column-count,
body.theme-pipboy .task-column,
body.theme-pipboy .menu-dropdown {
    border-radius: 0 !important;
}

/* ─── 8. COLONNES : labels terminal ─── */
body.theme-pipboy .task-column {
    border: 1px solid rgba(0, 255, 119, 0.2) !important;
    background: rgba(0, 255, 119, 0.01) !important;
}

body.theme-pipboy .column-header {
    border-bottom: 1px solid rgba(0, 255, 119, 0.3) !important;
}

body.theme-pipboy .task-column[data-status="todo"] .column-header h2 {
    font-size: 0 !important;
}
body.theme-pipboy .task-column[data-status="todo"] .column-header h2::after {
    content: '[ PENDING ]';
    font-size: 18px;
    color: #00FF77;
    letter-spacing: 3px;
    font-family: 'VT323', monospace;
}
body.theme-pipboy .task-column[data-status="inprogress"] .column-header h2 {
    font-size: 0 !important;
}
body.theme-pipboy .task-column[data-status="inprogress"] .column-header h2::after {
    content: '[ ACTIVE ]';
    font-size: 18px;
    color: #44FFAA;
    letter-spacing: 3px;
    font-family: 'VT323', monospace;
    text-shadow: 0 0 8px rgba(68, 255, 170, 0.5);
}
body.theme-pipboy .task-column[data-status="done"] .column-header h2 {
    font-size: 0 !important;
}
body.theme-pipboy .task-column[data-status="done"] .column-header h2::after {
    content: '[ COMPLETE ]';
    font-size: 18px;
    color: #00CC55;
    letter-spacing: 3px;
    font-family: 'VT323', monospace;
}

body.theme-pipboy .column-count {
    background: transparent !important;
    border: 1px solid rgba(0, 255, 119, 0.4) !important;
    color: #00FF77 !important;
    border-radius: 0 !important;
}

/* ─── 9. SIDEBAR : separateurs verts fins ═══ ─── */
body.theme-pipboy .sidebar,
body.theme-pipboy #app-sidebar {
    border-right: 2px solid rgba(0, 255, 119, 0.3) !important;
    background: rgba(8, 8, 8, 0.98) !important;
}

body.theme-pipboy .sidebar-nav-item,
body.theme-pipboy .nav-item {
    border-bottom: 1px solid rgba(0, 255, 119, 0.1) !important;
}

body.theme-pipboy .sidebar-nav-item:hover,
body.theme-pipboy .nav-item:hover {
    background: rgba(0, 255, 119, 0.06) !important;
}
body.theme-pipboy .sidebar-nav-item.active,
body.theme-pipboy .nav-item.active {
    background: rgba(0, 255, 119, 0.1) !important;
    border-left: 3px solid #00FF77 !important;
}

/* ─── 10. HEADER : Vault-Tec serial number ─── */
body.theme-pipboy .app-header {
    border-bottom: 2px solid rgba(0, 255, 119, 0.25) !important;
    background: rgba(8, 8, 8, 0.95) !important;
    position: relative !important;
}
body.theme-pipboy .app-header::after {
    content: 'VAULT-TEC IND. // MODEL 3000 // SER. NO. 4077';
    position: absolute;
    bottom: 2px;
    right: 12px;
    font-size: 11px;
    color: rgba(0, 255, 119, 0.15);
    letter-spacing: 2px;
    font-family: 'VT323', monospace;
    text-shadow: none;
    pointer-events: none;
}

/* ─── 11. BOUTONS : touche mecanique ─── */
body.theme-pipboy button,
body.theme-pipboy .btn {
    border: 1px solid rgba(0, 255, 119, 0.5) !important;
    background: linear-gradient(180deg, rgba(0, 255, 119, 0.1), rgba(0, 255, 119, 0.02)) !important;
    color: #00FF77 !important;
    box-shadow: 0 3px 0 rgba(0, 80, 40, 0.5) !important;
    transition: all 0.08s ease !important;
}
body.theme-pipboy button:hover,
body.theme-pipboy .btn:hover {
    background: rgba(0, 255, 119, 0.85) !important;
    color: #080808 !important;
    text-shadow: none !important;
}
body.theme-pipboy button:active,
body.theme-pipboy .btn:active {
    transform: translateY(3px) !important;
    box-shadow: 0 0 0 transparent !important;
}

/* ─── 12. INPUTS ─── */
body.theme-pipboy input,
body.theme-pipboy textarea,
body.theme-pipboy select {
    background: rgba(0, 255, 119, 0.03) !important;
    border: 1px solid rgba(0, 255, 119, 0.25) !important;
    color: #00FF77 !important;
    caret-color: #00FF77 !important;
}
body.theme-pipboy input::placeholder,
body.theme-pipboy textarea::placeholder {
    color: rgba(0, 255, 119, 0.25) !important;
}

/* ─── 13. MODALS ─── */
body.theme-pipboy .modal-box,
body.theme-pipboy .modal-content {
    border: 1px solid rgba(0, 255, 119, 0.35) !important;
    background: rgba(8, 8, 8, 0.97) !important;
}

/* ─── 14. PROJECT DROPDOWN, BADGES, LINKS ─── */
body.theme-pipboy .project-dropdown-btn {
    background: transparent !important;
    border: 1px solid rgba(0, 255, 119, 0.25) !important;
    color: #00FF77 !important;
}
body.theme-pipboy .project-dropdown-list {
    background: rgba(8, 8, 8, 0.97) !important;
    border: 1px solid rgba(0, 255, 119, 0.25) !important;
}
body.theme-pipboy .pf-option.active {
    background: rgba(0, 255, 119, 0.1) !important;
}
body.theme-pipboy a { color: #00FF77 !important; }
body.theme-pipboy a:hover { color: #44FFAA !important; }

/* ─── 15. SCROLLBAR ─── */
body.theme-pipboy ::-webkit-scrollbar { width: 5px; }
body.theme-pipboy ::-webkit-scrollbar-track { background: #080808; }
body.theme-pipboy ::-webkit-scrollbar-thumb { background: rgba(0, 255, 119, 0.2); border-radius: 0; }

/* ─── 16. MENU DROPDOWN ─── */
body.theme-pipboy .menu-dropdown {
    background: rgba(8, 8, 8, 0.97) !important;
    border: 1px solid rgba(0, 255, 119, 0.3) !important;
}

/* ─── 17. FLICKER CRT ─── */
@keyframes pipboy-flicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 0.92; }
    93% { opacity: 1; }
    95% { opacity: 0.88; }
    96% { opacity: 1; }
}
body.theme-pipboy .main-content {
    animation: pipboy-flicker 8s infinite !important;
}

/* FORCE filter bar align left */
.user-filter-bar { margin-left: 0 !important; margin-right: auto !important; }


/* ======================================================
   STRUCTURAL FIX — Module Textarea Height Protection
   Prevents global !important rules from collapsing
   module-specific textareas that rely on rows attribute.
   
   RULE: Any textarea with a specific module class should
   always have a visible minimum height. This prevents the
   global "textarea { ... !important }" reset from making
   textareas invisible/collapsed.
   ====================================================== */

/* --- PsychoAudit Journal --- */
.pa-prompt-input,
textarea.pa-prompt-input {
    min-height: 90px !important;
    height: auto !important;
    box-shadow: none !important;
}

/* --- Academy / Editor textareas --- */
.ec-html-textarea,
.ec-field-textarea,
.ec-exercise-textarea,
textarea.ec-html-textarea,
textarea.ec-field-textarea,
textarea.ec-exercise-textarea {
    min-height: 60px !important;
    height: auto !important;
    box-shadow: none !important;
}

/* --- Learning Paths --- */
.lp-textarea,
textarea.lp-textarea {
    min-height: 60px !important;
    height: auto !important;
    box-shadow: none !important;
}

/* --- Resources AI --- */
.ra-textarea,
textarea.ra-textarea {
    min-height: 80px !important;
    height: auto !important;
    box-shadow: none !important;
}

/* --- Community Wiki / Formation community --- */
.cw-textarea,
.ga-com-modal-ta,
textarea.cw-textarea,
textarea.ga-com-modal-ta {
    min-height: 120px !important;
    height: auto !important;
    box-shadow: none !important;
}

/* --- Automations --- */
.auto-input,
textarea.auto-input {
    min-height: 60px !important;
    height: auto !important;
    box-shadow: none !important;
}

/* --- Generic module protection: any textarea with rows attribute 
       should respect at least rows×20px as min-height ---*/
textarea[rows="2"] { min-height: 56px !important; height: auto !important; }
textarea[rows="3"] { min-height: 80px !important; height: auto !important; }
textarea[rows="4"] { min-height: 100px !important; height: auto !important; }
textarea[rows="5"] { min-height: 120px !important; height: auto !important; }
textarea[rows="6"] { min-height: 144px !important; height: auto !important; }
textarea[rows="10"] { min-height: 230px !important; height: auto !important; }

/* Ensure box-shadow doesn't create visual glitches on module textareas.
   The global relief shadow (0 1px 0 rgba(0,0,0,.15) inset) is subtle 
   but can cause border rendering issues. Module textareas opt-out. */
[class*="-input"]:not(.form-input):not(.modal-input),
[class*="-textarea"]:not(.modal-textarea),
[class*="-ta"]:not(.modal-textarea) {
    box-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL PREMIUM READABILITY — v2602230702
   Amélioration systématique de toutes les sections similaires aux cartes
   psycho-audit: contraste, spacing, hover effects, section headers.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Boost de contraste global — textes secondaires hardcodés trop faibles ── */
/* Cible les modules qui hardcodent rgba(255,255,255,0.3/0.35) */
.aic-empty, .aic-loading-msg {
    color: rgba(255,255,255,0.52) !important;
}
.aic-summary-text {
    color: rgba(255,255,255,0.60) !important;
}

/* ─── 2. Cards universelles — amélioration border + hover ────────────────────── */
/* Améliore tous les éléments avec class *-card dans les modules majeurs */
.stats-kpi-card,
.ga-stat-card,
.ga-kpi-card {
    border: 1px solid rgba(255,255,255,0.11) !important;
    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.28s ease, border-color 0.22s ease !important;
}
.stats-kpi-card:hover,
.ga-stat-card:hover,
.ga-kpi-card:hover {
    transform: translateY(-5px) !important;
    border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45) !important;
}
/* Barres d'accent dans les KPI cards — épaisseur 5px minimum */
.stats-kpi-card::before { height: 5px !important; }

/* ─── 3. Section headers — standardisation premium ───────────────────────────── */
/* Tous les headers de section qui ressemblent au pattern psycho-audit */
.pa-therapy-header h2,
.pa-library-header h2,
.pa-programs-header h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
}
.pa-therapy-header p,
.pa-library-header p,
.pa-programs-header p {
    color: rgba(255,255,255,0.58);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 4px;
}

/* ─── 4. Daily routine slots — amélioration lisibilité ──────────────────────── */
.pa-daily-slot {
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    background: rgba(255,255,255,0.04) !important;
    transition: all 0.25s ease !important;
    gap: 14px !important;
}
.pa-daily-slot:hover {
    background: rgba(255,255,255,0.07) !important;
    border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
.pa-daily-time {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--accent-light) !important;
    white-space: nowrap !important;
    letter-spacing: 0.3px !important;
}
.pa-daily-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
}
.pa-daily-reason {
    font-size: 12px !important;
    color: rgba(255,255,255,0.55) !important;
    margin-top: 3px !important;
    line-height: 1.4 !important;
}
.pa-daily-arrow {
    font-size: 18px !important;
    color: rgba(255,255,255,0.25) !important;
    transition: all 0.2s !important;
}
.pa-daily-slot:hover .pa-daily-arrow {
    color: rgba(255,255,255,0.8) !important;
    transform: translateX(4px) !important;
}

/* ─── 5. Category headers — amélioration ────────────────────────────────────── */
.pa-category-header {
    border: 1px solid rgba(255,255,255,0.10) !important;
    padding: 16px 20px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 16px !important;
    border-left: 3px solid transparent !important;
}
.pa-category-icon { font-size: 28px !important; }
.pa-category-info h3 { font-size: 16px !important; font-weight: 800 !important; }
.pa-category-info p { font-size: 13px !important; color: rgba(255,255,255,0.55) !important; }

/* ─── 6. Back button — plus visible ─────────────────────────────────────────── */
.pa-back-btn {
    background: rgba(167,139,250,0.1) !important;
    border: 1px solid rgba(167,139,250,0.25) !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    transition: all 0.2s !important;
}
.pa-back-btn:hover {
    background: rgba(167,139,250,0.2) !important;
    border-color: rgba(167,139,250,0.5) !important;
    transform: translateX(-2px) !important;
}

/* ─── 7. Evidence box dans détail exercice ───────────────────────────────────── */
.pa-ex-evidence-box {
    border: 1px solid rgba(34,197,94,0.18) !important;
    background: rgba(34,197,94,0.06) !important;
    border-radius: 16px !important;
    padding: 20px !important;
}
.pa-ex-evidence-box h3 { font-size: 15px !important; font-weight: 700 !important; }
.pa-evidence-text { font-size: 14px !important; line-height: 1.6 !important; color: rgba(255,255,255,0.72) !important; }

/* ─── 8. Step cards dans détail exercice ────────────────────────────────────── */
.pa-step-card {
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    background: rgba(255,255,255,0.03) !important;
    transition: all 0.2s !important;
}
.pa-step-card:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
    background: color-mix(in srgb, var(--accent) 5%, transparent) !important;
}
.pa-step-number {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, var(--accent-light), var(--accent)) !important;
    color: #fff !important;
    flex-shrink: 0 !important;
}
.pa-step-body h4 { font-size: 15px !important; font-weight: 700 !important; }
.pa-step-body p  { font-size: 13px !important; color: rgba(255,255,255,0.62) !important; line-height: 1.55 !important; }
.pa-step-dur     { font-size: 12px !important; color: rgba(255,255,255,0.5) !important; font-weight: 600 !important; }

/* ─── Supprimer le cadre doré sous .projects-nav ────────────────────────────── */
#view-tasks .projects-nav {
    background: transparent !important;
    border-bottom: none !important;
}

/* =======================================================================
   GLOBAL CARD DESIGN FIX — v1.0 · Feb 2026
   Prevents white hover rectangles on card inner elements.
   Applies to all card-like components across the entire app.
   ======================================================================= */

/* Block premium-enhancements ripple/transform inside card containers */
[class*="-card"] button,
[class*="-card"] .btn,
[class*="card-footer"],
[class*="card-action"],
[class*="card-open"],
[class*="card-link"] {
    transform: none !important;
}
[class*="-card"] button::before,
[class*="-card"] .btn::before {
    display: none !important;
}

/* Text elements inside hub cards: no accidental global hover backgrounds */
.mh-card > *,
.stat-card > *,
.feature-card > *,
.module-card > * {
    background-color: transparent;
}

/* Section titles across the app: no unwanted border or line */
.mh-section-title,
[class*="section-title"],
[class*="-section-label"] {
    border-bottom: none !important;
    border-top: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* =======================================================================
   GLOBAL HOVER SPEED FIX — Feb 2026
   --transition-premium était à 0.4s → trop lent, effet bug
   ======================================================================= */
:root {
    --transition-premium: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce:  all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════════════════════════════════════════════
   RÈGLE FINALE — chatbot-fab masqué définitivement
   Remplacé par maha-orb. NE PAS MODIFIER.
   ═══════════════════════════════════════════════════ */
.chatbot-fab,
#chatbot-toggle,
body .chatbot-fab,
body.logged-in .chatbot-fab,
body.logged-in #chatbot-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* ══════════════════════════════════════════════
   PONTS & PASSERELLES — CRM Quick Actions
══════════════════════════════════════════════ */
.crm-quick-actions {
    display: flex;
    gap: 8px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-wrap: wrap;
}

.crm-qa-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: var(--text, #ccc);
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.15s;
    flex-shrink: 0;
}
.crm-qa-btn:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.22);
    transform: translateY(-1px);
}
.crm-qa-btn:active { transform: translateY(0); }

.crm-qa-mail { border-color: rgba(99,179,237,0.35); }
.crm-qa-mail:hover { background: rgba(99,179,237,0.12); border-color: rgba(99,179,237,0.5); color: #90cdf4; }
.crm-qa-mail svg { stroke: #90cdf4; }

.crm-qa-task { border-color: rgba(154,230,160,0.35); }
.crm-qa-task:hover { background: rgba(154,230,160,0.10); border-color: rgba(154,230,160,0.5); color: #9ae6b4; }
.crm-qa-task svg { stroke: #9ae6b4; }

.crm-qa-cal { border-color: rgba(246,173,85,0.35); }
.crm-qa-cal:hover { background: rgba(246,173,85,0.10); border-color: rgba(246,173,85,0.5); color: #f6ad55; }
.crm-qa-cal svg { stroke: #f6ad55; }

/* ══════════════════════════════════════════════
   PONTS — Mail → Tâche (bouton dans mail-detail)
══════════════════════════════════════════════ */
.mail-bridge-bar {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.02);
    flex-wrap: wrap;
}

.mail-bridge-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary, #aaa);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mail-bridge-btn:hover {
    background: rgba(255,255,255,0.09);
    color: var(--text, #ddd);
    border-color: rgba(255,255,255,0.2);
}

/* ══════════════════════════════════════════════
   PONTS — Tasks → Calendar (bouton dans task bubble)
══════════════════════════════════════════════ */
.task-bridge-cal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 12px;
    border: 1px solid rgba(246,173,85,0.25);
    background: transparent;
    color: rgba(246,173,85,0.7);
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin-top: 4px;
}
.task-bridge-cal:hover {
    background: rgba(246,173,85,0.12);
    color: #f6ad55;
    border-color: rgba(246,173,85,0.5);
}

/* Task → Timer bridge button */
.task-bridge-timer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 12px;
    border: 1px solid rgba(160,210,255,0.25);
    background: transparent;
    color: rgba(160,210,255,0.7);
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin-top: 4px;
}
.task-bridge-timer:hover {
    background: rgba(99,179,237,0.12);
    color: #90cdf4;
    border-color: rgba(99,179,237,0.5);
}

/* ══════════════════════════════════════════════
   BRIDGES — Tunnel Club Leads table
══════════════════════════════════════════════ */
.tc-bridge-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 16px;
    border: 1px solid rgba(99,102,241,0.4);
    background: rgba(99,102,241,0.08);
    color: #a5b4fc;
    font-size: 0.76rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tc-bridge-btn:hover {
    background: rgba(99,102,241,0.18);
    color: #c7d2fe;
    border-color: rgba(99,102,241,0.6);
}
.tc-bridge-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Lead action buttons (mail / crm individuel) */
.tc-lead-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-muted, #aaa);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
}
.tc-lead-action:hover { background: rgba(255,255,255,0.10); color: var(--text, #ddd); }
.tc-lead-action.tc-lead-mail:hover { background: rgba(99,179,237,0.12); color: #90cdf4; border-color: rgba(99,179,237,0.3); }
.tc-lead-action.tc-lead-crm:hover  { background: rgba(99,102,241,0.12); color: #a5b4fc; border-color: rgba(99,102,241,0.3); }
.tc-lead-action:disabled { opacity: 0.45; cursor: default; }

/* Notes bridge buttons — now use standard .toolbar-btn styling (icon-only with tooltip) */

/* ══════════════════════════════════════════════
   BRIDGES — Journal history → Tâche
══════════════════════════════════════════════ */
.jv2-hist-bridge-task {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(154,230,160,0.25);
    background: transparent;
    color: rgba(154,230,160,0.7);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.jv2-hist-bridge-task:hover {
    background: rgba(154,230,160,0.12);
    color: #9ae6b4;
    border-color: rgba(154,230,160,0.4);
}
.jv2-hist-bridge-task:disabled {
    opacity: 0.5;
    cursor: default;
}


/* ══════════════════════════════════════════════════════════
   APP MAP v2.0 — Vue Galaxie
   2026-03-01
══════════════════════════════════════════════════════════ */

/* Root */
#view-app-map {
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}
.am2-root {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    background: #060610;
    color: #e2e8f0;
    font-family: inherit;
    overflow: hidden;
}

/* Topbar */
.am2-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(99,102,241,0.15);
    background: rgba(6,6,16,0.95);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    z-index: 10;
}
.am2-logo { font-size: 22px; line-height: 1; }
.am2-topbar-info { flex: 1; display: flex; align-items: baseline; gap: 8px; }
.am2-title { font-size: 16px; font-weight: 700; color: #e2e8f0; }
.am2-subtitle { font-size: 12px; color: #475569; }
.am2-topbar-actions { display: flex; gap: 6px; }
.am2-btn-mode {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.am2-btn-mode:hover { background: rgba(255,255,255,0.05); color: #e2e8f0; }
.am2-btn-mode.active {
    background: rgba(99,102,241,0.2);
    border-color: rgba(99,102,241,0.5);
    color: #818cf8;
}

/* Galaxy canvas wrap */
.am2-canvas-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 400px;
}
#am2-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
#am2-nodes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Module nodes */
.am2-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    pointer-events: all;
    transition: transform 0.2s, opacity 0.2s;
    z-index: 2;
}
.am2-node-inner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(13,13,26,0.9);
    border: 2px solid var(--mod-color, #666);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 16px -4px var(--mod-color, #666), inset 0 0 10px rgba(0,0,0,0.5);
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.am2-node-center .am2-node-inner {
    width: 58px;
    height: 58px;
    border-width: 2px;
    box-shadow: 0 0 30px -4px var(--mod-color, #94a3b8), 0 0 60px -20px var(--mod-color, #94a3b8);
}
.am2-node:hover .am2-node-inner {
    transform: scale(1.12);
    box-shadow: 0 0 24px -2px var(--mod-color, #666), inset 0 0 10px rgba(0,0,0,0.3);
}
.am2-node-icon { font-size: 18px; line-height: 1; }
.am2-node-center .am2-node-icon { font-size: 24px; }
.am2-node-label {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    letter-spacing: 0.3px;
    transition: color 0.2s;
}
.am2-node:hover .am2-node-label { color: #e2e8f0; }
.am2-node-dot {
    position: absolute;
    top: 2px; right: 2px;
    width: 7px; height: 7px;
    border-radius: 50%;
    border: 1.5px solid rgba(6,6,16,0.9);
}
.am2-node-dot.on  { background: #34d399; }
.am2-node-dot.off { background: #f87171; }

/* Selected / dimmed states */
.am2-node-selected .am2-node-inner {
    border-width: 3px;
    box-shadow: 0 0 32px -2px var(--mod-color, #666), 0 0 60px -10px var(--mod-color, #666);
    transform: scale(1.18);
}
.am2-node-selected .am2-node-label { color: #fff; font-weight: 700; }
.am2-node-dimmed { opacity: 0.2; }
.am2-node-dimmed .am2-node-inner { box-shadow: none; }

/* Detail panel */
.am2-panel {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100% - 32px));
    z-index: 20;
    animation: am2PanelIn 0.22s cubic-bezier(0.34,1.4,0.64,1);
}
@keyframes am2PanelIn {
    from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.am2-panel-inner {
    background: rgba(12,12,24,0.97);
    border: 1px solid var(--mod-color, #334155);
    border-radius: 16px;
    padding: 18px 20px 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 30px -10px var(--mod-color, #334155);
    backdrop-filter: blur(20px);
    position: relative;
}
.am2-panel-close {
    position: absolute;
    top: 12px; right: 14px;
    background: transparent;
    border: none;
    color: #475569;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.15s;
}
.am2-panel-close:hover { color: #e2e8f0; }
.am2-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-right: 24px;
}
.am2-panel-icon { font-size: 26px; line-height: 1; }
.am2-panel-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--mod-color, #e2e8f0);
    line-height: 1.2;
}
.am2-panel-file {
    font-family: monospace;
    font-size: 10px;
    color: #475569;
    margin-top: 2px;
}
.am2-panel-status {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.am2-panel-status.on  { background: rgba(52,211,153,0.12); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
.am2-panel-status.off { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.25); }
.am2-panel-section { margin-bottom: 12px; }
.am2-panel-section:last-child { margin-bottom: 0; }
.am2-panel-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #475569;
    margin-bottom: 6px;
}
.am2-panel-api {
    font-size: 10px;
    font-family: monospace;
    padding: 4px 8px;
    background: rgba(0,0,0,0.35);
    border-radius: 5px;
    color: #34d399;
    margin-bottom: 3px;
}
.am2-panel-bridge {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 11px;
    flex-wrap: wrap;
}
.am2-panel-bridge:last-child { border-bottom: none; }
.am2-pb-mod { font-weight: 700; font-size: 11px; white-space: nowrap; }
.am2-pb-label { color: #cbd5e1; flex-shrink: 0; }
.am2-pb-trigger { color: #f6ad55; font-size: 10px; font-style: italic; }

/* ── List view ── */
.am2-list-view {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
.am2-list-inner { max-width: 1000px; margin: 0 auto; }
.am2-list-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #475569;
    margin-bottom: 14px;
}
.am2-list-mods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.am2-list-mod {
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 3px solid var(--mod-color, #888);
    padding: 12px;
    background: rgba(255,255,255,0.02);
}
.am2-list-mod-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #e2e8f0;
}
.am2-list-mod-dot.on  { color: #34d399; }
.am2-list-mod-dot.off { color: #f87171; }
.am2-list-mod-file {
    font-family: monospace;
    font-size: 9px;
    color: #475569;
    margin-bottom: 6px;
    word-break: break-all;
}
.am2-list-mod-api {
    font-family: monospace;
    font-size: 10px;
    color: #34d399;
    padding: 2px 6px;
    background: rgba(0,0,0,0.25);
    border-radius: 4px;
    margin-bottom: 2px;
}
.am2-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    overflow: hidden;
}
.am2-list-table th {
    padding: 8px 12px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #475569;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.am2-list-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
}
.am2-list-table tr:last-child td { border-bottom: none; }
.am2-list-table tr:hover td { background: rgba(255,255,255,0.02); }
.am2-list-num { color: #334155; width: 28px; text-align: center; }
.am2-list-arrow { color: #334155; width: 20px; text-align: center; }
.am2-list-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}
.am2-list-label { font-weight: 500; }
.am2-list-trigger { font-size: 11px; color: #f6ad55; }

/* ══ GLOBAL — masquer toutes les scrollbars visuelles, scroll molette intact ══ */
html, body, .main-content, .view-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.view-container::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ══ DASHBOARD — réduire glow icône stat-card ══ */
.stat-card .stat-icon {
    filter: drop-shadow(0 0 3px currentColor) !important;
}
.stat-card:hover .stat-icon {
    filter: drop-shadow(0 0 6px currentColor) !important;
}

/* ══ DASHBOARD — espace entre conseil du jour et actions rapides ══ */
#fr-daily-tip-wrap,
.fr-tip-card {
    margin-bottom: 20px !important;
}

/* ══ SIDEBAR — bouton ? visible uniquement au hover ══ */
/* ── Sidebar ? info button — Premium design ── */
.sidebar-item-info {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) scale(0.85);
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--sb-accent, #f5c842) 18%, transparent),
        color-mix(in srgb, var(--sb-accent, #f5c842) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--sb-accent, #f5c842) 30%, transparent);
    color: var(--sb-accent, #f5c842);
    font-size: 9px; font-weight: 800;
    display: none;
    align-items: center; justify-content: center;
    cursor: help;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: all .25s cubic-bezier(.21, 1.02, .73, 1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sb-accent, #f5c842) 0%, transparent);
    text-shadow: 0 0 4px color-mix(in srgb, var(--sb-accent, #f5c842) 40%, transparent);
    line-height: 1;
    letter-spacing: 0;
}
/* Appear on sidebar item hover */
.sidebar-item:hover .sidebar-item-info {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}
/* Glow on ? hover */
.sidebar-item-info:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--sb-accent, #f5c842) 35%, transparent),
        color-mix(in srgb, var(--sb-accent, #f5c842) 18%, transparent));
    border-color: color-mix(in srgb, var(--sb-accent, #f5c842) 50%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--sb-accent, #f5c842) 30%, transparent);
    transform: translateY(-50%) scale(1.1);
}
/* No more ::after tooltip — handled by global Tooltips system */

/* Hide ? in collapsed sidebar */
.sidebar.collapsed .sidebar-item-info {
    display: none !important;
}

/* ══ SIDEBAR — Grille Outils (popup) ══ */
.sb-tg-dots {
    margin-left: auto;
    opacity: .4;
    transition: opacity .15s;
}
[data-id="toolsGrid"]:hover .sb-tg-dots { opacity: .8; }

.sb-tools-grid-panel {
    position: fixed;
    left: var(--sidebar-width, 260px);
    bottom: 60px;
    width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
    padding: 16px;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px) scale(.97);
    transition: opacity .2s, transform .2s, visibility .2s;
    pointer-events: none;
}
.sb-tools-grid-panel.sb-tools-grid--open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}
/* Quand sidebar collapsed */
body.sidebar-collapsed .sb-tools-grid-panel {
    left: 72px;
}

.sb-tg-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-tertiary, #71717a);
    margin-bottom: 12px;
    padding: 0 4px;
}

.sb-tg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.sb-tg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s, transform .1s;
    color: var(--text-secondary, #a1a1aa);
}
.sb-tg-item:hover {
    background: color-mix(in srgb, var(--accent, #8b5cf6) 12%, transparent);
    transform: scale(1.05);
    color: var(--text-primary, #fafafa);
}
.sb-tg-item:active {
    transform: scale(.96);
}
.sb-tg-emoji {
    font-size: 22px;
    line-height: 1;
}
.sb-tg-label {
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 64px;
}

/* Scrollbar fine */
.sb-tools-grid-panel::-webkit-scrollbar { width: 4px; }
.sb-tools-grid-panel::-webkit-scrollbar-track { background: transparent; }
.sb-tools-grid-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

/* ===== TEAM VISION — Avatar fix (build 2603020205) ===== */
.tv-member-card {
    gap: 8px;
    padding: 14px 18px;
    border-radius: 16px;
    min-width: 88px;
}

.tv-member-avatar {
    width: 56px;
    height: 56px;
    overflow: hidden;
}

/* Hide gradient when a real photo is present */
.tv-member-avatar:has(.tv-member-img) {
    background: none;
}

.tv-member-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
}

.tv-member-initials {
    font-size: 18px;
}

.tv-member-status {
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    z-index: 2;
}

.tv-member-name {
    font-size: 12px;
    max-width: 80px;
}

/* ═══════════════════════════════════════════════════════
   TUNNEL CLUB v4 — REDESIGN ULTRA-ÉPURÉ (build 2603020210)
   Hero solaire central + cartes compactes horizontales
   ═══════════════════════════════════════════════════════ */

/* ── Force tunnel club hidden when not active ── */
#view-tunnel-club:not(.active) { display: none !important; }

/* ── Reset old TC styles when v4 is active ── */
.tc-v4 .tc-stats-grid,
.tc-v4 .tc-tunnel-card-create,
.tc-v4 .tc-tunnel-card,
.tc-v4 .tc-section-header,
.tc-v4 .tc-filters,
.tc-v4 .tc-tunnels-grid { display: none !important; }

/* ── HEADER v4 ── */
.tc-header-v4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 24px;
}

.tc-header-v4-left { display: flex; align-items: center; gap: 14px; }

/* Boule dorée — logo image */
.tc-goldball {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(212,175,55,.35);
}

/* Titre style Tâches — gros, bold, clean */
.tc-title-v4 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
    letter-spacing: -0.5px;
    margin: 0;
}

/* ── Menu ··· ── */
.tc-menu-wrap { position: relative; }

.tc-menu-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}

.tc-menu-btn:hover {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.8);
}

.tc-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: #16161f;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,.4);
    opacity: 0;
    transform: translateY(-8px) scale(.96);
    pointer-events: none;
    transition: all .15s ease;
    z-index: 100;
}

.tc-menu-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.tc-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    color: rgba(255,255,255,.7);
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
    text-align: left;
}

.tc-menu-item:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

/* ═══════════════════════════════════════════
   HERO SOLAIRE CENTRAL
   ═══════════════════════════════════════════ */

.tc-hero-v4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px 44px;
    text-align: center;
    position: relative;
}

/* ── Animations d'entrée (cinématique) ── */
@keyframes tc-enter-sun {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.12); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

@keyframes tc-enter-text {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes tc-enter-glow {
    0%   { opacity: 0; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}

/* ── Soleil ── */
.tc-sun {
    position: relative;
    width: 130px;
    height: 130px;
    cursor: pointer;
    margin-bottom: 28px;
    transition: transform .3s cubic-bezier(0.34,1.56,0.64,1);
    animation: tc-enter-sun .8s cubic-bezier(0.34,1.56,0.64,1) both;
}

.tc-sun:hover {
    transform: scale(1.08);
}

.tc-sun:active {
    transform: scale(0.96);
}

/* Rayons rotatifs */
.tc-sun-rays {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(212,175,55,.0) 0deg,
        rgba(212,175,55,.18) 30deg,
        rgba(212,175,55,.0) 60deg,
        rgba(212,175,55,.18) 90deg,
        rgba(212,175,55,.0) 120deg,
        rgba(212,175,55,.18) 150deg,
        rgba(212,175,55,.0) 180deg,
        rgba(212,175,55,.18) 210deg,
        rgba(212,175,55,.0) 240deg,
        rgba(212,175,55,.18) 270deg,
        rgba(212,175,55,.0) 300deg,
        rgba(212,175,55,.18) 330deg,
        rgba(212,175,55,.0) 360deg
    );
    animation: tc-enter-glow 1.2s ease .3s both, tc-rays-rotate 20s linear infinite;
    opacity: .8;
}

@keyframes tc-rays-rotate {
    to { transform: rotate(360deg); }
}

/* Halo lumineux */
.tc-sun-halo {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(212,175,55,.25) 0%,
        rgba(212,175,55,.08) 50%,
        transparent 70%
    );
    animation: tc-halo-pulse 3s ease-in-out infinite;
}

@keyframes tc-halo-pulse {
    0%, 100% { transform: scale(1); opacity: .7; }
    50% { transform: scale(1.15); opacity: 1; }
}

/* Anneaux orbitaux */
.tc-sun-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(212,175,55,.15);
    pointer-events: none;
    animation: tc-ring-spin 12s linear infinite;
}

.tc-sun-ring-1 {
    inset: -18px;
    border-color: rgba(212,175,55,.12);
    animation-duration: 15s;
}

.tc-sun-ring-2 {
    inset: -34px;
    border-color: rgba(212,175,55,.07);
    animation-duration: 22s;
    animation-direction: reverse;
}

@keyframes tc-ring-spin {
    to { transform: rotate(360deg); }
}

/* Particules orbitales dorées */
.tc-sun-orb-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d4af37;
    box-shadow: 0 0 6px rgba(212,175,55,.6);
    z-index: 3;
    pointer-events: none;
}

.tc-sun-dot-1 {
    animation: tc-orbit-1 8s linear infinite;
}

.tc-sun-dot-2 {
    width: 3px;
    height: 3px;
    background: #f0c84a;
    animation: tc-orbit-2 12s linear infinite;
}

.tc-sun-dot-3 {
    width: 4px;
    height: 4px;
    background: #fbbf24;
    box-shadow: 0 0 8px rgba(251,191,36,.5);
    animation: tc-orbit-3 6s linear infinite;
}

@keyframes tc-orbit-1 {
    0%   { top: -14px; left: 50%; }
    25%  { top: 50%;   left: calc(100% + 14px); }
    50%  { top: calc(100% + 14px); left: 50%; }
    75%  { top: 50%;   left: -14px; }
    100% { top: -14px; left: 50%; }
}

@keyframes tc-orbit-2 {
    0%   { top: 50%;   left: calc(100% + 30px); }
    25%  { top: calc(100% + 30px); left: 50%; }
    50%  { top: 50%;   left: -30px; }
    75%  { top: -30px; left: 50%; }
    100% { top: 50%;   left: calc(100% + 30px); }
}

@keyframes tc-orbit-3 {
    0%   { top: calc(100% + 6px); left: 20%; }
    25%  { top: 20%;   left: -6px; }
    50%  { top: -6px;  left: 80%; }
    75%  { top: 80%;   left: calc(100% + 6px); }
    100% { top: calc(100% + 6px); left: 20%; }
}

/* Cercle central — golden ball image */
.tc-sun-core {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 40px rgba(212,175,55,.45),
        0 0 80px rgba(212,175,55,.15),
        0 0 0 3px rgba(10,10,15,.7),
        0 0 0 4px rgba(212,175,55,.2);
    z-index: 2;
    background: #0a0a0f;
}

.tc-sun-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* ── Curseur hint animé (JS-driven interval) ── */
.tc-cursor-hint {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    /* Positionné en bas-droite par défaut, JS anime vers le centre */
    top: 100%;
    left: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tc-cursor-hint.tc-hint-playing {
    animation: tc-cursor-slide 4.5s cubic-bezier(0.25,0.1,0.25,1) forwards;
}
.tc-cursor-hint svg {
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
.tc-cursor-hint-label {
    font-size: 12px;
    font-weight: 800;
    color: #111 !important;
    background: #fff !important;
    padding: 6px 16px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 0 2px rgba(212,175,55,.5);
    letter-spacing: .4px;
    backdrop-filter: blur(8px);
}

@keyframes tc-cursor-slide {
    /* Hors champ, en bas à droite */
    0% {
        opacity: 0;
        top: 110%;
        left: 110%;
        transform: scale(1.1);
    }
    /* Fade-in rapide */
    5% {
        opacity: 1;
        top: 105%;
        left: 105%;
        transform: scale(1);
    }
    /* Glisse en un seul mouvement fluide vers le centre */
    28% {
        opacity: 1;
        top: 50%;
        left: 50%;
        transform: scale(1);
    }
    /* Clic — press */
    38% {
        opacity: 1;
        top: 50%;
        left: 50%;
        transform: scale(0.72);
    }
    /* Relâche douce */
    44% {
        opacity: 1;
        top: 50%;
        left: 50%;
        transform: scale(1.04);
    }
    /* Retour calme */
    50% {
        opacity: 1;
        top: 50%;
        left: 50%;
        transform: scale(1);
    }
    /* Début sortie */
    75% {
        opacity: .6;
        top: 50%;
        left: 50%;
        transform: scale(1);
    }
    /* Glisse vers le bas pour sortir */
    95% {
        opacity: 0;
        top: 110%;
        left: 110%;
        transform: scale(1.05);
    }
    100% {
        opacity: 0;
        top: 110%;
        left: 110%;
        transform: scale(1);
    }
}

/* Ripple synchro — déclenchée par JS via classe */
.tc-sun-core::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(212,175,55,.5);
    opacity: 0;
    z-index: 5;
    pointer-events: none;
}
.tc-sun-core.tc-ripple-playing::after {
    animation: tc-hint-ripple 4.5s ease forwards;
}

@keyframes tc-hint-ripple {
    0%, 37% { transform: scale(1); opacity: 0; }
    38% { transform: scale(1); opacity: .7; }
    55% { transform: scale(2.2); opacity: 0; }
    100% { opacity: 0; }
}

/* Burst animation au clic */
.tc-sun-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.tc-burst-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(212,175,55,.5);
    animation: tc-burst-expand .7s ease-out forwards;
}

.tc-burst-2 { animation-delay: .1s; border-color: rgba(212,175,55,.35); }
.tc-burst-3 { animation-delay: .2s; border-color: rgba(212,175,55,.2); }

@keyframes tc-burst-expand {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(3.5); opacity: 0; }
}

.tc-sun-clicked .tc-sun-core {
    animation: tc-sun-flash .5s ease-out;
}

@keyframes tc-sun-flash {
    0% { box-shadow: 0 0 40px rgba(212,175,55,.4); }
    30% { box-shadow: 0 0 80px rgba(212,175,55,.8), 0 0 160px rgba(212,175,55,.3); transform: scale(1.1); }
    100% { box-shadow: 0 0 40px rgba(212,175,55,.4); transform: scale(1); }
}

/* Loading placeholder */
.tc-hero-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.tc-sun-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(212,175,55,.08);
    animation: tc-halo-pulse 2s ease-in-out infinite;
}

/* ── Hero texte ── */
.tc-hero-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 8px;
    background: linear-gradient(135deg, #f0c84a, #d4af37, #b8942e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: tc-enter-text .6s cubic-bezier(0.4,0,0.2,1) .4s both;
}

.tc-hero-sub {
    font-size: 14px;
    color: rgba(255,255,255,.4);
    margin: 0 0 20px;
    font-weight: 400;
    animation: tc-enter-text .6s cubic-bezier(0.4,0,0.2,1) .55s both;
}

/* ── Stats inline ── */
.tc-stats-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    animation: tc-enter-text .6s cubic-bezier(0.4,0,0.2,1) .7s both;
}

.tc-stat-pill {
    font-size: 12px;
    color: rgba(255,255,255,.35);
    font-weight: 500;
}

.tc-stat-dot {
    color: rgba(255,255,255,.15);
    font-size: 12px;
}

/* ═══════════════════════════════════════════
   SECTION TUNNELS v4
   ═══════════════════════════════════════════ */

.tc-section-v4 {
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: 28px;
}

.tc-section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.tc-section-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tc-section-title-v4 {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,.7);
    margin: 0;
}

.tc-section-count-v4 {
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.5);
    padding: 2px 8px;
    border-radius: 9px;
}

/* Filtres inline */
.tc-filters-v4 {
    display: flex;
    gap: 2px;
    margin-left: 8px;
}

.tc-filter-v4 {
    padding: 4px 12px;
    border: none;
    background: none;
    color: rgba(255,255,255,.35);
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all .12s ease;
}

.tc-filter-v4:hover {
    color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.04);
}

.tc-filter-v4.active {
    color: #d4af37;
    background: rgba(212,175,55,.1);
    font-weight: 600;
}

/* Search */
.tc-search-v4 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    transition: border-color .15s ease;
}

.tc-search-v4:focus-within {
    border-color: rgba(212,175,55,.3);
}

.tc-search-input-v4 {
    border: none;
    background: none;
    color: #e2e8f0;
    font-size: 13px;
    width: 160px;
    outline: none;
}

.tc-search-input-v4::placeholder {
    color: rgba(255,255,255,.25);
}

/* ═══════════════════════════════════════════
   CARTES TUNNEL COMPACTES HORIZONTALES
   ═══════════════════════════════════════════ */

.tc-grid-v4 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 8px;
}

.tc-card-v4 {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    transition: all .15s ease;
    position: relative;
    cursor: pointer;
}

.tc-card-v4:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    transform: translateY(-1px);
}

/* Accent bar gauche */
.tc-card-v4::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    border-radius: 0 3px 3px 0;
    background: var(--cc, #6366f1);
    transition: height .2s ease;
}

.tc-card-v4:hover::before {
    height: 24px;
}

/* Icône */
.tc-card-v4-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cc, #6366f1) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* Body */
.tc-card-v4-body {
    flex: 1;
    min-width: 0;
}

.tc-card-v4-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.tc-card-v4-name {
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status pills */
.tc-status-v4 {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tc-status-published {
    background: rgba(16,185,129,.12);
    color: #34d399;
}

.tc-status-draft {
    background: rgba(100,116,139,.12);
    color: #94a3b8;
}

.tc-status-paused {
    background: rgba(245,158,11,.12);
    color: #fbbf24;
}

/* Meta line */
.tc-card-v4-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,.35);
}

.tc-meta-sep { color: rgba(255,255,255,.15); }

.tc-card-v4-url {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 11px;
    color: rgba(255,255,255,.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* Actions (visible au hover) */
.tc-card-v4-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s ease;
    flex-shrink: 0;
}

.tc-card-v4:hover .tc-card-v4-actions {
    opacity: 1;
}

.tc-card-act {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .12s ease;
}

.tc-card-act:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
    border-color: rgba(255,255,255,.15);
}

/* ── Card dropdown ── */
.tc-card-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 16px;
    min-width: 160px;
    background: #1a1a25;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: all .12s ease;
    z-index: 50;
}

.tc-card-dropdown.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.tc-dd-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    color: rgba(255,255,255,.7);
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background .1s ease;
}

.tc-dd-item:hover { background: rgba(255,255,255,.08); }
.tc-dd-danger { color: #f87171; }
.tc-dd-danger:hover { background: rgba(239,68,68,.1); }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .tc-grid-v4 {
        grid-template-columns: 1fr;
    }

    .tc-card-v4-actions {
        opacity: 1;
    }

    .tc-section-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .tc-section-bar-left {
        flex-wrap: wrap;
    }

    .tc-filters-v4 {
        margin-left: 0;
    }

    .tc-sun {
        width: 100px;
        height: 100px;
    }

    .tc-sun-rays { inset: -24px; }
    .tc-sun-halo { inset: -16px; }
}

/* === BOOKING — Stripe Connect Alert === */
.bk-stripe-alert {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
    color: #92400e;
}
.bk-stripe-alert-icon { font-size: 24px; flex-shrink: 0; }
.bk-stripe-alert-text { flex: 1; }
.bk-stripe-alert-text strong { display: block; margin-bottom: 4px; color: #78350f; }
.bk-stripe-alert-text p { margin: 0; font-size: 13px; line-height: 1.4; }
.bk-stripe-setup-btn { flex-shrink: 0; white-space: nowrap; }

/* Booking public — payment Stripe styles */
.bkp-payment-stripe {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border: 1px solid #8b5cf6;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    color: #5b21b6;
}

/* ═══════════════════════════════════════════════════
   LOGIN PAGE FIXES — icon overlap + button display
   ═══════════════════════════════════════════════════ */

/* Icône input : masquer au focus et quand le champ est rempli */
.auth-input-icon {
    transition: color 0.3s ease, opacity 0.25s ease;
    z-index: 1;
}

.auth-input-wrapper:focus-within .auth-input-icon {
    opacity: 0 !important;
}

.auth-input-wrapper:has(input:not(:placeholder-shown)) .auth-input-icon {
    opacity: 0 !important;
}

/* Input text : meilleure lisibilité + padding ajusté quand icône masquée */
.auth-inputs input {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

.auth-inputs input:focus,
.auth-inputs input:not(:placeholder-shown) {
    padding-left: 18px !important;
}

/* Autofill : aussi ajuster le padding + couleur */
.auth-inputs input:-webkit-autofill,
.auth-inputs input:-webkit-autofill:hover,
.auth-inputs input:-webkit-autofill:focus {
    -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
    padding-left: 18px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

/* Bouton SE CONNECTER : z-index pour le texte et la flèche au-dessus du shine */
.auth-btn {
    min-height: 54px;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1;
    white-space: nowrap;
}

.auth-btn-text {
    position: relative;
    z-index: 1;
}

.auth-btn-arrow {
    position: relative;
    z-index: 1;
}

.auth-btn::before {
    z-index: 0;
}

/* ══════════════════════════════════════════════════════════════
   MAHA CREATOR — Click-to-Edit
   ══════════════════════════════════════════════════════════════ */

/* Editable elements — hover glow */
#mc-preview-frame [data-editable]:hover {
    outline: 2px dashed rgba(99,102,241,0.45) !important;
    outline-offset: 3px !important;
    border-radius: 8px;
    transition: outline 0.15s ease;
}

/* Selected element — solid border */
#mc-preview-frame [data-editable].mc-edit-selected {
    outline: 2px solid #6366f1 !important;
    outline-offset: 3px !important;
    border-radius: 8px;
}

/* Edit panel input focus */
#mc-edit-panel input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

/* Quick-action buttons hover */
#mc-edit-panel .mc-edit-quick:hover {
    background: rgba(99,102,241,0.2) !important;
    border-color: rgba(99,102,241,0.4) !important;
}

/* Submit button hover */
#mc-edit-panel #mc-edit-submit:hover {
    background: #4f46e5 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}

/* Loading dots in edit panel */
#mc-edit-panel .mc-loading-dots {
    display: inline-flex; gap: 3px; align-items: center;
}
#mc-edit-panel .mc-loading-dots span {
    width: 5px; height: 5px; background: #fff; border-radius: 50%;
    animation: mc-dot-pulse 1s ease-in-out infinite;
}
#mc-edit-panel .mc-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
#mc-edit-panel .mc-loading-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes mc-dot-pulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* ── MahaCreator Section System ── */

/* Section toolbar — subtle, visible on hover */
.mc-sec-toolbar {
    opacity: 0 !important;
    transition: opacity .2s !important;
}
.mc-sec-toolbar:hover {
    opacity: 1 !important;
}

/* "+" add section row — glow on hover */
.mc-add-section-row {
    opacity: 0 !important;
    transition: opacity .25s !important;
}
.mc-add-section-row:hover {
    opacity: 1 !important;
}
.mc-add-section-btn:hover {
    background: rgba(99,102,241,0.25) !important;
    border-color: rgba(99,102,241,0.6) !important;
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(99,102,241,0.3);
}

/* Section picker modal items */
.mc-sp-item:hover {
    border-color: rgba(99,102,241,0.4) !important;
    background: rgba(99,102,241,0.08) !important;
    transform: translateY(-1px);
}

/* Move/delete buttons in toolbar */
.mc-sec-move:hover { color: #a5b4fc !important; }
.mc-sec-delete:hover { color: #f87171 !important; background: rgba(239,68,68,0.1); border-radius: 4px; }

/* Section picker backdrop blur */
.mc-sp-backdrop {
    backdrop-filter: blur(4px);
}

/* Image result buttons */
.mc-img-result-btns { display: flex; gap: 6px; margin-top: 8px; }

/* ── Template Gallery — Tunnel Club ── */
.tc-templates-section {
    padding: 0 24px 24px;
    max-width: 1200px;
    margin: 0 auto;
}
.tc-templates-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.tc-templates-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text, #eee);
    margin: 0 0 4px;
}
.tc-templates-sub {
    font-size: 13px;
    color: var(--text-secondary, #888);
    margin: 0;
}
.tc-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.tc-tpl-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
}
.tc-tpl-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tpl-color, #6366f1), transparent);
    opacity: 0;
    transition: opacity .2s;
}
.tc-tpl-card:hover {
    border-color: color-mix(in srgb, var(--tpl-color, #6366f1) 40%, transparent);
    background: rgba(255,255,255,0.05);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.tc-tpl-card:hover::before { opacity: 1; }
.tc-tpl-icon {
    font-size: 28px; margin-bottom: 0; height: 100px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tpl-color,#6366f1) 20%, #0a0a1a), color-mix(in srgb, var(--tpl-color,#6366f1) 8%, #12121f));
    border: 1px solid color-mix(in srgb, var(--tpl-color,#6366f1) 15%, transparent);
    position: relative; overflow: hidden;
}
.tc-tpl-icon::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 28px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--tpl-color,#6366f1) 40%, transparent), color-mix(in srgb, var(--tpl-color,#6366f1) 15%, transparent));
    border-radius: 10px 10px 0 0;
}
.tc-tpl-icon::after {
    content: ''; position: absolute; bottom: 12px; left: 16px; right: 16px; height: 8px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--tpl-color,#6366f1) 30%, transparent), transparent 70%);
    border-radius: 4px;
}
.tc-tpl-body { margin-top: 14px; }
.tc-tpl-name { font-size: 15px; font-weight: 700; color: var(--text, #fff); margin-bottom: 2px; }
.tc-tpl-niche {
    font-size: 11px; font-weight: 600; letter-spacing: 1px;
    text-transform: uppercase; color: var(--tpl-color, #6366f1); margin-bottom: 8px;
}
.tc-tpl-desc {
    font-size: 12px; color: var(--text-secondary, #888); line-height: 1.5; margin-bottom: 14px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tc-tpl-cta { display: flex; justify-content: flex-end; }
.tc-tpl-btn {
    font-size: 12px; font-weight: 600; color: var(--tpl-color, #6366f1);
    opacity: 0.6; transition: opacity .15s;
}
.tc-tpl-card:hover .tc-tpl-btn { opacity: 1; }

/* ── MahaCreator Cinema Template Carousel ───────────────────────────── */
.mc-cinema-wrap {
    margin: 12px 0 8px;
    padding: 0;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s ease, transform .3s ease;
    animation: mc-cinema-enter .5s cubic-bezier(.16,1,.3,1) both;
}

@keyframes mc-cinema-enter {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mc-cinema-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 10px;
}

.mc-cinema-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.45);
    letter-spacing: .5px;
    text-transform: uppercase;
}

.mc-cinema-arrows {
    display: flex;
    gap: 6px;
}

.mc-cinema-arrow {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: rgba(255,255,255,.6);
    font-size: 18px;
    cursor: pointer;
    transition: all .15s ease;
    padding: 0;
    line-height: 1;
}
.mc-cinema-arrow:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
    color: #fff;
    transform: scale(1.05);
}

.mc-cinema-track-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}

/* Fade edges */
.mc-cinema-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 2;
    pointer-events: none;
}
.mc-cinema-fade-left {
    left: 0;
    background: linear-gradient(to right, rgba(15,15,25,.95), transparent);
}
.mc-cinema-fade-right {
    right: 0;
    background: linear-gradient(to left, rgba(15,15,25,.95), transparent);
}

/* Horizontal scroll track */
.mc-cinema-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 8px 6px 14px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.mc-cinema-track::-webkit-scrollbar { display: none; }

/* Individual slide — page thumbnail format */
.mc-cinema-slide {
    flex: 0 0 200px;
    min-height: 240px;
    scroll-snap-align: start;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .25s cubic-bezier(.16,1,.3,1);
    display: flex;
    flex-direction: column;
}

/* Top glow bar — uses per-slide --slide-color */
.mc-cinema-slide::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--slide-color, #6366f1), transparent);
    opacity: .5;
    transition: opacity .25s, height .25s;
}

.mc-cinema-slide:hover {
    border-color: color-mix(in srgb, var(--slide-color, #6366f1) 35%, transparent);
    background: rgba(255,255,255,.06);
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 8px 32px rgba(0,0,0,.4),
        0 0 24px color-mix(in srgb, var(--slide-color, #6366f1) 20%, transparent);
}
.mc-cinema-slide:hover::before {
    opacity: 1;
    height: 3px;
}

/* Radial glow behind card on hover */
.mc-cinema-slide-glow {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 80px;
    background: radial-gradient(ellipse, var(--slide-color, #6366f1), transparent 70%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
    filter: blur(20px);
}
.mc-cinema-slide:hover .mc-cinema-slide-glow {
    opacity: .25;
}

.mc-cinema-slide-icon {
    font-size: 32px;
    margin-bottom: 10px;
    transition: transform .25s;
}
.mc-cinema-slide:hover .mc-cinema-slide-icon {
    transform: scale(1.15);
}

.mc-cinema-slide-name {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    margin-bottom: 4px;
    line-height: 1.3;
}

.mc-cinema-slide-preview {
    font-size: 11px;
    color: rgba(255,255,255,.4);
    line-height: 1.4;
}

/* Staggered entry animation for slides */
.mc-cinema-slide {
    animation: mc-slide-in .4s cubic-bezier(.16,1,.3,1) both;
}
.mc-cinema-slide:nth-child(1)  { animation-delay: .05s; }
.mc-cinema-slide:nth-child(2)  { animation-delay: .1s;  }
.mc-cinema-slide:nth-child(3)  { animation-delay: .15s; }
.mc-cinema-slide:nth-child(4)  { animation-delay: .2s;  }
.mc-cinema-slide:nth-child(5)  { animation-delay: .25s; }
.mc-cinema-slide:nth-child(6)  { animation-delay: .3s;  }
.mc-cinema-slide:nth-child(7)  { animation-delay: .35s; }
.mc-cinema-slide:nth-child(8)  { animation-delay: .4s;  }

@keyframes mc-slide-in {
    from { opacity: 0; transform: translateY(12px) scale(.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Active/pressed state */
.mc-cinema-slide:active {
    transform: scale(.96) !important;
    transition-duration: .1s;
}

/* Page thumbnail inside slide */
.mc-cinema-slide-thumb {
    flex: 1;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    position: relative;
    z-index: 1;
}
.mc-cinema-slide-thumb > div {
    width: 100%;
    min-height: 100%;
}

/* Footer with template name */
.mc-cinema-slide-footer {
    padding: 10px 12px;
    text-align: center;
    background: rgba(0,0,0,.3);
    border-top: 1px solid rgba(255,255,255,.05);
    position: relative;
    z-index: 1;
}
.mc-cinema-slide-footer .mc-cinema-slide-name {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    letter-spacing: .3px;
}

/* Page-format slide adjustments */
.mc-cinema-slide.mc-cinema-slide-page {
    flex: 0 0 200px;
    min-height: 260px;
}
.mc-cinema-slide.mc-cinema-slide-page:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow:
        0 12px 40px rgba(0,0,0,.5),
        0 0 30px color-mix(in srgb, var(--slide-color, #6366f1) 25%, transparent);
}

/* ─── Gender Selector (Register) ─── */
.gender-selector {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}
.gender-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.gender-btn .gender-icon { font-size: 24px; }
.gender-btn:hover {
    border-color: rgba(139,92,246,0.5);
    background: rgba(139,92,246,0.1);
    color: rgba(255,255,255,0.9);
    transform: translateY(-2px);
}
.gender-btn.selected {
    border-color: #8b5cf6;
    background: rgba(139,92,246,0.2);
    color: #fff;
    box-shadow: 0 0 20px rgba(139,92,246,0.3);
}
.gender-selector.gender-error .gender-btn {
    border-color: rgba(239,68,68,0.5);
}

/* ─── Gender selector in Settings ─── */
.settings-gender-selector {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.settings-gender-btn {
    flex: 1;
    padding: 8px 6px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
.settings-gender-btn:hover {
    border-color: rgba(139,92,246,0.4);
    color: rgba(255,255,255,0.8);
}
.settings-gender-btn.selected {
    border-color: #8b5cf6;
    background: rgba(139,92,246,0.2);
    color: #fff;
}

/* ── First Formation Onboarding — Screen 6 tunnel btn + Screen 7 ── */
.ffo-btn-tunnel {
    background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(139,92,246,0.25));
    border: 1.5px solid rgba(139,92,246,0.5);
    color: #c4b5fd;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 50px;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
}
.ffo-btn-tunnel:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.4), rgba(139,92,246,0.4));
    border-color: rgba(139,92,246,0.8);
    color: #e9d5ff;
    transform: translateY(-1px);
}
.ffo-s7 {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 20px; text-align: center;
    padding: 40px 24px; position: relative;
}
.ffo-s7-glow {
    position: absolute; width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(ellipse, rgba(99,102,241,0.18), transparent 70%);
    top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none;
}
.ffo-s7-badge {
    font-size: 52px; line-height: 1; position: relative; z-index: 1;
    animation: ffo-badge-bounce .7s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes ffo-badge-bounce {
    from { opacity: 0; transform: scale(.6) translateY(20px); }
    to   { opacity: 1; transform: scale(1)  translateY(0); }
}
.ffo-s7-title {
    font-size: 28px; font-weight: 800; color: #fff;
    line-height: 1.2; margin: 0; position: relative; z-index: 1;
}
.ffo-s7-sub {
    font-size: 14px; color: rgba(255,255,255,0.6); max-width: 420px;
    line-height: 1.6; margin: 0; position: relative; z-index: 1;
}
.ffo-s7-steps {
    display: flex; flex-direction: column; gap: 10px;
    width: 100%; max-width: 360px; position: relative; z-index: 1;
}
.ffo-s7-step {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; padding: 11px 16px; text-align: left;
}
.ffo-s7-step-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; font-weight: 700; font-size: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ffo-s7-step-lbl { font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 500; }
.ffo-s7-formation {
    font-size: 13px; color: rgba(255,255,255,0.5); margin: 0; position: relative; z-index: 1;
}
.ffo-s7-formation strong { color: rgba(245,158,11,0.9); }

/* ── Academy Dashboard — Formation Stats + Revenue widget ── */
.ga-formation-stats-list { display: flex; flex-direction: column; gap: 12px; }
.ga-fstat-item {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 12px 14px;
}
.ga-fstat-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.ga-fstat-emoji { font-size: 16px; flex-shrink: 0; }
.ga-fstat-name {
    flex: 1; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ga-fstat-month {
    font-size: 11px; color: #10b981; font-weight: 600;
    background: rgba(16,185,129,0.12); padding: 2px 8px; border-radius: 10px; flex-shrink: 0;
}
.ga-fstat-meta { font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.ga-fstat-bar-track {
    height: 4px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden;
}
.ga-fstat-bar-fill {
    height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.22,.61,.36,1);
}
/* Revenue widget */
.ga-rev-total {
    display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 12px;
}
.ga-rev-amount { font-size: 28px; font-weight: 800; color: #4ade80; line-height: 1; }
.ga-rev-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.ga-rev-row {
    display: flex; align-items: center; gap: 6px; padding: 7px 0;
    border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px;
}
.ga-rev-emoji { font-size: 14px; flex-shrink: 0; }
.ga-rev-name { flex: 1; color: rgba(255,255,255,0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga-rev-val { color: #4ade80; font-weight: 600; flex-shrink: 0; }
.ga-rev-btn-compta {
    margin-top: 12px; width: 100%; display: flex; align-items: center; justify-content: center;
    gap: 6px; padding: 9px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.3); color: #4ade80;
    cursor: pointer; transition: all .2s ease; font-family: inherit;
}
.ga-rev-btn-compta:hover { background: rgba(74,222,128,0.2); }

/* ── Notification Center Badge — override global hide rule from bundle ── */
#notif-badge-container.notif-badge-container {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.notif-badge-btn {
    position: relative;
}
.notif-badge-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    z-index: 2;
}
.notif-badge-count.hidden {
    display: none !important;
}

/* ── Kanban columns: cards must not stretch to fill column height ── */
.columns-view {
    align-items: start !important;
}
.task-list {
    align-items: stretch !important;
    flex-grow: 0 !important;
}
.task-list .bubble {
    height: auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* ── Task card: collapse actions row when not hovered ── */
.task-actions {
    max-height: 0 !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease !important;
}
.bubble:hover .task-actions {
    max-height: 200px !important;
    margin-top: 10px !important;
    opacity: 1 !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
}

/* ═══════════ Maha Trigger — Golden Light Manifestation ═══════════ */

/* ── Keyframes ──────────────────────────────────────────────────── */
@keyframes mhp-materialize {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.3); filter: brightness(3) blur(6px); }
  30%  { opacity: 1; transform: translateX(-50%) scale(1.08); filter: brightness(2.2) blur(2px); }
  50%  { transform: translateX(-50%) scale(0.95); filter: brightness(1.4) blur(0); }
  70%  { transform: translateX(-50%) scale(1.03); filter: brightness(1.1); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); filter: brightness(1) blur(0); }
}

@keyframes mhp-light-burst {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.2); }
  50%  { opacity: 0.5; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.5); }
}

@keyframes mhp-ring-expand {
  0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(0.3); border-width: 3px; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4); border-width: 0.5px; }
}

@keyframes mhp-ring-expand-delay {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); border-width: 2px; }
  15%  { opacity: 0.6; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5); border-width: 0.3px; }
}

@keyframes mhp-glow-pulse {
  0%, 100% { box-shadow: 0 0 18px 4px rgba(255,215,0,0.25), 0 0 40px 8px rgba(255,215,0,0.10); }
  50%      { box-shadow: 0 0 24px 8px rgba(255,215,0,0.35), 0 0 56px 14px rgba(255,215,0,0.15); }
}

@keyframes mhp-sparkle {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── Base state — invisible ─────────────────────────────────────── */
#mhp-trigger-wrap {
  opacity: 0 !important;
  transition: opacity 0.4s ease-out !important;
  transform: translateX(-50%) scale(1);
}

/* ── Hover — materialize from light ─────────────────────────────── */
#mhp-trigger-wrap:hover {
  opacity: 1 !important;
  animation: mhp-materialize 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

/* ── Light burst pseudo-elements ────────────────────────────────── */
#mhp-trigger-wrap::before,
#mhp-trigger-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

/* Radial glow bloom */
#mhp-trigger-wrap::before {
  width: 48px;
  height: 48px;
  background: radial-gradient(circle, rgba(255,240,160,0.8) 0%, rgba(255,215,0,0.4) 40%, transparent 70%);
  transform: translate(-50%, -50%) scale(0.2);
}

/* Expanding ring of light */
#mhp-trigger-wrap::after {
  width: 48px;
  height: 48px;
  border: 2px solid rgba(255,215,0,0.6);
  background: transparent;
  transform: translate(-50%, -50%) scale(0.3);
}

#mhp-trigger-wrap:hover::before {
  animation: mhp-light-burst 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

#mhp-trigger-wrap:hover::after {
  animation: mhp-ring-expand 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

/* ── Second ring via box-shadow on the trigger button ───────────── */
#mhp-trigger-wrap:hover #mhp-trigger {
  animation: mhp-glow-pulse 2.5s ease-in-out 0.8s infinite !important;
}

/* ── Sparkle particles via trigger pseudo-elements ──────────────── */
#mhp-trigger {
  position: relative;
}

#mhp-trigger::before,
#mhp-trigger::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #FFD700;
  opacity: 0;
  pointer-events: none;
}

#mhp-trigger::before {
  top: -4px;
  right: 2px;
  box-shadow: -20px 8px 0 #FFF0A0, 14px 38px 0 #FFD700, -18px 34px 0 #FFF0A0;
}

#mhp-trigger::after {
  bottom: -2px;
  left: 0px;
  box-shadow: 24px -6px 0 #FFF0A0, -8px -30px 0 #FFD700, 30px 18px 0 #FFF0A0;
}

#mhp-trigger-wrap:hover #mhp-trigger::before {
  animation: mhp-sparkle 0.6s ease-out 0.2s forwards !important;
}
#mhp-trigger-wrap:hover #mhp-trigger::after {
  animation: mhp-sparkle 0.6s ease-out 0.4s forwards !important;
}

/* =============================================
   TASK CARD VISUAL FIXES (Mar 2026)
   ============================================= */

/* Bug 1: .task-project and .task-priority in bubble-header
   — force small round indicator pills, not large rectangles */
.bubble .bubble-header .task-project,
.bubble .bubble-header .task-priority {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    max-width: 160px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Bug 2: .task-bridge-cal and .task-bridge-timer — unified button style */
.bubble .task-bridge-cal,
.bubble .task-bridge-timer {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    height: 28px !important;
    border: 1px solid var(--border-primary, rgba(255,255,255,0.1)) !important;
    border-radius: 8px !important;
    background: var(--bg-card, rgba(255,255,255,0.06)) !important;
    color: var(--text-secondary, rgba(255,255,255,0.6)) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.bubble .task-bridge-cal:hover,
.bubble .task-bridge-timer:hover {
    background: var(--accent, #e07840) !important;
    color: #fff !important;
    border-color: var(--accent, #e07840) !important;
    transform: scale(1.05) !important;
}

.bubble .task-bridge-cal svg,
.bubble .task-bridge-timer svg {
    flex-shrink: 0 !important;
}

/* Bug 3: bubble-header — crown and badges vertically centered on same line */
.bubble .bubble-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-bottom: 8px !important;
}

.bubble .bubble-header > * {
    vertical-align: middle !important;
    line-height: 1.4 !important;
}

.bubble .bubble-header .task-user {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    margin-left: auto !important;
}

/* Bug 4: .edit-btn — perfectly centered in top-right corner */
.bubble .edit-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    padding: 0 !important;
    z-index: 2 !important;
}

/* === FIX: Filter bar - search button not clipped (Mar 2026) === */
.user-filter-bar {
    flex-wrap: wrap !important;
    overflow: visible !important;
}
.search-container {
    flex-shrink: 0 !important;
    overflow: visible !important;
}
.search-toggle-btn {
    flex-shrink: 0 !important;
}

/* === FIX: Gamif header overlap with sidebar icons (Mar 2026) === */
.gh-float {
    top: 8px !important;
    right: 60px !important;
    z-index: 9990 !important;
}
/* ===== css/style-premium.css?v=2602241700 ===== */
/* ================================================
   PRODUCTIVEAPP — STYLE PREMIUM v1.0
   Ultra-premium design layer
   Backup: pre-redesign (2026-02-23)
   ================================================ */

/* ═══════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════ */
:root {
    /* Surface elevation */
    --surface-0: var(--bg-primary);
    --surface-1: var(--bg-secondary);
    --surface-2: var(--bg-tertiary);
    --surface-3: var(--bg-card);

    /* Shadow system */
    --shadow-xs: 0 1px 4px rgba(0,0,0,0.15);
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.28);
    --shadow-lg: 0 8px 48px rgba(0,0,0,0.38);
    --shadow-xl: 0 16px 64px rgba(0,0,0,0.48);

    /* Glow system (uses theme accent-glow) */
    --glow-sm: 0 0 14px var(--accent-glow, color-mix(in srgb, var(--accent) 18%, transparent));
    --glow-md: 0 0 30px var(--accent-glow, color-mix(in srgb, var(--accent) 28%, transparent));
    --glow-lg: 0 0 55px var(--accent-glow, color-mix(in srgb, var(--accent) 38%, transparent));

    /* Glass morphism */
    --glass-bg:     rgba(255,255,255,0.04);
    --glass-border: rgba(255,255,255,0.08);
    --glass-blur:   16px;

    /* Easing */
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0.0, 0, 0.2, 1);

    /* Typography */
    --font-2xs: 10px;
    --font-xs:  11px;
    --font-sm:  13px;
    --font-md:  15px;
    --font-lg:  18px;
    --font-xl:  22px;
    --font-2xl: 28px;
    --font-3xl: 36px;
    --tracking-tight:  -0.02em;
    --tracking-wide:    0.05em;
    --tracking-wider:   0.1em;
}

/* Light themes adjust */
[data-theme="minimal"],
[data-theme="academie"],
[data-theme="ivory"],
[data-theme="nordic"],
[data-theme="sakura"],
[data-theme="mint"],
[data-theme="paper"],
[data-theme="dawn"] {
    --glass-bg:     rgba(0,0,0,0.025);
    --glass-border: rgba(0,0,0,0.06);
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 48px rgba(0,0,0,0.16);
}

/* ═══════════════════════════════════════════════
   GLOBAL TYPOGRAPHY & RENDERING
   ═══════════════════════════════════════════════ */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
    letter-spacing: var(--tracking-tight);
}

/* ═══════════════════════════════════════════════
   VIEW ENTRY ANIMATION
   ═══════════════════════════════════════════════ */
.view-container.active {
    animation: viewFadeIn 0.28s var(--ease-out) both;
}

@keyframes viewFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════
   PREMIUM CARD SYSTEM
   ═══════════════════════════════════════════════ */
.bubble,
.module-card,
.stat-card,
.kpi-card,
.formation-card,
.widget-card {
    transition:
        box-shadow  0.22s var(--ease-smooth),
        transform   0.22s var(--ease-smooth),
        border-color 0.22s ease;
}

.module-card:hover,
.stat-card:hover,
.kpi-card:hover,
.formation-card:hover,
.widget-card:hover {
    box-shadow: var(--shadow-md), var(--glow-sm);
    transform: translateY(-2px);
}

/* KPI / Stat card: top accent bar */
.stat-card,
.kpi-card {
    position: relative;
    overflow: hidden;
}

.stat-card::before,
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--accent),
        var(--accent-light, var(--accent)),
        transparent 80%);
    opacity: 0.7;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════
   PREMIUM BUTTONS
   ═══════════════════════════════════════════════ */
.btn-primary,
.btn-accent {
    position: relative;
    overflow: hidden;
    transition: all 0.22s var(--ease-smooth) !important;
}

.btn-primary::after,
.btn-accent::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.14) 0%,
        transparent 60%);
    pointer-events: none;
    border-radius: inherit;
}

.btn-primary:hover,
.btn-accent:hover {
    transform: translateY(-1px);
    box-shadow: var(--glow-md) !important;
}

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

/* ═══════════════════════════════════════════════
   PREMIUM INPUTS
   ═══════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
    transition:
        border-color 0.2s ease,
        box-shadow   0.2s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow, color-mix(in srgb, var(--accent) 20%, transparent)) !important;
    outline: none !important;
}

/* ═══════════════════════════════════════════════
   PREMIUM MODALS
   ═══════════════════════════════════════════════ */
.modal-overlay {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

.modal-card {
    animation: modalSlideIn 0.28s var(--ease-bounce) both;
    box-shadow: var(--shadow-xl) !important;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ═══════════════════════════════════════════════
   PREMIUM SCROLLBARS
   ═══════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border, rgba(255,255,255,0.12));
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent, rgba(255,255,255,0.25));
}

/* ═══════════════════════════════════════════════
   STAT NUMBERS — TABULAR TYPOGRAPHY
   ═══════════════════════════════════════════════ */
.stat-number,
.kpi-value,
.metric-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

/* ═══════════════════════════════════════════════
   PROGRESS BARS
   ═══════════════════════════════════════════════ */
[class*="progress-fill"],
[class*="prog-fill"],
[class*="bar-fill"] {
    background: linear-gradient(90deg,
        var(--accent),
        var(--accent-light, var(--accent))) !important;
    border-radius: 99px;
}

/* ═══════════════════════════════════════════════
   PREMIUM FOCUS RING
   ═══════════════════════════════════════════════ */
*:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════
   DROPDOWNS — GLASS MORPHISM
   ═══════════════════════════════════════════════ */
.dropdown-menu,
.context-menu,
[class*="dropdown-content"],
[class*="popover-content"] {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg) !important;
}

/* ═══════════════════════════════════════════════
   GLASS UTILITY CLASS
   ═══════════════════════════════════════════════ */
.glass {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border) !important;
}

/* ═══════════════════════════════════════════════
   SKELETON LOADING — THEME-AWARE
   ═══════════════════════════════════════════════ */
.skeleton,
[class*="skeleton-"] {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        var(--bg-tertiary)  50%,
        var(--bg-secondary) 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeletonPulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeletonPulse {
    0%   { background-position:  200% center; }
    100% { background-position: -200% center; }
}

/* ═══════════════════════════════════════════════
   SELECTION — THEME ACCENT
   ═══════════════════════════════════════════════ */
::selection {
    background: var(--accent) !important;
    color: var(--bg-primary, #0d0d0d) !important;
}

/* ═══════════════════════════════════════════════
   TEXT UTILITIES
   ═══════════════════════════════════════════════ */
.text-accent  { color: var(--accent) !important; }
.text-muted   { color: var(--text-muted) !important; }
.text-success { color: var(--success, #22c55e) !important; }
.text-danger  { color: var(--danger,  #ef4444) !important; }
.text-warning { color: var(--warning, #f59e0b) !important; }

/* ═══════════════════════════════════════════════
   DIVIDERS
   ═══════════════════════════════════════════════ */
hr {
    border: none;
    border-top: 1px solid var(--border, rgba(255,255,255,0.08));
    margin: var(--space-md, 16px) 0;
}

/* ═══════════════════════════════════════════════
   SIDEBAR TOOLTIP & STATUS DROPDOWN — THEME AWARE
   ═══════════════════════════════════════════════ */
.sidebar-tooltip {
    background: var(--bg-secondary, #1f1f28) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}

.sidebar-tooltip::before {
    border-right-color: var(--bg-secondary, #1f1f28) !important;
}

.sidebar-status-dropdown {
    background: var(--bg-secondary, #18181b) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ═══════════════════════════════════════════════
   SIDEBAR ACTIVE: SUBTLE GLOW
   ═══════════════════════════════════════════════ */
.sidebar-item.active {
    box-shadow: none;
}

/* ═══════════════════════════════════════════════
   TABLES — CLEAN & PREMIUM
   ═══════════════════════════════════════════════ */
th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted, var(--text-secondary));
}

td {
    color: var(--text);
}

/* ═══════════════════════════════════════════════
   EMPTY STATE POLISH
   ═══════════════════════════════════════════════ */
[class*="empty-state"],
[class*="no-data-state"] {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted, var(--text-secondary));
}

/* ═══════════════════════════════════════════════
   AVATAR BORDER PREMIUM
   ═══════════════════════════════════════════════ */
.sidebar-avatar img {
    border: 2px solid var(--sb-border, var(--border));
    box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════
   GIRI ACADEMY — FORMATION CARDS
   ═══════════════════════════════════════════════ */
.formation-card,
.lesson-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition:
        box-shadow 0.22s var(--ease-smooth),
        transform  0.22s var(--ease-smooth),
        border-color 0.22s ease;
}

.formation-card:hover,
.lesson-card:hover {
    box-shadow: var(--shadow-md), var(--glow-sm);
    transform: translateY(-2px);
    border-color: var(--accent);
}

/* ═══════════════════════════════════════════════
   KANBAN — PREMIUM COLUMNS
   ═══════════════════════════════════════════════ */
[class*="kanban-col"],
[class*="kanban-column"] {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

/* ═══════════════════════════════════════════════
   PANEL HEADERS — ACCENT GRADIENT UNDERLINE
   ═══════════════════════════════════════════════ */
[class*="panel-header"],
[class*="section-header"] {
    position: relative;
}

[class*="panel-header"]::after,
[class*="section-header"]::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        var(--accent) 0%,
        transparent 60%);
    opacity: 0.35;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════
   BADGE PREMIUM — masqué (user request)
   ═══════════════════════════════════════════════ */
.sidebar-badge {
    display: none !important;
}

/* ═══════════════════════════════════════════════
   CHART CANVAS RADIUS
   ═══════════════════════════════════════════════ */
canvas {
    border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════
   SECTION TITLE TYPOGRAPHY
   ═══════════════════════════════════════════════ */
[class*="view-title"],
[class*="page-title"],
[class*="section-title"] {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--text);
    letter-spacing: var(--tracking-tight);
}

/* ═══════════════════════════════════════════════
   LINKS — ACCENT COLOR
   ═══════════════════════════════════════════════ */
a:not([class]):not([style]) {
    color: var(--accent);
    text-decoration: none;
}

a:not([class]):not([style]):hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════
   STATUS DOTS — BORDER FOR DEPTH
   ═══════════════════════════════════════════════ */
.sidebar-status-dot {
    box-shadow: 0 0 0 2px var(--sb-bg, var(--bg-secondary));
}

/* ═══════════════════════════════════════════════
   OVERFLOW GRADIENT UTILITY
   ═══════════════════════════════════════════════ */
.fade-bottom {
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* ═══════════════════════════════════════════════
   LIGHT THEME SPECIFIC FIXES
   ═══════════════════════════════════════════════ */
[data-theme="minimal"] .modal-card,
[data-theme="academie"] .modal-card,
[data-theme="ivory"] .modal-card {
    box-shadow: var(--shadow-md) !important;
}

/* Ensure text is visible in all themes */
[data-theme="minimal"] h1,
[data-theme="minimal"] h2,
[data-theme="minimal"] h3,
[data-theme="academie"] h1,
[data-theme="academie"] h2,
[data-theme="academie"] h3,
[data-theme="ivory"] h1,
[data-theme="ivory"] h2,
[data-theme="ivory"] h3 {
    color: var(--text);
}

/* ═══════════════════════════════════════════════
   WOW EFFECT: ACCENT HEADER LINE
   Thin gradient line at very top of page
   ═══════════════════════════════════════════════ */
body.logged-in::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--accent),
        var(--accent-light, var(--accent)),
        transparent 70%);
    opacity: 0.6;
    z-index: 9999;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════
   NOTIFICATION BADGE ANIMATION
   ═══════════════════════════════════════════════ */
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50%       { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

/* Badge animation supprimée (user request) */

/* ═══════════════════════════════════════════════
   SVG ICON CONSISTENCY
   ═══════════════════════════════════════════════ */
svg {
    flex-shrink: 0;
    vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════
   FIX FLASH SUBLIMINAL — Navigation entre vues (2026-02-24)
   Problème : 3 règles .view-container.active en conflit.
   animations.css (l.41) + style-views.css (l.84) + style-premium.css (l.169)
   La rule style-views.css n'avait pas fill-mode → flash 1 frame à opacity:1
   Solution : règle finale unique avec animation-delay:1ms + both
   Le 1ms delay force le navigateur à appliquer l'état from AVANT le 1er paint.
   ══════════════════════════════════════════════════════════════ */
.view-container.active {
    animation: viewFadeIn 0.28s 0.001s var(--ease-out, cubic-bezier(0.4,0,0.2,1)) both !important;
}

@keyframes viewFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}


/* ===== css/admin.css?v=2602240010 ===== */
/**
 * ADMIN DASHBOARD v3.0 - PREMIUM MONITORING CENTER 🛡️
 * Ultra-comfortable dark mode + Real-time monitoring + Glassmorphism
 * Designed for extended monitoring sessions without eye strain
 */

/* ==================== ROOT VARIABLES ==================== */
:root {
  --admin-bg: #0a0a0f;
  --admin-bg-light: #13131a;
  --admin-bg-lighter: #1a1a24;
  --admin-border: rgba(255, 255, 255, 0.08);
  --admin-border-hover: rgba(255, 255, 255, 0.15);
  --admin-text: #e4e4e7;
  --admin-text-muted: #a1a1aa;
  --admin-accent: #ef4444;
  --admin-accent-light: #f87171;
  --admin-success: #10b981;
  --admin-warning: #f59e0b;
  --admin-info: #3b82f6;
  --admin-glass-bg: rgba(26, 26, 36, 0.7);
  --admin-glass-border: rgba(255, 255, 255, 0.1);
}

/* ==================== MAIN DASHBOARD ==================== */
.admin-dashboard {
  padding: 2rem 2.5rem;
  max-width: 1800px;
  margin: 0 auto;
  background: var(--admin-bg);
  min-height: 100vh;
  animation: fadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== STICKY HEADER ==================== */
.admin-header.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 15, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--admin-border);
  margin: -2rem -2.5rem 3rem;
  padding: 2rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
}

.admin-header h1 {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ef4444 0%, #f97316 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}

.admin-subtitle {
  font-size: 0.95rem;
  color: var(--admin-text-muted);
  font-weight: 500;
  margin: 0.5rem 0 0.25rem;
}

.refresh-time {
  font-size: 0.85rem;
  color: var(--admin-text-muted);
  font-family: 'Monaco', 'Courier New', monospace;
  margin: 0;
}

.header-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* ==================== ERROR BADGE ==================== */
.error-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-radius: 12px;
  font-size: 1.25rem;
  font-weight: 800;
  color: white;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(239, 68, 68, 0.6);
  }
}

/* ==================== BUTTONS ==================== */
.btn-refresh,
.btn-auto-refresh,
.btn-sound-toggle {
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  color: var(--admin-text);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--admin-glass-bg);
  backdrop-filter: blur(12px);
}

.btn-refresh {
  background: linear-gradient(135deg, #ef4444, #f97316);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
}

.btn-refresh:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(239, 68, 68, 0.5);
}

.btn-refresh span {
  font-size: 1.25rem;
  animation: rotate 2s linear infinite paused;
}

.btn-refresh:hover span {
  animation-play-state: running;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.btn-auto-refresh,
.btn-sound-toggle {
  background: var(--admin-bg-lighter);
}

.btn-auto-refresh:hover,
.btn-sound-toggle:hover {
  background: var(--admin-bg-light);
  border-color: var(--admin-border-hover);
  transform: translateY(-2px);
}

.btn-auto-refresh.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.15));
  border-color: rgba(16, 185, 129, 0.4);
  color: var(--admin-success);
}

.btn-sound-toggle.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.15));
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--admin-info);
}

/* ==================== REAL-TIME STATS ==================== */
.realtime-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.realtime-card {
  background: var(--admin-glass-bg);
  border: 1px solid var(--admin-glass-border);
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

.realtime-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

.realtime-card:hover {
  background: rgba(26, 26, 36, 0.85);
  border-color: var(--admin-border-hover);
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.realtime-card:hover::before {
  opacity: 1;
}

.realtime-icon {
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--accent) 50%, transparent));
}

.realtime-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--admin-text);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.realtime-label {
  font-size: 0.95rem;
  color: var(--admin-text-muted);
  font-weight: 500;
}

.realtime-warning {
  border-color: rgba(245, 158, 11, 0.5);
}

.realtime-warning .realtime-value {
  color: var(--admin-warning);
}

.realtime-success {
  border-color: rgba(16, 185, 129, 0.3);
}

.realtime-success .realtime-value {
  color: var(--admin-success);
}

/* ==================== TABS NAVIGATION ==================== */
.admin-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding: 0.75rem;
  background: var(--admin-glass-bg);
  border: 1px solid var(--admin-glass-border);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  overflow-x: auto;
}

.admin-tab {
  flex: 1;
  min-width: 180px;
  padding: 1.125rem 1.75rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
}

.admin-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(249, 115, 22, 0.1));
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.35s;
}

.admin-tab:hover {
  color: var(--admin-text);
  border-color: rgba(239, 68, 68, 0.3);
  transform: translateY(-3px);
}

.admin-tab:hover::before {
  opacity: 1;
}

.admin-tab.active {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(249, 115, 22, 0.2));
  border-color: rgba(239, 68, 68, 0.6);
  color: var(--admin-accent-light);
  box-shadow: 0 6px 24px rgba(239, 68, 68, 0.25);
}

/* ==================== TAB CONTENT ==================== */
.admin-tab-content {
  display: none;
  animation: fadeIn 0.5s ease;
}

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

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== BUGS MONITORING ==================== */
.bugs-section {
  animation: slideIn 0.4s ease;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

.bugs-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.bug-stat-card {
  background: var(--admin-glass-bg);
  border: 1px solid var(--admin-glass-border);
  border-radius: 14px;
  padding: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: all 0.3s;
  backdrop-filter: blur(12px);
}

.bug-stat-card:hover {
  background: rgba(26, 26, 36, 0.85);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.bug-stat-icon {
  font-size: 2.5rem;
}

.bug-stat-value {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--admin-text);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.bug-stat-label {
  font-size: 0.9rem;
  color: var(--admin-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==================== CHARTS ==================== */
.chart-container,
.chart-card {
  background: var(--admin-glass-bg);
  border: 1px solid var(--admin-glass-border);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  backdrop-filter: blur(16px);
}

.chart-container h3,
.chart-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--admin-text);
  margin-bottom: 1.5rem;
}

.chart-container canvas {
  max-height: 350px;
}

/* ==================== FILTERS & ACTIONS ==================== */
.bugs-filters {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.filter-group,
.action-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.bugs-filters select {
  padding: 0.875rem 2.5rem 0.875rem 1.25rem;
  background: var(--admin-bg-lighter);
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  color: var(--admin-text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.bugs-filters select:hover {
  background-color: var(--admin-bg-light);
  border-color: var(--admin-border-hover);
}

.bugs-filters select:focus {
  outline: none;
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.btn-quick-filter {
  padding: 0.875rem 1.5rem;
  background: var(--admin-bg-lighter);
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  color: var(--admin-text);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-quick-filter:hover {
  background: var(--admin-bg-light);
  border-color: var(--admin-accent);
  color: var(--admin-accent-light);
  transform: translateY(-2px);
}

.btn-action {
  padding: 0.875rem 1.5rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.15));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 10px;
  color: var(--admin-success);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-action:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.25));
  border-color: rgba(16, 185, 129, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

.btn-export {
  padding: 0.875rem 1.75rem;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 10px;
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.btn-export:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

/* ==================== SHORTCUTS HINT ==================== */
.shortcuts-hint {
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 12px;
  color: var(--admin-text-muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.shortcuts-hint kbd {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: var(--admin-bg-lighter);
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--admin-text);
  margin: 0 0.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ==================== ERRORS TABLE ==================== */
.errors-table-container {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--admin-glass-border);
  background: var(--admin-glass-bg);
  backdrop-filter: blur(16px);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--admin-border);
}

.select-all-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  color: var(--admin-text);
  font-weight: 600;
  font-size: 0.95rem;
}

.select-all-container input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--admin-accent);
}

.selected-count {
  font-size: 0.9rem;
  color: var(--admin-accent-light);
  font-weight: 700;
  padding: 0.5rem 1rem;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s;
}

.selected-count.visible {
  opacity: 1;
}

.errors-table {
  width: 100%;
  border-collapse: collapse;
}

.errors-table thead {
  background: rgba(255, 255, 255, 0.05);
}

.errors-table th {
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--admin-border);
}

.errors-table td {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: var(--admin-text);
  vertical-align: middle;
}

.errors-table tbody tr {
  transition: all 0.25s;
  cursor: pointer;
}

.errors-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.06);
}

.errors-table tbody tr.error-resolved {
  opacity: 0.5;
  background: rgba(16, 185, 129, 0.05);
}

.error-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--admin-accent);
}

.timestamp-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.timestamp {
  font-size: 0.9rem;
  font-family: 'Monaco', 'Courier New', monospace;
}

.error-count {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: rgba(239, 68, 68, 0.15);
  color: var(--admin-accent-light);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  align-self: flex-start;
}

.severity-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
}

.severity-error {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.severity-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.severity-info {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.error-message {
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 600px;
}

.error-message mark.error-keyword {
  background: rgba(239, 68, 68, 0.2);
  color: var(--admin-accent-light);
  padding: 0.125rem 0.25rem;
  border-radius: 3px;
  font-weight: 600;
}

.error-message code.error-line {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent-light);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

.error-url {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.85rem;
  color: var(--admin-text-muted);
}

.user-cell {
  font-size: 0.9rem;
}

.actions-cell {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.btn-resolve {
  padding: 0.625rem 1rem;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  color: var(--admin-success);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s;
}

.btn-resolve:hover {
  background: rgba(16, 185, 129, 0.25);
  transform: scale(1.05);
}

.btn-delete {
  padding: 0.625rem 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: var(--admin-accent);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s;
}

.btn-delete:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: scale(1.05);
}

.btn-details {
  padding: 0.625rem 1rem;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 8px;
  color: var(--accent-light);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s;
}

.btn-details:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  transform: scale(1.05);
}

.resolved-badge {
  color: var(--admin-success);
  font-weight: 700;
}

/* ==================== ERROR DETAIL MODAL ==================== */
.error-detail-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.error-detail-content {
  background: var(--admin-bg-lighter);
  border: 1px solid var(--admin-border);
  border-radius: 20px;
  max-width: 900px;
  width: 90%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.error-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 2.5rem;
  border-bottom: 1px solid var(--admin-border);
}

.error-detail-header h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--admin-text);
  margin: 0;
}

.btn-close-modal {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--admin-accent);
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
}

.btn-close-modal:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: rotate(90deg);
}

.error-detail-body {
  padding: 2rem 2.5rem;
  overflow-y: auto;
  flex: 1;
}

.detail-row {
  margin-bottom: 1.5rem;
}

.detail-row strong {
  display: block;
  color: var(--admin-text-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.detail-row pre {
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--admin-text);
  margin: 0;
}

.detail-row code {
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.9rem;
  color: var(--admin-text);
  display: inline-block;
}

.stack-trace {
  max-height: 300px;
  overflow-y: auto;
}

.error-detail-footer {
  padding: 1.5rem 2.5rem;
  border-top: 1px solid var(--admin-border);
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

/* ==================== EMPTY STATE ==================== */
.empty-state {
  text-align: center;
  padding: 5rem 2rem;
  background: var(--admin-glass-bg);
  border: 1px solid var(--admin-glass-border);
  border-radius: 16px;
  backdrop-filter: blur(12px);
}

.empty-icon {
  font-size: 5rem;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.3));
}

.empty-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--admin-text);
  margin-bottom: 0.5rem;
}

.empty-subtitle {
  font-size: 1rem;
  color: var(--admin-text-muted);
}

.loading {
  text-align: center;
  padding: 3rem;
  color: var(--admin-text-muted);
  font-size: 1.125rem;
}

/* ==================== ANALYTICS & PERFORMANCE ==================== */
.analytics-section,
.performance-section,
.system-section {
  animation: slideIn 0.4s ease;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.user-activity-stats,
.feature-engagement,
.endpoints-section {
  background: var(--admin-glass-bg);
  border: 1px solid var(--admin-glass-border);
  border-radius: 16px;
  padding: 2rem;
  backdrop-filter: blur(16px);
  margin-bottom: 2.5rem;
}

.user-activity-stats h3,
.feature-engagement h3,
.endpoints-section h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--admin-text);
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}

.activity-card {
  background: var(--admin-bg-lighter);
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s;
}

.activity-card:hover {
  background: var(--admin-bg-light);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.activity-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--admin-text);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.activity-label {
  font-size: 0.9rem;
  color: var(--admin-text-muted);
  font-weight: 600;
}

/* ==================== FEATURE ENGAGEMENT ==================== */
.engagement-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.engagement-item {
  background: var(--admin-bg-lighter);
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.25s;
}

.engagement-item:hover {
  background: var(--admin-bg-light);
}

.engagement-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.engagement-name {
  font-weight: 700;
  color: var(--admin-text);
}

.engagement-users {
  color: var(--admin-text-muted);
  font-size: 0.9rem;
}

.engagement-bar {
  position: relative;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

.engagement-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 8px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.engagement-percent {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: white;
  font-size: 0.85rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ==================== PERFORMANCE ==================== */
.perf-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.perf-card {
  background: var(--admin-glass-bg);
  border: 1px solid var(--admin-glass-border);
  border-radius: 14px;
  padding: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: all 0.3s;
  backdrop-filter: blur(12px);
}

.perf-card:hover {
  background: rgba(26, 26, 36, 0.85);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.perf-icon {
  font-size: 2.5rem;
}

.perf-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--admin-text);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.perf-label {
  font-size: 0.875rem;
  color: var(--admin-text-muted);
  font-weight: 600;
}

.perf-warning {
  border-color: rgba(245, 158, 11, 0.4);
}

.perf-warning .perf-value {
  color: var(--admin-warning);
}

/* ==================== ENDPOINTS ==================== */
.endpoints-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.endpoint-item {
  background: var(--admin-bg-lighter);
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.25s;
}

.endpoint-item:hover {
  background: var(--admin-bg-light);
  transform: translateX(4px);
}

.endpoint-rank {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--admin-text-muted);
  min-width: 48px;
  text-align: center;
}

.endpoint-info {
  flex: 1;
}

.endpoint-path {
  font-family: 'Monaco', 'Courier New', monospace;
  font-weight: 700;
  color: var(--admin-text);
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.endpoint-stats {
  font-size: 0.85rem;
  color: var(--admin-text-muted);
}

/* ==================== SYSTEM SECTION ==================== */
.health-card {
  background: var(--admin-glass-bg);
  border: 1px solid var(--admin-glass-border);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  backdrop-filter: blur(16px);
}

.health-card.health-healthy {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.05);
}

.health-card.health-degraded {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.05);
}

.health-card.health-unhealthy {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.05);
}

.health-status {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.health-emoji {
  font-size: 4rem;
}

.health-status h3 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--admin-text);
}

.health-label {
  font-size: 1.125rem;
  color: var(--admin-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.health-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.health-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.health-icon {
  font-size: 2.5rem;
}

.health-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--admin-text);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.stat-card {
  background: var(--admin-glass-bg);
  border: 1px solid var(--admin-glass-border);
  border-radius: 14px;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s;
  backdrop-filter: blur(12px);
}

.stat-card:hover {
  background: rgba(26, 26, 36, 0.85);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.stat-icon {
  font-size: 3rem;
}

.stat-value {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--admin-text);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.95rem;
  color: var(--admin-text-muted);
  font-weight: 600;
}

.stat-sublabel {
  font-size: 0.8rem;
  color: var(--admin-text-muted);
  margin-top: 0.25rem;
}

/* ==================== MEMBERS TABLE ==================== */
.members-table {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--admin-glass-border);
  background: var(--admin-glass-bg);
  backdrop-filter: blur(16px);
}

.members-table table {
  width: 100%;
  border-collapse: collapse;
}

.members-table thead {
  background: rgba(255, 255, 255, 0.05);
}

.members-table th {
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--admin-border);
}

.members-table td {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: var(--admin-text);
}

.members-table tbody tr {
  transition: all 0.25s;
}

.members-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ==================== CUSTOM SCROLLBAR ==================== */
.error-detail-body::-webkit-scrollbar,
.stack-trace::-webkit-scrollbar,
.admin-tabs::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.error-detail-body::-webkit-scrollbar-track,
.stack-trace::-webkit-scrollbar-track,
.admin-tabs::-webkit-scrollbar-track {
  background: var(--admin-bg);
  border-radius: 10px;
}

.error-detail-body::-webkit-scrollbar-thumb,
.stack-trace::-webkit-scrollbar-thumb,
.admin-tabs::-webkit-scrollbar-thumb {
  background: var(--admin-border);
  border-radius: 10px;
}

.error-detail-body::-webkit-scrollbar-thumb:hover,
.stack-trace::-webkit-scrollbar-thumb:hover,
.admin-tabs::-webkit-scrollbar-thumb:hover {
  background: var(--admin-border-hover);
}

/* ==================== SENTINELLE DIAGNOSTIC ==================== */
.sentinel-section {
  animation: slideIn 0.4s ease;
}

/* Sentinel Controls */
.sentinel-controls {
  background: var(--admin-glass-bg);
  border: 1px solid var(--admin-glass-border);
  border-radius: 16px;
  padding: 2rem;
  backdrop-filter: blur(16px);
  margin-bottom: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.sentinel-status {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
  min-width: 300px;
}

.status-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.status-indicator::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: statusPulse 2s ease-in-out infinite;
}

.status-active {
  background: #10b981;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
}

.status-active::before {
  background: #10b981;
}

.status-inactive {
  background: #6b7280;
  box-shadow: 0 0 10px rgba(107, 116, 128, 0.4);
}

@keyframes statusPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.8);
  }
}

.sentinel-status h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--admin-text);
  margin: 0;
}

.status-text {
  font-size: 1rem;
  color: var(--admin-text-muted);
  margin: 0.5rem 0 0.25rem;
  font-weight: 600;
}

.status-subtext {
  font-size: 0.85rem;
  color: var(--admin-text-muted);
  margin: 0;
  font-family: 'Monaco', 'Courier New', monospace;
}

.sentinel-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-sentinel-start,
.btn-sentinel-stop,
.btn-sentinel-scan,
.btn-sentinel-auto,
.btn-sentinel-export {
  padding: 0.875rem 1.75rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.btn-sentinel-start {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #10b981;
  color: white;
}

.btn-sentinel-start:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.4);
}

.btn-sentinel-stop {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: #ef4444;
  color: white;
}

.btn-sentinel-stop:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(239, 68, 68, 0.4);
}

.btn-sentinel-scan {
  background: linear-gradient(135deg, var(--accent), var(--accent));
  border-color: var(--accent);
  color: white;
}

.btn-sentinel-scan:hover:not(.disabled) {
  background: linear-gradient(135deg, var(--accent), var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 40%, transparent);
}

.btn-sentinel-scan.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-sentinel-auto {
  background: var(--admin-bg-lighter);
  border-color: var(--admin-border);
  color: var(--admin-text);
}

.btn-sentinel-auto:hover {
  background: var(--admin-bg-light);
  border-color: var(--admin-border-hover);
}

.btn-sentinel-auto.active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #f59e0b;
  color: white;
}

.btn-sentinel-export {
  background: var(--admin-bg-lighter);
  border-color: var(--admin-border);
  color: var(--admin-text);
}

.btn-sentinel-export:hover {
  background: var(--admin-bg-light);
  border-color: var(--admin-border-hover);
  transform: translateY(-2px);
}

/* Sentinel Empty State */
.sentinel-empty {
  text-align: center;
  padding: 6rem 2rem;
  background: var(--admin-glass-bg);
  border: 1px solid var(--admin-glass-border);
  border-radius: 16px;
  backdrop-filter: blur(12px);
}

.sentinel-empty .empty-icon {
  font-size: 6rem;
  margin-bottom: 2rem;
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent));
}

.sentinel-empty h3 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--admin-text);
  margin-bottom: 1rem;
}

.sentinel-empty p {
  font-size: 1.125rem;
  color: var(--admin-text-muted);
  margin-bottom: 2.5rem;
}

.sentinel-empty .btn-primary {
  padding: 1.25rem 2.5rem;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  color: white;
  border: none;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1.125rem;
  cursor: pointer;
  transition: all 0.3s;
}

.sentinel-empty .btn-primary:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent));
  transform: translateY(-4px);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Overall Score Card */
.sentinel-score-card {
  background: var(--admin-glass-bg);
  border: 1px solid var(--admin-glass-border);
  border-radius: 20px;
  padding: 3rem;
  backdrop-filter: blur(16px);
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  gap: 3rem;
  transition: all 0.3s;
}

.sentinel-score-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.score-circle {
  position: relative;
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}

.score-svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.score-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 12;
}

.score-fill {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 339;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.score-excellent .score-fill {
  stroke: url(#scoreGradientGreen);
}

.score-good .score-fill {
  stroke: url(#scoreGradientBlue);
}

.score-warning .score-fill {
  stroke: url(#scoreGradientOrange);
}

.score-critical .score-fill {
  stroke: url(#scoreGradientRed);
}

.score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
}

.score-excellent .score-value {
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.score-good .score-value {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.score-warning .score-value {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.score-critical .score-value {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.score-info {
  flex: 1;
}

.score-info h3 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--admin-text);
  margin: 0 0 0.75rem;
}

.score-label {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.score-excellent .score-label {
  color: #10b981;
}

.score-good .score-label {
  color: #3b82f6;
}

.score-warning .score-label {
  color: #f59e0b;
}

.score-critical .score-label {
  color: #ef4444;
}

.score-issues {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.issue-critical,
.issue-warning,
.issue-ok {
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

.issue-critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 2px solid rgba(239, 68, 68, 0.3);
}

.issue-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 2px solid rgba(245, 158, 11, 0.3);
}

.issue-ok {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 2px solid rgba(16, 185, 129, 0.3);
}

.scan-duration {
  font-size: 0.9rem;
  color: var(--admin-text-muted);
  margin: 0;
  font-family: 'Monaco', 'Courier New', monospace;
}

/* Diagnostic Grid */
.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.diagnostic-card {
  background: var(--admin-glass-bg);
  border: 1px solid var(--admin-glass-border);
  border-radius: 14px;
  padding: 1.75rem;
  backdrop-filter: blur(12px);
  transition: all 0.3s;
}

.diagnostic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.diag-healthy {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.05);
}

.diag-warning {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.05);
}

.diag-critical {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.05);
}

.diag-unknown {
  border-color: rgba(107, 114, 128, 0.3);
  background: rgba(107, 114, 128, 0.05);
}

.diag-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.diag-icon {
  font-size: 2rem;
}

.diag-header h4 {
  flex: 1;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--admin-text);
  margin: 0;
}

.diag-status {
  font-size: 1.5rem;
}

.diag-message {
  font-size: 0.95rem;
  color: var(--admin-text);
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.diag-metrics {
  font-size: 0.85rem;
  color: var(--admin-text-muted);
  font-family: 'Monaco', 'Courier New', monospace;
}

/* Detailed Results */
.diagnostic-details {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.detail-section {
  background: var(--admin-glass-bg);
  border: 1px solid var(--admin-glass-border);
  border-radius: 16px;
  padding: 2rem;
  backdrop-filter: blur(16px);
}

.detail-section h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--admin-text);
  margin: 0 0 1.5rem;
}

.error-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.error-item {
  background: var(--admin-bg-lighter);
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.25s;
}

.error-item:hover {
  background: var(--admin-bg-light);
}

.error-severity {
  padding: 0.375rem 0.875rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.error-message {
  flex: 1;
  color: var(--admin-text);
  font-size: 0.9rem;
}

.error-time {
  font-size: 0.85rem;
  color: var(--admin-text-muted);
  font-family: 'Monaco', 'Courier New', monospace;
  white-space: nowrap;
}

.btn-view-all {
  padding: 0.875rem 1.75rem;
  background: var(--admin-bg-lighter);
  border: 2px solid var(--admin-border);
  border-radius: 10px;
  color: var(--admin-text);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-view-all:hover {
  background: var(--admin-bg-light);
  border-color: var(--admin-border-hover);
  transform: translateX(4px);
}

/* API Tests Table */
.api-tests-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.api-tests-table thead {
  background: rgba(255, 255, 255, 0.05);
}

.api-tests-table th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--admin-border);
}

.api-tests-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: var(--admin-text);
  font-size: 0.95rem;
}

.api-tests-table tbody tr {
  transition: all 0.25s;
}

.api-tests-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.06);
}

.test-ok {
  background: rgba(16, 185, 129, 0.05);
}

.test-error {
  background: rgba(239, 68, 68, 0.05);
}

.api-tests-table code {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.85rem;
}

/* Performance Metrics Grid */
.perf-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.metric-card {
  background: var(--admin-bg-lighter);
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.25s;
}

.metric-card:hover {
  background: var(--admin-bg-light);
  transform: translateY(-2px);
}

.metric-label {
  font-size: 0.8rem;
  color: var(--admin-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}

.metric-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--admin-text);
  margin: 0;
  line-height: 1;
}

.slow-scripts {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--admin-border);
}

.slow-scripts h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--admin-warning);
  margin: 0 0 1rem;
}

.slow-scripts ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.slow-scripts li {
  background: var(--admin-bg-lighter);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 0.875rem 1.25rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--admin-text);
}

.slow-scripts code {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: 'Monaco', 'Courier New', monospace;
  margin-right: 0.75rem;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .realtime-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .bugs-filters {
    flex-direction: column;
  }

  .filter-group,
  .action-group {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .admin-dashboard {
    padding: 1.5rem;
  }

  .admin-header.sticky-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    margin: -1.5rem -1.5rem 2rem;
    padding: 1.5rem;
  }

  .header-left {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .header-controls {
    width: 100%;
    justify-content: space-between;
  }

  .admin-header h1 {
    font-size: 2rem;
  }

  .admin-tabs {
    flex-direction: column;
  }

  .errors-table-container {
    overflow-x: auto;
  }

  .error-detail-content {
    width: 95%;
    max-height: 95vh;
  }

  .error-detail-header,
  .error-detail-body,
  .error-detail-footer {
    padding: 1.5rem;
  }
}

/* =============================================
   ADMIN USERS TAB v1.0
   ============================================= */

.admin-users-panel { padding: 24px; }

.users-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.users-kpi {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.users-kpi .kpi-value { font-size: 1.8rem; font-weight: 700; color: #fff; }
.users-kpi .kpi-label { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.users-kpi.kpi-green .kpi-value { color: #10b981; }
.users-kpi.kpi-blue .kpi-value { color: #60a5fa; }
.users-kpi.kpi-purple .kpi-value { color: var(--accent-light); }
.users-kpi.kpi-orange .kpi-value { color: #fb923c; }

.users-toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.users-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 6px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: rgba(255,255,255,0.6);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-btn.active,
.filter-btn:hover {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent-light);
}

.users-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 24px;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.users-table thead tr {
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.users-table th {
  padding: 12px 16px;
  text-align: left;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.users-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.82);
}

.user-row:hover td { background: rgba(255,255,255,0.03); }

.user-name-cell {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.user-name { font-weight: 500; }

.logins-count {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  background: rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.82rem;
}

.user-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}
.status-today { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
.status-active { background: rgba(96,165,250,0.12); color: #60a5fa; border: 1px solid rgba(96,165,250,0.25); }
.status-inactive { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.08); }

.billing-notice {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.billing-notice-icon { font-size: 1.5rem; flex-shrink: 0; }
.billing-notice-content strong { color: rgba(255,255,255,0.85); font-size: 0.9rem; }
.billing-notice-content p { color: rgba(255,255,255,0.5); font-size: 0.82rem; margin: 4px 0 0; line-height: 1.5; }
.billing-notice-content code { background: rgba(255,255,255,0.1); padding: 1px 5px; border-radius: 4px; font-size: 0.8rem; }

.admin-error {
  padding: 20px;
  color: #f87171;
  background: rgba(248,113,113,0.08);
  border-radius: 10px;
  border: 1px solid rgba(248,113,113,0.2);
  margin: 16px;
}

/* ===== IA DOCTEUR PANEL ===== */
.admin-tab-ai {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), rgba(59,130,246,0.2)) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent) !important;
  color: var(--accent-light) !important;
  font-weight: 600;
}
.admin-tab-ai:hover, .admin-tab-ai.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, transparent), rgba(59,130,246,0.4)) !important;
  color: #fff !important;
}

.ai-doctor-panel {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 280px);
  min-height: 500px;
  background: rgba(15,15,25,0.6);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  overflow: hidden;
}

.ai-doctor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  flex-shrink: 0;
}
.ai-doctor-title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ai-doctor-icon { font-size: 2rem; }
.ai-doctor-title h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--accent-light);
}
.ai-doctor-title p {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
}
.ai-doctor-btn-context {
  background: linear-gradient(135deg, var(--accent), #3b82f6);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.ai-doctor-btn-context:hover { opacity: 0.85; }

.ai-doctor-quick-actions {
  display: flex;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.ai-quick-pill {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.ai-quick-pill:hover {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent-light);
}

.ai-doctor-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 30%, transparent) transparent;
}

.ai-doctor-welcome {
  text-align: center;
  margin: auto;
  padding: 40px 20px;
  color: rgba(255,255,255,0.5);
}
.ai-welcome-icon { font-size: 3rem; margin-bottom: 16px; }
.ai-doctor-welcome h3 { color: rgba(255,255,255,0.75); margin: 0 0 8px; font-size: 1.1rem; }
.ai-doctor-welcome p { font-size: 0.88rem; line-height: 1.6; max-width: 400px; margin: 0 auto; }
.ai-doctor-welcome strong { color: var(--accent-light); }

/* Messages */
.ai-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 92%;
}
.ai-msg-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.ai-msg-assistant { align-self: flex-start; }
.ai-msg-error { align-self: flex-start; }

.ai-msg-bubble {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.87rem;
  line-height: 1.6;
  max-width: 100%;
  word-break: break-word;
}
.ai-msg-user .ai-msg-bubble {
  background: linear-gradient(135deg, var(--accent), #3b82f6);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.ai-msg-assistant .ai-msg-bubble {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.88);
  border-radius: 14px 14px 14px 4px;
}
.ai-msg-error-bubble {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5;
}
.ai-msg-avatar {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 4px;
}
.ai-msg-bubble h4 {
  color: var(--accent-light);
  margin: 10px 0 4px;
  font-size: 0.92rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding-bottom: 4px;
}
.ai-msg-bubble ul { margin: 6px 0; padding-left: 18px; }
.ai-msg-bubble li { margin-bottom: 3px; }
.ai-msg-bubble code {
  background: rgba(0,0,0,0.35);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.82rem;
  color: #86efac;
}
.ai-msg-bubble strong { color: #fbbf24; }
.ai-msg-bubble p { margin: 4px 0; }

/* Typing animation */
.ai-typing-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 4px 0;
}
.ai-typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  animation: aiDotBounce 1.2s infinite;
}
.ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiDotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* Input area */
.ai-doctor-input-area {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.25);
  flex-shrink: 0;
  align-items: flex-end;
}
.ai-doctor-textarea {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: rgba(255,255,255,0.88);
  padding: 10px 14px;
  font-size: 0.87rem;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
  line-height: 1.5;
}
.ai-doctor-textarea:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.ai-doctor-textarea::placeholder { color: rgba(255,255,255,0.3); }
.ai-doctor-send-btn {
  background: linear-gradient(135deg, var(--accent), #3b82f6);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
  align-self: flex-end;
}
.ai-doctor-send-btn:hover { opacity: 0.85; }
.ai-doctor-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ai-doctor-hint {
  text-align: center;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.25);
  margin: 0;
  padding: 4px 16px 10px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   USER BUG REPORTS TAB
   ═══════════════════════════════════════════════════════ */

.admin-tab-reports { position: relative; }
.reports-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 5px;
  vertical-align: middle;
}

.user-reports-section { padding: 0 0 24px; }
.ur-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 20px;
}
.ur-header h3 { font-size: 16px; font-weight: 700; color: #e8e8f0; margin: 0; }
.btn-refresh-small {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(232,232,240,0.7);
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}
.btn-refresh-small:hover { background: rgba(255,255,255,0.1); color: #e8e8f0; }

.ur-empty, .ur-error {
  text-align: center;
  padding: 60px 20px;
  color: rgba(232,232,240,0.4);
  font-size: 14px;
  line-height: 1.7;
}
.ur-error { color: #f87171; }

.ur-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  transition: border-color 0.2s;
}
.ur-card:hover { border-color: rgba(255,255,255,0.14); }

.ur-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.ur-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ur-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid;
}
.ur-date { font-size: 12px; color: rgba(232,232,240,0.4); }
.ur-page {
  font-size: 11px;
  color: rgba(232,232,240,0.4);
  font-family: monospace;
  background: rgba(255,255,255,0.04);
  padding: 2px 6px;
  border-radius: 4px;
}

.ur-card-actions { display: flex; gap: 8px; }
.ur-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}
.ur-btn:hover { opacity: 0.85; }
.ur-btn-validate { background: #3b82f6; color: #fff; }
.ur-btn-reject { background: rgba(239,68,68,0.2); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.ur-btn-apply { background: linear-gradient(135deg, var(--accent), #06b6d4); color: #fff; }

.ur-title { font-size: 15px; font-weight: 600; color: #e8e8f0; margin: 0 0 6px; }
.ur-desc { font-size: 13px; color: rgba(232,232,240,0.6); line-height: 1.5; margin: 0 0 12px; }

.ur-ai-block {
  background: rgba(59,130,246,0.07);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.ur-ai-block.ur-analyzing { opacity: 0.7; }
.ur-ai-label { font-size: 11px; font-weight: 700; color: #93c5fd; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.ur-ai-text { font-size: 13px; color: rgba(232,232,240,0.8); line-height: 1.5; margin: 0; }

.ur-fix-block {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.ur-fix-label { font-size: 11px; font-weight: 700; color: var(--accent-light); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.ur-fix-type {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  text-transform: lowercase;
  margin-left: 4px;
}
.ur-fix-text { font-size: 13px; color: rgba(232,232,240,0.8); line-height: 1.5; margin: 0 0 6px; }
.ur-fix-file {
  display: block;
  font-family: monospace;
  font-size: 12px;
  color: var(--accent-light);
  background: rgba(0,0,0,0.2);
  padding: 4px 8px;
  border-radius: 6px;
}

.ur-errors {
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  overflow: hidden;
}
.ur-errors summary {
  padding: 8px 12px;
  font-size: 12px;
  color: rgba(232,232,240,0.5);
  cursor: pointer;
  user-select: none;
}
.ur-errors pre {
  padding: 10px 12px;
  font-size: 11px;
  color: #fca5a5;
  background: rgba(239,68,68,0.05);
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  max-height: 120px;
  overflow-y: auto;
}


/* ===== css/admin-premium.css?v=2602240010 ===== */

/* ══════════════════════════════════════════════════════════
   ADMIN PREMIUM v1.0 — Premium tabs CSS (amber/orange theme)
   Appended to admin.css
   ══════════════════════════════════════════════════════════ */

/* ── Premium tab buttons ── */
.ap-tab {
  border-top: 2px solid transparent !important;
  background: none;
}
.ap-tab:hover { border-top-color: var(--admin-warning) !important; color: var(--admin-warning) !important; }
.ap-tab.active { border-top-color: var(--admin-warning) !important; color: var(--admin-warning) !important; }

/* ── Panel container ── */
.ap-panel { padding: 0; }
.ap-section { padding: 20px 24px; border-bottom: 1px solid var(--admin-border); }
.ap-section:last-child { border-bottom: none; }
.ap-loading { display:flex; align-items:center; gap:12px; padding:40px; color:var(--admin-text-muted); justify-content:center; }
.ap-error { padding:20px 24px; color:#f87171; background:rgba(239,68,68,.08); border-left:3px solid #ef4444; margin:16px 24px; border-radius:4px; }
.ap-empty { color:var(--admin-text-muted); font-size:13px; padding:20px 0; text-align:center; }

.ap-spinner {
  width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(245,158,11,.2); border-top-color:#f59e0b;
  animation:apSpin .7s linear infinite; flex-shrink:0;
}
@keyframes apSpin { to { transform:rotate(360deg); } }

/* ── KPI Cards ── */
.ap-kpi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.ap-kpi-card {
  background:var(--admin-bg-lighter); border:1px solid var(--admin-border);
  border-radius:12px; padding:16px; position:relative; overflow:hidden;
  transition:transform .2s, border-color .2s;
}
.ap-kpi-card:hover { transform:translateY(-2px); }
.ap-kpi-card::before { content:''; position:absolute; inset:0; opacity:.04; }
.ap-kpi-amber::before { background:linear-gradient(135deg,#f59e0b,transparent); border-color:rgba(245,158,11,.25); }
.ap-kpi-blue::before { background:linear-gradient(135deg,#3b82f6,transparent); border-color:rgba(59,130,246,.25); }
.ap-kpi-green::before { background:linear-gradient(135deg,#10b981,transparent); border-color:rgba(16,185,129,.25); }
.ap-kpi-purple::before { background:linear-gradient(135deg,var(--accent-light),transparent); border-color:color-mix(in srgb, var(--accent) 25%, transparent); }
.ap-kpi-orange::before { background:linear-gradient(135deg,#f97316,transparent); border-color:rgba(249,115,22,.25); }
.ap-kpi-amber { border-color:rgba(245,158,11,.25); }
.ap-kpi-blue { border-color:rgba(59,130,246,.25); }
.ap-kpi-green { border-color:rgba(16,185,129,.25); }
.ap-kpi-purple { border-color:color-mix(in srgb, var(--accent) 25%, transparent); }
.ap-kpi-orange { border-color:rgba(249,115,22,.25); }
.ap-kpi-icon { font-size:24px; margin-bottom:8px; }
.ap-kpi-value { font-size:26px; font-weight:800; color:#fff; line-height:1; margin-bottom:4px; }
.ap-kpi-label { font-size:12px; font-weight:600; color:var(--admin-text-muted); text-transform:uppercase; letter-spacing:.8px; }
.ap-kpi-sub { font-size:11px; color:rgba(255,255,255,.35); margin-top:4px; }

/* ── Charts ── */
.ap-charts-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ap-chart-box { background:var(--admin-bg-lighter); border:1px solid var(--admin-border); border-radius:12px; padding:16px; }
.ap-chart-wide { grid-column:1 / 2; }
.ap-chart-title { font-size:13px; font-weight:600; color:var(--admin-text-muted); margin-bottom:12px; }
.ap-svg-wrap { position:relative; }
.ap-svg-labels { display:flex; justify-content:space-between; font-size:10px; color:rgba(255,255,255,.3); margin-top:4px; }

/* ── Top list ── */
.ap-top-list { display:flex; flex-direction:column; gap:6px; }
.ap-top-row { display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--admin-bg-lighter); border-radius:8px; font-size:13px; }
.ap-rank { font-size:11px; font-weight:700; color:var(--admin-warning); width:24px; }
.ap-top-name { flex:1; color:var(--admin-text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-top-stat { font-size:12px; color:var(--admin-text-muted); }
.ap-top-revenue { font-weight:700; color:#10b981; font-size:13px; }

/* ── Toolbar ── */
.ap-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.ap-search {
  flex:1; min-width:200px; padding:8px 14px;
  background:var(--admin-bg-lighter); border:1px solid var(--admin-border);
  border-radius:8px; color:var(--admin-text); font-size:13px; outline:none;
}
.ap-search:focus { border-color:var(--admin-warning); }
.ap-select {
  padding:8px 14px; background:var(--admin-bg-lighter); border:1px solid var(--admin-border);
  border-radius:8px; color:var(--admin-text); font-size:13px; outline:none; cursor:pointer;
}
.ap-select:focus { border-color:var(--admin-warning); }

/* ── Buttons ── */
.ap-btn { padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:all .2s; }
.ap-btn-primary { background:linear-gradient(135deg,#f59e0b,#f97316); color:#000; }
.ap-btn-primary:hover { opacity:.9; transform:translateY(-1px); }
.ap-btn-outline { background:none; border:1px solid var(--admin-border); color:var(--admin-text-muted); }
.ap-btn-outline:hover, .ap-btn-outline.active { border-color:var(--admin-warning); color:var(--admin-warning); }
.ap-btn-danger { background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.3); color:#f87171; }
.ap-btn-danger:hover { background:rgba(239,68,68,.25); }
.ap-btn-sm { padding:5px 12px; font-size:12px; background:var(--admin-bg-lighter); border:1px solid var(--admin-border); color:var(--admin-text-muted); border-radius:6px; cursor:pointer; }
.ap-btn-sm:hover { border-color:var(--admin-warning); color:var(--admin-text); }

/* ── Table ── */
.ap-table { width:100%; border-collapse:collapse; font-size:13px; }
.ap-table thead th { padding:10px 12px; text-align:left; font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--admin-text-muted); border-bottom:1px solid var(--admin-border); }
.ap-table tbody tr { border-bottom:1px solid rgba(255,255,255,.04); transition:background .15s; }
.ap-table tbody tr:hover { background:rgba(255,255,255,.03); }
.ap-table tbody td { padding:10px 12px; vertical-align:middle; }
.ap-table-sm th, .ap-table-sm td { padding:7px 10px; }
.ap-row-suspended { opacity:.5; }

/* ── User cell ── */
.ap-user-cell { display:flex; align-items:center; gap:10px; }
.ap-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; }
.ap-name { font-weight:600; color:var(--admin-text); }
.ap-email { font-size:12px; color:var(--admin-text-muted); }
.ap-subdomain { font-size:11px; color:color-mix(in srgb, var(--accent) 70%, transparent); }
.ap-revenue { font-weight:600; color:#10b981; }
.ap-badge-suspended { font-size:10px; background:rgba(239,68,68,.15); color:#f87171; border-radius:4px; padding:1px 6px; margin-top:2px; display:inline-block; }

/* ── Plan badges ── */
.ap-plan { font-size:11px; font-weight:700; letter-spacing:.5px; padding:3px 8px; border-radius:6px; text-transform:uppercase; }
.ap-plan-free { background:rgba(100,116,139,.2); color:#94a3b8; }
.ap-plan-pro { background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--accent-light); }
.ap-plan-enterprise { background:rgba(245,158,11,.2); color:#fbbf24; }

/* ── Status badges ── */
.ap-status { font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; text-transform:uppercase; }
.ap-status-published, .ap-status-online { background:rgba(16,185,129,.15); color:#34d399; }
.ap-status-draft { background:rgba(100,116,139,.15); color:#94a3b8; }
.ap-status-archived { background:rgba(239,68,68,.1); color:#f87171; }
.ap-status-online { background:rgba(16,185,129,.15); color:#34d399; }
.ap-status-stopped, .ap-status-errored { background:rgba(239,68,68,.15); color:#f87171; }
.ap-status-unknown { background:rgba(100,116,139,.15); color:#94a3b8; }

/* ── Action buttons ── */
.ap-actions { display:flex; align-items:center; gap:6px; }
.ap-select-sm { padding:4px 8px; background:var(--admin-bg-lighter); border:1px solid var(--admin-border); border-radius:6px; color:var(--admin-text-muted); font-size:12px; cursor:pointer; }
.ap-btn-icon { padding:5px; background:none; border:1px solid var(--admin-border); border-radius:6px; cursor:pointer; font-size:14px; transition:all .15s; }
.ap-btn-suspend:hover { border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.08); }
.ap-btn-activate:hover { border-color:rgba(16,185,129,.4); background:rgba(16,185,129,.08); }
.ap-btn-delete:hover { border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.08); }

/* ── Pagination ── */
.ap-pagination { display:flex; align-items:center; justify-content:space-between; padding:12px 0 0; }
.ap-total { font-size:12px; color:var(--admin-text-muted); }
.ap-page-btns { display:flex; gap:8px; }

/* ── Finance ── */
.ap-two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ap-tx-list { display:flex; flex-direction:column; gap:6px; }
.ap-tx-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:12px; }
.ap-tx-status { flex-shrink:0; }
.ap-tx-name { flex:0 0 120px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-tx-form { flex:1; color:var(--admin-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-tx-amount { font-weight:700; color:#10b981; }
.ap-plan-bars { display:flex; flex-direction:column; gap:8px; }
.ap-plan-bar-row { display:flex; align-items:center; gap:10px; font-size:12px; }
.ap-plan-bar-row span:last-child { white-space:nowrap; color:var(--admin-text-muted); font-size:11px; }

/* ── System ── */
.ap-sys-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-bottom:16px; }
.ap-sys-card { background:var(--admin-bg-lighter); border:1px solid var(--admin-border); border-radius:10px; padding:12px; }
.ap-sys-label { font-size:11px; color:var(--admin-text-muted); margin-bottom:4px; }
.ap-sys-value { font-size:15px; font-weight:700; color:var(--admin-warning); }
.ap-mem-bars { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.ap-mem-row { display:flex; align-items:center; gap:10px; font-size:12px; }
.ap-mem-row > span:first-child { width:120px; color:var(--admin-text-muted); flex-shrink:0; }
.ap-mem-row > span:last-child { width:180px; color:var(--admin-text-muted); text-align:right; }
.ap-bar-wrap { flex:1; height:8px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden; }
.ap-bar-fill { height:100%; border-radius:4px; transition:width .5s ease; }

/* ── Logs ── */
.ap-logs {
  background:rgba(0,0,0,.5); border:1px solid var(--admin-border);
  border-radius:8px; padding:16px; font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:11px; line-height:1.6; color:#7dd3fc;
  max-height:400px; overflow-y:auto; white-space:pre-wrap; word-break:break-all;
}

/* ── Toast ── */
.ap-toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:rgba(10,10,15,.95); border:1px solid var(--admin-border); border-radius:10px;
  padding:10px 20px; font-size:13px; font-weight:600; z-index:9999;
  opacity:0; transition:all .25s; pointer-events:none; white-space:nowrap;
}
.ap-toast-show { opacity:1; transform:translateX(-50%) translateY(0); }
.ap-toast-success { border-color:rgba(16,185,129,.3); color:#34d399; }
.ap-toast-error { border-color:rgba(239,68,68,.3); color:#f87171; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .ap-charts-row, .ap-two-col { grid-template-columns:1fr; }
  .ap-kpi-grid { grid-template-columns:1fr 1fr; }
  .ap-chart-wide { grid-column:auto; }
  .ap-table { font-size:12px; }
  .ap-table thead { display:none; }
  .ap-table tbody tr { display:block; margin-bottom:8px; padding:8px; background:var(--admin-bg-lighter); border-radius:8px; }
  .ap-table tbody td { display:flex; justify-content:space-between; padding:4px 0; }
}


/* ===== css/first-run.css?v=2602240010 ===== */
/**
 * FirstRun v1.0 — Checklist + Tooltips + Daily Tip
 */

/* ── Checklist card ─────────────────────────────────────── */
.fr-checklist-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, rgba(6,182,212,.05) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 16px;
  animation: frSlideIn .4s cubic-bezier(.2,0,.2,1);
  position: relative;
  overflow: hidden;
}
.fr-checklist-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-light), #06b6d4, var(--accent-light));
  background-size: 200% 100%;
  animation: frShimmer 3s linear infinite;
}
@keyframes frShimmer { 0%{background-position:0 0} 100%{background-position:200% 0} }
@keyframes frSlideIn { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes frSlideOut { to{opacity:0;transform:translateY(-8px)} }

.fr-checklist-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.fr-checklist-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fr-checklist-icon { font-size: 28px; flex-shrink: 0; }
.fr-checklist-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  margin-bottom: 2px;
}
.fr-checklist-sub {
  font-size: 12px;
  color: color-mix(in srgb, var(--accent) 90%, transparent);
  font-weight: 600;
}
.fr-close-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.3);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: all .15s;
  flex-shrink: 0;
}
.fr-close-btn:hover { color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); }

/* ── Progress bar ─────────────────────────────────────────── */
.fr-progress-bar {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  overflow: visible;
  margin-bottom: 16px;
}
.fr-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-light), #06b6d4);
  transition: width .5s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent);
}
.fr-progress-label {
  position: absolute;
  right: 0;
  top: -18px;
  font-size: 10px;
  font-weight: 700;
  color: color-mix(in srgb, var(--accent) 90%, transparent);
}

/* ── Steps ────────────────────────────────────────────────── */
.fr-steps {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.fr-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  transition: background .15s;
}
.fr-step:hover { background: rgba(255,255,255,.03); }
.fr-step-check { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
.fr-step-label {
  font-size: 13px;
  color: rgba(248,250,252,.7);
  transition: color .2s;
}
.fr-step-done .fr-step-label {
  color: rgba(248,250,252,.95);
  font-weight: 500;
}
.fr-step:not(.fr-step-done) .fr-step-label {
  color: rgba(248,250,252,.45);
}

/* ── Badge popup ──────────────────────────────────────────── */
.fr-badge-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}
.fr-badge-popup-show { opacity: 1; }
.fr-badge-content {
  background: linear-gradient(135deg, #1a0a3e 0%, #0a1a3e 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 20px;
  padding: 40px 36px;
  text-align: center;
  max-width: 320px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 60px color-mix(in srgb, var(--accent) 20%, transparent);
  animation: frBounceIn .5s cubic-bezier(.17,.67,.29,1.32);
}
@keyframes frBounceIn { from{transform:scale(.7);opacity:0} to{transform:scale(1);opacity:1} }
.fr-badge-icon { font-size: 56px; display: block; margin-bottom: 12px; filter: drop-shadow(0 0 20px rgba(245,158,11,.6)); }
.fr-badge-title { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(245,158,11,.8); margin-bottom: 8px; }
.fr-badge-name { font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.fr-badge-desc { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.5; margin-bottom: 24px; }
.fr-badge-close {
  padding: 12px 32px;
  background: linear-gradient(135deg, var(--accent-light), #06b6d4);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.fr-badge-close:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent); }

/* ── Contextual tooltips ─────────────────────────────────── */
.fr-tooltip {
  position: fixed;
  z-index: 9990;
  max-width: 220px;
  background: rgba(10,5,30,.95);
  backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 20px color-mix(in srgb, var(--accent) 15%, transparent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s, transform .25s;
  pointer-events: all;
}
.fr-tooltip-show { opacity: 1; transform: translateX(0); }
.fr-tooltip-arrow {
  position: absolute;
  left: -7px;
  top: 14px;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 7px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.fr-tooltip-arrow::after {
  content: '';
  position: absolute;
  left: 2px;
  top: -5px;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid rgba(10,5,30,.95);
}
.fr-tooltip-text {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(248,250,252,.9);
  flex: 1;
}
.fr-tooltip-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.3);
  font-size: 12px;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
  line-height: 1;
}
.fr-tooltip-close:hover { color: rgba(255,255,255,.7); }

/* ── Daily tip card ──────────────────────────────────────── */
.fr-tip-card {
  background: rgba(245,158,11,.06);
  border: 1px solid rgba(245,158,11,.18);
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 12px;
}
.fr-tip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.fr-tip-icon { font-size: 18px; }
.fr-tip-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  color: rgba(245,158,11,.9);
  text-transform: uppercase;
  flex: 1;
}
.fr-tip-badge {
  font-size: 10px;
  background: rgba(245,158,11,.12);
  color: rgba(245,158,11,.7);
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}
.fr-tip-text {
  font-size: 13px;
  color: rgba(248,250,252,.75);
  line-height: 1.6;
  margin-bottom: 12px;
}
.fr-tip-text strong { color: rgba(248,250,252,.95); }

.fr-tip-progress {
  height: 3px;
  background: rgba(245,158,11,.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}
.fr-tip-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(245,158,11,.6), rgba(245,158,11,.9));
  border-radius: 2px;
  transition: width .4s ease;
  min-width: 4px;
}
.fr-tip-cta {
  display: inline-block;
  padding: 7px 16px;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 8px;
  color: #fbbf24;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
}
.fr-tip-cta:hover {
  background: rgba(245,158,11,.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245,158,11,.2);
}

/* ── Toast ───────────────────────────────────────────────── */
.fr-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(10,10,20,.95);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #f8fafc;
  z-index: 9995;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  white-space: nowrap;
}
.fr-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .fr-tooltip { max-width: 180px; font-size: 11px; }
  .fr-badge-content { padding: 28px 24px; }
  .fr-checklist-card { padding: 16px; }
}


/* ===== css/games/games-main.css?v=2602240010 ===== */
/* ═══════════════════════════════════════════════════════════════════
   GIRI GAMES PREMIUM v3.0 — Design natif au thème, immersif & addictif
   ═══════════════════════════════════════════════════════════════════ */

/* ── CONTENEUR PRINCIPAL — display géré par .view-container / .active ── */
/* NE PAS mettre display:flex ici — ça écraserait display:none de .view-container */
#view-games {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    background: var(--bg-primary);
    position: relative;
    flex-direction: column;
}
/* Quand actif, on active le flex */
#view-games.active {
    display: flex !important;
}

/* Grille subtile en overlay du thème — position:absolute pour rester dans le conteneur */
#view-games::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(var(--accent-primary, color-mix(in srgb, var(--accent) 3%, transparent)) 1px, transparent 1px),
        linear-gradient(90deg, var(--accent-primary, color-mix(in srgb, var(--accent) 3%, transparent)) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

.games-home {
    padding: 28px 32px 48px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ── HEADER ── */
.games-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.games-title-block h1 {
    font-size: 30px;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin: 0;
}

.games-title-block h1 .title-gradient {
    background: linear-gradient(135deg, var(--accent-primary, var(--accent)), #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.games-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 6px;
    font-weight: 400;
}

.games-header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── BOUTONS ── */
.games-btn {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color, rgba(71,85,105,0.4));
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 150ms ease;
    backdrop-filter: blur(8px);
    white-space: nowrap;
}

.games-btn:hover, .games-btn.active {
    background: color-mix(in srgb, var(--accent-primary, var(--accent)) 15%, transparent);
    color: var(--accent-primary, var(--accent-light));
    border-color: color-mix(in srgb, var(--accent-primary, var(--accent)) 40%, transparent);
    transform: translateY(-1px);
}

.games-btn-primary {
    padding: 10px 22px;
    border-radius: 10px;
    border: none;
    background: var(--accent-primary, var(--accent));
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    transition: all 150ms ease;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-primary, var(--accent)) 40%, transparent);
}

.games-btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-primary, var(--accent)) 50%, transparent);
}

/* ── BARRE JOUEUR — Profil intégré ── */
.games-player-bar {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color, color-mix(in srgb, var(--accent) 20%, transparent));
    border-radius: 20px;
    padding: 18px 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 200ms ease;
}

.games-player-bar:hover { border-color: var(--accent-primary, var(--accent)); }

.games-player-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary, var(--accent)), #06b6d4, var(--accent-primary, var(--accent)));
    background-size: 200% 100%;
    animation: shimmerBar 3s linear infinite;
}

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

.player-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary, var(--accent)), #06b6d4);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary, var(--accent)) 25%, transparent);
}

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

.player-name {
    font-size: 16px; font-weight: 700;
    color: var(--text-primary);
    display: flex; align-items: center; gap: 8px;
}

.player-title-badge {
    font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 20px;
    background: linear-gradient(135deg, var(--accent-primary, var(--accent)), #06b6d4);
    color: white;
    text-transform: uppercase; letter-spacing: 0.5px;
}

.player-rank-info {
    font-size: 12px; color: var(--text-secondary); margin-top: 3px;
}

.games-player-stats {
    display: flex; gap: 16px; flex-wrap: wrap; margin-left: auto;
}

.games-stat-badge {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color, rgba(51,65,85,0.3));
    font-size: 13px; font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.stat-val { color: var(--accent-primary, var(--accent-light)); }

.giris-badge {
    background: linear-gradient(135deg,
        color-mix(in srgb, #f59e0b 10%, var(--bg-secondary)),
        color-mix(in srgb, #f59e0b 5%, var(--bg-secondary)));
    border-color: rgba(245,158,11,0.3);
    color: #f59e0b;
    font-weight: 800;
}

.giri-coin {
    font-size: 11px; font-weight: 800;
    color: #f59e0b; letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ── DÉFI QUOTIDIEN ── */
.games-daily-challenge {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-primary, var(--accent)) 12%, var(--bg-secondary)),
        color-mix(in srgb, #06b6d4 8%, var(--bg-secondary)));
    border: 1px solid color-mix(in srgb, var(--accent-primary, var(--accent)) 30%, transparent);
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    cursor: pointer;
    transition: all 200ms ease;
    position: relative;
    overflow: hidden;
}

.games-daily-challenge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, color-mix(in srgb, var(--accent-primary, var(--accent)) 5%, transparent));
    opacity: 0;
    transition: opacity 200ms ease;
}

.games-daily-challenge:hover { transform: translateY(-2px); }
.games-daily-challenge:hover::after { opacity: 1; }

.daily-badge {
    font-size: 11px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px;
    background: linear-gradient(135deg, var(--accent-primary, var(--accent)), #06b6d4);
    color: white;
    white-space: nowrap;
    animation: pulseBadge 2s ease-in-out infinite;
}

@keyframes pulseBadge {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-primary, var(--accent)) 40%, transparent); }
    50% { box-shadow: 0 0 0 6px transparent; }
}

.daily-game-icon { font-size: 40px; flex-shrink: 0; }

.daily-info { flex: 1; min-width: 0; }
.daily-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.daily-desc { font-size: 13px; color: var(--text-secondary); }

.daily-reward {
    text-align: center; padding: 0 8px;
    flex-shrink: 0;
}

.reward-val {
    font-size: 32px; font-weight: 900;
    color: #f59e0b;
    text-shadow: 0 0 20px rgba(245,158,11,0.5);
}

.reward-label {
    font-size: 11px; color: #f59e0b;
    text-transform: uppercase; font-weight: 700;
}

.daily-btn {
    padding: 10px 24px; border-radius: 12px; border: none;
    background: var(--accent-primary, var(--accent)); color: white;
    font-weight: 700; font-size: 14px;
    cursor: pointer; flex-shrink: 0;
    transition: all 150ms ease;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-primary, var(--accent)) 40%, transparent);
}

.daily-btn:hover { opacity: 0.85; transform: scale(1.03); }

/* ── CATÉGORIES DE JEUX ── */
.games-category { margin-bottom: 32px; }

.games-category-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}

.games-category-title {
    font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-secondary);
    display: flex; align-items: center; gap: 8px;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

/* ── CARTE JEU — Premium, plus de "fenêtre collée" ── */
.game-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color, rgba(51,65,85,0.3));
    border-radius: 18px;
    padding: 22px 18px;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    text-align: center;
    animation: cardIn 400ms ease both;
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(16px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.game-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-primary, var(--accent)) 8%, transparent),
        transparent);
    opacity: 0;
    transition: opacity 200ms ease;
}

.game-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: color-mix(in srgb, var(--accent-primary, var(--accent)) 50%, transparent);
    box-shadow:
        0 12px 40px color-mix(in srgb, var(--accent-primary, var(--accent)) 15%, transparent),
        0 4px 16px rgba(0,0,0,0.15);
}

.game-card:hover::before { opacity: 1; }

.game-card:active { transform: translateY(-2px) scale(0.99); }

.game-tag {
    position: absolute; top: 10px; right: 10px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
    padding: 3px 8px; border-radius: 20px;
    text-transform: uppercase;
}

.game-tag.hot {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: white;
    animation: pulseBadge 2s ease-in-out infinite;
}

.game-tag.new {
    background: linear-gradient(135deg, #10b981, #06b6d4);
    color: white;
}

.game-icon {
    font-size: 44px; margin-bottom: 12px;
    display: block;
    transition: transform 200ms ease;
}

.game-card:hover .game-icon { transform: scale(1.15) rotate(-5deg); }

.game-name {
    font-size: 14px; font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.game-best-score {
    font-size: 12px; font-weight: 600;
    color: #f59e0b;
}

.game-play-count {
    font-size: 12px; color: var(--text-secondary);
}

/* ── BOTTOM ROW — Panels ── */
.games-bottom-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    margin-top: 8px;
}

@media (max-width: 700px) { .games-bottom-row { grid-template-columns: 1fr; } }

.games-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color, rgba(51,65,85,0.2));
    border-radius: 18px;
    padding: 20px;
}

.games-panel-title {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.activity-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color, rgba(51,65,85,0.1));
}

.activity-row:last-child { border-bottom: none; }
.activity-text { flex: 1; font-size: 13px; color: var(--text-primary); font-weight: 500; }
.activity-time { font-size: 13px; font-weight: 700; color: var(--accent-primary, var(--accent-light)); }

/* ── CONTENEUR JEU — intégré, fluide ── */
.game-container {
    display: flex; flex-direction: column;
    min-height: 100%;
    position: relative; z-index: 1;
}

.game-topbar {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 28px 14px;
    border-bottom: 1px solid var(--border-color, rgba(51,65,85,0.15));
    background: var(--bg-secondary);
    flex-shrink: 0;
    flex-wrap: wrap; gap: 12px;
}

.game-back-btn {
    padding: 8px 16px; border-radius: 10px;
    border: 1px solid var(--border-color, rgba(71,85,105,0.4));
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer; font-weight: 600; font-size: 13px;
    transition: all 150ms ease;
}

.game-back-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-primary, var(--accent));
    background: color-mix(in srgb, var(--accent-primary, var(--accent)) 10%, var(--bg-primary));
}

.game-title {
    font-size: 18px; font-weight: 700;
    color: var(--text-primary);
    display: flex; align-items: center; gap: 8px;
}

.game-topbar-right {
    margin-left: auto;
    display: flex; align-items: center; gap: 10px;
}

.game-topbar-giris {
    font-size: 13px; font-weight: 700; color: #f59e0b;
    padding: 5px 12px; border-radius: 20px;
    background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2);
}

.game-play-area {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 24px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
}

/* ── GAME OVER / FINISH OVERLAY ── */
.games-finish-overlay {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
    backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    z-index: 200;
    animation: overlayIn 300ms ease;
}

@keyframes overlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.games-finish-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color, rgba(51,65,85,0.3));
    border-radius: 24px; padding: 36px 40px;
    text-align: center; max-width: 420px; width: 90%;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3);
    animation: boxIn 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes boxIn {
    from { transform: scale(0.8) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.finish-icon { font-size: 56px; margin-bottom: 14px; }
.finish-title { font-size: 24px; font-weight: 800; color: var(--text-primary); margin: 0 0 20px; }

.finish-stats-row {
    display: flex; gap: 24px; justify-content: center; margin-bottom: 20px;
}

.finish-stat { text-align: center; }

.finish-val {
    font-size: 30px; font-weight: 800;
    color: var(--accent-primary, var(--accent-light));
}

.finish-lbl {
    font-size: 11px; color: var(--text-secondary);
    text-transform: uppercase; font-weight: 600; margin-top: 2px;
}

.finish-giris {
    font-size: 22px; font-weight: 900; color: #f59e0b;
    margin-bottom: 24px;
    text-shadow: 0 0 20px rgba(245,158,11,0.4);
}

.finish-actions {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}

/* ── MODAL ── */
.games-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    animation: overlayIn 200ms ease;
}

.games-modal-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 24px; padding: 32px;
    max-width: 560px; width: 92%; max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.4);
    animation: boxIn 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.games-modal-title {
    font-size: 20px; font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 20px;
    display: flex; align-items: center; justify-content: space-between;
}

.games-modal-close {
    cursor: pointer; font-size: 18px;
    color: var(--text-secondary); opacity: 0.7;
    transition: opacity 150ms; padding: 4px;
}
.games-modal-close:hover { opacity: 1; color: var(--text-primary); }

/* ── CLASSEMENT ── */
.leaderboard-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px; border-radius: 12px; margin-bottom: 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color, rgba(51,65,85,0.15));
    transition: background 150ms ease;
}
.leaderboard-row:hover { background: color-mix(in srgb, var(--accent-primary, var(--accent)) 8%, var(--bg-primary)); }

.lb-rank {
    font-size: 18px; font-weight: 800; width: 36px; text-align: center;
    flex-shrink: 0; color: var(--text-secondary);
}

.lb-rank.top1 { color: #f59e0b; font-size: 22px; }
.lb-rank.top2 { color: #94a3b8; font-size: 20px; }
.lb-rank.top3 { color: #cd7f32; font-size: 20px; }

.lb-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary, var(--accent)), #06b6d4);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}

.lb-name { flex: 1; font-weight: 600; color: var(--text-primary); font-size: 14px; }
.lb-title-small { font-size: 11px; color: var(--text-secondary); }
.lb-score { font-weight: 800; color: #f59e0b; font-size: 15px; white-space: nowrap; }
.lb-giris { font-size: 10px; color: #f59e0b; font-weight: 700; text-transform: uppercase; }

/* ── ACHIEVEMENT POPUP ── */
.games-achievement-popup {
    position: fixed; bottom: 100px; right: 24px;
    background: var(--bg-secondary);
    border: 1px solid color-mix(in srgb, var(--accent-primary, var(--accent)) 40%, transparent);
    border-radius: 16px; padding: 14px 18px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    transform: translateX(120%); transition: transform 400ms cubic-bezier(0.34,1.56,0.64,1);
    z-index: 2000; max-width: 320px;
}

.games-achievement-popup.show { transform: translateX(0); }

.ach-icon { font-size: 32px; }
.ach-info { flex: 1; }
.ach-title { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }
.ach-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }

/* ── PROFIL MODAL ── */
.profile-modal-header {
    text-align: center; padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.profile-big-avatar {
    width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--accent-primary, var(--accent)), #06b6d4);
    display: flex; align-items: center; justify-content: center;
    font-size: 40px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary, var(--accent)) 25%, transparent);
    cursor: pointer; transition: transform 200ms ease;
}

.profile-big-avatar:hover { transform: scale(1.08); }

.profile-player-name { font-size: 22px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }

.profile-title-badge {
    display: inline-block;
    padding: 4px 14px; border-radius: 20px;
    background: linear-gradient(135deg, var(--accent-primary, var(--accent)), #06b6d4);
    color: white; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.profile-giris-total {
    font-size: 28px; font-weight: 900; color: #f59e0b;
    text-shadow: 0 0 20px rgba(245,158,11,0.3);
}

.profile-giris-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; font-weight: 600; }

.profile-stats-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 12px; margin-bottom: 20px;
}

.profile-stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px; padding: 14px 10px; text-align: center;
}

.profile-stat-val { font-size: 24px; font-weight: 800; color: var(--text-primary); }
.profile-stat-lbl { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; font-weight: 600; margin-top: 2px; }

.profile-avatar-picker {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center; margin-top: 12px;
}

.profile-avatar-opt {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; cursor: pointer;
    border: 2px solid transparent;
    background: var(--bg-primary);
    transition: all 150ms ease;
}

.profile-avatar-opt:hover, .profile-avatar-opt.selected {
    border-color: var(--accent-primary, var(--accent));
    transform: scale(1.12);
}

/* ── TYPERACE ── */
.typerace-wrapper {
    width: 100%; max-width: 760px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 16px;
}

.typerace-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.typerace-lang-btns { display: flex; gap: 8px; }

.typerace-text-display {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px; padding: 20px 24px;
    font-size: 18px; line-height: 1.8;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Monaco', 'Fira Code', monospace;
    min-height: 80px; max-height: 140px;
    overflow: hidden;
    word-break: break-word;
    width: 100%; box-sizing: border-box;
}

.typerace-char { transition: color 80ms, background 80ms; border-radius: 2px; }
.typerace-char.correct { color: var(--text-primary); }
.typerace-char.wrong { color: #ef4444; background: rgba(239,68,68,0.15); text-decoration: underline; }
.typerace-char.current { color: var(--accent-primary, var(--accent-light)); background: color-mix(in srgb, var(--accent-primary, var(--accent)) 20%, transparent); border-radius: 3px; }

.typerace-input-wrap { width: 100%; }

.typerace-input {
    width: 100%; padding: 14px 18px; border-radius: 12px;
    border: 2px solid var(--border-color);
    background: var(--bg-primary); color: var(--text-primary);
    font-size: 16px; outline: none;
    transition: border-color 150ms ease;
    box-sizing: border-box;
}

.typerace-input:focus { border-color: var(--accent-primary, var(--accent)); }

.typerace-stats {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

.typerace-stat {
    text-align: center; padding: 12px 20px; border-radius: 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    min-width: 80px;
}

.typerace-stat .stat-num { font-size: 26px; font-weight: 800; color: var(--accent-primary, var(--accent-light)); }
.typerace-stat .stat-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; font-weight: 600; margin-top: 2px; }

.typerace-progress-bar {
    width: 100%; height: 6px; border-radius: 3px;
    background: var(--bg-primary);
    overflow: hidden;
}

.typerace-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary, var(--accent)), #06b6d4);
    border-radius: 3px;
    transition: width 100ms ease;
}

/* ── MEMORY ── */
.memory-wrapper {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    width: 100%;
}

.memory-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    justify-content: center;
}

.memory-size-btns { display: flex; gap: 8px; }

.memory-live-stats {
    font-size: 13px; color: var(--text-secondary); font-weight: 600;
    padding: 6px 12px; border-radius: 10px;
    background: var(--bg-primary); border: 1px solid var(--border-color);
}

.memory-grid {
    display: grid; gap: 8px;
    width: fit-content;
}

.memory-card {
    width: 72px; height: 72px;
    perspective: 600px;
    cursor: pointer;
}

.memory-card-face {
    position: absolute; inset: 0; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    backface-visibility: hidden;
    transition: transform 300ms ease;
    border: 1px solid var(--border-color);
}

.memory-card { position: relative; }
.memory-card-back { background: var(--bg-secondary); transform: rotateY(0deg); }
.memory-card-front { background: var(--bg-primary); transform: rotateY(180deg); }
.memory-card.flipped .memory-card-back { transform: rotateY(-180deg); }
.memory-card.flipped .memory-card-front { transform: rotateY(0deg); }
.memory-card.matched .memory-card-front {
    background: color-mix(in srgb, #22c55e 12%, var(--bg-primary));
    border-color: rgba(34,197,94,0.4);
}

/* ── GIMOTS (Wordle FR) ── */
.gimots-wrapper {
    width: 100%; max-width: 420px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}

.gimots-title { font-size: 22px; font-weight: 800; color: var(--text-primary); }
.gimots-subtitle { font-size: 12px; color: var(--text-secondary); }

.gimots-grid {
    display: flex; flex-direction: column; gap: 6px;
}

.gimots-row { display: flex; gap: 6px; }

.gimots-cell {
    width: 52px; height: 52px; border-radius: 10px;
    border: 2px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    transition: all 200ms ease;
    background: var(--bg-secondary);
    user-select: none;
}

.gimots-cell.correct { background: #22c55e; border-color: #22c55e; color: white; animation: flipCell 400ms ease; }
.gimots-cell.present { background: #f59e0b; border-color: #f59e0b; color: white; animation: flipCell 400ms ease 100ms; }
.gimots-cell.absent { background: var(--bg-primary); border-color: transparent; color: var(--text-secondary); animation: flipCell 400ms ease 200ms; }
.gimots-cell.current { border-color: var(--accent-primary, var(--accent)); animation: popCell 100ms ease; }

@keyframes flipCell {
    0% { transform: rotateX(0deg); }
    50% { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg); }
}

@keyframes popCell {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.gimots-keyboard { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.gimots-kb-row { display: flex; gap: 4px; justify-content: center; }

.gimots-key {
    min-width: 34px; height: 44px; border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary); color: var(--text-primary);
    font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all 100ms ease;
    display: flex; align-items: center; justify-content: center;
    padding: 0 6px; text-transform: uppercase;
    user-select: none;
}

.gimots-key:hover { background: var(--bg-primary); }
.gimots-key.wide { min-width: 52px; font-size: 11px; }
.gimots-key.correct { background: #22c55e; border-color: #22c55e; color: white; }
.gimots-key.present { background: #f59e0b; border-color: #f59e0b; color: white; }
.gimots-key.absent { background: var(--bg-primary); color: var(--text-muted, #475569); }

.gimots-message {
    font-size: 15px; font-weight: 700; color: var(--text-primary);
    padding: 8px 20px; border-radius: 12px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    text-align: center;
    animation: popCell 200ms ease;
}

/* ── TYPERACE — Boutons modes supplémentaires ── */
.tr-rapide-btn.active   { background: linear-gradient(135deg, #f59e0b, #f97316); border-color: #f59e0b; color: #fff; }
.tr-difficile-btn.active { background: linear-gradient(135deg, #ef4444, var(--accent)); border-color: #ef4444; color: #fff; }
.tr-lf-btn.active       { background: linear-gradient(135deg, #06b6d4, #3b82f6); border-color: #06b6d4; color: #fff; }
.tr-soins-btn           { border-color: rgba(167,139,250,0.35); }
.tr-soins-btn.active    { background: linear-gradient(135deg, var(--accent-light), #ec4899); border-color: var(--accent-light); color: #fff; }

.tr-mode-badge {
    font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px;
    margin-bottom: 8px; display: inline-block; text-transform: uppercase; letter-spacing: 0.05em;
}
.tr-rapide-badge   { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.tr-difficile-badge { background: rgba(239,68,68,0.15);  color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.tr-soins-badge    {
    background: linear-gradient(135deg, rgba(167,139,250,0.12), rgba(236,72,153,0.12));
    color: #c084fc;
    border: 1px solid rgba(167,139,250,0.35);
    font-size: 12px;
    letter-spacing: 0.08em;
}

/* ── LETTRE FLASH ── */
.lf-diff-tabs {
    display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.lf-diff-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }

.lf-diff-btn {
    padding: 6px 14px; border-radius: 20px;
    border: 1px solid var(--border-color);
    background: transparent; color: var(--text-secondary);
    cursor: pointer; font-size: 12px; font-weight: 600;
    transition: all 150ms ease;
}
.lf-diff-btn:hover { border-color: var(--accent-primary, var(--accent)); color: var(--text-primary); }
.lf-diff-btn.active {
    background: var(--accent-primary, var(--accent));
    border-color: var(--accent-primary, var(--accent)); color: #fff;
}

/* Zone grande lettre */
.lf-arena {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 32px 20px 24px; min-height: 220px;
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: 20px; position: relative;
}

.lf-letter-display {
    font-size: 130px; font-weight: 900; line-height: 1;
    color: var(--text-primary); text-transform: uppercase;
    font-family: 'SF Mono', 'Monaco', 'Fira Code', monospace;
    transition: color 120ms ease, transform 120ms ease;
    user-select: none;
    text-shadow: 0 0 60px rgba(167,139,250,0.35);
}

.lf-reaction-time {
    font-size: 15px; color: var(--text-secondary);
    margin-top: 8px; font-weight: 600; min-height: 22px;
}

.lf-feedback {
    font-size: 16px; font-weight: 600; min-height: 28px;
    margin-top: 6px; text-align: center;
}

.lf-start-hint {
    font-size: 14px; color: var(--text-secondary);
    animation: lf-blink 1.4s ease infinite;
}
@keyframes lf-blink { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* Clavier visuel */
.lf-keyboard-container {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: 16px; padding: 14px 18px;
}
.lf-kb-label {
    font-size: 11px; color: var(--text-secondary); text-transform: uppercase;
    font-weight: 600; margin-bottom: 10px; text-align: center; letter-spacing: 0.05em;
}
.lf-keyboard { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.lf-kb-row   { display: flex; gap: 5px; }

.lf-kb-key {
    width: 38px; height: 38px; border-radius: 7px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary); color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    transition: all 150ms ease; user-select: none;
}

.lf-kb-key.lf-kb-target {
    background: var(--accent-primary, var(--accent));
    border-color: var(--accent-primary, var(--accent)); color: #fff;
    box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 50%, transparent);
    transform: scale(1.18);
}

.lf-kb-key.lf-kb-wrong {
    background: #ef4444; border-color: #ef4444; color: #fff;
    animation: lf-shake 280ms ease;
}

@keyframes lf-shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-4px) rotate(-2deg); }
    75%      { transform: translateX(4px) rotate(2deg); }
}

@keyframes lf-pop-correct {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.lf-kb-hint {
    margin-top: 8px; font-size: 12px; color: var(--text-secondary);
    text-align: center; min-height: 18px;
}

/* Barre de précision */
.lf-acc-bar-wrap { padding: 0 4px; }
.lf-accuracy-bar {
    width: 100%; height: 7px; border-radius: 4px;
    background: var(--bg-secondary); overflow: hidden;
}
.lf-accuracy-fill {
    height: 100%; border-radius: 4px;
    transition: width 400ms ease, background 400ms ease;
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
    .games-home { padding: 16px 16px 40px; }
    .games-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .game-card { padding: 16px 12px; }
    .game-icon { font-size: 36px; }
    .games-player-stats { gap: 8px; }
    .games-stat-badge { font-size: 11px; padding: 5px 8px; }
    .game-play-area { padding: 12px; }
    .gimots-cell { width: 44px; height: 44px; font-size: 18px; }
    .gimots-key { min-width: 28px; height: 40px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   TYPERACE v6.0 — MEGA KIFF EDITION CSS
   ══════════════════════════════════════════════════════════════ */

/* ── Particles ──────────────────────────────────────────────── */
@keyframes tr-particle-fly {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ── Confetti ───────────────────────────────────────────────── */
@keyframes tr-confetti-fall {
    0%  { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
    80% { opacity: 1; }
    100%{ transform: translateY(100vh) translateX(var(--drift)) rotate(var(--rot)); opacity: 0; }
}

/* ── Ghost cursor ───────────────────────────────────────────── */
.tr-ch.tr-ghost {
    background: rgba(167,139,250,0.12);
    border-bottom: 2px solid rgba(167,139,250,0.55);
    position: relative;
}
.tr-ch.tr-ghost::after {
    content: '👻';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    animation: tr-ghost-bounce 1.2s ease-in-out infinite;
    pointer-events: none;
    line-height: 1;
}
@keyframes tr-ghost-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(-3px); }
}

/* ── Time Attack zone ───────────────────────────────────────── */
.tr-ta-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 16px 0 4px;
}
.tr-ta-countdown-wrap {
    text-align: center;
}
.tr-ta-countdown {
    font-size: 72px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: #10b981;
    text-shadow: 0 0 30px currentColor;
    transition: color 0.4s ease;
    min-width: 100px;
    display: block;
}
.tr-ta-countdown-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 2px;
}
.tr-countdown-urgent {
    animation: tr-cd-pulse 0.45s ease-in-out infinite alternate;
}
@keyframes tr-cd-pulse {
    from { transform: scale(1); filter: brightness(1); }
    to   { transform: scale(1.06); filter: brightness(1.3); }
}
.tr-ta-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tr-ta-stat {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 13px;
    color: var(--text-secondary);
}
.tr-ta-stat span {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.tr-ta-badge {
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(245,158,11,0.1));
    color: #10b981;
    border: 1px solid rgba(16,185,129,0.3);
}

/* ── Time Attack level buttons ──────────────────────────────── */
.tr-time30-btn.active { background: linear-gradient(135deg,#10b981,#059669); border-color:#10b981; color:#fff; }
.tr-time60-btn.active { background: linear-gradient(135deg,#f59e0b,#d97706); border-color:#f59e0b; color:#fff; }

/* ── Header actions row ─────────────────────────────────────── */
.tr-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tr-icon-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: all 150ms ease;
    flex-shrink: 0;
}
.tr-icon-btn:hover { background: rgba(255,255,255,0.12); transform: scale(1.08); }

/* ── Streak badge ───────────────────────────────────────────── */
.tr-streak-badge {
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.28);
    color: #f59e0b;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── WPM Sparkline ──────────────────────────────────────────── */
.tr-finish-sparkline {
    margin: 14px 0;
    padding: 12px 14px;
    background: rgba(167,139,250,0.05);
    border-radius: 10px;
    border: 1px solid rgba(167,139,250,0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.tr-sparkline-label {
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.65;
    letter-spacing: 0.4px;
}

/* ── Error heatmap ──────────────────────────────────────────── */
.tr-finish-heatmap {
    margin: 12px 0;
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.07);
}
.tr-hm-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tr-hm-keyboard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.tr-hm-row { display: flex; gap: 4px; }
.tr-hm-key {
    min-width: 27px;
    height: 27px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    transition: background 0.3s;
    cursor: default;
}

/* ── Finish streak ──────────────────────────────────────────── */
.tr-finish-streak {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #f59e0b;
    padding: 8px 12px;
    background: rgba(245,158,11,0.08);
    border-radius: 8px;
    border: 1px solid rgba(245,158,11,0.2);
    margin: 8px 0;
}



/* ===== css/games/games-common.css?v=2602240010 ===== */
/* =============================================
   GIRI GAMES - Styles jeux v2.0 - WORLD CLASS
   ============================================= */

/* ============ CHESS v2.0 ============ */
.chess-wrapper {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    flex-wrap: wrap;
}

.chess-left { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chess-right { display: flex; flex-direction: column; gap: 12px; min-width: 200px; max-width: 260px; }

.chess-player {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,0.1);
}
.chess-avatar { font-size: 20px; }
.chess-pname { flex: 1; font-size: 13px; font-weight: 600; color: #e2e8f0; }

.chess-clock {
    font-size: 18px; font-weight: 700; font-family: monospace;
    background: #1e293b; color: #94a3b8;
    padding: 4px 10px; border-radius: 6px;
    border: 2px solid transparent;
    transition: all 200ms;
}
.chess-clock.active { color: #f8fafc; border-color: var(--accent); background: #312e81; box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent); }

.chess-board-container {
    display: flex; align-items: stretch; gap: 4px;
    position: relative;
}

.chess-ranks-left {
    display: flex; flex-direction: column;
    justify-content: space-around;
    font-size: 11px; color: #64748b; font-weight: 600;
    padding: 2px 0;
    width: 16px;
}

.chess-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: min(480px, calc(100vw - 280px));
    aspect-ratio: 1;
    border: 3px solid #1e293b;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
}

.chess-files-bottom {
    display: flex; justify-content: space-around;
    font-size: 11px; color: #64748b; font-weight: 600;
    padding: 2px 0; padding-left: 20px;
    width: 100%;
}

.chess-sq {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: filter 120ms ease;
}
.chess-sq:hover { filter: brightness(1.15); }
.chess-sq.light { background: #f0d9b5; }
.chess-sq.dark  { background: #b58863; }
.chess-sq.selected { background: #f6f669 !important; box-shadow: inset 0 0 0 3px rgba(0,0,0,0.3); }
.chess-sq.last-move.light { background: #cdd26a; }
.chess-sq.last-move.dark  { background: #aaa23a; }
.chess-sq.valid-sq  {}
.chess-sq.capture-sq {}

.chess-piece-img {
    width: 85%; height: 85%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));
    transition: transform 120ms ease;
    z-index: 2; position: relative;
}
.chess-sq:hover .chess-piece-img { transform: scale(1.05); }

.chess-move-dot {
    width: 30%; height: 30%;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    pointer-events: none;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.chess-capture-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 6px solid rgba(0,0,0,0.35);
    pointer-events: none;
    z-index: 3;
}

/* Chess controls */
.chess-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.chess-btn {
    padding: 8px 14px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08); color: #e2e8f0;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all 150ms;
}
.chess-btn:hover { background: rgba(255,255,255,0.15); }
.chess-btn.primary { background: var(--accent); color: white; border-color: var(--accent); }
.chess-btn.primary:hover { background: var(--accent); }
.chess-select {
    width: 100%; padding: 8px 10px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08); color: #e2e8f0;
    font-size: 13px; cursor: pointer;
}
.chess-status {
    padding: 10px 14px; border-radius: 8px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    font-size: 14px; font-weight: 600; color: #e2e8f0;
}
.chess-moves-header { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 1px; }
.chess-moves-list {
    flex: 1; overflow-y: auto; max-height: 200px;
    background: rgba(0,0,0,0.2); border-radius: 8px;
    padding: 8px;
}
.chess-move-row { display: flex; gap: 6px; margin-bottom: 3px; align-items: center; }
.chess-move-num { font-size: 11px; color: #64748b; min-width: 24px; }
.chess-move { font-size: 13px; color: #94a3b8; padding: 2px 6px; border-radius: 4px; flex: 1; }
.chess-move.last { background: color-mix(in srgb, var(--accent) 30%, transparent); color: #e2e8f0; }
.chess-tips { font-size: 12px; color: #64748b; line-height: 1.8; }
.chess-tips strong { color: #94a3b8; display: block; margin-bottom: 4px; }

.chess-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.8); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px; z-index: 100;
}
.chess-overlay-box { text-align: center; padding: 32px; }
.chess-overlay-msg { font-size: 24px; font-weight: 700; color: white; margin-bottom: 20px; }
.chess-overlay-btns { display: flex; gap: 12px; justify-content: center; }

/* ============ SUDOKU v2.0 ============ */
.sudoku-wrapper {
    display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px;
}

.sudoku-topbar {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center;
}

.sudoku-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    width: min(450px, 95vw);
    aspect-ratio: 1;
    border: 3px solid #334155;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    background: #1e293b;
}

.sudoku-cell {
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(13px, 2.2vw, 22px);
    font-weight: 500;
    cursor: pointer;
    color: #e2e8f0;
    background: #0f172a;
    border-right: 1px solid #1e293b;
    border-bottom: 1px solid #1e293b;
    transition: background 80ms ease;
    position: relative;
    user-select: none;
    aspect-ratio: 1;
}

/* 3x3 box borders */
.sudoku-cell:nth-child(3n):not(:nth-child(9n)) { border-right: 2px solid #475569; }
.sudoku-cell:nth-child(9n) { border-right: none; }
.sudoku-cell.box-bottom { border-bottom: 2px solid #475569; }

.sudoku-cell:hover:not(.given) { background: #1e293b; }
.sudoku-cell.selected { background: #312e81 !important; box-shadow: inset 0 0 0 2px var(--accent); }
.sudoku-cell.highlighted { background: #172033; }
.sudoku-cell.error { color: #f87171 !important; }
.sudoku-cell.given { color: #f8fafc; font-weight: 700; cursor: default; }
.sudoku-cell.user-filled { color: var(--accent-light); font-weight: 600; }

.sudoku-cell .pencil-marks {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    font-size: clamp(6px, 0.8vw, 8px);
    color: #64748b;
    padding: 1px;
}
.sudoku-cell .pencil-marks span {
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}

.sudoku-numpad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    width: min(450px, 95vw);
}

.sudoku-num-btn {
    padding: 12px 8px;
    border-radius: 10px;
    border: 2px solid #1e293b;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 18px; font-weight: 700;
    cursor: pointer;
    transition: all 150ms;
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
}
.sudoku-num-btn:hover { background: var(--accent); border-color: var(--accent); color: white; transform: scale(1.05); }
.sudoku-num-btn.erase { font-size: 16px; color: #f87171; }

/* ============ MINESWEEPER v2.0 ============ */
.mines-wrapper {
    display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px;
}

.mines-topbar {
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center;
}

.mines-stat-box {
    background: #0f172a; border: 2px solid #1e293b;
    border-radius: 10px; padding: 8px 16px;
    text-align: center; min-width: 70px;
}
.mines-stat-label { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; }
.mines-stat-value { font-size: 20px; font-weight: 700; color: #e2e8f0; font-family: monospace; }

.mines-board {
    overflow: auto;
    max-width: 100%;
}

.mines-grid {
    display: inline-grid;
    gap: 0;
    border: 3px solid #0a1929;
    border-top: 3px solid #0a1929;
    border-left: 3px solid #0a1929;
    border-right: 3px solid #5b7a9e;
    border-bottom: 3px solid #5b7a9e;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(91,122,158,0.2);
}

.mine-cell {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800;
    cursor: pointer;
    background: #0f172a;
    border: 1px solid #0a0f1a;
    transition: filter 60ms ease;
    user-select: none;
    box-sizing: border-box;
}
.mine-cell.unrevealed {
    background: #2d3f55;
    /* Classic Windows 3D raised effect */
    border-top: 2px solid #5b7a9e;
    border-left: 2px solid #5b7a9e;
    border-bottom: 2px solid #0a1929;
    border-right: 2px solid #0a1929;
}
.mine-cell.unrevealed:hover { background: #384f6b; filter: brightness(1.1); }
.mine-cell.unrevealed:active {
    background: #243347;
    border-top: 2px solid #0a1929;
    border-left: 2px solid #0a1929;
    border-bottom: 2px solid #5b7a9e;
    border-right: 2px solid #5b7a9e;
}
.mine-cell.revealed {
    background: #111827;
    cursor: default;
    border: 1px solid #1f2a3a;
}
.mine-cell.flagged {
    background: #2d3f55;
    border-top: 2px solid #5b7a9e;
    border-left: 2px solid #5b7a9e;
    border-bottom: 2px solid #0a1929;
    border-right: 2px solid #0a1929;
    font-size: 16px;
}
.mine-cell.mine.revealed { background: #4a0e0e; border: 1px solid #7f1d1d; }
.mine-cell.mine-exploded { background: #ef4444 !important; border-color: #fca5a5 !important; }

.mine-cell[data-n="1"] { color: #60a5fa; }
.mine-cell[data-n="2"] { color: #34d399; }
.mine-cell[data-n="3"] { color: #f87171; }
.mine-cell[data-n="4"] { color: var(--accent-light); }
.mine-cell[data-n="5"] { color: #fb923c; }
.mine-cell[data-n="6"] { color: #22d3ee; }
.mine-cell[data-n="7"] { color: #e879f9; }
.mine-cell[data-n="8"] { color: #94a3b8; }

/* ============ MEMORY v2.0 ============ */
.memory-wrapper {
    display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 16px;
}

.memory-grid {
    display: grid;
    gap: 10px;
    perspective: 1200px;
}

.memory-card {
    width: 90px; height: 90px;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 14px;
}
@media (max-width: 600px) { .memory-card { width: 68px; height: 68px; } }

.memory-card.flipped { transform: rotateY(180deg); }
.memory-card.matched { transform: rotateY(180deg); pointer-events: none; }
.memory-card.matched .memory-card-front { opacity: 0.7; box-shadow: 0 0 16px rgba(34, 197, 94, 0.6); border-color: #22c55e; }

.memory-card-back, .memory-card-front {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(28px, 5vw, 42px);
    border: 2px solid transparent;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.memory-card-back {
    background: linear-gradient(135deg, #4c1d95, var(--accent));
    color: transparent;
    font-size: 28px;
}
.memory-card-back::after {
    content: '🪷';
    position: absolute;
    font-size: 32px;
    opacity: 0.9;
}

.memory-card-front {
    background: #1e293b;
    transform: rotateY(180deg);
    border-color: #334155;
}

.memory-stats {
    display: flex; gap: 24px; align-items: center;
    background: rgba(0,0,0,0.2); border-radius: 12px; padding: 12px 24px;
}
.memory-stat { text-align: center; }
.memory-stat-label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; }
.memory-stat-value { font-size: 22px; font-weight: 700; color: #e2e8f0; }

/* ============ 2048 v2.0 ============ */
.g2048-wrapper {
    display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px;
}

.g2048-topbar {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center;
}

.g2048-score-box {
    background: #1e293b; border: 2px solid #334155;
    border-radius: 10px; padding: 8px 20px; text-align: center;
}
.g2048-score-label { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; }
.g2048-score-value { font-size: 22px; font-weight: 700; color: #e2e8f0; }

.g2048-board {
    background: #0f172a;
    border-radius: 12px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: min(400px, 95vw);
    aspect-ratio: 1;
    border: 3px solid #1e293b;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    position: relative;
}

.g2048-cell {
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 3.5vw, 32px);
    font-weight: 800;
    background: #1e293b;
    color: transparent;
    transition: background 100ms ease;
    animation: cellPop 150ms ease;
}
@keyframes cellPop {
    0% { transform: scale(0.6); }
    80% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.g2048-cell[data-val]  { color: white; }
.g2048-cell[data-val="2"]    { background: #374151; color: #f9fafb; }
.g2048-cell[data-val="4"]    { background: #4b5563; color: #f9fafb; }
.g2048-cell[data-val="8"]    { background: #f97316; color: white; }
.g2048-cell[data-val="16"]   { background: #ea580c; color: white; }
.g2048-cell[data-val="32"]   { background: #dc2626; color: white; }
.g2048-cell[data-val="64"]   { background: #b91c1c; color: white; }
.g2048-cell[data-val="128"]  { background: var(--accent); color: white; font-size: clamp(13px, 2.8vw, 26px); }
.g2048-cell[data-val="256"]  { background: var(--accent); color: white; font-size: clamp(13px, 2.8vw, 26px); }
.g2048-cell[data-val="512"]  { background: #5b21b6; color: white; font-size: clamp(13px, 2.8vw, 26px); }
.g2048-cell[data-val="1024"] { background: #4c1d95; color: white; font-size: clamp(11px, 2.2vw, 22px); }
.g2048-cell[data-val="2048"] { background: #f59e0b; color: white; font-size: clamp(11px, 2.2vw, 22px); box-shadow: 0 0 24px rgba(245,158,11,0.6); }

/* ============ SNAKE v2.0 ============ */
.snake-wrapper {
    display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px;
}

.snake-canvas {
    border: 3px solid #334155;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    display: block;
    background: #0a0a1a;
}

/* ============ TETRIS v2.0 ============ */
.tetris-wrapper {
    display: flex; gap: 20px; align-items: flex-start; justify-content: center;
    flex-wrap: wrap; padding: 16px;
}

.tetris-canvas {
    border: 3px solid #334155;
    border-radius: 4px;
    display: block;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    background: #0a0a1a;
}

.tetris-sidebar {
    display: flex; flex-direction: column; gap: 16px; min-width: 130px;
}

.tetris-panel {
    background: #0f172a; border: 2px solid #1e293b;
    border-radius: 10px; padding: 12px;
}
.tetris-panel-title { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.tetris-panel-value { font-size: 22px; font-weight: 700; color: #e2e8f0; }

.tetris-next-canvas {
    border: 2px solid #1e293b; border-radius: 8px;
    background: #0a0a1a; display: block;
}

/* ═══════════════════════════════════════════════════════════════
   TYPERACE v3.0 — PREMIUM EDITION — Design Bleu Électrique ⚡
   Pour Miheko : apprendre à taper à la vitesse de la lumière
   ═══════════════════════════════════════════════════════════════ */

/* ── WRAPPER PRINCIPAL ── */
.tr-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px 20px 40px;
    min-height: 100%;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ── HEADER ── */
.tr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
    flex-wrap: wrap;
}

.tr-logo-block {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tr-logo-icon {
    font-size: 32px;
    filter: drop-shadow(0 0 12px rgba(59,130,246,0.8));
    animation: tr-float 3s ease-in-out infinite;
}

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

.tr-logo-text {
    font-size: 22px;
    font-weight: 900;
    background: linear-gradient(135deg, #3b82f6, #06b6d4, var(--accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

.tr-logo-sub {
    font-size: 10px;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    opacity: 0.7;
    display: block;
    margin-top: -4px;
}

.tr-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tr-level-tabs {
    display: flex;
    gap: 4px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 12px;
    padding: 4px;
}

.tr-level-btn {
    padding: 7px 14px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: all 180ms ease;
    white-space: nowrap;
}

.tr-level-btn:hover { color: #93c5fd; background: rgba(59,130,246,0.1); }
.tr-level-btn.active {
    background: linear-gradient(135deg, #1d4ed8, #0891b2);
    color: #fff;
    box-shadow: 0 2px 12px rgba(59,130,246,0.4);
}

/* Mode souple — couleur dorée apaisante */
.tr-souple-btn { border-color: rgba(251,191,36,0.4) !important; color: #fbbf24 !important; }
.tr-souple-btn:hover { color: #f59e0b !important; background: rgba(251,191,36,0.08) !important; }
.tr-souple-btn.active {
    background: linear-gradient(135deg, #92400e, #b45309) !important;
    color: #fef3c7 !important;
    box-shadow: 0 2px 12px rgba(251,191,36,0.35) !important;
}

.tr-new-btn {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid rgba(59,130,246,0.3);
    background: rgba(59,130,246,0.1);
    color: #60a5fa;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: all 150ms ease;
}
.tr-new-btn:hover {
    background: rgba(59,130,246,0.2);
    border-color: #3b82f6;
    transform: translateY(-1px);
}

/* ── BARRE DE STATS ── */
.tr-stats-bar {
    display: flex;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.tr-stat-card {
    flex: 1;
    min-width: 90px;
    max-width: 140px;
    background: linear-gradient(145deg, #0d1b2e, #0a1628);
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 14px;
    padding: 14px 12px 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color 300ms;
}

.tr-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #1d4ed8, #06b6d4);
}

.tr-stat-wpm-card {
    border-color: rgba(59,130,246,0.4);
    box-shadow: 0 4px 20px rgba(59,130,246,0.15);
}

.tr-stat-main {
    font-size: 26px;
    font-weight: 900;
    color: #e2e8f0;
    line-height: 1;
    transition: color 400ms;
    font-variant-numeric: tabular-nums;
}

.tr-stat-sub {
    font-size: 9px;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-top: 4px;
}

.tr-stat-icon {
    position: absolute;
    top: 8px; right: 8px;
    font-size: 14px;
    opacity: 0.4;
}

.tr-record-card { border-color: rgba(245,158,11,0.3); }
.tr-record-card::before { background: linear-gradient(90deg, #f59e0b, #f97316); }
.tr-record-val { color: #f59e0b !important; font-size: 20px !important; }

/* ── BARRE DE PROGRESSION ── */
.tr-progress-zone {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tr-progress-track {
    flex: 1;
    height: 8px;
    background: #0d1b2e;
    border-radius: 100px;
    border: 1px solid rgba(59,130,246,0.15);
    position: relative;
    overflow: visible;
}

.tr-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 100px;
    background: linear-gradient(90deg, #1d4ed8, #06b6d4, #3b82f6);
    box-shadow: 0 0 12px rgba(59,130,246,0.6);
    transition: width 100ms linear;
    position: relative;
}

.tr-progress-fill::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
    border-radius: 100px;
}

.tr-progress-cursor {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    transition: left 100ms linear;
    left: 0;
    filter: drop-shadow(0 0 6px rgba(59,130,246,0.9));
}

.tr-progress-pct {
    font-size: 12px;
    font-weight: 800;
    color: #3b82f6;
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── ARÈNE DE JEU ── */
.tr-arena {
    width: 100%;
    background: linear-gradient(145deg, #070d1a, #0a1422);
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 20px;
    padding: 32px 28px;
    position: relative;
    box-shadow:
        0 0 0 1px rgba(59,130,246,0.08),
        0 8px 40px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(59,130,246,0.1);
    cursor: text;
}

.tr-arena::before {
    content: '';
    position: absolute;
    top: -1px; left: 20px; right: 20px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, #06b6d4, #3b82f6, transparent);
    border-radius: 100px;
}

/* ── TEXTE CARACTÈRE PAR CARACTÈRE ── */
.tr-text-display {
    font-size: 22px;
    line-height: 2;
    letter-spacing: 0.3px;
    word-spacing: 4px;
    user-select: none;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-weight: 500;
    /* FIX OVERFLOW : empêche le texte de déborder du cadre bleu */
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Espaces visuels — taille réduite pour ne pas déborder */
.tr-ch.tr-space-ch { display: inline; min-width: 0.35em; }
.tr-ch.tr-space-ch.pending { color: transparent; }
.tr-ch.tr-space-ch.correct { background: rgba(96,165,250,0.15); border-radius: 2px; }
.tr-ch.tr-space-ch.wrong   { background: rgba(248,113,113,0.25); border-radius: 2px; }

.tr-ch { display: inline; transition: color 80ms; }
.tr-ch.pending { color: #1e3a5f; }
.tr-ch.correct { color: #60a5fa; }
.tr-ch.wrong {
    color: #f87171;
    text-decoration: underline wavy #f87171;
    text-underline-offset: 3px;
}

.tr-ch.current {
    color: #f8fafc;
    position: relative;
}

/* Curseur clignotant sur le caractère actuel */
.tr-caret {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: #3b82f6;
    margin-left: 1px;
    vertical-align: middle;
    border-radius: 2px;
    animation: tr-blink 0.9s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(59,130,246,0.8);
    position: relative;
    top: 1px;
}

@keyframes tr-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ── HINT DE DÉMARRAGE ── */
.tr-start-hint {
    margin-top: 16px;
    text-align: center;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: opacity 400ms, transform 400ms;
}

.tr-hint-pulse {
    display: inline-block;
    color: #3b82f6;
    animation: tr-pulse-hint 1.2s ease-in-out infinite;
    margin-right: 6px;
}

@keyframes tr-pulse-hint {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; }
}

/* ── INPUT (invisible mais actif) ── */
.tr-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    border: none;
    outline: none;
}

/* ── BOOST ZONE ── */
.tr-boost-zone { min-height: 44px; display: flex; align-items: center; justify-content: center; }

.tr-boost-msg {
    font-size: 14px;
    font-weight: 700;
    color: #93c5fd;
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 100px;
    padding: 8px 20px;
    animation: tr-pop 0.3s cubic-bezier(0.34,1.56,0.64,1);
    text-align: center;
}

/* Style spécial Maître Maha Giri — or sacré */
.tr-maha-msg {
    font-size: 15px;
    color: #fde68a;
    background: linear-gradient(135deg, rgba(120,53,15,0.4), rgba(180,83,9,0.25));
    border: 1px solid rgba(251,191,36,0.4);
    box-shadow: 0 0 20px rgba(251,191,36,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
    font-style: italic;
    letter-spacing: 0.3px;
}

@keyframes tr-pop {
    from { transform: scale(0.7) translateY(6px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── BADGE NIVEAU ── */
.tr-level-badge {
    font-size: 11px;
    color: #1d4ed8;
    background: rgba(29,78,216,0.1);
    border: 1px solid rgba(29,78,216,0.2);
    border-radius: 100px;
    padding: 4px 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ── OVERLAY DE FIN ── */
.tr-finish-overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 9, 18, 0.92);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 20px;
    animation: tr-overlay-in 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tr-overlay-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

.tr-finish-box {
    background: linear-gradient(145deg, #0a1628, #0d1b2e);
    border: 1px solid rgba(59,130,246,0.3);
    border-radius: 24px;
    padding: 36px 32px;
    text-align: center;
    max-width: 520px;
    width: 90%;
    box-shadow:
        0 0 0 1px rgba(59,130,246,0.1),
        0 24px 80px rgba(0,0,0,0.6),
        0 0 60px rgba(59,130,246,0.08);
    position: relative;
}

.tr-finish-box::before {
    content: '';
    position: absolute;
    top: -1px; left: 30px; right: 30px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, #06b6d4, #3b82f6, transparent);
}

.tr-new-record-banner {
    background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(249,115,22,0.2));
    border: 1px solid rgba(245,158,11,0.5);
    border-radius: 100px;
    padding: 6px 20px;
    font-size: 13px;
    font-weight: 900;
    color: #f59e0b;
    display: inline-block;
    margin-bottom: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: tr-record-glow 1.5s ease-in-out infinite;
}

@keyframes tr-record-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(245,158,11,0.3); }
    50% { box-shadow: 0 0 24px rgba(245,158,11,0.6); }
}

.tr-finish-medal {
    font-size: 42px;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 16px rgba(59,130,246,0.6));
}

.tr-finish-desc {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 24px;
    opacity: 0.9;
}

/* Citation du Maître en fin de course */
.tr-finish-maha {
    font-size: 13px;
    font-style: italic;
    color: #fde68a;
    background: linear-gradient(135deg, rgba(120,53,15,0.35), rgba(180,83,9,0.2));
    border: 1px solid rgba(251,191,36,0.35);
    border-radius: 12px;
    padding: 10px 18px;
    margin: 0 0 20px;
    letter-spacing: 0.3px;
    box-shadow: 0 0 18px rgba(251,191,36,0.1);
    animation: tr-maha-fadein 0.8s ease;
}
@keyframes tr-maha-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tr-finish-stats {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 24px;
}

.tr-finish-stat {
    background: rgba(15,23,42,0.8);
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 14px;
    padding: 14px 20px;
    min-width: 80px;
}

.tr-finish-val {
    font-size: 30px;
    font-weight: 900;
    color: #e2e8f0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tr-finish-lbl {
    font-size: 10px;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-top: 4px;
}

/* ── ÉCHELLE DE VITESSE ── */
.tr-speed-scale {
    background: rgba(7,13,26,0.8);
    border: 1px solid rgba(59,130,246,0.15);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 20px;
}

.tr-speed-scale-label {
    font-size: 10px;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-bottom: 10px;
}

.tr-speed-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 6px;
}

.tr-speed-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1e293b;
    border: 1px solid #2d3748;
    transition: all 300ms;
    flex-shrink: 0;
}

.tr-speed-dot.lit {
    border-color: transparent;
    box-shadow: 0 0 8px currentColor;
}

.tr-speed-tiers-labels {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

/* ── GIRIS ── */
.tr-finish-giris {
    font-size: 20px;
    font-weight: 900;
    color: #f59e0b;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(245,158,11,0.5);
}

/* ── BOUTONS FINISH ── */
.tr-finish-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}

.tr-btn-primary {
    padding: 13px 28px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #1d4ed8, #0891b2);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 180ms ease;
    box-shadow: 0 4px 16px rgba(29,78,216,0.4);
}

.tr-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(29,78,216,0.5);
}

.tr-btn-outline {
    padding: 13px 24px;
    border-radius: 12px;
    border: 1px solid rgba(59,130,246,0.3);
    background: transparent;
    color: #60a5fa;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 180ms ease;
}

.tr-btn-outline:hover {
    background: rgba(59,130,246,0.1);
    transform: translateY(-1px);
}

.tr-finish-record {
    font-size: 13px;
    color: #334155;
    font-weight: 600;
}

.tr-finish-record strong { color: #f59e0b; }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
    .tr-text-display { font-size: 18px; }
    .tr-arena { padding: 20px 16px; }
    .tr-finish-stats { gap: 8px; }
    .tr-finish-val { font-size: 22px; }
    .tr-finish-stat { padding: 10px 12px; min-width: 60px; }
    .tr-stat-main { font-size: 20px; }
    .tr-finish-actions { flex-direction: column; }
}


/* ===== css/premium-spacing.css?v=2602240010 ===== */
/* ================================================
   PRODUCTIVEAPP — PREMIUM SPACING OVERRIDE
   Corrige l'espacement serré dans toute l'application
   Backup: productiveapp-backup-spacing-20260223-1847
   v1.0 — 2026-02-23
   ================================================ */

/* ===================================================
   1. CSS VARIABLES — Uplift base spacing tokens
   =================================================== */
:root {
    --space-xs: 6px;          /* was 4px */
    --ps-badge-v: 5px;
    --ps-badge-h: 12px;
    --ps-badge-h: 28px;
    --ps-item-h: 44px;
    --ps-row-h:  52px;
}

/* ===================================================
   2. STATUS BADGES / PILLS / STAGE TAGS
   — Les petits badges colorés répandus dans toute l'app
   =================================================== */

/* Pattern général : tout élément inline portant un rôle visuel de badge */
[class*="status-"]:not(div):not(section):not(header):not(aside):not(nav):not(main):not(form):not([class*="status-bar"]):not([class*="status-panel"]):not([class*="status-section"]):not([class*="status-dot"]):not([class*="status-text"]),
[class*="-status"]:not(div):not(section):not(header):not(main):not(form):not([class*="status-bar"]):not([class*="-status-dot"]):not([class*="-status-text"]):not([class*="profile-status"]),
[class*="-badge"]:not(button):not(input):not(div[class*="container"]):not(div[class*="wrap"]):not(div[class*="section"]):not(div[class*="panel"]):not(div[class*="header"]),
[class*="badge-"]:not(button):not(input),
[class*="-stage"]:not(div[class*="container"]):not(div[class*="section"]),
[class*="stage-"]:not(div[class*="container"]),
[class*="-chip"]:not(input):not(div[class*="container"]):not(div[class*="wrap"]):not(div[class*="section"]),
[class*="chip-"]:not(.chip-delete):not(input),
[class*="-pill"]:not(div[class*="container"]),
[class*="pill-"]:not(div[class*="container"]),
[class*="-label-badge"],
[class*="priority-"]:not(div):not(section):not(input):not(button):not([class*="container"]):not([class*="wrap"]):not([class*="section"]):not([class*="panel"]):not([class*="header"]):not([class*="block"]) {
    padding-top:    var(--ps-badge-v, 5px) !important;
    padding-bottom: var(--ps-badge-v, 5px) !important;
    padding-left:   var(--ps-badge-h, 12px) !important;
    padding-right:  var(--ps-badge-h, 12px) !important;
    line-height: 1.45 !important;
    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/* ===================================================
   3. CRM — Deals, Contacts, Stages
   =================================================== */
.gcrm-mini-deal-stage,
[class*="gcrm-"][class*="stage"],
[class*="gcrm-"][class*="badge"],
[class*="gcrm-"][class*="tag"],
[class*="gcrm-"][class*="status"],
.crm-deal-stage,
.crm-status-badge,
.contact-badge,
.deal-badge,
.pipeline-stage {
    padding: 5px 12px !important;
    min-height: 25px !important;
    line-height: 1.4 !important;
    font-size: 0.78rem !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ===================================================
   4. CUSTOM SELECT BUTTON & OPTIONS
   =================================================== */
.custom-select-btn {
    padding: 10px 16px !important;
    min-height: 44px !important;
    gap: 12px !important;
    border-radius: 14px !important;
}

.custom-select-btn .select-avatar,
.custom-select-btn .select-avatar img {
    width: 28px !important;
    height: 28px !important;
}

.custom-select-options {
    padding: 6px !important;
    border-radius: 16px !important;
}

.custom-select-option {
    padding: 11px 16px !important;
    min-height: 46px !important;
    gap: 12px !important;
    border-radius: 10px !important;
    margin: 1px 0 !important;
}

.custom-select-option:first-child,
.custom-select-option:last-child {
    border-radius: 10px !important;
}

.custom-select-option img {
    width: 28px !important;
    height: 28px !important;
}

/* ===================================================
   5. MAIL ROWS
   =================================================== */
.mail-row {
    min-height: 56px !important;
    padding: 0 20px !important;
    gap: 16px !important;
    align-items: center !important;
}

.mail-row-recipient {
    min-width: 200px !important;
    max-width: 230px !important;
    font-size: 0.93rem !important;
    padding: 6px 0 !important;
}

.mail-row-content {
    gap: 10px !important;
}

/* ===================================================
   6. TABLES — lignes & cellules
   =================================================== */
table td,
table th,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > thead > tr > td,
.table > thead > tr > th,
[class*="table-"] td,
[class*="table-"] th {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    line-height: 1.5 !important;
}

/* ===================================================
   7. DROPDOWN / SELECT ITEMS globaux
   =================================================== */
.dropdown-item,
[class*="dropdown-item"],
[class*="-select-option"],
[class*="select-option-"],
.pf-option:not(.pf-option-delete),
[class*="pf-option"]:not([class*="delete"]):not(button) {
    padding: 10px 16px !important;
    min-height: 44px !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
}

/* ===================================================
   8. COMMAND PALETTE
   =================================================== */
[class*="command-item"],
[class*="cmd-item"],
[class*="palette-item"],
[class*="shortcut-item"] {
    padding: 10px 16px !important;
    min-height: 46px !important;
    gap: 12px !important;
}

/* ===================================================
   9. BILLING / ANALYTICS — Status & Plan badges
   =================================================== */
[class*="invoice-status"],
[class*="payment-status"],
[class*="subscription"][class*="status"],
[class*="plan-badge"],
[class*="plan-tag"],
[class*="billing-badge"],
[class*="stat-badge"],
[class*="metric-badge"],
[class*="tier-badge"],
[class*="level-badge"] {
    padding: 5px 12px !important;
    min-height: 26px !important;
    line-height: 1.4 !important;
}

/* ===================================================
   10. FORM GROUPS — Respiration entre champs
   =================================================== */
.form-group,
[class*="form-group"],
[class*="field-group"],
[class*="-field"]:not(input):not(textarea):not(select) {
    margin-bottom: 20px !important;
}

/* Labels */
.form-group label,
[class*="form-group"] label,
[class*="field-group"] label {
    margin-bottom: 8px !important;
    display: block !important;
}

/* ===================================================
   11. CARD HEADERS & BODIES
   =================================================== */
[class*="card-header"]:not(button),
[class*="panel-header"]:not(button),
[class*="section-header"]:not(button):not([class*="view-"]) {
    padding: 16px 22px !important;
    min-height: 52px !important;
    align-items: center !important;
}

[class*="card-body"]:not([class*="toolbar"]):not([class*="header"]),
[class*="panel-body"]:not([class*="toolbar"]):not([class*="header"]) {
    padding: 20px 22px !important;
}

/* ===================================================
   12. PRODUCTIVE TOOLS — Badges & Tags
   =================================================== */
[class*="pt-badge"],
[class*="pt-tag"],
[class*="pt-status"],
[class*="pt-pill"],
[class*="tool-badge"],
[class*="tool-tag"],
[class*="tool-status"] {
    padding: 5px 12px !important;
    min-height: 26px !important;
    line-height: 1.4 !important;
}

/* ===================================================
   13. GAMIFICATION — XP badges, level chips
   =================================================== */
[class*="xp-badge"],
[class*="level-chip"],
[class*="rank-badge"],
[class*="achievement"][class*="badge"],
[class*="gami"][class*="badge"],
[class*="gami"][class*="chip"] {
    padding: 5px 12px !important;
    min-height: 26px !important;
}

/* ===================================================
   14. TASK ITEMS & LIST ITEMS
   =================================================== */
[class*="task-item"]:not(div[class*="container"]):not(div[class*="header"]),
.task-card {
    padding: 14px 18px !important;
    min-height: 52px !important;
}

/* ===================================================
   15. TAGS GÉNÉRIQUES — input tag, filter tag
   =================================================== */
[class*="filter-tag"],
[class*="filter-chip"],
[class*="input-tag"],
[class*="tag-item"],
[class*="selected-tag"],
[class*="active-tag"],
[class*="applied-filter"] {
    padding: 5px 12px !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ===================================================
   16. USER FILTER BAR
   =================================================== */
.user-filter-bar {
    padding: 10px 24px 10px 18px !important;
    min-height: 46px !important;
    gap: 12px !important;
}

/* ===================================================
   17. GENERAL INPUTS & SELECTS — cohérence padding
   =================================================== */
input[type="text"]:not([class*="auth"]):not([class*="search-main"]),
input[type="email"]:not([class*="auth"]),
input[type="password"]:not([class*="auth"]),
input[type="number"]:not([class*="auth"]),
input[type="search"]:not([class*="search-main"]),
textarea:not([class*="auth"]):not([class*="gn-"]):not([class*="note-"]),
select:not([class*="auth"]) {
    padding: 10px 14px !important;
    min-height: 42px !important;
    line-height: 1.5 !important;
    border-radius: 10px !important;
}

/* ===================================================
   18. BUTTONS — Minimum taille confortable
   =================================================== */
button:not(.chip-delete):not([class*="icon-"]):not([class*="-icon"]):not([class*="close"]):not([class*="toggle"]):not([class*="fab"]):not([class*="round"]):not([class*="circular"]):not([class*="auth-"]):not(.gn-):not(.sidebar-notif-bell) {
    min-height: 38px !important;
    line-height: 1.4 !important;
}

/* Boutons avec texte (padding horizontal) */
.btn,
[class*="btn-"]:not([class*="icon"]):not([class*="close"]),
[class*="-btn"]:not([class*="icon"]):not([class*="close"]):not([class*="auth-"]) {
    padding-top:    8px !important;
    padding-bottom: 8px !important;
}

/* ===================================================
   19. MODAL — Headers & Footers
   =================================================== */
.modal-header,
[class*="modal-header"] {
    padding: 20px 28px !important;
    min-height: 62px !important;
}

.modal-body,
[class*="modal-body"] {
    padding: 24px 28px !important;
}

.modal-footer,
[class*="modal-footer"] {
    padding: 16px 28px !important;
    gap: 12px !important;
}

/* ===================================================
   20. SIDEBAR ITEMS
   =================================================== */
.menu-item,
.sidebar-item,
[class*="menu-item"]:not([class*="mega-"]):not([class*="context-"]) {
    padding: 9px 14px !important;
    min-height: 40px !important;
}

/* ===================================================
   21. TOOLTIP / POPOVER
   =================================================== */
[class*="tooltip"],
[class*="popover"] {
    padding: 8px 14px !important;
    line-height: 1.5 !important;
}

/* ===================================================
   22. TABS
   =================================================== */
[class*="tab-item"]:not([class*="container"]),
[class*="tab-btn"]:not([class*="container"]) {
    padding: 10px 18px !important;
    min-height: 42px !important;
}

/* ===================================================
   23. BREADCRUMB ITEMS
   =================================================== */
[class*="breadcrumb"] [class*="item"],
[class*="breadcrumb"] span,
[class*="breadcrumb"] a {
    padding: 4px 6px !important;
    line-height: 1.5 !important;
}

/* ===================================================
   24. NOTES — Tags et labels
   =================================================== */
[class*="note-tag"],
[class*="note-label"],
[class*="note-badge"] {
    padding: 5px 12px !important;
    min-height: 26px !important;
}

/* ===================================================
   25. QUICK-ADD — badges et options
   =================================================== */
[class*="quick-add"][class*="badge"],
[class*="quick-add"][class*="option"],
[class*="qa-badge"],
[class*="qa-option"] {
    padding: 6px 14px !important;
    min-height: 32px !important;
}

/* ===================================================
   26. AMÉLIORATION GLOBALE LINE-HEIGHT & LISIBILITÉ
   =================================================== */
body {
    line-height: 1.55;
}

p, li, td, th, span:not([class*="icon"]):not([class*="emoji"]) {
    line-height: 1.55;
}


/* ===== css/design-system-v2.css?v=2603081140 ===== */
/* ==========================================================================
   DESIGN SYSTEM v2.1 — MahaGiri Premium (Theme-Aware)
   Fix: All colors use theme variables, no hardcoded dark values
   ========================================================================== */

/* ══════════════════════════════════════════════════════════
   1. VARIABLES — dark theme defaults (overridden per-theme)
   ══════════════════════════════════════════════════════════ */
:root {
    --shadow-premium-sm: 0 1px 3px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25);
    --shadow-premium-md: 0 2px 6px rgba(0,0,0,0.5),  0 8px 24px rgba(0,0,0,0.3);
    --shadow-premium-lg: 0 4px 12px rgba(0,0,0,0.55), 0 16px 40px rgba(0,0,0,0.35);
    --shadow-premium-xl: 0 8px 24px rgba(0,0,0,0.6),  0 32px 64px rgba(0,0,0,0.4);

    --ds-card-bg:           var(--bg-card, rgba(16,16,26,0.84));
    --ds-card-border:       var(--border, rgba(255,255,255,0.10));
    --ds-card-radius:       16px;
    --ds-card-shadow:       0 1px 3px rgba(0,0,0,0.15), 0 6px 20px rgba(0,0,0,0.08);
    --ds-card-shadow-hover: 0 4px 12px rgba(0,0,0,0.18), 0 20px 48px rgba(0,0,0,0.12);

    --ds-section-bg:        var(--bg-secondary, rgba(16,16,26,0.60));
    --ds-modal-bg:          var(--bg-primary, rgba(12,12,20,0.96));
    --ds-hover-bg:          rgba(128,128,128,0.08);
    --ds-sidebar-hover:     rgba(128,128,128,0.10);
    --ds-glass-bg:          rgba(128,128,128,0.07);
    --ds-glass-border:      var(--border, rgba(128,128,128,0.12));
    --ds-glass-hover:       rgba(128,128,128,0.10);
    --ds-text-muted:        var(--text-muted, rgba(128,128,128,0.52));
    --ds-text-placeholder:  var(--text-muted, rgba(128,128,128,0.36));
    --ds-scrollbar-thumb:   rgba(128,128,128,0.18);
    --ds-shimmer:           rgba(128,128,128,0.06);
    --ds-line-glow:         rgba(128,128,128,0.12);
}

/* ── Light theme overrides ── */
[data-theme="ivory"],
[data-theme="paper"],
[data-theme="porcelain"],
[data-theme="sakura"],
[data-theme="mint"],
[data-theme="pastel"],
[data-theme="zen"],
[data-theme="nordic"],
[data-theme="watercolor"],
[data-theme="printemps"],
[data-theme="ete"],
[data-theme="pearl"],
[data-theme="snow"],
[data-theme="bamboo"],
[data-theme="provence"],
[data-theme="sterling"] {
    --ds-card-shadow:       0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
    --ds-card-shadow-hover: 0 4px 12px rgba(0,0,0,0.10), 0 12px 32px rgba(0,0,0,0.06);
    --ds-hover-bg:          rgba(0,0,0,0.04);
    --ds-sidebar-hover:     rgba(0,0,0,0.06);
    --ds-glass-bg:          rgba(0,0,0,0.03);
    --ds-glass-hover:       rgba(0,0,0,0.06);
    --ds-shimmer:           rgba(0,0,0,0.04);
    --ds-line-glow:         rgba(0,0,0,0.06);
    --ds-scrollbar-thumb:   rgba(0,0,0,0.15);
    --shadow-premium-sm: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
    --shadow-premium-md: 0 2px 6px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.06);
    --shadow-premium-lg: 0 4px 12px rgba(0,0,0,0.12), 0 16px 40px rgba(0,0,0,0.08);
    --shadow-premium-xl: 0 8px 24px rgba(0,0,0,0.15), 0 32px 64px rgba(0,0,0,0.10);
}

/* ══════════════════════════════════════════════════════════
   2. CARTE UNIVERSELLE PREMIUM
   ══════════════════════════════════════════════════════════ */

@keyframes ds-shimmer {
    0%   { transform: translateX(-100%) skewX(-12deg); }
    100% { transform: translateX(250%)  skewX(-12deg); }
}
@keyframes ds-glow-pulse {
    0%,100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

.stat-card {
    background: var(--ds-card-bg);
    border: 1px solid var(--ds-card-border);
    border-radius: var(--ds-card-radius);
    box-shadow: var(--ds-card-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content: '';
    position: absolute;
    top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, var(--ds-shimmer), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}
.stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong, rgba(128,128,128,0.2));
    box-shadow: var(--ds-card-shadow-hover);
}
.stat-card:hover::after {
    opacity: 1;
    animation: ds-shimmer 0.6s ease forwards;
}

.quick-action {
    background: var(--ds-card-bg);
    border: 1px solid var(--ds-card-border);
    border-radius: 14px;
    box-shadow: var(--ds-card-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.quick-action:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong, rgba(128,128,128,0.2));
    box-shadow: var(--ds-card-shadow-hover);
}

.api-widget, .xp-widget, .streak-widget, .prod-widget {
    background: var(--ds-card-bg);
    border: 1px solid var(--ds-card-border);
    border-radius: 14px;
    box-shadow: var(--ds-card-shadow);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.api-widget:hover { transform: translateY(-2px); border-color: var(--border-strong, rgba(128,128,128,0.2)); }

.dashboard-section {
    background: var(--ds-section-bg);
    border: 1px solid var(--ds-card-border);
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* ══════════════════════════════════════════════════════════
   3. SETTINGS & FORMS
   ══════════════════════════════════════════════════════════ */
.settings-section, .settings-card,
[class*="settings-group"], [class*="settings-panel"] {
    background: var(--ds-card-bg);
    border: 1px solid var(--ds-card-border);
    border-radius: var(--ds-card-radius);
    box-shadow: var(--ds-card-shadow);
}

/* ══════════════════════════════════════════════════════════
   4. BILLING CARDS
   ══════════════════════════════════════════════════════════ */
.billing-plan, .plan-card, .pricing-card {
    background: var(--ds-card-bg);
    border: 1px solid var(--ds-card-border);
    border-radius: 20px;
    box-shadow: var(--ds-card-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.billing-plan:hover, .plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ds-card-shadow-hover);
}

.feature-row.disabled { color: var(--text-muted, rgba(128,128,128,0.5)); }
.feature-row.disabled .feature-icon { color: var(--text-muted, rgba(128,128,128,0.4)); }

/* ══════════════════════════════════════════════════════════
   5. LIST ITEMS — hover
   ══════════════════════════════════════════════════════════ */
.mail-row:hover,
[class*="-row"]:hover:not(tr):not([class*="header"]):not([class*="table"]) {
    background: var(--ds-hover-bg);
    border-radius: 10px;
}

.sidebar-item:hover,
.nav-item:hover,
[class*="sidebar-item"]:hover {
    background: var(--ds-sidebar-hover);
}

/* ══════════════════════════════════════════════════════════
   6. CONTRASTE TEXTE
   ══════════════════════════════════════════════════════════ */
::placeholder { color: var(--ds-text-placeholder); opacity: 1; }
::-webkit-input-placeholder { color: var(--ds-text-placeholder); }
::-moz-placeholder { color: var(--ds-text-placeholder); }

.text-muted, .label-muted, .muted,
[class*="-muted"]:not(button):not(input),
[class*="-subtitle"]:not(button),
[class*="-label"]:not(button):not(.badge):not([class*="plan"]) {
    color: var(--ds-text-muted);
}

.gd-bc-sep, [class*="-sep"]:not([class*="line"]) {
    color: var(--text-muted, rgba(128,128,128,0.3));
}

.pa-journal-input::placeholder,
[class*="audit"] input::placeholder,
[class*="audit"] textarea::placeholder {
    color: var(--ds-text-placeholder);
}

/* ══════════════════════════════════════════════════════════
   7. RAPPORTS — glass cards
   ══════════════════════════════════════════════════════════ */
.glass-card {
    background: var(--ds-glass-bg);
    border: 1px solid var(--ds-glass-border);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}
.glass-card:hover {
    background: var(--ds-glass-hover);
    border-color: var(--border-strong, rgba(128,128,128,0.2));
    box-shadow: 0 8px 40px rgba(0,0,0,0.15);
}
.kpi-card {
    background: var(--ds-glass-bg);
    border: 1px solid var(--ds-glass-border);
    backdrop-filter: blur(16px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-card:hover {
    transform: translateY(-3px);
    background: var(--ds-glass-hover);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* ══════════════════════════════════════════════════════════
   8. ANALYTICS
   ══════════════════════════════════════════════════════════ */
.analytics-stat, .metric-card, .insight-card,
[class*="analytics-card"], [class*="metric-card"] {
    background: var(--ds-card-bg);
    border: 1px solid var(--ds-card-border);
    border-radius: var(--ds-card-radius);
    box-shadow: var(--ds-card-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
[class*="analytics-card"]:hover, [class*="metric-card"]:hover {
    transform: translateY(-3px);
    box-shadow: var(--ds-card-shadow-hover);
}

/* ══════════════════════════════════════════════════════════
   9. MODALS
   ══════════════════════════════════════════════════════════ */
.modal-content, .modal-body,
[class*="modal-content"]:not(.cal-v7-modal-content):not(.glass-modal-content) {
    background: var(--ds-modal-bg);
    border: 1px solid var(--ds-card-border);
    border-radius: 20px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
}

/* ══════════════════════════════════════════════════════════
   10. BUTTONS — neutralize on non-buttons
   ══════════════════════════════════════════════════════════ */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
}
input[type="checkbox"]::before,
input[type="radio"]::before { display: none !important; }

.stat-card button,
.quick-action button,
.billing-plan button,
.settings-section button,
.dashboard-section button {
    transform: none;
}

/* ══════════════════════════════════════════════════════════
   11. EFFECTS — stat card icon glow & light line
   ══════════════════════════════════════════════════════════ */
.stat-card .stat-icon {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 8px currentColor);
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ds-line-glow), transparent);
    pointer-events: none;
    z-index: 0;
}
.stat-card:hover .stat-icon {
    filter: drop-shadow(0 0 12px currentColor) drop-shadow(0 0 24px currentColor);
    transition: filter 0.3s ease;
}

.mh-status-dot,
.mos-mini-state-dot,
.mc-status-dot,
.mhp-status-dot {
    animation: ds-glow-pulse 2.5s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════
   12. HOVER GLOBAL — only buttons, not nav
   ══════════════════════════════════════════════════════════ */
button:not(.sidebar-toggle):not(.nav-item):not([class*="sidebar"]),
.btn:not([class*="sidebar"]) {
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════
   13. SCROLLBAR — scoped, not *
   ══════════════════════════════════════════════════════════ */
html, body, .main-content,
[class*="-scroll"], [class*="-list"], [class*="-body"],
[class*="-content"], [class*="-container"] {
    scrollbar-width: thin;
    scrollbar-color: var(--ds-scrollbar-thumb) transparent;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--ds-scrollbar-thumb);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,0.3); }

/* ══════════════════════════════════════════════════════════
   14. FOCUS ring
   ══════════════════════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid rgba(99,102,241,0.6) !important;
    outline-offset: 3px !important;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
    outline: none !important;
}

/* ══════════════════════════════════════════════════════════
   15. SLIDER THUMB
   ══════════════════════════════════════════════════════════ */
input[type="range"]::-webkit-slider-thumb {
    background: var(--accent, #6366f1) !important;
    border: 2px solid rgba(255,255,255,0.9) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    background: var(--accent, #6366f1) !important;
    border: 2px solid rgba(255,255,255,0.9) !important;
}

/* ══════════════════════════════════════════════════════════
   16. MENU ICON
   ══════════════════════════════════════════════════════════ */
.menu-icon-btn:hover {
    transform: scale(1.06);
}

/* ══════════════════════════════════════════════════════════
   17. PROGRESS BARS — smooth fill
   ══════════════════════════════════════════════════════════ */
.kpi-progress-fill,
[class*="progress-fill"],
[class*="progress-bar"] {
    transition: width 0.4s ease-out;
}
.entrance-fade, [class*="entrance-"] {
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

/* ══════════════════════════════════════════════════════════
   18. STAR WARS THEME
   ══════════════════════════════════════════════════════════ */
[data-theme="starwars"] * {
    filter: none;
}

/* ══════════════════════════════════════════════════════════
   19. DASHBOARD INSIGHTS
   ══════════════════════════════════════════════════════════ */
.dash-insights {
    background: var(--ds-section-bg);
    border: 1px solid var(--ds-card-border);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.dash-insights::before {
    display: none;
}
.fr-tip-card {
    background: var(--ds-section-bg);
    border-color: rgba(245,158,11,0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* ===== css/command-center.css?v=2602250031 ===== */
/* ===== Command Center — Full Page v2.0 ===== */

/* ── Page layout ─────────────────────────────── */

.cc-page {
  padding: 24px 32px 40px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
}

.cc-page-header {
  margin-bottom: 28px;
}

.cc-page-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.cc-page-icon {
  font-size: 40px;
  filter: drop-shadow(0 0 12px rgba(100, 180, 255, 0.4));
  animation: cc-float 4s ease-in-out infinite;
}

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

.cc-page-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary, rgba(255, 255, 255, 0.95));
  margin: 0;
  letter-spacing: -0.5px;
}

.cc-page-subtitle {
  font-size: 14px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.45));
  margin: 2px 0 0;
}

/* ── Stats row ───────────────────────────────── */

.cc-stats-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cc-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}

.cc-stat-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.cc-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
}

.cc-stat-critical .cc-stat-num { color: #ff4757; }
.cc-stat-critical { border-color: rgba(255, 71, 87, 0.2); background: rgba(255, 71, 87, 0.06); }

.cc-stat-high .cc-stat-num { color: #ffa502; }
.cc-stat-high { border-color: rgba(255, 165, 2, 0.2); background: rgba(255, 165, 2, 0.06); }

.cc-stat-medium .cc-stat-num { color: #3742fa; }
.cc-stat-medium { border-color: rgba(55, 66, 250, 0.2); background: rgba(55, 66, 250, 0.06); }

.cc-stat-done .cc-stat-num { color: #2ed573; }
.cc-stat-done { border-color: rgba(46, 213, 115, 0.2); background: rgba(46, 213, 115, 0.06); }

/* ── Content grid ────────────────────────────── */

.cc-content {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .cc-content {
    grid-template-columns: 1fr;
  }
  .cc-page {
    padding: 16px;
  }
}

/* ── Action cards ────────────────────────────── */

.cc-card {
  padding: 18px 20px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.cc-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  border-radius: 4px 0 0 4px;
}

.cc-card-critical::before { background: linear-gradient(180deg, #ff4757, #ff6b81); }
.cc-card-high::before { background: linear-gradient(180deg, #ffa502, #ffc048); }
.cc-card-medium::before { background: linear-gradient(180deg, #3742fa, #5f66fa); }

.cc-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.cc-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cc-card-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

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

.cc-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, rgba(255, 255, 255, 0.9));
  margin-bottom: 6px;
  line-height: 1.3;
}

.cc-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cc-card-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.cc-card-cat {
  font-size: 11px;
  font-weight: 500;
}

.cc-card-check {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid rgba(46, 213, 115, 0.3);
  background: rgba(46, 213, 115, 0.06);
  color: #2ed573;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.cc-card-check:hover {
  background: rgba(46, 213, 115, 0.2);
  border-color: #2ed573;
  transform: scale(1.1);
}

.cc-card-detail {
  font-size: 13px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.5));
  line-height: 1.6;
  margin: 12px 0 0 34px;
  padding: 0;
}

.cc-card-impact {
  font-size: 12px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.55));
  margin: 10px 0 0 34px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(46, 213, 115, 0.06);
  border-left: 3px solid rgba(46, 213, 115, 0.3);
  line-height: 1.5;
}

.cc-card-impact strong {
  color: #2ed573;
}

.cc-card-steps {
  margin: 12px 0 0 34px;
}

.cc-card-steps-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary, rgba(255, 255, 255, 0.5));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.cc-card-steps-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.45));
  line-height: 1.8;
}

.cc-card-steps-list li {
  padding-left: 4px;
}

/* ── Done cards ──────────────────────────────── */

.cc-card-done {
  opacity: 0.5;
  padding: 12px 16px;
}

.cc-card-done::before {
  background: rgba(46, 213, 115, 0.3);
}

.cc-card-done:hover {
  opacity: 0.7;
}

.cc-card-icon-done {
  filter: grayscale(0.6);
}

.cc-card-title-done {
  text-decoration: line-through;
  opacity: 0.6;
}

.cc-card-restore {
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.cc-card-restore:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
}

.cc-done-divider {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary, rgba(255, 255, 255, 0.3));
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 24px 0 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── All done state ──────────────────────────── */

.cc-all-done {
  text-align: center;
  padding: 48px 20px;
}

.cc-all-done-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.cc-all-done-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, rgba(255, 255, 255, 0.85));
  margin-bottom: 4px;
}

.cc-all-done-sub {
  font-size: 13px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.4));
}

/* ── Notes sidebar ───────────────────────────── */

.cc-notes-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}

.cc-notes-card,
.cc-server-card {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.cc-notes-header,
.cc-server-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cc-notes-icon,
.cc-server-icon {
  font-size: 16px;
}

.cc-notes-title,
.cc-server-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, rgba(255, 255, 255, 0.85));
  flex: 1;
}

.cc-notes-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cc-notes-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, rgba(255, 255, 255, 0.9));
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
}

.cc-notes-input:focus {
  border-color: rgba(100, 180, 255, 0.4);
}

.cc-notes-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.cc-notes-add {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(100, 180, 255, 0.3);
  background: rgba(100, 180, 255, 0.08);
  color: #64b4ff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-notes-add:hover {
  background: rgba(100, 180, 255, 0.2);
  border-color: #64b4ff;
}

.cc-notes-list {
  padding: 8px 14px 14px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.cc-notes-empty {
  text-align: center;
  padding: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
}

.cc-note-item {
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.2s;
}

.cc-note-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.cc-note-text {
  font-size: 12px;
  color: var(--text-primary, rgba(255, 255, 255, 0.75));
  line-height: 1.5;
  word-break: break-word;
}

.cc-note-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.cc-note-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
}

.cc-note-del {
  font-size: 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s;
  opacity: 0;
}

.cc-note-item:hover .cc-note-del {
  opacity: 1;
}

.cc-note-del:hover {
  color: #ff4757;
  background: rgba(255, 71, 87, 0.1);
}

/* ── Server status card ──────────────────────── */

.cc-server-info {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.5));
}

.cc-server-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.3s;
}

.cc-server-online {
  background: #2ed573;
  box-shadow: 0 0 8px rgba(46, 213, 115, 0.5);
}

.cc-server-offline {
  background: #ff4757;
  box-shadow: 0 0 8px rgba(255, 71, 87, 0.5);
  animation: cc-blink 1.5s ease-in-out infinite;
}

@keyframes cc-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.cc-server-ok {
  color: #2ed573;
  font-weight: 600;
}

.cc-server-err {
  color: #ff4757;
  font-weight: 600;
}

.cc-server-ts {
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
}
/* MAHA ORB CSS v1.0 — La Boule d'Or draggable de Mahayawen
 * ═══════════════════════════════════════════════════════════════
 */

/* Cacher l'orbe quand pas connecté */
body:not(.logged-in) #maha-orb { display: none !important; }

/* ── Base ── */
#maha-orb {
    position: fixed;
    width: 58px;
    height: 58px;
    z-index: 9995;
    cursor: grab;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    will-change: left, top;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#maha-orb:hover,
#maha-orb.maha-orb-dragging,
#maha-orb.maha-orb-listening,
#maha-orb.maha-orb-processing,
#maha-orb.maha-orb-speaking,
#maha-orb.maha-orb-visible {
    opacity: 1;
}

#maha-orb.maha-orb-dragging {
    cursor: grabbing;
    z-index: 9999;
}

/* ── Inner sphere ── */
.maha-orb-inner {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 35%,
        rgba(255,255,255,0.25),
        var(--bg-primary, #050510) 60%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,0.15),
        inset 0 -2px 4px rgba(0,0,0,0.5),
        0 8px 32px rgba(0,0,0,0.5);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.maha-orb-emoji {
    font-size: 1.5rem;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(99,102,241,0.8));
    transition: font-size 0.2s ease;
    pointer-events: none;
}

/* ── Rings ── */
.maha-orb-ring {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.maha-orb-ring-1 {
    inset: 0;
    background: conic-gradient(
        from 0deg,
        #f59e0b,
        #ec4899,
        #6366f1,
        #06b6d4,
        #f59e0b
    );
    animation: orb-spin-1 6s linear infinite;
}

.maha-orb-ring-2 {
    inset: 2px;
    background: var(--bg-primary, #050510);
    z-index: 2;
}

.maha-orb-ring-3 {
    inset: -4px;
    background: conic-gradient(
        from 180deg,
        rgba(245,158,11,0.3),
        rgba(99,102,241,0.3),
        rgba(236,72,153,0.3),
        rgba(245,158,11,0.3)
    );
    animation: orb-spin-1 10s linear infinite reverse;
    filter: blur(3px);
    z-index: 0;
}

@keyframes orb-spin-1 {
    to { transform: rotate(360deg); }
}

/* ── Glow pulse ── */
#maha-orb::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,0.2), transparent 70%);
    z-index: 0;
    animation: orb-glow 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes orb-glow {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%       { transform: scale(1.2); opacity: 1; }
}

/* ── Dragging state ── */
#maha-orb.maha-orb-dragging .maha-orb-inner {
    transform: scale(1.1);
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,0.2),
        0 16px 48px rgba(0,0,0,0.6),
        0 0 40px rgba(245,158,11,0.4);
}

#maha-orb.maha-orb-dragging::before {
    opacity: 1.5;
    transform: scale(1.4);
}

/* ── Listening state ── */
#maha-orb.maha-orb-listening .maha-orb-ring-1 {
    background: conic-gradient(
        from 0deg,
        #ef4444, #b91c1c, #ef4444
    );
    animation: orb-spin-1 2s linear infinite;
}

#maha-orb.maha-orb-listening::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px solid rgba(239,68,68,0.4);
    animation: orb-sonar 1.5s ease-out infinite;
    pointer-events: none;
}

@keyframes orb-sonar {
    0%   { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* ── Processing state ── */
#maha-orb.maha-orb-processing .maha-orb-ring-1 {
    background: conic-gradient(
        from 0deg,
        #f59e0b, #d97706, #f59e0b
    );
    animation: orb-spin-1 0.8s linear infinite;
}

/* ── Voice press state ── */
#maha-orb.maha-orb-voice .maha-orb-inner {
    transform: scale(0.9);
    background: radial-gradient(
        circle at 35% 35%,
        rgba(239,68,68,0.3),
        #1a0505 60%
    );
}

/* ── Particles ── */
.maha-orb-particles {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

#maha-orb:hover .maha-orb-particles,
#maha-orb.maha-orb-listening .maha-orb-particles,
#maha-orb.maha-orb-voice .maha-orb-particles {
    opacity: 1;
}

.maha-orb-p {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #f59e0b;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    animation: orb-particle 2s ease-out infinite;
    animation-delay: calc(var(--i) * 0.25s);
}

@keyframes orb-particle {
    0% {
        transform: rotate(calc(var(--i) * 45deg)) translateX(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: rotate(calc(var(--i) * 45deg)) translateX(36px) scale(0);
        opacity: 0;
    }
}

/* ── Tooltip ── */
.maha-orb-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(5,5,16,0.9);
    border: 1px solid rgba(245,158,11,0.3);
    color: #f59e0b;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    font-family: inherit;
    letter-spacing: 0.05em;
}

#maha-orb:hover .maha-orb-tooltip {
    opacity: 1;
}

/* ── Snap landing animation ── */
#maha-orb.maha-orb-snap .maha-orb-inner {
    animation: orb-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes orb-bounce {
    0%   { transform: scale(1.2); }
    60%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* ── Mini mode when panel open ── */
#maha-orb.maha-orb-mini {
    transform: scale(0.7);
    opacity: 0.6;
}

/* ── Hide on very small screens in landscape if navbar covers ── */
@media (max-height: 400px) and (orientation: landscape) {
    #maha-orb { transform: scale(0.75); }
}

/**
 * ══════════════════════════════════════════════════════════════
 * MAHAYAWEN DESKTOP PANEL CSS v1.0
 * Panel slide-in premium — thème-aware, glassmorphism
 * ══════════════════════════════════════════════════════════════
 */

/* ── Root panel wrapper ────────────────────────────────────── */
#mdp-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: none;
}

#mdp-panel.open {
    pointer-events: all;
}

/* ── Backdrop ──────────────────────────────────────────────── */
.mdp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    cursor: pointer;
}

#mdp-panel.open .mdp-backdrop {
    background: rgba(0, 0, 0, 0.35);
}

/* ── Drawer (slide-in panel) ───────────────────────────────── */
.mdp-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 98vw;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, #14141f);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4), -2px 0 12px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
}

.mdp-drawer.open {
    transform: translateX(0);
}

/* Light themes override */
[data-theme="ivory"] .mdp-drawer,
[data-theme="sakura"] .mdp-drawer,
[data-theme="pastel"] .mdp-drawer,
[data-theme="mint"] .mdp-drawer {
    background: #f8f7f2;
    border-left-color: rgba(0, 0, 0, 0.08);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
    color: #1a1a2e;
}

/* ── Header ────────────────────────────────────────────────── */
.mdp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-primary, #0d0e1a);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

[data-theme="ivory"] .mdp-header,
[data-theme="sakura"] .mdp-header,
[data-theme="pastel"] .mdp-header,
[data-theme="mint"] .mdp-header {
    background: rgba(0,0,0,0.04);
    border-bottom-color: rgba(0,0,0,0.07);
}

.mdp-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #f59e0b, #ec4899, #6366f1, #06b6d4, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    animation: mdp-spin-slow 8s linear infinite;
    position: relative;
}

.mdp-header-avatar::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--bg-primary, #0d0e1a);
}

.mdp-header-avatar::after {
    content: '🤖';
    position: absolute;
    font-size: 1.2rem;
}

@keyframes mdp-spin-slow { to { transform: rotate(360deg); } }

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

.mdp-header-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #e2e8f0);
    letter-spacing: 0.02em;
}

.mdp-header-status {
    font-size: 11px;
    color: #22d3ee;
    font-weight: 500;
    margin-top: 1px;
    transition: color 0.3s;
}

.mdp-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mdp-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mdp-btn-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text, #e2e8f0);
    border-color: rgba(255, 255, 255, 0.2);
}

.mdp-btn-icon.active {
    background: color-mix(in srgb, var(--accent, #6366f1) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent, #6366f1) 40%, transparent);
    color: var(--accent, #6366f1);
}

.mdp-close-btn:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

[data-theme="ivory"] .mdp-btn-icon,
[data-theme="sakura"] .mdp-btn-icon,
[data-theme="pastel"] .mdp-btn-icon,
[data-theme="mint"] .mdp-btn-icon {
    border-color: rgba(0,0,0,0.12);
    color: rgba(0,0,0,0.45);
}

/* ── Voice picker ──────────────────────────────────────────── */
.mdp-voice-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}

.mdp-voice-label {
    font-size: 11px;
    color: var(--text-muted, rgba(226,232,240,0.4));
    white-space: nowrap;
    font-weight: 500;
}

.mdp-voice-pills {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.mdp-vpill {
    padding: 3px 11px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted, rgba(226,232,240,0.45));
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s;
}

.mdp-vpill:hover {
    border-color: color-mix(in srgb, var(--accent,#6366f1) 50%, transparent);
    color: var(--text, #e2e8f0);
}

.mdp-vpill.active {
    background: color-mix(in srgb, var(--accent,#6366f1) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent,#6366f1) 60%, transparent);
    color: color-mix(in srgb, var(--accent,#6366f1) 90%, white);
    font-weight: 600;
}

[data-theme="ivory"] .mdp-voice-picker,
[data-theme="sakura"] .mdp-voice-picker,
[data-theme="pastel"] .mdp-voice-picker,
[data-theme="mint"] .mdp-voice-picker {
    border-bottom-color: rgba(0,0,0,0.06);
}

[data-theme="ivory"] .mdp-vpill,
[data-theme="sakura"] .mdp-vpill,
[data-theme="pastel"] .mdp-vpill,
[data-theme="mint"] .mdp-vpill {
    border-color: rgba(0,0,0,0.12);
    color: rgba(26,26,46,0.4);
}

/* ── Quick actions toggle bar ──────────────────────────────── */
.mdp-quick-toggle-bar {
    padding: 6px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mdp-quick-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: var(--text-muted, rgba(226,232,240,0.55));
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    letter-spacing: 0.03em;
}

.mdp-quick-toggle-btn:hover {
    border-color: color-mix(in srgb, var(--accent, #6366f1) 40%, transparent);
    color: var(--text, #e2e8f0);
    background: rgba(255, 255, 255, 0.04);
}

.mdp-quick-toggle-arrow {
    margin-left: auto;
    opacity: 0.6;
    font-size: 10px;
}

[data-theme="ivory"] .mdp-quick-toggle-bar,
[data-theme="sakura"] .mdp-quick-toggle-bar,
[data-theme="pastel"] .mdp-quick-toggle-bar,
[data-theme="mint"] .mdp-quick-toggle-bar {
    border-bottom-color: rgba(0,0,0,0.06);
}

[data-theme="ivory"] .mdp-quick-toggle-btn,
[data-theme="sakura"] .mdp-quick-toggle-btn,
[data-theme="pastel"] .mdp-quick-toggle-btn,
[data-theme="mint"] .mdp-quick-toggle-btn {
    border-color: rgba(0,0,0,0.12);
    color: rgba(26,26,46,0.55);
}

/* ── Quick actions chips ───────────────────────────────────── */
.mdp-quick-scroll {
    padding: 8px 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    overflow-y: visible;
    overflow: hidden;
    max-height: 160px;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.25s ease;
    opacity: 1;
}

.mdp-quick-hidden {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    opacity: 0 !important;
}

[data-theme="ivory"] .mdp-quick-scroll,
[data-theme="sakura"] .mdp-quick-scroll,
[data-theme="pastel"] .mdp-quick-scroll,
[data-theme="mint"] .mdp-quick-scroll {
    border-bottom-color: rgba(0,0,0,0.07);
}

.mdp-quick-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mdp-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text, #e2e8f0);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    font-family: inherit;
    flex-shrink: 0;
}

.mdp-chip:hover {
    background: color-mix(in srgb, var(--accent, #6366f1) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent, #6366f1) 40%, transparent);
    color: color-mix(in srgb, var(--accent, #6366f1) 90%, white);
    transform: translateY(-1px);
}

.mdp-chip:active { transform: scale(0.96); }

[data-theme="ivory"] .mdp-chip,
[data-theme="sakura"] .mdp-chip,
[data-theme="pastel"] .mdp-chip,
[data-theme="mint"] .mdp-chip {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.10);
    color: #2a2a3e;
}

/* ── Messages area ─────────────────────────────────────────── */
.mdp-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-behavior: smooth;
}

.mdp-messages::-webkit-scrollbar { width: 4px; }
.mdp-messages::-webkit-scrollbar-track { background: transparent; }
.mdp-messages::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
}

/* Bot message row */
.mdp-msg--bot {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: mdp-msg-in 0.25s ease;
}

/* User message row */
.mdp-msg--user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    animation: mdp-msg-in 0.2s ease;
}

@keyframes mdp-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mdp-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent, #6366f1) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.mdp-bubble {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 4px 14px 14px 14px;
    padding: 10px 13px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text, #e2e8f0);
    max-width: 310px;
    word-wrap: break-word;
}

.mdp-bubble code {
    background: rgba(255,255,255,0.1);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
}

.mdp-msg--user .mdp-bubble {
    background: color-mix(in srgb, var(--accent, #6366f1) 20%, transparent);
    border-color: color-mix(in srgb, var(--accent, #6366f1) 35%, transparent);
    border-radius: 14px 4px 14px 14px;
    color: color-mix(in srgb, var(--accent, #6366f1) 90%, white);
}

.mdp-time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 3px;
    padding: 0 2px;
}

.mdp-msg--user .mdp-time { text-align: right; }

/* Light themes */
[data-theme="ivory"] .mdp-bubble,
[data-theme="sakura"] .mdp-bubble,
[data-theme="pastel"] .mdp-bubble,
[data-theme="mint"] .mdp-bubble {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
    color: #1a1a2e;
}

[data-theme="ivory"] .mdp-time,
[data-theme="sakura"] .mdp-time,
[data-theme="pastel"] .mdp-time,
[data-theme="mint"] .mdp-time {
    color: rgba(0,0,0,0.3);
}

[data-theme="ivory"] .mdp-messages::-webkit-scrollbar-thumb,
[data-theme="sakura"] .mdp-messages::-webkit-scrollbar-thumb,
[data-theme="pastel"] .mdp-messages::-webkit-scrollbar-thumb,
[data-theme="mint"] .mdp-messages::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
}

/* ── Typing indicator ──────────────────────────────────────── */
.mdp-typing-bubble {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 16px;
}

.mdp-typing-bubble span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent, #6366f1) 70%, transparent);
    animation: mdp-bounce 1.2s ease infinite;
}

.mdp-typing-bubble span:nth-child(2) { animation-delay: 0.2s; }
.mdp-typing-bubble span:nth-child(3) { animation-delay: 0.4s; }

@keyframes mdp-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%            { transform: translateY(-6px); opacity: 1; }
}

/* ── Choices (inline buttons after bot message) ────────────── */
.mdp-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 40px;
    margin-top: -6px;
    animation: mdp-msg-in 0.25s ease;
}

.mdp-choice-btn {
    padding: 6px 14px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--accent, #6366f1) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 30%, transparent);
    color: color-mix(in srgb, var(--accent, #6366f1) 90%, white);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.mdp-choice-btn:hover {
    background: color-mix(in srgb, var(--accent, #6366f1) 20%, transparent);
    transform: translateY(-1px);
}

/* ── Transcript bar (voice) ────────────────────────────────── */
.mdp-transcript {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: color-mix(in srgb, #ef4444 8%, transparent);
    border-top: 1px solid rgba(239, 68, 68, 0.2);
    font-size: 12px;
    color: #fca5a5;
    flex-shrink: 0;
}

.mdp-transcript.visible { display: flex; }

.mdp-transcript-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ef4444;
    animation: mdp-pulse-red 1s ease infinite;
    flex-shrink: 0;
}

@keyframes mdp-pulse-red {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(1.3); }
}

/* ── Input bar ─────────────────────────────────────────────── */
.mdp-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 14px;
    background: var(--bg-primary, #0d0e1a);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

[data-theme="ivory"] .mdp-input-bar,
[data-theme="sakura"] .mdp-input-bar,
[data-theme="pastel"] .mdp-input-bar,
[data-theme="mint"] .mdp-input-bar {
    background: rgba(0,0,0,0.04);
    border-top-color: rgba(0,0,0,0.07);
}

.mdp-voice-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text, #e2e8f0);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.mdp-voice-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.mdp-voice-btn.listening {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    animation: mdp-voice-pulse 1s ease infinite;
}

@keyframes mdp-voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
    50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

.mdp-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text, #e2e8f0);
    font-size: 13px;
    padding: 9px 12px;
    resize: none;
    outline: none;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.2s;
    max-height: 120px;
    overflow-y: auto;
}

.mdp-input:focus {
    border-color: color-mix(in srgb, var(--accent, #6366f1) 50%, transparent);
    background: rgba(255, 255, 255, 0.08);
}

.mdp-input::placeholder { color: rgba(255, 255, 255, 0.3); }

[data-theme="ivory"] .mdp-input,
[data-theme="sakura"] .mdp-input,
[data-theme="pastel"] .mdp-input,
[data-theme="mint"] .mdp-input {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.12);
    color: #1a1a2e;
}

[data-theme="ivory"] .mdp-input::placeholder,
[data-theme="sakura"] .mdp-input::placeholder,
[data-theme="pastel"] .mdp-input::placeholder,
[data-theme="mint"] .mdp-input::placeholder {
    color: rgba(0,0,0,0.3);
}

.mdp-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent, #6366f1);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.mdp-send-btn:hover {
    background: color-mix(in srgb, var(--accent, #6366f1) 80%, black);
    transform: scale(1.05);
}

.mdp-send-btn:active { transform: scale(0.96); }

/* ── Keyboard shortcut hint ────────────────────────────────── */
.mdp-input-bar::after {
    content: 'Entrée pour envoyer';
    position: absolute;
    bottom: 3px;
    right: 14px;
    font-size: 9px;
    color: rgba(255,255,255,0.2);
    pointer-events: none;
}

[data-theme="ivory"] .mdp-input-bar::after,
[data-theme="sakura"] .mdp-input-bar::after,
[data-theme="pastel"] .mdp-input-bar::after,
[data-theme="mint"] .mdp-input-bar::after {
    color: rgba(0,0,0,0.2);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .mdp-drawer { width: 100vw; border-left: none; }
}

@media (max-width: 768px) {
    #mdp-panel,
    #mdp-trigger-btn { display: none !important; }
}

/* ── Bouton trigger fixe (remplace l'orb) ───────────────────── */
#mdp-trigger-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9800;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 12px;
    background: var(--bg-secondary, #14141f);
    border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 40%, transparent);
    border-radius: 50px;
    color: var(--text, #e2e8f0);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px color-mix(in srgb, var(--accent, #6366f1) 20%, transparent);
    transition: all 0.2s ease;
    font-family: inherit;
    letter-spacing: 0.02em;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#mdp-trigger-btn:hover {
    background: color-mix(in srgb, var(--accent, #6366f1) 12%, var(--bg-secondary, #14141f));
    border-color: color-mix(in srgb, var(--accent, #6366f1) 60%, transparent);
    box-shadow: 0 6px 28px rgba(0,0,0,0.5), 0 0 0 1px color-mix(in srgb, var(--accent, #6366f1) 35%, transparent);
    transform: translateY(-2px);
}

#mdp-trigger-btn:active {
    transform: translateY(0);
}

.mdp-trigger-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.mdp-trigger-label {
    font-size: 12px;
    color: color-mix(in srgb, var(--accent, #6366f1) 85%, white);
}

/* Light themes */
[data-theme="ivory"] #mdp-trigger-btn,
[data-theme="sakura"] #mdp-trigger-btn,
[data-theme="pastel"] #mdp-trigger-btn,
[data-theme="mint"] #mdp-trigger-btn {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.12);
    color: #1a1a2e;
}

/* ===== css/billing-v3.css ===== */
/* =============================================
   BILLING v3 — Revolutionary Showcase
   ============================================= */

/* ── Base ── */
.bp3 { max-width: 1140px; margin: 0 auto; padding: 32px 20px 80px; position: relative; }

/* ── Ambient glow ── */
.bp3-ambient {
  position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 500px;
  background: radial-gradient(ellipse at center,
    rgba(139,92,246,0.12) 0%,
    rgba(168,85,247,0.06) 30%,
    rgba(236,72,153,0.03) 60%,
    transparent 80%);
  pointer-events: none; z-index: 0;
  animation: bp3Breathe 8s ease-in-out infinite;
}
@keyframes bp3Breathe {
  0%,100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

/* ── Loading ── */
.bp3-loading { display: flex; justify-content: center; padding: 120px 0; }
.bp3-spinner { width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.1);
  border-top-color: #8b5cf6; border-radius: 50%; animation: bp3Spin 0.7s linear infinite; }
@keyframes bp3Spin { to { transform: rotate(360deg); } }

/* ── Hero ── */
.bp3-hero { text-align: center; margin-bottom: 40px; position: relative; z-index: 1; }

.bp3-hero-badge {
  display: inline-block; padding: 5px 16px; border-radius: 20px;
  background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.3);
  color: #a78bfa; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.bp3-h1 {
  font-size: 2.6rem; font-weight: 800; color: var(--text-primary, #fff);
  line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.03em;
}

.bp3-gradient-text {
  background: linear-gradient(135deg, #8b5cf6 0%, #d946ef 40%, #f59e0b 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bp3-sub {
  font-size: 1rem; color: var(--text-secondary, rgba(255,255,255,0.5));
  max-width: 560px; margin: 0 auto 24px; line-height: 1.6;
}

/* ── Toggle ── */
.bp3-toggle {
  display: inline-flex; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 4px; gap: 2px;
}
.bp3-tog {
  padding: 10px 28px; border: none; background: transparent;
  color: var(--text-secondary, rgba(255,255,255,0.45)); border-radius: 12px;
  font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.25s;
}
.bp3-tog.active {
  background: rgba(139,92,246,0.2); color: #fff;
  box-shadow: 0 2px 12px rgba(139,92,246,0.2);
}
.bp3-save {
  display: inline-block; padding: 2px 8px; margin-left: 4px;
  background: linear-gradient(135deg, #10b981, #34d399); color: #fff;
  border-radius: 8px; font-size: 0.7rem; font-weight: 700;
}

/* ── Banner ── */
.bp3-banner {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px;
  background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25);
  border-radius: 12px; font-size: 0.88rem; color: var(--text-primary, #fff);
  margin-bottom: 20px; flex-wrap: wrap; justify-content: center;
}
.bp3-cancel-warn { color: #f87171; font-weight: 600; }
.bp3-manage {
  padding: 6px 16px; background: transparent; border: 1px solid rgba(16,185,129,0.4);
  color: #10b981; border-radius: 8px; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;
}
.bp3-manage:hover { background: rgba(16,185,129,0.15); }

/* =============================================
   SHOWCASE — 2x2 grid, Pro featured
   ============================================= */

.bp3-showcase { position: relative; z-index: 1; margin-bottom: 56px; }

.bp3-row {
  display: grid; gap: 20px; margin-bottom: 20px;
}
.bp3-row-top { grid-template-columns: 1fr 1fr; }
.bp3-row-bottom { grid-template-columns: 1.15fr 0.85fr; }

@media (max-width: 768px) {
  .bp3-row-top, .bp3-row-bottom { grid-template-columns: 1fr; }
}

/* ── Card ── */
.bp3-card {
  position: relative; border-radius: 22px; overflow: visible;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}

.bp3-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 64px var(--card-glow);
}

.bp3-card-bg {
  position: absolute; inset: -1px; border-radius: 23px;
  background: linear-gradient(135deg, var(--card-border), transparent 60%);
  z-index: 0; opacity: 0.6; transition: opacity 0.3s;
}
.bp3-card:hover .bp3-card-bg { opacity: 1; }

.bp3-card-content {
  position: relative; z-index: 1;
  background: var(--card-bg, rgba(15,15,25,0.85));
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--card-border);
  border-radius: 22px; padding: 28px 24px;
  display: flex; flex-direction: column; height: 100%;
}

/* ── Featured (Pro) ── */
.bp3-featured {
  z-index: 2;
}

.bp3-featured .bp3-card-content {
  border-color: rgba(139,92,246,0.5);
  background: linear-gradient(170deg, rgba(139,92,246,0.12) 0%, rgba(15,15,25,0.9) 40%);
  box-shadow: 0 0 40px rgba(139,92,246,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Elite (Business) ── */
.bp3-elite .bp3-card-content {
  border-color: rgba(245,158,11,0.4);
  background: linear-gradient(170deg, rgba(245,158,11,0.08) 0%, rgba(15,15,25,0.9) 40%);
}

/* ── Badges ── */
.bp3-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 5px 18px; border-radius: 20px; font-size: 0.75rem; font-weight: 700;
  z-index: 10; white-space: nowrap; letter-spacing: 0.03em;
}
.bp3-badge-pro {
  background: linear-gradient(135deg, #8b5cf6, #d946ef); color: #fff;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 16px rgba(139,92,246,0.4);
}
.bp3-badge-biz {
  background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff;
  box-shadow: 0 4px 16px rgba(245,158,11,0.4);
}
.bp3-badge-current { background: #10b981; color: #fff; }

.bp3-dot {
  width: 6px; height: 6px; background: #34d399; border-radius: 50%;
  animation: bp3Pulse 2s ease-in-out infinite;
}
@keyframes bp3Pulse {
  0%,100% { opacity: 1; } 50% { opacity: 0.4; }
}

/* ── Card header ── */
.bp3-card-head { text-align: center; margin-bottom: 16px; padding-top: 6px; }
.bp3-badge + .bp3-card-bg + .bp3-card-content .bp3-card-head { padding-top: 18px; }

.bp3-icon { font-size: 1.6rem; display: block; margin-bottom: 8px; }
.bp3-plan-name { font-size: 1.25rem; font-weight: 700; color: var(--text-primary, #fff); }
.bp3-tagline { font-size: 0.82rem; color: var(--text-secondary, rgba(255,255,255,0.45)); margin-top: 2px; }

/* ── Price ── */
.bp3-price-block { text-align: center; margin-bottom: 14px; }
.bp3-price {
  font-size: 2.8rem; font-weight: 800; color: var(--text-primary, #fff);
  letter-spacing: -0.03em; line-height: 1;
}
.bp3-eur { font-size: 1.4rem; vertical-align: super; margin-left: 2px; }
.bp3-per { font-size: 0.88rem; color: var(--text-secondary, rgba(255,255,255,0.45)); margin-left: 4px; }
.bp3-equiv { font-size: 0.78rem; color: #10b981; margin-top: 4px; }

/* ── Credits pill ── */
.bp3-credits-pill {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 7px 14px; margin: 0 auto 18px; width: fit-content;
  background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.25);
  border-radius: 20px; font-size: 0.8rem; font-weight: 600; color: #c4b5fd;
}

/* ── Features list ── */
.bp3-features {
  flex: 1; list-style: none; padding: 0; margin: 0 0 20px;
  display: flex; flex-direction: column; gap: 7px;
}
.bp3-features li {
  font-size: 0.84rem; color: var(--text-primary, rgba(255,255,255,0.82));
  padding-left: 20px; position: relative; line-height: 1.4;
}
.bp3-features li::before {
  content: '\2713'; position: absolute; left: 0; color: #10b981;
  font-size: 0.78rem; font-weight: 700; top: 1px;
}

/* ── Buttons ── */
.bp3-btn-wrap { margin-top: auto; }
.bp3-btn {
  width: 100%; padding: 14px; border: none; border-radius: 14px;
  font-size: 0.95rem; font-weight: 700; cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
  text-align: center; letter-spacing: 0.01em;
}

.bp3-btn-go { color: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.bp3-btn-go:hover { transform: translateY(-2px); filter: brightness(1.15); box-shadow: 0 8px 28px rgba(0,0,0,0.4); }

.bp3-btn-starter { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.bp3-btn-pro { background: linear-gradient(135deg, #8b5cf6, #a855f7, #d946ef); }
.bp3-btn-business { background: linear-gradient(135deg, #f59e0b, #ef4444); }

.bp3-btn-current {
  background: rgba(16,185,129,0.12); color: #10b981;
  border: 1px solid rgba(16,185,129,0.3); cursor: default;
}
.bp3-btn-free {
  background: transparent; border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-secondary, rgba(255,255,255,0.45));
}
.bp3-btn-free:hover { border-color: rgba(255,255,255,0.3); color: #fff; }

/* ── Values bar ── */
.bp3-values {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-bottom: 56px; position: relative; z-index: 1;
}
@media (max-width: 768px) { .bp3-values { grid-template-columns: repeat(2, 1fr); } }

.bp3-value {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 14px;
  font-size: 0.84rem; color: var(--text-primary, rgba(255,255,255,0.8));
  line-height: 1.4; transition: border-color 0.2s;
}
.bp3-value:hover { border-color: rgba(255,255,255,0.15); }
.bp3-value-icon { font-size: 1.3rem; flex-shrink: 0; }

/* ── Credits section ── */
.bp3-credits { margin-bottom: 56px; position: relative; z-index: 1; }
.bp3-section-h2 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary, #fff); text-align: center; margin: 0 0 8px; }
.bp3-section-sub { font-size: 0.9rem; color: var(--text-secondary, rgba(255,255,255,0.5)); text-align: center; max-width: 500px; margin: 0 auto 24px; line-height: 1.5; }

.bp3-meter {
  padding: 18px 20px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; margin-bottom: 24px;
}
.bp3-meter-bar { height: 8px; background: rgba(255,255,255,0.08); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.bp3-meter-fill { height: 100%; background: linear-gradient(90deg, #8b5cf6, #d946ef); border-radius: 8px; transition: width 0.8s ease; }
.bp3-meter-info { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-secondary, rgba(255,255,255,0.5)); }

.bp3-packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 768px) { .bp3-packs { grid-template-columns: repeat(2, 1fr); } }

.bp3-pack {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; padding: 22px 14px; text-align: center; position: relative;
  transition: all 0.25s;
}
.bp3-pack:hover { transform: translateY(-4px); border-color: rgba(139,92,246,0.4); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }
.bp3-pack-best { border-color: rgba(139,92,246,0.4); background: rgba(139,92,246,0.06); }
.bp3-pack-tag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  padding: 2px 10px; background: #8b5cf6; color: #fff;
  border-radius: 8px; font-size: 0.68rem; font-weight: 700; white-space: nowrap;
}
.bp3-pack-label { font-size: 0.88rem; font-weight: 600; color: var(--text-primary, #fff); margin-bottom: 6px; }
.bp3-pack-num { font-size: 1.5rem; font-weight: 800; color: var(--text-primary, #fff); }
.bp3-pack-unit { font-size: 0.72rem; color: var(--text-secondary, rgba(255,255,255,0.45)); margin-bottom: 10px; }
.bp3-pack-price { font-size: 1.1rem; font-weight: 700; color: var(--text-primary, #fff); }
.bp3-pack-per { font-size: 0.72rem; color: #10b981; margin-bottom: 14px; }
.bp3-pack-buy {
  width: 100%; padding: 9px; border: 1px solid rgba(139,92,246,0.35);
  background: transparent; color: #a78bfa; border-radius: 10px;
  font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.bp3-pack-buy:hover { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.5); }

/* ── Comparison table ── */
.bp3-compare { margin-bottom: 56px; position: relative; z-index: 1; }
.bp3-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; }
.bp3-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.bp3-table thead th {
  padding: 14px 12px; font-size: 0.85rem; font-weight: 700;
  color: var(--text-primary, #fff); text-align: center;
  background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bp3-table thead th:first-child { text-align: left; padding-left: 16px; }
.bp3-th-pro { background: rgba(139,92,246,0.08) !important; }

.bp3-cat-row td {
  padding: 8px 16px; font-size: 0.78rem; font-weight: 700; color: #8b5cf6;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(139,92,246,0.04); border-top: 1px solid rgba(255,255,255,0.05);
}
.bp3-table tbody tr:not(.bp3-cat-row) { border-top: 1px solid rgba(255,255,255,0.03); }
.bp3-table tbody tr:not(.bp3-cat-row):hover { background: rgba(255,255,255,0.02); }

.bp3-feat-name { padding: 9px 16px; font-size: 0.84rem; color: var(--text-primary, rgba(255,255,255,0.8)); }
.bp3-table td { padding: 9px 12px; text-align: center; font-size: 0.84rem; }
.bp3-col-pro { background: rgba(139,92,246,0.03); }
.bp3-yes { color: #10b981; font-weight: 700; }
.bp3-no { color: rgba(255,255,255,0.15); }
.bp3-val { color: var(--text-primary, rgba(255,255,255,0.8)); font-weight: 600; }

/* ── FAQ ── */
.bp3-faq { margin-bottom: 56px; position: relative; z-index: 1; }
.bp3-faq-list { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.bp3-faq-item {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px; overflow: hidden; transition: border-color 0.2s;
}
.bp3-faq-item[open] { border-color: rgba(139,92,246,0.3); }
.bp3-faq-item summary {
  padding: 16px 20px; font-size: 0.95rem; font-weight: 600;
  color: var(--text-primary, #fff); cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.bp3-faq-item summary::after { content: '+'; font-size: 1.2rem; color: rgba(255,255,255,0.3); transition: transform 0.2s; }
.bp3-faq-item[open] summary::after { content: '-'; color: #8b5cf6; }
.bp3-faq-item summary::-webkit-details-marker { display: none; }
.bp3-faq-item p {
  padding: 0 20px 16px; margin: 0; font-size: 0.88rem;
  color: var(--text-secondary, rgba(255,255,255,0.55)); line-height: 1.6;
}

/* ── Final CTA ── */
.bp3-final-cta {
  text-align: center; padding: 48px 24px;
  background: linear-gradient(180deg, rgba(139,92,246,0.06) 0%, transparent 100%);
  border: 1px solid rgba(139,92,246,0.15); border-radius: 24px;
  position: relative; z-index: 1;
}
.bp3-final-cta h2 { font-size: 1.6rem; font-weight: 700; color: var(--text-primary, #fff); margin: 0 0 8px; }
.bp3-final-cta p { font-size: 0.95rem; color: var(--text-secondary, rgba(255,255,255,0.5)); margin: 0 0 24px; }
.bp3-final-btn {
  padding: 16px 40px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
  color: #fff; font-size: 1.05rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 32px rgba(139,92,246,0.4);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.bp3-final-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 40px rgba(139,92,246,0.5); }

/* ── Error ── */
.bp3-error {
  text-align: center; padding: 80px 20px;
  color: var(--text-secondary, rgba(255,255,255,0.5)); font-size: 0.95rem;
}
.bp3-error button {
  margin-top: 12px; padding: 10px 24px;
  background: #8b5cf6; color: #fff; border: none; border-radius: 10px;
  font-weight: 600; cursor: pointer;
}

/* ═══════════════════════════════════════════════════
   MAHA ORB — Override v2 : cacher chatbot-fab doublon
   + aura Mahayawen renforcée (2026-02-25)
   ═══════════════════════════════════════════════════ */

/* Cacher le vieux bouton chatbot golden-ball — remplacé par maha-orb */
#chatbot-toggle {
    display: none !important;
}

/* ── Maha Orb v2 — aura lumineuse violette/indigo ── */

/* Anneau extérieur : dégradé violet→indigo→violet au lieu de jaune */
.maha-orb-ring-1 {
    background: conic-gradient(
        from 0deg,
        #8b5cf6,
        #6366f1,
        #a78bfa,
        #ec4899,
        #8b5cf6
    ) !important;
    animation: orb-spin-1 5s linear infinite !important;
}

/* Halo externe diffus violet */
.maha-orb-ring-3 {
    background: conic-gradient(
        from 180deg,
        rgba(139,92,246,0.5),
        rgba(99,102,241,0.4),
        rgba(236,72,153,0.35),
        rgba(139,92,246,0.5)
    ) !important;
    animation: orb-spin-1 8s linear infinite reverse !important;
    filter: blur(5px) !important;
}

/* Sphère intérieure — reflet lumineux violet */
.maha-orb-inner {
    background: radial-gradient(
        circle at 32% 30%,
        rgba(167,139,250,0.35),
        rgba(99,102,241,0.15) 40%,
        var(--bg-primary, #050510) 70%
    ) !important;
    box-shadow:
        inset 0 2px 10px rgba(167,139,250,0.25),
        inset 0 -2px 6px rgba(0,0,0,0.6),
        0 8px 32px rgba(99,102,241,0.4) !important;
}

/* Glow pulse : violet au lieu de doré */
#maha-orb::before {
    background: radial-gradient(
        circle,
        rgba(139,92,246,0.35) 0%,
        rgba(99,102,241,0.15) 40%,
        transparent 70%
    ) !important;
    animation: maha-glow-v2 2.8s ease-in-out infinite !important;
}

@keyframes maha-glow-v2 {
    0%, 100% { transform: scale(1);   opacity: 0.7; }
    50%       { transform: scale(1.3); opacity: 1;   }
}

/* Emoji Mahayawen — glow violet */
.maha-orb-emoji {
    filter: drop-shadow(0 0 8px rgba(139,92,246,0.9)) !important;
}

/* Tooltip amélioré */
.maha-orb-tooltip {
    background: rgba(99,102,241,0.9) !important;
    border: 1px solid rgba(139,92,246,0.5) !important;
    box-shadow: 0 4px 16px rgba(99,102,241,0.4) !important;
}

/* Masquer définitivement chatbot-fab — maha-orb le remplace (2026-02-25 override final) */
body.logged-in #chatbot-toggle,
body.logged-in .chatbot-fab,
#chatbot-toggle,
.chatbot-fab {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Maha Orb — logo image à la place de l'emoji */
.maha-orb-logo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none;
    draggable: false;
    filter: drop-shadow(0 0 8px rgba(139,92,246,0.7));
    transition: filter 0.2s ease;
}

/* État listening — glow rouge sur le logo */
#maha-orb.maha-orb-listening .maha-orb-logo {
    filter: drop-shadow(0 0 10px rgba(239,68,68,0.9)) brightness(1.1);
}

/* État processing — glow violet pulsant */
#maha-orb.maha-orb-processing .maha-orb-logo {
    filter: drop-shadow(0 0 12px rgba(139,92,246,1)) brightness(1.15);
    animation: maha-logo-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes maha-logo-pulse {
    from { filter: drop-shadow(0 0 8px rgba(139,92,246,0.7)) brightness(1.1); }
    to   { filter: drop-shadow(0 0 16px rgba(167,139,250,1)) brightness(1.3); }
}

/* ===== css/referral-dashboard.css ===== */
/* Referral Dashboard CSS */
.ref-dash { max-width: 900px; margin: 0 auto; padding: 32px 20px 80px; }

.ref-header { text-align: center; margin-bottom: 40px; }
.ref-title { font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px; }
.ref-subtitle { font-size: 16px; color: var(--text-secondary); margin: 0; }

.ref-section-title { font-size: 20px; font-weight: 600; color: var(--text-primary); margin: 0 0 16px; }

.ref-link-section { margin-bottom: 40px; }
.ref-link-box { display: flex; gap: 8px; margin-bottom: 16px; }
.ref-link-input {
  flex: 1; padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  background: var(--bg-card, rgba(255,255,255,0.05));
  color: var(--text-primary); font-size: 14px; font-family: monospace;
}
.ref-copy-btn {
  padding: 12px 24px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff;
  font-weight: 600; font-size: 14px; transition: all 0.2s;
}
.ref-copy-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139,92,246,0.4); }
.ref-copied { background: linear-gradient(135deg, #22c55e, #16a34a) !important; }

.ref-share-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ref-share-btn {
  padding: 10px 20px; border-radius: 8px; border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  background: var(--bg-card, rgba(255,255,255,0.05)); color: var(--text-primary);
  font-size: 13px; cursor: pointer; transition: all 0.2s;
}
.ref-share-btn:hover { transform: translateY(-1px); }
.ref-share-whatsapp:hover { border-color: #25d366; color: #25d366; }
.ref-share-twitter:hover { border-color: #1da1f2; color: #1da1f2; }
.ref-share-email:hover { border-color: #f59e0b; color: #f59e0b; }
.ref-share-linkedin:hover { border-color: #0077b5; color: #0077b5; }

.ref-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
.ref-kpi {
  padding: 24px 16px; border-radius: 12px; text-align: center;
  background: var(--bg-card, rgba(255,255,255,0.05));
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
}
.ref-kpi-value { font-size: 28px; font-weight: 700; color: #8b5cf6; margin-bottom: 4px; }
.ref-kpi-label { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.ref-kpi-desc { font-size: 11px; color: var(--text-secondary); }

.ref-earnings { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 40px; }
.ref-earning-card {
  padding: 24px; border-radius: 12px;
  background: var(--bg-card, rgba(255,255,255,0.05));
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
}
.ref-earning-card h3 { margin: 0 0 8px; font-size: 14px; color: var(--text-secondary); }
.ref-amount { font-size: 32px; font-weight: 700; color: #f59e0b; margin: 0 0 4px; }
.ref-paid { color: #22c55e; }
.ref-label { font-size: 12px; color: var(--text-secondary); }

.ref-how { margin-bottom: 40px; }
.ref-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ref-step {
  padding: 24px 16px; border-radius: 12px; text-align: center;
  background: var(--bg-card, rgba(255,255,255,0.05));
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
}
.ref-step-num {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff;
  margin-bottom: 12px; font-size: 16px;
}
.ref-step h4 { margin: 0 0 8px; font-size: 14px; color: var(--text-primary); }
.ref-step p { margin: 0; font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

.ref-list { margin-bottom: 40px; }
.ref-table { width: 100%; border-collapse: collapse; }
.ref-table th, .ref-table td {
  padding: 10px 12px; text-align: left; font-size: 13px;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.1));
}
.ref-table th { color: var(--text-secondary); font-weight: 600; }
.ref-table td { color: var(--text-primary); }
.ref-status-ok { color: #22c55e; font-weight: 600; }
.ref-status-pending { color: #f59e0b; }

@media (max-width: 768px) {
  .ref-kpis { grid-template-columns: repeat(2, 1fr); }
  .ref-steps { grid-template-columns: repeat(2, 1fr); }
  .ref-earnings { grid-template-columns: 1fr; }
  .ref-link-box { flex-direction: column; }
}
@media (max-width: 480px) {
  .ref-kpis { grid-template-columns: 1fr; }
  .ref-steps { grid-template-columns: 1fr; }
}

/* ===== css/crm-phase2.css?v=200 ===== */
/* CRM Phase 2 — Kanban + AI Score + CSV Import
   v=200 */

/* ── Score Badge ── */
.crm-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
}

/* ── Import CSV button ── */
.crm-btn-import {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s;
}
.crm-btn-import:hover { background: var(--bg-tertiary); }

/* ── CSV Upload Zone ── */
.csv-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    text-align: center;
    color: var(--text-secondary);
    transition: border-color 0.2s, background 0.2s;
}
.csv-upload-zone.csv-drag-over {
    border-color: var(--accent-color);
    background: rgba(99,102,241,0.05);
}
.csv-upload-btn {
    margin-top: 12px;
    padding: 8px 20px;
    border-radius: 8px;
    background: var(--accent-color);
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}
.csv-upload-hint {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.csv-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 16px;
}
.csv-file-name { font-weight: 600; color: var(--text-primary); }
.csv-row-count { font-size: 0.85rem; color: var(--text-secondary); }
.csv-mapping-section h4,
.csv-preview-section h4 {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.csv-mapping-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.csv-map-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
}
.csv-col-name {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}
.csv-arrow {
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.csv-map-select {
    flex: 1;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.85rem;
}
.csv-preview-table-wrap {
    overflow-x: auto;
    max-height: 200px;
    margin-bottom: 16px;
}
.csv-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.csv-preview-table th {
    padding: 6px 10px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
}
.csv-preview-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.csv-result {
    text-align: center;
    padding: 30px 20px;
}
.csv-result-icon { font-size: 3rem; margin-bottom: 8px; }
.csv-result-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 20px 0;
}
.csv-result-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.csv-result-num {
    font-size: 1.8rem;
    font-weight: 700;
}
.csv-errors {
    text-align: left;
    max-height: 120px;
    overflow-y: auto;
    margin: 12px auto;
    max-width: 500px;
}
.csv-error-line {
    font-size: 0.8rem;
    color: #EF4444;
    padding: 3px 0;
}
.crm-modal-wide { max-width: 700px; }

/* ── AI Score Box (in drawer) ── */
.crm-ai-loading {
    padding: 12px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin: 8px 16px;
}
.crm-ai-score-box {
    margin: 8px 16px;
    padding: 14px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}
.crm-ai-score-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.crm-ai-score-circle {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 3px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.crm-ai-score-num { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.crm-ai-score-label { font-size: 0.6rem; color: var(--text-secondary); }
.crm-ai-grade {
    padding: 4px 12px;
    border-radius: 8px;
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
}
.crm-ai-reasons { display: flex; flex-direction: column; gap: 4px; }
.crm-ai-reason { font-size: 0.83rem; color: var(--text-primary); }
.crm-ai-next-action {
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(99,102,241,0.08);
    border-radius: 6px;
    font-size: 0.83rem;
    color: var(--text-primary);
}
.crm-qa-ai {
    background: rgba(139,92,246,0.1) !important;
    border-color: rgba(139,92,246,0.3) !important;
    color: #c084fc !important;
}

/* ── Kanban Board ── */
.crm-kanban-wrapper { padding: 20px; max-width: 1600px; margin: 0 auto; }
.crm-kanban-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.crm-kanban-title { margin: 0; font-size: 1.4rem; color: var(--text-primary); }
.crm-kanban-subtitle { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.85rem; }
.crm-kanban-actions { display: flex; gap: 8px; }
.crm-kanban-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.crm-kb-stat {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
}
.crm-kb-stat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.crm-kb-stat-label { font-size: 0.8rem; color: var(--text-secondary); }
.crm-kb-stat-value { font-size: 1.3rem; font-weight: 700; margin-top: 4px; }

/* Board */
.crm-kanban-board {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 16px;
    min-height: 400px;
}
.crm-kb-column {
    min-width: 260px;
    max-width: 300px;
    flex: 1;
    background: var(--bg-tertiary);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
}
.crm-kb-col-header {
    padding: 10px 12px 8px;
    border-bottom: 2px solid;
}
.crm-kb-col-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.crm-kb-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.crm-kb-col-label { font-weight: 600; font-size: 0.88rem; color: var(--text-primary); flex: 1; }
.crm-kb-col-count {
    background: var(--bg-secondary);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.crm-kb-col-total {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 500;
}

/* Cards zone */
.crm-kb-cards {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 60px;
    transition: background 0.15s;
}
.crm-kb-cards.crm-kb-drop-active {
    background: rgba(99,102,241,0.06);
    border-radius: 0 0 10px 10px;
}

/* Card */
.crm-kb-card {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.crm-kb-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.crm-kb-card.crm-kb-dragging {
    opacity: 0.4;
    transform: rotate(2deg);
}
.crm-kb-card-title { font-weight: 600; font-size: 0.88rem; color: var(--text-primary); margin-bottom: 3px; }
.crm-kb-card-contact { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 6px; }
.crm-kb-card-bottom { display: flex; justify-content: space-between; align-items: center; }
.crm-kb-card-amount { font-weight: 600; color: var(--accent-color); font-size: 0.88rem; }
.crm-kb-card-meta { display: flex; gap: 8px; align-items: center; }
.crm-kb-card-prob { font-size: 0.75rem; font-weight: 600; }
.crm-kb-card-date { font-size: 0.72rem; color: var(--text-secondary); }
.crm-kb-empty { text-align: center; padding: 40px; color: var(--text-secondary); }

/* Buttons */
.crm-kb-btn {
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    border: none;
    transition: background 0.15s, transform 0.1s;
}
.crm-kb-btn:active { transform: scale(0.97); }
.crm-kb-btn-pri { background: var(--accent-color); color: #fff; font-weight: 600; }
.crm-kb-btn-sec { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); }
.crm-kb-btn-ghost { background: transparent; border: 1px solid; padding: 6px 12px; font-size: 0.82rem; border-radius: 6px; cursor: pointer; }
.crm-kb-btn-ai { background: rgba(139,92,246,0.12); color: #c084fc; border: 1px solid rgba(139,92,246,0.3); font-size: 0.82rem; border-radius: 6px; cursor: pointer; padding: 6px 12px; }

/* Modal */
.crm-kb-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.crm-kb-modal {
    background: var(--bg-primary);
    border-radius: 14px;
    padding: 24px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
}
.crm-kb-modal-lg { max-width: 640px; }
.crm-kb-modal-title { margin: 0 0 16px; color: var(--text-primary); font-size: 1.1rem; }
.crm-kb-modal-title-row { display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px; }
.crm-kb-close { background: none; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; padding: 0 4px; }
.crm-kb-modal-footer { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }

/* Form */
.crm-kb-form { display: flex; flex-direction: column; gap: 10px; }
.crm-kb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crm-kb-input {
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
}
.crm-kb-textarea { resize: vertical; }
.crm-kb-select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.85rem;
}

/* Contact dropdown */
.crm-kb-contact-dropdown {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    z-index: 10;
    max-height: 180px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.crm-kb-contact-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: background 0.1s;
}
.crm-kb-contact-item:hover { background: var(--bg-secondary); }

/* Deal detail */
.crm-kb-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.crm-kb-detail-card {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 10px 12px;
}
.crm-kb-detail-label { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 2px; }
.crm-kb-detail-val { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.crm-kb-description {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    color: var(--text-primary);
    font-size: 0.88rem;
}
.crm-kb-section-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin: 0 0 8px;
}
.crm-kb-activity-form {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}
.crm-kb-activities { max-height: 200px; overflow-y: auto; }
.crm-kb-act-item {
    padding: 7px 10px;
    border-left: 3px solid var(--accent-color);
    margin-bottom: 6px;
    background: var(--bg-secondary);
    border-radius: 0 6px 6px 0;
}
.crm-kb-act-row { display: flex; justify-content: space-between; }
.crm-kb-act-title { font-weight: 500; color: var(--text-primary); font-size: 0.83rem; }
.crm-kb-act-date { font-size: 0.72rem; color: var(--text-secondary); }
.crm-kb-act-desc { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }

/* AI analysis box */
.crm-kb-ai-box {
    background: var(--bg-secondary);
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 10px;
    padding: 14px;
}
.crm-kb-ai-header { font-weight: 600; margin-bottom: 10px; color: #c084fc; }
.crm-kb-ai-grid { display: flex; gap: 20px; margin-bottom: 10px; }
.crm-kb-ai-label { font-size: 0.78rem; color: var(--text-secondary); display: block; }
.crm-kb-ai-val { font-size: 1rem; font-weight: 700; }
.crm-kb-ai-section { font-size: 0.83rem; color: var(--text-primary); margin-top: 8px; }
.crm-kb-ai-section ul { margin: 4px 0 0 16px; padding: 0; }
.crm-kb-ai-section li { margin-bottom: 2px; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .crm-kanban-board { flex-direction: column; }
    .crm-kb-column { min-width: 100%; max-width: 100%; }
    .crm-kb-detail-grid { grid-template-columns: 1fr; }
    .crm-kb-form-row { grid-template-columns: 1fr; }
}


/* ===== css/pfe-elite.css?v=2603052323 ===== */
/**
 * PROMPT FORGE EXAMPLES - ELITE CSS v1.0
 * Premium dark gold design for the Bibliotheque Elite section
 */

/* ── ROOT ────────────────────────────────────────────── */
.pfe-root {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

/* ── HEADER ──────────────────────────────────────────── */
.pfe-header {
    position: relative;
    text-align: center;
    padding: 32px 24px 20px;
    overflow: hidden;
}

.pfe-header-glow {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 200px;
    background: radial-gradient(ellipse at center, rgba(245,158,11,.12) 0%, transparent 70%);
    pointer-events: none;
}

.pfe-title {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -.5px;
    margin: 0 0 6px;
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 40%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.3;
}

.pfe-subtitle {
    font-size: 14px;
    color: rgba(242,234,216,.5);
    margin: 0;
    font-weight: 400;
    letter-spacing: .2px;
}

.pfe-subtitle-count {
    color: #f59e0b;
    font-weight: 700;
}

/* ── FILTERS ─────────────────────────────────────────── */
.pfe-filters-wrap {
    padding: 0 20px 16px;
    overflow: hidden;
}

.pfe-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 4px 0;
}

.pfe-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    color: rgba(242,234,216,.6);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .22s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
    font-family: inherit;
}

.pfe-filter-btn:hover {
    background: var(--c-lo, rgba(245,158,11,.08));
    border-color: var(--c-hi, rgba(245,158,11,.25));
    color: var(--cat-c, #f59e0b);
    transform: translateY(-1px);
}

.pfe-filter-btn.active {
    background: var(--c-md, rgba(245,158,11,.15));
    border-color: var(--c-hi, rgba(245,158,11,.35));
    color: var(--cat-c, #f59e0b);
    box-shadow: 0 4px 18px var(--c-shd, rgba(245,158,11,.18)),
                inset 0 1px 0 rgba(255,255,255,.06);
}

.pfe-filter-icon {
    font-size: 14px;
    line-height: 1;
}

.pfe-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: rgba(255,255,255,.08);
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 800;
    color: rgba(242,234,216,.55);
    transition: all .22s;
}

.pfe-filter-btn.active .pfe-filter-count {
    background: var(--cat-c, #f59e0b);
    color: #0a0806;
}

/* ── CATEGORY TAGLINE ────────────────────────────────── */
.pfe-cat-tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    margin: 0 20px 20px;
    background: var(--c-lo, rgba(245,158,11,.06));
    border: 1px solid var(--c-hi, rgba(245,158,11,.18));
    border-radius: 12px;
    animation: pfeTagIn .35s ease-out;
}

@keyframes pfeTagIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.pfe-cat-tagline-icon {
    font-size: 20px;
    line-height: 1;
}

.pfe-cat-tagline-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--cat-c, #f59e0b);
    letter-spacing: .2px;
}

/* ── GRID ────────────────────────────────────────────── */
.pfe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
    padding: 0 20px 40px;
}

/* ── CARD ────────────────────────────────────────────── */
.pfe-card {
    position: relative;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    overflow: hidden;
    transition: all .28s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
}

.pfe-card:hover {
    border-color: var(--c-hi, rgba(245,158,11,.28));
    background: rgba(255,255,255,.055);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,.3),
                0 0 0 1px var(--c-hi, rgba(245,158,11,.15));
}

.pfe-card--open {
    border-color: var(--c-xh, rgba(245,158,11,.4));
    background: rgba(255,255,255,.05);
    box-shadow: 0 16px 48px rgba(0,0,0,.35),
                0 0 30px var(--c-shd, rgba(245,158,11,.12));
}

/* Accent bar left */
.pfe-card-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cat-c, #f59e0b), transparent);
    opacity: .6;
    transition: opacity .25s, width .25s;
}

.pfe-card:hover .pfe-card-accent,
.pfe-card--open .pfe-card-accent {
    opacity: 1;
    width: 4px;
}

/* Card header */
.pfe-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 18px 22px;
}

.pfe-card-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pfe-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: var(--c-lo, rgba(245,158,11,.08));
    border: 1px solid var(--c-hi, rgba(245,158,11,.2));
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: var(--cat-c, #f59e0b);
    letter-spacing: .3px;
    width: fit-content;
}

.pfe-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #f2ead8;
    margin: 0;
    line-height: 1.35;
    letter-spacing: -.2px;
}

.pfe-card-desc {
    font-size: 13px;
    color: rgba(242,234,216,.5);
    margin: 0;
    line-height: 1.55;
}

/* Toggle chevron */
.pfe-card-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(242,234,216,.4);
    cursor: pointer;
    flex-shrink: 0;
    transition: all .25s;
    margin-top: 2px;
}

.pfe-card-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.pfe-card:hover .pfe-card-toggle {
    background: var(--c-lo, rgba(245,158,11,.08));
    border-color: var(--c-hi, rgba(245,158,11,.2));
    color: var(--cat-c, #f59e0b);
}

.pfe-card--open .pfe-card-toggle {
    background: var(--c-md, rgba(245,158,11,.15));
    border-color: var(--c-hi, rgba(245,158,11,.3));
    color: var(--cat-c, #f59e0b);
    box-shadow: 0 4px 12px var(--c-shd, rgba(245,158,11,.15));
}

.pfe-card--open .pfe-card-toggle svg {
    transform: rotate(180deg);
}

/* ── CARD BODY (collapsed/expanded) ──────────────────── */
.pfe-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.4,0,.2,1);
}

.pfe-card--open .pfe-card-body {
    max-height: 600px;
    transition: max-height .45s cubic-bezier(.4,0,.2,1);
}

.pfe-card-body-inner {
    padding: 0 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── PROMPT BOX ──────────────────────────────────────── */
.pfe-prompt-box {
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    overflow: hidden;
}

.pfe-prompt-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.pfe-prompt-box-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(242,234,216,.65);
    letter-spacing: .3px;
}

.pfe-prompt-char-count {
    font-size: 11px;
    color: rgba(242,234,216,.3);
    font-weight: 500;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

.pfe-prompt-text {
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(242,234,216,.75);
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.pfe-prompt-text .pfe-step {
    color: var(--cat-c, #f59e0b);
    font-weight: 700;
}

/* ── ACTION BUTTONS ──────────────────────────────────── */
.pfe-card-actions {
    display: flex;
    gap: 10px;
}

.pfe-btn-copy,
.pfe-btn-forge {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    border: 1px solid;
    font-family: inherit;
}

.pfe-btn-copy svg,
.pfe-btn-forge svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.pfe-btn-copy {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.1);
    color: rgba(242,234,216,.65);
}

.pfe-btn-copy:hover {
    background: rgba(255,255,255,.1);
    color: #f2ead8;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

.pfe-btn-copied {
    background: rgba(16,185,129,.15) !important;
    border-color: rgba(16,185,129,.3) !important;
    color: #6ee7b7 !important;
}

.pfe-btn-forge {
    background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(245,158,11,.08));
    border-color: rgba(245,158,11,.3);
    color: #f59e0b;
}

.pfe-btn-forge:hover {
    background: linear-gradient(135deg, rgba(245,158,11,.25), rgba(245,158,11,.12));
    border-color: rgba(245,158,11,.45);
    color: #fbbf24;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(245,158,11,.2);
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
    .pfe-header { padding: 24px 16px 16px; }
    .pfe-title { font-size: 22px; }
    .pfe-filters-wrap { padding: 0 12px 12px; }
    .pfe-filters { gap: 6px; justify-content: flex-start; }
    .pfe-filter-btn { padding: 6px 12px; font-size: 11.5px; }
    .pfe-grid {
        grid-template-columns: 1fr;
        padding: 0 12px 30px;
        gap: 10px;
    }
    .pfe-card-head { padding: 14px 14px 14px 18px; }
    .pfe-card-body-inner { padding: 0 18px 16px; }
    .pfe-card-actions { flex-direction: column; }
    .pfe-cat-tagline { margin: 0 12px 16px; padding: 12px 16px; }
}

@media (max-width: 480px) {
    .pfe-title { font-size: 20px; }
    .pfe-filter-btn { padding: 5px 10px; font-size: 11px; }
    .pfe-filter-count { min-width: 16px; height: 16px; font-size: 9.5px; }
    .pfe-card-title { font-size: 14.5px; }
}

/* ===== Referral Dashboard Rewards ===== */
.ref-rewards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:24px 0}
.ref-reward-card{background:var(--ds-card-bg,var(--bg-card,rgba(30,30,40,0.85)));border:1px solid var(--ds-card-border,rgba(255,255,255,0.08));border-radius:16px;padding:28px 20px;text-align:center;transition:transform 0.2s,box-shadow 0.2s}
.ref-reward-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.ref-reward-icon{font-size:36px;margin-bottom:8px}
.ref-reward-value{font-size:28px;font-weight:700;color:var(--accent,#d4af37);margin-bottom:4px}
.ref-reward-label{font-size:14px;font-weight:600;color:var(--text-primary,#fff);margin-bottom:6px}
.ref-reward-detail{font-size:12px;color:var(--text-secondary,rgba(255,255,255,0.5));line-height:1.4}
.ref-reward-giriz .ref-reward-value{color:#a78bfa}
.ref-reward-ai .ref-reward-value{color:#60a5fa}
.ref-reward-money .ref-reward-value{color:#34d399}
.ref-rewards-section{margin:30px 0}
.ref-dash{max-width:900px;margin:0 auto;padding:20px}
.ref-header{margin-bottom:30px}
.ref-title{font-size:28px;font-weight:700;color:var(--text-primary,#fff);margin-bottom:8px}
.ref-subtitle{font-size:15px;color:var(--text-secondary,rgba(255,255,255,0.6));line-height:1.5}
.ref-section-title{font-size:18px;font-weight:600;color:var(--text-primary,#fff);margin-bottom:16px}
.ref-link-box{display:flex;gap:12px;margin-bottom:16px}
.ref-link-input{flex:1;background:var(--bg-secondary,rgba(30,30,40,0.6));border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:12px 16px;color:var(--text-primary,#fff);font-size:14px;font-family:monospace}
.ref-copy-btn{background:var(--accent,#d4af37);color:#000;border:none;border-radius:10px;padding:12px 24px;font-weight:600;cursor:pointer;font-size:14px;white-space:nowrap;transition:opacity 0.2s}
.ref-copy-btn:hover{opacity:0.85}
.ref-copied{background:#34d399 !important}
.ref-share-btns{display:flex;gap:10px;flex-wrap:wrap}
.ref-share-btn{padding:10px 18px;border-radius:10px;border:1px solid rgba(255,255,255,0.1);background:var(--bg-secondary,rgba(30,30,40,0.6));color:var(--text-primary,#fff);cursor:pointer;font-size:13px;transition:background 0.2s}
.ref-share-btn:hover{background:rgba(255,255,255,0.1)}
.ref-share-whatsapp:hover{background:rgba(37,211,102,0.2);border-color:rgba(37,211,102,0.4)}
.ref-share-twitter:hover{background:rgba(29,161,242,0.2);border-color:rgba(29,161,242,0.4)}
.ref-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:24px 0}
.ref-kpi{background:var(--ds-card-bg,var(--bg-card,rgba(30,30,40,0.85)));border:1px solid var(--ds-card-border,rgba(255,255,255,0.08));border-radius:14px;padding:20px;text-align:center}
.ref-kpi-value{font-size:24px;font-weight:700;color:var(--accent,#d4af37)}
.ref-kpi-label{font-size:13px;font-weight:600;color:var(--text-primary,#fff);margin-top:4px}
.ref-kpi-desc{font-size:11px;color:var(--text-secondary,rgba(255,255,255,0.4));margin-top:2px}
.ref-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.ref-step{background:var(--bg-secondary,rgba(30,30,40,0.5));border-radius:14px;padding:20px;text-align:center}
.ref-step-num{width:36px;height:36px;border-radius:50%;background:var(--accent,#d4af37);color:#000;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.ref-step h4{color:var(--text-primary,#fff);margin:0 0 8px;font-size:14px}
.ref-step p{color:var(--text-secondary,rgba(255,255,255,0.6));font-size:12px;margin:0;line-height:1.4}
.ref-earnings{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.ref-earning-card{background:var(--ds-card-bg,var(--bg-card,rgba(30,30,40,0.85)));border-radius:14px;padding:20px;text-align:center;border:1px solid rgba(255,255,255,0.06)}
.ref-amount{font-size:24px;font-weight:700;color:var(--accent,#d4af37);margin:8px 0 4px}
.ref-paid{color:#34d399}
.ref-label{font-size:12px;color:var(--text-secondary,rgba(255,255,255,0.5))}
.ref-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.ref-table th{text-align:left;padding:10px 12px;color:var(--text-secondary,rgba(255,255,255,0.5));border-bottom:1px solid rgba(255,255,255,0.08);font-weight:500}
.ref-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.04);color:var(--text-primary,#fff)}
.ref-status-ok{color:#34d399;font-weight:600}
.ref-status-pending{color:#fbbf24;font-weight:500}
.ref-list{margin-top:30px}

/* ===== FIX: Prevent overscroll on all pages — 2026-03-06 ===== */
html, body {
    height: 100vh;
    overflow: hidden;
}
.main-content {
    height: 100vh;
    min-height: unset;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Login screen needs its own scroll */
.auth-login-overlay {
    overflow-y: auto;
}

/* ===== css/tasks-achievements.css v2.0 ===== */
/* ═══════════════════════════════════════════════════════════
   TASKS ACHIEVEMENTS v2.0 — Premium Dark Theme
   ═══════════════════════════════════════════════════════════ */

.ta-root { display: flex; flex-direction: column; gap: 16px; padding: 0 0 40px; }

/* Loading */
.ta-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 100px 20px; color: var(--text-muted, rgba(242,234,216,.4)); font-size: 14px; }
.ta-loading-ring { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(245,158,11,.1); border-top-color: #f59e0b; animation: taSpin .7s linear infinite; }
@keyframes taSpin { to { transform: rotate(360deg); } }

/* Empty */
.ta-empty { text-align: center; padding: 100px 20px; color: var(--text-muted, rgba(242,234,216,.35)); }
.ta-empty-icon { font-size: 48px; margin-bottom: 16px; filter: grayscale(.5); }
.ta-empty-sub { font-size: 13px; margin-top: 8px; opacity: .6; }

/* Quote */
.ta-quote { text-align: center; font-size: 15px; font-weight: 600; color: var(--text, #f2ead8); letter-spacing: .3px; padding: 8px 0 4px; opacity: .7; font-style: italic; }

/* ── NAV ─────────────────────────────────────────────── */
.ta-nav { display: flex; gap: 3px; padding: 3px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); border-radius: 12px; margin-bottom: 6px; }
.ta-nav-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; background: transparent; border: none; border-radius: 9px; color: var(--text-muted, rgba(242,234,216,.4)); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .2s ease; font-family: inherit; white-space: nowrap; }
.ta-nav-btn:hover { color: var(--text, rgba(242,234,216,.7)); background: rgba(255,255,255,.035); }
.ta-nav-btn.active { background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(245,158,11,.05)); color: #f59e0b; box-shadow: 0 2px 12px rgba(245,158,11,.12), inset 0 1px 0 rgba(255,255,255,.06); }
.ta-nav-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── KPI BLOCKS ──────────────────────────────────────── */
.ta-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 900px) { .ta-kpis { grid-template-columns: repeat(2, 1fr); } }

.ta-kpi { position: relative; padding: 20px 16px 16px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.06); animation: taSlideUp .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes taSlideUp { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }

.ta-kpi-icon { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; opacity: .25; }
.ta-kpi-icon svg { width: 100%; height: 100%; }
.ta-kpi-glow { position: absolute; top: -30px; right: -30px; width: 90px; height: 90px; border-radius: 50%; filter: blur(35px); opacity: .25; pointer-events: none; animation: taGlow 4s ease-in-out infinite alternate; }
@keyframes taGlow { from { opacity: .15; transform: scale(.85); } to { opacity: .35; transform: scale(1.15); } }

.ta-kpi-gold { background: linear-gradient(150deg, rgba(245,158,11,.1) 0%, rgba(245,158,11,.02) 100%); border-color: rgba(245,158,11,.15); }
.ta-kpi-gold .ta-kpi-glow { background: #f59e0b; }
.ta-kpi-gold .ta-kpi-value { color: #fbbf24; }
.ta-kpi-gold .ta-kpi-icon { color: #fbbf24; }

.ta-kpi-emerald { background: linear-gradient(150deg, rgba(16,185,129,.1) 0%, rgba(16,185,129,.02) 100%); border-color: rgba(16,185,129,.15); }
.ta-kpi-emerald .ta-kpi-glow { background: #10b981; }
.ta-kpi-emerald .ta-kpi-value { color: #6ee7b7; }
.ta-kpi-emerald .ta-kpi-icon { color: #6ee7b7; }
.ta-kpi-emerald .ta-kpi-ring-fill { color: #10b981; }

.ta-kpi-fire { background: linear-gradient(150deg, rgba(239,68,68,.1) 0%, rgba(249,115,22,.02) 100%); border-color: rgba(239,68,68,.15); }
.ta-kpi-fire .ta-kpi-glow { background: #ef4444; }
.ta-kpi-fire .ta-kpi-value { color: #fca5a5; }
.ta-kpi-fire .ta-kpi-icon { color: #fca5a5; }

.ta-kpi-blue { background: linear-gradient(150deg, rgba(59,130,246,.1) 0%, rgba(99,102,241,.02) 100%); border-color: rgba(59,130,246,.15); }
.ta-kpi-blue .ta-kpi-glow { background: #3b82f6; }
.ta-kpi-blue .ta-kpi-value { color: #93c5fd; }
.ta-kpi-blue .ta-kpi-icon { color: #93c5fd; }

.ta-kpi-value { font-size: 30px; font-weight: 900; line-height: 1.1; letter-spacing: -1px; margin-bottom: 4px; }
.ta-kpi-label { font-size: 12px; font-weight: 600; color: var(--text-muted, rgba(242,234,216,.55)); letter-spacing: .3px; }
.ta-kpi-sub { font-size: 11px; color: var(--text-muted, rgba(242,234,216,.3)); margin-top: 3px; }
.ta-kpi-ring { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; }
.ta-kpi-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }

/* ── SECTIONS ────────────────────────────────────────── */
.ta-section { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-radius: 14px; padding: 18px; animation: taFade .4s ease-out both; }
@keyframes taFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
.ta-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ta-section-head h3 { font-size: 13.5px; font-weight: 700; color: var(--text, #f2ead8); margin: 0; }
.ta-section-sub { font-size: 11.5px; color: var(--text-muted, rgba(242,234,216,.3)); }
.ta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 700px) { .ta-row { grid-template-columns: 1fr; } }
.ta-flex1 { min-width: 0; }

/* ── VELOCITY BARS ───────────────────────────────────── */
.ta-bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: 0 2px; }
.ta-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; animation: taFade .4s ease-out both; }
.ta-bar { width: 100%; min-height: 4px; background: linear-gradient(to top, rgba(245,158,11,.65), rgba(245,158,11,.2)); border-radius: 4px 4px 0 0; position: relative; transition: filter .15s; cursor: default; animation: taBarGrow .6s cubic-bezier(.34,1.56,.64,1) both; }
.ta-bar:hover { filter: brightness(1.4); }
@keyframes taBarGrow { from { height: 0 !important; opacity: 0; } }
.ta-bar-tip { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: #f59e0b; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.ta-bar:hover .ta-bar-tip { opacity: 1; }
.ta-bar-label { font-size: 9px; color: var(--text-muted, rgba(242,234,216,.25)); }

/* ── CALENDAR HEATMAP ────────────────────────────────── */
.ta-cal { user-select: none; }
.ta-cal-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px; }
.ta-cal-header span { text-align: center; font-size: 9px; font-weight: 600; color: var(--text-muted, rgba(242,234,216,.25)); }
.ta-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ta-cal-cell { aspect-ratio: 1; border-radius: 4px; background: rgba(245,158,11, calc(var(--i, 0) * .75)); border: 1px solid rgba(245,158,11, calc(var(--i, 0) * .35 + .04)); display: flex; align-items: center; justify-content: center; cursor: default; transition: transform .12s, filter .12s; position: relative; }
.ta-cal-cell:hover { transform: scale(1.25); filter: brightness(1.3); z-index: 2; }
.ta-cal-cell span { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.7); }

/* ── PRIORITIES ──────────────────────────────────────── */
.ta-prios { display: flex; flex-direction: column; gap: 10px; }
.ta-prio { display: flex; align-items: center; gap: 8px; }
.ta-prio-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ta-prio-name { font-size: 12px; color: var(--text-muted, rgba(242,234,216,.5)); width: 55px; flex-shrink: 0; }
.ta-prio-track { flex: 1; height: 6px; background: rgba(255,255,255,.04); border-radius: 3px; overflow: hidden; }
.ta-prio-fill { height: 100%; border-radius: 3px; transition: width .8s cubic-bezier(.34,1.56,.64,1); }
.ta-prio-pct { font-size: 11px; font-weight: 700; color: var(--text-muted, rgba(242,234,216,.4)); width: 30px; text-align: right; }

/* ── PROJECTS ────────────────────────────────────────── */
.ta-projs { display: flex; flex-direction: column; gap: 6px; }
.ta-proj { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.015); transition: background .15s; animation: taFade .3s ease-out both; }
.ta-proj:hover { background: rgba(255,255,255,.04); }
.ta-proj-icon { width: 32px; height: 32px; border-radius: 8px; background: radial-gradient(circle, color-mix(in srgb, var(--c) 18%, transparent), color-mix(in srgb, var(--c) 5%, transparent)); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.ta-proj-info { flex: 1; min-width: 0; }
.ta-proj-name { font-size: 12.5px; font-weight: 600; color: var(--text, #f2ead8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.ta-proj-bar { height: 4px; background: rgba(255,255,255,.04); border-radius: 2px; overflow: hidden; }
.ta-proj-fill { height: 100%; border-radius: 2px; transition: width .8s cubic-bezier(.34,1.56,.64,1); }
.ta-proj-count { font-size: 14px; font-weight: 800; flex-shrink: 0; }

/* ── RECENT WINS ─────────────────────────────────────── */
.ta-wins { display: flex; flex-direction: column; gap: 2px; }
.ta-win { display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px; border-radius: 8px; transition: background .15s; animation: taFade .3s ease-out both; }
.ta-win:hover { background: rgba(255,255,255,.025); }
.ta-win-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.ta-win-body { min-width: 0; flex: 1; }
.ta-win-title { font-size: 13px; font-weight: 600; color: var(--text, #f2ead8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-win-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-muted, rgba(242,234,216,.35)); margin-top: 2px; }
.ta-win-time { opacity: .6; }

/* ═══════════════════════════════════════════════════════
   GALAXY VIEW
   ═══════════════════════════════════════════════════════ */
.tg-space { position: relative; width: 100%; height: 500px; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse at center, rgba(15,10,25,1) 0%, rgba(5,3,12,1) 100%); border: 1px solid rgba(255,255,255,.04); }
.tg-nebula { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,.15), transparent 70%); top: 20%; left: 15%; filter: blur(40px); animation: tgNebulaDrift 20s ease-in-out infinite alternate; pointer-events: none; }
.tg-nebula-2 { background: radial-gradient(circle, rgba(59,130,246,.1), transparent 70%); top: 50%; left: 60%; animation-delay: -10s; animation-duration: 25s; }
@keyframes tgNebulaDrift { from { transform: translate(0,0) scale(1); } to { transform: translate(30px, -20px) scale(1.15); } }

.tg-star { position: absolute; border-radius: 50%; animation: tgTwinkle 3s ease-in-out infinite alternate; pointer-events: none; }
@keyframes tgTwinkle { 0% { opacity: .2; transform: scale(.8); } 100% { opacity: 1; transform: scale(1.2); } }

.tg-sun { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; }
.tg-sun-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(245,158,11,.3), transparent 70%); animation: tgPulse 3s ease-in-out infinite; pointer-events: none; }
@keyframes tgPulse { 0%,100% { transform: translate(-50%,-50%) scale(.9); opacity: .5; } 50% { transform: translate(-50%,-50%) scale(1.3); opacity: 1; } }
.tg-sun-core { width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fbbf24, #f59e0b, #d97706); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 40px rgba(245,158,11,.4), 0 0 80px rgba(245,158,11,.15); position: relative; z-index: 1; }
.tg-sun-num { font-size: 22px; font-weight: 900; color: #1a0800; line-height: 1; }
.tg-sun-label { font-size: 8px; font-weight: 700; color: rgba(26,8,0,.6); text-transform: uppercase; letter-spacing: 1px; }

.tg-planet { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 2; animation: tgPlanetIn .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes tgPlanetIn { from { opacity: 0; transform: translate(-50%,-50%) scale(.3); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.tg-orbit { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: var(--orbit-r); height: var(--orbit-r); border-radius: 50%; border: 1px dashed; opacity: .3; pointer-events: none; }
.tg-planet-body { border-radius: 50%; background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--pc) 40%, white), var(--pc), color-mix(in srgb, var(--pc) 60%, black)); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px color-mix(in srgb, var(--pc) 30%, transparent), inset 0 -4px 8px rgba(0,0,0,.3); cursor: default; transition: transform .2s, box-shadow .2s; }
.tg-planet-body:hover { transform: scale(1.12); box-shadow: 0 8px 30px color-mix(in srgb, var(--pc) 45%, transparent); }
.tg-planet-icon { font-size: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.tg-planet-label { text-align: center; pointer-events: none; }
.tg-planet-name { display: block; font-size: 10px; font-weight: 600; color: rgba(255,255,255,.65); white-space: nowrap; }
.tg-planet-num { display: block; font-size: 9px; color: rgba(255,255,255,.35); }

.tg-footer { display: flex; justify-content: center; gap: 20px; padding: 8px 0; }
.tg-footer span { font-size: 11px; color: var(--text-muted, rgba(242,234,216,.25)); }

/* ═══════════════════════════════════════════════════════
   TIMELINE VIEW
   ═══════════════════════════════════════════════════════ */
.ta-tl-wrap { position: relative; padding-left: 20px; }
.ta-tl-spine { position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, rgba(245,158,11,.3), rgba(245,158,11,.05)); border-radius: 1px; }
.ta-tl-group { margin-bottom: 24px; animation: taFade .4s ease-out both; }
.ta-tl-month { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; position: relative; }
.ta-tl-dot { position: absolute; left: -17px; width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,.4); }
.ta-tl-month-name { font-size: 14px; font-weight: 700; color: var(--text, #f2ead8); text-transform: capitalize; }
.ta-tl-month-badge { background: rgba(245,158,11,.12); color: #f59e0b; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.ta-tl-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0 6px 4px; animation: taFade .3s ease-out both; }
.ta-tl-line { width: 3px; min-height: 100%; border-radius: 2px; flex-shrink: 0; margin-top: 4px; }
.ta-tl-content { min-width: 0; }
.ta-tl-title { font-size: 13px; font-weight: 600; color: var(--text, #f2ead8); }
.ta-tl-meta { display: flex; gap: 10px; font-size: 11px; color: var(--text-muted, rgba(242,234,216,.3)); margin-top: 2px; }

/* ===== css/visual-fixes.css?v=2603061900 ===== */
/* ===== VISUAL FIXES v1.0 — 2026-03-06 ===== */

/* ── 1. Z-INDEX NORMALIZATION ──────────────────────────────────────
   Unified z-index scale:
   10     = dropdowns, tooltips
   100    = sticky headers
   1000   = modals
   9000   = notification overlay
   9001   = notification panel
   9500   = toast messages
   10000  = XP popups (non-blocking, pointer-events:none)
   10001  = Level-up overlay (blocking, temporary)
   ────────────────────────────────────────────────────────────────── */

#xp-popup-container {
    z-index: 10000 !important;
}

#levelup-overlay {
    z-index: 10001 !important;
}

.notif-premium-overlay {
    z-index: 9000 !important;
}

.notif-premium-panel {
    z-index: 9001 !important;
}

.notif-overlay {
    z-index: 9000 !important;
}

.notif-panel {
    z-index: 9001 !important;
}

.gcrm-toast {
    z-index: 9500 !important;
}

/* ── 2. REMOVE BROAD will-change / GPU PROMOTION ──────────────────
   [class*=btn] etc. promotes 30+ elements to GPU layers needlessly.
   We remove it and only promote elements that actually animate.
   ────────────────────────────────────────────────────────────────── */

[class*=btn],
[class*=button],
[class*=tooltip],
[class*=dropdown],
[class*=menu] {
    will-change: auto !important;
    transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
}

/* Re-apply only to elements that actually need GPU promotion */
.modal-overlay,
.notif-premium-panel,
.notif-panel,
.sidebar {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ── 3. NOTIFICATION PANEL — Visual polish ─────────────────────── */

/* Fix: panel background should use theme surface, not hardcoded gradient */
.notif-premium-panel {
    background: var(--surface, #111827) !important;
}

/* Fix: header gradient should work with any theme accent */
.notif-premium-header {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent, #3b82f6) 8%, transparent) 0%,
        transparent 100%) !important;
}

/* Fix: "Tout lu" button should be clearly visible */
.notif-premium-btn-secondary,
.notif-premium-markall-header,
#notif-mark-all-read,
#notif-mark-all-read-header {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--text-muted, rgba(255,255,255,0.6)) !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.notif-premium-btn-secondary:hover,
.notif-premium-markall-header:hover,
#notif-mark-all-read:hover,
#notif-mark-all-read-header:hover {
    background: var(--accent, #3b82f6) !important;
    color: #fff !important;
    border-color: var(--accent, #3b82f6) !important;
}

/* Fix: unread dot should be visible */
.notif-premium-item.unread {
    border-left: 3px solid var(--accent, #3b82f6) !important;
}

.notif-premium-item.unread::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -1px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #3b82f6);
}

/* Fix: notification items should be clearly clickable */
.notif-premium-item {
    position: relative;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin-bottom: 4px !important;
}

.notif-premium-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

.notif-premium-item:active {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Fix: notification item title should be readable */
.notif-premium-item-title {
    color: var(--text, #e2e8f0) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Fix: notification item message (body) */
.notif-premium-item-message {
    color: var(--text-muted, rgba(255,255,255,0.5)) !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Fix: time display */
.notif-premium-item-time {
    color: var(--text-muted, rgba(255,255,255,0.35)) !important;
    font-size: 0.7rem !important;
}

/* Fix: quick action buttons should look actionable */
.notif-premium-item .notif-action-btn[data-notif-action] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-muted, rgba(255,255,255,0.6)) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 0.72rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.notif-premium-item .notif-action-btn[data-notif-action]:hover {
    background: var(--accent, #3b82f6) !important;
    color: #fff !important;
    border-color: var(--accent, #3b82f6) !important;
}

/* Fix: snooze button */
.notif-snooze-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted, rgba(255,255,255,0.4)) !important;
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
    font-size: 0.85rem !important;
}

.notif-snooze-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text, #e2e8f0) !important;
}

/* Fix: snooze dropdown positioning and style */
.notif-snooze-dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 10 !important;
    background: var(--surface, #1e1e2a) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 6px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    min-width: 180px !important;
}

.notif-snooze-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 8px 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    color: var(--text, #e2e8f0) !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.notif-snooze-option:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Fix: tabs should be clearly distinguishable */
.notif-premium-tab {
    color: var(--text-muted, rgba(255,255,255,0.45)) !important;
    transition: all 0.2s ease !important;
}

.notif-premium-tab:hover {
    color: var(--text, #e2e8f0) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.notif-premium-tab.active {
    color: var(--accent, #3b82f6) !important;
    background: color-mix(in srgb, var(--accent, #3b82f6) 12%, transparent) !important;
}

/* Fix: tab badge should have proper fallback */
.notif-premium-tab-badge {
    background: color-mix(in srgb, var(--accent, #3b82f6) 25%, transparent) !important;
    color: var(--accent, #3b82f6) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    min-width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    text-align: center !important;
    border-radius: 8px !important;
    padding: 0 4px !important;
}

/* Fix: empty state should be centered and themed */
.notif-premium-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 60px 40px !important;
    text-align: center !important;
    color: var(--text-muted, rgba(255,255,255,0.4)) !important;
}

.notif-premium-empty h3 {
    color: var(--text, #e2e8f0) !important;
    font-size: 1rem !important;
    margin: 16px 0 8px !important;
}

.notif-premium-empty p {
    color: var(--text-muted, rgba(255,255,255,0.45)) !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
}

/* ── 4. SIDEBAR NOTIFICATION BELL — ensure visible ─────────────── */

.sidebar-notif-bell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: background 0.15s ease !important;
}

.sidebar-notif-bell:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.sidebar-notif-bell svg {
    width: 16px !important;
    height: 16px !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

.sidebar-notif-badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 8px !important;
    background: var(--accent, #e11d48) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    text-align: center !important;
    pointer-events: none !important;
    z-index: 2 !important;
    border: 2px solid var(--surface, #0f172a) !important;
}

.sidebar-notif-badge.hidden,
.sidebar-notif-badge:empty {
    display: none !important;
}

/* ── 5. MOBILE QUICKBAR — z-index fix ──────────────────────────── */

.vision-mobile-quickbar {
    z-index: 1000 !important;
}

/* ── 6. SMART GROUP — visual fixes ─────────────────────────────── */

.notif-smart-group {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
}

.notif-group-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    background: rgba(255, 255, 255, 0.02) !important;
    transition: background 0.15s ease !important;
}

.notif-group-header:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.notif-group-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.notif-group-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.notif-group-badge {
    min-width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    text-align: center !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--accent, #3b82f6) 20%, transparent) !important;
    color: var(--accent, #3b82f6) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 0 5px !important;
}

.notif-group-header-label {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--text, #e2e8f0) !important;
}

.notif-group-header-time {
    font-size: 0.7rem !important;
    color: var(--text-muted, rgba(255,255,255,0.35)) !important;
}

.notif-group-chevron {
    color: var(--text-muted, rgba(255,255,255,0.3)) !important;
    font-size: 1.1rem !important;
    transition: transform 0.2s ease !important;
}

.notif-group-header[aria-expanded="true"] .notif-group-chevron {
    transform: rotate(90deg) !important;
}

.notif-group-body {
    display: none;
    padding: 4px 8px 8px;
}

.notif-group-body.expanded {
    display: block;
}

.notif-group-mark-read {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-muted, rgba(255,255,255,0.5)) !important;
    font-size: 0.7rem !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}

.notif-group-mark-read:hover {
    background: var(--accent, #3b82f6) !important;
    color: #fff !important;
    border-color: var(--accent, #3b82f6) !important;
}

/* ── 7. SNOOZED BADGE ──────────────────────────────────────────── */

.notif-snoozed-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    background: rgba(251, 191, 36, 0.12) !important;
    color: #fbbf24 !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
}

/* ── 8. HEADER BADGE — notification count in navbar ────────────── */

.notif-badge-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.notif-badge-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    transition: background 0.15s ease !important;
}

.notif-badge-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.notif-badge-count {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 8px !important;
    background: var(--accent, #e11d48) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    text-align: center !important;
    pointer-events: none !important;
    border: 2px solid var(--surface, #0f172a) !important;
}

.notif-badge-count.hidden {
    display: none !important;
}

/* ── 9. CSS VARIABLE FALLBACKS for key elements ────────────────── */

.notif-premium-title h2 {
    color: var(--text-primary, var(--text, #e2e8f0)) !important;
}

.notif-premium-subtitle {
    color: var(--text-muted, rgba(255,255,255,0.45)) !important;
}

/* ── 10. NOTIFICATION REMOVING ANIMATION ───────────────────────── */

.notif-premium-item.removing {
    opacity: 0 !important;
    transform: translateX(50px) !important;
    transition: all 0.3s ease !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* ── 11. LOGIN PARTICLES — pause when tab hidden ───────────────── */

.perf-hidden .auth-particles span {
    animation-play-state: paused !important;
}

/* ── 12. GAMES ACHIEVEMENT POPUP — don't overlap maha-orb ──────── */

.games-achievement-popup {
    bottom: 180px !important;
}

/* =============================================
   13. SIDEBAR COLLAPSED — layout fixes (Mar 2026)
   ============================================= */

/* Fix: sidebar items — override premium-spacing padding in collapsed state */
.sidebar.collapsed .sidebar-item,
#app-sidebar.collapsed .sidebar-item,
body.sidebar-collapsed .sidebar .sidebar-item {
    padding: 0 !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 1px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}

/* Fix: sidebar container — fixed width, no overflow cropping */
body.sidebar-collapsed .sidebar,
body.sidebar-collapsed #app-sidebar,
body.logged-in.sidebar-collapsed aside#app-sidebar.sidebar,
#app-sidebar.sidebar.collapsed {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
}

/* Fix: sidebar-nav centered column in collapsed */
.sidebar.collapsed .sidebar-nav,
#app-sidebar.collapsed .sidebar-nav {
    align-items: center !important;
    padding: 6px 0 !important;
}

/* Fix: main-content width — not cropped when sidebar collapsed */
body.sidebar-collapsed .main-content,
body.logged-in.sidebar-collapsed .main-content {
    margin-left: 64px !important;
    width: calc(100% - 64px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Fix: main-content when sidebar open */
body.logged-in:not(.sidebar-collapsed) .main-content {
    margin-left: 260px !important;
    width: calc(100% - 260px) !important;
}

/* Mobile: no sidebar margin */
@media (max-width: 768px) {
    body.logged-in .main-content,
    body.logged-in.sidebar-collapsed .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* 14. SIDEBAR COLLAPSED — hide crown/header (Mar 2026) */
.sidebar.collapsed .sidebar-header,
#app-sidebar.collapsed .sidebar-header,
body.sidebar-collapsed .sidebar .sidebar-header {
    display: none !important;
}

/* 15. WELLNESS CARDS — ensure visibility (Mar 2026) */
.wellness-card {
    opacity: 1 !important;
    transform: none !important;
}

/* 16. DONE COLUMN HEADER — dropdown below title (Mar 2026) */
/* Done column header: layout controlled by inline styles in index.html */

/* ===== css/campaigns.css?v=202603071000 ===== */
/* =============================================
   CAMPAIGNS MODULE - Premium CSS
   Email Campaigns with Divine Light Effects
   ============================================= */

:root {
    --camp-gold: #d4a574;
    --camp-gold-light: #e8c9a8;
    --camp-gold-glow: rgba(212, 165, 116, 0.4);
    --camp-cosmic: #7c9fff;
    --camp-cosmic-glow: rgba(124, 159, 255, 0.3);
    --camp-glass: rgba(255, 255, 255, 0.03);
    --camp-glass-border: rgba(255, 255, 255, 0.08);
    --camp-success: #4ade80;
    --camp-warning: #fbbf24;
    --camp-danger: #f87171;
    --camp-divine-glow: 0 0 60px rgba(212, 165, 116, 0.15),
                        0 0 100px rgba(124, 159, 255, 0.1);
}

/* ==================== MAIN CONTAINER ==================== */

#view-campaigns {
    display: none !important;
    height: 100vh;
    min-height: 100vh;
    width: auto;
    max-width: none !important;
    padding: 0 !important;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    /* margin-left is set by sidebar CSS rules */
    background: linear-gradient(135deg,
        rgba(15, 15, 25, 0.98) 0%,
        rgba(20, 20, 35, 0.95) 50%,
        rgba(15, 15, 30, 0.98) 100%);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

#view-campaigns.active {
    display: flex !important;
    flex-direction: column;
}

/* Divine light background effect */
#view-campaigns::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(212, 165, 116, 0.03) 60deg,
        transparent 120deg,
        rgba(124, 159, 255, 0.03) 180deg,
        transparent 240deg,
        rgba(212, 165, 116, 0.02) 300deg,
        transparent 360deg
    );
    animation: campaignDivineRotate 60s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes campaignDivineRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==================== HEADER ==================== */

.campaigns-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background: var(--camp-glass);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--camp-glass-border);
    position: relative;
    z-index: 10;
}

.campaigns-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.campaigns-header-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.2) 0%, rgba(124, 159, 255, 0.15) 100%);
    border-radius: 12px;
    color: var(--camp-gold);
    box-shadow: 0 0 20px rgba(212, 165, 116, 0.15);
}

.campaigns-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--camp-gold) 0%, var(--camp-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1.2;
}

.campaigns-subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 2px 0 0 0;
}

@keyframes campaignPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ==================== TABS ==================== */

.campaigns-tabs {
    display: flex;
    gap: 4px;
    padding: 16px 32px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--camp-glass-border);
    position: relative;
    z-index: 10;
}

.campaigns-tab {
    padding: 12px 24px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.campaigns-tab:hover {
    background: var(--camp-glass);
    color: rgba(255, 255, 255, 0.9);
}

.campaigns-tab.active {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.15) 0%, rgba(124, 159, 255, 0.1) 100%);
    border-color: var(--camp-gold);
    color: var(--camp-gold);
    box-shadow: 0 0 20px rgba(212, 165, 116, 0.2);
}

.campaigns-tab .tab-count {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
}

.campaigns-tab.active .tab-count {
    background: rgba(212, 165, 116, 0.3);
}

.campaigns-tab svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.campaigns-tab.active svg {
    opacity: 1;
    color: var(--camp-gold);
}

/* ==================== CONTENT AREA ==================== */

.campaigns-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    z-index: 5;
    min-height: 0; /* Important for flex children to shrink properly */
}

.campaigns-panel {
    display: none !important;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.campaigns-panel.active {
    display: flex !important;
}

/* ==================== CONTACTS PANEL ==================== */

.contacts-panel.active {
    flex-direction: row;
    gap: 0;
}

.contacts-sidebar {
    width: 320px;
    background: var(--camp-glass);
    border-right: 1px solid var(--camp-glass-border);
    display: flex;
    flex-direction: column;
}

.contacts-search {
    padding: 16px;
    border-bottom: 1px solid var(--camp-glass-border);
}

.contacts-search input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--camp-glass-border);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.contacts-search input:focus {
    outline: none;
    border-color: var(--camp-gold);
    box-shadow: 0 0 20px rgba(212, 165, 116, 0.15);
}

.contacts-search input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.contacts-actions {
    padding: 12px 16px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--camp-glass-border);
}

.contacts-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 4px;
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.contact-item.selected {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.1) 0%, rgba(124, 159, 255, 0.05) 100%);
    border: 1px solid rgba(212, 165, 116, 0.3);
}

.contact-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--camp-gold) 0%, var(--camp-cosmic) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
}

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

.contact-name {
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-email {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.contact-tag {
    padding: 2px 8px;
    background: rgba(124, 159, 255, 0.2);
    border-radius: 10px;
    font-size: 0.7rem;
    color: var(--camp-cosmic);
}

/* Contacts Detail Panel */
.contacts-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
}

.contact-detail-header {
    padding: 24px 32px;
    border-bottom: 1px solid var(--camp-glass-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.contact-detail-info {
    display: flex;
    gap: 20px;
    align-items: center;
}

.contact-detail-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--camp-gold) 0%, var(--camp-cosmic) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    box-shadow: var(--camp-divine-glow);
}

.contact-detail-text h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}

.contact-detail-text p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.contact-detail-body {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
}

.contact-field {
    margin-bottom: 20px;
}

.contact-field label {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-field-value {
    font-size: 1rem;
    color: #fff;
}

/* ==================== TEMPLATES PANEL ==================== */

.templates-panel.active {
    flex-direction: column;
    padding: 24px 32px;
    gap: 24px;
    overflow-y: auto;
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.template-card {
    background: var(--camp-glass);
    border: 1px solid var(--camp-glass-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.template-card:hover {
    border-color: var(--camp-gold);
    transform: translateY(-4px);
    box-shadow: var(--camp-divine-glow);
}

.template-preview {
    height: 160px;
    background: linear-gradient(135deg, rgba(30, 30, 50, 1) 0%, rgba(40, 40, 60, 1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.template-preview iframe {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: top left;
    pointer-events: none;
    border: none;
}

.template-info {
    padding: 16px;
}

.template-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.template-subject {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-card-new {
    border: 2px dashed var(--camp-glass-border);
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

.template-card-new:hover {
    border-color: var(--camp-gold);
    background: rgba(212, 165, 116, 0.05);
}

.template-card-new span {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 12px;
}

.template-card-new p {
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* ==================== CAMPAIGNS LIST PANEL ==================== */

.campaigns-list-panel.active {
    flex-direction: column;
    padding: 24px 32px;
    gap: 24px;
    overflow-y: auto;
}

.campaign-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.campaign-stat-card {
    background: var(--camp-glass);
    border: 1px solid var(--camp-glass-border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.campaign-stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--camp-gold) 0%, var(--camp-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.campaign-stat-card .stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

.campaigns-table-container {
    background: var(--camp-glass);
    border: 1px solid var(--camp-glass-border);
    border-radius: 12px;
    overflow: hidden;
}

.campaigns-table {
    width: 100%;
    border-collapse: collapse;
}

.campaigns-table th,
.campaigns-table td {
    padding: 16px 20px;
    text-align: left;
}

.campaigns-table th {
    background: rgba(0, 0, 0, 0.3);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.campaigns-table td {
    border-top: 1px solid var(--camp-glass-border);
    color: #fff;
}

.campaigns-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.campaign-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.campaign-status.draft {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.campaign-status.sending {
    background: rgba(251, 191, 36, 0.2);
    color: var(--camp-warning);
}

.campaign-status.sent {
    background: rgba(74, 222, 128, 0.2);
    color: var(--camp-success);
}

.campaign-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.campaign-metrics {
    display: flex;
    gap: 16px;
}

.campaign-metric {
    text-align: center;
}

.campaign-metric-value {
    font-weight: 600;
    color: var(--camp-gold);
}

.campaign-metric-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

/* ==================== COMPOSER PANEL ==================== */

.composer-panel.active {
    flex-direction: row;
}

.composer-sidebar {
    width: 300px;
    background: var(--camp-glass);
    border-right: 1px solid var(--camp-glass-border);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

.composer-section h3 {
    font-size: 0.9rem;
    color: var(--camp-gold);
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.composer-recipients {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recipient-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--camp-glass-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.recipient-option:hover {
    border-color: var(--camp-gold);
}

.recipient-option.selected {
    background: rgba(212, 165, 116, 0.1);
    border-color: var(--camp-gold);
}

.recipient-option input[type="radio"],
.recipient-option input[type="checkbox"] {
    accent-color: var(--camp-gold);
}

.recipient-option label {
    flex: 1;
    cursor: pointer;
    color: #fff;
    font-size: 0.9rem;
}

.recipient-count {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.composer-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
}

.composer-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--camp-glass-border);
}

.composer-field {
    margin-bottom: 16px;
}

.composer-field:last-child {
    margin-bottom: 0;
}

.composer-field label {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.composer-field input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--camp-glass-border);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.composer-field input:focus {
    outline: none;
    border-color: var(--camp-gold);
    box-shadow: 0 0 20px rgba(212, 165, 116, 0.15);
}

.composer-editor {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
}

.composer-editor textarea,
.composer-editor .editor-content {
    flex: 1;
    width: 100%;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--camp-glass-border);
    border-radius: 8px;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: none;
    font-family: inherit;
}

.composer-editor textarea:focus {
    outline: none;
    border-color: var(--camp-gold);
}

.composer-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--camp-glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.composer-preview {
    width: 400px;
    background: #fff;
    border-left: 1px solid var(--camp-glass-border);
    display: flex;
    flex-direction: column;
}

.preview-header {
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.8);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preview-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    color: #333;
}

/* ==================== BUTTONS ==================== */

.btn-campaign {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-campaign-primary {
    background: linear-gradient(135deg, var(--camp-gold) 0%, #c49660 100%);
    color: #000;
}

.btn-campaign-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(212, 165, 116, 0.4);
}

.btn-campaign-secondary {
    background: var(--camp-glass);
    border: 1px solid var(--camp-glass-border);
    color: #fff;
}

.btn-campaign-secondary:hover {
    border-color: var(--camp-gold);
    color: var(--camp-gold);
}

.btn-campaign-danger {
    background: rgba(248, 113, 113, 0.2);
    color: var(--camp-danger);
}

.btn-campaign-danger:hover {
    background: rgba(248, 113, 113, 0.3);
}

.btn-campaign-icon {
    padding: 10px;
    border-radius: 8px;
}

.btn-campaign-small {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* ==================== MODALS ==================== */

.campaigns-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.campaigns-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.campaigns-modal {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.98) 0%, rgba(20, 20, 40, 0.98) 100%);
    border: 1px solid var(--camp-glass-border);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-shadow: var(--camp-divine-glow);
}

.campaigns-modal-overlay.active .campaigns-modal {
    transform: scale(1);
}

.campaigns-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--camp-glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.campaigns-modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--camp-gold);
}

.campaigns-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.campaigns-modal-close:hover {
    color: #fff;
}

.campaigns-modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: 60vh;
}

.campaigns-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--camp-glass-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Form in modals */
.campaigns-form-group {
    margin-bottom: 20px;
}

.campaigns-form-group label {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.campaigns-form-group input,
.campaigns-form-group textarea,
.campaigns-form-group select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--camp-glass-border);
    border-radius: 8px;
    color: #fff;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.campaigns-form-group input:focus,
.campaigns-form-group textarea:focus,
.campaigns-form-group select:focus {
    outline: none;
    border-color: var(--camp-gold);
    box-shadow: 0 0 20px rgba(212, 165, 116, 0.15);
}

.campaigns-form-group textarea {
    min-height: 120px;
    resize: vertical;
}

/* Tags input */
.tags-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--camp-glass-border);
    border-radius: 8px;
    min-height: 48px;
}

.tags-input-container:focus-within {
    border-color: var(--camp-gold);
}

.tags-input-container .tag {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(124, 159, 255, 0.2);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--camp-cosmic);
}

.tags-input-container .tag button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.6;
}

.tags-input-container .tag button:hover {
    opacity: 1;
}

.tags-input-container input {
    flex: 1;
    min-width: 100px;
    background: none;
    border: none;
    color: #fff;
    padding: 4px;
}

.tags-input-container input:focus {
    outline: none;
}

/* ==================== EMPTY STATES ==================== */

.campaigns-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
}

.campaigns-empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.3;
    color: var(--camp-gold);
}

.campaigns-empty-icon svg {
    opacity: 0.6;
}

.campaigns-empty h3 {
    font-size: 1.3rem;
    color: #fff;
    margin: 0 0 8px 0;
}

.campaigns-empty p {
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 24px 0;
}

/* ==================== LOADING ==================== */

.campaigns-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.campaigns-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--camp-glass-border);
    border-top-color: var(--camp-gold);
    border-radius: 50%;
    animation: campaignsSpin 1s linear infinite;
}

@keyframes campaignsSpin {
    to { transform: rotate(360deg); }
}

/* ==================== IMPORT CSV SPECIFIC ==================== */

.csv-import-zone {
    border: 2px dashed var(--camp-glass-border);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.csv-import-zone:hover,
.csv-import-zone.dragover {
    border-color: var(--camp-gold);
    background: rgba(212, 165, 116, 0.05);
}

.csv-import-zone input[type="file"] {
    display: none;
}

.csv-import-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.csv-import-text {
    color: rgba(255, 255, 255, 0.7);
}

.csv-import-text strong {
    color: var(--camp-gold);
}

.csv-preview-table {
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.csv-preview-table th,
.csv-preview-table td {
    padding: 8px 12px;
    border: 1px solid var(--camp-glass-border);
    text-align: left;
}

.csv-preview-table th {
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.6);
}

.csv-preview-table td {
    color: #fff;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1200px) {
    .composer-preview {
        display: none;
    }
}

@media (max-width: 900px) {
    .contacts-sidebar {
        width: 280px;
    }

    .composer-sidebar {
        width: 250px;
    }

    .campaign-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .campaigns-header {
        padding: 16px 20px;
    }

    .campaigns-tabs {
        padding: 12px 20px;
        overflow-x: auto;
    }

    .campaigns-tab {
        padding: 10px 16px;
        white-space: nowrap;
    }

    .contacts-panel {
        flex-direction: column;
    }

    .contacts-sidebar {
        width: 100%;
        max-height: 50%;
    }

    .composer-panel {
        flex-direction: column;
    }

    .composer-sidebar {
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
    }
}

/* ===== css/focus-mode.css?v=202603071000 ===== */
/* ═══════════════════════════════════════════════════════
   FOCUS MODE v3.0 — 2026-03-01
   + Sélection tâche · Musique · Confirmation sortie
   ═══════════════════════════════════════════════════════ */

/* ── Écran de sélection ──────────────────────────────── */
.focus-select-overlay {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(6,6,14,.85);
    backdrop-filter: blur(18px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .22s ease;
}
.focus-select-overlay.focus-select-visible { opacity: 1; }

.focus-select-card {
    background: linear-gradient(160deg, #0f0f1e, #0a0a18);
    border: 1px solid rgba(139,92,246,.2);
    border-radius: 24px; padding: 36px 32px;
    width: 100%; max-width: 540px; max-height: 88vh;
    overflow-y: auto; box-sizing: border-box;
    box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(139,92,246,.08);
    animation: focusCardIn .3s cubic-bezier(.25,.8,.25,1) both;
}

.focus-select-header { text-align: center; margin-bottom: 24px; }
.focus-select-icon { font-size: 48px; margin-bottom: 10px; display: block; }
.focus-select-title {
    color: #f4f4f5; font-size: 22px; font-weight: 700;
    margin: 0 0 6px;
}
.focus-select-sub { color: #71717a; font-size: 14px; margin: 0; }

/* Sélecteur musique */
.focus-select-music {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px; padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px;
}
.focus-select-music-label { color: #71717a; font-size: 13px; }
.focus-music-picker {
    display: flex; align-items: center; gap: 10px;
    color: #a78bfa; font-size: 14px; font-weight: 500;
}
.fmp-btn {
    background: rgba(139,92,246,.15); border: 1px solid rgba(139,92,246,.2);
    color: #a78bfa; width: 28px; height: 28px; border-radius: 8px;
    font-size: 16px; cursor: pointer; display: grid; place-items: center;
    transition: background .15s;
}
.fmp-btn:hover { background: rgba(139,92,246,.3); }

/* Row layout (music + timer side by side) */
.focus-select-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 14px;
}
@media (max-width: 600px) { .focus-select-row { grid-template-columns: 1fr; } }

/* Timer presets */
.focus-select-timer-presets {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px; padding: 12px 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.focus-timer-presets {
    display: flex; gap: 6px;
}
.ftp-btn {
    flex: 1; padding: 6px 4px; border-radius: 8px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    color: #a1a1aa; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: all .15s; text-align: center;
}
.ftp-btn:hover { background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.2); color: #a78bfa; }
.ftp-btn.selected {
    background: rgba(139,92,246,.2); border-color: rgba(139,92,246,.4);
    color: #c4b5fd; box-shadow: 0 0 8px rgba(139,92,246,.15);
}

/* DND badge */
.focus-select-dnd {
    text-align: center; margin-bottom: 16px;
}
.focus-dnd-badge {
    display: inline-block; padding: 6px 16px; border-radius: 20px;
    background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.15);
    color: rgba(167,139,250,.7); font-size: 12px; font-weight: 500;
}

/* Liste tâches sélectionnables */
.focus-select-tasks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.focus-select-task {
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px; padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; text-align: left;
    transition: background .15s, border-color .15s;
}
.focus-select-task:hover { background: rgba(139,92,246,.08); border-color: rgba(139,92,246,.2); }
.focus-select-task.selected {
    background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.4);
    box-shadow: 0 0 0 1px rgba(139,92,246,.2);
}
.fst-priority {
    font-size: 10px; font-weight: 700; letter-spacing: .8px;
    padding: 3px 8px; border-radius: 4px; white-space: nowrap; flex-shrink: 0;
}
.fst-p-urgent, .fst-p-critical { background: rgba(239,68,68,.2); color: #ef4444; }
.fst-p-high { background: rgba(249,115,22,.2); color: #f97316; }
.fst-p-medium { background: rgba(234,179,8,.2); color: #eab308; }
.fst-p-low, .fst-p-normal { background: rgba(139,92,246,.2); color: #a78bfa; }
.fst-title { color: #e4e4e7; font-size: 14px; font-weight: 500; flex: 1; }
.fst-due { color: #52525b; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.focus-select-empty { color: #52525b; text-align: center; font-size: 14px; padding: 20px 0; }

/* Boutons d'action */
.focus-select-actions { display: flex; flex-direction: column; gap: 10px; }
.focus-select-start {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff; border: none; padding: 15px; border-radius: 14px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: transform .15s, box-shadow .2s; letter-spacing: .3px;
}
.focus-select-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(139,92,246,.4);
}
.focus-select-cancel {
    background: transparent; border: 1px solid rgba(255,255,255,.08);
    color: #52525b; padding: 12px; border-radius: 12px;
    font-size: 14px; cursor: pointer; transition: color .15s;
}
.focus-select-cancel:hover { color: #a1a1aa; }

/* ── Contrôle musique dans l'overlay actif ───────────── */
.focus-header-right { display: flex; align-items: center; gap: 12px; }
.focus-music-ctrl {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px; padding: 5px 10px;
    color: #a78bfa; font-size: 13px;
}
.focus-music-btn {
    background: none; border: none; color: #71717a;
    font-size: 16px; cursor: pointer; padding: 0 3px;
    transition: color .15s;
}
.focus-music-btn:hover { color: #a78bfa; }

/* ── Confirmation de sortie ──────────────────────────── */
.focus-exit-confirm {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(6,6,14,.8); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s ease;
}
.focus-exit-confirm.fec-visible { opacity: 1; }

.fec-card {
    background: #0f0f1e; border: 1px solid rgba(239,68,68,.2);
    border-radius: 20px; padding: 36px 32px; text-align: center;
    max-width: 380px; width: 90%;
    box-shadow: 0 0 60px rgba(239,68,68,.1);
    animation: focusCardIn .22s cubic-bezier(.25,.8,.25,1) both;
}
.fec-icon { font-size: 40px; margin-bottom: 12px; display: block; }
.fec-msg { color: #f4f4f5; font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.fec-sub { color: #71717a; font-size: 13px; margin: 0 0 24px; }
.fec-actions { display: flex; flex-direction: column; gap: 10px; }
.fec-btn-stay {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff; border: none; padding: 14px; border-radius: 12px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: transform .15s;
}
.fec-btn-stay:hover { transform: translateY(-1px); }
.fec-btn-quit {
    background: transparent; border: 1px solid rgba(239,68,68,.25);
    color: #ef4444; padding: 12px; border-radius: 12px;
    font-size: 14px; cursor: pointer; transition: background .15s;
}
.fec-btn-quit:hover { background: rgba(239,68,68,.1); }

/* --- Background Canvas (particles) --- */
.focus-bg-canvas {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
}

/* --- Overlay --- */
.focus-overlay {
    position: fixed; inset: 0; z-index: 999998;
    background: radial-gradient(ellipse at 50% 30%, #0e0e1a 0%, #06060e 70%);
    display: flex; flex-direction: column; align-items: center;
    opacity: 0; transform: scale(1.02);
    transition: opacity .35s ease, transform .35s ease;
    overflow-y: auto;
}
.focus-overlay > *:not(.focus-bg-canvas) { position: relative; z-index: 1; }
.focus-overlay.focus-visible { opacity: 1; transform: scale(1); }
.focus-overlay.focus-closing { opacity: 0; transform: scale(.97); transition-duration: .3s; }
body.focus-mode-active { overflow: hidden; }

/* --- Header --- */
.focus-header {
    width: 100%; max-width: 720px; padding: 20px 24px 0;
    display: flex; justify-content: space-between; align-items: center;
    box-sizing: border-box;
}
.focus-header-left { display: flex; align-items: center; gap: 14px; }
.focus-badge {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
    padding: 5px 12px; border-radius: 6px; text-transform: uppercase;
    animation: focusBadgePulse 3s ease-in-out infinite;
}
@keyframes focusBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,.3); }
    50% { box-shadow: 0 0 12px 4px rgba(139,92,246,.15); }
}
.focus-counter { color: #a1a1aa; font-size: 13px; }
.focus-counter span { color: #8b5cf6; font-weight: 700; }
.focus-close-btn {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
    color: #a1a1aa; font-size: 18px; width: 36px; height: 36px;
    border-radius: 10px; cursor: pointer; transition: background .2s, color .2s;
    display: grid; place-items: center;
}
.focus-close-btn:hover { background: rgba(239,68,68,.15); color: #ef4444; }

/* --- Progress bar --- */
.focus-progress-bar {
    width: 100%; max-width: 720px; height: 3px;
    background: rgba(255,255,255,.06); border-radius: 3px;
    margin: 16px auto 0; overflow: hidden;
    padding: 0 24px; box-sizing: border-box;
}
.focus-progress-fill {
    height: 100%; width: 0; border-radius: 3px;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa, #8b5cf6);
    background-size: 200% 100%;
    animation: focusProgressShimmer 2.5s linear infinite;
    transition: width .4s ease;
}
@keyframes focusProgressShimmer { to { background-position: -200% 0; } }

/* --- Task container --- */
.focus-task-container {
    flex: 1; display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 720px; padding: 32px 24px; box-sizing: border-box;
}

/* --- Task card --- */
.focus-task-card {
    width: 100%; padding: 40px 36px; border-radius: 20px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(139,92,246,.15);
    box-shadow: 0 0 60px rgba(139,92,246,.06), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
    text-align: center; position: relative;
    animation: focusCardIn .5s cubic-bezier(.25,.8,.25,1) both;
}
.focus-task-card::before {
    content: ''; position: absolute; inset: -1px; border-radius: 20px;
    background: linear-gradient(135deg, var(--priority-color, #8b5cf6) 0%, transparent 60%);
    opacity: .1; z-index: -1; pointer-events: none;
}
@keyframes focusCardIn {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.focus-completing {
    animation: focusCompleting .5s ease forwards;
}
@keyframes focusCompleting {
    0%   { transform: scale(1); opacity: 1; }
    50%  { transform: scale(1.03); }
    100% { transform: scale(.92) translateY(-30px); opacity: 0; }
}

/* --- Task elements --- */
.focus-task-priority {
    display: inline-block; padding: 4px 14px; border-radius: 6px;
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px;
    margin-bottom: 20px;
}
.focus-task-title {
    color: #f4f4f5; font-size: 26px; font-weight: 700;
    line-height: 1.3; margin: 0 0 12px;
}
.focus-task-desc {
    color: #a1a1aa; font-size: 15px; line-height: 1.6; margin: 0 0 18px;
}
.focus-task-due {
    color: #a1a1aa; font-size: 13px; margin-bottom: 8px;
}
.focus-task-due.overdue { color: #ef4444; font-weight: 600; }
.focus-task-project {
    color: #8b5cf6; font-size: 13px; font-weight: 500;
    background: rgba(139,92,246,.1); display: inline-block;
    padding: 4px 12px; border-radius: 6px; margin-bottom: 24px;
}
.focus-complete-btn {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff; border: none; padding: 14px 36px; border-radius: 12px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    transition: transform .15s, box-shadow .2s; margin-top: 12px;
}
.focus-complete-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(139,92,246,.35);
}

/* --- Empty state --- */
.focus-empty { border-color: rgba(34,197,94,.15); }
.focus-empty::before { background: linear-gradient(135deg, #22c55e 0%, transparent 60%); }
.focus-task-icon { font-size: 48px; margin-bottom: 16px; }

/* --- Timer --- */
.focus-timer {
    width: 100%; max-width: 720px; text-align: center;
    padding: 0 24px 8px; box-sizing: border-box;
}
.focus-timer-display {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    font-size: 48px; font-weight: 700; color: #f4f4f5;
    letter-spacing: 4px; margin-bottom: 12px;
    text-shadow: 0 0 20px rgba(139,92,246,.2);
}
.focus-timer-controls { display: flex; justify-content: center; gap: 10px; }
.focus-timer-btn {
    background: rgba(139,92,246,.15); border: 1px solid rgba(139,92,246,.25);
    color: #a78bfa; padding: 10px 24px; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .2s, border-color .2s;
}
.focus-timer-btn:hover { background: rgba(139,92,246,.25); border-color: #8b5cf6; }
.focus-timer-btn.secondary {
    background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08);
    color: #71717a;
}
.focus-timer-btn.secondary:hover { background: rgba(255,255,255,.08); color: #a1a1aa; }

/* --- Navigation --- */
.focus-nav {
    width: 100%; max-width: 720px; padding: 12px 24px 28px;
    display: flex; justify-content: center; align-items: center; gap: 20px;
    box-sizing: border-box;
}
.focus-nav-btn {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
    color: #a1a1aa; width: 42px; height: 42px; border-radius: 12px;
    font-size: 18px; cursor: pointer; transition: background .2s, color .2s;
    display: grid; place-items: center;
}
.focus-nav-btn:hover { background: rgba(139,92,246,.15); color: #a78bfa; }
.focus-nav-info { color: #71717a; font-size: 14px; font-weight: 500; min-width: 50px; text-align: center; }

/* ═══ Floating Orb — Re-entry button ═══ */
#focus-orb {
    position: fixed;
    bottom: 120px; right: 24px;
    width: 56px; height: 56px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9998;
    opacity: 0; transform: scale(0.5);
    transition: opacity .4s ease, transform .4s cubic-bezier(.25,.8,.25,1);
    display: flex; align-items: center; justify-content: center;
}
#focus-orb.focus-orb-visible {
    opacity: 1; transform: scale(1);
}
#focus-orb:hover {
    transform: scale(1.1);
}
#focus-orb:hover .focus-orb-glow {
    opacity: .6;
    transform: scale(1.4);
}
.focus-orb-glow {
    position: absolute; inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.4), transparent 70%);
    opacity: .3;
    transition: opacity .3s, transform .3s;
    animation: focusOrbPulse 3s ease-in-out infinite;
}
@keyframes focusOrbPulse {
    0%, 100% { transform: scale(1); opacity: .2; }
    50% { transform: scale(1.3); opacity: .4; }
}
.focus-orb-core {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1035, #0e0e1a);
    border: 1.5px solid rgba(139,92,246,.4);
    display: grid; place-items: center;
    font-size: 24px;
    box-shadow: 0 4px 20px rgba(139,92,246,.2), inset 0 1px 0 rgba(255,255,255,.06);
    animation: focusOrbSpin 20s linear infinite;
}
@keyframes focusOrbSpin {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
}

/* --- Mobile --- */
@media (max-width: 600px) {
    .focus-task-card { padding: 28px 20px; border-radius: 16px; }
    .focus-task-title { font-size: 20px; }
    .focus-timer-display { font-size: 36px; }
    .focus-header { padding: 14px 16px 0; }
    .focus-task-container { padding: 20px 16px; }
    .focus-nav { padding: 10px 16px 20px; }
    .focus-timer { padding: 0 16px 6px; }
    #focus-orb { bottom: 110px; right: 16px; width: 48px; height: 48px; }
    .focus-orb-core { width: 48px; height: 48px; font-size: 20px; }
}

/* ===== css/mail-premium-v7.css?v=202603071000 ===== */
/**
 * MAIL MODULE v7.0 - Premium Glassmorphism
 * Design luxueux et spacieux cohérent avec Calendar v7
 */

:root {
  --mail-glass-bg: rgba(255, 255, 255, 0.03);
  --mail-glass-border: rgba(255, 255, 255, 0.1);
  --mail-glass-hover: rgba(255, 255, 255, 0.05);
  --mail-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --mail-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --mail-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --mail-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);

  --mail-primary: #3B82F6;
  --mail-success: #10B981;
  --mail-warning: #F59E0B;
  --mail-error: #EF4444;
  --mail-gold: #d4af37;
}

/* Container Principal — only when active (avoids overriding .view-container display:none) */
#view-mail.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary, #0f0f19);
  overflow-y: auto;
  padding: 24px 28px;
  gap: 20px;
}

/* ===== HERO SECTION GLASSMORPHISM ===== */
.mail-hero {
  background: var(--mail-glass-bg);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid var(--mail-glass-border);
  padding: 32px;
  box-shadow: var(--mail-shadow-md);
  position: relative;
  overflow: hidden;
}

.mail-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--mail-primary), var(--mail-gold));
}

.mail-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 20px;
}

.mail-hero-title {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mail-hero-title h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, var(--text), var(--mail-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mail-hero-badge {
  padding: 8px 18px;
  border-radius: 24px;
  font-size: 0.9rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.mail-hero-badge.ok {
  background: rgba(16, 185, 129, 0.15);
  color: var(--mail-success);
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.mail-hero-badge.error {
  background: rgba(239, 68, 68, 0.15);
  color: var(--mail-error);
  border: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.mail-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Buttons Premium */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  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.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

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

.btn-lg {
  padding: 14px 32px;
  font-size: 1.1rem;
  gap: 12px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--mail-primary), rgba(59, 130, 246, 0.8));
  color: #fff;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

.btn-accent {
  background: linear-gradient(135deg, var(--mail-gold), #f4d03f);
  color: #1a1a1a;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
}

.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

.btn-outline {
  background: var(--mail-glass-bg);
  backdrop-filter: blur(10px);
  color: var(--text);
  border: 1px solid var(--mail-glass-border);
  box-shadow: var(--mail-shadow-sm);
}

.btn-outline:hover {
  background: var(--mail-glass-hover);
  border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.3);
  transform: translateY(-1px);
}

.btn svg {
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Stats Cards Glassmorphism */
.mail-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.mail-stat-card {
  background: var(--mail-glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  border: 1px solid var(--mail-glass-border);
  padding: 20px;
  transition: all 0.3s ease;
}

.mail-stat-card:hover {
  background: var(--mail-glass-hover);
  transform: translateY(-2px);
  box-shadow: var(--mail-shadow-sm);
}

.mail-stat-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 600;
}

.mail-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  background: linear-gradient(135deg, var(--text), var(--mail-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== TABS GLASSMORPHISM ===== */
.mail-tabs {
  display: flex;
  gap: 8px;
  padding: 6px;
  background: var(--mail-glass-bg);
  backdrop-filter: blur(20px);
  border-radius: 14px;
  border: 1px solid var(--mail-glass-border);
  box-shadow: var(--mail-shadow-sm);
  overflow-x: auto;
}

.mail-tab {
  padding: 12px 24px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.mail-tab.active {
  background: var(--mail-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.mail-tab:not(.active):hover {
  color: var(--text);
  background: var(--mail-glass-hover);
}

/* Tab Content */
.mail-tab-content {
  flex: 1;
  background: var(--mail-glass-bg);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid var(--mail-glass-border);
  box-shadow: var(--mail-shadow-md);
  padding: 28px;
  overflow: auto;
}

/* ===== MODAL COMPOSER LUXUEUX SPACIEUX ===== */
.mail-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mail-modal {
  background: var(--bg-primary);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  width: 95%;
  max-width: 1200px; /* SPACIEUX */
  height: 85vh; /* HAUTEUR LUXUEUSE */
  max-height: 900px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--mail-shadow-xl);
  border: 1px solid var(--mail-glass-border);
  animation: slideUp 0.3s ease;
  overflow: hidden;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.mail-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 32px;
  border-bottom: 1px solid var(--mail-glass-border);
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb, 99, 102, 241), 0.08),
    transparent);
  flex-shrink: 0;
}

.mail-modal-header h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
}

.mail-modal-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--mail-glass-bg);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 1px solid var(--mail-glass-border);
}

.mail-modal-close:hover {
  background: var(--mail-error);
  color: #fff;
  transform: rotate(90deg);
  border-color: var(--mail-error);
}

.mail-modal-body {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

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

.mail-form-group label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mail-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--mail-glass-border);
  background: var(--mail-glass-bg);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 1rem;
  transition: all 0.3s ease;
  font-family: inherit;
}

.mail-input:focus {
  outline: none;
  border-color: var(--mail-primary);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
  background: var(--mail-glass-hover);
}

.mail-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.mail-form-group small {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: -6px;
}

/* Éditeur Riche Luxueux */
.mail-editor-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 400px;
}

.mail-editor-toolbar {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--mail-glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid var(--mail-glass-border);
  flex-wrap: wrap;
}

.mail-toolbar-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--mail-glass-border);
  background: var(--mail-glass-bg);
  backdrop-filter: blur(5px);
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.mail-toolbar-btn:hover {
  background: var(--mail-primary);
  color: #fff;
  border-color: var(--mail-primary);
  transform: scale(1.05);
}

.mail-toolbar-btn:active {
  transform: scale(0.95);
}

.mail-editor {
  flex: 1;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--mail-glass-border);
  background: var(--mail-glass-bg);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.7;
  overflow-y: auto;
  transition: all 0.3s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.mail-editor:focus {
  outline: none;
  border-color: var(--mail-primary);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
  background: var(--mail-glass-hover);
}

.mail-editor[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  opacity: 0.5;
}

.mail-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-top: 1px solid var(--mail-glass-border);
  background: linear-gradient(to top,
    rgba(var(--accent-rgb, 99, 102, 241), 0.03),
    transparent);
  flex-shrink: 0;
}

.mail-modal-footer-left {
  display: flex;
  gap: 12px;
}

.mail-modal-footer-right {
  display: flex;
  gap: 12px;
}

/* Attachments Section */
.mail-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
  background: var(--mail-glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid var(--mail-glass-border);
}

.mail-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--mail-glass-hover);
  border-radius: 8px;
  border: 1px solid var(--mail-glass-border);
  font-size: 0.9rem;
  color: var(--text);
}

.mail-attachment-remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--mail-error);
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.mail-attachment-remove:hover {
  transform: scale(1.1);
}

/* Spinner */
.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Empty State */
.mail-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}

.mail-empty-state svg {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  opacity: 0.3;
}

.mail-empty-state h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: var(--text);
}

.mail-empty-state p {
  font-size: 1rem;
  margin: 0;
  max-width: 400px;
}

/* Email List */
.mail-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mail-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: var(--mail-glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid var(--mail-glass-border);
  transition: all 0.3s ease;
  cursor: pointer;
}

.mail-item:hover {
  background: var(--mail-glass-hover);
  transform: translateX(4px);
  box-shadow: var(--mail-shadow-sm);
}

.mail-item-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--mail-primary), rgba(59, 130, 246, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.mail-item-icon svg {
  width: 24px;
  height: 24px;
  color: #fff;
}

.mail-item-content {
  flex: 1;
  min-width: 0;
}

.mail-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}

.mail-item-subject {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-item-date {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.mail-item-to {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-item-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.mail-item-status.sent {
  background: rgba(16, 185, 129, 0.15);
  color: var(--mail-success);
}

.mail-item-status.failed {
  background: rgba(239, 68, 68, 0.15);
  color: var(--mail-error);
}

/* ===== INBOX SECTION - PREMIUM GLASSMORPHISM ===== */

/* Header Inbox avec titre + filtres */
.mail-inbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px;
  background: var(--mail-glass-bg);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid var(--mail-glass-border);
  box-shadow: var(--mail-shadow-sm);
}

.mail-inbox-header h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, var(--text), var(--mail-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Filtres / Tabs Premium */
.mail-filters {
  display: flex;
  gap: 8px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid var(--mail-glass-border);
  flex-wrap: wrap;
}

.mail-filter-btn {
  padding: 10px 20px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

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

.mail-filter-btn:hover::before {
  width: 200px;
  height: 200px;
}

.mail-filter-btn.active {
  background: linear-gradient(135deg, var(--mail-primary), rgba(59, 130, 246, 0.8));
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
}

.mail-filter-btn:not(.active):hover {
  color: var(--text);
  background: var(--mail-glass-hover);
  transform: translateY(-1px);
}

/* Grid Cards Responsive */
.mail-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
  animation: fadeInGrid 0.5s ease;
}

@keyframes fadeInGrid {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card Email Premium Glassmorphism */
.mail-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: var(--mail-shadow-sm);
}

.mail-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent,
    var(--mail-primary),
    transparent
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mail-card:hover::before {
  opacity: 1;
}

.mail-card:hover {
  background: var(--mail-glass-hover);
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--mail-shadow-lg);
  border-color: rgba(59, 130, 246, 0.3);
}

.mail-card:active {
  transform: translateY(-3px) scale(1.01);
}

/* Card Header - Destinataire + Status */
.mail-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.mail-card-to {
  flex: 1;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-card-to strong {
  color: var(--text);
  margin-right: 6px;
}

/* Status Badges avec icônes */
.mail-card-status {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.mail-card-status.sent {
  background: rgba(16, 185, 129, 0.2);
  color: var(--mail-success);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.mail-card-status.opened {
  background: rgba(59, 130, 246, 0.2);
  color: var(--mail-primary);
  border: 1px solid rgba(59, 130, 246, 0.4);
  animation: pulseStatus 2s ease-in-out infinite;
}

.mail-card-status.failed {
  background: rgba(239, 68, 68, 0.2);
  color: var(--mail-error);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

@keyframes pulseStatus {
  0%, 100% {
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.6);
  }
}

/* Sujet Email - Gros et bold */
.mail-card-subject {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Preview Email - Petit et grisé */
.mail-card-preview {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  opacity: 0.8;
}

.mail-card-preview em {
  font-style: italic;
  opacity: 0.6;
}

/* Footer - Date + Status ouverture */
.mail-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--mail-glass-border);
  font-size: 0.85rem;
}

.mail-card-date {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mail-card-opened {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

/* Empty State pour liste vide */
.mail-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  background: var(--mail-glass-bg);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 2px dashed var(--mail-glass-border);
}

.mail-empty p {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 20px 0;
}

.mail-empty::before {
  content: '📭';
  font-size: 4rem;
  opacity: 0.5;
}

/* Loading State */
.mail-loading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
  font-size: 1.05rem;
  color: var(--text-muted);
}

.mail-loading .spinner {
  width: 40px;
  height: 40px;
  border-width: 4px;
  border-color: var(--mail-primary);
  border-top-color: transparent;
}

/* Error State */
.mail-error {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 20px;
  background: rgba(239, 68, 68, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  text-align: center;
}

.mail-error p {
  font-size: 1.1rem;
  color: var(--mail-error);
  margin: 0;
}

/* Modal Detail Email - Large */
.mail-modal-large {
  max-width: 900px;
  height: auto;
  max-height: 85vh;
}

.mail-detail-meta {
  background: var(--mail-glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid var(--mail-glass-border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mail-detail-meta p {
  margin: 0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mail-detail-meta strong {
  color: var(--text);
  font-weight: 700;
  min-width: 100px;
}

.mail-status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.mail-status-badge.sent {
  background: rgba(16, 185, 129, 0.2);
  color: var(--mail-success);
}

.mail-status-badge.failed {
  background: rgba(239, 68, 68, 0.2);
  color: var(--mail-error);
}

.mail-detail-body {
  background: var(--mail-glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid var(--mail-glass-border);
  padding: 24px;
  overflow-y: auto;
  max-height: 400px;
  line-height: 1.7;
  color: var(--text);
}

.mail-detail-body pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  margin: 0;
}

/* ===== SEARCH BAR COMPACT GMAIL STYLE ===== */
.mail-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--mail-glass-bg);
  backdrop-filter: blur(20px);
  border-radius: 14px;
  border: 1px solid var(--mail-glass-border);
  box-shadow: var(--mail-shadow-sm);
  margin-bottom: 20px;
  position: relative;
  transition: all 0.3s ease;
}

.mail-search-bar:focus-within {
  border-color: var(--mail-primary);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
  background: var(--mail-glass-hover);
}

.mail-search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.3s ease;
}

.mail-search-bar:focus-within .mail-search-icon {
  color: var(--mail-primary);
}

.mail-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  padding: 4px 0;
  outline: none;
  font-family: inherit;
}

.mail-search-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.mail-search-clear {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(239, 68, 68, 0.15);
  color: var(--mail-error);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.mail-search-clear:hover {
  background: var(--mail-error);
  color: #fff;
  transform: scale(1.1);
}

/* ===== LIST COMPACT GMAIL STYLE ===== */
.mail-list-compact {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--mail-glass-bg);
  backdrop-filter: blur(20px);
  border-radius: 14px;
  border: 1px solid var(--mail-glass-border);
  box-shadow: var(--mail-shadow-sm);
  overflow: hidden;
}

.mail-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--mail-glass-border);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 56px;
}

.mail-row:last-child {
  border-bottom: none;
}

.mail-row:hover {
  background: var(--mail-glass-hover);
  transform: translateX(4px);
}

.mail-row:active {
  transform: translateX(2px);
  background: rgba(59, 130, 246, 0.1);
}

/* Checkbox sélection */
.mail-row-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--mail-primary);
  flex-shrink: 0;
}

/* Icône status */
.mail-row-status {
  font-size: 1.2rem;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
  transition: transform 0.2s ease;
}

.mail-row-status.sent {
  opacity: 0.7;
}

.mail-row-status.opened {
  opacity: 1;
  animation: statusPulse 2s ease-in-out infinite;
}

.mail-row-status.failed {
  opacity: 1;
}

@keyframes statusPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Destinataire */
.mail-row-recipient {
  min-width: 180px;
  max-width: 200px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Contenu (sujet + preview inline) */
.mail-row-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
  line-height: 1.4;
}

.mail-row-subject {
  font-weight: 700;
  color: var(--text);
}

.mail-row-preview {
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0.8;
}

/* Date */
.mail-row-date {
  min-width: 80px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
}

/* ===== THEME-SPECIFIC CONTRAST FIXES ===== */
/* Thème Sunset - Améliorer contraste texte */
[data-theme="sunset"] .mail-row-recipient,
[data-theme="sunset"] .mail-row-subject {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="sunset"] .mail-row-preview,
[data-theme="sunset"] .mail-row-date,
[data-theme="sunset"] .mail-card-to,
[data-theme="sunset"] .mail-card-preview {
  color: rgba(255, 255, 255, 0.95);
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

[data-theme="sunset"] .mail-search-input {
  color: #ffffff;
}

[data-theme="sunset"] .mail-search-input::placeholder {
  color: rgba(255, 255, 255, 0.8);
  opacity: 0.9;
}

/* Thème Sahara - Améliorer contraste texte */
[data-theme="sahara"] .mail-row-recipient,
[data-theme="sahara"] .mail-row-subject {
  color: #2c1810;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
  font-weight: 700;
}

[data-theme="sahara"] .mail-row-preview,
[data-theme="sahara"] .mail-row-date,
[data-theme="sahara"] .mail-card-to,
[data-theme="sahara"] .mail-card-preview {
  color: #4a2f1c;
  opacity: 1;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

[data-theme="sahara"] .mail-search-input {
  color: #2c1810;
  font-weight: 600;
}

[data-theme="sahara"] .mail-search-input::placeholder {
  color: #6b4423;
  opacity: 0.85;
  font-weight: 500;
}

[data-theme="sahara"] .mail-inbox-header h3,
[data-theme="sahara"] .mail-card-subject {
  color: #1a0f08;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* Responsive */
@media (max-width: 768px) {
  #view-mail {
    padding: 16px;
    gap: 16px;
  }

  .mail-hero {
    padding: 20px;
  }

  .mail-hero-title h1 {
    font-size: 1.6rem;
  }

  .mail-hero-actions {
    width: 100%;
  }

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

  .mail-modal {
    width: 100%;
    height: 95vh;
    border-radius: 16px;
  }

  .mail-modal-header {
    padding: 20px;
  }

  .mail-modal-header h3 {
    font-size: 1.3rem;
  }

  .mail-modal-body {
    padding: 20px;
  }

  .mail-editor-container {
    min-height: 300px;
  }

  .mail-modal-footer {
    flex-direction: column;
    gap: 12px;
  }

  .mail-modal-footer-left,
  .mail-modal-footer-right {
    width: 100%;
  }

  .mail-modal-footer .btn {
    width: 100%;
  }

  .mail-tabs {
    overflow-x: auto;
  }

  .mail-item {
    flex-direction: column;
  }

  .mail-item-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Inbox Responsive */
  .mail-inbox-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  .mail-inbox-header h3 {
    font-size: 1.3rem;
  }

  .mail-filters {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mail-cards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .mail-card {
    padding: 18px;
  }

  .mail-card-subject {
    font-size: 1.05rem;
  }

  .mail-detail-meta strong {
    min-width: 80px;
  }

  /* Search bar mobile */
  .mail-search-bar {
    padding: 10px 14px;
    gap: 10px;
  }

  .mail-search-input {
    font-size: 0.95rem;
  }

  /* List compact mobile */
  .mail-row {
    flex-wrap: wrap;
    padding: 12px 14px;
    gap: 10px;
  }

  .mail-row-checkbox {
    order: 1;
  }

  .mail-row-status {
    order: 2;
    width: auto;
  }

  .mail-row-date {
    order: 3;
    margin-left: auto;
    font-size: 0.75rem;
    min-width: auto;
  }

  .mail-row-recipient {
    order: 4;
    width: 100%;
    min-width: 0;
    max-width: none;
    font-size: 0.9rem;
  }

  .mail-row-content {
    order: 5;
    width: 100%;
    font-size: 0.9rem;
  }
}

/* ===== css/client-portal.css?v=202603071000 ===== */
/* =============================================
   PRODUCTIVEAPP - CLIENT PORTAL MODULE v2.0
   Admin token management + Public client view
   2026-02-25
   ============================================= */

/* ── Loading / Error states ─────────────────── */
.cp-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--text-secondary, #888);
    gap: 16px;
}
.cp-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(212, 175, 55, 0.15);
    border-top-color: var(--accent-color, #d4af37);
    border-radius: 50%;
    animation: cp-spin 0.8s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }

.cp-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 20px;
    color: #fca5a5;
    font-size: 0.9rem;
}

/* ── Admin View ──────────────────────────────── */
.cp-admin {
    padding: 24px;
    max-width: 900px;
    margin: 0 auto;
    font-family: var(--font-main, inherit);
}

/* Hero banner */
.cp-hero {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.cp-hero-icon {
    font-size: 2.5rem;
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.4));
}
.cp-hero-text { flex: 1; }
.cp-hero-text h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0 0 4px;
}
.cp-hero-text p {
    font-size: 0.875rem;
    color: var(--text-secondary, #aaa);
    margin: 0;
    line-height: 1.5;
}
.cp-hero-stats {
    display: flex;
    gap: 20px;
}
.cp-stat {
    text-align: center;
}
.cp-stat-n {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent-color, #d4af37);
    line-height: 1;
}
.cp-stat-l {
    font-size: 0.72rem;
    color: var(--text-secondary, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* Create token form */
.cp-create {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 28px;
}
.cp-create h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0 0 14px;
}
.cp-create-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.cp-select {
    flex: 1;
    min-width: 180px;
    background: var(--bg-primary, #0d0d1a);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    color: var(--text-primary, #fff);
    padding: 9px 12px;
    font-size: 0.875rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 28px;
}
.cp-select:focus {
    outline: none;
    border-color: var(--accent-color, #d4af37);
}
.cp-select-small {
    flex: 0 0 140px;
    min-width: unset;
}
.cp-btn-primary {
    background: linear-gradient(135deg, #d4af37, #b8962c);
    color: #0d0d1a;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.1s;
}
.cp-btn-primary:hover { opacity: 0.9; }
.cp-btn-primary:active { transform: scale(0.98); }
.cp-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Token list */
.cp-list h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color, #d4af37);
    color: #0d0d1a;
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 99px;
    padding: 1px 7px;
    min-width: 20px;
}
.cp-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-secondary, #888);
    font-size: 0.9rem;
}
.cp-empty::before {
    content: '🔗';
    display: block;
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.cp-revoked {
    margin-top: 24px;
}
.cp-revoked summary {
    cursor: pointer;
    color: var(--text-secondary, #888);
    font-size: 0.85rem;
    padding: 8px 0;
    list-style: none;
}
.cp-revoked summary::before { content: '▶ '; }
details[open] > summary::before { content: '▼ '; }

/* Token card */
.cp-card {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, #333);
    border-left: 4px solid var(--accent-color, #d4af37);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.cp-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.cp-card-revoked {
    border-left-color: #ef4444;
    opacity: 0.6;
}
.cp-card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    text-transform: uppercase;
}
.cp-card-info { flex: 1; min-width: 0; }
.cp-card-name {
    font-weight: 600;
    color: var(--text-primary, #fff);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cp-card-email {
    font-size: 0.8rem;
    color: var(--text-secondary, #aaa);
    margin-top: 2px;
}
.cp-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--text-secondary, #888);
}
.cp-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-meta-item.cp-expired {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.2);
    background: rgba(248, 113, 113, 0.08);
}
.cp-meta-item.cp-warning {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.2);
    background: rgba(251, 191, 36, 0.08);
}
.cp-meta-sep { opacity: 0.3; }

.cp-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.cp-btn-copy, .cp-btn-preview, .cp-btn-revoke {
    border: none;
    border-radius: 7px;
    padding: 6px 12px;
    font-size: 0.78rem;
    cursor: pointer;
    font-weight: 600;
    transition: opacity 0.15s;
}
.cp-btn-copy {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.cp-btn-preview {
    background: rgba(212, 175, 55, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(212, 175, 55, 0.25);
}
.cp-btn-revoke {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.cp-btn-copy:hover, .cp-btn-preview:hover, .cp-btn-revoke:hover { opacity: 0.8; }

.cp-revoked-label {
    font-size: 0.72rem;
    color: #f87171;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 99px;
    padding: 2px 8px;
}

/* ── Preview Modal ──────────────────────────── */
.cp-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    z-index: 99000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: cp-fadein 0.2s ease;
}
@keyframes cp-fadein { from { opacity: 0; } to { opacity: 1; } }

.cp-modal > div {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 20px;
    width: 100%;
    max-width: 780px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    animation: cp-slideup 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cp-slideup {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.cp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color, #333);
    position: sticky;
    top: 0;
    background: var(--bg-secondary, #1a1a2e);
    z-index: 1;
    border-radius: 20px 20px 0 0;
}
.cp-modal-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0;
}
.cp-modal-close {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--text-secondary, #888);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.cp-modal-close:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.cp-modal-body { padding: 24px; }

/* ── Public Portal View ─────────────────────── */
.cp-public {
    padding: 0;
    font-family: var(--font-main, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    background: var(--bg-primary, #0d0d1a);
    min-height: 100vh;
}

/* Public header */
.cp-pub-header {
    background: linear-gradient(135deg, rgba(13, 13, 26, 0.95) 0%, rgba(26, 26, 46, 0.98) 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    padding: 28px 40px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.cp-pub-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4af37, #b8962c);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0d0d1a;
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}
.cp-pub-header > div h2 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary, #fff);
    margin: 0 0 2px;
}
.cp-pub-company {
    font-size: 0.85rem;
    color: var(--text-secondary, #aaa);
    margin: 0;
}
.cp-pub-header-right {
    margin-left: auto;
    text-align: right;
}
.cp-pub-brand {
    font-size: 0.75rem;
    color: rgba(212, 175, 55, 0.6);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* KPIs */
.cp-pub-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 28px 40px;
}
.cp-pub-kpi {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 14px;
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
}
.cp-pub-kpi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-color, #d4af37);
    opacity: 0.6;
}
.cp-pub-kpi-paid::before { background: #10b981; }
.cp-pub-kpi-warn::before { background: #ef4444; }
.cp-pub-kpi-n {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary, #fff);
    line-height: 1;
}
.cp-pub-kpi-l {
    font-size: 0.8rem;
    color: var(--text-secondary, #888);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Sections */
.cp-pub-section {
    padding: 0 40px 28px;
}
.cp-pub-section h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cp-table {
    width: 100%;
    border-collapse: collapse;
}
.cp-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary, #888);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color, #333);
}
.cp-table td {
    padding: 11px 12px;
    font-size: 0.875rem;
    color: var(--text-primary, #ddd);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}
.cp-table tr:last-child td { border-bottom: none; }
.cp-table tr:hover td { background: rgba(255, 255, 255, 0.02); }
.cp-table .cp-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
}
.cp-badge-paid { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.2); border-radius: 99px; padding: 2px 8px; font-size: 0.72rem; font-weight: 600; }
.cp-badge-overdue { background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.2); border-radius: 99px; padding: 2px 8px; font-size: 0.72rem; font-weight: 600; }
.cp-badge-pending { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); border-radius: 99px; padding: 2px 8px; font-size: 0.72rem; font-weight: 600; }
.cp-badge-draft { background: rgba(107, 114, 128, 0.15); color: #9ca3af; border: 1px solid rgba(107,114,128,0.2); border-radius: 99px; padding: 2px 8px; font-size: 0.72rem; font-weight: 600; }
.cp-badge-signed { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.2); border-radius: 99px; padding: 2px 8px; font-size: 0.72rem; font-weight: 600; }
.cp-badge-active { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.2); border-radius: 99px; padding: 2px 8px; font-size: 0.72rem; font-weight: 600; }

/* Powered by footer on public portal */
.cp-pub-footer {
    padding: 24px 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.75rem;
}
.cp-pub-footer span { color: rgba(212, 175, 55, 0.5); }

/* ── Standalone public portal (full page) ──── */
.cp-standalone {
    background: #0a0a14;
    min-height: 100vh;
}
.cp-standalone .cp-public {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
}
.cp-standalone .cp-pub-header {
    background: transparent;
    border-bottom-color: rgba(255,255,255,0.08);
}

/* Responsive */
@media (max-width: 768px) {
    .cp-admin { padding: 16px; }
    .cp-hero { flex-direction: column; gap: 16px; }
    .cp-hero-stats { gap: 12px; }
    .cp-create-form { flex-direction: column; }
    .cp-select, .cp-select-small { min-width: unset; flex: 1; width: 100%; }
    .cp-card { flex-wrap: wrap; }
    .cp-card-actions { width: 100%; }
    .cp-pub-header { flex-direction: column; align-items: flex-start; padding: 20px; }
    .cp-pub-kpis { grid-template-columns: 1fr; padding: 16px 20px; }
    .cp-pub-section { padding: 0 20px 20px; }
    .cp-table { display: block; overflow-x: auto; }
}

/* ===== css/giri-pdf.css?v=202603071000 ===== */
/**
 * ═══════════════════════════════════════════════════════════
 * GIRI PDF — Styles MODE MAHA v101
 * ProductiveApp — Excellence absolue
 * ═══════════════════════════════════════════════════════════
 */

/* ── Variables ───────────────────────────────────────────── */
.gpdf-wrapper {
  --gpdf-bg:         #0a0a0f;
  --gpdf-surface:    #12121a;
  --gpdf-surface2:   #1a1a28;
  --gpdf-border:     rgba(255,255,255,0.07);
  --gpdf-accent:     #6c63ff;
  --gpdf-accent2:    #ff6584;
  --gpdf-accent3:    #43e97b;
  --gpdf-gold:       #f5c842;
  --gpdf-gold2:      #ffaa00;
  --gpdf-text:       #e8e8f0;
  --gpdf-text-muted: #666680;
  --gpdf-glow:       0 0 30px rgba(108,99,255,0.3);
  --gpdf-glow-gold:  0 0 40px rgba(245,200,66,0.35), 0 0 80px rgba(245,200,66,0.15);
  --gpdf-radius:     16px;
  --gpdf-radius-sm:  10px;
  --gpdf-transition: 0.25s cubic-bezier(.4,0,.2,1);

  background: var(--gpdf-bg);
  color: var(--gpdf-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
  padding: 32px 20px;
  box-sizing: border-box;

  /* Hero enter */
  animation: gpdf-hero-in 0.6s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes gpdf-hero-in {
  0%   { opacity: 0; transform: translateY(32px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Layout ──────────────────────────────────────────────── */
.gpdf-wrapper * { box-sizing: border-box; }

/* ── Header ──────────────────────────────────────────────── */
.gpdf-header {
  text-align: center;
  margin-bottom: 48px;
}

.gpdf-logo {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  background: var(--gpdf-surface);
  border: 1px solid var(--gpdf-border);
  border-radius: 100px;
  box-shadow: var(--gpdf-glow);
  position: relative;
  overflow: hidden;
}

.gpdf-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(245,200,66,0.04), transparent);
  animation: gpdf-logo-shine 4s ease-in-out infinite;
}

@keyframes gpdf-logo-shine {
  0%, 100% { transform: translateX(-100%); }
  50%       { transform: translateX(100%); }
}

.gpdf-logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--gpdf-accent), var(--gpdf-accent2));
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(108,99,255,0.4);
}

.gpdf-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, #e8e8f0, var(--gpdf-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

.gpdf-subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--gpdf-text-muted);
  letter-spacing: 0.3px;
}

/* ── Grille des outils ───────────────────────────────────── */
.gpdf-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}

.gpdf-tool-card {
  background: var(--gpdf-surface);
  border: 1px solid var(--gpdf-border);
  border-radius: var(--gpdf-radius);
  padding: 28px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: all var(--gpdf-transition);
  position: relative;
  overflow: hidden;
  outline: none;

  /* Staggered entrance */
  opacity: 0;
  animation: gpdf-card-in 0.5s cubic-bezier(.34,1.56,.64,1) both;
}

.gpdf-tool-card:nth-child(1) { animation-delay: 0.05s; }
.gpdf-tool-card:nth-child(2) { animation-delay: 0.10s; }
.gpdf-tool-card:nth-child(3) { animation-delay: 0.15s; }
.gpdf-tool-card:nth-child(4) { animation-delay: 0.20s; }
.gpdf-tool-card:nth-child(5) { animation-delay: 0.25s; }
.gpdf-tool-card:nth-child(6) { animation-delay: 0.30s; }
.gpdf-tool-card:nth-child(7) { animation-delay: 0.35s; }
.gpdf-tool-card:nth-child(8) { animation-delay: 0.40s; }

@keyframes gpdf-card-in {
  0%   { opacity: 0; transform: translateY(20px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.gpdf-tool-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(108,99,255,0.08), transparent);
  opacity: 0;
  transition: opacity var(--gpdf-transition);
}

/* Particules dorées hover — conteneur */
.gpdf-tool-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--gpdf-radius);
  background: linear-gradient(135deg, var(--gpdf-gold), var(--gpdf-accent2), var(--gpdf-accent));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.gpdf-tool-card:hover {
  border-color: transparent;
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 16px 48px rgba(108,99,255,0.25), 0 4px 16px rgba(0,0,0,0.3);
}

.gpdf-tool-card:hover::before { opacity: 1; }
.gpdf-tool-card:hover::after  { opacity: 1; }

.gpdf-tool-card:active { transform: translateY(-2px) scale(1.01); }

.gpdf-tool-icon {
  font-size: 28px;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}

.gpdf-tool-card:hover .gpdf-tool-icon {
  transform: scale(1.2) rotate(5deg);
  filter: drop-shadow(0 0 12px rgba(245,200,66,0.6));
}

.gpdf-tool-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gpdf-text);
  text-align: center;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

/* ── Workspace ───────────────────────────────────────────── */
.gpdf-workspace {
  max-width: 720px;
  margin: 0 auto;
}

.gpdf-workspace-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.gpdf-back-btn {
  background: var(--gpdf-surface);
  border: 1px solid var(--gpdf-border);
  color: var(--gpdf-text-muted);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all var(--gpdf-transition);
  white-space: nowrap;
}

.gpdf-back-btn:hover {
  border-color: var(--gpdf-accent);
  color: var(--gpdf-accent);
}

.gpdf-tool-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--gpdf-text), var(--gpdf-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Dropzone ────────────────────────────────────────────── */
.gpdf-dropzone {
  border: 2px dashed var(--gpdf-border);
  border-radius: var(--gpdf-radius);
  background: var(--gpdf-surface);
  padding: 56px 32px;
  text-align: center;
  transition: all var(--gpdf-transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Particules dorées canvas dans dropzone */
.gpdf-dropzone .gpdf-particles-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.gpdf-dropzone:hover .gpdf-particles-canvas,
.gpdf-dropzone.gpdf-drag-over .gpdf-particles-canvas {
  opacity: 1;
}

.gpdf-dropzone:hover,
.gpdf-dropzone.gpdf-drag-over {
  border-color: var(--gpdf-gold);
  background: rgba(245,200,66,0.03);
  box-shadow: 0 0 40px rgba(245,200,66,0.12), inset 0 0 40px rgba(245,200,66,0.04);
}

.gpdf-dropzone.gpdf-drag-over {
  transform: scale(1.01);
  border-style: solid;
}

.gpdf-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.gpdf-drop-icon {
  font-size: 40px;
  animation: gpdf-float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(245,200,66,0.0));
  transition: filter 0.3s;
}

.gpdf-dropzone:hover .gpdf-drop-icon {
  filter: drop-shadow(0 0 12px rgba(245,200,66,0.5));
  animation: gpdf-float-glow 3s ease-in-out infinite;
}

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

@keyframes gpdf-float-glow {
  0%, 100% { transform: translateY(0) scale(1);    filter: drop-shadow(0 0 12px rgba(245,200,66,0.5)); }
  50%       { transform: translateY(-8px) scale(1.1); filter: drop-shadow(0 0 20px rgba(245,200,66,0.8)); }
}

.gpdf-drop-text {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--gpdf-text);
}

.gpdf-drop-sub   { margin: 0; font-size: 13px; color: var(--gpdf-text-muted); }
.gpdf-drop-limit { margin: 4px 0 0; font-size: 11px; color: var(--gpdf-text-muted); letter-spacing: 0.5px; }

/* ── Liste fichiers ──────────────────────────────────────── */
.gpdf-file-list {
  margin-top: 16px;
  background: var(--gpdf-surface);
  border: 1px solid var(--gpdf-border);
  border-radius: var(--gpdf-radius);
  overflow: hidden;
}

.gpdf-file-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gpdf-border);
  font-size: 12px;
  color: var(--gpdf-text-muted);
}

.gpdf-clear-btn {
  background: none;
  border: none;
  color: var(--gpdf-accent2);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background var(--gpdf-transition);
}
.gpdf-clear-btn:hover { background: rgba(255,101,132,0.1); }

.gpdf-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gpdf-border);
  transition: all var(--gpdf-transition);
  cursor: grab;
  animation: gpdf-file-in 0.3s ease both;
}

@keyframes gpdf-file-in {
  0%   { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0); }
}

.gpdf-file-item:last-child { border-bottom: none; }
.gpdf-file-item:hover      { background: var(--gpdf-surface2); }

.gpdf-file-item.gpdf-dragging {
  opacity: 0.4;
  cursor: grabbing;
  transform: scale(0.97);
}

.gpdf-file-item.gpdf-drag-target {
  border-top: 2px solid var(--gpdf-gold);
  background: rgba(245,200,66,0.04);
}

.gpdf-file-ext {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.gpdf-ext-pdf  { background: rgba(255,101,132,0.15); color: var(--gpdf-accent2); border: 1px solid rgba(255,101,132,0.2); }
.gpdf-ext-word { background: rgba(108,99,255,0.15);  color: var(--gpdf-accent);  border: 1px solid rgba(108,99,255,0.2); }
.gpdf-ext-img  { background: rgba(67,233,123,0.15);  color: var(--gpdf-accent3); border: 1px solid rgba(67,233,123,0.2); }

.gpdf-file-name  { flex: 1; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpdf-file-size  { font-size: 11px; color: var(--gpdf-text-muted); white-space: nowrap; }

.gpdf-file-remove {
  background: none;
  border: none;
  color: var(--gpdf-text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all var(--gpdf-transition);
  line-height: 1;
}
.gpdf-file-remove:hover { background: rgba(255,101,132,0.1); color: var(--gpdf-accent2); }

/* ── 3D Preview pages PDF ────────────────────────────────── */
.gpdf-preview-section {
  margin-top: 16px;
  perspective: 1200px;
}

.gpdf-preview-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gpdf-text-muted);
  margin: 0 0 12px;
}

.gpdf-preview-pages {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 8px;
}

.gpdf-preview-page {
  flex-shrink: 0;
  width: 80px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transform: rotateY(-8deg) rotateX(2deg);
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s;
  cursor: pointer;
  animation: gpdf-page-3d-in 0.5s ease both;
}

.gpdf-preview-page:nth-child(odd)  { animation-delay: 0.05s; }
.gpdf-preview-page:nth-child(even) { animation-delay: 0.1s; }

@keyframes gpdf-page-3d-in {
  0%   { opacity: 0; transform: rotateY(-30deg) translateY(20px); }
  100% { opacity: 1; transform: rotateY(-8deg) rotateX(2deg); }
}

.gpdf-preview-page:hover {
  transform: rotateY(0deg) rotateX(0deg) scale(1.1);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 24px rgba(245,200,66,0.3);
  z-index: 2;
}

.gpdf-preview-page canvas,
.gpdf-preview-page img {
  width: 100%;
  display: block;
}

.gpdf-preview-page-num {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
}

/* ── Options ─────────────────────────────────────────────── */
.gpdf-options { margin-top: 16px; }

.gpdf-option-group {
  background: var(--gpdf-surface);
  border: 1px solid var(--gpdf-border);
  border-radius: var(--gpdf-radius);
  padding: 20px;
}

.gpdf-option-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gpdf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}

.gpdf-option-input {
  width: 100%;
  background: var(--gpdf-bg);
  border: 1px solid var(--gpdf-border);
  border-radius: var(--gpdf-radius-sm);
  color: var(--gpdf-text);
  padding: 10px 14px;
  font-size: 13px;
  transition: border-color var(--gpdf-transition);
  outline: none;
}
.gpdf-option-input:focus       { border-color: var(--gpdf-accent); }
.gpdf-option-input::placeholder { color: var(--gpdf-text-muted); }
.gpdf-option-hint { margin: 8px 0 0; font-size: 11px; color: var(--gpdf-text-muted); line-height: 1.5; }

.gpdf-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gpdf-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 14px;
  background: var(--gpdf-bg);
  border: 1px solid var(--gpdf-border);
  border-radius: var(--gpdf-radius-sm);
  transition: all var(--gpdf-transition);
}
.gpdf-radio:hover          { border-color: var(--gpdf-accent); color: var(--gpdf-accent); }
.gpdf-radio input[type="radio"] { accent-color: var(--gpdf-accent); }

/* ── Boutons ─────────────────────────────────────────────── */
.gpdf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--gpdf-radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--gpdf-transition);
  border: none;
  text-decoration: none;
  outline: none;
  white-space: nowrap;
}

.gpdf-btn-primary {
  background: linear-gradient(135deg, var(--gpdf-accent), #8b85ff);
  color: #fff;
  box-shadow: 0 4px 20px rgba(108,99,255,0.3);
}
.gpdf-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(108,99,255,0.4);
}
.gpdf-btn-primary:active { transform: translateY(0); }

.gpdf-btn-outline {
  background: transparent;
  color: var(--gpdf-text);
  border: 1px solid var(--gpdf-border);
}
.gpdf-btn-outline:hover { border-color: var(--gpdf-accent); color: var(--gpdf-accent); }

.gpdf-action-bar {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.gpdf-process-btn {
  min-width: 200px;
  padding: 14px 40px;
  font-size: 15px;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}

.gpdf-process-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: translateX(-100%);
}
.gpdf-process-btn:hover::after {
  animation: gpdf-btn-shine 0.6s ease;
}
@keyframes gpdf-btn-shine {
  to { transform: translateX(100%); }
}

/* ── Progress ────────────────────────────────────────────── */
.gpdf-progress-wrap {
  text-align: center;
  padding: 48px 32px;
  background: var(--gpdf-surface);
  border: 1px solid var(--gpdf-border);
  border-radius: var(--gpdf-radius);
}

.gpdf-progress-bar {
  background: var(--gpdf-bg);
  border-radius: 100px;
  height: 6px;
  overflow: hidden;
  margin-bottom: 16px;
}

.gpdf-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gpdf-accent), var(--gpdf-gold), var(--gpdf-accent3));
  background-size: 200% 100%;
  border-radius: 100px;
  transition: width 0.3s ease;
  animation: gpdf-shimmer 2s linear infinite;
  box-shadow: 0 0 10px rgba(245,200,66,0.4);
}

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

.gpdf-progress-label {
  margin: 0;
  font-size: 13px;
  color: var(--gpdf-text-muted);
  animation: gpdf-pulse 1.5s ease-in-out infinite;
}

@keyframes gpdf-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ── Résultat ────────────────────────────────────────────── */
.gpdf-result {
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 32px;
  background: var(--gpdf-surface);
  border: 1px solid rgba(245,200,66,0.2);
  border-radius: var(--gpdf-radius);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--gpdf-glow-gold);
}

.gpdf-result::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(245,200,66,0.06), transparent 70%);
  pointer-events: none;
  animation: gpdf-result-pulse 3s ease-in-out infinite;
}

@keyframes gpdf-result-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

.gpdf-result::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gpdf-gold), transparent);
  animation: gpdf-result-line 3s ease-in-out infinite;
}

@keyframes gpdf-result-line {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 1; }
}

.gpdf-result-icon {
  font-size: 52px;
  animation: gpdf-success-pop 0.7s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 0 16px rgba(67,233,123,0.6));
}

@keyframes gpdf-success-pop {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.gpdf-result-text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--gpdf-text);
}

.gpdf-result-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Bouton télécharger — or brillant */
.gpdf-result-actions .gpdf-btn-primary {
  background: linear-gradient(135deg, var(--gpdf-gold), var(--gpdf-gold2));
  color: #000;
  box-shadow: 0 4px 20px rgba(245,200,66,0.35);
}
.gpdf-result-actions .gpdf-btn-primary:hover {
  box-shadow: 0 8px 32px rgba(245,200,66,0.5);
}

.gpdf-result-meta {
  font-size: 13px;
  color: var(--gpdf-accent3);
  font-weight: 600;
  padding: 10px 20px;
  background: rgba(67,233,123,0.08);
  border: 1px solid rgba(67,233,123,0.15);
  border-radius: 8px;
  display: none;
}
.gpdf-result-meta:not(:empty) { display: block; }

.gpdf-compression-value {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gpdf-accent3), var(--gpdf-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  margin-bottom: 4px;
}

/* ── Confetti canvas ─────────────────────────────────────── */
.gpdf-confetti-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1200;
}

/* ── Tutorial overlay ────────────────────────────────────── */
.gpdf-tutorial-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 15, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gpdf-tut-in 0.4s ease both;
}

@keyframes gpdf-tut-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.gpdf-tutorial-card {
  background: linear-gradient(145deg, rgba(26,26,40,0.98), rgba(18,18,26,0.98));
  border: 1px solid rgba(245,200,66,0.2);
  border-radius: 24px;
  padding: 40px 48px;
  max-width: 480px;
  width: 90%;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), var(--gpdf-glow-gold);
  position: relative;
  overflow: hidden;
  animation: gpdf-card-slide-up 0.5s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes gpdf-card-slide-up {
  0%   { opacity: 0; transform: translateY(40px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.gpdf-tutorial-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gpdf-accent), var(--gpdf-gold), var(--gpdf-accent3));
  animation: gpdf-shimmer 2s linear infinite;
  background-size: 200% 100%;
}

.gpdf-tut-step-indicator {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 28px;
}

.gpdf-tut-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gpdf-border);
  transition: all 0.3s ease;
}

.gpdf-tut-dot.active {
  background: var(--gpdf-gold);
  box-shadow: 0 0 10px rgba(245,200,66,0.5);
  width: 24px;
  border-radius: 4px;
}

.gpdf-tut-emoji {
  font-size: 56px;
  margin-bottom: 16px;
  display: block;
  animation: gpdf-float 3s ease-in-out infinite;
}

.gpdf-tut-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 12px;
  background: linear-gradient(135deg, #fff, var(--gpdf-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gpdf-tut-desc {
  font-size: 14px;
  color: var(--gpdf-text-muted);
  line-height: 1.7;
  margin: 0 0 28px;
}

.gpdf-tut-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.gpdf-tut-skip {
  background: none;
  border: none;
  color: var(--gpdf-text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 10px 16px;
  transition: color 0.2s;
}
.gpdf-tut-skip:hover { color: var(--gpdf-text); }

.gpdf-tut-next {
  background: linear-gradient(135deg, var(--gpdf-gold), var(--gpdf-gold2));
  border: none;
  color: #000;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 4px 16px rgba(245,200,66,0.3);
}
.gpdf-tut-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245,200,66,0.4);
}

/* ── Erreur ──────────────────────────────────────────────── */
.gpdf-error {
  background: rgba(255,101,132,0.1);
  border: 1px solid rgba(255,101,132,0.25);
  border-radius: var(--gpdf-radius-sm);
  color: #ff8fa3;
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 16px;
  animation: gpdf-shake 0.4s ease;
}

@keyframes gpdf-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-6px); }
  75%       { transform: translateX(6px); }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .gpdf-wrapper { padding: 20px 16px; }
  .gpdf-tools-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gpdf-tool-card  { padding: 20px 12px; }
  .gpdf-tool-icon  { font-size: 24px; }
  .gpdf-tool-label { font-size: 12px; }
  .gpdf-dropzone   { padding: 40px 20px; }
  .gpdf-radio-group { flex-direction: column; gap: 8px; }
  .gpdf-result-actions { flex-direction: column; }
  .gpdf-btn { width: 100%; justify-content: center; }
  .gpdf-tutorial-card { padding: 28px 24px; }
}

/* ── Scrollbar ───────────────────────────────────────────── */
.gpdf-files::-webkit-scrollbar        { width: 4px; }
.gpdf-files::-webkit-scrollbar-track  { background: transparent; }
.gpdf-files::-webkit-scrollbar-thumb  { background: var(--gpdf-border); border-radius: 2px; }
.gpdf-preview-pages::-webkit-scrollbar        { height: 4px; }
.gpdf-preview-pages::-webkit-scrollbar-track  { background: transparent; }
.gpdf-preview-pages::-webkit-scrollbar-thumb  { background: var(--gpdf-border); border-radius: 2px; }

/* ===== css/tasks-2.0-supreme.css?v=202603071000 ===== */
/* ================================================
   TASKS 2.0 - ERGONOMIE SUPRÊME
   ProductiveApp - Ultra-Modern Task Management
   ================================================ */

/* === VARIABLES SPÉCIFIQUES === */
:root {
    /* Task Status Colors */
    --task-todo-bg: rgba(59, 130, 246, 0.08);
    --task-todo-border: rgba(59, 130, 246, 0.25);
    --task-todo-text: #60a5fa;

    --task-progress-bg: rgba(251, 191, 36, 0.08);
    --task-progress-border: rgba(251, 191, 36, 0.25);
    --task-progress-text: #fbbf24;

    --task-done-bg: rgba(34, 197, 94, 0.08);
    --task-done-border: rgba(34, 197, 94, 0.25);
    --task-done-text: #4ade80;

    /* Priority Colors */
    --priority-urgent: #ef4444;
    --priority-high: #f59e0b;
    --priority-medium: #3b82f6;
    --priority-low: #6b7280;

    /* Layout */
    --task-card-radius: 12px;
    --task-card-padding: 16px;
    --task-spacing: 12px;
    --task-border-width: 1px;
}

/* === VIEW CONTAINER === */
#view-tasks {
    padding: 0 !important;
    max-width: none !important;
    height: calc(100vh - 60px);
    display: none; /* isolated: hidden by default */
    flex-direction: column;
    background: var(--bg-primary);
}

#view-tasks.active {
  display: flex;
}

/* === HEADER ZONE (Command Bar) === */
.tasks-command-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Title + View Switcher */
.tasks-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.tasks-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tasks-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    margin: 0;
}

.tasks-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 12px;
    background: var(--accent);
    color: white;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
}

/* View Switcher (3 tabs) */
.tasks-view-switcher {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 4px;
}

.view-switcher-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.view-switcher-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.view-switcher-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.view-switcher-btn.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.25);
}

/* Actions + Filters Row */
.tasks-actions-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Quick Add Input (Inline) */
.quick-add-inline {
    flex: 1;
    max-width: 600px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 200ms;
}

.quick-add-inline:focus-within {
    background: var(--bg-elevated);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.quick-add-inline input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
}

.quick-add-inline input::placeholder {
    color: var(--text-tertiary);
}

.quick-add-inline .add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    transition: all 200ms;
}

.quick-add-inline .add-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}

/* Smart Filters */
.tasks-smart-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms;
    white-space: nowrap;
}

.filter-chip:hover {
    background: var(--bg-elevated);
    border-color: var(--border-secondary);
    color: var(--text-primary);
}

.filter-chip.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.filter-chip .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.filter-chip.active .count {
    background: rgba(255, 255, 255, 0.25);
}

/* More Actions */
.tasks-more-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.action-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 200ms;
}

.action-icon-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--accent);
    color: var(--accent);
}

.action-icon-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* === CONTENT ZONE (3 Views) === */
.tasks-content-zone {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.tasks-view {
    display: none;
    height: 100%;
    overflow-y: auto;
    padding: 24px 16px;
}

.tasks-view.active {
    display: block;
}

/* Smooth scroll */
.tasks-view {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

.tasks-view::-webkit-scrollbar {
    width: 6px;
}

.tasks-view::-webkit-scrollbar-track {
    background: transparent;
}

.tasks-view::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 3px;
}

/* ================================================
   VIEW 1 : INBOX (Liste intelligente)
   ================================================ */
.tasks-view-inbox {
    max-width: 900px;
    margin: 0 auto;
}

/* Groupes intelligents */
.inbox-group {
    margin-bottom: 32px;
}

.inbox-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 8px 0;
}

.inbox-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inbox-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* Task Card (Inbox) */
.task-card-inbox {
    position: relative;
    background: var(--bg-secondary);
    border: var(--task-border-width) solid var(--border-primary);
    border-radius: var(--task-card-radius);
    padding: var(--task-card-padding);
    margin-bottom: var(--task-spacing);
    cursor: pointer;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.task-card-inbox::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--task-todo-text);
    border-radius: var(--task-card-radius) 0 0 var(--task-card-radius);
    opacity: 0.8;
    transition: opacity 200ms;
}

.task-card-inbox:hover::before {
    opacity: 1;
}

.task-card-inbox:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent);
    transform: translateX(4px);
    box-shadow: -4px 0 0 var(--accent), 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Task Card Layout */
.task-card-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.task-checkbox-custom {
    position: relative;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}

.task-checkbox-custom input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.task-checkbox-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-secondary);
    border-radius: 6px;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.task-checkbox-custom:hover .task-checkbox-checkmark {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.task-checkbox-custom input:checked ~ .task-checkbox-checkmark {
    background: var(--accent);
    border-color: var(--accent);
}

.task-checkbox-checkmark::after {
    content: '';
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.task-checkbox-custom input:checked ~ .task-checkbox-checkmark::after {
    display: block;
}

.task-content-wrapper {
    flex: 1;
    min-width: 0;
}

.task-title-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.task-title-text {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-primary);
    word-break: break-word;
}

.task-priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.task-priority-badge.urgent {
    background: rgba(239, 68, 68, 0.1);
    color: var(--priority-urgent);
}

.task-priority-badge.high {
    background: rgba(245, 158, 11, 0.1);
    color: var(--priority-high);
}

.task-priority-badge.medium {
    background: rgba(59, 130, 246, 0.1);
    color: var(--priority-medium);
}

.task-priority-badge.low {
    background: rgba(107, 114, 128, 0.1);
    color: var(--priority-low);
}

.task-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.task-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.task-meta-item svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.task-project-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.task-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-primary);
}

.task-actions-inline {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 200ms;
    margin-left: auto;
}

.task-card-inbox:hover .task-actions-inline {
    opacity: 1;
}

.task-quick-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 200ms;
}

.task-quick-action:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    transform: scale(1.1);
}

.task-quick-action svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* ================================================
   VIEW 2 : KANBAN (Colonnes)
   ================================================ */
.tasks-view-kanban {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

.kanban-column {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.kanban-column-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kanban-column-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.kanban-column-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.kanban-column.todo .kanban-column-indicator {
    background: var(--task-todo-text);
}

.kanban-column.progress .kanban-column-indicator {
    background: var(--task-progress-text);
}

.kanban-column.done .kanban-column-indicator {
    background: var(--task-done-text);
}

.kanban-column-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.kanban-column-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Task Card (Kanban) */
.task-card-kanban {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: 10px;
    padding: 14px;
    cursor: grab;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.task-card-kanban:active {
    cursor: grabbing;
}

.task-card-kanban:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.task-card-kanban .task-title-text {
    font-size: 14px;
    margin-bottom: 10px;
}

.task-card-kanban .task-meta-row {
    margin-top: 8px;
}

/* Drag states */
.task-card-kanban.dragging {
    opacity: 0.95;
    transform: rotate(1deg) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    z-index: 1000;
}

.kanban-column.drag-over {
    background: var(--bg-tertiary);
    border-color: var(--accent);
}

/* ================================================
   VIEW 3 : TIMELINE (Vue chronologique)
   ================================================ */
.tasks-view-timeline {
    max-width: 1000px;
    margin: 0 auto;
}

.timeline-container {
    position: relative;
    padding-left: 40px;
}

.timeline-line {
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--accent) 0%, transparent 100%);
}

.timeline-section {
    margin-bottom: 40px;
    position: relative;
}

.timeline-date-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    padding: 12px 0;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.timeline-date-dot {
    position: absolute;
    left: -28px;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border: 4px solid var(--bg-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--accent-subtle);
}

.timeline-date-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.timeline-date-count {
    font-size: 13px;
    color: var(--text-tertiary);
}

.timeline-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Task Card (Timeline) */
.task-card-timeline {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 16px;
    margin-left: 20px;
    cursor: pointer;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.task-card-timeline::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--bg-tertiary);
    border: 2px solid var(--accent);
    border-radius: 50%;
    transition: all 200ms;
}

.task-card-timeline:hover::before {
    width: 12px;
    height: 12px;
    background: var(--accent);
}

.task-card-timeline:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent);
    transform: translateX(8px);
    box-shadow: -4px 0 0 var(--accent), 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ================================================
   EMPTY STATES
   ================================================ */
.tasks-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state-text {
    font-size: 14px;
    color: var(--text-tertiary);
    max-width: 400px;
    margin-bottom: 24px;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
    .tasks-view-kanban {
        grid-template-columns: 1fr;
    }

    .tasks-command-bar {
        padding: 16px 20px;
    }

    .tasks-view {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .tasks-header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .tasks-view-switcher {
        order: -1;
    }

    .tasks-actions-row {
        flex-direction: column;
    }

    .quick-add-inline {
        max-width: none;
    }

    .tasks-more-actions {
        margin-left: 0;
    }
}

/* ================================================
   ANIMATIONS
   ================================================ */
@keyframes taskSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.task-card-inbox,
.task-card-kanban,
.task-card-timeline {
    animation: taskSlideIn 300ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.task-card-inbox:nth-child(1) { animation-delay: 0ms; }
.task-card-inbox:nth-child(2) { animation-delay: 50ms; }
.task-card-inbox:nth-child(3) { animation-delay: 100ms; }
.task-card-inbox:nth-child(4) { animation-delay: 150ms; }
.task-card-inbox:nth-child(5) { animation-delay: 200ms; }
.task-card-inbox:nth-child(n+6) { animation-delay: 250ms; }


/* ===== css/settings.css?v=202603071000 ===== */
/* ================================================
   SETTINGS PREMIUM v2.0 — ProductiveApp
   Design professionnel glassmorphism
   ================================================ */

/* ===== GRID PRINCIPAL ===== */
.settings-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 720px;
    margin: 0 auto;
    padding: 8px 4px 40px;
    animation: settingsFadeIn 0.5s ease-out;
}

@keyframes settingsFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== SECTION ===== */
.settings-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: settingsSectionIn 0.4s ease-out both;
}
.settings-section:nth-child(1)  { animation-delay: 0.05s; }
.settings-section:nth-child(2)  { animation-delay: 0.08s; }
.settings-section:nth-child(3)  { animation-delay: 0.11s; }
.settings-section:nth-child(4)  { animation-delay: 0.14s; }
.settings-section:nth-child(5)  { animation-delay: 0.17s; }
.settings-section:nth-child(6)  { animation-delay: 0.20s; }
.settings-section:nth-child(7)  { animation-delay: 0.23s; }
.settings-section:nth-child(8)  { animation-delay: 0.26s; }
.settings-section:nth-child(9)  { animation-delay: 0.29s; }
.settings-section:nth-child(10) { animation-delay: 0.32s; }
.settings-section:nth-child(11) { animation-delay: 0.35s; }
.settings-section:nth-child(12) { animation-delay: 0.38s; }
.settings-section:nth-child(13) { animation-delay: 0.41s; }

@keyframes settingsSectionIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== SECTION TITLE ===== */
.settings-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted, #71717a);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0;
    padding-left: 4px;
}

.settings-section-title svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    opacity: 0.7;
}

.settings-section.danger .settings-section-title {
    color: var(--danger, #ef4444);
}

/* ===== CARD ===== */
.settings-card {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.settings-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

/* ===== CARD PADDING (inner) ===== */
.settings-card-inner {
    padding: 20px;
}

/* ===== PROFILE ===== */
.settings-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-avatar {
    width: 56px;
    height: 56px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

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

.settings-profile-info h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text, #fafafa);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-profile-info p {
    font-size: 13px;
    color: var(--text-muted, #71717a);
    margin: 4px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-profile-actions {
    padding: 12px 20px 16px;
}

/* ===== SETTINGS ITEM ===== */
.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    gap: 12px;
}

.settings-item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.settings-item:hover:not(.coming-soon) {
    background: rgba(255, 255, 255, 0.03);
}

.settings-item.coming-soon {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-item-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.settings-item-label span:first-child {
    font-size: 14px;
    color: var(--text, #fafafa);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-item-value {
    font-size: 12px;
    color: var(--text-muted, #71717a);
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-item svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-muted, #71717a);
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}

/* ===== BUTTONS ===== */
.settings-btn {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #fafafa);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
}

.settings-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.settings-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-btn.primary {
    background: linear-gradient(135deg, var(--accent, #8b5cf6) 0%, color-mix(in srgb, var(--accent, #8b5cf6) 80%, #3b82f6) 100%);
    color: white;
    border: none;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 25%, transparent);
}

.settings-btn.primary:hover {
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 35%, transparent);
    transform: translateY(-2px);
}

.settings-btn.danger {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.06);
}

.settings-btn.danger:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
}

/* Badge Soon */
.badge-soon {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    padding: 3px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== THEME GRID ===== */
.settings-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 600px) {
    .settings-theme-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.settings-theme-card {
    padding: 12px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
}

.settings-theme-card:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.settings-theme-card.active {
    border-color: var(--accent, #8b5cf6);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 15%, transparent);
}

.settings-theme-preview {
    width: 100%;
    height: 52px;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: transform 0.2s ease;
}

.settings-theme-card:hover .settings-theme-preview {
    transform: scale(1.03);
}

.settings-theme-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text, #fafafa);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== TOGGLE ROW ===== */
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 16px;
}

.settings-toggle-row:last-child {
    border-bottom: none;
}

.settings-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.settings-toggle-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text, #fafafa);
}

.settings-toggle-desc {
    font-size: 12px;
    color: var(--text-muted, #71717a);
    line-height: 1.4;
}

/* ===== TOGGLE SWITCH ===== */
.settings-toggle {
    position: relative;
    width: 48px;
    height: 26px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.settings-toggle.active {
    background: var(--accent, #8b5cf6);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.settings-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.settings-toggle.active::after {
    transform: translateX(22px);
}

/* ===== AVATAR UPLOAD ===== */
.settings-avatar-upload-area {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.settings-avatar-upload-area:hover {
    border-color: var(--accent, #8b5cf6);
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 20%, transparent);
}

.settings-avatar-upload-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-avatar-emoji-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.settings-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    gap: 2px;
    backdrop-filter: blur(2px);
}

.settings-avatar-upload-area:hover .settings-avatar-overlay {
    opacity: 1;
}

.settings-avatar-overlay svg {
    width: 20px;
    height: 20px;
    stroke: white;
    fill: none;
    stroke-width: 2;
}

.settings-avatar-overlay span {
    font-size: 10px;
    color: white;
    font-weight: 600;
}

/* ===== AVATAR CROP MODAL ===== */
.avatar-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.avatar-crop-content {
    background: var(--bg-secondary, #1c1c24);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 28px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.avatar-crop-content h3 {
    color: var(--text, #fafafa);
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
}

.avatar-crop-canvas-wrap {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto 12px;
    border-radius: 14px;
    overflow: hidden;
    cursor: grab;
    background: #000;
}

.avatar-crop-canvas-wrap:active { cursor: grabbing; }
.avatar-crop-canvas-wrap canvas { display: block; }

.avatar-crop-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.avatar-crop-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.avatar-crop-actions button {
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    font-family: inherit;
}

.avatar-crop-actions .crop-confirm {
    background: var(--accent, #8b5cf6);
    color: white;
}

.avatar-crop-actions .crop-confirm:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.avatar-crop-actions .crop-cancel {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.avatar-crop-actions .crop-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ===== WORKSPACE SECTION ===== */
.settings-workspace-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.settings-workspace-icon {
    font-size: 32px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.settings-icon-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.settings-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-icon-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    transform: scale(1.1);
}

.settings-icon-btn.active {
    border-color: var(--accent, #8b5cf6);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ===== ANIMATIONS SECTION ===== */
.settings-anim-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-anim-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-anim-label-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #fafafa);
}

.settings-anim-label-desc {
    font-size: 12px;
    color: var(--text-muted, #71717a);
}

.settings-anim-presets {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.settings-anim-preset {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.25s ease;
}

.settings-anim-preset:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
}

.settings-anim-preset.active {
    border-color: var(--accent, #8b5cf6);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent);
}

.settings-anim-preset-icon {
    font-size: 22px;
}

.settings-anim-intensity {
    margin-bottom: 8px;
}

.settings-anim-intensity-label {
    font-size: 14px;
    color: var(--text, #fafafa);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-anim-value {
    color: var(--accent);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.settings-anim-slider {
    width: 100%;
    accent-color: var(--accent);
    height: 6px;
    border-radius: 3px;
    cursor: pointer;
}

.settings-anim-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

.settings-anim-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.settings-anim-btn {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.settings-anim-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text, #fafafa);
}

.settings-anim-selector-btn {
    width: 100%;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 12%, transparent) 0%,
        color-mix(in srgb, var(--accent) 6%, transparent) 100%);
    color: color-mix(in srgb, var(--accent) 85%, white);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.settings-anim-selector-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 20%, transparent);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.settings-anim-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* ===== CUSTOM TOGGLE (checkbox-based) ===== */
.settings-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    flex-shrink: 0;
}

.settings-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-switch-track {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 26px;
    transition: all 0.3s ease;
}

.settings-switch input:checked + .settings-switch-track {
    background: var(--accent, #8b5cf6);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.settings-switch-thumb {
    position: absolute;
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.settings-switch input:checked ~ .settings-switch-thumb {
    transform: translateX(24px);
}

/* ===== ABOUT SECTION ===== */
.settings-about {
    text-align: center;
    padding: 32px 24px;
}

.settings-about-icon {
    font-size: 48px;
    margin-bottom: 16px;
    display: inline-block;
    animation: settingsAboutFloat 3s ease-in-out infinite;
}

@keyframes settingsAboutFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.settings-about-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text, #fafafa);
    margin: 0 0 4px;
}

.settings-about-version {
    font-size: 14px;
    color: var(--accent, #8b5cf6);
    margin: 0 0 16px;
    font-weight: 600;
}

.settings-about-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 20px;
    line-height: 1.6;
}

.settings-about-tags {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.settings-about-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-about-tag svg {
    width: 14px;
    height: 14px;
}

/* ===== DATA SECTION ===== */
.settings-data-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== ACTION BUTTONS ===== */
.settings-action-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    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.25s ease;
    text-align: left;
    font-family: inherit;
}

.settings-action-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    transform: translateX(4px);
}

.settings-action-btn.danger:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.35);
}

.settings-action-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 12px;
    flex-shrink: 0;
}

.settings-action-btn.danger .settings-action-icon {
    background: rgba(239, 68, 68, 0.12);
}

.settings-action-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--accent, #8b5cf6);
}

.settings-action-btn.danger .settings-action-icon svg {
    stroke: #ef4444;
}

.settings-action-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.settings-action-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #fafafa);
}

.settings-action-btn.danger .settings-action-label {
    color: #ef4444;
}

.settings-action-desc {
    font-size: 12px;
    color: var(--text-muted, #71717a);
    line-height: 1.4;
}

/* ===== TEAM UPGRADE CTA ===== */
.team-upgrade-card {
    text-align: center;
    padding: 32px 24px;
}

.team-upgrade-icon {
    font-size: 48px;
    margin-bottom: 16px;
    display: inline-block;
}

.team-upgrade-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text, #fafafa);
    margin: 0 0 8px;
}

.team-upgrade-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 20px;
    line-height: 1.6;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.team-plans-grid {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.team-plan-card {
    padding: 14px 22px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
}

.team-plan-card:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.team-plan-card .plan-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent, #8b5cf6);
}

.team-plan-card .plan-limit {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* ===== DOMAINS SECTION ===== */
.settings-domains-info {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 16px;
    line-height: 1.6;
}

.settings-domains-info strong {
    color: var(--accent, #8b5cf6);
}

.settings-domains-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.settings-domain-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    gap: 12px;
}

.settings-domain-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #fafafa);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-domain-status {
    font-size: 11px;
    margin-top: 3px;
}

.settings-domain-remove {
    padding: 6px 12px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.06);
    color: #ef4444;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.settings-domain-remove:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
}

.settings-domains-howto {
    margin-top: 20px;
    padding: 18px;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 14px;
}

.settings-domains-howto-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent, #8b5cf6);
    margin: 0 0 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.settings-domains-howto ol {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.9;
    padding-left: 18px;
    margin: 0;
}

.settings-domains-cname {
    margin: 10px 0;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    font-family: monospace;
    font-size: 12px;
    color: var(--accent, #a78bfa);
    line-height: 1.8;
}

.settings-domains-howto-note {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ===== INLINE INPUT ===== */
.settings-input-inline {
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    color: var(--text, #fafafa);
    font-size: 18px;
    font-weight: 600;
    padding: 6px 0;
    width: 100%;
    outline: none;
    transition: border-color 0.25s ease;
    font-family: inherit;
}

.settings-input-inline:focus {
    border-color: var(--accent, #8b5cf6);
}

/* ===== FORM ELEMENTS ===== */
.settings-form { display: flex; flex-direction: column; gap: 24px; }
.settings-form-group { display: flex; flex-direction: column; gap: 8px; }
.settings-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .settings-form-row { grid-template-columns: 1fr; } }

.settings-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #fafafa);
}

.settings-input {
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text, #fafafa);
    font-size: 14px;
    transition: all 0.25s ease;
    font-family: inherit;
}

.settings-input:focus {
    outline: none;
    border-color: var(--accent, #8b5cf6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.settings-input::placeholder { color: var(--text-muted); }

/* ===== MEMBERS ===== */
.settings-members-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.settings-member-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-member-avatar {
    width: 42px; height: 42px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}

.settings-member-info { flex: 1; min-width: 0; }
.settings-member-name { font-weight: 600; color: var(--text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-member-email { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.settings-member-role {
    padding: 4px 12px; border-radius: 20px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    flex-shrink: 0;
}

.settings-member-role.owner { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.settings-member-role.admin { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.settings-member-role.member { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); }

/* ===== SESSIONS ===== */
.settings-sessions-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.settings-session-item {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; background: rgba(0, 0, 0, 0.15);
    border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-session-icon {
    width: 42px; height: 42px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}

.settings-session-info { flex: 1; min-width: 0; }
.settings-session-device { font-weight: 600; color: var(--text); font-size: 14px; }
.settings-session-details { font-size: 12px; color: var(--text-muted); }

.settings-session-current {
    padding: 4px 10px; background: rgba(34, 197, 94, 0.12);
    color: #22c55e; border-radius: 20px;
    font-size: 11px; font-weight: 700;
}

.settings-session-revoke {
    padding: 8px 14px; border-radius: 10px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    background: transparent; color: #ef4444;
    font-size: 12px; cursor: pointer; font-weight: 600;
    transition: all 0.2s ease; font-family: inherit;
}

.settings-session-revoke:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* ===== SAVE BUTTON ===== */
.settings-save-btn {
    padding: 14px 28px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 80%, #3b82f6) 100%);
    color: white;
    border: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 25%, transparent);
}

.settings-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent);
}

.settings-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ===== PASSWORD FORM ===== */
.settings-password-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 400px;
}

/* ===== RADIO GROUP ===== */
.settings-radio-group { display: flex; gap: 12px; margin-top: 8px; }

.settings-radio-item {
    flex: 1; padding: 14px; border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    cursor: pointer; text-align: center; transition: all 0.25s ease;
}

.settings-radio-item:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

.settings-radio-item.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.settings-radio-label { font-weight: 600; color: var(--text); font-size: 13px; }

/* ===== COMING SOON PAGE ===== */
.coming-soon-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 40px;
    max-width: 480px;
    margin: 0 auto;
}

.coming-soon-icon {
    width: 80px; height: 80px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
}

.coming-soon-icon svg {
    width: 40px; height: 40px;
    stroke: var(--accent);
    stroke-width: 1.5;
    fill: none;
}

.coming-soon-page h2 {
    font-size: 24px; font-weight: 700;
    color: var(--text); margin: 0 0 12px;
}

.coming-soon-page > p {
    font-size: 15px; color: var(--text-muted);
    margin: 0 0 32px;
}

.coming-soon-features {
    list-style: none; padding: 0; margin: 0 0 32px;
    display: flex; flex-direction: column; gap: 12px; text-align: left;
}

.coming-soon-features li {
    display: flex; align-items: center; gap: 12px;
    font-size: 14px; color: var(--text);
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.coming-soon-features li svg {
    width: 20px; height: 20px;
    stroke: var(--accent);
    stroke-width: 2; fill: none; flex-shrink: 0;
}

/* ===== TEAM MEMBER COUNTER ===== */
.team-member-counter {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.team-member-counter .label { color: var(--text-muted); }
.team-member-counter .count { font-weight: 700; color: var(--accent); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .settings-grid {
        padding: 4px 0 32px;
    }
    .settings-anim-presets {
        flex-wrap: wrap;
    }
    .settings-anim-preset {
        min-width: calc(33% - 6px);
    }
}