/* ===========================================================
   Дизайн-система (вдохновлено Claude / Apple)
   Тёплый оранжевый акцент · светло-серый фон · графит · белый
   =========================================================== */
:root {
    /* СВЕТЛАЯ тема (по умолчанию) — белый фон */
    --bg:          #FFFFFF;  /* белый фон */
    --surface:     #F6F5F1;  /* карточки/секции */
    --text:        #1A1A1A;  /* основной текст — почти чёрный */
    --muted:       #5C5B54;  /* серый — второстепенное (контраст ≥ WCAG AA на surface) */
    --border:      #ECEAE1;  /* мягкая граница */
    --accent:      #D97757;  /* Claude clay orange */
    --accent-press:#C2644A;
    --accent-soft: rgba(217, 119, 87, 0.12);
    --up:          #1FA971;  /* рост */
    --down:        #E5484D;  /* падение */
    color-scheme: light;

    --radius:   16px;
    --radius-sm:12px;
    --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
            Roboto, system-ui, sans-serif;
}

:root[data-theme="dark"] {
    /* ТЁМНАЯ тема — тёплый тёмный графит (не чёрный) */
    --bg:          #1E1E1C;  /* тёплый тёмный графит */
    --surface:     #2A2A27;  /* карточки/поля — чуть светлее фона */
    --text:        #FFFFFF;  /* основной текст — белый */
    --muted:       #A4A39B;  /* светло-серый — второстепенное */
    --border:      #393833;  /* граница на тёмном */
    --accent:      #E08A6B;  /* оранжевый, чуть ярче для тёмного фона */
    --accent-press:#D97757;
    --accent-soft: rgba(224, 138, 107, 0.20);
    --up:          #2BBA82;  /* рост (ярче на тёмном) */
    --down:        #F0595E;  /* падение */
    color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Блокируем прокрутку всей страницы — скроллится только внутренний контент,
   поэтому топ-бар с глобусом и таб-бар остаются намертво зафиксированными. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.hidden { display: none !important; }

/* ---------- Экраны + плавный вход ---------- */
.screen {
    height: 100dvh;                    /* fallback */
    height: var(--app-h, 100dvh);      /* точная высота вьюпорта Telegram (JS) */
    max-width: 460px;
    margin: 0 auto;
    padding: 16px 22px calc(20px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.screen:not(.hidden) {
    animation: screenIn 0.4s var(--ease) both;
}
@keyframes screenIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.screen-head { padding: 36px 4px 8px; text-align: center; }

.title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}

/* ===========================================================
   Выбор языка — поиск + список (цвета берутся из темы)
   =========================================================== */
.search-wrap { position: relative; margin: 6px 0 14px; }
.search-ico {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: var(--muted);
    pointer-events: none;
}
.search-input {
    width: 100%;
    padding: 14px 14px 14px 44px;
    font-family: var(--font);
    font-size: 16px;
    color: var(--text);
    background: var(--surface);          /* светло-серый / тёмный графит по теме */
    border: 1.5px solid transparent;
    border-radius: 14px;
    transition: border-color 0.2s var(--ease);
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { outline: none; border-color: var(--accent); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* RTL: иконка справа, отступ текста — справа */
[dir="rtl"] .search-ico { left: auto; right: 14px; }
[dir="rtl"] .search-input { padding: 14px 44px 14px 14px; }

.lang-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-width: none;
}
.lang-list::-webkit-scrollbar { display: none; }

.lang-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: 17px;
    text-align: start;
    cursor: pointer;
    transition: background 0.15s var(--ease);
}
.lang-item .flag { font-size: 24px; line-height: 1; }
.lang-item .lang-name { flex: 1; font-weight: 500; }
.lang-item .check { color: var(--accent); font-weight: 700; opacity: 0; }
.lang-item:active { background: var(--surface); }
.lang-item.selected { background: var(--accent-soft); }
.lang-item.selected .check { opacity: 1; }

.lang-empty { text-align: center; color: var(--muted); padding: 28px 0; font-size: 15px; }

/* ===========================================================
   Экран 2 — Welcome
   =========================================================== */
.welcome-body {
    flex: 1;
    min-height: 0;               /* иначе flex-элемент не даёт себя прокрутить */
    overflow-y: auto;            /* страховка: на низком экране ничего не срежет */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* блок прижат к кнопке, воздух — сверху */
    align-items: flex-start;     /* выравнивание влево, как на claude.com */
    text-align: start;
    padding: 0 4px;
}
/* Логотип держит свой размер и стоит вплотную над текстом. Лишняя высота
   экрана уходит наверх, а не между логотипом и заголовком и не под список:
   там она читалась как дыра. */
.welcome-art-wrap {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    min-height: clamp(96px, 16vh, 180px);
    margin-bottom: clamp(12px, 2.6vh, 28px);
}
/* Живая тёплая «аура» — два мягких блика, медленно дрейфуют за логотипом */
.wa-aura {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    opacity: 0;
    filter: blur(34px);
    pointer-events: none;
    will-change: transform, opacity;
}
.wa-aura-1 { width: 250px; height: 250px; margin: -125px 0 0 -125px; background: radial-gradient(circle, var(--accent) 0%, transparent 66%); }
.wa-aura-2 { width: 210px; height: 210px; margin: -105px 0 0 -105px; background: radial-gradient(circle, #F0B49A 0%, transparent 62%); }
#welcome-art.played .wa-aura-1 { animation: auraFade1 1.1s ease .15s both, auraDrift1 12s ease-in-out 1.1s infinite; }
#welcome-art.played .wa-aura-2 { animation: auraFade2 1.1s ease .3s both, auraDrift2 14s ease-in-out 1.2s infinite; }
@keyframes auraFade1 { from { opacity: 0; } to { opacity: .22; } }
@keyframes auraFade2 { from { opacity: 0; } to { opacity: .16; } }
@keyframes auraDrift1 { 0%,100% { transform: translate(-16px,-9px) scale(1); } 50% { transform: translate(15px,11px) scale(1.16); } }
@keyframes auraDrift2 { 0%,100% { transform: translate(14px,10px) scale(1.06); } 50% { transform: translate(-15px,-11px) scale(.9); } }

/* Кольцо-halo — один раз расходится наружу при входе */
.wa-halo {
    position: absolute;
    top: 50%; left: 50%;
    width: 120px; height: 120px; margin: -60px 0 0 -60px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}
#welcome-art.played .wa-halo   { animation: haloPulse 1.6s cubic-bezier(.22,.61,.36,1) .3s both; }
#welcome-art.played .wa-halo-2 { animation: haloPulse 1.6s cubic-bezier(.22,.61,.36,1) .55s both; }
@keyframes haloPulse { 0% { transform: scale(.5); opacity: 0; } 25% { opacity: .5; } 100% { transform: scale(2.2); opacity: 0; } }

/* Логотип — плавно всплывает пружиной и мягко парит */
.wa-logo-img {
    position: relative;
    z-index: 1;
    width: 116px; height: 116px;
    object-fit: contain;
    transform-origin: center;
    opacity: 0;
    filter: drop-shadow(0 10px 26px rgba(217, 119, 87, .32));
    will-change: transform, opacity;
}
#welcome-art.played .wa-logo-img { animation: logoIn .95s cubic-bezier(.34, 1.56, .64, 1) .1s both, logoFloat 5.5s ease-in-out 1.3s infinite; }
@keyframes logoIn { from { opacity: 0; transform: scale(.5) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes logoFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.025); } }
@media (prefers-reduced-motion: reduce) {
    .wa-aura, .wa-halo { display: none; }
    #welcome-art.played .wa-logo-img { animation: logoIn .5s ease both; }
}

/* Приглашение друзей (вверху Info) */
.invite-card {
    padding: 16px; margin: 0 0 12px;
    border-radius: 18px;
    background: var(--accent-soft);
}
.invite-top { display: flex; align-items: flex-start; gap: 12px; }
.invite-ic { font-size: 26px; line-height: 1; }
.invite-text { flex: 1; min-width: 0; }
.invite-title { font-size: 16px; font-weight: 600; }
.invite-sub { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 3px; }
.invite-stats {
    margin: 13px 0 12px; padding: 9px 12px;
    border-radius: 11px; background: var(--bg);
    font-size: 13.5px;
}
.invite-card .btn-primary { margin-top: 0; }
.invite-card .link-btn { margin-top: 8px; width: 100%; }

/* Карточка «Связаться с поддержкой» (вверху Info) */
.support-card {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: var(--accent-soft); border: 1px solid transparent;
    border-radius: 16px; padding: 14px 16px; margin: 0 0 12px;
    text-align: start; cursor: pointer; font-family: var(--font); color: var(--text);
    transition: opacity .15s var(--ease);
}
.support-card:active { opacity: 0.7; }
.lang-card { margin-top: 22px; }

/* Топ-бар с глобусом — нескролящийся (flex-sibling, как таб-бар), глобус не «уезжает» */
.app-topbar {
    display: flex; justify-content: flex-end; align-items: center;
    flex-shrink: 0; height: 34px; margin-bottom: 4px;
}
/* На приветствии глобус висит поверх, а не отдельной полосой: строка ради
   одной кнопки читалась как пустой обрезок и отбирала высоту у текста. */
#screen-welcome { position: relative; }
#screen-welcome .app-topbar {
    position: absolute;
    top: 16px;
    inset-inline-end: 22px;
    height: auto;
    margin: 0;
    z-index: 5;
}
.lang-fab {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 12px 0 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .02em;
    cursor: pointer;
}
.lang-fab svg { width: 17px; height: 17px; color: var(--accent); }
.lang-fab:active { background: var(--accent-soft); }
.support-card-ic { font-size: 24px; line-height: 1; }
.support-card-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.support-card-title { font-size: 16px; font-weight: 600; }
.support-card-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.support-card .cta-arrow { color: var(--accent); font-size: 18px; }
.faq-head { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 20px 0 10px; }
/* Текст проявляется каскадом из лёгкого размытия */
.welcome-title  { animation: welcRise .85s cubic-bezier(.22,.61,.36,1) .5s both; }
.welcome-desc   { animation: welcRise .85s cubic-bezier(.22,.61,.36,1) .68s both; }
.welcome-points { animation: welcRise .85s cubic-bezier(.22,.61,.36,1) .84s both; }
@keyframes welcRise {
    from { opacity: 0; transform: translateY(16px); filter: blur(7px); }
    to   { opacity: 1; transform: none;             filter: blur(0); }
}
.brand-mark {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: var(--accent);
    box-shadow: 0 12px 30px rgba(217, 119, 87, 0.30);
    margin-bottom: 6px;
}
/* Логотип (картинка). Меняй размеры здесь. */
.logo-img { width: 56px; height: 56px; object-fit: contain; display: block; margin: 0 auto 10px; }
.logo-img--lg { width: 92px; height: 92px; margin: 0 auto 8px; }
.welcome-title {
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    font-size: clamp(29px, 8.6vw, 38px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
}
.welcome-desc {
    font-size: 17px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
    max-width: 340px;
}
/* Три факта под описанием: что получишь, сколько стоит, как открыть доступ.
   Тире вместо буллетов — маркеры выглядели бы как список функций. */
/* Четыре коротких факта, по строке на каждый. Ровный шаг между ними важнее
   плотности: разнобой из двух- и трёхстрочных пунктов читался как каша. */
.welcome-points {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    width: 100%;
}
.welcome-points li {
    position: relative;
    padding-inline-start: 16px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--text);
    opacity: .88;
}
.welcome-points li + li { margin-top: 12px; }
/* Отбивка списка от кнопки: вместе с отступом футера даёт ~30px — заметно,
   что это разные блоки, но без дыры. */
.welcome-copy { margin-bottom: 14px; }
.welcome-points li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .66em;                /* по центру первой строки, масштабируется со шрифтом */
    width: 8px;
    height: 1.5px;
    border-radius: 1px;
    background: var(--accent);
    opacity: .85;
}
/* Совсем низкий экран: ужимаем текст, чтобы условие доступа было видно без
   прокрутки — ради него этот блок и появился. На обычных экранах, включая
   iPhone SE, шрифт остаётся полным: мелкий текст выглядел зажатым. */
@media (max-height: 655px) {
    .welcome-title  { margin-bottom: 10px; }
    .welcome-desc   { font-size: 15.5px; }
    .welcome-points { margin-top: 16px; }
    .welcome-points li { font-size: 13.5px; }
    .welcome-points li + li { margin-top: 9px; }
}
/* Предупреждение о риске: обязано быть, но не должно кричать */
.welcome-fine {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
    text-align: center;
    opacity: .75;
}

/* ===========================================================
   Экран 3 — почему нужна регистрация
   =========================================================== */
.why-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;          /* текстовый экран: прокрутка тут нормальна */
    padding: 8px 4px 0;
    text-align: start;
}
.why-title {
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    font-size: clamp(26px, 7.4vw, 32px);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 22px;
}
.why-item { margin-bottom: 20px; }
.why-h {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 5px;
}
.why-p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--muted);
}
/* Последний абзац — про то, что это быстро: снимает страх «долгой возни» */
.why-note {
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--accent-soft);
    font-size: 14px;
    line-height: 1.45;
}
.why-title { animation: welcRise .7s cubic-bezier(.22,.61,.36,1) .05s both; }
.why-item  { animation: welcRise .7s cubic-bezier(.22,.61,.36,1) .14s both; }
.why-item + .why-item { animation-delay: .22s; }
.why-item + .why-item + .why-item { animation-delay: .3s; }
.why-note  { animation: welcRise .7s cubic-bezier(.22,.61,.36,1) .38s both; }

