/* MyEureka KPI Widget v2.5.8 - CSS Anti-Conflit + Glassmorphique + Animations Graphiques */

/* Reset complet pour le widget */
.mek-kpi-widget,
.mek-kpi-widget *,
.mek-kpi-widget *::before,
.mek-kpi-widget *::after,
.mek-kpi-compact,
.mek-kpi-compact *,
.mek-kpi-compact *::before,
.mek-kpi-compact *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    line-height: 1.5 !important;
}

/* Variables CSS */
.mek-kpi-widget {
    --mek-primary: #754ffe;
    --mek-primary-light: #9166ff;
    --mek-accent-green: #22c777;
    --mek-accent-blue: #2abbf9;
    --mek-accent-yellow: #fac815;
    --mek-accent-pink: #ff6b8a;
    --mek-bg-card: #fff;
    --mek-bg-light: #f8f9fc;
    --mek-text-dark: #1a1a2e;
    --mek-text-muted: #6c7293;
    --mek-border: #e8e6ef;
    --mek-radius: 16px;
    --mek-padding: 20px;
    --mek-shadow: 0 4px 24px rgba(0,0,0,.08);
    --mek-hover-color: #9166ff;
    --mek-hover-shadow: #754ffe;
    --mek-glass-blur: 10px;
    --mek-glass-border-opacity: 0.3;
}

/* Animations d'entrée */
@keyframes mekFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes mekDrawDonut {
    from {
        stroke-dashoffset: 251;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes mekGrowBar {
    from {
        transform: scaleY(0);
        transform-origin: bottom;
    }
    to {
        transform: scaleY(1);
        transform-origin: bottom;
    }
}

@keyframes mekDrawLine {
    from {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dasharray: 1000;
        stroke-dashoffset: 0;
    }
}

/* Container principal */
.mek-kpi-widget {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--mek-bg-card) !important;
    border-radius: var(--mek-radius) !important;
    box-shadow: var(--mek-shadow) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: calc(var(--mek-padding) + 4px) var(--mek-padding) var(--mek-padding) !important;
    position: relative !important;
    overflow: hidden !important;
    font-size: 14px !important;
    color: var(--mek-text-dark) !important;
    transition: box-shadow 0.3s, transform 0.3s !important;
}

.mek-kpi-widget:hover {
    box-shadow: 0 8px 32px rgba(117, 79, 254, 0.12) !important;
    transform: translateY(-2px) !important;
}

.mek-kpi-widget::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--mek-primary), var(--mek-primary-light), var(--mek-accent-blue)) !important;
    display: block !important;
}

/* Mode Glassmorphique */
.mek-kpi-widget.mek-kpi-glass-mode,
.mek-kpi-compact.mek-kpi-glass-mode {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(var(--mek-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--mek-glass-blur)) !important;
    border: 1px solid rgba(255, 255, 255, var(--mek-glass-border-opacity)) !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37) !important;
}

.mek-kpi-widget.mek-kpi-glass-mode::before {
    background: linear-gradient(90deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2)) !important;
    height: 2px !important;
}

.mek-kpi-widget.mek-kpi-glass-mode * {
    color: #ffffff !important;
}

.mek-kpi-widget.mek-kpi-glass-mode .mek-kpi-card {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(calc(var(--mek-glass-blur) * 0.8)) !important;
    -webkit-backdrop-filter: blur(calc(var(--mek-glass-blur) * 0.8)) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.mek-kpi-widget.mek-kpi-glass-mode .mek-kpi-card:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15) !important;
}

