/* © SNDR FX 2026 — All rights reserved · проприетарный код, копирование запрещено */
/* ───────────── Меню на слайде 3 (Phoenix-стиль) ─────────────
   Полноэкранное «пространство»: карточка с навигацией слева
   и контентом справа. Все цвета — из темы. */

.menu-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 0;
  overflow: hidden;
}

/* ─── горизонтальный трек слайда 0: главная | меню ─── */
.h-track {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  min-height: 0;
  /* transition только во время анимации меню (ставит JS), а не при смене
     headerPos/sidePos — иначе блок настроек «плывёт» при перестройке макета */
}
.h-screen {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.h-screen .main { flex: 1; min-height: 0; height: 100%; }

/* Старого h-слайда больше нет (класс .app.h-menu нигде не ставится):
   шапка и бургер при открытом оверлее не схлопываются — меню живёт
   поверх главной. Мёртвые правила слайда удалены. */

/* также защищаем ws-viewport на главном рабочем столе от смены направления */
.app[data-header="left"] .ws-viewport,
.app[data-header="right"] .ws-viewport {
  min-width: 0;
  /* layout.css уже ставит это, но дублируем для надёжности */
}

.sm-card {
  width: 100%;
  height: 100%;
  display: flex;
  background: var(--surface);
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

/* ─── левая навигация ─── */
.sm-nav {
  width: 264px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.sm-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -2px;
  padding: 0 10px 14px;
   font-family: var(--font-display);
   font-size: var(--fs-display);
   font-weight: var(--fw-display);
   color: var(--text-primary);
   letter-spacing: var(--ls-display);
}
.sm-logo > span:first-child {
   display: inline-flex;
   align-items: center;
   line-height: 1;
}
.sm-logo-badge {
   display: inline-flex;
   align-items: center;
   align-self: center;
   gap: 6px;
   margin: 0;
   font-family: var(--font);
   font-size: var(--fs-micro);
   font-weight: var(--fw-h);
   letter-spacing: 0.8px;
   text-transform: uppercase;
   line-height: 1;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sm-logo-badge.free {
  background: var(--menu-hover);
  color: var(--text-secondary);
}
.sm-logo-badge.trial {
  background: rgba(242, 169, 80, 0.15);
  color: #F2A950;
}
.sm-logo-badge.pro {
  background: var(--accent);
  border-color: transparent;
  color: var(--bg);
}
.sm-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--menu-hover);
  border: none;
  border-radius: 10px;
  padding: 7px 10px;
  margin-bottom: 10px;
}
.sm-search:focus-within { background: var(--surface-hover); }
.sm-search svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  flex-shrink: 0;
}
.sm-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--fs-body);
  outline: none;
}
.sm-search input::placeholder { color: var(--text-muted); }
.sm-group {
  margin-top: 10px;
  font-size: var(--fs-mini);
   font-weight: var(--fw-small);
  color: var(--text-muted);
  padding: 0 10px 4px;
}
.sm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: var(--fs-body);
   font-weight: var(--fw-small);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition);
}
.sm-item:hover { background: var(--menu-hover); color: var(--text-primary); }
.sm-item.active { background: var(--surface-hover); color: var(--text-primary); }
.sm-item svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.sm-item.hide { display: none; }
.sm-group.hide { display: none; }
/* замочек закрытого для Free раздела — справа, приглушённый.
   В ужатом режиме (только иконки) прячется вместе с подписью. */