/* ===========================================================
   Кнопки
   =========================================================== */
.footer-btn {
    position: relative;
    margin-top: auto;          /* прижата к низу экрана */
    padding-top: 16px;
    background: var(--bg);
    flex-shrink: 0;
}
/* мягкое «затухание» списка под кнопкой */
.footer-btn::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -28px;
    height: 28px;
    background: linear-gradient(to top, var(--bg), transparent);
    pointer-events: none;
}
/* кнопка плавно выезжает снизу при появлении экрана */
.screen:not(.hidden) .footer-btn {
    animation: footerUp 0.45s var(--ease) both;
}
@keyframes footerUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
.btn {
    display: block;
    width: 100%;
    padding: 16px 18px;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s var(--ease), background 0.2s var(--ease),
                opacity 0.2s var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:active { background: var(--accent-press); }
.btn-dark { background: var(--text); color: var(--bg); }  /* инверсия — видна в обеих темах */
/* Второстепенное действие рядом с главным: не спорит с ним за внимание */
.btn-ghost {
    background: transparent; color: var(--text);
    border: 1px solid var(--border); margin-top: 8px;
}
.btn-ghost:active { background: var(--surface); }
.btn:active { transform: scale(0.985); }
.btn:disabled { opacity: 0.45; transform: none; cursor: default; }

/* ===========================================================
   Основной экран — регистрация
   =========================================================== */
.container { width: 100%; }
.lead { color: var(--muted); line-height: 1.55; font-size: 16px; margin: 0 0 22px; }

.steps {
    padding: 0;
    margin: 0 0 22px;
    list-style: none;
    counter-reset: step;
}
.steps li {
    position: relative;
    padding: 0 0 16px 38px;
    line-height: 1.45;
    counter-increment: step;
}
.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0; top: -1px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

#register-link { margin-bottom: 18px; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
}
label {
    display: block;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--muted);
    font-weight: 500;
}
.form input {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    background: var(--bg);
    color: var(--text);
    transition: border-color 0.2s var(--ease);
}
.form input:focus { outline: none; border-color: var(--accent); }

