/* Памп Дамп · КОПИЯ pm-btc5m/web/static/ui/components.css (Pulse, 02.11.2026). Оригинал: Pulse · компоненты (план 5.9, TD.2). Набор и правила (только токены; px — геометрия компонента; анимируются
 * transform/opacity; петли — .anim-loop; касание ≥ 44 px; :focus-visible; hover) — ui/KIT_FROZEN.md §4,
 * проверяет tests/ui/test_design_lint.py. Подключение: fonts.css → tokens.css → base.css → components.css. */

/* ── Петли и «меньше движения» ─────────────────────────────────────────────── */
.anim-loop {
  animation: var(--loop, none);
}

@keyframes pulse-o {
  50% { opacity: 0.35; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(var(--sp-4)) scale(0.98); }
}

@keyframes rise-out {
  to { opacity: 0; transform: translateY(var(--sp-2)) scale(0.98); }
}

@keyframes sheet-in {
  from { transform: translateY(100%); }
}

@keyframes sheet-out {
  to { transform: translateY(100%); }
}

@keyframes flash {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes skel-in {
  to { opacity: 1; }
}

@keyframes shimmer {
  to { transform: translateX(100%); }
}

/* ── Кнопки ────────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--accent-fill);
  --btn-bg-press: var(--accent-fill-pressed);
  --btn-fg: var(--on-accent);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-headline-size);
  line-height: var(--t-headline-lh);
  font-weight: var(--t-headline-wt);
  letter-spacing: var(--t-headline-tr);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-standard);
}

.btn:active:not(:disabled) {
  transform: scale(var(--press-scale));
  background: var(--btn-bg-press);
}

@media (hover: hover) {
  .btn:hover {
    text-decoration: none;
  }
  .btn:hover:not(:disabled):not(:active) {
    filter: brightness(1.08);
  }
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

.btn.is-loading {
  opacity: 1;
}

.btn__t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn--secondary {
  --btn-bg: var(--accent-soft);
  --btn-bg-press: var(--fill-quiet);
  --btn-fg: var(--accent-text);
}

.btn--gray {
  --btn-bg: var(--fill-quiet);
  --btn-bg-press: var(--surface-3);
  --btn-fg: var(--label);
}

.btn--plain {
  --btn-bg: transparent;
  --btn-bg-press: var(--fill-quiet-2);
  --btn-fg: var(--accent-text);
  padding: 0 var(--sp-3);
}

.btn--plain-danger {
  --btn-fg: var(--loss-text);
}

.btn--danger {
  --btn-bg: var(--loss-soft);
  --btn-bg-press: var(--fill-quiet);
  --btn-fg: var(--loss-text);
}

.btn--stop {
  --btn-bg: var(--loss-fill);
  --btn-bg-press: var(--loss-fill-pressed);
  --btn-fg: var(--on-loss);
  font-weight: var(--t-large-wt);
}

.btn--lg {
  min-height: calc(var(--touch) + var(--sp-2));
  border-radius: var(--r-lg);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* Компактная кнопка: коробка 44, видимая часть 36 */
.btn--sm {
  background: transparent;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
  letter-spacing: var(--t-subhead-tr);
}

.btn--sm::before {
  content: "";
  position: absolute;
  inset: var(--sp-1) 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--btn-bg);
}

.btn--sm:active:not(:disabled) {
  background: transparent;
}

.btn--sm:active:not(:disabled)::before {
  background: var(--btn-bg-press);
}

.btn--sm:focus-visible {
  outline: none;
}

.btn--sm:focus-visible::before {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.btn--stop.btn--sm {
  letter-spacing: var(--t-micro-tr);
}

/* Кнопка-иконка: коробка 44, круг 36 */
.ibtn {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--touch);
  height: var(--touch);
  border-radius: var(--r-pill);
  color: var(--label-2);
  text-decoration: none;
  transition: transform var(--dur-press) var(--ease-standard);
}

.ibtn::before {
  content: "";
  position: absolute;
  inset: var(--sp-1);
  z-index: -1;
  border-radius: inherit;
  background: var(--fill-quiet);
  opacity: 0;
  transition: opacity var(--dur-press) var(--ease-standard);
}

.ibtn:active::before,
.ibtn--gray::before,
.ibtn--glass::before {
  opacity: 1;
}

.ibtn:active {
  transform: scale(var(--press-scale));
}

@media (hover: hover) {
  .ibtn:hover::before {
    opacity: 1;
  }
}

.ibtn--accent {
  color: var(--accent-text);
}

.ibtn--gray {
  color: var(--label);
}

.ibtn--glass::before {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}

.ibtn--glass {
  color: var(--label);
}

.ibtn[aria-pressed="true"] {
  color: var(--accent-text);
}

.ibtn[aria-pressed="true"]::before {
  background: var(--accent-soft);
  opacity: 1;
}

.ibtn:disabled {
  opacity: 0.4;
}

.ibtn:focus-visible {
  outline-offset: calc(var(--sp-half) * -1);
}

.spin {
  display: inline-block;
  flex: none;
  width: var(--spin);
  height: var(--spin);
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin var(--dur-spin) var(--ease-linear) infinite;
}

/* ── Плашки: Badge, ModePill, StatusPill ───────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
  height: 22px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--fill-quiet-2);
  color: var(--label);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
  font-weight: var(--t-caption-wt);
  letter-spacing: var(--t-caption-tr);
  white-space: nowrap;
}

.badge__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.badge__dot.anim-loop {
  --loop: pulse-o var(--dur-pulse) var(--ease-standard) infinite;
}

.badge--accent { background: var(--accent-soft); color: var(--accent-text); }
.badge--fill { background: var(--accent-fill); color: var(--on-accent); }   /* Памп Дамп: чёрный на янтаре */
.badge--win { background: var(--win-soft); color: var(--win); }
.badge--loss { background: var(--loss-soft); color: var(--loss-text); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }
.badge--resolving { background: var(--resolving-soft); color: var(--resolving-text); }
.badge--be { background: var(--be-soft); color: var(--label); }

.badge--quiet {
  background: transparent;
  color: var(--label-2);
  box-shadow: inset 0 0 0 1px var(--sep);
}

.mode {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
  height: 24px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.mode--paper { background: var(--mode-paper-bg); color: var(--mode-paper); }
.mode--live { background: var(--mode-live-bg); color: var(--mode-live); }
.mode--demo { background: var(--mode-demo-bg); color: var(--mode-demo); }

.mode--bt {
  background: var(--fill-quiet-2);
  color: var(--label-2);
  box-shadow: inset 0 0 0 1px var(--sep);
}

.mode--bt::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--r-xs);
  background: var(--hatch-bt), var(--surface-3);
}

/* ── Сегментированный переключатель ────────────────────────────────────────── */
.seg {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  flex: 0 1 auto;                  /* в тесной строке сжимается: подписи режутся многоточием */
  min-width: 0;
}

.seg::before {
  content: "";
  position: absolute;
  inset: var(--sp-1) 0;
  z-index: -2;
  border-radius: var(--r-sm);
  background: var(--fill-quiet);
}

.seg--block {
  display: grid;
  width: 100%;
}

.seg__thumb {
  position: absolute;
  top: calc(var(--sp-1) + var(--sp-half));
  bottom: calc(var(--sp-1) + var(--sp-half));
  left: var(--sp-half);
  z-index: -1;
  width: calc((100% - var(--sp-1)) / var(--n));
  border-radius: var(--r-xs);
  background: var(--thumb-bg);
  box-shadow: var(--thumb-shadow);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform var(--dur-status) var(--ease-standard);
}

.seg__opt {
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  color: var(--label);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
  font-weight: var(--t-caption-wt);
  white-space: nowrap;
}

