/* ================================================================
   PayHub — мобильный shell + дашборд трейдера (внутри PayHubPwa)
   Показывается на маленьких экранах. Всё скоупится под .phm,
   токены свои (НЕ --ph-*), тёмная тема — через html.app-dark.
   ================================================================ */

/* Стилизованные иконки PhIcon (inline-SVG, наследуют цвет текста). Глобально — иконки
   встречаются и вне корня .phm (листы «Ещё», контекст-меню). */
.ph-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

.phm {
    --color-background-primary:   #ffffff;
    --color-background-secondary: #f4f5f7;
    --color-text-primary:   #14181f;
    --color-text-secondary: #5c6470;
    --color-text-tertiary:  #8b919c;
    --color-border-secondary: #d7dbe0;
    --color-border-tertiary:  #ececef;
    --border-radius-md: 10px;
    --border-radius-lg: 16px;
    --color-accent: #1D9E75;

    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
}

html.app-dark .phm {
    --color-background-primary:   #161b22;
    --color-background-secondary: #21262d;
    --color-text-primary:   #e6edf3;
    --color-text-secondary: #9da7b1;
    --color-text-tertiary:  #6e7681;
    --color-border-secondary: #30363d;
    --color-border-tertiary:  #262c34;
}

/* ── Каркас приложения ───────────────────────────────────────── */
.phm-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    max-width: 100%;
    background: var(--color-background-primary);
    position: relative;
    overflow: hidden;
}
.phm-app * { box-sizing: border-box; }

/* Safari iOS: запрещаем горизонтальный скролл страницы на телефонах.
   `clip` (а не `hidden`) — чтобы не форсить overflow-y:auto на body (вложенный скролл). */
@media (max-width: 600px) {
    html, body { overflow-x: clip; max-width: 100%; }
}

.phm .app-header {
    padding: 12px 16px;
    /* viewport-fit=cover: не залезаем под статус-бар/вырез (env=0 на устройствах без выреза). */
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    flex-shrink: 0;
}
.phm .brand { font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.phm .brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.phm .brand-sub { font-size: 11px; color: var(--color-text-secondary); margin-top: 1px; }
.phm .header-actions { display: flex; gap: 8px; }
.phm .icon-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--color-background-secondary);
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; position: relative; color: var(--color-text-primary);
}
.phm .icon-btn-static { cursor: default; }

/* overflow-x: hidden обязателен: при overflow-y:auto Safari вычисляет overflow-x в auto
   и включает горизонтальный скролл при малейшем переполнении. width:100% + min-width:0
   у дочерних — чтобы контент ужимался под экран, а не вылезал. */
.phm .screen { flex: 1; overflow-y: auto; overflow-x: hidden; width: 100%; max-width: 100%; padding: 12px 16px 80px;
    /* viewport-fit=cover: боковые safe-area для landscape на устройствах с вырезом. */
    padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); }
.phm .screen > * { min-width: 0; }
.phm .screen::-webkit-scrollbar { display: none; }

