/* Shared UI kit (DESIGN_CONTRACT_v2 §5). Every class is prefixed `ui-`; screens use `scr-<name>-`.
   Only tokens from theme/tokens.css. No !important. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--color-bg);
  background-image: var(--app-bg-texture);
  background-attachment: fixed;
  color: var(--color-text);
  font: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
/* phones: no double-tap zoom delay on controls; a long press on them selects nothing and opens no system menu */
button, a, label, select, [role="button"] { touch-action: manipulation; }
button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ui-num { font-variant-numeric: tabular-nums; }
/* one visible focus for the whole app; a tap shows none */
:where(button, a, summary, select, [role="button"], [tabindex]):focus { outline: none; }
:where(button, a, summary, select, [role="button"], [tabindex]):focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.ui-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* app frame */
.ui-app { min-height: 100dvh; display: flex; flex-direction: column; }
.ui-view { flex: 1; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--space-4)); }
.ui-app--public .ui-view { padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-6)); }

/* header (v0: title left + subtitle, crimson corner triangle; actions from v1) */
.ui-header {
  position: relative;
  min-height: var(--header-h);
  padding: calc(env(safe-area-inset-top) + var(--space-5)) var(--screen-pad) var(--space-4) var(--title-inset);
  display: flex; align-items: flex-start; gap: var(--space-3);
  overflow: hidden;
}
.ui-header::after {
  content: ""; position: absolute; top: 0; right: 0; width: 72px; height: 76px;
  background: linear-gradient(225deg, var(--color-header-accent) 0%, var(--color-header-accent-deep) 49.6%, var(--color-accent-deep) 50%, transparent 50.6%);
  pointer-events: none;
}
.ui-header--nested { padding-left: var(--screen-pad); }
.ui-header__titles { position: relative; z-index: 1; flex: 1; min-width: 0; padding-right: var(--space-6); } /* keep clear of the corner accent */
.ui-header__title { margin: 0; font: var(--font-title); letter-spacing: var(--tracking-title); text-transform: uppercase; overflow-wrap: anywhere; }
.ui-header--nested .ui-header__title { font-size: clamp(20px, 6.2vw, 28px); } /* long nested titles + back button fit 390 pt */
.ui-header__subtitle { margin: var(--space-2) 0 0; font: var(--font-subtitle); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); }
.ui-icon-btn {
  position: relative; z-index: 1;
  width: var(--touch); height: var(--touch); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  margin: calc(var(--space-2) * -1) 0 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--color-text);
  cursor: pointer;
}
.ui-icon-btn:active { background: var(--color-pressed); }
.ui-icon-btn svg { flex: none; width: 24px; height: 24px; } /* never squeezed: an iPhone drew these at a third of their size (2026-11-11) */

/* sections & cards */
.ui-section { padding: 0 var(--screen-pad); margin-top: var(--space-6); }
.ui-section__title { margin: 0 0 var(--space-3); font: var(--font-section); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.ui-card {
  position: relative;
  background: var(--color-surface-gradient);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.ui-card + .ui-card { margin-top: var(--space-4); }
.ui-card--accent { background: var(--color-accent-card); box-shadow: var(--shadow-accent); }
.ui-card__title {
  position: relative; margin: 0; padding-left: calc(var(--accent-bar-w) + var(--space-3));
  font: var(--font-card-title); text-transform: uppercase;
}
.ui-card__title::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: var(--accent-bar-w); height: var(--accent-bar-h); border-radius: 2px; background: var(--color-gold-gradient);
}

/* stat row: 3 columns with dividers */
.ui-stats { display: grid; grid-auto-flow: column; grid-auto-columns: auto; container-type: inline-size; } /* columns by content: «14 100 кг» never runs out of the card at 320 */
.ui-stat { min-width: 0; text-align: center; padding: 0 var(--space-1); }
.ui-stat + .ui-stat { border-left: 1px solid var(--color-divider); }
.ui-stat__label { font: var(--font-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); }
.ui-stat__value { margin-top: var(--space-1); font: var(--font-value); font-size: clamp(18px, 8.4cqi, 24px); font-variant-numeric: tabular-nums; }
.ui-unit { font-size: 0.6em; font-weight: 600; margin-left: 0.15em; }

/* buttons */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--button-h); padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius-card);
  font: var(--font-label); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  cursor: pointer; transition: transform var(--duration-fast) var(--ease), opacity var(--duration-fast), box-shadow var(--duration-fast);
}
.ui-btn:active { transform: scale(0.98); }
.ui-btn:disabled { opacity: 0.4; cursor: default; }
/* Narrow phones: a button label stays on one line in every theme (the theme rules set wider letter spacing, hence html:root[data-theme]) */
@media (max-width: 374px) { html:root[data-theme] .ui-btn { letter-spacing: 0.04em; padding-left: var(--space-3); padding-right: var(--space-3); font-size: min(1em, 4.2vw); } }
@media (min-width: 375px) and (max-width: 400px) { html:root[data-theme] .ui-btn { letter-spacing: 0.06em; } }
.ui-btn--primary { background: var(--color-gold-gradient); color: var(--color-text-on-gold); font-weight: 700; box-shadow: var(--shadow-gold); }
.ui-btn--primary:active { background: var(--color-gold-pressed); box-shadow: var(--shadow-gold-pressed); }
.ui-btn--secondary { background: var(--color-raised); color: var(--color-text); box-shadow: var(--shadow-key); }
.ui-btn--secondary:active { background: var(--color-key-pressed); }
.ui-btn--danger { background: var(--color-danger-fill); color: var(--color-text-on-danger); box-shadow: var(--shadow-danger); }
.ui-btn--ghost { background: transparent; color: var(--color-gold-soft); }
.ui-btn--ghost:active { background: var(--color-pressed); }
.ui-btn--block { width: 100%; }

/* field that opens the keypad */
.ui-field {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-1);
  width: 100%; min-height: 64px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-field-border); border-radius: var(--radius-row);
  background: var(--color-field); box-shadow: var(--shadow-field); color: var(--color-text); text-align: left; cursor: pointer;
}
.ui-field:active { border-color: var(--color-gold-edge); }
.ui-field:focus-within { border-color: var(--color-gold-soft); }
.ui-field--active { border-color: var(--color-gold-soft); box-shadow: var(--shadow-field), var(--gold-glow); }
.ui-field__label { font: var(--font-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); }
.ui-field__value { font: var(--font-value); font-variant-numeric: tabular-nums; }
.ui-field__value--empty { color: var(--color-text-secondary); font-weight: 400; }

/* list rows */
.ui-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.ui-row + .ui-row { border-top: 1px solid var(--color-divider); }
.ui-meta { font: var(--font-subtitle); color: var(--color-text-secondary); }

/* empty state & notes */
.ui-empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-secondary); }
.ui-note { font: var(--font-subtitle); color: var(--color-text-secondary); }
.ui-note--warn { color: var(--color-gold-soft); }

/* bottom navigation (5 tabs) */
.ui-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-nav-bg); border-top: 1px solid var(--color-nav-border); box-shadow: var(--shadow-nav);
}
.ui-nav__tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  border: 0; background: transparent; color: var(--color-text-secondary); cursor: pointer;
  font: var(--font-tab); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
@media (max-width: 359px) { .ui-nav__tab { letter-spacing: 0; font-size: 9px; } }
@media (max-width: 420px) { .ui-nav__tab { letter-spacing: 0; font-size: clamp(8px, 2.5vw, 10px); } } /* the wide lettering of some themes made «ТРЕНИРОВКА» and «ПРОГРАММЫ» touch */
.ui-nav__tab svg { width: 26px; height: 26px; }
.ui-nav__tab:active { background: var(--color-pressed); }
.ui-nav__tab[aria-current="page"] { color: var(--color-gold-soft); }
.ui-nav__tab[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 50%; width: 28px; height: 2px; margin-left: -14px; border-radius: 0 0 2px 2px; background: var(--color-gold-soft); box-shadow: var(--gold-glow); }
.ui-app--public .ui-nav { display: none; }

/* sheet + scrim (keypad, drawers) */
.ui-scrim { position: fixed; inset: 0; z-index: 40; background: var(--color-scrim); opacity: 0; transition: opacity var(--duration) var(--ease); }
.ui-scrim--open { opacity: 1; }
.ui-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  padding: var(--space-4) var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-4));
  background: var(--color-floating); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: var(--shadow-floating);
  transform: translateY(100%); transition: transform var(--duration) var(--ease);
}
.ui-sheet--open { transform: translateY(0); }

/* keypad */
.ui-keypad__display { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-2) var(--space-4); text-align: center; } /* owner 2026-11-05: the number in the middle, in every keypad */
.ui-keypad__label { font: var(--font-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); }
.ui-keypad__label-row { display: inline-flex; align-items: center; gap: var(--space-2); }
.ui-keypad__help, .ui-help-btn { position: relative; flex: none; width: 24px; height: 24px; padding: 0; border: 1px solid var(--color-gold-edge); border-radius: 50%; background: var(--color-surface); color: var(--color-gold-soft); font: var(--font-caption); font-weight: 700; cursor: pointer; }
.ui-keypad__help::after, .ui-help-btn::after { content: ""; position: absolute; inset: -10px; }
/* a closed feature of the competitor mode */
.ui-lock { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-lock__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.ui-lock__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--color-gold-edge); border-radius: 50%; background: var(--color-field); color: var(--color-gold-soft); }
.ui-lock__icon svg { width: 20px; height: 20px; }
.ui-lock__copy { min-width: 0; }
.ui-lock__title { margin: 0; font: var(--font-label); font-weight: 700; }
.ui-lock__text { margin: 2px 0 0; }
.ui-lock__list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ui-lock__item { display: flex; align-items: flex-start; gap: var(--space-2); font: var(--font-caption); color: var(--color-text-secondary); }
.ui-lock__mark { flex: none; width: 16px; height: 16px; color: var(--color-text-secondary); }
.ui-lock__mark--on { color: var(--color-gold-soft); }
.ui-lock__mark svg { display: block; width: 16px; height: 16px; }
.ui-keypad__value { font: var(--font-value); font-size: 40px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ui-keypad__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.ui-keypad__key {
  height: 56px; border: 0; border-radius: var(--radius-row);
  background: var(--color-key); box-shadow: var(--shadow-key); color: var(--color-text); font: var(--font-value); cursor: pointer;
}
.ui-keypad__key:active { background: var(--color-key-pressed); box-shadow: var(--shadow-field); }
.ui-keypad__key span { display: inline-flex; }
.ui-keypad__key svg { width: 28px; height: 28px; }
.ui-keypad__key--done { grid-column: 1 / -1; background: var(--color-gold-gradient); box-shadow: var(--shadow-gold); color: var(--color-text-on-gold); font: var(--font-label); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.ui-keypad__key--done:active { background: var(--color-gold-pressed); box-shadow: var(--shadow-gold-pressed); }

/* confirm dialog */
.ui-dialog {
  position: fixed; left: 50%; top: 50%; z-index: 51; width: min(340px, calc(100vw - 2 * var(--space-5)));
  transform: translate(-50%, -50%) scale(0.96); opacity: 0;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-floating); border-radius: var(--radius-card); box-shadow: var(--shadow-dialog);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.ui-dialog--open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ui-dialog__title { margin: 0 0 var(--space-2); font: var(--font-section); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.ui-dialog__text { margin: 0 0 var(--space-5); color: var(--color-text-secondary); }
.ui-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ui-scrim--dialog { z-index: 50; }

/* progress bar (contract §5: height 8, radius 4, gold fill) */
.ui-progress { height: 8px; border-radius: var(--radius-bar); background: var(--color-segment-bg); overflow: hidden; }
.ui-progress__fill { height: 100%; border-radius: var(--radius-bar); background: var(--color-gold-gradient); }

/* badges */
.ui-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px var(--space-2); border-radius: var(--radius-chip);
  font: var(--font-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  background: var(--color-segment-bg); color: var(--color-text-secondary);
}
.ui-badge--gold { background: var(--color-gold-soft); color: var(--color-text-on-gold-soft); }
.ui-badge--success { background: var(--color-success-bg); color: var(--color-success); }

/* chevron for tappable cards */
.ui-chevron { width: 20px; height: 20px; flex: none; color: var(--color-text-secondary); }
.ui-chevron svg { width: 20px; height: 20px; }

/* segmented control (contract §5: segments 36, active = gold-soft fill) */
.ui-segmented { position: relative; display: flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-row); background: var(--color-segment-bg); box-shadow: var(--shadow-field); overflow-x: auto; scrollbar-width: none; }
.ui-segmented::-webkit-scrollbar { display: none; }
.ui-segmented__item {
  flex: 1 0 auto; min-height: 36px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-chip);
  background: transparent; color: var(--color-text-secondary); cursor: pointer;
  font: var(--font-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; white-space: nowrap;
}
.ui-segmented__item { position: relative; }
.ui-segmented__item::after { content: ""; position: absolute; inset: -4px 0; } /* a finger needs 44 px */
.ui-segmented__item:active { background: var(--color-pressed); }
.ui-segmented__item[aria-selected="true"] { background: var(--color-raised); color: var(--color-gold-soft); font-weight: 700; box-shadow: var(--shadow-key); } /* gold stays an accent: filters do not compete with the main button */

/* delta chip / text, coloured by meaning */
.ui-delta { display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--space-3); border-radius: var(--radius-chip); font: var(--font-label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-delta--good { background: var(--color-success-bg); color: var(--color-success); }
.ui-delta--bad { background: var(--color-segment-bg); color: var(--color-danger); }
.ui-delta--neutral { background: var(--color-segment-bg); color: var(--color-neutral); }
.ui-delta--text { min-height: 0; padding: 0; background: transparent; }

/* charts */
.ui-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ui-chart__grid { stroke: var(--color-divider); stroke-width: 0.75; }
.ui-chart__tick { fill: var(--color-text-secondary); font: var(--font-caption); }
.ui-chart__line { fill: none; stroke: var(--color-gold-soft); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ui-chart__area-start { stop-color: var(--color-gold-soft); stop-opacity: 0.24; }
.ui-chart__area-end { stop-color: var(--color-gold-soft); stop-opacity: 0; }
.ui-chart__dot { fill: var(--color-bg); stroke: var(--color-gold-soft); stroke-width: 2; }
.ui-chart__dot--last { fill: var(--color-text); }
.ui-chart__bar { fill: var(--color-divider); }
.ui-chart__bar--last { fill: var(--color-gold-soft); }
/* a period still going on (the current week): an outline, so it is not read as a whole week (P2) */
.ui-chart__bar--partial { fill: transparent; stroke: var(--color-gold-soft); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ui-chart--spark { width: 96px; height: 32px; }

/* text input (prompt dialog) */
.ui-input {
  width: 100%; min-height: var(--button-h); margin: 0 0 var(--space-5); padding: 0 var(--space-4);
  border: 1px solid var(--color-field-border); border-radius: var(--radius-row);
  background: var(--color-field); box-shadow: var(--shadow-field); color: var(--color-text); font: var(--font-body);
}
.ui-input:focus { outline: none; border-color: var(--color-gold-soft); box-shadow: var(--shadow-field), var(--gold-glow); }

/* section heading with an action on the right */
.ui-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.ui-section__head .ui-btn { min-height: var(--touch); padding: 0 var(--space-2); }

/* placeholder screen */
.ui-soon { padding: var(--space-8) var(--screen-pad); color: var(--color-text-secondary); }

/* header with several actions (Тренировка: колокольчик + меню) */
.ui-header__actions { position: relative; z-index: 1; display: flex; gap: var(--space-1); }

/* toast */
.ui-toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--space-4)); z-index: 60;
  max-width: calc(100vw - 2 * var(--space-5)); padding: var(--space-3) var(--space-4);
  transform: translate(-50%, var(--space-2)); opacity: 0; pointer-events: none;
  border-radius: var(--radius-row); background: var(--color-floating); box-shadow: var(--shadow-dialog); color: var(--color-text);
  font: var(--font-subtitle); text-align: center;
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.ui-toast--open { opacity: 1; transform: translate(-50%, 0); }
/* switching to a new version (shared/api/app-cache.js): taps are kept off until the page reloads on it */
.ui-updating { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: var(--space-5); background: var(--color-scrim); color: var(--color-text); font: var(--font-subtitle); text-align: center; }
.ui-toast--success { color: var(--color-success); }
.ui-toast--gold { background: var(--color-gold-gradient); box-shadow: var(--shadow-gold); color: var(--color-text-on-gold); font-weight: 600; }
.ui-toast--danger { color: var(--color-danger); }
.ui-app--public ~ .ui-toast, .ui-toast--low { bottom: calc(env(safe-area-inset-bottom) + var(--space-5)); }

/* drawer */
.ui-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 41; width: min(300px, 82vw);
  padding: calc(env(safe-area-inset-top) + var(--space-4)) var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1);
  background: var(--color-floating); border-radius: 0 var(--radius-sheet) var(--radius-sheet) 0; box-shadow: var(--shadow-drawer);
  transform: translateX(-100%); transition: transform var(--duration) var(--ease);
}
.ui-drawer--open { transform: translateX(0); }
.ui-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 var(--space-3) var(--space-3); }
.ui-drawer__title { font: var(--font-section); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.ui-drawer__item {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--button-h); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-row); background: transparent; color: var(--color-text);
  font: var(--font-label); text-align: left; cursor: pointer;
}
.ui-drawer__item:active, .ui-drawer__item:focus-visible { background: var(--color-pressed); }
.ui-drawer__item--danger { color: var(--color-danger); }
.ui-drawer__icon { display: inline-flex; color: var(--color-gold-soft); }
.ui-drawer__item--danger .ui-drawer__icon { color: var(--color-danger); }
.ui-drawer__icon svg { width: 24px; height: 24px; }