.status { text-align: center; font-size: 15px; min-height: 22px; margin-top: 14px; }
.status.error   { color: var(--down); }
.status.success { color: var(--up); }

/* ===========================================================
   Приложение с табами
   =========================================================== */
.tab-panels {
    position: relative;
    flex: 1;
    min-height: 0;
}
.tab-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    transform: translateX(12px);
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    scrollbar-width: none;
}
.tab-panel::-webkit-scrollbar { display: none; }
.tab-panel.active { opacity: 1; transform: none; pointer-events: auto; }
.panel-scroll { padding-bottom: 14px; }

.app-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 2px 0 16px;
}

/* ---------- Markets: график ---------- */
.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 18px;
}
.chart-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.chart-sym { font-size: 14px; font-weight: 600; color: var(--muted); }
.chart-price {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.chart-change {
    font-size: 14px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}
.chart-change.up   { color: var(--up);   background: rgba(43, 186, 130, 0.14); }
.chart-change.down { color: var(--down); background: rgba(240, 89, 94, 0.14); }
.chart-canvas { width: 100%; height: 168px; display: block; }

/* ---------- Баннер «зарегистрируйся» ---------- */
.cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: start;
    padding: 16px 18px;
    margin-bottom: 18px;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-press));
    box-shadow: 0 10px 26px rgba(217, 119, 87, 0.32);
    transition: transform 0.12s var(--ease);
}
.cta-banner:active { transform: scale(0.99); }
.cta-text { display: flex; flex-direction: column; gap: 3px; }
.cta-title { font-weight: 700; font-size: 16px; }
.cta-sub { font-size: 13px; opacity: 0.92; }
.cta-arrow { font-size: 22px; font-weight: 700; flex-shrink: 0; }
[dir="rtl"] .cta-arrow { transform: scaleX(-1); }

