/* STYLES CSS */

        /* Définition des variables de couleur pour le thème de l'application */
:root {
    /* Thème sombre par défaut */
    --black: #0A0A0A;
    --dark-gray: #141414;
    --charcoal: #1E1E1E;
    --accent: #F5F5F0;
    --accent-dim: #D4D4CF;
    --accent-dark: #A3A39E;
    --accent-green: #19E639;
    --steel: #3A3A3A;
    --success: #F5F5F0;
    --warning: #8A8A85;
}

/* Thème clair */
[data-theme="light"] {
    --black: #F8F9FA;          /* Fond principal : gris très clair au lieu de blanc pur */
    --dark-gray: #FFFFFF;       /* Fond des cartes : blanc pur pour contraster */
    --charcoal: #E9ECEF;        /* Fond alternatif : gris clair */
    --accent: #212529;          /* Texte principal : noir profond */
    --accent-dim: #495057;      /* Texte secondaire : gris foncé */
    --accent-dark: #6C757D;     /* Texte tertiaire : gris moyen */
    --accent-green: #198754;    /* Vert plus foncé pour meilleure visibilité */
    --steel: #CED4DA;           /* Bordures : gris moyen-clair visible */
    --success: #212529;         /* Succès : noir profond */
    --warning: #6C757D;         /* Warning : gris moyen */
}