/* new personal record pulse (used by screens on their PR element) */
@keyframes ui-pr-pulse {
  0% { box-shadow: 0 0 0 0 transparent; }
  60% { box-shadow: var(--gold-glow-strong); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* tap on the rest timer: a gold burst around the ring and a tint inside it */
@keyframes ui-ring-flash {
  0% { box-shadow: 0 0 0 0 var(--color-gold-light); }
  30% { box-shadow: var(--gold-glow-strong); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes ui-ring-tint {
  0% { opacity: 0; }
  25% { opacity: 0.4; }
  100% { opacity: 0; }
}

/* a new award not opened yet: glow on the button, wiggle of the cup */
@keyframes ui-award-glow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: var(--gold-glow-strong); }
}
@keyframes ui-award-wiggle {
  0%, 62%, 100% { transform: rotate(0) scale(1); }
  30% { transform: rotate(0) scale(1.14); }
  70% { transform: rotate(-14deg) scale(1.16); }
  78% { transform: rotate(12deg) scale(1.16); }
  86% { transform: rotate(-7deg) scale(1.08); }
  94% { transform: rotate(4deg) scale(1.02); }
}

/* ring-stat (contract §5: small Ø≈96 for Профиль, large for Подготовка) */
.ui-ring { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.ui-ring__box { position: relative; display: grid; place-items: center; }
.ui-ring--sm .ui-ring__box { width: 96px; height: 96px; }
.ui-ring--lg .ui-ring__box { width: 232px; height: 232px; max-width: 70vw; max-height: 70vw; }
.ui-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ui-ring__track { fill: none; stroke: var(--color-divider); stroke-width: 6; }
.ui-ring__arc { fill: none; stroke: var(--color-gold-soft); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset var(--duration) var(--ease); }
.ui-ring__value { position: relative; font: var(--font-value); }
.ui-ring--lg .ui-ring__value { font: var(--font-hero); }
.ui-ring__caption { font: var(--font-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); text-align: center; }

/* toggle (switch) */
.ui-toggle { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--button-h); cursor: pointer; }
.ui-toggle__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ui-toggle__label { font: var(--font-label); }
.ui-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-toggle__track { position: relative; width: 52px; height: 32px; flex: none; border-radius: 16px; background: var(--color-segment-bg); box-shadow: var(--shadow-field); transition: background var(--duration) var(--ease); }
.ui-toggle__track::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-text-secondary); transition: transform var(--duration) var(--ease), background var(--duration) var(--ease);
}
.ui-toggle__input:checked + .ui-toggle__track { background: var(--color-gold-gradient); box-shadow: var(--shadow-gold-pressed); }
.ui-toggle__input:checked + .ui-toggle__track::after { transform: translateX(20px); background: var(--color-text-on-gold); }
.ui-toggle__input:focus-visible + .ui-toggle__track { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }

/* date field (native picker inside ui-field) */
.ui-date { cursor: pointer; }
.ui-date { min-width: 0; }
.ui-date__input {
  display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 32px; text-align: left; -webkit-appearance: none; appearance: none; padding: 0; border: 0; background: transparent; color: var(--color-text);
  font: var(--font-value); font-variant-numeric: tabular-nums; color-scheme: dark;
}
.ui-date__input:focus { outline: none; }
.ui-date__input::-webkit-date-and-time-value { text-align: left; }

/* list item (menu rows) */
.ui-list-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; padding: var(--space-2) 0;
  border: 0; background: transparent; color: var(--color-text); text-align: left; cursor: pointer;
}
.ui-list-item + .ui-list-item { border-top: 1px solid var(--color-divider); }
.ui-list-item__icon { display: inline-flex; flex: none; color: var(--color-gold-soft); }
.ui-list-item__icon svg { width: 28px; height: 28px; }
.ui-list-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ui-list-item__title { font: var(--font-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.ui-list-item__value { color: var(--color-text-secondary); font: var(--font-subtitle); }
.ui-list-item--danger, .ui-list-item--danger .ui-list-item__icon { color: var(--color-danger); }

/* tall sheet with a title (pickers) */
.ui-sheet--tall { max-height: 85vh; display: flex; flex-direction: column; }
.ui-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 0 var(--space-3) var(--space-2); }
.ui-sheet__title { font: var(--font-section); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.ui-sheet__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* picker list inside a sheet (search + chips + items) */
.ui-picker__search { margin: 0 0 var(--space-3); }
.ui-picker__cats { margin-bottom: var(--space-2); }
.ui-picker__list { display: flex; flex-direction: column; }
.ui-picker__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 52px; padding: var(--space-2);
  border: 0; border-bottom: 1px solid var(--color-divider); background: transparent; color: var(--color-text);
  font: var(--font-label); text-align: left; cursor: pointer;
}
.ui-picker__item:active, .ui-picker__item:focus-visible { background: var(--color-pressed); }

/* reference band on a line chart (Анализы: норма) */
.ui-chart__band { fill: var(--color-success-bg); opacity: 0.6; }

/* tariff cards (payment sheet) */
/* licence: three tariff cards, one main button that turns into «Купить» */
.ui-license { display: grid; gap: var(--space-3); }
.ui-license__caption { margin: 0; font: var(--font-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); }
.ui-license__note { margin: 0; }
.ui-license__main { display: flex; align-items: center; justify-content: center; }
.ui-tariffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); padding-top: var(--space-2); }
.ui-tariff {
  position: relative; min-width: 0; padding: var(--space-4) 2px var(--space-3); display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  border: 1px solid var(--color-field-border); border-radius: var(--radius-card); background: var(--color-field); color: var(--color-text); text-align: center; cursor: pointer;
}
.ui-tariff--active { border-color: var(--color-gold-soft); box-shadow: var(--shadow-accent), var(--gold-glow); background: var(--color-accent-card); }
.ui-tariff__badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 1px var(--space-2); border-radius: var(--radius-chip);
  background: var(--color-gold-soft); color: var(--color-text-on-gold-soft); font: var(--font-tab); text-transform: uppercase; white-space: nowrap;
}
.ui-tariff__title { font: var(--font-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); }
.ui-tariff--active .ui-tariff__title { color: var(--color-text); }
.ui-tariff__price { font: var(--font-value); font-size: 21px; color: var(--color-gold-soft); white-space: nowrap; }
.ui-tariff__day { font: var(--font-subtitle); font-weight: 600; white-space: nowrap; }
.ui-tariff__term { font: var(--font-caption); color: var(--color-text-secondary); }
.ui-tg-icon {
  flex: none; width: 28px; height: 28px; margin-right: var(--space-2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; background: var(--color-telegram); color: var(--color-text);
}
.ui-tg-icon svg { width: 18px; height: 18px; }
.ui-ya-icon {
  flex: none; width: 28px; height: 28px; margin-right: var(--space-2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; background: var(--color-yandex); color: var(--color-text);
}
.ui-ya-icon svg { width: 16px; height: 16px; }
.ui-purchase { display: grid; gap: var(--space-3); padding-bottom: var(--space-2); }
.ui-purchase__what { margin: 0; font: var(--font-label); color: var(--color-gold-soft); }
.ui-purchase__status { margin: 0; font: var(--font-subtitle); color: var(--color-danger); }

/* slider (volume) */
.ui-slider { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0; }
.ui-slider__head { display: flex; justify-content: space-between; align-items: baseline; }
.ui-slider__label { font: var(--font-label); }
.ui-slider__value { font: var(--font-label); color: var(--color-gold-soft); }
.ui-slider__input { width: 100%; height: var(--touch); margin: 0; accent-color: var(--color-gold-soft); background: transparent; cursor: pointer; }
.ui-slider--disabled { opacity: 0.4; }

/* award: «Новое достижение» pops near the save button, then flies into «Награды» (workout header) */
.ui-award-fly {
  position: fixed; z-index: 70; transform: translate(-50%, -100%) scale(0.6); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-row); background: var(--color-gold-gradient); box-shadow: var(--shadow-gold); color: var(--color-text-on-gold); font: var(--font-label); font-weight: 700;
  transition: transform 600ms var(--ease), opacity 300ms var(--ease), left 600ms var(--ease), top 600ms var(--ease);
}
.ui-award-fly__icon { display: inline-flex; }
.ui-award-fly__icon svg { width: 22px; height: 22px; }
.ui-award-fly--show { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.ui-award-fly--go { transform: translate(-50%, -50%) scale(0.2); opacity: 0.2; }
.ui-award-fly--go .ui-award-fly__text { opacity: 0; }

/* water portions sheet */
.ui-portions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); }
.ui-portion {
  min-height: var(--button-h); border: 1px solid var(--color-field-border); border-radius: var(--radius-row);
  background: var(--color-field); color: var(--color-text); font: var(--font-label); font-variant-numeric: tabular-nums; cursor: pointer;
}
.ui-portion:active { background: var(--color-key-pressed); }
.ui-portion--on { border-color: var(--color-gold-soft); color: var(--color-gold-soft); }

/* small hint sheet bits (RPE help, exercise menu) */
.ui-hint__lead { margin: 0 0 var(--space-3); }
.ui-hint__list { margin: 0 0 var(--space-3); padding-left: var(--space-5); font: var(--font-body); }
.ui-hint__list li + li { margin-top: var(--space-1); }
.ui-hint__row { display: inline-flex; gap: var(--space-2); }
.ui-hint__mini { min-height: 36px; padding: 0 var(--space-3); }
.ui-picker__item--danger { color: var(--color-danger); }
/* a picker with one choice (role="radio"): the chosen one in gold with a check; a short note under the list */
.ui-picker__item[aria-checked="true"] { color: var(--color-gold-soft); font-weight: 600; }
.ui-picker__check { display: inline-flex; flex: none; color: var(--color-gold-soft); }
.ui-picker__check svg { width: 20px; height: 20px; }
.ui-picker__note { margin: var(--space-3) 0 0; }

/* fullscreen photo viewer */
.ui-photo-viewer { position: fixed; inset: 0; z-index: 70; background: var(--color-bg); }
.ui-photo-viewer__stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; display: flex; align-items: center; justify-content: center; }
.ui-photo-viewer__img { width: 100%; height: 100%; object-fit: contain; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; will-change: transform; pointer-events: none; }
.ui-photo-viewer__close { position: absolute; z-index: 1; top: calc(env(safe-area-inset-top) + var(--space-3)); right: var(--screen-pad); min-height: 40px; padding: 0 var(--space-4); }
.ui-photo-viewer__caption {
  position: absolute; z-index: 1; left: var(--screen-pad); right: var(--screen-pad); bottom: calc(env(safe-area-inset-bottom) + var(--space-4)); margin: 0; pointer-events: none;
  text-align: center; font: var(--font-subtitle); color: var(--color-text); text-shadow: 0 1px 6px var(--color-bg);
}

/* mini 1RM calculator in a sheet (Программа) */
.ui-rm-calc { display: grid; gap: var(--space-3); }
.ui-rm-calc .ui-note { margin: 0; }
.ui-rm-calc__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ui-rm-calc__result { margin: 0; text-align: center; font: var(--font-value); color: var(--color-gold-soft); }

/* install banner: above the bottom navigation, in the crimson + gold of the accent cards */
.ui-install {
  position: fixed; z-index: 15; left: var(--space-3); right: var(--space-3); bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--space-3));
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-1) var(--space-2) var(--space-3);
  border: 1px solid var(--color-gold-edge); border-radius: var(--radius-card); background: var(--color-accent-card);
  box-shadow: var(--shadow-dialog); animation: ui-install-in 320ms var(--ease) 1;
}
@keyframes ui-install-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ui-install { animation: none; } }
.ui-install__icon { flex: none; width: 44px; height: 44px; border-radius: 10px; }
.ui-install__text { flex: 1; min-width: 0; }
.ui-install__title { margin: 0; font: var(--font-subtitle); font-weight: 600; color: var(--color-text); }
.ui-install__hint { margin: 2px 0 0; font: var(--font-caption); color: var(--color-gold-soft); }
.ui-install__btn { flex: none; min-height: 40px; padding: 0 var(--space-3); font: var(--font-caption); font-weight: 700; letter-spacing: var(--tracking-caps); }
.ui-install__close { flex: none; width: 36px; height: 36px; margin: 0; color: var(--color-text-secondary); }
.ui-install__close svg { width: 18px; height: 18px; }

/* other languages have long words («Körperzusammensetzung»): titles break by syllables (or inside the word) instead of running out */
:root:not([lang="ru"]) :is(h1, h2, h3, .ui-card__title, .ui-section__title, .ui-header__title) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; }
/* the language picker: a list (settings, the menu sheet) and a small button on the first screen */
.ui-lang-list { display: flex; flex-direction: column; }
.ui-lang-item { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-1); border: 0; border-bottom: 1px solid var(--color-divider); background: transparent; color: var(--color-text); text-align: left; cursor: pointer; font: var(--font-body); }
.ui-lang-item:last-child { border-bottom: 0; }
.ui-lang-item:active { background: var(--color-pressed); }
.ui-lang-item__name { flex: 1; }
.ui-lang-item__code { font: var(--font-caption); letter-spacing: var(--tracking-caps); color: var(--color-text-secondary); }
.ui-lang-item__check { display: inline-flex; color: var(--color-gold-soft); }
.ui-lang-item__check svg { width: 20px; height: 20px; }
.ui-lang-item--on .ui-lang-item__name { color: var(--color-gold-soft); font-weight: 600; }
.ui-lang-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--color-divider); border-radius: var(--radius-chip); background: var(--color-surface); color: var(--color-text); font: var(--font-caption); letter-spacing: var(--tracking-caps); cursor: pointer; }
.ui-lang-btn::after { content: ""; position: absolute; inset: -6px 0; } /* a finger needs 44 px */
.ui-lang-btn__icon { display: inline-flex; color: var(--color-gold-soft); }
.ui-lang-btn__icon svg { width: 16px; height: 16px; }

/* install instructions in a sheet */
.ui-install-sheet { display: grid; gap: var(--space-4); padding-bottom: var(--space-2); }
.ui-install-sheet__hero { display: grid; justify-items: center; gap: var(--space-1); text-align: center; }
.ui-install-sheet__hero .ui-meta { margin: 0; }
.ui-install-sheet__icon { width: 72px; height: 72px; border-radius: 16px; border: 1px solid var(--color-gold-soft); box-shadow: var(--crimson-glow); }
.ui-install-sheet__name { margin: var(--space-2) 0 0; font: var(--font-section); letter-spacing: var(--tracking-title); }
.ui-install-sheet__note { margin: 0; }
.ui-install-steps { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ui-install-step { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-row); background: var(--color-field); box-shadow: var(--shadow-field); }
.ui-install-step__num {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-gold-soft); color: var(--color-text-on-gold-soft); font: var(--font-subtitle); font-weight: 700;
}
.ui-install-step__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ui-install-step__title { font: var(--font-label); color: var(--color-text); }
.ui-install-step__icon { flex: none; display: inline-flex; color: var(--color-gold-soft); }
.ui-install-step__icon svg { width: 24px; height: 24px; }

/* Telegram waiting sheet */
.ui-tg-wait { display: grid; gap: var(--space-3); padding-bottom: var(--space-2); }
.ui-tg-wait__lead { margin: 0; font: var(--font-body); color: var(--color-text); }
.ui-tg-wait__status { margin: 0; display: flex; align-items: center; gap: var(--space-2); font: var(--font-subtitle); color: var(--color-gold-soft); }
.ui-tg-wait__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-gold-soft); animation: ui-tg-pulse 1200ms ease-in-out infinite; }
@keyframes ui-tg-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ui-tg-wait__dot { animation: none; } }
.ui-tg-wait__link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }

/* a warning that does not push: one line, the full text on a tap */
.ui-more__summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch); list-style: none; font: var(--font-subtitle); color: var(--color-text-secondary); cursor: pointer; }
.ui-more__summary::-webkit-details-marker { display: none; }
.ui-more__icon { flex: none; display: inline-flex; color: var(--color-text-secondary); }
.ui-more__icon svg { width: 18px; height: 18px; }
.ui-more__text { flex: 1; min-width: 0; }
.ui-more__chevron { flex: none; display: inline-flex; transform: rotate(90deg); transition: transform var(--duration) var(--ease); }
.ui-more__chevron svg { width: 16px; height: 16px; }
.ui-more[open] .ui-more__chevron { transform: rotate(-90deg); }
.ui-more__body { padding-bottom: var(--space-2); }

/* last in the file: it has to win over the rules above */
@media (prefers-reduced-motion: reduce) {
  .ui-btn, .ui-scrim, .ui-sheet, .ui-dialog, .ui-drawer, .ui-toast, .ui-toggle__track, .ui-toggle__track::after, .ui-ring__arc, .ui-award-fly, .ui-more__chevron { transition: none; }
  .ui-btn:active { transform: none; }
}

/* «Как подобрать вес» */
.ui-guide { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-guide__block { display: flex; flex-direction: column; gap: var(--space-1); }
.ui-guide__title { margin: 0; font: var(--font-label); color: var(--color-gold-soft); }
.ui-guide .ui-note, .ui-guide .ui-hint__list { margin: 0; }
.ui-guide__table { padding: 0 var(--space-3); border: 1px solid var(--color-field-border); border-radius: var(--radius-row); background: var(--color-field); }
.ui-guide__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0; padding: var(--space-2) 0; font: var(--font-caption); color: var(--color-text-secondary); }
.ui-guide__row + .ui-guide__row { border-top: 1px solid var(--color-divider); }
.ui-guide__row b { flex: none; color: var(--color-text); }
.ui-rm-calc__name { margin: 0; font: var(--font-label); color: var(--color-gold-soft); }

.ui-toast--action { pointer-events: auto; cursor: pointer; }
.ui-nav__tab--mark { position: relative; }
.ui-nav__tab--mark::after { content: ""; position: absolute; top: 6px; left: calc(50% + 10px); width: 9px; height: 9px; border-radius: 50%; background: var(--color-gold-soft); box-shadow: 0 0 0 2px var(--color-bg); }