.seg__t {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seg__opt[aria-checked="true"] {
  font-weight: var(--t-headline-wt);
}

.seg__opt[aria-disabled="true"] {
  color: var(--label-3);
  cursor: default;
}

.seg__opt:focus-visible {
  outline-offset: calc(var(--sp-1) * -1);
  border-radius: var(--r-sm);
}

/* ── Чипы-фильтры ──────────────────────────────────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-2);
  min-width: 0;
}

.chips--scroll {
  position: relative;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.chips--scroll::-webkit-scrollbar {
  display: none;
}

.chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  flex: none;
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 var(--sp-3);
  color: var(--label);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
  font-weight: var(--t-caption-wt);
  letter-spacing: var(--t-subhead-tr);
  white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-standard);
}

.chip::before {
  content: "";
  position: absolute;
  inset: calc(var(--sp-1) + var(--sp-half)) 0;
  z-index: -1;
  border-radius: var(--r-pill);
  background: var(--fill-quiet-2);
  box-shadow: inset 0 0 0 1px var(--sep);
}

.chip:active {
  transform: scale(var(--press-scale));
}

.chip__in {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.chip__n {
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.chip.is-on {
  color: var(--accent-text);
}

.chip.is-on::before {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.chip.is-on .chip__n {
  color: var(--accent-text);
}

.chip[aria-disabled="true"] {
  color: var(--label-3);
  cursor: default;
}

.chip:focus-visible {
  outline: none;
}

.chip:focus-visible::before {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* ── Переключатель ─────────────────────────────────────────────────────────── */
.sw {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 51px;
  min-height: var(--touch);
}

.sw__track {
  position: relative;
  display: block;
  width: 51px;
  height: 31px;
  border-radius: var(--r-pill);
  background: var(--fill-quiet);
}

.sw__track::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--dur-status) var(--ease-standard);
}

.sw__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: var(--knob-shadow);
  transition: transform var(--dur-status) var(--ease-standard), opacity var(--dur-status) var(--ease-standard);
}

.sw.is-on .sw__track::before {
  opacity: 1;
}

.sw.is-on .sw__knob {
  transform: translateX(20px);
}

.sw.is-busy .sw__knob {
  opacity: 0.6;
}

.sw:disabled {
  opacity: 0.4;
  cursor: default;
}

.sw.is-locked {
  opacity: 0.55;
}

.sw__lock {
  position: absolute;
  top: 50%;
  left: 7px;
  color: var(--on-accent);
  transform: translateY(-50%);
}

.sw:not(.is-on) .sw__lock {
  left: auto;
  right: 7px;
  color: var(--label-2);
}

.sw:focus-visible {
  outline: none;
}

.sw:focus-visible .sw__track {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--touch);
  padding: var(--sp-2) 0;
}

.row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-half);
  cursor: pointer;
}

.row__title {
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
}

.row__hint {
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.row__warn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--warn);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.row.is-disabled .row__text {
  cursor: default;
}

/* ── Степпер ───────────────────────────────────────────────────────────────── */
.stp {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  flex: none;
}

.stp::before {
  content: "";
  position: absolute;
  inset: var(--sp-1) 0;
  z-index: -1;
  border-radius: var(--r-sm);
  background: var(--fill-quiet);
}

.stp__b {
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  border-radius: var(--r-sm);
  color: var(--label);
  transition: transform var(--dur-press) var(--ease-standard);
}

.stp__b:active:not(:disabled) {
  transform: scale(var(--press-scale));
}

.stp__b:disabled {
  opacity: 0.35;
}

.stp__v {
  min-width: 72px;
  text-align: center;
  font-size: var(--t-headline-size);
  line-height: var(--t-headline-lh);
  font-weight: var(--t-headline-wt);
}

.stp.is-disabled {
  opacity: 0.5;
}

/* ── Ползунок ──────────────────────────────────────────────────────────────── */
.sld {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sld__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.sld__label {
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
}

.sld__val {
  font-size: var(--t-headline-size);
  line-height: var(--t-headline-lh);
  font-weight: var(--t-headline-wt);
}

.sld__hit {
  position: relative;
  height: var(--touch);
  touch-action: none;
  cursor: pointer;
}

.sld__rail {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  transform: translateY(-50%);
}

.sld__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--f) * 100%);
  border-radius: inherit;
  background: var(--accent);
}

.sld__thumb {
  position: absolute;
  top: 50%;
  left: calc(14px + var(--f) * (100% - 28px));
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: var(--knob-shadow);
  transform: translate(-50%, -50%);
}

.sld__marks {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--sp-1);
  color: var(--label-2);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
}

/* Недоступный ползунок: гаснет дорожка, подпись остаётся читаемой (контраст 4,5:1) */
.sld.is-disabled .sld__hit {
  opacity: 0.4;
  cursor: default;
}

.sld.is-disabled .sld__label,
.sld.is-disabled .sld__val {
  color: var(--label-2);
}

/* ── Поле ввода и поиск ────────────────────────────────────────────────────── */
.fld {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.fld__label {
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
  font-weight: var(--t-caption-wt);
}

.fld__box {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--sep);
}

.fld__box:focus-within {
  box-shadow: inset 0 0 0 var(--focus-width) var(--focus);
}

.fld.is-error .fld__box {
  box-shadow: inset 0 0 0 1px var(--loss);
}

.fld.is-error .fld__box:focus-within {
  box-shadow: inset 0 0 0 var(--focus-width) var(--loss);
}

.fld__input {
  flex: 1;
  min-width: 0;
  height: var(--touch);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
}

.fld__input.mono {
  font-size: var(--t-footnote-size);
}

.fld__affix {
  flex: none;
  color: var(--label-2);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.fld__hint {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.fld.is-error .fld__hint {
  color: var(--loss-text);
}

.fld.is-disabled {
  opacity: 0.5;
}

.srch {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  min-height: var(--touch);
  padding: 0 0 0 var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--sep);
  color: var(--label-2);
}

.srch:focus-within {
  box-shadow: inset 0 0 0 var(--focus-width) var(--focus);
}

.srch__input {
  flex: 1;
  min-width: 0;
  height: var(--touch);
  color: var(--label);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
}

.srch__input::-webkit-search-cancel-button,
.srch__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.srch__clear {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--touch);
  height: var(--touch);
  color: var(--label-2);
}

.srch__kbd {
  flex: none;
  margin-right: var(--sp-3);
  padding: 0 var(--sp-2);
  border-radius: var(--r-xs);
  box-shadow: inset 0 0 0 1px var(--sep);
  color: var(--label-2);
  font-family: var(--font-mono);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
}

/* Галочка «понимаю…» в диалоге двойного подтверждения */
.ack {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--touch);
  padding: var(--sp-2) 0;
  color: var(--label);
  text-align: left;
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.ack__box {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--r-xs);
  box-shadow: inset 0 0 0 2px var(--label-2);
  color: var(--on-loss);
}

.ack.is-on .ack__box {
  background: var(--loss-fill);
  box-shadow: none;
}

/* ── Слои: шторка, диалог, поповер, тосты ──────────────────────────────────── */
.layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  animation: fade-in var(--dur-sheet) var(--ease-standard) both;
}

.layer.is-closing .scrim {
  animation: fade-out var(--dur-sheet) var(--ease-standard) both;
}

.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: var(--sheet-max-h);
  padding-bottom: var(--safe-bottom);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--e3-bg);
  box-shadow: var(--e3-shadow);
  outline: none;
  animation: sheet-in var(--dur-sheet) var(--ease-sheet) both;
}

.layer.is-closing .sheet {
  animation: sheet-out var(--dur-sheet) var(--ease-in) both;
}

.sheet.is-dragging {
  animation: none;
}

.sheet__grab {
  display: flex;
  justify-content: center;
  padding: var(--sp-2) 0 var(--sp-1);
  touch-action: none;
  cursor: grab;
}

.sheet__grab span {
  width: 36px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--label-4);
}