/* Ajustements spécifiques pour le thème clair */
[data-theme="light"] .kpi-card,
[data-theme="light"] .habit-item,
[data-theme="light"] .stat-card,
[data-theme="light"] .modal-content,
[data-theme="light"] .settings-category,
[data-theme="light"] .auth-container {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .header {
    border-bottom: 2px solid var(--steel);
}

[data-theme="light"] .section-title {
    border-bottom: 2px solid var(--steel);
    font-weight: 800;
}

[data-theme="light"] .habit-item {
    border-bottom: 2px solid var(--charcoal);
}

/* Paramètres en thème clair */
[data-theme="light"] .settings-category {
    background: var(--dark-gray);
    border: 2px solid var(--steel);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .settings-category-header {
    background: var(--charcoal);
    border-bottom: 2px solid var(--steel);
}

[data-theme="light"] .settings-category-title {
    color: var(--accent);
    font-weight: 800;
}

[data-theme="light"] .settings-item {
    background: var(--charcoal);
    border-left-color: var(--steel);
}

[data-theme="light"] .settings-item:hover {
    background: var(--dark-gray);
    border-left-color: var(--accent-green);
}

[data-theme="light"] .settings-item-label {
    color: var(--accent);
    font-weight: 600;
}

[data-theme="light"] .settings-item-desc {
    color: var(--accent-dim);
    opacity: 0.85;
}

[data-theme="light"] .settings-btn {
    border: 2px solid var(--steel);
    color: var(--accent);
    font-weight: 700;
}

[data-theme="light"] .settings-btn:hover {
    background: var(--accent);
    color: var(--dark-gray);
    border-color: var(--accent);
}

[data-theme="light"] .settings-btn.primary {
    background: var(--accent);
    color: var(--dark-gray);
    border-color: var(--accent);
}

[data-theme="light"] .settings-btn.primary:hover {
    background: var(--accent-dim);
    border-color: var(--accent-dim);
}

[data-theme="light"] .settings-btn.danger {
    color: #DC3545;
    border-color: #DC3545;
    background: transparent;
}

[data-theme="light"] .settings-btn.danger:hover {
    background: #DC3545;
    color: white;
    border-color: #DC3545;
}

/* Input time en thème clair */
[data-theme="light"] .time-input-wrapper {
    background: var(--charcoal);
    border: 2px solid var(--steel);
}

[data-theme="light"] .time-input-wrapper:hover {
    border-color: var(--accent-dim);
    background: var(--dark-gray);
}

[data-theme="light"] .time-input-wrapper:focus-within {
    border-color: var(--accent-green);
    box-shadow: 0 0 10px rgba(25, 135, 84, 0.3);
}

[data-theme="light"] .settings-time-input {
    background: var(--dark-gray);
    border-color: var(--steel);
}

[data-theme="light"] .settings-time-input::-webkit-calendar-picker-indicator {
    filter: invert(0);
    opacity: 0.6;
}

[data-theme="light"] .settings-time-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Transition fluide lors du changement de thème */
body,
.header,
.date-nav,
.date-nav button,
.kpi-card,
.habit-item,
.stat-card,
.modal-content,
.settings-container,
.settings-category,
.auth-container {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Scroll behavior & scrollbar hiding */
html {
    scroll-behavior: smooth;
    height: -webkit-fill-available;
    overscroll-behavior: none;
    background: #0A0A0A;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner-ring {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(245, 245, 240, 0.15);
    border-top-color: var(--accent, #F5F5F0);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* legacy spinner kept for edge cases */
.loading-spinner {
    animation: spin 1s linear infinite !important;
    display: inline-block !important;
    vertical-align: middle;
    stroke: currentColor !important;
    stroke-width: 3px !important;
    width: 24px !important;
    height: 24px !important;
}

::-webkit-scrollbar { width: 0; height: 0; }
body { -ms-overflow-style: none; scrollbar-width: none; overscroll-behavior-y: contain; }

/* Réinitialisation des styles de base pour tous les éléments */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    /* Supprime le surlignage au toucher sur les mobiles */
}

/* Style général du corps de la page */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background:
        radial-gradient(ellipse 90% 45% at 50% -8%,  rgba(25,230,57,0.13) 0%, transparent 65%),
        radial-gradient(ellipse 55% 35% at 4%  55%,  rgba(25,230,57,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 28% at 96% 88%,  rgba(25,230,57,0.05) 0%, transparent 60%),
        var(--black);
    background-attachment: fixed;
    color: var(--accent);
    min-height: 100vh;
    min-height: -webkit-fill-available;
    /* Assure la hauteur pleine page sur les navigateurs mobiles */
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    /* Marge inférieure pour la barre de navigation et les zones de sécurité des iPhones */
    padding-top: env(safe-area-inset-top);
    /* Marge supérieure pour les zones de sécurité */
    -webkit-font-smoothing: antialiased;
    /* Améliore le rendu des polices */
    -webkit-overflow-scrolling: touch;
    /* Active le défilement fluide sur iOS */
    overscroll-behavior: none;
    /* Supprime le bounce scroll Safari iOS */
}

/* En-tête de l'application - Glass effect */
.header {
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px 15px;
    text-align: center;
    position: sticky;
    /* L'en-tête reste visible lors du défilement */
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--steel);
}

[data-theme="light"] .header {
    background: rgba(248, 249, 250, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.header h1 {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 3px;
}

.header .quote {
    font-size: 0.75rem;
    color: var(--accent-dark);
    font-style: italic;
    margin-top: 5px;
}

/* Navigation par date */

/* Conteneur des indicateurs clés de performance (KPI) */

/* Subtle colored top border per card */

/* Icon */

/* Value */
.kpi-card .value {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--accent);
    margin: 2px 0;
    line-height: 1.1;
}

.kpi-score .value { color: #2ECC71; text-shadow: 0 0 12px rgba(46, 204, 113, 0.3); }
.kpi-streak .value { color: #F39C12; text-shadow: 0 0 12px rgba(243, 156, 18, 0.3); }
.kpi-perfect .value { color: #9B59B6; text-shadow: 0 0 12px rgba(155, 89, 182, 0.3); }

/* Label */
.kpi-card .label {
    font-size: 0.6rem;
    color: var(--accent-dim);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.kpi-card .sub {
    font-size: 0.55rem;
    color: var(--accent-dark);
}

/* Missions du jour — header premium */
.missions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    margin: 0 15px 8px;
    background: linear-gradient(145deg, var(--charcoal), rgba(30, 30, 30, 0.9));
    border: 1px solid var(--steel);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
}

.missions-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #E74C3C, #C0392B);
}

.missions-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.missions-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.missions-icon svg {
    stroke: #E74C3C;
    filter: drop-shadow(0 0 6px rgba(231, 76, 60, 0.3));
}

.missions-title {
    font-size: 0.8rem;
    font-weight: 900;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    flex: 1;
    text-align: center;
}

.missions-count {
    font-size: 1.1rem;
    font-weight: 900;
    color: #E74C3C;
    text-shadow: 0 0 10px rgba(231, 76, 60, 0.3);
    background: rgba(231, 76, 60, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(231, 76, 60, 0.2);
    transition: color 0.5s ease, text-shadow 0.5s ease, background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Daily Habits — compteur complet (toutes habitudes validées) */
@keyframes missions-complete-pulse {
    0%   { box-shadow: 0 0 6px rgba(46, 204, 113, 0.4), 0 0 0 0 rgba(46, 204, 113, 0.5); transform: scale(1); }
    40%  { box-shadow: 0 0 14px rgba(46, 204, 113, 0.8), 0 0 10px 4px rgba(46, 204, 113, 0.25); transform: scale(1.06); }
    60%  { box-shadow: 0 0 20px rgba(46, 204, 113, 1), 0 0 18px 8px rgba(46, 204, 113, 0.15); transform: scale(1.08); }
    100% { box-shadow: 0 0 6px rgba(46, 204, 113, 0.4), 0 0 0 0 rgba(46, 204, 113, 0); transform: scale(1); }
}
@keyframes missions-complete-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.missions-count--complete {
    color: #2ecc71 !important;
    text-shadow: 0 0 12px rgba(46, 204, 113, 0.8), 0 0 24px rgba(46, 204, 113, 0.4) !important;
    background: linear-gradient(90deg,
        rgba(46, 204, 113, 0.15),
        rgba(46, 204, 113, 0.35) 40%,
        rgba(80, 255, 150, 0.5) 50%,
        rgba(46, 204, 113, 0.35) 60%,
        rgba(46, 204, 113, 0.15)
    ) !important;
    background-size: 200% auto !important;
    border: 1px solid rgba(46, 204, 113, 0.5) !important;
    animation: missions-complete-pulse 1.6s ease-in-out infinite,
               missions-complete-shimmer 2.2s linear infinite !important;
}

/* Titres de section (premium banners) */
.section-title {
    position: relative;
    background: linear-gradient(90deg, rgba(26, 26, 26, 1) 0%, rgba(42, 42, 42, 0.7) 100%);
    color: var(--accent);
    padding: 14px 20px;
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin: 30px 10px 15px 0;
    border-left: 4px solid var(--accent-dim);
    clip-path: polygon(0% 0%, 100% 0%, 96% 100%, 0% 100%);
    box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.5);
    border-bottom: none;
    transition: all 0.3s ease;
}

.section-title:hover {
    transform: translateX(4px);
    background: linear-gradient(90deg, rgba(32, 32, 32, 1) 0%, rgba(50, 50, 50, 0.8) 100%);
}

.section-title svg {
    color: var(--accent-dim);
    filter: drop-shadow(0 0 5px var(--accent-dim));
}

[data-theme="light"] .section-title {
    background: linear-gradient(90deg, #F0F0F0 0%, #E0E0E0 100%);
    color: var(--black);
    border-left: 4px solid var(--accent-dim);
    box-shadow: 4px 4px 12px rgba(0,0,0,0.1);
}

/* Liste des habitudes */

/* ============================================================
   HABIT ITEM — Barre de remplissage + Croix/Check
   ============================================================ */

.habit-item {
    position: relative;
    padding: 15px;
    background: var(--dark-gray);
    border-bottom: 1px solid var(--charcoal);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
    margin-bottom: 4px;
}

/* Fill bar — fills from bottom to top like a glass of water */

.habit-item.completed .habit-fill-bar {
    height: 100%;
}

/* Content sits above the fill bar */

/* (status icons removed — fill bar replaces them) */

/* Completed state */
.habit-item.completed {
    border-left-color: #2ECC71;
}

.habit-item:active {
    transform: scale(0.98);
}

.habit-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.habit-item.locked:active {
    transform: none;
}

/* Failed state (past days) */
.habit-item.failed {
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.10), transparent);
    border-left-color: #E74C3C;
}

.habit-item.failed .habit-name {
    color: #E74C3C;
    opacity: 0.8;
}

.habit-item.failed .habit-streak {
    color: rgba(231, 76, 60, 0.6);
}

.habit-item.failed .habit-progress .percent {
    color: #E74C3C;
    opacity: 0.7;
}

.habit-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 3px;
    transition: all 0.3s ease;
}

.habit-item.completed .habit-name {
    color: #2ECC71;
}

.habit-item.completed .habit-description {
    color: rgba(46, 204, 113, 0.6);
}

.habit-item.completed .habit-streak {
    color: rgba(46, 204, 113, 0.7);
}

.habit-progress {
    width: 45px;
    text-align: right;
}

.habit-progress .percent {
    font-size: 1rem;
    font-weight: bold;
    color: var(--accent-dim);
    transition: all 0.3s ease;
}

.habit-item.completed .habit-progress .percent {
    color: #2ECC71;
    text-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
}

/* Styles pour les graphiques */
.chart-container {
    padding: 15px;
    background: var(--dark-gray);
}

.chart-wrapper {
    background: linear-gradient(145deg, var(--charcoal), rgba(30, 30, 30, 0.9));
    border: 1px solid var(--steel);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}

.chart-title {
    font-size: 0.75rem;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

canvas {
    max-height: 200px;
    /* Limite la hauteur des graphiques */
    touch-action: pan-y !important;
}

.habit-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.habit-progress-row:last-child {
    margin-bottom: 0;
}

.habit-progress-label {
    flex: 0 0 100px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.habit-progress-track {
    flex: 1;
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    overflow: hidden;
}

.habit-progress-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.6s ease;
}

.analytics-blurred {
    filter: blur(6px);
    opacity: 0.6;
    pointer-events: none;
    transition: all 0.3s ease;
}

.chart-overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.chart-overlay-container.active {
    opacity: 1;
    pointer-events: auto;
}

.chart-overlay-content {
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid var(--steel);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    max-width: 80%;
}

.chart-overlay-content svg {
    margin-bottom: 12px;
    color: var(--accent-dim);
}

.chart-overlay-content p {
    color: var(--accent);
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 500;
}

/* Animations */
@keyframes pulse-soft {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

@keyframes badge-pop-in {
    0% {
        transform: scale(0.5) translateY(30px);
        opacity: 0;
        filter: brightness(2);
    }
    60% {
        transform: scale(1.1) translateY(-5px);
        opacity: 1;
        filter: brightness(1.2);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
        filter: brightness(1);
    }
}

.badge-animate {
    opacity: 0;
    animation: badge-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Barre de navigation inférieure */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-end;
    background: var(--black);
    border-top: 1px solid var(--steel);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
    max-width: 600px;
    margin: 0 auto;
}

.nav-item {
    flex: 1;
    padding: 10px 5px 8px;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    position: relative;
    color: var(--accent-dark);
}

.nav-item.active {
    color: var(--accent);
}

.nav-item.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: var(--accent-green);
    border-radius: 0 0 2px 2px;
    animation: navIndicatorIn 0.3s ease;
}

@keyframes navIndicatorIn {
    from { width: 0; opacity: 0; }
    to { width: 24px; opacity: 1; }
}

.nav-item .icon {
    margin-bottom: 2px;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item .icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--accent-dark);
    transition: stroke 0.2s ease, transform 0.2s ease;
}

.nav-item.active .icon svg {
    stroke: var(--accent);
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px rgba(245, 245, 240, 0.3));
}

.nav-item .label {
    font-size: 0.6rem;
    color: var(--accent-dim);
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.nav-item.active .label {
    color: var(--accent);
    font-weight: 700;
}

/* Bounce animation on nav tap */
@keyframes navBounce {
    0% { transform: scale(1); }
    20% { transform: scale(0.85); }
    50% { transform: scale(1.15); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

@keyframes navIconBounce {
    0% { transform: scale(1) translateY(0); }
    30% { transform: scale(0.8) translateY(2px); }
    55% { transform: scale(1.25) translateY(-4px); }
    75% { transform: scale(0.95) translateY(0); }
    100% { transform: scale(1) translateY(0); }
}

.nav-item.nav-tapped {
    animation: navBounce 0.5s cubic-bezier(0.36, 0, 0.66, -0.56);
}

.nav-item.nav-tapped .icon {
    animation: navIconBounce 0.5s cubic-bezier(0.36, 0, 0.66, -0.56);
}

/* Bounce for + button */
@keyframes addBtnBounce {
    0% { transform: scale(1); }
    25% { transform: scale(0.8) rotate(0deg); }
    50% { transform: scale(1.2) rotate(90deg); }
    75% { transform: scale(0.95) rotate(90deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.nav-add-btn.nav-tapped .nav-add-icon {
    animation: addBtnBounce 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);
}

/* Bouton + central surélevé */
.nav-add-btn {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    margin: 0 6px;
    margin-top: -20px;
    cursor: pointer;
    z-index: 101;
}

.nav-add-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2ECC71, #27AE60);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-add-icon svg {
    stroke: white;
}

.nav-add-btn:active .nav-add-icon {
    transform: scale(0.9) rotate(90deg);
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
}

/* Système de pages/onglets avec transitions */
.page {
    display: none;
    /* Les pages sont masquées par défaut */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    background: transparent;
}

.page.active {
    display: block;
    /* La page active est affichée */
    opacity: 1;
    transform: translateY(0);
}

/* Affichage du rang */

.rank-display .rank-name {
    font-size: 2rem;
    font-weight: 900;
    color: var(--accent);
    margin: 10px 0;
}

/* Grille des statistiques */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 15px;
}

.stat-card {
    background: linear-gradient(145deg, var(--charcoal), rgba(30, 30, 30, 0.9));
    border-radius: 14px;
    padding: 16px 12px 14px;
    text-align: center;
    border: 1px solid var(--steel);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 3px;
    border-radius: 0 0 4px 4px;
}

.stat-card-green::before { background: linear-gradient(90deg, #2ECC71, #27AE60); }
.stat-card-purple::before { background: linear-gradient(90deg, #9B59B6, #8E44AD); }
.stat-card-blue::before { background: linear-gradient(90deg, #3498DB, #2980B9); }

.stat-card-icon {
    margin-bottom: 6px;
    display: flex;
    justify-content: center;
}

.stat-card-green .stat-card-icon svg { stroke: #2ECC71; }
.stat-card-orange .stat-card-icon svg { stroke: #F39C12; }
.stat-card-purple .stat-card-icon svg { stroke: #9B59B6; }
.stat-card-blue .stat-card-icon svg { stroke: #3498DB; }

.stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.1;
}

.stat-card-green .stat-value { color: #2ECC71; text-shadow: 0 0 10px rgba(46,204,113,0.3); }
.stat-card-orange .stat-value { color: #F39C12; text-shadow: 0 0 10px rgba(243,156,18,0.3); }
.stat-card-purple .stat-value { color: #9B59B6; text-shadow: 0 0 10px rgba(155,89,182,0.3); }
.stat-card-blue .stat-value { color: #3498DB; text-shadow: 0 0 10px rgba(52,152,219,0.3); }

.stat-card .stat-label {
    font-size: 0.6rem;
    color: var(--accent-dim);
    text-transform: uppercase;
    margin-top: 4px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Carte de motivation */

.motivation-card .quote-text {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--accent);
    line-height: 1.5;
}

.motivation-card .quote-author {
    font-size: 0.75rem;
    color: var(--accent-dark);
    margin-top: 10px;
    font-weight: bold;
}

/* Grille de la semaine */
.weekly-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* 7 colonnes pour les jours de la semaine */
    gap: 5px;
    padding: 15px;
}

.weekly-day {
    text-align: center;
    padding: 10px 5px;
    background: var(--charcoal);
    border-radius: 8px;
}

.weekly-day .day-name {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--accent-dark);
    margin-bottom: 5px;
}

.weekly-day .day-score {
    font-size: 1rem;
    font-weight: bold;
    color: var(--accent);
}

.weekly-day.today {
    border: 2px solid var(--accent);
    /* Surligne le jour actuel */
}

.weekly-day.perfect {
    background: linear-gradient(135deg, rgba(0, 230, 64, 0.35) 0%, rgba(46, 204, 113, 0.25) 100%);
    border: 1px solid rgba(0, 230, 64, 0.5);
    box-shadow: 0 0 8px rgba(0, 230, 64, 0.3);
}

.weekly-day.perfect .day-score {
    color: #00E640;
}

.weekly-day.rest-day .day-score {
    color: #19E639;
    font-size: 0.85rem;
}

.weekly-day.rest-day .day-name {
    color: rgba(25, 230, 57, 0.6);
}

.weekly-day.perfect .day-name {
    color: rgba(0, 230, 64, 0.8);
}

/* ============================================================ */
/* SECTION PARAMÈTRES - STYLE JEU VIDÉO / CYBERPUNK */
/* ============================================================ */

.settings-container {
    padding: 15px;
    position: relative;
}

/* Catégorie - Style carte de jeu */
.settings-category {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(30, 30, 30, 0.9));
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid transparent;
    border-image: linear-gradient(135deg, var(--accent-dark), transparent, var(--accent-dark)) 1;
    position: relative;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    animation: fadeInUp 0.4s ease-out backwards;
}
.settings-category:nth-child(1) { animation-delay: 0.05s; }
.settings-category:nth-child(2) { animation-delay: 0.12s; }
.settings-category:nth-child(3) { animation-delay: 0.19s; }
.settings-category:nth-child(4) { animation-delay: 0.26s; }
.settings-category:nth-child(5) { animation-delay: 0.33s; }

.settings-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.6;
}

.settings-category::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: var(--accent);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    opacity: 0.3;
}

/* Header de catégorie - Style HUD */
.settings-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(245, 245, 240, 0.08), transparent);
    border-bottom: 1px solid rgba(245, 245, 240, 0.1);
    position: relative;
}

.settings-category-header::before {
    content: '//';
    color: var(--accent);
    font-size: 0.7rem;
    opacity: 0.5;
    font-family: monospace;
}

.settings-category-icon {
    font-size: 1.1rem;
    filter: drop-shadow(0 0 4px rgba(245, 245, 240, 0.3));
}

.settings-category-title {
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
}

/* Contenu de catégorie */
.settings-category-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Item de paramètre - Style menu de jeu */
.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 2px solid transparent;
    gap: 12px;
    transition: all 0.2s ease;
    position: relative;
    cursor: default;
}

.settings-item:hover {
    background: rgba(245, 245, 240, 0.05);
    border-left-color: var(--accent);
}

.settings-item:hover .settings-item-label {
    color: var(--accent);
    text-shadow: 0 0 8px rgba(245, 245, 240, 0.3);
}

.settings-item-info {
    flex: 1;
}

.settings-item-label {
    color: var(--accent-dim);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.settings-item-desc {
    color: var(--accent-dark);
    font-size: 0.65rem;
    margin-top: 2px;
    font-family: monospace;
    opacity: 0.7;
}

.settings-item-action {
    flex-shrink: 0;
}

/* Boutons style gaming */
.settings-btn {
    background: transparent;
    color: var(--accent-dim);
    border: 1px solid var(--accent-dark);
    padding: 10px 18px;
    font-size: 0.7rem;
    min-height: 44px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.settings-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: -1;
}

.settings-btn:hover {
    color: var(--black);
    border-color: var(--accent);
    text-shadow: none;
}

.settings-btn:hover::before {
    opacity: 1;
}

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

.settings-btn.primary {
    background: var(--accent);
    color: var(--black);
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(245, 245, 240, 0.2);
}

.settings-btn.primary:hover {
    box-shadow: 0 0 15px rgba(245, 245, 240, 0.4);
}

.settings-btn.danger {
    background: transparent;
    color: #FF6B6B;
    border-color: #8B0000;
}

.settings-btn.danger::before {
    background: #8B0000;
}

.settings-btn.danger:hover {
    color: #FFE5E5;
    border-color: #FF6B6B;
    box-shadow: 0 0 10px rgba(139, 0, 0, 0.4);
}

.settings-btn.premium-gold {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #1A1400;
    border-color: #FFD700;
    animation: settingsGoldPulse 2s ease-in-out infinite;
}

.settings-btn.premium-gold::before {
    background: linear-gradient(135deg, #FFE97A, #FFD700);
}

.settings-btn.premium-gold:hover {
    color: #1A1400;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

@keyframes settingsGoldPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.45), 0 0 10px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.15), 0 0 18px rgba(255, 215, 0, 0.45);
    }
}

/* Wrapper pour l'input time avec icône */
.time-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(20, 20, 20, 0.5) 100%);
    border: 1px solid var(--steel);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: all 0.3s ease;
}

.time-input-wrapper:hover {
    border-color: var(--accent-dark);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(30, 30, 30, 0.6) 100%);
}

.time-input-wrapper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(245, 245, 240, 0.15);
}

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

.time-input-wrapper:focus-within .time-icon {
    animation: timeIconActive 1s ease-in-out infinite;
}

@keyframes timeIconActive {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    75% { transform: scale(1.1) rotate(5deg); }
}

/* Sélecteur d'heure — sobre, cohérent avec le reste de la liste Settings */
.settings-time-input {
    width: 56px;
    padding: 8px 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent);
    border: 1px solid var(--steel);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    font-family: inherit;
    letter-spacing: normal;
    transition: border-color 0.2s ease, background 0.2s ease;
    position: relative;
    box-shadow: none;
    text-shadow: none;
}

.settings-time-input:hover {
    border-color: var(--accent-dim);
}

.settings-time-input:focus {
    outline: none;
    border-color: var(--accent-green);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(25, 230, 57, 0.15);
}

/* Style du picker natif */
.settings-time-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.settings-time-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Bouton de réinitialisation */

/* Bouton de gestion des habitudes */

/* Bouton de notifications */

/* Bouton de suppression de compte */

/* Bouton de validation de journée */

/* Fenêtre modale (pour l'édition des habitudes) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 25000 !important;
    display: none;
    /* Cachée par défaut */
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
    /* Affichée quand la classe 'active' est ajoutée */
}

.modal {
    background: var(--charcoal);
    border-radius: 15px;
    padding: 25px;
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--steel);
    animation: modalIn 0.3s ease-out;
    /* Animation d'apparition */
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal h3 {
    color: var(--accent);
    font-size: 1.1rem;
    margin-bottom: 20px;
    text-align: center;
}

.modal-habit-item .icon {
    font-size: 1.3rem;
    width: 35px;
    text-align: center;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.modal-btn {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.modal-btn.cancel {
    background: var(--steel);
    color: var(--accent);
}

.modal-btn.save {
    background: var(--accent);
    color: var(--black);
}

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

/* ANIMATIONS */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes checkPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Assignation des animations aux éléments */
.header {
    animation: fadeIn 0.5s ease-out;
}

.habit-item {
    animation: fadeInUp 0.4s ease-out backwards;
}

/* Délai d'animation pour chaque élément de la liste pour un effet d'escalier */
.habit-item:nth-child(1) {
    animation-delay: 0.05s;
}

.habit-item:nth-child(2) {
    animation-delay: 0.1s;
}

.habit-item:nth-child(3) {
    animation-delay: 0.15s;
}

.habit-item:nth-child(4) {
    animation-delay: 0.2s;
}

.habit-item:nth-child(5) {
    animation-delay: 0.25s;
}

.habit-item:nth-child(6) {
    animation-delay: 0.3s;
}

.habit-item:nth-child(7) {
    animation-delay: 0.35s;
}

.habit-item:nth-child(8) {
    animation-delay: 0.4s;
}

.habit-item:nth-child(9) {
    animation-delay: 0.45s;
}

.habit-item:nth-child(10) {
    animation-delay: 0.5s;
}

/* Legacy .habit-checkbox kept for manage-habits modal only */

.section-title {
    animation: fadeIn 0.4s ease-out;
}

.stat-card {
    animation: fadeInUp 0.4s ease-out backwards;
}

.stats-grid .stat-card:nth-child(1) {
    animation-delay: 0.1s;
}

.stats-grid .stat-card:nth-child(2) {
    animation-delay: 0.15s;
}

.stats-grid .stat-card:nth-child(3) {
    animation-delay: 0.2s;
}

.stats-grid .stat-card:nth-child(4) {
    animation-delay: 0.25s;
}

.weekly-day {
    animation: scaleIn 0.3s ease-out backwards;
}

.weekly-day:nth-child(1) {
    animation-delay: 0.05s;
}

.weekly-day:nth-child(2) {
    animation-delay: 0.1s;
}

.weekly-day:nth-child(3) {
    animation-delay: 0.15s;
}

.weekly-day:nth-child(4) {
    animation-delay: 0.2s;
}

.weekly-day:nth-child(5) {
    animation-delay: 0.25s;
}

.weekly-day:nth-child(6) {
    animation-delay: 0.3s;
}

.weekly-day:nth-child(7) {
    animation-delay: 0.35s;
}

.chart-wrapper {
    animation: fadeIn 0.6s ease-out backwards;
}

.chart-wrapper:nth-child(1) {
    animation-delay: 0.2s;
}

.chart-wrapper:nth-child(2) {
    animation-delay: 0.4s;
}

/* Transitions pour une meilleure expérience utilisateur */
.nav-item {
    transition: all 0.2s ease;
}

.nav-item:active {
    transform: scale(0.95);
}

.kpi-card .value {
    transition: all 0.3s ease;
}

/* Page transition handled by .page.active opacity/transform */

/* AUTH PAGE STYLES */
.auth-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    box-sizing: border-box;
}

.auth-logo {
    text-align: center;
    margin-bottom: 30px;
}

.auth-logo svg {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
}

.auth-logo h1 {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
    color: var(--accent);
    font-weight: 900;
    letter-spacing: 3px;
    word-break: break-word;
}

.auth-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.auth-tab {
    flex: 1;
    padding: 12px 8px;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    color: var(--accent);
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: clamp(0.75rem, 3.5vw, 0.9rem);
    transition: all 0.2s;
    white-space: nowrap;
    min-width: 0;
}

.auth-tab.active {
    background: var(--accent);
    color: var(--black);
}

.auth-tab:active {
    transform: scale(0.98);
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.auth-form input {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    border-radius: 8px;
    color: var(--accent);
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--accent);
}

.auth-btn {
    width: 100%;
    padding: 15px;
    background: var(--accent);
    color: var(--black);
    border: none;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

.auth-error {
    color: #FF6B6B;
    font-size: 0.85rem;
    margin-top: 10px;
    text-align: center;
    padding: 10px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 5px;
    display: none;
}

.forgot-password-link {
    display: block;
    margin-top: 15px;
    text-align: center;
    color: var(--accent);
    font-size: 0.9rem;
    text-decoration: none;
    transition: opacity 0.2s;
}

.forgot-password-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.auth-error.show {
    display: block;
}

/* Google Auth Button */
.auth-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: var(--steel);
    font-size: 0.8rem;
    font-weight: 600;
}
.auth-separator span {
    text-transform: uppercase;
}
.auth-separator::before,
.auth-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--steel);
    margin: 0 10px;
}
.google-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    margin-bottom: 15px;
}
.google-auth-btn:hover {
    background: #f8f9fa;
}
.google-auth-btn:active {
    transform: scale(0.98);
}
.google-icon {
    width: 20px;
    height: 20px;
}

/* Migration Modal Styles */

/* HABIT MANAGEMENT STYLES */
.modal-large {
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.manage-habits-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 14px;
    height: 14px;
    min-width: 0;
    min-height: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    color: var(--accent-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    z-index: 1;
}
.manage-habits-close-btn:hover {
    background: rgba(255, 70, 70, 0.12);
    border-color: rgba(255, 70, 70, 0.3);
    color: #FF5050;
}

.habits-management-list {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 15px;
}

/* ===== HABIT MANAGEMENT CARDS (premium redesign) ===== */
.hm-card {
    position: relative;
    background: linear-gradient(145deg, rgba(30,30,30,0.95), rgba(20,20,20,0.9));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: all 0.3s ease;
}
.hm-card:active { transform: scale(0.99); }
.hm-card-accent {
    height: 3px;
    width: 100%;
    border-radius: 0 0 4px 4px;
    opacity: 0.8;
}
.hm-card-body { padding: 14px 16px 12px; }

.hm-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hm-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.hm-card-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hm-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: var(--accent);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.hm-input:focus {
    outline: none;
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
}
.hm-input-name { font-weight: 700; }
.hm-input-desc { font-size: 0.8rem; color: var(--accent-dim); }
.hm-input-desc::placeholder { color: rgba(255,255,255,0.2); }

.hm-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    flex-shrink: 0;
    color: rgba(255,255,255,0.25);
    cursor: grab;
    touch-action: none;
}
.hm-drag-handle:active { cursor: grabbing; color: rgba(255,255,255,0.5); }
.hm-card-ghost {
    opacity: 0.4;
    background: rgba(46,204,113,0.08);
    border-radius: 16px;
}
.hm-context-menu {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 4px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    animation: hm-menu-pop 0.15s ease-out;
}
@keyframes hm-menu-pop {
    from { opacity: 0; transform: translateY(-50%) scale(0.9); }
    to { opacity: 1; transform: translateY(-50%) scale(1); }
}
.hm-context-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.hm-context-edit {
    color: #3498DB;
}
.hm-context-edit:active {
    background: rgba(52,152,219,0.15);
}
.hm-context-delete {
    color: #E74C3C;
}
.hm-context-delete:active {
    background: rgba(231,76,60,0.15);
}
.hm-card-order {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.hm-order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: var(--accent-dim);
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}
.hm-order-btn:active { transform: scale(0.85); background: rgba(255,255,255,0.1); }
.hm-order-btn:disabled { opacity: 0.2; cursor: default; }

.hm-card-bottom {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.hm-schedule {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.hm-sched-btn {
    flex: 1;
    padding: 8px 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: var(--accent-dim);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
}
.hm-sched-btn.active {
    background: rgba(46,204,113,0.12);
    border-color: rgba(46,204,113,0.3);
    color: #2ECC71;
}
.hm-sched-btn:active { transform: scale(0.95); }

.hm-days {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    justify-content: center;
}
.hm-day {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--accent-dim);
    cursor: pointer;
    transition: all 0.2s;
}
.hm-day.selected {
    background: rgba(46,204,113,0.15);
    border-color: rgba(46,204,113,0.4);
    color: #2ECC71;
}
.hm-day:active { transform: scale(0.85); }
.hm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid;
}
.hm-btn:active { transform: scale(0.95); }

.hm-btn-delete {
    width: 42px;
    padding: 10px;
    background: rgba(231,76,60,0.08);
    border-color: rgba(231,76,60,0.2);
    color: #E74C3C;
}
.hm-btn-delete svg { stroke: #E74C3C; }

.add-habit-section {
    background: var(--dark-gray);
    border: 1px solid var(--steel);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.add-habit-section.collapsed {
    padding: 0;
    background: transparent;
    border: none;
}

.add-habit-toggle {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--charcoal), var(--dark-gray));
    border: 2px dashed var(--steel);
    color: var(--accent);
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.85rem;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.add-habit-toggle:hover {
    background: var(--steel);
    border-style: solid;
}

.add-habit-form {
    display: none;
    padding-top: 15px;
}

.add-habit-form.active {
    display: block;
}

.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    color: var(--accent-dim);
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.form-group input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    border-radius: 8px;
    color: var(--accent);
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
}

.form-group input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
}

.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    border-radius: 8px;
    color: var(--accent);
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
    min-height: 60px;
}

.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-group textarea::placeholder {
    color: var(--accent-dark);
    font-style: italic;
}

.optional-label {
    font-weight: normal;
    font-size: 0.65rem;
    color: var(--accent-dark);
    text-transform: none;
}

.icon-picker {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
}

.icon-option {
    padding: 10px;
    background: var(--dark-gray);
    border: 2px solid var(--steel);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    aspect-ratio: 1;
    min-width: 0;
    color: var(--accent-dim);
}

.icon-option svg {
    stroke: currentColor;
    flex-shrink: 0;
}

.icon-option:hover {
    background: var(--charcoal);
    border-color: var(--accent-dark);
    color: var(--accent);
}

.icon-option.selected {
    border-color: var(--accent);
    background: rgba(25, 230, 57, 0.12);
    color: var(--accent);
}

.color-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
}

.color-option {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
    min-width: 0;
}

.color-option:hover {
    border-color: var(--accent-dark);
}

.color-option.selected {
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-green);
}

/* Responsive adjustments for habit creation */
@media (max-width: 360px) {
    .icon-picker {
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
    }

    .icon-option {
        padding: 6px;
    }

    .color-picker-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
}

@media (min-width: 361px) and (max-width: 480px) {
    .icon-picker {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }

    .icon-option {
        padding: 8px;
    }

    .color-picker-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 7px;
    }
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--steel);
}

.form-btn {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
}

.form-btn.cancel {
    background: var(--steel);
    color: var(--accent);
}

.form-btn.save {
    background: var(--accent);
    color: var(--black);
}

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


/* ============================================================ */
/* SYSTÈME DE POPUP/TOAST NOTIFICATIONS */
/* ============================================================ */

.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    animation: toastSlideIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden;
}

.toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.toast.toast-success::before {
    background: #2ECC71;
}

.toast.toast-error::before {
    background: #E74C3C;
}

.toast.toast-warning::before {
    background: #F39C12;
}

.toast.toast-info::before {
    background: #3498DB;
}