/* «Включи уведомления» */
.ui-push-ask { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-push-ask .ui-note { margin: 0; }

/* the choice of a theme: three arches, the chosen one open */
.ui-theme-picker { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-theme-picker__note { margin: 0; text-align: center; }
.ui-theme-sheet { display: flex; flex-direction: column; gap: var(--space-4); }
/* the character of the theme (owner 2026-11-11): its own two people as small photo tiles under the arches, «Он» and «Она» */
.ui-theme-character { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.ui-theme-character[hidden] { display: none; }
.ui-theme-character__label { font: var(--font-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-secondary); }
.ui-theme-character__tiles { display: flex; justify-content: center; gap: var(--space-3); }
.ui-theme-character__tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 76px; padding: var(--space-1);
  border: 1px solid var(--color-divider); border-radius: var(--radius-row); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer;
}
.ui-theme-character__tile[aria-checked="true"] { border-color: var(--color-gold); color: var(--color-text); box-shadow: var(--gold-glow); }
.ui-theme-character__photo { width: 64px; height: 64px; border-radius: 50%; background-color: var(--color-bg); background-size: auto var(--character-tile-zoom, 220%); background-position: center var(--character-tile-y, 8%); background-repeat: no-repeat; } /* the head and shoulders of the theme photo */
.ui-theme-character__tile--male .ui-theme-character__photo { background-image: var(--photo-workout-male); }
.ui-theme-character__tile--female .ui-theme-character__photo { background-image: var(--photo-workout-female); }
.ui-theme-character__tile[aria-checked="false"] .ui-theme-character__photo { opacity: 0.62; }
.ui-theme-character__name { font: var(--font-caption); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.ui-theme-arches { display: flex; gap: var(--space-2); height: clamp(264px, 42vh, 340px); }
.ui-theme-arch[data-preview="dark"] { --p-male: var(--preview-dark-male); --p-female: var(--preview-dark-female); --p-bg: var(--preview-dark-bg); --p-slab: var(--preview-dark-slab); --p-accent: var(--preview-dark-accent); --p-ink: var(--preview-dark-ink); --p-veil: var(--preview-dark-veil); }
.ui-theme-arch[data-preview="atelier"] { --p-male: var(--preview-atelier-male); --p-female: var(--preview-atelier-female); --p-bg: var(--preview-atelier-bg); --p-slab: var(--preview-atelier-slab); --p-accent: var(--preview-atelier-accent); --p-ink: var(--preview-atelier-ink); --p-veil: var(--preview-atelier-veil); }
.ui-theme-arch[data-preview="ivory"] { --p-male: var(--preview-ivory-male); --p-female: var(--preview-ivory-female); --p-bg: var(--preview-ivory-bg); --p-slab: var(--preview-ivory-slab); --p-accent: var(--preview-ivory-accent); --p-ink: var(--preview-ivory-ink); --p-veil: var(--preview-ivory-veil); }
.ui-theme-arch[data-preview="cyberpunk"] { --p-male: var(--preview-cyberpunk-male); --p-female: var(--preview-cyberpunk-female); --p-bg: var(--preview-cyberpunk-bg); --p-slab: var(--preview-cyberpunk-slab); --p-accent: var(--preview-cyberpunk-accent); --p-ink: var(--preview-cyberpunk-ink); --p-veil: var(--preview-cyberpunk-veil); }
.ui-theme-arch[data-preview="oldschool"] { --p-male: var(--preview-oldschool-male); --p-female: var(--preview-oldschool-female); --p-bg: var(--preview-oldschool-bg); --p-slab: var(--preview-oldschool-slab); --p-accent: var(--preview-oldschool-accent); --p-ink: var(--preview-oldschool-ink); --p-veil: var(--preview-oldschool-veil); }
.ui-theme-arch {
  position: relative; flex: 1 1 0; min-width: 0; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--p-accent); border-radius: 160px 160px var(--radius-row) var(--radius-row); background: var(--p-bg); color: var(--p-ink);
  box-shadow: var(--shadow-card); transition: flex-grow 420ms var(--ease), box-shadow var(--duration) var(--ease);
}
.ui-theme-arch[aria-checked="true"] { flex-grow: 2.6; box-shadow: var(--shadow-card), var(--gold-glow-strong); }
.ui-theme-arch:active { filter: brightness(0.97); }
.ui-theme-arch:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.ui-theme-arch__photo { position: absolute; inset: 0; background-image: var(--p-male); background-size: auto 112%; background-position: center 28%; background-repeat: no-repeat; opacity: 0.55; transition: opacity 420ms var(--ease); }
.ui-theme-arch[data-gender="female"] .ui-theme-arch__photo { background-image: var(--p-female); }
.ui-theme-arch[aria-checked="true"] .ui-theme-arch__photo { opacity: 1; }
.ui-theme-arch__veil { position: absolute; inset: 42% 0 0; background: linear-gradient(to bottom, transparent, var(--p-veil) 62%); }
.ui-theme-arch__line { position: absolute; inset: 5px; border: 1px solid var(--p-accent); border-radius: 156px 156px 6px 6px; opacity: 0.4; pointer-events: none; }
.ui-theme-arch__side { position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font: var(--font-caption); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; transition: opacity var(--duration) var(--ease); }
.ui-theme-arch[aria-checked="true"] .ui-theme-arch__side { opacity: 0; }
.ui-theme-arch__open { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-4); display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); }
.ui-theme-arch[aria-checked="true"] .ui-theme-arch__open { opacity: 1; transform: none; transition-delay: 140ms; }
.ui-theme-arch__stones { display: flex; gap: 4px; margin-bottom: var(--space-1); }
.ui-theme-arch__stone { width: 9px; height: 9px; border: 1px solid var(--p-accent); border-radius: 50%; }
.ui-theme-arch__stone--bg { background: var(--p-bg); }
.ui-theme-arch__stone--slab { background: var(--p-slab); }
.ui-theme-arch__stone--accent { background: var(--p-accent); }
.ui-theme-arch__open { container-type: inline-size; left: var(--space-2); right: var(--space-2); }
.ui-theme-arch__name { max-width: 100%; font: var(--font-section); font-size: min(18px, 15.5cqi); letter-spacing: 0.04em; text-transform: uppercase; text-wrap: balance; } /* the size follows the arch; words break only at spaces */
.ui-theme-arch__tag { max-width: 100%; font: var(--font-caption); opacity: 0.82; text-wrap: balance; }
.ui-theme-arch__check { position: absolute; top: var(--space-5); left: 50%; width: 24px; height: 24px; margin-left: -12px; display: grid; place-items: center; border-radius: 50%; background: var(--p-accent); color: var(--p-bg); opacity: 0; transform: scale(0.6); transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); }
.ui-theme-arch__check svg { width: 14px; height: 14px; stroke-width: 2.6; }
.ui-theme-arch[aria-checked="true"] .ui-theme-arch__check { opacity: 1; transform: none; transition-delay: 180ms; }

/* the mark in the profile: three stones. It breathes until the first tap */
.ui-theme-btn { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch); padding: 0; border: 0; background: transparent; color: var(--color-text); font: var(--font-caption); font-weight: 600; text-shadow: var(--text-shadow-photo); cursor: pointer; }
.ui-theme-btn::before { content: ""; position: absolute; inset: 0 -6px; }
.ui-theme-btn__stones { position: relative; display: inline-flex; flex: none; padding: 3px; }
.ui-theme-btn__stone { position: relative; width: 16px; height: 16px; border: 1.5px solid var(--color-surface-top); border-radius: 50%; box-shadow: var(--shadow-key); }
.ui-theme-btn__stone + .ui-theme-btn__stone { margin-left: -6px; }
.ui-theme-btn__stone--dark { background: var(--preview-dark-bg); }
.ui-theme-btn__stone--atelier { background: var(--preview-atelier-accent); }
.ui-theme-btn__stone--ivory { background: var(--preview-ivory-slab); }
.ui-theme-btn__stone--cyberpunk { background: linear-gradient(135deg, var(--cyber-cyan-75), var(--cyber-violet-64)); box-shadow: 0 0 8px var(--cyber-cyan-75-a65); }
.ui-theme-btn__stone--oldschool { background: linear-gradient(135deg, var(--oldschool-red-35), var(--oldschool-orange-49)); }

/* Theme motion and material cues. The component geometry remains shared, but the feedback language changes with the selected world. */
@keyframes cyberpunk-scan { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 12px -8px, -18px 14px, 0 22px, 56px 0, 0 0; } }
@keyframes cyberpunk-pulse { 0%, 100% { filter: drop-shadow(0 0 4px var(--cyber-cyan-75-a55)); } 50% { filter: drop-shadow(0 0 10px var(--cyber-violet-64-a85)); } }
@keyframes cyber-city-flicker { 0%, 14%, 18%, 43%, 47%, 72%, 100% { opacity: 0.14; } 16%, 45%, 74% { opacity: 0.38; } 17%, 46%, 75% { opacity: 0.2; } }
@keyframes cyber-light-sweep { 0% { transform: translate3d(-18%, 0, 0); opacity: 0; } 18% { opacity: 0.22; } 52% { opacity: 0.08; } 78%, 100% { transform: translate3d(22%, 0, 0); opacity: 0; } }
@keyframes cyber-scanline { 0% { transform: translateY(-18%); opacity: 0; } 14% { opacity: 0.35; } 50% { opacity: 0.1; } 86%, 100% { transform: translateY(118%); opacity: 0; } }
@keyframes cyber-air-glow { 0%, 100% { opacity: 0.08; transform: scale(0.94); } 50% { opacity: 0.2; transform: scale(1.08); } }
@keyframes oldschool-shimmer { 0%, 100% { box-shadow: var(--shadow-gold); } 50% { box-shadow: var(--shadow-gold), 0 0 14px var(--oldschool-orange-49-a24); } }
@keyframes darkside-pulse { 0%, 100% { filter: drop-shadow(0 0 4px rgba(224, 122, 112, 0.42)); } 50% { filter: drop-shadow(0 0 10px rgba(182, 37, 60, 0.82)); } }
@keyframes yujiro-steam-a { 0%, 100% { opacity: 0.18; transform: translate3d(-5px, 14px, 0) scale(0.88) rotate(-3deg); } 45% { opacity: 0.62; transform: translate3d(10px, -6px, 0) scale(1.08) rotate(3deg); } 75% { opacity: 0.3; transform: translate3d(-8px, -28px, 0) scale(1.22) rotate(-4deg); } }
@keyframes yujiro-steam-b { 0%, 100% { opacity: 0.12; transform: translate3d(8px, 16px, 0) scale(0.84) rotate(4deg); } 40% { opacity: 0.48; transform: translate3d(-10px, -10px, 0) scale(1.12) rotate(-5deg); } 80% { opacity: 0.22; transform: translate3d(4px, -34px, 0) scale(1.26) rotate(3deg); } }
@keyframes yujiro-body-steam { 0%, 100% { opacity: 0.1; transform: translate3d(0, 14px, 0) scale(0.86); } 45% { opacity: 0.5; transform: translate3d(12px, -6px, 0) scale(1.1); } 78% { opacity: 0.24; transform: translate3d(-8px, -28px, 0) scale(1.24); } }
@keyframes yujiro-body-steam-strong { 0%, 100% { opacity: 0.38; transform: translate3d(-8px, 18px, 0) scale(0.84) rotate(-2deg); } 42% { opacity: 0.9; transform: translate3d(14px, -12px, 0) scale(1.12) rotate(3deg); } 76% { opacity: 0.55; transform: translate3d(-12px, -40px, 0) scale(1.3) rotate(-3deg); } }
:root[data-theme="cyberpunk"] body { animation: cyberpunk-scan 22s linear infinite; background-size: auto, auto, auto, 56px 56px, auto; }
:root[data-theme="cyberpunk"] .ui-card,
:root[data-theme="cyberpunk"] .ui-field,
:root[data-theme="cyberpunk"] .ui-sheet,
:root[data-theme="cyberpunk"] .ui-dialog { border: 1px solid var(--cyber-cyan-75-a16); }
:root[data-theme="cyberpunk"] .ui-btn--primary,
:root[data-theme="cyberpunk"] .ui-nav__tab[aria-current="page"],
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-ring[data-action="ring"] { animation: cyberpunk-pulse 3.2s ease-in-out infinite; }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-ring-arc { stroke: var(--color-gold-soft); }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-hero::before,
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-hero::after,
:root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero::before,
:root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero::after { content: ""; position: absolute; pointer-events: none; z-index: 0; mix-blend-mode: screen; }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-hero::before,
:root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero::before { inset: 0; background: repeating-linear-gradient(90deg, transparent 0 18px, var(--cyber-cyan-75-a8) 19px 20px, transparent 21px 46px), repeating-linear-gradient(180deg, transparent 0 9px, var(--cyber-violet-64-a8) 10px 11px, transparent 12px 28px); opacity: 0.14; animation: cyber-city-flicker 11s steps(1, end) infinite; }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-hero::after,
:root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero::after { top: 0; right: -20%; bottom: 0; left: 25%; background: linear-gradient(110deg, transparent 0 42%, var(--cyber-cyan-75-a18) 48%, var(--cyber-violet-64-a12) 52%, transparent 60%); filter: blur(10px); animation: cyber-light-sweep 13s ease-in-out 1.8s infinite; }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-hero { box-shadow: inset 0 0 90px var(--cyber-blue-57-a8); }
:root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero { box-shadow: inset 0 0 90px var(--cyber-violet-64-a10); }

/* A distinct cyber city layer. It gives the hero a sense of depth even when the subject photo is very dark. */
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-hero,
:root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero {
  isolation: isolate;
  background-image:
    linear-gradient(180deg, var(--cyber-blue-5-a6) 0%, var(--cyber-blue-5-a8) 44%, var(--cyber-blue-4-a90) 100%),
    radial-gradient(ellipse 72% 42% at 76% 28%, var(--cyber-violet-62-a20), transparent 62%),
    radial-gradient(ellipse 55% 52% at 12% 76%, var(--cyber-cyan-60-a22), transparent 62%),
    var(--hero-workout);
  background-size: cover, 120% 120%, 120% 120%, cover;
}
:root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero { background-image:
    linear-gradient(180deg, var(--cyber-blue-5-a6) 0%, var(--cyber-blue-5-a12) 44%, var(--cyber-blue-4-a90) 100%),
    radial-gradient(ellipse 72% 42% at 76% 28%, var(--cyber-violet-62-a20), transparent 62%),
    radial-gradient(ellipse 55% 52% at 12% 76%, var(--cyber-cyan-60-a22), transparent 62%),
    var(--hero-profile);
}
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-hero::before,
:root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero::before {
  display: block;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0 52%, var(--cyber-blue-4-a72) 100%),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--cyber-cyan-68-a11) 9px 10px, transparent 11px 26px),
    repeating-linear-gradient(180deg, transparent 0 12px, var(--cyber-violet-65-a10) 13px 14px, transparent 15px 31px);
  opacity: 0.76;
  filter: saturate(1.35) contrast(1.12);
  animation: cyber-city-flicker 8.5s steps(1, end) infinite;
}
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-hero::after,
:root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero::after {
  display: block;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 0 38%, var(--cyber-cyan-67-a38) 47%, var(--cyber-violet-64-a28) 51%, transparent 61%),
    linear-gradient(180deg, transparent 0 62%, var(--cyber-teal-54-a22) 63%, transparent 64%),
    repeating-linear-gradient(180deg, var(--cyber-cyan-93-a8) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  filter: blur(0.2px);
  animation: cyber-light-sweep 10.5s ease-in-out 1.3s infinite, cyber-scanline 7s linear 0.4s infinite;
}

/* The profile photo fades into the page (owner 2026-11-10: no hard edge under it): the light layer ends in the page colour, the city
   lines and the sweep fade out over the lower part, the inner glow stays on the top and the sides. */