.sheet__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 0 var(--sp-2) var(--sp-3) var(--gutter);
  touch-action: none;
}

.sheet__titles {
  flex: 1;
  min-width: 0;
  padding-top: var(--sp-2);
}

.sheet__sub {
  margin-top: var(--sp-1);
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.sheet__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 0;
  padding: 0 var(--gutter) var(--sp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet__foot {
  padding: var(--sp-3) var(--gutter) var(--sp-4);
  border-top: var(--sep-hairline) solid var(--sep);
}

@media (min-width: 600px) {
  .layer--sheet {
    align-items: center;
    justify-content: center;
    padding: var(--sp-6);
  }
  .sheet {
    width: min(480px, 100%);
    max-height: min(760px, calc(var(--app-height) - var(--sp-12)));
    padding-bottom: 0;
    border-radius: var(--r-xl);
    animation-name: rise-in;
  }
  .sheet.sheet--wide {
    width: min(640px, 100%);
  }
  .layer.is-closing .sheet {
    animation-name: rise-out;
  }
  .sheet__grab {
    display: none;
  }
  .sheet__head {
    padding-top: var(--sp-4);
  }
}

.layer--dialog {
  z-index: var(--z-dialog);
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

.dlg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: min(360px, 100%);
  padding: var(--sp-6) var(--sp-5) var(--sp-4);
  border-radius: var(--r-xl);
  background: var(--e3-bg);
  box-shadow: var(--e3-shadow);
  text-align: center;
  outline: none;
  animation: rise-in var(--dur-status) var(--ease-out) both;
}

.layer.is-closing .dlg {
  animation: rise-out var(--dur-status) var(--ease-in) both;
}

.dlg__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
}

.dlg--danger .dlg__icon {
  background: var(--loss-soft);
  color: var(--loss-text);
}

.dlg__text {
  color: var(--label-2);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.dlg__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.pop {
  position: fixed;
  z-index: var(--z-popover);
  min-width: 220px;
  max-width: min(360px, calc(100vw - var(--sp-4)));
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--e3-bg);
  box-shadow: var(--e3-shadow);
  outline: none;
  animation: rise-in var(--dur-status) var(--ease-out) both;
}

.toast-host {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-3));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--gutter);
  pointer-events: none;
}

.toasts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

@media (min-width: 1024px) {
  .toast-host {
    bottom: var(--sp-6);
  }
}

.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: min(420px, 100%);
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--toast-bg);
  box-shadow: var(--toast-shadow);
  color: var(--label);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
  font-weight: var(--t-caption-wt);
  animation: rise-in var(--dur-status) var(--ease-out) both;
}

.toast--ok .icon { color: var(--win); }
.toast--err .icon { color: var(--loss-text); }
.toast--warn .icon { color: var(--warn); }
.toast--info .icon { color: var(--accent-text); }

/* ── Баннеры ───────────────────────────────────────────────────────────────── */
.banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--gutter);
  background: var(--accent-soft);
  color: var(--label);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.banner > .icon {
  color: var(--accent-text);
}

.banner__text {
  flex: 1;
  min-width: 0;
}

.banner__title {
  margin-right: var(--sp-1);
  font-weight: var(--t-headline-wt);
}

.banner__act {
  flex: none;
  min-height: var(--touch);
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--label);
  font-weight: var(--t-headline-wt);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.banner--paper,
.banner--readonly {
  background: var(--fill-quiet-2);
}

.banner--paper > .icon,
.banner--readonly > .icon {
  color: var(--label-2);
}

.banner--warn { background: var(--warn-soft); }
.banner--warn > .icon { color: var(--warn); }
.banner--danger { background: var(--loss-soft); }
.banner--danger > .icon { color: var(--loss-text); }
.banner--demo { background: var(--hatch-incomplete), var(--warn-soft); }
.banner--demo > .icon { color: var(--warn); }
.banner--ok { background: var(--win-soft); }
.banner--ok > .icon { color: var(--win); }

/* ── Состояния: скелетон, пусто, ошибка, полный экран, замок, разница ─────── */
.skel {
  position: relative;
  display: block;
  flex: none;
  width: var(--w);
  height: var(--h);
  max-width: 100%;
  overflow: hidden;
  background: var(--skeleton-base);
  opacity: 0;
  animation: skel-in var(--dur-fade) var(--ease-standard) var(--delay-skeleton) forwards;
}

.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  transform: translateX(-100%);
  animation: shimmer var(--dur-shimmer) var(--ease-standard) infinite;
}

.skel--xs { border-radius: var(--r-xs); }
.skel--sm { border-radius: var(--r-sm); }
.skel--md { border-radius: var(--r-md); }
.skel--lg { border-radius: var(--r-lg); }
.skel--pill { border-radius: var(--r-pill); }

.skel-lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ringart {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--ra);
  height: var(--ra);
  color: var(--label-2);
}

.ringart__svg {
  position: absolute;
  inset: 0;
}

.ringart__track,
.ringart__arc {
  fill: none;
  stroke-width: 5;
}

.ringart__track {
  stroke: var(--surface-2);
}

.ringart__arc {
  stroke: var(--label-4);
  stroke-linecap: round;
  stroke-dasharray: 38 100;
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
}

.ringart__tick {
  stroke: var(--label-4);
  stroke-width: 2;
  stroke-linecap: round;
}

.ringart--warn {
  color: var(--warn);
}

.ringart--warn .ringart__arc {
  stroke: var(--warn);
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
}

.empty--compact {
  padding: var(--sp-6) var(--sp-4);
}

.empty__title {
  margin-top: var(--sp-2);
}

.empty__text {
  max-width: 36ch;
  color: var(--label-2);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.empty .btn {
  margin-top: var(--sp-2);
}

.fatal {
  position: fixed;
  inset: 0;
  z-index: var(--z-fatal);
  display: grid;
  place-items: center;
  padding: calc(var(--safe-top) + var(--sp-6)) var(--gutter) calc(var(--safe-bottom) + var(--sp-6));
  background: var(--bg);
}

.fatal--contained {
  position: relative;
  inset: auto;
  z-index: auto;
  min-height: 440px;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--sep);
}

.fatal__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  width: min(360px, 100%);
  text-align: center;
}

.fatal__title {
  margin-top: var(--sp-3);
}

.fatal__text,
.fatal__id {
  color: var(--label-2);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.fatal__actions {
  width: 100%;
  margin-top: var(--sp-4);
}

.rol__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 24px;
  margin-bottom: var(--sp-2);
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--fill-quiet-2);
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.rol__body {
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

.diff__list {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.diff__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--touch);
  padding: var(--sp-2) 0;
  border-top: var(--sep-hairline) solid var(--sep);
}

.diff__row:first-child {
  border-top: 0;
}

