/* ИИ-тренер. Тёмная тема по DESIGN.md (Spotify): поверхности #121212–#252525, таблеточные кнопки,
   подписи капсом с разрядкой. Акценты неоновые и со смыслом: зелёный — хорошо, жёлтый — замечание, красный — ошибка. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url(fonts/oswald-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url(fonts/oswald-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #0b0d0c;
  --s1: #121212;
  --s2: #181818;
  --s3: #1f1f1f;
  --s4: #252525;
  --line: #333;
  --text: #ffffff;
  --muted: #b3b3b3;
  --dim: #7c7c7c;
  --good: #2bff88;
  --good-deep: #0f8f4a;
  --warn: #ffc83d;
  --bad: #ff3d5a;
  --info: #6fd3ff;
  --glass: rgba(14, 16, 15, 0.62);
  --shadow-heavy: rgba(0, 0, 0, 0.5) 0 8px 24px;
  --shadow-mid: rgba(0, 0, 0, 0.3) 0 8px 8px;
  --num: "Oswald", "Inter", system-ui, sans-serif;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.45 var(--ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input, label { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; }

/* ---------- иконки ---------- */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[aria-pressed="true"] .ico .off, [aria-pressed="false"] .ico .on { display: none; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }

.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--s3); border: 0; color: var(--text);
  transition: background .15s, color .15s, transform .1s;
}
.icon-btn:hover { background: var(--s4); }
.icon-btn:active { transform: scale(.94); }
.icon-btn:disabled { opacity: .3; pointer-events: none; }
.icon-btn[aria-pressed="false"] { color: var(--dim); }
.icon-btn[data-toggle="debug"][aria-pressed="true"] { color: var(--info); }
.icon-btn.glass { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.icon-btn.small { width: 36px; height: 36px; }
.icon-btn-spacer { width: 44px; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 9999px; border: 0;
  font: 700 14px/1 var(--ui); letter-spacing: 1.6px; text-transform: uppercase;
  background: var(--s3); color: var(--text);
  transition: transform .1s, background .15s, box-shadow .15s;
  user-select: none;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--good); color: #04130a; box-shadow: 0 0 0 0 rgba(43,255,136,0), 0 10px 30px -8px rgba(43,255,136,.55); }
.btn.primary:hover { background: #5dffa6; }
.btn.big { min-height: 60px; font-size: 17px; letter-spacing: 2.4px; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px #4d4d4d; }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px #7c7c7c; background: rgba(255,255,255,.03); }
.btn.link { background: none; color: var(--muted); letter-spacing: 1px; min-height: 40px; }
.btn.danger { background: transparent; color: var(--bad); box-shadow: inset 0 0 0 1px rgba(255,61,90,.5); }
.btn .ico { width: 20px; height: 20px; }

/* ---------- экраны-страницы ---------- */
main.screen {
  position: relative; z-index: 2;
  min-height: 100%;
  max-width: 560px; margin: 0 auto;
  padding: calc(12px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));
}
body::before {
  /* фон главной: неоновые пятна и сетка, как разметка спортзала */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vmax 50vmax at 0% 0%, rgba(43,255,136,.13), transparent 60%),
    radial-gradient(50vmax 40vmax at 100% 100%, rgba(255,61,90,.08), transparent 60%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 40px 40px;
}
body[data-screen="hud"]::before { display: none; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 20px/1 var(--num); letter-spacing: .5px; text-transform: uppercase; }
.brand img { border-radius: 8px; }
.topbar .actions { display: flex; gap: 8px; }
.top-title { margin: 0; font: 700 22px/1 var(--num); text-transform: uppercase; letter-spacing: .5px; }

/* ---------- главная ---------- */
.hero { padding: 20px 0 12px; }
.hero h1 {
  margin: 0; font: 700 clamp(52px, 15vw, 92px)/0.9 var(--num); text-transform: uppercase; letter-spacing: -.5px;
}
.hero h1 span { color: var(--good); text-shadow: 0 0 28px rgba(43,255,136,.45); }
.lead { margin: 14px 0 0; color: var(--muted); font-size: 16px; max-width: 30em; }
.stat-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.stat {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px;
  border-radius: 9999px; background: var(--s2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  font-size: 13px; color: var(--muted);
}
.stat b { font: 600 18px/1 var(--num); color: var(--text); letter-spacing: .3px; }
.stat .ico { width: 18px; height: 18px; color: var(--warn); }
.stat.fire .ico { color: #ff8a3d; }

.picker { margin-top: 12px; }
.ex-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ex {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  padding: 14px 6px 12px; border-radius: 16px; border: 0;
  background: var(--s2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: box-shadow .15s, background .15s, transform .1s;
}
.ex:active { transform: scale(.98); }
.ex b { font: 600 17px/1.1 var(--num); text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; }
.ex small { font-size: 11.5px; color: var(--dim); line-height: 1.2; }
.ex-art .art { width: 52px; height: 52px; fill: none; stroke: var(--muted); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.ex-art .art .floor { stroke: var(--line); stroke-width: 2.4; }
.ex[aria-checked="true"] { background: linear-gradient(180deg, rgba(43,255,136,.13), rgba(43,255,136,.03)); box-shadow: inset 0 0 0 2px var(--good), 0 0 24px -6px rgba(43,255,136,.5); }
.ex[aria-checked="true"] .art { stroke: var(--good); }
.ex[aria-checked="true"] small { color: var(--muted); }

.opts { margin-top: 12px; padding: 14px; border-radius: 16px; background: var(--s2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 9999px; background: var(--s1); }
.seg button { min-height: 40px; border: 0; border-radius: 9999px; background: none; color: var(--muted); font-weight: 700; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; }
.seg button[aria-checked="true"] { background: var(--text); color: #000; }
.chips { display: flex; gap: 8px; margin-top: 12px; }
.chips button {
  flex: 1; min-height: 52px; border: 0; border-radius: 14px; background: var(--s3);
  font: 600 22px/1 var(--num); letter-spacing: .3px; color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.chips button small { display: block; font: 500 11px/1.2 var(--ui); color: var(--dim); letter-spacing: 0; margin-top: 3px; }
.chips button[aria-checked="true"] { background: var(--good); color: #04130a; }
.chips button[aria-checked="true"] small { color: rgba(4,19,10,.7); }
.chips.off { display: none; }
.opt-note { margin: 10px 2px 0; font-size: 13px; color: var(--dim); }

.steppers { display: grid; gap: 6px; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.stepper > span { font-size: 15px; color: var(--muted); }
.stepper .ctl { display: flex; align-items: center; gap: 6px; }
.stepper .ctl b { min-width: 64px; text-align: center; font: 600 24px/1 var(--num); }
.stepper .ctl button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--s3); font: 500 22px/1 var(--ui); }
.stepper .ctl button:disabled { opacity: .35; }

.howto { display: flex; gap: 14px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--s2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.howto-art { flex: none; width: 124px; }
.hint-art { width: 100%; height: auto; display: block; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hint-art .floor { stroke: #3a3a3a; stroke-width: 2; }
.hint-art .cone { fill: rgba(43,255,136,.1); stroke: none; }
.hint-art .cone-l { stroke: rgba(43,255,136,.55); stroke-width: 1.5; stroke-dasharray: 4 4; }
.hint-art .phone { fill: var(--s4); stroke: var(--muted); stroke-width: 2; }
.hint-art .lens { fill: var(--good); }
.hint-art .man { stroke: var(--good); stroke-width: 4.5; }
.hint-art .dim { stroke: var(--dim); stroke-width: 1.4; }
.hint-art .dim-t { stroke: var(--dim); stroke-width: 1.4; }
.hint-art text { fill: var(--muted); font: 600 13px var(--ui); }
.howto-text b { font-size: 14px; }
.howto-text p { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.howto-text em { font-style: normal; color: var(--good); font-weight: 600; }

.cta { display: grid; gap: 10px; margin-top: 16px; }
#home .cta {
  position: sticky; bottom: 0; z-index: 3;
  margin: 16px -16px 0; padding: 12px 16px calc(12px + var(--sab));
  background: linear-gradient(180deg, rgba(11,13,12,0), rgba(11,13,12,.94) 28%);
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.fine { margin-top: 8px; padding-bottom: 8px; }
.fine p { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.4; }
.fine p:first-child { color: var(--muted); }
.fine .ico { width: 16px; height: 16px; color: var(--good); margin-top: 1px; }

@media (min-width: 980px) and (min-height: 560px) {
  main#home { max-width: 1040px; display: grid; grid-template-columns: 1.05fr 1fr; grid-template-areas: "top top" "hero picker" "howto cta" "fine fine"; column-gap: 48px; align-content: start; }
  #home .topbar { grid-area: top; }
  #home .hero { grid-area: hero; padding-top: 48px; }
  #home .picker { grid-area: picker; margin-top: 48px; }
  #home .howto { grid-area: howto; }
  #home .cta { grid-area: cta; position: static; margin: 12px 0 0; padding: 0; background: none; align-content: start; }
  #home .fine { grid-area: fine; }
  .hero h1 { font-size: 104px; }
}

/* ---------- видео и слой рисования ---------- */
#cam, #overlay { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: none; }
#cam { object-fit: cover; background: #000; }
#cam.mirror { transform: scaleX(-1); }
body[data-screen="hud"] #cam, body[data-screen="hud"] #overlay { display: block; }
#overlay { pointer-events: none; z-index: 2; }
body.demo #cam { visibility: hidden; }

/* ---------- экран тренировки ---------- */
#hud { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud .guide, #hud .hud-bottom, #hud .countdown, #hud .banner { pointer-events: none; }
#hud .hud-bottom .btn, #hud .rest { pointer-events: auto; }

.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(10px + var(--sat)) calc(12px + var(--sar)) 0 calc(16px + var(--sal));
  pointer-events: none;
}
.hud-top .actions { display: flex; flex-direction: column; gap: 8px; pointer-events: auto; }
.counter { pointer-events: none; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.c-label { font: 700 13px/1 var(--ui); letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.85); margin: 6px 0 0 4px; }
.c-num {
  font: 700 clamp(96px, min(30vw, 24vh), 250px)/0.86 var(--num);
  letter-spacing: -1px; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(43,255,136,.55), 0 0 2px rgba(43,255,136,.9), 0 4px 30px rgba(0,0,0,.6);
  transform-origin: 20% 70%;
}
.c-num.bump { animation: bump .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes bump {
  0% { transform: scale(1); }
  28% { transform: scale(1.32) translateY(-4%); color: var(--good); text-shadow: 0 0 50px rgba(43,255,136,1), 0 0 4px #fff; }
  100% { transform: scale(1); }
}
.counter.paused .c-num { color: rgba(255,255,255,.45); text-shadow: 0 0 22px rgba(255,61,90,.6), 0 4px 30px rgba(0,0,0,.6); }
.counter.good .c-num { color: #eafff3; }
.c-goal { font: 600 22px/1 var(--num); color: rgba(255,255,255,.7); margin: 4px 0 0 6px; letter-spacing: .5px; }
.c-goal:empty { display: none; }

.c-step {
  display: inline-block; margin: 10px 0 0 4px; padding: 6px 12px; border-radius: 9999px;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 700 11px/1 var(--ui); letter-spacing: 1.4px; text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); text-shadow: none;
}

.hud-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "tip tip" "dots dots" "bar btn"; align-items: center; gap: 10px 12px;
  padding: 0 calc(16px + var(--sar)) calc(14px + var(--sab)) calc(16px + var(--sal));
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.5) 70%);
  padding-top: 24px;
}
.tip {
  grid-area: tip; justify-self: center; max-width: 100%;
  padding: 12px 22px; border-radius: 9999px; text-align: center;
  font: 700 clamp(20px, 5.4vw, 30px)/1.1 var(--num); text-transform: uppercase; letter-spacing: .6px;
  background: rgba(10,10,10,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 2px currentColor, 0 0 28px -4px currentColor;
  color: var(--text); opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .2s, transform .2s;
}
.tip.show { opacity: 1; transform: none; }
.tip.good { color: var(--good); }
.tip.warn { color: var(--warn); }
.tip.bad { color: var(--bad); }
.tip.info { color: var(--info); }
.tip.flash { animation: tipflash .45s ease; }
@keyframes tipflash { 0% { transform: scale(1.12); } 100% { transform: none; } }

.dots { grid-area: dots; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 12px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--dim); box-shadow: 0 0 10px -1px currentColor; }
.dots i.g { background: var(--good); color: var(--good); }
.dots i.y { background: var(--warn); color: var(--warn); }
.dots i.r { background: var(--bad); color: var(--bad); }
.dots i.new { animation: dotin .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes dotin { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.dots.big { gap: 8px; justify-content: flex-start; }
.dots.big i { width: 16px; height: 16px; }

.progress { grid-area: bar; height: 12px; border-radius: 9999px; background: rgba(255,255,255,.14); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--good-deep), var(--good)); box-shadow: 0 0 16px var(--good); transition: width .35s cubic-bezier(.2,.9,.3,1); }
.btn.finish { grid-area: btn; min-height: 44px; padding: 0 18px; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: 12px; }

/* подготовка: контур и карточка подсказки */
.sil-box { position: absolute; display: flex; align-items: center; justify-content: center; }
.silhouette { height: 84%; width: auto; max-width: 92%; overflow: visible; }
.sil-box.plank .silhouette { width: 88%; height: auto; max-height: 60%; }
.silhouette .fill { fill: rgba(255,255,255,.05); }
.silhouette .line { fill: rgba(255,255,255,.9); animation: silpulse 1.6s ease-in-out infinite; }
.guide.ok .silhouette .line { fill: var(--good); }
.guide.ok .silhouette .fill { fill: rgba(43,255,136,.08); }
.guide.found .silhouette { opacity: .45; }
@keyframes silpulse { 50% { opacity: .45; } }

.guide-card {
  position: absolute; top: calc(10px + var(--sat)); left: calc(12px + var(--sal)); right: calc(64px + var(--sar));
  max-width: 600px; margin: 0 auto;
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 20px;
  background: rgba(12,12,12,.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-heavy), inset 0 0 0 1px rgba(255,255,255,.08);
}
.guide-ring { position: relative; width: 52px; height: 52px; flex: none; }
.guide-ring > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.guide-ring > svg circle { fill: none; stroke-width: 4; }
.guide-ring .bg { stroke: rgba(255,255,255,.12); }
.guide-ring .fg { stroke: var(--good); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transition: stroke-dashoffset .15s linear; }
.guide-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.guide.ok .guide-ring span { color: var(--good); }
.guide-body { min-width: 0; }
.guide-body b { display: block; font: 700 19px/1.15 var(--num); text-transform: uppercase; letter-spacing: .3px; }
.parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.parts span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px; border-radius: 9999px; font-size: 12px; font-weight: 600; background: rgba(255,61,90,.14); color: #ff8497; }
.parts span.ok { background: rgba(43,255,136,.12); color: var(--good); }
.parts .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.guide-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.guide-hint b { display: inline; font: inherit; font-weight: 700; color: var(--text); text-transform: none; }

/* отсчёт */
.countdown {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,.7));
}
.cd-title { font: 700 clamp(28px, 7vw, 48px)/1 var(--num); text-transform: uppercase; letter-spacing: 1px; color: var(--good); }
.cd-num {
  font: 700 clamp(160px, 42vmin, 400px)/0.9 var(--num); color: #fff;
  text-shadow: 0 0 60px rgba(43,255,136,.8), 0 0 4px #fff;
}
.cd-num.go { color: var(--good); font-size: clamp(56px, 16vw, 190px); text-transform: uppercase; white-space: nowrap; }
.cd-num.tick { animation: cdtick 1s ease-out; }
@keyframes cdtick { 0% { transform: scale(1.6); opacity: 0; } 18% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.85); opacity: .2; } }
.cd-sub { margin-top: 8px; font-size: 16px; color: var(--muted); text-align: center; padding: 0 24px; }

/* отдых */
.rest {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(8,9,9,.84); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.rest-label { font: 700 16px/1 var(--ui); letter-spacing: 4px; text-transform: uppercase; color: var(--info); }
.rest-time { font: 700 clamp(120px, 34vmin, 300px)/0.9 var(--num); font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(111,211,255,.5); }
.rest-next { font-size: 17px; color: var(--muted); margin-bottom: 18px; }
.rest-next b { color: var(--text); }

/* большой баннер: рекорд, цель */
.banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font: 700 clamp(40px, 11vw, 96px)/0.95 var(--num); text-transform: uppercase; text-align: center; letter-spacing: 1px;
  color: var(--warn); text-shadow: 0 0 40px currentColor, 0 4px 30px rgba(0,0,0,.6); white-space: nowrap;
  animation: bannerin 1.8s cubic-bezier(.2,1.4,.4,1) both;
}
.banner.good { color: var(--good); }
@keyframes bannerin { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }

/* что видно на каких фазах */
body[data-phase="frame"] .counter, body[data-phase="countdown"] .counter, body[data-phase="loading"] .counter { visibility: hidden; }
body[data-phase="frame"] .btn.finish { visibility: hidden; }
body:not([data-phase="frame"]) #guide { display: none; }
body[data-phase="frame"] .hud-bottom .dots, body[data-phase="frame"] .hud-bottom .progress, body[data-phase="frame"] .tip { visibility: hidden; }
body[data-phase="loading"] .hud-bottom, body[data-phase="countdown"] .hud-bottom .tip { visibility: hidden; }

/* ---------- итоги ---------- */
.kicker { margin: 20px 0 0; font: 700 13px/1 var(--ui); letter-spacing: 3px; text-transform: uppercase; color: var(--good); }
.sum-hero { position: relative; margin-top: 4px; }
.sum-big { font: 700 clamp(120px, 38vw, 220px)/0.88 var(--num); color: var(--good); text-shadow: 0 0 40px rgba(43,255,136,.45); letter-spacing: -2px; }
.sum-unit { font: 700 30px/1 var(--num); text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }
.record {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 16px 8px 12px; border-radius: 9999px;
  background: var(--warn); color: #1a1300; font: 800 13px/1 var(--ui); letter-spacing: 1.4px; text-transform: uppercase;
  box-shadow: 0 0 30px -4px rgba(255,200,61,.7); animation: recpop .6s cubic-bezier(.2,1.8,.4,1);
}
.record .ico { width: 18px; height: 18px; stroke-width: 2.2; }
@keyframes recpop { 0% { transform: scale(.4); } 100% { transform: none; } }
.sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.tile { padding: 14px 16px; border-radius: 16px; background: var(--s2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.tile small { display: block; font: 700 11px/1 var(--ui); letter-spacing: 1.6px; text-transform: uppercase; color: var(--dim); }
.tile b { display: block; margin-top: 8px; font: 700 40px/1 var(--num); letter-spacing: .3px; }
.tile span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.tile .g { color: var(--good); } .tile .y { color: var(--warn); } .tile .r { color: var(--bad); } .tile .w { color: var(--warn); }
.sum-dots { margin-top: 16px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0; font-size: 12px; color: var(--dim); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: -6px; }
.legend i.g { background: var(--good); } .legend i.y { background: var(--warn); } .legend i.r { background: var(--bad); }

/* ---------- история ---------- */
.hist-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.hist-stats .tile.wide { grid-column: span 2; display: flex; align-items: center; gap: 14px; }
.hist-stats .tile.wide .ico { width: 44px; height: 44px; color: #ff8a3d; stroke-width: 1.6; }
.calendar { margin-top: 16px; padding: 14px; border-radius: 16px; background: var(--s2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head b { font: 600 20px/1 var(--num); text-transform: uppercase; letter-spacing: .5px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--dim); letter-spacing: 1px; text-transform: uppercase; padding: 4px 0; }
.cal-grid .d { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; font: 600 15px/1 var(--num); color: var(--muted); position: relative; }
.cal-grid .d.on { background: var(--good); color: #04130a; box-shadow: 0 0 14px -2px rgba(43,255,136,.8); }
.cal-grid .d.today { box-shadow: inset 0 0 0 2px var(--text); color: var(--text); }
.cal-grid .d.on.today { box-shadow: inset 0 0 0 2px #04130a, 0 0 0 2px var(--text); color: #04130a; }
.cal-grid .d.future { color: #4a4a4a; }
.cal-grid .d sup { position: absolute; top: 2px; right: 4px; font: 700 9px/1 var(--ui); }
.recent h3 { margin: 20px 0 8px; font: 700 13px/1 var(--ui); letter-spacing: 1.6px; text-transform: uppercase; color: var(--dim); }
.recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.recent li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--s2); font-size: 14px; }
.recent li small { color: var(--dim); display: block; font-size: 12px; margin-top: 2px; }
.recent li b { font: 600 20px/1 var(--num); white-space: nowrap; }
.recent .empty { color: var(--dim); background: none; padding: 8px 2px; }

/* ---------- настройки ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  width: min(520px, 100%); max-height: 92%; overflow: auto;
  padding: 16px 16px calc(20px + var(--sab)); border-radius: 24px 24px 0 0; background: var(--s2); box-shadow: var(--shadow-heavy);
  animation: sheetin .25s cubic-bezier(.2,.9,.3,1);
}
@keyframes sheetin { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 700px) { .sheet-wrap { align-items: center; } .sheet { border-radius: 24px; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sheet-head h2 { margin: 0; font: 700 24px/1 var(--num); text-transform: uppercase; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px; border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer; }
.set-row b { display: block; font-size: 15px; }
.set-row small { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 30px; border-radius: 9999px; background: var(--s4); position: relative; transition: background .15s; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .18s cubic-bezier(.3,1.4,.5,1); }
.switch:checked { background: var(--good); }
.switch:checked::after { transform: translateX(20px); }
.sheet .btn.danger { margin-top: 18px; width: 100%; }

/* ---------- загрузка, ошибки, тост ---------- */
.overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6,7,7,.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.load-card, .err-card { width: min(440px, 100%); padding: 24px; border-radius: 24px; background: var(--s2); box-shadow: var(--shadow-heavy), inset 0 0 0 1px rgba(255,255,255,.06); display: grid; gap: 12px; text-align: center; justify-items: center; }
.load-card b { font: 700 22px/1.1 var(--num); text-transform: uppercase; letter-spacing: .4px; }
.load-card small { color: var(--dim); }
.spinner { width: 56px; height: 56px; border-radius: 50%; border: 4px solid rgba(255,255,255,.1); border-top-color: var(--good); animation: spin .9s linear infinite; box-shadow: 0 0 24px -6px var(--good); }
@keyframes spin { to { transform: rotate(360deg); } }
.load-bar { width: 100%; height: 8px; border-radius: 9999px; background: rgba(255,255,255,.1); overflow: hidden; }
.load-bar i { display: block; height: 100%; width: 0; background: var(--good); border-radius: inherit; transition: width .2s; }
.err-card { text-align: left; justify-items: stretch; }
.err-card h2 { margin: 0; font: 700 26px/1.05 var(--num); text-transform: uppercase; }
.err-card p { margin: 0; color: var(--muted); }
.err-card ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; display: grid; gap: 6px; }
.err-card ul:empty { display: none; }
.err-card ul b { color: var(--text); }
.err-icon { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,61,90,.14); color: var(--bad); }
.err-icon .ico { width: 30px; height: 30px; }
.toast {
  position: fixed; left: 50%; bottom: calc(24px + var(--sab)); transform: translateX(-50%); z-index: 40;
  padding: 12px 20px; border-radius: 9999px; background: #eee; color: #111; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-heavy);
  max-width: calc(100% - 32px); text-align: center; animation: sheetin .2s ease;
}

/* ---------- альбомная ориентация телефона ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  .c-num { font-size: clamp(80px, 34vh, 200px); }
  .hud-top .actions { flex-direction: row; }
  .guide-card { right: calc(268px + var(--sar)); padding: 10px 14px; }
  .guide-hint { display: none; }
  .hud-bottom { padding-top: 16px; grid-template-columns: 1fr auto auto; grid-template-areas: "tip tip tip" "dots bar btn"; }
  .progress { min-width: 30vw; }
  .dots { justify-content: flex-start; }
  .cd-num { font-size: 52vh; }
  .rest-time { font-size: 40vh; }
  .rest-next { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}