/**
 * KamiLabs User Widget Styles
 * Compatible avec le thème dark de kamilabs-theme
 */

/* =========================================
   VARIABLES
   ========================================= */
:root {
    --kl-user-bg: #1a1a2e;
    --kl-user-bg-light: #252542;
    --kl-user-border: #3a3a5c;
    --kl-user-text: #e4e4e7;
    --kl-user-text-muted: #a1a1aa;
    --kl-user-accent: #a855f7;
    --kl-user-accent-hover: #9333ea;
    --kl-user-success: #22c55e;
    --kl-user-error: #ef4444;
    --kl-user-warning: #f59e0b;
    --kl-user-cyan: #22d3ee;
    --kl-user-orange: #f97316;
    --kl-user-radius: 10px;
    --kl-user-radius-sm: 6px;
}

/* =========================================
   WIDGET CONTAINER
   ========================================= */
.kl-user-widget {
    position: relative;
    background: var(--kl-user-bg);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius);
    padding: 16px;
    color: var(--kl-user-text);
    font-size: 14px;
}

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

.kl-user-header-text {
    text-align: center;
    flex: 1;
}

.kl-user-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--kl-user-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.kl-user-title::before {
    content: '🎮';
}

.kl-user-greeting {
    display: block;
    font-size: 12px;
    color: var(--kl-user-text-muted);
}

.kl-user-name {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--kl-user-cyan);
}

/* =========================================
   LOGGED IN STATE
   ========================================= */
.kl-user-profile {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--kl-user-bg-light);
    border-radius: var(--kl-user-radius-sm);
}

.kl-user-avatar {
    position: relative;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    align-self: flex-start;
}

.kl-user-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--kl-user-accent);
}

.kl-user-level-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: var(--kl-user-accent);
    color: white;
    font-size: 11px;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--kl-user-bg);
}

.kl-user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kl-user-level {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kl-level-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--kl-user-text);
}

.kl-level-bar {
    height: 8px;
    background: var(--kl-user-border);
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0;
}

.kl-level-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--kl-user-accent), var(--kl-user-cyan));
    border-radius: 3px;
    transition: width 0.3s ease;
}


.kl-level-xp {
    font-size: 11px;
    color: var(--kl-user-text-muted);
    margin-top: 2px;
}

/* =========================================
   XP GAIN ANIMATION
   ========================================= */
.kl-xp-gain-container {
    position: relative;
}

.kl-xp-gain-popup {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--kl-user-accent), var(--kl-user-cyan));
    color: white;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.5);
}

.kl-xp-gain-popup.animate {
    animation: xpGainPopup 2s ease-out forwards;
}

@keyframes xpGainPopup {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px) scale(0.5);
    }
    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1.1);
    }
    25% {
        transform: translateX(-50%) translateY(0) scale(1);
    }
    75% {
        opacity: 1;
        transform: translateX(-50%) translateY(-10px);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }
}

/* Glow effect on level bar when gaining XP */
.kl-level-bar.xp-gain-glow {
    animation: levelBarGlow 1.5s ease-out;
}

@keyframes levelBarGlow {
    0% {
        box-shadow: 0 0 5px var(--kl-user-accent), 0 0 10px var(--kl-user-accent);
    }
    50% {
        box-shadow: 0 0 15px var(--kl-user-accent), 0 0 30px var(--kl-user-cyan), 0 0 45px var(--kl-user-accent);
    }
    100% {
        box-shadow: none;
    }
}

/* Progress bar fill animation */
.kl-level-progress.xp-gain-fill {
    animation: progressFill 0.8s ease-out;
}

@keyframes progressFill {
    0% {
        filter: brightness(1.5);
    }
    50% {
        filter: brightness(2);
    }
    100% {
        filter: brightness(1);
    }
}

/* Points counter animation */
.kl-points-value.xp-gain-pulse {
    animation: pointsPulse 0.6s ease-out;
}

@keyframes pointsPulse {
    0% {
        transform: scale(1);
        color: var(--kl-user-orange);
    }
    50% {
        transform: scale(1.3);
        color: var(--kl-user-cyan);
    }
    100% {
        transform: scale(1);
        color: var(--kl-user-orange);
    }
}

.kl-user-points,
.kl-user-rank {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.kl-points-icon,
.kl-rank-icon {
    font-size: 14px;
}

.kl-points-value,
.kl-rank-value {
    font-weight: 600;
    color: var(--kl-user-orange);
}

.kl-points-label,
.kl-rank-label {
    color: var(--kl-user-text-muted);
}

/* Stats Grid */
.kl-user-stats {
    margin-bottom: 12px;
}

.kl-stats-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--kl-user-text-muted);
    margin-bottom: 8px;
}

.kl-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.kl-stat-item {
    text-align: center;
    padding: 8px;
    background: var(--kl-user-bg-light);
    border-radius: var(--kl-user-radius-sm);
}

.kl-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--kl-user-accent);
}

.kl-stat-label {
    font-size: 10px;
    color: var(--kl-user-text-muted);
    text-transform: uppercase;
}

/* Badges Preview */
.kl-user-badges-preview {
    display: block;
    margin-bottom: 12px;
    padding: 8px;
    background: var(--kl-user-bg-light);
    border-radius: var(--kl-user-radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

a.kl-user-badges-preview:hover {
    background: var(--kl-user-bg-hover, rgba(255,255,255,0.1));
    transform: scale(1.02);
}

.kl-badges-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.kl-badge-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    border: 2px solid;
    cursor: pointer;
    transition: transform 0.2s;
}

.kl-badge-icon:hover {
    transform: scale(1.1);
}

.kl-badge-more {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    background: var(--kl-user-border);
    color: var(--kl-user-text-muted);
}

/* =========================================
   USER CREDITS SECTION (Widget)
   ========================================= */
.kl-user-credits {
    margin-bottom: 12px;
}

.kl-credits-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--kl-user-bg-light);
    border-radius: var(--kl-user-radius-sm);
}

.kl-credits-icon {
    font-size: 14px;
}

.kl-credits-amount {
    font-size: 14px;
    font-weight: 600;
    color: #fbbf24;
}

.kl-credits-label {
    font-size: 12px;
    color: var(--kl-user-text-muted);
    flex: 1;
}

.kl-credits-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    background: var(--kl-user-border);
    border-radius: 4px;
    color: var(--kl-user-text);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.kl-credits-add-btn:hover {
    background: var(--kl-user-warning);
    color: #1a1a2e;
    text-decoration: none;
}

/* User Menu */
.kl-user-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kl-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--kl-user-bg-light);
    border-radius: var(--kl-user-radius-sm);
    text-decoration: none;
    color: var(--kl-user-text);
    transition: all 0.2s;
    border: 1px solid transparent;
}

.kl-menu-item:hover {
    background: var(--kl-user-accent);
    color: white;
    border-color: var(--kl-user-accent);
    text-decoration: none;
}

.kl-menu-icon {
    font-size: 16px;
}

.kl-menu-text {
    font-size: 13px;
    font-weight: 500;
}

.kl-logout-btn:hover {
    background: var(--kl-user-error);
    border-color: var(--kl-user-error);
}

/* Bouton Mute/Unmute Son */
.kl-sound-toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--kl-user-bg-light);
    border: 1px solid var(--kl-user-border);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}

.kl-sound-toggle:hover {
    background: var(--kl-user-accent);
    border-color: var(--kl-user-accent);
    transform: scale(1.1);
}

.kl-sound-icon {
    font-size: 14px;
    line-height: 1;
}

/* État par défaut : son activé */
.kl-sound-toggle .kl-sound-on {
    display: inline;
}

.kl-sound-toggle .kl-sound-off {
    display: none;
}

/* État muted : son désactivé */
.kl-sound-toggle.kl-muted .kl-sound-on {
    display: none;
}

.kl-sound-toggle.kl-muted .kl-sound-off {
    display: inline;
}

.kl-sound-toggle.kl-muted {
    opacity: 0.6;
}

.kl-sound-toggle.kl-muted:hover {
    opacity: 1;
}

/* =========================================
   LOGGED OUT STATE (Login Form)
   ========================================= */
.kl-login-form,
.kl-register-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.kl-form-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--kl-user-text-muted);
}

.kl-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.kl-input-icon {
    position: absolute;
    left: 12px;
    font-size: 14px;
    pointer-events: none;
}

.kl-input-wrapper input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    background: var(--kl-user-bg-light);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius-sm);
    color: var(--kl-user-text);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.kl-input-wrapper input:focus {
    outline: none;
    border-color: var(--kl-user-accent);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

.kl-input-wrapper input::placeholder {
    color: var(--kl-user-text-muted);
}

.kl-password-toggle {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.kl-password-toggle:hover {
    opacity: 1;
}

/* Checkbox */
.kl-remember-group {
    flex-direction: row;
}

.kl-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--kl-user-text-muted);
}

.kl-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--kl-user-accent);
    cursor: pointer;
}

.kl-checkbox-text a {
    color: var(--kl-user-cyan);
}

/* Buttons */
.kl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    border-radius: var(--kl-user-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.kl-btn-primary {
    background: linear-gradient(135deg, var(--kl-user-accent), var(--kl-user-accent-hover));
    color: white;
}

.kl-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
}

.kl-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.kl-btn-secondary {
    background: var(--kl-user-bg-light);
    color: var(--kl-user-text);
    border: 1px solid var(--kl-user-border);
}

.kl-btn-secondary:hover {
    border-color: var(--kl-user-accent);
    color: var(--kl-user-accent);
}

.kl-btn-loader {
    animation: spin 1s linear infinite;
}

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

/* Form Message */
.kl-form-message {
    padding: 8px 12px;
    border-radius: var(--kl-user-radius-sm);
    font-size: 12px;
    text-align: center;
    display: none;
}

.kl-form-message.success {
    display: block;
    background: rgba(34, 197, 94, 0.1);
    color: var(--kl-user-success);
    border: 1px solid var(--kl-user-success);
}

.kl-form-message.error {
    display: block;
    background: rgba(239, 68, 68, 0.1);
    color: var(--kl-user-error);
    border: 1px solid var(--kl-user-error);
}

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

.kl-divider::before,
.kl-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--kl-user-border);
}

.kl-divider span {
    padding: 0 12px;
    color: var(--kl-user-text-muted);
    font-size: 12px;
}

/* Register CTA */
.kl-register-cta {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kl-register-cta p {
    margin: 0 0 10px 0;
    color: var(--kl-user-text-muted);
    font-size: 13px;
}

/* Forgot Password */
.kl-forgot-password {
    text-align: center;
    margin-top: 12px;
}

.kl-forgot-password a {
    color: var(--kl-user-text-muted);
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s;
}

.kl-forgot-password a:hover {
    color: var(--kl-user-cyan);
}

/* =========================================
   MODAL (Register)
   ========================================= */
.kl-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.kl-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.kl-modal-content {
    position: relative;
    background: var(--kl-user-bg);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius);
    padding: 24px;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn 0.3s ease;
}

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

.kl-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--kl-user-text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
}

.kl-modal-close:hover {
    color: var(--kl-user-error);
}

.kl-modal-title {
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--kl-user-accent);
    text-align: center;
}

/* =========================================
   MODAL INSCRIPTION - Style compact
   ========================================= */
.kl-register-modal .kl-modal-content {
    max-width: 380px !important;
    width: 380px !important;
    padding: 20px !important;
    background: var(--kl-user-bg) !important;
    border: 1px solid var(--kl-user-border) !important;
    border-radius: 12px !important;
}

.kl-register-modal .kl-modal-title {
    font-size: 18px;
    margin-bottom: 16px;
}

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

.kl-register-modal .kl-form-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--kl-user-text-muted);
    margin-bottom: 4px;
    display: block;
}

.kl-register-modal .kl-form-group input[type="text"],
.kl-register-modal .kl-form-group input[type="email"],
.kl-register-modal .kl-form-group input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    background: var(--kl-user-bg-light);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius-sm);
    color: var(--kl-user-text);
    font-size: 13px;
    transition: border-color 0.2s;
}

.kl-register-modal .kl-form-group input:focus {
    outline: none;
    border-color: var(--kl-user-accent);
}

.kl-register-modal .kl-form-group input::placeholder {
    color: var(--kl-user-text-muted);
    opacity: 0.6;
}

.kl-register-modal .kl-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
}

.kl-register-modal .kl-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    accent-color: var(--kl-user-accent);
}

.kl-register-modal .kl-checkbox-text {
    color: var(--kl-user-text-muted);
    line-height: 1.4;
}

.kl-register-modal .kl-checkbox-text a {
    color: var(--kl-user-cyan);
}

.kl-register-modal .kl-register-btn {
    width: 100%;
    margin-top: 16px;
    padding: 12px;
}