:root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero {
  background-image:
    linear-gradient(180deg, var(--cyber-blue-5-a6) 0%, var(--cyber-blue-5-a12) 40%, var(--cyber-blue-4-a90) 84%, var(--color-bg) 100%),
    radial-gradient(ellipse 72% 42% at 76% 28%, var(--cyber-violet-62-a20), transparent 62%),
    radial-gradient(ellipse 55% 52% at 12% 76%, var(--cyber-cyan-60-a22), transparent 62%),
    var(--hero-profile);
  background-size: cover, 120% 120%, 120% 120%, var(--hero-own-size, cover); /* the photo layer: the own picture's zoom and place, if any */
  background-position: var(--hero-profile-pos), var(--hero-profile-pos), var(--hero-profile-pos), var(--hero-own-pos, var(--hero-profile-pos));
  box-shadow: inset 0 60px 90px -60px var(--cyber-violet-64-a10), inset 60px 0 90px -60px var(--cyber-violet-64-a10), inset -60px 0 90px -60px var(--cyber-violet-64-a10);
  -webkit-mask-image: linear-gradient(180deg, black calc(100% - 16px), transparent); mask-image: linear-gradient(180deg, black calc(100% - 16px), transparent); /* the last 16 px melt into the page; the level line ends higher */
}
:root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero::before,
:root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero::after { -webkit-mask-image: linear-gradient(180deg, black 55%, transparent 100%); mask-image: linear-gradient(180deg, black 55%, transparent 100%); }
/* No neon flashes over the athletes (owner 2026-11-10): the city grid stays still and quiet, the light sweep and the scanline are gone. */
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-hero::before,
:root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero::before { animation: none; opacity: 0.14; }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-hero::after,
:root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero::after { animation: none; display: none; }
/* The two hero layers above carry the city windows, scanline and chromatic sweep. */
:root[data-theme="cyberpunk"] .ui-card { overflow: hidden; border-radius: 10px; box-shadow: inset 0 1px 0 var(--cyber-cyan-88-a14), inset 3px 0 0 var(--cyber-cyan-64-a70), 0 14px 30px -18px var(--cyber-ink-0-a98), 0 0 26px -22px var(--cyber-violet-64-a85); }
:root[data-theme="cyberpunk"] .ui-card::after { content: ""; position: absolute; top: 0; right: 0; width: 54px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyber-violet-64)); transform: rotate(-42deg) translate(13px, -11px); transform-origin: center; opacity: 0.95; pointer-events: none; }
:root[data-theme="cyberpunk"] .ui-card__title::before { background: linear-gradient(180deg, var(--cyber-cyan-75), var(--cyber-violet-64)); box-shadow: 0 0 10px var(--cyber-cyan-75-a62); }
:root[data-theme="cyberpunk"] .ui-nav { border-top: 1px solid var(--cyber-cyan-75-a50); }
:root[data-theme="cyberpunk"] .ui-nav__tab[aria-current="page"]::before { height: 3px; background: linear-gradient(90deg, var(--cyber-cyan-75), var(--cyber-violet-64)); box-shadow: 0 0 14px var(--cyber-cyan-75-a80); }
:root[data-theme="cyberpunk"] .ui-btn { border-radius: 7px; }
:root[data-theme="cyberpunk"] .ui-btn--primary { position: relative; overflow: hidden; background: linear-gradient(105deg, var(--cyber-cyan-56) 0%, var(--cyber-blue-67) 52%, var(--cyber-violet-64) 100%); }
:root[data-theme="cyberpunk"] .ui-btn--primary::after { content: ""; position: absolute; top: -10%; left: -22%; width: 18%; height: 120%; background: var(--cyber-teal-96-a50); transform: skewX(-22deg); animation: cyber-light-sweep 4.8s ease-in-out infinite; pointer-events: none; }
/* Cyberpunk workout composition. The empty ring is part of the photo, while the live timer stays on top of it. */
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-timer-section { isolation: isolate; }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-ring {
  transform: translateY(-4px) scale(1.08);
  border-color: transparent;
  background: var(--cyber-blue-5-a20);
  box-shadow: inset 0 0 0 1px var(--cyber-cyan-75-a16), inset 0 0 24px var(--cyber-violet-64-a12), 0 0 26px -10px var(--cyber-cyan-75-a72);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-ring-svg { position: relative; z-index: 2; }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-ring-track { stroke: var(--cyber-cyan-75-a22); }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-ring-arc { stroke: var(--cyber-cyan-75); filter: drop-shadow(0 0 5px var(--cyber-cyan-75-a90)); }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-ring-inner { z-index: 3; text-shadow: 0 0 14px var(--cyber-cyan-75-a50); }
/* Cyberpunk dial pair v5 (owner 2026-11-10): V's hands are cut from the photo and lie over the timer (tokens --cyber-hands-*). */
/* The athlete holds the timer (owner 2026-11-10): the photo is sized and placed from the timer, so its neon ring lies on the timer's arc
   on any screen; the hands are a layer above the arc. The sides beyond a narrow photo fade into the page. */
:root[data-theme="cyberpunk"] .scr-workout { --hero-under: calc(var(--ring-size, 194px) + 24px); } /* the photo runs on under the whole ring, then fades */
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-hero {
  -webkit-mask-image: linear-gradient(180deg, var(--color-bg) calc(100% - 64px), transparent); /* every layer, the city lines too, fades out: no edge under the ring */
  mask-image: linear-gradient(180deg, var(--color-bg) calc(100% - 64px), transparent);
  --cyber-photo-left: calc(50% + var(--ring-size, 194px) * (var(--cyber-photo-x) - var(--cyber-photo-w) / 2));
  --cyber-photo-right: calc(50% + var(--ring-size, 194px) * (var(--cyber-photo-x) + var(--cyber-photo-w) / 2));
  background-image:
    var(--cyber-hero-light),
    linear-gradient(90deg, var(--color-bg) var(--cyber-photo-left), transparent calc(var(--cyber-photo-left) + 28px), transparent calc(var(--cyber-photo-right) - 28px), var(--color-bg) var(--cyber-photo-right)),
    var(--hero-workout);
  background-size: cover, 120% 120%, 120% 120%, 100% 100%, calc(var(--ring-size, 194px) * var(--cyber-photo-w)) calc(var(--ring-size, 194px) * var(--cyber-photo-h));
  background-position: center, center, center, center, calc(50% + var(--ring-size, 194px) * var(--cyber-photo-x)) calc(var(--hero-h, 250px) - 4px + var(--ring-size, 194px) * var(--cyber-photo-y));
}
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-ring::before {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  left: calc(var(--ring-size, 194px) * var(--cyber-hands-x) - 1px); top: calc(var(--ring-size, 194px) * var(--cyber-hands-y) - 1px);
  width: calc(var(--ring-size, 194px) * var(--cyber-hands-w)); height: calc(var(--ring-size, 194px) * var(--cyber-hands-h));
  background: var(--cyber-hands) center / 100% 100% no-repeat;
}

/* Cyberpunk, the rest: «неон заряжается» (owner 2026-11-12). Only while a rest runs, no flashing anywhere (2026-11-10: no flashes over
   the athletes): a spark of current with a fading tail runs round the ring and under V's fingers, thin rain runs down the glass at the
   sides (not over V), and rings spread slowly on the wet floor under the ring, two in turn. transform/opacity/background-position only. */
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-ring-spark { display: block; fill: none; stroke-linecap: round; opacity: 0; transform-box: view-box; transform-origin: 120px 120px; transition: opacity 0.8s ease; }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-ring-spark--tail { stroke: var(--cyber-spark); stroke-width: 9; filter: drop-shadow(0 0 4px var(--cyber-spark-glow)); } /* white over the cyan arc: a trail of light */
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-ring-spark--head { stroke: var(--cyber-spark); stroke-width: 10; filter: drop-shadow(0 0 6px var(--cyber-spark-glow)); }
:root[data-theme="cyberpunk"] .scr-workout[data-timer="running"] .scr-workout-ring-spark { animation: cyber-spark-orbit 2.6s linear infinite; }
:root[data-theme="cyberpunk"] .scr-workout[data-timer="running"] .scr-workout-ring-spark--tail { opacity: 0.38; }
:root[data-theme="cyberpunk"] .scr-workout[data-timer="running"] .scr-workout-ring-spark--head { opacity: 1; }
@keyframes cyber-spark-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Cyberpunk «кино» (owner 2026-11-13). No flash and no flicker over the athlete (the theme's rule): everything glows, drifts and pulses
   smoothly; transform / opacity only. Behind the timer (the stage, screens/workout/screen.js): the city's neon bokeh, rain in two depths at
   the sides only, the smog and the wet floor's reflections, a holographic sight round the timer (two rings turning against each other),
   now and then a flying car far over the city. A set saved: electric sparks at the hands (over the timer) and the sight switches on. The
   last 10 s: the sight brighter and faster, the rain heavier; the last 3: it pulses once a second; zero: a shockwave from the timer. */
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-stage { display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; } /* no z-index: the layers blend with the photo */
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-stage > :where(i) { /* :where — a layer's own blend or display wins over this default */ display: none; position: absolute; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; mix-blend-mode: screen; }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-stage > .scr-workout-cy { display: block; }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-cy--bokeh { inset: -4%; background: var(--cyber-bokeh) center / cover no-repeat; }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-cy--rain-far,
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-cy--rain-near { /* the sides only: never over the athlete */
  left: 0; right: 0; top: -512px; bottom: 0;
  -webkit-mask-image: linear-gradient(90deg, black 0, black 16%, transparent 32%, transparent 68%, black 84%, black 100%); mask-image: linear-gradient(90deg, black 0, black 16%, transparent 32%, transparent 68%, black 84%, black 100%);
}
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-cy--rain-far { background: var(--cyber-rain-far) 0 0 / 256px 256px repeat; }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-cy--rain-near { background: var(--cyber-rain-near) 0 0 / 512px 512px repeat; }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-cy--smog { /* two tiles wide, moved by one: no seam */
  left: 0; bottom: 0; height: calc(var(--ring-size, 194px) * 0.9); width: calc(var(--ring-size, 194px) * 0.9 * 8); background: var(--cyber-smog) 0 100% / 50% 100% repeat-x;
}
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-cy--reflect {
  left: 0; bottom: 0; height: calc(var(--ring-size, 194px) * 0.55); width: calc(var(--ring-size, 194px) * 0.55 * 6); background: var(--cyber-reflect) 0 0 / 50% 100% repeat-x;
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%); mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
}
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-cy--trail { left: 0; top: 9%; width: 70%; height: calc(var(--ring-size, 194px) * 0.18); background: var(--cyber-trail) center / 100% 100% no-repeat; }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-cy--hud,
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-cy--hud-inner,
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-cy--shock { /* centred on the timer (lifted 4 px with it) */
  left: 50%; top: calc(var(--hero-h, 250px) - 4px + var(--ring-size, 194px) / 2); width: calc(var(--ring-size, 194px) * 1.9); height: calc(var(--ring-size, 194px) * 1.9);
  margin: calc(var(--ring-size, 194px) * -0.95) 0 0 calc(var(--ring-size, 194px) * -0.95); background: var(--cyber-hud) center / contain no-repeat;
}
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-cy--hud-inner { transform: scale(0.82); }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-cy--shock { background-image: var(--cyber-shock); transition: none; }
:root[data-theme="cyberpunk"] .scr-workout[data-timer="running"] .scr-workout-cy--bokeh { opacity: 0.5; animation: cy-bokeh-drift 26s ease-in-out infinite alternate; }
:root[data-theme="cyberpunk"] .scr-workout[data-timer="running"] .scr-workout-cy--rain-far { opacity: 0.55; animation: cy-rain-far 1.1s linear infinite; }
:root[data-theme="cyberpunk"] .scr-workout[data-timer="running"] .scr-workout-cy--rain-near { opacity: 0.32; animation: cy-rain-near 0.75s linear infinite; }
:root[data-theme="cyberpunk"] .scr-workout[data-timer="running"] .scr-workout-cy--smog { opacity: 0.5; animation: cy-drift 46s linear infinite; }
:root[data-theme="cyberpunk"] .scr-workout[data-timer="running"] .scr-workout-cy--reflect { opacity: 0.4; animation: cy-drift-back 30s linear infinite; }
:root[data-theme="cyberpunk"] .scr-workout[data-timer="running"] .scr-workout-cy--trail { animation: cy-trail 9s linear 2s infinite; transition: none; }
:root[data-theme="cyberpunk"] .scr-workout[data-timer="running"] .scr-workout-cy--hud { opacity: 0.38; animation: cy-turn 60s linear infinite; }
:root[data-theme="cyberpunk"] .scr-workout[data-timer="running"] .scr-workout-cy--hud-inner { opacity: 0.22; animation: cy-turn-back 42s linear infinite; }
:root[data-theme="cyberpunk"] .scr-workout[data-chalk] .scr-workout-cy--hud { animation: cy-hud-on 0.9s ease-out 1, cy-turn 60s linear 0.9s infinite; } /* the sight switches on */
:root[data-theme="cyberpunk"] .scr-workout[data-timer="running"][data-rest-end="soon"] .scr-workout-cy--hud { opacity: 0.6; animation: cy-turn 20s linear infinite; }
:root[data-theme="cyberpunk"] .scr-workout[data-timer="running"][data-rest-end="soon"] .scr-workout-cy--rain-near { opacity: 0.5; }
:root[data-theme="cyberpunk"] .scr-workout[data-timer="running"][data-rest-end="final"] .scr-workout-cy--hud { opacity: 0.6; animation: cy-turn 20s linear infinite, cy-pulse 1s ease-in-out infinite; }
:root[data-theme="cyberpunk"] .scr-workout[data-timer="running"][data-rest-end="final"] .scr-workout-cy--rain-near { opacity: 0.55; }
:root[data-theme="cyberpunk"] .scr-workout[data-finale] .scr-workout-cy--shock { animation: cy-shock 1.3s cubic-bezier(0.1, 0.7, 0.3, 1) 1 both; }
@keyframes cy-bokeh-drift { from { transform: translate3d(-1.5%, 0, 0) scale(1); } to { transform: translate3d(1.5%, -1%, 0) scale(1.05); } }
@keyframes cy-rain-far { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 256px, 0); } }
@keyframes cy-rain-near { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 512px, 0); } }
@keyframes cy-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes cy-drift-back { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes cy-trail { 0% { opacity: 0; transform: translate3d(-110%, 0, 0); } 3% { opacity: 0.85; } 22% { opacity: 0.85; } 26% { opacity: 0; transform: translate3d(160%, -12%, 0); } 100% { opacity: 0; transform: translate3d(160%, -12%, 0); } }
@keyframes cy-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cy-turn-back { from { transform: scale(0.82) rotate(0deg); } to { transform: scale(0.82) rotate(-360deg); } }
@keyframes cy-hud-on { 0% { opacity: 0; transform: scale(0.7) rotate(-40deg); } 60% { opacity: 0.75; } 100% { opacity: 0.38; transform: scale(1) rotate(0deg); } }
@keyframes cy-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.85; } }
@keyframes cy-shock { 0% { opacity: 0; transform: scale(0.45); } 10% { opacity: 1; } 100% { opacity: 0; transform: scale(2.3); } }
/* over the timer: electric sparks at both hands (a set saved) — a transparent picture, plain blending; the hands' spots from the photo */
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-timer-section::before,
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-timer-section::after {
  content: ""; position: absolute; z-index: 5; pointer-events: none; opacity: 0;
  top: calc(var(--ring-size, 194px) * -0.32); left: 50%; width: calc(var(--ring-size, 194px) * 0.75); height: calc(var(--ring-size, 194px) * 0.75);
  background: var(--cyber-sparks) center / contain no-repeat;
}
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-timer-section::before { margin-left: calc(var(--ring-size, 194px) * -0.66); }
:root[data-theme="cyberpunk"] .scr-workout .scr-workout-timer-section::after { margin-left: calc(var(--ring-size, 194px) * -0.09); }
:root[data-theme="cyberpunk"] .scr-workout[data-chalk] .scr-workout-timer-section::before { animation: cy-sparks 0.9s ease-out 1; }
:root[data-theme="cyberpunk"] .scr-workout[data-chalk] .scr-workout-timer-section::after { animation: cy-sparks 0.9s ease-out 0.12s 1; }
@keyframes cy-sparks { 0% { opacity: 0; transform: scale(0.4) rotate(0deg); } 12% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2) rotate(25deg); } }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="cyberpunk"] .scr-workout .scr-workout-ring-spark,
  :root[data-theme="cyberpunk"] .scr-workout .scr-workout-stage,
  :root[data-theme="cyberpunk"] .scr-workout .scr-workout-timer-section::before,
  :root[data-theme="cyberpunk"] .scr-workout .scr-workout-timer-section::after { display: none; animation: none; }
}
:root[data-theme="oldschool"] .ui-card,
:root[data-theme="oldschool"] .ui-field,
:root[data-theme="oldschool"] .ui-sheet,
:root[data-theme="oldschool"] .ui-dialog { border: 1px solid var(--oldschool-orange-49-a18); }
:root[data-theme="oldschool"] .ui-card { box-shadow: inset 0 1px 0 var(--oldschool-orange-88-a10), inset 4px 0 0 var(--oldschool-red-35-a76), 0 12px 24px -16px var(--oldschool-ink-0-a90); }
:root[data-theme="oldschool"] .ui-card__title::before { background: linear-gradient(180deg, var(--oldschool-orange-63) 0%, var(--oldschool-red-35) 100%); }
:root[data-theme="oldschool"] .ui-btn { border-radius: 5px; letter-spacing: 0.1em; }
:root[data-theme="oldschool"] .ui-btn--primary { color: var(--color-text); background: linear-gradient(180deg, var(--oldschool-red-42) 0%, var(--oldschool-red-28) 100%); /* cream on red: 5.1:1 and up; the dark label was 1.7–2.8 */ box-shadow: inset 0 1px 0 var(--oldschool-orange-91-a18), 0 7px 16px -8px var(--oldschool-red-42-a72); }
:root[data-theme="oldschool"] .ui-field { box-shadow: inset 0 2px 0 var(--oldschool-ink-0-a52), inset 4px 0 0 var(--oldschool-orange-49-a78); }
:root[data-theme="oldschool"] .ui-nav { border-top: 2px solid var(--oldschool-orange-30); }
:root[data-theme="oldschool"] .ui-nav__tab[aria-current="page"] { color: var(--oldschool-orange-88); }
:root[data-theme="oldschool"] .ui-nav__tab[aria-current="page"]::before { background: var(--oldschool-orange-63); box-shadow: 0 0 10px var(--oldschool-orange-63-a45); }
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring { border: 2px solid var(--oldschool-orange-38); box-shadow: inset 0 0 0 8px var(--oldschool-orange-24-a28), inset 0 1px 0 var(--oldschool-orange-88-a14), 0 0 16px -8px var(--oldschool-orange-49-a64); }
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring-label { color: var(--oldschool-orange-63); letter-spacing: 0.14em; }
:root[data-theme="oldschool"] .ui-badge { border-radius: 5px; border: 1px solid var(--oldschool-orange-49-a24); }
:root[data-theme="oldschool"] .ui-segmented { border: 1px solid var(--oldschool-orange-24); background: var(--oldschool-red-11); }
:root[data-theme="oldschool"] .ui-segmented__item[aria-selected="true"] { background: var(--oldschool-red-28-2); color: var(--oldschool-orange-88); }
:root[data-theme="dark"] .ui-card { border: 1px solid var(--atlas-gold-60-a14); box-shadow: inset 0 1px 0 var(--atlas-white-100-a7), inset 3px 0 0 var(--atlas-gold-60-a68), 0 12px 28px -16px var(--atlas-ink-0-a94); }
:root[data-theme="dark"] .ui-card__title::before { background: var(--color-gold-gradient); }
:root[data-theme="dark"] .ui-btn--primary { border: 1px solid var(--atlas-gold-68-a35); box-shadow: var(--shadow-gold), 0 0 0 1px var(--atlas-gold-60-a8); }
:root[data-theme="dark"] .ui-nav { border-top: 1px solid var(--atlas-gold-60-a32); }
:root[data-theme="dark"] .ui-nav__tab[aria-current="page"] { color: var(--atlas-gold-93); }
:root[data-theme="dark"] .scr-workout .scr-workout-ring { border: 2px solid var(--atlas-gold-34); box-shadow: inset 0 0 0 8px var(--atlas-grey-16-a34), var(--shadow-card), 0 0 18px -8px var(--atlas-gold-60-a52); }
/* Atlas, black and gold (owner 2026-11-10): no painted marble, no frieze, no dial ticks. The important card is a clean dark slab
   with a gold hairline and a soft light from above; the timer is a plain gold ring; the navigation keeps only its gold line. */
:root[data-theme="dark"] .ui-card--accent { border-color: var(--atlas-gold-60-a32); background-image: linear-gradient(180deg, var(--atlas-gold-60-a8) 0%, transparent 46%), var(--color-accent-card); }
/* Old School «Железный блин» (owner 2026-11-11): the athlete holds a cast-iron plate and the plate is the timer. The photo is sized and
   placed from the timer (like Cyberpunk), so the plate's rim lies on the timer's edge on any screen; the iron shows through, the rest
   runs as a copper stripe along the lip, the numbers are struck in the metal, and the hands (cut from the photo) lie over the rim. */
:root[data-theme="oldschool"] .scr-workout { --hero-under: calc(var(--ring-size, 194px) + 24px); }
:root[data-theme="oldschool"] .scr-workout .scr-workout-hero {
  background-image: linear-gradient(to bottom, var(--color-bg) 0, transparent 64px, transparent calc(100% - 96px), var(--color-bg) 100%), var(--hero-workout); /* a longer, softer fade into the page */
  background-size: cover, calc(var(--ring-size, 194px) * var(--os-photo-w)) calc(var(--ring-size, 194px) * var(--os-photo-h));
  background-position: center, calc(50% + var(--ring-size, 194px) * var(--os-photo-x)) calc(var(--hero-h, 250px) + var(--ring-size, 194px) * var(--os-photo-y));
}
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring {
  border: 0; background: var(--os-plate-veil); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring:active { background: var(--os-plate-veil-pressed); }
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring[data-action="ring"] { animation: os-plate-gleam 4.5s ease-in-out infinite; }
@keyframes os-plate-gleam { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 16px var(--oldschool-orange-49-a24); } }
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring-svg { position: relative; z-index: 2; }
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring-track { stroke: var(--os-plate-groove); stroke-width: 7; }
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring-arc { stroke: var(--oldschool-orange-63); stroke-width: 7; filter: drop-shadow(0 0 3px var(--oldschool-orange-63-a45)); }
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring-inner { z-index: 3; }
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring-time { color: var(--oldschool-orange-88); text-shadow: var(--os-struck); }
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring-label { color: var(--oldschool-orange-63); text-shadow: var(--os-struck); }
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring-hint { color: var(--oldschool-orange-88); opacity: 0.78; text-shadow: var(--os-struck); }
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring::before {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  left: calc(var(--ring-size, 194px) * var(--os-hands-x)); top: calc(var(--ring-size, 194px) * var(--os-hands-y));
  width: calc(var(--ring-size, 194px) * var(--os-hands-w)); height: calc(var(--ring-size, 194px) * var(--os-hands-h));
  background: var(--os-hands) center / 100% 100% no-repeat;
}
/* Old School, the rest after a set (owner 2026-11-13, «очень красиво»). No flicker anywhere (a film flicker was tried in 2026-11 and looked like
   a broken screen); transform / opacity only. Behind the timer (the stage, screens/workout/screen.js): the window's rays breathing as if
   clouds pass, dust motes in them at two depths, the warm lamp, a chalk haze, a fine film grain. A set saved: a burst of chalk from both
   hands on the plate (over the timer), the haze stays in the light. The last 10 s: a warm film leak creeps in from the window side, the
   rays brighten; zero: a glint runs over the rim (data-rest-end, data-finale). */