.toast.toast-closing {
    animation: toastSlideOut 0.3s ease-in forwards;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastSlideOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-20px) scale(0.9); }
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-20px) scale(0.9); }
}

@keyframes toastProgress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .toast-container {
        top: 10px;
        width: calc(100% - 20px);
    }

    .toast {
        padding: 14px;
    }

    .toast-message {
        font-size: 0.85rem;
    }
}

/* ============================================================ */
/* CALENDRIER VISUEL - IMPACT PSYCHOLOGIQUE */
/* ============================================================ */

/* Modal calendrier */
.modal-calendar {
    max-width: 95%;
    width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--dark-gray);
    border: 1px solid var(--steel);
    border-radius: 20px;
    padding: 20px;
    position: relative;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-top: 4px;
}

.calendar-header h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

/* Légende */
.calendar-legend {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent-dim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 5px 10px 5px 6px;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    border-radius: 20px;
}

.legend-box {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.legend-success {
    background: linear-gradient(135deg, #2ECC71, #27AE60);
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.4);
}

.legend-fail {
    background: linear-gradient(135deg, #E74C3C, #C0392B);
    box-shadow: 0 0 6px rgba(231, 76, 60, 0.4);
}

.legend-future {
    background: var(--steel);
    border: 1px dashed var(--accent-dark);
}

/* Container du calendrier */
.calendar-grid-container {
    padding-right: 5px;
}

/* Sélecteur d'habitude (vue liste avant de rentrer dans un calendrier) */
.calendar-habit-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calendar-habit-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    border-radius: 14px;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.calendar-habit-pick:active {
    transform: scale(0.98);
    border-color: var(--accent-dim);
}

.chp-icon {
    font-size: 1.3rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-gray);
    border-radius: 10px;
    flex-shrink: 0;
}

.chp-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--accent);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chp-percent {
    font-size: 0.8rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--dark-gray);
    flex-shrink: 0;
}

.chp-percent.good { color: #2ECC71; }
.chp-percent.medium { color: #F39C12; }
.chp-percent.bad { color: #E74C3C; }

.chp-arrow {
    color: var(--accent-dark);
    flex-shrink: 0;
}

/* Bouton retour (vue détail d'une habitude) */
.calendar-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--dark-gray);
    border: 1px solid var(--steel);
    border-radius: 8px;
    color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.calendar-back-btn:active {
    transform: scale(0.92);
}

/* Grille pour chaque habitude */
.calendar-habit-section {
    margin-bottom: 15px;
    background: var(--charcoal);
    border-radius: 14px;
    padding: 12px;
    border: 1px solid var(--steel);
    border-left: 3px solid var(--steel);
    transition: border-color 0.2s ease;
}

.calendar-habit-section.good { border-left-color: #2ECC71; }
.calendar-habit-section.medium { border-left-color: #F39C12; }
.calendar-habit-section.bad { border-left-color: #E74C3C; }

.calendar-habit-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--steel);
}

.calendar-habit-icon {
    font-size: 1.3rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-gray);
    border-radius: 10px;
    flex-shrink: 0;
}

.calendar-habit-name {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--accent);
    flex: 1;
}

.calendar-habit-percent {
    font-size: 0.8rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--dark-gray);
}

.calendar-habit-percent.good {
    color: #2ECC71;
}

.calendar-habit-percent.medium {
    color: #F39C12;
}

.calendar-habit-percent.bad {
    color: #E74C3C;
}

/* Grille des jours */
.calendar-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day-header {
    text-align: center;
    font-size: 0.6rem;
    color: var(--accent-dark);
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 0;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: 0.65rem;
    font-weight: bold;
    border-radius: 8px;
    transition: transform 0.15s ease;
    position: relative;
}

.calendar-day-num {
    line-height: 1;
}

.calendar-day-icon {
    font-size: 0.6rem;
    line-height: 1;
}

.calendar-day.empty {
    background: transparent;
}

.calendar-day.success {
    background: linear-gradient(145deg, #2ECC71, #27AE60);
    color: white;
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

.calendar-day.fail {
    background: linear-gradient(145deg, #E74C3C, #C0392B);
    color: white;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}

.calendar-day.no-data {
    background: repeating-linear-gradient(
        135deg,
        var(--charcoal),
        var(--charcoal) 4px,
        rgba(255, 255, 255, 0.03) 4px,
        rgba(255, 255, 255, 0.03) 8px
    );
    color: var(--accent-dark);
    opacity: 0.5;
}

.calendar-day.future {
    background: var(--steel);
    color: var(--accent-dark);
    opacity: 0.4;
    border: 1px dashed var(--accent-dark);
}

.calendar-day.today {
    box-shadow: 0 0 0 2px var(--accent), 0 0 12px rgba(245, 245, 240, 0.5);
    animation: dayPop 0.3s ease-out backwards, todayPulse 2s ease-in-out infinite;
}

@keyframes todayPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 8px rgba(245, 245, 240, 0.35); }
    50% { box-shadow: 0 0 0 2px var(--accent), 0 0 16px rgba(245, 245, 240, 0.6); }
}

/* Résumé du mois */
.calendar-summary {
    margin-top: 15px;
    padding: 18px 15px;
    background: var(--charcoal);
    border-radius: 14px;
    border: 1px solid var(--steel);
}

.summary-title {
    font-size: 0.75rem;
    color: var(--accent-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
    text-align: center;
}

/* Anneau de progression + pills */
.calendar-ring-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.calendar-ring {
    --ring-percent: 0;
    --ring-color: #2ECC71;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: conic-gradient(var(--ring-color) calc(var(--ring-percent) * 1%), rgba(255, 255, 255, 0.07) 0);
    box-shadow: 0 0 24px color-mix(in srgb, var(--ring-color) 30%, transparent);
    animation: ringPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.calendar-ring::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--charcoal);
}

.calendar-ring-center {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.calendar-ring-value {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: -0.5px;
}

.calendar-ring-label {
    font-size: 0.55rem;
    color: var(--accent-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calendar-pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calendar-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    background: var(--dark-gray);
    border: 1px solid var(--steel);
    border-radius: 20px;
    min-width: 110px;
}

.calendar-pill-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 900;
    color: white;
    flex-shrink: 0;
}

.pill-success .calendar-pill-icon {
    background: linear-gradient(135deg, #2ECC71, #27AE60);
}

.pill-fail .calendar-pill-icon {
    background: linear-gradient(135deg, #E74C3C, #C0392B);
}

.calendar-pill-value {
    font-size: 1rem;
    font-weight: 800;
    color: var(--accent);
}

.calendar-pill-label {
    font-size: 0.62rem;
    color: var(--accent-dark);
    text-transform: uppercase;
}

@keyframes ringPop {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Message motivationnel */
.calendar-motivation {
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.1), transparent);
    border-left: 3px solid #2ECC71;
    border-radius: 0 8px 8px 0;
    font-size: 0.8rem;
    color: var(--accent);
    font-style: italic;
}

.calendar-motivation.warning {
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.1), transparent);
    border-left-color: #E74C3C;
}

/* Animation d'apparition des jours */
@keyframes dayPop {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.calendar-day {
    animation: dayPop 0.3s ease-out backwards;
}

/* Responsive */
@media (max-width: 400px) {
    .modal-calendar {
        padding: 15px;
    }

    .calendar-legend {
        gap: 10px;
        flex-wrap: wrap;
    }

    .legend-item {
        font-size: 0.6rem;
    }

    .calendar-day {
        font-size: 0.55rem;
    }

    .calendar-ring-wrap {
        gap: 14px;
    }

    .calendar-ring {
        width: 90px;
        height: 90px;
    }

    .calendar-ring-value {
        font-size: 1.3rem;
    }

    .calendar-pill {
        min-width: 90px;
        padding: 6px 10px 6px 6px;
    }
}

/* ============================================================ */
/* STYLES POUR LA PAGE TODAY (MODULE)                           */
/* ============================================================ */

.score-value {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--accent);
    text-shadow: 0 0 20px rgba(245, 245, 240, 0.3);
}

/* Liste des habitudes */

.habit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.habit-item:hover {
    border-color: var(--accent-dark);
    transform: translateX(5px);
}

.habit-item.completed {
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.15), var(--charcoal));
    border-color: #2ECC71;
}

.habit-item.locked {
    opacity: 0.6;
    pointer-events: none;
}

.habit-icon {
    font-size: 1.5rem;
}

.habit-name {
    font-size: 1rem;
    color: var(--accent);
    font-weight: 500;
}

/* Bouton de validation */

.validate-btn.validated {
    background: linear-gradient(135deg, #27AE60 0%, #1E8449 100%);
    border-color: #27AE60;
    color: #fff;
    animation: none;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(46, 204, 113, 0.4);
    }
    50% {
        box-shadow: 0 0 35px rgba(46, 204, 113, 0.7);
    }
}

/* Banner de journée validée */

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

@keyframes successPop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

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

/* Animation confettis */
@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.confetti {
    animation: confettiFall 3s linear forwards;
}

/* ============================================================
   SYSTÈME DE RANGS PERSONNALISABLES
   ============================================================ */

/* Bouton d'édition des rangs */

/* Conteneur des boutons d'édition */

.rank-edit-buttons .modal-btn {
    flex: 1;
    padding: 12px;
    font-size: 0.9rem;
}

/* ============================================================
   SÉLECTEUR DE PALETTE DE COULEURS (GRILLE RESPONSIVE)
   ============================================================ */

.palette-selector {
    background: var(--charcoal);
    border: 1px solid var(--steel);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
}

.palette-selector-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.palette-icon {
    font-size: 1.2rem;
}

.palette-label {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--accent);
    letter-spacing: 1px;
}

/* Grille des palettes */
.palette-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Carte de palette individuelle */
.palette-card {
    background: var(--dark-gray);
    border: 2px solid var(--steel);
    border-radius: 10px;
    padding: 12px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.palette-card:hover {
    border-color: var(--accent-dim);
    transform: translateY(-2px);
}

.palette-card:active {
    transform: scale(0.98);
}

.palette-card.selected {
    border-color: var(--accent);
    background: rgba(245, 245, 240, 0.08);
    box-shadow: 0 0 0 1px var(--accent);
}

.palette-card.selected::before {
    content: '✓';
    position: absolute;
    top: 5px;
    right: 8px;
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: bold;
}

/* Couleurs de la palette */
.palette-card-colors {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

.palette-card-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* Nom de la palette */
.palette-card-name {
    font-size: 0.65rem;
    color: var(--accent-dim);
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palette-card.selected .palette-card-name {
    color: var(--accent);
}

/* Étoile recommandée */
.palette-recommended {
    position: absolute;
    top: 5px;
    left: 8px;
    font-size: 0.7rem;
    color: #FFD700;
}

/* Responsive - 3 colonnes sur écrans moyens */
@media (min-width: 400px) {
    .palette-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .palette-card-dot {
        width: 16px;
        height: 16px;
    }
}

/* Responsive - 4 colonnes sur grands écrans */
@media (min-width: 500px) {
    .palette-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Responsive - petits écrans */
@media (max-width: 320px) {
    .palette-card {
        padding: 10px 8px;
    }

    .palette-card-dot {
        width: 14px;
        height: 14px;
    }

    .palette-card-name {
        font-size: 0.6rem;
    }
}

/* ============================================================
   CARTE DE RANG EN MODE ÉDITION
   ============================================================ */

/* Carte de rang en mode édition */
.rank-edit-card {
    padding: 12px !important;
}

.rank-edit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Aperçu de couleur du rang */
.rank-color-preview {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Input pour le nom du rang */
.rank-name-input {
    flex: 1;
    min-width: 100px;
    background: var(--charcoal);
    border: 1px solid;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rank-name-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(245, 245, 240, 0.2);
}

/* Score fixe (non modifiable) */
.rank-score-fixed {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 10px;
    background: var(--dark-gray);
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0.8;
}

/* Responsive pour petits écrans */
@media (max-width: 360px) {
    .rank-edit-row {
        flex-direction: column;
        align-items: stretch;
    }

    .rank-name-input {
        width: 100%;
    }

    .rank-score-edit {
        justify-content: center;
    }

    .palette-color-dot {
        width: 24px;
        height: 24px;
    }
}

/* ============================================================
   SCHEDULE PICKER - Sélecteur de planification
   ============================================================ */

/* Conteneur des boutons de type de planification */
.schedule-type-picker {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.schedule-type-btn {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--steel);
    border-radius: 12px;
    background: var(--charcoal);
    color: var(--accent-dim);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.schedule-type-btn:hover {
    border-color: var(--accent-dark);
}

.schedule-type-btn.active {
    border-color: var(--accent);
    background: var(--steel);
    color: var(--accent);
}

/* Sélecteur de jours de la semaine */
.days-of-week-picker {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
    padding: 12px 8px;
    background: rgba(255,255,255,0.02);
    border-radius: 14px;
}

.day-checkbox {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 2px solid var(--steel);
    background: var(--charcoal);
    color: var(--accent-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.day-checkbox:hover {
    border-color: var(--accent-dark);
    transform: scale(1.05);
}

.day-checkbox.selected {
    border-color: var(--accent-green);
    background: rgba(25, 230, 57, 0.2);
    color: var(--accent-green);
}

/* Version mini pour la gestion des habitudes existantes */

.schedule-type-btn-mini {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--steel);
    border-radius: 8px;
    background: var(--dark-gray);
    color: var(--accent-dim);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.schedule-type-btn-mini:hover {
    border-color: var(--accent-dark);
}

.schedule-type-btn-mini.active {
    border-color: var(--accent);
    background: var(--steel);
    color: var(--accent);
}

.day-checkbox-mini.selected {
    border-color: var(--accent-green);
    background: rgba(25, 230, 57, 0.15);
    color: var(--accent-green);
}

/* Responsive pour le schedule picker */
@media (max-width: 400px) {
    .schedule-type-picker {
        flex-direction: column;
    }

    .day-checkbox {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }

    .day-checkbox-mini {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }
}

/* ============================================================ */
/* SYSTÈME DE BADGES D'ACHIEVEMENTS */
/* ============================================================ */

/* ============================================================
   BADGES — Family cards with tier system
   ============================================================ */

.badges-title {
    font-size: 1rem;
    font-weight: 900;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.badges-title svg {
    width: 20px;
    height: 20px;
}

.badges-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--accent-dim);
    font-weight: 600;
}

.progress-bar-small {
    flex: 1;
    height: 8px;
    background: var(--charcoal);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--steel);
}

.progress-fill-small {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-green), #27AE60);
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(25, 231, 57, 0.5);
}

/* Badge family grid */
.badges-families {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 15px;
    perspective: 1000px;
}

.badge-family-card {
    position: relative;
    background: var(--dark-gray);
    border: 1px solid var(--steel);
    border-radius: 14px;
    padding: 14px 8px 12px;
    text-align: center;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    opacity: 1;
}

.badge-family-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
    border-color: var(--accent);
}

/* Premium — gold reflection sweep */
.badge-family-card--gold::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 215, 0, 0) 30%,
        rgba(255, 215, 0, 0.35) 50%,
        rgba(255, 215, 0, 0) 70%,
        transparent 100%
    );
    transform: skewX(-20deg);
    animation: badgeGoldSweep 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes badgeGoldSweep {
    0% { left: -60%; }
    35%, 100% { left: 130%; }
}

.badge-family-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    opacity: 0.8;
}

.badge-family-icon {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.badge-family-card:hover .badge-family-icon {
    transform: rotateY(360deg) scale(1.2);
}

.badge-family-icon svg {
    width: 32px;
    height: 32px;
}

/* Animation super mega stylée (Pop-in staggered) */
@keyframes badge-pop-in {
    0% {
        transform: scale(0.5) translateY(40px) rotateX(-30deg);
        opacity: 0;
        filter: brightness(2) blur(10px);
    }
    60% {
        transform: scale(1.1) translateY(-10px) rotateX(10deg);
        opacity: 1;
        filter: brightness(1.2) blur(0);
    }
    100% {
        transform: scale(1) translateY(0) rotateX(0);
        opacity: 1;
        filter: brightness(1);
    }
}

.badge-animate {
    opacity: 0;
    animation: badge-pop-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.badge-family-name {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.badge-family-tier {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

/* Tier dots row */
.badge-tier-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
}

.badge-tier-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--steel);
    transition: all 0.3s ease;
}

.badge-tier-dot.achieved {
    box-shadow: 0 0 8px currentColor;
}

.badge-family-desc {
    font-size: 0.65rem;
    color: var(--accent-dim);
    margin-bottom: 12px;
    line-height: 1.3;
    opacity: 0.8;
}

.badge-family-progress {
    width: 100%;
}

.badge-progress-bar {
    height: 5px;
    background: var(--steel);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 5px;
}

.badge-progress-fill {
    height: 100%;
    transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.badge-progress-label {
    font-size: 0.6rem;
    color: var(--accent-dim);
    font-weight: 700;
}

.badge-tier-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--steel);
    border: 1px solid var(--charcoal);
    transition: all 0.3s ease;
}

.badge-tier-dot.achieved {
    border: none;
    transform: scale(1.1);
}

.badge-family-desc {
    font-size: 0.6rem;
    color: var(--accent-dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

/* Progress bar inside badge card */
.badge-family-progress {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.badge-progress-bar {
    height: 5px;
    background: var(--charcoal);
    border-radius: 5px;
    overflow: hidden;
}

.badge-progress-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}

.badge-progress-label {
    font-size: 0.6rem;
    color: var(--accent-dark);
    font-weight: 600;
    text-align: right;
}

/* Responsive badges */
@media (max-width: 600px) {
    .badges-families {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 8px;
    }

    .badge-family-icon svg {
        width: 26px;
        height: 26px;
    }

    .badge-family-name {
        font-size: 0.6rem;
    }

    .badge-family-card {
        padding: 10px 6px 10px;
        border-radius: 12px;
    }

    .badge-family-desc {
        display: none;
    }
}

/* ============================================================
   Badge Detail Modal
   ============================================================ */

.bdm-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.bdm-modal {
    background: var(--dark-gray);
    border: 1px solid var(--steel);
    border-radius: 20px;
    width: 100%;
    max-width: 380px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.3s ease;
}

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

.bdm-close {
    position: absolute;
    top: 12px; right: 12px;
    background: none;
    border: none;
    color: var(--accent-dark);
    cursor: pointer;
    padding: 4px;
}

.bdm-close svg { width: 20px; height: 20px; }

.bdm-header {
    text-align: center;
    padding: 28px 20px 16px;
    border-bottom: 1px solid var(--steel);
}

.bdm-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.bdm-icon svg {
    width: 48px;
    height: 48px;
}

.bdm-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.bdm-rank {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 2px;
}

.bdm-value {
    font-size: 0.75rem;
    color: var(--accent-dark);
    margin-top: 6px;
}

.bdm-tiers {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bdm-tier-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--charcoal);
    border: 1px solid transparent;
    opacity: 0.4;
    transition: all 0.2s ease;
}

.bdm-tier-row.achieved {
    opacity: 1;
    background: var(--charcoal);
}

.bdm-tier-row.current {
    border-color: var(--steel);
    opacity: 1;
}

.bdm-tier-row.next {
    opacity: 0.8;
    border: 1px dashed var(--steel);
}

.bdm-tier-dot {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--steel);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bdm-tier-dot svg {
    width: 14px;
    height: 14px;
}

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

.bdm-tier-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bdm-tier-threshold {
    font-size: 0.65rem;
    color: var(--accent-dark);
    margin-top: 1px;
}

.bdm-tier-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.bdm-tier-bar {
    flex: 1;
    height: 4px;
    background: var(--steel);
    border-radius: 4px;
    overflow: hidden;
}

.bdm-tier-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.bdm-tier-pct {
    font-size: 0.6rem;
    color: var(--accent-dark);
    font-weight: 600;
    white-space: nowrap;
}

.bdm-tier-check {
    display: none; /* already shown in dot */
}

/* Legacy compat */

/* Thème clair pour badges */

[data-theme="light"] .badge-family-card {
    background: var(--dark-gray);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .badge-card.unlocked:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Modal de confirmation - Doit être au-dessus du tutoriel */
#confirmModal {
    z-index: 35000 !important;
}

/* Assurer que les modals restent visibles en thème clair */
[data-theme="light"] .modal-overlay {
    background: rgba(255, 255, 255, 0.95);
    z-index: 25000 !important;
}

[data-theme="light"] #confirmModal {
    z-index: 35000 !important;
}

[data-theme="light"] .modal-calendar {
    background: var(--dark-gray);
    border: 2px solid var(--steel);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* ============================================================ */
/* PAGE PROFIL */
/* ============================================================ */

.profile-container {
    padding: 20px 15px;
}

/* Avatar Picker */
.avatar-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    padding: 15px 0;
}

.avatar-option {
    font-size: 1.8rem;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--charcoal);
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.avatar-option:hover {
    border-color: var(--steel);
    transform: scale(1.1);
}

.avatar-option.selected {
    border-color: var(--accent);
    background: var(--dark-gray);
}

/* Responsive avatar grid */
@media (max-width: 480px) {
    .avatar-picker-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ============================================================
   GROUPS STYLES
   ============================================================ */

.groups-container {
    padding: 15px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 130px);
}
.groups-list:has(.app-loader) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.groups-header {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

/* Group cards */
/* ===== GROUP CARDS — Premium Redesign ===== */
.group-card {
    position: relative;
    background: linear-gradient(145deg, rgba(30,30,30,0.95), rgba(18,18,18,0.9));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
}
.group-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2ECC71, #27AE60);
    opacity: 0.6;
}

.group-card:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.group-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.group-card-name {
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-card-count {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent-dim);
    background: rgba(255,255,255,0.05);
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

.group-card-avatars {
    display: flex;
    gap: 0;
    margin-bottom: 4px;
}

.group-card-avatar {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 2px solid rgba(20,20,20,0.9);
    border-radius: 50%;
    overflow: hidden;
    margin-left: -6px;
}
.group-card-avatar:first-child { margin-left: 0; }

.group-card-avatar-more {
    font-size: 0.65rem;
    font-weight: 700;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(46,204,113,0.12);
    border: 2px solid rgba(20,20,20,0.9);
    border-radius: 50%;
    color: #2ECC71;
    margin-left: -6px;
}

/* Group empty state */
.group-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--accent-dim);
}