.sm-item-lock {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  color: var(--text-muted);
  opacity: 0.85;
}
.sm-item-lock svg {
  width: 12px;
  height: 12px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sm-item-lock.off { display: none; }
/* Замороженный для Free контрол настроек: замок виден, клика нет вообще
   (мышь + клавиатура), paywall-баннер из настроек не выбрасываем. */
.sm-frozen { pointer-events: none !important; opacity: .55; }

/* ─── правый контент ─── */
.sm-content {
  flex: 1;
  min-width: 0;
  padding: 32px 44px;
  overflow-y: auto;
}
.sm-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sm-title {
   font-size: var(--fs-title);
   font-weight: var(--fw-title);
   letter-spacing: var(--ls-title);
   color: var(--text-primary);
}
.sm-sub-badge {
   font-size: var(--fs-mini);
   font-weight: var(--fw-h);
   letter-spacing: 0.3px;
   text-transform: uppercase;
   padding: 2px 8px;
   border-radius: 999px;
   white-space: nowrap;
   font-family: var(--font-mono);
}
.sm-sub-badge.free {
  background: var(--menu-hover);
  color: var(--text-secondary);
  border: none;
}
.sm-sub-badge.trial {
  background: rgba(242, 169, 80, 0.15);
  color: #F2A950;
  border: none;
}
.sm-sub-badge.pro {
  background: rgba(74, 222, 128, 0.15);
  color: #4ADE80;
  border: none;
}
/* Верхние табы-переключатели удалены: навигация — только столбик слева. */

/* строки настроек: подпись слева, контрол справа.
   Единый ритм: 13px вертикали, разделитель между строками,
   контрол прижат вправо (margin-left:auto) и вертикально по центру. */
.sm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.sm-row:last-child { border-bottom: none; }
.sm-row > div:first-child { min-width: 0; flex: 1; }
.sm-label { font-size: var(--fs-body); font-weight: var(--fw-body); color: var(--text-primary); }
.sm-hint { margin-top: 2px; font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.45; }
.sm-ctl { flex-shrink: 0; margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 150px; justify-content: flex-end; }

/* тоггл в духе референса */
.sm-toggle {
  width: 40px;
  height: 23px;
  border-radius: 999px;
  border: none;
  background: var(--menu-hover);
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease;
}
.sm-toggle span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: left 0.15s ease, background 0.15s ease;
}
.sm-toggle.on { background: var(--accent); border-color: transparent; }
.sm-toggle.on span { left: 19px; background: #fff; }

/* сегмент-контроль */
.sm-seg {
  display: flex;
  background: var(--surface-hover);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.sm-seg-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sm-seg-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.sm-seg-btn.active { background: var(--accent); color: var(--bg); }

/* точки акцента (темы) */
.sm-dots { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.sm-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.sm-dot.active { outline-color: var(--accent); }
.sm-dot svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  stroke: #fff;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.sm-dot.active svg { opacity: 1; }

/* pills-селект */
.sm-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--menu-hover);
  border: none;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 28px 6px 14px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px;
  max-width: 190px;
}
.sm-select:disabled { opacity: 0.4; cursor: not-allowed; }

/* слайдер */
.sm-range {
  -webkit-appearance: none;
  appearance: none;
  width: 130px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 50%), var(--surface-hover) var(--fill, 50%));
  outline: none;
  cursor: pointer;
}
.sm-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.sm-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
}
.sm-range-val {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  min-width: 40px;
  text-align: right;
}

/* кнопка-пилюля */
.sm-btn {
  border: none;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
}
.sm-btn:hover { background: var(--accent-soft-2); }
.sm-btn:disabled { opacity: 0.55; cursor: wait; }
/* пара кнопок в строке (Почистить + Обновить): компактнее, чтобы влезли в 208px */
.sm-setrow-ctl.sm-btns, .sm-ctl.sm-btns { gap: 8px; }
.sm-btns .sm-btn { padding: 6px 12px; white-space: nowrap; }

/* компактные визуальные опции (иконка + текст) — для headerPos, sidePos */
.sm-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: var(--menu-hover);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: var(--fs-small);
   font-weight: var(--fw-small);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.sm-opt:hover { background: var(--surface-hover); color: var(--text-primary); }
.sm-opt.active {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent);
}
.sm-opt-ico {
   font-size: var(--fs-h);
   line-height: 1;
  display: flex;
  align-items: center;
}
.sm-opt-txt { font-size: var(--fs-small); }

/* объединённый ряд: Положение меню | Меню монет */
.sm-layout-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 0;
}
.sm-layout-half {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.sm-layout-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 16px;
}
@media (max-width: 640px) {
  .sm-layout-row { flex-direction: column; gap: 12px; }
  .sm-layout-divider { width: 100%; height: 1px; margin: 8px 0; }
}

