:root {
  --bg: #0a0a0a;
  --surface: #141414;
  --border: #262626;
  --text: #f5f5f5;
  --primary: #cfe306;
  --secondary: #8b8b8b;
  --success: #22c55e;
  --danger: #ef4444;
  --fs-kicker: .78rem;
  --fs-body: 1rem;
  --fs-body-lg: clamp(1rem, 2.2vw, 1.2rem);
  --fs-lead: clamp(1.1rem, 3vw, 1.55rem);
  --fs-title-xl: clamp(2.35rem, 9.2vw, 4.75rem);
  --fs-title-lg: clamp(2rem, 7vw, 3.2rem);
  --fs-title-md: clamp(1.45rem, 5.2vw, 2.1rem);
  --fs-card-title: clamp(1.45rem, 5.1vw, 1.95rem);
}

body.light {
  --bg: #ffffff;
  --surface: #f7f7f7;
  --border: #e5e5e5;
  --text: #0a0a0a;
  --primary: #cfe306;
  --secondary: #6b7280;
  --success: #22c55e;
  --danger: #ef4444;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  padding: 1rem;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  flex: 1 0 auto;
}
.nav {
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 20;
}
.nav-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: .75rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.nav img { height: 34px; }
.nav a { color: var(--text); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.menu-toggle {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid var(--border);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
}
.menu-toggle span {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: var(--text);
}
.nav-links {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1rem 1rem;
  display: none;
  grid-template-columns: 1fr;
  gap: .45rem;
}
.nav-links.is-open { display: grid; }
.nav-links a,
.nav-links .btn {
  justify-content: flex-start;
}
.nav-login {
  background: var(--primary);
  color: #0a0a0a;
  border-color: var(--primary);
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--text);
}
.nav-theme-btn {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 44px;
  min-height: 34px;
  padding: 0 .1rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.theme-toggle-label {
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  font-size: .9rem;
}
.theme-toggle-track {
  width: 58px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 90%, var(--bg));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 7px;
  position: relative;
}
.theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--text);
  transition: transform .2s ease;
}
.nav-theme-btn.is-light .theme-toggle-thumb {
  transform: translateX(24px);
}
.theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--secondary);
  z-index: 1;
}
.theme-icon svg {
  width: 13px;
  height: 13px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.avatar-link { gap: .45rem; }
.avatar-badge {
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 25%, var(--surface));
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
}
.nav-avatar-icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--text);
  border-radius: 999px;
  padding: 0;
  box-sizing: border-box;
  flex: 0 0 44px;
}
.nav-avatar-icon .avatar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  width: 100%;
  height: 100%;
}
.nav-avatar-icon .avatar-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
}
h1,h2 { font-family: 'Barlow Condensed', sans-serif; font-style: italic; letter-spacing: .02em; }
.form { display: grid; gap: .75rem; }
input,select,button {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .7rem;
  font: inherit;
}
input:focus,select:focus,button:focus,a:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn { background: transparent; color: var(--text); border: 1px solid var(--border); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1rem; }
.btn.primary { background: var(--primary); color: #0a0a0a; border-color: var(--primary); font-weight: 700; }
.btn.ghost { background: transparent; }
.grid-12 { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.day-card { border: 1px solid var(--border); border-radius: 10px; padding: .75rem; color: var(--text); text-decoration: none; display: grid; gap: .35rem; }
.status-completed { border-color: var(--success); }
.status-available { border-color: var(--primary); }
.site-footer {
  margin-top: auto;
  width: 100%;
  border-top: 1px solid var(--border);
}
.site-footer-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.25rem;
  text-align: left;
}
.site-footer-inner p {
  margin: 0;
}
.alert { padding: .75rem; border-radius: 8px; margin: .5rem 0; }
.alert.success { background: color-mix(in srgb, var(--success) 20%, transparent); border: 1px solid var(--success); }
.alert.danger { background: color-mix(in srgb, var(--danger) 20%, transparent); border: 1px solid var(--danger); }
.set-row { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.secondary { color: var(--secondary); }
.set-row.is-done { opacity: .9; }
.set-done {
  color: var(--success);
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--success) 45%, var(--border));
  border-radius: 8px;
  padding: .4rem .6rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.rest-timer {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .85rem;
  margin: .9rem 0;
  background: color-mix(in srgb, var(--surface) 80%, var(--primary) 20%);
}
.rest-timer__head {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  align-items: center;
}
.rest-timer__bar {
  margin-top: .5rem;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.rest-timer__bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--primary);
  transition: width .2s linear;
}
.rest-timer.is-ready .rest-timer__bar span { background: var(--success); }