.group-empty-icon {
    margin-bottom: 16px;
    opacity: 0.4;
    display: flex;
    justify-content: center;
}

/* Group detail */
.group-detail {
    padding: 5px 0;
}

.group-detail-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

.group-detail-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    min-width: 0;
    min-height: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    color: var(--accent-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.group-detail-close-btn:hover {
    background: rgba(255, 70, 70, 0.12);
    border-color: rgba(255, 70, 70, 0.3);
    color: #FF5050;
}

.group-detail-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--accent);
    margin: 0 0 6px;
}

.group-detail-desc {
    font-size: 0.85rem;
    color: var(--accent-dim);
    margin: 0 0 12px;
}

.group-code-section {
    margin: 14px 0;
}

.group-code {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    border-radius: 10px;
    padding: 10px 18px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.group-code:hover {
    border-color: var(--accent-dim);
}

.group-code-value {
    font-family: monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 4px;
}

.group-code-copy {
    font-size: 1.1rem;
}

/* Group habits */
.group-detail-habits {
    margin-bottom: 20px;
    background: transparent;
}

.group-habits-panel {
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
    border: 1px solid var(--steel);
    box-shadow: 0 10px 28px rgba(0,0,0,0.14);
}

.group-habits-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.group-habits-count {
    font-size: 0.8rem;
    color: var(--accent-dim);
}

.group-habits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
}

.group-habit-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--steel);
    border-radius: 12px;
    background: var(--charcoal);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 4px 12px rgba(0,0,0,0.12);
}

.group-habit-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 6px rgba(46,204,113,0.15);
}

.group-habit-pill-name {
    font-size: 0.9rem;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-habits-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--accent-dim);
    padding: 10px 0;
    font-size: 0.85rem;
}

[data-theme="light"] .group-habits-panel {
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.65));
    border-color: #dbe2ea;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

[data-theme="light"] .group-habit-pill {
    background: #f7f9fb;
    border-color: #dbe2ea;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

[data-theme="light"] .group-habit-dot {
    box-shadow: 0 0 0 6px rgba(46,204,113,0.18);
}

/* Group members list */
.group-members-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--steel);
}

.group-members-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.group-show-more-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    margin-bottom: 16px;
    background: rgba(25, 230, 57, 0.06);
    border: 1px solid rgba(25, 230, 57, 0.18);
    border-radius: 8px;
    color: var(--accent-green, #19E639);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}
.group-show-more-banner:hover {
    background: rgba(25, 230, 57, 0.12);
    border-color: rgba(25, 230, 57, 0.35);
}

.group-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--charcoal);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}

.group-member-me {
    border-color: var(--accent-dim);
}

.group-member-position {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-dim);
    min-width: 20px;
    text-align: center;
}

.group-member-avatar {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}

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

.group-member-pseudo {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-member-rank {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.group-member-score {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 40px;
    text-align: right;
}

.group-detail-actions {
    text-align: center;
    padding-top: 10px;
}

/* ===== Group Danger Button — Premium Redesign ===== */
.group-danger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(231,76,60,0.08), rgba(231,76,60,0.02));
    border: 1px solid rgba(231,76,60,0.2);
    border-radius: 14px;
    color: #E74C3C;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 2px 8px rgba(231,76,60,0.08);
}
.group-danger-btn:active {
    transform: scale(0.97);
    background: rgba(231,76,60,0.15);
    box-shadow: 0 0 16px rgba(231,76,60,0.15);
}

/* Habits selection in create modal */
.group-habits-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.group-habits-counter {
    padding: 4px 12px;
    border: 1px solid var(--steel);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--accent-dim);
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}

.group-habits-select {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--steel);
    border-radius: 12px;
    padding: 10px;
    background: var(--charcoal);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.group-habit-card {
    display: block;
    position: relative;
}

.group-habit-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    inset: 0;
}

.group-habit-card-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border: 1px solid var(--steel);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.group-habit-card:hover .group-habit-card-inner {
    border-color: var(--accent);
    background: rgba(255,255,255,0.03);
    transform: translateY(-1px);
}

.group-habit-card.selected .group-habit-card-inner {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(46,204,113,0.12), rgba(46,204,113,0.05));
    box-shadow: 0 8px 20px rgba(46,204,113,0.2);
}

.group-habit-card.focus .group-habit-card-inner {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.group-habit-check {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--steel);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-dim);
    background: rgba(255,255,255,0.01);
    transition: all 0.18s ease;
}

.group-habit-card.selected .group-habit-check {
    background: var(--accent);
    color: #0f1320;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(46,204,113,0.18);
}

.group-habit-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.group-habit-icon {
    font-size: 1.2rem;
}

.group-habit-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.group-habit-name {
    font-size: 0.9rem;
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-habit-sub {
    font-size: 0.78rem;
    color: var(--accent-dim);
}

/* Profile groups section */

/* Nav label size for 5 items */
.bottom-nav .nav-item .label {
    font-size: 0.55rem;
}

/* ============================================================ */
/* MICRO-INTERACTIONS & POLISH                                  */
/* ============================================================ */

/* Buttons - micro-interactions */
button, .modal-btn, .auth-btn, .settings-btn, .form-btn, .validate-day-btn {
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

button:active, .modal-btn:active, .auth-btn:active, .settings-btn:active, .form-btn:active {
    transform: scale(0.95);
    opacity: 0.85;
}

/* Cards - hover lift */
.stat-card, .kpi-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover, .kpi-card:hover {
    transform: translateY(-2px);
}

/* Chart wrapper improvements */
.chart-wrapper {
    background: var(--charcoal);
    border: 1px solid var(--steel);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================================ */
/* SKELETON LOADER                                              */
/* ============================================================ */

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

/* ============================================================ */
/* PULL-TO-REFRESH VISUAL INDICATOR                             */
/* ============================================================ */

.pull-indicator {
    text-align: center;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    color: var(--accent-dark);
    font-size: 0.75rem;
}

.pull-indicator.visible {
    max-height: 40px;
    padding: 10px 0;
    opacity: 1;
}

.pull-indicator .pull-icon {
    display: inline-block;
    animation: pullSpin 1s linear infinite;
}

@keyframes pullSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================================ */
/* LIGHT THEME - COMPREHENSIVE IMPROVEMENTS                     */
/* ============================================================ */

/* Bottom nav in light mode */
[data-theme="light"] .bottom-nav {
    background: var(--black);
    border-top: 1px solid var(--steel);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .nav-item.active {
    background: var(--charcoal);
}

/* Inputs in light mode */
[data-theme="light"] .auth-form input,
[data-theme="light"] .form-group input[type="text"],
[data-theme="light"] .form-group textarea,
[data-theme="light"] .habit-name-input,
[data-theme="light"] .habit-desc-input,
[data-theme="light"] #editPseudoInput,
[data-theme="light"] #editBioInput,
[data-theme="light"] #setupPseudoInput,
[data-theme="light"] #deleteAccountInput,
[data-theme="light"] #joinGroupCode,
[data-theme="light"] #createGroupName,
[data-theme="light"] #createGroupDesc {
    background: var(--dark-gray);
    border-color: var(--steel);
    color: var(--accent);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .auth-form input:focus,
[data-theme="light"] .form-group input[type="text"]:focus,
[data-theme="light"] .form-group textarea:focus,
[data-theme="light"] .habit-name-input:focus,
[data-theme="light"] .habit-desc-input:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.15);
}

/* Buttons in light mode */
[data-theme="light"] .auth-btn {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .modal-btn.save {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .modal-btn.cancel {
    background: var(--charcoal);
    border: 1px solid var(--steel);
}

/* Cards depth in light mode */

[data-theme="light"] .stat-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Chart wrapper light mode */
[data-theme="light"] .chart-wrapper {
    background: var(--dark-gray);
    border-color: var(--steel);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .habit-progress-track {
    background: rgba(0, 0, 0, 0.07);
}

/* Date nav light mode */

/* Group cards light mode */
[data-theme="light"] .group-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .group-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Profile in light mode */

/* Weekly grid light mode */
[data-theme="light"] .weekly-day {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Toast in light mode */
[data-theme="light"] .toast {
    background: var(--dark-gray);
    border-color: var(--steel);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* Skeleton in light mode */

/* Ripple effect in light mode */
[data-theme="light"] .habit-item::after {
    background: rgba(0, 0, 0, 0.06);
}

/* Badge cards in light mode */

/* Settings in light mode - additional contrast */
[data-theme="light"] .settings-category {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-image: none;
    border: 1px solid var(--steel);
    border-radius: 8px;
    clip-path: none;
}

[data-theme="light"] .settings-btn {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Add habit section in light mode */
[data-theme="light"] .add-habit-section {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Group habit select in light mode */
[data-theme="light"] .group-habits-select {
    background: #f7f9fb;
    border-color: #dbe2ea;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .group-habit-card-inner {
    background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
    border-color: #dbe2ea;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .group-habit-card.selected .group-habit-card-inner {
    background: linear-gradient(135deg, rgba(46,204,113,0.2), rgba(46,204,113,0.08));
    border-color: #2ecc71;
}

[data-theme="light"] .group-habit-check {
    border-color: #c5d0de;
    color: #4a5568;
}

[data-theme="light"] .group-habit-card.selected .group-habit-check {
    color: #0f1320;
}

[data-theme="light"] .group-habits-counter {
    background: #ffffff;
    border-color: #dbe2ea;
    color: #4a5568;
}

/* ============================================================ */
/* PWA INSTALL BANNER                                           */
/* ============================================================ */

.install-banner.visible {
    transform: translateY(0);
}

.install-banner-btn.dismiss {
    background: var(--charcoal);
    color: var(--accent-dim);
    border: 1px solid var(--steel);
}

.install-banner-btn.dismiss:hover {
    background: var(--steel);
    color: var(--accent);
}

.install-banner-btn.install {
    background: var(--accent-green);
    color: var(--black);
}

.install-banner-btn.install:hover {
    box-shadow: 0 0 15px rgba(25, 230, 57, 0.3);
}

/* iOS Install Banner */
.ios-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--charcoal);
    border-top: 1px solid var(--steel);
    border-radius: 20px 20px 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.6);
}
.ios-install-banner.visible {
    transform: translateY(0);
}
.ios-install-banner-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.ios-install-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}
.ios-install-banner-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--accent);
}
.ios-install-banner-sub {
    font-size: 0.75rem;
    color: var(--accent-dark);
    margin-top: 2px;
}
.ios-install-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.ios-install-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--accent-dim);
}
.ios-install-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--steel);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ios-install-step svg {
    color: var(--accent-dim);
    flex-shrink: 0;
}
.ios-install-arrow {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
}
.ios-install-dismiss {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid var(--steel);
    color: var(--accent-dark);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================================ */
/* SHARE DAY BUTTON                                             */
/* ============================================================ */

/* Light theme */

/* FORCE SCROLLABILITY - GLOBAL OVERRIDE */
html {
    height: 100% !important;
    overflow: hidden !important;
}
body {
    height: 100% !important;
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
}
.page {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
}
.page:not(.active) {
    display: none !important;
}

/* ============================================================ */
/* HEATMAP (style GitHub)                                       */
/* ============================================================ */
.heatmap-grid { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; gap: 3px; }
.heatmap-cell { width: 12px; height: 12px; border-radius: 2px; cursor: pointer; transition: transform 0.15s; }
.heatmap-cell:hover { transform: scale(1.5); z-index: 1; }
.heatmap-tooltip { position: absolute; background: var(--dark-gray); border: 1px solid var(--steel); padding: 6px 10px; border-radius: 6px; font-size: 0.75rem; pointer-events: none; z-index: 100; white-space: nowrap; color: var(--accent); }
.heatmap-months { display: flex; gap: 3px; margin-bottom: 6px; font-size: 0.65rem; color: var(--accent-dim); }

/* Fix: Overlay invisible bloquant le scroll */
.modal-overlay, .levelup-overlay, .celebration-overlay {
    pointer-events: none !important;
}
.modal-overlay.active, .levelup-overlay.active, .celebration-overlay.active {
    pointer-events: auto !important;
}

.celebration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 50000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.celebration-overlay.active {
    display: flex;
    opacity: 1;
}

.celebration-content {
    text-align: center;
    animation: celebrationIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.celebration-icon {
    font-size: 5rem;
    animation: celebrationBounce 1s ease-in-out infinite;
    filter: drop-shadow(0 0 20px currentColor);
}

.celebration-title {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 3px;
    margin-top: 20px;
    text-shadow: 0 0 30px currentColor;
}

.celebration-subtitle {
    font-size: 1.1rem;
    color: var(--accent-dim);
    margin-top: 10px;
    font-weight: 600;
}

@keyframes celebrationIn {
    from { opacity: 0; transform: scale(0.3) rotate(-10deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes celebrationBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.1); }
}

/* ============================================================ */
/* LEVEL UP OVERLAY — ÉPIQUE RPG                                */
/* ============================================================ */

.levelup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 60000;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

.levelup-overlay.active {
    display: flex;
    animation: levelupOverlayIn 0.5s ease forwards;
}

.levelup-overlay.closing {
    animation: levelupOverlayOut 0.5s ease forwards;
}

@keyframes levelupOverlayIn {
    from {
        background: rgba(0, 0, 0, 0.0);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }
    to {
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

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

.levelup-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.levelup-content {
    position: relative;
    z-index: 2;
    text-align: center;
    animation: levelupContentIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    animation-delay: 0.1s;
    opacity: 0;
}

@keyframes levelupContentIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(40px);
    }
    70% {
        transform: scale(1.1) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.levelup-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    animation: levelupFlashPulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes levelupFlashPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
}

.levelup-title {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 6px;
    color: #FFD700;
    text-shadow:
        0 0 20px rgba(255, 215, 0, 0.8),
        0 0 40px rgba(255, 215, 0, 0.5),
        0 0 80px rgba(255, 215, 0, 0.3);
    animation: levelupTitleGlow 1.2s ease-in-out infinite alternate;
    margin-bottom: 15px;
}

@keyframes levelupTitleGlow {
    from {
        text-shadow:
            0 0 20px rgba(255, 215, 0, 0.8),
            0 0 40px rgba(255, 215, 0, 0.5),
            0 0 80px rgba(255, 215, 0, 0.3);
        transform: scale(1);
    }
    to {
        text-shadow:
            0 0 30px rgba(255, 215, 0, 1),
            0 0 60px rgba(255, 215, 0, 0.7),
            0 0 100px rgba(255, 215, 0, 0.4),
            0 0 150px rgba(255, 215, 0, 0.2);
        transform: scale(1.05);
    }
}

.levelup-level-container {
    margin: 20px 0 30px;
}

.levelup-label {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: rgba(255, 215, 0, 0.6);
    margin-bottom: 5px;
}

.levelup-number {
    font-size: 6rem;
    font-weight: 900;
    color: #FFF;
    text-shadow:
        0 0 30px rgba(255, 215, 0, 0.6),
        0 0 60px rgba(255, 215, 0, 0.3);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.levelup-xp-bar {
    width: 220px;
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    margin: 0 auto 25px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.levelup-xp-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #FFD700, #FFA500, #FFD700);
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.levelup-tap {
    font-size: 0.75rem;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.4);
    animation: levelupTapPulse 2s ease-in-out infinite;
}

@keyframes levelupTapPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* ============================================================ */
/* SPLASH SCREEN                                                */
/* ============================================================ */

.splash-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #0A0A0A;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
}
.splash-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}
.splash-logo {
    width: 100px;
    height: 100px;
}
@keyframes splashDraw {
    to { stroke-dashoffset: 0; }
}
@keyframes splashCircleLoad {
    0% { stroke-dasharray: 10 273; stroke-dashoffset: 283; }
    100% { stroke-dasharray: 283 0; stroke-dashoffset: 0; }
}

/* ============================================================ */
/* ONBOARDING OVERLAY                                           */
/* ============================================================ */

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

.onboarding-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 20px;
}
.onboarding-overlay.active {
    display: flex;
}
.onboarding-dot.active {
    background: var(--accent-green);
    transform: scale(1.3);
}
.onboarding-btn.primary {
    background: var(--accent);
    color: var(--black);
}
.onboarding-btn.secondary {
    background: var(--charcoal);
    color: var(--accent-dim);
}

/* ============================================================ */
/* CATEGORY PICKER & FILTERS                                    */
/* ============================================================ */
.category-option {
    padding: 6px 12px;
    border-radius: 20px;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    color: var(--accent-dim);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.category-option.active {
    background: var(--accent);
    color: var(--black);
    border-color: var(--accent);
}
.category-filter {
    padding: 5px 12px;
    border-radius: 16px;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    color: var(--accent-dim);
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.category-filter.active {
    background: var(--accent-green);
    color: var(--black);
    border-color: var(--accent-green);
}

/* Light theme variants for categories & onboarding */
[data-theme="light"] .category-option {
    background: var(--dark-gray);
    border-color: var(--steel);
    color: var(--accent-dim);
}
[data-theme="light"] .category-option.active {
    background: var(--accent);
    color: var(--dark-gray);
    border-color: var(--accent);
}
[data-theme="light"] .category-filter {
    background: var(--dark-gray);
    border-color: var(--steel);
    color: var(--accent-dim);
}
[data-theme="light"] .category-filter.active {
    background: var(--accent-green);
    color: var(--dark-gray);
    border-color: var(--accent-green);
}
[data-theme="light"] .onboarding-overlay {
    background: rgba(255, 255, 255, 0.95);
}

/* ============================================================ */
/* ONBOARDING AMÉLIORÉ - Création d'habitudes                   */
/* ============================================================ */

.habit-onboarding-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 5, 0.97);
    z-index: 30000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.habit-onboarding-overlay.active {
    display: flex;
    opacity: 1;
}

.onb-container {
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.onb-container::-webkit-scrollbar {
    display: none;
}

/* Dots navigation */
.onb-dots {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.onb-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--steel);
    transition: all 0.3s ease;
}

.onb-dot.active {
    background: var(--accent);
    box-shadow: 0 0 10px rgba(245, 245, 240, 0.4);
    transform: scale(1.2);
}

/* Steps container */
.onb-steps-container {
    width: 100%;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.onb-steps-container.slide-out-left {
    transform: translateX(-30px);
    opacity: 0;
}
.onb-steps-container.slide-in-right {
    animation: slideInRight 0.4s ease forwards;
}
.onb-steps-container.slide-out-right {
    transform: translateX(30px);
    opacity: 0;
}
.onb-steps-container.slide-in-left {
    animation: slideInLeft 0.4s ease forwards;
}

@keyframes slideInRight {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInLeft {
    from { transform: translateX(-30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Step content */
.onb-step {
    text-align: center;
    width: 100%;
}

.onb-big-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    animation: onbIconPulse 2s ease-in-out infinite;
}

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

.onb-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--accent);
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.onb-subtitle {
    font-size: 1rem;
    color: var(--accent-dim);
    margin-bottom: 20px;
}

.onb-text {
    font-size: 0.9rem;
    color: var(--accent-dark);
    line-height: 1.6;
    margin-bottom: 30px;
    padding: 0 10px;
}

/* CTA Button */
.onb-cta-btn {
    display: inline-block;
    padding: 16px 40px;
    background: linear-gradient(135deg, #19E639, #0DBF2F);
    color: #0A0A0A;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(25, 230, 57, 0.3);
    position: relative;
    overflow: hidden;
}

.onb-cta-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.onb-cta-btn:hover::before {
    left: 100%;
}

.onb-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(25, 230, 57, 0.4);
}

.onb-cta-btn:active {
    transform: scale(0.97);
}

.onb-cta-btn.disabled {
    background: var(--steel);
    color: var(--accent-dark);
    box-shadow: none;
    cursor: not-allowed;
}

.onb-cta-btn.disabled:hover {
    transform: none;
    box-shadow: none;
}

.onb-cta-btn.disabled::before {
    display: none;
}

.onb-cta-btn.shake {
    animation: onbShake 0.5s ease;
}

@keyframes onbShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Animation de lancement */
.onb-cta-btn.onb-launching {
    animation: onbLaunchPulse 0.4s ease forwards;
    box-shadow: 0 0 40px rgba(25, 230, 57, 0.8), 0 0 80px rgba(25, 230, 57, 0.4);
}

@keyframes onbLaunchPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); box-shadow: 0 0 60px rgba(25,230,57,0.9); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1.05); }
}

@keyframes onbBlastOut {
    0%   { transform: scale(1);    opacity: 1; }
    40%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1.4);  opacity: 0; }
}

