/* ────────────────────────────────────────────────────────────── Design tokens — палитра rencapbank.ru, имена переменных сохранены для обратной совместимости (см. rencap-theme.css) ────────────────────────────────────────────────────────────── */ :root { /* brand — фирменный розово-малиновый (rencap accent #e20177) */ --rcb-red: #e20177; /* primary brand color */ --rcb-red-700: #b80162; /* darker, для hover */ --rcb-red-50: #fce5f0; /* светлый тинт */ --rcb-orange: #e20177; /* alias — primary */ --rcb-orange-2: #ed5da6; /* lighter accent */ --rcb-orange-700: #b80162; --rcb-orange-50: #fce5f0; --rcb-wedge: #e20177; /* акцент в "клинья" логотипа */ --rcb-ink: #0f1632; /* deep navy (rencap citi-ink-blue) */ --rcb-ink-2: #1a2350; --rcb-gold: #F4B942; /* warning-amber (для mid-states, не brand) */ --rcb-gold-50: #FFF6E1; /* neutrals */ --bg: #F3F4F6; --surface: #FFFFFF; --surface-2: #FAFAFB; --line: #E6E8EE; --line-2: #EEF0F4; --text: #0E1320; --text-2: #5B6478; --text-3: #6B7280; /* WCAG AA-совместимый серый (контраст ≥ 4.7:1 на белом) */ /* semantic */ --ok: #14864B; --ok-50: #E6F4EC; --warn: #C97A00; --warn-50: #FFF3DD; --bad: #B82A2A; --bad-50: #FBEAEA; --info: #1F5FBF; --info-50: #E6EEFA; /* shape */ --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; /* elevation */ --shadow-1: 0 8px 28px rgba(22,24,29,.07); --shadow-2: 0 18px 48px rgba(22,24,29,.12); /* ── Brand-aware производные ─────────────────────────────────── Все они вычисляются от --rcb-red / --rcb-red-700 текущей темы через color-mix, поэтому автоматически меняются при смене темы (АТБ → оранжевые тени/тинты, БИС → синие и т.д.). Используются вместо жёстких rgba(226,1,119,N) и повторяющихся 3-стоповых градиентов. Тени (для focus-ring / hover-elevation на бренд-элементах): --rcb-shadow-soft ≈ 12% — лёгкий focus-ring --rcb-shadow ≈ 25% — стандартная тень-акцент --rcb-shadow-hover ≈ 55% — сильная тень на hover Тинты (полупрозрачная подложка под выбранными элементами): --rcb-tint-04 / 06 / 08 / 12 — фон ~4/6/8/12% бренда Градиент-шаблон для крупных «hero» поверхностей: --rcb-gradient-3 — 3-stop от светлого тинта к тёмному бренду; используется для кнопок, «mini-card.red», аватаров банка и т.п. */ --rcb-shadow-soft: color-mix(in srgb, var(--rcb-red) 12%, transparent); --rcb-shadow: color-mix(in srgb, var(--rcb-red) 25%, transparent); --rcb-shadow-hover: color-mix(in srgb, var(--rcb-red) 55%, transparent); --rcb-tint-04: color-mix(in srgb, var(--rcb-red) 4%, transparent); --rcb-tint-06: color-mix(in srgb, var(--rcb-red) 6%, transparent); --rcb-tint-08: color-mix(in srgb, var(--rcb-red) 8%, transparent); --rcb-tint-12: color-mix(in srgb, var(--rcb-red) 12%, transparent); --rcb-gradient-3: linear-gradient(135deg, color-mix(in srgb, var(--rcb-red) 75%, #fff) 0%, var(--rcb-red) 55%, var(--rcb-red-700) 100%); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace; } /* ────────────────────────────────────────────────────────────── ТЕМЫ ИНТЕРФЕЙСА — переключаются через ────────────────────────────────────────────────────────────── */ /* ── Светлая нейтральная схема (без розового бренда) ─────────── */ html[data-theme="light"] { --rcb-red: #2563EB; --rcb-red-700: #1D4ED8; --rcb-red-50: #E0EBFD; --rcb-orange: #2563EB; --rcb-orange-2: #60A5FA; --rcb-orange-700: #1D4ED8; --rcb-orange-50: #E0EBFD; --rcb-wedge: #2563EB; --rcb-ink: #0F1320; --rcb-ink-2: #1F2940; --bg: #F8FAFC; --surface: #FFFFFF; --surface-2: #F1F5F9; --line: #E2E8F0; --line-2: #EEF2F6; --text: #0F172A; --text-2: #475569; --text-3: #64748B; } /* ── Тёмная схема (бренд-розовый сохранён как акцент) ────────── */ html[data-theme="dark"] { --rcb-red: #FF3E96; --rcb-red-700: #E20177; --rcb-red-50: rgba(255, 62, 150, .14); --rcb-orange: #FF3E96; --rcb-orange-2: #FF85B8; --rcb-orange-700: #E20177; --rcb-orange-50: rgba(255, 62, 150, .14); --rcb-wedge: #FF3E96; --rcb-ink: #0B0E1A; --rcb-ink-2: #161A2E; --bg: #0F1320; --surface: #1A1F33; --surface-2: #232842; --line: #2F3654; --line-2: #3A4060; --text: #E5E7EB; --text-2: #B0B4C2; --text-3: #8B91A2; --ok: #2EBE71; --ok-50: rgba(46, 190, 113, .12); --warn: #F0B438; --warn-50: rgba(240, 180, 56, .12); --bad: #F47878; --bad-50: rgba(244, 120, 120, .12); --info: #6BA3F5; --info-50: rgba(107, 163, 245, .12); --shadow-1: 0 8px 28px rgba(0, 0, 0, .35); --shadow-2: 0 18px 48px rgba(0, 0, 0, .55); } html[data-theme="dark"] body { color-scheme: dark; } /* Светлые градиенты-шапки → тёмная адаптация */ html[data-theme="dark"] .pn-section-head, html[data-theme="dark"] .pay-details-head, html[data-theme="dark"] .ab-head, html[data-theme="dark"] .fx-conv-head, html[data-theme="dark"] .pm-head, html[data-theme="dark"] .nav-search-input-wrap, html[data-theme="dark"] .pay-settings-head { background: linear-gradient(135deg, rgba(255, 62, 150, .14) 0%, rgba(255, 62, 150, .06) 100%) !important; border-color: rgba(255, 62, 150, .28) !important; } /* Диалог «Настройки раздела» использует общие токены темы (surface / text / rcb-red / line), поэтому отдельная dark-адаптация не нужна — палитра перекрашивается автоматически вместе с выбранной темой оформления. */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--surface); color: var(--text); border-color: var(--line); } html[data-theme="dark"] .pn-input, html[data-theme="dark"] .pn-readonly, html[data-theme="dark"] .filter-select, html[data-theme="dark"] .nav-search-field, html[data-theme="dark"] .fx-conv-row { background: var(--surface); color: var(--text); border-color: var(--line); } /* ── Схема БИС / Qbis — корпоративный синий ──────────────────── */ html[data-theme="bis"] { --rcb-red: #1276C5; /* qbis-blue primary */ --rcb-red-700: #0B5E9E; --rcb-red-50: #E4F1FB; --rcb-orange: #1276C5; --rcb-orange-2: #4DA5DF; --rcb-orange-700: #0B5E9E; --rcb-orange-50: #E4F1FB; --rcb-wedge: #1276C5; --rcb-ink: #00355C; /* deep navy-blue */ --rcb-ink-2: #002E50; --rcb-gold: #F0A500; --rcb-gold-50: #FFF4D6; --bg: #F4F6FA; --surface: #FFFFFF; --surface-2: #F8FAFC; --line: #DFE5EE; --line-2: #EDF1F6; --text: #102A43; --text-2: #486581; --text-3: #627D98; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; } /* ── Схема Банка АТБ — оранжевый + navy (из dbo_atb_deck1) ───── */ html[data-theme="atb"] { --rcb-red: #F96500; /* atb-orange */ --rcb-red-700: #C75200; --rcb-red-50: #FFF3EB; --rcb-orange: #F96500; --rcb-orange-2: #FFA15C; --rcb-orange-700: #C75200; --rcb-orange-50: #FFF3EB; --rcb-wedge: #F96500; --rcb-ink: #0E1B3D; /* atb-ink navy */ --rcb-ink-2: #1A2752; --rcb-gold: #F4B942; --rcb-gold-50: #FFF6E1; --bg: #F3F4F6; --surface: #FFFFFF; --surface-2: #FAFAFB; --line: #E6E8EE; --line-2: #EEF0F4; --text: #0E1320; --text-2: #5B6478; --text-3: #6B7280; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: hidden; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; } /* Глобально окрашиваем стандартные нативные чекбоксы/радио в фирменный цвет активной темы. Это касается «плоских» переключателей в формах, уведомлениях, anti-fraud правилах и т.п., у которых нет своего CSS. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--rcb-red); } .num { font-variant-numeric: tabular-nums; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } button { font: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } /* Keyboard accessibility */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--rcb-red); outline-offset: 2px; border-radius: var(--r-sm); } .sidebar :focus-visible { outline-color: var(--rcb-gold); } input:focus-visible { outline-offset: 0; } /* ────────────────────────────────────────────────────────────── Layout shell — sidebar + topbar + main grid ────────────────────────────────────────────────────────────── */ .app { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "topbar" "main"; min-height: 100vh; } /* ── Sidebar ─────────────────────────────────────────────────── */ .sidebar { grid-area: sidebar; /* В вертикальной раскладке сайдбар играет роль меню — поэтому фон тоже подхватывает --menu-bg темы (если задан). */ background: var(--menu-bg, var(--surface)); color: var(--rcb-ink); padding: 18px 10px 14px; /* По умолчанию скрыт — режим горизонтального меню (топбар). */ display: none; flex-direction: column; gap: 2px; /* Fixed on desktop guarantees full-height regardless of page scroll */ position: fixed; top: 0; left: 0; width: 248px; height: 100vh; height: 100dvh; overflow-y: auto; z-index: 20; border-right: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: #E0E3EA transparent; } /* ── Вертикальная компоновка (data-layout="vertical") ──────────── */ html[data-layout="vertical"] .sidebar { display: flex; } html[data-layout="vertical"] .topbar-nav, html[data-layout="vertical"] .topbar-sub { display: none; } html[data-layout="vertical"] .main { margin-left: 248px; } html[data-layout="vertical"] .topbar { padding-left: 0; } html[data-layout="vertical"] .topbar-inner { padding-left: 28px; } /* Бренд в шапке топбара дублирует логотип в сайдбаре — прячем его */ html[data-layout="vertical"] .topbar-brand, html[data-layout="vertical"] .topbar-date-global { display: none; } /* Мобильное меню в вертикальной раскладке не нужно (есть постоянный сайдбар) */ @media (max-width: 1023px) { html[data-layout="vertical"] .sidebar { display: none; } html[data-layout="vertical"] .main { margin-left: 0; } html[data-layout="vertical"] .topbar-nav { display: block; } html[data-layout="vertical"] .topbar-brand, html[data-layout="vertical"] .topbar-date-global { display: flex; } } .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: #E0E3EA; border-radius: 999px; } .sidebar::-webkit-scrollbar-thumb:hover { background: #CBD0DB; } .brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 16px; border-bottom: 1px solid #E6E8EE; margin-bottom: 12px; } .brand-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--rcb-red); display: grid; place-items: center; color: #fff; font-weight: 800; letter-spacing: -.5px; font-size: 13px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); } .brand-logo { display: inline-flex; align-items: center; flex: 0 0 auto; } .brand-logo img { height: 30px; width: auto; display: block; } .brand-text { line-height: 1.15; } .brand-text b { color: var(--rcb-ink); font-size: 14px; letter-spacing: .1px; display: block; } .brand-text small { color: #8C8576; font-size: 9.5px; text-transform: uppercase; letter-spacing: .9px; font-weight: 600; line-height: 1.2; display: inline-block; margin-top: 3px; } .nav { display: flex; flex-direction: column; gap: 1px; } .nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: #9A9382; padding: 14px 12px 6px; font-weight: 600; } .nav-label:first-child { padding-top: 4px; } .nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: #2A3247; font-size: 13.5px; line-height: 1.15; margin-bottom: 1px; position: relative; transition: background .12s ease, color .12s ease; } .nav a:hover { background: var(--rcb-tint-06); color: var(--rcb-ink); } .nav a.active { background: #fce5f0; color: var(--rcb-ink); font-weight: 600; } .nav a.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; background: var(--rcb-orange); border-radius: 0 3px 3px 0; } .nav a .ico { width: 18px; height: 18px; flex: 0 0 18px; color: #5B6478; } .nav a.active .ico { color: var(--rcb-orange-700); } .nav a:hover .ico { color: var(--rcb-orange-700); } .nav a .badge { margin-left: auto; font-size: 11px; padding: 1px 8px; background: var(--rcb-orange); color: #fff; border-radius: 999px; font-weight: 700; min-width: 22px; text-align: center; line-height: 1.5; } .nav a .badge.muted { background: #f0f5f7; color: #3d566f; font-weight: 600; } .sidebar-foot { margin-top: auto; padding: 14px 10px 4px; border-top: 1px solid #E6E8EE; font-size: 12px; color: #8C8576; display: flex; flex-direction: column; gap: 10px; } .support-card { background: #fff; border: 1px solid #E6E8EE; border-radius: var(--r-md); padding: 12px 14px; color: #2A3247; box-shadow: 0 1px 0 rgba(14,19,32,.03); } .support-card b { color: var(--rcb-ink); display: block; font-size: 13px; margin-bottom: 4px; } .support-card .phone { color: var(--rcb-orange-700); font-weight: 700; } /* ── Topbar — three-row navigation ──────────────────────────── */ .topbar { grid-area: topbar; /* --menu-bg задаётся в темах, где у меню должен быть свой фон (АТБ: тёплый кремовый под цвет логотипа). По умолчанию — обычная поверхность темы. */ background: var(--menu-bg, var(--surface)); position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 0 var(--line), 0 4px 20px -8px rgba(14,19,32,.09); } /* Shared inner wrapper — same bounds as .main */ .topbar-inner { width: 82%; max-width: 1480px; margin: 0 auto; display: flex; align-items: center; height: 100%; gap: 0; } /* Row 1: Brand + user controls */ .topbar-global { height: 56px; border-bottom: 1px solid var(--line-2); } .topbar-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .topbar-brand img { height: 40px; width: auto; display: block; max-width: 220px; object-fit: contain; } .topbar-end { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; } /* Row 2: Main section navigation */ .topbar-nav { height: 44px; border-bottom: 1px solid var(--line-2); } .topbar-date { margin-left: auto; flex-shrink: 0; font-size: 12.5px; color: var(--text-2); white-space: nowrap; padding-left: 16px; } /* Вариант для верхней (глобальной) строки — рядом с брендом и переключателем компании */ .topbar-date-global { margin-left: auto; margin-right: 16px; padding-left: 0; font-size: 12px; color: var(--text-3); } .top-nav { display: flex; align-items: stretch; height: 100%; overflow-x: auto; scrollbar-width: none; } .top-nav::-webkit-scrollbar { display: none; } .top-nav-item { display: inline-flex; align-items: center; gap: 5px; padding: 0 14px; height: 100%; font-size: 13.5px; color: var(--text-2); font-weight: 500; white-space: nowrap; position: relative; transition: color .12s, background .12s; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; } .top-nav-item:first-child { padding-left: 0; } .top-nav-item:hover { color: var(--text); } .top-nav-item.active { color: var(--rcb-ink); font-weight: 600; border-bottom-color: var(--rcb-orange); } .top-nav-drop { position: relative; display: inline-flex; align-items: stretch; height: 100%; } .top-nav-dropdown { position: fixed; /* fixed, чтобы не клипить overflow:auto родителя */ top: 0; left: 0; /* реальную позицию выставляет JS */ min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 16px 40px -8px rgba(14,19,32,.18), 0 2px 8px rgba(14,19,32,.06); padding: 6px; opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.97); transform-origin: top left; transition: opacity .15s ease, transform .15s ease; z-index: 1100; } .top-nav-drop.open .top-nav-dropdown { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .top-nav-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: var(--text); transition: background .1s; } .top-nav-dropdown a:hover { background: var(--surface-2); } .top-nav-dropdown a svg { color: var(--text-3); flex-shrink: 0; } /* Row 3: Context sub-nav */ .topbar-sub { background: #F7F8FA; border-bottom: 1px solid var(--line-2); } .sub-nav { display: flex; align-items: stretch; height: 38px; overflow-x: auto; scrollbar-width: none; } .sub-nav::-webkit-scrollbar { display: none; } .sub-nav-item { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 100%; font-size: 13px; color: var(--text-2); white-space: nowrap; position: relative; transition: color .12s; flex-shrink: 0; border-bottom: 2px solid transparent; } .sub-nav-item:first-child { padding-left: 0; } .sub-nav-item:hover { color: var(--text); } .sub-nav-item.active { color: var(--rcb-ink); font-weight: 600; border-bottom-color: var(--rcb-orange); } .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--rcb-orange); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 999px; } .company-switcher { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; min-width: 220px; transition: border-color .12s ease, background .12s ease; } .company-switcher:hover { border-color: #CBD0DB; background: var(--surface-2); } .company-switcher-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; width: min(320px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .14s ease, transform .14s ease; } .company-switcher-pop[hidden] { display: none; } .company-switcher-pop.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .csp-head { padding: 8px 10px 6px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0; } .csp-list { display: grid; gap: 4px; } .csp-item { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; } .csp-item:hover, .csp-item.is-active { background: var(--surface-2); } .csp-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(226, 1, 119, .1); color: var(--rcb-orange); font-size: 12px; font-weight: 700; } .csp-info { min-width: 0; } .csp-info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .csp-info small { display: block; color: var(--text-3); font-size: 11.5px; } .csp-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); } .csp-foot a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; color: var(--text); font-size: 13px; } .csp-foot a:hover { background: var(--surface-2); color: var(--rcb-orange); } .company-avatar { width: 32px; height: 32px; border-radius: 10px; /* Используем бренд-токены темы, чтобы аватар компании окрашивался в фирменный цвет: оранжевый на АТБ, розовый на RenCap и т.д. */ background: linear-gradient(135deg, color-mix(in srgb, var(--rcb-red) 80%, #fff) 0%, var(--rcb-red-700) 100%); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; box-shadow: 0 2px 8px -3px color-mix(in srgb, var(--rcb-red) 55%, transparent); } /* Кнопка экстренной блокировки (SOS) — окрашивается в фирменный цвет активной темы вместо «универсального» красного, чтобы быть единым визуальным акцентом интерфейса. */ .topbar-sos-btn { background: var(--rcb-red); color: #fff; border-color: transparent; } .topbar-sos-btn:hover { background: var(--rcb-red-700); } .company-info { line-height: 1.15; flex: 1; min-width: 0; } .company-info b { font-size: 13.5px; } .company-info small { color: var(--text-3); font-size: 11.5px; display: block; } .chev { color: var(--text-3); font-size: 11px; } /* ── Dropdown переключения компаний ─────────────────────────────── */ .company-switcher-wrap { position: relative; } .company-switcher-pop { position: absolute; top: calc(100% + 6px); right: 0; min-width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 12px 36px -8px rgba(14,19,32,.18), 0 2px 6px rgba(14,19,32,.06); z-index: 1000; overflow: hidden; } .company-switcher-pop[hidden] { display: none; } .company-switcher-pop .csp-head { padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); } .company-switcher-pop .csp-head small { text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; color: var(--text-3); font-weight: 600; } .company-switcher-pop .csp-list { max-height: 320px; overflow-y: auto; padding: 4px; } .csp-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; background: transparent; border: 0; border-radius: 8px; cursor: pointer; text-align: left; transition: background .1s ease; } .csp-item:hover { background: var(--surface-2); } .csp-item.is-active { background: var(--rcb-tint-08); } .csp-item.is-active svg { color: var(--rcb-red); } .csp-avatar { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, #1a2350, #0f1632); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 11px; } .csp-info { min-width: 0; line-height: 1.2; } .csp-info b { font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .csp-info small { color: var(--text-3); font-size: 11px; } .company-switcher-pop .csp-foot { border-top: 1px solid var(--line); padding: 8px 14px; } .company-switcher-pop .csp-foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12.5px; font-weight: 500; text-decoration: none; } .company-switcher-pop .csp-foot a:hover { color: var(--rcb-red); } .search { flex: 1; max-width: 480px; position: relative; } .search input { width: 100%; height: 38px; padding: 0 46px 0 36px; border: 1px solid var(--line); border-radius: var(--r-md); font: inherit; background: var(--surface-2); color: var(--text); outline: none; transition: border-color .12s ease, background .12s ease; text-overflow: ellipsis; } .search input:focus { border-color: var(--rcb-orange); background: #fff; box-shadow: 0 0 0 3px var(--rcb-shadow-soft); } .search .search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); } .search .kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 600 12px var(--mono); border: 1px solid var(--line); border-radius: 4px; padding: 1px 7px; color: var(--text-3); background: #fff; line-height: 1.4; } .top-actions { display: flex; align-items: center; gap: 10px; } .icon-btn { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--text-2); position: relative; transition: border-color .12s ease, color .12s ease, background .12s ease; } .icon-btn:hover { border-color: #CBD0DB; color: var(--text); background: var(--surface-2); } .icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; background: var(--rcb-red); border-radius: 50%; border: 2px solid var(--surface); } .pill-btn { height: 38px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: border-color .12s ease, background .12s ease; } .pill-btn:hover { border-color: #CBD0DB; background: var(--surface-2); } .pill-btn.primary { background: var(--rcb-red); color: #fff; border-color: var(--rcb-red); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 16px -4px var(--rcb-shadow-hover); } .pill-btn.primary:hover { background: var(--rcb-red-700); border-color: var(--rcb-red-700); } /* Notifications popover */ .notif-wrap { position: relative; } .notif-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 12px 32px -8px rgba(14,19,32,.18), 0 2px 6px rgba(14,19,32,.06); opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 50; } .notif-pop.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .notif-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px; border-bottom: 1px solid var(--line-2); } .notif-head b { font-size: 14px; color: var(--rcb-ink); } .notif-head a { font-size: 12.5px; color: var(--info); } .notif-list { max-height: 380px; overflow-y: auto; } .notif-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); align-items: flex-start; color: inherit; transition: background .12s; position: relative; } .notif-item:last-child { border-bottom: 0; } .notif-item:hover { background: var(--surface-2); } .notif-item.unread::before { content: ""; position: absolute; left: 6px; top: 18px; width: 5px; height: 5px; background: var(--rcb-red); border-radius: 50%; } .notif-ico { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; } .notif-ico.bad { background: var(--bad-50); color: var(--bad); } .notif-ico.ok { background: var(--ok-50); color: var(--ok); } .notif-ico.info { background: var(--info-50); color: var(--info); } .notif-ico.warn { background: var(--warn-50); color: var(--warn); } .notif-text { min-width: 0; } .notif-text b { font-size: 13px; display: block; line-height: 1.3; color: var(--text); } .notif-text small { font-size: 11.5px; color: var(--text-3); display: block; margin-top: 2px; line-height: 1.35; } .notif-item time { font-size: 11px; color: var(--text-3); white-space: nowrap; padding-top: 2px; } .notif-foot { padding: 10px 16px; border-top: 1px solid var(--line-2); background: var(--surface-2); text-align: center; border-radius: 0 0 var(--r-lg) var(--r-lg); } .notif-foot a { color: var(--info); font-weight: 500; font-size: 13px; } .user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .user-chip:hover { border-color: #CBD0DB; } .user-avatar { position: relative; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--rcb-orange-2), var(--rcb-red-700)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; box-shadow: 0 2px 6px -2px var(--rcb-shadow-hover); overflow: hidden; flex-shrink: 0; } .user-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .user-avatar.has-photo .user-avatar-initials { display: none; } .user-info { line-height: 1.15; padding-right: 4px; } .user-info b { font-size: 12.5px; display: block; } .user-info small { font-size: 11px; color: var(--text-3); } .user-wrap { position: relative; } .user-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-width: calc(100vw - 24px); padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 16px 38px -14px rgba(14,19,32,.28), 0 4px 14px rgba(14,19,32,.08); opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 60; } .user-pop.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .user-pop-head { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 8px 10px; } .user-avatar.lg { width: 42px; height: 42px; font-size: 14px; } .user-pop-head-text b, .user-pop-text b { display: block; color: var(--text); font-size: 13px; line-height: 1.25; } .user-pop-head-text small, .user-pop-text small { display: block; color: var(--text-3); font-size: 11.5px; line-height: 1.3; margin-top: 2px; } .user-pop-section { display: flex; flex-direction: column; gap: 2px; } .user-pop-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 7px 8px; border: 0; border-radius: 9px; background: transparent; color: inherit; text-align: left; text-decoration: none; cursor: pointer; } .user-pop-item:hover { background: var(--surface-2); } .user-pop-ico { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--info-50); color: var(--info); } .user-pop-ico svg { width: 16px; height: 16px; display: block; } .user-pop-badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--rcb-red); color: #fff; font-size: 11px; font-weight: 700; } .user-pop-sep { height: 1px; margin: 7px 0; background: var(--line-2); } .user-pop-label { display: block; padding: 4px 8px 6px; color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } .user-pop-lang { padding: 2px 0; } .user-pop-item--danger .user-pop-ico { background: var(--bad-50); color: var(--bad); } .user-pop-item--danger .user-pop-text b { color: var(--bad); } /* ── Main canvas — centered 80% column ─────────────────────── */ .main { grid-area: main; padding: 32px 0 72px; display: flex; flex-direction: column; gap: 24px; width: 82%; max-width: 1480px; margin: 0 auto; } /* Split area — main column + right rail (used after the top header) */ .split-area { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; } .col-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .right-rail { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; padding-right: 4px; } .right-rail::-webkit-scrollbar { width: 6px; } .right-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 4px; } .page-head h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: -.4px; color: var(--rcb-ink); font-weight: 700; } .breadcrumbs { display: flex; gap: 6px; font-size: 12.5px; color: var(--text-3); } .breadcrumbs span { color: var(--text-2); } .breadcrumbs i { font-style: normal; } .period-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 3px; gap: 2px; } .period-switch button, .period-switch a { height: 30px; padding: 0 12px; background: transparent; border: 0; border-radius: 7px; color: var(--text-2); font-size: 12.5px; font-weight: 500; transition: background .12s ease, color .12s ease; display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; } .period-switch button:disabled { opacity: .55; cursor: not-allowed; } .period-switch button.active, .period-switch a.active { background: var(--rcb-orange); color: #fff; box-shadow: 0 2px 6px -2px var(--rcb-shadow-hover); } .period-switch button:not(.active):not(:disabled):hover, .period-switch a:not(.active):hover { background: var(--surface-2); color: var(--text); } /* Кнопка-шестерёнка рядом с переключателем периода («Главная») */ .dashboard-settings-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text-2); text-decoration: none; cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease; } .dashboard-settings-btn:hover { border-color: #CBD0DB; background: var(--surface-2); color: var(--text); } .dashboard-settings-btn:focus-visible { outline: none; border-color: var(--rcb-red); box-shadow: 0 0 0 3px var(--rcb-shadow-soft); } /* ── Card primitive ──────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; min-width: 0; } .card-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 14px; gap: 14px; } .card-head > div:first-child { min-width: 0; flex: 1; } .card-head h3 { margin: 0; font-size: 14.5px; color: var(--rcb-ink); font-weight: 600; letter-spacing: -.1px; } .card-head .head-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.3; } .card-head .head-link { font-size: 12.5px; color: var(--info); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; } .card-head .head-link:hover { color: var(--rcb-red); } .card-body { padding: 0 22px 22px; } /* ── KPI strip ───────────────────────────────────────────────── */ .kpi-strip { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 14px; } /* Компактный режим: 5 карточек в один ряд, меньше отступы и шрифты */ .kpi-strip.compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .kpi-strip.compact .kpi { padding: 12px 14px 11px; } .kpi-strip.compact .kpi-label { font-size: 10.5px; letter-spacing: .5px; margin-bottom: 4px; } .kpi-strip.compact .kpi-value { font-size: 18px; letter-spacing: -.4px; } .kpi-strip.compact .kpi.hero .kpi-value { font-size: 20px; } .kpi-strip.compact .kpi-sub { font-size: 11.5px; margin-top: 4px; } /* ── Сворачиваемая секция со слайдером-тумблером ─────────────── */ .collapsible-block { margin-top: 8px; } .collapsible-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 10px; } .collapsible-head h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .6px; } .collapsible-head .head-sub { margin-top: 2px; font-size: 11.5px; color: var(--text-3); text-transform: none; letter-spacing: 0; } .collapsible-body[hidden] { display: none; } /* Когда заголовок секции скрыт (тумблер выключен), тумблер остаётся справа. */ .collapsible-head > .toggle-switch { margin-left: auto; } /* Если у блока скрыты и заголовок, и тело — он полностью «исчезает» из flex-layout родителя (.main { gap: 24px }), чтобы не образовывать пустой полосы между предыдущей секцией и следующей карточкой. display: contents — блок не считается отдельным flex-ребёнком, gap не добавляется до и после него; видимая шапка с тумблером тоже не нужна, так как управление перенесено в шестерёнку «Настройки раздела». */ .collapsible-block.is-collapsed-compact, .collapsible-block:has(> .collapsible-head > [data-collapsible-title][hidden]) { display: contents; } .collapsible-block.is-collapsed-compact > .collapsible-head, .collapsible-block:has(> .collapsible-head > [data-collapsible-title][hidden]) > .collapsible-head { display: none; } /* iOS-style toggle switch */ .toggle-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 12px; color: var(--text-2); } .toggle-switch input { position: absolute; opacity: 0; pointer-events: none; } .toggle-switch .track { position: relative; width: 38px; height: 22px; background: var(--line); border-radius: 999px; transition: background .18s ease; } .toggle-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .18s ease; } .toggle-switch input:checked + .track { background: var(--rcb-red); } .toggle-switch input:checked + .track::after { transform: translateX(16px); } .toggle-switch:hover .track { filter: brightness(0.97); } .kpi { background: var(--surface); border-radius: var(--r-lg); padding: 20px 22px 18px; box-shadow: var(--shadow-1); position: relative; overflow: hidden; display: flex; flex-direction: column; } .kpi.hero { /* Градиент строится из бренд-токенов текущей темы (rcb-red / rcb-red-700) — поэтому карточка автоматически меняет цвет при смене темы (АТБ → оранжевая, RenCap → розовая, БИС → синяя и т.д.). */ background: linear-gradient(135deg, color-mix(in srgb, var(--rcb-red) 85%, #fff) 0%, var(--rcb-red) 55%, var(--rcb-red-700) 100%); color: #fff; border-color: transparent; box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--rcb-red) 55%, transparent), var(--shadow-1); } .kpi.hero::after { content: ""; position: absolute; top: -60px; right: -50px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 65%); pointer-events: none; } .kpi.hero::before { content: ""; position: absolute; bottom: -80px; left: -30px; width: 200px; height: 200px; background: radial-gradient(circle, color-mix(in srgb, var(--rcb-red-700) 60%, transparent), transparent 60%); pointer-events: none; } .kpi-label { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .8px; font-weight: 500; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .kpi.hero .kpi-label { color: rgba(255,255,255,.82); } .kpi-value { font-size: 24px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; white-space: nowrap; } .kpi.hero .kpi-value { color: #fff; font-size: 26px; } .kpi-value .unit { font-size: 13px; color: var(--text-3); font-weight: 500; margin-left: 3px; } .kpi.hero .kpi-value .unit { color: rgba(255,255,255,.82); font-size: 14px; } .kpi-sub { margin-top: 8px; font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 8px; } .kpi.hero .kpi-sub { color: rgba(255,255,255,.92); } .trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; } .trend.up { background: var(--ok-50); color: var(--ok); } .trend.down { background: var(--bad-50); color: var(--bad); } .trend.flat { background: #EEF0F4; color: var(--text-2); } .kpi.hero .trend.up { background: rgba(20,134,75,.2); color: #fff; } .kpi.hero .trend.down { background: rgba(184,42,42,.25); color: #fff; } .kpi .spark { margin-top: auto; padding-top: 10px; height: 40px; min-height: 30px; width: 100%; } .kpi-bars { display: flex; align-items: flex-end; gap: 4px; height: 40px; min-height: 30px; margin-top: auto; padding-top: 10px; } .kpi-bars span { flex: 1; background: var(--line); border-radius: 2px; min-height: 4px; } .kpi-bars span.now { background: var(--rcb-red); } /* ────────────────────────────────────────────────────────────── Row primitives — modular, independent cards Each row contains 1+ cards with NATURAL HEIGHT (align-items: start). Blocks can be added/removed/reordered freely without height-coupling. ────────────────────────────────────────────────────────────── */ .row, .row-1, .row-2, .row-3, .row-4, .row-2-equal, .row-2-narrow-left { display: grid; gap: 24px; align-items: start; } .row-1 { grid-template-columns: 1fr; } .row-2 { grid-template-columns: 2.2fr 1fr; } .row-3 { grid-template-columns: 1fr 1fr 1fr; } .row-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } .row-2-equal { grid-template-columns: 1fr 1fr; } .row-2-narrow-left { grid-template-columns: 1fr 2fr; } /* Cards span — allow a card to span multiple columns when needed */ .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-full { grid-column: 1 / -1; } /* Card-foot — optional pinned footer for cards (no longer requires stretch) */ .card-foot { padding: 14px 22px; border-top: 1px solid var(--line-2); background: var(--surface-2); display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--text-2); } .card-foot a { color: var(--info); font-weight: 500; } .card-foot a:hover { color: var(--rcb-red); } /* Chart card: fixed-height widget, NOT coupled to neighbours */ .chart-card .chart-wrap { padding: 0 8px 4px 6px; position: relative; } .chart-card .chart-svg { width: 100%; height: 380px; display: block; } /* ── Chart summary footer (under cash flow chart) ────────────── */ .chart-summary { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); margin: 16px -18px -18px; } .chart-summary .sum-cell { padding: 14px 16px; border-right: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 4px; } .chart-summary .sum-cell:last-child { border-right: 0; } .chart-summary .sum-label { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-3); font-weight: 500; } .chart-summary .sum-value { font-size: 15px; font-weight: 700; color: var(--rcb-ink); letter-spacing: -.2px; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chart-summary .sum-meta { font-size: 11.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; line-height: 1.25; flex-wrap: wrap; } .chart-summary .sum-meta .tag { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); } .chart-summary .sum-meta .tag.in { background: var(--ok-50); color: var(--ok); } .chart-summary .sum-meta .tag.out { background: var(--bad-50); color: var(--bad); } /* ── Cash flow chart ─────────────────────────────────────────── */ .chart-wrap { padding: 0 8px 4px 6px; position: relative; } .chart-legend { display: flex; gap: 18px; align-items: center; padding: 0 18px 12px; font-size: 12px; color: var(--text-2); } .legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; } .chart-legend b { color: var(--text); margin-left: 4px; font-weight: 600; } .chart-svg { width: 100%; height: 240px; display: block; } .chart-svg .grid-line { stroke: var(--line-2); stroke-width: 1; } .chart-svg .axis-label { fill: var(--text-3); font-size: 10.5px; font-family: var(--font); } .chart-svg .bar-in { fill: var(--ok); opacity: .85; } .chart-svg .bar-out { fill: var(--rcb-red); opacity: .85; } .chart-svg .bar-in:hover, .chart-svg .bar-out:hover { opacity: 1; } .chart-svg .balance-line { fill: none; stroke: var(--rcb-ink); stroke-width: 2; } .chart-svg .balance-area { fill: url(#balanceGrad); opacity: .35; } .chart-svg .balance-dot { fill: var(--rcb-ink); stroke: #fff; stroke-width: 2; } .chart-tip { position: absolute; background: var(--rcb-ink); color: #fff; padding: 8px 12px; border-radius: var(--r-sm); font-size: 12px; pointer-events: none; opacity: 0; transform: translate(-50%, -100%); transition: opacity .1s ease; white-space: nowrap; box-shadow: var(--shadow-2); } .chart-tip b { color: #fff; } .chart-tip .tin { color: #4CD387; } .chart-tip .tout { color: #FF8585; } /* ── FX + Quick actions ──────────────────────────────────────── */ .fx-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 18px 14px; } .fx-row { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-md); transition: background .12s; } .fx-row:hover { background: var(--surface-2); } .flag { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 11px; color: #fff; } .flag.usd { background: #2C6EBC; } .flag.eur { background: #103E83; } .flag.cny { background: #C73838; } .flag.try { background: #C0392B; } .flag.aed { background: #0E7C46; } .flag.kzt { background: #00A8A8; } .fx-pair b { font-size: 13.5px; } .fx-pair small { display: block; font-size: 11.5px; color: var(--text-3); } .fx-rate { font-weight: 600; font-size: 14px; } .fx-delta { font-size: 12px; font-weight: 600; width: 56px; text-align: right; } .fx-delta.up { color: var(--ok); } .fx-delta.down { color: var(--bad); } /* ── FX: страница «Курсы валют» — две колонки (курсы + конвертер) ── */ .fx-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 16px; margin-top: 8px; align-items: start; } .fx-card { margin-top: 0; } @media (max-width: 1099px) { .fx-grid { grid-template-columns: 1fr; } } /* Карточка конвертера */ .fx-conv { position: sticky; top: 84px; margin-top: 0; padding: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: radial-gradient(120% 90% at 100% 0%, var(--rcb-tint-06) 0%, transparent 55%), var(--surface); box-shadow: 0 18px 38px -22px rgba(14,19,32,.22); } .fx-conv-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line-2); background: linear-gradient(135deg, #FFF7FB 0%, #FFF1F7 100%); } .fx-conv-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--rcb-gradient-3); box-shadow: 0 6px 16px -6px var(--rcb-shadow-hover); } .fx-conv-title { margin: 0; font-size: 15.5px; font-weight: 700; } .fx-conv-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; } .fx-conv-body { padding: 14px 18px 16px; position: relative; } .fx-conv-label { display: block; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-3); margin: 8px 2px 6px; } .fx-conv-row { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 156px); align-items: stretch; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease; } .fx-conv-row:focus-within { border-color: var(--rcb-red); box-shadow: 0 0 0 4px var(--rcb-shadow-soft); } .fx-conv-input { border: 0; background: transparent; outline: none; padding: 12px 14px; font-size: 18px; font-weight: 700; color: var(--text); min-width: 0; } .fx-conv-sep { background: var(--line-2); } .fx-conv-select { border: 0; background: transparent; outline: none; padding: 0 32px 0 12px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; } /* Кнопка-«перевернуть» между двумя строками */ .fx-conv-swap { display: grid; place-items: center; width: 36px; height: 36px; margin: -6px auto; position: relative; z-index: 2; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--rcb-red); cursor: pointer; box-shadow: 0 4px 12px -4px rgba(14, 19, 32, .15); transition: transform .18s ease, color .12s ease, border-color .12s ease, background .12s ease; } .fx-conv-swap:hover { background: var(--rcb-red); border-color: var(--rcb-red); color: #fff; transform: rotate(180deg); } .fx-conv-swap:active { transform: rotate(180deg) scale(.96); } .fx-conv-rate { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--line-2); font-size: 13px; color: var(--text); text-align: center; } .fx-conv-rate b { font-weight: 700; } .fx-conv-foot { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; } .fx-conv-cta { justify-content: center; height: 42px; font-weight: 600; } .fx-conv-foot .muted { font-size: 11.5px; line-height: 1.4; text-align: center; } @media (max-width: 1099px) { .fx-conv { position: static; } } @media (max-width: 480px) { .fx-conv-row { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 120px); } .fx-conv-input { font-size: 16px; padding: 10px 12px; } .fx-conv-select { font-size: 12.5px; padding: 0 28px 0 10px; } } .quick-actions { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 4px 18px 16px; } /* Широкий вариант для страниц на всю ширину (например /payments) */ .quick-actions.quick-actions-wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 4px 0 4px; gap: 10px; } .qa { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color .12s, background .12s, transform .12s; text-align: left; } .qa:hover { border-color: var(--rcb-red); background: #FFFAF8; transform: translateY(-1px); } .qa-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--rcb-red-50); color: var(--rcb-red); display: grid; place-items: center; } .qa .qa-text { display: flex; flex-direction: column; gap: 2px; } .qa b { font-size: 13px; font-weight: 600; line-height: 1.2; display: block; } .qa small { font-size: 11.5px; color: var(--text-3); display: block; line-height: 1.25; } /* ── Accounts table ──────────────────────────────────────────── */ .table-wrap { padding: 0 4px 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap::-webkit-scrollbar { height: 8px; } .table-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } .table-wrap::-webkit-scrollbar-thumb:hover { background: #CBD0DB; } table.t { width: 100%; border-collapse: collapse; font-size: 13px; } table.t th, table.t td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line-2); } /* Плотная таблица — уменьшаем вертикальные отступы и шрифт. Применяется через дополнительный класс `t-dense` (например, на /accounts). */ table.t.t-dense { font-size: 12.5px; } table.t.t-dense th { font-size: 10.5px; padding: 7px 10px; } table.t.t-dense td { padding: 6px 10px; line-height: 1.3; } table.t.t-dense .acc-name { gap: 8px; min-width: 0; } table.t.t-dense .acc-flag { width: 22px; height: 22px; font-size: 11px; border-radius: 5px; } /* Чуть просторнее именно для таблицы счетов — между строк больше воздуха, чем в t-dense по умолчанию (но всё ещё компактнее обычной .t). */ table.t.t-dense.accounts-table th { padding-top: 9px; padding-bottom: 9px; } table.t.t-dense.accounts-table td { padding-top: 10px; padding-bottom: 10px; line-height: 1.35; } /* Итоговая строка `Итого` — выделена фоном и шрифтом, чтобы зрительно отличаться от обычных строк. */ table.t tfoot tr.t-total td { background: var(--surface-2); border-top: 2px solid var(--rcb-red); border-bottom: 0; padding-top: 10px; padding-bottom: 10px; font-weight: 600; color: var(--rcb-ink); } table.t tfoot tr.t-total b { font-weight: 700; } table.t tfoot tr.t-total td:last-child b { color: var(--rcb-red); font-size: 14px; font-variant-numeric: tabular-nums; } table.t tfoot tr.t-total:hover { background: transparent; } table.t th { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-3); font-weight: 500; background: var(--surface-2); } table.t tbody tr { transition: background .1s ease; } table.t tbody tr:hover { background: #FAFBFD; } table.t tbody tr.row-link { cursor: pointer; } table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } table.t .acc-name { display: flex; align-items: center; gap: 10px; min-width: 160px; } /* Accounts table — compact: hide Назначение, Поступления, Списания. Show only essential cols: Счёт · Статус · Остаток · Действия */ .accounts-table th:nth-child(2), .accounts-table td:nth-child(2), .accounts-table th:nth-child(4), .accounts-table td:nth-child(4), .accounts-table th:nth-child(5), .accounts-table td:nth-child(5) { display: none; } .acc-flag { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 10.5px; color: #fff; flex-shrink: 0; } .acc-name > div { min-width: 0; } .acc-name b { font-size: 13.5px; display: block; line-height: 1.2; white-space: nowrap; } .acc-name small { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); white-space: nowrap; } .balance-cell { font-weight: 600; white-space: nowrap; } .balance-cell small { display: block; font-size: 11.5px; color: var(--text-3); font-weight: 400; margin-top: 1px; white-space: nowrap; } .status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 999px; line-height: 1.2; } .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status.ok { background: var(--ok-50); color: var(--ok); } .status.warn { background: var(--warn-50); color: var(--warn); } .status.bad { background: var(--bad-50); color: var(--bad); } .status.info { background: var(--info-50); color: var(--info); } .status.muted { background: #EEF0F4; color: var(--text-2); } .row-actions { display: flex; gap: 6px; justify-content: flex-end; } .row-actions button { height: 28px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; font-size: 12px; color: var(--text-2); font-weight: 500; } .row-actions button:hover { border-color: var(--rcb-red); color: var(--rcb-red); } /* ── Payments queue & operations list ────────────────────────── */ .queue-list { display: flex; flex-direction: column; } .queue-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line-2); transition: background .1s; } .queue-item:last-child { border-bottom: 0; } .queue-item:hover { background: var(--surface-2); } .q-ico { width: 36px; height: 36px; border-radius: 9px; background: var(--rcb-red-50); color: var(--rcb-red); display: grid; place-items: center; } .q-ico.fx { background: var(--info-50); color: var(--info); } .q-ico.tax { background: var(--warn-50); color: var(--warn); } .q-ico.sal { background: #EEF6EE; color: var(--ok); } .q-text { min-width: 0; } .q-text b { font-size: 13.5px; display: block; line-height: 1.25; } .q-text small { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; line-height: 1.35; } .q-text small .dot::before { content: "·"; margin: 0 6px; color: var(--text-3); } .q-amount { text-align: right; } .q-amount b { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; } .q-amount small { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; } /* ── Operations table compact ────────────────────────────────── */ .ops-filter { display: flex; gap: 6px; padding: 0 18px 12px; } .ops-filter button, .ops-filter a { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; } .ops-filter button.active, .ops-filter a.active { background: var(--rcb-orange); color: #fff; border-color: var(--rcb-orange); } .ops-filter button:not(.active):hover, .ops-filter a:not(.active):hover { background: var(--surface-2); color: var(--text); } /* ── Page-level filter card (Счета, Платежи, …) ─────────────── */ .filters-card { padding: 16px 18px; } /* Variant: filter+sort встроены в карточку с таблицей */ .filters-integrated > .card-head + .filters-body-inline { border-top: 1px solid var(--line-2); } .filters-body-inline { padding: 14px 18px 12px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); } .filters-body-inline[hidden] { display: none; } .filters-head-inline { padding: 14px 18px 12px; } .filters-head-inline .filters-toggle { width: auto; height: 32px; padding: 0 12px; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-2); } .filters-head-inline .filters-toggle svg { transform: none !important; } .filters-head-inline .filters-toggle.collapsed { background: var(--surface); color: var(--text-3); } .filters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .filters-head h3 { font-size: 16px; font-weight: 700; color: var(--rcb-ink); } .filters-head .head-sub { margin-top: 2px; font-size: 12px; color: var(--text-3); } .filters-toggle { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text-2); cursor: pointer; transition: transform .15s ease, background .12s; } .filters-toggle:hover { background: var(--bg); color: var(--text); } .filters-toggle.collapsed { transform: rotate(-90deg); } .filters-body[hidden] { display: none; } .filters-grid { display: flex; flex-wrap: nowrap; gap: 12px 14px; align-items: end; } .filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 0; } .filter-field-wide { flex: 1 1 100%; } /* Поиск шире остальных — длинный плейсхолдер */ .filters-grid .filter-field:first-child { flex: 1.6 1 0; } /* Кнопки «Применить»/«Сбросить» — натуральная ширина, всегда в той же строке */ .filters-grid .filter-field.filter-actions-inline { flex: 0 0 auto; } .filter-field label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); } .filter-search { position: relative; display: flex; align-items: center; } .filter-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } .filter-search input { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 13px; transition: border-color .12s, box-shadow .12s; } .filter-search input:hover { border-color: #CBD0DB; } .filter-search input:focus { outline: none; border-color: var(--rcb-red); box-shadow: 0 0 0 3px var(--rcb-shadow-soft); } .filter-search-sm input { height: 32px; padding: 0 10px 0 30px; font-size: 12.5px; } .filter-search-sm svg { left: 10px; width: 13px; height: 13px; } .filter-select { width: 100%; height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface) url("data:image/svg+xml;utf8,") right 8px center / 12px no-repeat; color: var(--text); font-size: 12.5px; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .12s, box-shadow .12s; } textarea.filter-select { height: auto; resize: vertical; } .filter-select:hover { border-color: #CBD0DB; } .filter-select:focus { outline: none; border-color: var(--rcb-red); box-shadow: 0 0 0 3px var(--rcb-shadow-soft); } /* Multi-select dropdown (filter group) — выглядит как .filter-select */ .multi-select { position: relative; } .multi-select-trigger { width: 100%; display: flex; align-items: center; text-align: left; } .multi-select.open .multi-select-trigger { border-color: var(--rcb-red); box-shadow: 0 0 0 3px var(--rcb-shadow-soft); } .multi-select.has-selection .ms-label { color: var(--rcb-red); font-weight: 500; } .ms-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } .multi-select-panel { position: fixed; /* fixed — чтобы не клипить overflow:hidden родителя (.card) */ top: 0; left: 0; /* реальную позицию выставляет JS */ width: auto; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 32px -10px rgba(14,19,32,.18), 0 2px 8px rgba(14,19,32,.06); padding: 6px; z-index: 1100; } .multi-select-panel[hidden] { display: none; } .ms-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; transition: background .1s; } .ms-option:hover { background: var(--surface-2); } .ms-option input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--rcb-red); cursor: pointer; } .chip-group { display: flex; flex-wrap: wrap; gap: 6px; } .chip-group button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .chip-group button:hover { border-color: #CBD0DB; background: var(--surface-2); color: var(--text); } .chip-group button.active { background: var(--rcb-red); color: #fff; border-color: var(--rcb-red); box-shadow: 0 1px 4px var(--rcb-shadow); } .chip-group button.active:hover { background: var(--rcb-red-700); border-color: var(--rcb-red-700); } .filters-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); } /* Inline-вариант: кнопки в той же сетке, что и поля фильтра */ .filter-actions-inline { min-width: 0; } .filter-actions-row { display: flex; gap: 6px; align-items: stretch; justify-content: flex-end; } .filter-actions-row .pill-btn { height: 32px; padding: 0 14px; font-size: 12px; box-shadow: none; white-space: nowrap; flex: 0 0 auto; } .filter-actions-row .pill-btn.ghost { width: 32px; padding: 0; flex-shrink: 0; } .filter-actions-row #fApply { width: 32px; padding: 0; flex-shrink: 0; justify-content: center; } .filter-actions-row #fApply svg { display: block; } .pill-btn.ghost { background: transparent; color: var(--text-2); border-color: var(--line); box-shadow: none; } .pill-btn.ghost:hover { background: var(--surface-2); color: var(--text); } .filters-empty { padding: 32px 18px; text-align: center; color: var(--text-3); } .filters-empty b { display: block; margin-bottom: 4px; font-size: 14px; color: var(--text); } .filters-empty small { font-size: 12.5px; } @media (max-width: 640px) { .filters-grid { flex-wrap: wrap; gap: 12px; } .filters-grid .filter-field, .filters-grid .filter-field:first-child { flex: 1 1 100%; } .filters-actions { flex-direction: column-reverse; } .filters-actions .pill-btn { width: 100%; } } /* ── Deposits & loans ────────────────────────────────────────── */ .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 18px 16px; } .product { border-radius: var(--r-lg); padding: 20px; background: var(--surface); box-shadow: var(--shadow-1); transition: box-shadow .15s, transform .15s; } .product:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); } .product .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .product .top b { font-size: 13px; } .product .amount { font-size: 20px; font-weight: 700; letter-spacing: -.3px; } .product .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 11.5px; color: var(--text-3); margin-top: 10px; } .product .meta b { display: block; color: var(--text); font-size: 12.5px; font-weight: 600; margin-top: 1px; } .progress { margin-top: 12px; height: 6px; background: var(--line-2); border-radius: 999px; overflow: hidden; } .progress > i { display: block; height: 100%; background: var(--rcb-red); border-radius: 999px; } .product.dep .progress > i { background: var(--ok); } /* ── Cards list (dense vertical layout for narrow column) ───── */ .cards-list { display: flex; flex-direction: column; } .ccard-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-2); transition: background .12s ease; cursor: pointer; } .ccard-row:last-child { border-bottom: 0; } .ccard-row:hover { background: var(--surface-2); } /* miniature card visual (preserves brand colours) */ .mini-card { width: 44px; height: 30px; border-radius: 5px; position: relative; overflow: hidden; background: linear-gradient(135deg, #1a2350, #0f1632); box-shadow: 0 2px 6px -2px rgba(14,19,32,.35); display: flex; align-items: flex-end; padding: 3px 4px; } .mini-card.red { background: linear-gradient(135deg, var(--rcb-red), var(--rcb-red-700)); } .mini-card.gold { background: linear-gradient(135deg, #C97A00, #8C5300); } .mini-card.navy { background: linear-gradient(135deg, #1a2350, #0f1632); } .mini-card.muted{ background: repeating-linear-gradient(135deg, #EEF0F4 0 6px, #E6E8EE 6px 12px); border: 1px dashed #CBD0DB; color: var(--text-3); display: grid; place-items: center; font-weight: 700; font-size: 14px; padding: 0; } .mini-card::before { content: ""; position: absolute; top: 4px; left: 5px; width: 8px; height: 6px; background: linear-gradient(135deg, #F4D27A, #C99A2E); border-radius: 1.5px; opacity: .9; } .mini-card.muted::before { display: none; } .mini-card .mc { width: 14px; height: 9px; border-radius: 2px; margin-left: auto; background: linear-gradient(90deg, #EB001B 50%, #F79E1B 50%); opacity: .9; } .ccard-info { min-width: 0; } .ccard-info .top-line { display: flex; align-items: baseline; gap: 6px; font-size: 13px; white-space: nowrap; overflow: hidden; } .ccard-info .top-line b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .ccard-info .top-line .last4 { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); letter-spacing: .3px; flex-shrink: 0; } .ccard-info .meta-line { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; } .ccard-info .meta-line .role { background: #EEF0F4; color: var(--text-2); padding: 1px 6px; border-radius: 999px; font-weight: 500; font-size: 10.5px; flex-shrink: 0; } .ccard-info .meta-line .sep { overflow: hidden; text-overflow: ellipsis; } .ccard-info .meta-line .sep::before { content: "·"; margin: 0 5px 0 0; color: var(--text-3); } .ccard-info .lim-bar { margin-top: 7px; height: 4px; background: var(--line-2); border-radius: 999px; overflow: hidden; width: 100%; max-width: 200px; } .ccard-info .lim-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--rcb-red); transition: width .6s cubic-bezier(.2,.7,.3,1); } .ccard-info .lim-bar.low > i { background: var(--ok); } .ccard-info .lim-bar.mid > i { background: var(--rcb-gold); } .ccard-info .lim-bar.high > i { background: var(--rcb-red); } .ccard-amount { text-align: right; line-height: 1.2; } .ccard-amount .spent { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .ccard-amount .limit { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; margin-top: 2px; } .ccard-amount .pct { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--line-2); color: var(--text-2); font-variant-numeric: tabular-nums; } .ccard-amount .pct.warn { background: var(--warn-50); color: var(--warn); } .ccard-amount .pct.bad { background: var(--bad-50); color: var(--bad); } .cards-foot { padding: 12px 16px 16px; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cards-foot .pill-btn { justify-content: center; height: 34px; padding: 0 10px; font-size: 12px; white-space: nowrap; } .cards-foot .pill-btn svg { flex-shrink: 0; } /* ── Documents row ───────────────────────────────────────────── */ .docs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 4px 18px 16px; } .doc { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color .12s, background .12s; } .doc:hover { border-color: var(--rcb-red); background: #FFFAF8; } .doc-ico { width: 38px; height: 44px; border-radius: 6px; background: var(--rcb-red-50); color: var(--rcb-red); display: grid; place-items: center; flex-shrink: 0; font-size: 14px; font-weight: 700; } .doc-ico.pdf { background: #FBEAEA; color: var(--bad); } .doc-ico.xls { background: #E6F4EC; color: var(--ok); } .doc-ico.doc { background: var(--info-50); color: var(--info); } .doc-ico.zip { background: #EEF0F4; color: var(--text-2); } .doc-info { min-width: 0; flex: 1; } .doc-info b { font-size: 13px; display: block; line-height: 1.25; } .doc-info small { font-size: 11.5px; color: var(--text-3); display: block; margin-top: 3px; } /* ── Alert banner ────────────────────────────────────────────── */ .alert { display: flex; align-items: center; gap: 14px; background: linear-gradient(90deg, rgba(244,185,66,.12), rgba(244,185,66,.04)); border: 1px solid rgba(244,185,66,.45); border-left: 4px solid var(--rcb-gold); padding: 12px 16px; border-radius: var(--r-md); } .alert .a-ico { color: var(--warn); } .alert .a-text { flex: 1; font-size: 13px; } .alert .a-text b { color: var(--text); } .alert .a-text small { display: block; color: var(--text-2); font-size: 12px; margin-top: 2px; } .alert button { background: var(--surface); border: 1px solid var(--line); height: 32px; padding: 0 14px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--text); } .alert button:hover { border-color: var(--warn); color: var(--warn); } .alert .alert-close { background: transparent; border: 0; color: var(--text-3); font-size: 20px; line-height: 1; padding: 0; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; } .alert .alert-close:hover { background: rgba(184,42,42,.08); color: var(--bad); border: 0; } /* ── Tabs (used in cash flow & ops) ──────────────────────────── */ .tabs { display: inline-flex; gap: 16px; } .tabs button { background: none; border: 0; padding: 4px 0; font-size: 13px; color: var(--text-3); border-bottom: 2px solid transparent; font-weight: 500; } .tabs button.active { color: var(--rcb-red); border-bottom-color: var(--rcb-red); } .tabs button:hover:not(.active) { color: var(--text); } /* ── Section title outside cards ─────────────────────────────── */ .sect-title { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .sect-title h2 { font-size: 16px; font-weight: 600; color: var(--rcb-ink); margin: 0; letter-spacing: -.2px; } .sect-title .head-link { font-size: 12.5px; color: var(--info); } /* utility */ .muted { color: var(--text-3); } .row-flex { display: flex; align-items: center; gap: 10px; } .grow { flex: 1; } /* ────────────────────────────────────────────────────────────── Responsive — tablet & mobile Desktop-first banking dashboard with progressive collapse ────────────────────────────────────────────────────────────── */ /* mobile menu toggle (hidden on desktop) */ .mobile-menu-btn { display: none; width: 38px; height: 38px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--text); align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(14,19,32,.5); z-index: 39; backdrop-filter: blur(2px); } /* ─── Small desktop / wide tablet (1024-1199px) ─── */ @media (max-width: 1199px) { .main { width: 90%; padding: 24px 0 60px; } .split-area { grid-template-columns: minmax(0, 1fr) 280px; } .right-rail { width: 280px; } .row-2 { grid-template-columns: 1fr; } .kpi-strip { grid-template-columns: repeat(3, 1fr); } .kpi.hero { grid-column: span 3; } .kpi-strip.compact { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kpi-strip.compact .kpi.hero { grid-column: span 1; } .kpi-strip.compact .kpi-value { font-size: 16px; } .kpi.hero .kpi-value { font-size: 30px; } .docs-grid { grid-template-columns: repeat(3, 1fr); } .company-switcher { min-width: 200px; } .search { max-width: 320px; } .chart-summary { grid-template-columns: repeat(2, 1fr); } .chart-summary .sum-cell:nth-child(2n) { border-right: 0; } .chart-summary .sum-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); } .topbar-inner { width: 96%; } .main { width: 96%; } } /* ─── Tablet (768-1023px) ─── */ @media (max-width: 1023px) { body { font-size: 13.5px; } .split-area { grid-template-columns: 1fr; gap: 16px; } .right-rail { width: auto; position: static; max-height: none; overflow-y: visible; padding-right: 0; flex-direction: row; flex-wrap: wrap; } .right-rail > .card { flex: 1 1 320px; min-width: 0; } .topbar-inner { width: 100%; padding: 0 16px; } .main { width: 100%; padding: 20px 16px 60px; } .search { max-width: none; flex: 1; } .top-actions .pill-btn:not(.primary) { display: none; } .top-actions .icon-btn[aria-label="Помощь"] { display: none; } .user-chip .user-info { display: none; } .user-chip { padding: 4px; } .company-switcher { min-width: 0; max-width: 200px; } .company-switcher .company-info small { display: none; } .main { width: 100%; padding: 20px 16px 60px; } .page-head { flex-direction: column; align-items: stretch; gap: 14px; } .page-head h1 { font-size: 22px; } .period-switch { overflow-x: auto; } .kpi-strip { grid-template-columns: repeat(2, 1fr); } .kpi.hero { grid-column: span 2; } .kpi-strip.compact { grid-template-columns: repeat(3, 1fr); gap: 8px; } .kpi-strip.compact .kpi.hero { grid-column: span 3; } .docs-grid { grid-template-columns: repeat(2, 1fr); } .table-wrap { overflow-x: hidden; } table.t { min-width: 0; width: 100%; } table.t th, table.t td { padding: 10px 8px; } .acc-name small { display: none; } table.t .acc-name { min-width: 0; gap: 8px; } .acc-name b { font-size: 13px; } .acc-flag { width: 22px; height: 22px; } .accounts-table th:nth-child(3), .accounts-table td:nth-child(3), .accounts-table th:last-child, .accounts-table td:last-child { display: none; } .accounts-table .balance-cell { font-size: 13px; } .ops-table th:nth-child(3), .ops-table td:nth-child(3), .ops-table th:last-child, .ops-table td:last-child { display: none; } .row-2, .row-2-equal, .row-3 { grid-template-columns: 1fr !important; } .product-grid { grid-template-columns: 1fr 1fr; } .docs-grid { grid-template-columns: 1fr 1fr; } } /* ─── Mobile (480-767px) ─── */ @media (max-width: 767px) { body { font-size: 13px; } .topbar-inner { padding: 0 14px; } .topbar-global { height: 52px; } .topbar-nav { display: none; } /* убираем строку 2 — в drawer */ .topbar-sub { height: 38px; } .mob-menu-btn { display: flex; } /* показываем гамбургер */ .company-switcher { display: none; } /* компания — в drawer */ .topbar-help-btn { display: none; } .user-chip .user-info { display: none; } .user-chip { padding: 4px; } .top-actions { gap: 6px; } /* Notification popover — полная ширина */ .notif-pop { position: fixed; top: 52px; left: 0; right: 0; width: 100%; max-width: 100%; max-height: calc(100vh - 56px); border-radius: 0; border-left: 0; border-right: 0; box-shadow: 0 8px 24px -8px rgba(14,19,32,.25); } .notif-list { max-height: calc(100vh - 200px); } /* On mobile show only company avatar + hamburger; hide labels */ .company-switcher { padding: 4px; gap: 0; min-width: 0; flex-shrink: 0; } .company-switcher .chev { display: none; } .company-switcher .company-info { display: none; } .search { display: none; } .top-actions { gap: 4px; margin-left: auto; } .top-actions .pill-btn.primary { padding: 0 10px; font-size: 12px; white-space: nowrap; height: 36px; gap: 6px; } .top-actions .icon-btn { width: 36px; height: 36px; } .top-actions .user-chip .user-avatar { width: 28px; height: 28px; font-size: 11px; } .top-actions .user-chip { padding: 3px; } .period-switch { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; flex-shrink: 0; } .period-switch::-webkit-scrollbar { display: none; } .period-switch button { flex-shrink: 0; } /* Tabs (used in card-head) — scroll horizontally on mobile */ .card-head { flex-wrap: wrap; gap: 8px 14px; } .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; flex-basis: 100%; padding-bottom: 2px; } .tabs::-webkit-scrollbar { display: none; } .tabs button { flex-shrink: 0; } .main { width: 100%; padding: 16px 12px 48px; gap: 14px; } .page-head h1 { font-size: 20px; } .breadcrumbs { font-size: 11.5px; } .alert { flex-wrap: wrap; padding: 12px 14px; } .alert .a-text { flex: 1 1 100%; } .alert > button { flex: 1; } /* KPI: stack 2 cols, hero full width */ .kpi-strip { grid-template-columns: 1fr 1fr; gap: 10px; } .kpi { padding: 12px 14px; } .kpi.hero { grid-column: span 2; } /* Right-rail stacks vertically on mobile */ .right-rail { flex-direction: column; } .right-rail > .card { flex: 1 1 100%; } .kpi.hero .kpi-value { font-size: 24px; } .kpi-value { font-size: 18px; } .kpi-label { font-size: 10.5px; } /* Cash flow card */ .chart-legend { flex-wrap: wrap; gap: 10px 14px; } .chart-svg { height: 200px; } .chart-summary { grid-template-columns: 1fr 1fr; } /* FX list compact */ .fx-list { padding: 4px 12px 12px; } .fx-row { padding: 8px 6px; gap: 10px; } .quick-actions { padding: 4px 12px 14px; grid-template-columns: 1fr; } .qa { flex-direction: row; align-items: center; } /* Tables: convert to card list */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.t { font-size: 12.5px; min-width: 0; width: 100%; } table.t th, table.t td { padding: 10px 10px; } /* Operations table compact */ .ops-filter { overflow-x: auto; padding-bottom: 8px; } .ops-filter button { flex-shrink: 0; } /* Queue items */ .queue-item { padding: 12px 14px; gap: 10px; } .q-text small { gap: 6px; } /* Deposits */ .product-grid { grid-template-columns: 1fr; padding: 4px 14px 14px; } .product .amount { font-size: 18px; } /* Corporate cards inside narrow column */ .ccard-row { padding: 10px 12px; gap: 10px; } /* Documents */ .docs-grid { grid-template-columns: 1fr; padding: 4px 14px 14px; } /* Section titles */ .sect-title h2 { font-size: 15px; } } /* Print styles — for outputting dashboard to PDF/printer */ @media print { @page { margin: 1.2cm; size: A4 landscape; } body { background: #fff; color: #000; font-size: 11px; } .sidebar, .topbar, .top-actions, .period-switch, .mobile-menu-btn, .sidebar-backdrop, .alert, .head-link, .row-actions, .qa, .cards-foot, .card-foot, .ops-filter, .tabs button:not(.active) { display: none !important; } .app { display: block; } .main { padding: 0; max-width: none; gap: 12px; } .page-head { display: block; } .page-head h1 { font-size: 20px; margin-bottom: 4px; } .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; } .kpi-strip { grid-template-columns: repeat(5, 1fr); gap: 8px; } .kpi { padding: 10px; box-shadow: none; } .kpi.hero { background: #fff; color: #000; border: 1px solid #ccc; } .kpi.hero .kpi-value, .kpi.hero .kpi-label, .kpi.hero .kpi-sub { color: #000; } .kpi .spark, .kpi-bars { display: none; } .row-2, .row-3 { display: block; } .row-2 > .card, .row-3 > .card { margin-bottom: 12px; } .chart-svg { max-height: 200px; } .side-stack { display: none; } table.t { font-size: 10.5px; } .quick-actions, .docs-grid, .cards-row, .product-grid, .cards-list { display: none; } a { color: #000; text-decoration: none; } body::after { content: "RenCapBank · Кабинет корпоративного клиента · Сформировано " attr(data-print-date); display: block; font-size: 9px; color: #666; text-align: center; margin-top: 20px; padding-top: 8px; border-top: 1px solid #ddd; } } /* Accessibility — respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Disable sticky hover on touch devices — prevents "stuck hover" after tap */ @media (hover: none) { .nav a:hover, .pill-btn:hover, .icon-btn:hover, .qa:hover, .fx-row:hover, .queue-item:hover, .ccard-row:hover, .product:hover, .doc:hover, table.t tbody tr:hover, .user-chip:hover, .company-switcher:hover, .row-actions button:hover, .head-link:hover { background: initial; color: inherit; border-color: var(--line); transform: none; } } /* ─── Small mobile (< 480px) ─── */ @media (max-width: 479px) { body { font-size: 12.5px; } .topbar { padding: 0 8px; gap: 6px; } .company-switcher .company-info b { font-size: 12.5px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .top-actions { gap: 3px; } .top-actions .pill-btn.primary { height: 32px; padding: 0 8px; font-size: 11.5px; gap: 4px; } .top-actions .pill-btn.primary svg { width: 14px; height: 14px; } .top-actions .icon-btn { width: 32px; height: 32px; } .top-actions .icon-btn svg { width: 16px; height: 16px; } .top-actions .user-chip { padding: 2px; } .top-actions .user-chip .user-avatar { width: 26px; height: 26px; font-size: 10.5px; } .mobile-menu-btn { width: 32px; height: 32px; } .main { padding: 14px 10px 40px; } .page-head h1 { font-size: 18px; } /* KPI: single column */ .kpi-strip { grid-template-columns: 1fr; } .kpi.hero { grid-column: span 1; } .kpi-value { font-size: 22px; } .kpi.hero .kpi-value { font-size: 26px; } /* Card heads more compact */ .card-head { padding: 14px 14px 10px; } .card-head h3 { font-size: 13.5px; } .card-head .head-sub { font-size: 11.5px; } /* Period switch */ .period-switch button { padding: 0 9px; font-size: 12px; height: 28px; } /* Chart */ .chart-svg { height: 180px; } .chart-summary { grid-template-columns: 1fr 1fr; } .chart-summary .sum-cell { padding: 11px 12px; } .chart-summary .sum-value { font-size: 14px; } /* Quick actions tighter */ .qa { padding: 10px; } /* Cards mini-row tighter */ .ccard-row { grid-template-columns: 36px 1fr auto; padding: 10px 10px; gap: 8px; } .mini-card { width: 36px; height: 24px; } .ccard-amount .spent { font-size: 12.5px; } .ccard-amount .limit { font-size: 11px; } /* Footer */ .cards-foot { padding: 10px 12px 14px; } .cards-foot .pill-btn { height: 32px; font-size: 11.5px; } /* Hide some less-essential columns visually */ .breadcrumbs { display: none; } } /* ── Дополнения для многостраничного приложения ─────────────────── */ .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 18px 14px; align-items: center; } .filter-bar input[type=text], .filter-bar select { height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font: inherit; outline: none; transition: border-color .12s ease, background .12s ease; min-width: 220px; } .filter-bar input[type=text]:focus, .filter-bar select:focus { border-color: var(--rcb-red); background: #fff; } .filter-bar .grow { flex: 1; } .tag-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 18px 14px; } .tag-list a { height: 28px; padding: 0 11px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; } .tag-list a.active { background: var(--rcb-ink); color: #fff; border-color: var(--rcb-ink); } .tag-list a:not(.active):hover { background: var(--surface-2); color: var(--text); } /* Платежи: расширенная таблица очереди */ .pay-table td { vertical-align: middle; } .pay-table .sigs { display: inline-flex; gap: 3px; align-items: center; font-size: 11.5px; color: var(--text-3); } .pay-table .sigs i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line); } .pay-table .sigs i.done { background: var(--ok); } .pay-table .urgent-flag { display: inline-flex; align-items: center; gap: 4px; color: var(--bad); font-weight: 600; font-size: 11.5px; } /* Карточный контейнер для контрагента */ .cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 4px 18px 18px; } .cp-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; background: var(--surface); transition: border-color .12s, transform .12s; } .cp-card:hover { border-color: var(--rcb-red); transform: translateY(-1px); } .cp-card .cp-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; } .cp-card .cp-ava { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, var(--rcb-ink), var(--rcb-ink-2)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } .cp-card b { font-size: 13.5px; line-height: 1.25; display: block; } .cp-card .cp-head small { font-size: 11.5px; color: var(--text-3); display: block; margin-top: 2px; font-family: var(--mono); } .cp-card .cp-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 11.5px; color: var(--text-3); } .cp-card .cp-meta b { color: var(--text); font-size: 12.5px; font-weight: 600; margin-top: 1px; } .cp-card .cp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; } .cp-card .cp-tag { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-weight: 500; } .cp-card .cp-tag.in { background: var(--ok-50); color: var(--ok); } .cp-card .cp-tag.out { background: var(--bad-50); color: var(--bad); } .cp-card .cp-tag.tax { background: var(--warn-50); color: var(--warn); } .cp-card .cp-tag.intl{ background: var(--info-50); color: var(--info); } /* Карточная сетка для карт сотрудников */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; padding: 4px 18px 18px; } .big-card { position: relative; height: 180px; border-radius: 14px; padding: 18px 18px 14px; color: #fff; overflow: hidden; background: linear-gradient(135deg, #1a2350, #0f1632); box-shadow: 0 8px 24px -10px rgba(14,19,32,.45); display: flex; flex-direction: column; justify-content: space-between; } .big-card.red { background: linear-gradient(135deg, var(--rcb-red), var(--rcb-red-700)); } .big-card.gold { background: linear-gradient(135deg, #C97A00, #8C5300); } .big-card.muted-bg { background: linear-gradient(135deg, #5B6478, #3C4666); } .big-card.orange-bg { background: var(--rcb-gradient-3); } .big-card.navy { background: linear-gradient(135deg, #1a2350, #0f1632); } .big-card::after { content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%); pointer-events: none; } .big-card .bc-tariff { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .85; } .big-card .bc-holder { font-size: 15px; font-weight: 600; margin-top: 4px; } .big-card .bc-role { font-size: 11.5px; opacity: .8; margin-top: 1px; } .big-card .bc-bottom { display: flex; justify-content: space-between; align-items: flex-end; } .big-card .bc-num { font-family: var(--mono); font-size: 14px; letter-spacing: 1.5px; } .big-card .bc-limit { font-size: 11px; opacity: .75; text-align: right; } .big-card .bc-limit b { font-size: 14px; opacity: 1; display: block; font-variant-numeric: tabular-nums; } .big-card .bc-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,.18); margin: 8px 0; overflow: hidden; } .big-card .bc-bar i { display: block; height: 100%; background: #fff; border-radius: 999px; } /* Депозиты + кредиты */ .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; } .products-grid .product { padding: 22px; } .products-grid .product .amount { font-size: 22px; margin-top: 4px; } /* Подвал с итогом / пагинацией */ .list-foot { padding: 12px 18px; border-top: 1px solid var(--line-2); background: var(--surface-2); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--text-2); } /* Грид KPI для страниц */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } /* Empty state */ .empty { padding: 48px 24px; text-align: center; color: var(--text-3); } .empty svg { color: var(--text-3); opacity: .6; margin-bottom: 8px; } .empty b { color: var(--text); font-size: 14px; display: block; } /* Страница операций — таблица занимает всю ширину */ .ops-table-full th, .ops-table-full td { padding: 11px 14px; } .ops-table-full .amt-in { color: var(--ok); font-weight: 600; } .ops-table-full .amt-out { color: var(--rcb-red); font-weight: 600; } /* Категории операций */ .cat-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); text-transform: lowercase; } .cat-pill.tax { background: var(--warn-50); color: var(--warn); } .cat-pill.salary { background: #EEF6EE; color: var(--ok); } .cat-pill.commission{ background: var(--line-2); color: var(--text-2); } .cat-pill.fx { background: var(--info-50); color: var(--info); } .cat-pill.refund { background: #F1ECFA; color: #5C4DB1; } .cat-pill.transfer { background: var(--surface-2);color: var(--text-2); } /* Toast-уведомление */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--rcb-ink); color: #fff; padding: 12px 16px; border-radius: var(--r-md); font-size: 13px; font-weight: 500; box-shadow: 0 12px 24px -8px rgba(14,19,32,.4); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 100; } .toast.show { opacity: 1; transform: translateY(0); } /* Сброс настроек для пары специальных стилей дашборда — на других страницах нужно показать все колонки, поэтому переопределяем display:none */ .show-all-cols .accounts-table th, .show-all-cols .accounts-table td { display: table-cell !important; } /* Кнопки внутри подвала карточки */ .card-foot .pill-btn { height: 28px; padding: 0 10px; font-size: 12px; } /* Большие KPI-числа для страничных хедеров */ .page-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-1); } .page-kpi .lab { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .8px; font-weight: 500; margin-bottom: 4px; } .page-kpi .val { font-size: 22px; font-weight: 700; letter-spacing: -.4px; color: var(--rcb-ink); font-variant-numeric: tabular-nums; } .page-kpi .sub { font-size: 12px; color: var(--text-2); margin-top: 4px; } /* ── Страница «Кредиты для бизнеса» ──────────────────────────── */ /* Hero-баннер: изображение во всю ширину карточки, кликабельные зоны поверх нарисованных на нём кнопок (координаты в %, безопасны при ресайзе). */ .credit-banner { position: relative; width: 100%; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 12px 32px -14px color-mix(in srgb, var(--rcb-red) 45%, transparent), var(--shadow-1); background: linear-gradient(135deg, var(--rcb-orange-2), var(--rcb-red-700)); isolation: isolate; } .credit-banner-link { display: block; } .credit-banner img { display: block; width: 100%; height: auto; object-fit: cover; } .credit-banner-hit { position: absolute; border-radius: 14px; z-index: 2; /* отладка зон: outline: 1px dashed rgba(255,0,0,.6); */ } .credit-banner-hit:focus-visible { outline: 3px solid rgba(255,255,255,.85); outline-offset: 2px; } .credit-banner-hit:hover { background: rgba(255,255,255,.06); } /* Координаты подобраны под баннер ~2000×640 px. Левая кнопка «Узнать сумму» (белая): ~5%..18% по X, ~73%..86% по Y. Правая «Рассчитать платёж» (контурная): ~20%..36% по X, та же высота. */ .credit-banner-hit-cta { left: 4.5%; right: 82%; top: 73%; bottom: 14%; } .credit-banner-hit-alt { left: 20%; right: 64%; top: 73%; bottom: 14%; } /* primary-кнопка увеличенного размера для hero и формы */ .pill-btn.big { height: 44px; padding: 0 22px; font-size: 14px; font-weight: 600; border-radius: 12px; } .pill-btn.ghost { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); color: #fff; } .pill-btn.ghost:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.48); } /* Карточка преимущества */ .benefit { padding: 20px 22px; } .benefit .benefit-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--rcb-orange-50); color: var(--rcb-orange-700); display: grid; place-items: center; margin-bottom: 14px; } .benefit h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; color: var(--rcb-ink); letter-spacing: -.2px; } .benefit p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.45; } /* Калькулятор */ .credit-calc-card { padding: 22px 24px; } .credit-calc { display: flex; flex-direction: column; gap: 22px; } .credit-calc .cc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 28px; } .cc-field label { display: block; font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .8px; font-weight: 500; margin-bottom: 8px; } .cc-row { display: flex; align-items: baseline; gap: 8px; border-bottom: 2px solid var(--line); padding-bottom: 6px; margin-bottom: 12px; transition: border-color .15s ease; } .cc-row:focus-within { border-color: var(--rcb-orange); } .cc-input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 22px; font-weight: 700; color: var(--rcb-ink); letter-spacing: -.4px; padding: 0; outline: none; min-width: 0; } .cc-unit { font-size: 14px; font-weight: 600; color: var(--text-2); } .cc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: var(--line); outline: none; cursor: pointer; } .cc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--rcb-orange); border: 3px solid #fff; box-shadow: 0 2px 6px -1px var(--rcb-shadow-hover), 0 0 0 1px var(--rcb-orange); cursor: grab; transition: transform .12s ease; } .cc-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); } .cc-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--rcb-orange); border: 3px solid #fff; box-shadow: 0 2px 6px -1px var(--rcb-shadow-hover), 0 0 0 1px var(--rcb-orange); cursor: grab; } .cc-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-top: 8px; } .cc-select { width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font: inherit; font-size: 14px; color: var(--text); outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .cc-select:focus { border-color: var(--rcb-orange); box-shadow: 0 0 0 3px var(--rcb-shadow-soft); } .cc-summary { display: grid; grid-template-columns: 1fr 1fr 240px; gap: 24px; padding: 20px 22px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line-2); align-items: end; } .cc-out-label { font-size: 11.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .8px; font-weight: 500; } .cc-out-value { font-size: 24px; font-weight: 700; letter-spacing: -.5px; color: var(--rcb-ink); margin-top: 6px; line-height: 1.1; } .cc-out-sub { font-size: 12px; color: var(--text-2); margin-top: 6px; } .cc-out-sub b { color: var(--rcb-orange-700); font-weight: 700; } /* Универсальная модалка (native ) */ .app-dialog { border: 0; padding: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--text); max-width: 440px; width: calc(100% - 32px); box-shadow: 0 28px 64px -16px rgba(14,19,32,.42), 0 4px 16px rgba(14,19,32,.1); position: relative; overflow: visible; } .app-dialog::backdrop { background: rgba(14,19,32,.45); backdrop-filter: blur(3px); } .app-dialog[open] { animation: app-dialog-in .22s cubic-bezier(.2,.7,.3,1) both; } .app-dialog[open]::backdrop { animation: app-dialog-backdrop-in .22s ease both; } @keyframes app-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes app-dialog-backdrop-in { from { opacity: 0; } to { opacity: 1; } } .app-dialog-body { padding: 36px 32px 28px; text-align: center; } .app-dialog-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; } .app-dialog-ico.ok { background: var(--ok-50); color: var(--ok); } .app-dialog-ico.warn { background: var(--warn-50); color: var(--warn); } .app-dialog-ico.bad { background: var(--bad-50); color: var(--bad); } .app-dialog-ico.info { background: var(--info-50); color: var(--info); } .app-dialog h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--rcb-ink); letter-spacing: -.2px; } .app-dialog p { margin: 0 auto 24px; font-size: 14px; color: var(--text-2); line-height: 1.5; max-width: 320px; } .app-dialog-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .app-dialog-actions .pill-btn { min-width: 120px; justify-content: center; } .app-dialog-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; background: transparent; font: inherit; font-size: 22px; line-height: 1; color: var(--text-3); border-radius: 8px; cursor: pointer; transition: background .12s ease, color .12s ease; } .app-dialog-close:hover { background: var(--surface-2); color: var(--text); } /* ── Поиск по меню (Ctrl+K) — командная палитра ──────────────────── */ .nav-search-dialog { width: min(620px, 92vw); max-height: min(78vh, 560px); padding: 0; border: 0; border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 28px 60px -18px rgba(14,19,32,.45); overflow: hidden; } .nav-search-dialog[open] { display: flex; flex-direction: column; position: fixed; inset: 0; margin: auto; } .nav-search-input-wrap { padding: 16px 18px 14px; border-bottom: 1px solid var(--line-2); background: linear-gradient(135deg, #FFF7FB 0%, #FFF1F7 100%); } /* Поле поиска — выглядит как явный input с белой подложкой, иконкой внутри слева и компактным «ESC» внутри справа. Контрастная рамка + pink-glow при фокусе. */ .nav-search-field { display: flex; align-items: center; height: 52px; padding: 0 8px 0 16px; background: #fff; border: 1.5px solid #E6D2DD; border-radius: 12px; box-shadow: 0 1px 0 rgba(14,19,32,.03); transition: border-color .15s ease, box-shadow .15s ease; cursor: text; } .nav-search-field:hover { border-color: #D9B6C9; } .nav-search-field:focus-within { border-color: var(--rcb-red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rcb-red) 14%, transparent); } .nav-search-field-ico { color: var(--rcb-red); flex-shrink: 0; margin-right: 10px; } .nav-search-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 15.5px; font-weight: 500; color: var(--text); } .nav-search-field input::placeholder { color: #A0A4AE; font-weight: 400; } .nav-search-field input::-webkit-search-cancel-button { display: none; } .nav-search-field input::-webkit-search-decoration { display: none; } /* Кнопка «×» очистки — появляется, когда есть текст */ .nav-search-clear { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-3); border-radius: 8px; cursor: pointer; margin-right: 4px; transition: background .12s ease, color .12s ease; } .nav-search-clear:hover { background: var(--surface-2); color: var(--text); } .nav-search-kbd { flex-shrink: 0; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .4px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 8px; cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease; } .nav-search-kbd:hover { border-color: var(--rcb-red); color: var(--rcb-red); background: var(--rcb-red-50); } .nav-search-results { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0 8px; } .nav-search-section { font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-3); font-weight: 600; padding: 12px 18px 4px; } .nav-search-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 12px; padding: 9px 18px; text-decoration: none; color: var(--text); cursor: pointer; transition: background .1s ease; } .nav-search-item:hover { background: var(--surface-2); } .nav-search-item.is-active { background: linear-gradient(90deg, var(--rcb-tint-08) 0%, var(--rcb-tint-04) 100%); box-shadow: inset 3px 0 0 0 var(--rcb-red); } .nav-search-item-label { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-search-item-label mark { background: color-mix(in srgb, var(--rcb-red) 18%, transparent); color: inherit; padding: 0 1px; border-radius: 2px; } .nav-search-item-section { font-size: 11px; color: var(--text-3); padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; white-space: nowrap; } .nav-search-item.is-active .nav-search-item-section { border-color: var(--rcb-shadow); color: var(--rcb-red); } .nav-search-item > svg { color: var(--text-3); } .nav-search-empty { padding: 28px 18px; text-align: center; color: var(--text-3); font-size: 13px; } .nav-search-foot { display: flex; gap: 14px; justify-content: flex-end; padding: 8px 14px; border-top: 1px solid var(--line-2); background: var(--surface-2); font-size: 11px; color: var(--text-3); } .nav-search-foot kbd { font-family: inherit; font-size: 10px; font-weight: 600; color: var(--text); background: #fff; border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; margin-right: 4px; } @media (max-width: 480px) { .nav-search-dialog { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; } .nav-search-foot { display: none; } } @media (max-width: 480px) { .app-dialog-body { padding: 28px 22px 22px; } .app-dialog h3 { font-size: 18px; } .app-dialog-actions .pill-btn { flex: 1 1 100%; } } /* Списки требований / документов */ .credit-info .card-head h3 { font-size: 14.5px; } .credit-list { list-style: none; padding: 4px 22px 18px; margin: 0; display: flex; flex-direction: column; gap: 10px; } .credit-list li { position: relative; padding-left: 26px; font-size: 13px; color: var(--text); line-height: 1.4; } .credit-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--rcb-orange-50); } .credit-list li::after { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 3px; border-left: 2px solid var(--rcb-orange-700); border-bottom: 2px solid var(--rcb-orange-700); transform: rotate(-45deg); } /* Адаптив */ @media (max-width: 1199px) { .cc-summary { grid-template-columns: 1fr 1fr; } .cc-summary .cc-cta-wrap { grid-column: 1 / -1; } } @media (max-width: 767px) { .credit-banner { border-radius: var(--r-md); } /* на мобиле кнопки на баннере мельче и плотнее — расширим зоны */ .credit-banner-hit-cta { left: 3%; right: 80%; } .credit-banner-hit-alt { left: 19%; right: 62%; } .credit-calc .cc-grid { grid-template-columns: 1fr; gap: 18px; } .cc-summary { grid-template-columns: 1fr; padding: 16px; } .cc-input { font-size: 20px; } .cc-out-value { font-size: 20px; } } /* ── Страница «Выпуск карты» ─────────────────────────────────── */ .issue-hero { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 28px; padding: 28px 32px; align-items: center; background: linear-gradient(135deg, #fcf2f7 0%, #fce5f0 100%); border: 0; } .issue-hero .ih-kicker { display: inline-block; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600; color: var(--rcb-orange-700); background: var(--rcb-shadow-soft); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; } .issue-hero .ih-title { font-size: 30px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; color: var(--rcb-ink); margin-bottom: 18px; } .issue-hero .ih-points { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; } .issue-hero .ih-points li { position: relative; padding-left: 26px; font-size: 14px; color: var(--text); line-height: 1.4; } .issue-hero .ih-points li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--rcb-orange); } .issue-hero .ih-points li::after { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } /* Стопка карт справа */ .issue-hero .ih-cards { position: relative; height: 240px; perspective: 800px; } .issue-hero .ih-card { position: absolute; width: 280px; height: 170px; padding: 16px; border-radius: 14px; transition: transform .35s cubic-bezier(.2,.7,.3,1); } .issue-hero .ih-card-1 { top: 0; right: 0; z-index: 3; transform: rotate(-2deg); } .issue-hero .ih-card-2 { top: 28px; right: 36px; z-index: 2; transform: rotate(-8deg) translateY(8px); opacity: .92; } .issue-hero .ih-card-3 { top: 56px; right: 72px; z-index: 1; transform: rotate(-14deg) translateY(16px); opacity: .82; } .issue-hero:hover .ih-card-1 { transform: rotate(-2deg) translateY(-4px); } .issue-hero:hover .ih-card-2 { transform: rotate(-7deg) translateY(2px); } .issue-hero:hover .ih-card-3 { transform: rotate(-12deg) translateY(8px); } /* Форма-визард */ .issue-form-card { padding: 8px 26px 24px; } .issue-form { display: flex; flex-direction: column; gap: 8px; } .issue-form .if-section { border: 0; border-top: 1px solid var(--line-2); padding: 20px 0; margin: 0; } .issue-form .if-section:first-of-type { border-top: 0; padding-top: 14px; } .issue-form .if-section legend { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; padding: 0; margin-bottom: 14px; } /* Большие плитки выбора (тип карты) */ .if-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .if-tile { position: relative; cursor: pointer; } .if-tile input { position: absolute; opacity: 0; pointer-events: none; } .if-tile-body { padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); height: 100%; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; display: flex; flex-direction: column; gap: 8px; } .if-tile:hover .if-tile-body { border-color: #CBD0DB; } .if-tile input:checked + .if-tile-body { border-color: var(--rcb-orange); background: var(--rcb-orange-50); box-shadow: 0 0 0 3px var(--rcb-shadow-soft); } .if-tile input:focus-visible + .if-tile-body { outline: 2px solid var(--rcb-orange); outline-offset: 2px; } .if-tile-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--rcb-orange-50); color: var(--rcb-orange-700); } .if-tile input:checked + .if-tile-body .if-tile-ico { background: #fff; } .if-tile-body b { font-size: 14.5px; color: var(--rcb-ink); font-weight: 700; } .if-tile-body small { font-size: 12px; color: var(--text-2); line-height: 1.4; } /* Чип-выбор (тариф, доставка) */ .if-chips { display: flex; flex-wrap: wrap; gap: 8px; } .if-chip { position: relative; cursor: pointer; } .if-chip input { position: absolute; opacity: 0; pointer-events: none; } .if-chip span { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text); background: var(--surface); transition: border-color .12s ease, background .12s ease, color .12s ease; } .if-chip:hover span { border-color: #CBD0DB; } .if-chip input:checked + span { background: var(--rcb-orange); border-color: var(--rcb-orange); color: #fff; font-weight: 600; } .if-chip input:focus-visible + span { outline: 2px solid var(--rcb-orange); outline-offset: 2px; } /* Выбор дизайна — миниатюры карт */ .if-design-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .if-design { position: relative; cursor: pointer; display: block; } .if-design input { position: absolute; opacity: 0; pointer-events: none; } .if-design-preview { height: 130px; padding: 14px; border-radius: 12px; transition: transform .15s ease, box-shadow .15s ease; } .if-design-preview .bc-tariff { font-size: 10px; } .if-design-preview .bc-num { font-family: var(--mono); font-size: 13px; letter-spacing: 2px; } .if-design-name { display: block; text-align: center; font-size: 12.5px; color: var(--text-2); margin-top: 8px; font-weight: 500; } .if-design:hover .if-design-preview { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(14,19,32,.35); } .if-design input:checked ~ .if-design-preview { box-shadow: 0 0 0 3px var(--rcb-orange), 0 10px 22px -10px color-mix(in srgb, var(--rcb-red) 45%, transparent); transform: translateY(-2px); } .if-design input:checked ~ .if-design-name { color: var(--rcb-orange-700); font-weight: 700; } .if-design input:focus-visible ~ .if-design-preview { outline: 3px solid var(--rcb-orange); outline-offset: 2px; } /* Парные поля */ .if-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; } .if-field label { display: block; font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .6px; font-weight: 500; margin-bottom: 6px; } .if-field .cc-row { margin-bottom: 10px; } /* Submit row */ .if-submit { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0 8px; border-top: 1px solid var(--line-2); margin-top: 8px; flex-wrap: wrap; } /* ───────────────────────────────────────────────────────────────── «Платёж по реквизитам в рублях» — современный двухколоночный UI ───────────────────────────────────────────────────────────────── */ /* Hero-баннер */ .pn-hero { margin-top: 8px; padding: 26px 28px; border-radius: 18px; background: radial-gradient(circle at 100% 0%, rgba(244,185,66,.35), transparent 55%), /* Hero: глубокий navy темы → промежуточный микс ink+бренд → тёмный бренд. На АТБ-теме даст переход navy → бордовый → оранж-700, на RenCap — navy → пурпурный → магента, и т.д. */ linear-gradient(135deg, var(--rcb-ink) 0%, color-mix(in srgb, var(--rcb-ink) 55%, var(--rcb-red-700)) 50%, var(--rcb-red-700) 100%); color: #fff; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--rcb-red-700) 55%, transparent), 0 2px 8px rgba(14,19,32,.08); position: relative; overflow: hidden; } .pn-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 65%); pointer-events: none; } .pn-hero-kicker { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; opacity: .8; } .pn-hero-title { margin: 8px 0 14px; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.4px; } .pn-hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .pn-hero-points li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; opacity: .94; } .pn-hero-points svg { color: #f4b942; flex-shrink: 0; background: rgba(255,255,255,.14); border-radius: 50%; padding: 4px; width: 22px; height: 22px; box-sizing: border-box; } .pn-hero-ico { width: 120px; height: 120px; display: grid; place-items: center; background: rgba(255,255,255,.12); border-radius: 24px; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter: blur(4px); } .pn-hero-ico svg { opacity: .92; } /* Двухколоночный layout */ .pn-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; margin-top: 16px; align-items: start; } /* Левая колонка — форма */ .pn-form-col.card { padding: 8px 28px 24px; } .pn-form { display: flex; flex-direction: column; gap: 4px; } /* Секция формы с круглой иконкой */ .pn-section { border-top: 1px solid var(--line-2); padding: 22px 0 4px; } .pn-section:first-of-type { border-top: 0; padding-top: 18px; } .pn-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .pn-section-ico { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--rcb-red-50), #FFE9F2); color: var(--rcb-red); display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 1px 3px var(--rcb-shadow-soft); } .pn-section-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--rcb-ink); letter-spacing: -.2px; } .pn-section-sub { margin-top: 2px; font-size: 12.5px; color: var(--text-3); } /* Сетки полей */ .pn-grid { display: grid; gap: 14px 16px; margin-bottom: 14px; } .pn-grid-1 { grid-template-columns: 1fr; } .pn-grid-2 { grid-template-columns: 1fr 1fr; } .pn-field { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pn-field label { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; } .pn-field label small { font-size: 11px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-3); margin-left: 4px; } /* Базовый input/select/textarea */ .pn-input { display: block; width: 100%; height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .pn-input::placeholder { color: var(--text-3); } .pn-input:hover:not(:disabled):not(.pn-readonly) { border-color: #BFC5D2; } .pn-input:focus { border-color: var(--rcb-red); background: #fff; box-shadow: 0 0 0 4px var(--rcb-shadow-soft); } .pn-input.is-valid { border-color: var(--ok); background: linear-gradient(0deg, rgba(20,134,75,.04), rgba(20,134,75,.04)), #fff; } .pn-input.is-valid:focus { border-color: var(--ok); box-shadow: 0 0 0 4px rgba(20,134,75,.12); } .pn-input.mono { font-family: var(--mono); letter-spacing: .5px; } .pn-input.pn-readonly { display: flex; align-items: center; background: var(--surface-2); color: var(--text-3); font-size: 13px; } .pn-input.pn-readonly.is-resolved { color: var(--text); font-weight: 600; background: #fff; border-color: var(--line); } .pn-textarea { height: auto; min-height: 100px; padding: 12px 14px; line-height: 1.5; resize: vertical; } select.pn-input { padding-right: 36px; appearance: none; cursor: pointer; background: var(--surface) url("data:image/svg+xml;utf8,") right 12px center / 14px no-repeat; } select.pn-input:focus { /* На focus оставляем серый шеврон — фокус и так подсвечен бренд-border'ом и shadow. Жёсткий розовый %23e20177 в data:-URL не поддерживает var(), поэтому отказались от перекраски шеврона, чтобы не «терять» цвет на не-RenCap темах. */ background: var(--surface) url("data:image/svg+xml;utf8,") right 12px center / 14px no-repeat; } /* Зелёная галочка валидного поля */ .pn-check { position: absolute; right: 12px; bottom: 11px; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease; pointer-events: none; } .pn-field .pn-input.is-valid + .pn-check { opacity: 1; transform: scale(1); } /* Большой блок суммы */ .pn-amount-wrap { background: linear-gradient(135deg, #FFF7FB 0%, #FFF1F7 100%); border: 1.5px solid #FFD9E8; border-radius: 16px; padding: 18px 20px 14px; margin-bottom: 18px; } .pn-amount-wrap label { display: block; font-size: 11px; color: var(--rcb-red); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 8px; } .pn-amount-box { display: flex; align-items: baseline; gap: 6px; border-bottom: 2px solid color-mix(in srgb, var(--rcb-red) 20%, transparent); padding-bottom: 6px; transition: border-color .15s ease; } .pn-amount-box:focus-within { border-bottom-color: var(--rcb-red); } .pn-amount-input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 32px; font-weight: 700; letter-spacing: -.8px; color: var(--rcb-ink); font-variant-numeric: tabular-nums; outline: none; padding: 0; } .pn-amount-input::placeholder { color: color-mix(in srgb, var(--rcb-red) 35%, transparent); font-weight: 700; } .pn-amount-cur { font-size: 22px; font-weight: 600; color: var(--rcb-red); } .pn-amount-hint { margin-top: 8px; font-size: 12px; color: var(--text-3); font-style: italic; } /* Submit-строка — на всю ширину карточки, выделенная */ .pn-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px -28px -24px; padding: 18px 28px; background: linear-gradient(135deg, #FAFBFD 0%, #F4F6FA 100%); border-top: 1px solid var(--line-2); border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); } .pn-submit-info { display: flex; flex-direction: column; gap: 2px; } .pn-submit-info small { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; } .pn-submit-info b { font-size: 13.5px; color: var(--text); font-weight: 600; } .pn-submit-btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 28px; border: 0; border-radius: 12px; background: var(--rcb-gradient-3); color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer; box-shadow: 0 8px 22px -8px var(--rcb-shadow-hover); transition: transform .12s ease, box-shadow .15s ease, filter .15s ease; } .pn-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--rcb-red) 65%, transparent); } .pn-submit-btn:active { transform: translateY(0); } .pn-submit-btn:disabled { opacity: .65; cursor: progress; } /* Правая колонка — превью платёжного поручения */ .pn-preview-col { position: sticky; top: 84px; } .pn-preview { background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 18px 38px -22px rgba(14,19,32,.25); overflow: hidden; } .pn-preview-head { padding: 16px 20px; /* Navy-шапка превью платежа: тёмный navy текущей темы. Конечная точка слегка теплее — микс с брендом, чтобы согласоваться с фирменной кнопкой ниже. */ background: linear-gradient(135deg, var(--rcb-ink) 0%, color-mix(in srgb, var(--rcb-ink) 78%, var(--rcb-red-700)) 100%); color: #fff; } .pn-preview-kicker { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .75; font-weight: 600; } .pn-preview-no { margin-top: 4px; font-size: 13.5px; font-weight: 600; } .pn-preview-no .mono { color: #f4b942; } .pn-preview-amount { text-align: center; padding: 22px 20px 6px; font-size: 32px; font-weight: 700; color: var(--rcb-ink); letter-spacing: -.8px; font-variant-numeric: tabular-nums; line-height: 1; } .pn-preview-amount span { font-size: 18px; color: var(--rcb-red); margin-left: 4px; font-weight: 600; } .pn-preview-status { text-align: center; padding-bottom: 18px; padding-top: 4px; } .pn-preview-section { padding: 14px 20px; border-top: 1px dashed var(--line-2); } .pn-preview-label { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; margin-bottom: 4px; } .pn-preview-value { font-size: 13.5px; color: var(--text); word-break: break-word; } .pn-preview-value b { font-weight: 600; } .pn-preview-meta { margin-top: 4px; font-size: 12px; color: var(--text-2); display: flex; gap: 6px; flex-wrap: wrap; } .pn-preview-purpose { font-size: 12.5px; color: var(--text-2); line-height: 1.45; white-space: pre-wrap; } /* Кнопка «Адресная книга» в заголовке секции «Получатель» */ .pn-section-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; } .pn-book-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1.5px solid var(--rcb-red); border-radius: 10px; background: #fff; color: var(--rcb-red); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease; flex-shrink: 0; } .pn-book-btn:hover { background: var(--rcb-red); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px -6px var(--rcb-shadow-hover); } .pn-book-btn:active { transform: translateY(0); } /* Диалог адресной книги */ .ab-dialog { width: min(580px, 92vw); max-height: min(82vh, 720px); padding: 0; border: 0; border-radius: 18px; background: var(--surface); color: var(--text); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(14,19,32,.45); } /* display:flex применяем только когда диалог открыт, иначе он останется в потоке документа после close() */ .ab-dialog[open] { display: flex; flex-direction: column; } .ab-head { padding: 18px 22px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; background: linear-gradient(135deg, #FFF7FB 0%, #FFF1F7 100%); border-bottom: 1px solid #FFD9E8; } .ab-kicker { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; color: var(--rcb-red); } .ab-title { margin: 4px 0 0; font-size: 18px; font-weight: 700; color: var(--rcb-ink); letter-spacing: -.2px; } .ab-search { display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-bottom: 1px solid var(--line-2); background: var(--surface); } .ab-search svg { color: var(--text-3); flex-shrink: 0; } .ab-search input { flex: 1; min-width: 0; height: 36px; padding: 0; border: 0; outline: none; font: inherit; font-size: 14px; background: transparent; color: var(--text); } .ab-search input::placeholder { color: var(--text-3); } .ab-count { font-size: 11.5px; color: var(--text-3); padding: 3px 10px; background: var(--surface-2); border-radius: 999px; font-variant-numeric: tabular-nums; font-weight: 600; flex-shrink: 0; } .ab-list { flex: 1; overflow-y: auto; padding: 6px 0 12px; scrollbar-gutter: stable; } .ab-list::-webkit-scrollbar { width: 8px; } .ab-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } .ab-list::-webkit-scrollbar-thumb:hover { background: #CBD0DB; } .ab-loading, .ab-empty { padding: 40px 22px; text-align: center; color: var(--text-3); font-size: 13px; } .ab-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 22px; border: 0; background: transparent; text-align: left; cursor: pointer; border-bottom: 1px solid #F2F4F8; transition: background .1s ease; } .ab-row:last-child { border-bottom: 0; } .ab-row:hover { background: linear-gradient(90deg, var(--rcb-tint-04), transparent 60%); } .ab-row:hover .ab-row-arrow { color: var(--rcb-red); transform: translateX(2px); } .ab-row:focus-visible { outline: 2px solid var(--rcb-red); outline-offset: -2px; } .ab-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ab-row-name { font-size: 13.5px; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ab-row-name b { font-weight: 600; } .ab-row-meta { font-size: 12px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 4px 6px; } .ab-row-meta .muted { color: var(--text-3); } .ab-row-meta .mono { letter-spacing: .3px; } .ab-tag { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; font-weight: 600; text-transform: lowercase; letter-spacing: .3px; } .ab-tag.in { background: var(--ok-50); color: var(--ok); } .ab-tag.out { background: var(--rcb-red-50); color: var(--rcb-red); } .ab-tag.tax { background: var(--warn-50); color: var(--warn); } .ab-row-arrow { color: var(--text-3); transition: color .12s ease, transform .15s ease; flex-shrink: 0; } /* Таблица адресной книги */ .ab-table .ab-fav-cell { padding-right: 0; } .ab-fav { width: 28px; height: 28px; border: 0; background: transparent; color: var(--line); cursor: pointer; border-radius: 50%; display: grid; place-items: center; transition: color .15s ease, background .15s ease, transform .15s ease; } .ab-fav:hover { color: var(--rcb-orange); background: var(--rcb-orange-50); } .ab-fav.on { color: #f4b942; } .ab-fav.on:hover { color: #d99a25; transform: scale(1.05); } .ab-actions { display: flex; gap: 4px; white-space: nowrap; text-align: right; } .ab-icon-btn { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-2); display: inline-grid; place-items: center; cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease; } .ab-icon-btn:hover { border-color: var(--rcb-red); color: var(--rcb-red); background: var(--rcb-red-50); } .ab-icon-btn.ab-delete:hover { border-color: var(--bad); color: var(--bad); background: var(--bad-50); } /* Форма-диалог адресной книги — шире обычной модалки */ .ab-form-dialog { width: min(640px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 18px; background: var(--surface); overflow: auto; box-shadow: 0 30px 60px -20px rgba(14,19,32,.45); } .ab-form { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 6px; } /* Чекбокс «избранное» в форме */ .ab-checkbox { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; font-size: 13.5px; user-select: none; transition: border-color .12s ease, background .12s ease; } .ab-checkbox:hover { border-color: #BFC5D2; } .ab-checkbox input { width: 16px; height: 16px; accent-color: var(--rcb-red); cursor: pointer; } .ab-checkbox:has(input:checked) { border-color: var(--rcb-red); background: var(--rcb-red-50); color: var(--rcb-red); font-weight: 600; } .ab-form-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; } .ab-form-error { background: var(--bad-50); color: var(--bad); padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.4; border: 1px solid rgba(184,42,42,.2); } .ab-form-actions { display: flex; gap: 10px; justify-content: flex-end; } .ab-form-actions .pn-submit-btn { height: 40px; padding: 0 20px; font-size: 13.5px; } /* ── Пользователи (BR 4.x) ──────────────────────────────────────── */ .emp-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--rcb-orange-2) 0%, var(--rcb-red-700) 100%); color: #fff; font-size: 12.5px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; } .emp-mode-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .12s ease, background .12s ease; } .emp-mode-tile input { position: absolute; opacity: 0; pointer-events: none; } .emp-mode-tile:hover { border-color: #BFC5D2; } .emp-mode-tile.is-active { border-color: var(--rcb-red); background: var(--rcb-red-50); box-shadow: 0 0 0 3px var(--rcb-shadow-soft); } .emp-mode-tile b { font-size: 13px; color: var(--rcb-ink); } .emp-mode-tile small { font-size: 11.5px; color: var(--text-2); line-height: 1.4; } .emp-roles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; padding-top: 4px; } .emp-role-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .12s ease, background .12s ease; } .emp-role-tile:hover { border-color: #BFC5D2; } .emp-role-tile.is-checked { border-color: var(--rcb-red); background: var(--rcb-red-50); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rcb-red) 10%, transparent); } .emp-role-tile.is-bank { border-style: dashed; background: rgba(40,110,188,.04); cursor: not-allowed; } .emp-role-tile.is-bank:hover { border-color: var(--info); } .emp-role-tile input { position: absolute; opacity: 0; pointer-events: none; } .emp-role-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .emp-role-head b { font-size: 13.5px; color: var(--rcb-ink); font-weight: 700; } .emp-role-tile small { font-size: 11.5px; color: var(--text-2); line-height: 1.4; } .emp-role-perms { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .emp-perm { font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--text-3); letter-spacing: .3px; } .emp-role-tile.is-checked .emp-perm { background: color-mix(in srgb, var(--rcb-red) 10%, transparent); color: var(--rcb-red); } /* ── Переписка по платежам (BR 3.27/3.28) ──────────────────────── */ .pm-chat-btn { position: relative; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-3); display: inline-grid; place-items: center; cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease; } .pm-chat-btn:hover { border-color: var(--rcb-red); color: var(--rcb-red); background: var(--rcb-red-50); } .pm-chat-btn.has-history { color: var(--text); border-color: #BFC5D2; } .pm-chat-btn.has-unread { color: var(--rcb-red); border-color: var(--rcb-red); background: var(--rcb-red-50); } .pm-chat-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: 700; background: var(--rcb-red); color: #fff; border-radius: 999px; display: inline-grid; place-items: center; border: 2px solid var(--surface); } .pm-chat-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; background: var(--info); border-radius: 50%; border: 1.5px solid var(--surface); } /* Кнопка «Открыть карточку платежа» в строке очереди */ .pm-open-btn { width: auto; padding: 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .2px; color: var(--text); border-color: #BFC5D2; } .pm-open-btn:hover { background: var(--rcb-red); border-color: var(--rcb-red); color: #fff; } /* ── Настройка видимости разделов — общий диалог для всех страниц ── Композиция «Card Preview» (вариант 15): DM Sans + Fraunces, тонкие разделители-строки. Палитра берётся из активной темы оформления (страница /settings/appearance — токены rcb-red / surface / text* / line*), поэтому диалог автоматически подстраивается под выбранную тему. */ /* Скрываем inline-тумблеры внутри заголовков collapsible-блоков: управление перенесено в шестерёнку → диалог .sv-dialog. */ .collapsible-head .toggle-switch { display: none; } /* Inline-кнопки сворачивания фильтра тоже скрываем — управление видимостью фильтра доступно теперь через шестерёнку «Настройки раздела» на каждой странице. Сами фильтры остаются работоспособными; меняется только способ их сворачивания. */ .filters-toggle { display: none !important; } .sv-dialog { width: min(420px, 94vw); max-height: min(86vh, 720px); padding: 0; border: 0; border-radius: 12px; background: var(--surface); box-shadow: 0 16px 40px rgba(20, 30, 60, .14), 0 1px 0 rgba(20, 30, 60, .04); overflow: hidden; font-family: 'DM Sans', system-ui, sans-serif; color: var(--text); } .sv-dialog[open] { display: flex; flex-direction: column; position: fixed; inset: 0; margin: auto; } .sv-head { padding: 20px 22px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; background: var(--surface); border-bottom: 0; } .sv-kicker { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-3); font-weight: 600; } /* Заголовок диалога — той же гарнитурой и стилем, что и .page-head h1 (системный --font темы, navy-ink, плотный bold с лёгким отрицательным трекингом). */ .sv-head h3 { margin: 0 0 4px; font-family: var(--font); font-size: 22px; font-weight: 700; letter-spacing: -.4px; line-height: 1.15; color: var(--rcb-ink); } .sv-head small { font-size: 13px; line-height: 1.45; color: var(--text-3); } .sv-head .app-dialog-close { color: var(--text-3); } .sv-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 22px 0; } .sv-actions .pill-btn { height: 30px; padding: 0 12px; font-size: 12.5px; border: 1px solid var(--line); background: var(--surface); color: var(--rcb-red); font-weight: 600; border-radius: 6px; } .sv-actions .pill-btn:hover { background: var(--rcb-red-50); border-color: var(--rcb-red); } .sv-list { padding: 14px 22px 0; display: flex; flex-direction: column; gap: 0; overflow-y: auto; } .sv-tile { position: relative; display: grid; grid-template-columns: 32px 1fr 36px; align-items: center; column-gap: 12px; padding: 9px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; cursor: pointer; user-select: none; transition: background .15s; } .sv-tile:hover { background: color-mix(in srgb, var(--rcb-red) 4%, transparent); } .sv-tile input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; } .sv-tile-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--rcb-red-50); color: var(--rcb-red); display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .sv-tile-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sv-tile-body b { font-weight: 600; font-size: 13.5px; line-height: 1.25; font-family: 'DM Sans', sans-serif; color: var(--text); } .sv-tile-body small { color: var(--text-3); font-size: 11.5px; line-height: 1.4; } .sv-tile-toggle { position: relative; width: 36px; height: 20px; background: var(--line); border-radius: 10px; transition: background .15s; justify-self: end; } .sv-tile-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); transition: transform .15s ease; } .sv-tile.is-on .sv-tile-toggle { background: var(--rcb-red); } .sv-tile.is-on .sv-tile-toggle::after { transform: translateX(16px); } .sv-tile.is-off .sv-tile-ico { background: var(--line-2); color: var(--text-3); } .sv-tile.is-off .sv-tile-body b { color: var(--text-3); } /* Заголовок-разделитель между группами тумблеров (например, перед списком столбцов). Серифный курсив акцентного цвета темы. Горизонтальный отступ берётся от родителя (.sv-list, padding: 22px), здесь только вертикальный. */ .sv-group-title { margin: 10px 0 0; padding: 14px 0 6px; font-family: 'Fraunces', serif; font-size: 14px; font-weight: 600; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--rcb-red); border-top: 1px solid var(--line-2); } /* Первой группе не нужна верхняя линия — она и так первая после header. */ .sv-list > .sv-group-title:first-child { border-top: 0; margin-top: 0; padding-top: 4px; } /* Убираем bottom-border у последней плитки перед footer'ом. */ .sv-list .sv-tile:last-child { border-bottom: 0; } /* Компактная плитка для столбцов таблицы (без иконки, тоньше). */ .sv-tile.sv-tile-compact { grid-template-columns: 1fr 36px; padding: 6px 0; gap: 10px; } .sv-tile.sv-tile-compact .sv-tile-body b { font-size: 13px; font-weight: 500; } /* Скрытые столбцы таблицы — общее правило для th/td с data-col-hidden. Базовое правило для обычных таблиц + повышенная специфичность для ситуаций, где локальные resets с !important (например, `.show-all-cols .accounts-table { display: table-cell !important }`) иначе бы перекрывали скрытие. */ [data-col-hidden], .show-all-cols .accounts-table th[data-col-hidden], .show-all-cols .accounts-table td[data-col-hidden], table th[data-col-hidden], table td[data-col-hidden] { display: none !important; } .sv-foot { margin-top: 12px; padding: 14px 22px; border-top: 1px solid var(--line-2); background: var(--surface-2); display: flex; justify-content: space-between; align-items: center; gap: 10px; } .sv-foot .muted { font-size: 12px; color: var(--text-3); } .sv-foot .pill-btn.primary { height: 34px; padding: 0 20px; border-radius: 6px; background: var(--rcb-red); border: 0; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; box-shadow: 0 2px 6px color-mix(in srgb, var(--rcb-red) 32%, transparent); } .sv-foot .pill-btn.primary:hover { background: var(--rcb-red-700); } @media (max-width: 480px) { .sv-dialog { width: 94vw; } .sv-tile { grid-template-columns: 28px 1fr 32px; } .sv-tile-ico { width: 28px; height: 28px; } } /* ── Карточка платежа (модалка «Открыть») ──────────────────────── */ .pay-details-dialog { /* Базовый .app-dialog задаёт max-width: 440px — нужно явно снять, иначе ширина капается на 440px, и значения вроде ИНН/счёта переносятся побуквенно. */ max-width: 96vw; width: min(1280px, 96vw); max-height: min(94vh, 920px); padding: 0; border: 0; border-radius: 18px; background: var(--surface); box-shadow: 0 28px 60px -18px rgba(14,19,32,.45); overflow: hidden; } .pay-details-dialog[open] { display: flex; flex-direction: column; position: fixed; inset: 0; margin: auto; } .pay-details-head { padding: 12px 22px 10px; background: linear-gradient(135deg, #FFF7FB 0%, #FFF1F7 100%); border-bottom: 1px solid #FFD9E8; } /* 3-колоночный header: банк-слева, заголовок «Платёжное поручение» по центру, крестик-справа. Используем grid, чтобы центр оставался реально центром вне зависимости от ширины левого и правого блоков. */ .pay-details-head-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; } .pay-details-bank { display: flex; align-items: center; gap: 10px; justify-self: start; min-width: 0; } .pay-details-bank-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--rcb-gradient-3); color: #fff; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; letter-spacing: .4px; box-shadow: 0 6px 16px -6px var(--rcb-shadow-hover); flex-shrink: 0; } .pay-details-bank-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .pay-details-bank-text b { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pay-details-bank-text small { font-size: 10.5px; color: var(--text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pay-details-head-center { justify-self: center; text-align: center; min-width: 0; } .pay-details-head-top > .app-dialog-close { justify-self: end; position: static; } .pay-details-kicker { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-3); font-weight: 700; } .pay-details-title { margin-top: 3px; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; } .pay-details-title .mono { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.3px; } .pay-details-title .urgent-flag { font-size: 11px; } /* Компактная строка с суммой по центру под шапкой */ .pay-details-amount-row { margin-top: 6px; padding: 4px 0 0; display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; } .pay-details-amount-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); font-weight: 600; } .pay-details-amount-row .num { font-size: 24px; font-weight: 700; color: var(--rcb-red); letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .pay-details-amount-row small { font-size: 12px; } /* Мобильный режим: шапка стек, центр прижимается влево */ @media (max-width: 640px) { .pay-details-head-top { grid-template-columns: 1fr auto; } .pay-details-head-center { grid-column: 1 / -1; grid-row: 2; justify-self: start; text-align: left; } } /* Прогресс жизненного цикла внутри карточки */ .pay-details-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 12px 22px; background: linear-gradient(0deg, var(--surface-2) 0%, var(--surface) 100%); border-bottom: 1px solid var(--line-2); } .pd-progress-step { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--text-3); } .pd-progress-step.is-active { color: var(--rcb-red); font-weight: 700; } .pd-progress-step.is-done { color: var(--text); } .pd-progress-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 1.5px solid #D8DCE3; color: var(--text-3); display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 700; } .pd-progress-step.is-done .pd-progress-dot { background: var(--ok); border-color: var(--ok); color: #fff; } .pd-progress-step.is-active .pd-progress-dot { background: var(--rcb-red); border-color: var(--rcb-red); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rcb-red) 15%, transparent); } .pd-progress-sep { flex: 1; min-width: 12px; height: 2px; background: var(--line-2); } .pd-progress-rejected { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--bad-50); color: var(--bad); font-size: 11px; font-weight: 700; } .pay-details-body { padding: 18px 22px 20px; overflow-y: auto; } .pay-details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } .pay-details-section { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; } /* «Назначение и подписи» — поля в две колонки. Заголовок и длинные значения (назначение, подписи) на всю ширину секции. */ .pay-details-section--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 22px; row-gap: 0; align-items: start; } .pay-details-section--wide > h4 { grid-column: 1 / -1; } .pay-details-section--wide > .pay-details-row.is-full { grid-column: 1 / -1; } @media (max-width: 720px) { .pay-details-section--wide { grid-template-columns: minmax(0, 1fr); } } .pay-details-section h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-3); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .pay-details-section h4 svg { color: var(--rcb-red); opacity: .8; } .pay-details-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 5px 0; font-size: 13px; border-top: 1px dashed var(--line-2); min-width: 0; } .pay-details-row:first-of-type { border-top: 0; } .pay-details-row > span { color: var(--text-3); font-size: 11.5px; } .pay-details-row > b { font-weight: 600; color: var(--text); min-width: 0; /* Длинные строки (счета, БИК и т.п.) переносим только когда не помещаются, не по буквам — overflow-wrap: anywhere вместо word-break: break-word. */ overflow-wrap: anywhere; word-break: normal; } /* «Штамп» статуса — виден только при печати */ .pay-details-stamp { display: none; position: absolute; right: 32px; top: 220px; padding: 8px 18px; border: 3px solid currentColor; border-radius: 10px; transform: rotate(-12deg); color: var(--text-3); font-size: 22px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; opacity: .85; } .pay-details-stamp--ok { color: var(--ok); } .pay-details-stamp--warn { color: #B58200; } .pay-details-stamp--bad { color: var(--bad); } .pay-details-stamp--info { color: #1F5BC0; } .pay-details-stamp--muted{ color: var(--text-3); } .pay-details-foot { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; } .pay-details-foot-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .pay-details-foot-group--primary { margin-left: auto; } .pay-details-foot .pill-btn { height: 36px; padding: 0 14px; font-size: 13px; } .pay-details-foot .pill-btn.primary { box-shadow: 0 6px 18px -6px var(--rcb-shadow-hover); } .pay-details-foot .ab-count { background: var(--rcb-red); color: #fff; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 18px; } .pay-details-recall:hover { border-color: var(--bad); color: var(--bad); } /* Сворачиваем шапку «документ + сумма» в стек раньше, пока есть место */ /* Внутреннюю сетку «Получатель / Плательщик» сворачиваем в одну колонку ещё раньше, чтобы значения (счета, длинные названия) были читаемыми */ @media (max-width: 880px) { .pay-details-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .pay-details-row { grid-template-columns: 1fr; gap: 2px; } .pay-details-foot { flex-direction: column; align-items: stretch; } .pay-details-foot-group { justify-content: center; } .pay-details-foot .pill-btn { flex: 1 1 calc(50% - 4px); justify-content: center; } } /* ── Печать: только карточка платежа, без модального backdrop ────── */ @media print { @page { size: A4; margin: 14mm 12mm; } /* На время печати диалог хойстится прямо в , поэтому достаточно скрыть остальных прямых детей. */ body.is-printing-payment > *:not(#payDetailsDialog) { display: none !important; } body.is-printing-payment { background: #fff !important; overflow: visible !important; } body.is-printing-payment .pay-details-dialog { position: relative !important; display: block !important; inset: auto !important; max-height: none !important; width: 100% !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; } body.is-printing-payment .pay-details-dialog::backdrop { display: none !important; } body.is-printing-payment .app-dialog-close, body.is-printing-payment .pay-details-foot { display: none !important; } body.is-printing-payment .pay-details-stamp { display: inline-block; } body.is-printing-payment .pay-details-head { background: #fff !important; border-bottom: 2px solid var(--rcb-red); } body.is-printing-payment .pay-details-progress { background: #fff !important; border-color: var(--line-2); } body.is-printing-payment .pay-details-section { break-inside: avoid; } } /* Диалог переписки */ .pm-dialog { width: min(720px, 94vw); max-height: min(86vh, 800px); padding: 0; border: 0; border-radius: 18px; background: var(--surface); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(14,19,32,.45); } .pm-dialog[open] { display: flex; flex-direction: column; } .pm-head { padding: 16px 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: linear-gradient(135deg, #FFF7FB 0%, #FFF1F7 100%); border-bottom: 1px solid #FFD9E8; } .pm-kicker { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; color: var(--rcb-red); } .pm-payment { margin-top: 4px; font-size: 14px; color: var(--rcb-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pm-payment .mono { font-weight: 700; } .pm-payment .muted { color: var(--text-3); } .pm-thread { flex: 1; min-height: 280px; overflow-y: auto; padding: 18px 22px; background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); scrollbar-gutter: stable; } .pm-thread::-webkit-scrollbar { width: 8px; } .pm-thread::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } .pm-thread::-webkit-scrollbar-thumb:hover { background: #CBD0DB; } .pm-loading, .pm-empty { padding: 40px 16px; text-align: center; color: var(--text-3); font-size: 13px; } .pm-msg { display: flex; gap: 12px; margin-bottom: 16px; max-width: 88%; } .pm-msg-bank { flex-direction: row; } .pm-msg-client { flex-direction: row-reverse; margin-left: auto; text-align: right; } .pm-msg-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; color: #fff; background: linear-gradient(135deg, var(--rcb-orange-2), var(--rcb-red-700)); } .pm-msg-bank .pm-msg-avatar { background: linear-gradient(135deg, #5C6573, #2F374A); } .pm-msg-bubble { position: relative; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 1px 3px rgba(14,19,32,.04); } .pm-msg-client .pm-msg-bubble { background: linear-gradient(135deg, var(--rcb-orange-2) 0%, var(--rcb-red) 100%); color: #fff; border-color: transparent; } .pm-msg-client .pm-msg-bubble .pm-msg-head b, .pm-msg-client .pm-msg-bubble .pm-msg-subject, .pm-msg-client .pm-msg-bubble .pm-msg-body { color: #fff; } .pm-msg-client .pm-msg-bubble .pm-msg-head small, .pm-msg-client .pm-msg-bubble .pm-msg-time { color: rgba(255,255,255,.8); } .pm-msg-client .pm-att { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.25); } .pm-msg-client .pm-att-ico { background: rgba(255,255,255,.25); color: #fff; } .pm-msg-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; text-align: left; } .pm-msg-head b { font-size: 13px; color: var(--text); } .pm-msg-head small { font-size: 11.5px; color: var(--text-3); } .pm-msg-time { font-size: 11px; color: var(--text-3); margin-left: auto; padding-left: 8px; } .pm-msg-subject { font-size: 12.5px; font-weight: 600; color: var(--rcb-ink); margin-bottom: 4px; text-align: left; } .pm-msg-body { font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; text-align: left; } .pm-attachments { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .pm-att { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); text-decoration: none; font-size: 12.5px; text-align: left; transition: border-color .12s ease, background .12s ease; } .pm-att:hover { border-color: var(--rcb-red); background: #fff; } .pm-att-ico { flex-shrink: 0; width: 36px; height: 36px; border-radius: 6px; background: var(--rcb-red-50); color: var(--rcb-red); font-size: 10px; font-weight: 700; display: grid; place-items: center; } .pm-att-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pm-att-text b { font-size: 12.5px; font-weight: 600; } .pm-att-text small { font-size: 11px; color: var(--text-3); } .pm-sign { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 10px; background: var(--ok-50); color: var(--ok); border-radius: 8px; font-size: 11.5px; text-align: left; width: fit-content; } .pm-msg-client .pm-sign { background: rgba(255,255,255,.2); color: #fff; } .pm-compose { padding: 14px 22px 16px; background: var(--surface); border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 8px; } .pm-compose .pm-subject { height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font: inherit; font-size: 13px; outline: none; } .pm-compose .pm-subject:focus { border-color: var(--rcb-red); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rcb-red) 10%, transparent); } .pm-compose textarea { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); resize: vertical; font: inherit; font-size: 13.5px; line-height: 1.45; outline: none; } .pm-compose textarea:focus { border-color: var(--rcb-red); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rcb-red) 10%, transparent); } .pm-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pm-compose-foot small { font-size: 11.5px; color: var(--text-3); } .pm-compose-foot .pn-submit-btn { height: 38px; padding: 0 18px; font-size: 13px; } @media (max-width: 767px) { .pm-msg { max-width: 100%; } .pm-msg-time { display: block; margin-left: 0; padding-left: 0; } } /* ── Заявки на депозит (BR 1.14, 3.16) ─────────────────────────── */ .dep-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .dep-product { position: relative; cursor: pointer; display: block; } .dep-product input { position: absolute; opacity: 0; pointer-events: none; } .dep-product-body { padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); height: 100%; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease; } .dep-product:hover .dep-product-body { border-color: #CBD0DB; transform: translateY(-1px); } .dep-product input:checked + .dep-product-body { border-color: var(--rcb-red); background: var(--rcb-red-50); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rcb-red) 15%, transparent); } .dep-product-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .dep-product-head b { font-size: 14px; color: var(--rcb-ink); font-weight: 700; } .dep-product-rate { font-size: 18px; font-weight: 700; color: var(--rcb-red); font-variant-numeric: tabular-nums; letter-spacing: -.4px; } .dep-product-body small { font-size: 12px; color: var(--text-2); line-height: 1.4; } .dep-product-meta { font-size: 11.5px; color: var(--text-3); margin-top: auto; } .dep-product-fx .dep-product-rate { color: var(--info); } .dep-product-fx input:checked + .dep-product-body { border-color: var(--info); background: rgba(40, 110, 188, .06); box-shadow: 0 0 0 3px rgba(40, 110, 188, .15); } /* Прогресс-воронка статуса */ .dep-flow { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; flex-wrap: wrap; } .dep-flow-step { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 999px; color: var(--text-3); font-size: 12.5px; font-weight: 500; background: var(--surface); } .dep-flow-step.is-done { border-color: var(--ok); background: var(--ok-50); color: var(--ok); font-weight: 600; } .dep-flow-step.is-current { box-shadow: 0 0 0 3px rgba(20, 134, 75, .15); } .dep-flow-ico { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; flex-shrink: 0; } .dep-flow-step.is-done .dep-flow-ico { background: var(--ok); color: #fff; border-color: var(--ok); } .dep-flow-bar { flex: 1; min-width: 24px; height: 2px; background: var(--line); border-radius: 1px; } .dep-flow-bar.is-done { background: var(--ok); } @media (max-width: 767px) { .dep-flow { flex-direction: column; align-items: stretch; } .dep-flow-bar { width: 2px; height: 20px; margin-left: 20px; } } /* ── Реестры платежей (BR 3.5) ─────────────────────────────────── */ .batch-upload { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .batch-drop { flex: 1; min-width: 280px; display: flex; align-items: center; gap: 14px; padding: 20px 22px; border: 1.5px dashed var(--line); border-radius: 14px; background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .batch-drop:hover, .batch-drop.over { border-color: var(--rcb-red); background: var(--rcb-red-50); color: var(--rcb-red); } .batch-drop svg { color: var(--rcb-red); flex-shrink: 0; } .batch-drop b { color: var(--text); font-size: 14px; } .batch-drop small { color: var(--text-3); font-size: 11.5px; } .batch-or { color: var(--text-3); font-size: 12px; padding: 0 6px; } .batch-row-error { background: rgba(184, 42, 42, .04); } .batch-row-error:hover { background: rgba(184, 42, 42, .08); } /* Кнопка удаления в диалоге подтверждения */ .pill-btn.pill-btn-danger { background: var(--bad); color: #fff; border-color: var(--bad); } .pill-btn.pill-btn-danger:hover { background: #9b2222; border-color: #9b2222; } /* ───────────────────────────────────────────────────────────────── «Перевод на карту любого банка» — стиль как на скриншоте ───────────────────────────────────────────────────────────────── */ .ct-page { max-width: 880px; margin: 0 auto; padding-top: 4px; } .ct-top { display: flex; align-items: center; gap: 14px; padding: 4px 0 2px; } .ct-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); text-decoration: none; padding: 4px 6px; margin-left: -6px; border-radius: 8px; transition: color .12s ease, background .12s ease; } .ct-back:hover { color: var(--text); background: var(--surface-2); } .ct-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--rcb-ink); letter-spacing: -.3px; } .ct-divider { border: 0; border-top: 1px solid var(--line-2); margin: 14px 0 20px; } .ct-form { display: flex; flex-direction: column; gap: 22px; } /* Две большие карточки + стрелка */ .ct-cards-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 16px; } .ct-card { position: relative; background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px; padding: 22px 24px 18px; display: flex; flex-direction: column; min-height: 188px; transition: border-color .15s ease, box-shadow .15s ease; } .ct-card:hover { border-color: #BFC5D2; } .ct-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .ct-card-head h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--rcb-ink); letter-spacing: -.3px; } .ct-card-sub { margin-top: 2px; font-size: 13.5px; color: var(--text-3); } .ct-card-head-row { align-items: center; } .ct-card-logo { display: block; height: 22px; width: auto; flex-shrink: 0; } .ct-card-body { margin-top: 16px; flex: 1; } /* Под визуал МИР-карты «С карты» нужно чуть больше высоты */ .ct-card.ct-card-from { min-height: 360px; gap: 12px; } .ct-card.ct-card-from .mir-card { margin-top: 14px; } .ct-card.ct-card-from .ct-select-field { margin-top: 6px; } /* «На карту» — такие же пропорции */ .ct-card.ct-card-to { min-height: 360px; gap: 12px; } .ct-card.ct-card-to .mir-card { margin-top: 14px; } /* Кнопка-«заметка» в правой карточке */ .ct-note-btn { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-3); display: inline-grid; place-items: center; cursor: pointer; transition: background .12s ease, color .12s ease; flex-shrink: 0; } .ct-note-btn:hover { background: var(--line-2); color: var(--text); } /* Стрелка между карточками */ .ct-arrow { display: grid; place-items: center; color: var(--text-3); align-self: center; margin: 0 -2px; } /* Поле-«select» внутри карточки */ .ct-select-field, .ct-input-field { display: block; position: relative; background: var(--surface-2); border: 1px solid transparent; border-radius: 14px; padding: 11px 16px 11px 16px; transition: border-color .12s ease, background .12s ease; cursor: text; } .ct-select-field { cursor: pointer; padding-right: 40px; } .ct-select-field:hover, .ct-input-field:hover { background: #EEF0F4; } .ct-select-field:focus-within, .ct-input-field:focus-within { border-color: var(--rcb-red); background: #fff; } .ct-select-label, .ct-input-label { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; } .ct-select { border: 0; background: transparent; width: 100%; padding: 0; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--rcb-ink); outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ct-select-chev { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } .ct-input { width: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--text); outline: none; } .ct-input::placeholder { color: var(--text-3); } .ct-input.mono { font-family: var(--mono); letter-spacing: 1px; font-weight: 600; font-size: 15px; } /* Остаток под селектом */ .ct-balance { margin-top: 14px; font-size: 12.5px; color: var(--text-3); line-height: 1.4; } .ct-balance span { color: var(--text-2); } /* Визуал банковской карты МИР внутри .ct-card-from Брендовая гамма РенКап Банка — розово-пурпурный градиент */ .mir-card { position: relative; width: 100%; aspect-ratio: 1.586 / 1; border-radius: 16px; background: radial-gradient(120% 100% at 0% 0%, var(--rcb-orange-2) 0%, transparent 55%), /* Глубокая тень бренда — снизу-справа создаёт «глубину» карты. Берётся от --rcb-red-700, дополнительно зачернённого на ~35%. */ radial-gradient(120% 100% at 100% 100%, color-mix(in srgb, var(--rcb-red-700) 65%, #000) 0%, transparent 60%), linear-gradient(135deg, var(--rcb-red) 0%, var(--rcb-red-700) 55%, color-mix(in srgb, var(--rcb-red-700) 78%, #000) 100%); color: #fff; box-shadow: 0 14px 30px -14px var(--rcb-shadow-hover), 0 2px 6px rgba(14, 19, 32, .08), inset 0 1px 0 rgba(255, 255, 255, .28); overflow: hidden; padding: 18px 22px 16px; display: flex; flex-direction: column; } /* Лёгкий блик в правом верхнем углу */ .mir-card::after { content: ""; position: absolute; top: -30%; right: -20%; width: 60%; height: 60%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); pointer-events: none; } .mir-card-chip { align-self: flex-start; } .mir-card-chip svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); } /* Среднее: номер + VALID THRU прижаты к низу, чтобы остался воздух сверху */ .mir-card-mid { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 10px; } .mir-card-number { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: clamp(14px, 4.6%, 22px); font-weight: 700; letter-spacing: 2px; text-shadow: 0 1px 2px rgba(0,0,0,.18); } .mir-block { flex: 1; text-align: center; } .mir-block.mir-last4 { color: #fff; } .mir-card-valid { display: inline-flex; align-items: center; gap: 5px; align-self: center; margin-top: 6px; font-family: var(--mono); color: #fff; } .mir-valid-label { font-size: 7.5px; letter-spacing: .4px; line-height: 1; text-align: right; opacity: .85; font-weight: 600; } .mir-valid-date { font-size: 13px; font-weight: 700; letter-spacing: 1px; } /* Низ: имя слева, бренд справа */ .mir-card-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .mir-card-holder { font-family: 'Arial', sans-serif; font-size: clamp(11px, 3.2%, 16px); font-weight: 600; letter-spacing: .8px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mir-card-brand { font-family: 'Arial Black', 'Arial', sans-serif; font-size: clamp(16px, 5%, 24px); font-weight: 900; letter-spacing: -1px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); flex-shrink: 0; } /* Правая карточка «На карту» — нейтрально-тёмный градиент (любого банка) */ .mir-card.mir-card-to { background: radial-gradient(120% 100% at 0% 0%, #4A5568 0%, transparent 55%), radial-gradient(120% 100% at 100% 100%, #0E131F 0%, transparent 60%), linear-gradient(135deg, #2D3748 0%, #1F2937 55%, #111827 100%); box-shadow: 0 14px 30px -14px rgba(17, 24, 39, .55), 0 2px 6px rgba(14, 19, 32, .08), inset 0 1px 0 rgba(255, 255, 255, .18); } /* Плейсхолдеры holder и valid на правой карте — приглушённые */ .mir-card-holder.mir-card-holder-placeholder, .mir-card-valid.mir-card-valid-placeholder { color: rgba(255,255,255,.45); } /* Если бренд определён — добавим лёгкий цветовой акцент в свечение */ .mir-card.mir-card-to[data-brand="visa"] { box-shadow: 0 14px 30px -14px rgba(26, 31, 113, .65), 0 2px 6px rgba(14, 19, 32, .08), inset 0 1px 0 rgba(255, 255, 255, .18); } .mir-card.mir-card-to[data-brand="mastercard"] { box-shadow: 0 14px 30px -14px rgba(235, 0, 27, .55), 0 2px 6px rgba(14, 19, 32, .08), inset 0 1px 0 rgba(255, 255, 255, .18); } .mir-card.mir-card-to[data-brand="mir"] { box-shadow: 0 14px 30px -14px rgba(15, 117, 78, .65), 0 2px 6px rgba(14, 19, 32, .08), inset 0 1px 0 rgba(255, 255, 255, .18); } @media (max-width: 480px) { .mir-card { padding: 14px 16px 12px; } } /* Логотип бренда в правом нижнем углу карточки */ .ct-card-brand { position: absolute; right: 22px; bottom: 16px; pointer-events: none; } .ct-card-brand-row { position: absolute; right: 22px; bottom: 16px; display: flex; gap: 12px; align-items: center; pointer-events: none; } .ct-brand-ico { display: inline-flex; align-items: center; transition: opacity .18s ease, filter .18s ease; filter: grayscale(.6); opacity: .55; } .ct-brand-ico.active { filter: grayscale(0); opacity: 1; } .ct-brand-ico.dimmed { filter: grayscale(1); opacity: .25; } /* Сумма + назначение — стопкой, минималистично */ .ct-inputs-stack { display: flex; flex-direction: column; gap: 10px; max-width: 540px; } .ct-input-field.ct-amount-field { /* совпадает с обычным */ } .ct-input-field .ct-amount { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; } .ct-input-suffix { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--text-3); font-weight: 600; pointer-events: none; } .ct-help-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); display: grid; place-items: center; cursor: help; } .ct-help-btn:hover { color: var(--text-2); background: var(--surface-2); } /* Submit row — жёлтая кнопка как на скриншоте */ .ct-submit-row { display: flex; align-items: center; gap: 18px; margin-top: 8px; } .ct-submit-btn { border: 0; cursor: pointer; height: 46px; padding: 0 28px; border-radius: 14px; background: var(--rcb-gradient-3); color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: -.1px; transition: transform .12s ease, box-shadow .15s ease, filter .15s ease; box-shadow: 0 8px 22px -8px var(--rcb-shadow-hover); } .ct-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--rcb-red) 65%, transparent); } .ct-submit-btn:active { transform: translateY(0); } .ct-submit-btn:disabled { opacity: .65; cursor: progress; } .ct-submit-note { font-size: 13px; color: var(--text-3); } /* Адаптив */ @media (max-width: 767px) { .ct-cards-row { grid-template-columns: 1fr; } .ct-arrow { transform: rotate(90deg); padding: 4px 0; } } /* ───────────────────────────────────────────────────────────────── Страница «О банке» (/settings/about) ───────────────────────────────────────────────────────────────── */ .about-hero { margin-top: 8px; padding: 26px 28px; border-radius: 18px; background: radial-gradient(120% 100% at 100% 0%, rgba(244,185,66,.22), transparent 55%), /* Та же логика, что у .pn-hero: navy темы → тёмный микс ink+brand. */ linear-gradient(135deg, var(--rcb-ink) 0%, color-mix(in srgb, var(--rcb-ink) 70%, var(--rcb-red-700)) 50%, color-mix(in srgb, var(--rcb-ink) 35%, var(--rcb-red-700)) 100%); color: #fff; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; box-shadow: 0 18px 40px -20px rgba(26, 35, 80, .55); position: relative; overflow: hidden; } .about-hero::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 280px; height: 280px; background: radial-gradient(circle, color-mix(in srgb, var(--rcb-red) 22%, transparent), transparent 65%); pointer-events: none; } .about-hero-kicker { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; opacity: .8; } .about-hero-title { margin: 6px 0 8px; font-size: 26px; font-weight: 700; letter-spacing: -.3px; } .about-hero-sub { font-size: 14px; opacity: .9; margin-bottom: 14px; } .about-hero-status .status.ok { background: rgba(89,221,153,.22); color: #B5F4D2; border: 1px solid rgba(89,221,153,.35); } .about-hero-status .muted { color: rgba(255,255,255,.62) !important; } .about-hero-logo { width: 200px; height: 90px; border-radius: 14px; background: rgba(255,255,255,.95); display: grid; place-items: center; padding: 14px 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); } .about-hero-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Сетка карточек */ .about-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .about-card-history, .about-card-sources { grid-column: 1 / -1; } .about-card.card { padding: 4px 22px 18px; } /* Список «название — значение» */ .about-dl { margin: 4px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; font-size: 13.5px; } .about-dl dt { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; align-self: center; } .about-dl dd { margin: 0; color: var(--text); font-weight: 500; word-break: break-word; } .about-dl dd.mono { font-family: var(--mono); letter-spacing: .3px; } .about-link { color: var(--rcb-red); font-weight: 600; text-decoration: none; } .about-link:hover { text-decoration: underline; } .about-history p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-2); } /* Карточка официальных источников — ссылки-плитки */ .about-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; padding: 4px 0 2px; } .about-source-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .12s ease, background .12s ease, transform .12s ease; } .about-source-link:hover { border-color: var(--rcb-red); background: var(--rcb-red-50); transform: translateY(-1px); } .about-source-link:hover svg:last-child { color: var(--rcb-red); } .about-source-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--rcb-red-50); color: var(--rcb-red); display: grid; place-items: center; flex-shrink: 0; } .about-source-link > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .about-source-link b { font-size: 13.5px; font-weight: 600; color: var(--text); } .about-source-link small { font-size: 11.5px; color: var(--text-3); } .about-source-link > svg:last-child { color: var(--text-3); flex-shrink: 0; transition: color .12s ease; } @media (max-width: 767px) { .about-hero { grid-template-columns: 1fr; padding: 22px; } .about-hero-logo { width: 140px; height: 60px; padding: 10px 14px; } .about-grid { grid-template-columns: 1fr; } .about-dl { grid-template-columns: 1fr; gap: 2px 0; } .about-dl dt { margin-top: 8px; } } /* Адаптив */ @media (max-width: 1199px) { .pn-layout { grid-template-columns: 1fr; } .pn-preview-col { position: static; max-width: 540px; } } @media (max-width: 767px) { .pn-hero { grid-template-columns: 1fr; padding: 22px; } .pn-hero-ico { display: none; } .pn-hero-title { font-size: 22px; } .pn-grid-2 { grid-template-columns: 1fr; } .pn-amount-input { font-size: 26px; } .pn-submit-row { flex-direction: column; align-items: stretch; } .pn-submit-btn { justify-content: center; } } /* Адаптив */ @media (max-width: 1199px) { .issue-hero { grid-template-columns: 1fr; padding: 24px; } .issue-hero .ih-cards { height: 220px; justify-self: center; max-width: 320px; width: 100%; } } @media (max-width: 767px) { .issue-hero { padding: 20px; } .issue-hero .ih-title { font-size: 24px; } .issue-hero .ih-cards { display: none; } .if-tile-grid { grid-template-columns: 1fr; } .if-design-grid { grid-template-columns: repeat(2, 1fr); } .if-pair { grid-template-columns: 1fr; } .if-submit { flex-direction: column; align-items: stretch; } .if-submit .pill-btn { width: 100%; } } /* ── Корпоративные карты: переключатель Таблица ↔ Карточки ───── */ .cards-view-card .view-switch button { padding: 0 12px; } .cards-view-card[data-view="table"] .cards-view-grid { display: none; } .cards-view-card[data-view="cards"] .cards-view-table { display: none; } /* Таблица не должна обрезаться скруглением карточки */ .cards-view-card .cards-view-table { padding: 0 4px 8px; } .cards-table .lim-bar { display: inline-block; height: 6px; background: var(--line-2); border-radius: 999px; overflow: hidden; vertical-align: middle; } .cards-table .lim-bar > i { display: block; height: 100%; background: var(--rcb-orange); border-radius: 999px; } .cards-table .lim-bar.low > i { background: var(--ok); } .cards-table .lim-bar.mid > i { background: var(--rcb-gold); } .cards-table .lim-bar.high > i { background: var(--rcb-red); } /* ── Заявки на карты: диаграмма бизнес-процесса ──────────────── */ .bpmn-card { padding-bottom: 4px; } .bpmn-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 18px 14px; } .bpmn-node { flex: 1 1 90px; min-width: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 8px; border-radius: var(--r-md); border: 1.5px solid transparent; background: var(--surface-2); color: var(--text); text-decoration: none; text-align: center; transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease; position: relative; cursor: pointer; } .bpmn-node:hover { background: var(--surface); border-color: #CBD0DB; transform: translateY(-1px); box-shadow: var(--shadow-1); } .bpmn-node .bpmn-step { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-3); font-weight: 600; margin-bottom: 4px; } .bpmn-node .bpmn-label { font-size: 12.5px; font-weight: 700; color: var(--rcb-ink); line-height: 1.2; } .bpmn-node .bpmn-count { margin-top: 6px; font-size: 16px; font-weight: 800; letter-spacing: -.3px; font-variant-numeric: tabular-nums; color: var(--rcb-ink); background: #fff; min-width: 32px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); } /* Цвета по статусам — фон узла + кружок счётчика */ .bpmn-node.info { background: #EFF4FF; } .bpmn-node.info .bpmn-count { color: var(--info); border-color: rgba(31,95,191,.25); } .bpmn-node.warn { background: #FFF4DD; } .bpmn-node.warn .bpmn-count { color: var(--warn); border-color: rgba(201,122,0,.25); } .bpmn-node.ok { background: #E6F4EC; } .bpmn-node.ok .bpmn-count { color: var(--ok); border-color: rgba(20,134,75,.25); } .bpmn-node.bad { background: #FBEAEA; } .bpmn-node.bad .bpmn-count { color: var(--bad); border-color: rgba(184,42,42,.25); } .bpmn-node.muted { background: #EEF0F4; } .bpmn-node.muted .bpmn-count { color: var(--text-2); } /* Выбранный (активный фильтр) — оранжевая обводка + чуть подсветить */ .bpmn-node.selected { border-color: var(--rcb-orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rcb-red) 18%, transparent); transform: translateY(-1px); } /* Стрелка между узлами */ .bpmn-arrow { display: flex; align-items: center; color: var(--text-3); padding: 0 2px; flex-shrink: 0; flex-grow: 0; flex-basis: auto; } /* Терминальная строка */ .bpmn-terminal { display: flex; align-items: center; gap: 10px; padding: 4px 18px 18px; flex-wrap: wrap; border-top: 1px dashed var(--line-2); margin-top: 4px; padding-top: 14px; } .bpmn-terminal-label { font-size: 11.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; } .bpmn-node.bpmn-node-sm { flex: 0 0 auto; min-width: 120px; padding: 8px 12px; flex-direction: row; gap: 10px; } .bpmn-node.bpmn-node-sm .bpmn-count { margin-top: 0; height: 24px; min-width: 28px; font-size: 14px; } /* Маленький дизайн-чип (миниатюра карты) в таблице */ .design-chip { width: 36px; height: 24px; border-radius: 4px; background: linear-gradient(135deg, #1a2350, #0f1632); box-shadow: 0 2px 4px -1px rgba(14,19,32,.25); } .design-chip.orange-bg { background: var(--rcb-gradient-3); } .design-chip.navy { background: linear-gradient(135deg, #1a2350, #0f1632); } .design-chip.gold { background: linear-gradient(135deg, #C97A00, #8C5300); } .design-chip.red { background: linear-gradient(135deg, var(--rcb-red), var(--rcb-red-700)); } .design-chip.muted-bg { background: repeating-linear-gradient(135deg, #EEF0F4 0 4px, #E6E8EE 4px 8px); border: 1px dashed #CBD0DB; } @media (max-width: 1023px) { .bpmn-flow { gap: 4px; } .bpmn-node { min-width: 110px; padding: 10px 8px; } .bpmn-node .bpmn-label { font-size: 12.5px; } } /* ────────────────────────────────────────────────────────────── Мобильный гамбургер + drawer-меню ────────────────────────────────────────────────────────────── */ /* Кнопка-гамбургер */ .mob-menu-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); flex-shrink: 0; margin-right: 10px; transition: background .12s, border-color .12s; } .mob-menu-btn:hover { background: var(--surface-2); border-color: #CBD0DB; } @media (min-width: 768px) { .mob-menu-btn { display: none; } } /* Затемнение под drawer */ .mob-backdrop { display: none; position: fixed; inset: 0; background: rgba(14,19,32,.45); backdrop-filter: blur(2px); z-index: 100; opacity: 0; transition: opacity .25s ease; } .mob-backdrop.open { display: block; opacity: 1; } /* Сам drawer */ .mob-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 88vw); background: var(--surface); z-index: 101; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); box-shadow: 4px 0 32px rgba(14,19,32,.18); overflow: hidden; } .mob-drawer.open { transform: translateX(0); } /* Шапка drawer: компания + кнопка закрыть */ .mob-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 14px; border-bottom: 1px solid var(--line-2); flex-shrink: 0; } .mob-drawer-company { display: flex; align-items: center; gap: 12px; } .mob-drawer-company .company-avatar { width: 40px; height: 40px; border-radius: 12px; font-size: 13.5px; } .mob-drawer-company-info b { display: block; font-size: 13.5px; color: var(--rcb-ink); line-height: 1.2; } .mob-drawer-company-info small { font-size: 11.5px; color: var(--text-3); } .mob-drawer-close { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); display: grid; place-items: center; flex-shrink: 0; transition: background .12s, color .12s; } .mob-drawer-close:hover { background: var(--bad-50); color: var(--bad); border-color: var(--bad); } /* Навигация внутри drawer */ .mob-nav { flex: 1; overflow-y: auto; padding: 10px 10px 16px; display: flex; flex-direction: column; gap: 2px; } .mob-nav::-webkit-scrollbar { width: 4px; } .mob-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; } .mob-nav-group { margin-top: 6px; } .mob-nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-3); font-weight: 600; padding: 10px 10px 5px; } .mob-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--text); transition: background .1s, color .1s; position: relative; } .mob-nav-item svg { color: var(--text-3); flex-shrink: 0; } .mob-nav-item:hover { background: var(--surface-2); } .mob-nav-item.active { background: #fce5f0; color: var(--rcb-ink); font-weight: 600; } .mob-nav-item.active svg { color: var(--rcb-orange-700); } .mob-nav-item .nav-badge { margin-left: auto; } /* Подвал drawer: менеджер + лицензия */ .mob-drawer-foot { padding: 14px 16px 20px; border-top: 1px solid var(--line-2); flex-shrink: 0; } .mob-manager { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--text-2); font-size: 12.5px; } .mob-manager svg { color: var(--rcb-orange); flex-shrink: 0; } .mob-manager b { display: block; color: var(--rcb-ink); font-size: 13px; line-height: 1.2; } .mob-manager-phone { color: var(--rcb-orange-700); font-weight: 600; font-size: 12.5px; } .mob-drawer-legal { display: block; font-size: 10.5px; color: var(--text-3); line-height: 1.4; } /* ── Универсальные диалоги Импорт/Экспорт (используется на всех таблицах) ── */ .cp-io-dialog { border: none; border-radius: 14px; padding: 0; max-width: 540px; width: calc(100% - 32px); box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 4px 14px rgba(0,0,0,.08); inset: 0; margin: auto; } /* Sidebar-вариант шире — туда не влезает 540px (6 форматов в ряд) */ .cp-io-dialog--sidebar { max-width: 820px; } /* Timeline-вариант — однокоонный вертикальный список, ~560px */ .cp-io-dialog--timeline { max-width: 580px; } /* Toggle-вариант: сегментная панель + summary, ~640px */ .cp-io-dialog--toggle { max-width: 640px; } /* Preview-вариант: сайдбар форматов слева + светлая таблица превью справа */ .cp-io-dialog--preview { max-width: 760px; } /* Анимация спиннера для кнопки экспорта во время загрузки */ @keyframes spin { to { transform: rotate(360deg); } } /* Done-вариант — компактное окошко успеха */ .cp-io-dialog--done { max-width: 420px; } .cp-io-done-body { padding: 26px 24px 22px; text-align: center; } .cp-io-done-ico { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #D1EBDB 0%, #A8DCC0 100%); color: #14864B; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 14px; box-shadow: 0 0 0 6px rgba(20,134,75,.10), 0 8px 20px rgba(20,134,75,.20); } .cp-io-done-body h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: #1a1a2e; } /* Кликабельная ссылка-чип «открыть файл» */ .cp-io-done-link { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 6px; padding: 9px 14px; background: var(--rcb-tint-06); border: 1.5px solid var(--rcb-tint-16); border-radius: 8px; color: var(--rcb-red); text-decoration: none; font-weight: 600; max-width: 100%; transition: all .15s ease; cursor: pointer; } .cp-io-done-link:hover { background: var(--rcb-tint-12); border-color: var(--rcb-red); transform: translateY(-1px); box-shadow: 0 4px 10px var(--rcb-shadow-soft); } .cp-io-done-link-ico { flex-shrink: 0; opacity: .8; } .cp-io-done-file { font-family: var(--mono, 'Consolas', monospace); font-size: 12.5px; letter-spacing: .2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-io-done-hint { font-size: 11.5px; color: var(--text-3, #6a6a72); margin: 0 0 16px; padding: 0 6px; line-height: 1.45; } .cp-io-done-actions { display: flex; justify-content: center; } .cp-io-done-actions .pill-btn { min-width: 96px; justify-content: center; } .cp-io-dialog::backdrop { background: rgba(15,17,28,.45); backdrop-filter: blur(2px); } .cp-io-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 22px 14px; } .cp-io-head h3 { margin: 2px 0 0; font-size: 18px; font-weight: 700; color: #1a1a2e; } .cp-io-head-sub { font-size: 12.5px; color: var(--text-3, #6a6a72); margin-top: 4px; } .cp-io-kicker { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rcb-red); margin-bottom: 2px; } .cp-io-x { background: none; border: none; font-size: 24px; cursor: pointer; color: #6a6a72; line-height: 1; padding: 0 4px; } .cp-io-body { padding: 8px 22px 4px; } .cp-io-foot { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 14px 22px 18px; border-top: 1px solid var(--line-2, #eaeaef); margin-top: 0; } /* ── Horizontal layout: ряд форматов сверху + детали снизу ───── */ .cp-io-grid { display: flex; flex-direction: column; border-top: 1px solid var(--line-2, #eaeaef); border-bottom: 1px solid var(--line-2, #eaeaef); } .cp-io-side { background: linear-gradient(180deg, #F8F9FB 0%, #F1F3F7 100%); border-bottom: 1px solid var(--line-2, #eaeaef); padding: 14px 16px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .cp-io-side-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; cursor: pointer; user-select: none; background: #fff; border: 2px solid #D6DAE3; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--text-2, #3F4756); text-align: center; position: relative; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; } .cp-io-side-opt:hover { border-color: #95A0B5; background: #FAFBFD; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15,22,50,.06); } .cp-io-side-opt input[type=radio] { position: absolute; opacity: 0; pointer-events: none; } .cp-io-side-opt.is-active { border-color: var(--rcb-red); background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--rcb-red) 10%, #fff) 100%); color: var(--rcb-red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rcb-red) 14%, transparent), 0 6px 18px color-mix(in srgb, var(--rcb-red) 18%, transparent); transform: translateY(-2px); } .cp-io-side-opt.is-active::after { content: ''; position: absolute; left: 50%; bottom: -2px; width: 50%; height: 3px; background: var(--rcb-red); border-radius: 3px 3px 0 0; transform: translateX(-50%); } .cp-io-side-ico { width: 38px; height: 38px; border-radius: 10px; background: #EEEEF0; color: #6A6A72; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s ease, color .15s ease, transform .15s ease; } .cp-io-side-opt:hover .cp-io-side-ico { transform: scale(1.05); } /* Контрастная подсветка иконки активного формата (по типу формата) */ .cp-io-side-opt.fmt-xlsx.is-active .cp-io-side-ico { background: #D1EBDB; color: #1D6F42; } .cp-io-side-opt.fmt-docx.is-active .cp-io-side-ico { background: #DBE4F3; color: #1B4F8A; } .cp-io-side-opt.fmt-pdf.is-active .cp-io-side-ico { background: #FBD9D9; color: #B91C1C; } .cp-io-side-opt.fmt-csv.is-active .cp-io-side-ico { background: #E1E5EC; color: #3F4756; } .cp-io-side-opt.fmt-txt.is-active .cp-io-side-ico { background: #FDE6B1; color: #B45309; } .cp-io-side-opt.fmt-json.is-active .cp-io-side-ico { background: #C8D6FB; color: #1D4ED8; } .cp-io-side-ico svg { width: 19px; height: 19px; } .cp-io-side-label { font-size: 13px; font-weight: 700; letter-spacing: .2px; } .cp-io-side-ext { font-size: 11px; font-weight: 500; color: var(--text-3, #6a6a72); font-family: var(--mono, 'Consolas', monospace); letter-spacing: .3px; } .cp-io-side-opt.is-active .cp-io-side-ext { color: var(--rcb-red); opacity: .8; } .cp-io-side-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rcb-red); color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px color-mix(in srgb, var(--rcb-red) 30%, transparent); } /* Деталь — стек панелей, активная видна через .is-active */ .cp-io-detail-stack { position: relative; background: #fff; } .cp-io-detail { padding: 18px 22px 20px; display: none; } .cp-io-detail.is-active { display: flex; gap: 18px; align-items: flex-start; } .cp-io-detail-ico { width: 56px; height: 56px; border-radius: 13px; background: #EEEEF0; color: #6A6A72; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 16px rgba(15,22,50,.06); } .cp-io-detail.fmt-xlsx .cp-io-detail-ico { background: #D1EBDB; color: #1D6F42; } .cp-io-detail.fmt-docx .cp-io-detail-ico { background: #DBE4F3; color: #1B4F8A; } .cp-io-detail.fmt-pdf .cp-io-detail-ico { background: #FBD9D9; color: #B91C1C; } .cp-io-detail.fmt-csv .cp-io-detail-ico { background: #E1E5EC; color: #3F4756; } .cp-io-detail.fmt-txt .cp-io-detail-ico { background: #FDE6B1; color: #B45309; } .cp-io-detail.fmt-json .cp-io-detail-ico { background: #C8D6FB; color: #1D4ED8; } .cp-io-detail-body { flex: 1; min-width: 0; } .cp-io-detail-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: #1a1a2e; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cp-io-detail-badge { font-size: 10.5px; font-weight: 700; background: var(--rcb-red); color: #fff; padding: 3px 8px; border-radius: 999px; letter-spacing: .04em; text-transform: lowercase; } .cp-io-detail-desc { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-3, #6a6a72); } .cp-io-meta { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line-2, #eaeaef); } .cp-io-meta dt { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3, #6a6a72); font-weight: 700; } .cp-io-meta dd { margin: 0; font-size: 12.5px; color: var(--text, #1a1a2e); font-weight: 500; } /* Адаптив: на средних экранах сворачиваем в 3×2, на узких — горизонтальный скролл */ @media (max-width: 760px) { .cp-io-side { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .cp-io-dialog--sidebar { max-width: 540px; } .cp-io-side { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 120px; overflow-x: auto; padding: 12px; } .cp-io-detail.is-active { flex-direction: column; gap: 10px; } .cp-io-detail-ico { width: 44px; height: 44px; } } /* ── Timeline-вариант: вертикальный список с линией и точками ──── */ .cp-io-steps { padding: 4px 22px 12px; border-top: 1px solid var(--line-2, #eaeaef); } .cp-io-step { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 0; margin-left: 18px; padding-left: 22px; border-left: 2px solid var(--line-2, #eaeaef); position: relative; cursor: pointer; user-select: none; transition: background .15s ease, border-color .15s ease, margin-left .15s ease, border-left-width .15s ease; } .cp-io-step + .cp-io-step { margin-top: 0; } .cp-io-step input[type=radio] { position: absolute; opacity: 0; pointer-events: none; } /* Кружок-маркер на линии */ .cp-io-step::before { content: ''; position: absolute; left: -8px; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--line, #E6E8EE); transform: translateY(-50%); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, width .15s ease, height .15s ease, left .15s ease; z-index: 1; } /* Hover-эффект */ .cp-io-step:hover { background: var(--surface-2, #FAFAFB); border-radius: 0 10px 10px 0; } .cp-io-step:hover::before { border-color: #95A0B5; } /* Активный шаг */ .cp-io-step.is-active { border-left-color: var(--fc, var(--rcb-red)); border-left-width: 3px; margin-left: 17px; background: linear-gradient(90deg, color-mix(in srgb, var(--fc, var(--rcb-red)) 6%, #fff), transparent 70%); border-radius: 0 12px 12px 0; } .cp-io-step.is-active::before { width: 18px; height: 18px; left: -11px; background: var(--fc, var(--rcb-red)); border-color: var(--fc, var(--rcb-red)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fc, var(--rcb-red)) 18%, transparent), 0 4px 10px color-mix(in srgb, var(--fc, var(--rcb-red)) 24%, transparent); } /* Цветовые токены формата для активного состояния */ .cp-io-step.fmt-xlsx { --fc: #1D6F42; } .cp-io-step.fmt-docx { --fc: #1B4F8A; } .cp-io-step.fmt-pdf { --fc: #B91C1C; } .cp-io-step.fmt-csv { --fc: #3F4756; } .cp-io-step.fmt-txt { --fc: #B45309; } .cp-io-step.fmt-json { --fc: #1D4ED8; } /* Иконка формата */ .cp-io-step-ico { width: 38px; height: 38px; border-radius: 10px; background: #EEEEF0; color: #6A6A72; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s ease, color .15s ease, transform .15s ease; } .cp-io-step.is-active .cp-io-step-ico { transform: scale(1.05); } .cp-io-step.fmt-xlsx.is-active .cp-io-step-ico { background: #D1EBDB; color: #1D6F42; } .cp-io-step.fmt-docx.is-active .cp-io-step-ico { background: #DBE4F3; color: #1B4F8A; } .cp-io-step.fmt-pdf.is-active .cp-io-step-ico { background: #FBD9D9; color: #B91C1C; } .cp-io-step.fmt-csv.is-active .cp-io-step-ico { background: #E1E5EC; color: #3F4756; } .cp-io-step.fmt-txt.is-active .cp-io-step-ico { background: #FDE6B1; color: #B45309; } .cp-io-step.fmt-json.is-active .cp-io-step-ico { background: #C8D6FB; color: #1D4ED8; } /* Текстовая часть */ .cp-io-step-info { flex: 1; min-width: 0; } .cp-io-step-info b { font-size: 14.5px; font-weight: 700; color: #1a1a2e; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .cp-io-step.is-active .cp-io-step-info b { color: var(--fc); } .cp-io-step-ext { color: var(--text-3, #6a6a72); font-family: var(--mono, 'Consolas', monospace); font-weight: 500; font-size: 12px; letter-spacing: .3px; } .cp-io-step.is-active .cp-io-step-ext { color: var(--fc); opacity: .8; } .cp-io-step-info small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--text-3, #6a6a72); } /* Бэйдж "рекомендуем" */ .cp-io-step-badge { font-size: 10.5px; font-weight: 700; background: var(--rcb-red); color: #fff; padding: 4px 9px; border-radius: 999px; letter-spacing: .04em; white-space: nowrap; flex-shrink: 0; box-shadow: 0 2px 6px color-mix(in srgb, var(--rcb-red) 30%, transparent); } /* Адаптив timeline-варианта */ @media (max-width: 480px) { .cp-io-steps { padding: 4px 14px 12px; } .cp-io-step { padding-left: 16px; gap: 10px; } .cp-io-step-badge { display: none; } } /* ── Toggle-вариант: segmented control + summary-карточки ──────── */ .cp-io-toggle { margin: 4px 22px 14px; display: grid; grid-template-columns: repeat(6, 1fr); border: 2px solid var(--line, #E6E8EE); border-radius: 14px; overflow: hidden; background: var(--surface-2, #FAFAFB); } .cp-io-toggle-opt { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 4px 12px; cursor: pointer; user-select: none; border-right: 1px solid var(--line, #E6E8EE); position: relative; transition: background .15s ease, color .15s ease; background: #fff; } .cp-io-toggle-opt:last-child { border-right: 0; } .cp-io-toggle-opt input[type=radio] { position: absolute; opacity: 0; pointer-events: none; } .cp-io-toggle-opt:hover { background: var(--surface-2, #FAFAFB); } /* Цветовые токены */ .cp-io-toggle-opt.fmt-xlsx { --fc: #1D6F42; } .cp-io-toggle-opt.fmt-docx { --fc: #1B4F8A; } .cp-io-toggle-opt.fmt-pdf { --fc: #B91C1C; } .cp-io-toggle-opt.fmt-csv { --fc: #3F4756; } .cp-io-toggle-opt.fmt-txt { --fc: #B45309; } .cp-io-toggle-opt.fmt-json { --fc: #1D4ED8; } /* Активный сегмент: заливается цветом формата, текст белый */ .cp-io-toggle-opt.is-active { background: var(--fc); color: #fff; box-shadow: inset 0 0 0 2px var(--fc), 0 4px 14px color-mix(in srgb, var(--fc) 30%, transparent); z-index: 1; } .cp-io-toggle-ico { width: 32px; height: 32px; border-radius: 8px; background: #EEEEF0; color: #6A6A72; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .cp-io-toggle-opt.is-active .cp-io-toggle-ico { background: rgba(255,255,255,.22); color: #fff; } .cp-io-toggle-opt b { font-size: 12.5px; font-weight: 700; letter-spacing: .2px; } .cp-io-toggle-opt small { font-size: 10.5px; font-family: var(--mono, 'Consolas', monospace); color: var(--text-3, #6a6a72); letter-spacing: .3px; } .cp-io-toggle-opt.is-active small { color: rgba(255,255,255,.88); } .cp-io-toggle-star { position: absolute; top: 5px; right: 5px; color: var(--rcb-red); font-size: 12px; text-shadow: 0 1px 2px rgba(0,0,0,.05); } .cp-io-toggle-opt.is-active .cp-io-toggle-star { color: #FFE082; } /* Summary: 3 карточки с информацией */ .cp-io-summary { margin: 0 22px; display: grid; grid-template-columns: 1.4fr 1.4fr 1fr; gap: 10px; } .cp-io-summary.fmt-xlsx { --fc: #1D6F42; } .cp-io-summary.fmt-docx { --fc: #1B4F8A; } .cp-io-summary.fmt-pdf { --fc: #B91C1C; } .cp-io-summary.fmt-csv { --fc: #3F4756; } .cp-io-summary.fmt-txt { --fc: #B45309; } .cp-io-summary.fmt-json { --fc: #1D4ED8; } .cp-io-summary-card { background: var(--surface-2, #FAFAFB); border: 1px solid var(--line-2, #eaeaef); border-radius: 10px; padding: 10px 12px; text-align: center; min-width: 0; } .cp-io-summary-label { font-size: 10px; color: var(--text-3, #6a6a72); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; } .cp-io-summary-value { font-size: 14px; font-weight: 700; margin-top: 4px; color: var(--text, #1a1a2e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-io-summary-value .ext { color: var(--fc, var(--rcb-red)); font-family: var(--mono, 'Consolas', monospace); font-weight: 600; margin-left: 2px; } /* Описание формата под summary */ .cp-io-toggle-desc { margin: 12px 22px 4px; padding: 12px 14px; background: var(--rcb-tint-06); border: 1px solid var(--rcb-tint-12); border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-2, #3F4756); } /* Адаптив: на узких экранах segmented control разрешает перенос в 3×2 */ @media (max-width: 600px) { .cp-io-dialog--toggle { max-width: 540px; } .cp-io-toggle { grid-template-columns: repeat(3, 1fr); } .cp-io-toggle-opt:nth-child(3n) { border-right: 0; } .cp-io-toggle-opt:nth-child(-n+3) { border-bottom: 1px solid var(--line, #E6E8EE); } .cp-io-summary { grid-template-columns: 1fr 1fr; } .cp-io-summary-card:nth-child(3) { grid-column: 1 / -1; } } /* ── Preview-вариант: сайдбар форматов + светлая таблица ─────────── */ .cp-io-pv-body { display: grid; grid-template-columns: 220px 1fr; border-top: 1px solid var(--line-2, #eaeaef); border-bottom: 1px solid var(--line-2, #eaeaef); min-height: 320px; } /* Цветовые токены формата */ .cp-io-list-opt.fmt-xlsx, .cp-io-preview.fmt-xlsx { --fc: #1D6F42; --fbg: #D1EBDB; --fbg-soft: #E6F4EC; } .cp-io-list-opt.fmt-docx, .cp-io-preview.fmt-docx { --fc: #1B4F8A; --fbg: #DBE4F3; --fbg-soft: #E8EFF8; } .cp-io-list-opt.fmt-pdf, .cp-io-preview.fmt-pdf { --fc: #B91C1C; --fbg: #FBD9D9; --fbg-soft: #FDEAEA; } .cp-io-list-opt.fmt-csv, .cp-io-preview.fmt-csv { --fc: #3F4756; --fbg: #E1E5EC; --fbg-soft: #EDEFF3; } .cp-io-list-opt.fmt-txt, .cp-io-preview.fmt-txt { --fc: #B45309; --fbg: #FDE6B1; --fbg-soft: #FEF3C7; } .cp-io-list-opt.fmt-json, .cp-io-preview.fmt-json { --fc: #1D4ED8; --fbg: #C8D6FB; --fbg-soft: #DDE7FD; } /* Сайдбар */ .cp-io-list { background: linear-gradient(180deg, #FBFBFC, #F5F6F9); border-right: 1px solid var(--line-2, #eaeaef); padding: 10px 8px; display: flex; flex-direction: column; gap: 4px; } .cp-io-list-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; user-select: none; font-size: 13px; font-weight: 700; color: var(--text-2, #3F4756); border: 1.5px solid transparent; transition: all .15s ease; } .cp-io-list-opt input[type=radio] { position: absolute; opacity: 0; pointer-events: none; } .cp-io-list-opt:hover { background: #fff; border-color: var(--line, #E6E8EE); } .cp-io-list-ico { width: 28px; height: 28px; border-radius: 7px; background: #EEEEF0; color: #6A6A72; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, color .15s; } .cp-io-list-label { flex: 1; } .cp-io-list-ext { font-family: var(--mono, 'Consolas', monospace); font-size: 10.5px; font-weight: 500; color: var(--text-3, #6a6a72); } .cp-io-list-star { color: var(--rcb-red); font-size: 11px; } /* Активный пункт — заливка цветом формата, белый текст */ .cp-io-list-opt.is-active { background: var(--fc); color: #fff; border-color: var(--fc); box-shadow: 0 4px 12px color-mix(in srgb, var(--fc) 28%, transparent); } .cp-io-list-opt.is-active .cp-io-list-ico { background: rgba(255,255,255,.2); color: #fff; } .cp-io-list-opt.is-active .cp-io-list-ext { color: rgba(255,255,255,.85); } .cp-io-list-opt.is-active .cp-io-list-star { color: #FFE082; } /* Превью справа */ .cp-io-preview { padding: 14px 18px; background: #fff; min-width: 0; } .cp-io-pre-head { font-size: 11px; color: var(--text-3, #6a6a72); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; } .cp-io-pre-count { font-family: var(--mono, 'Consolas', monospace); color: var(--text-2, #3F4756); text-transform: none; letter-spacing: 0; } /* Светлая таблица превью */ .cp-io-pre-table { width: 100%; border-collapse: collapse; background: linear-gradient(180deg, #fff, #FBFBFD); border: 1px solid var(--line, #E6E8EE); border-radius: 8px; overflow: hidden; font-size: 12px; table-layout: fixed; } .cp-io-pre-table th { background: linear-gradient(180deg, var(--fbg-soft, #E6F4EC), var(--fbg, #D1EBDB)); color: var(--fc, #1D6F42); font-weight: 700; text-align: left; padding: 8px 10px; font-size: 11px; letter-spacing: .3px; border-bottom: 1.5px solid var(--fbg, #D1EBDB); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-io-pre-table td { padding: 7px 10px; border-top: 1px solid var(--line-2, #eaeaef); color: var(--text, #1a1a2e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .cp-io-pre-table tr:nth-child(even) td { background: var(--surface-2, #FAFAFB); } .cp-io-pre-table td.cp-io-pre-more { text-align: center; color: var(--text-3, #6a6a72); font-style: italic; background: transparent !important; } .cp-io-pre-table td.cp-io-pre-empty { text-align: center; color: var(--text-3, #6a6a72); font-style: italic; padding: 24px 12px; background: transparent !important; } .cp-io-pre-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 11.5px; color: var(--text-3, #6a6a72); } .cp-io-pre-meta b { color: var(--text, #1a1a2e); font-weight: 700; } .cp-io-pre-meta b .ext { font-family: var(--mono, 'Consolas', monospace); color: var(--fc, var(--rcb-red)); margin-left: 2px; } /* Адаптив: на узких экранах сайдбар сворачивается в строку сверху */ @media (max-width: 600px) { .cp-io-dialog--preview { max-width: 540px; } .cp-io-pv-body { grid-template-columns: 1fr; } .cp-io-list { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line-2, #eaeaef); padding: 8px; } .cp-io-list-opt { flex: 1 1 calc(33% - 8px); justify-content: center; } .cp-io-list-ext { display: none; } } .cp-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 24px 18px; border: 2px dashed #cfcfd4; border-radius: 12px; background: #fafafb; cursor: pointer; transition: border-color .15s, background .15s; } .cp-drop:hover { border-color: var(--rcb-red); background: color-mix(in srgb, var(--rcb-red) 4%, transparent); } .cp-drop.is-drag { border-color: var(--rcb-red); background: color-mix(in srgb, var(--rcb-red) 8%, transparent); } .cp-file-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .cp-drop-ico { flex: none; width: 48px; height: 48px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2, #eaeaef); display: flex; align-items: center; justify-content: center; color: var(--rcb-red); } .cp-drop b { display: block; font-size: 14px; color: #1a1a2e; font-weight: 600; } .cp-drop small { display: block; font-size: 12px; color: #6a6a72; margin-top: 2px; } .cp-import-status { margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.45; } .cp-import-status.ok { background: rgba(20,134,75,.10); color: #0d6135; border: 1px solid rgba(20,134,75,.3); } .cp-import-status.bad { background: rgba(184,42,42,.10); color: #811c1c; border: 1px solid rgba(184,42,42,.3); } .cp-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } .cp-head-actions .pill-btn { height: 34px; } /* ─────────────────────────────────────────────────────────────── * Меню пользователя (dropdown под аватаром) * ─────────────────────────────────────────────────────────────── */ .user-wrap { position: relative; } .user-chip { cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; } .user-chip:focus-visible { outline: none; border-color: var(--rcb-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rcb-red) 22%, transparent); } .user-chip[aria-expanded="true"] { border-color: var(--rcb-red); background: #fff; box-shadow: 0 0 0 1px var(--rcb-shadow-soft); } .user-chip-chev { font-size: 10px; color: #8c93a3; margin-right: 4px; transition: transform .15s ease; } .user-chip[aria-expanded="true"] .user-chip-chev { transform: rotate(180deg); } .user-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-width: calc(100vw - 24px); background: var(--surface, #fff); border: 1px solid var(--line, #eef0f3); border-radius: var(--r-lg, 12px); box-shadow: 0 12px 32px -8px rgba(14,19,32,.18), 0 2px 6px rgba(14,19,32,.06); opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 60; padding: 6px 0; } .user-pop.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .user-pop-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; } .user-pop-head .user-avatar.lg { width: 44px; height: 44px; font-size: 15px; } .user-pop-head-text { min-width: 0; line-height: 1.25; } .user-pop-head-text b { display: block; font-size: 14px; color: #16213a; } .user-pop-head-text small { display: block; font-size: 12px; color: var(--text-3, #6e7689); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-pop-head-text small.muted { color: #8c93a3; font-size: 11.5px; } .user-pop-section { display: flex; flex-direction: column; padding: 4px 4px; } .user-pop-sep { height: 1px; background: var(--line-2, #eef0f3); margin: 4px 12px; } .user-pop-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: #8c93a3; padding: 6px 12px; } .user-pop-lang { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 12px 8px; } .user-pop-lang .lang-switch-inline { padding: 1px; } .user-pop-lang .lang-switch-inline button { font-size: 11px; padding: 4px 12px; } .user-pop-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; column-gap: 10px; padding: 8px 12px; border-radius: 8px; color: #1f2a44; text-decoration: none; background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit; width: calc(100% - 4px); margin: 0 2px; transition: background .12s ease, color .12s ease; } .user-pop-item:hover, .user-pop-item:focus-visible { background: var(--rcb-tint-06); outline: none; } .user-pop-item:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rcb-red) 35%, transparent); } .user-pop-ico { width: 28px; height: 28px; border-radius: 7px; background: #f6f7fa; color: #525866; display: inline-flex; align-items: center; justify-content: center; } .user-pop-ico svg { width: 15px; height: 15px; } .user-pop-item:hover .user-pop-ico, .user-pop-item:focus-visible .user-pop-ico { background: var(--rcb-shadow-soft); color: var(--rcb-red); } .user-pop-text { min-width: 0; line-height: 1.3; } .user-pop-text b { display: block; font-size: 13.5px; font-weight: 600; color: #16213a; } .user-pop-text small { display: block; font-size: 11.5px; color: var(--text-3, #6e7689); margin-top: 1px; } .user-pop-badge { background: var(--rcb-red); color: #fff; font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; } .user-pop-item--danger:hover, .user-pop-item--danger:focus-visible { background: rgba(184,42,42,.08); } .user-pop-item--danger:hover .user-pop-ico, .user-pop-item--danger:focus-visible .user-pop-ico { background: rgba(184,42,42,.14); color: #b82a2a; } .user-pop-item--danger b { color: #b82a2a; } @media (max-width: 640px) { .user-pop { width: 280px; right: -8px; } .user-chip .user-chip-chev { display: none; } } /* ─────────────────────────────────────────────────────────────── * Боковая навигация раздела «Настройки» (/settings/*) * ─────────────────────────────────────────────────────────────── */ .main--with-sidebar { gap: 0; } .settings-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; } .settings-content { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .settings-sidebar { position: sticky; top: 20px; background: #fff; border: 1px solid var(--line, #eef0f3); border-radius: 12px; padding: 4px 0 12px; box-shadow: 0 1px 2px rgba(15,25,51,.04); max-height: calc(100vh - 40px); overflow-y: auto; } .settings-sidebar-head { padding: 14px 18px 10px; border-bottom: 1px solid var(--line, #eef0f3); margin-bottom: 6px; } .settings-sidebar-title { display: flex; align-items: center; gap: 8px; color: #16213a; font-weight: 700; font-size: 14px; text-decoration: none; } .settings-sidebar-title svg { color: #6e7689; } .settings-sidebar-title:hover { color: var(--rcb-red); } .settings-sidebar-title:hover svg { color: var(--rcb-red); } .settings-sidebar-nav { display: flex; flex-direction: column; } .settings-sidebar-group { padding: 8px 0; } .settings-sidebar-group + .settings-sidebar-group { border-top: 1px solid var(--line, #eef0f3); margin-top: 2px; } .settings-sidebar-group-title { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8c93a3; padding: 8px 18px 6px; text-decoration: none; transition: color .12s ease; } .settings-sidebar-group-title.is-link { cursor: pointer; } .settings-sidebar-group-title.is-link:hover { color: var(--rcb-red); } .settings-sidebar-group-ico { width: 14px; height: 14px; color: #8c93a3; flex: none; transition: color .12s ease; } .settings-sidebar-group-title.is-link:hover .settings-sidebar-group-ico { color: var(--rcb-red); } .settings-sidebar-group.is-active-group .settings-sidebar-group-title { color: #16213a; } .settings-sidebar-group.is-active-group .settings-sidebar-group-ico { color: var(--rcb-red); } .settings-sidebar-item { display: block; padding: 7px 18px; font-size: 13.5px; line-height: 1.35; color: #2c3653; text-decoration: none; border-left: 3px solid transparent; transition: background .12s ease, color .12s ease, border-color .12s ease; } .settings-sidebar-item:hover { background: #f6f7fa; color: #16213a; } .settings-sidebar-item.is-active { background: var(--rcb-tint-06); color: var(--rcb-red); border-left-color: var(--rcb-red); font-weight: 600; } @media (max-width: 1024px) { .settings-shell { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; } } @media (max-width: 760px) { .settings-shell { grid-template-columns: 1fr; gap: 14px; } .settings-sidebar { position: static; max-height: none; } .settings-sidebar-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .settings-sidebar-group + .settings-sidebar-group { border-top: 0; } .settings-sidebar-item { padding: 6px 14px; } } /* ─────────────────────────────────────────────────────────────── * Универсальный wide-диалог для форм редактирования (cp-form-*) * Используется на /counterparties и /payments/templates. * Дизайн: серое тело + белая шапка и подвал, двухколоночная сетка, * заметные поля с фокусом в фирменном цвете. * ─────────────────────────────────────────────────────────────── */ .cp-form-dialog { border: none; border-radius: 16px; padding: 0; max-width: 680px; width: calc(100% - 32px); background: #f5f6fa; box-shadow: 0 24px 64px rgba(15,17,28,.28), 0 4px 14px rgba(15,17,28,.08); overflow: hidden; } .cp-form-dialog::backdrop { background: rgba(15,17,28,.55); backdrop-filter: blur(3px); } .cp-form-head { display: flex; justify-content: space-between; align-items: start; padding: 22px 26px 18px; background: #fff; border-bottom: 1px solid #e6e8ef; } .cp-form-head h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; } .cp-form-kicker { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rcb-red); margin-bottom: 4px; } .cp-form-head button[aria-label="Закрыть"] { width: 32px; height: 32px; border-radius: 8px; transition: background .15s, color .15s; background: none; border: 0; cursor: pointer; font-size: 24px; color: #6a6a72; } .cp-form-head button[aria-label="Закрыть"]:hover { background: #f0f1f5; color: #2a2a32; } .cp-form { padding: 22px 26px 8px; } .cp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-bottom: 18px; } .cp-form-grid:last-of-type { margin-bottom: 0; } .cp-form-grid.full > * { grid-column: 1 / -1; } .cp-form-field { display: flex; flex-direction: column; gap: 6px; } .cp-form-field label { font-size: 11.5px; font-weight: 600; color: #525866; letter-spacing: .02em; text-transform: uppercase; } .cp-form-field label small { text-transform: none; font-weight: 400; color: #8c93a3; } .cp-form-field input, .cp-form-field select, .cp-form-field textarea { border: 1px solid #d8dbe3; border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 14px; background: #fff; transition: border-color .15s, box-shadow .15s, background .15s; width: 100%; box-sizing: border-box; } .cp-form-field input.mono, .cp-form-field textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .cp-form-field input:hover, .cp-form-field select:hover, .cp-form-field textarea:hover { border-color: #b9bdc8; } .cp-form-field input:focus, .cp-form-field select:focus, .cp-form-field textarea:focus { outline: none; border-color: var(--rcb-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rcb-red) 15%, transparent); } .cp-form-field textarea { resize: vertical; min-height: 64px; } .cp-form-field-check { /* для одиночного toggle поля */ display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #2a2a32; padding: 8px 0; } .cp-form-field-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--rcb-red); } .cp-form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 26px 20px; background: #fff; border-top: 1px solid #e6e8ef; } .cp-form-error { color: #B82A2A; font-size: 13px; padding: 0 26px 12px; font-weight: 500; } .cp-form-error[hidden] { display: none; } /* ─────────────────────────────────────────────────────────────── * Модальное окно «Импорт выполнен успешно» — центрируется на экране * ─────────────────────────────────────────────────────────────── */ .import-success-dialog { border: 0; padding: 0; border-radius: 16px; max-width: 420px; width: calc(100% - 32px); background: #fff; box-shadow: 0 32px 80px rgba(15,17,28,.28), 0 6px 16px rgba(15,17,28,.08); } .import-success-dialog::backdrop { background: rgba(15,17,28,.45); backdrop-filter: blur(3px); } .import-success-dialog[open] { animation: isd-in .22s cubic-bezier(.2,.7,.3,1) both; } @keyframes isd-in { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .import-success-dialog .isd-body { padding: 28px 26px 18px; text-align: center; } .import-success-dialog .isd-ico { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .import-success-dialog .isd-ico.ok { background: rgba(20,134,75,.12); color: var(--ok, #14864B); } .import-success-dialog .isd-ico.warn { background: rgba(244,185,66,.14); color: #9C6F00; } .import-success-dialog .isd-ico svg { width: 28px; height: 28px; } .import-success-dialog h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #16213a; } .import-success-dialog p { margin: 0; color: #525866; font-size: 13.5px; line-height: 1.5; } .import-success-dialog p b { color: #16213a; font-weight: 700; } .import-success-dialog .isd-actions { display: flex; justify-content: center; padding: 6px 26px 22px; } .import-success-dialog .isd-actions .pill-btn { min-width: 140px; justify-content: center; } /* ── Настройки → Внешний вид (выбор темы) ──────────────────────── */ .theme-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; } .theme-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 14px; overflow: hidden; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; } .theme-card:hover { border-color: #BFC5D2; box-shadow: 0 12px 28px -16px rgba(14,19,32,.25); transform: translateY(-2px); } .theme-card.is-active { border-color: var(--rcb-red); box-shadow: 0 0 0 3px var(--rcb-shadow-soft), 0 14px 30px -16px color-mix(in srgb, var(--rcb-red) 45%, transparent); } .theme-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } /* Превью: мини-макет интерфейса в цветах темы */ .theme-card-preview { background: var(--p-bg); padding: 10px; display: flex; flex-direction: column; gap: 8px; height: 150px; border-bottom: 1px solid var(--line-2); } .theme-card-preview-topbar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--p-surface); border-radius: 8px; border: 1px solid color-mix(in srgb, var(--p-ink) 8%, transparent); } .theme-card-preview-logo { width: 18px; height: 18px; border-radius: 5px; background: var(--p-accent); flex-shrink: 0; } .theme-card-preview-nav { width: 26px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--p-text) 18%, transparent); } .theme-card-preview-avatar { margin-left: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--p-ink); } .theme-card-preview-body { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; min-height: 0; } .theme-card-preview-card { background: var(--p-surface); border-radius: 8px; border: 1px solid color-mix(in srgb, var(--p-ink) 8%, transparent); padding: 8px; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .theme-card-preview-kpi { width: 50%; height: 14px; border-radius: 3px; background: var(--p-accent); } .theme-card-preview-line { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--p-text) 22%, transparent); } .theme-card-preview-line--sm { width: 60%; } .theme-card-preview-btn { align-self: flex-start; font-size: 9px; font-weight: 700; color: #fff; padding: 3px 8px; border-radius: 999px; background: var(--p-accent); } /* Тело карточки — название, описание, теги */ .theme-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; } .theme-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .theme-card-title b { font-size: 14px; font-weight: 700; color: var(--text); } .theme-card-check { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); border: 1.5px solid var(--line); color: transparent; display: inline-grid; place-items: center; flex-shrink: 0; transition: background .12s ease, color .12s ease, border-color .12s ease; } .theme-card.is-active .theme-card-check { background: var(--rcb-red); border-color: var(--rcb-red); color: #fff; } .theme-card-body small { font-size: 12px; line-height: 1.4; color: var(--text-3); } .theme-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .theme-card-tag { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--rcb-red-50); color: var(--rcb-red-700); text-transform: lowercase; letter-spacing: .2px; } .theme-foot { margin-top: 20px; padding: 12px 4px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } @media (max-width: 480px) { .theme-cards { grid-template-columns: 1fr; } .theme-card-preview { height: 130px; } } /* Подзаголовки секций в /settings/appearance */ .appearance-subhead { margin: 24px 0 8px; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-3); font-weight: 700; } .appearance-subhead:first-of-type { margin-top: 18px; } /* Заголовок + тулбар в одной горизонтальной строке */ .appearance-subhead-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 8px; flex-wrap: wrap; } .appearance-subhead-row .appearance-subhead { margin: 0; flex-shrink: 0; } .appearance-subhead-row .theme-toolbar { margin-left: auto; } @media (max-width: 640px) { .appearance-subhead-row { align-items: stretch; } .appearance-subhead-row .theme-toolbar { margin-left: 0; width: 100%; } } /* Карточки выбора компоновки меню */ .layout-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; } .layout-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 14px; overflow: hidden; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; } .layout-card:hover { border-color: #BFC5D2; box-shadow: 0 12px 28px -16px rgba(14,19,32,.25); transform: translateY(-2px); } .layout-card.is-active { border-color: var(--rcb-red); box-shadow: 0 0 0 3px var(--rcb-shadow-soft), 0 14px 30px -16px color-mix(in srgb, var(--rcb-red) 45%, transparent); } .layout-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } /* Мини-превью компоновки */ .layout-card-preview { height: 160px; background: var(--bg); padding: 10px; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 8px; } .layout-card-preview--vertical { flex-direction: row; gap: 8px; } .lcp-top { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--surface); border-radius: 8px; border: 1px solid var(--line-2); } .lcp-side { width: 78px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 6px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; } .lcp-right { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .lcp-right .lcp-top { justify-content: flex-end; } .lcp-logo { width: 18px; height: 18px; border-radius: 5px; background: var(--rcb-red); flex-shrink: 0; } .lcp-side .lcp-logo { width: 22px; height: 22px; align-self: flex-start; margin-bottom: 2px; } .lcp-nav { width: 28px; height: 6px; border-radius: 999px; background: rgba(14,19,32,.18); } .lcp-side-item { height: 8px; border-radius: 999px; background: rgba(14,19,32,.14); } .lcp-side-item:first-of-type { background: var(--rcb-red); width: 70%; } .lcp-avatar { margin-left: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--rcb-ink); } .lcp-content { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; min-height: 0; } .lcp-card { background: var(--surface); border-radius: 8px; border: 1px solid var(--line-2); } @media (max-width: 560px) { .layout-cards { grid-template-columns: 1fr; } .layout-card-preview { height: 140px; } } /* ── Тулбар действий над таблицей тем ──────────────────────────── */ .theme-toolbar { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; overflow-x: auto; scrollbar-width: thin; } .theme-toolbar .pill-btn { height: 36px; padding: 0 14px; font-size: 13px; font-weight: 500; flex-shrink: 0; white-space: nowrap; } /* Действия в строке таблицы — тоже единый стиль и одна линия */ .th-actions { flex-wrap: nowrap; white-space: nowrap; } .th-actions .pill-btn { height: 32px; padding: 0 10px; font-size: 12px; font-weight: 500; flex-shrink: 0; } /* ── Таблица тем ───────────────────────────────────────────────── */ .themes-table { width: 100%; } .themes-table th, .themes-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; } .themes-table thead th { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); font-weight: 700; background: var(--surface-2); } .themes-table tbody tr:last-child td { border-bottom: 0; } .themes-table tbody tr.themes-row { cursor: pointer; transition: background .12s ease; } .themes-table tbody tr.themes-row:hover { background: var(--surface-2); } .themes-table tbody tr.is-active-theme { background: linear-gradient(90deg, color-mix(in srgb, var(--rcb-red) 5%, transparent) 0%, transparent 100%); box-shadow: inset 3px 0 0 0 var(--rcb-red); } .themes-table tbody tr.is-active-theme:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--rcb-red) 9%, transparent) 0%, color-mix(in srgb, var(--rcb-red) 2%, transparent) 100%); } .th-active-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--line); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); } .th-active-dot.on { background: var(--ok); box-shadow: 0 0 0 1px var(--ok), 0 0 0 4px var(--ok-50); } .th-name { display: flex; align-items: center; gap: 8px; } .th-name b { font-size: 14px; } .th-applied { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--ok); background: var(--ok-50); padding: 2px 8px; border-radius: 999px; } .th-swatches { display: inline-flex; gap: 4px; } .th-sw { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--surface); box-shadow: 0 0 0 1px var(--line); } .th-actions { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; } .th-actions .pill-btn { height: 32px; padding: 0 10px; font-size: 12px; } .th-actions .pill-btn[disabled] { opacity: .55; cursor: not-allowed; } .th-actions .th-apply { min-width: 100px; justify-content: center; } .th-actions .th-delete:hover:not([disabled]) { border-color: var(--bad); color: var(--bad); } /* ── Диалог редактирования темы ───────────────────────────────── */ .theme-edit-dialog, .theme-import-dialog { width: min(820px, 96vw); max-width: 96vw; max-height: min(94vh, 920px); padding: 0; border: 0; border-radius: 18px; background: var(--surface); box-shadow: 0 28px 60px -18px rgba(14,19,32,.45); overflow: hidden; } .theme-edit-dialog[open], .theme-import-dialog[open] { display: flex; flex-direction: column; position: fixed; inset: 0; margin: auto; } .theme-edit-head { padding: 16px 22px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; /* Лёгкий тинт фирменного цвета темы — на АТБ кремово-оранжевый, на RenCap бледно-розовый и т.д. */ background: linear-gradient(135deg, color-mix(in srgb, var(--rcb-red) 6%, #fff) 0%, color-mix(in srgb, var(--rcb-red) 10%, #fff) 100%); border-bottom: 1px solid color-mix(in srgb, var(--rcb-red) 20%, #fff); } .theme-edit-kicker { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-3); font-weight: 700; } .theme-edit-head h3 { margin: 4px 0 0; font-size: 17px; font-weight: 700; } .theme-edit-body { padding: 18px 22px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .te-tokens { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 16px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; } .te-token { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .te-token > label { font-size: 12px; font-weight: 600; color: var(--text); display: flex; flex-direction: column; gap: 2px; } .te-token > label small { font-weight: 400; font-size: 10.5px; color: var(--text-3); line-height: 1.3; } .te-token-input { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 6px; align-items: center; } .te-token-input input[type="color"] { width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--surface); } .te-token-text { height: 36px; font-size: 12.5px; padding: 0 10px; } .te-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; } .te-foot .pill-btn { height: 36px; } /* Узкий вариант диалога — для подтверждения «Экспорт выполнен» */ .theme-export-done-dialog { width: min(420px, 92vw); } /* Узкий импорт-диалог */ .theme-import-narrow { width: min(480px, 94vw); } .theme-import-narrow .theme-edit-body { padding: 16px 18px 18px; gap: 12px; } .theme-import-narrow .theme-edit-body > p { text-align: left; line-height: 1.45; } /* Drop-зона импорта тем — переиспользует .cp-drop с лёгкой адаптацией */ .ti-drop { padding: 16px 14px; } .ti-drop .ti-drop-text { min-width: 0; } .ti-drop b { display: block; font-size: 13.5px; color: var(--text); font-weight: 600; } .ti-drop small { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; } .ti-drop.has-file .cp-drop-ico { color: #1F7A3A; background: #EAF7EF; border-color: #BFE5CB; } .ti-drop.has-file { border-color: #1F7A3A; border-style: solid; background: #F4FBF6; } /* Список тем с чекбоксами в диалоге экспорта */ .tex-themes-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 12px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; max-height: 220px; overflow-y: auto; } .tex-theme-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); padding: 4px 2px; cursor: pointer; min-width: 0; } .tex-theme-row input[type="checkbox"] { accent-color: var(--rcb-red); } .tex-theme-row b { font-weight: 600; } .tex-theme-row small { color: var(--text-3); font-size: 11.5px; } .tex-theme-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .tex-theme-name b, .tex-theme-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Выбор логотипа внутри редактора темы */ .te-logo { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: stretch; } .te-logo-preview { width: 140px; height: 80px; border: 1.5px dashed var(--line); border-radius: 10px; background: linear-gradient(45deg, var(--surface-2) 25%, transparent 25%), linear-gradient(-45deg, var(--surface-2) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--surface-2) 75%), linear-gradient(-45deg, transparent 75%, var(--surface-2) 75%); background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; background-color: var(--surface); display: grid; place-items: center; padding: 10px; overflow: hidden; } .te-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .te-logo-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; } .te-logo-actions .pill-btn { height: 32px; padding: 0 12px; font-size: 12.5px; } .te-logo-pick { cursor: pointer; } .te-logo-hint { font-size: 11.5px; line-height: 1.4; color: var(--text-3); margin-top: 4px; } @media (max-width: 480px) { .te-logo { grid-template-columns: 1fr; } .te-logo-preview { width: 100%; } } /* Выбор расположения меню внутри редактора темы */ .te-layout-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .te-layout-option { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 12px; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, background .12s ease; } .te-layout-option:hover { border-color: #BFC5D2; } .te-layout-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .te-layout-option:has(input[type="radio"]:checked) { border-color: var(--rcb-red); box-shadow: 0 0 0 3px var(--rcb-shadow-soft); background: linear-gradient(90deg, color-mix(in srgb, var(--rcb-red) 5%, transparent) 0%, transparent 100%); } .te-layout-card { width: 64px; height: 44px; flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px; display: flex; gap: 3px; } .te-layout-card--horizontal { flex-direction: column; } .te-layout-card--vertical { flex-direction: row; } .te-layout-bar { display: flex; align-items: center; gap: 3px; padding: 2px 3px; background: var(--surface); border-radius: 3px; height: 10px; } .te-layout-side { display: flex; flex-direction: column; gap: 3px; padding: 3px; background: var(--surface); border-radius: 3px; width: 18px; } .te-layout-body { flex: 1; background: var(--surface); border-radius: 3px; } .te-layout-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rcb-red); flex-shrink: 0; } .te-layout-side .te-layout-dot { width: 8px; height: 8px; align-self: flex-start; } .te-layout-line { height: 3px; flex: 1; border-radius: 999px; background: rgba(14, 19, 32, .18); } .te-layout-side .te-layout-line { flex: none; width: 100%; height: 4px; } .te-layout-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .te-layout-text b { font-size: 13px; } .te-layout-text small { font-size: 11px; color: var(--text-3); } @media (max-width: 560px) { .te-layout-choice { grid-template-columns: 1fr; } } @media (max-width: 560px) { .te-tokens { grid-template-columns: 1fr; } .themes-table th:nth-child(3), .themes-table td:nth-child(3) { display: none; } } /* ─────────────────────────────────────────────────────────────────── Раздел Настройки (/settings/*) — единая визуальная тема Все стили scoped под .settings-content (враппер из layout.ejs). Применяется ко всем подразделам: organization, companies, employees, roles, access, limits, appearance, security, anti-fraud, edelivery, bank-access, bank-users, sla, architecture, mobile, tech-questionnaire, dashboard и т.д. ─────────────────────────────────────────────────────────────────── */ /* CSS-переменные секции (для лёгкой подстройки контраста) */ .settings-content { --set-line: #CFD4DE; /* основной бордер полей */ --set-line-soft: #E1E5EC; /* разделители */ --set-field-bg: #FAFBFD; /* фон редактируемых полей */ --set-head-bg: linear-gradient(180deg, #FBFBFC 0%, #F5F6F9 100%); } /* ── Карточки .card / .about-card / .emp-card ────────────────────── */ .settings-content .card, .settings-content .emp-card { border: 1.5px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(15,22,50,.04); background: #fff; overflow: hidden; } /* Усиленный header у карточек — только подложка и разделитель. Padding/высоту НЕ форсируем, чтобы не ломать существующие inline-стили. */ .settings-content .card > .card-head, .settings-content .emp-card > .emp-card-head { background: var(--set-head-bg); border-bottom: 1px solid var(--set-line-soft); } .settings-content .card > .card-head h3, .settings-content .emp-card > .emp-card-head h3 { letter-spacing: .2px; font-weight: 700; } .settings-content .card > .card-head .head-sub, .settings-content .emp-card > .emp-card-head .head-sub { color: var(--text-3); font-weight: 500; } /* Иконка-капсула в шапке карточки (опциональная — добавляется только там, где явно вставлен
или
) */ .settings-content .card-ico, .settings-content .emp-card-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--rcb-tint-08); color: var(--rcb-red); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Тело карточки .emp-card-body — общий внутренний padding */ .settings-content .emp-card > .emp-card-body { padding: 18px 22px 20px; } /* about-grid — больше воздуха между карточками */ .settings-content .about-grid { gap: 16px; } /* ── Поля ввода — повышенная контрастность ───────────────────────── */ .settings-content .pn-field label { color: #2F3540; font-weight: 700; letter-spacing: .5px; } .settings-content .pn-input:not(.pn-readonly):not(select):not(textarea) { background: var(--set-field-bg); border-color: var(--set-line); } .settings-content .pn-input:not(.pn-readonly):not(:disabled):hover { background: #fff; border-color: #95A0B5; } .settings-content .pn-input:focus { background: #fff; border-color: var(--rcb-red); box-shadow: 0 0 0 4px var(--rcb-shadow-soft); } .settings-content textarea.pn-input, .settings-content select.pn-input { background: var(--set-field-bg); border-color: var(--set-line); } .settings-content textarea.pn-input:focus, .settings-content select.pn-input:focus { background: #fff; } .settings-content .pn-input.pn-readonly { background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(15,22,50,.025) 8px 9px), var(--surface-2); border: 1.5px dashed var(--set-line); color: var(--text); font-weight: 600; } /* Чекбоксы / pill-checkbox */ .settings-content .ab-checkbox { background: var(--set-field-bg); border-color: var(--set-line); font-size: 13px; font-weight: 500; } .settings-content .ab-checkbox:hover { border-color: #95A0B5; background: #fff; } .settings-content .ab-checkbox:has(input:checked) { background: var(--rcb-tint-06); border-color: var(--rcb-red); color: var(--rcb-red); font-weight: 600; } /* ── about-dl: только лёгкие тюнинги, базовая раскладка остаётся ── */ .settings-content .about-dl dt { font-weight: 700; letter-spacing: .7px; } .settings-content .about-dl dd.mono { font-weight: 600; } /* ── Page-head на /settings/* ────────────────────────────────────── */ .settings-content > .page-head { margin-bottom: 6px; } /* ── Submit-полоса (sticky bottom bar формы) ─────────────────────── */ .settings-content .pn-submit-row { border-radius: 14px; border: 1.5px solid var(--line); background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%); } /* ── Адаптив: на узких экранах двухколонные сетки в одну колонку ── */ @media (max-width: 1100px) { .settings-content .about-grid { grid-template-columns: 1fr !important; } .settings-content .emp-edit-grid { grid-template-columns: 1fr; } }