:root[data-theme="oldschool"] .scr-workout .scr-workout-stage { display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; } /* no z-index: the layers blend with the photo */
:root[data-theme="oldschool"] .scr-workout .scr-workout-stage > :where(i) { /* :where — a layer's own blend or display wins over this default */ display: none; position: absolute; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; mix-blend-mode: screen; }
:root[data-theme="oldschool"] .scr-workout .scr-workout-stage > .scr-workout-os { display: block; }
:root[data-theme="oldschool"] .scr-workout .scr-workout-os--rays {
  top: 0; left: 0; right: 0; height: calc(var(--hero-h, 250px) + var(--ring-size, 194px) * 0.9);
  background: var(--os-rays) right top / cover no-repeat; transform: scaleX(var(--os-rays-flip)); transform-origin: 50% 0;
}
:root[data-theme="oldschool"] .scr-workout .scr-workout-os--motes,
:root[data-theme="oldschool"] .scr-workout .scr-workout-os--motes-far { left: 0; right: 0; top: 0; -webkit-mask-image: var(--os-dust-mask); mask-image: var(--os-dust-mask); }
:root[data-theme="oldschool"] .scr-workout .scr-workout-os--motes { height: calc(100% + 512px); background: var(--os-motes) 0 0 / 512px 512px repeat; }
:root[data-theme="oldschool"] .scr-workout .scr-workout-os--motes-far { height: calc(100% + 300px); background: var(--os-motes) 140px 60px / 300px 300px repeat; }
:root[data-theme="oldschool"] .scr-workout .scr-workout-os--lamp { top: 0; left: 50%; width: calc(var(--ring-size, 194px) * 2.2); height: calc(var(--ring-size, 194px) * 1.1); margin-left: calc(var(--ring-size, 194px) * -1.1); background: var(--os-lamp) center top / contain no-repeat; }
:root[data-theme="oldschool"] .scr-workout .scr-workout-os--haze { /* two tiles wide, moved by one: no seam */
  left: 0; top: calc(var(--hero-h, 250px) - var(--ring-size, 194px) * 0.1); height: calc(var(--ring-size, 194px) * 0.9); width: calc(var(--ring-size, 194px) * 0.9 * 8);
  background: var(--os-haze) 0 50% / 50% 100% repeat-x;
}
:root[data-theme="oldschool"] .scr-workout .scr-workout-os--leak { top: 0; bottom: 0; left: 0; right: 0; background: var(--os-leak) right center / cover no-repeat; transform: scaleX(var(--os-rays-flip)); }
:root[data-theme="oldschool"] .scr-workout .scr-workout-os--grain { inset: -256px 0 0 0; background: var(--os-grain) 0 0 / 256px 256px repeat; mix-blend-mode: overlay; }
:root[data-theme="oldschool"] .scr-workout[data-timer="running"] .scr-workout-os--rays { opacity: 0.6; animation: os-rays-breathe 9s ease-in-out infinite; }
:root[data-theme="oldschool"] .scr-workout[data-timer="running"] .scr-workout-os--motes { opacity: 0.85; animation: os-motes-near 40s linear infinite; }
:root[data-theme="oldschool"] .scr-workout[data-timer="running"] .scr-workout-os--motes-far { opacity: 0.55; animation: os-motes-far 70s linear infinite; }
:root[data-theme="oldschool"] .scr-workout[data-timer="running"] .scr-workout-os--lamp { opacity: 0.4; }
:root[data-theme="oldschool"] .scr-workout[data-timer="running"] .scr-workout-os--haze { opacity: 0.45; animation: os-haze-drift 55s linear infinite; }
:root[data-theme="oldschool"] .scr-workout[data-chalk] .scr-workout-os--haze { opacity: 0.8; transition-duration: 0.6s; }
:root[data-theme="oldschool"] .scr-workout[data-timer="running"] .scr-workout-os--grain { opacity: 0.16; animation: os-grain-drift 14s linear infinite; }
:root[data-theme="oldschool"] .scr-workout[data-timer="running"][data-rest-end="soon"] .scr-workout-os--leak { opacity: 0.5; transition-duration: 3s; }
:root[data-theme="oldschool"] .scr-workout[data-timer="running"][data-rest-end="final"] .scr-workout-os--leak { opacity: 0.7; transition-duration: 1.5s; }
:root[data-theme="oldschool"] .scr-workout[data-timer="running"][data-rest-end="soon"] .scr-workout-os--rays,
:root[data-theme="oldschool"] .scr-workout[data-timer="running"][data-rest-end="final"] .scr-workout-os--rays { opacity: 0.85; }
@keyframes os-rays-breathe { 0%, 100% { opacity: 0.5; transform: scaleX(var(--os-rays-flip)) translate3d(0, 0, 0); } 50% { opacity: 0.78; transform: scaleX(var(--os-rays-flip)) translate3d(-1.5%, 0, 0); } }
@keyframes os-motes-near { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -512px, 0); } }
@keyframes os-motes-far { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -300px, 0); } }
@keyframes os-haze-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes os-grain-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 256px, 0); } }
/* over the timer: the chalk from both hands (a set saved) and the glint on the rim (zero) — transparent pictures, plain blending */
:root[data-theme="oldschool"] .scr-workout .scr-workout-timer-section::before {
  content: ""; position: absolute; z-index: 3; pointer-events: none; opacity: 0; /* over the plate and the arc, under the numbers (ring-inner, z 3, later) and the hands (z 4) */
  top: calc(var(--ring-size, 194px) * 0.05); left: 50%; width: min(calc(var(--ring-size, 194px) * 2.2), 100vw); height: calc(var(--ring-size, 194px) * 0.9); margin-left: calc(min(calc(var(--ring-size, 194px) * 2.2), 100vw) / -2); /* never wider than the screen */
  background: var(--os-chalk) left center / auto 100% no-repeat, var(--os-chalk) right center / auto 100% no-repeat;
}
:root[data-theme="oldschool"] .scr-workout[data-chalk] .scr-workout-timer-section::before { animation: os-chalk-clap 1.9s cubic-bezier(0.15, 0.75, 0.3, 1) 1 both; }
@keyframes os-chalk-clap {
  0% { opacity: 0; transform: translate3d(0, 4%, 0) scale(0.45); }
  9% { opacity: 1; transform: translate3d(0, 0, 0) scale(0.8); }
  100% { opacity: 0; transform: translate3d(0, -10%, 0) scale(1.18); }
}
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring::after {
  content: ""; position: absolute; z-index: 5; pointer-events: none; opacity: 0;
  left: calc(var(--ring-size, 194px) * 0.85 - var(--ring-size, 194px) * 0.2); top: calc(var(--ring-size, 194px) * 0.15 - var(--ring-size, 194px) * 0.2);
  width: calc(var(--ring-size, 194px) * 0.4); height: calc(var(--ring-size, 194px) * 0.4); background: var(--os-glint) center / contain no-repeat;
}
:root[data-theme="oldschool"] .scr-workout[data-finale] .scr-workout-ring::after { animation: os-glint 1.4s ease-out 1 both; }
@keyframes os-glint { /* the star rides the rim from the top-right down to the right, turning */
  0% { opacity: 0; transform: translate3d(-40%, -20%, 0) scale(0.3) rotate(0deg); }
  25% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(25deg); }
  100% { opacity: 0; transform: translate3d(25%, 90%, 0) scale(0.5) rotate(70deg); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="oldschool"] .scr-workout .scr-workout-stage,
  :root[data-theme="oldschool"] .scr-workout .scr-workout-timer-section::before,
  :root[data-theme="oldschool"] .scr-workout .scr-workout-ring::after { display: none; animation: none; }
}
/* Old School profile (owner 2026-11-11): the head is at the very top of these portraits, so the photo starts --os-profile-top lower and the
   page colour melts into it from above: the face stays clear of «ПРОФИЛЬ» and the theme stones on any width. */
:root[data-theme="oldschool"] .scr-profile .scr-profile-hero {
  background-image: linear-gradient(to bottom, var(--color-bg) 0, transparent calc(var(--os-profile-top) + 28px)), linear-gradient(to bottom, transparent var(--hero-fade-profile-from), var(--hero-fade-profile) 78%, var(--color-bg) 100%), var(--hero-profile);
  background-size: cover, cover, var(--hero-own-size, cover);
  background-position: center, center, var(--hero-own-pos, center var(--os-profile-top)); /* the own picture goes where its owner put it */
}
/* Atlas workout (owner 2026-11-11): the athlete stands above the timer and the dial covers his shorts. The photo is sized and placed
   from the timer (like Cyberpunk), so this holds on any screen; fitHeadroom keeps the head under the top row (--cyber-head). The
   torso is in the light above the dial; from the timer's centre down the legs fade into black by its lower edge. */
:root[data-theme="dark"] .scr-workout .scr-workout-hero {
  background-image:
    linear-gradient(to bottom, var(--color-bg) 0%, transparent 12%, transparent calc(var(--hero-h, 250px) - 4px + var(--ring-size, 194px) * 0.52), var(--color-bg) calc(var(--hero-h, 250px) - 4px + var(--ring-size, 194px) * 1.05)),
    var(--hero-workout);
  background-size: cover, calc(var(--ring-size, 194px) * var(--atlas-photo-w)) calc(var(--ring-size, 194px) * var(--atlas-photo-h));
  background-position: center, calc(50% + var(--ring-size, 194px) * var(--atlas-photo-x)) calc(var(--hero-h, 250px) - 4px + var(--ring-size, 194px) * var(--atlas-photo-y));
}
/* Atlas, the stage while resting (owner 2026-11-12; no spotlight beams since 2026-11-13). The rest begins: stage smoke rises from the floor and drifts while the rest runs; a set saved: the
   hall takes a few pictures, and now and then a camera flashes all through the rest (screens/workout/screen.js); transform/opacity only. */
:root[data-theme="dark"] .scr-workout .scr-workout-stage { display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; } /* no z-index: no stacking context of its own, so the layers blend as «screen» with the photo itself */
/* Atlas «кино» (owner 2026-11-13). Layers from the back: the light behind the athlete, far haze, dust in that light, the hall's silhouettes,
   near smoke, the cameras. While a rest runs they fade in; the two fogs drift against each other at different speeds (depth), the dust
   rises; the backlight stays steady (no pulsing, 2026-11-13); in the last 3 s the hall flashes more, at zero one bright flash (data-rest-end, data-finale: screens/workout/screen.js). transform / opacity only. */
:root[data-theme="dark"] .scr-workout .scr-workout-stage > :where(i) { /* :where — a layer's own blend or display wins over this default */ position: absolute; display: block; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; mix-blend-mode: screen; }
:root[data-theme="dark"] .scr-workout .scr-workout-backlight {
  left: 50%; top: calc(var(--hero-h, 250px) * 0.02); width: calc(var(--ring-size, 194px) * 2.3); height: calc(var(--ring-size, 194px) * 2.3); margin-left: calc(var(--ring-size, 194px) * -1.15);
  background: var(--atlas-backlight) center / contain no-repeat; transition-duration: 1.1s;
}
:root[data-theme="dark"] .scr-workout .scr-workout-fog { left: 0; background-repeat: repeat-x; background-position: 0 100%; } /* both fade at the bottom: no hard edge */
:root[data-theme="dark"] .scr-workout .scr-workout-fog--far { -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%); mask-image: linear-gradient(to bottom, black 55%, transparent 100%); }
:root[data-theme="dark"] .scr-workout .scr-workout-fog--near { -webkit-mask-image: linear-gradient(to bottom, black 62%, transparent 100%); mask-image: linear-gradient(to bottom, black 62%, transparent 100%); }
:root[data-theme="dark"] .scr-workout .scr-workout-fog--far { /* two tiles wide (4 : 1 each), moved by one tile: no seam */
  bottom: calc(var(--ring-size, 194px) * 0.35); height: calc(var(--ring-size, 194px) * 0.95); width: calc(var(--ring-size, 194px) * 0.95 * 8);
  background-image: var(--atlas-fog-far); background-size: 50% 100%;
}
:root[data-theme="dark"] .scr-workout .scr-workout-fog--near {
  bottom: 0; height: calc(var(--ring-size, 194px) * 1.1); width: calc(var(--ring-size, 194px) * 1.1 * 8);
  background-image: var(--atlas-fog-near); background-size: 50% 100%;
}
:root[data-theme="dark"] .scr-workout .scr-workout-dust { /* a 512 px tile, two tiles tall, rising by one */
  left: 0; right: 0; top: 0; height: calc(100% + 512px); background: var(--atlas-dust) 0 0 / 512px 512px repeat;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 22%, black 0, transparent 100%); mask-image: radial-gradient(ellipse 70% 55% at 50% 22%, black 0, transparent 100%);
}
:root[data-theme="dark"] .scr-workout .scr-workout-stage > .scr-workout-crowd { /* the hall, at the foot of the stage: dark heads and raised phones (> : plain blending wins over the stage's «screen», which made the dark heads vanish) */
  /* the front row of the hall (owner 2026-11-14: «они должны подниматься впереди атлета»): big dark heads at the very bottom of the frame,
     over the athlete's legs — near and large reads as in front; small heads at his waist read as far behind. No glow behind them. */
  left: -6%; right: -6%; bottom: calc(var(--ring-size, 194px) * -0.08); height: calc(var(--ring-size, 194px) * 1.05); mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent 100%); mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
  background: var(--atlas-crowd) center bottom / auto 100% repeat-x; transform: translate3d(0, 22%, 0); transition: opacity 1.6s ease, transform 1.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}
:root[data-theme="dark"] .scr-workout .scr-workout-crowd-glow { display: none; } /* the front row needs no light behind it */
:root[data-theme="dark"] .scr-workout[data-timer="running"] .scr-workout-backlight { opacity: 0.5; } /* a steady warm light: no breathing, no flares (owner 2026-11-13: «убери жёлтое моргание») */
:root[data-theme="dark"] .scr-workout[data-timer="running"] .scr-workout-fog--far { opacity: 0.7; animation: atlas-drift-left 70s linear infinite; }
:root[data-theme="dark"] .scr-workout[data-timer="running"] .scr-workout-fog--near { opacity: 0.85; animation: atlas-drift-right 40s linear infinite; }
:root[data-theme="dark"] .scr-workout[data-timer="running"] .scr-workout-dust { opacity: 0.75; animation: atlas-dust-rise 34s linear infinite; }
:root[data-theme="dark"] .scr-workout[data-timer="running"] .scr-workout-crowd { opacity: 1; transform: none; }
@keyframes atlas-drift-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes atlas-drift-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes atlas-dust-rise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -512px, 0); } }
:root[data-theme="dark"] .scr-workout .scr-workout-cam { /* one camera: a hot core and the anamorphic streak, placed by --fx / --fy, sized by --fs */
  /* owner 2026-11-13: «практически не вижу вспышек» — bigger, a bright halo round the core and a wider streak */
  left: var(--fx, 12%); top: var(--fy, 70%); width: calc(var(--ring-size, 194px) * 2.2); height: calc(var(--ring-size, 194px) * 2.2); margin: calc(var(--ring-size, 194px) * -1.1) 0 0 calc(var(--ring-size, 194px) * -1.1);
  /* the hot white core on top: under the pictures (black, opaque) it was hidden */
  background: radial-gradient(circle 64px at 50% 50%, var(--atlas-flash-core) 0, var(--atlas-flash-core) 14%, var(--atlas-flash-halo) 42%, transparent 100%),
    var(--atlas-flare) center / 100% 22% no-repeat, var(--atlas-flash) center / 70% 70% no-repeat;
  transform: scale(var(--fs, 1)); transition: none;
}
:root[data-theme="dark"] .scr-workout .scr-workout-cam[data-on] { animation: atlas-camera-flash 520ms ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="dark"] .scr-workout .scr-workout-stage { display: none; }
}
/* Atlas profile (owner 2026-11-13): still — no fog, no camera flashes (tokens.css --profile-air none). */
@keyframes atlas-camera-flash { 0% { opacity: 0; } 5% { opacity: 1; } 30% { opacity: 0.7; } 100% { opacity: 0; } }
:root[data-theme="dark"] .scr-workout .scr-workout-ring-label { color: var(--atlas-gold-60); letter-spacing: 0.14em; }
:root[data-theme="atelier"] .ui-card { border: 1px solid var(--antique-orange-41-a26); box-shadow: inset 0 1px 0 var(--antique-gold-98-a90), inset 0 3px 0 var(--antique-orange-41-a22), 0 12px 22px -16px var(--antique-orange-23-a48); }
:root[data-theme="atelier"] .ui-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--antique-orange-41-a13); border-radius: 6px; pointer-events: none; }
:root[data-theme="atelier"] .ui-card__title::before { width: 5px; height: 34px; border-radius: 1px; background: linear-gradient(180deg, var(--antique-orange-64) 0%, var(--antique-orange-41) 100%); }
:root[data-theme="atelier"] .ui-header::after { width: 82px; height: 82px; background: linear-gradient(225deg, var(--antique-orange-53) 0%, var(--antique-orange-70) 49%, transparent 50%); opacity: 0.75; }
:root[data-theme="atelier"] .ui-btn { border-radius: 7px; font-family: var(--font-family); letter-spacing: 0.07em; }
:root[data-theme="atelier"] .ui-btn--primary { background: linear-gradient(180deg, var(--antique-orange-64) 0%, var(--antique-orange-49) 54%, var(--antique-orange-45) 100%); border: 1px solid var(--antique-orange-40); box-shadow: inset 0 1px 0 var(--antique-gold-98-a58), 0 8px 16px -8px var(--antique-orange-29-a60); }
:root[data-theme="atelier"] .ui-field { border: 1px solid var(--antique-orange-65); box-shadow: inset 0 2px 2px var(--antique-orange-23-a16), inset 0 3px 0 var(--antique-orange-41-a12); }
:root[data-theme="atelier"] .ui-nav { border-top: 2px solid var(--antique-orange-73); }
:root[data-theme="atelier"] .ui-nav__tab[aria-current="page"] { color: var(--antique-orange-25); }
:root[data-theme="atelier"] .ui-nav__tab[aria-current="page"]::before { background: var(--antique-orange-41); box-shadow: 0 0 8px var(--antique-orange-41-a36); }
:root[data-theme="atelier"] .ui-segmented { border: 1px solid var(--antique-orange-67); background: var(--antique-orange-78); }
:root[data-theme="atelier"] .ui-segmented__item[aria-selected="true"] { background: var(--antique-orange-94); color: var(--antique-orange-25); box-shadow: inset 0 1px 0 var(--antique-gold-98-a90), 0 2px 5px var(--antique-orange-23-a18); }
:root[data-theme="atelier"] .scr-workout .scr-workout-ring { border: 2px solid var(--antique-orange-49); box-shadow: inset 0 0 0 8px var(--antique-orange-78-a34), inset 0 1px 0 var(--antique-gold-98-a82), 0 0 16px -8px var(--antique-orange-41-a45); }
:root[data-theme="atelier"] .scr-workout .scr-workout-ring-label { color: var(--antique-orange-25); letter-spacing: 0.12em; }
:root[data-theme="atelier"] .scr-workout .scr-workout-ring-time { font-family: var(--font-dial); } /* Georgia's own figures on the dial only (owner 2026-11-13) */
:root[data-theme="atelier"] .ui-badge { border: 1px solid var(--antique-orange-67); border-radius: 6px; background: var(--antique-orange-84); color: var(--color-text-on-gold); } /* a light badge here: dark text */
:root[data-theme="oldschool"] .ui-btn--primary,
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring[data-action="ring"] { animation: oldschool-shimmer 4.5s ease-in-out infinite; }
:root[data-theme="oldschool"] .scr-workout .scr-workout-ring-arc { stroke: var(--color-gold-soft); }