.habit-onboarding-overlay.onb-blast-out {
    animation: onbBlastOut 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

/* Particules de lancement */
.onb-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.6rem;
    pointer-events: none;
    animation: onbParticleFloat 0.9s ease-out forwards;
    z-index: 9999;
    transform-origin: center;
}

@keyframes onbParticleFloat {
    0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1);   opacity: 1; }
    60%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.3); opacity: 0; }
}

/* Back button */
.onb-back-btn {
    padding: 12px 24px;
    background: transparent;
    color: var(--accent-dim);
    border: 1px solid var(--steel);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.onb-back-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Templates grid */
.onb-templates-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 20px 0 30px;
    padding: 0 5px;
}

.onb-template-card {
    background: var(--charcoal);
    border: 2px solid var(--steel);
    border-radius: 14px;
    padding: 16px 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-align: center;
    overflow: hidden;
}

.onb-template-card:hover {
    border-color: var(--accent-dim);
    transform: translateY(-2px);
}

.onb-template-card.selected {
    border-color: #19E639;
    background: rgba(25, 230, 57, 0.08);
    box-shadow: 0 0 20px rgba(25, 230, 57, 0.15);
}

.onb-template-card:active {
    transform: scale(0.96);
}

.onb-template-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--steel);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    background: transparent;
}

.onb-template-check svg {
    width: 14px;
    height: 14px;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: white;
}

.onb-template-card.selected .onb-template-check {
    background: #19E639;
    border-color: #19E639;
}

.onb-template-card.selected .onb-template-check svg {
    opacity: 1;
}

.onb-template-icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
}

.onb-template-name {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.onb-template-desc {
    font-size: 0.65rem;
    color: var(--accent-dark);
    line-height: 1.3;
}

/* Custom habit section */
.onb-custom-section {
    margin: 20px 0 24px;
    padding: 0 5px;
}

.onb-custom-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-align: center;
}

.onb-custom-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.onb-custom-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--steel);
    background: var(--charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-dim);
}

.onb-custom-emoji-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--steel);
    background: var(--charcoal);
    font-size: 1.3rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}

.onb-custom-emoji-btn:active {
    transform: scale(0.95);
}

.onb-custom-input {
    flex: 1;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--steel);
    background: var(--charcoal);
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s;
}

.onb-custom-input:focus {
    border-color: var(--accent-green);
}

.onb-custom-input::placeholder {
    color: var(--accent-dim);
    font-weight: 400;
}

.onb-custom-add-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: var(--accent-green);
    color: var(--black);
    font-size: 1.2rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}

.onb-custom-add-btn:active {
    transform: scale(0.9);
}

.onb-custom-add-btn.added {
    background: var(--accent-green);
}

.onb-emoji-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    margin-top: 8px;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    border-radius: 10px;
    justify-content: center;
}

.onb-emoji-option {
    width: 38px;
    height: 38px;
    border: none;
    background: var(--dark-gray);
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.15s;
}

.onb-emoji-option:active {
    transform: scale(0.9);
    background: var(--accent-green);
}

.onb-custom-added {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(25, 230, 57, 0.1);
    border: 1px solid rgba(25, 230, 57, 0.3);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-green);
}

.onb-custom-remove {
    background: none;
    border: none;
    color: var(--accent-dim);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
}

/* Light theme */
[data-theme="light"] .onb-custom-icon,
[data-theme="light"] .onb-custom-emoji-btn,
[data-theme="light"] .onb-custom-input {
    background: #E9ECEF;
    border-color: #DEE2E6;
    color: #212529;
}

[data-theme="light"] .onb-emoji-picker {
    background: #E9ECEF;
    border-color: #DEE2E6;
}

[data-theme="light"] .onb-emoji-option {
    background: #F8F9FA;
}

/* Templates actions */
.onb-templates-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* Recap list */
.onb-recap-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px auto 25px;
    max-width: 300px;
}

.onb-recap-habit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--charcoal);
    border-radius: 10px;
    border-left: 3px solid #19E639;
    animation: onbRecapIn 0.4s ease backwards;
}

.onb-recap-habit:nth-child(1) { animation-delay: 0.1s; }
.onb-recap-habit:nth-child(2) { animation-delay: 0.15s; }
.onb-recap-habit:nth-child(3) { animation-delay: 0.2s; }
.onb-recap-habit:nth-child(4) { animation-delay: 0.25s; }
.onb-recap-habit:nth-child(5) { animation-delay: 0.3s; }
.onb-recap-habit:nth-child(6) { animation-delay: 0.35s; }
.onb-recap-habit:nth-child(7) { animation-delay: 0.4s; }
.onb-recap-habit:nth-child(8) { animation-delay: 0.45s; }

@keyframes onbRecapIn {
    from { opacity: 0; transform: translateX(-15px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Avatar step inside onboarding */
.onb-avatar-grid {
    max-height: 220px;
    flex: none;
    margin-bottom: 16px;
}

.onb-recap-icon {
    font-size: 1.4rem;
}

.onb-recap-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
}

/* Light theme */
[data-theme="light"] .habit-onboarding-overlay {
    background: rgba(248, 249, 250, 0.98);
}

[data-theme="light"] .onb-template-card {
    background: var(--dark-gray);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .onb-template-card.selected {
    background: rgba(25, 135, 84, 0.06);
    border-color: #198754;
    box-shadow: 0 0 20px rgba(25, 135, 84, 0.12);
}

[data-theme="light"] .onb-template-card.selected .onb-template-check {
    background: #198754;
    border-color: #198754;
}

[data-theme="light"] .onb-cta-btn {
    background: linear-gradient(135deg, #198754, #157347);
    box-shadow: 0 4px 20px rgba(25, 135, 84, 0.25);
}

[data-theme="light"] .onb-recap-habit {
    background: var(--dark-gray);
    border-left-color: #198754;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .onb-dot.active {
    background: var(--accent);
    box-shadow: 0 0 8px rgba(33, 37, 41, 0.3);
}

/* Responsive - petit écran */
@media (max-width: 380px) {
    .onb-templates-grid {
        gap: 8px;
    }
    .onb-template-card {
        padding: 12px 8px;
    }
    .onb-template-icon {
        font-size: 1.8rem;
    }
    .onb-title {
        font-size: 1.4rem;
    }
    .onb-big-icon {
        font-size: 3rem;
    }
}

/* ============================================================ */
/* ACCESSIBILITÉ - Focus visible                                */
/* ============================================================ */

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

/* ============================================================ */
/* BARRE XP                                                     */
/* ============================================================ */
.xp-bar {
    height: 14px;
    background: var(--charcoal);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 -1px 2px rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.3);
}
.xp-bar-fill {
    height: 100%;
    background: linear-gradient(180deg, #306EFF 0%, #1034A6 40%, #002D62 100%);
    border-radius: 7px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 15px 2px rgba(48, 110, 255, 0.6);
    position: relative;
    animation: xpPulse 2s ease-in-out infinite;
}

@keyframes xpPulse {
    0%, 100% { box-shadow: 0 0 15px 2px rgba(48, 110, 255, 0.6); }
    50% { box-shadow: 0 0 25px 4px rgba(48, 110, 255, 1); }
}
/* Glossy shine stripe on the fill */
.xp-bar-fill::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    right: 4px;
    height: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent);
    border-radius: 4px;
    pointer-events: none;
}
[data-theme="light"] .xp-bar {
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.12), inset 0 -1px 2px rgba(255,255,255,0.3);
}

/* ============================================================ */
/* ANALYTICS AVANCÉS                                            */
/* ============================================================ */

.analytics-container {
    padding: 0 15px 20px;
}
.analytics-card {
    background: var(--dark-gray);
    border: 1px solid var(--steel);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 12px;
}
.analytics-card-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent-dim);
    margin-bottom: 12px;
    text-transform: uppercase;
}

[data-theme="light"] .analytics-card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ============================================================ */
/* RESPONSIVE STATS PAGE                                        */
/* ============================================================ */

/* --- Small phones (≤360px) --- */
@media (max-width: 360px) {
    /* Rank display */
    .rank-display {
        margin: 10px 8px;
        padding: 14px 10px;
    }
    .rank-display .rank-name {
        font-size: 1.3rem;
    }
    .rank-display .rank-title {
        font-size: 0.6rem;
        letter-spacing: 1px;
    }

    /* KPI cards — stack 1 column */
    .kpi-container {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px 8px;
    }
    .kpi-card {
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }
    .kpi-card .value {
        font-size: 1.3rem;
        margin: 0;
    }
    .kpi-card .label {
        font-size: 0.55rem;
    }
    .kpi-card .sub {
        display: none;
    }

    /* Weekly grid — keep 7 cols but reduce */
    .weekly-grid {
        gap: 3px;
        padding: 10px 8px;
    }
    .weekly-day {
        padding: 6px 2px;
        border-radius: 6px;
    }
    .weekly-day .day-name {
        font-size: 0.5rem;
    }
    .weekly-day .day-score {
        font-size: 0.7rem;
    }

    /* Stats grid — 1 column */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px 8px;
    }
    .stat-card {
        padding: 10px;
    }
    .stat-card .stat-value {
        font-size: 1.3rem;
    }
    .stat-card .stat-label {
        font-size: 0.55rem;
    }

    /* Charts */
    .chart-container {
        padding: 10px 8px;
    }
    .chart-wrapper {
        padding: 10px;
        margin-bottom: 10px;
    }
    .chart-title {
        font-size: 0.7rem;
    }
    canvas {
        max-height: 160px;
    }

    /* Calendar button */
    .calendar-view-btn {
        width: calc(100% - 16px);
        margin: 10px 8px;
        padding: 12px 16px;
        font-size: 0.75rem;
    }

    /* Section titles */
    #page-stats .section-title {
        padding: 10px 8px;
        font-size: 0.75rem;
        letter-spacing: 1px;
    }

    /* Analytics */
    .analytics-container {
        padding: 0 8px 15px;
    }
    .analytics-card {
        padding: 12px;
    }
    .analytics-card-title {
        font-size: 0.7rem;
    }
    .analytics-highlight-label {
        font-size: 0.7rem;
    }
    .analytics-highlight-value {
        font-size: 0.85rem;
    }
}

/* --- Medium phones (361px - 480px) --- */
@media (min-width: 361px) and (max-width: 480px) {
    /* Rank display */
    .rank-display {
        margin: 12px 10px;
        padding: 16px 12px;
    }
    .rank-display .rank-name {
        font-size: 1.6rem;
    }

    /* KPI — 3 cols tighter */
    .kpi-container {
        gap: 8px;
        padding: 12px 10px;
    }
    .kpi-card {
        padding: 10px 6px;
    }
    .kpi-card .value {
        font-size: 1.2rem;
    }
    .kpi-card .label {
        font-size: 0.55rem;
        letter-spacing: 0.5px;
    }
    .kpi-card .sub {
        font-size: 0.5rem;
    }

    /* Weekly grid */
    .weekly-grid {
        gap: 4px;
        padding: 12px 10px;
    }
    .weekly-day {
        padding: 8px 3px;
    }
    .weekly-day .day-name {
        font-size: 0.55rem;
    }
    .weekly-day .day-score {
        font-size: 0.85rem;
    }

    /* Stats grid */
    .stats-grid {
        gap: 8px;
        padding: 12px 10px;
    }
    .stat-card {
        padding: 12px;
    }
    .stat-card .stat-value {
        font-size: 1.5rem;
    }
    .stat-card .stat-label {
        font-size: 0.6rem;
    }

    /* Charts */
    .chart-container {
        padding: 12px 10px;
    }
    .chart-wrapper {
        padding: 12px;
    }
    canvas {
        max-height: 180px;
    }

    /* Calendar button */
    .calendar-view-btn {
        width: calc(100% - 20px);
        margin: 12px 10px;
        padding: 12px 20px;
        font-size: 0.8rem;
    }

    /* Analytics */
    .analytics-container {
        padding: 0 10px 15px;
    }
    .analytics-card {
        padding: 14px;
    }
}

/* --- Ensure charts don't overflow on any mobile --- */
@media (max-width: 600px) {
    .chart-wrapper canvas {
        width: 100% !important;
        height: auto !important;
    }

    /* Badges dans stats */
    #badgesContainer {
        padding: 0 10px;
    }
}

/* ============================================================ */
/* SYSTÈME DE RÉCOMPENSES - THÈMES DÉBLOQUABLES                */
/* ============================================================ */

.reward-theme-card {
    background: var(--charcoal);
    border: 2px solid var(--steel);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.reward-theme-card.unlocked:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: var(--accent-dim);
}

.reward-theme-card.unlocked:active {
    transform: scale(0.97);
}

.reward-theme-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(245, 245, 240, 0.15);
}

.reward-theme-card.selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
}

.reward-theme-card.locked {
    opacity: 0.5;
}