/* чек-строки формаций */
.sm-check {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: none;
  background: var(--menu-hover);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sm-check svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sm-check.on { background: var(--accent); border-color: transparent; }
.sm-check.on svg { opacity: 1; }
.sm-sw { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }

/* FAQ внутри панели: единый ритм — отступы только через карточки */
.sm-faq { display: flex; flex-direction: column; gap: 0; }
.sm-faq h4 { font-size: var(--fs-body); font-weight: var(--fw-h); color: var(--text-primary); margin: 14px 0 6px; }
.sm-faq h4:first-child { margin-top: 0; }
/* FAQ живёт внутри .sm-card-sec: внутренние отступы/фон даёт карточка,
   сам блок — только вертикальный ритм без собственных рамок */
.sm-card-sec .faq { margin: 6px 0 10px; }
.sm-card-sec .faq-block { margin-bottom: 10px; }
.sm-card-sec .faq-block:last-child { margin-bottom: 4px; }

/* ─── Внешний вид: компактные сетки тем и пресетов ─── */
/* Темы: симметричная сетка 4 в ряд, фиксированная высота плитки */
.sm-tcgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 6px 0 8px;
}
.sm-tcgrid .sm-tcard {
  min-width: 0;
  flex: none;
  max-width: none;
  min-height: 0;
}
/* Пресеты сетки: 4 в ряд, одинаковая высота, миниатюра фиксированной высоты */
.sm-presetrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 6px 0 8px;
}
.sm-presetrow .sm-preset {
  flex: none;
  height: auto;
}
.sm-presetrow .sm-thumb {
  flex: none;
  height: 34px;
}

/* ─── Обзор: тайлы, пресеты, превью тем, лента ─── */
.sm-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0;
}
.sm-tile {
  background: var(--menu-hover);
  border: none;
  border-radius: 12px;
  padding: 16px 18px;
}
.sm-tile b { display: block; font-size: var(--fs-h1); font-weight: var(--fw-h); color: var(--text-primary); letter-spacing: -0.3px; }
.sm-tile span { font-size: var(--fs-mini); color: var(--text-muted); }
.sm-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
  flex: 1;
  margin: 0;
}
.sm-preset {
  border: none;
  background: var(--menu-hover);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  transition: border-color var(--transition), background var(--transition);
  height: 100%;
  min-height: 0;
}
.sm-preset.active { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.sm-preset:hover { background: var(--menu-hover); }
.sm-thumb { display: grid; gap: 3px; flex: 1; min-height: 0; }
.sm-thumb i { background: var(--border-light); border-radius: 3px; min-height: 0; }
.sm-preset.active .sm-thumb i { background: var(--accent); opacity: 0.75; }
.sm-preset-name { font-size: var(--fs-small); font-weight: var(--fw-body); color: var(--text-secondary); text-align: center; flex-shrink: 0; }
.sm-preset.active .sm-preset-name { color: var(--text-primary); }
.sm-tcards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0;
  align-content: flex-start;
}
.sm-tcard {
  min-width: 0;
  flex: 1 1 auto;
  max-width: none;
  border: none;
  background: transparent;
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sm-tcard-view {
  display: block;
  border-radius: 7px;
  padding: 8px;
  height: 44px;
}
.sm-tcard-view i { display: block; height: 8px; border-radius: 4px; margin-bottom: 5px; }
.sm-tcard-view u { display: block; height: 5px; border-radius: 3px; background: rgba(128, 128, 128, 0.55); margin-bottom: 4px; text-decoration: none; }
.sm-tcard-name { font-size: var(--fs-mini); font-weight: 600; color: var(--text-secondary); text-align: center; }
.sm-tcard.active .sm-tcard-name { color: var(--accent); }
.sm-tcard:hover .sm-tcard-name { color: var(--text-primary); }
/* Лента событий: единый ритм — строки-разделители внутри карточки */
.sm-feed { display: flex; flex-direction: column; }
.sm-ev {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 0;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
}
.sm-ev:last-child { border-bottom: none; }
.sm-ev:hover .sm-ev-main b { color: var(--accent); }
.sm-ev-tag {
  flex-shrink: 0;
  min-width: 34px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 7px;
  padding: 3px 6px;
}
.sm-ev-main { display: flex; flex-direction: column; min-width: 0; }
.sm-ev-main b { font-size: var(--fs-body); font-weight: var(--fw-body); }
.sm-ev-main span { font-size: var(--fs-small); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── лента импульсов: кирпичики слева направо, перенос на всю ширину,
   по мере заполнения — вертикальный скролл ─── */
.sm-feed-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}
.sm-feed-title { font-size: var(--fs-small); color: var(--text-muted); }
.sm-feed-bricks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  padding: 2px 2px 8px;
}
.sm-feed-empty {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: var(--fs-body);
  padding: 8px 2px;
}
.sm-ev-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--menu-hover);
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
}
.sm-ev-chip:hover { border-color: var(--accent-soft-2); }
.sm-ev-chip:hover .sm-ev-main b { color: var(--accent); }

