:root {
  --hero: #06257d;
  --hero-2: #1546d0;
  --brand: #1846d1;
  --brand-dark: #1036a8;
  --brand-soft: #e8eeff;
  --brand-text: #1640bd;
  --bg: #f1f4f9;
  --card: #ffffff;
  --surface: #f6f8fc;
  --text: #121a2c;
  --muted: #5f6b80;
  --border: #dbe1ec;
  --border-strong: #c3ccdb;
  --accent: #f7931e;
  --accent-dark: #e07800;
  --accent-soft: #fff2e1;
  --accent-text: #d96a00;
  --ring: rgba(247, 147, 30, .28);
  --ok: #1f8a4c;
  --ok-soft: #e6f5ec;
  --err-bg: #fdecec;
  --err-text: #a51c1c;
  --backdrop: rgba(9, 16, 36, .6);
  --shadow: 0 1px 2px rgba(16, 24, 48, .06), 0 12px 40px rgba(16, 24, 48, .10);
  --radius: 14px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hero: #041a5a;
    --hero-2: #0f35a3;
    --brand: #3d6bff;
    --brand-dark: #2c58e6;
    --brand-soft: #18264d;
    --brand-text: #8fadff;
    --bg: #0c1220;
    --card: #141b2b;
    --surface: #1a2235;
    --text: #e8ecf4;
    --muted: #97a2b8;
    --border: #283249;
    --border-strong: #36425d;
    --accent: #ff9d2e;
    --accent-dark: #f08a10;
    --accent-soft: #3a2a14;
    --accent-text: #ffaa45;
    --ring: rgba(255, 157, 46, .32);
    --ok: #4cc27f;
    --ok-soft: #173326;
    --err-bg: #3a1c1f;
    --err-text: #ffa3a3;
    --backdrop: rgba(0, 0, 0, .7);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 40px rgba(0, 0, 0, .35);
  }
}

/* ---------- Основа ---------- */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%; /* без увеличения шрифта при повороте телефона */
  text-size-adjust: 100%;
  overflow-x: hidden;
}
/* Пока открыто окно, страница под ним не прокручивается. */
html.modal-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-text); }
[hidden] { display: none !important; }

/* ---------- Шапка ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: calc(28px + env(safe-area-inset-top)) 20px 110px;
  color: #fff;
  text-align: center;
  background: linear-gradient(165deg, var(--hero-2) 0%, #0b33a8 45%, var(--hero) 100%);
  border-bottom: 4px solid var(--accent);
}
/* Фоновая графика шапки: беговая дорожка, оранжевые дуги как на эмблеме, линии скорости */
.hero-art {
  position: absolute;
  bottom: 0;
  left: 50%;
  pointer-events: none;
}
/* Без масштабирования: линии всегда стоят на одном месте относительно этапов и карточки */
.hero-art-wide { width: 2000px; height: 720px; margin-left: -1000px; }
.hero-art-narrow { display: none; width: 600px; height: 560px; margin-left: -300px; }
.hero h1, .hero-sub { text-shadow: 0 2px 12px rgba(4, 20, 80, .45); }

.streaks { animation: streak-drift 7s ease-in-out infinite alternate; }
.streaks-right { animation-delay: -3.5s; }
@keyframes streak-drift {
  from { translate: -14px 0; opacity: .8; }
  to { translate: 14px 0; opacity: 1; }
}
/* Блик, пробегающий по оранжевой дуге */
.glint {
  stroke-dasharray: 90 1000;
  stroke-dashoffset: 90;
  opacity: .7;
  animation: glint 6s ease-in-out 1s infinite;
}
@keyframes glint {
  0% { stroke-dashoffset: 90; }
  45%, 100% { stroke-dashoffset: -1000; }
}
.hero-inner { position: relative; max-width: 640px; margin: 0 auto; }

.emblem {
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 auto;
  filter: drop-shadow(0 10px 24px rgba(0, 10, 50, .45)) drop-shadow(0 0 18px rgba(247, 147, 30, .35));
}

/* Эмблема школьного спортивного клуба — в левом верхнем углу */
.club {
  position: absolute;
  z-index: 1;
  top: calc(16px + env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 10, 50, .45), 0 0 0 3px rgba(255, 255, 255, .85);
}
.club img { display: block; width: 100%; height: 100%; border-radius: 50%; }