.diff__k {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.diff__row.is-danger .diff__k {
  color: var(--warn);
}

.diff__v {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  margin: 0;
  color: var(--label-2);
}

.diff__v del {
  color: var(--label-2);
}

.diff__v ins {
  color: var(--label);
  font-weight: var(--t-headline-wt);
  text-decoration: none;
}

.diff__why {
  margin-top: var(--sp-3);
  color: var(--label-2);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.diff__why-k {
  color: var(--label);
  font-weight: var(--t-headline-wt);
}

/* ── Оболочка ──────────────────────────────────────────────────────────────── */
.brand {
  display: block;
  flex: none;
}

.brand__g0 { stop-color: var(--brand-from); }
.brand__g1 { stop-color: var(--brand-mid); }
.brand__g2 { stop-color: var(--brand-to); }

.brand__ticks {
  stroke: var(--s-muted);
  stroke-width: 1.4;
}

.brand__track {
  stroke: var(--surface-2);
  stroke-width: 3.4;
}

.brand__pulse {
  stroke: var(--label);
  stroke-width: 2;
  stroke-linejoin: round;
}

.brand__now {
  fill: var(--ring-now);
}

.wm,
.share {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.wm::after,
.share[data-watermark]::after {
  content: attr(data-watermark);
  position: absolute;
  right: -0.04em;
  bottom: -0.18em;
  z-index: var(--z-watermark);
  color: var(--watermark-ink);
  font-size: var(--watermark-size);
  line-height: 1;
  font-weight: var(--t-large-wt);
  letter-spacing: var(--t-large-tr);
  white-space: nowrap;
  pointer-events: none;
}

.chartslot {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--w);
  height: var(--h);
  max-width: 100%;
  border-radius: var(--r-xs);
  background: var(--hatch-bt), var(--fill-quiet-2);
  box-shadow: inset 0 0 0 1px var(--sep);
}

.chartslot__t {
  padding: 0 var(--sp-2);
  border-radius: var(--r-xs);
  background: var(--surface-1);
  color: var(--label-2);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
}

.shell {
  display: flex;
  min-height: var(--app-height);
}

.shell__rail {
  display: none;
}

.shell__main:has(.hdr__sub) {
  --hdr-extra: var(--touch);
}

.shell__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: var(--app-height);
}

.shell__content {
  flex: 1;
  min-width: 0;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  outline: none;
}

.shell__tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-tabbar);
}

.shell__banners {
  position: sticky;
  top: calc(var(--header-h) + var(--safe-top) + var(--hdr-extra, 0px));
  z-index: var(--z-banner);
}

@media (min-width: 1024px) {
  .shell__rail {
    position: sticky;
    top: 0;
    z-index: var(--z-rail);
    display: block;
    flex: none;
    width: var(--rail-w);
    height: var(--app-height);
  }
  .shell__tabs {
    display: none;
  }
  .shell__content {
    padding-bottom: 0;
  }
}

.skip {
  position: absolute;
  left: var(--sp-2);
  top: var(--sp-2);
  z-index: var(--z-fatal);
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--accent-fill);
  color: var(--on-accent);
  transform: translateY(-200%);
}

.skip:focus-visible {
  transform: none;
}

.hdr {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding-top: var(--safe-top);
  border-bottom: var(--sep-hairline) solid var(--sep);
}

.hdr.is-contained {
  position: relative;
  padding-top: 0;
}

.hdr__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--header-h);
  padding: 0 var(--sp-2) 0 var(--gutter);
}

.hdr__l {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* Вторая строка шапки телефона: стратегия, депозит, рынок (4.15) */
.hdr__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-width: 0;
  min-height: var(--touch);
  padding: 0 var(--sp-2) 0 var(--gutter);
  border-top: var(--sep-hairline) solid var(--sep);
}

.hdr__sub .picker {
  min-width: 0;
}

.hdr__c,
.hdr__r {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
}

.tabbar {
  padding-bottom: var(--safe-bottom);
  border-top: var(--sep-hairline) solid var(--sep);
}

.tabbar.is-contained {
  padding-bottom: 0;
}

.tabbar__list,
.rail__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabbar__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.tab__it,
.rail__it {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-half);
  width: 100%;
  color: var(--label-2);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  font-weight: var(--t-caption-wt);
  text-decoration: none;
}

.tab__it {
  height: var(--tabbar-h);
}

.tab__it.is-on {
  color: var(--accent-text);
}

.tab__it:focus-visible {
  outline-offset: calc(var(--sp-1) * -1);
}

.tab__ic,
.rail__ic {
  position: relative;
  display: grid;
  place-items: center;
}

.tab__t,
.rail__t {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbadge {
  position: absolute;
  top: -4px;
  left: 60%;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--loss-fill);
  color: var(--on-loss);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  font-weight: var(--t-micro-wt);
}

.rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  height: 100%;
  padding: calc(var(--safe-top) + var(--sp-2)) 0 var(--sp-4);
  border-right: var(--sep-hairline) solid var(--sep);
  background: var(--bg);
}

.rail.is-contained {
  height: auto;
}

.rail__brand {
  display: grid;
  place-items: center;
  height: var(--touch);
  margin-bottom: var(--sp-2);
}

.rail__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: 100%;
}

.rail__foot {
  margin-top: auto;
}

.rail__it {
  min-height: 56px;
}

.rail__ic {
  width: 48px;
  height: 32px;
  border-radius: var(--r-pill);
}

.rail__it.is-on {
  color: var(--label);
}

.rail__it.is-on .rail__ic {
  background: var(--accent-soft);
  color: var(--accent-text);
}

@media (hover: hover) {
  .rail__it:hover .rail__ic {
    background: var(--fill-quiet-2);
  }
  .rail__it.is-on:hover .rail__ic {
    background: var(--accent-soft);
  }
}

/* ── Элементы шапки ────────────────────────────────────────────────────────── */
.mkt .seg__opt {
  padding: 0 var(--sp-3);
}

.picker {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
  max-width: 100%;
  min-height: var(--touch);
  padding: 0 var(--sp-2) 0 var(--sp-3);
  color: var(--label);
}

.picker::before {
  content: "";
  position: absolute;
  inset: calc(var(--sp-1) + var(--sp-half)) 0;
  z-index: -1;
  border-radius: var(--r-pill);
  background: var(--fill-quiet-2);
  box-shadow: inset 0 0 0 1px var(--sep);
}

.picker__t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker .icon {
  color: var(--label-2);
}

.picker:focus-visible {
  outline: none;
}

.picker:focus-visible::before {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.plist {
  display: flex;
  flex-direction: column;
  margin: 0 calc(var(--gutter) * -1);
}

.plist__it {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px auto 20px;
  align-items: center;
  gap: var(--sp-3);
  min-height: 60px;
  padding: var(--sp-2) var(--gutter);
  border-top: var(--sep-hairline) solid var(--sep);
  color: var(--label);
  text-align: left;
}

.plist__it:first-child {
  border-top: 0;
}

.plist__it:focus-visible {
  outline-offset: calc(var(--sp-half) * -1);
}

.plist__main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-half);
  min-width: 0;
}

.plist__id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.plist__meta {
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.plist__spark {
  display: flex;
  align-items: center;
  height: 24px;
}

.plist__pnl {
  text-align: right;
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
  font-weight: var(--t-headline-wt);
}

.plist__check {
  color: var(--accent-text);
}

.plist__detail {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.plist__id.is-real {
  color: var(--accent-text);
  font-weight: var(--t-large-wt);
}

/* Рамка «Торгуют в реале»: стратегии live_ready — сверху выбора стратегии и в «Балансе демо» */
.realbox {
  overflow: hidden;
  padding-top: var(--sp-2);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
}

.realbox__h {
  padding: 0 var(--sp-4);
  color: var(--accent-text);
}

.plist .realbox {
  margin: 0 var(--sp-2) var(--sp-2);
}

.plist__row {
  display: flex;
  align-items: stretch;
}

.plist__row > .plist__it {
  flex: 1;
  min-width: 0;
}

.plist__pin {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  border-top: var(--sep-hairline) solid var(--sep);
  color: var(--label-3);
}

.plist__pin.is-on {
  color: var(--accent-text);
}

.conn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
}

.conn__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--conn-ok);
}

.conn__dot.anim-loop {
  --loop: pulse-o var(--dur-conn-pulse) var(--ease-standard) infinite;
}

.conn--lag .conn__dot { background: var(--conn-lag); }
.conn--down .conn__dot { background: var(--conn-down); }

.ping {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
  height: 24px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
  white-space: nowrap;
}

button.ping {
  height: auto;
  min-height: var(--touch);
}

.ping__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--label-4);
}

.ping--win .ping__dot { background: var(--win); }
.ping--win .num { color: var(--win); }
.ping--warn .ping__dot { background: var(--warn); }
.ping--warn .num { color: var(--warn); }
.ping--loss .ping__dot { background: var(--loss); }
.ping--loss .num { color: var(--loss-text); }