/* ─── Обзор: муверы, статус, избранное — единый ритм внутри карточек ─── */
.sm-movers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
}
.sm-mover-col { display: flex; flex-direction: column; gap: 6px; }
.sm-mover {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border: none;
  background: var(--menu-hover);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--text-primary);
  text-align: left;
}
.sm-mover:hover { background: var(--surface-hover); }
.sm-mover b { font-size: var(--fs-body); font-weight: var(--fw-body); }
.sm-mover span {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sm-mover i { font-style: normal; font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 600; }
.sm-mover.up i { color: var(--positive); }
.sm-mover.dn i { color: var(--negative); }
.sm-status {
  border: none;
  border-radius: 12px;
  padding: 14px 18px;
  background: var(--menu-hover);
  margin: 0;
}
.sm-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: var(--fs-body);
}
.sm-status-row span { color: var(--text-secondary); }
.sm-status-row b.pos { color: var(--positive); }
.sm-status-row b.neg { color: var(--negative); }
.sm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sm-chip {
   display: flex;
   align-items: center;
   gap: 7px;
   border: none;
   background: var(--menu-hover);
   border-radius: 999px;
   padding: 6px 13px 6px 9px;
   cursor: pointer;
   color: var(--text-primary);
   font-family: var(--font);
   font-size: var(--fs-small);
   font-weight: var(--fw-body);
}
.sm-chip:hover { background: var(--surface-hover); }
.sm-chip i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
/* чипы выбора бирж в «Листингах»: цвет-точка площадки + сегмент рынка */
.sm-chip.sm-lv-chip em {
  font-style: normal;
  font-family: var(--font-mono, var(--font));
  font-size: var(--fs-mini);
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 2px;
}
.sm-chip.sm-lv-chip.on { background: var(--surface-hover); }
.sm-chip.sm-lv-chip.on em { color: var(--accent); border-color: var(--accent); }
.sm-chip.sm-lv-chip.on i { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }

/* ══════════════════════════════════════════════════════════════════
   ФОРМАТ ВНУТРЕННОСТЕЙ РАЗДЕЛОВ (вариант А: спокойные панели, v20260918d).
   Скелет: sm-content / sm-title-wrap (верхние sm-tabs удалены —
   навигация только слева).
   Сетка: шаг 12px. Карточка = панель surface, radius 12, padding 6/18.
   Внутри карточки только два типа содержимого:
     1) sm-setrow — строка настройки: слева иконка+текст (фикс. высота),
        справа контрол в зоне 208px, выровнен вправо по центру;
     2) sm-gridbox — симметричная сетка (тайлы/сетка/темы/муверы/чипы)
        с едиными отступами 12px.
   Разделители: 1px var(--border) между строками, у последней — нет.
   ══════════════════════════════════════════════════════════════════ */
/* ─── шапка раздела: компактная (как в референсе) ─── */
.sm-page-head { margin: 6px 0 14px; }
.sm-page-title {
   font-size: var(--fs-h1);
   font-weight: var(--fw-h);
   letter-spacing: var(--ls-h);
   color: var(--text-primary);
   margin: 0 0 2px;
}
.sm-page-sub {
   font-size: var(--fs-small);
   font-weight: var(--fw-small);
   color: var(--text-secondary);
   line-height: 1.5;
   margin: 0;
   max-width: 560px;
}
/* ─── группа: БЕЗ подложки — заголовок + содержимое прямо на фоне страницы.
   Компактный ритм как в референсе: 18px между группами, 6px до содержимого. */