.phm .tab-bar {
    display: flex; justify-content: space-around;
    padding: 8px 0 14px;
    /* viewport-fit=cover: не уходим под домашний индикатор. */
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    border-top: 0.5px solid var(--color-border-tertiary);
    background: var(--color-background-primary);
    flex-shrink: 0;
}
.phm .tab-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    flex: 1 1 0; min-width: 0;
    padding: 4px 6px; cursor: pointer; border: none; background: transparent;
    color: var(--color-text-tertiary); text-decoration: none;
}
.phm .tab-icon { width: 22px; height: 22px; flex-shrink: 0; }
.phm .tab-label { font-size: 10px; color: var(--color-text-tertiary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phm .tab-item.active { color: var(--color-text-primary); }
.phm .tab-item.active .tab-label { color: var(--color-text-primary); font-weight: 500; }

/* ── Лист «Ещё» (нижний выезжающий список доп. навигации админа) ───────────── */
.phm-more-backdrop {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0,0,0,0.45);
    animation: phm-fade-in .2s ease;
}
.phm-more-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1101;
    background: var(--color-background-primary);
    border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
    animation: phm-slide-up .25s cubic-bezier(.2,.8,.2,1);
    max-height: 80vh; overflow-y: auto;
}
.phm-more-grabber {
    width: 38px; height: 4px; border-radius: 2px;
    background: var(--color-border-secondary);
    margin: 6px auto 10px;
}
.phm-more-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--color-text-tertiary); margin: 0 0 8px 4px;
}
.phm-more-list { display: flex; flex-direction: column; gap: 2px; }
.phm-more-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 13px 8px; border: none; background: transparent;
    color: var(--color-text-primary); font-size: 15px; cursor: pointer;
    border-radius: var(--border-radius-md); text-align: left;
}
.phm-more-item:active { background: var(--color-background-secondary); }
.phm-more-item > .phm-more-ico { color: var(--color-text-secondary); flex-shrink: 0; }
.phm-more-item.danger { color: #E24B4A; }
.phm-more-item.danger > .phm-more-ico { color: #E24B4A; }
.phm-more-chevron { margin-left: auto; color: var(--color-text-tertiary); flex-shrink: 0; }

@keyframes phm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes phm-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ── Online toggle ───────────────────────────────────────────── */
.phm .online-toggle { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--color-background-secondary); border-radius: var(--border-radius-md); margin-bottom: 12px; }
.phm .online-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.phm .online-info > div { min-width: 0; }
.phm .online-text, .phm .online-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phm .status-row .toggle-switch { flex: 0 0 auto; }
.phm .online-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 0 rgba(29,158,117,0.4); animation: phm-pulse 2s infinite; }
.phm .online-pulse.off { background: var(--color-text-tertiary); animation: none; box-shadow: none; }
@keyframes phm-pulse { 0% { box-shadow: 0 0 0 0 rgba(29,158,117,0.4); } 70% { box-shadow: 0 0 0 8px rgba(29,158,117,0); } 100% { box-shadow: 0 0 0 0 rgba(29,158,117,0); } }
.phm .online-text { font-size: 13px; font-weight: 500; }
.phm .online-sub { font-size: 11px; color: var(--color-text-secondary); margin-top: 1px; }
.phm .toggle-switch { width: 36px; height: 20px; background: var(--color-accent); border-radius: 10px; position: relative; cursor: pointer; transition: background .2s; }
.phm .toggle-switch.off { background: var(--color-border-secondary); }
.phm .toggle-knob { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: all .2s; }
.phm .toggle-switch.off .toggle-knob { right: 18px; }

/* ── Balance card ────────────────────────────────────────────── */
.phm .balance-card { padding: 16px; border-radius: var(--border-radius-lg); margin-bottom: 14px; background: linear-gradient(135deg, #0F6E56, #1D9E75); color: #fff; }
.phm .balance-label { font-size: 11px; opacity: 0.8; margin-bottom: 4px; }
.phm .balance-value { font-size: 24px; font-weight: 500; margin-bottom: 12px; letter-spacing: -0.3px; }
.phm .balance-row { display: flex; gap: 8px; flex-wrap: wrap; }
.phm .balance-pill { padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,0.55); font-size: 11px; color: #04342C; font-weight: 500; }

/* ── Metric grid ─────────────────────────────────────────────── */
.phm .metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.phm .metric { padding: 10px 12px; background: var(--color-background-secondary); border-radius: var(--border-radius-md); }
.phm .metric-label { font-size: 10px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.phm .metric-value { font-size: 17px; font-weight: 500; }

/* ── Action grid ─────────────────────────────────────────────── */
.phm .action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.phm .action-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; background: var(--color-background-secondary); border-radius: var(--border-radius-md); border: none; cursor: pointer; position: relative; color: var(--color-text-primary); }
.phm .action-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--color-background-primary); display: flex; align-items: center; justify-content: center; }
.phm .action-label { font-size: 10px; color: var(--color-text-secondary); }
.phm .action-badge { position: absolute; top: 6px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; background: #E24B4A; color: #fff; border-radius: 8px; font-size: 9px; font-weight: 500; display: flex; align-items: center; justify-content: center; }

/* ── Section title ───────────────────────────────────────────── */
.phm .section-title { font-size: 11px; color: var(--color-text-tertiary); margin: 12px 0 8px; text-transform: uppercase; letter-spacing: 0.5px; display: flex; justify-content: space-between; align-items: center; }
.phm .section-link { font-size: 11px; color: #1D9E75; font-weight: 500; cursor: pointer; text-transform: none; letter-spacing: 0; }

/* ── Фильтры последних сделок (гео + точная сумма) ───────────── */
.phm .deal-filters { display: flex; gap: 8px; margin-bottom: 8px; }
.phm .deal-filters .deal-filter-geo {
    flex: 0 0 auto; padding: 7px 10px; font-size: 13px; outline: none;
    background: var(--color-background-secondary); color: var(--color-text-primary);
    border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md);
}
.phm .deal-filters .deal-filter-amount {
    flex: 1; display: flex; align-items: center; gap: 6px; padding: 7px 10px;
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md);
}
.phm .deal-filters .deal-filter-amount .ph-icon { color: var(--color-text-tertiary); flex-shrink: 0; }
.phm .deal-filters .deal-filter-amount input {
    border: none; background: transparent; outline: none; flex: 1; min-width: 0;
    font-size: 13px; color: var(--color-text-primary);
}