.engine {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
  min-width: 0;
  height: 24px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--fill-quiet-2);
  color: var(--label);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
  font-weight: var(--t-caption-wt);
  white-space: nowrap;
}

.engine__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--be);
}

.engine__dot.anim-loop {
  --loop: pulse-o var(--dur-conn-pulse) var(--ease-standard) infinite;
}

.engine--win .engine__dot { background: var(--win); }
.engine--warn { background: var(--warn-soft); }
.engine--warn .engine__dot { background: var(--warn); }
.engine--loss .engine__dot { background: var(--loss); }
.engine--loss { background: var(--loss-soft); color: var(--loss-text); }

.engine--dot {
  justify-content: center;
  width: 24px;
  padding: 0;
  background: transparent;
}

.engine--halted .engine__w {
  font-weight: var(--t-micro-wt);
  letter-spacing: var(--t-micro-tr);
}

.engine__d {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--label-2);
}

.engine--loss .engine__d {
  color: var(--loss-text);
}

.dep {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
  white-space: nowrap;
}

.dep b {
  font-size: var(--t-headline-size);
  line-height: var(--t-headline-lh);
  font-weight: var(--t-headline-wt);
}

.dep__since {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.stop-ask {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.stop-ask__t {
  color: var(--label-2);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.stop-ask__wait {
  color: var(--label-2);
  text-align: center;
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.stop-res {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

.stop-res__ic {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--sp-2);
  border-radius: 50%;
  background: var(--win-soft);
  color: var(--win);
}

.stop-res--alarm .stop-res__ic {
  background: var(--loss-soft);
  color: var(--loss-text);
}

.stop-res__t,
.stop-res__m {
  color: var(--label-2);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.stop-res__t b {
  color: var(--label);
}

.stop-res .btn:first-of-type {
  margin-top: var(--sp-3);
}

/* ── Числа: KPI, hero, ✓/X, кольцо, тикер, стакан ──────────────────────────── */
.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--e1-bg);
  box-shadow: var(--e1-shadow);
  color: var(--label);
  text-align: left;
}

.kpi__label {
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.kpi__val {
  white-space: normal;             /* внутри чисел пробелы неразрывные: переносится только между частями */
  font-size: var(--t-title1-size);
  line-height: var(--t-title1-lh);
  font-weight: var(--t-title1-wt);
  letter-spacing: var(--t-title1-tr);
}

.kpi__unit {
  color: var(--label-2);
  font-size: var(--t-subhead-size);
  font-weight: var(--t-caption-wt);
  letter-spacing: 0;
}

.kpi__sub {
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.kpi__chart {
  display: block;
  margin-top: var(--sp-2);
}

.kpi--loading .skel + .skel {
  margin-top: var(--sp-2);
}

.kpi--empty .kpi__val,
.kpi--stale .kpi__val {
  color: var(--label-3);
}

.kpi--btn {
  width: 100%;
  transition: transform var(--dur-press) var(--ease-standard);
}

.kpi--btn:active {
  transform: scale(var(--press-scale));
}

@media (min-width: 1024px) {
  .kpi {
    padding: var(--sp-5);
  }
}

.hero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.hero__label,
.hero__sub {
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.hero__label {
  color: var(--label-2);
}

.odo {
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--num-features);
  white-space: nowrap;
}

.odo__d {
  display: inline-block;
  height: var(--t-hero-lh);
  overflow: hidden;
}

.odo__strip {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--d) * -10%));
}

.odo__strip span {
  display: block;
  height: var(--t-hero-lh);
}

.odo--anim .odo__strip {
  transition: transform var(--dur-odometer) var(--ease-out);
}

.wl {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.wl__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.wl__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-half);
}

.wl__side--l {
  align-items: flex-end;
  text-align: right;
}

.wl__n {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--t-headline-size);
  line-height: var(--t-headline-lh);
  font-weight: var(--t-headline-wt);
}

.wl__side--w { color: var(--win); }
.wl__side--l { color: var(--loss-text); }

.wl__sep {
  color: var(--label-2);
}

.wl__be {
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.wl__bar {
  display: flex;
  gap: var(--sp-half);
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
}

.wl__seg {
  display: block;
  flex-basis: 0;
  min-width: 4px;
}

.wl__seg--w { background: var(--win); }
.wl__seg--be { background: var(--be); }
.wl__seg--l { background: var(--window-loss-bar); }

.ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--ring);
  height: var(--ring);
}

.ring svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.ring__g0 { stop-color: var(--ring-from); }
.ring__g1 { stop-color: var(--ring-to); }

.ring__tick {
  stroke: var(--ring-tick);
  stroke-width: 2;
  stroke-linecap: round;
}

.ring__track {
  fill: none;
  stroke: var(--ring-track);
  stroke-width: 8;
}

.ring__arc {
  fill: none;
  stroke: var(--ring-from);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  transition: stroke-dashoffset var(--dur-ring-step) var(--ease-linear);
}

.ring__arc.anim-loop {
  --loop: pulse-o var(--dur-pulse) var(--ease-standard) infinite;
}

.ring--entry .ring__arc { stroke: var(--ring-entry); }

.ring--resolving .ring__arc {
  stroke: var(--ring-resolving);
  stroke-linecap: butt;
  stroke-dasharray: 2 2.5;
}

.ring--done .ring__arc { stroke: var(--label-4); }

.ring__entry {
  stroke: var(--label);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.ring__pos {
  fill: var(--accent-2);
  stroke: var(--bg);
  stroke-width: 2;
}

.ring__now {
  transform-origin: 60px 60px;
  transition: transform var(--dur-ring-step) var(--ease-linear);
}

.ring__now circle {
  fill: var(--ring-now);
  stroke: var(--bg);
  stroke-width: 2;
}

.ring--sm .ring__track,
.ring--sm .ring__arc {
  stroke-width: 14;
}

.ring--sm .ring__tick,
.ring--sm .ring__entry,
.ring--sm .ring__now {
  display: none;
}

.ring__c {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ring__c b {
  font-size: var(--t-title1-size);
  line-height: var(--t-title1-lh);
  font-weight: var(--t-title1-wt);
  letter-spacing: var(--t-title1-tr);
}

.ring__c span {
  color: var(--label-2);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
}

.tick {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.tick__tail {
  position: relative;
  border-radius: var(--r-xs);
}

.tick__tail::after {
  content: "";
  position: absolute;
  inset: 0 calc(var(--sp-half) * -1);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.tick__tail.is-up::after {
  background: var(--win-soft);
  animation: flash var(--dur-flash-fade) var(--ease-in) var(--dur-flash) both;
}

.tick__tail.is-down::after {
  background: var(--loss-soft);
  animation: flash var(--dur-flash-fade) var(--ease-in) var(--dur-flash) both;
}

.tick__arr {
  align-self: center;
  margin-left: var(--sp-half);
}

.book {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--e1-bg);
  box-shadow: var(--e1-shadow);
  color: var(--label);
  text-align: left;
}

.book__head {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.book__tri { color: var(--s-up); }
.book--down .book__tri { color: var(--s-down); }

.book__name {
  font-weight: var(--t-headline-wt);
}

.book__bid {
  margin-left: auto;
  color: var(--label-2);
}

.book__ask {
  font-size: var(--t-title1-size);
  line-height: var(--t-title1-lh);
  font-weight: var(--t-title1-wt);
  letter-spacing: var(--t-title1-tr);
}

.book__lv {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.book__l {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 40px;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
}

.book__p,
.book__sz {
  color: var(--label-2);
}

.book__sz {
  text-align: right;
}

.book__bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--fill-quiet-2);
}

.book__bar i {
  display: block;
  width: calc(var(--f) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--s-up);
}

.book--down .book__bar i {
  background: repeating-linear-gradient(90deg, var(--s-down) 0 5px, transparent 5px 7px);
}

.book.is-stale .num {
  color: var(--label-3);
}

/* ── Карточка окна и сетка суток ───────────────────────────────────────────── */
.wc {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
  row-gap: var(--sp-2);
  min-width: 0;
  height: var(--wc-h);
  padding: calc(var(--bar-h) + var(--sp-3)) var(--sp-4) var(--sp-3);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--e1-bg);
  box-shadow: var(--e1-shadow);
}

.wc__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bar-h);
  background: var(--surface-3);
}