/* ---------- Аватары активов ---------- */
.avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c, #888);
    color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.2px;
    flex-shrink: 0;
}
.avatar-lg { width: 46px; height: 46px; font-size: 12px; }
.avatar-xl { width: 56px; height: 56px; font-size: 15px; }

/* ---------- Секции ---------- */
.section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 22px 2px 12px;
}
.section-head > span { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.section-link {
    border: none; background: none; cursor: pointer;
    color: var(--accent); font-family: var(--font); font-size: 14px; font-weight: 600;
}

/* «Цвета изменения» */
.trend-chg.up, .asset-chg.up, .mover-chg.up { color: var(--up); }
.trend-chg.down, .asset-chg.down, .mover-chg.down { color: var(--down); }

/* ---------- Тренды (2x2) ---------- */
.trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trend-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 18px; padding: 14px;
    text-align: start; color: var(--text); cursor: pointer;
    transition: transform 0.12s var(--ease);
}
.trend-card:active { transform: scale(0.98); }
.trend-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.trend-spark { width: 70px; height: 30px; }
.trend-name { font-weight: 700; font-size: 15px; }
.trend-chg { font-size: 13px; font-weight: 600; margin-top: 5px; font-variant-numeric: tabular-nums; }
.trend-price { color: var(--muted); font-size: 14px; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------- Список активов ---------- */
.asset-list { display: flex; flex-direction: column; gap: 2px; }
.asset-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 11px 8px; border: none; background: none; color: var(--text);
    text-align: start; cursor: pointer; border-radius: 12px;
    transition: background 0.15s var(--ease);
}
.asset-row:active { background: var(--surface); }
.asset-meta { flex: 1; min-width: 0; }
.asset-name { font-weight: 600; font-size: 15px; }
.asset-ticker { color: var(--muted); font-size: 13px; margin-top: 1px; }
.asset-right { text-align: end; }
.asset-price { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.asset-chg { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 1px; }

/* ---------- Сегмент гейнеры/лузеры ---------- */
.seg2 {
    display: flex; gap: 6px; padding: 4px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; margin-bottom: 14px;
}
.seg2-btn {
    flex: 1; padding: 9px; border: none; background: none; border-radius: 10px;
    color: var(--muted); font-family: var(--font); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.2s var(--ease);
}
.seg2-btn.active { background: var(--accent-soft); color: var(--accent); }

/* ---------- Топ / Самые торгуемые (сетка 4) ---------- */
.mover-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; }
.mover-cell {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    border: none; background: none; color: var(--text); cursor: pointer; padding: 2px 0;
}
.mover-ticker { font-size: 12px; font-weight: 600; }
.mover-chg { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Объяснение для тех, у кого счёт уже есть */
/* ===========================================================
   Окно доступа — состояние, факты, одно действие
   =========================================================== */
.acc-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; }
.acc-mark {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px;
    background: var(--accent-soft);
    display: block; position: relative;
}
.acc-mark::after {                       /* фирменная искра вместо иконки */
    content: ""; position: absolute; inset: 11px;
    background: var(--accent);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%,
                       40% 60%, 0 50%, 40% 40%);
}
.acc-title {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(23px, 6.4vw, 27px);
    line-height: 1.15; font-weight: 600; margin: 0;
}
/* Возврат от брокера без регистрации: спрашиваем прямо, а не делаем вид,
   что человек здесь впервые. */
.acc-back {
    margin: 0 0 18px; padding: 14px 15px;
    border-radius: 15px;
    background: var(--accent-soft);
}
.acc-back-t { margin: 0 0 11px; font-size: 14.5px; line-height: 1.4; }
.acc-back-row { display: flex; gap: 8px; align-items: stretch; }
/* Высота по содержимому, а не фиксированная: при height:42px русское
   «Попробовать снова» переносилось на две строки и вылезало из кнопки
   (scrollHeight 54 против clientHeight 40), а соседняя оставалась в одну
   строку — пара выглядела сломанной. Теперь обе растут до большей. */
.acc-back-row .btn {
    flex: 1; min-height: 44px; height: auto;
    padding: 9px 10px; font-size: 14px; line-height: 1.25;
    margin-top: 0; background: var(--bg);
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center; white-space: normal;
}

/* Факты вместо абзаца: глаз считывает список за секунду, абзац — нет */
.acc-facts { list-style: none; margin: 0 0 18px; padding: 0; }
.acc-facts li {
    position: relative; padding-inline-start: 26px;
    font-size: 14.5px; line-height: 1.45; color: var(--text);
}
.acc-facts li + li { margin-top: 12px; }
.acc-facts li::before {
    content: ""; position: absolute; inset-inline-start: 0; top: .34em;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent-soft);
}
.acc-facts li::after {
    content: ""; position: absolute; inset-inline-start: 5px; top: .62em;
    width: 6px; height: 3px; border-inline-start: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(-45deg);
}
/* Предупреждающий факт — тот, из-за которого потом ломается доступ */
.acc-facts li.warn::before { background: rgba(224, 122, 95, .16); }
/* Раньше здесь была одна палочка без точки — читалась как сломанный глиф.
   Рисуем полноценный «!»: штрих, пробел, точка — одним градиентом, без
   лишнего элемента. */