/* Benefits List - Compact */
.kl-benefits {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--kl-user-border);
}

.kl-benefits h4 {
    margin: 0 0 8px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--kl-user-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kl-benefits ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.kl-benefits li {
    font-size: 11px;
    color: var(--kl-user-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 480px) {
    .kl-user-profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .kl-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .kl-modal-content {
        padding: 16px;
    }
}

/* =========================================
   LIGHT THEME OVERRIDE (si nécessaire)
   ========================================= */
body.light-mode .kl-user-widget,
.light-mode .kl-user-widget {
    --kl-user-bg: #ffffff;
    --kl-user-bg-light: #f4f4f5;
    --kl-user-border: #e4e4e7;
    --kl-user-text: #18181b;
    --kl-user-text-muted: #71717a;
}

/* =========================================
   DASHBOARD PAGE
   ========================================= */
.kl-dashboard {
    background: var(--kl-user-bg);
    border-radius: var(--kl-user-radius);
    padding: 24px;
    color: var(--kl-user-text);
    max-width: 1000px;
    margin: 0 auto;
}

/* Dashboard Header */
.kl-dashboard-header {
    background: linear-gradient(135deg, var(--kl-user-bg-light), var(--kl-user-bg));
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius);
    padding: 24px;
    margin-bottom: 24px;
}

.kl-dashboard-user {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

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

.kl-dashboard-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--kl-user-accent);
}

.kl-dashboard-level-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: var(--kl-user-accent);
    color: white;
    font-size: 16px;
    font-weight: 700;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--kl-user-bg);
}

.kl-dashboard-info {
    flex: 1;
    min-width: 200px;
}

.kl-dashboard-username {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--kl-user-cyan);
}

.kl-dashboard-meta {
    margin: 0 0 12px 0;
    color: var(--kl-user-text-muted);
    font-size: 14px;
}

.kl-dashboard-level-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kl-level-progress-container {
    height: 8px;
    background: var(--kl-user-border);
    border-radius: 4px;
    overflow: hidden;
}

.kl-level-text {
    font-size: 11px;
    color: var(--kl-user-text-muted);
}

.kl-dashboard-quick-stats {
    display: flex;
    gap: 20px;
}

.kl-quick-stat {
    text-align: center;
    padding: 16px 24px;
    background: var(--kl-user-bg);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius-sm);
}

.kl-quick-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--kl-user-accent);
}

.kl-quick-stat-label {
    font-size: 12px;
    color: var(--kl-user-text-muted);
}

/* Dashboard Tabs */
.kl-dashboard-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--kl-user-border);
    padding-bottom: 12px;
}

.kl-dashboard-tabs .kl-tab-btn {
    padding: 12px 20px;
    background: var(--kl-user-bg-light);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius-sm);
    color: var(--kl-user-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kl-dashboard-tabs .kl-tab-btn:hover {
    border-color: var(--kl-user-accent);
    color: var(--kl-user-accent);
}

.kl-dashboard-tabs .kl-tab-btn.active {
    background: var(--kl-user-accent);
    border-color: var(--kl-user-accent);
    color: white;
}

.kl-tab-count {
    font-size: 11px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

/* Tab Content */
.kl-tab-content {
    display: none;
}

.kl-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Dashboard Grid */
.kl-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* Dashboard Cards */
.kl-dashboard-card {
    background: var(--kl-user-bg-light);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius);
    padding: 20px;
}

.kl-dashboard-card h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--kl-user-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Stats Detail */
.kl-stats-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kl-stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--kl-user-bg);
    border-radius: var(--kl-user-radius-sm);
}

.kl-stat-row .kl-stat-icon {
    font-size: 20px;
}

.kl-stat-row .kl-stat-name {
    flex: 1;
    color: var(--kl-user-text-muted);
}

.kl-stat-row .kl-stat-value {
    font-weight: 600;
    color: var(--kl-user-accent);
    font-size: 16px;
}

/* Credits row - special styling */
.kl-stat-credits {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(147, 51, 234, 0.1));
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.kl-stat-credits .kl-stat-value {
    color: #00d4ff;
    font-size: 18px;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

/* Badges List (in profile) */
.kl-badges-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kl-badge-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--kl-user-bg);
    border-radius: var(--kl-user-radius-sm);
    border-left: 3px solid var(--badge-color, var(--kl-user-accent));
}

.kl-badge-item .kl-badge-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--badge-color) 20%, transparent);
    border-radius: 50%;
}

.kl-badge-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kl-badge-info .kl-badge-name {
    font-weight: 600;
    color: var(--kl-user-text);
}

.kl-badge-info .kl-badge-date {
    font-size: 11px;
    color: var(--kl-user-text-muted);
}

/* Badges Grid (full page) */
.kl-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.kl-badge-card {
    position: relative;
    padding: 20px;
    background: var(--kl-user-bg);
    border: 2px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius);
    text-align: center;
    transition: all 0.2s;
}

.kl-badge-card.unlocked {
    border-color: var(--badge-color, var(--kl-user-accent));
}

.kl-badge-card.locked {
    opacity: 0.5;
    filter: grayscale(1);
}

.kl-badge-card .kl-badge-icon {
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px auto;
    width: auto;
    height: auto;
    background: none;
    border: none;
    border-radius: 0;
    line-height: 1;
}

.kl-badge-card .kl-badge-name {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--kl-user-text);
    margin-bottom: 4px;
}

.kl-badge-card .kl-badge-desc {
    display: block;
    font-size: 11px;
    color: var(--kl-user-text-muted);
    margin-bottom: 8px;
}

.kl-badge-card .kl-badge-rarity {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 10px;
    background: var(--badge-color, var(--kl-user-accent));
    color: white;
}

.kl-badge-card .kl-badge-locked-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 16px;
}

/* Rarity colors */
.kl-badge-card.rarity-common .kl-badge-rarity { background: #71717a; }
.kl-badge-card.rarity-rare .kl-badge-rarity { background: #3b82f6; }
.kl-badge-card.rarity-epic .kl-badge-rarity { background: #8b5cf6; }
.kl-badge-card.rarity-legendary .kl-badge-rarity { background: linear-gradient(135deg, #f59e0b, #ef4444); }

/* Progress bar pour badges non débloqués */
.kl-badge-progress {
    width: 100%;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kl-badge-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.kl-badge-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--badge-color, #a855f7), var(--kl-user-cyan, #06b6d4));
    border-radius: 3px;
    transition: width 0.5s ease;
}

.kl-badge-progress-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--kl-user-cyan);
    min-width: 40px;
    text-align: right;
}

/* Badge avec progression > 0 - ressort visuellement */
.kl-badge-card.locked:has(.kl-badge-progress-fill[style*="width: 0%"]) {
    opacity: 0.5;
}

.kl-badge-card.locked:has(.kl-badge-progress-fill:not([style*="width: 0%"])) {
    opacity: 0.85;
    border-color: rgba(6, 182, 212, 0.3);
}

/* Check pour badges débloqués */
.kl-badge-unlocked-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

/* =========================================
   BADGE CATEGORIES (zones par jeu)
   ========================================= */
.kl-badges-overview {
    margin-bottom: 24px;
    text-align: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.kl-badges-overview h3 {
    font-size: 20px;
    color: #fff;
    margin: 0;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
}

/* Conteneur de catégorie - Design carte moderne */
.kl-badge-category {
    background: linear-gradient(145deg, var(--cat-bg) 0%, rgba(15, 15, 25, 0.95) 100%);
    border: 2px solid var(--cat-color);
    border-radius: 20px;
    padding: 0;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 40px color-mix(in srgb, var(--cat-color) 15%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kl-badge-category:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.4),
        0 0 60px color-mix(in srgb, var(--cat-color) 25%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Header de catégorie avec gradient */
.kl-badge-category-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    margin: 0;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--cat-color) 25%, transparent) 0%,
        color-mix(in srgb, var(--cat-color) 8%, transparent) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--cat-color) 40%, transparent);
}

/* Icône de catégorie avec cercle coloré */
.kl-badge-category-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--cat-color) 30%, transparent) 0%,
        color-mix(in srgb, var(--cat-color) 15%, transparent) 100%);
    border-radius: 14px;
    border: 2px solid color-mix(in srgb, var(--cat-color) 50%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cat-color) 30%, transparent);
}

.kl-badge-category-name {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    flex: 1;
    text-shadow: 0 2px 8px color-mix(in srgb, var(--cat-color) 40%, transparent);
    letter-spacing: 0.5px;
}

/* Compteur avec design pill */
.kl-badge-category-count {
    background: linear-gradient(135deg, var(--cat-color) 0%, color-mix(in srgb, var(--cat-color) 70%, #000) 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow:
        0 4px 12px color-mix(in srgb, var(--cat-color) 40%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    letter-spacing: 0.5px;
}

/* Grille de badges dans la catégorie */
.kl-badge-category .kl-badges-grid {
    margin: 0;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
}

/* Barre de progression sous le header */
.kl-badge-category-header::after {
    display: none;
}

/* === STYLES SPÉCIFIQUES PAR CATÉGORIE === */

/* Général - Violet/Indigo */
.kl-badge-category[style*="--cat-color: #6366f1"] {
    --glow-color: rgba(99, 102, 241, 0.4);
}

/* Path of Exile 2 - Rouge/Orange */
.kl-badge-category[style*="--cat-color: #e63946"] {
    --glow-color: rgba(230, 57, 70, 0.4);
}

/* Diablo 4 - Rouge sombre */
.kl-badge-category[style*="--cat-color: #991b1b"] {
    --glow-color: rgba(153, 27, 27, 0.4);
}

/* Hytale - Vert/Cyan */
.kl-badge-category[style*="--cat-color: #10b981"] {
    --glow-color: rgba(16, 185, 129, 0.4);
}

/* Animation subtile au survol des badges dans une catégorie */
.kl-badge-category:hover .kl-badge-card {
    border-color: color-mix(in srgb, var(--cat-color) 30%, var(--badge-color));
}

/* XP Legend */
.kl-xp-legend {
    margin-bottom: 16px;
}

.kl-xp-legend h3 {
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--kl-user-cyan);
}

.kl-xp-sources {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.kl-xp-source {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--kl-user-bg);
    border-radius: var(--kl-user-radius-sm);
    border: 1px solid var(--kl-user-border);
    font-size: 13px;
}

.kl-xp-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.kl-xp-action {
    flex: 1;
    color: var(--kl-user-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kl-xp-value {
    font-weight: 700;
    color: var(--kl-user-success);
    white-space: nowrap;
}

.kl-xp-limit {
    font-size: 11px;
    color: var(--kl-user-text-muted);
    white-space: nowrap;
}

/* Responsive pour petits écrans */
@media (max-width: 600px) {
    .kl-xp-sources {
        grid-template-columns: 1fr;
    }

    .kl-xp-source {
        flex-wrap: wrap;
    }

    .kl-xp-limit {
        width: 100%;
        margin-left: 24px;
        margin-top: 2px;
    }
}

/* History List */
.kl-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kl-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--kl-user-bg);
    border-radius: var(--kl-user-radius-sm);
}

.kl-history-item .kl-history-points {
    font-weight: 700;
    font-size: 16px;
    min-width: 50px;
}

.kl-history-item.positive .kl-history-points {
    color: var(--kl-user-success);
}

.kl-history-item.negative .kl-history-points {
    color: var(--kl-user-error);
}

.kl-history-item .kl-history-reason {
    flex: 1;
    color: var(--kl-user-text);
}

.kl-history-item .kl-history-date {
    font-size: 11px;
    color: var(--kl-user-text-muted);
}

/* ============================================
   ACTIVITY PAGE - Refonte UX 2026
   ============================================ */

/* Stats rapides de la semaine */
.kl-activity-stats {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--kl-user-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.kl-activity-stats-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.kl-activity-stats-icon {
    font-size: 24px;
}

.kl-activity-stats-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--kl-user-text);
}

.kl-activity-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.kl-stat-card {
    background: var(--kl-user-bg);
    border-radius: var(--kl-user-radius-sm);
    padding: 16px;
    text-align: center;
    border: 1px solid var(--kl-user-border);
}

.kl-stat-card .kl-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.kl-stat-card .kl-stat-label {
    font-size: 12px;
    color: var(--kl-user-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kl-stat-xp .kl-stat-value { color: var(--kl-user-success); }
.kl-stat-actions .kl-stat-value { color: var(--kl-user-cyan); }
.kl-stat-badges .kl-stat-value { color: #f59e0b; }
.kl-stat-streak .kl-stat-value { color: #ef4444; }

/* Comment gagner XP - Cards améliorées */
.kl-xp-tips {
    background: var(--kl-user-card-bg);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius);
    margin-bottom: 20px;
    overflow: hidden;
}

.kl-xp-tips-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    font-weight: 600;
    color: var(--kl-user-cyan);
    transition: background 0.2s;
}

.kl-xp-tips-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.kl-xp-tips-toggle {
    transition: transform 0.3s;
    color: var(--kl-user-text-muted);
}

.kl-xp-tips.collapsed .kl-xp-tips-toggle {
    transform: rotate(-90deg);
}

.kl-xp-tips.collapsed .kl-xp-tips-grid {
    display: none;
}

.kl-xp-tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 0 20px 20px;
}

.kl-xp-tip-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--kl-user-bg);
    border-radius: var(--kl-user-radius-sm);
    border: 1px solid var(--kl-user-border);
    transition: transform 0.2s, border-color 0.2s;
}