.wc--win .wc__bar { background: var(--win); }
.wc--loss .wc__bar { background: var(--window-loss-bar); }
.wc--be .wc__bar,
.wc--split .wc__bar { background: var(--be); }
.wc--active .wc__bar { background: linear-gradient(90deg, var(--ring-from), var(--ring-to)); }
.wc--awaiting .wc__bar { background: var(--resolving); }
.wc--none .wc__bar { background: transparent; }

.wc.is-prov .wc__bar {
  -webkit-mask: repeating-linear-gradient(90deg, var(--label) 0 10px, transparent 10px 14px);
  mask: repeating-linear-gradient(90deg, var(--label) 0 10px, transparent 10px 14px);
}

.wc.is-active {
  box-shadow: var(--e1-shadow), var(--glow-active);
}

.wc--win {
  box-shadow: var(--e1-shadow), var(--glow-win);
}

.wc--win.is-prov {
  box-shadow: var(--e1-shadow);
}

.wc.is-bt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hatch-bt);
  opacity: 0.6;
  pointer-events: none;
}

.wc.has-issue .wc__bar {
  background: var(--hatch-incomplete), var(--warn-soft);
}

.wc__r1,
.wc__r2,
.wc__r3,
.wc__r4 {
  display: flex;
  align-items: center;
  min-width: 0;
}

.wc__r1 {
  gap: var(--sp-2);
  height: 24px;
}

.wc__time {
  flex: none;
  color: var(--label);
  font-size: var(--t-headline-size);
  line-height: var(--t-headline-lh);
  font-weight: var(--t-headline-wt);
  letter-spacing: var(--t-headline-tr);
  text-decoration: none;
}

.wc__time::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
}

.wc__time:focus-visible {
  outline: none;
}

.wc__time:focus-visible::after {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: calc(var(--focus-width) * -1);
}

@media (hover: hover) {
  .wc__time:hover {
    text-decoration: none;
  }
  .wc:hover {
    box-shadow: var(--e1-shadow), inset 0 0 0 1px var(--sep);
  }
  .wc.is-active:hover {
    box-shadow: var(--e1-shadow), var(--glow-active);
  }
}

.wc__date {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--label-2);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
  font-weight: var(--t-footnote-wt);
}

.wc__st {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
  margin-left: auto;
}

.wc__r2 {
  gap: var(--sp-half);
  height: 20px;
}

.wc__slug {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--label-2);
}

.wc__copy {
  position: relative;
  z-index: var(--z-raised);
  margin: calc(var(--sp-3) * -1) calc(var(--sp-2) * -1);
}

.wc__pm {
  position: relative;
  z-index: var(--z-raised);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
  min-height: var(--touch);
  margin: calc(var(--sp-3) * -1) 0 calc(var(--sp-3) * -1) auto;
  padding-left: var(--sp-3);
  color: var(--accent-text);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
  font-weight: var(--t-caption-wt);
  white-space: nowrap;
}

.wc__r3 {
  gap: var(--sp-3);
  height: 20px;
  overflow: hidden;
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
  white-space: nowrap;
}

.wc__side {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
  flex: none;
  color: var(--label);
  font-weight: var(--t-headline-wt);
}

.wc__side--up .icon { color: var(--s-up); }
.wc__side--down .icon { color: var(--s-down); }

.wc__kv {
  flex: none;
}

.wc__kv b {
  color: var(--label);
  font-weight: var(--t-headline-wt);
}

.wc__watch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
}

.wc__reason {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wc__issue {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
  color: var(--warn);
}

.wc__r4 {
  gap: var(--sp-3);
  align-self: end;
  height: 28px;
}

.wc__id {
  flex: none;
  color: var(--label-3);
}

.wc__spark {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 28px;
}

.wc__res {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
  font-size: var(--t-title3-size);
  line-height: var(--t-title3-lh);
  font-weight: var(--t-title3-wt);
  letter-spacing: var(--t-title3-tr);
}

.wc__res--win { color: var(--win); }
.wc__res--loss { color: var(--label-2); }
.wc__res--loss .wc__mark { color: var(--loss); }
.wc__res--be { color: var(--label-2); }
.wc__res--none { color: var(--label-3); }
.wc__res--wait { color: var(--resolving-text); }

.is-loss-sign {
  color: var(--loss);
}

.wc__res--live {
  color: var(--label);
  font-size: var(--t-headline-size);
  line-height: var(--t-headline-lh);
}

.wc__left,
.wc__be,
.wc__prov {
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
  font-weight: var(--t-footnote-wt);
}

.wc__left,
.wc__be {
  color: var(--label-2);
}

.wc__prov {
  color: var(--warn);
}

.wc--skel .wc__r1,
.wc--skel .wc__r2,
.wc--skel .wc__r3 {
  gap: var(--sp-3);
}

.dg {
  display: flex;
  flex-direction: column;
  gap: var(--sp-half);
  min-width: 0;
}

.dg__row {
  display: grid;
  grid-template-columns: 22px repeat(var(--per), minmax(0, 28px)) minmax(64px, 1fr);
  align-items: center;
  gap: var(--sp-half);
}

.dg__h {
  color: var(--label-3);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
}

.dg__sum {
  text-align: right;
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
}

.dgc {
  position: relative;
  display: block;
  aspect-ratio: 1;
  min-height: 14px;
  border-radius: var(--r-xs);
  background: var(--fill-quiet);
  cursor: pointer;
}

.dgc--win { background: var(--win); }
.dgc--loss { background: var(--window-loss-bar); }
.dgc--be { background: var(--be); }
.dgc--awaiting { background: var(--resolving); }
.dgc--missing { background: var(--hatch-incomplete), var(--fill-quiet-2); }

.dgc--future {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sep);
  cursor: default;
}

.dgc--active {
  background: var(--accent);
  box-shadow: var(--glow-active);
}

/* Цвет не единственный признак: у выигрыша точка, у проигрыша черта «−» */
.dgc__m {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: var(--bg);
  transform: translate(-50%, -50%);
}

.dgc--loss::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 28%;
  right: 28%;
  height: 2px;
  background: var(--bg);
  transform: translateY(-50%);
}

.dgc:focus-visible {
  z-index: var(--z-raised);
  outline-offset: 1px;
}

.dg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.dg-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.dgc--key {
  width: 14px;
  height: 14px;
  min-height: 0;
  cursor: default;
}

.dg-legend__n {
  color: var(--label);
}

/* ── Данные: таблица, виртуальный список, сканер, логи, JSON, журнал ─────────── */
/* Контейнеры с прокруткой — position: relative: иначе абсолютные .sr-only внутри выходят из-под обрезки
 * и расширяют страницу (горизонтальная прокрутка на телефоне). */
.tbl-wrap {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--r-lg);
  background: var(--e1-bg);
  box-shadow: var(--e1-shadow);
}

.tbl-wrap:focus-visible {
  outline-offset: var(--sp-half);
}