.sm-card-sec {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 18px;
}
.sm-card-sec:last-child { margin-bottom: 0; }
.sm-card-sec-title {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: var(--fs-mini);
   font-weight: var(--fw-mini);
   letter-spacing: 0.7px;
   text-transform: uppercase;
   color: var(--text-muted);
   margin: 0 0 4px;
}
/* заголовок с действием: кнопка прижата вправо */
.sm-card-sec-title.with-action { justify-content: space-between; }
.sm-clear {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.sm-clear:hover { color: var(--negative, #F87171); border-color: var(--negative, #F87171); background: transparent; }
/* компактные плитки уровней: слева направо, перенос строкой */
.sm-lvchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0 8px;
}
.sm-lvchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 5px 6px 5px 10px;
  cursor: pointer;
  color: var(--text-primary);
  transition: border-color var(--transition);
}
.sm-lvchip b { font-size: var(--fs-small); font-weight: var(--fw-body); }
.sm-lvchip i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 2px 7px;
}
.sm-lvchip:hover { border-color: var(--accent-soft-2); }
.sm-lvchip:hover b { color: var(--accent); }
/* ─── строка настройки: фикс. ритм, контрол в зоне 208px ─── */
.sm-setrow {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.sm-setrow:last-child { border-bottom: none; }
.sm-setrow-ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--menu-hover);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.sm-setrow-ico svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sm-setrow-txt { min-width: 0; flex: 1; }
.sm-setrow-t { font-size: var(--fs-body); font-weight: var(--fw-body); color: var(--text-primary); }
.sm-setrow-d { margin-top: 1px; font-size: var(--fs-small); font-weight: var(--fw-small); color: var(--text-secondary); line-height: 1.4; }
.sm-setrow-ctl {
   flex-shrink: 0;
   width: 208px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 8px;
   min-width: 0;
}
/* мульи-ТФ выпадающий список в настройках формаций */
.sm-tfdd {
   position: relative;
   display: flex;
   align-items: center;
}
.sm-tfdd-btn {
   appearance: none;
   -webkit-appearance: none;
   border: 1px solid var(--border);
   background: var(--menu-hover);
   color: var(--text-primary);
   font-family: var(--font);
   font-size: var(--fs-mini);
   font-weight: var(--fw-small);
   border-radius: 999px;
   padding: 5px 26px 5px 12px;
   cursor: pointer;
   white-space: nowrap;
   max-width: 150px;
   display: flex;
   align-items: center;
   gap: 4px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 9px center;
   background-size: 12px;
   transition: border-color var(--transition), background var(--transition);
}
.sm-tfdd-btn:hover { border-color: var(--border-light); background: var(--surface-hover); }
.sm-tfdd-val {
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--text-muted);
   font-family: var(--font-mono);
   font-weight: 600;
}
.sm-tfdd-val.on { color: var(--accent); }
.sm-tfdd-panel {
   position: fixed;
   z-index: 500;
   min-width: 132px;
   padding: 4px;
   background: var(--popup-bg);
   backdrop-filter: blur(18px) saturate(1.25);
   -webkit-backdrop-filter: blur(18px) saturate(1.25);
   border: 1px solid var(--border-light);
   border-radius: 12px;
   box-shadow: var(--shadow);
   display: flex;
   flex-direction: column;
   gap: 1px;
   animation: mkRise 0.1s var(--ease) backwards;
   transform-origin: top right;
}
.sm-tfdd-all-btn {
   border: none;
   background: transparent;
   color: var(--text-secondary);
   font-family: var(--font);
   font-size: var(--fs-small);
   font-weight: var(--fw-small);
   text-align: left;
   padding: 5px 8px;
   border-radius: 7px;
   cursor: pointer;
}
.sm-tfdd-all-btn:hover { background: var(--menu-hover); color: var(--text-primary); }
.sm-tfdd-opt {
   display: flex;
   align-items: center;
   gap: 7px;
   border: none;
   background: transparent;
   color: var(--text-primary);
   font-family: var(--font);
   font-size: var(--fs-body);
   font-weight: var(--fw-body);
   text-align: left;
   padding: 5px 8px;
   border-radius: 7px;
   cursor: pointer;
}
.sm-tfdd-opt:hover { background: var(--menu-hover); }
.sm-tfdd-opt svg {
   width: 12px;
   height: 12px;
   stroke: var(--accent);
   fill: none;
   stroke-width: 3;
   stroke-linecap: round;
   stroke-linejoin: round;
   flex-shrink: 0;
   opacity: 0;
}
.sm-tfdd-opt.on svg { opacity: 1; }
.sm-tfdd-opt span { flex: 1; }
.sm-tfdd-opt.on span { color: var(--accent); font-weight: var(--fw-small); }
.sm-tfdd-opt + .sm-tfdd-opt { border-top: 1px solid var(--border); }
/* ── компактный контрол типа уведомлений: тумблер + селект звука ── */
.sm-typectl {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sm-setrow.is-off .sm-setrow-txt { opacity: 0.45; }
.sm-setrow.is-off .sm-select { opacity: 0.4; pointer-events: none; }
/* старые sm-row внутри карточек — тот же ритм, что у sm-setrow */
.sm-card-sec .sm-row {
  min-height: 56px;
  padding: 10px 0;
}
.sm-card-sec .sm-row > div:first-child { min-width: 0; flex: 1; }
.sm-card-sec .sm-ctl {
  flex-shrink: 0;
  width: 208px;
  margin-left: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
/* обёртка слайдера в фикс-зоне контрола (208px) */
.sm-rangewrap { display: flex; align-items: center; gap: 8px; width: 100%; }
.sm-rangewrap .sm-range { flex: 1; width: auto; }
.sm-rangewrap .sm-range-val { flex-shrink: 0; }
/* ─── сетки внутри карточек: единый шаг 12px ─── */
.sm-gridbox { padding: 4px 0 6px; }
.sm-gridbox .sm-tiles,
.sm-gridbox .sm-cards,
.sm-gridbox .sm-tcards,
.sm-gridbox .sm-movers,
.sm-gridbox .sm-chips { margin: 0; }
/* ─── пустое состояние: по центру карточки ─── */
.sm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 30px 16px;
}
.sm-empty-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--menu-hover);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.sm-empty-ico svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sm-empty b { font-size: var(--fs-body); font-weight: var(--fw-body); color: var(--text-primary); }
.sm-empty span { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.5; max-width: 400px; }
.sm-empty-soon {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ─── секции типов алертов (Общие / Листинги / Импульсы) ─── */
.sm-alert-section {
  border: none;
  border-radius: 12px;
  background: var(--menu-hover);
  margin-bottom: 8px;
  overflow: hidden;
}
.sm-alert-section[open] {
  background: var(--surface-hover);
}
.sm-alert-section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sm-alert-section-summary::-webkit-details-marker { display: none; }
.sm-alert-section-title {
   font-size: var(--fs-body);
   font-weight: var(--fw-body);
   color: var(--text-primary);
}
.sm-alert-section-chev {
  width: 18px;
  height: 18px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform var(--transition);
}
.sm-alert-section[open] .sm-alert-section-chev {
  transform: rotate(90deg);
  stroke: var(--accent);
}
.sm-alert-section-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
}
.sm-alert-section:first-of-type .sm-alert-section-body {
  padding-top: 16px;
}