.kl-xp-tip-card:hover {
    transform: translateY(-2px);
    border-color: var(--kl-user-cyan);
}

.kl-xp-tip-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.kl-xp-tip-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kl-xp-tip-action {
    font-weight: 600;
    color: var(--kl-user-text);
    font-size: 14px;
}

.kl-xp-tip-details {
    font-size: 12px;
    color: var(--kl-user-success);
}

/* Bonus uniques - style différencié */
.kl-xp-tip-bonus {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    border-color: rgba(245, 158, 11, 0.3);
}

.kl-xp-tip-bonus:hover {
    border-color: #f59e0b;
}

.kl-xp-tip-bonus .kl-xp-tip-details {
    color: #f59e0b;
}

/* Timeline d'activité */
.kl-activity-timeline {
    background: var(--kl-user-card-bg);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius);
    padding: 20px;
}

.kl-activity-timeline h3 {
    margin: 0 0 20px 0;
    font-size: 16px;
    color: var(--kl-user-cyan);
}

.kl-timeline-day {
    margin-bottom: 24px;
}

.kl-timeline-day:last-child {
    margin-bottom: 0;
}

.kl-timeline-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--kl-user-border);
}

.kl-timeline-date-icon {
    font-size: 16px;
}

.kl-timeline-date-label {
    font-weight: 600;
    color: var(--kl-user-text);
    font-size: 14px;
}

.kl-timeline-entries {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 12px;
    border-left: 2px solid var(--kl-user-border);
    margin-left: 8px;
}

.kl-timeline-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--kl-user-bg);
    border-radius: var(--kl-user-radius-sm);
    position: relative;
    transition: transform 0.2s;
}

.kl-timeline-entry:hover {
    transform: translateX(4px);
}

.kl-timeline-entry::before {
    content: '';
    position: absolute;
    left: -18px;
    width: 8px;
    height: 8px;
    background: var(--kl-user-border);
    border-radius: 50%;
}

.kl-timeline-entry.positive::before {
    background: var(--kl-user-success);
}

.kl-timeline-entry.negative::before {
    background: var(--kl-user-error);
}

.kl-timeline-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.kl-timeline-xp {
    font-weight: 700;
    min-width: 65px;
    font-size: 14px;
}

.kl-timeline-entry.positive .kl-timeline-xp {
    color: var(--kl-user-success);
}

.kl-timeline-entry.negative .kl-timeline-xp {
    color: var(--kl-user-error);
}

/* Taille XP selon importance */
.kl-timeline-entry.big .kl-timeline-xp {
    font-size: 18px;
}

.kl-timeline-entry.big {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.kl-timeline-entry.medium .kl-timeline-xp {
    font-size: 16px;
}

.kl-timeline-reason {
    flex: 1;
    color: var(--kl-user-text);
    font-size: 14px;
}

.kl-timeline-time {
    font-size: 12px;
    color: var(--kl-user-text-muted);
    flex-shrink: 0;
}

/* Empty state */
.kl-empty-activity {
    text-align: center;
    padding: 40px 20px;
}

.kl-empty-activity .kl-empty-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.kl-empty-activity p {
    font-size: 18px;
    font-weight: 600;
    color: var(--kl-user-text);
    margin: 0 0 8px 0;
}

.kl-empty-activity .kl-empty-hint {
    font-size: 14px;
    color: var(--kl-user-text-muted);
}

/* Responsive Activity */
@media (max-width: 900px) {
    .kl-activity-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kl-xp-tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .kl-activity-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kl-stat-card .kl-stat-value {
        font-size: 20px;
    }

    .kl-xp-tips-grid {
        grid-template-columns: 1fr;
    }

    .kl-timeline-entry {
        flex-wrap: wrap;
    }

    .kl-timeline-time {
        width: 100%;
        margin-top: 4px;
        padding-left: 32px;
    }
}

/* Favorites List */
.kl-favorites-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kl-favorite-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--kl-user-bg);
    border-radius: var(--kl-user-radius-sm);
}

.kl-favorite-item .kl-fav-type {
    padding: 4px 8px;
    background: var(--kl-user-accent);
    color: white;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
}

.kl-favorite-item .kl-fav-link {
    flex: 1;
    color: var(--kl-user-cyan);
    text-decoration: none;
}

.kl-favorite-item .kl-fav-link:hover {
    text-decoration: underline;
}

.kl-favorite-item .kl-fav-date {
    font-size: 11px;
    color: var(--kl-user-text-muted);
}

/* Settings Form */
.kl-settings-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kl-settings-form .kl-form-group input,
.kl-settings-form .kl-form-group textarea {
    width: 100%;
    padding: 12px;
    background: var(--kl-user-bg);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius-sm);
    color: var(--kl-user-text);
    font-size: 14px;
}

.kl-settings-form .kl-form-group input:focus,
.kl-settings-form .kl-form-group textarea:focus {
    outline: none;
    border-color: var(--kl-user-accent);
}

.kl-settings-form .kl-form-group input[readonly] {
    opacity: 0.6;
    cursor: not-allowed;
}

.kl-settings-form .kl-form-group small {
    font-size: 11px;
    color: var(--kl-user-text-muted);
}

/* Danger Zone */
.kl-danger-zone {
    border-color: var(--kl-user-error);
}

.kl-danger-zone h3 {
    color: var(--kl-user-error);
}

.kl-btn-danger {
    background: var(--kl-user-error);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: var(--kl-user-radius-sm);
    cursor: pointer;
}

.kl-btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Empty Message */
.kl-empty-message {
    text-align: center;
    padding: 24px;
    color: var(--kl-user-text-muted);
    font-style: italic;
}

/* Login Required */
.kl-login-required {
    text-align: center;
    padding: 60px 20px;
}

.kl-login-required h2 {
    margin: 0 0 16px 0;
    font-size: 24px;
    color: var(--kl-user-text);
}

.kl-login-required p {
    color: var(--kl-user-text-muted);
    margin: 0 0 24px 0;
}

.kl-login-hint {
    margin-top: 24px !important;
    font-size: 13px;
}

/* Responsive Dashboard */
@media (max-width: 768px) {
    .kl-dashboard {
        padding: 16px;
    }

    .kl-dashboard-user {
        flex-direction: column;
        text-align: center;
    }

    .kl-dashboard-quick-stats {
        width: 100%;
        justify-content: center;
    }

    .kl-dashboard-tabs {
        justify-content: center;
    }

    .kl-dashboard-tabs .kl-tab-btn {
        padding: 10px 14px;
        font-size: 12px;
    }

    .kl-badges-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================
   DESKTOP OPTIMIZATION - Mon Compte Page
   ========================================= */

/* Centrer le titre "Mon Compte" quand le dashboard est présent */
.page-content:has(.kl-dashboard) .entry-header {
    text-align: center;
    margin-bottom: 24px;
}

.page-content:has(.kl-dashboard) .entry-title {
    display: inline-block;
    position: relative;
    padding-bottom: 12px;
}

.page-content:has(.kl-dashboard) .entry-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--kl-user-accent), var(--kl-user-cyan));
    border-radius: 3px;
}

/* Layout optimisé desktop : rapprocher le sidebar du contenu */
@media (min-width: 1024px) {
    /* Réduire le gap entre content et sidebar */
    body:has(.kl-dashboard) #content.site-content > .container {
        gap: 20px;
    }

    /* Agrandir le dashboard pour occuper plus d'espace */
    body:has(.kl-dashboard) .kl-dashboard {
        max-width: 100%;
    }

    /* Alternative: Centrer content+sidebar ensemble */
    body:has(.kl-dashboard) #content.site-content > .container {
        max-width: 1400px;
        margin: 0 auto;
        justify-content: center;
    }
}

/* =========================================
   BADGE NOTIFICATION OVERLAY
   Animation de célébration badge débloqué
   ========================================= */

/* Widget parent doit avoir position relative pour l'overlay */
.kl-user-widget.kl-widget-has-overlay {
    position: relative;
    overflow: hidden;
}

