/* Tyto — интерфейс пользователя. Визуальная система 24.10.2026: графит RAL 7024 + чёткие акценты.
   Тёмная тема — основная; светлая — отдельным шагом (решение: обе обязательны). */
:root {
  --bg: #2e3137;
  --surface: #45484e;
  --surface-2: #53565c;
  --line: #53565c;
  --text: #f3f6f7;
  --muted: #d6d9da;
  --accent: #59eb8c;   /* прибыль, активное состояние */
  --bad: #ff6e70;      /* убыток */
  --risk: #ffbc19;     /* риск */
  --edge: rgba(255, 255, 255, 0.1);   /* граница блоков без заливки (правка Nata 28.10) */
  --lift: rgba(255, 255, 255, 0.03);  /* карточка чуть светлее фона (ТЗ главной 28.10) */
  --sub: #9b9ea4;      /* вторичный текст главной: по ТЗ #8E8E93, осветлён до контраста 4,9:1 */
  --radius: 14px;
  --tabs-h: 64px;
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --font: Manrope, system-ui, -apple-system, sans-serif;
  --font-head: Unbounded, var(--font);
  --font-num: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 16px/1.5 var(--font); min-height: 100vh; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tabs a:focus:not(:focus-visible) { outline: none; }

/* шапка: миниатюра + TYTO слева — на телефоне и на широком экране (решение Nata 28.10, отменяет «по центру» из ТЗ главной) */
/* шапка над всеми блоками: свой слой (translateZ) и экран — отдельный слой под ней; иначе при свайпе на iOS/в Telegram
   карусель «щелчком», карточки с анимацией и графики рисовались поверх шапки */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: flex-start; gap: 12px;
       height: 56px; padding: 0 16px; background: var(--bg); border-bottom: 1px solid var(--line); transform: translateZ(0); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.brand-icon { width: 30px; height: 30px; }
.brand-word { height: 18px; width: auto; }   /* TYTO ~18 px (ТЗ главной 28.10) */

/* экран */
main { position: relative; z-index: 0; padding: 20px 16px calc(var(--tabs-h) + var(--safe-b) + 24px); outline: none; }
.screen-title { font: 500 20px/1.3 var(--font-head); margin: 4px 0 8px; }
.screen-note { margin: 0; color: var(--muted); }
.stub { margin-top: 20px; padding: 16px; border: 1px dashed var(--line); border-radius: var(--radius);
        color: var(--muted); font-size: 14px; }

/* строка состояния связи: не перекрывает экран, не блокирует меню */
.status { position: sticky; top: 56px; z-index: 29; transform: translateZ(0); display: flex; align-items: center; gap: 10px;
          padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text); }
.status[hidden] { display: none; }
.status svg { width: 20px; height: 20px; flex: none; color: var(--risk); }
.status span { flex: 1; }
.link { border: 0; background: none; padding: 8px 4px; min-height: 40px; color: var(--accent); font-weight: 600; cursor: pointer; }

/* экран «Системы» — карточка v3 (28.10.2026) */
.lead { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px;
        background: #383b41; color: var(--muted); font-size: 13px; }
.note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.sys-grid { display: grid; gap: 14px; align-items: stretch; }   /* все плашки одной высоты (Nata 30.10) */
.sys-grid.one { max-width: 520px; }   /* одна стратегия (28.10.2026) */
.sys-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 16px;
            border-radius: 20px; background: var(--surface); border-top: 3px solid var(--c, var(--line)); color: var(--text); text-decoration: none; }