.landing {
  background: var(--bg);
}
.landing-hero,
.landing-how,
.landing-blog,
.landing-footline {
  padding: 1.25rem;
}
.landing-hero { border-top: 0; }
.landing-stats,
.landing-how,
.landing-blog {
  position: relative;
}
.landing-stats::before,
.landing-how::before,
.landing-blog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid var(--border);
  pointer-events: none;
}
.landing-badge {
  display: inline-flex;
  border: 2px solid var(--text);
  border-radius: 999px;
  padding: .35rem .75rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.landing-badge::before {
  content: "●";
  color: var(--primary);
  margin-right: .45rem;
}
.landing-headline {
  margin: 1rem 0 .75rem;
  display: grid;
  line-height: .9;
  text-transform: uppercase;
  font-style: normal;
}
.landing-headline .line-1,
.landing-headline .line-2,
.landing-headline .line-3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(3.4rem, 16vw, 7.8rem);
  font-weight: 700;
}
.landing-headline .line-1 { color: var(--text); }
.landing-headline .line-2 { color: var(--primary); }
.landing-headline .line-3 { color: color-mix(in srgb, var(--text) 60%, var(--secondary)); }
.landing-quote {
  margin: .8rem 0;
  font-size: clamp(1.2rem, 5.2vw, 2.2rem);
  line-height: 1.2;
  font-weight: 600;
}
.landing-description {
  color: var(--secondary);
  max-width: 42rem;
  line-height: 1.5;
}
.landing-actions {
  margin-top: 1rem;
  display: grid;
  gap: .65rem;
}
.landing-actions .btn {
  width: 100%;
  font-weight: 700;
}
.landing-actions .btn.primary {
  box-shadow: 4px 4px 0 var(--text);
}
.landing-actions .btn:not(.primary) {
  border: 2px solid var(--text);
}
.landing-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
}
.stat-card {
  padding: 1.25rem;
  text-align: center;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat-card:nth-child(2n) { border-right: 0; }
.stat-card strong {
  display: block;
  color: var(--primary);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.6rem, 11vw, 4.2rem);
  line-height: .95;
  margin-bottom: .35rem;
}
.stat-card span {
  letter-spacing: .08em;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 65%, var(--secondary));
}
.landing-how h2,
.landing-blog h2 {
  margin: 0 0 1rem;
  text-transform: uppercase;
  font-size: clamp(2rem, 10vw, 4rem);
  font-style: normal;
}
.how-grid {
  display: grid;
  gap: .75rem;
}
.how-card {
  border: 2px solid var(--text);
  padding: 1rem;
  box-shadow: 4px 4px 0 var(--text);
}
.how-card small {
  color: var(--primary);
  font-weight: 700;
}
.how-card h3 {
  margin: .4rem 0 .6rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-style: normal;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 8vw, 2.4rem);
}
.how-card p {
  margin: 0;
  color: var(--secondary);
  line-height: 1.45;
}
.landing-blog {
  display: grid;
  gap: .8rem;
  align-items: center;
}
.landing-blog p {
  color: var(--secondary);
  max-width: 38rem;
  margin: 0;
}
.landing-blog .btn {
  width: fit-content;
  border: 1px solid var(--border);
}
.landing-footline {
  display: grid;
  gap: .45rem;
  color: var(--secondary);
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .08em;
}