.hero h1 {
  margin: 20px 0 8px;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.hero-sub { margin: 0 auto; max-width: 480px; text-wrap: balance; color: rgba(255, 255, 255, .75); font-size: .98rem; }

/* Этапы */
.progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.progress li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
  font-size: .9rem;
}
.progress li + li::before {
  content: "";
  width: 28px;
  height: 2px;
  margin-right: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .2);
}
.progress-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3);
  font-size: .82rem;
  transition: background .2s, border-color .2s;
}
.progress li.is-active, .progress li.is-done { color: #fff; }
.progress li.is-active .progress-num { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(247, 147, 30, .3); }
.progress li.is-done .progress-num { background: #fff; border-color: #fff; color: var(--hero); }
.progress li.is-done + li::before, .progress li.is-active + li::before { background: rgba(255, 255, 255, .2); }
.progress li.is-done + li::before { background: rgba(255, 255, 255, .7); }

/* ---------- Карточка ---------- */

.card {
  position: relative;
  max-width: 640px;
  margin: -72px auto 0;
  padding: 32px;
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

form { display: grid; gap: 28px; }
.section { display: grid; gap: 16px; animation: rise .35s ease both; }

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
}
.section-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: .9rem;
}

/* ---------- Даты ---------- */

.dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dates label { display: block; position: relative; }
.dates input { position: absolute; opacity: 0; pointer-events: none; }

.date {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.date-cal {
  flex: none;
  width: 58px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  line-height: 1;
}
.date-month {
  display: block;
  padding: 5px 0;
  background: var(--accent);
  color: #fff;
  text-shadow: 0 1px 1px rgba(120, 50, 0, .35);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.date-day { display: block; padding: 7px 0 8px; font-size: 1.45rem; font-weight: 800; }
.date-info { display: grid; gap: 2px; min-width: 0; }
.date-label { font-size: 1.15rem; font-weight: 800; color: var(--accent-text); }
.date-sub { color: var(--muted); font-size: .88rem; }

.date-check {
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  transition: all .15s;
}

.dates input:checked + .date {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--ring);
}
.dates input:checked + .date .date-check {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.dates input:focus-visible + .date { outline: 2px solid var(--accent); outline-offset: 2px; }

.skeleton {
  height: 84px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface) 0%, var(--border) 50%, var(--surface) 100%) 0 0 / 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.empty { margin: 0; padding: 20px; border-radius: var(--radius); background: var(--surface); color: var(--muted); text-align: center; }

/* ---------- Поля ---------- */

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.field { display: grid; gap: 7px; align-content: start; margin: 0; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field-label { font-weight: 700; font-size: .9rem; }
fieldset.field { border: 0; padding: 0; }
fieldset.field legend { padding: 0; margin-bottom: 7px; }

input, select {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--muted); opacity: .7; font-weight: 400; }
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 42px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
  cursor: pointer;
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.invalid { border-color: var(--err-text); box-shadow: 0 0 0 3px var(--err-bg); }
.hint { color: var(--muted); font-size: .82rem; }

.toggle { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--border); }
.toggle label { display: block; position: relative; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; min-height: 0; }
.toggle span {
  display: block;
  padding: 9px 0;
  border-radius: 9px;
  text-align: center;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.toggle input:checked + span { background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(24, 70, 209, .3); }
.toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.toggle.invalid { border-color: var(--err-text); }

/* ---------- Кнопки ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, #2a5af0, var(--brand));
  color: #fff;
  box-shadow: 0 6px 18px rgba(24, 70, 209, .32), inset 0 -2px 0 var(--accent);
}
.btn-secondary { background: var(--card); color: var(--text); border: 1.5px solid var(--border); }
.btn:disabled { opacity: .7; cursor: wait; }
.btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
@media (hover: hover) {
  .btn-primary:hover { background: linear-gradient(180deg, #2350e0, var(--brand-dark)); }
  .btn-secondary:hover { background: var(--surface); border-color: var(--border-strong); }
  .date:hover { border-color: var(--border-strong); transform: translateY(-1px); }
  .toggle span:hover { color: var(--text); }
}
.btn-submit { font-size: 1.05rem; }
.btn.is-loading .btn-label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  vertical-align: -2px;
  border: 2.5px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.btn, label, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.message { margin: 0; padding: 12px 16px; border-radius: 12px; font-weight: 500; }
.message.ok { background: var(--ok-soft); color: var(--ok); }
.message.err { background: var(--err-bg); color: var(--err-text); }
.message.info { background: var(--brand-soft); color: var(--brand-text); }
.dates.is-locked { opacity: .6; }
.dates.is-locked .date { cursor: not-allowed; }

/* ---------- Успех ---------- */

.done { display: grid; justify-items: center; gap: 6px; padding: 8px 0 4px; text-align: center; animation: rise .4s ease both; }
.done-icon svg { width: 76px; height: 76px; }
.done-icon circle { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 2; }
.done-icon path {
  fill: none;
  stroke: var(--ok);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: draw .45s .15s ease forwards;
}
.done h2 { margin: 10px 0 0; font-size: 1.6rem; font-weight: 800; }
.done-text { margin: 0; color: var(--muted); }
.reminder {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
  text-align: left;
}
.reminder-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent);
  box-shadow: 0 4px 12px rgba(247, 147, 30, .35);
}
.reminder-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.reminder-title { margin: 0 0 6px; font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; color: var(--accent-text); }
.reminder ul { margin: 0; padding-left: 20px; }
.reminder li { font-weight: 600; margin: 2px 0; }
.reminder li::marker { color: var(--accent); }
.done-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  width: 100%;
  margin: 18px 0 20px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
}
.done-details dt { color: var(--muted); }
.done-details dd { margin: 0; font-weight: 700; overflow-wrap: break-word; }
.done-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; width: 100%; }
.done-actions .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Подвал ---------- */

