/* © SNDR FX 2026 — All rights reserved · проприетарный код, копирование запрещено */ /* ───────────── Мобильная тема (телефоны ≤ MOBILE_BP) ───────────── Отдельная тема для телефонов: включается атрибутом data-layout="mobile" на (ставит App по ширине окна, см. CONFIG.MOBILE_BP). Планшеты и ПК — десктоп без изменений. Все правила скоуплены атрибутом и грузятся последними — десктопные файлы не трогаем, конфликтов нет. */ /* ── шапка в два ряда: лого+кнопки сверху, ТФ-лента строкой ниже ── */ html[data-layout="mobile"] .header { flex-wrap: wrap; row-gap: 4px; padding: 5px 10px 6px 44px; padding-top: max(5px, env(safe-area-inset-top, 0px)); min-height: 0; } /* двухрядной шапке тесно в десктопном max-height:54px из workspaces.css */ html[data-layout="mobile"] .app .header { max-height: none; } html[data-layout="mobile"] .app.ws-full .header { max-height: 0; } html[data-layout="mobile"] .header #gridTfBar { position: static; transform: none; order: 3; flex: 1 1 100%; max-width: 100%; overflow-x: auto; justify-content: flex-start; } html[data-layout="mobile"] .tf-btn { width: 32px; } html[data-layout="mobile"] .header h1 { font-size: 12px; } html[data-layout="mobile"] .collapse-btn { top: 6px; left: 8px; width: 24px; height: 24px; font-size: 14px; } html[data-layout="mobile"] .charts-panel { padding: 4px; } /* ── монеты — выезжающая шторка ── На телефоне шторка живёт в body (App.placeSidebar): внутри .ws-track инлайн-transform слайдера пленил бы fixed. Ниже auth-стены и поиска, но выше фокуса — фокус сам гасит шторку при открытии. */ html[data-layout="mobile"] .sidebar { position: fixed; top: 0; bottom: 0; right: 0; width: min(86vw, 340px) !important; min-width: 0 !important; z-index: 250; transform: translateX(105%); transition: transform 0.18s var(--ease); border-left: 1px solid var(--border); box-shadow: -12px 0 32px rgba(0, 0, 0, 0.45); padding-top: env(safe-area-inset-top, 0px); } html[data-layout="mobile"] body.sb-left .sidebar { right: auto; left: 0; transform: translateX(-105%); border-left: none; border-right: 1px solid var(--border); box-shadow: 12px 0 32px rgba(0, 0, 0, 0.45); } html[data-layout="mobile"] .sidebar.drawer-open { transform: none; } html[data-layout="mobile"] .sidebar-resizer { display: none; } /* ── строки монет высотой под палец (~44px цели) ── */ html[data-layout="mobile"] .coin-item { padding-top: 10px; padding-bottom: 10px; } html[data-layout="mobile"] .coin-headers { padding-top: 12px; padding-bottom: 12px; } /* ── карточки компактнее (одна колонка во всю ширину) ── */ html[data-layout="mobile"] .chart-grid { gap: 2px; } html[data-layout="mobile"] .chart-card { padding: 2px 4px 2px; } html[data-layout="mobile"] .card-metrics { gap: 2px; } html[data-layout="mobile"] .metric { font-size: 8px; } html[data-layout="mobile"] .metric .icon { width: 9px; height: 9px; } html[data-layout="mobile"] .card-header { height: 14px; gap: 4px; } html[data-layout="mobile"] .card-symbol { font-size: 10px; } html[data-layout="mobile"] .card-price { font-size: 9px; } /* ── фокус на весь экран + крестик ── На десктопе закрывают фон/Esc, в полноэкранном их нет. */ html[data-layout="mobile"] .modal { width: 100vw; height: 100vh; height: 100dvh; min-height: 0; border-radius: 0; border-left: none; border-right: none; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px)); } /* шапка фокуса в два ряда: монета сверху, ТФ-лента строкой ниже */ html[data-layout="mobile"] #modalTfBar { position: static; transform: none; order: 5; flex: 1 1 100%; margin: 0; max-width: 100%; overflow-x: auto; justify-content: flex-start; } /* маркер уступает место крестику */ html[data-layout="mobile"] .modal > .marker-box { right: 56px; } html[data-layout="mobile"] .modal-x { display: inline-flex; align-items: center; justify-content: center; position: absolute; z-index: 6; top: calc(8px + env(safe-area-inset-top, 0px)); right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); font-size: 20px; line-height: 1; cursor: pointer; } html[data-layout="mobile"] .modal-x:active { transform: scale(0.94); } /* ── переход в Lite: пилюля в шапке (ничего не перекрывает) ── На десктопе скрыта всегда: базовое правило ниже, показ — только в телефонной теме; в принудительном десктопе (?desktop=1) — тоже, чтобы было как вернуться обратно в Lite. */ .lite-jump { display: none; } html[data-layout="mobile"] .lite-jump, html.from-lite .lite-jump { display: inline-flex; align-items: center; flex: none; height: 34px; padding: 0 12px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; } html[data-layout="mobile"] .lite-jump:active { transform: scale(0.96); }