.reward-theme-preview {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.reward-theme-card.unlocked:hover .reward-theme-preview {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.reward-theme-emoji {
    font-size: 1.6rem;
}

.reward-theme-info {
    text-align: center;
}

.reward-theme-name {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.reward-theme-desc {
    font-size: 0.65rem;
    color: var(--accent-dark);
    margin-top: 3px;
}

.reward-theme-check {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 1rem;
    color: var(--accent-green);
    font-weight: bold;
    text-shadow: 0 0 8px currentColor;
}

/* Responsive */
@media (max-width: 360px) {
    .reward-themes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 10px;
    }
    .reward-theme-card {
        padding: 10px;
    }
    .reward-theme-preview {
        width: 44px;
        height: 44px;
    }
    .reward-theme-emoji {
        font-size: 1.2rem;
    }
    .reward-theme-name {
        font-size: 0.75rem;
    }
}

/* Thème reward transitions */
[data-reward-theme] {
    transition: --accent 0.4s ease, --accent-dim 0.4s ease, --accent-dark 0.4s ease, --accent-green 0.4s ease;
}

/* ============================================================ */
/* GROUP TABS (Chat / Classement)                               */
/* ============================================================ */

.group-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 0;
    margin: 0;
    background: transparent;
}

.group-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 50px;
    background: var(--charcoal);
    color: var(--accent-dim);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.group-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    border: 2px solid transparent;
    transition: border-color 0.25s ease;
}

.group-tab.active {
    background: var(--accent);
    color: var(--black);
}

.group-tab.active::before {
    border-color: var(--accent);
}

.group-tab:not(.active):hover {
    background: var(--steel);
    color: var(--accent);
}

.group-tab:active {
    transform: scale(0.97);
}

/* Light theme */
[data-theme="light"] .group-tab {
    background: var(--charcoal);
    color: var(--accent-dim);
}

[data-theme="light"] .group-tab.active {
    background: var(--accent);
    color: var(--dark-gray);
}

[data-theme="light"] .group-tab:not(.active):hover {
    background: var(--steel);
}

.group-tab-content {
    min-height: 100px;
}

/* ============================================================ */
/* LEADERBOARD - CLASSEMENT DES MEMBRES                         */
/* ============================================================ */

/* ── Leaderboard: empty / loading states ── */

.leaderboard-empty {
    text-align: center;
    padding: 30px 15px;
    color: var(--accent-dim);
    font-size: 0.9rem;
}

.leaderboard-empty-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

/* ============================================================ */
/* LEADERBOARD — Gaming-style podium + ranked list              */
/* ============================================================ */

.lb-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 4px 0;
}

/* ── Crown animation ── */

@keyframes lb-crown-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-6px) rotate(2deg); }
}

.lb-crown-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: -4px;
    animation: lb-crown-float 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
}

.lb-crown {
    display: block;
}

/* ── Podium grid: 2nd | 1st | 3rd ── */

.lb-podium {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 8px;
    align-items: end;
    padding: 10px 0 0;
}

.lb-podium-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 14px 8px 0;
    animation: fadeInUp 0.5s ease-out backwards;
}

.lb-podium-1 { animation-delay: 0.15s; }
.lb-podium-2 { animation-delay: 0s; }
.lb-podium-3 { animation-delay: 0.3s; }

/* ── Podium avatar ── */

.lb-podium-avatar {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 3px solid var(--place-color, var(--accent-dim));
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 14px color-mix(in srgb, var(--place-color) 35%, transparent);
    overflow: hidden;
}

.lb-podium-1 .lb-podium-avatar {
    width: 62px;
    height: 62px;
    border-width: 3.5px;
    box-shadow:
        0 0 18px color-mix(in srgb, var(--place-color) 45%, transparent),
        0 0 40px color-mix(in srgb, var(--place-color) 15%, transparent);
}

/* ── Position badge (hex-style) ── */

.lb-podium-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: -14px;
    border-radius: 8px;
    transform: rotate(0deg);
    font-size: 0.7rem;
    font-weight: 900;
    color: #000;
    background: var(--place-color, var(--accent));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--place-color) 50%, transparent);
    position: relative;
    z-index: 2;
}

/* ── Podium text ── */

.lb-podium-name {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1.2;
    word-break: break-word;
    max-width: 100%;
}

.lb-podium-rank {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lb-podium-score {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--place-color, var(--accent));
    line-height: 1;
    text-shadow: 0 0 12px color-mix(in srgb, var(--place-color) 30%, transparent);
}

.lb-podium-streak {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--place-color) 80%, white);
}

/* ── Pedestals ── */

.lb-pedestal {
    width: 100%;
    border-radius: 12px 12px 0 0;
    margin-top: 8px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--place-color) 25%, transparent) 0%,
            color-mix(in srgb, var(--place-color) 8%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--place-color) 30%, transparent);
    border-bottom: none;
    position: relative;
}

.lb-pedestal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--place-color), transparent);
    opacity: 0.5;
}

.lb-pedestal-1 { height: 72px; }
.lb-pedestal-2 { height: 48px; }
.lb-pedestal-3 { height: 32px; }

/* ── "you" badge ── */

.lb-you {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-green);
    background: rgba(25, 230, 57, 0.12);
    vertical-align: middle;
}

[data-theme="light"] .lb-you {
    background: rgba(25, 135, 84, 0.12);
}

/* ── Current-user highlight on podium ── */

.lb-me .lb-podium-avatar {
    border-color: var(--accent-green) !important;
    box-shadow:
        0 0 16px rgba(25, 230, 57, 0.35),
        0 0 40px rgba(25, 230, 57, 0.1);
}

/* ── List cards (4th+) ── */

@keyframes lb-slide-in {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.lb-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lb-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%),
        var(--charcoal);
    border: 1px solid var(--steel);
    border-radius: 16px;
    animation: lb-slide-in 0.4s ease-out backwards;
    animation-delay: calc(var(--index, 0) * 0.06s);
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

[data-theme="light"] .lb-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(233, 236, 239, 0.95));
    border-color: rgba(0, 0, 0, 0.08);
}

/* Current user card — green neon glow */

.lb-card-me {
    border-color: var(--accent-green) !important;
    box-shadow:
        0 0 12px rgba(25, 230, 57, 0.2),
        inset 0 0 20px rgba(25, 230, 57, 0.04);
}

[data-theme="light"] .lb-card-me {
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 12px rgba(25, 135, 84, 0.15);
}

/* Position number */

.lb-card-pos {
    font-size: 0.9rem;
    font-weight: 900;
    min-width: 28px;
    text-align: center;
    color: var(--accent-dim);
}

/* Card avatar */

.lb-card-avatar {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--steel);
}

/* Card info block */

.lb-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lb-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.lb-card-name {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-card-rank {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

/* Progress bar */

.lb-card-bar {
    height: 6px;
    background: var(--steel);
    border-radius: 999px;
    overflow: hidden;
}

.lb-card-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    transition: width 0.6s ease;
    box-shadow: 0 0 6px rgba(25, 230, 57, 0.15);
}

.lb-bar-me {
    background: var(--accent-green);
    box-shadow: 0 0 10px rgba(25, 230, 57, 0.3);
}

/* Score */

.lb-card-score {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--accent);
    min-width: 42px;
    text-align: right;
    flex-shrink: 0;
}

/* Streak */

.lb-card-streak {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-dim);
    flex-shrink: 0;
    min-width: 34px;
}

.lb-streak-me {
    color: #FF6B35;
}

/* ── Admin badge in leaderboard ── */

.lb-podium-name .admin-badge,
.lb-card-name .admin-badge {
    font-size: 0.55rem;
    padding: 1px 5px;
    margin-left: 3px;
    vertical-align: middle;
}

/* ============================================================ */
/* CHAT - MESSAGERIE GROUPE                                     */
/* ============================================================ */

/* ============================================================ */
/* CHAT SYSTEM - UPGRADED                                       */
/* ============================================================ */

.chat-section {
    margin-top: 16px;
    border-top: 1px solid var(--steel);
    padding-top: 12px;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px 10px;
}

.chat-header-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.chat-header-status {
    font-size: 0.65rem;
    color: var(--accent-dim);
    display: flex;
    align-items: center;
    gap: 5px;
}

.chat-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.chat-status-online {
    background: #2ECC71;
    box-shadow: 0 0 5px rgba(46, 204, 113, 0.6);
    animation: onlinePulse 2s ease infinite;
}

.chat-status-offline {
    background: #E74C3C;
}

/* Messages wrapper (for new messages floating btn) */
.chat-messages-wrapper {
    position: relative;
}

/* Messages container */
.chat-messages {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--black);
    border-radius: 10px;
    border: 1px solid var(--steel);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.chat-messages::-webkit-scrollbar {
    width: 4px;
}
.chat-messages::-webkit-scrollbar-thumb {
    background: var(--steel);
    border-radius: 2px;
}

.chat-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--accent-dim);
    font-size: 0.85rem;
}

/* Date separator */
.chat-date-separator {
    text-align: center;
    padding: 10px 0 6px;
}

.chat-date-separator span {
    font-size: 0.6rem;
    color: var(--accent-dim);
    background: var(--charcoal);
    padding: 3px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chat-join-separator {
    text-align: center;
    padding: 12px 0 8px;
}

.chat-join-separator span {
    font-size: 0.6rem;
    color: var(--accent);
    background: var(--charcoal);
    border: 1px solid var(--accent-dim);
    padding: 4px 12px;
    border-radius: 10px;
    letter-spacing: 0.3px;
}

/* ---- Bubbles ---- */
.chat-bubble {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 18px;
    word-break: break-word;
    position: relative;
    animation: chatBubbleIn 0.25s ease-out;
    transition: background 0.2s;
}

@keyframes chatBubbleIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Highlight when scrolling to a replied message */
.chat-bubble-highlight {
    animation: bubbleHighlight 1.5s ease;
}

@keyframes bubbleHighlight {
    0%, 100% { background: inherit; }
    30% { background: rgba(25, 230, 57, 0.2); }
    70% { background: rgba(25, 230, 57, 0.1); }
}

/* --- My bubbles (right) --- */
.chat-bubble-me {
    align-self: flex-end;
    background: var(--accent);
    color: var(--black);
}

/* iMessage-style corners for my bubbles */
.chat-bubble-me.chat-bubble-single {
    border-radius: 18px 18px 4px 18px;
}
.chat-bubble-me.chat-bubble-first {
    border-radius: 18px 18px 4px 18px;
    margin-bottom: 1px;
}
.chat-bubble-me.chat-bubble-middle {
    border-radius: 18px 4px 4px 18px;
    margin-bottom: 1px;
}
.chat-bubble-me.chat-bubble-last {
    border-radius: 18px 4px 18px 18px;
}

/* --- Other's bubbles (left) --- */
.chat-bubble-other {
    align-self: flex-start;
    background: var(--charcoal);
    color: var(--accent);
    border: 1px solid var(--steel);
}

/* iMessage-style corners for other's bubbles */
.chat-bubble-other.chat-bubble-single {
    border-radius: 18px 18px 18px 4px;
}
.chat-bubble-other.chat-bubble-first {
    border-radius: 18px 18px 18px 4px;
    margin-bottom: 1px;
}
.chat-bubble-other.chat-bubble-middle {
    border-radius: 4px 18px 18px 4px;
    margin-bottom: 1px;
}
.chat-bubble-other.chat-bubble-last {
    border-radius: 4px 18px 18px 18px;
}

/* Grouped spacing */
.chat-bubble-first,
.chat-bubble-single {
    margin-top: 6px;
}

.chat-bubble-sender {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.chat-bubble-sender-bottom {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    opacity: 0.7;
}

.chat-bubble-name {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chat-bubble-text {
    font-size: 0.85rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

/* Deleted message */
.chat-bubble-deleted {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-style: italic;
    color: rgba(255,255,255,0.5);
    padding: 2px 0;
    white-space: nowrap;
}
.chat-bubble-deleted svg { stroke: rgba(255,255,255,0.4); flex-shrink: 0; }
.chat-bubble-me .chat-bubble-deleted { color: rgba(0,0,0,0.45); }
.chat-bubble-me .chat-bubble-deleted svg { stroke: rgba(0,0,0,0.35); }

.chat-bubble-time {
    font-size: 0.55rem;
    opacity: 0.5;
    text-align: right;
    margin-top: 3px;
}

.chat-bubble-me .chat-bubble-time {
    color: var(--dark-gray);
}

/* Reply button (inside bubble) */

.chat-bubble-me .chat-msg-actions {
    right: auto;
    left: 4px;
}

.chat-bubble:hover .chat-reply-btn {
    opacity: 1;
}

/* On mobile: always show on active */
@media (hover: none) {
    .chat-reply-btn {
        opacity: 0.5;
    }
}

/* System messages */
.chat-bubble-system {
    align-self: center;
    background: transparent;
    border: 1px solid var(--steel);
    max-width: 90%;
    text-align: center;
    padding: 6px 16px;
    border-radius: 20px;
    margin: 6px 0;
}

.chat-bubble-system .chat-bubble-text {
    font-style: italic;
    font-size: 0.75rem;
    color: var(--accent-dim);
}

.chat-bubble-system .chat-bubble-time {
    text-align: center;
    color: var(--accent-dark);
}

/* ---- Reply quote inside bubble ---- */
.chat-reply-quote {
    background: rgba(128, 128, 128, 0.15);
    border-left: 3px solid var(--accent-green);
    border-radius: 4px;
    padding: 4px 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.chat-reply-quote:active {
    background: rgba(128, 128, 128, 0.25);
}

.chat-reply-quote-author {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--accent-green);
    margin-bottom: 2px;
}

.chat-reply-quote-text {
    display: block;
    font-size: 0.7rem;
    color: var(--accent-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.chat-bubble-me .chat-reply-quote {
    background: rgba(0, 0, 0, 0.1);
    border-left-color: var(--dark-gray);
}

.chat-bubble-me .chat-reply-quote-author {
    color: var(--dark-gray);
}

.chat-bubble-me .chat-reply-quote-text {
    color: rgba(0, 0, 0, 0.6);
}

/* ---- Reactions ---- */
.chat-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.chat-reaction-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(128, 128, 128, 0.15);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 12px;
    padding: 2px 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-reaction-badge:active {
    transform: scale(0.9);
}

.chat-reaction-mine {
    background: rgba(25, 230, 57, 0.15);
    border-color: rgba(25, 230, 57, 0.3);
}

.chat-reaction-count {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--accent-dim);
}

.chat-bubble-me .chat-reaction-badge {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.15);
}

.chat-bubble-me .chat-reaction-mine {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.3);
}

.chat-bubble-me .chat-reaction-count {
    color: var(--dark-gray);
}

/* Reaction popup */
.chat-reaction-popup {
    position: absolute;
    z-index: 100;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    border-radius: 24px;
    padding: 6px 8px;
    display: flex;
    gap: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    animation: reactionPopIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes reactionPopIn {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.5);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

.chat-reaction-option {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    transition: all 0.15s;
    line-height: 1;
}

.chat-reaction-option:hover {
    background: var(--steel);
    transform: scale(1.2);
}

.chat-reaction-option:active {
    transform: scale(0.9);
}

/* ---- Typing indicator ---- */
.chat-typing-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 0.7rem;
    color: var(--accent-dim);
}

.chat-typing-text {
    font-style: italic;
}

.chat-typing-dots {
    display: inline-flex;
    gap: 2px;
}

.chat-typing-dots span {
    animation: typingBounce 1.4s infinite;
    font-weight: 900;
    font-size: 1rem;
    line-height: 0.5;
}

.chat-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.chat-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ---- Reply preview bar ---- */
.chat-reply-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--charcoal);
    border-left: 3px solid var(--accent-green);
    border-radius: 8px;
    margin-bottom: 6px;
    animation: slideDown 0.2s ease-out;
}

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

.chat-reply-preview-content {
    flex: 1;
    min-width: 0;
}

.chat-reply-preview-author {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent-green);
}

.chat-reply-preview-text {
    display: block;
    font-size: 0.75rem;
    color: var(--accent-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-reply-preview-close {
    background: none;
    border: none;
    color: var(--accent-dim);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.chat-reply-preview-close:hover {
    opacity: 1;
}

/* ---- New messages floating button ---- */
.chat-new-messages-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-green);
    color: var(--black);
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
    box-shadow: 0 2px 12px rgba(25, 230, 57, 0.3);
    animation: newMsgBtnIn 0.3s ease-out;
    transition: all 0.2s;
}

.chat-new-messages-btn:active {
    transform: translateX(-50%) scale(0.95);
}

@keyframes newMsgBtnIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- Unread badge on group cards ---- */
.group-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E74C3C;
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    margin-left: 6px;
    animation: unreadPulse 2s infinite;
    vertical-align: middle;
}

@keyframes unreadPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(231, 76, 60, 0); }
}

/* Audio message */
.chat-audio-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 160px;
}

.chat-play-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.chat-audio-wave {
    flex: 1;
    height: 6px;
    background: rgba(128, 128, 128, 0.3);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.chat-audio-progress {
    height: 100%;
    width: 0%;
    background: var(--accent-green);
    border-radius: 3px;
    transition: width 0.1s linear;
}

.chat-bubble-me .chat-audio-wave {
    background: rgba(0, 0, 0, 0.15);
}
.chat-bubble-me .chat-audio-progress {
    background: var(--dark-gray);
}

.chat-audio-duration {
    font-size: 0.65rem;
    opacity: 0.7;
    min-width: 28px;
}

/* Input area */
.chat-input-area {
    margin-top: 8px;
}

.chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.chat-text-input {
    flex: 1;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    border-radius: 20px;
    padding: 10px 16px;
    color: var(--accent);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    resize: none;
    min-height: 40px;
    max-height: 100px;
    overflow-y: auto;
    line-height: 1.4;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.chat-text-input:focus {
    border-color: var(--accent);
}

.chat-text-input::placeholder {
    color: var(--accent-dim);
}

.chat-send-btn {
    background: var(--accent);
    color: var(--black);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-send-btn:active {
    transform: scale(0.9);
}

/* ===== Mic Button — Premium Redesign ===== */
.chat-mic-btn {
    background: linear-gradient(135deg, rgba(46,204,113,0.12), rgba(46,204,113,0.04));
    border: 1px solid rgba(46,204,113,0.25);
    border-radius: 14px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    flex-shrink: 0;
    color: #2ECC71;
}
.chat-mic-btn svg { stroke: #2ECC71; }
.chat-mic-btn:active {
    transform: scale(0.9);
    background: rgba(46,204,113,0.2);
}

.chat-mic-btn.recording {
    background: linear-gradient(135deg, rgba(231,76,60,0.2), rgba(231,76,60,0.1));
    border-color: rgba(231,76,60,0.4);
    animation: recordPulse 1.2s ease infinite;
}
.chat-mic-btn.recording svg { stroke: #E74C3C; }

@keyframes recordPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.3); }
    50% { box-shadow: 0 0 0 10px rgba(231,76,60,0); }
}

/* Recording bar */
.chat-recording-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.25);
    border-radius: 12px;
    margin-bottom: 8px;
}

.chat-recording-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    background: #E74C3C;
    border-radius: 50%;
    animation: recordPulse 1s infinite;
}

.chat-waveform {
    flex: 1;
    height: 32px;
    border-radius: 4px;
}