.mek-kpi-widget.mek-kpi-glass-mode .mek-kpi-stat {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(calc(var(--mek-glass-blur) * 0.8)) !important;
    -webkit-backdrop-filter: blur(calc(var(--mek-glass-blur) * 0.8)) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.mek-kpi-widget.mek-kpi-glass-mode .mek-kpi-stat:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.mek-kpi-widget.mek-kpi-glass-mode .mek-kpi-card-label,
.mek-kpi-widget.mek-kpi-glass-mode .mek-kpi-stat-label {
    color: rgba(255, 255, 255, 0.85) !important;
}

.mek-kpi-widget.mek-kpi-glass-mode .mek-kpi-btn-secondary {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

.mek-kpi-widget.mek-kpi-glass-mode .mek-kpi-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.mek-kpi-widget.mek-kpi-glass-mode .mek-kpi-donut-bg {
    stroke: rgba(255, 255, 255, 0.2) !important;
}

.mek-kpi-widget.mek-kpi-glass-mode .mek-kpi-donut-progress {
    stroke: rgba(255, 255, 255, 0.9) !important;
}

.mek-kpi-widget.mek-kpi-glass-mode .mek-kpi-donut-text {
    fill: #ffffff !important;
}

.mek-kpi-widget.mek-kpi-glass-mode .mek-kpi-grid-line {
    stroke: rgba(255, 255, 255, 0.15) !important;
}

.mek-kpi-widget.mek-kpi-glass-mode .mek-kpi-line {
    stroke: rgba(255, 255, 255, 0.9) !important;
}

.mek-kpi-widget.mek-kpi-glass-mode .mek-kpi-area-lessons {
    fill: url(#mek-area-gradient-lessons-glass) !important;
}

.mek-kpi-widget.mek-kpi-glass-mode .mek-kpi-area-quizzes {
    fill: url(#mek-area-gradient-quizzes-glass) !important;
}

/* Compact glassmorphique */
.mek-kpi-compact.mek-kpi-glass-mode .mek-kpi-compact-value {
    color: #ffffff !important;
}

.mek-kpi-compact.mek-kpi-glass-mode .mek-kpi-compact-label,
.mek-kpi-compact.mek-kpi-glass-mode .mek-kpi-compact-percent {
    color: rgba(255, 255, 255, 0.9) !important;
}

.mek-kpi-compact.mek-kpi-glass-mode .mek-kpi-compact-bar {
    background: rgba(255, 255, 255, 0.2) !important;
}

.mek-kpi-compact.mek-kpi-glass-mode .mek-kpi-compact-fill {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)) !important;
}

.mek-kpi-compact.mek-kpi-glass-mode .mek-kpi-compact-level {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Header */
.mek-kpi-widget .mek-kpi-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--mek-border) !important;
}

.mek-kpi-widget .mek-kpi-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #774ffe !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    background: none !important;
}

.mek-kpi-widget .mek-kpi-icon {
    font-size: 20px !important;
    line-height: 1 !important;
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    text-align: center !important;
}

.mek-kpi-widget .mek-kpi-trend {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: rgb(240 236 255) !important;
    color: #774ffe !important;
}

.mek-kpi-widget .mek-kpi-trend-arrow {
    font-size: 14px !important;
    font-weight: bold !important;
}

/* Grid KPI */
.mek-kpi-widget .mek-kpi-grid {
    display: grid !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

.mek-kpi-widget .mek-kpi-grid-1 { grid-template-columns: 1fr !important; }
.mek-kpi-widget .mek-kpi-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.mek-kpi-widget .mek-kpi-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }

@media (max-width: 768px) {
    .mek-kpi-widget .mek-kpi-grid-2,
    .mek-kpi-widget .mek-kpi-grid-3 { grid-template-columns: 1fr !important; }
}

/* Cards */
.mek-kpi-widget .mek-kpi-card {
    background: var(--mek-bg-light) !important;
    border-radius: calc(var(--mek-radius) - 4px) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 18px !important;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s !important;
}

.mek-kpi-widget .mek-kpi-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(117,79,254,.18) !important;
    border-color: rgba(117,79,254,.2) !important;
}

.mek-kpi-widget .mek-kpi-card-primary {
    background: linear-gradient(135deg, rgba(117,79,254,.08), rgba(145,102,255,.08)) !important;
}

.mek-kpi-widget .mek-kpi-card-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--mek-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 12px !important;
    display: block !important;
    text-align: center !important;
}

.mek-kpi-widget .mek-kpi-value {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--mek-text-dark) !important;
    line-height: 1.1 !important;
    margin-bottom: 14px !important;
    display: block !important;
    text-align: center !important;
}

/* Donut Chart */
.mek-kpi-widget .mek-kpi-donut-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0 !important;
}

.mek-kpi-widget .mek-kpi-donut {
    width: 110px !important;
    height: 110px !important;
    max-width: 110px !important;
    max-height: 110px !important;
    transform: rotate(-90deg) !important;
    display: block !important;
}