.tbl {
  width: 100%;
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.tbl th,
.tbl td {
  padding: var(--sp-3);
  border-bottom: var(--sep-hairline) solid var(--sep);
  text-align: left;
  white-space: nowrap;
}

.tbl th {
  position: sticky;
  top: 0;
  height: var(--touch);
  padding-block: 0;
  background: var(--e1-bg);
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
  font-weight: var(--t-caption-wt);
}

.tbl th:first-child,
.tbl td:first-child {
  padding-left: var(--sp-4);
}

.tbl th:last-child,
.tbl td:last-child {
  padding-right: var(--sp-4);
}

.tbl tbody tr:last-child td {
  border-bottom: 0;
}

.tbl .is-end {
  text-align: right;
}

.tbl--dense td {
  padding-block: var(--sp-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.tbl__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
  min-width: var(--touch);
  min-height: var(--touch);
  color: inherit;
  font: inherit;
}

.tbl__sort.is-on {
  color: var(--label);
}

.tbl tr.is-click {
  cursor: pointer;
}

@media (hover: hover) {
  .tbl tr.is-click:hover td {
    background: var(--fill-quiet-2);
  }
}

.tbl tr.is-click:focus-visible {
  outline-offset: calc(var(--focus-width) * -1);
}

.tbl__empty {
  padding: var(--sp-6) var(--sp-4);
  color: var(--label-2);
  text-align: center;
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.tbl__cap {
  padding: var(--sp-3) var(--sp-4) 0;
  color: var(--label-2);
  text-align: left;
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.vl {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.vl__space {
  position: relative;
  width: 100%;
}

.vl__row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  contain: layout paint;
}

.scantbl {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--e1-bg);
  box-shadow: var(--e1-shadow);
}

.scantbl__sum {
  padding: var(--sp-3) var(--sp-4);
  color: var(--label-2);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.scantbl__sum b {
  color: var(--label);
}

.scan {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: var(--sep-hairline) solid var(--sep);
}

.scan__id {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  grid-column: 1 / 4;
  grid-row: 1;
  min-width: 0;
}

.scan__id .mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.scan__mkt {
  flex: none;
  padding: 0 var(--sp-1);
  border-radius: var(--r-xs);
  box-shadow: inset 0 0 0 1px var(--sep);
  color: var(--label-2);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
}

.scan__spark {
  display: flex;
  align-items: center;
  grid-column: 4 / 5;
  grid-row: 1;
  min-width: 0;
  height: 24px;
}

.scan__ph {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  grid-column: 1 / -1;
  min-width: 0;
}

.scan__why {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.scan__conds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  grid-column: 1 / -1;
  min-width: 0;
}

.scan__kv {
  display: flex;
  flex-direction: column;
  gap: var(--sp-half);
  min-width: 0;
}

.scan__k {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--label-2);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
}

.scan__kv b {
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
  font-weight: var(--t-headline-wt);
}

@media (min-width: 1024px) {
  .scan {
    grid-template-columns: 176px 232px minmax(0, 1fr) 80px 48px 80px 88px 96px;
    align-items: center;
  }
  .scan__id,
  .scan__ph,
  .scan__conds,
  .scan__spark {
    grid-column: auto;
    grid-row: auto;
  }
}

.cond {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 24px;
  padding: 0 var(--sp-1) 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--fill-quiet-2);
  color: var(--label);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
  white-space: nowrap;
}

.cond__k {
  color: var(--label-2);
}

.cond__v {
  white-space: nowrap;
}

.cond.is-ok .icon { color: var(--win); }
.cond.is-no .icon { color: var(--label-2); }

.logs {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--e1-bg);
  box-shadow: var(--e1-shadow);
}

.logs__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: calc(var(--touch) + var(--sp-2));
  padding: 0 var(--sp-2);
  border-bottom: var(--sep-hairline) solid var(--sep);
}

.live {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
  font-weight: var(--t-headline-wt);
}

.live.is-on {
  color: var(--accent-text);
}

.live__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.live__dot.anim-loop {
  --loop: pulse-o var(--dur-conn-pulse) var(--ease-standard) infinite;
}

.logs__n {
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.logs__new {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--touch);
  margin-left: auto;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--accent-fill);
  color: var(--on-accent);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
  font-weight: var(--t-headline-wt);
}

.logs__list {
  background: var(--bg);
}

.logl {
  display: grid;
  grid-template-columns: 64px 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  height: 100%;
  padding: 0 var(--sp-3);
  color: var(--label);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-mono-size);
  line-height: var(--t-mono-lh);
  white-space: nowrap;
}

.logl > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logl__t { color: var(--label-3); }
.logl__s { color: var(--label-2); }
.logl.is-warn .logl__x { color: var(--warn); }
.logl.is-err .logl__x { color: var(--loss-text); }
.logl.is-trade .logl__x { color: var(--win); }

@media (hover: hover) {
  .logl:hover {
    background: var(--fill-quiet-2);
  }
}

.logl:focus-visible {
  outline-offset: calc(var(--focus-width) * -1);
}

.json {
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--sep);
}

.json__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--sp-3);
  border-bottom: var(--sep-hairline) solid var(--sep);
}

.json__t {
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.json__pre {
  position: relative;
  max-height: 320px;
  margin: 0;
  padding: var(--sp-3);
  overflow: auto;
  color: var(--label);
  white-space: pre;
  tab-size: 2;
}

.j-k { color: var(--label-2); }
.j-s { color: var(--accent-2); }
.j-n { color: var(--label); }
.j-b { color: var(--warn); }
.j-z { color: var(--label-3); }

.jc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--e1-bg);
  box-shadow: var(--e1-shadow);
}

.jc__r1,
.jc__r2,
.jc__r4 {
  display: flex;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  min-width: 0;
}

.jc__r1 .status {
  margin-left: auto;
}

.jc__id {
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.jc__pm {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--touch);
  margin: calc(var(--sp-3) * -1) 0;
  color: var(--accent-text);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
  font-weight: var(--t-caption-wt);
}

.jc__r2 {
  flex-wrap: wrap;
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.jc__dim {
  color: var(--label-2);
}

.jc__wr {
  margin-left: auto;
  font-weight: var(--t-micro-wt);
}

.jc__wr--win { color: var(--win); }
.jc__wr--loss { color: var(--loss); }
.jc__wr--be { color: var(--label-2); }

.jc__kv {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
}

.jc__kv dt {
  color: var(--label-2);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
}

.jc__kv dd {
  margin: 0;
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
  font-weight: var(--t-headline-wt);
}

.jc__r4 {
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

/* ── Доступ ────────────────────────────────────────────────────────────────── */
.prow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 60px;
  padding: var(--sp-2) 0;
}

.ava,
.devic {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
}

.ava {
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--label);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
  font-weight: var(--t-headline-wt);
}

.ava__on {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--win);
  box-shadow: 0 0 0 2px var(--surface-1);
}

.devic {
  border-radius: var(--r-sm);
  background: var(--fill-quiet-2);
  color: var(--label-2);
}

.prow__main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-half);
  flex: 1;
  min-width: 0;
}

.prow__name,
.prow__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prow__name {
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
  font-weight: var(--t-caption-wt);
}

.prow__sub {
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.qr__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--qr);
  height: var(--qr);
}

.qr__timer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.qr__timer .ring__track {
  stroke-width: 4;
}

.qr__arc {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  transition: stroke-dashoffset var(--dur-ring-step) var(--ease-linear);
}

.qr__code {
  width: 62%;
  height: 62%;
}

/* QR от сервера: светлые модули на прозрачном — фон тёмный */
.qr__code--svg {
  display: grid;
  place-items: center;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--bg);
}

.qr__code--svg svg {
  width: 100%;
  height: 100%;
}

.qr__bg { fill: var(--knob); }
.qr__m { fill: var(--bg); }

.qr--expired .qr__code,
.qr--done .qr__code {
  opacity: 0.12;
}

.qr--done .qr__arc {
  opacity: 0;
}