.sys-card > *:not(.bg-emb) { position: relative; z-index: 1; }
.sys-card.skel { min-height: 300px; opacity: .45; }
.bg-emb { position: absolute; right: -14px; top: -10px; width: 130px; height: 130px; color: var(--c); opacity: .12; z-index: 0; pointer-events: none; }
.sys-top { display: flex; align-items: center; gap: 12px; }
.emb { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--bg); color: var(--c); }
.emb-svg { width: 40px; height: 40px; }
.sys-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; }
.nm { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.sys-name { font: 500 18px/1.2 var(--font-head); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 8px; background: var(--bg); color: var(--muted); }
.chip-soon { color: var(--risk); }
.tag { margin: 0; color: var(--muted); font-size: 14px; }
.res { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.big { font: 500 34px/1.1 var(--font-head); letter-spacing: -.01em; white-space: nowrap; }
.big .up, .big .down { font-size: 22px; }
.per { font-size: 13px; color: var(--muted); margin-top: 4px; }
.spark { width: 120px; height: 40px; flex: none; }
.up { color: var(--accent); } .down { color: var(--bad); } .risk { color: var(--risk); }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px;
     background: color-mix(in srgb, var(--c) 14%, var(--bg)); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.mi { display: flex; color: var(--c); margin-bottom: 2px; }
.mi svg { width: 18px; height: 18px; }
.ml { font-size: 12px; color: var(--muted); }
.m b { font-weight: 700; font-size: 16px; }
.scale { display: inline-flex; gap: 3px; align-items: center; min-height: 24px; }
.scale i { width: 14px; height: 6px; border-radius: 3px; }
.risk-t { margin-top: -4px; font-size: 13px; color: var(--muted); }
.btn-main { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 14px;
            background: var(--accent); color: #10261a; font-weight: 700; font-size: 15px; }
/* «Стратегии» в виде главной (правила Nata 28.10): без сплошной серой заливки, тонкая граница; зелёный — результат и график;
   кнопка карточки — контурная (главная зелёная кнопка приложения — «Подключить биржу») */
.note { background: transparent; border: 1px solid var(--edge); color: var(--sub); }
.sys-card { background: var(--lift); border: 1px solid var(--edge); }
.sys-card .bg-emb { color: var(--c); opacity: .08; }
.sys-card .emb { background: transparent; border: 1px solid var(--edge); color: var(--c); }   /* знак — в цвете стратегии (Nata 30.10) */
.sys-card .sys-dot { background: var(--sub); }
.sys-card .chip { background: transparent; border: 1px solid var(--edge); color: var(--sub); }
.sys-card .tag, .sys-card .per, .sys-card .risk-t { color: var(--sub); }
.sys-card .m { background: transparent; border: 1px solid var(--edge); }
.sys-card .mi { color: var(--sub); }
.sys-card .btn-main { background: transparent; border: 1px solid var(--edge); color: var(--text); border-radius: 12px; margin-top: auto; }

/* анимации — один раз при появлении; свечение только в анимации (решение 28.10) */
.sys-card.anim .emb-svg { opacity: 0; transform: scale(.85); }
.sys-card.anim .spark polyline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sys-card.play .emb-svg { animation: emb-in .4s ease-out forwards; }
.sys-card.play .spark polyline { animation: draw .6s .1s ease-out forwards; }
@keyframes emb-in { 0% { opacity: 0; transform: scale(.85); filter: drop-shadow(0 0 0 transparent); }
                    60% { opacity: 1; transform: scale(1.04); filter: drop-shadow(0 0 8px var(--c)); }
                    100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 0 transparent); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* список «Ещё» */
.list { margin: 16px 0 0; padding: 0; list-style: none; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.list li + li { border-top: 1px solid var(--line); }
.list a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 16px; color: var(--text); text-decoration: none; }
.list a svg:first-child { width: 22px; height: 22px; color: var(--muted); flex: none; }
.list a span { flex: 1; font-weight: 600; }
.list a svg:last-child { width: 18px; height: 18px; color: var(--muted); }

/* нижнее меню: 5 пунктов, активный — зелёная точка под иконкой (решения 24.10 и 28.10) */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
        padding: 6px 4px calc(6px + var(--safe-b)); background: var(--bg); border-top: 1px solid var(--line); }
.tab { flex: 1; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center;
       gap: 2px; padding: 4px 2px; border: 0; background: none; color: var(--muted); cursor: pointer; text-decoration: none;
       font-size: 11px; font-weight: 600; line-height: 1.2; }
.tab svg { width: 24px; height: 24px; }
.tab .label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab .dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.tab[aria-current="page"] { color: var(--text); }
.tab[aria-current="page"] .dot { background: var(--accent); }
.caret, .sub { display: none; }
/* «Ещё» на телефоне: список над нижним меню */
.sub.open { display: flex; flex-direction: column; gap: 2px; position: absolute; right: 8px; bottom: calc(100% + 8px);
            max-height: calc(100vh - var(--tabs-h) - 80px); overflow-y: auto;
            min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.subtab { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 12px;
          color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 600; }
.subtab svg { width: 20px; height: 20px; flex: none; }
.subtab[aria-current="page"] { background: var(--surface-2); color: var(--text); }

/* «Главная» для гостя, v3 по ТЗ Nata (28.10.2026): оффер по центру → витрина стратегии → 3 карточки (на телефоне — карусель) → ссылка.
   Зелёный — только результат, линия графика и главная кнопка; блоки без сплошной серой заливки, тонкая граница */
.offer { text-align: center; padding-top: 8px; }
.hero-title { margin: 0; font: 700 24px/1.25 var(--font-head); letter-spacing: -.01em; }
.hero-sub { margin: 12px auto 0; max-width: 520px; color: var(--sub); font-size: 14px; line-height: 1.45; }
.cta { display: flex; flex-direction: column; gap: 12px; margin: 24px auto 0; max-width: 420px; }
.offer .btn-main { gap: 8px; min-height: 48px; border-radius: 12px; font-size: 16px; text-decoration: none; }
.btn-main svg, .btn-second svg { width: 20px; height: 20px; }
.btn-second { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px;
              border: 1px solid var(--edge); background: transparent; color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; }
.showcase { margin-top: 28px; }
.sec-title { margin: 0 0 10px; font: 700 14px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
.proof { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: var(--lift);
         border: 1px solid var(--edge); color: var(--text); text-decoration: none; }
.proof.skel { min-height: 170px; opacity: .45; }
.proof .emb { width: 40px; height: 40px; border-radius: 12px; color: var(--c, var(--text)); background: transparent; border: 1px solid var(--edge); }
.proof .emb-svg { width: 30px; height: 30px; }
.proof-top { display: flex; align-items: flex-start; gap: 10px; }
.proof .sys-name { font: 700 16px/1.2 var(--font); }
.proof-tag { font-size: 12px; color: var(--sub); }
.proof-res { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.proof .big { font: 700 22px/1.1 var(--font-head); white-space: nowrap; }
.big.up { color: var(--accent); } .big.down { color: var(--bad); }
.proof .chip { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: transparent; border: 1px solid var(--edge); color: var(--sub); }
.spark-wrap { position: relative; }
.hero-spark { width: 100%; height: 60px; display: block; }
.sig { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--accent); }
.proof-note { margin: 0; font-size: 11px; color: var(--sub); }
.proof.anim .hero-spark polyline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.proof.anim .sig { opacity: 0; }
.proof.play .hero-spark polyline { animation: draw .6s .1s ease-out forwards; }
.proof.play .sig { animation: sig .8s .6s ease-out forwards; }
@keyframes sig { 0% { opacity: 0; } 30% { opacity: 1; filter: drop-shadow(0 0 6px var(--accent)); } 100% { opacity: 1; filter: drop-shadow(0 0 0 transparent); } }
/* три карточки: на телефоне — горизонтальная карусель со «щелчком» по карточке */
.perks { display: flex; gap: 12px; margin: 24px -16px 0; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory;
         scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.perks::-webkit-scrollbar { display: none; }
.perk { flex: 0 0 84%; scroll-snap-align: start; padding: 16px; border-radius: 16px; border: 1px solid var(--edge); background: var(--lift); }
.perk h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 15px/1.3 var(--font); }
.perk h3 svg { width: 20px; height: 20px; color: var(--sub); flex: none; }
.perk-note { margin: -6px 0 10px; font-size: 12px; color: var(--sub); }
.perk-text { margin: 0; font-size: 14px; color: var(--muted); }
.facts, .steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.facts li { position: relative; padding-left: 14px; font-size: 14px; color: var(--muted); }
.facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--sub); }
.steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.steps b { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--edge); color: var(--text); font: 600 13px var(--font); }
.strip { margin: 16px auto 0; font-size: 15px; font-weight: 600; color: var(--text); }
.strip b { font: 700 17px var(--font-head); }
.strip b.up { color: var(--accent); } .strip b.down { color: var(--bad); }
.strip-note { margin: 4px 0 0; font-size: 12px; color: var(--sub); }
.proof-base { margin: 0; font-size: 12px; line-height: 1.45; color: var(--sub); }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kv span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--edge); }
.kv i { font-style: normal; font-size: 12px; color: var(--sub); }
.kv b { font-size: 16px; font-weight: 700; color: var(--text); }
.kv em { font-style: normal; font-size: 11px; color: var(--sub); }
.share { width: 100%; margin-top: 10px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.perk-ex { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--edge); font-size: 13px; color: var(--text); }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabs-h) + var(--safe-b) + 12px); z-index: 40; transform: translate(-50%, 8px);
         max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 12px; background: #3a3d43; border: 1px solid var(--edge);
         color: var(--text); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