.mek-kpi-widget .mek-kpi-donut-bg {
    fill: none !important;
    stroke: rgba(117,79,254,.15) !important;
    stroke-width: 10 !important;
}

.mek-kpi-widget .mek-kpi-donut-progress {
    fill: none !important;
    stroke: var(--mek-primary) !important;
    stroke-width: 10 !important;
    stroke-linecap: round !important;
    animation: mekDonutGrow 1.2s ease-out !important;
}

@keyframes mekDonutGrow {
    from {
        stroke-dasharray: 0 251;
    }
}

.mek-kpi-widget .mek-kpi-donut-text {
    font-size: 18px !important;
    font-weight: 800 !important;
    fill: var(--mek-text-dark) !important;
    text-anchor: middle !important;
    dominant-baseline: central !important;
    transform: rotate(90deg) !important;
    transform-origin: 50% 50% !important;
}

/* Bar Chart */
.mek-kpi-widget .mek-kpi-bar-chart {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    height: 70px !important;
    gap: 6px !important;
    padding-top: 8px !important;
}

.mek-kpi-widget .mek-kpi-bar {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 100% !important;
    position: relative !important;
}

.mek-kpi-widget .mek-kpi-bar::before {
    content: '' !important;
    width: 100% !important;
    max-width: 24px !important;
    height: var(--bar-height, 50%) !important;
    min-height: 6px !important;
    background: linear-gradient(180deg, var(--mek-primary), var(--mek-primary-light)) !important;
    border-radius: 3px 3px 0 0 !important;
    margin-top: auto !important;
    display: block !important;
    animation: mekBarGrow 0.8s ease-out !important;
}

@keyframes mekBarGrow {
    from { 
        height: 0;
        opacity: 0;
    }
}

.mek-kpi-widget .mek-kpi-bar-label {
    font-size: 9px !important;
    color: var(--mek-text-muted) !important;
    margin-top: 6px !important;
    font-weight: 500 !important;
    display: block !important;
}

/* Animation delays for bars */
.mek-kpi-widget .mek-kpi-bar:nth-child(1)::before { animation-delay: 0s !important; }
.mek-kpi-widget .mek-kpi-bar:nth-child(2)::before { animation-delay: 0.1s !important; }
.mek-kpi-widget .mek-kpi-bar:nth-child(3)::before { animation-delay: 0.2s !important; }
.mek-kpi-widget .mek-kpi-bar:nth-child(4)::before { animation-delay: 0.3s !important; }
.mek-kpi-widget .mek-kpi-bar:nth-child(5)::before { animation-delay: 0.4s !important; }
.mek-kpi-widget .mek-kpi-bar:nth-child(6)::before { animation-delay: 0.5s !important; }

/* Line Chart */
.mek-kpi-widget .mek-kpi-line-chart {
    position: relative !important;
}

.mek-kpi-widget .mek-kpi-line-chart svg {
    width: 100% !important;
    height: 55px !important;
    max-height: 55px !important;
    overflow: visible !important;
    display: block !important;
}

.mek-kpi-widget .mek-kpi-line {
    fill: none !important;
    stroke: var(--mek-primary) !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    animation: mekLineAppear 0.6s ease-out !important;
}

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

.mek-kpi-widget .mek-kpi-line-dot {
    fill: var(--mek-bg-card) !important;
    stroke: var(--mek-primary) !important;
    stroke-width: 2 !important;
    animation: mekDotAppear 0.4s ease-out !important;
}

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

.mek-kpi-widget .mek-kpi-line-dot:nth-child(2) { animation-delay: 0.1s !important; }
.mek-kpi-widget .mek-kpi-line-dot:nth-child(3) { animation-delay: 0.2s !important; }
.mek-kpi-widget .mek-kpi-line-dot:nth-child(4) { animation-delay: 0.3s !important; }
.mek-kpi-widget .mek-kpi-line-dot:nth-child(5) { animation-delay: 0.4s !important; }
.mek-kpi-widget .mek-kpi-line-dot:nth-child(6) { animation-delay: 0.5s !important; }
.mek-kpi-widget .mek-kpi-line-dot:nth-child(7) { animation-delay: 0.6s !important; }

@keyframes mek-dot-appear {
    to { opacity: 1; }
}

.mek-kpi-widget .mek-kpi-line-labels {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 6px !important;
}