/* Overlay - Même taille que le widget (position absolute + inset 0) */
.kl-badge-notification-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
    border: 2px solid var(--badge-color, #ffd700);
    border-radius: var(--kl-user-radius);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    box-shadow:
        0 0 30px color-mix(in srgb, var(--badge-color, #ffd700) 40%, transparent),
        inset 0 0 60px color-mix(in srgb, var(--badge-color, #ffd700) 10%, transparent);
}

/* Overlay actif avec animation */
.kl-badge-notification-overlay.active {
    opacity: 1;
    pointer-events: auto;
    animation: badgeOverlayReveal 4.5s ease-in-out forwards;
}

@keyframes badgeOverlayReveal {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    8% {
        opacity: 1;
        transform: scale(1.02);
    }
    12% {
        transform: scale(1);
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        pointer-events: none;
    }
}

/* Contenu de la notification */
.kl-badge-notif-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    z-index: 2;
}

/* Titre "HAUT FAIT DÉBLOQUÉ" */
.kl-badge-notif-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    animation: badgeTitlePulse 1.5s ease-in-out infinite;
}

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

/* Icône du badge (grand au centre) */
.kl-badge-notif-icon {
    font-size: 56px;
    line-height: 1;
    filter: drop-shadow(0 0 20px var(--badge-color, #ffd700));
    animation: badgeIconEntrance 0.8s ease-out forwards, badgeIconFloat 2s ease-in-out 0.8s infinite;
}

@keyframes badgeIconEntrance {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    60% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

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

/* Nom du badge */
.kl-badge-notif-name {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    margin-top: 4px;
}

/* Description du badge */
.kl-badge-notif-desc {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    margin-top: 6px;
    padding: 0 10px;
    line-height: 1.4;
    max-width: 200px;
    text-align: center;
}

/* Rareté avec couleur */
.kl-badge-notif-rarity {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-top: 4px;
}

.kl-badge-notif-rarity.kl-rarity-common {
    background: linear-gradient(135deg, #71717a, #52525b);
    color: #ffffff;
}

.kl-badge-notif-rarity.kl-rarity-rare {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.kl-badge-notif-rarity.kl-rarity-epic {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
}

.kl-badge-notif-rarity.kl-rarity-legendary {
    background: linear-gradient(135deg, #f59e0b, #ef4444, #f59e0b);
    background-size: 200% 200%;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
    animation: legendaryShine 2s ease-in-out infinite;
}

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

/* Confettis CSS */
.kl-badge-notif-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.kl-badge-notif-overlay.active .kl-badge-notif-confetti::before,
.kl-badge-notif-overlay.active .kl-badge-notif-confetti::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Particules de confettis générées par JS */
.kl-confetti-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    opacity: 0;
    animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(-20px) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(200px) rotate(720deg) scale(0.5);
    }
}

/* Étoiles brillantes autour */
.kl-badge-notification-overlay::before,
.kl-badge-notification-overlay::after {
    content: '✦';
    position: absolute;
    font-size: 16px;
    color: var(--badge-color, #ffd700);
    opacity: 0;
    animation: starSparkle 2s ease-in-out infinite;
}

.kl-badge-notification-overlay.active::before {
    top: 15%;
    left: 15%;
    animation-delay: 0s;
}

.kl-badge-notification-overlay.active::after {
    bottom: 20%;
    right: 15%;
    animation-delay: 0.5s;
}

@keyframes starSparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
}

/* DÉSACTIVÉ SUR MOBILE - Pas d'animation sur petits écrans */
@media (max-width: 768px) {
    .kl-badge-notification-overlay {
        display: none !important;
    }
}

/* ========================================
   XP NOTIFICATION OVERLAY
   Animation similaire aux hauts faits
   ======================================== */

.kl-xp-notification-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    border: 2px solid var(--kl-user-cyan, #06b6d4);
    border-radius: var(--kl-user-radius);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    box-shadow:
        0 0 30px color-mix(in srgb, var(--kl-user-cyan, #06b6d4) 40%, transparent),
        inset 0 0 60px color-mix(in srgb, var(--kl-user-cyan, #06b6d4) 10%, transparent);
}

/* Overlay actif avec animation */
.kl-xp-notification-overlay.active {
    opacity: 1;
    pointer-events: auto;
    animation: xpOverlayReveal 3s ease-in-out forwards;
}

@keyframes xpOverlayReveal {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    10% {
        opacity: 1;
        transform: scale(1.02);
    }
    15% {
        transform: scale(1);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        pointer-events: none;
    }
}

/* Contenu de la notification XP */
.kl-xp-notif-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    z-index: 2;
}

/* Titre "+XP" */
.kl-xp-notif-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--kl-user-cyan, #06b6d4);
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.8);
    animation: xpTitlePulse 1s ease-in-out infinite;
}

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

/* Montant d'XP (grand au centre) */
.kl-xp-notif-amount {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    color: #22c55e;
    text-shadow:
        0 0 20px rgba(34, 197, 94, 0.8),
        0 0 40px rgba(34, 197, 94, 0.4);
    animation: xpAmountEntrance 0.6s ease-out forwards, xpAmountPulse 1.5s ease-in-out 0.6s infinite;
}

@keyframes xpAmountEntrance {
    0% {
        opacity: 0;
        transform: scale(0) translateY(20px);
    }
    60% {
        transform: scale(1.3) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes xpAmountPulse {
    0%, 100% {
        transform: scale(1);
        text-shadow:
            0 0 20px rgba(34, 197, 94, 0.8),
            0 0 40px rgba(34, 197, 94, 0.4);
    }
    50% {
        transform: scale(1.05);
        text-shadow:
            0 0 30px rgba(34, 197, 94, 1),
            0 0 60px rgba(34, 197, 94, 0.6);
    }
}

/* Raison du gain d'XP */
.kl-xp-notif-reason {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    margin-top: 4px;
    padding: 0 15px;
    max-width: 220px;
    text-align: center;
    line-height: 1.3;
}

/* Particules d'XP */
.kl-xp-notif-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

/* Particule individuelle */
.kl-xp-particle {
    position: absolute;
    font-size: 14px;
    opacity: 0;
    animation: xpParticleRise 2s ease-out forwards;
}

@keyframes xpParticleRise {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) scale(0.5);
    }
}

/* Étoiles brillantes autour */
.kl-xp-notification-overlay::before,
.kl-xp-notification-overlay::after {
    content: '⭐';
    position: absolute;
    font-size: 14px;
    opacity: 0;
    animation: xpStarSparkle 1.5s ease-in-out infinite;
}

.kl-xp-notification-overlay.active::before {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.kl-xp-notification-overlay.active::after {
    bottom: 25%;
    right: 15%;
    animation-delay: 0.3s;
}

@keyframes xpStarSparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
}

/* Barre de niveau (mini-progression en bas) */
.kl-xp-notif-level-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    width: 100%;
    max-width: 200px;
}

.kl-xp-notif-level-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.kl-xp-notif-level-bar {
    width: 100%;
    height: 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.kl-xp-notif-level-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--kl-user-cyan, #06b6d4) 0%,
        #22c55e 50%,
        #4ade80 100%
    );
    border-radius: 5px;
    transition: width 0.3s ease-out;
    box-shadow:
        0 0 10px rgba(34, 197, 94, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
}

/* Animation de remplissage */
.kl-xp-notif-level-fill.animating {
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    animation: xpBarGlow 1.2s ease-out;
}

@keyframes xpBarGlow {
    0% {
        box-shadow:
            0 0 10px rgba(34, 197, 94, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow:
            0 0 20px rgba(34, 197, 94, 1),
            0 0 40px rgba(6, 182, 212, 0.8),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow:
            0 0 10px rgba(34, 197, 94, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

/* Shine effect sur la barre pendant l'animation */
.kl-xp-notif-level-fill.animating::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: xpBarShine 1.2s ease-out;
}

@keyframes xpBarShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Texte XP sous la barre */
.kl-xp-notif-level-xp {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-family: monospace;
    letter-spacing: 0.5px;
}

/* DÉSACTIVÉ SUR MOBILE */
@media (max-width: 768px) {
    .kl-xp-notification-overlay {
        display: none !important;
    }
}

/* ========================================
   LEVEL UP NOTIFICATION OVERLAY
   Animation épique pour les passages de niveau
   ======================================== */

.kl-levelup-notification-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 30%, #4a1a6b 60%, #6b2a8a 100%);
    border: 3px solid #f59e0b;
    border-radius: var(--kl-user-radius);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    box-shadow:
        0 0 40px rgba(245, 158, 11, 0.6),
        0 0 80px rgba(245, 158, 11, 0.3),
        inset 0 0 60px rgba(245, 158, 11, 0.15);
}

/* Overlay actif avec animation */
.kl-levelup-notification-overlay.active {
    opacity: 1;
    pointer-events: auto;
    animation: levelUpOverlayReveal 5s ease-in-out forwards;
}

@keyframes levelUpOverlayReveal {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    8% {
        opacity: 1;
        transform: scale(1.05);
    }
    12% {
        transform: scale(1);
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        pointer-events: none;
    }
}

/* Glow animé en arrière-plan */
.kl-levelup-glow {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at center, rgba(245, 158, 11, 0.4) 0%, transparent 70%);
    animation: levelUpGlowPulse 2s ease-in-out infinite;
    z-index: 0;
}

@keyframes levelUpGlowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* Contenu de la notification Level Up */
.kl-levelup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    z-index: 2;
}

/* Couronne en haut */
.kl-levelup-crown {
    font-size: 36px;
    animation: levelUpCrownBounce 1s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.8));
}

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

/* Titre "LEVEL UP !" */
.kl-levelup-title {
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #f59e0b;
    text-shadow:
        0 0 20px rgba(245, 158, 11, 1),
        0 0 40px rgba(245, 158, 11, 0.8),
        0 0 60px rgba(245, 158, 11, 0.4);
    animation: levelUpTitlePulse 1s ease-in-out infinite;
}

@keyframes levelUpTitlePulse {
    0%, 100% {
        transform: scale(1);
        text-shadow:
            0 0 20px rgba(245, 158, 11, 1),
            0 0 40px rgba(245, 158, 11, 0.8);
    }
    50% {
        transform: scale(1.05);
        text-shadow:
            0 0 30px rgba(245, 158, 11, 1),
            0 0 60px rgba(245, 158, 11, 1),
            0 0 80px rgba(245, 158, 11, 0.6);
    }
}

/* Container du numéro de niveau */
.kl-levelup-level-container {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
}

/* Cercle autour du niveau */
.kl-levelup-level-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 4px solid #f59e0b;
    border-radius: 50%;
    animation: levelUpCircleSpin 3s linear infinite;
    box-shadow:
        0 0 20px rgba(245, 158, 11, 0.6),
        inset 0 0 20px rgba(245, 158, 11, 0.2);
}

@keyframes levelUpCircleSpin {
    0% {
        transform: rotate(0deg);
        border-color: #f59e0b;
    }
    33% {
        border-color: #fbbf24;
    }
    66% {
        border-color: #fcd34d;
    }
    100% {
        transform: rotate(360deg);
        border-color: #f59e0b;
    }
}

/* Numéro du niveau (gros et doré) */
.kl-levelup-level-number {
    font-size: 48px;
    font-weight: 900;
    color: #fbbf24;
    text-shadow:
        0 0 20px rgba(251, 191, 36, 1),
        0 0 40px rgba(245, 158, 11, 0.8),
        2px 2px 0 rgba(0, 0, 0, 0.3);
    animation: levelUpNumberEntrance 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
               levelUpNumberPulse 1.5s ease-in-out 0.8s infinite;
}

@keyframes levelUpNumberEntrance {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-10deg);
    }
    60% {
        transform: scale(1.4) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

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

/* Sous-titre "Félicitations !" */
.kl-levelup-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* XP gagnés */
.kl-levelup-xp-gained {
    font-size: 16px;
    font-weight: 700;
    color: #22c55e;
    text-shadow:
        0 0 10px rgba(34, 197, 94, 0.8),
        0 0 20px rgba(34, 197, 94, 0.4);
    margin-top: 4px;
}

/* Conteneur des particules Level Up */
.kl-levelup-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

/* Particule individuelle Level Up */
.kl-levelup-particle {
    position: absolute;
    opacity: 0;
    animation: levelUpParticleRise 3s ease-out forwards;
}

@keyframes levelUpParticleRise {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-120px) scale(0.3) rotate(360deg);
    }
}

/* Étoiles scintillantes aux coins */
.kl-levelup-notification-overlay::before,
.kl-levelup-notification-overlay::after {
    content: '✨';
    position: absolute;
    font-size: 20px;
    opacity: 0;
    z-index: 3;
    animation: levelUpStarSparkle 1s ease-in-out infinite;
}

.kl-levelup-notification-overlay.active::before {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.kl-levelup-notification-overlay.active::after {
    bottom: 15%;
    right: 10%;
    animation-delay: 0.5s;
}

@keyframes levelUpStarSparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.3) rotate(180deg);
    }
}

/* DÉSACTIVÉ SUR MOBILE */
@media (max-width: 768px) {
    .kl-levelup-notification-overlay {
        display: none !important;
    }
}

/* ========================================
   WINNER ANNOUNCEMENT OVERLAY
   Animation épique pour les gagnants d'enchères
   ======================================== */

.kl-winner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0a1628 0%, #1a2744 30%, #1e3a5f 60%, #2d4a6f 100%);
    border-radius: 12px;
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transform: scale(0.8);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Bordure selon le tier */
.kl-winner-overlay.winner-gold {
    border: 3px solid #ffd700;
    box-shadow:
        0 0 40px rgba(255, 215, 0, 0.6),
        0 0 80px rgba(255, 215, 0, 0.3),
        inset 0 0 60px rgba(255, 215, 0, 0.1);
}

.kl-winner-overlay.winner-silver {
    border: 3px solid #c0c0c0;
    box-shadow:
        0 0 40px rgba(192, 192, 192, 0.6),
        0 0 80px rgba(192, 192, 192, 0.3),
        inset 0 0 60px rgba(192, 192, 192, 0.1);
}

.kl-winner-overlay.winner-bronze {
    border: 3px solid #cd7f32;
    box-shadow:
        0 0 40px rgba(205, 127, 50, 0.6),
        0 0 80px rgba(205, 127, 50, 0.3),
        inset 0 0 60px rgba(205, 127, 50, 0.1);
}

/* Overlay actif */
.kl-winner-overlay.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

/* Glow animé en arrière-plan */
.kl-winner-glow {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    animation: winnerGlowPulse 2s ease-in-out infinite;
    z-index: 0;
}

.winner-silver .kl-winner-glow {
    background: radial-gradient(circle at center, rgba(192, 192, 192, 0.3) 0%, transparent 70%);
}

.winner-bronze .kl-winner-glow {
    background: radial-gradient(circle at center, rgba(205, 127, 50, 0.3) 0%, transparent 70%);
}

@keyframes winnerGlowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.9;
    }
}

/* Particules */
.kl-winner-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.kl-winner-particle {
    position: absolute;
    font-size: 16px;
    animation: winnerParticleFall 3s linear infinite;
    opacity: 0;
}

@keyframes winnerParticleFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(300px) rotate(720deg);
        opacity: 0;
    }
}

/* Contenu */
.kl-winner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    z-index: 2;
}

/* Trophée en haut */
.kl-winner-trophy {
    font-size: 42px;
    animation: winnerTrophyBounce 1s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
}

@keyframes winnerTrophyBounce {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.15);
    }
}

/* Titre "GAGNANT !" */
.kl-winner-title {
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #ffd700;
    text-shadow:
        0 0 20px rgba(255, 215, 0, 1),
        0 0 40px rgba(255, 215, 0, 0.8);
    animation: winnerTitlePulse 1s ease-in-out infinite;
}

.winner-silver .kl-winner-title {
    color: #e8e8e8;
    text-shadow:
        0 0 20px rgba(192, 192, 192, 1),
        0 0 40px rgba(192, 192, 192, 0.8);
}

.winner-bronze .kl-winner-title {
    color: #e8a855;
    text-shadow:
        0 0 20px rgba(205, 127, 50, 1),
        0 0 40px rgba(205, 127, 50, 0.8);
}

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

/* Logo du serveur gagnant - Format 16:9 */
.kl-winner-server-logo {
    width: 280px;
    aspect-ratio: 16/9;
    border-radius: 10px;
    object-fit: contain;
    background: #0a0a15;
    border: 3px solid #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    animation: winnerLogoGlow 2s ease-in-out infinite;
}