/* витрина и страница стратегии (28.10.2026): переключатель периода, график меняется вместе с цифрой */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 10px; }
.sec-head .sec-title { margin: 0; }
.sec-note { font-size: 12px; color: var(--sub); text-decoration: underline; text-underline-offset: 2px; }
.sec-sub { margin: -6px 0 10px; font-size: 12px; color: var(--sub); }
a.proof-top { color: var(--text); text-decoration: none; }
.proof .proof-res { margin: 0; display: block; }
.res-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
a.btn-main, a.btn-second { text-decoration: none; }
.res-top .big { font: 700 26px/1.1 var(--font-head); white-space: nowrap; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; border: 1px solid var(--edge); flex: none; }
.seg button { min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--sub);
              font: 600 12px var(--font); cursor: pointer; }
.seg button[aria-selected="true"] { background: rgba(255, 255, 255, .08); color: var(--text); }
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; }
.back { display: inline-flex; align-items: center; min-height: 40px; margin: -4px 0 8px; color: var(--sub); font-weight: 600; font-size: 14px; text-decoration: none; }
.sp-head { display: flex; gap: 14px; align-items: flex-start; }
.sp-emb { width: 64px; height: 64px; border-radius: 16px; border: 1px solid var(--edge); background: transparent; color: var(--c, var(--text)); }
.sp-emb .emb-svg { width: 48px; height: 48px; }
.sp-name { margin: 0; font: 700 24px/1.2 var(--font-head); }
.sp-tag { margin: 4px 0 0; font-size: 14px; color: var(--sub); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.sp-chips .chip { background: transparent; border: 1px solid var(--edge); color: var(--sub); }
.sp-res { margin-top: 16px; }
.sp-cta { margin: 16px 0 0; max-width: none; }
.sp-sec { margin-top: 24px; }
.kv3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-desc { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.months { display: flex; gap: 6px; align-items: stretch; overflow-x: auto; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--edge); scrollbar-width: none; }
.months::-webkit-scrollbar { display: none; }
.mo { flex: 1 0 34px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mo-v { font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.mo-bar { height: 58px; display: flex; align-items: flex-end; }
.mo-bar i { display: block; width: 14px; border-radius: 4px 4px 2px 2px; }
.mo-bar i.pos { background: var(--accent); } .mo-bar i.neg { background: var(--bad); }
.mo-m { font-size: 11px; color: var(--sub); }
.all-link { display: block; margin: 24px 0 8px; padding: 12px 0; text-align: center; color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; }

/* плашки стратегий (30.10.2026): биржи, новая стратегия без статистики, тестируемые — размыты, сверху знак и «Тестируется» */
.fresh { margin: 0; padding: 12px; border: 1px dashed var(--edge); border-radius: 12px; font-size: 13px; color: var(--sub); }
.sys-card.soon { min-height: 280px; }
.soon-blur { display: flex; flex-direction: column; gap: 12px; filter: blur(7px); opacity: .45; pointer-events: none; user-select: none; }
.ghost { display: flex; gap: 8px; align-items: flex-end; height: 64px; }
.ghost i { flex: 1; border-radius: 8px; background: var(--c); opacity: .35; }
.ghost i:nth-child(1) { height: 40%; } .ghost i:nth-child(2) { height: 70%; } .ghost i:nth-child(3) { height: 100%; }
.sys-card > .soon-over { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; }
.soon-over .emb { width: 72px; height: 72px; border-radius: 18px; border: 1px solid var(--edge); background: rgba(46, 49, 55, .7); color: var(--c); }
.soon-over .emb-svg { width: 54px; height: 54px; }
.soon-over .sys-name { font: 700 18px/1.2 var(--font-head); color: var(--text); }
.chip-soon { color: var(--risk) !important; border-color: rgba(255, 188, 25, .35) !important; }
/* рынок и биржи (Nata 30.10): подпись слева, значения — читаемые плашки одного цвета */
.meta { display: flex; flex-direction: column; gap: 6px; }
.meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meta-l { min-width: 52px; font-size: 12px; color: var(--sub); }
.meta-v { display: flex; flex-wrap: wrap; gap: 6px; }
.sys-card .meta .chip, .sp-chips .chip { color: var(--muted); border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); font-size: 12px; }
.sp-note { margin-top: 16px; }
/* подробная кривая (Nata 30.10): сетка, шкала «% от старта», месяцы, пик и просадка от пика */
.ch-head { display: flex; justify-content: flex-end; margin: 2px 0 4px; font-size: 11px; color: var(--sub); }
.ch-grid { stroke: rgba(255, 255, 255, .07); }
.ch-axis, .ch-tick { stroke: rgba(255, 255, 255, .18); }
.ch-y, .ch-x { fill: var(--sub); font: 500 10px var(--font-num); }
.ch-x { text-anchor: middle; }
.ch-dd { stroke: var(--bad); stroke-dasharray: 2 3; }
.ch-peak { fill: var(--bg); stroke: var(--text); stroke-width: 1.6; }
.ch-low { fill: var(--bg); stroke: var(--bad); stroke-width: 1.6; }
.ch-ddt { fill: var(--bad); font: 600 11px var(--font-num); }

/* адаптивность: планшет и Telegram Desktop / веб — меню становится боковой панелью */
@media (min-width: 768px) {
  :root { --rail: 232px; }
  .top { height: 64px; padding: 0 24px; justify-content: flex-start; }
  .tabs { top: 64px; right: auto; width: var(--rail); flex-direction: column; gap: 4px;
          padding: 16px 12px; border-top: 0; border-right: 1px solid var(--line);
          overflow-y: auto; overscroll-behavior: contain; }   /* «Ещё» раскрывается полностью и при низком окне (планшет, 29.10) */
  .tab { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px;
         padding: 0 14px; border-radius: 12px; font-size: 15px; }
  .tab .dot { order: -1; }
  .tab[aria-current="page"] { background: var(--surface); }
  .status { top: 64px; margin-left: var(--rail); padding: 12px 32px; }
  /* без «Ещё»: на широком экране все пункты сразу в боковом меню (решение Nata 29.10) */
  .tab[data-tab="more"] { display: none; }
  .sub, .sub.open { display: contents; }   /* без своей рамки и блока: пункты — прямо в меню (Firefox показывал рамку, Nata 30.10) */
  .subtab { gap: 12px; min-height: 48px; padding: 0 14px; font-size: 15px; }
  .subtab svg { width: 24px; height: 24px; }
  .subtab::before { content: ""; order: -1; width: 5px; height: 5px; border-radius: 50%; background: transparent; flex: none; }
  .subtab[aria-current="page"] { background: var(--surface); color: var(--text); }
  .subtab[aria-current="page"]::before { background: var(--accent); }
  main { margin-left: var(--rail); max-width: 944px; padding: 32px 32px 48px; }
  .screen-title { font-size: 24px; }
  .sys-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
  .hero-title { font-size: 32px; max-width: 760px; margin: 0 auto; }
  .perks { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0 0; padding: 0; overflow: visible; }
  .perk { flex: none; }
  .kv3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-cta { flex-direction: row; max-width: 560px; }
  .sp-cta > * { flex: 1; }
  .toast { bottom: 24px; left: calc(50% + var(--rail) / 2); }
}
@media (min-width: 1200px) {
  main { max-width: 1176px; padding: 40px 48px 56px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .sys-card.anim .emb-svg { opacity: 1; transform: none; }
  .sys-card.anim .spark polyline { stroke-dashoffset: 0; }
  .proof.anim .hero-spark polyline { stroke-dashoffset: 0; }
  .proof.anim .sig { opacity: 1; }
}