.footer {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px calc(32px + env(safe-area-inset-bottom));
  color: var(--muted);
  font-size: .85rem;
  text-align: center;
}
.footer p { margin: 0; }

/* ---------- Окна ---------- */

.modal {
  width: min(580px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px); /* видимая высота экрана с учётом панелей браузера */
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
  flex-direction: column;
  overscroll-behavior: contain;
}
.modal:not([open]) { display: none; }
.modal[open] { display: flex; animation: pop .22s ease both; }
/* Браузеры без поддержки <dialog>: окно по центру экрана и затемнение вручную */
.no-dialog .modal[open] {
  position: fixed;
  z-index: 1001;
  left: 0;
  right: 0;
  top: 50%;
  margin: 0 auto;
  transform: translateY(-50%);
  animation: none;
}
.no-dialog.modal-open body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--backdrop);
}
.modal::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); }

.modal-head { display: flex; align-items: center; gap: 12px; padding: 22px 26px 14px; flex: none; }
.modal-head h2 { margin: 0; font-size: 1.3rem; font-weight: 800; }
.modal-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--brand-text);
  font-weight: 800;
  font-size: 1.1rem;
  font-family: Georgia, serif;
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 26px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal-body p { margin: 0 0 14px; color: var(--muted); white-space: pre-line; }
.modal-body ul { margin: 0 0 18px; padding-left: 50px; }
.modal-body li { margin-bottom: 6px; }
.modal-body li::marker { color: var(--accent); }
.modal-body h3 { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 10px; font-size: 1rem; line-height: 1.4; }
.modal-body h3.warn .step { background: var(--err-text); }
.modal-body .step {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: .85rem;
}
.modal-body h3.warn {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--err-bg);
  color: var(--err-text);
  border-left: 4px solid var(--err-text);
}
.modal-body a { overflow-wrap: anywhere; }

.modal-body .current { margin: 0 0 14px; padding: 4px 16px; list-style: none; border-radius: 12px; background: var(--surface); }
.modal-body .current li { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--border); }
.modal-body .current li:last-child { border-bottom: 0; }
.modal-body .current li span { color: var(--muted); }

.modal-actions {
  display: grid;
  gap: 10px;
  flex: none;
  padding: 16px 26px 22px;
  border-top: 1px solid var(--border);
  background: var(--card);
}

/* ---------- Анимации ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition: none !important; }
}

/* ---------- Телефоны ---------- */

@media (max-width: 560px) {
  .hero { padding: calc(20px + env(safe-area-inset-top)) 16px 92px; }
  .hero h1 { margin-top: 12px; }
  .emblem { width: 96px; height: 96px; }
  .hero-art-wide { display: none; }
  .hero-art-narrow { display: block; }
  .club { width: 52px; height: 52px; top: calc(12px + env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); }
  .hero-sub { font-size: .9rem; }
  .progress { margin-top: 22px; gap: 6px; }
  .progress li + li::before { width: 14px; }
  .progress li { font-size: .82rem; gap: 6px; }

  .card {
    margin: -64px max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
    padding: 22px 16px;
    border-radius: 18px;
  }
  form { gap: 24px; }
  .fields { grid-template-columns: 1fr; }
  .done-details { grid-template-columns: 1fr; gap: 2px; }
  .done-actions { grid-template-columns: 1fr; }
  .done-actions #again { order: -1; }
  .done-details dt { font-size: .85rem; }
  .done-details dd + dt { margin-top: 10px; }
  .dates { grid-template-columns: 1fr; }

  .modal-head { padding: 18px 18px 12px; }
  .modal-head h2 { font-size: 1.15rem; }
  .modal-body { padding: 0 18px 6px; }
  .modal-body ul { padding-left: 42px; }
  .modal-actions { padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); }
}