:root[data-theme="ivory"] .ui-card,
:root[data-theme="ivory"] .ui-field,
:root[data-theme="ivory"] .ui-sheet,
:root[data-theme="ivory"] .ui-dialog { border: 1px solid rgba(182, 37, 60, 0.22); }
:root[data-theme="ivory"] .ui-card { position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 220, 210, 0.1), inset 4px 0 0 rgba(182, 37, 60, 0.78), 0 14px 24px -16px rgba(0, 0, 0, 0.92); }
:root[data-theme="ivory"] .ui-card::after { content: ""; position: absolute; top: 0; right: 0; width: 56px; height: 1px; background: #E07A70; transform: rotate(-45deg) translate(15px, -12px); transform-origin: center; opacity: 0.8; pointer-events: none; }
:root[data-theme="ivory"] .ui-header::after { width: 88px; height: 88px; background: linear-gradient(225deg, #B6253C 0%, #5B0D18 48%, transparent 49%); opacity: 0.9; }
:root[data-theme="ivory"] .ui-btn { border-radius: 2px; letter-spacing: 0.14em; }
:root[data-theme="ivory"] .ui-btn--primary { position: relative; overflow: hidden; background: linear-gradient(105deg, #8B1E30 0%, #B6253C 54%, #5A0F1D 100%); box-shadow: inset 0 1px 0 rgba(255, 240, 230, 0.18), 0 0 0 1px rgba(224, 122, 112, 0.28), 0 12px 22px -10px rgba(182, 37, 60, 0.75); }
:root[data-theme="ivory"] .ui-btn--primary::after { content: ""; position: absolute; top: 0; right: -18px; width: 44px; height: 100%; background: rgba(255, 236, 228, 0.12); transform: skewX(-24deg); pointer-events: none; }
:root[data-theme="ivory"] .ui-field { background: linear-gradient(180deg, #12090C 0%, #211116 100%); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.58), inset 4px 0 0 rgba(91, 13, 24, 0.9); }
:root[data-theme="ivory"] .ui-nav { border-top: 2px solid #5B0D18; }
:root[data-theme="ivory"] .ui-nav__tab[aria-current="page"] { color: #F4E7DE; text-shadow: 0 0 10px rgba(224, 122, 112, 0.35); }
:root[data-theme="ivory"] .ui-nav__tab[aria-current="page"]::before { background: #E07A70; box-shadow: 0 0 12px rgba(224, 122, 112, 0.72); }
:root[data-theme="ivory"] .ui-badge { border-radius: 2px; border: 1px solid rgba(224, 122, 112, 0.26); }
:root[data-theme="ivory"] .ui-segmented { border-radius: 3px; border: 1px solid #48222A; background: #12090C; }
:root[data-theme="ivory"] .ui-segmented__item[aria-selected="true"] { background: #5B0D18; color: #F4E7DE; box-shadow: inset 0 1px 0 rgba(255, 220, 210, 0.14), 0 0 10px -4px rgba(182, 37, 60, 0.7); }
:root[data-theme="ivory"] .scr-workout .scr-workout-ring { border: 2px solid #8B1E30; box-shadow: inset 0 0 0 8px rgba(91, 13, 24, 0.24), inset 0 1px 0 rgba(255, 220, 210, 0.14), 0 0 24px -8px rgba(182, 37, 60, 0.9); }
:root[data-theme="ivory"] .scr-workout .scr-workout-ring-label { color: #E07A70; letter-spacing: 0.16em; }
:root[data-theme="ivory"] .scr-workout .scr-workout-ring-time { text-shadow: 0 0 16px rgba(224, 122, 112, 0.42); }
:root[data-theme="ivory"] .scr-profile .scr-profile-hero::before,
:root[data-theme="ivory"] .scr-profile .scr-profile-hero::after { display: block; content: ""; position: absolute; z-index: 0; pointer-events: none; mix-blend-mode: screen; }
:root[data-theme="ivory"] .scr-profile .scr-profile-hero::before { top: 0; left: 51%; width: 34%; height: 58%; background: radial-gradient(ellipse 38% 62% at 50% 86%, rgba(255, 247, 239, 0.62) 0%, rgba(244, 231, 222, 0.42) 24%, rgba(224, 122, 112, 0.24) 48%, rgba(182, 37, 60, 0.08) 64%, transparent 82%); filter: blur(5px); animation: yujiro-steam-a 6.8s ease-in-out infinite; }
:root[data-theme="ivory"] .scr-profile .scr-profile-hero::after { top: -2%; left: 62%; width: 26%; height: 55%; background: radial-gradient(ellipse 34% 65% at 45% 92%, rgba(255, 252, 246, 0.46) 0%, rgba(244, 231, 222, 0.28) 30%, rgba(224, 122, 112, 0.18) 54%, transparent 80%); filter: blur(7px); animation: yujiro-steam-b 8.4s ease-in-out 0.8s infinite; }
:root[data-theme="ivory"] .scr-profile .scr-profile-hero::before,
:root[data-theme="ivory"] .scr-profile .scr-profile-hero::after { display: none; animation: none; }
:root[data-theme="ivory"] .scr-workout .scr-workout-hero::before,
:root[data-theme="ivory"] .scr-workout .scr-workout-hero::after { content: ""; position: absolute; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
:root[data-theme="ivory"] .scr-workout .scr-workout-hero::before { top: 8%; left: 24%; width: 52%; height: 72%; z-index: 3; background: radial-gradient(ellipse 38% 65% at 50% 92%, rgba(255, 247, 239, 0.84) 0%, rgba(244, 231, 222, 0.58) 25%, rgba(224, 122, 112, 0.34) 48%, rgba(182, 37, 60, 0.12) 66%, transparent 84%); filter: blur(3px); animation: yujiro-body-steam-strong 6.2s ease-in-out infinite; }
:root[data-theme="ivory"] .scr-workout .scr-workout-hero::after { top: 18%; left: 48%; width: 32%; height: 58%; z-index: 3; background: radial-gradient(ellipse 32% 64% at 46% 92%, rgba(255, 252, 246, 0.72) 0%, rgba(244, 231, 222, 0.42) 30%, rgba(224, 122, 112, 0.22) 52%, transparent 82%); filter: blur(5px); animation: yujiro-body-steam-b 7.5s ease-in-out 0.6s infinite; }
:root[data-theme="ivory"] .scr-workout .scr-workout-timer-section::before { content: ""; position: absolute; z-index: 4; top: -190px; left: 27%; width: 46%; height: 190px; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(ellipse 34% 60% at 45% 96%, rgba(255, 250, 242, 0.9) 0%, rgba(244, 231, 222, 0.64) 25%, rgba(224, 122, 112, 0.38) 48%, rgba(182, 37, 60, 0.12) 68%, transparent 86%); filter: blur(4px); animation: yujiro-body-steam-strong 5.8s ease-in-out 0.2s infinite; }
:root[data-theme="ivory"] .scr-workout .scr-workout-timer-section::after { content: ""; position: absolute; z-index: 4; top: -170px; left: 48%; width: 26%; height: 170px; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(ellipse 30% 62% at 44% 96%, rgba(255, 255, 248, 0.7) 0%, rgba(244, 231, 222, 0.42) 32%, rgba(224, 122, 112, 0.2) 56%, transparent 84%); filter: blur(6px); animation: yujiro-steam-b 7.2s ease-in-out 0.7s infinite; }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="ivory"] .scr-profile .scr-profile-hero::before,
  :root[data-theme="ivory"] .scr-profile .scr-profile-hero::after,
  :root[data-theme="ivory"] .scr-workout .scr-workout-hero::before,
  :root[data-theme="ivory"] .scr-workout .scr-workout-hero::after { animation: none; opacity: 0.14; }
  :root[data-theme="cyberpunk"] .scr-workout .scr-workout-hero::before,
  :root[data-theme="cyberpunk"] .scr-workout .scr-workout-hero::after,
  :root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero::before,
  :root[data-theme="cyberpunk"] .scr-profile .scr-profile-hero::after { animation: none; opacity: 0.12; }
}
:root[data-theme="ivory"] .ui-card__title::before { background: linear-gradient(180deg, #E07A70 0%, #B6253C 100%); }
:root[data-theme="ivory"] .ui-btn--primary,
:root[data-theme="ivory"] .ui-nav__tab[aria-current="page"],
:root[data-theme="ivory"] .scr-workout .scr-workout-ring[data-action="ring"] { animation: darkside-pulse 3.8s ease-in-out infinite; }
:root[data-theme="ivory"] .scr-workout .scr-workout-ring-arc { stroke: var(--color-gold-soft); }
:root[data-theme="ivory"] .ui-nav__tab[aria-current="page"]::before { height: 3px; }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="cyberpunk"] body,
  :root[data-theme="cyberpunk"] .ui-btn--primary,
  :root[data-theme="cyberpunk"] .ui-nav__tab[aria-current="page"],
  :root[data-theme="cyberpunk"] .scr-workout .scr-workout-ring[data-action="ring"],
  :root[data-theme="oldschool"] .ui-btn--primary,
  :root[data-theme="oldschool"] .scr-workout .scr-workout-ring[data-action="ring"],
  :root[data-theme="ivory"] .ui-btn--primary,
  :root[data-theme="ivory"] .ui-nav__tab[aria-current="page"],
  :root[data-theme="ivory"] .scr-workout .scr-workout-ring[data-action="ring"] { animation: none; }
}
.ui-theme-btn--new .ui-theme-btn__stones::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--color-gold-soft); border-radius: 16px; animation: ui-theme-breathe 2.6s ease-in-out infinite; }
.ui-theme-btn__label { letter-spacing: var(--tracking-caps); animation: ui-theme-label 2.6s ease-in-out infinite; }
@keyframes ui-theme-breathe { 0%, 100% { opacity: 0.2; transform: scale(0.94); box-shadow: none; } 50% { opacity: 1; transform: scale(1.06); box-shadow: var(--gold-glow-strong); } }
@keyframes ui-theme-label { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ui-theme-btn--new .ui-theme-btn__stones::after, .ui-theme-btn__label { animation: none; opacity: 1; }
  .ui-theme-arch, .ui-theme-arch__photo, .ui-theme-arch__side, .ui-theme-arch__open, .ui-theme-arch__check { transition: none; }
}

/* «Что просело» */
.ui-decline { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) 0; }
.ui-decline + .ui-decline { border-top: 1px solid var(--color-divider); }
.ui-decline__name { margin: 0; font: var(--font-label); font-weight: 600; overflow-wrap: anywhere; }
.ui-decline__item { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-2); margin: 0; font: var(--font-caption); color: var(--color-text-secondary); }
.ui-decline__type { color: var(--color-text); }
.ui-decline__percent { color: var(--color-danger); }
.ui-decline__hint { margin: var(--space-1) 0 0; }

/* the air of the dark profile: screens/profile/screen.css */
/* the fog drifts one way without end: one tile, half of the layer, in one cycle */
@keyframes ui-air-haze { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
/* in 47 s: four wide flares on the stage lights (200 ms) and the hall's cameras: 14 moments, some taken by two or three people, 350 ms or more apart.
   A camera lights at once and dies in about 100 ms; the closer to the stage, the bigger and brighter. Generated, none of them on the athlete or the text. */
@keyframes ui-air-glint {
  0%, 3.404% { opacity: 0; transform: translate(-10.25%, -4.3%) scale(0.095, 0.166); }
  3.436% { opacity: 0.83; transform: translate(-10.25%, -4.3%) scale(0.095, 0.166); }
  3.628% { opacity: 0; transform: translate(-10.25%, -4.3%) scale(0.095, 0.166); }
  3.638%, 6.809% { opacity: 0; transform: translate(5.2%, -1.8%) scale(0.101, 0.177); }
  6.84% { opacity: 0.85; transform: translate(5.2%, -1.8%) scale(0.101, 0.177); }
  7.032% { opacity: 0; transform: translate(5.2%, -1.8%) scale(0.101, 0.177); }
  7.042%, 7.872% { opacity: 0; transform: translate(3.25%, -5.7%) scale(0.091, 0.16); }
  7.904% { opacity: 0.82; transform: translate(3.25%, -5.7%) scale(0.091, 0.16); }
  8.096% { opacity: 0; transform: translate(3.25%, -5.7%) scale(0.091, 0.16); }
  8.106%, 10.638% { opacity: 0; transform: translate(0%, 0%); }
  10.766% { opacity: 1; transform: translate(0%, 0%); }
  11.064% { opacity: 0; transform: translate(0%, 0%); }
  11.074%, 15.745% { opacity: 0; transform: translate(-0.75%, -11.3%) scale(0.077, 0.134); }
  15.777% { opacity: 0.78; transform: translate(-0.75%, -11.3%) scale(0.077, 0.134); }
  15.968% { opacity: 0; transform: translate(-0.75%, -11.3%) scale(0.077, 0.134); }
  15.978%, 20.426% { opacity: 0; transform: translate(31.1%, 15%) scale(0.145, 0.253); }
  20.457% { opacity: 0.96; transform: translate(31.1%, 15%) scale(0.145, 0.253); }
  20.649% { opacity: 0; transform: translate(31.1%, 15%) scale(0.145, 0.253); }
  20.659%, 21.277% { opacity: 0; transform: translate(27.9%, 12.6%) scale(0.138, 0.242); }
  21.309% { opacity: 0.94; transform: translate(27.9%, 12.6%) scale(0.138, 0.242); }
  21.5% { opacity: 0; transform: translate(27.9%, 12.6%) scale(0.138, 0.242); }
  21.510%, 22.766% { opacity: 0; transform: translate(35.2%, 20.7%) scale(0.159, 0.279); }
  22.798% { opacity: 1; transform: translate(35.2%, 20.7%) scale(0.159, 0.279); }
  22.989% { opacity: 0; transform: translate(35.2%, 20.7%) scale(0.159, 0.279); }
  22.999%, 28.511% { opacity: 0; transform: translate(-1.3%, -8.3%) scale(0.085, 0.148); }
  28.543% { opacity: 0.8; transform: translate(-1.3%, -8.3%) scale(0.085, 0.148); }
  28.734% { opacity: 0; transform: translate(-1.3%, -8.3%) scale(0.085, 0.148); }
  28.744%, 32.34% { opacity: 0; transform: translate(-9.45%, -2.5%) scale(0.099, 0.174); }
  32.372% { opacity: 0.84; transform: translate(-9.45%, -2.5%) scale(0.099, 0.174); }
  32.564% { opacity: 0; transform: translate(-9.45%, -2.5%) scale(0.099, 0.174); }
  32.574%, 36.17% { opacity: 0; transform: translate(25%, 0%); }
  36.298% { opacity: 1; transform: translate(25%, 0%); }
  36.596% { opacity: 0; transform: translate(25%, 0%); }
  36.606%, 41.064% { opacity: 0; transform: translate(35.6%, -11.1%) scale(0.077, 0.135); }
  41.096% { opacity: 0.79; transform: translate(35.6%, -11.1%) scale(0.077, 0.135); }
  41.287% { opacity: 0; transform: translate(35.6%, -11.1%) scale(0.077, 0.135); }
  41.297%, 42.128% { opacity: 0; transform: translate(31.1%, -12%) scale(0.075, 0.131); }
  42.16% { opacity: 0.78; transform: translate(31.1%, -12%) scale(0.075, 0.131); }
  42.351% { opacity: 0; transform: translate(31.1%, -12%) scale(0.075, 0.131); }
  42.361%, 47.872% { opacity: 0; transform: translate(-4.55%, 5.6%) scale(0.12, 0.211); }
  47.904% { opacity: 0.9; transform: translate(-4.55%, 5.6%) scale(0.12, 0.211); }
  48.096% { opacity: 0; transform: translate(-4.55%, 5.6%) scale(0.12, 0.211); }
  48.106%, 53.404% { opacity: 0; transform: translate(35.2%, -5.1%) scale(0.093, 0.162); }
  53.436% { opacity: 0.83; transform: translate(35.2%, -5.1%) scale(0.093, 0.162); }
  53.628% { opacity: 0; transform: translate(35.2%, -5.1%) scale(0.093, 0.162); }
  53.638%, 54.255% { opacity: 0; transform: translate(35.1%, -2.8%) scale(0.099, 0.173); }
  54.287% { opacity: 0.84; transform: translate(35.1%, -2.8%) scale(0.099, 0.173); }
  54.479% { opacity: 0; transform: translate(35.1%, -2.8%) scale(0.099, 0.173); }
  54.489%, 55.745% { opacity: 0; transform: translate(31.95%, -10.3%) scale(0.079, 0.139); }
  55.777% { opacity: 0.79; transform: translate(31.95%, -10.3%) scale(0.079, 0.139); }
  55.968% { opacity: 0; transform: translate(31.95%, -10.3%) scale(0.079, 0.139); }
  55.978%, 61.702% { opacity: 0; transform: translate(-5%, 0%); }
  61.83% { opacity: 1; transform: translate(-5%, 0%); }
  62.128% { opacity: 0; transform: translate(-5%, 0%); }
  62.138%, 66.809% { opacity: 0; transform: translate(28%, -0.6%) scale(0.104, 0.183); }
  66.84% { opacity: 0.86; transform: translate(28%, -0.6%) scale(0.104, 0.183); }
  67.032% { opacity: 0; transform: translate(28%, -0.6%) scale(0.104, 0.183); }
  67.042%, 70.213% { opacity: 0; transform: translate(29.4%, 2.7%) scale(0.113, 0.198); }
  70.245% { opacity: 0.88; transform: translate(29.4%, 2.7%) scale(0.113, 0.198); }
  70.436% { opacity: 0; transform: translate(29.4%, 2.7%) scale(0.113, 0.198); }
  70.446%, 71.489% { opacity: 0; transform: translate(23.95%, 4.9%) scale(0.119, 0.207); }
  71.521% { opacity: 0.89; transform: translate(23.95%, 4.9%) scale(0.119, 0.207); }
  71.713% { opacity: 0; transform: translate(23.95%, 4.9%) scale(0.119, 0.207); }
  71.723%, 77.021% { opacity: 0; transform: translate(20.65%, -8.2%) scale(0.085, 0.148); }
  77.053% { opacity: 0.81; transform: translate(20.65%, -8.2%) scale(0.085, 0.148); }
  77.245% { opacity: 0; transform: translate(20.65%, -8.2%) scale(0.085, 0.148); }
  77.255%, 82.766% { opacity: 0; transform: translate(34.35%, -2.2%) scale(0.1, 0.175); }
  82.798% { opacity: 0.85; transform: translate(34.35%, -2.2%) scale(0.1, 0.175); }
  82.989% { opacity: 0; transform: translate(34.35%, -2.2%) scale(0.1, 0.175); }
  82.999%, 87.234% { opacity: 0; transform: translate(30%, 0%); }
  87.362% { opacity: 1; transform: translate(30%, 0%); }
  87.66% { opacity: 0; transform: translate(30%, 0%); }
  87.670%, 92.766% { opacity: 0; transform: translate(1%, 1.6%) scale(0.11, 0.193); }
  92.798% { opacity: 0.87; transform: translate(1%, 1.6%) scale(0.11, 0.193); }
  92.989% { opacity: 0; transform: translate(1%, 1.6%) scale(0.11, 0.193); }
  92.999%, 93.83% { opacity: 0; transform: translate(-2.8%, -4.3%) scale(0.095, 0.166); }
  93.862% { opacity: 0.83; transform: translate(-2.8%, -4.3%) scale(0.095, 0.166); }
  94.053% { opacity: 0; transform: translate(-2.8%, -4.3%) scale(0.095, 0.166); }
  94.063%, 95.532% { opacity: 0; transform: translate(-1.9%, 2.6%) scale(0.113, 0.197); }
  95.564% { opacity: 0.88; transform: translate(-1.9%, 2.6%) scale(0.113, 0.197); }
  95.755%, 100% { opacity: 0; transform: translate(-1.9%, 2.6%) scale(0.113, 0.197); }
}

/* swipe a row left: shared/ui/swipe.js. The row's own children move, so no screen's markup changes */
.ui-swipe-row { position: relative; overflow: hidden; }
.ui-swipe-row > *:not(.ui-swipe-action) { transform: translate3d(var(--swipe-x, 0), 0, 0); }
.ui-swipe-row--settle > * { transition: transform 200ms var(--ease); }
.ui-swipe-action { position: absolute; top: 0; right: 0; bottom: 0; width: 88px; padding: 0; border: 0; border-radius: 0; background: var(--color-danger-fill); color: var(--color-text-on-danger); font: var(--font-label); font-weight: 700; cursor: pointer; transform: translate3d(calc(88px + var(--swipe-x, 0px)), 0, 0); }
@media (prefers-reduced-motion: reduce) { .ui-swipe-row--settle > * { transition: none; } }
@media (hover: none) and (pointer: coarse) {
  :root [data-swipe-delete][data-swipe-delete] { position: absolute; width: 1px; min-width: 0; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
}

/* Final Yujiro steam composition: no profile steam, two narrow shoulder wisps on workout. */
@keyframes yujiro-side-steam-final { 0%, 100% { opacity: 0.18; transform: translate3d(0, 10px, 0) rotate(-5deg) scaleY(0.9); } 45% { opacity: 0.64; transform: translate3d(10px, -8px, 0) rotate(5deg) scaleY(1.08); } 78% { opacity: 0.32; transform: translate3d(-6px, -30px, 0) rotate(-3deg) scaleY(1.18); } }
:root[data-theme="ivory"] .scr-profile .scr-profile-hero::before,
:root[data-theme="ivory"] .scr-profile .scr-profile-hero::after { display: none; animation: none; }
:root[data-theme="ivory"] .scr-workout .scr-workout-hero::before,
:root[data-theme="ivory"] .scr-workout .scr-workout-hero::after { display: none; animation: none; }
:root[data-theme="ivory"] .scr-workout .scr-workout-timer-section::before { content: ""; position: absolute; z-index: 4; top: -138px; left: 10%; width: 21%; height: 146px; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(ellipse 38% 68% at 50% 100%, rgba(255, 250, 242, 0.72) 0%, rgba(244, 231, 222, 0.38) 36%, rgba(224, 122, 112, 0.13) 58%, transparent 82%); filter: blur(3px); animation: yujiro-side-steam-final 5.6s ease-in-out infinite; }
:root[data-theme="ivory"] .scr-workout .scr-workout-timer-section::after { content: ""; position: absolute; z-index: 4; top: -142px; right: 10%; width: 21%; height: 150px; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(ellipse 38% 68% at 50% 100%, rgba(255, 250, 242, 0.68) 0%, rgba(244, 231, 222, 0.34) 36%, rgba(224, 122, 112, 0.13) 58%, transparent 82%); filter: blur(3px); animation: yujiro-side-steam-final 6.4s ease-in-out 0.9s infinite reverse; }

/* Physical steam pass. Each wisp only rises, expands and fades. There is no reverse motion. */
@keyframes yujiro-steam-rise-left { 0% { opacity: 0; transform: translate3d(-2px, 12px, 0) scale(0.58, 0.72); } 16% { opacity: 0.5; } 62% { opacity: 0.34; } 100% { opacity: 0; transform: translate3d(18px, -104px, 0) scale(1.35, 1.68); } }
@keyframes yujiro-steam-rise-right { 0% { opacity: 0; transform: translate3d(2px, 14px, 0) scale(0.56, 0.7); } 18% { opacity: 0.46; } 58% { opacity: 0.3; } 100% { opacity: 0; transform: translate3d(-15px, -112px, 0) scale(1.3, 1.72); } }
:root[data-theme="ivory"] .scr-workout .scr-workout-timer-section::before { top: -118px; left: 11%; width: 19%; height: 126px; background: radial-gradient(ellipse 42% 70% at 50% 98%, rgba(255, 250, 242, 0.78) 0%, rgba(244, 231, 222, 0.4) 30%, rgba(224, 122, 112, 0.12) 58%, transparent 82%); filter: blur(3px); animation: yujiro-steam-rise-left 5.4s cubic-bezier(.25, .72, .42, 1) infinite; will-change: transform, opacity; }
:root[data-theme="ivory"] .scr-workout .scr-workout-timer-section::after { top: -122px; right: 11%; width: 19%; height: 130px; background: radial-gradient(ellipse 42% 70% at 50% 98%, rgba(255, 250, 242, 0.72) 0%, rgba(244, 231, 222, 0.36) 30%, rgba(224, 122, 112, 0.11) 58%, transparent 82%); filter: blur(3px); animation: yujiro-steam-rise-right 6.1s cubic-bezier(.25, .72, .42, 1) 1.8s infinite; will-change: transform, opacity; }
:root[data-theme="ivory"] .scr-workout[data-steam="off"] .scr-workout-timer-section::before,
:root[data-theme="ivory"] .scr-workout[data-steam="off"] .scr-workout-timer-section::after,
:root[data-theme="ivory"] .scr-workout[data-steam="armed"] .scr-workout-timer-section::before,
:root[data-theme="ivory"] .scr-workout[data-steam="armed"] .scr-workout-timer-section::after { display: none; animation: none; }

/* Anime pass: replace the soft gradients with an inked, cel-shaded steam sprite. */
@keyframes yujiro-anime-steam-left { 0% { opacity: 0; transform: translate3d(-4px, 18px, 0) scale(0.72); } 18% { opacity: 0.86; } 100% { opacity: 0; transform: translate3d(15px, -132px, 0) scale(1.08); } }
@keyframes yujiro-anime-steam-right { 0% { opacity: 0; transform: translate3d(4px, 20px, 0) scale(0.7); } 18% { opacity: 0.8; } 100% { opacity: 0; transform: translate3d(-14px, -138px, 0) scale(1.06); } }
:root[data-theme="ivory"] .scr-workout .scr-workout-timer-section::before { top: -158px; left: 8%; width: 28%; height: 162px; background: url("/app/assets/darkside_anime_steam.webp") center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(224, 122, 112, 0.28)); animation: yujiro-anime-steam-left 5.8s cubic-bezier(.2, .75, .35, 1) infinite; }
:root[data-theme="ivory"] .scr-workout .scr-workout-timer-section::after { top: -162px; right: 8%; width: 28%; height: 166px; background: url("/app/assets/darkside_anime_steam.webp") center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(224, 122, 112, 0.24)); animation: yujiro-anime-steam-right 6.4s cubic-bezier(.2, .75, .35, 1) 1.2s infinite; }

/* Barcode sheet (shared/ui/barcode.js): the camera, where the browser reads codes, and the digits field always. */
.ui-scan { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-2); }
.ui-scan__camera { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--color-ring-core); }
.ui-scan__camera[hidden] { display: none; }
.ui-scan__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-scan__frame { position: absolute; left: 5%; right: 5%; top: 22%; bottom: 22%; border: 2px solid var(--color-gold-soft); border-radius: var(--radius-row); pointer-events: none; }
.ui-scan__line { position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: var(--color-crimson); opacity: 0; pointer-events: none; }
.ui-scan__camera[data-scan="on"] .ui-scan__line { opacity: 0.85; animation: ui-scan-line 1.6s ease-in-out infinite alternate; }
@keyframes ui-scan-line { from { top: 28%; } to { top: 72%; } }
@media (prefers-reduced-motion: reduce) { .ui-scan__camera[data-scan="on"] .ui-scan__line { animation: none; } }
.ui-scan__status { margin: 0; }
.ui-scan__row { display: flex; gap: var(--space-2); }
.ui-scan__input { flex: 1; min-width: 0; margin: 0; letter-spacing: 0.06em; }

/* «Вход на другом устройстве» (shared/ui/device-link.js): the QR on its own white square, the key large enough to type */
.ui-link { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-2); }
.ui-link p { margin: 0; }
.ui-link__qr { align-self: center; width: min(240px, 70vw); aspect-ratio: 1; border-radius: var(--radius-row); overflow: hidden; }
.ui-link__qr svg { display: block; width: 100%; height: 100%; }
.ui-link__key { align-self: center; font: var(--font-title); letter-spacing: 0.12em; color: var(--color-text); }
.ui-link__how { text-align: center; }
.ui-link__title { font: var(--font-card-title); color: var(--color-text); }
.ui-link__own { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-divider); }
.ui-link__code { align-self: center; font: var(--font-value); letter-spacing: 0.06em; color: var(--color-gold-soft); }
/* the request of another device: who asks and when, «Впустить» / «Не впускать» (owner 2026-11-14) */
.ui-link__ask { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-link__device { font: var(--font-title); color: var(--color-text); overflow-wrap: anywhere; }
/* «Устройства» (shared/ui/devices.js): one row per signed-in device, «Выйти» beside it */
.ui-devices { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-2); }
.ui-devices p { margin: 0; }
.ui-devices__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ui-devices__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-row); background: var(--color-surface); }
.ui-devices__text { flex: 1 1 160px; min-width: 0; }
.ui-devices__name { font: var(--font-card-title); color: var(--color-text); overflow-wrap: anywhere; }
.ui-devices__mark { color: var(--color-gold-soft); }
.ui-devices__item .ui-btn { min-height: 44px; }
.ui-devices__confirm { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--space-2); }

/* ── Lumen (owner 2026-11-13): a light gym with Valkyrie Voss. Cream stone, matte metal, soft daylight, champagne gold.
   Every colour is a token of theme/tokens.css (:root[data-theme="lumen"]); nothing here touches the other themes. ── */
.ui-theme-arch[data-preview="lumen"] { --p-male: var(--preview-lumen-male); --p-female: var(--preview-lumen-female); --p-bg: var(--preview-lumen-bg); --p-slab: var(--preview-lumen-slab); --p-accent: var(--preview-lumen-accent); --p-ink: var(--preview-lumen-ink); --p-veil: var(--preview-lumen-veil); }
.ui-theme-btn__stone--lumen { background: linear-gradient(135deg, var(--preview-lumen-slab), var(--preview-lumen-accent)); }

/* the material: quiet cream slabs with a hairline of champagne, soft warm shadows, controls with a thin gold edge */
:root[data-theme="lumen"] .ui-card,
:root[data-theme="lumen"] .ui-sheet,
:root[data-theme="lumen"] .ui-dialog { border: 1px solid var(--lumen-glass-border); }
:root[data-theme="lumen"] .ui-btn--secondary { border: 1px solid var(--lumen-hairline); }
:root[data-theme="lumen"] .ui-segmented { border: 1px solid var(--lumen-glass-border); }
:root[data-theme="lumen"] .ui-segmented__item[aria-selected="true"] { color: var(--color-gold-soft); box-shadow: inset 0 0 0 1px var(--lumen-hairline), var(--shadow-key); }
:root[data-theme="lumen"] .ui-toggle__track { box-shadow: inset 0 0 0 1px var(--lumen-glass-border), var(--shadow-field); }
:root[data-theme="lumen"] .ui-field { border: 1px solid var(--color-field-border); }
:root[data-theme="lumen"] .ui-nav { border-top: 1px solid var(--lumen-glass-border); }
:root[data-theme="lumen"] .ui-nav__tab[aria-current="page"]::before { background: var(--lumen-rim-deep); }

/* Workout: Valkyrie holds the plate and the plate is under the timer. The photo is sized and placed from the timer exactly like Old School
   (--os-photo-*: the rim on the timer's edge on any screen; fitHeadroom keeps the head under the top row through --cyber-head). The page
   colour melts in at the top and the bottom; a soft daylight haze lies only over the windows high in the photo, never on her face. */
:root[data-theme="lumen"] .scr-workout { --hero-under: calc(var(--ring-size, 194px) + 24px); }
:root[data-theme="lumen"] .scr-workout .scr-workout-hero {
  background-image: linear-gradient(to bottom, var(--color-bg) 0, transparent 64px, transparent calc(100% - 96px), var(--color-bg) 100%), var(--hero-workout); /* a longer, softer fade into the page */
  background-size: cover, calc(var(--ring-size, 194px) * var(--os-photo-w)) calc(var(--ring-size, 194px) * var(--os-photo-h));
  background-position: center, calc(50% + var(--ring-size, 194px) * var(--os-photo-x)) calc(var(--hero-h, 250px) + var(--ring-size, 194px) * var(--os-photo-y));
}
:root[data-theme="lumen"] .scr-workout .scr-workout-hero::after { content: ""; position: absolute; inset: 0 0 auto; height: 46%; pointer-events: none; background: var(--lumen-haze); }
/* the timer: matte frosted glass on the iron plate, a champagne rim, graphite numbers; the running rest glows softly in gold */
:root[data-theme="lumen"] .scr-workout .scr-workout-ring {
  border: 2px solid var(--lumen-rim); background: var(--color-ring-core);
  -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05);
  box-shadow: inset 0 1px 0 var(--lumen-glass), 0 10px 24px -14px var(--lumen-glass-border);
}
:root[data-theme="lumen"] .scr-workout[data-timer="running"] .scr-workout-ring { box-shadow: var(--lumen-ring-glow); }
:root[data-theme="lumen"] .scr-workout .scr-workout-ring:active { background: var(--color-field); }
:root[data-theme="lumen"] .scr-workout .scr-workout-ring-track { stroke: var(--lumen-track); }
:root[data-theme="lumen"] .scr-workout .scr-workout-ring-arc { stroke: var(--lumen-rim-deep); filter: var(--gold-glow-arc); }
:root[data-theme="lumen"] .scr-workout .scr-workout-ring-time { color: var(--color-text); }
:root[data-theme="lumen"] .scr-workout .scr-workout-ring-label { color: var(--color-gold-soft); letter-spacing: 0.12em; }
:root[data-theme="lumen"] .scr-workout .scr-workout-ring-hint { color: var(--color-text-secondary); }
/* she holds the timer (owner 2026-11-13, «как в других темах»): her hands, cut from the photo, lie over the glass rim at the very spot
   they are in the photo (--os-hands-*, in timer sizes; -2px for the rim's border). Over the glass and the arc, clear of the numbers. */
:root[data-theme="lumen"] .scr-workout .scr-workout-ring-svg { position: relative; z-index: 2; }
:root[data-theme="lumen"] .scr-workout .scr-workout-ring-inner { z-index: 3; }
:root[data-theme="lumen"] .scr-workout .scr-workout-ring::before {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  left: calc(var(--ring-size, 194px) * var(--os-hands-x) - 2px); top: calc(var(--ring-size, 194px) * var(--os-hands-y) - 2px);
  width: calc(var(--ring-size, 194px) * var(--os-hands-w)); height: calc(var(--ring-size, 194px) * var(--os-hands-h));
  background: var(--os-hands) center / 100% 100% no-repeat;
}

/* Antique v3 (owner 2026-11-13): the athlete holds the timer here too — a bronze shield. The photo is sized and
   placed from the timer like Old School (--os-photo-*: the rim on the timer's edge on any screen; fitHeadroom keeps the head in view
   through --cyber-head), the page colour melts in at the top and the bottom, and the hands cut from the photo lie over the rim
   (--os-hands-*; minus the ring's border). */
:root[data-theme="atelier"] .scr-workout { --hero-under: calc(var(--ring-size, 194px) + 24px); }
:root[data-theme="atelier"] .scr-workout .scr-workout-hero {
  background-image: linear-gradient(to bottom, var(--color-bg) 0, transparent 64px, transparent calc(100% - 96px), var(--color-bg) 100%), var(--hero-workout); /* a longer, softer fade into the page */
  background-size: cover, calc(var(--ring-size, 194px) * var(--os-photo-w)) calc(var(--ring-size, 194px) * var(--os-photo-h));
  background-position: center, calc(50% + var(--ring-size, 194px) * var(--os-photo-x)) calc(var(--hero-h, 250px) + var(--ring-size, 194px) * var(--os-photo-y));
}
:root[data-theme="atelier"] .scr-workout .scr-workout-ring-svg { position: relative; z-index: 2; }
:root[data-theme="atelier"] .scr-workout .scr-workout-ring-inner { z-index: 3; }
:root[data-theme="atelier"] .scr-workout .scr-workout-ring::before {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  --os-hands-border: 2px;
  left: calc(var(--ring-size, 194px) * var(--os-hands-x) - var(--os-hands-border)); top: calc(var(--ring-size, 194px) * var(--os-hands-y) - var(--os-hands-border));
  width: calc(var(--ring-size, 194px) * var(--os-hands-w)); height: calc(var(--ring-size, 194px) * var(--os-hands-h));
  background: var(--os-hands) center / 100% 100% no-repeat;
}

/* Profile «Lumen Crest»: the portrait in an upright medallion — a large round top-left, a diagonal cut top-right, a wide oval bottom.
   It stands a little wider than the frosted card that lies over its lower part, so the photo reaches past the card's edges. Her face
   and ponytail are in the upper right, the shoulders and arms in the middle (--hero-profile-pos 62% 0%, --os-profile-top). A thin
   champagne halo sits behind her head. Pseudo-elements only, under the header and the card, so the tabs and actions stay as they are. */
:root[data-theme="lumen"] .scr-profile .scr-profile-hero {
  --crest-w: min(86vw, 380px);
  --crest-top: calc(env(safe-area-inset-top) + var(--os-profile-top) + 16px);
  --crest-h: calc(var(--crest-w) * 1.2);
  height: calc(var(--crest-top) + var(--crest-h) + 12px);
  background-image: var(--lumen-haze);
  background-size: cover;
}
:root[data-theme="lumen"] .scr-profile .scr-profile-hero::before,
:root[data-theme="lumen"] .scr-profile .scr-profile-hero::after { display: block; content: ""; position: absolute; inset: auto; z-index: 0; pointer-events: none; animation: none; transform: none; opacity: 1; }
:root[data-theme="lumen"] .scr-profile .scr-profile-hero::before {
  top: var(--crest-top); left: 50%; width: var(--crest-w); height: var(--crest-h); margin-left: calc(var(--crest-w) / -2);
  background: var(--hero-profile) var(--hero-own-pos, var(--hero-profile-pos)) / var(--hero-own-size-crest, cover) no-repeat, var(--lumen-crest-bg);
  border-radius: 58% 0 50% 50% / 34% 0 22% 22%;
  clip-path: polygon(0 0, 76% 0, 100% 13%, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px var(--lumen-crest-edge);
}
:root[data-theme="lumen"] .scr-profile .scr-profile-hero::after { display: none; } /* no halo round the head (owner 2026-11-13) */
:root[data-theme="lumen"] .scr-profile .scr-profile-hero-text {
  width: min(calc(var(--crest-w) - 40px), 340px); margin: 0 auto var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--lumen-glass-border); border-radius: 22px; background: var(--lumen-glass);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--lumen-glass-shadow);
}
:root[data-theme="lumen"] .scr-profile .scr-profile-name { color: var(--color-text); letter-spacing: 0.06em; }
:root[data-theme="lumen"] .scr-profile .scr-profile-level { color: var(--color-text-secondary); }
:root[data-theme="lumen"] .scr-profile .scr-profile-row-value { color: var(--color-gold-soft); }