.blog-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 1rem 0 2rem;
}
.blog-list-head {
  margin-bottom: 1.25rem;
}
.blog-list-kicker {
  margin: 0;
  color: #ef6040;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: var(--fs-kicker);
}
.blog-list-head h1 {
  margin: .2rem 0 .6rem;
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--fs-title-xl);
  line-height: .9;
}
.blog-list-lead {
  margin: 0;
  color: var(--secondary);
  font-size: var(--fs-body-lg);
  max-width: 760px;
  line-height: 1.35;
}
.blog-list-cards {
  margin-top: 1.25rem;
  display: grid;
  gap: .85rem;
}
.blog-list-card {
  display: block;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, var(--surface));
  text-decoration: none;
  color: inherit;
  padding: 1rem;
}
.blog-list-card:hover {
  border-color: color-mix(in srgb, var(--text) 30%, var(--border));
}
.blog-list-card-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .55rem;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--secondary);
  font-weight: 700;
}
.blog-list-card-category {
  color: #ef6040;
}
.blog-list-card h2 {
  margin: 0 0 .4rem;
  font-style: normal;
  text-transform: uppercase;
  line-height: .95;
  font-size: var(--fs-card-title);
}
.blog-list-card-excerpt {
  margin: 0;
  color: var(--secondary);
  font-size: var(--fs-body-lg);
  line-height: 1.4;
}

.blog-post-page {
  max-width: 760px;
}
.blog-post-back {
  color: var(--secondary);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: .9rem;
}
.blog-post-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1.25rem 0 .55rem;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--secondary);
  font-weight: 700;
}
.blog-post-category {
  color: #ef6040;
}
.blog-post-page h1 {
  margin: 0 0 .85rem;
  font-style: normal;
  text-transform: uppercase;
  line-height: .95;
  font-size: var(--fs-title-xl);
}
.blog-post-lead {
  margin: 0 0 1.3rem;
  color: var(--secondary);
  font-size: var(--fs-lead);
  line-height: 1.35;
}
.blog-post-body {
  display: grid;
  gap: .6rem;
}
.blog-post-body p {
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
}
.blog-post-accent {
  color: #ef6040;
}

.profile-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.25rem 0 2rem;
}
.profile-head {
  margin-bottom: 1.2rem;
}
.profile-kicker {
  margin: 0;
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: var(--fs-kicker);
}
.profile-head h1 {
  margin: .2rem 0;
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--fs-title-xl);
}
.profile-email {
  margin: 0;
  color: var(--secondary);
  font-size: var(--fs-body-lg);
}
.profile-avatar-section h2 {
  margin: 1rem 0 .25rem;
  text-transform: uppercase;
  font-style: normal;
}
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin: .8rem 0 1rem;
}
.avatar-tile-form { margin: 0; }
.avatar-tile {
  width: 100%;
  min-height: 96px;
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: .6rem;
  border-radius: 0;
  display: grid;
  place-items: center;
  gap: .2rem;
}
.avatar-tile.is-selected {
  background: var(--primary);
  color: #0a0a0a;
  border-color: #0a0a0a;
  box-shadow: 4px 4px 0 #0a0a0a;
}
.avatar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.avatar-icon svg {
  width: 2rem;
  height: 2rem;
  stroke-width: 2.5;
}
.avatar-label {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: .82rem;
}
.profile-program {
  margin-top: 1rem;
  border-radius: 0;
}
.profile-program h3 {
  margin: 0 0 .35rem;
  text-transform: uppercase;
  font-size: .95rem;
  font-style: normal;
  letter-spacing: .08em;
  color: var(--secondary);
}
.profile-program p {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
}
.profile-program-delete {
  margin-top: .8rem;
  border: 2px solid var(--danger);
  color: var(--danger);
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 700;
}
.profile-program-delete:hover,
.profile-program-delete:focus-visible {
  background: var(--danger);
  color: #fff;
}
.profile-logout {
  margin-top: 1rem;
  border: 2px solid var(--text);
  border-radius: 0;
  font-weight: 700;
  text-transform: uppercase;
  width: fit-content;
}