/* внутри тела секции — те же отступы строк, что и в настройках */
.sm-alert-section-body .sm-row {
  padding: 12px 0;
}

/* ─── Формации: закрепление ТФ за типом + скрин в Telegram ─── */
.fm-tg-send {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transition), transform var(--transition);
}
.fm-tg-send:hover { opacity: 0.9; }
.fm-tg-send:active { transform: translateY(1px); }
.fm-tg-send:disabled { opacity: 0.6; cursor: default; }

/* ─── Настройки → Реферальная программа ─── */
.sm-ref-bar {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 14px;
  margin: 2px 0 8px;
  background: var(--menu-hover);
}
.sm-ref-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sm-ref-bar-title {
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}
.sm-ref-bar-count {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}
.sm-ref-bar-track {
  margin-top: 12px;
  height: 10px;
  border-radius: 999px;
  background: var(--ch-bg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.sm-ref-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft-2));
  transition: width 0.35s var(--ease);
}
.sm-ref-bar-fill.full {
  background: linear-gradient(90deg, var(--positive, #34D399), #34D399);
}
.sm-ref-bar-hint {
  margin-top: 10px;
  font-size: var(--fs-mini);
  color: var(--text-muted);
  line-height: 1.5;
}
.sm-ref-bar-done {
  margin-top: 10px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--positive, #34D399);
}
.sm-ref-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}
.sm-ref-link {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-primary);
  background: var(--ch-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: all;
}
.sm-ref-code-label {
  flex-shrink: 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.sm-ref-code {
   font-family: var(--font-mono);
   font-size: var(--fs-body);
   font-weight: var(--fw-body);
  letter-spacing: 1.5px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-2);
  border-radius: 9px;
  padding: 7px 12px;
  user-select: all;
}
.sm-ref-list { padding: 4px 0; }
.sm-ref-list-title {
   font-size: var(--fs-h2);
   font-weight: var(--fw-h);
   letter-spacing: -0.2px;
   color: var(--text-primary);
   padding: 10px 0 4px;
}
.sm-ref-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-small);
}
.sm-ref-list-item:last-child { border-bottom: none; }
.sm-ref-list-name {
   font-weight: var(--fw-body);
   color: var(--text-primary);
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
}
.sm-ref-list-tag {
   flex-shrink: 0;
   font-size: var(--fs-mini);
   font-weight: var(--fw-mini);
   color: var(--text-muted);
}
.sm-ref-list-tag.ok {
  color: var(--positive, #34D399);
  font-weight: 600;
}
.sm-ref-rules { padding: 6px 0; }
.sm-ref-rules-h {
   font-size: var(--fs-h2);
   font-weight: var(--fw-h);
   letter-spacing: -0.2px;
   color: var(--text-primary);
   padding: 6px 0;
}
.sm-ref-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-small);
  color: var(--text-primary);
  line-height: 1.45;
}
.sm-ref-note {
  margin-top: 10px;
  font-size: var(--fs-mini);
  color: var(--text-muted);
  line-height: 1.5;
}
.sm-ref-btnrow {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0 2px;
}