.mek-kpi-widget .mek-kpi-line-labels span {
    font-size: 9px !important;
    color: var(--mek-text-muted) !important;
    font-weight: 500 !important;
}

/* Summary Chart */
.mek-kpi-widget .mek-kpi-summary {
    background: var(--mek-bg-light) !important;
    border-radius: calc(var(--mek-radius) - 4px) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 18px !important;
    margin-bottom: 20px !important;
}

.mek-kpi-widget .mek-kpi-summary-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.mek-kpi-widget .mek-kpi-summary-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--mek-text-dark) !important;
}

.mek-kpi-widget .mek-kpi-legend {
    display: flex !important;
    gap: 14px !important;
}

.mek-kpi-widget .mek-kpi-legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    color: var(--mek-text-muted) !important;
}

.mek-kpi-widget .mek-kpi-legend-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.mek-kpi-widget .mek-kpi-legend-lessons .mek-kpi-legend-dot { background: var(--mek-primary) !important; }
.mek-kpi-widget .mek-kpi-legend-quizzes .mek-kpi-legend-dot { background: var(--mek-accent-yellow) !important; }

.mek-kpi-widget .mek-kpi-area-chart svg {
    width: 100% !important;
    height: 90px !important;
    max-height: 90px !important;
    overflow: visible !important;
    display: block !important;
}

.mek-kpi-widget .mek-kpi-grid-line {
    stroke: var(--mek-border) !important;
    stroke-width: 1 !important;
    stroke-dasharray: 4 4 !important;
}

.mek-kpi-widget .mek-kpi-area-lessons {
    fill: rgba(117,79,254,.12) !important;
    opacity: 0 !important;
    animation: mek-area-fade 1s ease-out forwards !important;
}

.mek-kpi-widget .mek-kpi-area-quizzes {
    fill: rgba(250,200,21,.15) !important;
    opacity: 0 !important;
    animation: mek-area-fade 1s ease-out 0.2s forwards !important;
}

@keyframes mek-area-fade {
    to { opacity: 1; }
}

