@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
        font-family: 'Inter', sans-serif;
        background-color: #f3f4f6;
}

.hide {
        display: none !important;
}

.mobile-container {
        max-width: 480px;
        margin: 0 auto;
        background: white;
        min-height: 100vh;
        position: relative;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        overflow-x: hidden;
}

.admin-container {
        max-width: 1200px;
        margin: 0 auto;
        background: white;
        min-height: 100vh;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar {
        width: 6px;
        height: 6px;
}

::-webkit-scrollbar-track {
        background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;
}

.skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        border-radius: 0.5rem;
        color: transparent !important;
}

.skeleton * {
        visibility: hidden;
}

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

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

.success-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: #10B981;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
}

.success-overlay.show {
        opacity: 1;
        pointer-events: all;
}

.success-overlay .icon {
        font-size: 6rem;
        transform: scale(0.5);
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.success-overlay.show .icon {
        transform: scale(1);
}

.calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
        text-align: center;
}

.cal-header {
        font-size: 0.7rem;
        font-weight: 600;
        color: #6B7280;
        padding: 4px 0;
}

.cal-day {
        min-height: 3.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        border-radius: 8px;
        border: 1px solid #F3F4F6;
        position: relative;
        cursor: pointer;
        transition: 0.2s;
        padding: 4px;
}

.cal-day:hover {
        background: #F9FAFB;
}

.cal-day.empty {
        background: transparent;
        border: none;
        cursor: default;
}

.dot-indicator {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-top: 2px;
}

.medal-gold {
        color: #F59E0B;
}

.medal-silver {
        color: #9CA3AF;
}

.medal-bronze {
        color: #B45309;
}