.auth-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 0 3rem;
}
.auth-head {
  margin-bottom: 1.2rem;
  max-width: 590px;
  margin-left: auto;
  margin-right: auto;
}
.auth-kicker {
  margin: 0;
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .08em;
}
.auth-head h1 {
  margin: .25rem 0 .55rem;
  text-transform: uppercase;
  font-style: normal;
  font-size: var(--fs-title-xl);
}
.auth-subtitle {
  margin: 0;
  color: var(--secondary);
  max-width: 26rem;
  line-height: 1.4;
  font-size: var(--fs-body-lg);
}
.auth-card {
  margin-top: 1.2rem;
  border: 2px solid var(--text);
  box-shadow: 6px 6px 0 var(--text);
  padding: 1rem;
  background: var(--bg);
  max-width: 590px;
  margin-left: auto;
  margin-right: auto;
}
.auth-form label {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: .2rem;
}
.auth-form input {
  border: 2px solid var(--border);
  border-radius: 0;
  font-size: 1.05rem;
  padding: .9rem .85rem;
}
.auth-submit {
  border-radius: 0;
  border: 0;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: none;
}
.auth-step-title {
  margin: 0 0 .25rem;
  text-transform: uppercase;
  font-style: normal;
}
.auth-step-subtitle {
  margin: 0 0 .8rem;
  color: var(--secondary);
}
.auth-head-otp .auth-kicker {
  color: var(--danger);
}
.auth-card-otp {
  max-width: 760px;
  border-width: 4px;
  box-shadow: 10px 10px 0 #0a0a0a;
  padding: 1.35rem 1.35rem 1.15rem;
}
.auth-form-otp label {
  margin-bottom: .45rem;
  font-size: inherit;
  font-family: inherit;
  font-style: normal;
}
.auth-otp-input-wrap {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  border: 4px solid var(--border);
  background: color-mix(in srgb, var(--surface) 85%, #fff 15%);
  padding: 0 .95rem 0 .3rem;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.auth-otp-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--secondary);
}
.auth-otp-key svg {
  width: 22px;
  height: 22px;
}
.auth-form-otp input#otp_code {
  border: 0;
  background: transparent;
  text-align: center;
  letter-spacing: .12em;
  font-size: 1.05rem;
  color: var(--secondary);
  padding-left: .12em;
  min-height: 44px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: clip;
}
.auth-submit-otp {
  margin-top: .75rem;
  background: var(--primary);
  color: #0a0a0a;
  font-weight: 700;
  border-radius: 0;
  min-height: 44px;
  font-size: 1.05rem;
  font-family: inherit;
  font-style: normal;
  text-transform: uppercase;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
}
.auth-submit-otp:hover,
.auth-submit-otp:focus-visible {
  background: color-mix(in srgb, var(--primary) 90%, #fff 10%);
}
.auth-otp-back {
  margin-top: .45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  width: 100%;
  font-size: 1.15rem;
}

.plan-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.25rem 0 2rem;
}
.plan-hero {
  margin-bottom: .75rem;
}
.plan-kicker {
  margin: 0;
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: var(--fs-kicker);
}
.plan-hero h1 {
  margin: .2rem 0 .5rem;
  font-style: normal;
  text-transform: uppercase;
  line-height: .95;
}
.plan-hero h1 span {
  display: block;
  font-size: var(--fs-title-xl);
}
.plan-hero h1 span:last-child { color: var(--primary); }
.plan-description {
  margin: 0;
  color: var(--secondary);
  line-height: 1.45;
}
.plan-description a {
  color: var(--primary);
  font-weight: 700;
}
.plan-week {
  margin-top: 1rem;
}
.plan-week-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: .35rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
}
.plan-week-head h2 {
  margin: 0;
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--fs-title-md);
}
.plan-week-head h2 span { color: var(--primary); }
.plan-week-head p {
  margin: 0;
  color: var(--secondary);
  text-transform: uppercase;
  font-size: .76rem;
  letter-spacing: .08em;
}
.plan-day-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  margin-top: .6rem;
}
.plan-day-card {
  border: 1px solid var(--border);
  background: var(--bg);
  padding: .65rem;
}
.plan-day-meta {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  align-items: baseline;
}
.plan-day-meta strong,
.plan-day-meta span {
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--secondary);
}
.plan-reps {
  margin: .35rem 0 .45rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 8vw, 2rem);
  line-height: .95;
}
.plan-day-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}
.plan-day-foot small {
  color: var(--secondary);
  font-size: .68rem;
  text-transform: lowercase;
}
.plan-day-foot span {
  font-size: .66rem;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--surface) 92%, var(--text));
  border: 1px solid var(--border);
  padding: .15rem .35rem;
  border-radius: 5px;
}