@media (max-width: 640px) {
  .menu-panel { padding: 8px; }
  .sm-nav { width: 62px; padding: 14px 8px; }
  .sm-logo span, .sm-search, .sm-group, .sm-item span:last-child { display: none; }
  .sm-item { justify-content: center; padding: 9px 0; }
  .sm-content { padding: 20px 18px; }
}

/* ─── компакт под ноутбуки: меньше полей контента на низких экранах ─── */
@media (max-height: 800px) {
  .sm-content { padding: 20px 24px; }
}

/* ─── Уведомления в тг: поля chat_id, чекбоксы типов, подсказка ─── */
.sm-tg-chat {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--popup-bg) 60%, transparent);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  box-sizing: border-box;
}
.sm-tg-chat:focus { outline: none; border-color: var(--accent); }
.sm-tg-hint {
  margin: 8px 2px 0;
  font-size: var(--fs-mini);
  color: var(--text-muted);
  line-height: 1.5;
}
.sm-tg-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sm-tg-type {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 10px;
   border: 1px solid var(--border);
   border-radius: 99px;
   background: transparent;
   color: var(--text-secondary);
   font-family: var(--font);
   font-size: var(--fs-small);
   font-weight: var(--fw-small);
   cursor: pointer;
   user-select: none;
}
.sm-tg-type input { display: none; }
.sm-tg-type.on {
  color: var(--text-primary);
  background: var(--accent-soft);
  border-color: var(--accent-soft-2);
}

/* ─── раздел «Биржи»: общий выбор площадок мониторинга ─── */
/* Строка = кнопка: весь ряд кликабельный (⌘/Ctrl — «только эта»), как
   чипы в радаре, но с мета-строкой про пары и ошибки биржи. */
.sm-ven-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 2px 0 8px;
}
.sm-ven-count { font-size: var(--fs-small); color: var(--text-secondary); }
.sm-ven-btns { display: flex; gap: 6px; }
.sm-ven {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font);
  padding: 9px 11px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.sm-ven:hover { border-color: var(--border-light); color: var(--text-secondary); }
