* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Warmer, softer gradient background */
    background: linear-gradient(135deg, #fff0e3 0%, #fde4c6 50%, #fbd4b4 100%);
    min-height: 100vh;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.header {
    text-align: center;
    margin-bottom: 40px;
    color: #3a2a1a;
    padding: 40px 0 24px;
}

.header h1 {
    font-size: 3.5rem;
    font-weight: 900;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, .08);
    margin-bottom: 10px;
    /* Warm tri‑color gradient title */
    background: linear-gradient(45deg, #ff7a59, #ffc857, #f4978e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header .subtitle {
    font-size: 1.3rem;
    opacity: .9;
    font-weight: 300;
}

/* Week navigation controls */
.week-nav {
    margin-top: 18px;
    display: inline-flex;
    gap: 8px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 20px rgba(125, 70, 15, 0.12);
}

.week-nav-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #7a4210;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.week-nav-btn:hover {
    background: #ffefd3;
    color: #5a2e05;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(125, 70, 15, 0.15);
}

.week-nav-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Optional: highlight the current-week button */
#week-current {
    background: linear-gradient(135deg, #ffb347, #ff7a59);
    color: #fff;
}

#week-current:hover {
    background: linear-gradient(135deg, #ff9a3c, #ff6a3f);
    color: #fff;
}

/* Reusable pill link style */
.header-link {
    display: inline-block;
    margin-top: 14px;
    padding: .55rem .9rem;
    border-radius: 999px;
    background: #fff7e8;
    color: #7a4210;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .03em;
    box-shadow: 0 6px 16px rgba(125, 70, 15, .12);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.header-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(125, 70, 15, .18);
    background: #ffefd3;
}

.week-overview {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 40px;
}

.day-pill {
    background: rgba(255, 255, 255, .65);
    /* Removed backdrop-filter for scroll perf */
    /* backdrop-filter: blur(10px); */
    border: 1px solid rgba(255, 255, 255, .55);
    padding: 15px;
    border-radius: 20px;
    text-align: center;
    color: #3b2d22;
    transition: all .3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.day-pill:hover {
    background: rgba(255, 255, 255, .85);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
}

.day-pill .day-name {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.day-pill .day-date {
    font-size: .9rem;
    opacity: .75;
}

.training-grid {
    display: grid;
    gap: 30px;
}

.day-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    /* Avoid rendering offscreen cards until near viewport */
    content-visibility: auto;
    contain-intrinsic-size: 600px;
    will-change: transform;
}

.day-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #ff7a59, #ffc857, #f4978e, #ff7a59);
    background-size: 200% 100%;
    animation: gradientShift 3s ease infinite;
}

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

.day-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .12);
}

.day-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f6f1ea;
}

.day-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f6b980, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

.day-info h2 {
    font-size: 1.8rem;
    color: #2b2b2b;
    margin-bottom: 5px;
}

.day-info .date {
    color: #6b5f56;
    font-size: 1rem;
}

.program-section {
    margin-bottom: 25px;
    padding: 20px;
    border-radius: 15px;
    background: linear-gradient(135deg, #fffaf6, #f6efe7);
    border-left: 5px solid;
    position: relative;
    transition: transform .3s ease;
    /* Defer offscreen section rendering */
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}

/* Warmer accents per program */
.crossfit-section { border-left-color: #ff7a59; }
.hyrox-section    { border-left-color: #f59e0b; }
.barbell-section  { border-left-color: #f6c453; }
.gymnastics-section { border-left-color: #f4978e; }

/* Pure CSS hover scale (replaces JS listeners) */
.program-section:hover { transform: scale(1.02); }

.program-section h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #333;
    display: flex;
    align-items: center;
}

.program-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: .8rem;
}

.crossfit-section .program-icon { background: #ff7a59; }
.hyrox-section .program-icon    { background: #f59e0b; }
.barbell-section .program-icon  { background: #f6c453; }
.gymnastics-section .program-icon { background: #f4978e; }

.workout-details {
    background: white;
    padding: 15px;
    border-radius: 10px;
    margin-top: 10px;
}

.workout-details h4 {
    color: #5b4f45;
    margin-bottom: 10px;
    font-size: 1.05rem;
}

.workout-details ul { list-style: none; }

.workout-details li {
    padding: 5px 0 5px 20px;
    position: relative;
}

.workout-details li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #f59e0b;
    font-weight: 700;
    font-size: 1.2rem;
}

.stats-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 40px 0;
}

.stat-card {
    background: rgba(255, 255, 255, .65);
    /* Removed backdrop-filter for perf */
    /* backdrop-filter: blur(10px); */
    border: 1px solid rgba(255, 255, 255, .7);
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    color: #4b3828;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    background: linear-gradient(45deg, #ffc857, #ff7a59);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label { font-size: 1rem; opacity: .9; }

.footer {
    text-align: center;
    margin-top: 60px;
    padding: 30px;
    color: #6d5a49;
}

.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
    font-size: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
    transition: all .3s ease;
    opacity: 0;
    transform: translateY(20px);
    will-change: transform, opacity;
}

.scroll-top[data-visible='true'] { opacity: 1; transform: translateY(0); }

.scroll-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .18);
}

.week-nav-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #7a4210;
    background: transparent;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.week-nav-link:hover {
    background: #ffefd3;
    color: #5a2e05;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(125, 70, 15, 0.15);
}
.week-nav-link:active {
    transform: translateY(0);
    box-shadow: none;
}

@media (max-width: 768px) {
    .header h1 { font-size: 2.5rem }
    .day-card { padding: 20px }
    .day-header { flex-direction: column; text-align: center }
    .day-icon { margin: 0 0 15px }
    .week-nav {
        margin-top: 16px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .week-nav-btn {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
    .week-nav-link {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important }
}

/* Skeleton loading states */
.skeleton {
    background: rgba(255, 255, 255, 0.8);
    animation: pulse 1.5s ease-in-out infinite;
}

.skeleton-bar {
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    margin-bottom: 10px;
    border-radius: 4px;
}

.skeleton-bar.w40 { width: 40%; }
.skeleton-bar.w70 { width: 70%; }

.skeleton-block {
    height: 150px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
    margin-top: 15px;
}

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Error states */
.error-block {
    text-align: center;
    padding: 40px 20px;
    color: #6b5f56;
}

.error-block p {
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.retry-btn {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}