.progress-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 1rem 0 2rem;
}
.progress-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}
.progress-kicker {
  margin: 0;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
.progress-head h1 {
  margin: .15rem 0;
  text-transform: uppercase;
  font-style: normal;
  font-size: var(--fs-title-xl);
}
.progress-start {
  text-align: right;
  padding-bottom: .22rem;
}
.progress-start span {
  display: block;
  text-transform: uppercase;
  color: var(--secondary);
  letter-spacing: .08em;
}
.progress-start strong {
  font-size: clamp(1rem, 2.6vw, 1.35rem);
}
.progress-track {
  margin: .45rem 0 .4rem;
  border: 2px solid var(--text);
  height: 16px;
  padding: 1px;
}
.progress-track span {
  display: block;
  height: 100%;
  background: var(--primary);
}
.progress-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: .85rem;
}
.progress-legend span {
  display: inline-flex;
  gap: .3rem;
  align-items: center;
  text-transform: uppercase;
  color: var(--secondary);
  letter-spacing: .08em;
}
.progress-legend i {
  width: 14px;
  height: 14px;
  border: 1px solid var(--border);
  display: inline-block;
}
.lg-future { background: color-mix(in srgb, var(--surface) 92%, var(--text)); }
.lg-today { background: var(--danger); border-color: var(--danger); }
.lg-done { background: var(--primary); border-color: var(--primary); }
.lg-missed { background: transparent; border: 2px solid color-mix(in srgb, var(--text) 45%, var(--secondary)); }

.progress-week-row {
  display: grid;
  grid-template-columns: 64px repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin-bottom: .55rem;
}
.week-badge {
  border: 2px solid var(--text);
  display: grid;
  place-items: center;
  padding: .45rem .3rem;
  text-transform: uppercase;
}
.week-badge span {
  color: var(--secondary);
  font-size: .78rem;
  letter-spacing: .08em;
}
.week-badge strong {
  color: var(--primary);
  font-size: 2rem;
  line-height: 1;
}
.progress-day {
  border: 2px solid var(--border);
  text-decoration: none;
  color: var(--text);
  padding: .55rem .7rem;
  display: grid;
  gap: .15rem;
  min-height: 110px;
}
.progress-day .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
}
.progress-day .meta strong {
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--secondary);
}
.progress-day .meta span {
  font-weight: 700;
}
.progress-day p {
  margin: .1rem 0 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: .9;
  font-weight: 700;
}
.progress-day small {
  color: var(--secondary);
  font-size: 1.05rem;
}
.progress-day.done {
  background: var(--primary);
  border-color: var(--primary);
}
.progress-day.done * { color: #0a0a0a; }
.progress-day.today {
  border-color: var(--danger);
}
.progress-day.missed {
  border-color: color-mix(in srgb, var(--text) 50%, var(--secondary));
}

.progress-empty {
  min-height: calc(100vh - 260px);
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: .6rem;
}
.progress-empty h1 {
  margin: 0;
  text-transform: uppercase;
  font-style: normal;
  font-size: var(--fs-title-xl);
  line-height: .95;
}
.progress-empty p {
  margin: 0;
  color: var(--secondary);
  font-size: var(--fs-body-lg);
}
.progress-empty-start {
  margin-top: 1rem;
}
.progress-empty-start summary {
  list-style: none;
  cursor: pointer;
  min-width: 290px;
  text-transform: uppercase;
  font-weight: 700;
  border: 0;
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--text);
}
.progress-empty-start summary::-webkit-details-marker { display: none; }
.progress-empty-start[open] .form {
  margin-top: .8rem;
  text-align: left;
  width: min(92vw, 420px);
  background: var(--bg);
  border: 2px solid var(--text);
  padding: .9rem;
}
.progress-empty-start[open] #plan-start-result {
  margin-top: .5rem;
  width: min(92vw, 420px);
}