.winner-silver .kl-winner-server-logo {
    border-color: #c0c0c0;
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.5);
}

.winner-bronze .kl-winner-server-logo {
    border-color: #cd7f32;
    box-shadow: 0 0 20px rgba(205, 127, 50, 0.5);
}

@keyframes winnerLogoGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 35px rgba(255, 215, 0, 0.8);
    }
}

.kl-winner-server-logo-placeholder {
    width: 280px;
    aspect-ratio: 16/9;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    border: 3px solid #ffd700;
}

/* Nom du serveur */
.kl-winner-server-name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Montant gagnant */
.kl-winner-bid-amount {
    font-size: 26px;
    font-weight: 800;
    color: #a855f7;
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
}

/* Sélection aléatoire (pas d'enchère) */
.kl-winner-bid-amount.kl-winner-random {
    font-size: 22px;
    color: #60a5fa;
    text-shadow: 0 0 15px rgba(96, 165, 250, 0.6);
}

/* Propriétaire */
.kl-winner-owner {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
}

/* Countdown avant nouvelle rotation */
.kl-winner-countdown {
    margin-top: 10px;
    padding: 8px 18px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    font-size: 15px;
    color: #4ade80;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.kl-winner-countdown span {
    font-weight: 700;
}

/* Responsive */
@media (max-width: 500px) {
    .kl-winner-trophy {
        font-size: 32px;
    }
    .kl-winner-title {
        font-size: 18px;
        letter-spacing: 2px;
    }
    .kl-winner-server-logo,
    .kl-winner-server-logo-placeholder {
        width: 180px;
    }
    .kl-winner-server-name {
        font-size: 16px;
        max-width: 180px;
    }
    .kl-winner-bid-amount {
        font-size: 18px;
    }
    .kl-winner-bid-amount.kl-winner-random {
        font-size: 16px;
    }
    .kl-winner-owner {
        font-size: 13px;
    }
    .kl-winner-countdown {
        font-size: 12px;
    }
}

/* =========================================
   ONGLET ENCHÈRES - MON COMPTE
   ========================================= */

/* Header Enchères */
.kl-auction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.kl-auction-header h2 {
    margin: 0;
    font-size: 1.4rem;
    color: #fff;
}

.kl-auction-balance {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.kl-balance-icon {
    font-size: 1.3rem;
}

.kl-balance-amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: #a855f7;
}

.kl-balance-label {
    color: var(--kl-user-text-muted);
    font-size: 0.9rem;
}

/* Effet si peu de crédits */
.kl-balance-low {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    animation: pulseBalance 2s ease-in-out infinite;
}

.kl-balance-low .kl-balance-amount {
    color: #ef4444;
}

@keyframes pulseBalance {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 15px 5px rgba(239, 68, 68, 0.2); }
}

/* Animation augmentation de crédits */
.kl-balance-increased {
    animation: balanceIncrease 1.5s ease;
}

@keyframes balanceIncrease {
    0% { transform: scale(1); }
    20% { transform: scale(1.15); background: rgba(34, 197, 94, 0.3); border-color: rgba(34, 197, 94, 0.5); }
    100% { transform: scale(1); }
}

.kl-balance-increased .kl-balance-amount {
    animation: balanceTextIncrease 1.5s ease;
}

@keyframes balanceTextIncrease {
    0% { color: #a855f7; }
    20% { color: #22c55e; text-shadow: 0 0 10px rgba(34, 197, 94, 0.5); }
    100% { color: #a855f7; }
}

/* Animation diminution de crédits */
.kl-balance-decreased {
    animation: balanceDecrease 1.5s ease;
}

@keyframes balanceDecrease {
    0% { transform: scale(1); }
    20% { transform: scale(0.95); background: rgba(239, 68, 68, 0.3); border-color: rgba(239, 68, 68, 0.5); }
    100% { transform: scale(1); }
}

.kl-balance-decreased .kl-balance-amount {
    animation: balanceTextDecrease 1.5s ease;
}

@keyframes balanceTextDecrease {
    0% { color: #a855f7; }
    20% { color: #ef4444; text-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
    100% { color: #a855f7; }
}

/* Animation nouvelle transaction */
.kl-tx-new {
    animation: newTransaction 2s ease;
}

@keyframes newTransaction {
    0% { background: rgba(168, 85, 247, 0.4); }
    100% { background: transparent; }
}

#kl-transactions-tbody {
    transition: opacity 0.15s ease;
}

/* Bouton obtenir crédits */
.kl-buy-credits-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.kl-buy-credits-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
    color: #fff;
}

.kl-buy-credits-pulse {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulseDot 1.5s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}

/* Sous-titre */
.kl-auction-subtitle {
    margin: 0 0 20px 0;
    color: var(--kl-user-text-muted);
    font-size: 0.9rem;
}

/* Grille des 3 slots */
.kl-auction-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

@media (max-width: 900px) {
    .kl-auction-slots {
        grid-template-columns: 1fr;
    }
}

/* Slot individuel */
.kl-auction-slot {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 2px solid var(--kl-user-border);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.kl-auction-slot:hover {
    transform: translateY(-3px);
}

.kl-auction-slot-gold {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

.kl-auction-slot-silver {
    border-color: #c0c0c0;
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.15);
}

.kl-auction-slot-bronze {
    border-color: #cd7f32;
    box-shadow: 0 0 20px rgba(205, 127, 50, 0.15);
}

/* Slot Header */
.kl-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--kl-user-border);
}

.kl-auction-slot-gold .kl-slot-header {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 184, 0, 0.08));
}

.kl-auction-slot-silver .kl-slot-header {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(160, 160, 160, 0.08));
}

.kl-auction-slot-bronze .kl-slot-header {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.15), rgba(184, 115, 51, 0.08));
}

.kl-slot-tier {
    font-weight: 700;
    font-size: 1.1rem;
}

.kl-slot-timer {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: #4ade80;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    min-width: 85px;
    text-align: center;
    display: inline-block;
}

.kl-slot-timer .kl-timer-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Timer warning (< 30 min) = orange */
.kl-timer-warning {
    color: #f97316 !important;
    background: rgba(249, 115, 22, 0.2) !important;
}

/* Timer critical (< 10 min) = rouge clignotant */
.kl-timer-critical {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.25) !important;
    animation: timerBlink 0.8s ease-in-out infinite;
}

.kl-timer-expired {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.15) !important;
}

@keyframes timerBlink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
    }
    50% {
        opacity: 0.6;
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.8);
    }
}

/* Slot Content */
.kl-slot-content {
    padding: 15px;
    text-align: center;
}

.kl-slot-server {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.kl-slot-logo {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}

.kl-slot-logo-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: var(--kl-user-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.kl-slot-server-name {
    font-weight: 600;
    color: #fff;
    font-size: 1.05rem;
}

.kl-slot-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--kl-user-text-muted);
    padding: 10px 0;
}

.kl-empty-icon {
    font-size: 2.5rem;
    opacity: 0.5;
}

.kl-slot-empty span:last-child {
    font-size: 1rem;
}

/* Slot Auction Info */
.kl-slot-auction {
    padding: 0 15px 15px;
    text-align: center;
}

.kl-auction-info {
    margin-bottom: 12px;
}

.kl-auction-current {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
}

.kl-auction-label {
    font-size: 0.85rem;
    color: var(--kl-user-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kl-auction-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #a855f7;
}

.kl-auction-value small {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--kl-user-text-muted);
    margin-top: 2px;
}

.kl-no-bid {
    color: var(--kl-user-text-muted);
    font-style: italic;
    font-size: 1rem;
}

.kl-auction-min {
    font-size: 0.9rem;
    color: var(--kl-user-text-muted);
}