.chat-recording-time {
    font-size: 0.8rem;
    color: #E74C3C;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}

.chat-cancel-record {
    background: none;
    border: none;
    color: var(--accent-dim);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

.chat-cancel-record svg {
    width: 18px;
    height: 18px;
}

.chat-record-send {
    background: var(--accent-green);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #000;
    transition: transform 0.15s ease;
}

.chat-record-send:active {
    transform: scale(0.9);
}

.chat-record-send svg {
    width: 18px;
    height: 18px;
}

/* Light theme chat overrides */
[data-theme="light"] .chat-messages {
    background: #F8F9FA;
    border-color: #DEE2E6;
}

[data-theme="light"] .chat-bubble-other {
    background: #E9ECEF;
    color: #212529;
    border-color: #DEE2E6;
}

[data-theme="light"] .chat-bubble-me {
    background: #212529;
    color: #F5F5F0;
}

[data-theme="light"] .chat-text-input {
    background: #E9ECEF;
    border-color: #DEE2E6;
    color: #212529;
}

[data-theme="light"] .chat-date-separator span {
    background: #E9ECEF;
    color: #6C757D;
}

[data-theme="light"] .chat-reaction-popup {
    background: #FFFFFF;
    border-color: #DEE2E6;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .chat-reply-preview {
    background: #E9ECEF;
}

[data-theme="light"] .chat-typing-indicator {
    color: #6C757D;
}

[data-theme="light"] .chat-new-messages-btn {
    background: #198754;
    box-shadow: 0 2px 12px rgba(25, 135, 84, 0.3);
}

/* Responsive chat */
@media (max-width: 360px) {
    .chat-messages {
        height: 220px;
    }
    .chat-bubble {
        max-width: 85%;
        padding: 6px 10px;
    }
    .chat-bubble-text {
        font-size: 0.8rem;
    }
    .chat-text-input {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    .chat-send-btn, .chat-mic-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

@media (min-width: 361px) and (max-width: 480px) {
    .chat-messages {
        height: 260px;
    }
}

/* ============================================================
   APP LOADER — Circular progress spinner
   ============================================================ */
.app-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 20px;
    gap: 14px;
}
.app-loader-ring {
    position: relative;
    width: 80px;
    height: 80px;
}
.app-loader-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 8px rgba(25, 230, 57, 0.25));
}
.app-loader-track {
    fill: none;
    stroke: var(--steel, rgba(255,255,255,0.08));
    stroke-width: 4;
}
.app-loader-fill {
    fill: none;
    stroke: var(--accent-green, #19E639);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-dasharray: 163.36;
    stroke-dashoffset: 163.36;
    transition: stroke-dashoffset 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.app-loader-pct {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-green, #19E639);
    letter-spacing: 1px;
    font-family: var(--font-mono, monospace);
}
.app-loader-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--accent-dim, rgba(255,255,255,0.4));
    animation: loaderPulse 1.8s ease-in-out infinite;
}
@keyframes loaderPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ============================================================
   STREAK DISPLAY WIDGET - Flamme animée & compteur
   ============================================================ */

.streak-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 20px 20px;
    margin: 15px;
    border-radius: 16px;
    background: var(--dark-gray);
    border: 1px solid var(--steel);
    position: relative;
    overflow: hidden;
}

.streak-flame-container {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.streak-flame {
    animation: streakPulse 1.5s ease-in-out infinite, streakWobble 3s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 120, 0, 0.5));
    z-index: 2;
    line-height: 1;
}

.streak-count {
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 4px;
}

.streak-label {
    font-size: 0.9rem;
    color: var(--accent-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.streak-tier-label {
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 20px;
    background: rgba(255, 215, 0, 0.15);
    color: #FFD700;
}

.streak-best {
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--accent-dark);
}

/* --- Tier: Zero (grisé) --- */
.streak-tier-zero .streak-flame {
    filter: grayscale(1) opacity(0.4);
    animation: none;
}
.streak-tier-zero .streak-count {
    color: var(--accent-dark);
}
.streak-tier-zero .streak-label {
    color: var(--accent-dark);
    font-style: italic;
}

/* --- Tier: Normal (orange chaud) --- */
.streak-tier-normal .streak-flame {
    filter: drop-shadow(0 0 10px rgba(255, 120, 0, 0.6));
}

/* --- Tier: Gold (>= 7 jours) --- */
.streak-tier-gold .streak-flame {
    filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.7)) drop-shadow(0 0 30px rgba(255, 180, 0, 0.3));
}
.streak-tier-gold .streak-count {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.streak-tier-gold .streak-tier-label {
    background: rgba(255, 215, 0, 0.15);
    color: #FFD700;
}

/* --- Tier: Legendary (>= 30 jours, bleu) --- */
.streak-tier-legendary .streak-flame {
    filter: drop-shadow(0 0 16px rgba(80, 160, 255, 0.8)) drop-shadow(0 0 40px rgba(60, 130, 255, 0.4)) hue-rotate(200deg);
}
.streak-tier-legendary .streak-count {
    background: linear-gradient(135deg, #50A0FF, #8040FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.streak-tier-legendary .streak-tier-label {
    background: rgba(80, 160, 255, 0.15);
    color: #50A0FF;
}

/* Halo pour le tier legendary */
.streak-halo {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(80, 160, 255, 0.25) 0%, transparent 70%);
    animation: streakHalo 2s ease-in-out infinite;
    z-index: 1;
}

/* Particules flottantes */
.streak-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #FFD700;
    opacity: 0;
    animation: streakParticleFloat 2.5s ease-out infinite;
    z-index: 1;
}
.streak-tier-legendary .streak-particle {
    background: #50A0FF;
}

/* --- Animations --- */
@keyframes streakPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

@keyframes streakWobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    75% { transform: rotate(-3deg); }
}

@keyframes streakHalo {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

@keyframes streakParticleFloat {
    0% { transform: translateY(0) scale(1); opacity: 0.8; }
    100% { transform: translateY(-50px) scale(0); opacity: 0; }
}

/* --- Light theme adjustments --- */
[data-theme="light"] .streak-widget {
    background: var(--dark-gray);
    border: 2px solid var(--steel);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .streak-tier-gold .streak-count {
    background: linear-gradient(135deg, #B8860B, #D2691E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="light"] .streak-tier-legendary .streak-count {
    background: linear-gradient(135deg, #2060C0, #5030A0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="light"] .streak-tier-label {
    background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .streak-tier-gold .streak-tier-label {
    color: #B8860B;
}
[data-theme="light"] .streak-tier-legendary .streak-tier-label {
    color: #2060C0;
}

/* Responsive */
@media (max-width: 360px) {
    .streak-widget {
        padding: 20px 15px 15px;
        margin: 10px;
    }
    .streak-count {
        font-size: 2.5rem;
    }
    .streak-flame-container {
        width: 65px;
        height: 65px;
    }
}

/* ============================================================ */
/* GUIDED TOUR - Tour guidé interactif                          */
/* ============================================================ */

/* Overlay sombre avec cutout */

/* Élément highlighté */
.gt-highlighted {
    position: relative !important;
    z-index: 99991 !important;
    border-radius: 12px;
    animation: gt-glow-pulse 2s ease-in-out infinite;
    pointer-events: auto;
}

@keyframes gt-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(245, 245, 240, 0.4), 0 0 20px rgba(245, 245, 240, 0.15);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(245, 245, 240, 0.6), 0 0 30px rgba(245, 245, 240, 0.25);
    }
}

[data-theme="light"] .gt-highlighted {
    animation: gt-glow-pulse-light 2s ease-in-out infinite;
}

@keyframes gt-glow-pulse-light {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.3), 0 0 20px rgba(33, 37, 41, 0.1);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(33, 37, 41, 0.5), 0 0 30px rgba(33, 37, 41, 0.2);
    }
}

/* Tooltip */

@keyframes gt-tooltip-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes gt-tooltip-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

/* Tooltip final centré */

@keyframes gt-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Flèche du tooltip */

/* Titre et texte du tooltip */

/* Barre de progression */

/* Boutons du tooltip */

/* Light theme ajustements */

/* Responsive mobile */
@media (max-width: 480px) {
    .gt-tooltip {
        max-width: calc(100vw - 24px);
        padding: 16px;
        border-radius: 14px;
    }

    .gt-tooltip-final {
        max-width: calc(100vw - 32px);
        padding: 24px 18px;
    }

    .gt-tooltip-title {
        font-size: 1rem;
    }

    .gt-tooltip-text {
        font-size: 0.85rem;
    }

    .gt-btn-next, .gt-btn-skip {
        padding: 8px 14px;
        font-size: 0.8rem;
    }

    .gt-btn-finish {
        padding: 12px 24px;
        font-size: 0.95rem;
    }
}

/* ============================================================
   SCORE ANIMATION — Pulse + Particules dopamine
   ============================================================ */

/* Pulse glow on KPI value change */
@keyframes kpiPulse {
    0% { transform: scale(1); filter: brightness(1); }
    25% { transform: scale(1.35); filter: brightness(1.5); text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent); }
    50% { transform: scale(1.15); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); text-shadow: none; }
}

.kpi-pulse {
    animation: kpiPulse 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    display: inline-block;
}

/* Floating emoji particles on score increase */
@keyframes scoreParticleFloat {
    0% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
    60% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-80px) scale(0.5) rotate(25deg); }
}

.score-particle {
    position: absolute;
    font-size: 1.2rem;
    pointer-events: none;
    z-index: 9999;
    animation: scoreParticleFloat 0.9s ease-out forwards;
    will-change: transform, opacity;
}

/* ============================================================
   BODY FREEZE — Used during guided tour to lock background
   ============================================================ */
body.tour-active {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    touch-action: none !important;
}

body.tour-active .bottom-nav {
    pointer-events: none;
}

body.tour-active .header {
    pointer-events: none;
}

/* ============================================================
   ACTION BUTTONS — Premium styled action buttons
   ============================================================ */
.today-actions {
    display: flex;
    gap: 10px;
    padding: 12px 15px 20px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    position: relative;
    overflow: hidden;
}

.action-btn svg {
    flex-shrink: 0;
}

.action-btn-primary {
    flex: 2;
    background: linear-gradient(135deg, #2ECC71, #27AE60);
    color: #0A0A0A;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}

.action-btn-primary svg { stroke: #0A0A0A; }

.action-btn-primary:active {
    transform: scale(0.96);
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.2);
}

.action-btn-secondary {
    flex: 1;
    background: var(--charcoal);
    color: var(--accent);
    border: 1px solid var(--steel);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}

.action-btn-secondary:active {
    transform: scale(0.96);
}

/* ============================================================
   STATS — Rang card + Calendar card (top row)
   ============================================================ */
.stats-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 15px;
}

.rank-card, .calendar-card {
    background: linear-gradient(145deg, var(--charcoal), rgba(30, 30, 30, 0.9));
    border: 1px solid var(--steel);
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
    cursor: pointer;
    transition: transform 0.2s ease;
}
.calendar-card {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank-card:active, .calendar-card:active {
    transform: scale(0.96);
}

.rank-card::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #F39C12, #E67E22);
}

.calendar-card::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #3498DB, #2980B9);
}

.rank-card-icon svg { stroke: #F39C12; filter: drop-shadow(0 0 6px rgba(243,156,18,0.3)); }
.calendar-card-icon { display: flex; align-items: center; justify-content: center; }
.calendar-card-icon svg { stroke: #3498DB; filter: drop-shadow(0 0 8px rgba(52,152,219,0.4)); }

.rank-card-label, .calendar-card-label {
    font-size: 0.65rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    margin-top: 8px;
}

.rank-card-name {
    font-size: clamp(0.85rem, 4vw, 1.4rem);
    font-weight: 900;
    color: #FFB84D;
    text-shadow: 0 0 15px rgba(255,184,77,0.5), 0 0 30px rgba(243,156,18,0.3);
    margin: 6px 0 10px;
    letter-spacing: clamp(1px, 0.5vw, 3px);
    overflow-wrap: break-word;
    word-break: break-word;
}

.rank-card-bar {
    height: 8px;
    background: rgba(255,184,77,0.2);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255,184,77,0.15);
}

.rank-card-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFB84D, #F39C12, #E67E22);
    border-radius: 4px;
    transition: width 0.5s ease;
    box-shadow: 0 0 12px rgba(255,184,77,0.5);
}

/* ============================================================
   GROUP ENHANCEMENTS — Nav badge, Preview, Online, Pin, Goal
   ============================================================ */

/* Nav notification badge */
.nav-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #E74C3C;
    color: white;
    font-size: 0.55rem;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.5);
    animation: badgePulse 2s ease infinite;
}

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

/* Group card — last message preview */
.group-card-preview {
    font-size: 0.75rem;
    color: var(--accent-dim);
    margin: 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    border-left: 2px solid rgba(46,204,113,0.3);
}

.group-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    color: var(--accent-dim);
}

.group-card-time {
    color: var(--accent-dark);
    font-size: 0.65rem;
    font-weight: 600;
}

/* Online indicator */
.group-online-dot {
    width: 7px;
    height: 7px;
    background: #2ECC71;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.6);
    animation: onlinePulse 2s ease infinite;
}

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

.group-online-count {
    color: #2ECC71;
    font-size: 0.65rem;
    font-weight: 700;
}

/* Pinned message bar */
.chat-pinned {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(255,184,77,0.12), rgba(255,184,77,0.04));
    border-left: 3px solid #FFB84D;
    border-radius: 0 8px 8px 0;
    margin: 0 10px 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.chat-pinned svg {
    stroke: #FFB84D;
    flex-shrink: 0;
}

.chat-pinned-text {
    font-size: 0.75rem;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.chat-pinned-close {
    background: none;
    border: none;
    color: var(--accent-dim);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px 6px;
}

/* Pin button in chat */

.chat-bubble:hover .chat-msg-actions,
.chat-bubble:active .chat-msg-actions {
    opacity: 1;
}

/* Reaction animation */
@keyframes reactionPop {
    0% { transform: scale(0.5); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.chat-reaction-badge {
    animation: reactionPop 0.3s ease;
}

/* Group goal */
.group-goal {
    padding: 14px;
    margin: 0 0 10px;
    background: linear-gradient(145deg, rgba(255,184,77,0.08), rgba(255,184,77,0.02));
    border: 1px solid rgba(255,184,77,0.15);
    border-radius: 12px;
}

.group-goal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.group-goal-title {
    font-size: 0.7rem;
    font-weight: 800;
    color: #FFB84D;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.group-goal-text {
    font-size: 0.85rem;
    color: var(--accent);
    margin-bottom: 10px;
    line-height: 1.4;
}

.group-goal-bar {
    height: 8px;
    background: rgba(255,184,77,0.15);
    border-radius: 4px;
    overflow: hidden;
}

.group-goal-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFB84D, #F39C12);
    border-radius: 4px;
    transition: width 0.5s ease;
    box-shadow: 0 0 8px rgba(255,184,77,0.4);
}

.group-goal-progress {
    font-size: 0.65rem;
    color: #FFB84D;
    text-align: right;
    margin-top: 4px;
    font-weight: 700;
}

/* ============================================================
   GROUP SETTINGS — BOUTON ⚙
   ============================================================ */
.group-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid var(--steel);
    border-radius: 8px;
    color: var(--accent-dark);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    flex-shrink: 0;
}
.group-settings-btn svg {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.group-settings-btn:hover {
    background: rgba(25, 230, 57, 0.08);
    border-color: rgba(25, 230, 57, 0.4);
    color: var(--accent-green);
}
.group-settings-btn:hover svg {
    transform: rotate(90deg);
}
.group-settings-btn:active svg {
    transform: rotate(180deg);
}

/* ============================================================
   GROUP SETTINGS — MODAL PRINCIPAL
   ============================================================ */
@keyframes gs-slide-up {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes gs-row-in {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes gs-gear-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.gs-modal {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    border-radius: 20px;
    border: 1px solid var(--steel);
    background: var(--dark-gray);
    animation: gs-slide-up 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
    /* Ligne verte en haut du modal */
    box-shadow:
        0 0 0 0 transparent,
        inset 0 2px 0 0 rgba(25, 230, 57, 0.6);
}

/* ============================================================
   HEADER
   ============================================================ */
.gs-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
    background: linear-gradient(180deg,
        rgba(25, 230, 57, 0.04) 0%,
        transparent 100%);
}
.gs-header > svg {
    color: var(--accent-green);
    flex-shrink: 0;
    opacity: 0.9;
}
.gs-header-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    flex: 1;
}
.gs-close-btn {
    width: 14px;
    height: 14px;
    min-width: 0;
    min-height: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    color: var(--accent-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
    flex-shrink: 0;
}
.gs-close-btn:hover {
    background: rgba(255, 80, 80, 0.12);
    border-color: rgba(255, 80, 80, 0.3);
    color: #FF5050;
}

/* ============================================================
   ONGLETS
   ============================================================ */
.gs-tabs {
    display: flex;
    padding: 0 8px;
    gap: 2px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.gs-tab {
    flex: 1;
    padding: 11px 8px;
    background: transparent;
    border: none;
    color: var(--accent-dark);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: color 0.2s;
}
.gs-tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 12px; right: 12px;
    height: 2px;
    background: var(--accent-green);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.gs-tab.active {
    color: var(--accent);
}
.gs-tab.active::after {
    transform: scaleX(1);
}
.gs-count {
    background: var(--steel);
    color: var(--accent-dim);
    font-size: 0.6rem;
    font-weight: 900;
    padding: 1px 6px;
    border-radius: 20px;
    line-height: 1.6;
    letter-spacing: 0;
    min-width: 18px;
    text-align: center;
}

/* ============================================================
   CONTENU DES ONGLETS
   ============================================================ */
.gs-tab-panel {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--steel) transparent;
}
.gs-tab-panel::-webkit-scrollbar { width: 4px; }
.gs-tab-panel::-webkit-scrollbar-track { background: transparent; }
.gs-tab-panel::-webkit-scrollbar-thumb { background: var(--steel); border-radius: 2px; }

/* ============================================================
   ONGLET GÉNÉRAL — champs de formulaire
   ============================================================ */
.gs-field {
    margin-bottom: 18px;
}
.gs-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.63rem;
    font-weight: 800;
    color: var(--accent-dark);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 7px;
}
.gs-label-opt {
    font-weight: 500;
    color: var(--steel);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.6rem;
}
.gs-input,
.gs-textarea {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--steel);
    border-radius: 10px;
    color: var(--accent);
    padding: 11px 14px;
    font-size: 0.88rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    -webkit-appearance: none;
}
.gs-input::placeholder,
.gs-textarea::placeholder {
    color: var(--steel);
}
.gs-input:focus,
.gs-textarea:focus {
    outline: none;
    border-color: rgba(25, 230, 57, 0.5);
    background: rgba(25, 230, 57, 0.03);
    box-shadow: 0 0 0 3px rgba(25, 230, 57, 0.08);
}
.gs-textarea {
    min-height: 88px;
    resize: none;
    line-height: 1.5;
}
/* Objectif : focus ambré */
.gs-field--goal .gs-textarea:focus {
    border-color: rgba(255, 184, 77, 0.5);
    background: rgba(255, 184, 77, 0.03);
    box-shadow: 0 0 0 3px rgba(255, 184, 77, 0.07);
}
.gs-counter {
    display: flex;
    justify-content: flex-end;
    font-size: 0.6rem;
    color: var(--steel);
    margin-top: 4px;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}
.gs-counter span {
    color: var(--accent-dark);
}

/* Séparateur section */
.gs-section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--steel), transparent);
    margin: 20px 0;
    opacity: 0.5;
}

