:root {
  --bg: #e9eef1; --ink: #12263a; --accent: #2f4bff; --mint: #5fe3a1; --diet: #dcefe3;
}
body { background: var(--bg); color: var(--ink); font-family: "Barlow", system-ui, sans-serif; }
h1, h2, .time { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; letter-spacing: .01em; }
h1 { font-size: clamp(2.6rem, 7vw, 4.5rem); line-height: 1; }
.lead { max-width: 52ch; }

.workout-card { border: 0; border-radius: 1rem; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgba(18,38,58,.08); }
.stage { background: var(--ink); aspect-ratio: 3 / 2; }
.stage img, .stage video { width: 100%; height: 100%; object-fit: cover; display: block; }

.timer-row { display: flex; align-items: center; gap: 1.25rem; }
.ring { position: relative; width: 104px; height: 104px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; }
.ring-bg { stroke: #dfe6ea; }
.ring-fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 276.46; stroke-dashoffset: 0; transition: stroke-dashoffset .25s linear; }
.time { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2rem; }
.workout-card.done .ring-fg { stroke: #19a870; }

.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: #1f38d6; --bs-btn-hover-border-color: #1f38d6; font-weight: 600; }
.btn:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

.diet { background: var(--diet); border-radius: .75rem; padding: 1rem 1.1rem; }
.diet li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid rgba(18,38,58,.12); }
.diet li:last-child { border-bottom: 0; }
.diet strong { font-weight: 600; text-align: right; }

@media (prefers-reduced-motion: reduce) { .ring-fg { transition: none; } }

/* 30-day plan additions */
.stage { aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 35%, #1d3a57 0%, var(--ink) 70%); }
.stage svg { width: 100%; height: 100%; display: block; }
.eq-panel { background: #fff; border-radius: 1rem; padding: 1.25rem 1.4rem; }
.dayhead { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.badge.eq { background: var(--accent); }
.badge.bw { background: #6c7f90; }
.badge { font-weight: 600; white-space: normal; text-align: right; }
.diet summary { cursor: pointer; font-weight: 600; }
.btn-check:focus-visible + .btn { outline: 3px solid var(--mint); outline-offset: 2px; }

.cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.cal-month { background: #fff; border-radius: 1rem; padding: 1rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.cal-wd { font-size: .72rem; text-align: center; color: #5b7184; font-weight: 600; }
.cal-day, .cal-off { min-height: 3.7rem; border-radius: .6rem; padding: .35rem .15rem; text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-width: 0; }
.cal-off { color: #8fa2b1; }
.cal-day { border: 0; background: #eef3f6; color: var(--ink); }
.cal-day b { font-size: .95rem; }
.cal-day small, .cal-day em { font-style: normal; font-size: .62rem; color: #4a6277; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-day.rest { background: #e3e8f7; }
.cal-day.ok { background: var(--diet); }
.cal-day.ok b::after { content: " \2713"; color: #19a870; }
.cal-day.active { background: var(--ink); color: #fff; }
.cal-day.active small, .cal-day.active em { color: #c9d6e2; }
.cal-day:hover:not(.active) { background: #dbe5ec; }
.cal-day:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.today { box-shadow: inset 0 0 0 2px var(--accent); }
.note { color: #8a4b00; margin-top: .25rem; }
@media (max-width: 575px) { .cal-day small, .cal-day em { display: none; } .cal-day, .cal-off { min-height: 2.6rem; } }

.meal { background: #fff; border-radius: 1rem; padding: 1.1rem 1.2rem; border-left: 5px solid var(--mint); }
.meal-time { font-size: .8rem; color: #5b7184; }
.meal li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid rgba(18,38,58,.1); font-size: .92rem; }
.meal li:last-child { border-bottom: 0; }
.meal strong { font-weight: 600; text-align: right; }

/* real-photo demonstrator: start and end frame cross-fade */
.stage { position: relative; }
.ph { position: absolute; inset: 0; background: #0c1b2b; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph .b { opacity: 0; animation: ph-swap 2.8s ease-in-out infinite; }
@keyframes ph-swap { 0%, 12% { opacity: 0; } 42%, 62% { opacity: 1; } 92%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ph .b { animation: none; } }