.mek-kpi-widget .mek-kpi-line-lessons {
    fill: none !important;
    stroke: var(--mek-primary) !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.mek-kpi-widget .mek-kpi-line-quizzes {
    fill: none !important;
    stroke: var(--mek-accent-yellow) !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.mek-kpi-widget .mek-kpi-area-lessons,
.mek-kpi-widget .mek-kpi-area-quizzes {
    animation: mekFadeInArea 0.6s ease-out !important;
}

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

.mek-kpi-widget .mek-kpi-area-labels {
    display: flex !important;
    justify-content: space-around !important;
    margin-top: 10px !important;
}

.mek-kpi-widget .mek-kpi-area-labels span {
    font-size: 10px !important;
    color: var(--mek-text-muted) !important;
    font-weight: 500 !important;
}

/* Quick Stats - Style original avec emojis */
.mek-kpi-widget .mek-kpi-quick-stats {
    display: grid !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

.mek-kpi-widget .mek-kpi-stats-1 { grid-template-columns: 1fr !important; }
.mek-kpi-widget .mek-kpi-stats-2 { grid-template-columns: repeat(2, 1fr) !important; }
.mek-kpi-widget .mek-kpi-stats-3 { grid-template-columns: repeat(3, 1fr) !important; }
.mek-kpi-widget .mek-kpi-stats-4 { grid-template-columns: repeat(4, 1fr) !important; }

@media (max-width: 768px) {
    .mek-kpi-widget .mek-kpi-stats-3,
    .mek-kpi-widget .mek-kpi-stats-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
    .mek-kpi-widget .mek-kpi-stats-2,
    .mek-kpi-widget .mek-kpi-stats-3,
    .mek-kpi-widget .mek-kpi-stats-4 { grid-template-columns: 1fr !important; }
}

.mek-kpi-widget .mek-kpi-stat {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    background: var(--mek-bg-light) !important;
    border-radius: calc(var(--mek-radius) - 6px) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    transition: background 0.3s, border-color 0.3s !important;
}

.mek-kpi-widget .mek-kpi-stat:hover {
    background: rgba(117,79,254,.06) !important;
    border-color: rgba(117,79,254,.15) !important;
}

.mek-kpi-widget .mek-kpi-stat-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.mek-kpi-widget .mek-kpi-stat-icon-time { background: linear-gradient(135deg, var(--mek-accent-green), #2ecc71) !important; }
.mek-kpi-widget .mek-kpi-stat-icon-week { background: linear-gradient(135deg, var(--mek-accent-blue), #4fc3f7) !important; }
.mek-kpi-widget .mek-kpi-stat-icon-quiz { background: linear-gradient(135deg, var(--mek-accent-pink), #ff8fab) !important; }
.mek-kpi-widget .mek-kpi-stat-icon-level { background: linear-gradient(135deg, var(--mek-accent-yellow), #ffb347) !important; }

.mek-kpi-widget .mek-kpi-stat-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

.mek-kpi-widget .mek-kpi-stat-label {
    font-size: 11px !important;
    color: var(--mek-text-muted) !important;
    font-weight: 500 !important;
    display: block !important;
}

.mek-kpi-widget .mek-kpi-stat-value {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--mek-text-dark) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

.mek-kpi-widget .mek-kpi-level-beginner { color: var(--mek-accent-blue) !important; }
.mek-kpi-widget .mek-kpi-level-intermediate { color: var(--mek-accent-green) !important; }
.mek-kpi-widget .mek-kpi-level-advanced { color: var(--mek-primary) !important; }
.mek-kpi-widget .mek-kpi-level-expert { color: #ff9f43 !important; }

/* Action Buttons */
.mek-kpi-widget .mek-kpi-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.mek-kpi-widget .mek-kpi-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    border-radius: calc(var(--mek-radius) - 6px) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
    cursor: pointer !important;
    text-align: center !important;
}

.mek-kpi-widget .mek-kpi-btn-primary {
    background: linear-gradient(135deg, #784ffe, #8d63ff) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(117, 79, 254, 0) !important;
}

.mek-kpi-widget .mek-kpi-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(117,79,254,.45) !important;
    color: #fff !important;
}

.mek-kpi-widget .mek-kpi-btn-secondary {
    background: var(--mek-bg-light) !important;
    color: var(--mek-text-dark) !important;
    border: 2px solid var(--mek-border) !important;
}

.mek-kpi-widget .mek-kpi-btn-secondary:hover {
    background: rgba(117,79,254,.08) !important;
    border-color: var(--mek-primary) !important;
    color: var(--mek-primary) !important;
}

/* Login Notice */
.mek-kpi-login-notice,
.mek-kpi-error {
    text-align: center !important;
    padding: 40px 24px !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.08) !important;
}

.mek-kpi-login-notice p,
.mek-kpi-error {
    color: #6c7293 !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
}

.mek-kpi-login-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 28px !important;
    background: linear-gradient(135deg, #754ffe, #9166ff) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: transform 0.3s !important;
}

.mek-kpi-login-btn:hover {
    transform: translateY(-2px) !important;
    color: #fff !important;
}

/* Compact Widget */
.mek-kpi-compact {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    background: #fff !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

.mek-kpi-compact-score {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.mek-kpi-compact-value {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #754ffe !important;
    line-height: 1 !important;
}

.mek-kpi-compact-label {
    font-size: 10px !important;
    color: #6c7293 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.mek-kpi-compact-progress {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 120px !important;
}

.mek-kpi-compact-bar {
    flex: 1 !important;
    height: 8px !important;
    background: rgba(117,79,254,.15) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

.mek-kpi-compact-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #754ffe, #9166ff) !important;
    border-radius: 4px !important;
    transition: width 1s ease-out !important;
}

.mek-kpi-compact-percent {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    min-width: 40px !important;
}

.mek-kpi-compact-level {
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    background: rgba(117,79,254,.1) !important;
}

/* Mobile */
@media (max-width: 576px) {
    .mek-kpi-widget {
        padding: 16px !important;
    }
    .mek-kpi-widget .mek-kpi-title {
        font-size: 0.9rem !important;
    }
    .mek-kpi-widget .mek-kpi-value {
        font-size: 24px !important;
    }
    .mek-kpi-widget .mek-kpi-donut {
        width: 90px !important;
        height: 90px !important;
    }
    .mek-kpi-widget .mek-kpi-actions {
        flex-direction: column !important;
    }
    .mek-kpi-widget .mek-kpi-btn {
        width: 100% !important;
    }
}