.sm-ven.on {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--accent-soft);
}
.sm-ven-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .4;
  flex-shrink: 0;
}
.sm-ven.on .sm-ven-dot { background: var(--accent); opacity: 1; }
.sm-ven.bad .sm-ven-dot { background: var(--negative); opacity: 1; }
.sm-ven-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sm-ven-main b { font-size: var(--fs-body); font-weight: 600; letter-spacing: .01em; }
.sm-ven-sub {
  font-size: var(--fs-mini);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sm-ven-on {
  margin-left: auto;
  font-family: var(--font-mono, var(--font));
  font-size: var(--fs-small);
  color: var(--text-muted);
  flex-shrink: 0;
}
.sm-ven.on .sm-ven-on { color: var(--text-secondary); }

/* ══════════════════════════════════════════════════════════════
   ОВЕРЛЕЙ-МЕНЮ НА ГЛАВНОЙ (пробел): трансформер слева поверх
   графиков и списка монет. Старый h-слайд (translateX трека +
   .app.h-menu) удалён: трек всегда показывает главную, меню —
   абсолютный drawer с backdrop. Две стадии: только категории
   (фото 1) → категории + контент раздела рядом.
   ══════════════════════════════════════════════════════════════ */
/* трек больше не ездит: оба h-экрана в потоке, видна главная */
.h-track { position: relative; transform: none !important; transition: none !important; }
.h-screen { flex: 0 0 100%; width: 100%; }
/* первый h-экран (меню) — оверлей-контейнер, клики только по drawer */
.h-screen:first-child {
  position: absolute; inset: 0; z-index: 120;
  pointer-events: none; overflow: visible;
  display: block; background: transparent;
}
.h-screen:first-child .menu-panel {
  position: absolute; inset: 0;
  pointer-events: none; overflow: visible;
  background: transparent;
}
/* backdrop: клик мимо закрывает (пробел/Esc — тоже) */
/* backdrop — как у меню поиска монет, но блюр слабее, плюс лёгкое
   зерно поверх (текстурка): SVG-шум тайлом 160px, едва видимый. */
.sm-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    color-mix(in srgb, var(--overlay-bg) 55%, transparent);
  backdrop-filter: blur(9px) saturate(1.25);
  -webkit-backdrop-filter: blur(9px) saturate(1.25);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.app.menu-open .sm-backdrop { opacity: 1; pointer-events: auto; }
/* drawer: ширина всегда расширенная; анимация — БЕЗ перекладки:
   выезд — transform, раскрытие — clip-path (оба на композиторе).
   Ширину НЕ анимируем: layout тяжёлого контента каждый кадр
   и давал подвисание. --strip = ширина полосы категорий. */
.sm-card.sm-slide {
  --strip: 264px; /* = ширина nav */
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 940px; max-width: 92vw;
  pointer-events: auto;
  background: var(--surface);
  border-right: 1px solid var(--border);
  border-radius: 0 16px 16px 0;
  box-shadow: 24px 0 64px rgba(0, 0, 0, 0.5);
  transform: translateX(-105%);
  clip-path: inset(0 calc(100% - var(--strip)) 0 0);
  transition: transform 0.22s var(--ease), clip-path 0.22s var(--ease);
  overflow: hidden;
}
.app.menu-open .sm-card.sm-slide:not(.expanded) { transform: none; }
.app.menu-open .sm-card.sm-slide.expanded {
  transform: none;
  clip-path: inset(0 0 0 0);
}
.app.menu-open .sm-card.sm-slide { will-change: transform; }
/* collapsed: контент уже свёрстан (раскрытие мгновенно), но невидим
   и недоступен табу/клику */
.sm-card.sm-slide:not(.expanded) .sm-content { visibility: hidden; }
/* контентная колонка в оверлее: уже поля, скролл внутри */
.app.menu-open .sm-content { padding: 24px 28px; }
@media (max-width: 1000px) {
  .sm-card.sm-slide { --strip: 220px; width: min(92vw, 720px); }
  .sm-card.sm-slide .sm-nav { width: 220px; }
}
@media (max-width: 640px) {
  .sm-card.sm-slide { --strip: 62px; width: min(94vw, 560px); }
  .sm-card.sm-slide .sm-nav { width: 62px; }
}