.day-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 1.2rem 0 2rem;
}
.day-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.day-back {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--secondary);
  text-decoration: none;
  font-weight: 700;
}
.day-sound {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--secondary);
}
.day-sound svg {
  width: 20px;
  height: 20px;
}
.day-kicker {
  margin: 1rem 0 .35rem;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
.day-page h1 {
  margin: 0;
  text-transform: uppercase;
  font-style: normal;
  font-size: var(--fs-title-xl);
}
.day-intro[hidden] {
  display: none !important;
}
.day-summary {
  margin: .45rem 0 1rem;
  color: var(--secondary);
  font-size: var(--fs-lead);
}
.day-set-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .55rem;
}
.day-set-cards article {
  border: 2px solid var(--border);
  min-height: 86px;
  display: grid;
  place-content: center;
  text-align: center;
}
.day-set-cards span {
  color: var(--secondary);
  text-transform: uppercase;
  font-size: .84rem;
}
.day-set-cards strong {
  font-size: 2.5rem;
  line-height: .9;
  font-family: 'Barlow Condensed', sans-serif;
}
.day-runtime {
  margin-top: 1.2rem;
}
.day-future-warning {
  margin-top: .9rem;
}
.day-future-warning p {
  margin: .3rem 0;
}
.day-future-actions {
  margin-top: .6rem;
  display: grid;
  gap: .55rem;
}
.day-runtime-set {
  margin-top: 1rem;
  max-width: 640px;
}
.day-set-index {
  margin: 0;
  color: var(--secondary);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1rem, 2.8vw, 1.9rem);
}
.day-set-target {
  margin: .3rem 0 0;
  display: flex;
  align-items: baseline;
  gap: .7rem;
}
.day-set-target strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(6rem, 16vw, 12rem);
  line-height: .8;
  color: var(--danger);
}
.day-set-target span {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 75%, var(--secondary));
}
.day-set-help {
  margin: .6rem 0 1rem;
  max-width: 32rem;
  color: var(--secondary);
  font-size: clamp(1rem, 3vw, 2rem);
}
.day-set-ok {
  width: 100%;
  min-height: 72px;
  background: #130204;
  color: #fff;
  border: 2px solid #130204;
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(1.15rem, 3.8vw, 2rem);
}
.day-custom-form {
  margin-top: .9rem;
  border: 2px solid var(--border);
  padding: .9rem;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}
.day-custom-form label {
  display: block;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: .55rem;
}
.day-custom-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .55rem;
}
.day-custom-row input {
  border-radius: 0;
  font-size: 1.8rem;
  font-weight: 700;
}
.day-custom-row .btn {
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 700;
  min-width: 118px;
}
.day-main-cta {
  border-radius: 0;
  min-height: 72px;
  font-size: clamp(1.05rem, 3.4vw, 1.8rem);
  text-transform: uppercase;
  box-shadow: 6px 6px 0 var(--text);
}
.day-main-cta + .day-main-cta { margin-top: .8rem; }
.day-runtime-rest {
  text-align: center;
}
.day-rest-kicker {
  margin: 0;
  text-transform: uppercase;
  color: var(--secondary);
  letter-spacing: .08em;
  font-weight: 700;
}
.day-runtime-rest h2 {
  margin: .35rem 0 1rem;
  text-transform: uppercase;
  font-style: normal;
  font-size: clamp(2.2rem, 8vw, 3.7rem);
}
.day-circle-wrap {
  display: grid;
  place-items: center;
}
.day-circle-outer {
  --progress: 1;
  width: min(70vw, 320px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 6px;
  background: conic-gradient(
    from -90deg,
    var(--danger) calc(var(--progress) * 1turn),
    color-mix(in srgb, var(--danger) 18%, transparent) 0
  );
  transition: background 1s linear, transform .18s ease-out;
}
.day-circle-outer.is-running {
  transform: scale(1.01);
}
.day-circle-inner {
  width: 62%;
  aspect-ratio: 1 / 1;
  border: 5px solid var(--text);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--bg);
}
.day-circle-inner strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(4rem, 15vw, 7rem);
  line-height: .8;
  color: var(--danger);
}
.day-circle-inner span {
  margin-top: -8px;
  color: var(--secondary);
  text-transform: uppercase;
  font-weight: 700;
}
.day-skip-rest {
  margin-top: 1rem;
  border: 0;
  color: var(--secondary);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .08em;
}
.day-rest-complete {
  margin-top: .9rem;
}
.day-rest-complete p {
  margin: 0 0 .8rem;
  font-size: clamp(1rem, 3.2vw, 1.8rem);
  font-weight: 600;
}