.gs-save-btn {
    width: 100%;
    padding: 13px 20px;
    background: var(--accent-green);
    color: #000;
    border: none;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    margin-top: 6px;
}
.gs-save-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.45s ease;
}
.gs-save-btn:hover::before { left: 100%; }
.gs-save-btn:hover {
    box-shadow: 0 4px 20px rgba(25, 230, 57, 0.35);
    transform: translateY(-1px);
}
.gs-save-btn:active {
    transform: scale(0.97);
    box-shadow: none;
}

/* ============================================================
   ONGLET MEMBRES — liste
   ============================================================ */
.gs-members-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gs-members-list .gs-member-row:nth-child(1) { animation-delay: 0.03s; }
.gs-members-list .gs-member-row:nth-child(2) { animation-delay: 0.07s; }
.gs-members-list .gs-member-row:nth-child(3) { animation-delay: 0.11s; }
.gs-members-list .gs-member-row:nth-child(4) { animation-delay: 0.15s; }
.gs-members-list .gs-member-row:nth-child(5) { animation-delay: 0.19s; }
.gs-members-list .gs-member-row:nth-child(n+6) { animation-delay: 0.22s; }

.gs-member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px 11px 0;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    border-left: 3px solid var(--steel);
    transition: border-color 0.2s, background 0.2s;
    animation: gs-row-in 0.3s ease both;
    overflow: hidden;
}
/* Ligne de séparation gauche colorée selon le rôle */
.gs-member-row--admin {
    border-left-color: #FFB84D;
    background: rgba(255, 184, 77, 0.03);
}
.gs-member-row--me {
    border-left-color: var(--accent-green);
    background: rgba(25, 230, 57, 0.03);
}

.gs-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
    margin-left: 10px;
    overflow: hidden;
}
.gs-member-info {
    flex: 1;
    min-width: 0;
}
.gs-member-pseudo {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gs-member-role {
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Badges */
.gs-badge-admin,
.gs-badge-member,
.gs-badge-me {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.6;
}
.gs-badge-admin {
    background: rgba(255, 184, 77, 0.12);
    color: #FFB84D;
    border: 1px solid rgba(255, 184, 77, 0.25);
}
.gs-badge-member {
    background: rgba(255,255,255,0.05);
    color: var(--accent-dark);
    border: 1px solid rgba(255,255,255,0.08);
}
.gs-badge-me {
    background: rgba(25, 230, 57, 0.1);
    color: var(--accent-green);
    border: 1px solid rgba(25, 230, 57, 0.2);
}

/* Boutons d'action membres */
.gs-member-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    padding-right: 10px;
}
.gs-btn-promote,
.gs-btn-kick {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
    flex-shrink: 0;
}
.gs-btn-promote {
    background: rgba(255, 184, 77, 0.08);
    border: 1px solid rgba(255, 184, 77, 0.2);
    color: #FFB84D;
}
.gs-btn-promote:hover {
    background: rgba(255, 184, 77, 0.2);
    border-color: #FFB84D;
    transform: scale(1.08);
}
.gs-btn-kick {
    background: rgba(255, 70, 70, 0.07);
    border: 1px solid rgba(255, 70, 70, 0.18);
    color: #FF5050;
}
.gs-btn-kick:hover {
    background: rgba(255, 70, 70, 0.18);
    border-color: #FF5050;
    transform: scale(1.08);
}
.gs-btn-promote:active,
.gs-btn-kick:active {
    transform: scale(0.93);
}

/* ============================================================
   RANKS MODAL
   ============================================================ */
.ranks-modal-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);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
}
.ranks-modal-overlay.active { opacity: 1; }

.ranks-modal {
    background: var(--card-bg, #1a1a1a);
    border-radius: 20px;
    width: 100%;
    max-width: 360px;
    padding: 24px;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ranks-modal-overlay.active .ranks-modal {
    transform: translateY(0) scale(1);
}

.ranks-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--text-primary, #fff);
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ranks-modal-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.ranks-modal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.2s ease;
}

.ranks-modal-item.ranks-modal-current {
    background: rgba(255,255,255,0.08);
    border-color: var(--rank-color);
    box-shadow: 0 0 20px rgba(255,255,255,0.05), inset 0 0 20px rgba(255,255,255,0.02);
}

.ranks-modal-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ranks-modal-icon svg { color: var(--rank-color); }

.ranks-modal-current .ranks-modal-dot { opacity: 1; }

.ranks-modal-info { flex: 1; }

.ranks-modal-name {
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.ranks-modal-range {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
}

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

.ranks-modal-close {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #fff);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.ranks-modal-close:active { background: rgba(255,255,255,0.15); }

.rank-card { cursor: pointer; }

/* ============================================================
   CHAT — NEW UX (message menu, audio preview, send btn states)
   ============================================================ */

/* Hide old hover actions */

/* Bubble row — flex container for bubble + action menu side by side */
.chat-bubble-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
}
.chat-bubble-row-me { flex-direction: row-reverse; }
.chat-bubble-row-other { flex-direction: row; }
.chat-bubble-row .chat-bubble {
    max-width: 75%;
    min-width: 60px;
    flex-shrink: 1;
}
.chat-bubble-row .chat-msg-menu { flex-shrink: 0; }

/* Message "..." button */
.chat-msg-more-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.5);
    border-radius: 50%;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.chat-bubble:hover .chat-msg-more-btn,
.chat-bubble:active .chat-msg-more-btn { opacity: 1; }

/* Action menu — opposite side of bubble, vertical icon buttons */
.chat-msg-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    animation: menuPop 0.15s ease-out;
}
@keyframes menuPop {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}
.chat-msg-menu button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    padding: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.chat-msg-menu button:active { transform: scale(0.85); background: rgba(255,255,255,0.12); }
.chat-msg-delete-btn { border-color: rgba(231,76,60,0.2) !important; }

/* Relative positioning for bubbles */
.chat-bubble { position: relative; }

/* Send button states */
.chat-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}
.chat-send-btn-disabled {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.3);
}
.chat-send-btn-active {
    background: #4CAF50;
    color: #fff;
    box-shadow: 0 0 16px rgba(76, 175, 80, 0.4);
    animation: sendBtnPop 0.3s ease-out;
}
@keyframes sendBtnPop {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Audio preview bar */
.chat-audio-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 4px;
}
.chat-audio-preview-delete {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(244, 67, 54, 0.15);
    color: #F44336;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}
.chat-audio-preview-delete:active { background: rgba(244, 67, 54, 0.3); }
.chat-audio-preview-wave {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 8px 14px;
}
.chat-audio-preview-icon { font-size: 1.1rem; }
.chat-audio-preview-duration {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.chat-audio-preview-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #4CAF50;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.3);
    transition: transform 0.2s;
}
.chat-audio-preview-send:active { transform: scale(0.9); }

/* ============================================================
   DESKTOP — SCROLL FIX + CENTERING
   ============================================================ */
@media (min-width: 769px) {
    /* Restore scrollbar on desktop */
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
    body { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; -ms-overflow-style: auto; }
    
    /* Center content */
    .page {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
    .header {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Touch "..." always visible on hover for desktop */
    .chat-bubble:hover .chat-msg-more-btn { opacity: 1; }
}

/* ============================================================
   SCORE BANNER — Full width on Habitudes page
   ============================================================ */
.score-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 15px;
    padding: 16px 20px;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
}
.score-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2ECC71, #27AE60);
    border-radius: 0 0 4px 4px;
}
.score-banner-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(46, 204, 113, 0.1);
    color: #2ECC71;
}
.score-banner-info {
    flex: 1;
    min-width: 0;
}
.score-banner-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.score-banner-bar {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.score-banner-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2ECC71, #27AE60);
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
}
.score-banner-value {
    flex-shrink: 0;
    font-size: 2rem;
    font-weight: 900;
    color: #2ECC71;
    text-shadow: 0 0 15px rgba(46, 204, 113, 0.4);
    min-width: 70px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   MODE RANKED — COMING SOON CARD
   ============================================================ */
@keyframes rankedPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.2); }
    50% { box-shadow: 0 0 12px 4px rgba(243, 156, 18, 0.15); }
}

/* ============================================================
   WEEK DOTS — Overview on Habitudes page
   ============================================================ */

/* TODAY — highlighted background */

/* Past days — colored dots */

.score-banner-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.score-banner-count {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(46, 204, 113, 0.7);
    font-variant-numeric: tabular-nums;
}

/* 3-column stats grid for Stats Fun */
.stats-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* Rank card in profile — ensure text visibility */
.stat-card-rank {
    cursor: pointer;
    text-align: center;
}
.stat-card-rank::before {
    background: linear-gradient(90deg, #F39C12, #E67E22) !important;
}
.stat-card-rank .stat-card-icon svg {
    stroke: #F39C12;
}
.stat-card-rank .stat-value {
    text-shadow: 0 0 12px currentColor, 0 1px 2px rgba(0,0,0,0.8) !important;
    font-weight: 900 !important;
}

/* ============================================================
   PROFILE — GROUPS + FOOTER (premium redesign)
   ============================================================ */

/* Profile footer */
.profile-footer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 0 15px 100px;
}
.profile-settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    border-radius: 12px;
    color: var(--accent, #F5F5F0);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.profile-settings-btn:active { transform: scale(0.96); background: rgba(255,255,255,0.06); }
#soundToggleBtn.is-muted { opacity: 0.5; }
#soundToggleBtn .sound-toggle-icon { font-size: 1.1rem; }

/* ===== SHARE SCORE MODAL ===== */
.share-score-title {
    font-family: 'Orbitron', sans-serif;
}
.share-score-preview {
    text-align: center;
    padding: 16px 0;
    margin-bottom: 16px;
    background: rgba(46,204,113,0.08);
    border: 1px solid rgba(46,204,113,0.2);
    border-radius: 12px;
}
.share-score-value {
    font-size: 2.5rem;
    font-weight: 900;
    color: #2ECC71;
    text-shadow: 0 0 20px rgba(46,204,113,0.4);
}
.share-group-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 16px;
}
.share-group-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.share-group-item:active { transform: scale(0.97); }
.share-group-item.share-group-shared {
    opacity: 0.6;
    cursor: default;
    background: rgba(46,204,113,0.05);
    border-color: rgba(46,204,113,0.15);
}
.share-group-emoji { font-size: 1.6rem; flex-shrink: 0; }
.share-group-info { flex: 1; min-width: 0; }
.share-group-name {
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--accent);
    letter-spacing: 1px;
}
.share-group-status {
    font-size: 0.7rem;
    color: var(--accent-dim);
    margin-top: 2px;
}
.share-group-action {
    flex-shrink: 0;
    color: var(--accent-dim);
}

/* ===== TRANSFER ADMIN BUTTON ===== */

/* ===== GROUP CREATOR BADGE ===== */
.group-creator-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    color: #FFD700;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 6px;
    padding: 1px 6px;
    margin-left: 6px;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.admin-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    color: #00E5FF;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 6px;
    padding: 1px 6px;
    margin-left: 6px;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* ===== NOTIFICATIONS SETTINGS ===== */
.notif-settings { padding: 4px 0; }
.notif-blocked-banner {
    background: rgba(231,76,60,0.12);
    border: 1px solid rgba(231,76,60,0.3);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.85rem;
    color: #E74C3C;
    margin-bottom: 14px;
    text-align: center;
}
.notif-enable-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, rgba(46,204,113,0.15), rgba(46,204,113,0.05));
    border: 1px solid rgba(46,204,113,0.3);
    border-radius: 12px;
    color: #2ECC71;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    margin-bottom: 14px;
    transition: all 0.2s ease;
}
.notif-enable-btn:active { transform: scale(0.97); }
.notif-status-ok {
    text-align: center;
    color: #2ECC71;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.notif-toggle-list { display: flex; flex-direction: column; gap: 2px; }
.notif-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.notif-toggle-item.notif-sub { padding-left: 20px; }
.notif-toggle-item.notif-locked { opacity: 0.5; }
.notif-toggle-info { flex: 1; min-width: 0; }
.notif-toggle-label { font-weight: 700; font-size: 0.9rem; color: var(--accent); }
.notif-toggle-desc { font-size: 0.75rem; color: var(--accent-dim); margin-top: 2px; }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 24px;
    transition: 0.3s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}
.toggle-switch input:checked + .toggle-slider { background: #2ECC71; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle-switch input:disabled + .toggle-slider { cursor: not-allowed; opacity: 0.5; }

.notif-hour-select {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: var(--accent);
    padding: 6px 10px;
    font-size: 0.85rem;
    cursor: pointer;
}

/* ===== ADMIN PANEL ===== */
.admin-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    margin-bottom: 10px;
}
.admin-back-btn {
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 10px;
    padding: 8px;
    color: var(--accent);
    cursor: pointer;
    display: flex;
    align-items: center;
}
.admin-back-btn:active { transform: scale(0.9); }
.admin-title {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: #E74C3C;
    text-shadow: 0 0 15px rgba(231,76,60,0.3);
}
.admin-container { padding: 0 16px 100px; }

/* Admin menu cards */
.admin-menu { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.admin-menu-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: all 0.2s ease;
}
.admin-menu-card:active { transform: scale(0.97); }
.admin-menu-card svg { color: var(--accent-dim); flex-shrink: 0; }
.admin-menu-green { background: linear-gradient(135deg, rgba(46,204,113,0.12), rgba(46,204,113,0.03)); border-color: rgba(46,204,113,0.2); }
.admin-menu-blue { background: linear-gradient(135deg, rgba(52,152,219,0.12), rgba(52,152,219,0.03)); border-color: rgba(52,152,219,0.2); }
.admin-menu-icon { font-size: 2rem; width: 48px; text-align: center; flex-shrink: 0; }
.admin-menu-info { flex: 1; }
.admin-menu-label { font-weight: 800; font-size: 1rem; color: var(--accent); letter-spacing: 1px; }
.admin-menu-count { font-size: 0.8rem; color: var(--accent-dim); margin-top: 2px; }

/* Admin detail */
.admin-detail-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--accent-dim);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 8px;
}
.admin-detail-back:active { opacity: 0.6; }

.admin-user-card, .admin-group-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}
.admin-user-card:active, .admin-group-card:active { transform: scale(0.98); }
.admin-user-card.admin-user-premium-lifetime {
    background: linear-gradient(135deg, rgba(255,215,0,0.16), rgba(255,193,7,0.06));
    border: 1px solid rgba(255,215,0,0.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.admin-user-card.admin-user-premium-lifetime .admin-user-name { color: #FFD700; }
.admin-user-card.admin-user-premium-monthly {
    background: linear-gradient(135deg, rgba(192,192,192,0.16), rgba(160,160,170,0.06));
    border: 1px solid rgba(192,192,192,0.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.admin-user-card.admin-user-premium-monthly .admin-user-name { color: #C0C0C0; }
.admin-user-avatar {
    font-size: 1.6rem;
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}
.admin-user-info { flex: 1; min-width: 0; }
.admin-user-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-user-email {
    font-size: 0.75rem;
    color: var(--accent-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-user-meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.admin-user-last {
    font-size: 0.7rem;
    color: var(--accent-dim);
    background: rgba(255,255,255,0.05);
    padding: 3px 8px;
    border-radius: 6px;
}
.admin-delete-btn {
    background: rgba(231,76,60,0.15);
    border: 1px solid rgba(231,76,60,0.3);
    color: #E74C3C;
    border-radius: 8px;
    padding: 5px 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-delete-btn:hover { background: rgba(231,76,60,0.3); border-color: #E74C3C; }
.admin-delete-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-delete-spinner {
    width: 12px; height: 12px;
    border: 2px solid rgba(231,76,60,0.3);
    border-top-color: #E74C3C;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* ===== Admin Engagement Stats ===== */
.admin-engagement-stats { margin-bottom: 20px; }

.admin-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.admin-stat-card {
    background: linear-gradient(145deg, rgba(30,30,30,0.95), rgba(18,18,18,0.9));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}
.admin-stat-highlight {
    border-color: rgba(46,204,113,0.2);
}
.admin-stat-value {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: -1px;
}
.admin-stat-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--accent-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}
.admin-stat-bar {
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    margin-top: 10px;
    overflow: hidden;
}
.admin-stat-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}

.admin-metrics-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.admin-metric {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
}
.admin-metric-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    flex-shrink: 0;
}
.admin-metric-info { min-width: 0; }
.admin-metric-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--accent);
}
.admin-metric-label {
    font-size: 0.6rem;
    color: var(--accent-dim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Admin section labels */
.admin-section-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--accent-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding-left: 2px;
}

/* Admin chart cards */
.admin-chart-card {
    background: linear-gradient(145deg, rgba(30,30,30,0.95), rgba(18,18,18,0.9));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}
.admin-chart-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

/* Admin search bar */
.admin-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    margin-bottom: 12px;
}
.admin-search-input {
    flex: 1;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
}
.admin-search-input::placeholder { color: rgba(255,255,255,0.2); }

/* Admin user tags */
.admin-user-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.admin-tag {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}
.admin-tag-level {
    background: rgba(52,152,219,0.15);
    color: #3498DB;
}
.admin-tag-xp {
    background: rgba(255,215,0,0.12);
    color: #FFD700;
}
.admin-tag-social {
    background: rgba(155,89,182,0.12);
    color: #9B59B6;
}
.admin-tag-premium-lifetime {
    background: rgba(255,215,0,0.18);
    color: #FFD700;
    border: 1px solid rgba(255,215,0,0.35);
}
.admin-tag-premium-monthly {
    background: rgba(192,192,192,0.18);
    color: #C0C0C0;
    border: 1px solid rgba(192,192,192,0.35);
}

/* Admin online dot */
.admin-online-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #2ECC71;
    border-radius: 50%;
    margin-right: 4px;
    box-shadow: 0 0 6px rgba(46,204,113,0.6);
    animation: onlinePulse 2s ease infinite;
}