.kl-auction-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.kl-status-open {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.kl-status-closed {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

/* User Bid Container - Dynamic updates */
.kl-user-bid-container {
    margin-top: 12px;
    text-align: center;
}

.kl-user-bid {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.kl-bid-active {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.kl-bid-outbid {
    color: #f87171;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.08));
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 10px 12px;
}

/* Message détaillé surpassé */
.kl-outbid-header {
    font-weight: 600;
    color: #ef4444;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.kl-outbid-details {
    font-size: 0.8rem;
    color: var(--kl-user-text-muted);
    line-height: 1.4;
}

.kl-outbid-diff {
    color: #ef4444;
    font-weight: 600;
}

/* Style amélioré pour "En tête" */
.kl-bid-winning {
    color: #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.08));
    border: 1px solid rgba(34, 197, 94, 0.3);
    padding: 10px 12px;
}

/* Slot Action */
.kl-slot-action {
    padding: 15px;
    border-top: 1px solid var(--kl-user-border);
    text-align: center;
    margin-top: auto; /* Pousse le bouton vers le bas du slot */
}

.kl-btn-auction {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.kl-btn-auction:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
}

.kl-btn-auction.kl-btn-cooldown {
    background: linear-gradient(135deg, #64748b, #475569);
    cursor: not-allowed;
    opacity: 0.8;
}

.kl-btn-auction.kl-btn-cooldown:hover {
    transform: none;
    box-shadow: none;
}

.kl-cooldown-timer {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #fbbf24;
}

/* ========== ANIMATIONS TEMPS RÉEL ENCHÈRES ========== */

/* Animation du montant quand une enchère change */
.kl-bid-updated {
    animation: bidPulse 0.6s ease-out;
}

@keyframes bidPulse {
    0% {
        transform: scale(1);
        color: #a855f7;
    }
    30% {
        transform: scale(1.25);
        color: #22c55e;
        text-shadow: 0 0 20px rgba(34, 197, 94, 0.8);
    }
    100% {
        transform: scale(1);
        color: #a855f7;
        text-shadow: none;
    }
}

/* Flash du slot entier quand nouvelle enchère */
.kl-slot-flash {
    animation: slotFlash 0.8s ease-out;
}

@keyframes slotFlash {
    0% {
        box-shadow: 0 0 0 rgba(168, 85, 247, 0);
    }
    25% {
        box-shadow: 0 0 30px rgba(168, 85, 247, 0.6), inset 0 0 20px rgba(168, 85, 247, 0.1);
    }
    50% {
        box-shadow: 0 0 40px rgba(34, 197, 94, 0.5), inset 0 0 15px rgba(34, 197, 94, 0.05);
    }
    100% {
        box-shadow: 0 0 0 rgba(168, 85, 247, 0);
    }
}

/* Animation spéciale si l'utilisateur est surpassé */
.kl-outbid-flash {
    animation: outbidFlash 1s ease-out;
}

@keyframes outbidFlash {
    0% {
        box-shadow: 0 0 0 rgba(239, 68, 68, 0);
    }
    20% {
        box-shadow: 0 0 35px rgba(239, 68, 68, 0.7), inset 0 0 20px rgba(239, 68, 68, 0.15);
    }
    40% {
        box-shadow: 0 0 25px rgba(239, 68, 68, 0.5);
    }
    60% {
        box-shadow: 0 0 35px rgba(239, 68, 68, 0.6);
    }
    100% {
        box-shadow: 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Indicateur "LIVE" pour montrer que c'est temps réel */
.kl-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(239, 68, 68, 0.2);
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ef4444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kl-live-dot {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

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

/* Animation quand le statut d'enchère utilisateur change */
.kl-status-changed {
    animation: statusChange 0.6s ease-out;
}

@keyframes statusChange {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========== FIN ANIMATIONS TEMPS RÉEL ========== */

/* ========== AMÉLIORATION CARTES ENCHÈRES AVEC LOGO ========== */

/* Serveur avec enchère active - plus visible */
.kl-slot-has-bid {
    position: relative;
}

.kl-slot-has-bid .kl-slot-logo {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    border: 3px solid rgba(168, 85, 247, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.kl-slot-has-bid .kl-slot-logo-placeholder {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    border: 3px solid rgba(168, 85, 247, 0.3);
}

.kl-slot-has-bid .kl-slot-server-name {
    font-size: 1.1rem;
    margin-top: 8px;
}

/* Labels sous le logo */
.kl-slot-bid-label {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Label "En tête de l'enchère" - violet (quelqu'un est en train de gagner) */
.kl-bid-label-leader {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(124, 58, 237, 0.2));
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #c4b5fd;
}

/* Label "Occupe cet emplacement" - orange (FOMO: ce serveur profite déjà!) */
.kl-bid-label-current {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.25), rgba(234, 88, 12, 0.15));
    border: 1px solid rgba(249, 115, 22, 0.4);
    color: #fdba74;
}

/* Style serveur actuel (occupant) - plus subtil mais visible */
.kl-slot-current-occupant .kl-slot-logo {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    border: 3px solid rgba(249, 115, 22, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.kl-slot-current-occupant .kl-slot-logo-placeholder {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    border: 3px solid rgba(249, 115, 22, 0.3);
}

.kl-slot-current-occupant .kl-slot-server-name {
    font-size: 1.1rem;
    margin-top: 8px;
    color: #fdba74;
}

/* Emplacement disponible - CTA plus visible */
.kl-slot-available {
    padding: 20px 10px;
}

.kl-slot-available .kl-empty-icon {
    font-size: 3rem;
    opacity: 0.7;
    animation: targetPulse 2s ease-in-out infinite;
}

.kl-slot-available .kl-empty-text {
    font-size: 1rem;
    color: var(--kl-user-text);
    font-weight: 500;
}

.kl-slot-available .kl-empty-cta {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    color: #22c55e;
    font-weight: 600;
}

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

/* Animation FOMO - quand le serveur change (quelqu'un d'autre prend la tête) */
.kl-slot-server-changed {
    animation: serverChangeFomo 1.5s ease-out;
}

.kl-slot-server-changed .kl-slot-logo {
    animation: logoShake 0.5s ease-out;
}

@keyframes serverChangeFomo {
    0% {
        box-shadow: 0 0 0 rgba(239, 68, 68, 0);
    }
    15% {
        box-shadow: 0 0 40px rgba(239, 68, 68, 0.7), inset 0 0 30px rgba(239, 68, 68, 0.15);
    }
    30% {
        box-shadow: 0 0 60px rgba(249, 115, 22, 0.6), inset 0 0 20px rgba(249, 115, 22, 0.1);
    }
    50% {
        box-shadow: 0 0 50px rgba(168, 85, 247, 0.5);
    }
    100% {
        box-shadow: 0 0 0 rgba(168, 85, 247, 0);
    }
}

@keyframes logoShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-5px) rotate(-2deg); }
    30% { transform: translateX(5px) rotate(2deg); }
    45% { transform: translateX(-4px) rotate(-1deg); }
    60% { transform: translateX(4px) rotate(1deg); }
    75% { transform: translateX(-2px); }
}

/* Mise à jour globale du slot */
.kl-slot-updating {
    animation: slotUpdateGlow 0.5s ease-out;
}

@keyframes slotUpdateGlow {
    0% {
        box-shadow: inherit;
    }
    50% {
        box-shadow: 0 0 25px rgba(139, 92, 246, 0.5);
    }
    100% {
        box-shadow: inherit;
    }
}

/* ========== FIN AMÉLIORATION CARTES ========== */

/* ========== NOUVELLE UX 2 ZONES ENCHÈRES ========== */

/* Zone labels communs */
.kl-zone-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    margin: 0;
}

/* Zone 1: Actuellement en avant (vert) */
.kl-slot-current-zone {
    border-bottom: 1px solid var(--kl-user-border);
}

.kl-zone-label-current {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.15), rgba(34, 197, 94, 0.08));
    color: #4ade80;
    border-bottom: 1px solid rgba(74, 222, 128, 0.2);
}

/* Zone 2: Prochaine rotation (orange) */
.kl-slot-auction-zone {
    padding-bottom: 0;
    min-height: 185px; /* Hauteur fixe pour aligner les boutons Enchérir */
    display: flex;
    flex-direction: column;
}

/* Hauteur fixe pour le contenu de la zone enchère (évite le décalage du bouton) */
.kl-slot-auction-zone .kl-zone-content {
    min-height: 72px; /* Logo 48px + padding 24px */
    display: flex;
    align-items: center;
    justify-content: center;
}

.kl-zone-label-auction {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(234, 88, 12, 0.08));
    color: #f97316;
    border-bottom: 1px solid rgba(249, 115, 22, 0.2);
}

/* Contenu de zone */
.kl-zone-content {
    padding: 12px 15px;
}

/* Serveur dans une zone */
.kl-zone-server {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kl-zone-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.kl-zone-logo-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--kl-user-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.kl-zone-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kl-zone-server-name {
    font-weight: 600;
    color: #fff;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kl-zone-owner {
    font-size: 0.8rem;
    color: var(--kl-user-text-muted);
}

.kl-zone-bid {
    font-size: 0.85rem;
    color: #a855f7;
    font-weight: 500;
}

/* Zone vide */
.kl-zone-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    color: var(--kl-user-text-muted);
}

.kl-zone-empty-icon {
    font-size: 1.5rem;
    opacity: 0.5;
}

.kl-zone-empty-text {
    font-size: 0.85rem;
}

.kl-zone-cta {
    font-size: 0.8rem;
    color: #22c55e;
    font-weight: 600;
}

/* Zone enchère avec bid actif */
.kl-zone-has-bid .kl-zone-logo {
    border: 2px solid rgba(168, 85, 247, 0.5);
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.3);
}

.kl-zone-has-bid .kl-zone-server-name {
    color: #c4b5fd;
}

/* Pas d'enchère - CTA animé */
.kl-zone-no-auction .kl-zone-empty-icon {
    animation: targetPulse 2s ease-in-out infinite;
}

/* Animation changement de leader */
.kl-zone-leader-changed {
    animation: zoneLeaderChanged 1.5s ease-out;
}

@keyframes zoneLeaderChanged {
    0% {
        background: transparent;
    }
    15% {
        background: rgba(239, 68, 68, 0.15);
    }
    30% {
        background: rgba(249, 115, 22, 0.15);
    }
    50% {
        background: rgba(168, 85, 247, 0.1);
    }
    100% {
        background: transparent;
    }
}

/* Statut utilisateur dans zone enchère */
.kl-slot-auction-zone .kl-user-bid-container {
    padding: 0 15px;
    margin-top: 8px;
    min-height: 36px; /* Réserve l'espace pour le badge "En tête" ou "Surpassé" */
}

.kl-slot-auction-zone .kl-auction-min {
    padding: 8px 15px 12px;
    font-size: 0.85rem;
    color: var(--kl-user-text-muted);
    text-align: center;
}

/* Responsive - Zones empilées sur petit écran */
@media (max-width: 600px) {
    .kl-zone-server {
        flex-direction: column;
        text-align: center;
    }

    .kl-zone-info {
        align-items: center;
    }
}

/* ========== FIN NOUVELLE UX 2 ZONES ========== */

.kl-btn-disabled {
    width: 100%;
    padding: 12px;
    background: var(--kl-user-bg-light);
    color: var(--kl-user-text-muted);
    border: 1px solid var(--kl-user-border);
    border-radius: 8px;
    cursor: not-allowed;
}

/* Liste des serveurs */
.kl-user-servers-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kl-server-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}

.kl-server-item:hover {
    border-color: var(--kl-user-border);
}

.kl-server-sponsored {
    border-color: rgba(255, 215, 0, 0.3);
}

.kl-server-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kl-server-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.kl-server-logo-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--kl-user-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.kl-server-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kl-server-name {
    font-weight: 600;
    color: #fff;
}

.kl-server-status {
    font-size: 0.85rem;
}

.kl-status-sponsored {
    font-weight: 600;
}

.kl-status-bidding {
    color: #a855f7;
}

.kl-status-available {
    color: #4ade80;
}

/* Empty servers */
.kl-empty-servers {
    text-align: center;
    padding: 30px 20px;
}

.kl-empty-servers .kl-empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 15px;
    opacity: 0.5;
}

.kl-empty-servers p {
    color: var(--kl-user-text-muted);
    margin: 0 0 15px 0;
}

/* Table historique */
.kl-bids-table {
    width: 100%;
    border-collapse: collapse;
}

.kl-bids-table th,
.kl-bids-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--kl-user-border);
}

.kl-bids-table th {
    font-size: 0.75rem;
    color: var(--kl-user-text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.kl-bids-table td {
    font-size: 0.9rem;
}

.kl-status-active {
    color: #22d3ee;
}

.kl-status-outbid {
    color: #f87171;
}

.kl-status-won {
    color: #ffd700;
    font-weight: 600;
}

.kl-status-refunded {
    color: #a855f7;
}

/* Status badges améliorés */
.kl-status-badge {
    display: inline-block;
    font-weight: 500;
}

.kl-status-refund {
    display: block;
    margin-top: 4px;
    padding: 4px 8px;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 4px;
    font-size: 0.75rem;
    color: #22c55e;
    border-left: 2px solid #22c55e;
}

.kl-bid-row.kl-bid-outbid {
    background: rgba(248, 113, 113, 0.05);
}

.kl-bid-row.kl-bid-active {
    background: rgba(34, 211, 238, 0.08);
}

.kl-bid-row.kl-bid-won {
    background: rgba(255, 215, 0, 0.08);
}

/* =========================================
   HISTORIQUE DES TRANSACTIONS
   ========================================= */
.kl-transactions-history {
    overflow-x: auto;
}

.kl-transactions-table {
    width: 100%;
    border-collapse: collapse;
}

.kl-transactions-table th,
.kl-transactions-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--kl-user-border);
}

.kl-transactions-table th {
    font-size: 0.75rem;
    color: var(--kl-user-text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.kl-transactions-table td {
    font-size: 0.9rem;
}

/* Colonnes transactions */
.kl-tx-date {
    white-space: nowrap;
    color: var(--kl-user-text-muted);
    font-size: 0.85rem;
}

.kl-tx-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.kl-tx-desc {
    font-size: 0.85rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kl-tx-amount {
    font-weight: 600;
    font-family: monospace;
    white-space: nowrap;
}

.kl-tx-credit {
    color: #22c55e;
}

.kl-tx-debit {
    color: #f87171;
}

.kl-tx-balance {
    color: #94a3b8;
    font-size: 0.85rem;
    font-family: monospace;
    white-space: nowrap;
}

/* Row backgrounds par type */
.kl-tx-row.kl-tx-credit {
    background: rgba(34, 197, 94, 0.05);
}

.kl-tx-row.kl-tx-debit {
    background: rgba(248, 113, 113, 0.05);
}

.kl-tx-row:hover {
    background: var(--kl-user-bg-light);
}

/* Responsive */
@media (max-width: 768px) {
    .kl-transactions-table th:nth-child(5),
    .kl-transactions-table td:nth-child(5) {
        display: none;
    }

    .kl-tx-desc {
        max-width: 120px;
    }
}

/* Header et contrôles transactions */
.kl-transactions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.kl-transactions-header h3 {
    margin: 0;
}

.kl-transactions-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kl-transactions-total {
    color: var(--kl-user-text-muted);
    font-size: 0.85rem;
}

.kl-select-small {
    background: var(--kl-user-bg-light);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius-sm);
    color: var(--kl-user-text);
    padding: 6px 10px;
    font-size: 0.85rem;
    cursor: pointer;
}

.kl-select-small:hover {
    border-color: var(--kl-user-accent);
}

.kl-select-small:focus {
    outline: none;
    border-color: var(--kl-user-accent);
}

/* Loading state */
.kl-transactions-loading {
    text-align: center;
    padding: 20px;
    color: var(--kl-user-text-muted);
}

.kl-loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--kl-user-border);
    border-top-color: var(--kl-user-accent);
    border-radius: 50%;
    animation: klSpinner 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes klSpinner {
    to { transform: rotate(360deg); }
}

/* Pagination */
.kl-transactions-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
}

.kl-tx-pagination-top {
    margin-bottom: 15px;
    border-bottom: 1px solid var(--kl-user-border);
}

.kl-tx-pagination-bottom {
    margin-top: 20px;
    border-top: 1px solid var(--kl-user-border);
}

.kl-tx-page-btn {
    background: var(--kl-user-bg-light);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius-sm);
    color: var(--kl-user-text);
    padding: 8px 16px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.kl-tx-page-btn:hover:not(:disabled) {
    background: var(--kl-user-accent);
    border-color: var(--kl-user-accent);
    color: white;
}

.kl-tx-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.kl-tx-page-info {
    color: var(--kl-user-text);
    font-size: 0.9rem;
}

.kl-tx-page-current {
    font-weight: 600;
    color: var(--kl-user-accent);
}

/* Responsive pagination */
@media (max-width: 768px) {
    .kl-transactions-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .kl-transactions-pagination {
        gap: 10px;
    }

    .kl-tx-page-btn {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

/* =========================================
   HISTORIQUE DES ACHATS (sous packs crédits)
   ========================================= */

.kl-purchases-history {
    margin-top: 20px;
}

.kl-purchases-table-wrapper {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--kl-user-border);
}

.kl-purchases-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.kl-purchases-table th,
.kl-purchases-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--kl-user-border);
}

.kl-purchases-table th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--kl-user-text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kl-purchases-table tbody tr:last-child td {
    border-bottom: none;
}

.kl-purchases-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.kl-purchase-date {
    color: var(--kl-user-text-secondary);
    white-space: nowrap;
}