.qr__over {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.qr__over--ok {
  color: var(--win);
}

.qr__cap {
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.qr__cap b {
  color: var(--label);
}

.invite {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.invite__f {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.invite__k {
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
  font-weight: var(--t-caption-wt);
}

.invite__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-left: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--sep);
}

.invite__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Календарь периода ─────────────────────────────────────────────────────── */
.cal {
  display: flex;
  flex-direction: column;
}

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cal__m {
  font-size: var(--t-headline-size);
  line-height: var(--t-headline-lh);
  font-weight: var(--t-headline-wt);
}

.cal__wd,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal__wd span {
  padding: var(--sp-1) 0;
  color: var(--label-2);
  text-align: center;
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
}

.cal__d {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: var(--touch);
  color: var(--label);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.cal__d::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 50%;
  z-index: -1;
  width: 40px;
  border-radius: var(--r-pill);
  transform: translateX(-50%);
}

.cal__d.is-out {
  color: var(--label-2);
}

.cal__d.is-mid::after,
.cal__d.is-from::after,
.cal__d.is-to::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  right: 0;
  z-index: -2;
  background: var(--accent-soft);
}

.cal__d.is-from::after { left: 50%; }
.cal__d.is-to::after { right: 50%; }

.cal__d.is-edge {
  color: var(--on-accent);
  font-weight: var(--t-headline-wt);
}

.cal__d.is-edge::before {
  background: var(--accent-fill);
}

.cal__d:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (hover: hover) {
  .cal__d:not(:disabled):not(.is-edge):hover::before {
    background: var(--fill-quiet);
  }
}

.cal__d:focus-visible {
  outline: none;
}

.cal__d:focus-visible::before {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--sp-half);
}

/* ── ShareCard 360 × 450 ───────────────────────────────────────────────────── */
.share {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 360px;
  max-width: 100%;
  height: 450px;
  margin: 0;
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--e1-bg);
  box-shadow: var(--e1-shadow);
}

.share__top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.share__title {
  flex: 1;
  font-size: var(--t-headline-size);
  line-height: var(--t-headline-lh);
  font-weight: var(--t-headline-wt);
}

.share__hero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-half);
}

.share__date,
.share__sub,
.share__foot {
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.share__val {
  font-size: var(--t-hero-size);
  line-height: var(--t-hero-lh);
  font-weight: var(--t-hero-wt);
  letter-spacing: var(--t-hero-tr);
}

.share__chart {
  display: flex;
  flex: 1;
  min-height: 0;
}

.share__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}

.share__tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-half);
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--bg);
}

.share__k,
.share__s {
  color: var(--label-2);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
}

.share__v {
  font-size: var(--t-headline-size);
  line-height: var(--t-headline-lh);
  font-weight: var(--t-headline-wt);
}

/* ── Меню и списки (MenuRow) ───────────────────────────────────────────────── */
.mlist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.mlist__h {
  padding: 0 var(--sp-4);
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
  font-weight: var(--t-caption-wt);
}

.mlist__ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--e1-bg);
  box-shadow: var(--e1-shadow);
  list-style: none;
}

.mlist__note {
  padding: 0 var(--sp-4);
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.mrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: calc(var(--touch) + var(--sp-1));
  padding: var(--sp-2) var(--sp-4);
  color: var(--label);
  text-align: left;
  text-decoration: none;
}

.mlist__ul > li + li .mrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--sp-4);
  right: 0;
  border-top: var(--sep-hairline) solid var(--sep);
}

.mlist__ul > li + li .mrow:has(.mrow__ic)::before {
  left: calc(var(--sp-4) + 32px + var(--sp-3));
}

.mrow__ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--fill-quiet-2);
  color: var(--label-2);
}

.mrow__t {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.mrow__title,
.mrow__sub {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrow__title {
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
}

.mrow__sub {
  color: var(--label-2);
  font-size: var(--t-footnote-size);
  line-height: var(--t-footnote-lh);
}

.mrow__v {
  flex: none;
  color: var(--label-2);
  font-size: var(--t-subhead-size);
  line-height: var(--t-subhead-lh);
}

.mrow__chev {
  flex: none;
  color: var(--label-3);
}

.mrow--danger .mrow__title,
.mrow--danger .mrow__ic {
  color: var(--loss-text);
}

.mrow--accent .mrow__title {
  color: var(--accent-text);
}

.mrow.is-disabled {
  opacity: 0.45;
}

.mrow--act:active {
  background: var(--fill-quiet-2);
}

.mrow--act:focus-visible {
  outline-offset: calc(var(--focus-width) * -1);
}

@media (hover: hover) {
  .mrow--act:hover {
    background: var(--fill-quiet-2);
  }
}

/* ── Движение событий (5.3, TD.3) ──────────────────────────────────────────── */
/* Смена статуса карточки 220 мс; выигрыш — блик 900 мс и «поп» ✓; проигрыш — затухание без тряски */
/* Блик — полоса в половину карточки проходит её целиком и равномерно */
.wc__shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-raised);
  width: 50%;
  background: linear-gradient(105deg, transparent 0%, var(--win-shine) 50%, transparent 100%);
  pointer-events: none;
  transform: translateX(-100%);
  animation: shine var(--dur-win-shine) var(--ease-linear) forwards;
}

@keyframes shine {
  to { transform: translateX(200%); }
}

@keyframes pop {
  50% { transform: scale(var(--pop-scale)); }
}

@keyframes enter {
  from { opacity: 0; transform: translateY(calc(var(--flip-shift) * -1)); }
}

.wc.fx-win .wc__mark {
  animation: pop var(--dur-pop) var(--ease-pop);
}

.wc.fx-loss .wc__res,
.wc.fx-loss .wc__bar {
  animation: fade-in var(--dur-status) var(--ease-in) both;
}

.wc.fx-status .status,
.wc.fx-win .status,
.wc.fx-loss .status {
  animation: fade-in var(--dur-status) var(--ease-standard) both;
}

/* Новое окно в ленте въезжает на 8 px (анимируем содержимое строки) */
.vl__row.is-enter > * {
  animation: enter var(--dur-status) var(--ease-out) both;
}

/* Смена экрана — View Transitions (320 мс; в «меньше движения» — 120 мс, это обычное затухание) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-view);
  animation-timing-function: var(--ease-standard);
}

/* «Развёртка» сканера (4.3): раз в тик тонкая линия проходит таблицу; в .lite и «меньше движения» её нет */
.sweep {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  border-right: var(--sp-half) solid var(--accent-soft);
  pointer-events: none;
  transform: translateX(-100%);
  animation: sweep var(--dur-ring-step) var(--ease-linear) both;
}

@keyframes sweep {
  to { transform: translateX(0); }
}

:root.lite .sweep,
:root[data-motion="reduce"] .sweep {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  :root .sweep {
    display: none;
  }
}

/* Вкладка скрыта или Mini App неактивна — петли стоят */
:root[data-paused] .anim-loop,
:root[data-paused] .spin,
:root[data-paused] .skel::after {
  animation-play-state: paused;
}

/* ── «Меньше движения»: петли выключены, шторки — затухание, у тикера только значение ── */
@media (prefers-reduced-motion: reduce) {
  :root .anim-loop,
  :root .spin,
  :root .skel::after {
    animation: none;
  }
  :root .tick__arr {
    display: none;
  }
  :root .sheet,
  :root .dlg,
  :root .pop,
  :root .toast {
    animation-name: fade-in;
  }
  :root .layer.is-closing .sheet,
  :root .layer.is-closing .dlg {
    animation-name: fade-out;
  }
}

:root[data-motion="reduce"] .anim-loop,
:root[data-motion="reduce"] .spin,
:root[data-motion="reduce"] .skel::after {
  animation: none;
}

:root[data-motion="reduce"] .tick__arr {
  display: none;
}

:root[data-motion="reduce"] .sheet,
:root[data-motion="reduce"] .dlg,
:root[data-motion="reduce"] .pop,
:root[data-motion="reduce"] .toast {
  animation-name: fade-in;
}

:root[data-motion="reduce"] .layer.is-closing .sheet,
:root[data-motion="reduce"] .layer.is-closing .dlg {
  animation-name: fade-out;
}