/* ==========================================================================
Terra Exponenta — Retail Cabinet (Phase 3 prototype)
styles.css
Дизайн-токены наследуются из v2-platform-retail-v1.html.
Кабинет — тёмный по умолчанию, светлая тема через [data-theme="light"].
Имена токенов сохраняются (напр. --bg-dark) — под светлой темой
подменяются их значения. Brand-dark островки (.balance-hero)
защищены scope-override и остаются тёмными в обеих темах.
========================================================================== */
:root {
/* Surfaces (доминирующие в кабинете) — тёмная палитра по умолчанию */
--bg-dark: #08090C;
--bg-dark-2: #0C0E13;
--surface-dark: #12141B;
--surface-dark-2: #181B24;
--surface-dark-3: #1F2330;
--border-dark: rgba(255, 255, 255, 0.06);
--border-dark-strong: rgba(255, 255, 255, 0.12);
--border-dark-stronger: rgba(255, 255, 255, 0.2);
--text-dark: #E8EAEF;
--text-dark-muted: #8B92A4;
--text-dark-dim: #6B7384; /* meta / eyebrow / counters — видимо, но приглушённо */
--text-dark-faint: #4A5161; /* disabled / placeholders — самый quiet уровень */
/* Tints — полупрозрачные подложки/hover. Под светлой темой инвертируются. */
--tint-soft: rgba(255, 255, 255, 0.025); /* самый тонкий hover (route-option, history-row) */
--tint-default: rgba(255, 255, 255, 0.04); /* стандартный hover/подложка */
--tint-strong: rgba(255, 255, 255, 0.07); /* выраженная подложка */
--tint-bright: rgba(255, 255, 255, 0.16); /* яркий hover (scrollbar, активные pill'ы) */
/* Shadow colors — только rgba-часть box-shadow. Offset/blur остаются inline.
Под светлой темой эти цвета ослабляются (~3-4× меньше альфа). */
--shadow-color-soft: rgba(0, 0, 0, 0.32); /* мягкая (popover) */
--shadow-color-medium: rgba(0, 0, 0, 0.40); /* drawer / slide-over горизонталь */
--shadow-color-mid: rgba(0, 0, 0, 0.45); /* стандартная */
--shadow-color-deep: rgba(0, 0, 0, 0.50); /* глубокая (toast) */
--shadow-color-strong: rgba(0, 0, 0, 0.55); /* самая тёмная (большие модалы) */
/* Overlay backdrop (slide-over, drawer) */
--overlay-backdrop: rgba(0, 0, 0, 0.55);
--inset-tint: rgba(0, 0, 0, 0.2); /* углублённая подложка внутри карточки */
/* Translucent surfaces — для sticky-баров с backdrop-filter blur */
--surface-translucent: rgba(8, 9, 12, 0.85);
--surface-translucent-strong: rgba(8, 9, 12, 0.96);
/* Brand cards — фиксированно тёмные в обеих темах (.balance-hero).
Используются через scope-override токенов внутри этих карт. */
--brand-dark-bg-1: #0E1018;
--brand-dark-bg-2: #181C28;
--brand-dark-bg-3: #1F2433;
--brand-dark-text: #E8EAEF;
--brand-dark-text-muted: #A6ACBA;
--brand-dark-text-dim: #8B92A4;
--brand-dark-text-faint: #7B8294;
--brand-dark-border: rgba(255, 255, 255, 0.06);
--brand-dark-border-strong: rgba(255, 255, 255, 0.12);
/* Accents */
--accent: #0066FF;
--accent-2: #3D8BFF;
--accent-bright: #4DA3FF;
--accent-soft: rgba(0, 102, 255, 0.12);
--accent-soft-2: rgba(0, 102, 255, 0.24);
--positive: #00D9A0;
--positive-soft: rgba(0, 217, 160, 0.08);
--positive-soft-2: rgba(0, 217, 160, 0.2);
--warning: #FFAA00;
--warning-soft: rgba(255, 170, 0, 0.12);
--warning-soft-2: rgba(255, 170, 0, 0.28);
--negative: #FF4757;
--negative-soft: rgba(255, 71, 87, 0.12);
--negative-soft-2: rgba(255, 71, 87, 0.28);
/* Sizing */
--sidebar-w: 240px;
--sidebar-w-collapsed: 64px;
--header-h: 64px;
--top-bar-row-h: 48px;
--slide-over-w: 480px;
}
/* ============================================================
LIGHT THEME — переопределение значений тех же имён токенов.
Источник палитры: mockups/v2-platform-retail-v1.html (светлые секции).
Применяется через (см. inline-script в index.html).
============================================================ */
[data-theme="light"] {
--bg-dark: #FAFBFC; /* основной фон страницы */
--bg-dark-2: #F2F4F7; /* подложка sidebar / вторичный фон */
--surface-dark: #FFFFFF; /* карточки на основном фоне */
--surface-dark-2: #F8F9FB; /* вторичные поверхности */
--surface-dark-3: #EEF1F4; /* третий уровень surface (рейс/группы) */
--border-dark: #E6E9EE;
--border-dark-strong: #D2D7DF;
--border-dark-stronger: #A8AFBE;
--text-dark: #0A0C12; /* primary (ink) — заголовки и крупный текст */
--text-dark-muted: #5A6273; /* body */
--text-dark-dim: #8A91A1; /* meta / eyebrow */
--text-dark-faint: #B4B9C6; /* disabled / placeholders */
--tint-soft: rgba(10, 12, 18, 0.025);
--tint-default: rgba(10, 12, 18, 0.04);
--tint-strong: rgba(10, 12, 18, 0.06);
--tint-bright: rgba(10, 12, 18, 0.10);
--shadow-color-soft: rgba(15, 20, 35, 0.06);
--shadow-color-medium: rgba(15, 20, 35, 0.08);
--shadow-color-mid: rgba(15, 20, 35, 0.10);
--shadow-color-deep: rgba(15, 20, 35, 0.12);
--shadow-color-strong: rgba(15, 20, 35, 0.14);
--overlay-backdrop: rgba(15, 20, 35, 0.40);
--inset-tint: rgba(10, 12, 18, 0.04);
--surface-translucent: rgba(255, 255, 255, 0.85);
--surface-translucent-strong: rgba(255, 255, 255, 0.96);
/* Brand cards — слегка осветляем градиент, чтобы тёмные карточки
не "врезались" контрастно в светлый фон. */
--brand-dark-bg-1: #1A1F2E;
--brand-dark-bg-2: #252A38;
--brand-dark-bg-3: #2D3242;
/* Accents — soft-варианты слегка усиливаем под светлый фон */
--accent-soft: rgba(0, 102, 255, 0.10);
--accent-soft-2: rgba(0, 102, 255, 0.20);
--positive-soft: rgba(0, 169, 122, 0.10);
--positive-soft-2: rgba(0, 169, 122, 0.22);
--warning-soft: rgba(204, 136, 0, 0.10);
--warning-soft-2: rgba(204, 136, 0, 0.24);
--negative-soft: rgba(229, 56, 73, 0.10);
--negative-soft-2: rgba(229, 56, 73, 0.24);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--bg-dark);
color: var(--text-dark);
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-feature-settings: "ss01", "cv11";
line-height: 1.5;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; background: none; border: none; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
/* ============================================================
FOCUS-VISIBLE — глобальный keyboard focus (WCAG 2.1 AA)
:focus-visible срабатывает только при клавиатурной навигации,
не при клике мышью — визуал по умолчанию не меняется.
============================================================ */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* Интерактивные карточки и строки — box-shadow вместо outline
чтобы не ломать border-radius карточки */
.wallet-card:focus-visible,
.recent-op-row:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--accent);
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.tnum { font-feature-settings: "tnum"; }
/* ============================================================
APP LAYOUT
============================================================ */
.app {
display: grid;
grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
min-height: 100vh;
transition: grid-template-columns 0.18s ease;
}
.app.sidebar-collapsed {
grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
}
.main {
display: flex;
flex-direction: column;
align-items: center;
background: var(--bg-dark);
position: relative;
}
.main-inner {
flex: 1;
padding: 32px 40px 80px;
max-width: 1280px;
width: 100%;
}
/* ============================================================
SIDEBAR (v2: лого + collapse + меню + статус. Без identity и balance)
============================================================ */
.sidebar {
background: var(--bg-dark-2);
border-right: 1px solid var(--border-dark);
padding: 14px 12px;
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
}
.sidebar-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-bottom: 14px;
margin-bottom: 6px;
border-bottom: 1px solid var(--border-dark);
}
.sidebar-logo {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 6px;
text-decoration: none;
color: var(--text-dark);
flex: 1;
min-width: 0;
}
.sidebar-logo:hover .sidebar-logo-name { color: var(--accent-bright); }
.sidebar-logo-mark {
width: 28px; height: 28px;
border-radius: 7px;
background: var(--accent);
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 700;
color: white;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.sidebar-logo-mark::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.18) 100%);
}
.sidebar-logo-mark span { position: relative; z-index: 1; }
/* Логотип-знак: реальная марка Terra вместо буквенного плейсхолдера.
img не рендерит ::before, подложку и типографику знака отключаем. */
img.sidebar-logo-mark,
img.top-bar-mobile-logo-mark {
background: none;
border-radius: 0;
object-fit: contain;
}
.sidebar-logo-text {
display: flex;
flex-direction: column;
line-height: 1;
min-width: 0;
}
.sidebar-logo-name {
font-weight: 600;
font-size: 14px;
letter-spacing: -0.01em;
transition: color 0.15s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-logo-version {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
color: var(--text-dark-dim);
letter-spacing: 0.06em;
margin-top: 3px;
white-space: nowrap;
}
.sidebar-collapse-btn {
width: 26px;
height: 26px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-dark-muted);
border: 1px solid transparent;
flex-shrink: 0;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar-collapse-btn:hover {
background: var(--tint-default);
color: var(--text-dark);
border-color: var(--border-dark-strong);
}
.sidebar-collapse-icon {
font-size: 14px;
line-height: 1;
transition: transform 0.18s ease;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 1px;
}
.sidebar-section {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
color: var(--text-dark-faint);
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 16px 10px 6px;
}
.sidebar-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 7px;
color: var(--text-dark-muted);
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.sidebar-link:hover {
background: var(--tint-default);
color: var(--text-dark);
}
.sidebar-link.active {
background: var(--accent-soft);
color: var(--accent-bright);
font-weight: 600;
}
.sidebar-link-icon {
width: 16px; height: 16px;
flex-shrink: 0;
display: inline-flex;
align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
opacity: 0.85;
}
.sidebar-spacer { flex: 1; }
.sidebar-footer {
margin-top: 16px;
padding: 10px 6px 4px;
border-top: 1px solid var(--border-dark);
display: flex;
align-items: center;
gap: 8px;
color: var(--positive);
}
.status-dot {
width: 9px; height: 9px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 8px currentColor;
flex-shrink: 0;
animation: pulse-dot 2s ease-in-out infinite;
}
.status-dot-ok { color: var(--positive); }
.status-dot-warning { color: var(--warning); }
.status-dot-critical { color: var(--negative); }
.sidebar-status-text {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: currentColor;
letter-spacing: 0.06em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
/* ============================================================
SIDEBAR — collapsed state
============================================================ */
.app.sidebar-collapsed .sidebar { padding: 14px 8px; }
.app.sidebar-collapsed .sidebar-logo-text,
.app.sidebar-collapsed .sidebar-link-label,
.app.sidebar-collapsed .sidebar-section,
.app.sidebar-collapsed .sidebar-status-text {
display: none;
}
.app.sidebar-collapsed .sidebar-head {
flex-direction: column;
gap: 8px;
align-items: center;
}
.app.sidebar-collapsed .sidebar-logo { justify-content: center; padding: 4px 0; }
.app.sidebar-collapsed .sidebar-collapse-btn { width: 32px; }
.app.sidebar-collapsed .sidebar-collapse-icon { transform: rotate(180deg); }
.app.sidebar-collapsed .sidebar-link {
justify-content: center;
padding: 9px 0;
}
.app.sidebar-collapsed .sidebar-footer {
justify-content: center;
padding: 10px 0 4px;
}
/* tooltip над свёрнутыми пунктами nav и статусом */
.app.sidebar-collapsed .sidebar-link[data-tip],
.app.sidebar-collapsed .sidebar-footer[data-tip] {
position: relative;
}
.app.sidebar-collapsed .sidebar-link[data-tip]:hover::after,
.app.sidebar-collapsed .sidebar-footer[data-tip]:hover::after {
content: attr(data-tip);
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
background: var(--surface-dark-3);
border: 1px solid var(--border-dark-strong);
color: var(--text-dark);
padding: 5px 10px;
border-radius: 6px;
font-size: 12px;
white-space: nowrap;
z-index: 100;
pointer-events: none;
}
/* ============================================================
TOP BAR (двухстрочный, sticky — на всех страницах)
Строка 1: identity · search · notifications
Строка 2: templates pill + 5 quick actions
============================================================ */
.top-bar {
position: sticky;
top: 0;
z-index: 50;
width: 100%;
background: var(--surface-translucent);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-dark);
}
.top-bar-row {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
gap: 16px;
min-height: var(--top-bar-row-h);
}
.top-bar-row-info {
border-bottom: 1px solid var(--border-dark);
gap: 24px;
}
.top-bar-row-actions {
padding-top: 8px;
padding-bottom: 8px;
}
/* ----- Строка 1: Identity (левая зона) — только баланс ----- */
.top-bar-identity {
display: inline-flex;
align-items: center;
flex-shrink: 0;
min-width: 0;
}
.tbi-balance {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 5px 10px;
margin-left: -10px;
border-radius: 7px;
transition: background 0.12s;
white-space: nowrap;
}
.tbi-balance:hover { background: var(--tint-default); }
.tbi-balance-label {
font-size: 9.5px;
color: var(--text-dark-faint);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tbi-balance-value {
font-size: 14px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.01em;
font-feature-settings: "tnum";
}
/* ----- Строка 1: Search (центральная зона) ----- */
.top-bar-search {
flex: 1;
display: flex;
justify-content: center;
position: relative;
min-width: 0;
}
.tbs-input-wrap {
position: relative;
width: 100%;
max-width: 520px;
}
.tbs-input {
width: 100%;
height: 32px;
padding: 0 38px 0 36px;
background: var(--surface-dark-2);
border: 1px solid var(--border-dark);
border-radius: 8px;
color: var(--text-dark);
font-size: 13px;
letter-spacing: -0.005em;
transition: border-color 0.15s, background 0.15s;
}
.tbs-input::placeholder { color: var(--text-dark-faint); }
.tbs-input:hover { border-color: var(--border-dark-strong); }
.tbs-input:focus {
border-color: var(--accent-soft-2);
background: var(--surface-dark-3);
}
.tbs-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-dark-faint);
font-size: 13px;
pointer-events: none;
}
.tbs-hotkey {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 6px;
border: 1px solid var(--border-dark-strong);
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-dark-faint);
pointer-events: none;
letter-spacing: 0.04em;
}
/* ----- Строка 1: Notifications (правая зона) ----- */
.top-bar-notifications {
display: inline-flex;
align-items: center;
flex-shrink: 0;
max-width: 320px;
}
.tbn-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 100px;
border: 1px solid var(--border-dark);
background: var(--tint-soft);
color: var(--text-dark-muted);
font-size: 12px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
max-width: 320px;
white-space: nowrap;
}
.tbn-pill:hover {
background: var(--tint-default);
border-color: var(--border-dark-strong);
color: var(--text-dark);
}
.tbn-pill.empty {
color: var(--text-dark-faint);
}
.tbn-pill.empty:hover { color: var(--text-dark-muted); }
.tbn-pill.priority-system { border-color: rgba(255, 170, 0, 0.32); background: rgba(255, 170, 0, 0.06); color: var(--text-dark); }
.tbn-pill.priority-system:hover { border-color: rgba(255, 170, 0, 0.55); }
.tbn-pill.priority-message { border-color: rgba(0, 102, 255, 0.32); background: rgba(0, 102, 255, 0.06); color: var(--text-dark); }
.tbn-pill.priority-message:hover { border-color: rgba(0, 102, 255, 0.55); }
.tbn-pill.priority-active { border-color: rgba(0, 217, 160, 0.28); background: rgba(0, 217, 160, 0.05); color: var(--text-dark); }
.tbn-pill.priority-active:hover { border-color: rgba(0, 217, 160, 0.5); }
.tbn-pill.priority-activity { border-color: var(--border-dark-strong); background: var(--tint-default); color: var(--text-dark); }
.tbn-pill.priority-activity:hover { border-color: var(--border-dark-stronger); }
.tbn-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
box-shadow: 0 0 5px currentColor;
}
.tbn-pill.priority-system .tbn-dot { color: var(--warning); animation: pulse-dot 1.8s ease-in-out infinite; }
.tbn-pill.priority-message .tbn-dot { color: var(--accent-bright); }
.tbn-pill.priority-active .tbn-dot { color: var(--positive); animation: pulse-dot 1.6s ease-in-out infinite; }
.tbn-pill.priority-activity .tbn-dot { color: var(--text-dark-muted); }
.tbn-text {
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
letter-spacing: -0.005em;
font-feature-settings: "tnum";
max-width: 200px;
}
.tbn-counter {
margin-left: 2px;
padding: 1px 6px;
border-radius: 100px;
background: var(--tint-strong);
color: var(--text-dark);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
}
.tbn-icon-only {
width: 28px; height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
/* ----- Строка 2: actions ----- */
.top-bar-actions {
flex: 1;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.top-bar-row-actions .qa-btn {
padding: 10px 14px;
font-size: 13px;
border-radius: 9px;
position: relative;
display: flex;
align-items: center;
gap: 10px;
}
.top-bar-row-actions .qa-btn .qa-icon {
width: 26px; height: 26px;
font-size: 12px;
border-radius: 7px;
}
.top-bar-row-actions .qa-btn .qa-label {
font-size: 13px;
font-weight: 500;
color: var(--text-dark);
line-height: 1.2;
}
/* Двухстрочная кнопка с direction-subtitle: основное название сверху,
тип операции мелким моноширинным шрифтом снизу. Не раздувает горизонталь,
снимает неоднозначность «купить за фиат vs за крипту». */
.top-bar-row-actions .qa-btn .qa-text {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
text-align: left;
min-width: 0;
}
.top-bar-row-actions .qa-btn .qa-sub {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-dark-dim);
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
}
/* На узких — subtitle скрываем (title attribute остаётся для hover) */
@media (max-width: 1180px) and (min-width: 768px) {
.top-bar-row-actions .qa-btn .qa-sub { display: none; }
}
.top-bar-row-actions .qa-btn .qa-hotkey {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
border: 1px solid var(--border-dark-strong);
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
color: var(--text-dark-faint);
letter-spacing: 0;
transition: color 0.15s, border-color 0.15s;
}
.top-bar-row-actions .qa-btn:hover .qa-hotkey {
color: var(--text-dark-muted);
border-color: var(--border-dark-stronger);
}
/* Templates pill (левый слот) */
.top-bar-templates-wrap {
position: relative;
flex-shrink: 0;
}
.top-bar-templates-wrap[hidden] { display: none; }
/* Backwards-compat aliases — пока в JS остались старые ID. */
.action-bar-templates-wrap { position: relative; flex-shrink: 0; }
.action-bar-templates-wrap[hidden] { display: none; }
.templates-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 100px;
background: linear-gradient(135deg, rgba(255, 170, 0, 0.14), rgba(255, 170, 0, 0.05));
border: 1px solid rgba(255, 170, 0, 0.32);
color: var(--text-dark);
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.templates-pill:hover {
border-color: rgba(255, 170, 0, 0.55);
background: linear-gradient(135deg, rgba(255, 170, 0, 0.22), rgba(255, 170, 0, 0.08));
}
.templates-pill-star {
color: var(--warning);
font-size: 14px;
line-height: 1;
}
.templates-pill-counter {
margin-left: 4px;
padding: 2px 7px;
border-radius: 100px;
background: rgba(255, 170, 0, 0.20);
color: var(--warning);
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
font-weight: 700;
}
/* Active-ops pill (правый слот) */
.action-bar-pill-wrap {
position: relative;
flex-shrink: 0;
}
.action-bar-pill-wrap[hidden] { display: none; }
.action-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 100px;
background: linear-gradient(135deg, rgba(0, 102, 255, 0.16), rgba(0, 102, 255, 0.06));
border: 1px solid rgba(0, 102, 255, 0.32);
color: var(--text-dark);
font-size: 12.5px;
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
transition: all 0.15s ease;
max-width: 360px;
white-space: nowrap;
}
.action-pill:hover {
border-color: rgba(0, 102, 255, 0.55);
background: linear-gradient(135deg, rgba(0, 102, 255, 0.22), rgba(0, 102, 255, 0.10));
}
.action-pill.failed {
background: linear-gradient(135deg, rgba(255, 71, 87, 0.16), rgba(255, 71, 87, 0.06));
border-color: rgba(255, 71, 87, 0.32);
}
.action-pill.failed:hover { border-color: rgba(255, 71, 87, 0.55); }
.action-pill.completed {
background: linear-gradient(135deg, rgba(0, 217, 160, 0.16), rgba(0, 217, 160, 0.06));
border-color: rgba(0, 217, 160, 0.32);
}
.action-pill-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent-bright);
box-shadow: 0 0 6px rgba(0, 102, 255, 0.5);
animation: pulse-dot 1.6s ease-in-out infinite;
flex-shrink: 0;
}
.action-pill.failed .action-pill-dot {
background: var(--negative);
box-shadow: 0 0 6px var(--negative);
animation: none;
}
.action-pill.completed .action-pill-dot {
background: var(--positive);
box-shadow: 0 0 6px var(--positive);
animation: none;
}
.action-pill-text {
overflow: hidden;
text-overflow: ellipsis;
font-feature-settings: "tnum";
}
.action-pill-text strong {
color: var(--text-dark);
font-weight: 600;
margin-right: 6px;
}
.action-pill-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-muted);
letter-spacing: 0.04em;
}
.action-pill-counter {
margin-left: 4px;
padding: 2px 7px;
border-radius: 100px;
background: var(--accent);
color: white;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
}
/* Dropdown panel */
.action-pill-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 360px;
max-width: 440px;
background: var(--surface-dark);
border: 1px solid var(--border-dark-strong);
border-radius: 12px;
box-shadow: 0 24px 64px var(--shadow-color-strong);
z-index: 60;
animation: dropdown-fade-in 0.15s ease;
overflow: hidden;
}
.action-pill-dropdown[hidden] { display: none; }
@keyframes dropdown-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
.action-pill-dropdown-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--border-dark);
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.action-pill-dropdown-list {
max-height: 360px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.action-pill-dropdown-item {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--border-dark);
cursor: pointer;
transition: background 0.12s;
}
.action-pill-dropdown-item:last-child { border-bottom: none; }
.action-pill-dropdown-item:hover { background: var(--tint-soft); }
.action-pill-dropdown-icon {
width: 28px; height: 28px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px;
font-weight: 700;
color: white;
}
.action-pill-dropdown-icon.in_progress { background: var(--accent); }
.action-pill-dropdown-icon.failed { background: var(--negative); }
.action-pill-dropdown-icon.completed { background: var(--positive); }
.action-pill-dropdown-info {
min-width: 0;
}
.action-pill-dropdown-info strong {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 2px;
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.action-pill-dropdown-info span {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-muted);
letter-spacing: 0.04em;
}
.action-pill-dropdown-eta {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--accent-bright);
letter-spacing: 0.04em;
white-space: nowrap;
}
.action-pill-dropdown-eta.failed { color: var(--negative); }
.action-pill-dropdown-footer {
padding: 10px 16px;
border-top: 1px solid var(--border-dark);
text-align: center;
background: var(--bg-dark-2);
}
/* Templates dropdown — раскрывается влево от templates pill */
.templates-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 380px;
max-width: 460px;
background: var(--surface-dark);
border: 1px solid var(--border-dark-strong);
border-radius: 12px;
box-shadow: 0 24px 64px var(--shadow-color-strong);
z-index: 60;
animation: dropdown-fade-in 0.15s ease;
overflow: hidden;
}
.templates-dropdown[hidden] { display: none; }
.templates-dropdown-list {
max-height: 420px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.templates-dropdown-item {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--border-dark);
cursor: pointer;
transition: background 0.12s;
}
.templates-dropdown-item:last-child { border-bottom: none; }
.templates-dropdown-item:hover { background: rgba(255, 170, 0, 0.06); }
.templates-dropdown-icon {
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
font-weight: 700;
background: var(--accent-soft);
color: var(--accent-bright);
border: 1px solid var(--accent-soft-2);
}
.templates-dropdown-info {
min-width: 0;
}
.templates-dropdown-info strong {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.templates-dropdown-info span {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-muted);
letter-spacing: 0.04em;
margin-top: 3px;
}
.templates-dropdown-amount {
font-family: 'JetBrains Mono', monospace;
font-size: 11.5px;
color: var(--accent-bright);
letter-spacing: 0.04em;
white-space: nowrap;
font-weight: 600;
}
.templates-dropdown-amount.empty {
color: var(--text-dark-faint);
font-weight: 500;
}
/* ============================================================
SEARCH PANEL (dropdown под input'ом поиска)
============================================================ */
.search-panel {
position: fixed;
z-index: 60;
background: var(--surface-dark);
border: 1px solid var(--border-dark-strong);
border-radius: 10px;
box-shadow: 0 12px 36px var(--shadow-color-mid);
overflow: hidden;
max-height: 70vh;
display: flex;
flex-direction: column;
}
.search-panel[hidden] { display: none; }
.search-panel-empty {
padding: 22px 18px;
text-align: center;
color: var(--text-dark-muted);
font-size: 13px;
}
.search-panel-empty-hint {
margin-top: 8px;
color: var(--text-dark-faint);
font-size: 11.5px;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.04em;
}
.search-panel-list {
overflow-y: auto;
padding: 4px 0;
}
.search-section {
padding: 4px 0;
border-top: 1px solid var(--border-dark);
}
.search-section:first-child { border-top: none; }
.search-section-title {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
color: var(--text-dark-faint);
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 16px 4px;
}
.search-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
cursor: pointer;
transition: background 0.1s;
}
.search-row:hover,
.search-row.active {
background: rgba(0, 102, 255, 0.08);
}
.search-row.active {
outline: 1px solid rgba(0, 102, 255, 0.32);
outline-offset: -1px;
}
.search-mark {
background: rgba(0, 102, 255, 0.22);
color: var(--accent-bright);
padding: 0 1px;
border-radius: 2px;
}
.search-section-meta {
color: var(--text-dark-dim);
font-weight: 400;
}
.search-panel-intent {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: rgba(0, 102, 255, 0.04);
border-bottom: 1px solid var(--border-dark);
}
.search-intent {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border: 1px solid var(--accent-soft-2);
border-radius: 100px;
background: var(--accent-soft);
color: var(--accent-bright);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.06em;
font-weight: 600;
}
.search-panel-intent-q {
color: var(--text-dark-muted);
font-size: 12px;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.02em;
}
.search-row-icon {
width: 26px; height: 26px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--surface-dark-2);
color: var(--text-dark-muted);
font-size: 13px;
flex-shrink: 0;
}
.search-row-body {
flex: 1;
min-width: 0;
}
.search-row-title {
font-size: 13px;
color: var(--text-dark);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-row-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-dim);
letter-spacing: 0.04em;
margin-top: 2px;
}
.search-row-trail {
font-size: 12px;
color: var(--text-dark-muted);
font-family: 'JetBrains Mono', monospace;
font-feature-settings: "tnum";
flex-shrink: 0;
white-space: nowrap;
}
.search-row-trail.in { color: var(--positive); }
.search-row-trail.out { color: var(--text-dark-muted); }
.search-row-hotkey {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: 1px solid var(--border-dark-strong);
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
font-weight: 600;
color: var(--text-dark-faint);
flex-shrink: 0;
}
.search-row.active .search-row-hotkey,
.search-row:hover .search-row-hotkey {
color: var(--accent-bright);
border-color: var(--accent-soft-2);
background: var(--accent-soft);
}
.search-panel-footer {
border-top: 1px solid var(--border-dark);
padding: 8px 14px;
display: flex;
justify-content: space-between;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-faint);
letter-spacing: 0.04em;
}
.search-panel-footer kbd {
display: inline-flex;
align-items: center;
padding: 1px 5px;
border: 1px solid var(--border-dark-strong);
border-radius: 3px;
font-family: inherit;
font-size: 10px;
margin: 0 3px;
color: var(--text-dark-muted);
}
/* ============================================================
NOTIFICATIONS PANEL (dropdown справа в top-bar)
============================================================ */
.notif-panel {
position: fixed;
z-index: 60;
width: 380px;
max-height: 72vh;
background: var(--surface-dark);
border: 1px solid var(--border-dark-strong);
border-radius: 10px;
box-shadow: 0 12px 36px var(--shadow-color-mid);
display: flex;
flex-direction: column;
overflow: hidden;
}
.notif-panel[hidden] { display: none; }
.notif-panel-header {
padding: 12px 16px;
border-bottom: 1px solid var(--border-dark);
display: flex;
justify-content: space-between;
align-items: center;
}
.notif-panel-title {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
}
.notif-panel-mark-read {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-muted);
letter-spacing: 0.04em;
}
.notif-panel-mark-read:hover { color: var(--accent-bright); }
.notif-panel-title-wrap {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.notif-panel-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.notif-panel-system-status {
display: none; /* visible только на мобиле — см. media-query */
align-items: center;
gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.06em;
}
.notif-panel-system-status .status-dot {
width: 7px; height: 7px;
}
.notif-panel-list {
overflow-y: auto;
padding: 4px 0;
flex: 1;
}
.notif-empty {
padding: 32px 18px;
text-align: center;
color: var(--text-dark-muted);
font-size: 13px;
}
.notif-row {
display: flex;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--border-dark);
cursor: pointer;
transition: background 0.12s;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--tint-soft); }
.notif-row.persistent { cursor: default; }
.notif-row.persistent:hover { background: transparent; }
/* Personal action-required — visible акцент: warning-bar слева + CTA-кнопка. */
.notif-row.scope-personal {
border-left: 2px solid var(--warning);
padding-left: 14px;
background: rgba(255, 170, 0, 0.04);
}
.notif-row.scope-personal .notif-row-meta {
color: var(--warning);
letter-spacing: 0.06em;
font-weight: 600;
}
.notif-row-cta {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
padding: 5px 12px;
border-radius: 6px;
background: var(--warning-soft);
border: 1px solid var(--warning-soft-2);
color: var(--warning);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
text-decoration: none;
transition: background 0.15s;
}
.notif-row-cta:hover {
background: rgba(255, 170, 0, 0.20);
}
.notif-row-dot {
width: 8px; height: 8px;
margin-top: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
box-shadow: 0 0 5px currentColor;
}
.notif-row-dot.system { color: var(--warning); }
.notif-row-dot.message { color: var(--accent-bright); }
.notif-row-dot.active { color: var(--positive); }
.notif-row-dot.activity { color: var(--text-dark-muted); }
.notif-row-body { flex: 1; min-width: 0; }
.notif-row-title {
font-size: 13px;
color: var(--text-dark);
font-weight: 500;
letter-spacing: -0.005em;
}
.notif-row-text {
margin-top: 3px;
font-size: 12px;
color: var(--text-dark-muted);
line-height: 1.5;
}
.notif-row-meta {
margin-top: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-faint);
letter-spacing: 0.04em;
}
/* ============================================================
PROFILE — avatar-chip в top-bar + dropdown-меню
Identity (ФИО, KYC, 2FA, настройки, выход) переехала сюда из
user-card дашборда. Работает в FULL и MIN.
============================================================ */
.top-bar-profile {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.tbp-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
background: none;
cursor: pointer;
border-radius: 100px;
}
.tbp-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--accent-bright);
background: var(--accent-soft);
border: 1px solid var(--accent-soft-2);
transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.tbp-chip:hover .tbp-avatar {
border-color: var(--accent-bright);
background: var(--accent-soft-2);
}
.tbp-chip:focus-visible {
outline: none;
}
.tbp-chip:focus-visible .tbp-avatar {
outline: 2px solid var(--accent-bright);
outline-offset: 2px;
}
.tbp-chip[aria-expanded="true"] .tbp-avatar {
border-color: var(--accent-bright);
background: var(--accent-soft-2);
}
.profile-menu {
position: fixed;
z-index: 60;
width: 264px;
background: var(--surface-dark);
border: 1px solid var(--border-dark-strong);
border-radius: 10px;
box-shadow: 0 12px 36px var(--shadow-color-mid);
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
overflow: hidden;
}
.profile-menu[hidden] { display: none; }
.profile-menu-head {
padding: 10px 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.profile-menu-name {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text-dark);
}
.profile-menu-kyc-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.profile-menu-link {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--accent-bright);
letter-spacing: 0.04em;
text-decoration: none;
}
.profile-menu-link:hover { text-decoration: underline; }
.profile-menu-warn {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
border-radius: 8px;
font-size: 12.5px;
color: var(--text-dark-muted);
text-decoration: none;
background: var(--warning-soft);
border: 1px solid var(--warning-soft-2);
}
.profile-menu-warn:hover { background: rgba(255, 170, 0, 0.16); }
.profile-menu-warn strong { color: var(--warning); font-weight: 600; }
.profile-menu-warn .status-dot { flex-shrink: 0; }
.profile-menu-divider {
height: 1px;
background: var(--border-dark);
margin: 4px 0;
}
.profile-menu-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 9px 10px;
border: none;
background: none;
border-radius: 8px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--text-dark);
text-decoration: none;
cursor: pointer;
text-align: left;
transition: background 0.12s;
}
.profile-menu-item:hover { background: var(--tint-soft); }
.profile-menu-item:focus-visible {
outline: none;
background: var(--tint-default);
}
.profile-menu-item-icon {
width: 26px;
height: 26px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--text-dark-muted);
background: var(--tint-default);
flex-shrink: 0;
}
/* ============================================================
SETTINGS — /settings
============================================================ */
.settings-card {
margin-bottom: 18px;
}
.settings-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid var(--border-dark);
}
.settings-card-title {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text-dark);
}
.settings-card-sub {
margin-top: 4px;
font-size: 12.5px;
line-height: 1.55;
color: var(--text-dark-muted);
max-width: 540px;
}
.settings-card-aside {
font-size: 10.5px;
color: var(--text-dark-faint);
letter-spacing: 0.06em;
white-space: nowrap;
}
.settings-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
}
.settings-tile {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 12px 14px;
border-radius: 10px;
background: var(--surface-dark-2);
border: 1px solid var(--border-dark);
color: var(--text-dark);
cursor: pointer;
transition: border-color 0.15s, background 0.15s, transform 0.12s;
text-align: left;
}
.settings-tile:hover {
border-color: var(--border-dark-strong);
background: var(--surface-dark-3);
}
.settings-tile.active {
border-color: var(--accent-soft-2);
background: var(--accent-soft);
}
.settings-tile.active .settings-tile-title {
color: var(--accent-bright);
}
.settings-tile.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.settings-tile-glyph {
font-size: 18px;
margin-bottom: 6px;
}
.settings-tile-glyph.small {
font-size: 14px;
margin-bottom: 0;
}
.settings-tile-title {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
}
.settings-tile-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-dim);
letter-spacing: 0.04em;
}
/* ============================================================
HOTKEY HINT — bottom-center pill для chord ожидания
============================================================ */
.hotkey-hint {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 70;
padding: 10px 18px;
background: var(--surface-dark-3);
border: 1px solid var(--border-dark-strong);
border-radius: 100px;
color: var(--text-dark);
font-size: 12.5px;
letter-spacing: -0.005em;
box-shadow: 0 8px 24px var(--shadow-color-mid);
animation: hint-in 0.18s ease;
}
.hotkey-hint[hidden] { display: none; }
.hotkey-hint kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
padding: 0 5px;
height: 18px;
margin: 0 1px;
border: 1px solid var(--border-dark-strong);
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
font-weight: 600;
color: var(--accent-bright);
background: var(--accent-soft);
}
@keyframes hint-in {
from { opacity: 0; transform: translate(-50%, 8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* ============================================================
HOTKEY OVERLAY — справка по `?`
============================================================ */
.hotkey-overlay {
position: fixed;
inset: 0;
z-index: 80;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.hotkey-overlay[hidden] { display: none; }
.hotkey-overlay-backdrop {
position: absolute;
inset: 0;
background: var(--overlay-backdrop);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.hotkey-overlay-card {
position: relative;
width: 100%;
max-width: 760px;
max-height: 85vh;
background: var(--surface-dark);
border: 1px solid var(--border-dark-strong);
border-radius: 14px;
box-shadow: 0 20px 48px var(--shadow-color-strong);
display: flex;
flex-direction: column;
overflow: hidden;
}
.hotkey-overlay-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 22px;
border-bottom: 1px solid var(--border-dark);
}
.hotkey-overlay-title {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
}
.hotkey-overlay-close {
width: 28px;
height: 28px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--text-dark-muted);
}
.hotkey-overlay-close:hover {
background: var(--tint-default);
color: var(--text-dark);
}
.hotkey-overlay-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 32px;
padding: 18px 22px 12px;
overflow-y: auto;
}
.hotkey-group {
margin-bottom: 14px;
}
.hotkey-group-title {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dark-faint);
margin-bottom: 8px;
}
.hotkey-list { display: flex; flex-direction: column; gap: 4px; }
.hotkey-item {
display: flex;
align-items: center;
gap: 14px;
padding: 6px 0;
font-size: 13px;
}
.hotkey-keys {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
min-width: 78px;
}
.hotkey-keys kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
padding: 0 6px;
height: 22px;
border: 1px solid var(--border-dark-strong);
border-radius: 5px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
color: var(--text-dark);
background: var(--surface-dark-2);
letter-spacing: 0;
}
.hotkey-label {
color: var(--text-dark-muted);
letter-spacing: -0.005em;
}
.hotkey-overlay-foot {
padding: 12px 22px 16px;
border-top: 1px solid var(--border-dark);
}
.hotkey-overlay-note {
font-size: 11.5px;
color: var(--text-dark-faint);
letter-spacing: -0.005em;
}
/* ============================================================
PAGE HEADER (top of main)
============================================================ */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 28px;
}
.page-greeting {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-dark);
}
.page-greeting-sub {
display: block;
margin-top: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-dim);
letter-spacing: 0.04em;
}
.page-header-actions {
display: flex;
align-items: center;
gap: 10px;
}
/* ============================================================
BUTTONS
============================================================ */
.btn {
font-size: 13.5px;
font-weight: 600;
padding: 10px 16px;
border-radius: 8px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 8px;
letter-spacing: -0.005em;
white-space: nowrap;
}
.btn-primary {
background: var(--accent);
color: white;
box-shadow: 0 0 0 1px rgba(0, 102, 255, 0.5), 0 1px 2px rgba(0, 102, 255, 0.2);
}
.btn-primary:hover {
background: var(--accent-2);
box-shadow: 0 0 0 1px rgba(0, 102, 255, 0.8), 0 4px 16px rgba(0, 102, 255, 0.35);
transform: translateY(-1px);
}
.btn-primary:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-ghost {
background: transparent;
color: var(--text-dark);
border-color: var(--border-dark-strong);
}
.btn-ghost:hover {
background: var(--tint-default);
border-color: var(--border-dark-stronger);
}
.btn-secondary {
background: var(--surface-dark);
color: var(--text-dark);
border-color: var(--border-dark);
}
.btn-secondary:hover {
background: var(--surface-dark-2);
}
.btn-link {
color: var(--accent-bright);
background: transparent;
padding: 6px 0;
}
.btn-link:hover { color: var(--accent-2); }
.btn-large { padding: 14px 22px; font-size: 15px; }
.btn-block { width: 100%; justify-content: center; }
/* ============================================================
SAVE-AS-TEMPLATE — inline-блок в Step 2 review
Secondary CTA + сворачиваемая форма (имя + checkbox).
============================================================ */
.so-tpl-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 500;
}
.so-tpl-cta .so-tpl-star {
color: var(--accent-bright);
font-size: 14px;
}
.so-tpl-inline {
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 10px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
flex-shrink: 0;
}
.so-tpl-inline-title {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-dark-muted);
display: flex;
align-items: center;
gap: 6px;
}
.so-tpl-inline-title .so-tpl-star { color: var(--accent-bright); }
.so-tpl-inline-actions {
display: flex;
gap: 8px;
}
.so-tpl-inline-actions .btn { flex: 1; }
/* ============================================================
COMMON SHELLS
============================================================ */
.card {
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 12px;
padding: 20px;
}
.card-elev {
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 14px;
padding: 22px;
box-shadow: 0 24px 48px var(--shadow-color-soft);
}
.card-title {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-dark-dim);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.section-title {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 14px;
}
.section-title h3 {
font-size: 14px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.01em;
}
.section-title-link {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--accent-bright);
cursor: pointer;
letter-spacing: 0.04em;
}
/* ============================================================
STATUS PILLS / TAGS
============================================================ */
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border-radius: 5px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.04em;
border: 1px solid transparent;
}
.tag-positive { color: var(--positive); background: var(--positive-soft); border-color: var(--positive-soft-2); }
.tag-warning { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-soft-2); }
.tag-negative { color: var(--negative); background: var(--negative-soft); border-color: var(--negative-soft-2); }
.tag-accent { color: var(--accent-bright); background: var(--accent-soft); border-color: var(--accent-soft-2); }
.tag-muted { color: var(--text-dark-muted); background: var(--tint-default); border-color: var(--border-dark); }
/* ============================================================
CURRENCY ICONS
============================================================ */
.cur-icon {
width: 32px; height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center; justify-content: center;
color: white;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.cur-icon-sm { width: 24px; height: 24px; font-size: 11px; }
.cur-icon-lg { width: 44px; height: 44px; font-size: 18px; }
/* Пустой слот актива (общее пополнение — актив ещё не выбран). */
.cur-icon.cur-placeholder {
background: var(--tint-soft);
color: var(--text-dark-dim);
box-shadow: 0 0 0 1px var(--border-dark) inset;
}
.cur-RUB { background: linear-gradient(135deg, #4A6FFF, #2D5BFF); }
.cur-KGS { background: linear-gradient(135deg, #E63946, #8C1C2A); }
.cur-USDT { background: linear-gradient(135deg, #00D9A0, #00A878); }
.cur-USDC { background: linear-gradient(135deg, #2775CA, #1A5C9E); }
.cur-BTC { background: linear-gradient(135deg, #F7931A, #F76808); }
.cur-ETH { background: linear-gradient(135deg, #6E47FF, #4A2DCC); }
.cur-SOL { background: linear-gradient(135deg, #9945FF, #19FB9B); }
.cur-TON { background: linear-gradient(135deg, #0098EA, #0075C2); }
/* ============================================================
PAGES (placeholders — extended in subsequent steps)
============================================================ */
.page { animation: page-fade-in 0.18s ease; }
@keyframes page-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
/* ============================================================
SCROLLBARS
============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--tint-strong);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--tint-bright); }
/* ============================================================
DASHBOARD — KYC banner
============================================================ */
.kyc-banner {
display: grid;
grid-template-columns: 36px 1fr auto auto;
gap: 16px;
align-items: center;
padding: 14px 16px 14px 18px;
border-radius: 11px;
background: linear-gradient(135deg, rgba(255, 170, 0, 0.10), rgba(255, 170, 0, 0.04) 60%);
border: 1px solid rgba(255, 170, 0, 0.28);
margin-bottom: 22px;
}
.kyc-banner-icon {
width: 36px; height: 36px;
border-radius: 9px;
background: rgba(255, 170, 0, 0.15);
display: flex; align-items: center; justify-content: center;
color: var(--warning);
font-size: 16px;
font-weight: 700;
}
.kyc-banner-text {
font-size: 13.5px;
color: var(--text-dark);
line-height: 1.45;
}
.kyc-banner-text strong { font-weight: 600; }
.kyc-banner-text small {
display: block;
font-size: 12px;
color: var(--text-dark-muted);
margin-top: 2px;
}
.kyc-banner-close {
width: 28px; height: 28px;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
color: var(--text-dark-dim);
font-size: 16px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.kyc-banner-close:hover {
background: var(--tint-strong);
color: var(--text-dark);
}
/* ============================================================
DASHBOARD — Hero overview (Итерация 4)
Единый full-width блок: крупный баланс + аллокация одной stacked-полосой.
Identity (ФИО, KYC, 2FA) переехала в профиль-меню top-bar.
Без графиков тренда — обменник, не биржевой терминал (CLAUDE.md).
Terra — обменник: у большинства аккаунтов 1–2 актива, блок грациозно
вырождается в 1 сегмент.
============================================================ */
.balance-hero {
position: relative;
padding: 22px 24px 20px;
border-radius: 14px;
margin-bottom: 22px;
scroll-margin-top: 80px;
background:
radial-gradient(ellipse 60% 100% at 100% 0%, rgba(0, 102, 255, 0.18), transparent 60%),
linear-gradient(135deg, var(--brand-dark-bg-1) 0%, var(--brand-dark-bg-2) 60%, var(--brand-dark-bg-3) 100%);
border: 1px solid var(--brand-dark-border-strong);
overflow: hidden;
color: var(--brand-dark-text);
/* Brand-dark scope — токены к тёмным значениям, чтобы блок оставался
читаемым и под светлой темой. */
--text-dark: var(--brand-dark-text);
--text-dark-muted: var(--brand-dark-text-muted);
--text-dark-dim: var(--brand-dark-text-dim);
--text-dark-faint: var(--brand-dark-text-faint);
--border-dark: var(--brand-dark-border);
--border-dark-strong: var(--brand-dark-border-strong);
}
.balance-hero-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.balance-hero-main {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.balance-hero-label {
color: var(--text-dark-faint);
}
.balance-hero-amount {
font-size: 34px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.05;
color: var(--text-dark);
font-feature-settings: "tnum";
}
.balance-hero-meta {
font-size: 11px;
color: var(--text-dark-muted);
letter-spacing: 0.06em;
white-space: nowrap;
flex-shrink: 0;
padding-top: 6px;
}
.balance-hero-bar {
display: flex;
width: 100%;
height: 12px;
border-radius: 100px;
overflow: hidden;
/* Подложка-разделитель: gap между сегментами просвечивает фоном островка,
чтобы соседние per-currency цвета не сливались. */
background: var(--brand-dark-bg-1);
gap: 2px;
}
.balance-hero-seg {
display: block;
height: 100%;
min-width: 3px;
background: var(--surface-dark-3);
cursor: pointer;
transition: filter 0.12s;
}
/* Per-currency заливка сегментов и точек легенды.
Компаунд-селектор (.balance-hero-seg.cur-*) повышает специфичность над
.balance-hero-seg { background } — без этого dark-фон островка перебивал
.cur-* (равная специфичность, .cur-* раньше по порядку). Точкам легенды
нужно то же. cur-* задают background-image (градиент); явно сбрасываем
background-color, унаследованный от .balance-hero-seg/-dot. */
.balance-hero-seg.cur-RUB, .balance-hero-legend-dot.cur-RUB { background-color: transparent; background-image: linear-gradient(135deg, #4A6FFF, #2D5BFF); }
.balance-hero-seg.cur-KGS, .balance-hero-legend-dot.cur-KGS { background-color: transparent; background-image: linear-gradient(135deg, #E63946, #8C1C2A); }
.balance-hero-seg.cur-USDT, .balance-hero-legend-dot.cur-USDT { background-color: transparent; background-image: linear-gradient(135deg, #00D9A0, #00A878); }
.balance-hero-seg.cur-USDC, .balance-hero-legend-dot.cur-USDC { background-color: transparent; background-image: linear-gradient(135deg, #2775CA, #1A5C9E); }
.balance-hero-seg.cur-BTC, .balance-hero-legend-dot.cur-BTC { background-color: transparent; background-image: linear-gradient(135deg, #F7931A, #F76808); }
.balance-hero-seg.cur-ETH, .balance-hero-legend-dot.cur-ETH { background-color: transparent; background-image: linear-gradient(135deg, #6E47FF, #4A2DCC); }
.balance-hero-seg.cur-SOL, .balance-hero-legend-dot.cur-SOL { background-color: transparent; background-image: linear-gradient(135deg, #9945FF, #19FB9B); }
.balance-hero-seg.cur-TON, .balance-hero-legend-dot.cur-TON { background-color: transparent; background-image: linear-gradient(135deg, #0098EA, #0075C2); }
.balance-hero-seg:first-child { border-radius: 100px 0 0 100px; }
.balance-hero-seg:last-child { border-radius: 0 100px 100px 0; }
.balance-hero-seg:only-child { border-radius: 100px; }
.balance-hero-seg:hover { filter: brightness(1.15); }
.balance-hero-seg-rest {
/* Нейтральный rollup-сегмент относительно тёмного островка (не --surface-dark-3,
который под светлой темой становится почти белым = «активным»). */
background: var(--brand-dark-bg-3);
cursor: default;
}
.balance-hero-legend {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 14px;
}
.balance-hero-legend-item {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 0;
border: none;
background: none;
cursor: pointer;
font-size: 12.5px;
color: var(--text-dark-muted);
letter-spacing: -0.005em;
}
button.balance-hero-legend-item:hover { color: var(--text-dark); }
button.balance-hero-legend-item:focus-visible {
outline: 2px solid var(--accent-bright);
outline-offset: 3px;
border-radius: 4px;
}
.balance-hero-legend-item strong {
font-weight: 600;
color: var(--text-dark);
}
.balance-hero-legend-rest { cursor: default; }
.balance-hero-legend-dot {
width: 10px;
height: 10px;
border-radius: 3px;
flex-shrink: 0;
background: var(--brand-dark-bg-3);
}
.balance-hero-legend-pct {
font-size: 11.5px;
color: var(--text-dark-faint);
letter-spacing: 0.04em;
}
.balance-hero-empty {
padding: 8px 0 4px;
color: var(--text-dark-muted);
font-size: 13px;
}
@media (max-width: 767px) {
.balance-hero { padding: 18px 16px 16px; }
.balance-hero-amount { font-size: 28px; }
.balance-hero-top { flex-direction: column; gap: 6px; }
.balance-hero-meta { padding-top: 0; }
}
.kyc-pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 100px;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.06em;
border: 1px solid currentColor;
background: transparent;
}
.kyc-pill.kyc-low {
color: var(--warning);
background: var(--warning-soft);
border-color: var(--warning-soft-2);
}
.kyc-pill.kyc-ok {
color: var(--positive);
background: var(--positive-soft);
border-color: var(--positive-soft-2);
}
/* ============================================================
DASHBOARD — Quick actions
============================================================ */
.quick-actions {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
margin-bottom: 22px;
}
.qa-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 11px;
color: var(--text-dark);
font-size: 13.5px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
transition: all 0.15s ease;
}
.qa-btn:hover {
border-color: var(--border-dark-stronger);
background: var(--surface-dark-2);
transform: translateY(-1px);
}
.qa-icon {
width: 32px; height: 32px;
border-radius: 9px;
background: var(--accent-soft);
border: 1px solid var(--accent-soft-2);
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
color: var(--accent-bright);
font-weight: 700;
flex-shrink: 0;
}
.qa-btn:hover .qa-icon {
background: rgba(0, 102, 255, 0.18);
}
/* ============================================================
DASHBOARD — Active operation
============================================================ */
.active-op {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 16px;
align-items: center;
padding: 16px 18px;
background: linear-gradient(135deg, rgba(0, 102, 255, 0.10), rgba(0, 102, 255, 0.03));
border: 1px solid rgba(0, 102, 255, 0.22);
border-radius: 12px;
margin-bottom: 22px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.active-op:hover {
border-color: rgba(0, 102, 255, 0.4);
}
.active-op-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--accent);
color: white;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
font-weight: 700;
position: relative;
flex-shrink: 0;
}
.active-op-icon::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid var(--accent);
opacity: 0.4;
animation: pulse-ring 1.6s ease-in-out infinite;
}
@keyframes pulse-ring {
0% { transform: scale(0.95); opacity: 0.6; }
100% { transform: scale(1.18); opacity: 0; }
}
.active-op-info-title {
font-size: 14px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 4px;
}
.active-op-info-meta {
display: flex;
gap: 12px;
align-items: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-muted);
letter-spacing: 0.04em;
}
.active-op-info-meta .active-op-step {
color: var(--accent-bright);
}
.active-op-action {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-muted);
letter-spacing: 0.06em;
}
.active-op-action::after { content: ' →'; color: var(--accent-bright); }
/* ============================================================
DASHBOARD — Wallets grid
============================================================ */
.wallets-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 28px;
}
.wallet-card {
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 12px;
padding: 16px;
cursor: pointer;
transition: all 0.15s ease;
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 132px;
}
.wallet-card:hover {
border-color: var(--border-dark-strong);
background: var(--surface-dark-2);
transform: translateY(-1px);
}
.wallet-card-unpin {
position: absolute;
top: 8px; right: 8px;
width: 22px; height: 22px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--tint-default);
border: 1px solid var(--border-dark);
color: var(--text-dark-faint);
font-size: 14px;
line-height: 1;
cursor: pointer;
opacity: 0.45;
transition: all 0.15s ease;
z-index: 2;
}
.wallet-card:hover .wallet-card-unpin { opacity: 1; }
.wallet-card-unpin:hover {
background: rgba(255, 71, 87, 0.14);
border-color: rgba(255, 71, 87, 0.32);
color: var(--negative);
}
.wallets-empty {
text-align: center;
padding: 48px 24px;
background: var(--surface-dark);
border: 1px dashed var(--border-dark-strong);
border-radius: 12px;
}
.wallets-empty h3 {
font-size: 15px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 6px;
}
.wallets-empty p {
color: var(--text-dark-muted);
font-size: 13px;
margin-bottom: 16px;
}
.wallet-card-head {
display: flex;
align-items: center;
gap: 10px;
}
.wallet-card-info strong {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.005em;
}
.wallet-card-info span {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-dim);
letter-spacing: 0.04em;
margin-top: 1px;
}
.wallet-card-body {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 8px;
}
.wallet-card-body-left {
min-width: 0;
}
.wallet-card-amount {
font-size: 17px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.015em;
font-feature-settings: "tnum";
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wallet-card-equiv {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-muted);
margin-top: 2px;
}
.wallet-card-spark {
width: 76px;
height: 28px;
flex-shrink: 0;
}
.wallet-card-trend {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
margin-top: 2px;
text-align: right;
color: var(--text-dark-dim);
}
.wallet-card-trend.pos { color: var(--positive); }
.wallet-card-trend.neg { color: var(--negative); }
.wallet-card-rate {
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--border-dark);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-dark-dim);
letter-spacing: 0.04em;
}
.wallet-card-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
gap: 8px;
padding: 8px 0;
}
.wallet-card-empty-cta {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--accent-bright);
letter-spacing: 0.06em;
padding: 6px 12px;
border: 1px solid var(--accent-soft-2);
border-radius: 6px;
background: var(--accent-soft);
}
.wallet-card-empty-hint {
font-size: 11px;
color: var(--text-dark-dim);
}
/* ============================================================
DASHBOARD — Recent operations
============================================================ */
.recent-ops {
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 12px;
padding: 8px 18px;
}
.recent-op-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--border-dark);
cursor: pointer;
transition: background 0.12s;
}
.recent-op-row:last-child { border-bottom: none; }
.recent-op-row:hover {
background: var(--tint-soft);
margin: 0 -10px;
padding-left: 10px; padding-right: 10px;
border-radius: 8px;
}
.recent-op-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 9px;
cursor: pointer;
transition: background 0.15s, transform 0.15s;
}
.recent-op-icon-wrap:hover {
background: var(--tint-default);
transform: scale(1.05);
}
.recent-op-icon-wrap .cur-icon {
width: 30px; height: 30px;
font-size: 13px;
}
.recent-op-info-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 2px;
}
.recent-op-info-sub {
display: flex;
gap: 8px;
align-items: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-dim);
letter-spacing: 0.04em;
}
.recent-op-amount {
text-align: right;
}
.recent-op-amount-value {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 600;
color: var(--text-dark);
font-feature-settings: "tnum";
}
.recent-op-amount-value.in { color: var(--positive); }
.recent-op-amount-currency {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-dim);
margin-top: 2px;
}
.recent-ops-footer {
padding: 12px 0 6px;
text-align: center;
border-top: 1px solid var(--border-dark);
margin-top: 4px;
}
/* ============================================================
GENERIC SUBTLE ELEMENTS
============================================================ */
.divider {
height: 1px;
background: var(--border-dark);
margin: 18px 0;
}
.eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-dim);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Inline currency-picker внутри modal (iOS-pattern: замена контента) */
.picker-header {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
}
.picker-back {
background: transparent;
border: 1px solid var(--border-dark);
color: var(--text-dark);
padding: 6px 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.04em;
border-radius: 7px;
cursor: pointer;
}
.picker-back:hover { border-color: var(--border-dark-strong); }
.picker-header .so-title { text-align: center; }
.picker-body {
display: flex;
flex-direction: column;
gap: 12px;
overflow: hidden;
}
.picker-search-wrap {
flex-shrink: 0;
}
.picker-search {
width: 100%;
padding: 10px 14px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 8px;
color: var(--text-dark);
font-size: 14px;
outline: none;
}
.picker-search:focus { border-color: var(--accent); }
.picker-search::placeholder { color: var(--text-dark-dim); }
.picker-list {
flex: 1;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 4px;
}
.picker-item {
display: grid;
grid-template-columns: 32px 1fr auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 9px;
color: var(--text-dark);
cursor: pointer;
text-align: left;
transition: border-color 0.12s, background 0.12s;
}
.picker-item:hover,
.picker-item.focused {
border-color: var(--accent-soft-2);
background: var(--surface-dark);
}
.picker-item-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.picker-item-text strong { font-size: 14px; font-weight: 600; }
.picker-item-text small { color: var(--text-dark-muted); font-size: 12px; }
.picker-item-balance {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--text-dark-dim);
}
.picker-empty {
text-align: center;
padding: 40px 16px;
color: var(--text-dark-muted);
font-size: 13px;
}
/* ============================================================
SLIDE-OVER (универсальный)
============================================================ */
.slide-over[hidden],
.slide-over-overlay[hidden] {
display: none !important;
}
.slide-over-overlay {
position: fixed; inset: 0;
background: var(--overlay-backdrop);
backdrop-filter: blur(4px);
z-index: 999;
animation: fade-in 0.18s ease;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Десктоп: centred modal по центру viewport, ширина ~520px, ограниченная высота.
Grid на самом .slide-over (а не во вложенном wrapper) — даёт header/body/footer
корректные bounded размеры с первого layout pass. Wrapper .slide-over-content
делаем прозрачным для layout (display:contents), чтобы рендер-код продолжал
писать в него innerHTML, но layout считался по прямым потомкам. */
.slide-over {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 520px;
max-width: calc(100vw - 32px);
height: min(820px, calc(100vh - 32px));
background: var(--surface-dark);
border: 1px solid var(--border-dark-strong);
border-radius: 16px;
z-index: 1000;
box-shadow: 0 24px 64px var(--shadow-color-medium);
animation: modal-in 0.18s cubic-bezier(0.18, 0.7, 0.22, 1);
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
}
@keyframes modal-in {
from { transform: translate(-50%, -48%); opacity: 0; }
to { transform: translate(-50%, -50%); opacity: 1; }
}
.slide-over-content {
/* display:contents — wrapper прозрачен для layout, дети участвуют в grid
родителя (.slide-over) как прямые потомки. Render-код продолжает писать
innerHTML в этот контейнер, но header/body/footer получают grid-rows. */
display: contents;
}
.so-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 24px;
border-bottom: 1px solid var(--border-dark);
flex-shrink: 0;
}
.so-title {
font-size: 17px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.015em;
}
.so-subtitle {
margin-top: 2px;
font-size: 12.5px;
font-weight: 400;
color: var(--text-dark-muted);
letter-spacing: -0.005em;
line-height: 1.35;
}
.so-step {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-dim);
letter-spacing: 0.06em;
margin-top: 4px;
}
.so-close {
width: 32px; height: 32px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
color: var(--text-dark-muted);
font-size: 18px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.so-close:hover {
background: var(--tint-strong);
color: var(--text-dark);
}
.so-body {
/* min-height: 0 отключает min-content sizing — позволяет grid-row 1fr
отдать .so-body фиксированную долю от parent. overflow-y: auto даёт
scroll, когда контент превышает эту долю. */
min-height: 0;
overflow-y: auto;
padding: 18px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* flex-shrink: 0 на всех прямых детях — иначе flex сжимает их под доступную
высоту вместо того чтобы дать overflow. Без этого scrollHeight всегда
совпадает с clientHeight и scroll-bar не появляется. */
.so-body > * { flex-shrink: 0; }
.so-footer {
padding: 18px 24px;
border-top: 1px solid var(--border-dark);
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
background: var(--bg-dark-2);
}
/* ============================================================
SLIDE-OVER — calculator (Step 1 для Купить/Продать/Обменять)
============================================================ */
.so-calc-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.so-lock {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.04em;
}
.so-lock.fixed {
background: var(--positive-soft);
color: var(--positive);
border: 1px solid var(--positive-soft-2);
}
.so-lock.fixed::before {
content: '';
width: 6px; height: 6px;
background: var(--positive);
border-radius: 50%;
box-shadow: 0 0 6px var(--positive);
animation: pulse-dot 2s ease-in-out infinite;
}
.so-lock.indicative {
background: var(--accent-soft);
color: var(--accent-bright);
border: 1px solid var(--accent-soft-2);
}
.so-lock.indicative::before {
content: '';
width: 6px; height: 6px;
background: var(--accent-bright);
border-radius: 50%;
box-shadow: 0 0 6px var(--accent-bright);
animation: pulse-dot 1.5s ease-in-out infinite;
}
.so-calc-row {
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 10px;
padding: 12px 16px;
transition: border-color 0.15s;
}
/* Receive-line — компактная альтернатива второй .so-calc-row в контекстном
режиме. Одна строка: «Вы получаете 1 089,01 [USDT ▾]» — выбор валюты
доступен через кнопку, но не съедает целую секцию калькулятора. */
.so-receive-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 16px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 10px;
}
.so-receive-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-dark-dim);
letter-spacing: 0.1em;
text-transform: uppercase;
flex-shrink: 0;
}
.so-receive-value {
flex: 1;
text-align: right;
font-size: 18px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--accent-bright);
}
.so-receive-cur {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 7px;
color: var(--text-dark);
font-size: 12px;
font-weight: 600;
cursor: pointer;
flex-shrink: 0;
}
.so-receive-cur:hover { border-color: var(--border-dark-strong); }
/* Read-only badge: валюта зафиксирована контекстом, без dropdown-стрелки. */
.so-currency-select.fixed,
.so-receive-cur.fixed {
cursor: default;
opacity: 0.85;
}
.so-currency-select.fixed:hover,
.so-receive-cur.fixed:hover { border-color: var(--border-dark); background: var(--surface-dark); }
/* Pair-pick current: одна кнопка вместо grid из 9 валют × сетей.
По клику открывается inline-picker со всем списком + поиском. */
.pair-pick-current {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 14px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 9px;
color: var(--text-dark);
cursor: pointer;
text-align: left;
transition: border-color 0.12s, background 0.12s;
}
.pair-pick-current:hover {
border-color: var(--border-dark-strong);
background: var(--surface-dark);
}
/* Сеть ещё не выбрана — мягкий warning-акцент на «выберите сеть». */
.pair-pick-current-empty {
border-color: var(--warning-soft-2, var(--border-dark-strong));
border-style: dashed;
}
.pair-pick-current-empty .pair-pick-current-text small { color: var(--warning, var(--text-dark)); }
/* Prompt вместо адреса, пока сеть мультисетевой крипты не выбрана. */
.deposit-net-prompt {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 16px;
border-radius: 10px;
border: 1px dashed var(--warning-soft-2, var(--border-dark-strong));
background: var(--warning-soft, var(--bg-dark-2));
}
.deposit-net-prompt-icon {
font-size: 16px;
line-height: 1.3;
color: var(--warning, var(--text-dark));
flex-shrink: 0;
}
.deposit-net-prompt-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.deposit-net-prompt-text strong { font-size: 13.5px; font-weight: 600; }
.deposit-net-prompt-text span { font-size: 12.5px; color: var(--text-dark-muted); line-height: 1.45; }
.pair-pick-current-text {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.pair-pick-current-text strong { font-size: 14px; font-weight: 600; }
.pair-pick-current-text small { color: var(--text-dark-muted); font-size: 12px; }
.pair-pick-current-arrow {
color: var(--text-dark-dim);
font-size: 12px;
}
/* AML-индикатор: компактный tag + info-иконка с tooltip.
Заменяет большую карточку с пояснением — compliance-сигнал остаётся
явным (tag цвета + блокировка кнопки), пояснение — по hover/tap. */
.aml-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 8px;
position: relative;
}
.aml-badge.aml-blocked {
background: rgba(255, 71, 87, 0.10);
border-color: rgba(255, 71, 87, 0.32);
}
.aml-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
border-radius: 50%;
color: var(--text-dark-muted);
font-size: 12px;
cursor: help;
user-select: none;
}
.aml-info:hover { color: var(--text-dark); background: var(--tint-soft); }
.aml-info:focus-visible {
outline: 2px solid var(--accent-bright);
outline-offset: 2px;
color: var(--text-dark);
}
/* Compact row: сеть-warn + AML-pill в одну строку. На узком viewport — wrap. */
.aml-badge-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: stretch;
}
.aml-badge-row > .aml-badge { flex: 1 1 auto; justify-content: space-between; min-width: 0; }
.aml-badge.aml-badge-warning {
background: rgba(255, 170, 0, 0.08);
border-color: rgba(255, 170, 0, 0.28);
}
.aml-badge-warn-text {
color: var(--warning);
font-weight: 600;
font-size: 12.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* CSS-tooltip: появляется на hover, привязан к [data-tooltip] на родителе. */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 0;
max-width: 280px;
padding: 8px 10px;
background: var(--surface-dark-2, #1a1a1a);
border: 1px solid var(--border-dark-strong);
border-radius: 7px;
font-size: 12px;
color: var(--text-dark);
line-height: 1.45;
white-space: normal;
z-index: 50;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
box-shadow: 0 8px 24px var(--shadow-color-medium);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-within::after {
opacity: 1;
}
.so-calc-row:focus-within { border-color: var(--accent); }
.so-calc-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-dark-dim);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 4px;
}
.so-calc-row-content {
display: flex;
align-items: center;
gap: 12px;
}
.so-calc-amount {
flex: 1;
min-width: 0;
width: 100%;
background: transparent;
font-size: 28px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.025em;
font-feature-settings: "tnum";
}
.so-calc-amount.receive {
color: var(--accent-bright);
}
.so-currency-select {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid var(--border-dark-strong);
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 600;
color: var(--text-dark);
}
.so-currency-select:hover { background: var(--tint-default); }
.so-currency-select::after {
content: '▾';
font-size: 10px;
color: var(--text-dark-muted);
margin-left: 2px;
}
.so-swap-btn {
display: flex;
justify-content: center;
margin: -10px 0;
position: relative;
z-index: 2;
}
.so-swap-btn button {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--surface-dark);
border: 1px solid var(--border-dark-strong);
color: var(--text-dark);
font-size: 14px;
display: flex; align-items: center; justify-content: center;
transition: all 0.15s;
}
.so-swap-btn button:hover {
border-color: var(--accent);
color: var(--accent-bright);
transform: rotate(180deg);
}
/* ============================================================
CALCULATOR v3 — паттерн «верх = ввод, низ = расчёт» + segmented
control. Перенесено из sandbox calculator-compare.html (вариант 5):
1. dir-header — направление операции отдельной строкой;
2. fix-segmented — две кнопки фиксируемой суммы как явная точка переключения;
3. calc-stack-v3 — две .calc-row-v3, активная всегда сверху
(CSS order), клик в нижнюю = swap с анимацией.
============================================================ */
/* Direction header — иконки валют + стрелка; ⇄ для swap-action */
.dir-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 10px;
}
.dir-header-text {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: var(--text-dark);
}
.dir-header-text .arrow {
color: var(--text-dark-dim);
font-size: 13px;
}
.dir-swap-btn {
width: 32px; height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--surface-dark);
border: 1px solid var(--border-dark-strong);
border-radius: 50%;
color: var(--text-dark);
cursor: pointer;
font-size: 14px;
transition: background 0.15s, border-color 0.15s, transform 0.2s;
}
.dir-swap-btn:hover {
background: var(--tint-default);
border-color: var(--border-dark-stronger);
transform: rotate(180deg);
}
.dir-swap-btn:focus-visible {
outline: 2px solid var(--accent-bright);
outline-offset: 2px;
}
/* Segmented control фиксируемой суммы */
.fix-segmented {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 4px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 10px;
}
.fix-seg-btn {
appearance: none;
background: transparent;
border: 1px solid transparent;
border-radius: 7px;
color: var(--text-dark-muted);
font-family: inherit;
font-size: 13px;
font-weight: 600;
padding: 8px 10px;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.fix-seg-btn:hover:not(.is-active) {
background: var(--tint-soft);
color: var(--text-dark);
}
.fix-seg-btn.is-active {
background: var(--surface-dark);
border-color: var(--accent);
color: var(--text-dark);
box-shadow: 0 0 0 2px var(--accent-soft);
}
.fix-seg-btn:focus-visible {
outline: 2px solid var(--accent-bright);
outline-offset: 2px;
}
.fix-seg-btn .seg-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--border-dark-strong);
flex-shrink: 0;
}
.fix-seg-btn.is-active .seg-dot {
background: var(--accent-bright);
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Calc-stack: два слота, активный (input) всегда сверху по CSS order.
Слот = .calc-slot, внутри row + опциональный under-block (chips/hint),
чтобы under-block ехал вместе со своим row при swap. */
.calc-stack-v3 {
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.calc-slot {
display: flex;
flex-direction: column;
gap: 10px;
}
.calc-slot.input-slot { order: 1; }
.calc-slot.calc-slot-bottom { order: 2; }
.calc-row-v3 {
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 10px;
padding: 12px 16px;
transition: border-color 0.2s, background 0.2s, opacity 0.2s;
}
.calc-row-v3.input-mode {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
cursor: text;
}
.calc-row-v3.calc-mode {
cursor: pointer;
opacity: 0.92;
}
.calc-row-v3.calc-mode:hover {
border-color: var(--border-dark-strong);
opacity: 1;
}
.calc-row-v3 .so-calc-label {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.calc-row-v3 .input-mode-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.1em;
padding: 2px 6px;
border-radius: 4px;
text-transform: uppercase;
}
.calc-row-v3.input-mode .input-mode-tag {
background: var(--accent-soft);
color: var(--accent-bright);
}
.calc-row-v3.calc-mode .input-mode-tag {
background: var(--tint-soft);
color: var(--text-dark-dim);
}
.calc-amount-display {
flex: 1;
min-width: 0;
display: flex;
align-items: baseline;
gap: 4px;
}
.calc-amount-display .approx {
font-size: 18px;
color: var(--text-dark-dim);
font-weight: 500;
user-select: none;
}
.calc-input-v3 {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
padding: 0;
font-family: inherit;
font-size: 28px;
font-weight: 600;
letter-spacing: -0.025em;
font-feature-settings: "tnum";
width: 100%;
caret-color: transparent;
color: var(--text-dark-muted);
}
.calc-row-v3.input-mode .calc-input-v3 {
color: var(--text-dark);
caret-color: var(--accent-bright);
}
.calc-input-v3::placeholder { color: var(--text-dark-dim); }
.calc-row-v3.calc-mode .calc-amount-display {
color: var(--text-dark-dim);
}
/* Swap-анимация: 240ms, поднимающаяся / опускающаяся строка */
.calc-row-v3.swap-rising {
animation: rowRise 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.calc-row-v3.swap-falling {
animation: rowFall 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes rowRise {
0% { transform: translateY(calc(100% + 10px)); }
100% { transform: translateY(0); }
}
@keyframes rowFall {
0% { transform: translateY(calc(-100% - 10px)); }
100% { transform: translateY(0); }
}
/* Breakdown plate */
.breakdown {
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 10px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.bd-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11.5px;
color: var(--text-dark-muted);
letter-spacing: 0.02em;
}
.bd-label { letter-spacing: 0.06em; text-transform: uppercase; font-size: 10.5px; }
.bd-divider {
height: 1px;
background: var(--border-dark);
margin: 4px 0;
}
.bd-row.total {
font-family: 'Geist', sans-serif;
font-weight: 600;
color: var(--text-dark);
font-size: 14px;
}
.bd-row.total .bd-label { font-family: 'JetBrains Mono', monospace; color: var(--text-dark-dim); font-size: 10px; }
.bd-row.total .bd-value { color: var(--accent-bright); font-feature-settings: "tnum"; }
.bd-row .bd-value { text-align: right; color: var(--text-dark); font-feature-settings: "tnum"; }
.bd-row .bd-pct { font-size: 10px; color: var(--text-dark-faint); }
/* Route picker (Купить/Продать) */
.route-picker {
border: 1px solid var(--border-dark);
border-radius: 10px;
overflow: hidden;
}
.route-picker-header {
padding: 10px 16px;
background: var(--bg-dark-2);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-dark-dim);
letter-spacing: 0.1em;
text-transform: uppercase;
border-bottom: 1px solid var(--border-dark);
}
.route-option {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
cursor: pointer;
border-bottom: 1px solid var(--border-dark);
transition: background 0.15s;
}
.route-option-text small {
display: inline-block;
margin-left: 8px;
margin-top: 0;
font-size: 11.5px;
color: var(--text-dark-muted);
}
.route-option:last-child { border-bottom: none; }
.route-option:hover { background: var(--tint-soft); }
.route-option-radio {
width: 18px; height: 18px;
border-radius: 50%;
border: 1.5px solid var(--text-dark-faint);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.route-option.active .route-option-radio {
border-color: var(--accent-bright);
}
.route-option.active .route-option-radio::after {
content: '';
width: 9px; height: 9px;
background: var(--accent-bright);
border-radius: 50%;
}
.route-option-text {
flex: 1;
font-size: 13px;
color: var(--text-dark);
}
.route-option-text small {
display: block;
font-size: 11.5px;
color: var(--text-dark-muted);
margin-top: 2px;
}
.route-option-extra {
border-top: 1px solid var(--border-dark);
padding: 10px 14px;
background: var(--inset-tint);
display: none;
}
.route-extra-row {
display: grid;
grid-template-columns: 110px 1fr auto;
gap: 8px;
align-items: center;
}
.route-extra-row .field-input { margin: 0; }
.route-extra-net { padding: 8px 10px; font-size: 12px; }
.route-extra-addr { padding: 8px 10px; font-size: 12px; }
.route-extra-addr.has-error { border-color: var(--negative, #FF4757); }
.route-extra-note {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
font-size: 12px;
background: var(--bg-dark-2);
border: 1px dashed var(--border-dark);
border-radius: 8px;
}
.route-option.active.has-extra + .route-option-extra,
.route-option.active.has-extra .route-option-extra-inner { display: block; }
/* Form fields */
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.field-input {
padding: 11px 14px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 8px;
font-size: 13.5px;
color: var(--text-dark);
transition: border-color 0.15s;
}
.field-input:focus { border-color: var(--accent); }
.field-input.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.field-error {
font-size: 12px;
color: var(--negative);
display: flex;
align-items: center;
gap: 6px;
}
.field-hint {
font-size: 11.5px;
color: var(--text-dark-muted);
}
/* ============================================================
SLIDE-OVER — Step 2 (review)
============================================================ */
.review-summary {
padding: 18px 20px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 11px;
display: flex;
flex-direction: column;
gap: 4px;
}
.review-headline {
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.01em;
}
.review-amount-flow {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
align-items: center;
margin-top: 12px;
padding: 14px 0;
border-top: 1px solid var(--border-dark);
}
.review-side {
text-align: center;
}
.review-side-label {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
color: var(--text-dark-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 6px;
}
.review-side-value {
font-size: 20px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.015em;
font-feature-settings: "tnum";
}
.review-side-value.recv { color: var(--accent-bright); }
.review-side-currency {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-muted);
margin-top: 4px;
letter-spacing: 0.04em;
}
.review-arrow {
color: var(--text-dark-faint);
font-size: 18px;
}
/* ============================================================
SLIDE-OVER — Step 2.5 (2FA)
============================================================ */
.twofa-wrap {
text-align: center;
margin: 8px 0;
}
.twofa-input {
width: 100%;
padding: 18px 16px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark-strong);
border-radius: 11px;
font-family: 'JetBrains Mono', monospace;
font-size: 28px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: 0.5em;
text-align: center;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.twofa-input::placeholder {
color: var(--text-dark-faint);
letter-spacing: 0.5em;
}
.twofa-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.18);
}
.twofa-resend-wrap {
text-align: center;
}
.twofa-resend {
font-family: 'JetBrains Mono', monospace;
font-size: 11.5px;
color: var(--accent-bright);
letter-spacing: 0.04em;
cursor: pointer;
transition: color 0.15s;
}
.twofa-resend:hover { color: var(--accent-2); }
.twofa-resend.disabled {
color: var(--text-dark-dim);
cursor: default;
pointer-events: none;
}
/* ============================================================
SLIDE-OVER — Step 3 (progress / tracker)
============================================================ */
.tracker {
display: flex;
flex-direction: column;
gap: 0;
}
.tracker-step {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 14px;
padding: 14px 0;
align-items: center;
position: relative;
}
.tracker-step + .tracker-step::before {
content: '';
position: absolute;
left: 15.5px;
top: -8px;
width: 1px;
height: 22px;
background: var(--border-dark);
}
.tracker-step.done + .tracker-step::before {
background: var(--positive);
}
.tracker-step-dot {
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
position: relative;
z-index: 2;
}
.tracker-step.done .tracker-step-dot {
background: var(--positive);
color: white;
}
.tracker-step.active .tracker-step-dot {
background: var(--accent);
color: white;
}
.tracker-step.active .tracker-step-dot::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid var(--accent);
opacity: 0.5;
animation: pulse-ring 1.6s ease-in-out infinite;
}
.tracker-step.pending .tracker-step-dot {
background: var(--surface-dark-2);
color: var(--text-dark-faint);
border: 1px solid var(--border-dark);
}
.tracker-step-label {
font-size: 13.5px;
font-weight: 600;
color: var(--text-dark);
}
.tracker-step.pending .tracker-step-label { color: var(--text-dark-muted); font-weight: 500; }
.tracker-step-time {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-dim);
letter-spacing: 0.04em;
}
.tracker-step.pending .tracker-step-time::before { content: '~'; }
.tracker-success {
text-align: center;
padding: 24px 16px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(0, 217, 160, 0.10), rgba(0, 217, 160, 0.02));
border: 1px solid rgba(0, 217, 160, 0.28);
}
.tracker-success-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--positive);
color: white;
font-size: 28px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 14px;
}
.tracker-success-title {
font-size: 18px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 4px;
}
.tracker-success-sub {
font-size: 13px;
color: var(--text-dark-muted);
}
/* ============================================================
TOAST
============================================================ */
.toast-container {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 2000;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}
.toast {
pointer-events: auto;
padding: 14px 18px;
background: var(--surface-dark);
border: 1px solid var(--border-dark-strong);
border-radius: 10px;
color: var(--text-dark);
font-size: 13.5px;
box-shadow: 0 16px 40px var(--shadow-color-deep);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.2s, transform 0.2s;
max-width: 360px;
}
.toast.toast-shown { opacity: 1; transform: none; }
.toast-warning { border-color: var(--warning-soft-2); }
.toast-error { border-color: var(--negative-soft-2); }
.toast-success { border-color: var(--positive-soft-2); }
/* Tab toggle (Fiat/Crypto, Email/SMS, etc.) */
.tab-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
padding: 3px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 9px;
}
.tab-btn {
padding: 9px 12px;
font-size: 12.5px;
font-weight: 600;
color: var(--text-dark-muted);
border-radius: 7px;
letter-spacing: -0.005em;
cursor: pointer;
transition: all 0.15s;
}
.tab-btn:hover { color: var(--text-dark); }
.tab-btn.active {
background: var(--surface-dark);
color: var(--text-dark);
}
/* Currency / network picker grid */
.cur-pick-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.cur-pick-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 10px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 8px;
color: var(--text-dark);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.cur-pick-btn:hover {
border-color: var(--border-dark-strong);
background: var(--surface-dark);
}
.cur-pick-btn.active {
background: var(--accent-soft);
border-color: var(--accent-soft-2);
color: var(--accent-bright);
}
.cur-pick-btn .cur-icon {
width: 22px; height: 22px;
font-size: 11px;
}
/* Chip-row выбора фиатной валюты в slide-over пополнения/вывода */
.fiat-cur-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.fiat-cur-chip {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 999px;
color: var(--text-dark);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.fiat-cur-chip:hover {
border-color: var(--border-dark-strong);
background: var(--surface-dark);
}
.fiat-cur-chip.active {
background: var(--accent-soft);
border-color: var(--accent-soft-2);
color: var(--accent-bright);
}
.fiat-cur-chip .cur-icon {
width: 20px; height: 20px;
font-size: 11px;
}
.fiat-cur-chip small {
color: var(--text-dark-muted);
font-weight: 400;
}
/* Pair picker (валюта × сеть в одной кнопке) — для Пополнить/Вывести крипты */
.pair-pick-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.pair-pick-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 9px;
color: var(--text-dark);
cursor: pointer;
transition: all 0.15s;
text-align: left;
min-height: 48px;
}
.pair-pick-btn:hover {
border-color: var(--border-dark-strong);
background: var(--surface-dark);
}
.pair-pick-btn.active {
background: var(--accent-soft);
border-color: var(--accent-soft-2);
}
.pair-pick-btn.active strong {
color: var(--accent-bright);
}
.pair-pick-btn .cur-icon {
width: 24px; height: 24px;
font-size: 12px;
flex-shrink: 0;
}
.pair-pick-text {
display: flex;
flex-direction: column;
line-height: 1.2;
min-width: 0;
}
.pair-pick-text strong {
font-size: 13px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.005em;
}
.pair-pick-text small {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-dark-muted);
letter-spacing: 0.04em;
margin-top: 2px;
}
/* QR-код placeholder */
.qr-box {
background: white;
color: #6B7280;
padding: 32px 24px;
border-radius: 11px;
text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.06em;
min-height: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image:
linear-gradient(45deg, #E5E7EB 25%, transparent 25%),
linear-gradient(-45deg, #E5E7EB 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #E5E7EB 75%),
linear-gradient(-45deg, transparent 75%, #E5E7EB 75%);
background-size: 18px 18px;
background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
/* Объединённый блок: сегментный контрол сетей + QR + адрес + copy
(паттерн «адрес для пополнения» — всё в одной карточке для лаконичности) */
.address-block {
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 12px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.address-block-networks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 2px;
padding: 3px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 8px;
}
.address-block-networks .cur-pick-btn {
padding: 8px 10px;
font-size: 12px;
background: transparent;
border: none;
color: var(--text-dark-muted);
border-radius: 6px;
}
.address-block-networks .cur-pick-btn:hover {
background: var(--tint-default);
color: var(--text-dark);
}
.address-block-networks .cur-pick-btn.active {
background: var(--surface-dark);
border: none;
color: var(--text-dark);
font-weight: 600;
}
.address-block .qr-box { margin: 0; }
.address-block-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-dark-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: -2px;
}
.address-block-value {
font-size: 13px;
color: var(--text-dark);
word-break: break-all;
line-height: 1.5;
}
/* «Ждём поступления» pulse-dot */
.pulse-dot {
width: 12px; height: 12px;
border-radius: 50%;
background: var(--accent-bright);
flex-shrink: 0;
animation: pulse-dot 1.4s ease-in-out infinite;
box-shadow: 0 0 8px rgba(0, 102, 255, 0.5);
}
/* Card stub (для платёжного виджета) */
.card-stub {
padding: 32px 20px;
background: var(--bg-dark-2);
border: 1px dashed var(--border-dark-strong);
border-radius: 11px;
text-align: center;
}
.card-stub-headline {
font-size: 14px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 6px;
}
.card-stub-sub {
font-size: 12px;
color: var(--text-dark-muted);
line-height: 1.5;
max-width: 320px;
margin: 0 auto;
}
/* ============================================================
/profile · /security · /limits — общие стили
============================================================ */
.account-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.kv-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--border-dark);
font-size: 13.5px;
}
.kv-row:last-child { border-bottom: none; }
.kv-row > span:first-child {
color: var(--text-dark-muted);
}
.kv-row strong {
color: var(--text-dark);
font-weight: 600;
text-align: right;
}
/* Whitelist-toggle в форме add-destination — без border'а, своим padding'ом */
.dst-whitelist-toggle {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
padding: 0;
cursor: pointer;
}
.dst-whitelist-toggle-main {
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
}
.dst-whitelist-toggle-main input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--accent);
}
.dst-whitelist-toggle-hint {
color: var(--text-dark-muted);
font-size: 12px;
}
/* Security-row: label/desc слева, действия/badges справа.
Используется в /security (2FA-методы, сессии, история входов). */
.security-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--border-dark);
}
.security-row:last-child { border-bottom: none; }
.security-row-info strong {
display: block;
color: var(--text-dark);
font-weight: 600;
font-size: 13.5px;
letter-spacing: -0.005em;
margin-bottom: 3px;
text-align: left;
}
.security-row-info small {
display: block;
color: var(--text-dark-muted);
font-size: 12px;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.04em;
}
.security-row-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
/* KYC stepper */
.kyc-stepper {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
position: relative;
}
.kyc-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
position: relative;
text-align: center;
}
.kyc-step + .kyc-step::before {
content: '';
position: absolute;
left: -50%;
top: 16px;
width: 100%;
height: 1px;
background: var(--border-dark);
}
.kyc-step.done + .kyc-step::before,
.kyc-step.current + .kyc-step::before { background: var(--positive); }
.kyc-step-dot {
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
z-index: 1;
}
.kyc-step.done .kyc-step-dot {
background: var(--positive);
color: white;
}
.kyc-step.current .kyc-step-dot {
background: var(--accent);
color: white;
position: relative;
}
.kyc-step.current .kyc-step-dot::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid var(--accent);
opacity: 0.5;
animation: pulse-ring 1.6s ease-in-out infinite;
}
.kyc-step.upcoming .kyc-step-dot {
background: var(--surface-dark-2);
color: var(--text-dark-faint);
border: 1px solid var(--border-dark);
}
.kyc-step-label strong {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.005em;
}
.kyc-step.upcoming .kyc-step-label strong { color: var(--text-dark-muted); }
.kyc-step-label small {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-dim);
letter-spacing: 0.04em;
margin-top: 2px;
display: block;
}
/* /destinations — карточки адресной книги */
.destinations-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.dst-card {
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 12px;
padding: 18px 20px;
}
.dst-card-head {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 14px;
align-items: center;
margin-bottom: 12px;
}
.dst-card-info strong {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.01em;
margin-bottom: 2px;
}
.dst-card-info small {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-muted);
letter-spacing: 0.04em;
}
.dst-card-tags {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.dst-card-reqs {
font-size: 12.5px;
color: var(--text-dark);
word-break: break-all;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 12px;
}
.dst-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px;
border-top: 1px solid var(--border-dark);
}
.dst-card-footer .btn {
padding: 6px 12px;
font-size: 11.5px;
}
/* /templates — переиспользует .dst-card стилистику для consistency */
.templates-page-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
/* Address picker — Wise-стиль (dropdown + manual input) */
.addr-picker {
display: flex;
flex-direction: column;
gap: 8px;
}
.addr-picker-trigger {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 11px 14px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 9px;
color: var(--text-dark);
font-size: 13px;
cursor: pointer;
transition: all 0.15s;
}
.addr-picker-trigger:hover {
border-color: var(--border-dark-strong);
background: var(--surface-dark);
}
.addr-picker-trigger.open {
border-color: var(--accent);
}
.addr-picker-trigger > span:first-child {
display: inline-flex;
align-items: center;
gap: 8px;
}
.addr-picker-trigger-arrow {
font-size: 11px;
color: var(--text-dark-muted);
transition: transform 0.15s;
}
.addr-picker-trigger.open .addr-picker-trigger-arrow {
transform: rotate(180deg);
color: var(--accent-bright);
}
.addr-picker-panel {
display: flex;
flex-direction: column;
background: var(--surface-dark);
border: 1px solid var(--border-dark-strong);
border-radius: 10px;
overflow: hidden;
}
.addr-picker-panel[hidden] { display: none; }
.addr-picker-search-wrap {
padding: 10px;
border-bottom: 1px solid var(--border-dark);
background: var(--bg-dark-2);
}
.addr-picker-search {
width: 100%;
padding: 9px 14px 9px 36px;
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 8px;
font-family: inherit;
font-size: 13px;
color: var(--text-dark);
outline: none;
transition: border-color 0.15s;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 11px 50%;
background-size: 13px 13px;
}
.addr-picker-search::placeholder { color: var(--text-dark-dim); }
.addr-picker-search:focus { border-color: var(--accent); }
.addr-picker-items {
display: flex;
flex-direction: column;
max-height: 240px;
overflow-y: auto;
}
.addr-picker-empty {
padding: 28px 16px;
text-align: center;
font-size: 12.5px;
color: var(--text-dark-muted);
}
.addr-picker-empty[hidden] { display: none; }
.addr-picker-item {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
align-items: center;
width: 100%;
padding: 12px 14px;
background: transparent;
border: none;
border-bottom: 1px solid var(--border-dark);
color: var(--text-dark);
text-align: left;
cursor: pointer;
transition: background 0.12s;
}
.addr-picker-item:last-child { border-bottom: none; }
.addr-picker-item:hover {
background: var(--tint-soft);
}
.addr-picker-item-icon {
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--accent-soft);
border: 1px solid var(--accent-soft-2);
color: var(--accent-bright);
font-size: 14px;
}
.addr-picker-item-info {
min-width: 0;
}
.addr-picker-item-info strong {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.addr-picker-item-info span {
display: block;
font-size: 11px;
color: var(--text-dark-muted);
margin-top: 2px;
word-break: break-all;
}
.addr-picker-item-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-dim);
letter-spacing: 0.04em;
white-space: nowrap;
}
.addr-picker-divider {
display: flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-dark-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 4px 0;
}
.addr-picker-divider::before,
.addr-picker-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-dark);
}
/* Selected destination card (после выбора из dropdown) */
.addr-picker-selected {
display: grid;
grid-template-columns: 36px 1fr 32px;
gap: 14px;
align-items: center;
padding: 12px 14px;
background: var(--accent-soft);
border: 1px solid var(--accent-soft-2);
border-radius: 10px;
}
.addr-picker-selected-icon {
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--accent);
color: white;
font-size: 16px;
font-weight: 700;
}
.addr-picker-selected-info {
min-width: 0;
}
.addr-picker-selected-info strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.005em;
margin-bottom: 2px;
}
.addr-picker-selected-info span {
display: block;
font-size: 11.5px;
color: var(--text-dark-muted);
word-break: break-all;
margin-bottom: 2px;
}
.addr-picker-selected-info small {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-dark-dim);
letter-spacing: 0.04em;
}
.addr-picker-clear {
width: 32px; height: 32px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid var(--border-dark);
color: var(--text-dark-muted);
font-size: 18px;
cursor: pointer;
transition: all 0.15s;
}
.addr-picker-clear:hover {
background: rgba(255, 71, 87, 0.10);
border-color: rgba(255, 71, 87, 0.32);
color: var(--negative);
}
/* Inline error в slide-over (insufficient, KYC limit, ниже минимума) */
.inline-error {
padding: 10px 14px;
background: rgba(255, 71, 87, 0.10);
border: 1px solid rgba(255, 71, 87, 0.28);
border-radius: 9px;
color: var(--negative);
font-size: 12.5px;
line-height: 1.5;
}
/* Слот для inline-error: контейнер всегда в DOM (для live-update через
refreshStep1Display). Скрывается через display:none когда содержимого нет,
чтобы не оставлять лишний gap в flex-стопке. */
.so-inline-error-slot:empty { display: none; }
/* Balance-hint под полем "отдаёте" в Sell/Swap — показывает текущий баланс
крипты и кнопку "Всё" для авто-заполнения. */
.balance-hint {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 6px 14px 0;
font-size: 12.5px;
color: var(--text-dark-muted);
flex-shrink: 0;
}
/* В withdraw-флоу подсказка живёт внутри .field — выравниваем без бокового
padding (поле уже имеет свои отступы) и поджимаем сверху. */
.field > .balance-hint {
padding: 6px 0 0;
}
.balance-hint-text strong {
color: var(--text-dark);
font-weight: 600;
}
.balance-hint-max {
background: transparent;
border: 1px solid var(--border-dark-strong);
color: var(--accent-bright);
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 999px;
cursor: pointer;
line-height: 1.4;
transition: background 0.12s, border-color 0.12s;
}
.balance-hint-max:hover {
background: var(--accent-soft);
border-color: var(--accent-soft-2);
}
.balance-hint-max:focus-visible {
outline: 2px solid var(--accent-bright);
outline-offset: 2px;
}
/* Welcome-empty на дашборде */
.welcome-empty {
padding: 36px 28px;
text-align: center;
}
.welcome-empty h3 {
font-size: 17px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.015em;
margin-bottom: 8px;
}
.welcome-empty p {
color: var(--text-dark-muted);
font-size: 13.5px;
line-height: 1.55;
max-width: 540px;
margin: 0 auto 20px;
}
.welcome-presets {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================================
/wallets — расширенная сетка
============================================================ */
.wallets-section + .wallets-section {
margin-top: 28px;
}
.wallets-section-head {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-dark);
}
.wallets-section-title {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--text-dark);
}
.wallets-section-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--text-dark-dim);
}
.wallets-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.wallet-list-card {
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 12px;
padding: 18px 20px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.wallet-list-card:hover {
border-color: var(--border-dark-strong);
background: var(--surface-dark-2);
}
.wallet-list-card-head {
display: grid;
grid-template-columns: 44px 1fr auto auto;
gap: 14px;
align-items: center;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-dark);
}
.pin-btn {
width: 36px; height: 36px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid var(--border-dark);
color: var(--text-dark-faint);
font-size: 18px;
line-height: 1;
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
}
.pin-btn:hover:not(.disabled) {
background: var(--tint-default);
border-color: var(--border-dark-strong);
color: var(--warning);
}
.pin-btn.active {
background: rgba(255, 170, 0, 0.10);
border-color: rgba(255, 170, 0, 0.30);
color: var(--warning);
}
.pin-btn.active:hover { background: rgba(255, 170, 0, 0.18); }
.pin-btn.disabled,
.pin-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
/* Поиск на /wallets */
.wallets-search-wrap {
position: relative;
flex: 1;
min-width: 220px;
}
.wallets-search {
width: 100%;
padding: 10px 14px 10px 38px;
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 8px;
font-size: 13px;
color: var(--text-dark);
font-family: inherit;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 12px 50%;
background-size: 14px 14px;
outline: none;
transition: border-color 0.15s;
}
.wallets-search::placeholder { color: var(--text-dark-dim); }
.wallets-search:focus { border-color: var(--accent); }
.wallet-list-card-head h4 {
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.01em;
}
.wallet-list-card-head small {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-dim);
letter-spacing: 0.04em;
margin-top: 2px;
}
.wallet-list-card-balance {
text-align: right;
}
.wallet-list-card-balance-amount {
font-size: 17px;
font-weight: 600;
color: var(--text-dark);
font-feature-settings: "tnum";
letter-spacing: -0.015em;
}
.wallet-list-card-balance-eq {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-muted);
margin-top: 2px;
}
.wallet-list-card-rate {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-dim);
margin-top: 6px;
letter-spacing: 0.04em;
}
.wallet-list-card-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.wallet-list-card-actions .btn {
padding: 7px 12px;
font-size: 12px;
font-weight: 600;
}
.wallet-list-card-history {
display: flex;
flex-direction: column;
gap: 0;
}
.wallet-list-history-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--border-dark);
font-family: 'JetBrains Mono', monospace;
font-size: 11.5px;
color: var(--text-dark-muted);
}
.wallet-list-history-row:last-child { border-bottom: none; }
.wallet-list-history-row .ev-amount.in { color: var(--positive); }
.wallet-list-history-row .ev-amount { color: var(--text-dark); }
.wallet-list-card-empty-cta {
margin-top: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-dim);
letter-spacing: 0.04em;
}
/* ============================================================
/wallets/:currency — детали кошелька
============================================================ */
.wallet-detail-header {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 18px;
align-items: center;
margin-bottom: 24px;
}
.wallet-detail-icon {
width: 64px; height: 64px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
font-weight: 700;
color: white;
box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.wallet-detail-title h2 {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
}
.wallet-detail-title small {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-muted);
letter-spacing: 0.04em;
margin-top: 2px;
}
.wallet-detail-balance {
text-align: right;
}
.wallet-detail-balance-amount {
font-size: 28px;
font-weight: 600;
letter-spacing: -0.02em;
font-feature-settings: "tnum";
}
.wallet-detail-balance-eq {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--text-dark-muted);
margin-top: 2px;
}
.wallet-detail-rate {
margin-bottom: 24px;
padding: 14px 22px;
background: linear-gradient(135deg, rgba(0, 102, 255, 0.08), rgba(0, 102, 255, 0.02));
border: 1px solid rgba(0, 102, 255, 0.22);
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.wallet-detail-rate-headline {
font-family: 'JetBrains Mono', monospace;
font-size: 15px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.005em;
font-feature-settings: "tnum";
}
.wallet-detail-rate-source {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-muted);
letter-spacing: 0.06em;
}
.wallet-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 18px;
margin-bottom: 24px;
}
/* В min нет блока «Движения за период» — actions занимают всю ширину. */
.wallet-detail-grid-min {
grid-template-columns: 1fr;
}
.wallet-chart,
.wallet-flow {
position: relative;
padding: 22px;
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 12px;
min-height: 280px;
}
.wallet-chart-header,
.wallet-flow-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.wallet-flow-body {
display: flex;
flex-direction: column;
}
.wallet-flow-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 12px 0;
font-size: 14px;
}
.wallet-flow-row + .wallet-flow-row {
border-top: 1px solid var(--border-dark);
}
.wallet-flow-label {
color: var(--text-dark-muted);
}
.wallet-flow-value {
font-family: 'JetBrains Mono', monospace;
font-variant-numeric: tabular-nums;
color: var(--text-dark);
}
.wallet-flow-value.in { color: var(--success, #00D9A0); }
.wallet-flow-value.out { color: var(--danger, #FF4757); }
.wallet-flow-net {
margin-top: 4px;
font-weight: 600;
}
.wallet-flow-net .wallet-flow-label { color: var(--text-dark); }
.wallet-flow-count .wallet-flow-label,
.wallet-flow-count .wallet-flow-value {
font-size: 12px;
color: var(--text-dark-dim);
}
.range-tabs {
display: flex;
gap: 2px;
padding: 2px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 7px;
}
.range-tab {
padding: 6px 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-muted);
border-radius: 5px;
cursor: pointer;
letter-spacing: 0.04em;
}
.range-tab.active {
background: var(--surface-dark-2);
color: var(--text-dark);
}
.chart-svg {
width: 100%;
height: 200px;
}
.wallet-actions {
display: flex;
flex-direction: column;
gap: 10px;
padding: 22px;
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 12px;
}
.wallet-actions h4 {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 6px;
}
.deposit-address-card {
margin-top: 12px;
padding: 14px 16px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 9px;
}
.deposit-address-card-head {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-dark-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 8px;
}
.deposit-address-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--text-dark);
}
.deposit-address-row + .deposit-address-row {
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid var(--border-dark);
}
.copy-btn {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--accent-bright);
padding: 4px 8px;
border: 1px solid var(--accent-soft-2);
border-radius: 5px;
background: var(--accent-soft);
letter-spacing: 0.04em;
cursor: pointer;
transition: all 0.15s;
}
.copy-btn:hover { background: rgba(0, 102, 255, 0.18); }
/* ============================================================
/history
============================================================ */
.history-filters {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 22px;
padding: 14px;
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 10px;
}
.history-chips {
display: flex;
gap: 4px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 7px;
padding: 2px;
}
.history-chip {
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
color: var(--text-dark-muted);
border-radius: 5px;
cursor: pointer;
letter-spacing: -0.005em;
white-space: nowrap;
}
.history-chip.active {
background: var(--surface-dark);
color: var(--text-dark);
font-weight: 600;
}
.history-select {
padding: 7px 12px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 7px;
font-size: 12px;
color: var(--text-dark);
font-family: inherit;
cursor: pointer;
}
.history-search {
flex: 1;
min-width: 160px;
padding: 8px 12px 8px 32px;
background: var(--bg-dark-2);
border: 1px solid var(--border-dark);
border-radius: 7px;
font-size: 12px;
color: var(--text-dark);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 10px 50%;
background-size: 14px 14px;
}
.history-search:focus { border-color: var(--accent); }
.history-table {
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 12px;
overflow: hidden;
}
.history-row {
display: grid;
grid-template-columns: 130px 36px 1fr 1fr 110px 130px;
gap: 16px;
padding: 14px 18px;
align-items: center;
border-bottom: 1px solid var(--border-dark);
cursor: pointer;
transition: background 0.12s;
}
.h-id-kebab {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end;
}
.h-kebab {
width: 28px; height: 28px;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid transparent;
color: var(--text-dark-muted);
font-size: 16px;
cursor: pointer;
transition: all 0.15s;
}
.h-kebab:hover {
background: var(--tint-default);
border-color: var(--border-dark);
color: var(--text-dark);
}
/* Простое контекст-меню для kebab */
.row-menu {
position: absolute;
background: var(--surface-dark);
border: 1px solid var(--border-dark-strong);
border-radius: 9px;
box-shadow: 0 16px 40px var(--shadow-color-strong);
z-index: 60;
min-width: 200px;
overflow: hidden;
animation: dropdown-fade-in 0.12s ease;
}
.row-menu-item {
display: block;
width: 100%;
padding: 10px 14px;
text-align: left;
background: transparent;
border: none;
color: var(--text-dark);
font-size: 13px;
cursor: pointer;
transition: background 0.12s;
}
.row-menu-item:hover {
background: var(--tint-default);
}
.row-menu-item + .row-menu-item {
border-top: 1px solid var(--border-dark);
}
.history-row:last-child { border-bottom: none; }
.history-row:hover { background: var(--tint-soft); }
.history-row.head {
background: var(--bg-dark-2);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-dark-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: default;
padding: 12px 18px;
}
.history-row.head:hover { background: var(--bg-dark-2); }
.h-date {
font-family: 'JetBrains Mono', monospace;
font-size: 11.5px;
color: var(--text-dark-muted);
letter-spacing: 0.04em;
}
.h-icon {
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px;
font-weight: 700;
background: var(--surface-dark-2);
border: 1px solid var(--border-dark);
}
.h-icon.in { color: var(--positive); border-color: var(--positive-soft-2); background: var(--positive-soft); }
.h-icon.swap { color: var(--accent-bright); border-color: var(--accent-soft-2); background: var(--accent-soft); }
.h-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.005em;
}
.h-pair {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-dim);
margin-top: 2px;
letter-spacing: 0.04em;
}
.h-amount {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 600;
color: var(--text-dark);
font-feature-settings: "tnum";
text-align: right;
}
.h-amount.in { color: var(--positive); }
.h-amount-cur {
font-size: 10px;
color: var(--text-dark-dim);
margin-top: 2px;
text-align: right;
letter-spacing: 0.04em;
}
.h-status {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.04em;
}
.h-id {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-faint);
text-align: right;
letter-spacing: 0.04em;
}
.history-empty {
padding: 60px 24px;
text-align: center;
}
.history-empty h3 {
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 8px;
}
.history-empty p {
color: var(--text-dark-muted);
font-size: 13px;
margin-bottom: 16px;
}
.history-loadmore {
text-align: center;
padding: 14px;
border-top: 1px solid var(--border-dark);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-muted);
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.12s, color 0.15s;
}
.history-loadmore:hover {
background: var(--tint-soft);
color: var(--text-dark);
}
/* ============================================================
/operation/:id — receipt-as-page
============================================================ */
.receipt-page {
max-width: 720px;
}
.receipt-status {
display: flex;
align-items: center;
gap: 14px;
padding: 24px 26px;
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 12px;
margin-bottom: 18px;
}
.receipt-status.completed { border-color: rgba(0, 217, 160, 0.22); }
.receipt-status.in_progress { border-color: rgba(0, 102, 255, 0.28); }
.receipt-status.failed { border-color: rgba(255, 71, 87, 0.28); }
.receipt-status-icon {
width: 56px; height: 56px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 26px;
font-weight: 700;
color: white;
flex-shrink: 0;
}
.receipt-status-icon.completed { background: var(--positive); }
.receipt-status-icon.in_progress { background: var(--accent); }
.receipt-status-icon.failed { background: var(--negative); }
.receipt-status-info h2 {
font-size: 22px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.02em;
}
.receipt-status-info small {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 11.5px;
color: var(--text-dark-muted);
letter-spacing: 0.04em;
margin-top: 4px;
}
.receipt-rate {
padding: 18px 22px;
background: linear-gradient(135deg, rgba(0, 102, 255, 0.08), rgba(0, 102, 255, 0.02));
border: 1px solid rgba(0, 102, 255, 0.22);
border-radius: 11px;
margin-bottom: 18px;
}
.receipt-rate-headline {
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.receipt-rate-source {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-muted);
letter-spacing: 0.04em;
}
.receipt-section {
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: 11px;
padding: 18px 22px;
margin-bottom: 14px;
}
.receipt-section-title {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-dark);
}
.receipt-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 8px 0;
font-size: 13px;
align-items: center;
}
.receipt-row + .receipt-row { border-top: 1px solid var(--border-dark); }
.receipt-row-label {
color: var(--text-dark-muted);
}
.receipt-row-value {
font-family: 'JetBrains Mono', monospace;
font-weight: 600;
color: var(--text-dark);
font-feature-settings: "tnum";
text-align: right;
}
.receipt-row.total .receipt-row-value {
color: var(--accent-bright);
font-size: 16px;
}
.receipt-row.total {
margin-top: 8px;
padding-top: 12px;
border-top: 1px solid var(--border-dark-strong) !important;
}
/* Промежуточный итог — сумма после очередной комиссии, перед курсом и т.п. */
.receipt-row-subtotal {
font-style: italic;
}
.receipt-row-subtotal .receipt-row-label {
color: var(--text-dark);
font-weight: 500;
}
.receipt-row-subtotal .receipt-row-value {
color: var(--text-dark);
}
/* Строка курса — выделяется акцентом */
.receipt-row-rate .receipt-row-label {
color: var(--text-dark);
font-weight: 500;
}
.receipt-row-rate .receipt-row-value {
color: var(--accent-bright);
}
/* Строки комиссий — приглушённые, со знаком минус */
.receipt-row-fee .receipt-row-label,
.receipt-row-fee .receipt-row-value {
color: var(--text-dark-muted);
}
.receipt-collapse-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--accent-bright);
letter-spacing: 0.04em;
cursor: pointer;
padding: 8px 0;
}
.receipt-collapse-content {
margin-top: 10px;
padding-top: 12px;
border-top: 1px solid var(--border-dark);
}
.receipt-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--border-dark);
}
/* ============================================================
MOBILE & TABLET ADAPTATION
------------------------------------------------------------
Breakpoints:
• Mobile ≤ 767 px — drawer-nav + bottom-tab + scroll-strip actions
• Tablet 768-1023 — icon-rail sidebar + 2-row top-bar (компактнее)
• Desktop ≥ 1024 — base styles (без overrides)
============================================================ */
:root {
--bp-mobile-max: 767px;
--bp-tablet-min: 768px;
--bp-tablet-max: 1023px;
--bp-desktop-min: 1024px;
--bottom-tab-h: 60px;
--top-bar-mobile-h: 56px;
--active-ops-bar-h: 44px;
}
/* body-scroll lock — для open drawer / bottom-sheet / mobile overlays */
body.no-scroll { overflow: hidden; }
/* Mobile-only элементы скрыты по умолчанию (display задаётся в media-query) */
.drawer-overlay,
.bottom-tab-nav,
.more-sheet-overlay,
.more-sheet,
.active-ops-bar,
.top-bar-hamburger,
.top-bar-mobile-logo,
.top-bar-search-mobile-btn,
.search-panel-mobile-head,
.notif-panel-mobile-close,
.wallet-list-card-swipe-action,
.wallet-card-swipe-action,
.qr-scan-btn { display: none; }
/* ============================================================
TABLET (768 – 1023): принудительно icon-rail sidebar
+ чуть компактнее top-bar и main padding
============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
.tablet-only { display: revert !important; }
/* Sidebar — принудительный icon-rail (повторяет .sidebar-collapsed) */
.app { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
.sidebar { padding: 14px 8px; }
.sidebar-logo-text,
.sidebar-link-label,
.sidebar-section,
.sidebar-status-text { display: none; }
.sidebar-head {
flex-direction: column;
gap: 8px;
align-items: center;
}
.sidebar-logo { justify-content: center; padding: 4px 0; }
.sidebar-collapse-btn { display: none; }
.sidebar-link {
justify-content: center;
padding: 9px 0;
}
.sidebar-footer {
justify-content: center;
padding: 10px 0 4px;
}
/* tooltip над свёрнутыми пунктами nav и статусом */
.sidebar-link[data-tip],
.sidebar-footer[data-tip] { position: relative; }
.sidebar-link[data-tip]:hover::after,
.sidebar-footer[data-tip]:hover::after {
content: attr(data-tip);
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
background: var(--surface-dark-3);
border: 1px solid var(--border-dark-strong);
color: var(--text-dark);
padding: 5px 10px;
border-radius: 6px;
font-size: 12px;
white-space: nowrap;
z-index: 100;
pointer-events: none;
}
/* Top-bar — компактнее */
.top-bar-row { padding: 0 24px; }
.tbi-balance-label { display: none; }
.tbi-balance-value { font-size: 13px; }
.tbs-input-wrap { max-width: 360px; }
.tbn-text { max-width: 140px; }
/* Main padding */
.main-inner { padding: 28px 24px 60px; }
}
/* ============================================================
ACTION-BAR — компактификация на узком viewport (768–1279)
Скрываем hotkey-bage, сжимаем padding/icon. На 1280+ влезает целиком.
============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
.top-bar-row-actions .qa-btn {
padding: 9px 10px;
gap: 8px;
font-size: 12.5px;
}
.top-bar-row-actions .qa-btn .qa-icon {
width: 24px; height: 24px;
font-size: 11px;
}
/* Hotkey-индикатор не релевантен при touch / узком окне */
.top-bar-row-actions .qa-btn .qa-hotkey { display: none; }
/* Label — overflow с ellipsis на самый крайний случай */
.top-bar-row-actions .qa-btn .qa-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Active-ops pill — компактнее, не съедает половину bar'а */
.action-pill { max-width: 200px; }
.action-pill-text { max-width: 140px; }
/* Templates pill counter компактнее */
.templates-pill { padding: 7px 12px; font-size: 12px; }
}
/* ============================================================
MOBILE (≤ 767): drawer + bottom-tab + scroll-strip actions
============================================================ */
@media (max-width: 767px) {
/* .mobile-only / .desktop-only — НЕ используем как helper для display,
потому что revert ломает специфичность для классов с display: none.
Каждый mobile-элемент получает явный display ниже в этом блоке. */
.desktop-only { display: none !important; }
/* Backstop против горизонтального скролла */
html, body { overflow-x: hidden; max-width: 100vw; }
/* ---------- App layout ---------- */
.app { grid-template-columns: 1fr; min-width: 0; }
.app.sidebar-collapsed { grid-template-columns: 1fr; }
.main { width: 100%; min-width: 0; align-items: stretch; }
.main-inner { max-width: 100%; }
/* ---------- Sidebar → off-canvas drawer ---------- */
.sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
height: 100vh;
width: 280px;
z-index: 90;
padding: 14px 12px;
transform: translateX(-100%);
transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
border-right: 1px solid var(--border-dark);
overflow-y: auto;
}
.app.drawer-open .sidebar {
transform: translateX(0);
box-shadow: 16px 0 48px var(--shadow-color-mid);
}
/* В drawer виде — всегда полноразмерный, не collapsed */
.app.sidebar-collapsed .sidebar { padding: 14px 12px; }
.app.sidebar-collapsed .sidebar-logo-text,
.app.sidebar-collapsed .sidebar-link-label,
.app.sidebar-collapsed .sidebar-section,
.app.sidebar-collapsed .sidebar-status-text {
display: revert;
}
.app.sidebar-collapsed .sidebar-link {
justify-content: flex-start;
padding: 8px 10px;
}
.app.sidebar-collapsed .sidebar-head {
flex-direction: row;
align-items: center;
}
.app.sidebar-collapsed .sidebar-footer {
justify-content: flex-start;
padding: 10px 6px 4px;
}
/* Скрыть collapse-btn в drawer (на десктопе она нужна, на мобиле — нет) */
.sidebar-collapse-btn { display: none; }
/* Drawer overlay */
.drawer-overlay {
display: block;
position: fixed; inset: 0;
background: var(--overlay-backdrop);
z-index: 85;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
}
.app.drawer-open .drawer-overlay {
opacity: 1;
pointer-events: auto;
}
/* ---------- Top-bar — однострочный (Row 1) + scroll-strip (Row 2) ---------- */
.top-bar-row {
max-width: 100%;
padding: 0 12px;
gap: 8px;
}
.top-bar-row-info {
border-bottom: none;
min-height: var(--top-bar-mobile-h);
gap: 8px;
}
/* Hamburger — на мобиле скрыт: вся навигация через bottom-tab + «Ещё» sheet.
Drawer-механизм (DOM + JS handlers) сохранён для возможного возврата. */
.top-bar-hamburger { display: none; }
/* Mobile logo (заменяет identity на мобильнике) */
.top-bar-mobile-logo {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
text-decoration: none;
color: var(--text-dark);
}
.top-bar-mobile-logo-mark {
width: 26px; height: 26px;
border-radius: 7px;
background: var(--accent);
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 700;
color: white;
flex-shrink: 0;
}
.top-bar-mobile-logo strong {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Identity (баланс) — скрыт на мобильнике, есть на дашборде */
.top-bar-identity { display: none; }
/* Search — превращается в icon-only button */
.top-bar-search {
flex: 0 0 auto;
margin-left: auto;
}
.tbs-input-wrap { display: none; }
.top-bar-search-mobile-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: 8px;
color: var(--text-dark);
font-size: 16px;
}
.top-bar-search-mobile-btn:hover { background: var(--tint-default); }
/* Notifications — иконка с indicator dot вместо pill */
.top-bar-notifications { max-width: none; }
.tbn-pill {
width: 40px; height: 40px;
padding: 0;
border-radius: 8px;
justify-content: center;
background: transparent;
border-color: transparent;
position: relative;
}
.tbn-pill:hover { background: var(--tint-default); border-color: transparent; }
.tbn-pill.priority-system,
.tbn-pill.priority-message,
.tbn-pill.priority-active,
.tbn-pill.priority-activity {
background: transparent;
border-color: transparent;
}
.tbn-text, .tbn-counter, .tbn-icon-only { display: none; }
.tbn-pill::after {
content: '🔔';
font-size: 16px;
color: var(--text-dark);
}
.tbn-pill .tbn-dot {
position: absolute;
top: 8px; right: 8px;
width: 8px; height: 8px;
box-shadow: 0 0 0 2px var(--bg-dark);
}
.tbn-pill.empty .tbn-dot { display: none; }
/* ---------- Top-bar Row 2 — на мобиле скрыта целиком ----------
5 actions переехали в FAB (bottom-bar).
Templates-pill → секция «★ Шаблоны» внутри FAB-sheet (renderQuickActionsSheet).
Active-ops pill → sticky-полоса .active-ops-bar над bottom-tab. */
.top-bar-actions { display: none; }
.top-bar-row-actions { display: none; }
/* ---------- Main content padding + bottom-tab clearance ---------- */
.main-inner {
padding: 18px 14px calc(var(--bottom-tab-h) + 28px);
}
/* ---------- Bottom-tab nav (mobile) ---------- */
.bottom-tab-nav {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap;
align-items: center;
position: fixed;
bottom: 0; left: 0; right: 0;
height: var(--bottom-tab-h);
background: var(--surface-translucent-strong);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--border-dark);
z-index: 70;
padding: 6px 12px;
padding-bottom: max(6px, env(safe-area-inset-bottom));
gap: 4px;
}
.bottom-tab { min-width: 0; }
/* FAB — primary action (Купить / Продать / Обмен / Пополнить / Вывести) */
.bottom-fab {
flex: 0 0 auto;
width: 52px;
height: 52px;
margin-left: auto;
border-radius: 50%;
background: var(--accent);
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0, 102, 255, 0.45), 0 1px 3px var(--shadow-color-soft);
transition: transform 0.15s ease, box-shadow 0.15s ease;
/* Приподнят над bar чуть выше — как ClickUp */
margin-top: -16px;
}
.bottom-fab:hover,
.bottom-fab:active {
background: var(--accent-2);
box-shadow: 0 8px 24px rgba(0, 102, 255, 0.55), 0 2px 4px var(--shadow-color-soft);
transform: translateY(-2px);
}
.bottom-fab-icon {
font-size: 28px;
line-height: 1;
font-weight: 300;
margin-top: -2px;
}
.bottom-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: var(--text-dark-muted);
font-size: 10.5px;
font-weight: 500;
border: none;
background: none;
padding: 4px 8px;
cursor: pointer;
transition: color 0.15s;
text-decoration: none;
position: relative;
}
.bottom-tab.active { color: var(--accent-bright); }
.bottom-tab-icon {
font-size: 18px;
line-height: 1;
font-family: 'JetBrains Mono', monospace;
}
.bottom-tab-label {
letter-spacing: -0.005em;
}
.bottom-tab-badge {
position: absolute;
top: 4px; right: 22%;
min-width: 14px; height: 14px;
padding: 0 4px;
border-radius: 100px;
background: var(--negative);
color: white;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* ---------- Slide-over → bottom-sheet ---------- */
.slide-over {
top: auto;
right: 0; left: 0; bottom: 0;
transform: none;
width: 100%;
max-width: none;
height: calc(100vh - 32px);
max-height: calc(100vh - 32px);
border: none;
border-top: 1px solid var(--border-dark-strong);
border-radius: 16px 16px 0 0;
box-shadow: 0 -16px 48px var(--shadow-color-strong);
animation: slide-up 0.22s cubic-bezier(0.18, 0.7, 0.22, 1);
}
@keyframes slide-up {
from { transform: translateY(20%); opacity: 0; }
to { transform: none; opacity: 1; }
}
/* drag-handle — визуальный индикатор у топа sheet'а */
.slide-over::before {
content: '';
position: absolute;
top: 8px; left: 50%;
transform: translateX(-50%);
width: 40px; height: 4px;
border-radius: 100px;
background: var(--border-dark-strong);
z-index: 1;
}
.so-header { padding-top: 22px; }
.so-body { padding: 18px 18px; }
.so-footer { padding: 16px 18px max(16px, env(safe-area-inset-bottom)); }
/* ---------- Search-panel → full-screen overlay ---------- */
.search-panel {
position: fixed !important;
top: 0 !important; left: 0 !important;
right: 0 !important; bottom: 0 !important;
width: 100% !important;
max-width: none !important;
max-height: 100vh !important;
height: 100vh !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
z-index: 100;
}
/* Mobile-header внутри search overlay */
.search-panel-mobile-head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid var(--border-dark);
background: var(--bg-dark-2);
}
.search-panel-mobile-head .tbs-input {
flex: 1;
height: 40px;
background: var(--surface-dark-2);
}
.search-panel-mobile-close {
width: 40px; height: 40px;
border-radius: 8px;
color: var(--text-dark-muted);
font-size: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.search-panel-list { flex: 1; }
.search-panel-footer { display: none; } /* hotkey-подсказки не нужны на touch */
/* ---------- Notifications panel → full-screen overlay ---------- */
.notif-panel {
position: fixed !important;
top: 0 !important; left: 0 !important;
right: 0 !important; bottom: 0 !important;
width: 100% !important;
max-height: 100vh !important;
height: 100vh !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
z-index: 100;
}
.notif-panel-header {
padding: 14px 16px;
}
.notif-panel-mobile-close {
display: inline-flex !important;
width: 36px; height: 36px;
border-radius: 8px;
color: var(--text-dark-muted);
font-size: 20px;
align-items: center;
justify-content: center;
margin-right: -8px;
}
/* System-status (ALL SYSTEMS OPERATIONAL) переехал из drawer в notif-panel header */
.notif-panel-system-status { display: inline-flex; }
/* Mark-read на мобиле уберём — лишний шум, есть свайп/тап на конкретные строки */
.notif-panel-mark-read { display: none; }
/* ---------- "Ещё" sheet (открывается из bottom-tab) ---------- */
.more-sheet-overlay {
display: block;
position: fixed; inset: 0;
background: var(--overlay-backdrop);
z-index: 95;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
}
.more-sheet-overlay.open {
opacity: 1;
pointer-events: auto;
}
.more-sheet {
display: block;
position: fixed;
left: 0; right: 0; bottom: 0;
background: var(--surface-dark);
border-top: 1px solid var(--border-dark-strong);
border-radius: 16px 16px 0 0;
z-index: 96;
transform: translateY(100%);
transition: transform 0.22s cubic-bezier(0.18, 0.7, 0.22, 1);
padding: 22px 18px max(22px, env(safe-area-inset-bottom));
box-shadow: 0 -16px 48px var(--shadow-color-strong);
pointer-events: none;
}
.more-sheet.open {
transform: translateY(0);
pointer-events: auto;
}
.more-sheet::before {
content: '';
position: absolute;
top: 8px; left: 50%;
transform: translateX(-50%);
width: 40px; height: 4px;
border-radius: 100px;
background: var(--border-dark-strong);
}
.more-sheet-title {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-dark-faint);
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 4px 14px;
}
/* Close × для всех bottom-sheets — в правом верхнем углу.
Drag-handle уже есть как ::before; кнопка — реальный affordance закрытия. */
.more-sheet-close-btn {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface-dark-2);
border: 1px solid var(--border-dark);
color: var(--text-dark-muted);
font-size: 22px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.more-sheet-close-btn:hover,
.more-sheet-close-btn:active {
background: var(--surface-dark);
color: var(--text-dark);
border-color: var(--border-dark-strong);
}
/* Empty-state в bottom-sheet (например, templates-sheet когда шаблонов нет) */
.more-sheet-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 16px 16px;
gap: 8px;
}
.more-sheet-empty-glyph {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent-bright);
font-size: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
}
.more-sheet-empty strong {
font-size: 15px;
font-weight: 600;
}
.more-sheet-empty small {
font-size: 12px;
color: var(--text-dark-muted);
line-height: 1.4;
max-width: 280px;
}
.more-sheet-link {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 8px;
border-bottom: 1px solid var(--border-dark);
color: var(--text-dark);
font-size: 14.5px;
font-weight: 500;
text-decoration: none;
background: none;
border-left: none;
border-right: none;
border-top: none;
width: 100%;
text-align: left;
cursor: pointer;
}
.more-sheet-link:last-child { border-bottom: none; }
.more-sheet-link.active { color: var(--accent-bright); }
.more-sheet-link-icon {
width: 28px; height: 28px;
border-radius: 7px;
background: var(--surface-dark-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
color: var(--text-dark);
flex-shrink: 0;
}
.more-sheet-link.active .more-sheet-link-icon {
background: var(--accent-soft);
color: var(--accent-bright);
}
/* ----- Quick-actions sheet (FAB) — крупные строки с подсказкой ----- */
.qa-sheet-link {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 8px;
border: none;
background: none;
border-bottom: 1px solid var(--border-dark);
color: var(--text-dark);
text-align: left;
cursor: pointer;
}
.qa-sheet-link:last-child { border-bottom: none; }
.qa-sheet-link:hover,
.qa-sheet-link:active { background: var(--tint-soft); }
.qa-sheet-link-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: var(--accent-soft);
border: 1px solid var(--accent-soft-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 17px;
color: var(--accent-bright);
font-weight: 700;
flex-shrink: 0;
}
.qa-sheet-link-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.qa-sheet-link-text strong {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
}
.qa-sheet-link-text small {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-muted);
letter-spacing: 0.04em;
}
/* ---------- Hotkey overlay/hint — скрыть на touch ---------- */
.hotkey-overlay,
.hotkey-hint { display: none !important; }
.tbs-hotkey { display: none; }
/* ---------- Page-specific adjustments ---------- */
/* Page header — компактнее */
.page-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-bottom: 20px;
}
.page-greeting { font-size: 20px; }
.page-header-actions { width: 100%; flex-wrap: wrap; }
/* KYC banner — переход к стопке (текст под иконкой/действием) */
.kyc-banner {
grid-template-columns: 36px 1fr auto;
grid-template-rows: auto auto;
row-gap: 10px;
}
.kyc-banner-text { grid-column: 1 / 3; }
.kyc-banner-close { grid-row: 1; grid-column: 3; }
.kyc-banner > .btn {
grid-row: 2;
grid-column: 1 / -1;
justify-self: stretch;
}
/* Quick-actions внутри страницы (не в top-bar) — сетка 2×3 */
.quick-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
/* Wallets-grid (на dashboard) и /wallets — single column */
.wallets-grid { grid-template-columns: 1fr; }
.wallets-list { grid-template-columns: 1fr; }
.wallet-list-card { padding: 16px; }
.wallet-list-card-head {
grid-template-columns: 36px 1fr auto;
gap: 10px;
}
.wallet-list-card-head .pin-btn { display: none; } /* компактность */
.wallet-list-card-actions .btn {
flex: 1 1 calc(33.33% - 6px);
justify-content: center;
text-align: center;
}
/* /wallets/:cur — single column, баланс-блок в стопку */
.wallet-detail-header {
grid-template-columns: 56px 1fr;
grid-template-rows: auto auto;
gap: 12px;
}
.wallet-detail-icon { width: 56px; height: 56px; font-size: 24px; }
.wallet-detail-balance {
grid-column: 1 / -1;
text-align: left;
}
.wallet-detail-balance-amount { font-size: 24px; }
.wallet-detail-rate {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 12px 16px;
}
.wallet-detail-grid { grid-template-columns: 1fr; }
.wallet-chart,
.wallet-flow { padding: 16px; min-height: 0; }
/* /history — карточный layout вместо колоночной таблицы */
.history-filters { padding: 10px; gap: 8px; }
.history-chips {
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
}
.history-chips::-webkit-scrollbar { display: none; }
.history-chip { flex: 0 0 auto; }
.history-search { min-width: 0; }
.history-row {
grid-template-columns: 36px 1fr auto;
grid-template-rows: auto auto;
gap: 10px 12px;
padding: 14px 14px;
}
.history-row .h-icon { grid-row: 1 / 3; }
.history-row .h-id-kebab,
.history-row .h-status,
.history-row .h-id { display: none; }
.history-row .h-date {
grid-column: 2;
grid-row: 2;
font-size: 11px;
}
.history-row .h-title-wrap {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
.history-row .h-amount {
grid-column: 3;
grid-row: 1 / 3;
align-self: center;
}
.history-row.head { display: none; } /* колонок-header нет смысла на карточном виде */
/* /operation/:id — receipt компактнее */
.receipt-page { max-width: 100%; }
.receipt-status {
padding: 18px 18px;
gap: 12px;
}
.receipt-status-icon { width: 48px; height: 48px; font-size: 22px; }
.receipt-status-info h2 { font-size: 18px; }
.receipt-rate { padding: 14px 16px; }
.receipt-section { padding: 14px 16px; }
/* /profile, /security, /limits — single column */
.account-grid { grid-template-columns: 1fr; }
.security-row {
grid-template-columns: 1fr;
gap: 10px;
}
.security-row-actions { justify-self: flex-start; flex-wrap: wrap; }
.kyc-stepper {
grid-template-columns: 1fr;
gap: 14px;
}
.kyc-step { flex-direction: row; text-align: left; gap: 14px; }
.kyc-step + .kyc-step::before {
left: 16px;
top: -14px;
width: 1px;
height: 14px;
}
.kyc-step-label strong { font-size: 13.5px; }
/* Settings tiles */
.settings-tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Destinations / templates */
.destinations-list,
.templates-page-list { grid-template-columns: 1fr; }
/* Toast — снизу по всей ширине */
.toast-container {
bottom: calc(var(--bottom-tab-h) + 12px);
right: 12px;
left: 12px;
}
.toast { max-width: 100%; }
/* Pair-pick / cur-pick — на мобильном узче */
.cur-pick-grid,
.pair-pick-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Sticky action-bar поверх scrollable content — но не overlay над нижним tab */
.top-bar { z-index: 50; }
/* ---------- Active-ops sticky bar (mobile-only) ----------
Появляется над bottom-tab при наличии in_progress операции(й).
Тап → /operation/:id. Скрывается на самой странице операции. */
.active-ops-bar {
display: flex;
position: fixed;
left: 0; right: 0;
bottom: var(--bottom-tab-h);
height: var(--active-ops-bar-h);
background: var(--surface-translucent-strong);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--border-dark);
z-index: 65;
padding: 0 14px;
align-items: center;
gap: 10px;
cursor: pointer;
color: var(--text-dark);
font-size: 13px;
font-weight: 500;
}
.active-ops-bar:hover,
.active-ops-bar:active { background: var(--tint-soft); }
.active-ops-bar[hidden] { display: none; }
.active-ops-bar-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent-bright);
animation: ao-pulse 1.4s ease-in-out infinite;
flex-shrink: 0;
}
.active-ops-bar.is-failed .active-ops-bar-dot {
background: var(--negative);
animation: none;
}
.active-ops-bar-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.active-ops-bar-text strong { font-weight: 600; }
.active-ops-bar-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dark-muted);
margin-left: 6px;
letter-spacing: 0.02em;
}
.active-ops-bar-counter {
flex-shrink: 0;
background: var(--accent-soft);
color: var(--accent-bright);
border-radius: 100px;
padding: 2px 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
}
.active-ops-bar-arrow {
flex-shrink: 0;
color: var(--text-dark-muted);
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
}
@keyframes ao-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.2); }
}
/* Когда active-ops-bar виден — main-inner получает доп. bottom-padding,
чтобы контент не залезал под полосу. */
.app:has(.active-ops-bar:not([hidden])) .main-inner {
padding-bottom: calc(var(--bottom-tab-h) + var(--active-ops-bar-h) + 20px);
}
/* ---------- Quick-actions sheet — отступы между секциями + footer-link ----------
Структура (renderQuickActionsSheet): «Повторить» · «★ Шаблоны» · «Что сделать».
Каждый заголовок — .more-sheet-title; секции разделяются доп. отступом сверху
(кроме первой). */
.more-sheet-title:not(:first-child) { padding-top: 22px; }
.qa-sheet-footer-link {
display: block;
text-align: right;
padding: 12px 6px 6px;
color: var(--accent-bright);
font-size: 12.5px;
font-weight: 500;
text-decoration: none;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.02em;
border-top: 1px solid var(--border-dark);
margin-top: 4px;
}
.qa-sheet-footer-link:hover,
.qa-sheet-footer-link:active { color: var(--accent); }
/* ---------- Bottom-tab badge — variant for in-progress operations ----------
По умолчанию badge — красный (var(--negative)) для unread. Для in_progress
операции на табе «История» используем accent-bright — это не ошибка, а статус. */
.bottom-tab-badge.bottom-tab-badge-active { background: var(--accent-bright); }
/* ---------- Wallet row swipe-actions (mobile) ----------
Свайп вправо → Пополнить (positive accent), влево → Вывести (accent-bright).
Структура: .wallet-list-card сидит в .wallet-list-card-swipe-wrap, под ним
лежат две action-подложки которые проступают при сдвиге карточки. */
.wallet-list-card-swipe-wrap {
position: relative;
overflow: hidden;
border-radius: var(--radius);
}
.wallet-list-card-swipe-wrap > .wallet-list-card {
position: relative;
z-index: 2;
transition: transform 0.22s cubic-bezier(0.18, 0.7, 0.22, 1);
touch-action: pan-y;
will-change: transform;
}
.wallet-list-card-swipe-wrap.swiping > .wallet-list-card {
transition: none;
}
.wallet-list-card-swipe-action {
position: absolute;
top: 0; bottom: 0;
width: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
color: white;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
gap: 6px;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
}
.wallet-list-card-swipe-action.left {
left: 0;
background: var(--positive);
justify-content: flex-start;
padding-left: 22px;
}
.wallet-list-card-swipe-action.right {
right: 0;
background: var(--accent);
justify-content: flex-end;
padding-right: 22px;
}
.wallet-list-card-swipe-wrap.show-left .wallet-list-card-swipe-action.left { opacity: 1; }
.wallet-list-card-swipe-wrap.show-right .wallet-list-card-swipe-action.right { opacity: 1; }
.wallet-list-card-swipe-action-icon {
font-size: 16px;
line-height: 1;
}
/* ---------- Dashboard wallet-card swipe-actions (mobile) ----------
Аналогично /wallets row, но компактнее. Лейблы зависят от типа валюты:
crypto: вправо «Купить», влево «Продать». fiat: вправо «Пополнить», влево «Вывести». */
.wallet-card-swipe-wrap {
position: relative;
overflow: hidden;
border-radius: var(--radius);
}
.wallet-card-swipe-wrap > .wallet-card {
position: relative;
z-index: 2;
transition: transform 0.22s cubic-bezier(0.18, 0.7, 0.22, 1);
touch-action: pan-y;
will-change: transform;
}
.wallet-card-swipe-wrap.swiping > .wallet-card { transition: none; }
.wallet-card-swipe-action {
position: absolute;
top: 0; bottom: 0;
width: 50%;
display: flex;
align-items: center;
z-index: 1;
color: white;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
gap: 6px;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
padding: 0 14px;
}
.wallet-card-swipe-action.left {
left: 0;
background: var(--positive);
justify-content: flex-start;
}
.wallet-card-swipe-action.right {
right: 0;
background: var(--accent);
justify-content: flex-end;
}
.wallet-card-swipe-wrap.show-left .wallet-card-swipe-action.left { opacity: 1; }
.wallet-card-swipe-wrap.show-right .wallet-card-swipe-action.right { opacity: 1; }
.wallet-card-swipe-action-icon {
font-size: 14px;
line-height: 1;
}
/* ---------- Edge-swipe glow (mobile) ----------
Тонкая полоска на правом краю — еле видна, появляется на touchstart у края. */
.edge-swipe-glow {
position: fixed;
top: 0; bottom: 0; right: 0;
width: 4px;
background: linear-gradient(to left, var(--accent-bright), transparent);
z-index: 80;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
.edge-swipe-glow.active { opacity: 0.8; }
}
/* ============================================================
DASHBOARD TOTAL BALANCE HERO — большой заметный блок с общей суммой
и privacy-toggle справа. Виден сразу при открытии /dashboard.
============================================================ */
/* Плашка общего баланса с privacy-toggle — нужна только на mobile (там
top-bar identity скрыт и баланс не виден). На десктопе общий баланс уже
есть в top-bar identity (.tbi-balance-value), плашка дублирует — скрываем.
Privacy-toggle на десктопе живёт в page-header дашборда (.dash-page-header-actions);
на мобиле — в hero, и page-header кнопку скрываем чтобы не дублировать. */
.dash-total-balance { display: none; }
@media (max-width: 767px) {
.dash-page-header-actions { display: none; }
}
.dash-total-balance-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
flex: 1;
}
.dash-total-balance-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-dark-faint);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.dash-total-balance-amount {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
font-feature-settings: 'tnum' on;
line-height: 1.1;
color: var(--text-dark);
}
@media (max-width: 767px) {
.dash-total-balance {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: var(--surface-dark);
border: 1px solid var(--border-dark);
border-radius: var(--radius);
padding: 16px 18px;
margin-bottom: 16px;
}
.dash-total-balance-amount { font-size: 24px; }
}
/* ============================================================
PRIVACY MODE — скрыть балансы (применяется на body, viewport-agnostic)
============================================================ */
body.balances-hidden .tbi-balance-value,
body.balances-hidden .dash-total-balance-amount,
body.balances-hidden .wallet-card-amount,
body.balances-hidden .wallet-card-equiv,
body.balances-hidden .wallet-list-card-balance-amount,
body.balances-hidden .wallet-list-card-balance-eq,
body.balances-hidden .wallet-detail-balance-amount,
body.balances-hidden .wallet-detail-balance-eq,
body.balances-hidden .recent-op-amount-value,
body.balances-hidden .h-amount,
body.balances-hidden .ev-amount,
body.balances-hidden .privacy-balance {
filter: blur(8px);
user-select: none;
pointer-events: none;
}
.tbi-balance-value,
.dash-total-balance-amount,
.wallet-card-amount,
.wallet-card-equiv,
.wallet-list-card-balance-amount,
.wallet-list-card-balance-eq,
.wallet-detail-balance-amount,
.wallet-detail-balance-eq,
.recent-op-amount-value,
.h-amount,
.ev-amount,
.privacy-balance {
transition: filter 0.18s ease;
}
.privacy-toggle-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 100px;
background: var(--surface-dark-2);
border: 1px solid var(--border-dark);
color: var(--text-dark-muted);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.privacy-toggle-btn:hover {
background: var(--surface-dark);
color: var(--text-dark);
border-color: var(--border-dark-strong);
}
body.balances-hidden .privacy-toggle-btn {
background: var(--accent-soft);
border-color: var(--accent-soft-2);
color: var(--accent-bright);
}
.privacy-toggle-btn-icon {
font-size: 13px;
line-height: 1;
}
.privacy-toggle-btn-icon::before { content: '◉'; }
body.balances-hidden .privacy-toggle-btn-icon::before { content: '◌'; }
body:not(.balances-hidden) .privacy-toggle-btn-show { display: none; }
body.balances-hidden .privacy-toggle-btn-hide { display: none; }
/* ============================================================
QR-SCANNER (mock) — overlay для сканирования адреса в Withdraw crypto
============================================================ */
.qr-scan-btn {
/* display: задаётся только в @media (max-width: 767px) ниже — на десктопе
остаётся унаследованный display: none из default-hidden списка. */
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid var(--border-dark);
background: var(--surface-dark-2);
color: var(--text-dark);
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.qr-scan-btn:hover {
background: var(--surface-dark);
border-color: var(--accent-soft-2);
color: var(--accent-bright);
}
.qr-scan-input-wrap {
position: relative;
}
/* padding-right под кнопку 📷 нужен только на mobile (где кнопка показывается);
на десктопе .qr-scan-btn скрыт, лишний padding не нужен. */
@media (max-width: 767px) {
.qr-scan-btn { display: inline-flex; }
.qr-scan-input-wrap > .field-input {
padding-right: 52px;
}
}
.qr-scan-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
}
.qr-scan-overlay[hidden] { display: none; }
.qr-scan-overlay-head {
position: absolute;
top: 0; left: 0; right: 0;
padding: 14px 16px;
padding-top: max(14px, env(safe-area-inset-top));
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.qr-scan-overlay-close {
width: 36px; height: 36px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
border: none;
color: white;
font-size: 18px;
cursor: pointer;
}
.qr-scan-viewfinder {
width: min(78vw, 280px);
aspect-ratio: 1;
position: relative;
border: 2px solid rgba(255, 255, 255, 0.15);
border-radius: 18px;
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.qr-scan-viewfinder::before,
.qr-scan-viewfinder::after,
.qr-scan-corner {
content: '';
position: absolute;
width: 28px; height: 28px;
border-color: var(--accent-bright);
border-style: solid;
}
.qr-scan-viewfinder::before {
top: -2px; left: -2px;
border-width: 3px 0 0 3px;
border-radius: 18px 0 0 0;
}
.qr-scan-viewfinder::after {
top: -2px; right: -2px;
border-width: 3px 3px 0 0;
border-radius: 0 18px 0 0;
}
.qr-scan-corner.bl,
.qr-scan-corner.br { display: block; }
.qr-scan-corner.bl {
bottom: -2px; left: -2px;
border-width: 0 0 3px 3px;
border-radius: 0 0 0 18px;
}
.qr-scan-corner.br {
bottom: -2px; right: -2px;
border-width: 0 3px 3px 0;
border-radius: 0 0 18px 0;
}
.qr-scan-line {
position: absolute;
left: 8%;
right: 8%;
top: 12%;
height: 2px;
background: linear-gradient(to right, transparent, var(--accent-bright), transparent);
box-shadow: 0 0 12px var(--accent-bright);
animation: qr-scan-sweep 1.6s ease-in-out infinite;
}
@keyframes qr-scan-sweep {
0% { top: 12%; opacity: 0.3; }
50% { top: 80%; opacity: 1; }
100% { top: 12%; opacity: 0.3; }
}
.qr-scan-hint {
margin-top: 28px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
text-align: center;
padding: 0 24px;
}
.qr-scan-result {
margin-top: 18px;
padding: 8px 16px;
border-radius: 100px;
background: var(--accent-soft);
color: var(--accent-bright);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.04em;
opacity: 0;
transition: opacity 0.2s ease;
}
.qr-scan-result.visible { opacity: 1; }
/* ==========================================================================
TOP-BAR — MIN-режим (index-min.html)
Одна строка: общий баланс слева + 3 actions справа.
На mobile: баланс — hero на /wallets, actions — через FAB. В top-bar min
на мобиле остаются только hamburger + лого.
========================================================================== */
.top-bar-min {
display: flex;
align-items: center;
gap: 24px;
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
min-height: 64px;
}
/* Левый слот — общий баланс RUB + privacy-toggle рядом */
.top-bar-balance {
flex: 1;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 12px;
}
.top-bar-balance-btn {
background: none;
border: 0;
padding: 6px 10px;
margin-left: -10px;
border-radius: 8px;
cursor: default;
color: var(--text-dark);
white-space: nowrap;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
/* Privacy-toggle внутри top-bar-balance компактнее обычного */
.top-bar-balance .privacy-toggle-btn {
flex-shrink: 0;
}
.top-bar-balance-value {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
}
/* Правый слот — 3 actions, фикс ширина по контенту */
.top-bar-min .top-bar-actions {
flex: 0 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
/* qa-btn внутри top-bar-min — стилизуем напрямую (без зависимости от
.top-bar-row-actions, которой в min нет) */
.top-bar-min .top-bar-actions .qa-btn {
padding: 10px 14px;
font-size: 13px;
border-radius: 9px;
position: relative;
display: flex;
align-items: center;
gap: 10px;
}
.top-bar-min .top-bar-actions .qa-btn .qa-icon {
width: 26px; height: 26px;
font-size: 12px;
border-radius: 7px;
}
.top-bar-min .top-bar-actions .qa-btn .qa-label {
flex: 1;
text-align: left;
}
/* Tablet — компактный паддинг */
@media (max-width: 1023px) and (min-width: 768px) {
.top-bar-min {
padding: 0 24px;
}
}
/* Mobile: balance скрываем (он hero на /wallets), actions тоже скрываем
(доступ через FAB). Селектор специфичнее существующего .top-bar-actions
{ display: none } — нужно явно перебить наше же grid'овое правило. */
@media (max-width: 767px) {
.top-bar-min {
padding: 0 16px;
min-height: var(--top-bar-mobile-h);
gap: 12px;
}
.top-bar-min .top-bar-balance,
.top-bar-min .top-bar-actions {
display: none;
}
}
/* ==========================================================================
PROFILE → mobile-only inline блок настроек (MIN)
На desktop пользователь попадает в /settings через sidebar (4-й пункт),
на mobile «Настройки» — это блок прямо в /profile (минимум: theme toggle).
========================================================================== */
.profile-mobile-settings { display: none; }
@media (max-width: 767px) {
.profile-mobile-settings {
grid-column: 1 / -1;
display: revert;
}
}
/* ==========================================================================
/WALLETS — mobile-only hero balance (MIN-режим)
На desktop общий баланс уже в top-bar слева; на mobile там нет места,
поэтому показываем hero-блок в начале страницы /wallets.
========================================================================== */
.wallets-mobile-hero { display: none; }
@media (max-width: 767px) {
.wallets-mobile-hero {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 20px 16px 12px;
margin-bottom: 4px;
}
.wallets-mobile-hero-text {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.wallets-mobile-hero-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.1em;
color: var(--text-dark-faint);
text-transform: uppercase;
}
.wallets-mobile-hero-amount {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-dark);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
/* Privacy-toggle справа в hero */
.wallets-mobile-hero .privacy-toggle-btn {
flex-shrink: 0;
align-self: flex-end;
}
}