.kl-purchase-credits {
    font-weight: 600;
    color: #4ade80;
}

.kl-purchase-price {
    color: var(--kl-user-text);
    font-weight: 500;
}

.kl-purchase-status {
    text-align: center;
}

.kl-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.kl-status-success {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.kl-status-refunded {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}

.kl-status-pending {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.kl-purchases-more {
    text-align: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--kl-user-border);
}

.kl-purchases-more a {
    color: var(--kl-user-accent);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.kl-purchases-more a:hover {
    color: var(--kl-user-accent-hover);
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 600px) {
    .kl-purchases-table th,
    .kl-purchases-table td {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .kl-purchase-date {
        font-size: 0.75rem;
    }
}

/* Modal Enchère */
.kl-auction-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kl-auction-modal .kl-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.kl-auction-modal .kl-modal-content {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    max-width: 450px;
    width: 90%;
    border: 1px solid var(--kl-user-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.kl-auction-modal .kl-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--kl-user-border);
    background: rgba(0, 0, 0, 0.3);
}

.kl-auction-modal .kl-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
}

.kl-auction-modal .kl-modal-close {
    background: none;
    border: none;
    color: var(--kl-user-text-muted);
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.kl-auction-modal .kl-modal-close:hover {
    color: #fff;
}

.kl-auction-modal .kl-modal-body {
    padding: 20px;
}

.kl-auction-modal .kl-modal-info {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.kl-auction-modal .kl-modal-info p {
    margin: 5px 0;
    font-size: 0.9rem;
    color: var(--kl-user-text-muted);
}

.kl-auction-modal .kl-modal-info strong {
    color: #fff;
}

.kl-auction-modal .kl-form-group {
    margin-bottom: 15px;
}

.kl-auction-modal .kl-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--kl-user-text);
}

.kl-auction-modal .kl-select,
.kl-auction-modal .kl-input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--kl-user-border);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
}

.kl-auction-modal .kl-select:focus,
.kl-auction-modal .kl-input:focus {
    outline: none;
    border-color: #a855f7;
}

.kl-auction-modal .kl-select option {
    background: #1a1a2e;
}

.kl-auction-modal .kl-input-group {
    position: relative;
}

.kl-auction-modal .kl-input-group .kl-input {
    padding-right: 45px;
}

.kl-auction-modal .kl-input-suffix {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
}

.kl-auction-modal .kl-form-group small {
    display: block;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--kl-user-text-muted);
}

.kl-auction-modal .kl-modal-warning {
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.3);
    color: #f97316;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 15px;
}

.kl-auction-modal .kl-modal-message {
    padding: 10px 15px;
    border-radius: 8px;
    text-align: center;
    min-height: 20px;
}

.kl-auction-modal .kl-message-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.kl-auction-modal .kl-message-success {
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

.kl-auction-modal .kl-message-warning {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.kl-auction-modal .kl-modal-info {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.kl-auction-modal .kl-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--kl-user-border);
    background: rgba(0, 0, 0, 0.2);
}

.kl-auction-modal .kl-modal-footer .kl-btn-primary {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
}

.kl-auction-modal .kl-modal-footer .kl-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =========================================
   HYTALE TAB - Gestion des serveurs
   ========================================= */

.kl-hytale-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--kl-user-border);
}

.kl-hytale-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kl-user-text);
}

.kl-btn-add-server {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Liste des serveurs */
.kl-hytale-servers-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Carte serveur détaillée */
.kl-server-card-detailed {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.kl-server-card-detailed:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.kl-server-card-detailed.pending {
    opacity: 0.7;
    border-color: rgba(251, 191, 36, 0.3);
    background: rgba(251, 191, 36, 0.05);
}

.kl-server-card-detailed.sponsored {
    border-color: rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), rgba(255, 255, 255, 0.03));
}

/* Header de la carte serveur */
.kl-server-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.kl-server-card-logo {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--kl-user-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kl-server-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kl-server-card-logo .kl-server-logo-placeholder {
    font-size: 28px;
}

.kl-server-card-info {
    flex: 1;
    min-width: 0;
}

.kl-server-card-name {
    margin: 0 0 8px 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--kl-user-text);
}

/* Badges de statut */
.kl-server-sponsored-badge,
.kl-server-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
}

.kl-server-sponsored-badge {
    background: rgba(255, 215, 0, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
}

.kl-sponsored-expiry {
    font-size: 0.8rem;
    opacity: 0.8;
}

.kl-status-pending {
    color: var(--kl-user-warning);
}

.kl-status-approved {
    color: var(--kl-user-success);
}

/* Stats du serveur */
.kl-server-card-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.kl-server-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--kl-user-text-muted);
    font-size: 0.9rem;
}

.kl-server-stat .kl-stat-icon {
    font-size: 1rem;
}

.kl-server-stat .kl-stat-value {
    font-weight: 600;
    color: var(--kl-user-text);
}

.kl-server-stat .kl-stat-label {
    color: var(--kl-user-text-muted);
}

/* Actions du serveur */
.kl-server-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.kl-btn-small {
    padding: 8px 14px;
    font-size: 0.85rem;
    border-radius: 6px;
}

.kl-badge-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--kl-user-error);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 10px;
    margin-left: 4px;
}

/* Message serveur en attente */
.kl-server-card-pending-message {
    padding: 12px;
    background: rgba(251, 191, 36, 0.1);
    border-radius: 8px;
    margin-top: 12px;
}

.kl-server-card-pending-message p {
    margin: 0;
    color: var(--kl-user-warning);
    font-size: 0.9rem;
}

/* État vide */
.kl-hytale-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

.kl-hytale-empty-state .kl-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.kl-hytale-empty-state h3 {
    margin: 0 0 12px 0;
    font-size: 1.2rem;
    color: var(--kl-user-text);
}

.kl-hytale-empty-state p {
    margin: 0 0 24px 0;
    color: var(--kl-user-text-muted);
    font-size: 0.95rem;
}

/* Modal large */
.kl-modal-large .kl-modal-content {
    max-width: 700px;
    width: 95%;
}

/* Formulaire d'édition serveur */
.kl-form-row {
    margin-bottom: 16px;
}

.kl-form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 640px) {
    .kl-form-row-3 {
        grid-template-columns: 1fr;
    }
}

/* Checkboxes de catégories */
.kl-categories-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kl-category-checkbox {
    cursor: pointer;
}

.kl-category-checkbox input {
    display: none;
}

.kl-category-checkbox span {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.kl-category-checkbox input:checked + span {
    border-color: currentColor;
    box-shadow: 0 0 10px currentColor;
}

/* Note du formulaire */
.kl-form-note {
    padding: 12px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--kl-user-text-muted);
    margin-top: 16px;
}

.kl-form-note strong {
    color: var(--kl-user-cyan);
}

/* Modal footer avec plusieurs boutons */
.kl-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.kl-modal-footer .kl-btn-primary,
.kl-modal-footer .kl-btn-secondary {
    width: auto;
    padding: 12px 24px;
}

/* Liste des avis dans la modal */
.kl-reviews-list {
    max-height: 60vh;
    overflow-y: auto;
}

.kl-reviews-loading {
    text-align: center;
    padding: 40px;
    color: var(--kl-user-text-muted);
}

.kl-reviews-empty {
    text-align: center;
    padding: 40px;
    color: var(--kl-user-text-muted);
}

/* Item d'avis */
.kl-review-item {
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.kl-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.kl-review-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kl-review-author-name {
    font-weight: 600;
    color: var(--kl-user-text);
}

.kl-review-date {
    font-size: 0.8rem;
    color: var(--kl-user-text-muted);
}

.kl-review-rating {
    color: #fbbf24;
    font-size: 1rem;
}

.kl-review-comment {
    color: var(--kl-user-text);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

/* Réponse du propriétaire */
.kl-owner-reply {
    margin-top: 12px;
    padding: 12px;
    background: rgba(168, 85, 247, 0.1);
    border-left: 3px solid var(--kl-user-accent);
    border-radius: 0 8px 8px 0;
}

.kl-owner-reply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.kl-owner-reply-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kl-user-accent);
}

.kl-owner-reply-date {
    font-size: 0.75rem;
    color: var(--kl-user-text-muted);
}

.kl-owner-reply-text {
    font-size: 0.9rem;
    color: var(--kl-user-text);
    line-height: 1.4;
}

.kl-owner-reply-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* Formulaire de réponse */
.kl-reply-form {
    margin-top: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.kl-reply-form textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    background: var(--kl-user-bg);
    border: 1px solid var(--kl-user-border);
    border-radius: 6px;
    color: var(--kl-user-text);
    font-size: 0.9rem;
    resize: vertical;
    margin-bottom: 10px;
}

.kl-reply-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Bouton répondre */
.kl-btn-reply {
    padding: 6px 12px;
    font-size: 0.8rem;
    background: transparent;
    border: 1px solid var(--kl-user-border);
    color: var(--kl-user-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.kl-btn-reply:hover {
    border-color: var(--kl-user-accent);
    color: var(--kl-user-accent);
}

/* Responsive pour l'onglet Hytale */
@media (max-width: 768px) {
    .kl-hytale-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .kl-server-card-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .kl-server-card-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .kl-server-card-actions {
        justify-content: center;
    }
}

/* =========================================
   EMAIL PREFERENCES
   ========================================= */

.kl-email-prefs-intro {
    color: var(--kl-user-text-muted);
    font-size: 13px;
    margin-bottom: 20px;
}

.kl-email-prefs-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kl-email-prefs-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--kl-user-text);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--kl-user-border);
}

.kl-email-prefs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Toggle switch style */
.kl-email-pref-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--kl-user-bg-light);
    border-radius: var(--kl-user-radius-sm);
    cursor: pointer;
    transition: background 0.2s;
}

.kl-email-pref-item:hover {
    background: rgba(168, 85, 247, 0.1);
}

.kl-pref-label {
    font-size: 13px;
    color: var(--kl-user-text);
    flex: 1;
}

/* Hide default checkbox */
.kl-email-pref-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Toggle switch */
.kl-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--kl-user-border);
    border-radius: 12px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.kl-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Toggle checked state */
.kl-email-pref-item input[type="checkbox"]:checked + .kl-toggle {
    background: var(--kl-user-accent);
}

.kl-email-pref-item input[type="checkbox"]:checked + .kl-toggle::after {
    transform: translateX(20px);
}

/* Focus state */
.kl-email-pref-item input[type="checkbox"]:focus + .kl-toggle {
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3);
}

/* Footer */
.kl-email-prefs-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--kl-user-border);
}

.kl-email-prefs-note {
    color: var(--kl-user-text-muted);
    font-size: 12px;
    flex: 1;
}

#kl-email-prefs-message {
    margin-top: 12px;
}

#kl-email-prefs-message .kl-message {
    padding: 10px 14px;
    border-radius: var(--kl-user-radius-sm);
    font-size: 13px;
}

#kl-email-prefs-message .kl-message-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid var(--kl-user-success);
    color: var(--kl-user-success);
}

#kl-email-prefs-message .kl-message-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--kl-user-error);
    color: var(--kl-user-error);
}

/* Responsive email prefs */
@media (max-width: 480px) {
    .kl-email-prefs-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .kl-email-prefs-footer .kl-btn {
        width: 100%;
    }
}

/* =========================================
   AVATAR UPLOAD
   ========================================= */

/* Avatar cliquable avec overlay */
.kl-avatar-clickable {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.kl-avatar-clickable:hover {
    transform: scale(1.05);
}

.kl-avatar-clickable:focus {
    outline: 2px solid var(--kl-user-accent);
    outline-offset: 2px;
    border-radius: 50%;
}

.kl-avatar-clickable .kl-avatar-img {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--kl-user-accent);
    object-fit: cover;
}

/* Avatar dashboard (plus grand) */
.kl-dashboard-avatar.kl-avatar-clickable {
    width: 120px;
    height: 120px;
}

.kl-dashboard-avatar.kl-avatar-clickable .kl-avatar-img {
    width: 120px;
    height: 120px;
    border-width: 3px;
}

/* Overlay au hover */
.kl-avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.kl-avatar-clickable:hover .kl-avatar-overlay,
.kl-avatar-clickable:focus .kl-avatar-overlay {
    opacity: 1;
}