@media (min-width: 700px) {
  .grid-12 { grid-template-columns: repeat(3, 1fr); }
  .menu-toggle { display: none; }
  .nav {
    padding: 0;
  }
  .nav-inner {
    padding: .6rem 1.25rem;
  }
  .nav-links {
    position: static;
    display: flex;
    border: 0;
    background: transparent;
    padding: 0;
    align-items: center;
    gap: .6rem;
  }
  .nav-links a {
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .nav-links .btn {
    justify-content: center;
    min-height: 38px;
    padding: .5rem .8rem;
    font-size: .8rem;
  }
  .nav-theme-btn {
    min-width: 58px;
    width: 58px;
    height: 34px;
    justify-content: center;
    padding: 0;
  }
  .theme-toggle-label { display: none; }
  .nav-links .nav-theme-btn {
    min-height: 34px;
    width: 58px;
    height: 34px;
    padding: 0;
  }
  .landing-hero,
  .landing-how,
  .landing-blog,
  .landing-footline {
    padding: 2rem 2.5rem;
  }
  .site-footer {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .site-footer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .progress-start {
    padding-bottom: .42rem;
  }
  .landing-actions {
    grid-template-columns: auto auto;
    justify-content: start;
  }
  .landing-actions .btn { width: auto; min-width: 220px; }
  .landing-stats { grid-template-columns: repeat(4, 1fr); }
  .stat-card { border-bottom: 0; }
  .stat-card:nth-child(2n) { border-right: 1px solid var(--border); }
  .stat-card:last-child { border-right: 0; }
  .how-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .landing-blog { grid-template-columns: 1fr auto; }
  .landing-footline {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .blog-page {
    padding-top: 2.1rem;
  }
  .blog-list-head {
    margin-bottom: 1.6rem;
  }
  .blog-list-cards {
    gap: 1rem;
  }
  .blog-list-card {
    padding: 1.5rem 1.7rem;
  }
  .blog-post-page {
    padding-top: 2.2rem;
  }
  .avatar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .auth-page {
    padding-top: 3rem;
  }
  .auth-card {
    max-width: 590px;
  }
  .plan-page {
    padding-top: 2rem;
  }
  .plan-day-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .progress-page {
    padding-top: 1.8rem;
  }
  .progress-empty h1 {
    max-width: 620px;
  }
  .day-page {
    padding-top: 2rem;
  }
  .day-circle-outer {
    width: 320px;
  }
}

@media (max-width: 699px) {
  .nav-links .nav-theme-btn {
    justify-self: stretch;
    margin-top: .15rem;
  }
  .progress-head {
    align-items: flex-end;
  }
  .progress-start strong {
    font-size: 1.35rem;
  }
  .progress-start {
    padding-bottom: .16rem;
  }
  .progress-week-row {
    grid-template-columns: 56px repeat(3, minmax(0, 1fr));
    gap: .45rem;
  }
  .progress-day {
    min-height: 90px;
    padding: .45rem .5rem;
  }
  .progress-day p {
    font-size: clamp(1.7rem, 6vw, 2.2rem);
  }
  .progress-day small {
    font-size: .86rem;
  }
  .day-set-cards {
    gap: .4rem;
  }
  .day-set-cards article {
    min-height: 70px;
  }
  .day-set-cards strong {
    font-size: 2rem;
  }
  .day-set-target strong {
    font-size: clamp(4.4rem, 24vw, 7rem);
  }
  .day-set-target span {
    font-size: clamp(1.3rem, 7vw, 2.1rem);
  }
  .day-custom-row {
    grid-template-columns: 1fr;
  }
  .day-custom-row .btn {
    width: 100%;
  }
}