.acc-facts li.warn::after {
    inset-inline-start: 7px; top: .42em;
    width: 2px; height: 9px; border: 0; border-radius: 1px;
    transform: none;
    background: linear-gradient(var(--accent) 0 5.5px,
                                transparent 5.5px 7px,
                                var(--accent) 7px 9px);
}
.btn-lg { height: 56px; font-size: 16.5px; }
/* Вторичные действия в одну строку: они не должны спорить с кнопкой */
.acc-links {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.acc-link {
    background: none; border: 0; padding: 7px 10px; cursor: pointer;
    font-family: var(--font); font-size: 13.5px; color: var(--muted);
    text-decoration: none; border-radius: 9px;
}
.acc-link:active { background: var(--surface); }
/* Поддержка выделена: до неё должно быть видно, что дойти можно */
.acc-link-support { color: var(--accent); font-weight: 600; }
.acc-link-support::after { content: " ↗"; font-weight: 400; }

.existing-box {
    margin-top: 10px; padding: 13px 15px;
    border-radius: 14px;
    background: var(--surface); border: 1px solid var(--border);
}
.existing-text { font-size: 13px; line-height: 1.5; color: var(--muted); white-space: pre-line; }

/* Подсказка «первый сигнал бесплатный» — до того, как его потратили */
.free-hint {
    display: flex; align-items: center; gap: 9px;
    margin: 14px 0 12px; padding: 11px 13px;
    border-radius: 13px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.35;
}
.free-hint-ic { font-size: 17px; line-height: 1; flex-shrink: 0; }

/* Итог после бесплатного сигнала — заметнее обычной подписи */
.signal-note.demo {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 13px;
    padding: 12px 14px;
    color: var(--text);
    font-weight: 600;
}

/* ---------- Мгновенный каркас запуска ---------- */
.boot {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center;
    background: var(--bg);
    transition: opacity .18s ease;
}
.boot.gone { opacity: 0; pointer-events: none; }
.boot-logo { width: 76px; height: 76px; object-fit: contain; animation: bootpulse 1.4s ease-in-out infinite; }
@keyframes bootpulse { 0%, 100% { opacity: .45; transform: scale(.97); } 50% { opacity: 1; transform: scale(1); } }

/* ---------- Хаб сигналов (главная) ---------- */
.hub-lead { color: var(--muted); font-size: 15px; margin: -6px 0 16px; }
.hub-list { display: flex; flex-direction: column; gap: 10px; }

/* Хаб: рейтинг пар (список-лидерборд) */
.hub-rank-sub { color: var(--muted); font-size: 13px; margin: -6px 2px 12px; }
.hub-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 13px 14px;
    font-family: var(--font); color: var(--text); text-align: start; cursor: pointer;
    transition: transform .12s var(--ease);
}
.hub-row:active { transform: scale(.985); }
.hub-row.top { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.hub-row-rank {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent);
    font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.hub-row-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hub-row-name { font-weight: 700; font-size: 15px; }
.hub-row-sub { font-size: 12px; color: var(--muted); }
.hub-row-go { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 6px 12px; }
.hub-next {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 12px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.hub-next .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    animation: hubdot 2s ease-in-out infinite;
}
@keyframes hubdot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Хаб: гид «как это работает» (3 шага) */
.hub-guide { display: flex; flex-direction: column; gap: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 15px 16px; margin-bottom: 18px; }
.hub-step { display: flex; align-items: center; gap: 12px; }
.hub-step-n { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.hub-step-t { font-size: 14px; font-weight: 500; color: var(--text); }

/* Хаб: избранная карточка «сигнал дня» */
.hub-hero {
    display: block; width: 100%; text-align: start; cursor: pointer;
    border: none; border-radius: 20px; padding: 18px; margin-bottom: 4px;
    color: #fff; font-family: var(--font);
    background: linear-gradient(135deg, var(--accent), var(--accent-press));
    box-shadow: 0 12px 30px rgba(217, 119, 87, .32);
    transition: transform .12s var(--ease);
}
.hub-hero:active { transform: scale(.99); }
.hub-hero-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.hub-hero .avatar { border: 2px solid rgba(255, 255, 255, .5); }
.hub-hero-meta { flex: 1; min-width: 0; }
.hub-hero-name { font-size: 20px; font-weight: 800; }
.hub-hero-sub { font-size: 13px; opacity: .9; margin-top: 2px; }
.hub-hero-cta { text-align: center; font-weight: 700; font-size: 15px; background: rgba(255, 255, 255, .22); border-radius: 12px; padding: 12px; }

/* Хаб: быстрые действия */
.hub-actions { display: flex; gap: 10px; margin-top: 20px; }
.hub-action {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    padding: 14px 6px; color: var(--text); font-family: var(--font); font-size: 12px; font-weight: 600;
    cursor: pointer;
}
.hub-action:active { background: var(--accent-soft); }
.hub-action-ic { font-size: 22px; line-height: 1; }

/* ===========================================================
   Детальный экран актива
   =========================================================== */
.detail {
    position: fixed; inset: 0; z-index: 90;
    background: var(--bg);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.32s var(--ease);
}
.detail.hidden { display: none; }
.detail.open { transform: none; }
.detail-bar { padding: calc(14px + env(safe-area-inset-top)) 16px 4px; }
.detail-back {
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: var(--surface); color: var(--text);
    font-size: 26px; line-height: 1; cursor: pointer;
}
.detail-scroll {
    flex: 1; overflow-y: auto; scrollbar-width: none;
    width: 100%; max-width: 460px; margin: 0 auto;
    padding: 8px 22px calc(28px + env(safe-area-inset-bottom));
}
.detail-scroll::-webkit-scrollbar { display: none; }
.detail-id { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.detail-name { font-size: 18px; font-weight: 700; }
.detail-ticker { font-size: 14px; color: var(--muted); margin-top: 2px; }
.detail-price { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.detail-change { display: flex; align-items: center; gap: 10px; margin: 8px 0 20px; flex-wrap: wrap; }
.d-abs { font-weight: 600; font-variant-numeric: tabular-nums; }
.d-abs.up, .d-badge.up { color: var(--up); }
.d-abs.down, .d-badge.down { color: var(--down); }
.d-badge { padding: 3px 9px; border-radius: 8px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.d-badge.up { background: rgba(43, 186, 130, 0.14); }
.d-badge.down { background: rgba(240, 89, 94, 0.14); }
.d-period { color: var(--muted); font-size: 14px; }
.detail-chart { height: 210px; }
.detail-chart canvas { width: 100%; height: 100%; display: block; }
.detail-dates { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin: 8px 2px 18px; }
.range-seg { display: flex; gap: 8px; margin-bottom: 22px; }
.range-btn {
    flex: 1; padding: 10px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--surface); color: var(--muted);
    font-family: var(--font); font-weight: 600; font-size: 13px; cursor: pointer;
    transition: all 0.2s var(--ease);
}
.range-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ---------- Markets: список инструментов ---------- */
.inst-list { display: flex; flex-direction: column; gap: 8px; }
.inst-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    color: var(--text);
    text-align: start;
    cursor: pointer;
    transition: border-color 0.2s var(--ease);
}
.inst-row.active { border-color: var(--accent); }
.inst-sym { font-weight: 600; font-size: 15px; min-width: 76px; }
.inst-spark { flex: 1; height: 32px; min-width: 0; }
.inst-right { text-align: end; min-width: 86px; }
.inst-price { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.inst-chg { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.inst-chg.up   { color: var(--up); }
.inst-chg.down { color: var(--down); }

/* ---------- Trade ---------- */
.trade-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.trade-sym { font-weight: 700; font-size: 18px; }
.trade-price { margin-left: 10px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.trade-clock { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.trade-clock .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.field { margin-bottom: 18px; }
.field-label { font-size: 14px; color: var(--muted); font-weight: 500; margin-bottom: 8px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.stepper { display: flex; align-items: center; gap: 12px; }
.step-btn {
    width: 48px; height: 48px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
}
.step-btn:active { background: var(--accent-soft); }
.amount { flex: 1; text-align: center; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.dir-row { display: flex; gap: 10px; margin-bottom: 20px; }
.dir-btn {
    flex: 1;
    padding: 14px;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-family: var(--font);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.dir-up.active   { color: var(--up);   border-color: var(--up);   background: rgba(43, 186, 130, 0.20); }
.dir-down.active { color: var(--down); border-color: var(--down); background: rgba(240, 89, 94, 0.20); }

/* ---------- Info / FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.faq details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2px 16px;
}
.faq summary {
    list-style: none;
    cursor: pointer;
    padding: 15px 0;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 22px; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0 0 15px; color: var(--muted); line-height: 1.55; font-size: 15px; }

/* ===========================================================
   Сегментированный переключатель (glass pill)
   =========================================================== */
.tabbar {
    position: relative;
    display: flex;
    margin-top: 10px;
    padding: 6px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: var(--surface);                                   /* fallback */
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    flex-shrink: 0;
}
.tabbar-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.25s var(--ease);
}
.tabbar-btn svg { width: 23px; height: 23px; }
.tabbar-btn.active { color: var(--accent); }
.tabbar-pill {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 0;
    border-radius: 16px;
    background: var(--accent-soft);
    transition: transform 0.35s var(--ease), width 0.35s var(--ease);
    z-index: 0;
}

/* ===========================================================
   Модалка регистрации (bottom sheet)
   =========================================================== */
.modal { position: fixed; inset: 0; z-index: 100; }
.modal.hidden { display: none; }
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}
.modal.open .modal-backdrop { opacity: 1; }
.sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-width: 460px;
    margin: 0 auto;
    background: var(--bg);
    border-radius: 24px 24px 0 0;
    padding: 10px 22px calc(26px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.38s var(--ease);
    max-height: 92vh;
    overflow-y: auto;
}
.modal.open .sheet { transform: none; }
.sheet-grip {
    width: 42px; height: 4px;
    border-radius: 2px;
    background: var(--border);
    margin: 6px auto 18px;
    cursor: pointer;
}
.sheet h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }

/* Модалка смены статуса (поздравление + дальнейшие шаги) */
.status-card {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -46%) scale(0.96);
    width: calc(100% - 40px);
    max-width: 380px;
    background: var(--bg);
    border-radius: 24px;
    padding: 30px 24px calc(22px + env(safe-area-inset-bottom));
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.30);
    opacity: 0;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.modal.open .status-card { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.status-emoji { font-size: 54px; line-height: 1; margin-bottom: 14px; }
.status-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--text); }
.status-text { color: var(--muted); line-height: 1.5; font-size: 15px; margin: 0 0 20px; }
.status-steps { display: flex; flex-direction: column; gap: 10px; text-align: start; margin: 0 0 22px; }
.status-step {
    display: flex; align-items: center; gap: 11px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 12px 14px;
    font-size: 15px; font-weight: 500; color: var(--text);
}
.status-step-ic {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.status-step.done .status-step-ic { background: var(--accent); color: #fff; }
.status-step.todo { color: var(--muted); }
.status-step.todo .status-step-ic { background: transparent; border: 1.5px solid var(--border); color: var(--muted); }
.status-card .btn { width: 100%; }
.status-card .link-btn { margin-top: 12px; }

/* Кнопка «Сигнал по паре» на странице актива */
.detail-signal { margin: 4px 0 12px; }

/* Карточка текущего сигнала на экране Trade (видна после закрытия окна) */
.tsig {
    display: block; width: 100%; text-align: start;
    margin-top: 16px; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 18px; cursor: pointer;
    font-family: var(--font); color: var(--text);
    transition: border-color .2s var(--ease), opacity .3s var(--ease);
}
.tsig:active { border-color: var(--accent); }
.tsig.expired { opacity: 0.55; }
.tsig-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tsig-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tsig-timer { font-size: 13px; font-weight: 600; color: var(--accent); }
.tsig.expired .tsig-timer { color: var(--muted); }
.tsig-main { display: flex; align-items: center; gap: 12px; }
.tsig-info { flex: 1 1 auto; min-width: 0; }
.tsig-sym { font-size: 16px; font-weight: 600; }
.tsig-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.tsig-dir { display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-weight: 700; font-size: 15px; }
.tsig-dir.up { background: rgba(31,169,113,.14); color: var(--up, #1FA971); }
.tsig-dir.down { background: rgba(229,72,77,.14); color: var(--down, #E5484D); }
.tsig-badge { font-size: 13px; line-height: 1; }

/* Подсказка под сигналом (вместо старого таймера) */
.signal-note { font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; margin: 6px 0 14px; }

/* Выбор AI-модели */
.model-badge { color: var(--accent); }
.model-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.model-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 14px 16px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--border);
    font-family: var(--font); color: var(--text); font-size: 16px; cursor: pointer;
    transition: border-color .15s var(--ease);
}
.model-item.selected { border-color: var(--accent); background: var(--accent-soft); }
.model-item.locked { opacity: 0.6; }
.model-name { font-weight: 600; }
.model-check { color: var(--accent); font-weight: 700; }
.model-lock { font-size: 13px; color: var(--muted); white-space: nowrap; }
.model-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.model-info .model-name { font-size: 16px; font-weight: 600; }
.model-req { font-size: 12px; color: var(--muted); font-weight: 400; }
.model-upgrade { margin-top: 14px; padding: 14px 16px; background: var(--accent-soft); border-radius: 14px; }
.model-upgrade-text { font-size: 14px; line-height: 1.5; color: var(--text); margin: 0 0 12px; }
.model-upgrade .btn { width: 100%; }

/* Блок управления рисками (Info) */
.risk-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; }
.risk-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.risk-list li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.45; color: var(--text); }
.risk-list li::before { content: "•"; position: absolute; left: 4px; color: var(--accent); font-weight: 700; }
.risk-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.faq details > p { white-space: pre-line; }

/* Тонкий ползунок прокрутки — подсказка, что ниже есть ещё контент */
.sheet, .panel-scroll, .asset-list, .support-messages, .lang-list, .model-list {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.sheet::-webkit-scrollbar,
.panel-scroll::-webkit-scrollbar,
.asset-list::-webkit-scrollbar,
.support-messages::-webkit-scrollbar,
.lang-list::-webkit-scrollbar,
.model-list::-webkit-scrollbar { width: 5px; }
.sheet::-webkit-scrollbar-thumb,
.panel-scroll::-webkit-scrollbar-thumb,
.asset-list::-webkit-scrollbar-thumb,
.support-messages::-webkit-scrollbar-thumb,
.lang-list::-webkit-scrollbar-thumb,
.model-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
.sheet::-webkit-scrollbar-track,
.panel-scroll::-webkit-scrollbar-track { background: transparent; }

/* ===========================================================
   Markets: баннер статуса · категории · OTC · выплата
   =========================================================== */
.mkt-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 14px;
}
.mkt-banner .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mkt-banner.open .dot { background: var(--up); animation: pulse 1.6s infinite; }
.mkt-banner.closed .dot { background: var(--down); }
.mkt-banner .muted { color: var(--muted); }

.cat-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 14px;
    padding-bottom: 2px;
}
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chip {
    flex: 0 0 auto;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cat-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.otc-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}
.payout { font-weight: 700; font-size: 15px; color: var(--up); font-variant-numeric: tabular-nums; }
.payout.na { color: var(--muted); font-weight: 600; }

/* детальный экран: выплата + статус */
.detail-payout-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; }
.d-payout { font-size: 17px; font-weight: 700; color: var(--up); }
.d-payout.na { color: var(--muted); }
.d-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.d-status .sdot { width: 8px; height: 8px; border-radius: 50%; }
.d-status.open { color: var(--up); }
.d-status.open .sdot { background: var(--up); }
.d-status.closed { color: var(--muted); }
.d-status.closed .sdot { background: var(--down); }

/* экран «Все активы» */
.detail-bar-title { font-size: 17px; font-weight: 600; margin-inline-start: 4px; }
#full-market { margin-bottom: 14px; }
#asset-list-screen .search-wrap { margin-top: 0; }
#full-list { margin-top: 4px; }

/* Trade: выбор актива */
.asset-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    cursor: pointer;
    transition: border-color 0.2s var(--ease);
}
.asset-select:active { border-color: var(--accent); }
.asset-select-left { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; }
.asset-select-caret { color: var(--muted); font-size: 12px; }

/* Trade: экспирация на всю ширину */
/* Экспирации сеткой: на OTC их восемь — раскладываем в два ряда, чтобы всё
   было видно сразу. Листать ничего не нужно, промахнуться сложно.
   Число колонок ставится в renderExpiries под длину набора. */
.expiry-row { display: grid; gap: 8px; }
.expiry-btn {
    padding: 13px 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease),
                border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.expiry-btn:active { transform: scale(0.95); }
.expiry-btn.active {
    background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}

/* липкий поиск в шторке выбора актива */
#asset-sheet .sheet-search {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
    margin: 0 0 12px;
    padding-top: 2px;
}
#asset-sheet .field-label { margin-top: 6px; }
#asset-sheet #asset-popular { margin-bottom: 12px; }

/* ---------- Сигнал ---------- */
.sheet-title {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}
.sheet-title .ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-inline-start: 8px;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    vertical-align: middle;
}
.signal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.signal-asset { font-size: 18px; font-weight: 700; }
.signal-sub { font-size: 13px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.signal-dir {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 22px;
    border-radius: 18px;
    margin-bottom: 20px;
}
.signal-dir.up   { color: var(--up);   background: rgba(43, 186, 130, 0.10); }
.signal-dir.down { color: var(--down); background: rgba(240, 89, 94, 0.10); }
.signal-dir-badge {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: currentColor;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 20px -6px currentColor;
}
.signal-dir-badge svg { width: 30px; height: 30px; }
.signal-dir-text { display: flex; flex-direction: column; }
.signal-dir-label { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.signal-dir-hint { font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.signal-timer { text-align: center; font-size: 15px; font-weight: 600; color: var(--muted); margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.signal-timer.expired { color: var(--down); }

/* «Почему такой сигнал» — обоснование по индикаторам */
.sig-why {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.sig-why-head {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted); margin-bottom: 8px;
}
.sig-why-item { font-size: 14px; color: var(--text); line-height: 1.6; }

/* Шаг 1 сигнала: подготовка (таймфрейм + анализ) */
.setup-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 18px 0 10px; }
#signal-setup .signal-head { margin-bottom: 4px; }
#signal-setup #sig-expiry { margin-bottom: 2px; }
#signal-reveal { margin-top: 20px; }

/* «Сколько живёт сигнал» — тонкая нейтральная строка (без цветного блока) */
.sig-entry { text-align: center; margin: -4px 0 16px; }
.sig-entry-label { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sig-entry.live .sig-entry-label { color: var(--muted); }
.sig-entry.expired .sig-entry-label { color: var(--down); }

/* ---------- AI-поддержка (чат) ---------- */
#support-screen { display: flex; flex-direction: column; }
#support-screen .detail-bar { display: flex; align-items: center; gap: 10px; }
.support-human {
    margin-inline-start: auto;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.support-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.msg {
    max-width: 84%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.msg.bot { align-self: flex-start; background: var(--surface); color: var(--text); border-bottom-left-radius: 6px; }
.msg.typing { display: flex; gap: 5px; align-items: center; padding: 14px; }
.msg.typing .tdot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typingdot 1.2s infinite ease-in-out; }
.msg.typing .tdot:nth-child(2) { animation-delay: 0.18s; }
.msg.typing .tdot:nth-child(3) { animation-delay: 0.36s; }
@keyframes typingdot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.support-input-row {
    display: flex;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--bg);
}
.support-input {
    flex: 1;
    padding: 12px 14px;
    font-size: 16px;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
}
.support-input:focus { outline: none; border-color: var(--accent); }
.support-send {
    width: 46px; height: 46px;
    flex-shrink: 0;
    border: none;
    border-radius: 14px;
    background: var(--accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.support-send svg { width: 20px; height: 20px; }
.support-send:active { background: var(--accent-press); }

/* ---------- Экран доступа: воронка из 3 шагов ---------- */
.fsteps { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 18px; }
.fstep {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 13px 14px;
    font-size: 15px; font-weight: 500; color: var(--muted);
    transition: border-color .25s var(--ease), color .25s var(--ease);
}
.fstep-ic {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
    background: transparent; border: 1.5px solid var(--border); color: var(--muted);
}
.fstep.active { color: var(--text); border-color: var(--accent); }
.fstep.active .fstep-ic { background: var(--accent); border-color: var(--accent); color: #fff; }
.fstep.done { color: var(--text); }
.fstep.done .fstep-ic { background: var(--up); border-color: var(--up); color: #fff; }
.fstep.checking { color: var(--text); border-color: var(--accent); }
.fstep.checking .fstep-ic {
    border-color: var(--accent); color: var(--accent); font-size: 12px;
    animation: fstep-pulse 1.2s ease-in-out infinite;
}
@keyframes fstep-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.fstep-t { line-height: 1.4; }
#register-link, #deposit-btn { margin-bottom: 2px; }

/* блок «регистрация прошла, нужен депозит» */
.reg-done {
    background: rgba(43, 186, 130, 0.12);
    border: 1px solid rgba(43, 186, 130, 0.30);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}
.reg-done-title { font-size: 17px; font-weight: 700; color: var(--up); margin-bottom: 4px; }
.reg-done-sub { font-size: 15px; line-height: 1.5; color: var(--text); }

/* гайд из 2 шагов на экране доступа */
.access-steps2 { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.astep { display: flex; align-items: center; gap: 12px; }
.astep-num {
    width: 26px; height: 26px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    font-weight: 700; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.astep-btn { flex: 1; }
#register-link { margin-bottom: 0; }   /* в гайде отступ задаёт .access-steps2 */
.access-note { text-align: center; color: var(--muted); font-size: 13px; line-height: 1.45; margin: 8px 0 0; }

/* ветка «у меня уже есть аккаунт» */
.link-btn {
    display: block; width: 100%; text-align: center;
    background: none; border: none;
    color: var(--accent); font-family: var(--font);
    font-size: 14px; font-weight: 600;
    padding: 14px 0 2px; cursor: pointer;
}
.have-account-box {
    margin-top: 12px; padding-top: 14px;
    border-top: 1px solid var(--border);
}
.have-account-note { font-size: 13px; color: var(--muted); line-height: 1.45; margin: 0 0 12px; }

/* анимация анализа */
.signal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 34px 0 26px;
}
/* «Модель думает»: логотип Claude медленно вращается, за ним пульсирует свечение */
.signal-ai { position: relative; width: 66px; height: 66px; display: grid; place-items: center; }
.signal-ai-glow {
    position: absolute; width: 80px; height: 80px; border-radius: 50%;
    background: radial-gradient(circle, var(--accent), transparent 70%);
    filter: blur(10px);
    animation: aiGlow 1.3s ease-in-out infinite;
}
.signal-ai-logo {
    position: relative; width: 54px; height: 54px; object-fit: contain;
    animation: aiSpin 1.8s linear infinite;
}
@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiGlow { 0%, 100% { transform: scale(1); opacity: .22; } 50% { transform: scale(1.3); opacity: .4; } }
.signal-loading-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    min-height: 20px;
    text-align: center;
}
.signal-progress {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--surface);
    overflow: hidden;
}
.signal-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--accent);
}