/* ============================================================================
FinTechGuru — design system (single source of truth)
Spec: docs/DESIGN_FINTECHGURU.md · Usage: docs/USING_FINTECHGURU.md
Every FinTechGuru page links this file with a RELATIVE href:
(served at fintechguru.danifodemo.ru; Caddy rewrites * -> /fintechguru{uri}).
Language: calm deep-blue fintech · Inter UI · Tektur display · JetBrains Mono figures ·
light-first + full dark mode · radii 6/10/14 · hairline borders on flat surfaces ·
one elevation shadow for floating layers only · red = destructive/alerts only.
Sibling of Vetric (ui/theme.css) — never mix .fg-* and .vt-* on one page.
============================================================================ */
/* --- Self-hosted fonts (cyrillic + latin subsets; no external CDN) --------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tektur';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/tektur-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Tektur';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/tektur-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('fonts/jbmono-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('fonts/jbmono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* --- Tokens ----------------------------------------------------------------
Two layers. Primitives = raw palette, never referenced by components.
Semantics = the only tokens components use; dark mode overrides semantics only. */
:root{
/* -- primitives: navy / blue / violet / functional / gray -- */
--fg-navy-950:#070d1e;
--fg-navy-900:#0c1530;
--fg-navy-800:#131e40;
--fg-navy-700:#1e2a4d;
--fg-blue-700:#1b46d1;
--fg-blue-600:#2456f0; /* electric-blue primary (light) */
--fg-blue-400:#5c85ff; /* primary lifted for dark surfaces */
--fg-violet-600:#6847e8; /* accent, AA-safe as text on white */
--fg-violet-500:#7c5cff; /* accent, decorative (gradients, washes) */
--fg-violet-400:#9780ff; /* accent as text on dark surfaces */
--fg-red-600:#c62b31; /* destructive/alert text+fill (light) */
--fg-red-400:#ff7a7e; /* destructive/alert on dark */
--fg-green-700:#157a47; /* success text (light) */
--fg-green-400:#4ccb8b; /* success on dark */
--fg-amber-700:#8a5e0e; /* warning text (light) */
--fg-amber-400:#e5b558; /* warning on dark */
--fg-gray-050:#f5f7fc;
--fg-gray-100:#eceff7;
--fg-gray-200:#e2e7f2;
--fg-gray-300:#b8c2d9;
--fg-gray-500:#5b6478;
--fg-gray-400:#8a93a8;
/* -- semantics: surfaces & ink -- */
--fg-bg:var(--fg-gray-050);
--fg-surface:#ffffff;
--fg-surface-raised:#ffffff; /* floating layers: menus, dialogs, toasts */
--fg-surface-sunken:var(--fg-gray-100); /* wells: table header, code, locked fields */
--fg-border:var(--fg-gray-200);
--fg-border-strong:var(--fg-gray-300);
--fg-ink:var(--fg-navy-900);
--fg-ink-muted:var(--fg-gray-500);
--fg-ink-faint:var(--fg-gray-400); /* placeholders, disabled — non-essential only */
/* -- semantics: interactive -- */
--fg-primary:var(--fg-blue-600);
--fg-primary-hover:var(--fg-blue-700);
--fg-on-primary:#ffffff;
--fg-accent:var(--fg-violet-600); /* sparse: «API»-поля, выделенные линии, НЕ кнопки */
--fg-danger:var(--fg-red-600);
--fg-ok:var(--fg-green-700);
--fg-warn:var(--fg-amber-700);
--fg-focus-ring:0 0 0 3px color-mix(in srgb, var(--fg-primary) 40%, transparent);
/* -- semantics: status washes (badge/chip backgrounds) -- */
--fg-wash-info:#e8efff;
--fg-wash-accent:#efeaff;
--fg-wash-ok:#e2f6ea;
--fg-wash-warn:#fdf2dc;
--fg-wash-danger:#fde8e9;
--fg-wash-neutral:var(--fg-gray-100);
/* -- futuristic touches (restrained; never animated) -- */
--fg-gradient-line:linear-gradient(90deg, var(--fg-blue-600), var(--fg-violet-500));
--fg-dotgrid:radial-gradient(color-mix(in srgb, var(--fg-ink) 14%, transparent) 1px, transparent 1px);
/* -- elevation: floating layers ONLY (menus/dialogs/toasts); flat = hairline border -- */
--fg-shadow-pop:0 8px 28px rgba(7,13,30,.16), 0 1px 3px rgba(7,13,30,.10);
/* -- type -- */
--fg-font-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
--fg-font-display:'Tektur',var(--fg-font-ui);
--fg-font-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',monospace;
/* roles: size/leading pairs (app scale — denser than Vetric's marketing scale) */
--fg-text-caption:11px; --fg-leading-caption:16px;
--fg-text-body-sm:13px; --fg-leading-body-sm:20px;
--fg-text-body:14px; --fg-leading-body:22px;
--fg-text-body-lg:16px; --fg-leading-body-lg:24px;
--fg-text-title:18px; --fg-leading-title:26px;
--fg-text-heading:24px; --fg-leading-heading:34px;
--fg-text-display:32px; --fg-leading-display:44px;
--fg-text-hero:44px; --fg-leading-hero:58px;
--fg-fw-regular:400; --fg-fw-medium:500; --fg-fw-semibold:600; --fg-fw-bold:700;
/* -- spacing (4px base) -- */
--fg-space-1:4px; --fg-space-2:8px; --fg-space-3:12px; --fg-space-4:16px;
--fg-space-5:20px; --fg-space-6:24px; --fg-space-8:32px; --fg-space-10:40px;
--fg-space-12:48px; --fg-space-16:64px;
/* -- shape -- */
--fg-radius-sm:6px; /* chips, badges, small controls */
--fg-radius-md:10px; /* buttons, fields, cards */
--fg-radius-lg:14px; /* dialogs, large cards */
--fg-radius-full:999px; /* avatars, counters, switch — ONLY circular-by-nature elements */
/* -- motion -- */
--fg-t-fast:120ms; --fg-t-base:180ms;
/* -- control icons (theme-swapped: data-uri не умеет currentColor) -- */
--fg-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235b6478' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* -- layout -- */
--fg-topbar-h:56px;
--fg-sidebar-w:248px;
--fg-page-max:1280px;
color-scheme:light;
}
/* Dark theme. Semantics only; primitives never change.
Default = OS preference; explicit data-theme on wins (fg.js persists it). */
:root[data-theme="dark"]{
--fg-bg:var(--fg-navy-950);
--fg-surface:var(--fg-navy-900);
--fg-surface-raised:var(--fg-navy-800);
--fg-surface-sunken:#0a1226;
--fg-border:var(--fg-navy-700);
--fg-border-strong:#31406e;
--fg-ink:#e9edf8;
--fg-ink-muted:#97a3c4;
--fg-ink-faint:#5f6c8f;
--fg-primary:var(--fg-blue-400);
--fg-primary-hover:#7a9bff;
--fg-on-primary:#0a112b;
--fg-accent:var(--fg-violet-400);
--fg-danger:var(--fg-red-400);
--fg-ok:var(--fg-green-400);
--fg-warn:var(--fg-amber-400);
--fg-wash-info:#121c40;
--fg-wash-accent:#241d4d;
--fg-wash-ok:#0e2e20;
--fg-wash-warn:#33270e;
--fg-wash-danger:#3a1518;
--fg-wash-neutral:var(--fg-navy-800);
--fg-gradient-line:linear-gradient(90deg, var(--fg-blue-400), var(--fg-violet-500));
--fg-shadow-pop:0 8px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
--fg-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2397a3c4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
color-scheme:dark;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]):not([data-theme="dark"]){
--fg-bg:var(--fg-navy-950);
--fg-surface:var(--fg-navy-900);
--fg-surface-raised:var(--fg-navy-800);
--fg-surface-sunken:#0a1226;
--fg-border:var(--fg-navy-700);
--fg-border-strong:#31406e;
--fg-ink:#e9edf8;
--fg-ink-muted:#97a3c4;
--fg-ink-faint:#5f6c8f;
--fg-primary:var(--fg-blue-400);
--fg-primary-hover:#7a9bff;
--fg-on-primary:#0a112b;
--fg-accent:var(--fg-violet-400);
--fg-danger:var(--fg-red-400);
--fg-ok:var(--fg-green-400);
--fg-warn:var(--fg-amber-400);
--fg-wash-info:#121c40;
--fg-wash-accent:#241d4d;
--fg-wash-ok:#0e2e20;
--fg-wash-warn:#33270e;
--fg-wash-danger:#3a1518;
--fg-wash-neutral:var(--fg-navy-800);
--fg-gradient-line:linear-gradient(90deg, var(--fg-blue-400), var(--fg-violet-500));
--fg-shadow-pop:0 8px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
--fg-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2397a3c4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
color-scheme:dark;
}
}
/* --- Base ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
font-family:var(--fg-font-ui);
font-size:var(--fg-text-body); line-height:var(--fg-leading-body);
color:var(--fg-ink); background:var(--fg-bg);
-webkit-font-smoothing:antialiased;
transition:background-color var(--fg-t-base), color var(--fg-t-base);
}
h1,h2,h3{font-family:var(--fg-font-display);font-weight:var(--fg-fw-semibold);margin:0 0 var(--fg-space-4)}
h1{font-size:var(--fg-text-display);line-height:var(--fg-leading-display)}
h2{font-size:var(--fg-text-heading);line-height:var(--fg-leading-heading)}
h3{font-size:var(--fg-text-title);line-height:var(--fg-leading-title)}
h4,h5,h6{font-family:var(--fg-font-ui);font-weight:var(--fg-fw-semibold);font-size:var(--fg-text-body-lg);line-height:var(--fg-leading-body-lg);margin:0 0 var(--fg-space-3)}
p{margin:0 0 var(--fg-space-3)}
a{color:var(--fg-primary);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:color-mix(in srgb, var(--fg-primary) 25%, transparent)}
:focus-visible{outline:none;box-shadow:var(--fg-focus-ring);border-radius:var(--fg-radius-sm)}
button{font:inherit}
/* Все суммы, ИНН, даты, номера — моноширинно, табличные цифры.
overflow-wrap: длинный неразрывный номер (19-значная закупка, «БГ-…») переносится,
а не вылезает из контейнера; инертно там, где действует white-space:nowrap. */
.fg-num{font-family:var(--fg-font-mono);font-variant-numeric:tabular-nums;letter-spacing:-0.01em;overflow-wrap:anywhere}
/* --- Layout utilities -------------------------------------------------------- */
.fg-container{max-width:var(--fg-page-max);margin:0 auto;padding:0 var(--fg-space-6)}
.fg-muted{color:var(--fg-ink-muted)}
.fg-eyebrow{
font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);
font-weight:var(--fg-fw-semibold);letter-spacing:.08em;text-transform:uppercase;
color:var(--fg-ink-muted);
}
/* Тонкая градиентная линия — фирменный «футуристичный» штрих (topbar, разделители) */
.fg-hairline-gradient{height:2px;background:var(--fg-gradient-line);border:0}
/* Точечная сетка для hero-зон (никогда — под рабочими формами) */
.fg-dotgrid{background-image:var(--fg-dotgrid);background-size:22px 22px}
/* --- Components -------------------------------------------------------------
Заполняется поэтапно; каждый компонент демонстрируется в index.html. */
/* .fg-btn — кнопки */
.fg-btn{
display:inline-flex;align-items:center;justify-content:center;gap:var(--fg-space-2);
padding:9px 18px;border-radius:var(--fg-radius-md);
border:1px solid transparent;cursor:pointer;user-select:none;
font-weight:var(--fg-fw-semibold);font-size:var(--fg-text-body);line-height:20px;
background:var(--fg-primary);color:var(--fg-on-primary);
transition:background-color var(--fg-t-fast), border-color var(--fg-t-fast), color var(--fg-t-fast);
text-decoration:none;
}
.fg-btn:hover{background:var(--fg-primary-hover);text-decoration:none}
.fg-btn:disabled{opacity:.5;cursor:not-allowed}
.fg-btn--ghost{background:transparent;color:var(--fg-ink);border-color:var(--fg-border-strong)}
.fg-btn--ghost:hover{background:var(--fg-wash-neutral);border-color:var(--fg-ink-muted)}
.fg-btn--danger{background:var(--fg-danger);color:#fff}
:root[data-theme="dark"] .fg-btn--danger{color:#2b0d0e}
.fg-btn--danger:hover{filter:brightness(1.08);background:var(--fg-danger)}
/* Ghost + danger = второстепенное деструктивное действие (контур), не конкурирует с основной красной кнопкой */
.fg-btn--ghost.fg-btn--danger{background:transparent;color:var(--fg-danger);border-color:var(--fg-danger)}
.fg-btn--ghost.fg-btn--danger:hover{background:var(--fg-wash-danger);filter:none}
:root[data-theme="dark"] .fg-btn--ghost.fg-btn--danger{color:var(--fg-danger)}
.fg-btn--sm{padding:5px 12px;font-size:var(--fg-text-body-sm);line-height:18px;border-radius:var(--fg-radius-sm)}
.fg-btn--icon{padding:8px;width:38px;height:38px}
.fg-btn--icon.fg-btn--sm{padding:5px;width:30px;height:30px}
/* .fg-card — плоская карточка (hairline, без тени) */
.fg-card{
background:var(--fg-surface);border:1px solid var(--fg-border);
border-radius:var(--fg-radius-md);padding:var(--fg-space-5);
}
.fg-card__head{display:flex;align-items:center;gap:var(--fg-space-3);justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--fg-space-3)}
/* длинный заголовок (номер заявки) переносится, а не выталкивает кнопки/бейджи */
.fg-card__head>*{min-width:0}
/* --- Поля форм ------------------------------------------------------------- */
.fg-label{display:flex;align-items:center;gap:6px;font-size:var(--fg-text-body-sm);line-height:var(--fg-leading-body-sm);font-weight:var(--fg-fw-medium);margin-bottom:6px}
.fg-label .req{color:var(--fg-danger)}
.fg-input,.fg-select,.fg-textarea{
width:100%;padding:8px 12px;
border:1px solid var(--fg-border-strong);border-radius:var(--fg-radius-md);
background:var(--fg-surface);color:var(--fg-ink);
font-family:inherit;font-size:var(--fg-text-body);line-height:20px;
transition:border-color var(--fg-t-fast), box-shadow var(--fg-t-fast), background-color var(--fg-t-fast);
}
.fg-input::placeholder,.fg-textarea::placeholder{color:var(--fg-ink-faint)}
.fg-input:focus-visible,.fg-select:focus-visible,.fg-textarea:focus-visible{
outline:none;border-color:var(--fg-primary);box-shadow:var(--fg-focus-ring);border-radius:var(--fg-radius-md);
}
.fg-input:disabled,.fg-select:disabled,.fg-textarea:disabled{
background:var(--fg-surface-sunken);color:var(--fg-ink-muted);cursor:not-allowed;
}
.fg-textarea{min-height:88px;resize:vertical}
.fg-select{
appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
background-image:var(--fg-chevron);background-repeat:no-repeat;
background-position:right 10px center;background-size:16px;
}
.fg-input--invalid,.fg-select--invalid{border-color:var(--fg-danger)}
.fg-field{display:flex;flex-direction:column;min-width:0}
.fg-hint{font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);color:var(--fg-ink-muted);margin-top:4px}
.fg-hint--error{color:var(--fg-danger)}
/* Три состояния поля (паттерн из ui/calculator.html):
обычное · --locked «определяет платформа» (авто по ИНН, недоступно) · --api «нужно для API» */
.fg-field--locked .fg-input,.fg-field--locked .fg-select{background:var(--fg-surface-sunken);color:var(--fg-ink-muted)}
.fg-field--api .fg-input,.fg-field--api .fg-select{border-color:color-mix(in srgb, var(--fg-accent) 55%, var(--fg-border-strong))}
.fg-flag{display:inline-flex;align-items:center;padding:1px 7px;border-radius:var(--fg-radius-sm);font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);font-weight:var(--fg-fw-medium)}
.fg-flag--locked{background:var(--fg-wash-neutral);color:var(--fg-ink-muted)}
.fg-flag--api{background:var(--fg-wash-accent);color:var(--fg-accent)}
/* --added: поле есть в Теледоке, но в нашем прототипе изначально не использовалось (серое, пунктир) */
.fg-field--added .fg-input,.fg-field--added .fg-select,.fg-field--added .fg-textarea{background:var(--fg-surface-sunken);border-style:dashed;color:var(--fg-ink-muted)}
.fg-field--added .fg-choice-group{opacity:.72}
.fg-flag--added{background:var(--fg-wash-neutral);color:var(--fg-ink-muted)}
/* --- Радиокнопки и чекбоксы -------------------------------------------------- */
.fg-radio,.fg-checkbox{display:inline-flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:var(--fg-text-body);line-height:20px}
.fg-radio input,.fg-checkbox input{
appearance:none;-webkit-appearance:none;flex:none;margin:1px 0 0;
width:18px;height:18px;border:1.5px solid var(--fg-border-strong);
background:var(--fg-surface);cursor:pointer;
transition:border-color var(--fg-t-fast), background-color var(--fg-t-fast), border-width var(--fg-t-fast);
}
.fg-radio input{border-radius:var(--fg-radius-full)}
.fg-radio input:checked{border-color:var(--fg-primary);border-width:5.5px}
.fg-checkbox input{border-radius:5px}
.fg-checkbox input:checked{
background-color:var(--fg-primary);border-color:var(--fg-primary);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size:13px;background-position:center;background-repeat:no-repeat;
}
.fg-radio input:focus-visible,.fg-checkbox input:focus-visible{outline:none;box-shadow:var(--fg-focus-ring)}
.fg-radio input:disabled,.fg-checkbox input:disabled{opacity:.45;cursor:not-allowed}
.fg-radio input:disabled+span,.fg-checkbox input:disabled+span{opacity:.55}
.fg-choice-group{display:flex;flex-wrap:wrap;gap:var(--fg-space-3) var(--fg-space-5)}
/* Вертикальный список чекбоксов: элементы слева, «?» рядом с подписью (без «лесенки») */
.fg-choice-group--v{flex-direction:column;align-items:flex-start;gap:var(--fg-space-2)}
.fg-choice-group--v>span{display:inline-flex;align-items:center;gap:var(--fg-space-2)}
/* Чекбокс/радио + кнопка «?» в одну строку — «?» не отрывается на новую строку */
.fg-check-row{display:flex;align-items:flex-start;gap:var(--fg-space-2)}
.fg-check-row>.fg-help{flex:none;margin-top:1px}
/* --- Переключатель (switch) --------------------------------------------------- */
.fg-switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:var(--fg-text-body)}
.fg-switch input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.fg-switch__track{
flex:none;width:36px;height:20px;border-radius:var(--fg-radius-full);
background:var(--fg-border-strong);position:relative;transition:background-color var(--fg-t-fast);
}
.fg-switch__track::after{
content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
background:#fff;transition:transform var(--fg-t-fast);box-shadow:0 1px 2px rgba(7,13,30,.25);
}
.fg-switch input:checked+.fg-switch__track{background:var(--fg-primary)}
.fg-switch input:checked+.fg-switch__track::after{transform:translateX(16px)}
.fg-switch input:focus-visible+.fg-switch__track{box-shadow:var(--fg-focus-ring)}
.fg-switch input:disabled+.fg-switch__track{opacity:.45}
/* --- Бейджи статусов ---------------------------------------------------------- */
.fg-badge{
display:inline-flex;align-items:center;gap:4px;padding:2px 8px;
border-radius:var(--fg-radius-sm);font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);
font-weight:var(--fg-fw-semibold);background:var(--fg-wash-neutral);color:var(--fg-ink-muted);white-space:nowrap;
max-width:100%;min-width:0;
}
/* для длинного содержимого (номер выпущенной БГ): перенос вместо вылезания */
.fg-badge--wrap{white-space:normal;overflow-wrap:anywhere;text-align:left}
.fg-badge--info{background:var(--fg-wash-info);color:var(--fg-primary)}
.fg-badge--accent{background:var(--fg-wash-accent);color:var(--fg-accent)}
.fg-badge--ok{background:var(--fg-wash-ok);color:var(--fg-ok)}
.fg-badge--warn{background:var(--fg-wash-warn);color:var(--fg-warn)}
.fg-badge--danger{background:var(--fg-wash-danger);color:var(--fg-danger)}
/* --- Чипы (файлы, фильтры) ----------------------------------------------------- */
.fg-chip{
display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
border:1px solid var(--fg-border);border-radius:var(--fg-radius-sm);
background:var(--fg-surface);font-size:var(--fg-text-body-sm);line-height:18px;color:var(--fg-ink);
}
button.fg-chip{cursor:pointer;transition:border-color var(--fg-t-fast), background-color var(--fg-t-fast)}
button.fg-chip:hover{border-color:var(--fg-border-strong);background:var(--fg-wash-neutral)}
.fg-chip--active{border-color:var(--fg-primary);background:var(--fg-wash-info);color:var(--fg-primary)}
.fg-chip--file{border-style:dashed;border-color:var(--fg-border-strong)} /* «Прикрепить файлы» */
.fg-chip--saved{border-style:solid;background:var(--fg-wash-accent);border-color:transparent;color:var(--fg-accent)} /* «Сохранённый файл» */
.fg-chip__x{
appearance:none;border:0;background:none;padding:0;margin-left:2px;cursor:pointer;
color:inherit;opacity:.55;font-size:14px;line-height:1;
}
.fg-chip__x:hover{opacity:1}
/* --- Счётчики (навигация, табы, колокольчик) ------------------------------------ */
.fg-counter{
display:inline-flex;align-items:center;justify-content:center;
min-width:18px;height:18px;padding:0 5px;border-radius:var(--fg-radius-full);
background:var(--fg-primary);color:var(--fg-on-primary);
font-family:var(--fg-font-mono);font-size:11px;font-weight:var(--fg-fw-medium);line-height:1;
}
.fg-counter--muted{background:var(--fg-wash-neutral);color:var(--fg-ink-muted)}
.fg-counter--danger{background:var(--fg-danger);color:#fff}
:root[data-theme="dark"] .fg-counter--danger{color:#2b0d0e}
/* --- Аватар (инициалы пользователя/организации) --------------------------------- */
.fg-avatar{
flex:none;width:32px;height:32px;border-radius:var(--fg-radius-full);
display:inline-flex;align-items:center;justify-content:center;
background:var(--fg-wash-info);color:var(--fg-primary);
font-size:12px;font-weight:var(--fg-fw-semibold);letter-spacing:.02em;user-select:none;
}
.fg-avatar--grad{background:var(--fg-gradient-line);color:#fff}
.fg-avatar--sm{width:24px;height:24px;font-size:10px}
.fg-avatar--lg{width:40px;height:40px;font-size:14px}
/* --- Поиск ------------------------------------------------------------------- */
.fg-search{position:relative}
.fg-search .fg-input{padding-left:34px}
.fg-search::before{
content:"";position:absolute;left:11px;top:50%;translate:0 -50%;width:15px;height:15px;
background:var(--fg-ink-faint);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10.8 10.8 L15 15' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10.8 10.8 L15 15' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
pointer-events:none;
}
/* --- Подсказки: tooltip + круглая «?» -------------------------------------------- */
[data-fg-tip]{position:relative}
[data-fg-tip]:hover::after,[data-fg-tip]:focus-visible::after{
content:attr(data-fg-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
width:max-content;max-width:250px;padding:6px 10px;border-radius:var(--fg-radius-sm);
background:var(--fg-ink);color:var(--fg-bg);
font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);font-weight:var(--fg-fw-regular);
text-align:left;white-space:normal;box-shadow:var(--fg-shadow-pop);z-index:50;pointer-events:none;
}
.fg-help{
appearance:none;flex:none;width:18px;height:18px;padding:0;border-radius:var(--fg-radius-full);
border:1px solid var(--fg-border-strong);background:transparent;color:var(--fg-ink-muted);
font-size:11px;font-weight:var(--fg-fw-semibold);line-height:1;
display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
transition:color var(--fg-t-fast), border-color var(--fg-t-fast);
}
.fg-help:hover{border-color:var(--fg-primary);color:var(--fg-primary)}
/* --- Табы со счётчиками ---------------------------------------------------------- */
.fg-tabs{display:flex;gap:2px;border-bottom:1px solid var(--fg-border);overflow-x:auto}
.fg-tab{
appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
padding:10px 14px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer;
font-size:var(--fg-text-body);font-weight:var(--fg-fw-medium);color:var(--fg-ink-muted);
transition:color var(--fg-t-fast), border-color var(--fg-t-fast);
}
.fg-tab:hover{color:var(--fg-ink)}
.fg-tab[aria-selected="true"]{color:var(--fg-primary);border-bottom-color:var(--fg-primary);font-weight:var(--fg-fw-semibold)}
.fg-tab[aria-selected="true"] .fg-counter--muted{background:var(--fg-wash-info);color:var(--fg-primary)}
[role="tabpanel"][hidden]{display:none}
/* --- Радиокарточки (режимы приоритета, «Популярный») ------------------------------- */
.fg-radio-card{
position:relative;display:block;padding:var(--fg-space-4);cursor:pointer;
background:var(--fg-surface);border:1px solid var(--fg-border);border-radius:var(--fg-radius-md);
transition:border-color var(--fg-t-fast), box-shadow var(--fg-t-fast);
}
.fg-radio-card input{position:absolute;opacity:0;pointer-events:none}
.fg-radio-card:hover{border-color:var(--fg-border-strong)}
.fg-radio-card:has(input:checked){border-color:var(--fg-primary);box-shadow:inset 0 0 0 1px var(--fg-primary)}
.fg-radio-card:has(input:focus-visible){box-shadow:var(--fg-focus-ring)}
.fg-radio-card__title{display:flex;align-items:center;gap:8px;font-weight:var(--fg-fw-semibold)}
.fg-radio-card__desc{font-size:var(--fg-text-body-sm);line-height:var(--fg-leading-body-sm);color:var(--fg-ink-muted);margin-top:4px}
/* --- Степпер мастера («Заполнение данных → Выбор банков → Загрузка документов») ----- */
.fg-stepper{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fg-space-2);counter-reset:fgstep}
.fg-step{
display:flex;align-items:center;gap:8px;counter-increment:fgstep;
font-size:var(--fg-text-body-sm);font-weight:var(--fg-fw-medium);color:var(--fg-ink-muted);
}
.fg-step::before{
content:counter(fgstep);flex:none;width:24px;height:24px;border-radius:var(--fg-radius-full);
border:1.5px solid var(--fg-border-strong);display:inline-flex;align-items:center;justify-content:center;
font-family:var(--fg-font-mono);font-size:12px;
}
.fg-step--active{color:var(--fg-ink)}
.fg-step--active::before{background:var(--fg-primary);border-color:var(--fg-primary);color:var(--fg-on-primary)}
.fg-step--done::before{content:"✓";background:var(--fg-wash-ok);border-color:transparent;color:var(--fg-ok)}
.fg-step:not(:last-child)::after{content:"";flex:none;width:28px;height:1.5px;background:var(--fg-border);margin-left:var(--fg-space-2)}
/* --- Строки заявок внутри карточки (банк · статус · дата · меню) --------------------- */
.fg-demand-row{display:flex;align-items:center;gap:var(--fg-space-3);padding:10px 0;border-top:1px solid var(--fg-border)}
.fg-demand-row__name{flex:1;min-width:0;font-weight:var(--fg-fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* на узких экранах имя банка занимает свою строку — иначе сжимается до нуля
(бейдж/дата/кебаб не сжимаются) и банк в списке невозможно опознать */
@media (max-width:640px){
.fg-demand-row{flex-wrap:wrap;row-gap:4px}
/* имя делит первую строку с аватаром (~30px+gap); бейдж/дата/меню уходят на вторую */
.fg-demand-row__name{flex:1 1 calc(100% - 46px)}
}
/* Строка авто-проверки контрагента (РНП, банкротство) */
.fg-compliance{display:inline-flex;align-items:center;gap:7px;font-size:var(--fg-text-body-sm);color:var(--fg-ok)}
.fg-compliance::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.fg-compliance--bad{color:var(--fg-danger)}
/* --- Таблица (Банк | Ставка | Цена) ------------------------------------------------ */
.fg-table-wrap{border:1px solid var(--fg-border);border-radius:var(--fg-radius-md);overflow:auto;background:var(--fg-surface)}
.fg-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fg-text-body)}
.fg-table th{
position:sticky;top:0;z-index:1;background:var(--fg-surface-sunken);
text-align:left;padding:10px 14px;border-bottom:1px solid var(--fg-border);white-space:nowrap;
font-size:var(--fg-text-body-sm);font-weight:var(--fg-fw-semibold);color:var(--fg-ink-muted);
}
.fg-table td{padding:10px 14px;border-bottom:1px solid var(--fg-border);vertical-align:middle}
.fg-table tbody tr:last-child td{border-bottom:0}
.fg-table tbody tr{transition:background-color var(--fg-t-fast)}
.fg-table tbody tr:hover{background:color-mix(in srgb, var(--fg-primary) 5%, transparent)}
.fg-table tbody tr[aria-selected="true"]{background:var(--fg-wash-info)}
.fg-table .num{font-family:var(--fg-font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.fg-table th.num{text-align:right}
.fg-table__sort{appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.fg-table__sort:hover{color:var(--fg-ink)}
/* --- Список загрузки документов ----------------------------------------------------- */
.fg-upload-list{display:flex;flex-direction:column;gap:var(--fg-space-3)}
.fg-upload{
display:flex;align-items:flex-start;gap:var(--fg-space-4);justify-content:space-between;
padding:var(--fg-space-4);background:var(--fg-surface);
border:1px dashed var(--fg-border-strong);border-radius:var(--fg-radius-md);
}
.fg-upload__name{display:flex;align-items:center;gap:8px;font-weight:var(--fg-fw-medium);flex-wrap:wrap}
.fg-upload__desc{font-size:var(--fg-text-body-sm);color:var(--fg-ink-muted);margin-top:2px}
/* --- Диалог (нативный