.kl-avatar-overlay-icon {
    font-size: 20px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Modal Upload Avatar */
.kl-avatar-upload-modal .kl-modal-content {
    max-width: 400px;
    padding: 24px;
}

.kl-avatar-modal-content {
    text-align: center;
}

/* Preview de l'avatar */
.kl-avatar-upload-preview {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.kl-avatar-preview-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid var(--kl-user-accent);
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

/* Loading overlay pendant l'upload */
.kl-avatar-upload-preview.kl-uploading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kl-avatar-upload-preview.kl-uploading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(168, 85, 247, 0.3);
    border-top-color: var(--kl-user-accent);
    border-radius: 50%;
    animation: kl-avatar-spin 0.8s linear infinite;
    z-index: 10;
}

@keyframes kl-avatar-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.kl-avatar-custom-badge {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--kl-user-success);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Zone de drop */
.kl-avatar-upload-zone {
    border: 2px dashed var(--kl-user-border);
    border-radius: var(--kl-user-radius);
    padding: 24px 16px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
    background: var(--kl-user-bg-light);
}

.kl-avatar-upload-zone:hover {
    border-color: var(--kl-user-accent);
    background: rgba(168, 85, 247, 0.05);
}

.kl-avatar-upload-zone.kl-dropzone-active {
    border-color: var(--kl-user-cyan);
    background: rgba(34, 211, 238, 0.1);
    transform: scale(1.02);
}

.kl-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.kl-dropzone-icon {
    font-size: 32px;
    opacity: 0.8;
}

.kl-dropzone-text {
    font-size: 14px;
    color: var(--kl-user-text);
    font-weight: 500;
}

.kl-dropzone-or {
    font-size: 12px;
    color: var(--kl-user-text-muted);
    text-transform: uppercase;
}

.kl-browse-btn {
    cursor: pointer;
    margin-top: 4px;
}

.kl-dropzone-hint {
    margin-top: 12px;
    font-size: 11px;
    color: var(--kl-user-text-muted);
}

/* Message dans la modal */
.kl-avatar-upload-message {
    padding: 10px 16px;
    border-radius: var(--kl-user-radius-sm);
    margin-bottom: 16px;
    font-size: 13px;
    text-align: center;
}

.kl-avatar-upload-message.kl-message-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid var(--kl-user-success);
    color: var(--kl-user-success);
}

.kl-avatar-upload-message.kl-message-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--kl-user-error);
    color: var(--kl-user-error);
}

.kl-avatar-upload-message.kl-message-info {
    background: rgba(34, 211, 238, 0.15);
    border: 1px solid var(--kl-user-cyan);
    color: var(--kl-user-cyan);
}

/* Actions de la modal */
.kl-avatar-upload-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.kl-avatar-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Bouton danger */
.kl-btn-danger {
    background: transparent;
    border: 1px solid var(--kl-user-error);
    color: var(--kl-user-error);
    padding: 10px 20px;
    border-radius: var(--kl-user-radius-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.kl-btn-danger:hover {
    background: var(--kl-user-error);
    color: white;
}

/* Responsive avatar upload */
@media (max-width: 480px) {
    .kl-avatar-upload-modal .kl-modal-content {
        padding: 16px;
        margin: 16px;
    }

    .kl-avatar-preview-img {
        width: 100px;
        height: 100px;
    }

    .kl-avatar-upload-zone {
        padding: 16px 12px;
    }

    .kl-avatar-upload-actions {
        flex-direction: column;
    }

    .kl-avatar-upload-actions .kl-btn {
        width: 100%;
    }
}

/* =========================================
   TOAST VERIFICATION EMAIL
   ========================================= */
.kl-verification-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    padding: 16px 24px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(34, 197, 94, 0.4);
    font-size: 15px;
    font-weight: 600;
    z-index: 999999;
    opacity: 0;
    transition: all 0.3s ease;
}

.kl-verification-toast.kl-toast-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Lien de renvoi d'email dans le message d'erreur */
.kl-resend-verification {
    color: var(--kl-user-cyan) !important;
    text-decoration: underline;
    cursor: pointer;
}

.kl-resend-verification:hover {
    color: var(--kl-user-accent) !important;
}

.kl-resend-verification.kl-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* =========================================
   MODAL SUCCES INSCRIPTION
   ========================================= */
.kl-success-modal .kl-modal-content {
    max-width: 340px !important;
    width: 340px !important;
    padding: 30px 24px !important;
    text-align: center;
}

.kl-success-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.kl-success-modal .kl-modal-title {
    color: var(--kl-user-success);
    margin-bottom: 12px;
}

.kl-success-text {
    color: var(--kl-user-text);
    font-size: 14px;
    margin: 0 0 8px 0;
}

.kl-success-subtext {
    color: var(--kl-user-text-muted);
    font-size: 12px;
    margin: 0 0 20px 0;
}

.kl-success-close-btn {
    width: 100%;
}

/* =========================================
   LEADERBOARD / CLASSEMENT
   ========================================= */

/* Bandeau Ma Position */
.kl-leaderboard-my-rank {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(34, 211, 238, 0.1));
    border: 1px solid var(--kl-user-accent);
    border-radius: var(--kl-user-radius);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.kl-my-rank-position {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.kl-my-rank-hash {
    font-size: 24px;
    font-weight: 600;
    color: var(--kl-user-accent);
}

.kl-my-rank-number {
    font-size: 48px;
    font-weight: 700;
    color: var(--kl-user-accent);
    line-height: 1;
}

.kl-my-rank-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kl-my-rank-label {
    font-size: 14px;
    color: var(--kl-user-text-muted);
}

.kl-my-rank-stats {
    font-size: 18px;
    font-weight: 600;
    color: var(--kl-user-text);
}

.kl-my-rank-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 200px;
}

.kl-my-rank-level {
    font-size: 12px;
    font-weight: 600;
    color: var(--kl-user-accent);
    white-space: nowrap;
}

.kl-my-rank-bar-container {
    flex: 1;
    height: 8px;
    background: var(--kl-user-border);
    border-radius: 4px;
    overflow: hidden;
}

.kl-my-rank-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--kl-user-accent), var(--kl-user-cyan));
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Podium Top 3 */
.kl-leaderboard-podium {
    background: var(--kl-user-bg-light);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius);
    padding: 24px;
    margin-bottom: 24px;
    text-align: center;
}

.kl-podium-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--kl-user-text);
    margin: 0 0 24px 0;
}

.kl-podium-places {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 32px;
    flex-wrap: wrap;
}

.kl-podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: var(--kl-user-bg);
    border-radius: var(--kl-user-radius);
    min-width: 120px;
    transition: transform 0.2s;
}

.kl-podium-place:hover {
    transform: translateY(-4px);
}

.kl-podium-1st {
    order: 2;
    transform: scale(1.1);
    border: 2px solid #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.kl-podium-1st:hover {
    transform: scale(1.1) translateY(-4px);
}

.kl-podium-2nd {
    order: 1;
    border: 2px solid #c0c0c0;
}

.kl-podium-3rd {
    order: 3;
    border: 2px solid #cd7f32;
}

.kl-podium-medal {
    font-size: 32px;
    line-height: 1;
}

.kl-podium-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid var(--kl-user-border);
}

.kl-podium-1st .kl-podium-avatar {
    border-color: #ffd700;
    width: 72px;
    height: 72px;
}

.kl-podium-2nd .kl-podium-avatar {
    border-color: #c0c0c0;
}

.kl-podium-3rd .kl-podium-avatar {
    border-color: #cd7f32;
}

.kl-podium-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--kl-user-text);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kl-podium-points {
    font-size: 12px;
    font-weight: 600;
    color: var(--kl-user-accent);
}

.kl-podium-level {
    font-size: 11px;
    color: var(--kl-user-text-muted);
}

/* Tableau Classement */
.kl-leaderboard-container {
    background: var(--kl-user-bg-light);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius);
    padding: 20px;
}

/* Header avec titre et contrôles */
.kl-leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kl-user-border);
}

.kl-leaderboard-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--kl-user-text);
    margin: 0;
}

.kl-leaderboard-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kl-lb-total {
    font-size: 13px;
    color: var(--kl-user-text-muted);
}

.kl-lb-total-count {
    font-weight: 600;
    color: var(--kl-user-text);
}

.kl-lb-per-page-select {
    padding: 6px 12px;
    background: var(--kl-user-bg);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius-sm);
    color: var(--kl-user-text);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.kl-lb-per-page-select:hover {
    border-color: var(--kl-user-accent);
}

.kl-lb-per-page-select:focus {
    outline: none;
    border-color: var(--kl-user-accent);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}

/* Pagination haut */
.kl-lb-pagination-top {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kl-user-border);
}

/* Pagination bas */
.kl-lb-pagination-bottom {
    margin-top: 16px;
    padding-top: 16px;
}

.kl-leaderboard-table-wrapper {
    overflow-x: auto;
}

.kl-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}

.kl-leaderboard-table th,
.kl-leaderboard-table td {
    padding: 12px 16px;
    text-align: left;
}

.kl-leaderboard-table th {
    font-size: 12px;
    font-weight: 600;
    color: var(--kl-user-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--kl-user-border);
}

.kl-leaderboard-row {
    border-bottom: 1px solid var(--kl-user-border);
    transition: background 0.2s;
}

.kl-leaderboard-row:hover {
    background: rgba(168, 85, 247, 0.05);
}

.kl-leaderboard-row.is-current-user {
    background: rgba(168, 85, 247, 0.15);
    border-left: 3px solid var(--kl-user-accent);
}

.kl-leaderboard-row.is-current-user:hover {
    background: rgba(168, 85, 247, 0.2);
}

/* Colonnes */
.kl-col-rank {
    font-size: 16px;
    font-weight: 700;
    color: var(--kl-user-text-muted);
    width: 60px;
}

.kl-col-rank.kl-rank-gold {
    color: #ffd700;
    font-size: 20px;
}

.kl-col-rank.kl-rank-silver {
    color: #c0c0c0;
    font-size: 20px;
}

.kl-col-rank.kl-rank-bronze {
    color: #cd7f32;
    font-size: 20px;
}

.kl-col-player {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kl-leaderboard-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--kl-user-border);
    flex-shrink: 0;
}

.kl-leaderboard-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--kl-user-text);
}

.kl-you-badge {
    font-size: 10px;
    font-weight: 600;
    color: white;
    background: var(--kl-user-accent);
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.kl-col-level {
    width: 80px;
}

.kl-level-badge-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--kl-user-accent);
    color: white;
    font-size: 14px;
    font-weight: 700;
    border-radius: 50%;
}

.kl-col-xp {
    font-size: 14px;
    font-weight: 600;
    color: var(--kl-user-cyan);
    width: 100px;
}

.kl-col-badges,
.kl-col-votes {
    font-size: 13px;
    color: var(--kl-user-text-muted);
    white-space: nowrap;
}

/* Pagination Leaderboard */
.kl-leaderboard-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--kl-user-border);
}

.kl-leaderboard-pagination .kl-page-btn {
    padding: 8px 16px;
    background: var(--kl-user-bg);
    border: 1px solid var(--kl-user-border);
    border-radius: var(--kl-user-radius-sm);
    color: var(--kl-user-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.kl-leaderboard-pagination .kl-page-btn:hover:not(:disabled) {
    background: var(--kl-user-accent);
    border-color: var(--kl-user-accent);
    color: white;
}

.kl-leaderboard-pagination .kl-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.kl-leaderboard-pagination .kl-page-info {
    font-size: 13px;
    color: var(--kl-user-text-muted);
}

.kl-leaderboard-pagination .kl-page-current,
.kl-leaderboard-pagination .kl-page-total {
    font-weight: 600;
    color: var(--kl-user-text);
}

/* Responsive */
@media (max-width: 768px) {
    .kl-leaderboard-my-rank {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .kl-my-rank-progress {
        width: 100%;
    }

    .kl-podium-places {
        gap: 16px;
    }

    .kl-podium-place {
        min-width: 100px;
        padding: 12px;
    }

    .kl-podium-1st {
        order: 0;
        width: 100%;
        transform: none;
    }

    .kl-podium-1st:hover {
        transform: translateY(-4px);
    }

    .kl-podium-2nd,
    .kl-podium-3rd {
        flex: 1;
        order: initial;
    }

    .kl-leaderboard-table th,
    .kl-leaderboard-table td {
        padding: 10px 8px;
    }

    .kl-col-badges,
    .kl-col-votes {
        display: none;
    }

    .kl-leaderboard-pagination {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* === Animation mise à jour après rotation === */
.kl-slot-updated {
    animation: slotRotationUpdate 1s ease-out;
}

@keyframes slotRotationUpdate {
    0% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.8);
        transform: scale(1);
    }
    30% {
        box-shadow: 0 0 30px 15px rgba(139, 92, 246, 0.4);
        transform: scale(1.02);
    }
    100% {
        box-shadow: none;
        transform: scale(1);
    }
}

/* Timer en rotation (pulsation) */
.kl-timer-rotating .kl-timer-value,
.kl-slot-timer.kl-timer-rotating {
    color: #f59e0b !important;
    animation: timerPulse 1.5s ease-in-out infinite;
}

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