/* Own pictures (owner 2026-11-13, shared/ui/own-photo.js): the menu and «Положение фото». The frame has the shape of the screen's photo
   area (the Lumen medallion in the profile); the bands and the circle show where the buttons, the name and the timer lie. */
.ui-own-photo { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-own-photo .ui-note { margin: 0; }
.ui-own-photo .ui-own-photo__more { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.ui-own-photo .ui-own-photo__more .ui-meta { margin: 0; }
.ui-place { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-place .ui-place-frame {
  position: relative; width: 100%; max-height: 52vh; margin: 0 auto; overflow: hidden; border-radius: var(--radius-card);
  background-color: var(--color-field); background-repeat: no-repeat; border: 1px solid var(--color-field-border);
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.ui-place .ui-place-frame--crest { width: auto; height: min(52vh, 360px); border-radius: 58% 0 50% 50% / 34% 0 22% 22%; } /* the medallion's outline */
.ui-place .ui-place-shades { position: absolute; inset: 0; pointer-events: none; background-size: cover; background-repeat: no-repeat; } /* the screen's own fades */
.ui-place .ui-place-spot, .ui-place .ui-place-ring {
  position: absolute; display: flex; justify-content: center; align-items: center; pointer-events: none;
  font: var(--font-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text); text-shadow: var(--text-shadow-photo);
}
.ui-place .ui-place-spot { left: 6%; right: 6%; border: 1px dashed var(--color-gold-soft); border-radius: var(--radius-chip); } /* where the text lies: outlined, the picture under it is seen */
.ui-place .ui-place-ring { aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px dashed var(--color-gold-soft); border-radius: 50%; }
.ui-place .ui-place-hint { margin: 0; text-align: center; }
.ui-place .ui-place-zoom-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch); }
.ui-place .ui-place-zoom { flex: 1; min-height: var(--touch); accent-color: var(--color-gold-soft); }
.ui-place .ui-place-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* Own picture on the main screen (owner 2026-11-13): over every theme's own composition the picture fills the top like a plain photo, at
   the place and zoom set in «Положение фото» (--hero-own-*, screens/workout/screen.js); the cut-out hands of the held-timer themes go. */
:root[data-theme] .scr-workout[data-own-photo] .scr-workout-hero {
  background-image: linear-gradient(to bottom, var(--hero-fade-top) 0%, transparent 26%, transparent 66%, var(--hero-fade-soft) 78%, var(--hero-fade-strong) 91%, var(--color-bg) 100%), var(--hero-workout);
  background-size: cover, var(--hero-own-size, cover);
  background-position: center, var(--hero-own-pos, center);
  background-repeat: no-repeat;
}
:root[data-theme] .scr-workout[data-own-photo] .scr-workout-ring::before { display: none; }
/* An own picture: the theme's animations go (owner 2026-11-13: «анимация должна убираться… не мешать») — fog, dust, rain, steam, chalk,
   flashes, beams, ripples. The Lumen medallion keeps its ::before: that is where the picture itself is drawn. */
:root:not([data-theme="lumen"]) .scr-profile .scr-profile-hero[data-own-photo]::before,
:root[data-theme] .scr-profile .scr-profile-hero[data-own-photo]::after,
:root[data-theme] .scr-workout[data-own-photo] .scr-workout-hero::before,
:root[data-theme] .scr-workout[data-own-photo] .scr-workout-hero::after,
:root[data-theme] .scr-workout[data-own-photo] .scr-workout-timer-section::before,
:root[data-theme] .scr-workout[data-own-photo] .scr-workout-timer-section::after,
:root[data-theme] .scr-workout[data-own-photo] .scr-workout-stage { display: none; animation: none; }

/* «Моя тема» (owner 2026-11-13, shared/ui/theme-picker.js customPanel): six style cards in two columns, each a little picture of the style
   (its page, a card, the accent button, the ink) drawn from --st-* set on the card. */
.ui-my-theme { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.ui-my-theme[hidden] { display: none; }
.ui-my-theme .ui-my-theme__title { margin: 0; font: var(--font-label); color: var(--color-text); }
.ui-my-theme .ui-my-theme__styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.ui-my-theme .ui-my-theme__style {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); min-height: var(--touch); padding: var(--space-1); border: 1px solid var(--color-divider);
  -webkit-appearance: none; appearance: none;
  border-radius: var(--radius-row); background: transparent; color: var(--color-text); cursor: pointer; text-align: center;
}
.ui-my-theme .ui-my-theme__style[aria-checked="true"] { border-color: var(--color-gold-soft); box-shadow: 0 0 0 1px var(--color-gold-soft); }
.ui-my-theme .ui-my-theme__mock { position: relative; display: block; height: 64px; border-radius: 8px; background: var(--st-bg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--color-divider); }
.ui-my-theme .ui-my-theme__mock-card { position: absolute; left: 10%; right: 10%; top: 14%; height: 40%; border-radius: 6px; background: var(--st-surface); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 8%; }
.ui-my-theme .ui-my-theme__mock-line { display: block; height: 3px; border-radius: 2px; background: var(--st-text); opacity: 0.75; }
.ui-my-theme .ui-my-theme__mock-line--short { width: 55%; opacity: 0.4; }
.ui-my-theme .ui-my-theme__mock-btn { position: absolute; left: 22%; right: 22%; bottom: 12%; height: 18%; border-radius: 999px; background: var(--st-accent); }
.ui-my-theme .ui-my-theme__name { display: block; width: 100%; font: var(--font-caption); color: var(--color-text); text-align: center; }
.ui-my-theme .ui-my-theme__check { position: absolute; top: 6px; right: 6px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--color-gold-soft); color: var(--color-text-on-gold-soft); }
.ui-my-theme .ui-my-theme__check svg { width: 14px; height: 14px; }
.ui-my-theme .ui-my-theme__style[aria-checked="true"] .ui-my-theme__check { display: grid; }

/* Antique «солнечные часы и лавровый венок» (owner 2026-11-13: «необычную, сложную, удивительную»). The rest is time told by the sun:
   the shadows of the columns turn slowly across the scene like the hand of a sundial and the sunbeams follow them, golden pollen rises,
   now and then two olive leaves drift down (the laurel wreath round the shield went on 2026-11-14, the owner's wish). The last 10 s:
   the sunset comes, the shadows lengthen. Zero: a light runs once round the Greek key on the rim, a sun blooms behind the shield. A set saved: gold leaf falls from
   the shield. No flicker; transform / opacity / masks only. */
:root[data-theme="atelier"] .scr-workout .scr-workout-stage { display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; } /* no z-index: the layers blend with the photo */
:root[data-theme="atelier"] .scr-workout .scr-workout-stage > :where(i) { /* :where — a layer's own blend or display wins over this default */ display: none; position: absolute; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; mix-blend-mode: screen; }
:root[data-theme="atelier"] .scr-workout .scr-workout-stage > .scr-workout-an { display: block; }
:root[data-theme="atelier"] .scr-workout .scr-workout-an--shadows { /* the sundial: shadows on white, multiplied; two tiles wide */
  top: -10%; bottom: -10%; left: -20%; width: 280%; mix-blend-mode: multiply; background: var(--an-shadows) 0 0 / 50% 100% repeat-x; transform-origin: 30% 0;
}
:root[data-theme="atelier"] .scr-workout .scr-workout-an--rays { inset: -6% -10% 20% -10%; background: var(--an-rays) left top / cover no-repeat; transform-origin: 0 0; }
:root[data-theme="atelier"] .scr-workout .scr-workout-stage > .scr-workout-an--rays { mix-blend-mode: color-dodge; } /* golden light that shows on the light scene; black leaves it as it is */
:root[data-theme="atelier"] .scr-workout .scr-workout-stage > .scr-workout-an--pollen { mix-blend-mode: normal; }
:root[data-theme="atelier"] .scr-workout .scr-workout-an--pollen { left: 0; right: 0; top: 0; height: calc(100% + 512px); background: var(--an-pollen) 0 0 / 512px 512px repeat, var(--an-pollen) 170px 90px / 800px 800px repeat; /* the big tile: larger specks, nearer */
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 85%); mask-image: linear-gradient(to bottom, black 40%, transparent 85%); }
:root[data-theme="atelier"] .scr-workout .scr-workout-stage > .scr-workout-an--sunset { inset: 0; background: var(--an-sunset) center top / cover no-repeat; transition-duration: 4s; mix-blend-mode: soft-light; } /* a transparent picture: only the coloured sky warms the scene */ /* warms the light scene to sunset instead of washing it out */
:root[data-theme="atelier"] .scr-workout .scr-workout-stage > .scr-workout-an--leaf { /* one olive leaf of six (a 3 × 2 sheet), dropped by screen.js; «>» so plain blending wins over the stage's «screen», which made the leaves vanish */
  left: var(--lx, 15%); top: calc(var(--ring-size, 194px) * -0.3); width: calc(var(--ring-size, 194px) * 0.52); height: calc(var(--ring-size, 194px) * 0.52);
  mix-blend-mode: normal; background: var(--an-leaves) var(--leaf-pos, 0% 0%) / 300% 200% no-repeat; transition: none;
  filter: drop-shadow(0 6px 6px var(--color-scrim)) saturate(1.25); /* owner 2026-11-14: «листики почти не видно» — bigger, with a soft shadow off the light scene */
}
:root[data-theme="atelier"] .scr-workout .scr-workout-an--leaf[data-on] { animation: an-leaf-fall 7.5s cubic-bezier(0.35, 0.1, 0.55, 0.9) 1 both; }
:root[data-theme="atelier"] .scr-workout .scr-workout-an--meander,
:root[data-theme="atelier"] .scr-workout .scr-workout-an--halo { /* centred on the shield (the timer) */
  left: 50%; top: calc(var(--hero-h, 250px) + var(--ring-size, 194px) / 2);
}
/* the rest begins (and a set is saved): a light runs once round the Greek key (owner 2026-11-14); the laurel wreath went the same day */
:root[data-theme="atelier"] .scr-workout[data-chalk] .scr-workout-an--meander { animation: an-meander-run 1.8s ease-out 0.2s 1 both; }
:root[data-theme="atelier"] .scr-workout .scr-workout-an--meander { /* the Greek key just outside the rim */
  width: calc(var(--ring-size, 194px) * 1.34); height: calc(var(--ring-size, 194px) * 1.34); margin: calc(var(--ring-size, 194px) * -0.67) 0 0 calc(var(--ring-size, 194px) * -0.67);
  background: var(--an-meander) center / contain no-repeat; transition: none;
}
:root[data-theme="atelier"] .scr-workout .scr-workout-an--halo { /* the sun behind the shield */
  width: calc(var(--ring-size, 194px) * 2.2); height: calc(var(--ring-size, 194px) * 2.2); margin: calc(var(--ring-size, 194px) * -1.1) 0 0 calc(var(--ring-size, 194px) * -1.1);
  background: var(--an-halo) center / contain no-repeat; transition: none;
}
:root[data-theme="atelier"] .scr-workout[data-timer="running"] .scr-workout-an--shadows { opacity: 0.42; animation: an-sundial 30s ease-in-out infinite alternate; }
:root[data-theme="atelier"] .scr-workout[data-timer="running"] .scr-workout-an--rays { opacity: 0.75; animation: an-rays-follow 30s ease-in-out infinite alternate; }
:root[data-theme="atelier"] .scr-workout[data-timer="running"] .scr-workout-an--pollen { opacity: 0.9; animation: an-pollen-rise 26s linear infinite; }
:root[data-theme="atelier"] .scr-workout[data-timer="running"][data-rest-end="soon"] .scr-workout-an--sunset,
:root[data-theme="atelier"] .scr-workout[data-timer="running"][data-rest-end="final"] .scr-workout-an--sunset { opacity: 0.95; }
:root[data-theme="atelier"] .scr-workout[data-timer="running"][data-rest-end="soon"] .scr-workout-an--shadows,
:root[data-theme="atelier"] .scr-workout[data-timer="running"][data-rest-end="final"] .scr-workout-an--shadows { opacity: 0.4; }
:root[data-theme="atelier"] .scr-workout[data-finale] .scr-workout-an--meander { animation: an-meander-run 1.8s ease-out 1 both; }
:root[data-theme="atelier"] .scr-workout[data-finale] .scr-workout-an--halo { animation: an-sun-bloom 2.2s ease-out 1 both; }
@keyframes an-sundial { from { transform: translate3d(0, 0, 0) skewX(-6deg); } to { transform: translate3d(-18%, 0, 0) skewX(10deg); } }
@keyframes an-rays-follow { from { transform: rotate(-3deg) translate3d(0, 0, 0); } to { transform: rotate(4deg) translate3d(6%, 0, 0); } }
@keyframes an-pollen-rise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -512px, 0); } }
@keyframes an-leaf-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-20deg); }
  8% { opacity: 1; }
  35% { transform: translate3d(28px, calc(var(--ring-size, 194px) * 0.7), 0) rotate(40deg); }
  65% { transform: translate3d(-22px, calc(var(--ring-size, 194px) * 1.5), 0) rotate(-15deg); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(14px, calc(var(--ring-size, 194px) * 2.3), 0) rotate(70deg); }
}
@keyframes an-meander-run { /* a light runs once round the key */
  0% { opacity: 0; transform: rotate(0deg); -webkit-mask-image: conic-gradient(from 0deg, black 0deg, transparent 60deg); mask-image: conic-gradient(from 0deg, black 0deg, transparent 60deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: rotate(360deg); -webkit-mask-image: conic-gradient(from 0deg, black 0deg, transparent 60deg); mask-image: conic-gradient(from 0deg, black 0deg, transparent 60deg); }
}
@keyframes an-sun-bloom { 0% { opacity: 0; transform: scale(0.5) rotate(0deg); } 25% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.25) rotate(25deg); } }
/* over the shield: gold leaf falling when a set is saved (a transparent picture, plain blending) */
:root[data-theme="atelier"] .scr-workout .scr-workout-timer-section::before {
  content: ""; position: absolute; z-index: 5; pointer-events: none; opacity: 0;
  left: 50%; top: calc(var(--ring-size, 194px) * -0.2); width: min(calc(var(--ring-size, 194px) * 1.7), 100vw); height: calc(var(--ring-size, 194px) * 1.7); margin-left: calc(min(calc(var(--ring-size, 194px) * 1.7), 100vw) / -2);
  background: var(--an-gold) center / contain no-repeat;
}
:root[data-theme="atelier"] .scr-workout[data-chalk] .scr-workout-timer-section::before { animation: an-gold-fall 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) 1 both; }
@keyframes an-gold-fall { 0% { opacity: 0; transform: scale(0.4) translate3d(0, 0, 0); } 12% { opacity: 1; transform: scale(0.95) translate3d(0, 0, 0); } 100% { opacity: 0; transform: scale(1.15) translate3d(0, 22%, 0) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="atelier"] .scr-workout .scr-workout-stage,
  :root[data-theme="atelier"] .scr-workout .scr-workout-timer-section::before { display: none; animation: none; }
}

/* The rest layers melt into the page at the bottom of the photo (owner 2026-11-13: in Old School the light ended in a hard line over
   the black under the photo). Each layer fades on its own: a mask on the stage itself isolates it, and then the «screen» and
   «multiply» layers stop blending with the photo and show their black and white (2026-11-14). */
:root[data-theme="oldschool"] .scr-workout .scr-workout-os--leak,
:root[data-theme="oldschool"] .scr-workout .scr-workout-os--grain,
:root[data-theme="oldschool"] .scr-workout .scr-workout-os--haze,
:root[data-theme="oldschool"] .scr-workout .scr-workout-os--rays,
:root[data-theme="atelier"] .scr-workout .scr-workout-an--shadows,
:root[data-theme="atelier"] .scr-workout .scr-workout-an--rays,
:root[data-theme="atelier"] .scr-workout .scr-workout-an--sunset {
  -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(100% - 120px), transparent calc(100% - 8px));
  mask-image: linear-gradient(to bottom, black 0, black calc(100% - 120px), transparent calc(100% - 8px));
}