:root {
    --color-primary: #6366f1;
    --color-secondary: #f472b6;
    --color-accent: #06b6d4;
    --color-yellow: #facc15;
    --color-bg-light: #f9fafb;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-container {
    flex-grow: 1;
    min-height: calc(100vh - 64px - 80px);
    padding-top: 64px;
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.text-shadow-custom {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.colorful-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.colorful-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

.hero-bg {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    animation: gradient-shift 15s ease infinite;
    background-size: 200% 200%;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.page-content {
    animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.leaderboard-table tr {
    display: grid;
    grid-template-columns: 1fr 2fr 1.5fr;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}
@media (min-width: 768px) {
    .leaderboard-table tr {
        display: table-row;
    }
}

.detail-banner {
    background-size: cover;
    background-position: center;
    height: 250px;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    color: white;
    position: relative;
}
.detail-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}

.sync-loading {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
:root{
  --glass: rgba(255,255,255,0.6);
}
html,body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;}
.nav-link{color:rgba(63,63,70,0.9);position:relative;padding:6px 4px;}
.nav-link::after{content:'';height:3px;background:linear-gradient(90deg,#7c3aed,#ec4899);width:0%;position:absolute;left:0;bottom:-6px;border-radius:3px;transition:width .28s ease}
.nav-link:hover::after{width:100%}
.card-tilt{transform-style:preserve-3d;transition:transform .25s cubic-bezier(.2,.9,.3,1),box-shadow .25s;}
.card-tilt:hover{transform:translateY(-8px) rotateX(4deg) rotateY(-6deg);box-shadow:0 20px 40px rgba(16,24,40,0.12)}
.timeline-dot{width:14px;height:14px;border-radius:50%;box-shadow:0 6px 14px rgba(16,24,40,0.12)}
/* gradients for badges */
.g-grad-1{background:linear-gradient(135deg,#7c3aed,#06b6d4)}
.g-grad-2{background:linear-gradient(135deg,#ec4899,#f59e0b)}
.g-grad-3{background:linear-gradient(135deg,#06b6d4,#7c3aed)}