/* ── Deal cards ──────────────────────────────────────────────── */
.phm .deal-card { background: var(--color-background-primary); border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md); padding: 10px 12px; margin-bottom: 6px; }
/* Направление сделки тоном фона: вход — зелёный, выход — оранжевый. rgba читается на любой теме. */
.phm .deal-card.deal-in  { background: rgba(29, 158, 117, 0.12); border-color: rgba(29, 158, 117, 0.40); }
.phm .deal-card.deal-out { background: rgba(226, 130, 42, 0.12); border-color: rgba(226, 130, 42, 0.45); }
.phm .deal-card-clickable { cursor: pointer; transition: filter .12s; }
.phm .deal-card-clickable:active { filter: brightness(0.93); }
/* Истёкший ордер: гасим карточку перед авто-удалением из дашборда (через ~4 сек). */
.phm .deal-card.deal-expired { opacity: .5; filter: grayscale(0.4); transition: opacity .4s ease, filter .4s ease; }
.phm .deal-row { display: flex; justify-content: space-between; align-items: center; }
.phm .deal-id { font-size: 12px; font-weight: 500; }
/* Обратный отсчёт до дедлайна ордера; цвет фазы даёт bootstrap-класс badge bg-* из BadgeClass */
.phm .deal-timer { font-family: 'Courier New', monospace; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: .3px; }
.phm .deal-status { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
.phm .status-pending { background: #FAEEDA; color: #854F0B; }
.phm .status-active { background: #E6F1FB; color: #185FA5; }
.phm .status-done { background: #EAF3DE; color: #3B6D11; }
.phm .status-canceled { background: #FCEBEB; color: #A32D2D; }
.phm .deal-meta { font-size: 11px; color: var(--color-text-secondary); margin-top: 4px; display: flex; justify-content: space-between; }
.phm .deal-amount { font-size: 13px; font-weight: 500; margin-top: 6px; }

.phm .empty-hint { font-size: 12px; color: var(--color-text-tertiary); text-align: center; padding: 18px 0; }

/* ── GEO-сравнение (мобильная админ-статистика) ── */
.phm .phm-geo-periods { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.phm .phm-geo-periods .phm-select { flex: 1 1 0; min-width: 0; }
.phm .phm-geo-vs { font-size: 11px; color: var(--color-text-tertiary); flex: 0 0 auto; }
.phm .phm-geo-card {
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-md);
    padding: 10px 12px; margin-bottom: 6px;
}
.phm .phm-geo-fiat { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.phm .phm-geo-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; padding: 2px 0; }
.phm .phm-geo-row span { color: var(--color-text-secondary); width: 72px; flex: 0 0 auto; }
.phm .phm-geo-row b { font-weight: 700; }
.phm .phm-geo-row small { margin-left: auto; font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════
   Переиспользуемые мобильные примитивы (Phase 3)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Карточка-строка списка ──────────────────────────────────────────────── */
.phm .phm-card {
    background: var(--color-background-secondary);
    border-radius: var(--border-radius-md);
    padding: 12px 14px; margin-bottom: 8px;
}
.phm .phm-card-clickable { cursor: pointer; transition: background .12s, transform .06s; }
.phm .phm-card-clickable:active { background: var(--color-border-tertiary); transform: scale(0.995); }
.phm .phm-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.phm .phm-card-title { font-size: 14px; font-weight: 600; }
.phm .phm-card-amount { font-size: 14px; font-weight: 600; color: var(--color-accent); white-space: nowrap; }
.phm .phm-card-sub { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }
.phm .phm-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 2px 0; }
.phm .phm-row > span { color: var(--color-text-secondary); }
.phm .phm-row > b { font-weight: 500; text-align: right; word-break: break-word; }
.phm .phm-card-body { margin-top: 8px; }

/* ── KPI-плитка ───────────────────────────────────────────────────────────── */
.phm .phm-stat { padding: 12px 14px; background: var(--color-background-secondary); border-radius: var(--border-radius-md); }
.phm .phm-stat-label { font-size: 10px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.phm .phm-stat-value { font-size: 19px; font-weight: 600; letter-spacing: -0.3px; }
.phm .phm-stat-sub { font-size: 11px; color: var(--color-text-secondary); margin-top: 3px; }
.phm .phm-stat-accent { background: linear-gradient(135deg, #0F6E56, #1D9E75); color: #fff; }
.phm .phm-stat-accent .phm-stat-label { color: rgba(255,255,255,0.8); }
.phm .phm-stat-accent .phm-stat-sub { color: rgba(255,255,255,0.85); }
.phm .phm-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.phm .phm-stat-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }

/* ── Сегментный переключатель периода ─────────────────────────────────────── */
.phm .phm-period { display: flex; gap: 6px; background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 4px; }
.phm .phm-period-btn {
    flex: 1; border: none; background: transparent; cursor: pointer;
    padding: 7px 4px; border-radius: 8px; font-size: 12px; font-weight: 500;
    color: var(--color-text-secondary);
}
.phm .phm-period-btn.active { background: var(--color-background-primary); color: var(--color-text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

/* ── SVG-график ───────────────────────────────────────────────────────────── */
.phm .phm-chart { margin: 4px 0 8px; }
.phm .phm-chart svg { display: block; }
.phm .phm-chart-grid { stroke: var(--color-border-tertiary); stroke-width: 1; stroke-dasharray: 3 4; }
.phm .phm-chart-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-text-tertiary); margin-top: 4px; }

/* Хост интерактивного Chart.js-графика (мобильная статистика) */
.phm .phm-chart-host { position: relative; height: 230px; margin: 6px 0 10px; }
.phm .phm-chart-host canvas { width: 100% !important; height: 100% !important; }

/* ── Универсальный bottom-sheet (детали/действия) ─────────────────────────── */
.phm-sheet-backdrop {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0,0,0,0.45); animation: phm-fade-in .2s ease;
}
.phm-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1101;
    background: var(--color-background-primary, #fff);
    color: var(--color-text-primary, #14181f);
    border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
    animation: phm-slide-up .25s cubic-bezier(.2,.8,.2,1);
    max-height: 85vh; overflow-y: auto;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html.app-dark .phm-sheet, html.app-dark .phm-more-sheet {
    --color-background-primary: #161b22; --color-background-secondary: #21262d;
    --color-text-primary: #e6edf3; --color-text-secondary: #9da7b1; --color-text-tertiary: #6e7681;
    --color-border-secondary: #30363d; --color-border-tertiary: #262c34;
    background: #161b22; color: #e6edf3;
}
.phm-sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.phm-sheet-title { font-size: 16px; font-weight: 600; }
.phm-sheet-close { border: none; background: var(--color-background-secondary); color: var(--color-text-secondary); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.phm-sheet-body { font-size: 14px; }
.phm-sheet-body .phm-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 0.5px solid var(--color-border-tertiary); }
.phm-sheet-body .phm-row:last-child { border-bottom: none; }
.phm-sheet-body .phm-row > span { color: var(--color-text-secondary); }
.phm-sheet-body .phm-row > b { font-weight: 500; text-align: right; word-break: break-word; }
/* Таймер «Осталось времени» в шторке подтверждения/отмены ордера — крупнее, моноширинный. */
.phm-sheet-body .phm-row .phm-time { font-size: 22px; font-weight: 700; font-family: 'Courier New', monospace; line-height: 1.2; }
/* Футер действий закреплён внизу шторки (sticky), чтобы кнопка не уезжала под длинный
   список/контент — её не надо доскролливать. Для коротких шторок sticky не мешает. */
.phm-sheet-actions {
    display: flex; gap: 10px; z-index: 2;
    position: sticky; bottom: 0;
    margin: 16px -16px 0; padding: 12px 16px;
    background: var(--color-background-primary, #fff);
    border-top: 0.5px solid var(--color-border-tertiary);
}
.phm-sheet-actions > * { flex: 1; }

/* Плавное закрытие шторок (нативное поведение): slide-down панели + fade-out фона */
.phm-sheet-backdrop.closing,
.phm-more-backdrop.closing { animation: phm-fade-out .24s ease forwards; }
.phm-sheet.closing,
.phm-more-sheet.closing { animation: phm-slide-down .24s cubic-bezier(.3, 0, .7, 1) forwards; }
@keyframes phm-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes phm-slide-down { from { transform: translateY(0); } to { transform: translateY(100%); } }

/* ── Кнопки мобильного стиля (для действий в sheet/экранах) ───────────────── */
.phm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; padding: 0 16px; }
.phm-btn-primary { background: var(--color-accent); color: #fff; }
.phm-btn-danger { background: #E24B4A; color: #fff; }
.phm-btn-secondary { background: var(--color-background-secondary); color: var(--color-text-primary); }

/* ── Ожидание ответа сервера при подтверждении/отмене (спиннер в кнопке + баннер ошибки) ── */
.phm-btn-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.6); border-top-color: #fff; border-radius: 50%; animation: phm-ba-spin .7s linear infinite; }
.phm-action-error { background: rgba(226, 75, 74, 0.10); color: #E24B4A; border-radius: 10px; padding: 8px 10px; font-size: 12px; margin-top: 8px; }

/* ── Поиск/фильтр-строка ──────────────────────────────────────────────────── */
.phm-search { display: flex; align-items: center; gap: 8px; background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 9px 12px; margin-bottom: 12px; }
.phm-search input { border: none; background: transparent; outline: none; flex: 1; font-size: 14px; color: var(--color-text-primary); }
.phm-search .ph-icon { color: var(--color-text-tertiary); flex-shrink: 0; }
.phm .phm-search-clear { cursor: pointer; }

/* ── Пагинация списков (карточки по N) ─────────────────────────────────────── */
.phm .phm-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 0 4px; }
.phm .phm-pager .phm-btn { min-width: 56px; }
.phm .phm-pager-info { font-size: 13px; color: var(--color-text-secondary); }

/* ── Сетка кнопок-действий в шторке деталей ───────────────────────────────── */
.phm-sheet .phm-act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.phm-sheet .phm-act-grid .phm-btn { width: 100%; }

/* ── Статус-панель приёма ордеров (Вход/Выход — раздельные переключатели) ──── */
.phm .status-panel { background: var(--color-background-secondary); border-radius: var(--border-radius-md); margin-bottom: 12px; overflow: hidden; }
.phm .status-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.phm .status-row + .status-row { border-top: 0.5px solid var(--color-border-tertiary); }

/* «Выход» визуально отделяем оранжево-красным */
.phm .status-row-out .toggle-switch:not(.off) { background: #EA6A33; }
.phm .status-row-out .online-pulse:not(.off) {
    background: #EA6A33;
    box-shadow: 0 0 0 0 rgba(234,106,51,0.45);
    animation: phm-pulse-out 2s infinite;
}
@keyframes phm-pulse-out {
    0%   { box-shadow: 0 0 0 0 rgba(234,106,51,0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(234,106,51,0); }
    100% { box-shadow: 0 0 0 0 rgba(234,106,51,0); }
}

/* ── Курсы валют: чипы на дашборде + таблица в шторке ──────────────────────── */
.phm .phm-rates-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 6px; -webkit-overflow-scrolling: touch; }
.phm .phm-rates-row::-webkit-scrollbar { display: none; }
.phm .phm-rate-chip {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 8px 12px; background: var(--color-background-secondary);
    border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md);
    cursor: pointer; color: var(--color-text-primary); min-width: 72px;
}
.phm .phm-rate-code { font-size: 11px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .3px; }
.phm .phm-rate-val { font-size: 15px; font-weight: 600; }

.phm-rates-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.phm-rates-tbl th { font-size: 11px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .4px; text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--color-border-tertiary); }
.phm-rates-tbl td { padding: 9px 4px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.phm-rates-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.phm-rates-tbl .phm-rate-code { font-weight: 600; }
.phm-rates-tbl .green { color: #1D9E75; }
.phm-rates-tbl .red { color: #E24B4A; }

/* Подключённые трейдеру валюты — контурная подсветка (чип на дашборде + строка в шторке) */
.phm .phm-rate-chip.is-connected {
    border-color: #1D9E75;
    box-shadow: 0 0 0 1px #1D9E75, 0 0 8px rgba(29, 158, 117, 0.35);
}
.phm-rates-tbl tr.is-connected td { background: rgba(29, 158, 117, 0.10); }
.phm-rates-tbl tr.is-connected .phm-rate-code {
    box-shadow: inset 2px 0 0 #1D9E75;
    padding-left: 8px;
}

/* ════════════════════════════════════════════════════════════════════════
   Бордеры блоков для читаемости (особенно в светлой теме, где фон карточек
   близок к белому фону экрана). Токен подстраивается под тему автоматически.
   ════════════════════════════════════════════════════════════════════════ */
.phm .online-toggle,
.phm .status-panel,
.phm .metric,
.phm .action-btn,
.phm .phm-card,
.phm .phm-stat:not(.phm-stat-accent),
.phm .phm-search,
.phm .phm-period { border: 1px solid var(--color-border-secondary); }

/* ── Подсказка про долгий тап ──────────────────────────────────────────────── */
.phm .phm-hint-tap { font-size: 11px; color: var(--color-text-tertiary); text-align: center; padding: 6px 0 2px; }

/* ── Контекстное меню (долгий тап / ПКМ) ───────────────────────────────────── */
.phm-ctx-backdrop { position: fixed; inset: 0; z-index: 1200; }
.phm-ctx-menu {
    position: fixed; z-index: 1201; min-width: 200px;
    background: var(--color-background-primary, #fff); color: var(--color-text-primary, #14181f);
    border: 1px solid var(--color-border-secondary, #d7dbe0); border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25); padding: 6px;
    animation: phm-fade-in .12s ease;
}
html.app-dark .phm-ctx-menu { background: #161b22; color: #e6edf3; border-color: #30363d; }
.phm-ctx-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 12px; border: none; background: transparent;
    color: inherit; font-size: 14px; cursor: pointer; border-radius: 8px; text-align: left;
}
.phm-ctx-item:active { background: var(--color-background-secondary); }
.phm-ctx-item .ph-icon { color: var(--color-text-secondary); flex-shrink: 0; }
.phm-ctx-item.danger { color: #E24B4A; }
.phm-ctx-item.danger .ph-icon { color: #E24B4A; }

/* ── Поля формы: общие (страницы и шторки) ─────────────────────────────────── */
.phm .phm-field { margin-bottom: 12px; }
.phm .phm-field > label { display: block; font-size: 11px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; }
.phm .phm-input, .phm .phm-select {
    width: 100%; height: 42px; box-sizing: border-box;
    border: 1px solid var(--color-border-secondary); border-radius: 10px;
    background: var(--color-background-secondary); color: var(--color-text-primary);
    padding: 0 12px; font-size: 14px; outline: none;
}
.phm .phm-input:disabled, .phm .phm-select:disabled { opacity: .5; }

/* ── Поля формы (редактирование) ───────────────────────────────────────────── */
.phm-sheet .phm-field { margin-bottom: 12px; }
.phm-sheet .phm-field > label { display: block; font-size: 11px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; }
.phm-sheet .phm-input, .phm-sheet .phm-select {
    width: 100%; height: 42px; box-sizing: border-box;
    border: 1px solid var(--color-border-secondary); border-radius: 10px;
    background: var(--color-background-secondary); color: var(--color-text-primary);
    padding: 0 12px; font-size: 14px; outline: none;
}
.phm-sheet .phm-input:disabled, .phm-sheet .phm-select:disabled { opacity: .5; }
.phm-sheet .phm-field-row { display: flex; gap: 10px; }
.phm-sheet .phm-field-row > .phm-field { flex: 1; }
.phm-sheet .phm-check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 4px; }
.phm-sheet .phm-edit-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--color-text-secondary); background: var(--color-background-secondary); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }

/* ── Анализ баланса трейдера (BalanceAnalysisSheet, «Глаз бога») ─────────────── */
.phm-sheet .phm-ba-hint { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 12px; }
.phm-sheet .phm-ba-label { display: block; font-size: 11px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; }
.phm-sheet .phm-ba-run { width: 100%; margin-top: 4px; }

.phm-sheet .phm-ba-alert {
    background: rgba(226, 75, 74, 0.10); color: #E24B4A;
    border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 10px 0;
}
.phm-sheet .phm-ba-alert.warn { background: rgba(255, 165, 52, 0.14); color: #b26a00; }
html.app-dark .phm-sheet .phm-ba-alert.warn { color: #ffa534; }

.phm-sheet .phm-ba-loading-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; animation: phm-fade-in .2s ease; }
.phm-sheet .phm-ba-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.phm-sheet .phm-ba-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-text-tertiary); transition: color .25s ease; }
.phm-sheet .phm-ba-step.active { color: var(--color-accent); font-weight: 600; animation: phm-ba-pulse 1.2s ease-in-out infinite; }
.phm-sheet .phm-ba-step.done { color: var(--color-accent); }
.phm-sheet .phm-ba-step-ico { width: 18px; text-align: center; flex-shrink: 0; }
@keyframes phm-ba-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.phm-sheet .phm-ba-spinner {
    display: inline-block; width: 13px; height: 13px;
    border: 2px solid var(--color-accent); border-top-color: transparent;
    border-radius: 50%; animation: phm-ba-spin .7s linear infinite;
}
@keyframes phm-ba-spin { to { transform: rotate(360deg); } }

.phm-sheet .phm-ba-bar { height: 7px; border-radius: 5px; background: var(--color-background-secondary); overflow: hidden; }
.phm-sheet .phm-ba-bar-fill { height: 100%; border-radius: 5px; background: var(--color-accent); transition: width .35s ease; }

.phm-sheet .phm-ba-period-line { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 10px; }
.phm-sheet .phm-ba-gap { border: 1px solid rgba(226, 75, 74, 0.5); background: rgba(226, 75, 74, 0.06); }
.phm-sheet .phm-ba-neg { color: #E24B4A; }
.phm-sheet .phm-ba-zero { color: var(--color-text-tertiary); }
.phm-sheet .phm-ba-computed { font-style: italic; opacity: .78; }
.phm-sheet .phm-ba-approx { color: #ffa534; margin-left: 4px; font-weight: 700; }
.phm-sheet .phm-ba-mini {
    display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 7px;
    font-size: 10px; font-style: normal; background: var(--color-background-secondary);
    color: var(--color-text-tertiary); border: 1px solid var(--color-border-tertiary);
}
.phm-sheet .phm-ba-warn-row span, .phm-sheet .phm-ba-warn-row b { color: #E24B4A; }
.phm-sheet .phm-ba-disclaimer { font-size: 11px; color: var(--color-text-tertiary); margin: 8px 0 4px; }