/* PEREPLAN PDF Checker — официальный брендбук PEREPLAN (палитра + Roboto). */
/* Self-hosted Roboto (корпоративный шрифт PEREPLAN). Без @import к Google —
при разрыве с Google пользователь не видит Times. Файлы в frontend/fonts,
отдаются по /static/fonts/. */
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/roboto-400-cyrillic-ext.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:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/roboto-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/roboto-400-latin.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/roboto-500-cyrillic-ext.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:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/roboto-500-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/roboto-500-latin.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/roboto-700-cyrillic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/roboto-700-latin.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root {
/* Брендовая палитра PEREPLAN (имена сохранены, значения = бренд) */
--blue: #126AEE; /* основной бренд */
--blue-dark: #1B3388; /* конец градиента / hover */
--blue-light: #79BBFF;
--blue-50: #EAF2FE; /* очень светлый брендовый */
--blue-100: #D2E3FD;
/* «yellow» в брендбуке акцента нет — мапим на бренд, чтобы старая разметка
с .btn (yellow) стала брендово-синей, без массового переименования. */
--yellow: #126AEE;
--yellow-dark: #1B3388;
--ink: #000000; /* крупные заголовки */
--ink-2: #222222; /* body-текст */
--muted: #767A85;
--line: rgba(0,0,0,.08);
--bg: #F9F9F9; /* общий фон страницы */
--card: #FFFFFF; /* карточки/поверхности */
--bg-soft: #F6F7F9; /* мягкая серая поверхность (строки, hover) */
--bg-soft2: #EEF1F5; /* чуть темнее (счётчики, активные) */
--green: #1FA46B;
--green-bg: #E3F5EC;
--red: #D6342C;
--red-bg: #FCE8E6;
--amber: #D97A00; /* предупреждение (брендовый оранжевый) */
--amber-bg: #FFF1DD;
--uncertain: #6E5BD6;
--uncertain-bg: #ECE9FB;
--shadow-card: 0 1px 3px rgba(0,0,0,.06);
--shadow-lift: 0 8px 24px rgba(18,106,238,.12);
--shadow-btn: 0 1px 2px rgba(18,106,238,.18);
--shadow-btn-hover: 0 4px 12px rgba(18,106,238,.26);
/* iPhone-стиль выделений: «сочное» кольцо настоящим брендовым #126AEE */
--ring-soft: rgba(18,106,238,.12); /* мягкое кольцо выбора */
--ring-strong: rgba(18,106,238,.20); /* кольцо сильнее (active/drag) */
--ring: 0 0 0 4px var(--ring-soft); /* кольцо «выбрано» (iPhone-pill) */
--ring-focus: 0 0 0 3px rgba(18,106,238,.38); /* кольцо фокуса с клавиатуры */
--ease: cubic-bezier(.4,0,.2,1);
/* Типографическая шкала — единый ритм (премиальность). */
--fs-xs: 12px;
--fs-sm: 13px;
--fs-base: 15px;
--fs-md: 16px;
--fs-lg: 18px;
--fs-h3: 20px;
--fs-h2: 22px;
--fs-h1: 28px;
--lh-tight: 1.25;
--lh-base: 1.55;
/* Шкала отступов, кратная 4. */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
/* Радиусы — два значения: контролы и карточки. */
--r-sm: 8px;
--r-md: 14px;
--r-pill: 999px;
/* Глобальный масштаб шрифта (обычный / крупный / очень крупный) */
--fz: 1;
}
/* Масштаб текста всего сайта. Применяется до отрисовки inline-скриптом в . */
/* Масштаб текста всего сайта через zoom — увеличивает ВСЁ, включая абсолютные
px-размеры (раньше calc на html font-size масштабировал только rem, а почти
весь текст в px → A−/A+ почти не работал). zoom переливает вёрстку корректно. */
html { font-size: 16px; }
body { zoom: var(--fz); }
/* ─────────── НОЧНАЯ ТЕМА ─────────── */
[data-theme="dark"] {
--blue: #4D8BF5;
--blue-dark: #2B6DDA;
--blue-light: #79BBFF;
--blue-50: #16243B;
--blue-100: #1B3358;
--yellow: #4D8BF5;
--yellow-dark: #2B6DDA;
--ink: #E6E9EF;
--ink-2: #C9CFDA;
--muted: #9AA3B2;
--line: rgba(255,255,255,.10);
--bg: #0E1320;
--card: #171E2B;
--bg-soft: #1C2433;
--bg-soft2: #232C3D;
--green: #35C98C;
--green-bg: #14342A;
--red: #F0716A;
--red-bg: #3A1E20;
--amber: #E8A24A;
--amber-bg: #3A2C16;
--uncertain: #9A8BEA;
--uncertain-bg: #241F3D;
--shadow-card: 0 1px 3px rgba(0,0,0,.45);
--shadow-lift: 0 10px 28px rgba(0,0,0,.55);
/* В тёмной теме кольцо чуть ярче — иначе теряется на тёмном фоне */
--ring-soft: rgba(77,139,245,.22);
--ring-strong: rgba(77,139,245,.34);
--ring: 0 0 0 4px var(--ring-soft);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Защита от горизонтального overflow: картинки и SVG не растягивают страницу. */
img, svg { max-width: 100%; }
/* Длинные имена файлов (без пробелов, через подчёркивания) НЕ должны уезжать
за экран и плодить горизонтальный скролл. Глобально переносим в местах,
где рендерится имя файла / заголовок проверки. */
.dz-done, .run-status-text, .results-skeleton-text,
.result-item .title, .fix-hint, .fix-where,
#live-title, #live-meta, h2 {
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
}
/* .dz-done / .run-status-text — inline span'ы с именем файла: делаем блочными,
чтобы перенос реально работал внутри узкой карточки на мобиле. */
.dz-done, .run-status-text { display: block; }
/* overflow-x:hidden ТОЛЬКО на html. На body он делал body scroll-контейнером и
ломал position:sticky у шапки (шапка уезжала за экран). Источники гориз.
переполнения убраны точечно (таблица нормативов, длинные имена файлов). */
html { overflow-x: hidden; }
html, body { margin: 0; padding: 0; max-width: 100%; }
html { background: var(--bg); }
body {
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--ink-2);
line-height: var(--lh-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
transition: background .2s, color .2s;
}
/* HEADER — официальный бренд PEREPLAN */
header.site {
background: var(--card);
border-bottom: 1px solid var(--line);
box-shadow: 0 1px 4px rgba(14, 26, 43, 0.06);
padding: 12px 0;
position: sticky; /* остаётся вверху при прокрутке длинных страниц */
top: 0;
z-index: 100;
}
/* В тёмной теме контраст и так есть — мягкая тень не мешает, но делаем её незаметной. */
[data-theme="dark"] header.site { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
header.site .wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
/* Логотип компактный, вертикальный: «PEREPLAN» сверху, «Проверка проектов» снизу */
.logo {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
text-decoration: none;
color: var(--ink);
flex-shrink: 0;
line-height: 1;
}
/* SVG-логотип: явные max-width И max-height И width:auto (CLAUDE.md) */
.logo .logo-img {
height: 18px;
width: auto;
max-width: 130px;
max-height: 18px;
display: block;
}
.logo .wordmark {
font-weight: 500;
font-size: 11px;
color: var(--muted);
white-space: nowrap;
letter-spacing: .01em;
line-height: 1;
}
/* legacy текстовый логотип на случай старой разметки */
.logo .brand { font-weight: 700; font-size: 20px; color: var(--blue); }
.logo .brand sup { font-size: 9px; vertical-align: super; }
.logo .sub { display: block; font-size: 9px; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; margin-top: 2px; }
.logo .badge-years { background: var(--blue-50); color: var(--blue); font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 600; margin-left: 6px; }
nav.top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
nav.top a {
color: var(--ink-2);
text-decoration: none;
font-weight: 500;
font-size: 14px;
transition: color .15s;
}
nav.top a:hover { color: var(--blue); }
nav.top a.active { color: var(--blue); }
nav.top .user { color: var(--muted); font-size: 13px; }
/* Имя пользователя справа; «Выйти» появляется по наведению */
.user-name {
position: relative;
color: var(--ink-2);
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
}
.user-name .user-logout {
margin-left: 8px;
color: var(--blue);
font-weight: 600;
text-decoration: none;
opacity: 0;
max-width: 0;
overflow: hidden;
white-space: nowrap;
transition: opacity .15s, max-width .15s;
pointer-events: none;
}
.user-name:hover .user-logout,
.user-name:focus-within .user-logout,
.user-name.open .user-logout {
opacity: 1;
max-width: 80px;
pointer-events: auto;
}
/* Кнопки управления в шапке: тема + обучение */
.hdr-tools { display: flex; align-items: center; gap: 8px; }
.hdr-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
background: var(--bg-soft); color: var(--ink-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 7px 14px;
font-size: 13px; font-weight: 500;
cursor: pointer; line-height: 1;
transition: background .15s, color .15s, border-color .15s;
}
.hdr-btn:hover { background: var(--bg-soft2); color: var(--ink); }
.hdr-btn.icon-only { padding: 7px 10px; font-size: 15px; }
/* Регулятор размера шрифта: А− ●●○ А＋ */
.hdr-fontsize {
display: inline-flex; align-items: center; gap: 2px;
background: var(--bg-soft); border: 1px solid var(--line);
border-radius: 999px; padding: 3px 4px; line-height: 1;
}
.hdr-fontsize .fz-btn {
background: transparent; border: 0; box-shadow: none;
color: var(--ink-2); cursor: pointer;
padding: 4px 8px; border-radius: 999px; font-weight: 600;
min-width: 28px; transition: background .12s, color .12s, opacity .12s;
}
.hdr-fontsize .fz-btn.minus { font-size: 12px; }
.hdr-fontsize .fz-btn.plus { font-size: 16px; }
.hdr-fontsize .fz-btn:hover:not(:disabled) { background: var(--bg-soft2); color: var(--blue); }
.hdr-fontsize .fz-btn:disabled { opacity: .35; cursor: default; background: transparent !important; color: var(--muted) !important; }
.hdr-fontsize .fz-dots { display: inline-flex; gap: 3px; padding: 0 4px; }
.hdr-fontsize .fz-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2, #A5A9B3); transition: background .12s; }
.hdr-fontsize .fz-dot.on { background: var(--blue); }
.theme-toggle { display: inline-flex; align-items: center; }
.theme-toggle .sun, .theme-toggle .moon { display: inline-flex; align-items: center; }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: inline-flex; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
/* Гамбургер: скрыт на десктопе, виден на мобиле через медиа-запрос ниже. */
.hdr-burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 44px; height: 44px; /* тач-цель ≥44px */
padding: 11px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
flex-shrink: 0;
}
.hdr-burger span {
display: block;
height: 2px; width: 100%;
background: var(--ink-2);
border-radius: 2px;
transition: transform .2s, opacity .2s;
}
.hdr-burger:hover span { background: var(--blue); }
@media (max-width: 640px) {
header.site .wrap { padding: 0 14px; gap: 10px; flex-wrap: nowrap; }
.logo .logo-img { height: 20px; max-height: 20px; max-width: 120px; }
.logo .wordmark { font-size: 13px; padding-left: 8px; }
.logo { min-width: 0; }
.logo .wordmark { overflow: hidden; text-overflow: ellipsis; }
.hdr-burger { display: flex; }
/* nav становится выпадающим меню под шапкой */
nav.top {
position: absolute;
top: 100%; left: 0; right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--card);
border-bottom: 1px solid var(--line);
box-shadow: 0 8px 24px rgba(14, 26, 43, 0.12);
padding: 6px;
display: none;
z-index: 60;
width: auto;
}
nav.top.mobile-open { display: flex; }
/* sticky сохраняем и на мобиле (гамбургер не должен уезжать за экран на длинных
страницах результата). sticky так же создаёт контейнер для absolute-меню. */
nav.top a {
font-size: 15px;
padding: 12px 14px;
border-radius: 8px;
}
nav.top a:hover { background: var(--bg-soft); }
nav.top .user {
font-size: 14px;
padding: 12px 14px;
border-top: 1px solid var(--line);
margin-top: 4px;
}
nav.top .user a { display: inline; padding: 0; }
/* На мобиле hover недоступен — «Выйти» всегда видно в меню */
.user-name .user-logout {
opacity: 1;
max-width: none;
overflow: visible;
pointer-events: auto;
}
.hdr-tools {
flex-direction: column;
align-items: stretch;
gap: 6px;
width: 100%;
border-top: 1px solid var(--line);
margin-top: 4px;
padding-top: 6px;
}
.hdr-tools .hdr-btn {
justify-content: flex-start;
width: 100%;
padding: 12px 14px;
font-size: 15px;
border-radius: 8px;
}
.hdr-tools .hdr-btn .hdr-btn-label { display: inline; }
.hdr-fontsize { width: 100%; justify-content: center; padding: 8px 4px; }
}
/* MAIN */
main {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
}
h1, h2, h3 { color: var(--ink); margin-top: 0; line-height: var(--lh-tight); letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-lg); font-weight: 700; }
h3 { font-size: var(--fs-md); font-weight: 700; }
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
margin-bottom: 18px;
/* Мягкая двухслойная тень — «дорогой» отрыв от фона без блюра/градиентов. */
box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .05);
}
[data-theme="dark"] .card {
box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
}
.card.hero-blue {
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
color: #fff;
border: 0;
}
/* Скелетоны загрузки — серые плашки фикс-высоты, без layout shift. */
.skel {
display: block; height: 14px; border-radius: 6px;
background: linear-gradient(90deg, var(--line) 25%, var(--bg) 37%, var(--line) 63%);
background-size: 400% 100%; animation: skel-shimmer 1.3s ease-in-out infinite;
}
.skel-row td { padding: 12px 10px; }
@keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
/* SVG-иконная система: маска по currentColor (наследует цвет родителя, без эмодзи). */
.ic {
display: inline-block; width: 1em; height: 1em; vertical-align: -.14em;
background: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
}
.ic-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.3l-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.3l-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E"); }
.ic-pin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E"); }
.ic-warn { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L1 21h22L12 2zm0 6l6.5 11h-13L12 8zm-1 3v4h2v-4h-2zm0 5v2h2v-2h-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L1 21h22L12 2zm0 6l6.5 11h-13L12 8zm-1 3v4h2v-4h-2zm0 5v2h2v-2h-2z'/%3E%3C/svg%3E"); }
/* Доступность: минимальная тап-зона 44px на интерактивных мелочах (UX-аудит). */
.quote-toggle, .fixed-btn, table a.btn-open, .hdr-btn, .fz-btn,
[data-resolve], [data-mr-mark], [data-mr-confirm], [data-mr-revert] {
min-height: 44px; display: inline-flex; align-items: center;
}
.rule-toggle, .switch, .dt-toggle { min-height: 28px; }
@media (max-width: 640px) {
.rule-toggle, .switch { min-height: 36px; min-width: 44px; }
}
/* Единое пустое состояние: «не найдено», «нет данных» и т.п. */
.empty-state { text-align: center; padding: 40px 24px; }
.empty-state .empty-ic { font-size: 40px; line-height: 1; margin-bottom: 12px; }
.empty-state h2 { margin: 0 0 6px; }
.empty-state p { margin: 0 0 18px; }
.btn-primary-lg {
display: inline-block; background: var(--blue); color: #fff; font-weight: 600;
padding: 12px 22px; border-radius: 10px; text-decoration: none;
box-shadow: var(--shadow-btn); transition: box-shadow .15s, transform .05s;
}
.btn-primary-lg:hover { box-shadow: var(--shadow-btn-hover); }
.btn-primary-lg:active { transform: translateY(1px); }
/* Мобильная история: таблица → карточки (на десктопе таблица обрезалась за экран). */
@media (max-width: 640px) {
#subs-table thead { display: none; }
#subs-table, #subs-table tbody, #subs-table tr, #subs-table td { display: block; width: 100%; }
#subs-table tr {
border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
margin-bottom: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
background: var(--card);
}
#subs-table td {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding: 5px 0; border: 0; text-align: right;
overflow-wrap: anywhere; word-break: break-word; /* длинные имена_файлов_через_подчёркивания */
}
/* Таблица нормативов на узком экране — горизонтальный скролл внутри, а не у всей
страницы (иначе вся /normatives ехала вбок). */
.norm-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#subs-table td::before {
content: attr(data-label); font-weight: 600; color: var(--muted);
text-align: left; flex: 0 0 auto;
}
#subs-table td[data-label=""] { justify-content: flex-end; padding-top: 8px; }
#subs-table td[data-label=""]::before { content: ""; }
#subs-table .btn-open {
display: inline-block; background: var(--blue); color: #fff;
padding: 8px 16px; border-radius: 8px; font-weight: 600; text-decoration: none;
}
}
.card.hero-blue h2, .card.hero-blue h3 { color: #fff; }
.card.hero-blue .muted { color: rgba(255,255,255,.85); }
/* DROPZONES */
.dropzone {
border: 2px dashed var(--blue-light);
border-radius: 14px;
padding: 36px;
text-align: center;
background: var(--blue-50);
cursor: pointer;
transition: all .2s var(--ease);
box-shadow: var(--shadow-card);
}
.dropzone:hover {
border-color: var(--blue);
background: var(--blue-50);
box-shadow: var(--shadow-card), var(--ring);
}
.dropzone.drag {
border: 2px dashed var(--blue);
background: var(--blue-50);
box-shadow: var(--shadow-lift);
transform: scale(1.01);
}
.dropzone p { margin: 4px 0; color: var(--ink); }
.dropzone .hint { font-size: 13px; color: var(--muted); }
/* INPUTS */
select, input[type=text], input[type=email], input[type=number], textarea {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--line);
border-radius: 10px;
font: inherit;
font-size: 14px;
background: var(--card);
color: var(--ink);
transition: border-color .15s, box-shadow .15s;
}
select:focus, input:focus, textarea:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px var(--ring-soft);
}
textarea {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
}
/* BUTTONS — брендовые синие, скруглённые (брендбук).
Иерархия: primary (заливка бренд) > secondary (нейтральный) > disabled (серый). */
button, .btn {
background: var(--blue);
color: #fff;
border: 1px solid transparent;
padding: 12px 22px;
border-radius: 999px;
cursor: pointer;
font: inherit;
font-size: 14px;
font-weight: 500;
box-shadow: var(--shadow-btn);
transition: background .15s, transform .05s, box-shadow .15s, color .15s, border-color .15s;
}
button:hover { background: var(--blue-dark); box-shadow: var(--shadow-btn-hover); }
button:active { transform: translateY(1px); }
/* Фокус с клавиатуры — заметное кольцо (десктоп). Мышь его не вызывает. */
button:focus-visible, .btn:focus-visible,
a:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: none;
box-shadow: var(--ring-focus);
}
button.secondary {
background: var(--bg-soft2);
color: var(--ink);
box-shadow: none;
border-color: var(--line);
}
button.secondary:hover { background: var(--bg-soft); color: var(--ink); box-shadow: none; border-color: var(--line-strong, rgba(0,0,0,.12)); }
button.primary {
background: var(--blue);
color: #fff;
box-shadow: var(--shadow-btn);
}
button.primary:hover { background: var(--blue-dark); box-shadow: var(--shadow-btn-hover); }
button.danger {
background: var(--red-bg);
color: var(--red);
box-shadow: none;
}
button.danger:hover { background: var(--red); color: #fff; box-shadow: none; }
/* DISABLED — ЯВНО серое, не «чуть бледнее». Видно сразу, что нажать нельзя. */
button:disabled, button[disabled], .btn:disabled, .btn.is-disabled {
background: var(--bg-soft2) !important;
color: var(--muted) !important;
border-color: transparent !important;
box-shadow: none !important;
cursor: not-allowed;
opacity: .9;
transform: none !important;
animation: none !important;
filter: none;
}
button:disabled:hover, button[disabled]:hover, .btn:disabled:hover {
background: var(--bg-soft2) !important;
color: var(--muted) !important;
}
/* TAB BAR — underline style */
.tab-bar {
display: flex;
gap: 0;
border-bottom: 2px solid var(--line);
margin-bottom: 20px;
}
button.tab {
background: transparent;
color: var(--muted);
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
padding: 10px 20px;
font-weight: 600;
font-size: 14px;
border-radius: 0;
transition: color .15s, border-color .15s;
}
button.tab:hover {
background: transparent;
color: var(--ink);
}
button.tab.active {
background: transparent;
color: var(--blue);
border-bottom: 2px solid var(--blue);
}
/* Контекстная «+ Новая проверка» в строке вкладок (видна только при черновике) */
.btn-ctx-new {
align-self: center;
margin-bottom: 6px;
padding: 7px 16px;
background: var(--blue);
color: #fff;
font-weight: 700;
font-size: 13px;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
}
.btn-ctx-new:hover { background: var(--blue-600, #1B3388); }
/* TABLES */
table { width: 100%; border-collapse: collapse; }
th, td {
padding: 14px 12px;
text-align: left;
border-bottom: 1px solid var(--line);
font-size: 14px;
}
th {
color: var(--muted);
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .04em;
padding-top: 10px;
padding-bottom: 10px;
}
tbody tr { transition: background .12s; }
tbody tr:hover td { background: var(--bg-soft); }
tbody tr:last-child td { border-bottom: 0; }
table a { color: var(--blue); text-decoration: none; font-weight: 600; }
table a:hover { text-decoration: underline; }
/* BADGES */
.badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.badge.pass, .badge.done { background: var(--green-bg); color: var(--green); }
.badge.fail, .badge.error { background: var(--red-bg); color: var(--red); }
.badge.skip, .badge.pending { background: var(--bg-soft2); color: var(--muted); }
.badge.running, .badge.warn { background: var(--amber-bg); color: var(--amber); }
.badge.uncertain { background: var(--uncertain-bg); color: var(--uncertain); }
.badge.info { background: var(--blue-50); color: var(--blue); }
/* Активный фильтр (select со значением ≠ «все») — обводка бренда, видно что фильтр включён */
select.filter-on { border-color: var(--blue); background: var(--blue-50); color: var(--ink); font-weight: 500; }
/* LAYOUT */
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; }
.muted { color: var(--muted); font-size: 13px; }
/* RESULT ITEMS — старый стиль (legacy) */
.result-item {
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
margin-bottom: 10px;
background: var(--card);
transition: border-color .15s;
}
.result-item .title { font-weight: 700; margin-bottom: 4px; }
.result-item .details { font-size: 13px; color: var(--ink); margin: 8px 0; }
.result-item .evidence {
background: var(--bg-soft);
border-radius: 8px;
padding: 10px 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
color: var(--ink);
margin-top: 8px;
}
.evidence-row { padding: 2px 0; }
/* ============================================
RESULTS PAGE — новый плотный дизайн
============================================ */
/* Скелет «готовлю проверку» */
.results-skeleton {
text-align: center;
padding: 40px 20px;
color: var(--muted);
}
.results-skeleton-icon { font-size: 32px; margin-bottom: 10px; }
.results-skeleton-text { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
/* Прогресс выполнения */
.run-status {
background: var(--blue-50);
padding: 14px 18px;
border-radius: 12px;
border-left: 3px solid var(--blue);
}
.run-status-text { font-size: 14px; font-weight: 600; color: var(--ink); }
/* Извлечено из исходников — компактно через details */
.extracted-block {
margin: 14px 0;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px 14px;
}
.extracted-block summary {
cursor: pointer;
font-weight: 700;
font-size: 14px;
user-select: none;
padding: 4px 0;
}
.extracted-block table { margin-top: 10px; }
/* Большая шапка с метриками */
.results-summary {
background: linear-gradient(135deg, var(--bg-soft) 0%, #FFFFFF 100%);
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px 24px;
margin-bottom: 16px;
}
.results-summary.ok { border-left: 4px solid var(--green); }
.results-summary.bad { border-left: 4px solid var(--red); }
.results-summary-headline {
font-size: 18px;
font-weight: 800;
color: var(--ink);
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.results-summary.ok .results-summary-headline { color: var(--green); }
.results-summary.bad .results-summary-headline { color: var(--red); }
.results-summary-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.metric {
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 10px;
text-align: center;
}
.metric-num { font-size: 24px; font-weight: 800; line-height: 1.1; }
.metric-lbl { font-size: 11px; text-transform: uppercase; color: var(--muted); margin-top: 2px; letter-spacing: .04em; font-weight: 700; }
.metric.metric-err .metric-num { color: var(--red); }
.metric.metric-warn .metric-num { color: var(--amber); }
.metric.metric-info .metric-num { color: var(--blue); }
.metric.metric-ok .metric-num { color: var(--green); }
.metric.metric-skip .metric-num { color: var(--muted); }
.metric.metric-uncertain .metric-num { color: var(--uncertain); }
.metric.metric-nodata .metric-num { color: var(--muted); }
@media (max-width: 700px) {
.results-summary-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Секции результатов */
.rs-results-section {
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 12px;
background: var(--card);
overflow: hidden;
}
.rs-results-errors { border-left: 3px solid var(--red); }
.rs-results-warnings { border-left: 3px solid var(--amber); }
.rs-results-infos { border-left: 3px solid var(--blue); }
.rs-results-uncertain { border-left: 3px solid var(--uncertain); }
.rs-results-passes { border-left: 3px solid var(--green); }
.rs-results-skips { border-left: 3px solid var(--muted); }
/* «Нет данных» — серая секция с брендовой акцентной рамкой (действие доступно). */
.rs-results-nodata { border-left: 3px solid var(--blue-light); background: var(--bg-soft); }
.rs-results-section-head {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: var(--bg-soft);
border-bottom: 1px solid var(--line);
cursor: pointer;
user-select: none;
font-weight: 700;
}
.rs-results-section-head:hover { background: var(--bg-soft2); }
.rs-results-section.collapsed .rs-results-section-head { border-bottom: 0; }
.rs-results-section.collapsed .rs-results-section-body { display: none; }
.rs-results-section-head .arrow { color: var(--muted); transition: transform .15s; }
.rs-results-section.collapsed .arrow { transform: rotate(-90deg); }
.rs-results-section-head .sec-icon { font-size: 16px; }
.rs-results-section-head .sec-title { font-size: 15px; }
.rs-results-section-head .sec-count {
background: var(--ink);
color: #fff;
padding: 2px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
}
.rs-results-errors .sec-count { background: var(--red); }
.rs-results-warnings .sec-count { background: var(--amber); }
.rs-results-infos .sec-count { background: var(--blue); }
.rs-results-uncertain .sec-count { background: var(--uncertain); }
.rs-results-passes .sec-count { background: var(--green); }
.rs-results-skips .sec-count { background: var(--muted); }
.rs-results-nodata .sec-count { background: var(--muted); }
.rs-results-section-head .sec-hint {
font-size: 12px;
color: var(--muted);
font-weight: 500;
margin-left: auto;
}
.rs-results-section-body {
padding: 4px;
}
/* Карточка результата */
.r-card {
border-bottom: 1px solid var(--line);
background: var(--card);
transition: background .12s;
}
.r-card:last-child { border-bottom: 0; }
.r-card-head {
display: grid;
grid-template-columns: 1fr auto 16px;
gap: 12px;
align-items: center;
padding: 10px 14px;
cursor: pointer;
user-select: none;
}
.r-card-head:hover { background: var(--bg-soft); }
.r-title {
font-weight: 600;
font-size: 14px;
color: var(--ink);
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.r-status-cell {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.r-details-inline {
font-size: 13px;
color: var(--muted);
max-width: 360px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.r-card .arrow { color: var(--muted); font-size: 11px; transition: transform .15s; }
.r-card.collapsed .arrow { transform: rotate(-90deg); }
.r-card.collapsed .r-card-body { display: none; }
.r-card-body {
padding: 0 14px 12px 14px;
border-top: 1px dashed var(--line);
}
.r-details {
font-size: 13.5px;
line-height: 1.5;
margin: 10px 0;
color: var(--ink);
}
.r-evidence {
background: var(--bg-soft);
border-radius: 8px;
padding: 8px 12px;
margin: 8px 0;
}
.r-evidence-row {
font-size: 12.5px;
line-height: 1.5;
color: var(--ink);
padding: 3px 0;
font-family: 'Roboto', system-ui, sans-serif;
}
.r-page {
display: inline-block;
padding: 1px 6px;
background: var(--blue-50);
color: var(--blue);
border-radius: 4px;
font-size: 11px;
font-weight: 700;
margin-right: 6px;
}
.r-meta {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
margin-top: 6px;
}
.r-inherited, .r-manual {
display: inline-block;
padding: 1px 6px;
border-radius: 999px;
font-size: 11px;
background: var(--bg-soft2);
color: var(--muted);
margin-left: 4px;
}
.r-manual { background: var(--green-bg); color: var(--green); }
/* Цвет верхней полосы для конкретной карточки в зависимости от секции */
.rs-results-errors .r-title::before { content: "❌"; font-size: 13px; }
.rs-results-warnings .r-title::before { content: "⚠️"; font-size: 13px; }
.rs-results-infos .r-title::before { content: "ℹ️"; font-size: 13px; }
.rs-results-uncertain .r-title::before { content: "❓"; color: var(--uncertain); font-weight: 800; }
.rs-results-passes .r-title::before { content: "✓"; color: var(--green); font-weight: 800; }
.rs-results-skips .r-title::before { content: "⏭"; color: var(--muted); }
.rs-results-nodata .r-title::before { content: "◌"; color: var(--muted); font-weight: 800; }
/* CHECKLIST EDITOR */
.checklist-item {
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
margin-bottom: 10px;
background: var(--card);
}
.checklist-item .row { margin-bottom: 10px; }
.checklist-item label {
font-size: 11px;
color: var(--muted);
display: block;
margin-bottom: 4px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
}
/* CHECKLIST: GROUPED BY CATEGORY */
.cl-toolbar {
position: sticky;
top: 0;
background: var(--card);
z-index: 5;
padding: 10px 0 8px;
border-bottom: 1px solid var(--line);
margin-bottom: 12px;
}
.cl-search {
width: 100%;
max-width: 480px;
padding: 12px 14px 12px 40px;
border-radius: 10px;
border: 1px solid var(--line);
font-size: 14px;
background: var(--card) url("data:image/svg+xml;utf8,") no-repeat 12px center;
}
.cl-section {
border: 1px solid var(--line);
border-radius: 14px;
margin-bottom: 14px;
background: var(--card);
overflow: hidden;
}
.cl-section-head {
padding: 12px 16px;
background: var(--bg-soft);
border-bottom: 1px solid var(--line);
cursor: pointer;
display: flex;
align-items: center;
gap: 14px;
user-select: none;
transition: background .12s;
}
.cl-section-head:hover { background: var(--bg-soft2); }
.cl-section-head .arrow {
display: inline-block;
transition: transform .15s;
color: var(--muted);
font-size: 12px;
}
.cl-section.collapsed .arrow { transform: rotate(-90deg); }
.cl-section.collapsed .cl-section-body { display: none; }
.cl-section-title {
font-weight: 700;
font-size: 0.9375rem;
color: var(--ink);
flex: 1;
}
.cl-section-counters {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.cl-counter {
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 999px;
background: var(--blue-50);
color: var(--blue);
}
.cl-counter.green { background: var(--green-bg); color: var(--green); }
.cl-counter.amber { background: var(--amber-bg); color: var(--amber); }
.cl-counter.muted { background: var(--bg-soft2); color: var(--muted); }
.cl-counter.red { background: var(--red-bg); color: var(--red); }
.cl-section-body {
padding: 8px;
}
/* COMPACT vs EXPANDED rule card */
.cl-rule {
border: 1px solid var(--line);
border-radius: 10px;
margin: 6px 0 18px 0; /* визуальный разрыв между карточками */
background: var(--card);
transition: border-color .12s, box-shadow .12s;
}
/* Развёрнутая карточка — толще снизу, чтобы было видно что одно закончилось */
.cl-rule:not(.collapsed) {
margin-bottom: 36px;
border-bottom-width: 4px;
border-bottom-color: var(--blue);
box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.cl-rule.inactive { background: var(--bg-soft); opacity: .7; }
.cl-rule.match { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,106,238,.08); }
/* Drag-and-drop */
.cl-rule.dragging { opacity: 0.4; }
.cl-rule.drop-target-before { border-top: 3px solid var(--blue); padding-top: 0; }
.cl-rule.drop-target-after { border-bottom: 3px solid var(--blue); }
.cl-rule .compact .drag-handle {
cursor: grab;
color: #cfd6e0;
font-size: 16px;
padding: 0 6px;
user-select: none;
}
.cl-rule .compact .drag-handle:hover { color: var(--muted); }
.cl-rule.dragging .drag-handle { cursor: grabbing; }
.cl-rule .compact .rule-short {
font-size: 0.75rem;
color: var(--muted);
font-weight: 400;
margin-top: 2px;
line-height: 1.4;
}
/* Mini-toggle включить/выключить в свёрнутой строке */
.mini-toggle {
display: inline-flex;
align-items: center;
cursor: pointer;
flex-shrink: 0;
margin-left: 4px;
}
.mini-toggle input { display: none; }
.mini-toggle-track {
width: 40px;
height: 22px;
border-radius: 11px;
background: #cfd6e0;
position: relative;
transition: background .15s;
}
.mini-toggle.on .mini-toggle-track { background: #34c759; }
.mini-toggle-knob {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--card);
box-shadow: 0 1px 3px rgba(0,0,0,.2);
transition: transform .15s;
}
.mini-toggle.on .mini-toggle-knob { transform: translateX(18px); }
.cl-rule .compact {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
user-select: none;
}
.cl-rule .compact:hover { background: var(--bg-soft); }
.cl-rule .compact .num {
width: 50px;
font-size: 11px;
color: var(--muted);
font-weight: 600;
text-align: right;
}
.cl-rule .compact .title {
flex: 1;
font-weight: 600;
font-size: 0.875rem;
color: var(--ink);
}
.cl-rule .compact .author {
font-size: 12px;
color: var(--muted);
font-weight: 500;
}
.cl-rule .compact .pills {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
/* Мобилка: заголовок правила занимает всю первую строку (иначе бейдж+тумблер
съедают ширину и название переносится по одному слову). Статус и тумблер
уезжают на вторую строку, тумблер прижат вправо. Drag-ручка не нужна на тач. */
@media (max-width: 640px) {
.cl-rule .compact {
flex-wrap: wrap;
align-items: center;
row-gap: 8px;
padding: 12px 14px;
}
.cl-rule .compact .drag-handle { display: none; }
.cl-rule .compact .title { flex: 1 1 100%; font-size: 0.95rem; }
.cl-rule .compact .pills { order: 2; }
.cl-rule .compact .mini-toggle { order: 3; margin-left: auto; }
}
.cl-rule .expanded { padding: 14px; border-top: 1px dashed var(--line); }
.cl-rule.collapsed .expanded { display: none; }
.cl-rule .expanded .row { margin-bottom: 10px; }
.cl-rule .expanded label {
font-size: 11px;
color: var(--muted);
display: block;
margin-bottom: 4px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ============================================
RULE EDITOR (rs-*) — секционированная форма
============================================ */
.cl-rule .expanded {
padding: 0;
border-top: 1px dashed var(--line);
background: var(--card);
}
/* Название правила — самый первый, заметный блок редактора. */
.rs-name-block {
padding: 18px 18px 16px;
border-bottom: 1px solid var(--line);
background: var(--blue-50);
border-radius: 0;
}
.rs-name-label {
display: block;
font-size: 12px !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--blue) !important;
margin-bottom: 6px;
}
.rs-name-input {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--blue-light);
border-radius: 10px;
font: inherit;
font-size: 17px;
font-weight: 700;
background: var(--card);
color: var(--ink);
transition: border-color .12s, box-shadow .12s;
}
.rs-name-input:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(18,106,238,.15);
}
/* Секции */
.rs-section {
border-bottom: 1px solid var(--line);
padding: 18px 18px;
}
.rs-section:last-of-type { border-bottom: 0; }
.rs-section-blue { background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-soft) 100%); }
.rs-section-grey { background: var(--bg-soft); }
/* Заголовок секции */
.rs-head {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
}
.rs-head-num {
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--blue);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
}
.rs-section-blue .rs-head-num { background: var(--blue); box-shadow: 0 0 0 4px rgba(18,106,238, .15); }
.rs-section-grey .rs-head-num { background: var(--muted); }
.rs-head-title {
font-weight: 800;
font-size: 15px;
color: var(--ink);
display: flex;
align-items: center;
gap: 8px;
}
.rs-head-hint {
font-size: 13px;
color: var(--muted);
line-height: 1.4;
margin-top: 2px;
}
.rs-body { padding-left: 40px; }
/* Поля */
.rs-field { margin-bottom: 12px; }
.rs-field-full { width: 100%; }
.rs-field:last-child { margin-bottom: 0; }
.rs-field label, .cl-rule .expanded label {
display: block;
font-size: 0.8125rem !important;
color: var(--ink) !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
margin-bottom: 6px;
}
.rs-field input[type=text],
.rs-field input[type=number],
.rs-field select,
.rs-field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 8px;
font: inherit;
font-size: 0.875rem;
background: var(--card);
color: var(--ink);
transition: border-color .12s, box-shadow .12s;
}
.rs-field textarea {
font-family: 'Roboto', system-ui, sans-serif;
font-size: 0.84375rem;
line-height: 1.5;
resize: vertical;
min-height: 60px;
}
.rs-field input:focus, .rs-field select:focus, .rs-field textarea:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(18,106,238, .12);
}
.rs-hint {
margin-top: 4px;
font-size: 0.75rem;
color: var(--muted);
line-height: 1.4;
}
.rs-hint code {
background: var(--bg-soft2);
padding: 1px 5px;
border-radius: 3px;
font-size: 11.5px;
}
.rs-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.rs-grid-3 {
display: grid;
grid-template-columns: 2fr 1.5fr 0.8fr;
gap: 12px;
}
/* Бейджи в заголовках/полях */
.rs-badge-key {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: var(--yellow);
color: var(--ink);
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.rs-badge-warn {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: var(--red-bg);
color: var(--red);
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
/* Особые поля для cross_check / vision_check */
.rs-special {
background: var(--card);
border: 1px solid #FECACA;
border-radius: 10px;
padding: 12px 14px;
}
/* Чекбоксы-поля (квадратные блоки с подсказкой) */
.rs-checkboxes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 10px;
}
.rs-check {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--card);
cursor: pointer;
transition: all .12s;
font-size: 13.5px;
color: var(--ink);
}
.rs-check:hover { border-color: var(--blue); background: var(--blue-50); }
.rs-check input[type=checkbox] {
margin-top: 3px;
flex: 0 0 auto;
}
.rs-check-hint {
font-size: 12px;
color: var(--muted);
font-weight: 400;
line-height: 1.35;
}
.rs-check-warn { border-color: #FECACA; }
.rs-check-warn:hover { border-color: var(--red); background: var(--red-bg); }
.rs-check-small {
padding: 8px 12px;
font-size: 13px;
align-items: center;
font-weight: 500;
}
/* Чипы doc_types */
.rs-doc-types {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.rs-doc-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--card);
cursor: pointer;
font-size: 13px;
color: var(--ink);
transition: all .2s var(--ease);
user-select: none;
}
.rs-doc-chip:hover { border-color: var(--blue-light); background: var(--blue-50); }
.rs-doc-chip.active {
background: var(--blue-50);
border-color: var(--blue);
color: var(--blue);
font-weight: 700;
box-shadow: var(--ring);
}
.rs-doc-chip.disabled {
opacity: .5;
cursor: not-allowed;
}
.rs-doc-chip input[type=checkbox] { margin: 0; }
/* Линтер качества формулировки */
.rs-lint-block {
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed var(--line);
}
.rs-lint-btn {
font-weight: 700;
}
.rs-lint-hint {
display: inline-block;
margin-left: 10px;
font-size: 12.5px;
color: var(--muted);
}
.rs-lint-result { margin-top: 12px; }
.rs-lint-loading {
padding: 12px 14px;
background: var(--blue-50);
border-radius: 10px;
font-size: 13px;
color: var(--blue);
}
.rs-lint-error {
padding: 12px 14px;
background: var(--red-bg);
color: var(--red);
border-radius: 10px;
font-size: 13px;
}
.rs-lint-card {
border-radius: 12px;
padding: 14px 16px;
border: 1px solid;
}
.rs-lint-good { background: var(--green-bg); border-color: #BBF7D0; }
.rs-lint-medium { background: var(--amber-bg); border-color: #FCD34D; }
.rs-lint-bad { background: var(--red-bg); border-color: #FECACA; }
.rs-lint-head {
display: flex;
align-items: center;
gap: 14px;
}
.rs-lint-score-circle {
flex: 0 0 56px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--card);
display: flex;
align-items: baseline;
justify-content: center;
font-size: 22px;
font-weight: 800;
color: var(--ink);
border: 2px solid;
padding-top: 4px;
}
.rs-lint-good .rs-lint-score-circle { border-color: var(--green); color: var(--green); }
.rs-lint-medium .rs-lint-score-circle { border-color: var(--amber); color: var(--amber); }
.rs-lint-bad .rs-lint-score-circle { border-color: var(--red); color: var(--red); }
.rs-lint-score-circle span { font-size: 11px; color: var(--muted); font-weight: 600; }
.rs-lint-summary { flex: 1; min-width: 0; }
.rs-lint-verdict { font-weight: 800; font-size: 14px; margin-bottom: 2px; }
.rs-lint-good .rs-lint-verdict { color: var(--green); }
.rs-lint-medium .rs-lint-verdict { color: var(--amber); }
.rs-lint-bad .rs-lint-verdict { color: var(--red); }
.rs-lint-summary-text { font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.rs-lint-issues {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.rs-lint-issue {
background: var(--card);
border-radius: 8px;
padding: 10px 12px;
border-left: 3px solid var(--muted);
}
.rs-lint-issue.rs-lint-error { border-left-color: var(--red); }
.rs-lint-issue.rs-lint-warn { border-left-color: var(--amber); }
.rs-lint-issue.rs-lint-hint { border-left-color: var(--blue); }
.rs-lint-issue-head {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
font-size: 12px;
color: var(--muted);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
.rs-lint-issue-field { color: var(--ink); }
.rs-lint-issue-problem { font-size: 13.5px; color: var(--ink); margin-bottom: 4px; line-height: 1.45; }
.rs-lint-issue-suggestion { font-size: 13px; color: var(--blue); line-height: 1.45; }
.rs-lint-strong {
margin-top: 10px;
padding: 8px 12px;
background: rgba(255,255,255,.5);
border-radius: 8px;
font-size: 13px;
color: #14532D;
}
/* Низ редактора: статус + кнопки */
.rs-footer {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
background: var(--bg-soft);
border-top: 1px solid var(--line);
}
.rs-active-toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--card);
cursor: pointer;
font-size: 13px;
font-weight: 700;
color: var(--ink);
}
.rs-active-toggle input[type=checkbox] { margin: 0; accent-color: var(--green); }
.rs-active-toggle:has(input:checked) { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.rs-active-toggle:has(input:not(:checked)) { background: var(--card); color: var(--muted); }
@media (max-width: 700px) {
.rs-grid-2, .rs-grid-3, .rs-checkboxes { grid-template-columns: 1fr; }
.rs-body { padding-left: 0; }
}
/* PILLS — компактные бейджи */
.pill {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: .02em;
white-space: nowrap;
}
.pill.muted { background: var(--bg-soft2); color: var(--muted); }
.pill.blue { background: var(--blue-50); color: var(--blue); }
.pill.green { background: var(--green-bg); color: var(--green); }
.pill.amber { background: var(--amber-bg); color: var(--amber); }
.pill.red { background: var(--red-bg); color: var(--red); }
.pill.outline { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
/* HIGHLIGHT search match */
mark.search-hit {
background: var(--yellow);
color: var(--ink);
padding: 0 2px;
border-radius: 3px;
}
/* NOTICES */
.notice {
padding: 12px 16px;
border-radius: 12px;
margin-bottom: 12px;
font-size: 14px;
font-weight: 500;
}
.notice.ok { background: var(--green-bg); color: var(--green); }
.notice.err { background: var(--red-bg); color: var(--red); line-height: 1.5; }
/* HERO INTRO на главной — чистый текст без синей плашки (брендбук) */
.hero-intro {
background: transparent;
color: var(--ink-2);
padding: 8px 4px 4px;
margin-bottom: 14px;
}
.hero-intro h1 {
font-size: 24px;
font-weight: 500;
margin: 0 0 8px;
color: var(--ink);
letter-spacing: -.01em;
}
.hero-intro p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--ink-2);
max-width: 760px;
}
/* Support блок внизу главной */
.support-block {
display: flex;
align-items: flex-start;
gap: 14px;
background: var(--bg-soft);
border: 1px dashed var(--line);
border-radius: 14px;
padding: 18px 22px;
margin-top: 18px;
}
.support-icon { font-size: 26px; line-height: 1; }
.support-text strong { font-size: 14px; color: var(--ink); display: block; margin-bottom: 4px; }
.support-text div { font-size: 13px; color: var(--muted); line-height: 1.45; }
/* Подсказка справа от заголовка шага */
.step-hint {
font-size: 12px;
color: var(--muted);
font-weight: 500;
background: var(--card);
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--line);
}
/* Баннер тестового режима в админке */
.test-mode-banner {
display: flex;
align-items: center;
gap: 14px;
background: var(--amber-bg);
border: 2px solid var(--amber);
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 14px;
}
.test-mode-icon { font-size: 24px; flex: 0 0 auto; }
.test-mode-text { flex: 1; }
.test-mode-text strong { color: var(--amber); font-size: 14px; display: block; margin-bottom: 2px; }
.test-mode-text div { font-size: 13px; color: var(--ink); }
/* Warning-кнопка для «Тест: только это правило» */
button.rs-warn-btn {
background: var(--amber-bg);
color: var(--amber);
border: 1px solid var(--amber);
font-weight: 700;
}
button.rs-warn-btn:hover {
background: var(--amber);
color: #fff;
}
/* Inline подсказка skip-результатов (более заметная) */
.r-details-skip {
color: var(--muted) !important;
font-style: italic;
max-width: 540px !important;
white-space: normal !important;
text-overflow: clip !important;
}
/* Inline подсказка uncertain-результатов («не удалось проверить уверенно») */
.r-details-uncertain {
color: var(--uncertain) !important;
max-width: 540px !important;
white-space: normal !important;
text-overflow: clip !important;
}
/* Inline подсказка «нет данных» — серая, в строку */
.r-details-nodata {
color: var(--muted) !important;
max-width: 540px !important;
white-space: normal !important;
text-overflow: clip !important;
}
.r-uncertain-loc {
margin-top: 6px;
font-size: 13px;
color: var(--uncertain);
background: var(--uncertain-bg);
padding: 6px 10px;
border-radius: 8px;
display: inline-block;
}
/* CTA-блок для линтера: кнопка primary + подсказка справа */
.rs-lint-cta {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
background: linear-gradient(180deg, var(--bg-soft) 0%, #FFFFFF 100%);
padding: 14px 16px;
border-radius: 10px;
border: 1px solid var(--blue-light);
}
.rs-lint-cta .rs-lint-hint {
margin: 0;
flex: 1;
font-size: 13px;
color: var(--ink);
}
/* STEP-блоки на главной */
.step-block {
margin: 18px 0 0;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--bg-soft);
}
.step-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.step-head h3 { margin: 0; font-size: 16px; }
.step-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--blue);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 14px;
flex: 0 0 28px;
}
/* Карточки выбора сценария */
.scenario-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.scenario-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
padding: 18px 20px;
text-align: left;
cursor: pointer;
transition: all .2s var(--ease);
box-shadow: var(--shadow-card);
font: inherit;
color: var(--ink);
display: flex;
flex-direction: column;
gap: 6px;
}
.scenario-card:hover {
border-color: var(--blue-light);
background: var(--card); /* перебить глобальный button:hover (тёмная заливка) */
color: var(--ink);
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.scenario-card.active {
border: 2px solid var(--blue);
background: var(--blue-50);
box-shadow: var(--ring);
}
.scenario-card.active:hover {
border-color: var(--blue);
background: var(--blue-50);
color: var(--ink);
transform: translateY(-2px);
box-shadow: var(--ring), var(--shadow-lift);
}
.scenario-card.active .scenario-card-title { color: var(--blue); }
.scenario-card-title {
font-weight: 700;
font-size: 15px;
color: var(--ink);
transition: color .2s var(--ease);
}
.scenario-card-desc {
font-size: 13px;
color: var(--muted);
line-height: 1.4;
font-weight: 500;
}
@media (max-width: 700px) {
.scenario-cards { grid-template-columns: 1fr; }
}
/* ШАГ 1 — выбор города (первый, заметный) */
.step-city { border-color: var(--blue); background: var(--blue-50); }
.city-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.city-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
padding: 18px 20px;
text-align: left;
cursor: pointer;
transition: all .2s var(--ease);
box-shadow: var(--shadow-card);
font: inherit;
color: var(--ink);
display: flex;
align-items: center;
gap: 14px;
}
.city-card:hover {
border-color: var(--blue-light);
background: var(--card); /* перебить глобальный button:hover (тёмная заливка) */
color: var(--ink);
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.city-card.active {
border: 2px solid var(--blue);
background: var(--blue-50);
box-shadow: var(--ring);
}
.city-card.active:hover {
background: var(--blue-50);
color: var(--ink);
transform: translateY(-2px);
box-shadow: var(--ring), var(--shadow-lift);
}
.city-card.active .city-card-title { color: var(--blue); }
.city-card-emoji { font-size: 28px; flex: 0 0 auto; }
/* Крупный силуэт-достопримечательность в карточке выбора города. */
.city-card-emoji .city-ic { width: 34px; height: 34px; display: block; }
.city-card-emoji.city-msk { color: var(--c-msk, #1B3388); }
.city-card-emoji.city-spb { color: var(--c-spb, #126AEE); }
.city-card-body { display: flex; flex-direction: column; gap: 2px; }
.city-card-title { font-weight: 800; font-size: 17px; color: var(--ink); transition: color .2s var(--ease); }
.city-card-sub { font-size: 13px; color: var(--muted); font-weight: 500; }
/* ===== Дисклеймер «данные из интернета» на замечании ===== */
/* Замечание основано на справке о доме / статусе норматива (интернет), а не на
документах пользователя. Оранжевый = предупреждение (по брендбуку — только для
предупреждений, не акцент), чтобы инспектор перепроверил, а не принял как факт. */
.source-note {
/* НЕ flex: при flex текст с внутри разбивался на отдельные
flex-элементы и ломался на «колонки» (особенно узкий экран /normatives).
display:block + инлайн-иконка → текст течёт и переносится нормально. */
display: block;
margin: 8px 0; padding: 8px 10px;
background: rgba(217,122,0,.08); border: 1px solid rgba(217,122,0,.28);
border-radius: 8px; color: #B25E00; font-size: 12.5px; line-height: 1.4;
overflow-wrap: anywhere;
}
.source-note .ic { display: inline-block; vertical-align: -2px; margin-right: 6px; background: var(--c-warn, #D97A00); }
[data-theme="dark"] .source-note { background: rgba(217,122,0,.14); color: #E5A24D; }
/* ===== Хлебные крошки: всегда понятно «где я и как вернуться» ===== */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.breadcrumb a { color: var(--blue); text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { text-decoration: underline; }
.bc-sep { color: var(--muted); }
.bc-current { color: var(--ink); font-weight: 600; }
/* ===== Чип города: иконка-достопримечательность + название. Единый визуал
в шапке, истории, проверках и у правил. Москва — тёмно-синий бренд (#1B3388),
СПб — яркий синий (#126AEE), оба — нейтральный. Без статус-цветов (красный/
зелёный/жёлтый зарезервированы под результаты). ===== */
/* Цвета городов/предупреждения — ссылки на существующую бренд-палитру (без дублей
хардкодом): Москва=тёмно-синий, СПб=основной синий, предупреждение=оранжевый. */
:root { --c-msk: var(--blue-dark); --c-spb: var(--blue); --c-warn: var(--amber); }
.city-chip { display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
line-height: 1.2; white-space: nowrap; vertical-align: middle; }
.city-chip .city-ic { width: 16px; height: 16px; flex: 0 0 auto; }
.city-chip.sm { padding: 2px 8px; font-size: 12px; gap: 4px; }
.city-chip.sm .city-ic { width: 13px; height: 13px; }
.city-chip.city-msk { background: rgba(27,51,136,.10); color: var(--c-msk); }
.city-chip.city-spb { background: rgba(18,106,238,.10); color: var(--c-spb); }
.city-chip.city-both { background: var(--bg-soft); color: var(--ink-2); }
[data-theme="dark"] .city-chip.city-msk { background: rgba(121,187,255,.14); color: #9db8ff; }
[data-theme="dark"] .city-chip.city-spb { background: rgba(121,187,255,.18); color: #79BBFF; }
/* Иконка города в кнопке шапки — наследует цвет города. */
.user-city .city-ic { width: 15px; height: 15px; flex: 0 0 auto; }
.user-city.hdr-city-msk { color: var(--c-msk); border-color: rgba(27,51,136,.30); }
.user-city.hdr-city-spb { color: var(--c-spb); border-color: rgba(18,106,238,.30); }
@media (max-width: 560px) { .city-cards { grid-template-columns: 1fr; } }
/* Кнопка отправки: активна (готово) + загрузка (спиннер) */
.btn-submit { position: relative; display: inline-flex; align-items: center; gap: 8px; }
/* Чётко видно, что кнопка выключена, пока не приложены документы. */
.btn-submit:disabled { opacity: .4; filter: grayscale(.7); cursor: not-allowed; box-shadow: none; animation: none; }
.btn-submit .btn-spinner { display: none; }
.btn-submit.is-ready {
box-shadow: 0 0 0 3px rgba(18,106,238, .25), 0 6px 18px rgba(18,106,238, .35);
animation: btn-pulse 1.6s ease-in-out infinite;
}
@keyframes btn-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(18,106,238, .35), 0 6px 18px rgba(18,106,238, .30); }
50% { box-shadow: 0 0 0 7px rgba(18,106,238, 0), 0 6px 18px rgba(18,106,238, .30); }
}
.btn-submit.is-loading { animation: none; }
.btn-submit.is-loading .btn-spinner {
display: inline-block;
width: 15px; height: 15px;
border: 2px solid rgba(255,255,255,.45);
border-top-color: #fff;
border-radius: 50%;
animation: onb-spin .7s linear infinite;
}
@keyframes onb-spin { to { transform: rotate(360deg); } }
.submit-hint { color: var(--muted); }
.submit-hint.ready { color: var(--green); font-weight: 700; }
button.is-loading { opacity: 1; }
/* Загрузка файла в dropzone: эффект + готово */
.dropzone.loading { border-color: var(--amber); background: var(--amber-bg); }
.dropzone.filled { border-color: var(--green); background: var(--green-bg); }
.dz-loadrow { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.dz-mini-spinner {
width: 13px; height: 13px; flex: 0 0 auto;
border: 2px solid rgba(14,26,43,.2);
border-top-color: var(--blue);
border-radius: 50%;
animation: onb-spin .7s linear infinite;
}
.dz-bar { display: block; margin-top: 8px; }
.dz-done { color: var(--green); font-weight: 700; }
/* HOW-TO TAB — обучающий гайд для инженеров */
.howto-hero {
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
color: #fff;
padding: 28px 32px;
border-radius: 16px;
margin-bottom: 18px;
box-shadow: 0 4px 16px rgba(18,106,238, .18);
}
.howto-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px 28px;
margin-bottom: 16px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
display: flex;
gap: 18px;
align-items: flex-start;
}
.howto-card-num {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--blue);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 15px;
}
.howto-card-body { flex: 1; min-width: 0; }
.howto-card-body h3 { margin: 0 0 10px; font-size: 18px; }
.howto-card-body p { line-height: 1.55; margin: 8px 0; }
.howto-card-body ul, .howto-card-body ol { line-height: 1.6; padding-left: 22px; }
.howto-card-body li { margin: 4px 0; }
.howto-card-body code {
background: var(--bg-soft2);
padding: 1px 6px;
border-radius: 4px;
font-size: 13px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.howto-card-accent { border-left: 4px solid var(--amber); }
.howto-card-accent .howto-card-num { background: var(--amber); }
.howto-card-blue { border-left: 4px solid var(--blue); background: var(--blue-50); }
.howto-card-howto { border-left: 4px solid var(--green); }
.howto-card-howto .howto-card-num { background: var(--green); }
.howto-card-warn { border-left: 4px solid var(--red); }
.howto-card-warn .howto-card-num { background: var(--red); }
/* Callouts — выделенные плашки внутри карточек */
.howto-callout {
border-radius: 10px;
padding: 12px 16px;
margin: 12px 0;
font-size: 14px;
line-height: 1.5;
border-left: 3px solid;
}
.howto-callout.ok { background: var(--green-bg); border-color: var(--green); color: #14532D; }
.howto-callout.warn { background: var(--amber-bg); border-color: var(--amber); color: #78350F; }
.howto-callout.info { background: var(--blue-50); border-color: var(--blue); color: #1E3A8A; }
/* Карточки якорей */
.howto-anchors {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 14px 0;
}
.anchor-card {
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
position: relative;
}
.anchor-card .anchor-num {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--blue);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
margin-bottom: 8px;
}
.anchor-card h4 { margin: 0 0 4px; font-size: 14px; color: var(--ink); }
.anchor-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
/* Двухколоночный блок: умеет / не умеет */
.howto-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 12px 0;
}
.howto-col-ok, .howto-col-bad {
border-radius: 12px;
padding: 14px 18px;
border: 1px solid;
}
.howto-col-ok { background: var(--green-bg); border-color: #BBF7D0; }
.howto-col-bad { background: var(--red-bg); border-color: #FECACA; }
.howto-col-ok h4 { margin: 0 0 8px; color: var(--green); font-size: 14px; }
.howto-col-bad h4 { margin: 0 0 8px; color: var(--red); font-size: 14px; }
.howto-col-ok ul, .howto-col-bad ul { margin: 0; padding-left: 18px; }
.howto-col-ok li, .howto-col-bad li { font-size: 13.5px; line-height: 1.5; margin: 4px 0; }
/* Таблица «5 полей шаблона» */
.howto-fields {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 12px 0;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.howto-fields th {
background: var(--bg-soft2);
padding: 12px 14px;
text-align: left;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
}
.howto-fields td {
padding: 12px 14px;
border-top: 1px solid var(--line);
vertical-align: top;
font-size: 14px;
line-height: 1.5;
}
.howto-pill-new {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
border-radius: 999px;
background: var(--yellow);
color: var(--ink);
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
vertical-align: middle;
}
/* Сравнительная таблица «плохо vs хорошо» */
.howto-compare, .howto-shortcuts {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 12px 0;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.howto-compare th, .howto-shortcuts th {
background: var(--bg-soft2);
padding: 12px 14px;
text-align: left;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
}
.howto-compare th.bad, .howto-shortcuts th.bad { color: var(--red); }
.howto-compare th.good, .howto-shortcuts th.good { color: var(--green); }
.howto-compare td, .howto-shortcuts td {
padding: 14px;
border-top: 1px solid var(--line);
vertical-align: top;
font-size: 13.5px;
line-height: 1.55;
}
.howto-compare tbody tr td:nth-child(2) { background: #FFF5F5; color: #7F1D1D; }
.howto-compare tbody tr td:nth-child(3) { background: #F0FDF4; }
.howto-compare em { color: var(--blue); font-style: normal; font-weight: 700; }
.howto-shortcuts tbody tr td:nth-child(1) { background: #FFF5F5; color: #7F1D1D; width: 35%; }
.howto-shortcuts tbody tr td:nth-child(2) { background: #F0FDF4; }
/* Шаги how-to */
.howto-steps li {
margin: 8px 0;
line-height: 1.5;
}
.howto-steps li ul { margin: 6px 0; }
.howto-bigq {
font-size: 17px;
font-weight: 700;
color: var(--blue);
background: var(--card);
padding: 14px 18px;
border-radius: 10px;
border-left: 4px solid var(--blue);
margin: 12px 0;
font-style: italic;
}
/* Адаптивность */
@media (max-width: 800px) {
.howto-anchors { grid-template-columns: 1fr; }
.howto-two-col { grid-template-columns: 1fr; }
.howto-card { padding: 20px; }
}
/* PROGRESS BARS */
.progressbar {
height: 8px;
background: var(--line);
border-radius: 999px;
overflow: hidden;
}
.progressbar > div {
height: 100%;
background: var(--blue);
transition: width .25s;
border-radius: 999px;
}
.progressbar.yellow > div { background: var(--yellow); }
/* ============ AI-мастер создания правил ============ */
/* Точка входа «Добавить через ИИ» — выделяется среди тулбара. */
.wiz-launch {
background: var(--blue);
color: #fff;
font-weight: 800;
border: 0;
box-shadow: 0 2px 8px rgba(18,106,238,.28);
}
.wiz-launch:hover { background: var(--blue-dark); }
/* Кнопка «Редактировать через ИИ» в подвале правила — чуть компактнее. */
.rs-edit-ai { font-size: 13px; padding: 8px 14px; }
/* История версий правила. */
.rs-versions .rs-head-num { font-size: 18px; }
.rs-version-row {
border: 1px solid var(--border, #e3e8f0);
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 8px;
background: var(--bg, #f9f9f9);
}
.rs-version-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rs-version-head .muted { font-size: 12px; }
.rs-version-title { font-weight: 600; margin: 4px 0; }
.rs-version-row .muted { font-size: 13px; line-height: 1.45; }
/* Карточка мастера — режим «новое правило», явно отделён от списка. */
.wiz {
margin: 14px 0 20px;
padding: 20px;
border: 2px solid var(--blue);
border-radius: 16px;
background: var(--card);
box-shadow: 0 8px 28px rgba(18,106,238,.14);
}
/* При добавлении нового правила прячем ВСЁ кроме мастера — старые правила не мешают. */
.wiz-open #cl-actions,
.wiz-open .cl-toolbar,
.wiz-open #items,
.wiz-open #cl-msg,
.wiz-open #test-mode-banner { display: none !important; }
/* Индикатор шагов. */
.wiz-steps {
display: flex; align-items: center; gap: 12px;
margin: 10px 0 4px;
}
.wiz-step-badge {
display: inline-block; padding: 4px 12px; border-radius: 999px;
background: var(--blue-50); color: var(--blue);
font-weight: 800; font-size: 13px; white-space: nowrap;
}
.wiz-step-dots { display: flex; gap: 6px; }
.wiz-dot {
width: 9px; height: 9px; border-radius: 50%;
background: var(--line); transition: background .2s, transform .2s;
}
.wiz-dot.done { background: var(--blue-light); }
.wiz-dot.on { background: var(--blue); transform: scale(1.25); }
.wiz-step-hint { margin-top: 6px; font-size: 13.5px; }
.wiz-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wiz-x {
background: transparent; color: var(--muted); border: 0;
font-size: 24px; line-height: 1; padding: 0 6px; cursor: pointer; min-width: auto;
}
.wiz-x:hover { background: transparent; color: var(--ink); }
.wiz-field { margin-top: 14px; }
.wiz-field > label {
display: block; font-weight: 700; color: var(--ink);
margin-bottom: 6px; font-size: 14px;
}
.wiz-desc-wrap { position: relative; }
.wiz-desc-wrap textarea { width: 100%; }
.wiz-mic {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 8px; padding: 9px 16px; min-height: 44px; border-radius: 10px;
background: var(--blue-50); color: var(--blue); border: 1px solid var(--line);
font-size: 14px; font-weight: 600; cursor: pointer; min-width: auto;
}
.wiz-mic:hover { background: #DDE6FF; }
.wiz-mic.rec { background: var(--red-bg); color: var(--red); animation: wizPulse 1s infinite; }
.wiz-mic-hint { font-size: 12px; margin-top: 6px; }
@keyframes wizPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.4);} 50%{ box-shadow:0 0 0 8px rgba(220,38,38,0);} }
.wiz-rec-bar {
display: flex; align-items: center; gap: 10px;
margin-top: 8px; padding: 8px 12px;
background: var(--red-bg); color: var(--red); border-radius: 10px; font-size: 14px;
}
.wiz-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: wizPulse 1s infinite; }
.wiz-radios { display: flex; flex-direction: column; gap: 8px; }
.wiz-radios.sm { flex-direction: row; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.wiz-radio {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
cursor: pointer; font-size: 14px; color: var(--ink); background: var(--card);
min-height: 44px; box-sizing: border-box;
}
.wiz-radios.sm .wiz-radio { min-height: 36px; padding: 6px 10px; font-size: 13px; }
.wiz-radio:hover { background: var(--blue-50); }
.wiz-radio.on { border-color: var(--blue); background: var(--blue-50); font-weight: 600; }
.wiz-radio input { margin: 0; flex-shrink: 0; }
/* Текст метки (например «Эскиз») не должен обрезаться: даём место и нормальную высоту строки. */
.wiz-radio span { flex: 1; min-width: 0; line-height: 1.4; overflow: visible; white-space: normal; }
.wiz-extra { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.wiz-extra > summary { cursor: pointer; color: var(--blue); font-weight: 600; font-size: 14px; }
.wiz-drop { padding: 16px; }
.wiz-attach {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 8px 10px; margin-top: 8px;
background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px;
}
.wiz-attach-name { font-size: 13px; color: var(--ink); }
.wiz-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.wiz-proc { text-align: center; padding: 24px 12px; }
.wiz-spinner {
width: 40px; height: 40px; margin: 0 auto 14px;
border: 4px solid var(--blue-50); border-top-color: var(--blue);
border-radius: 50%; animation: wizSpin .8s linear infinite;
}
@keyframes wizSpin { to { transform: rotate(360deg); } }
.wiz-proc-steps { display: flex; flex-direction: column; gap: 6px; align-items: center; margin-bottom: 10px; }
.wiz-proc-step { color: var(--muted); font-size: 14px; transition: color .2s; }
.wiz-proc-step.on { color: var(--blue); font-weight: 600; }
.wiz-preview {
margin-top: 12px; padding: 16px;
background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
}
.wiz-pv-title { font-size: 17px; font-weight: 800; color: var(--ink); }
.wiz-pv-desc { color: var(--ink); margin-top: 6px; font-size: 14px; }
.wiz-pv-grid {
display: grid; grid-template-columns: 160px 1fr; gap: 8px 14px;
margin-top: 14px; font-size: 14px;
}
.wiz-pv-k { color: var(--muted); font-weight: 600; }
.wiz-pv-v { color: var(--ink); }
/* Звёздочка «обязательно» */
.wiz-req { color: var(--red); font-weight: 800; }
/* ===== Чат-диалог мастера (Telegram-стиль) ===== */
.wiz-chat-log {
margin: 12px 0; padding: 12px;
max-height: 50vh; overflow-y: auto;
display: flex; flex-direction: column; gap: 10px;
background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
}
.wiz-bubble {
max-width: 82%; padding: 9px 13px; border-radius: 14px;
font-size: 14px; line-height: 1.45; word-break: break-word;
}
.wiz-bubble-text b { font-weight: 700; }
.wiz-bubble-who {
display: block; font-size: 11px; font-weight: 700; opacity: .7; margin-bottom: 2px;
}
/* Пузырь ИИ — слева, светлый */
.wiz-bubble-ai {
align-self: flex-start; background: #fff; color: var(--ink);
border: 1px solid var(--line); border-bottom-left-radius: 4px;
}
/* Ответ пользователя — справа, синий */
.wiz-bubble-user {
align-self: flex-end; background: var(--blue); color: #fff;
border-bottom-right-radius: 4px;
}
/* Прогресс проверки — по центру, нейтральный */
.wiz-bubble-phase {
align-self: center; background: var(--blue-50); color: var(--blue);
font-size: 13px; border-radius: 10px; max-width: 92%; text-align: center;
}
/* Успех / ошибка */
.wiz-bubble-ok {
align-self: flex-start; background: var(--green-bg, #E8F6EC); color: var(--ink);
border: 1px solid var(--green, #1E9E54); border-bottom-left-radius: 4px; max-width: 92%;
}
.wiz-bubble-err {
align-self: flex-start; background: var(--red-bg); color: var(--ink);
border: 1px solid var(--red); border-bottom-left-radius: 4px; max-width: 92%;
}
.wiz-chat-inrow { display: flex; gap: 8px; align-items: flex-end; }
.wiz-chat-inrow textarea {
flex: 1; resize: vertical; min-height: 42px;
padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font: inherit;
}
.wiz-chat-inrow .wiz-mic { flex: 0 0 auto; height: 42px; }
.wiz-chat-send { flex: 0 0 auto; height: 42px; }
@media (max-width: 640px) {
.wiz { padding: 14px; }
.wiz-pv-grid { grid-template-columns: 1fr; gap: 2px 0; }
.wiz-pv-k { margin-top: 8px; }
.wiz-foot button { flex: 1 1 auto; }
.wiz-bubble { max-width: 90%; }
.wiz-chat-log { max-height: 44vh; }
/* На узком экране два дропзона PDF — в колонку, не в ряд (иначе сжимаются). */
.wiz-field .row { flex-direction: column; }
.wiz-pdf-drop { width: 100%; }
}
/* ===== Обучающий тур (onboarding) ===== */
.onb-launch { white-space: nowrap; }
.onb-root {
position: fixed;
inset: 0;
z-index: 9999;
/* Сам контейнер онбординга НЕ ловит клики: интерактивна только карточка
(.onb-card → pointer-events:auto ниже). Иначе невидимая подложка
перехватывает первый клик по рабочему контенту (кнопка «Подписать» и пр.). */
pointer-events: none;
}
.onb-card { pointer-events: auto; }
.onb-svg {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none; /* затемнение чисто визуальное — клики идут к карточке и подсвеченному элементу */
}
.onb-dim { pointer-events: none; }
.onb-ring {
stroke: var(--blue);
stroke-width: 2.5;
}
.onb-card {
position: fixed;
z-index: 10000;
width: 360px;
max-width: calc(100vw - 24px);
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px 20px 16px;
box-shadow: 0 14px 40px rgba(15, 23, 42, .22);
}
.onb-x {
position: absolute;
top: 8px;
right: 8px;
width: 34px;
height: 34px;
padding: 0;
border-radius: 999px;
background: var(--bg-soft2);
color: var(--muted);
font-size: 22px;
line-height: 1;
}
.onb-x:hover { background: #E5E7EE; color: var(--ink); }
.onb-count {
font-size: 12px;
font-weight: 700;
color: var(--blue);
text-transform: uppercase;
letter-spacing: .5px;
}
.onb-title {
margin: 6px 0 8px;
font-size: 19px;
font-weight: 800;
color: var(--ink);
}
.onb-text {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.55;
color: var(--ink);
}
.onb-foot {
display: flex;
gap: 10px;
}
.onb-foot button {
flex: 1 1 auto;
min-height: 44px;
}
/* Доп-блок карточки тура (кнопки примеров + скачивание). */
.onb-extra { margin: 0 0 14px; }
.onb-demos { display: flex; flex-direction: column; gap: 8px; }
.onb-demo-btn {
display: block;
text-align: center;
text-decoration: none;
font-weight: 700;
font-size: 14px;
padding: 12px 14px;
border-radius: 12px;
min-height: 44px;
box-sizing: border-box;
border: 1.5px solid transparent;
}
.onb-demo-good { background: #E8F6EE; color: #1B7A43; border-color: #BFE6CE; }
.onb-demo-good:hover { background: #D8F0E2; }
.onb-demo-bad { background: #FDECEC; color: #C0392B; border-color: #F5C9C4; }
.onb-demo-bad:hover { background: #FBDDDB; }
.onb-demo-dl {
margin-top: 6px;
font-size: 12.5px;
line-height: 1.5;
color: var(--muted);
}
.onb-demo-dl a {
color: var(--blue);
font-weight: 700;
text-decoration: none;
margin-left: 6px;
white-space: nowrap;
}
.onb-demo-dl a:hover { text-decoration: underline; }
/* Подсветка правила, раскрытого туром. */
.cl-rule.is-onb-open { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,106,238,.10); }
/* ===== Полное обучение (onboarding-guide.js) ===== */
.onbg-card { max-width: 460px; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; }
.onbg-dots { display: flex; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.onbg-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--bg-soft2); transition: background .2s; }
.onbg-dot.done { background: var(--blue-light); }
.onbg-dot.active { background: var(--blue); width: 18px; }
.onbg-deeplink { margin: 6px 0 4px; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; }
.onbg-deeplink-text { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0 0 10px; }
.onb-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--blue); color: #fff !important; border: none; font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.onb-go:hover { background: var(--blue-dark); }
.onb-legend { display: flex; flex-direction: column; gap: 14px; }
.onb-leg-group { display: flex; flex-direction: column; gap: 7px; }
.onb-leg-title { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.onb-leg-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.onb-leg-row .pill, .onb-leg-row .badge { flex: none; }
[data-theme="dark"] .onbg-deeplink { background: var(--bg-soft); border-color: var(--line); }
@media (max-width: 560px) {
.onb-card {
width: calc(100vw - 24px);
padding: 18px 16px 14px;
}
.onb-title { font-size: 18px; }
}
/* ===== Подбадривающие слоганы во время проверки ===== */
.slogan-box {
margin: 0 0 16px;
padding: 16px 18px;
border-radius: 14px;
background: linear-gradient(135deg, var(--blue-50) 0%, #FFFFFF 100%);
border: 1px solid var(--line);
}
.slogan-line {
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 700;
font-size: 17px;
line-height: 1.4;
color: var(--ink);
min-height: 24px;
opacity: 0;
transform: translateY(4px);
transition: opacity .45s ease, transform .45s ease;
}
.slogan-line.show { opacity: 1; transform: translateY(0); }
.slogan-reassure {
margin-top: 10px;
font-size: 13.5px;
font-weight: 600;
color: var(--blue-dark);
background: var(--blue-50);
border-radius: 8px;
padding: 8px 10px;
display: inline-block;
}
/* Закреплённый блок «время + можно уходить» — над ротацией, не меняется */
.slogan-pinned {
margin: 0 0 12px;
padding: 12px 14px;
border-radius: 10px;
background: var(--card);
border: 1px solid var(--line);
}
.slogan-pinned-time {
font-weight: 800;
font-size: 15px;
color: var(--ink);
}
.slogan-pinned-walk {
margin-top: 4px;
font-weight: 600;
font-size: 13.5px;
line-height: 1.45;
color: var(--muted);
}
@media (max-width: 480px) {
.slogan-line { font-size: 15px; }
.slogan-reassure { font-size: 12.5px; display: block; }
.slogan-pinned-time { font-size: 14px; }
.slogan-pinned-walk { font-size: 12.5px; }
}
/* ===== «Проверка готова» — липкий баннер вверху ===== */
.done-banner {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 16px;
padding: 12px 16px;
border-radius: 10px;
/* По умолчанию (есть замечания) — оранжевый «нужно исправить». Зелёный только при 0. */
background: var(--amber-bg);
border: 1px solid var(--amber);
color: var(--amber);
font-weight: 800;
font-size: 15.5px;
box-shadow: 0 2px 10px rgba(217,122,0,.15);
}
.done-banner.ok {
background: var(--green-bg);
border-color: var(--green);
color: var(--green);
box-shadow: 0 2px 10px rgba(22,163,74,.15);
}
.done-banner-text { flex: 1; min-width: 0; }
.done-banner-link {
flex-shrink: 0;
background: var(--amber);
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 14px;
padding: 7px 16px;
border-radius: 8px;
white-space: nowrap;
}
.done-banner.ok .done-banner-link { background: var(--green); }
.done-banner-link:hover { filter: brightness(.94); }
@media (max-width: 480px) {
.done-banner { font-size: 14px; padding: 10px 12px; gap: 8px; }
.done-banner-link { padding: 6px 12px; font-size: 13px; }
}
/* Кнопка «прислать сигнал» после успешной отправки */
.notify-optin-btn {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
background: var(--blue-50);
color: var(--blue);
border: 1px solid var(--blue);
border-radius: 8px;
font-family: inherit;
font-weight: 700;
font-size: 14px;
padding: 9px 16px;
cursor: pointer;
}
.notify-optin-btn:hover { background: #E0EAFF; }
.notify-optin-btn.on { background: var(--green-bg); color: var(--green); border-color: var(--green); cursor: default; }
.notify-optin-btn:disabled { cursor: default; opacity: .9; }
/* Подсказка «можно сразу загрузить следующий» рядом с кнопкой новой проверки */
.next-hint {
margin-top: 8px;
font-size: 13px;
color: var(--muted);
line-height: 1.45;
}
/* ============ Результат проверки: понятный вид для инженера ============ */
/* Зелёный баннер «замечаний нет» */
.result-ok-banner {
background: var(--green-bg);
border: 1px solid var(--green);
color: var(--green);
border-radius: 12px;
padding: 18px 20px;
font-size: 19px;
font-weight: 800;
text-align: center;
margin-bottom: 16px;
display: flex; align-items: center; justify-content: center; gap: 10px;
}
.result-ok-banner::before {
content: ""; width: 22px; height: 22px; flex: 0 0 auto; background: var(--green);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.3l-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%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 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.3l-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Подзаголовок группы внутри блока (по документу) */
.fix-group {
margin: 16px 0 6px;
font-size: 14px;
font-weight: 800;
color: var(--ink);
display: flex;
align-items: center;
gap: 6px;
}
.fix-group .cnt { color: var(--muted); font-weight: 600; font-size: 12.5px; }
/* Главная зелёная строка «Как исправить» — крупнее технических деталей */
.fix-hint {
background: var(--green-bg);
border-left: 3px solid var(--green);
color: #14532D;
border-radius: 8px;
padding: 10px 12px;
font-size: 15px;
font-weight: 700;
margin: 8px 0;
line-height: 1.4;
}
/* Строка «Где искать» — нейтральная, простым языком */
.fix-where {
font-size: 13.5px;
color: var(--ink);
margin: 4px 0 8px;
font-weight: 600;
}
.fix-where .lbl { color: var(--muted); font-weight: 600; }
/* Кнопка «Исправили» */
button.fixed-btn {
background: transparent;
color: var(--green);
border: 1.5px solid var(--green);
font-weight: 700;
border-radius: 8px;
padding: 8px 16px;
}
button.fixed-btn:hover { background: var(--green); color: #fff; }
/* Свёрнутая цитата */
.quote-toggle {
font-size: 12.5px;
color: var(--blue);
font-weight: 600;
cursor: pointer;
display: inline-block;
margin-top: 4px;
}
/* Счётчик исправленного */
.fixed-counter {
font-size: 13.5px;
font-weight: 700;
color: var(--green);
}
/* Блок перезагрузки исправленной версии */
.reupload-slot { margin: 10px 0; }
.reupload-slot label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
@media (max-width: 700px) {
.result-item .row { flex-direction: column; align-items: flex-start; gap: 6px; }
.result-item .manual-row { flex-direction: column; align-items: stretch; }
.result-item .manual-row button,
.result-item .manual-row input { width: 100%; }
.reupload-slot input[type=file] { width: 100%; }
.result-ok-banner { font-size: 16px; padding: 14px; }
.fix-hint { font-size: 14px; }
}
/* ============================================================
НОЧНАЯ ТЕМА — точечные правки для захардкоженных литералов,
которые не покрываются переменными. Группы: дропзоны, howto-
таблицы/коллауты, демо-кнопки онбординга, тени, скан-иконка.
============================================================ */
[data-theme="dark"] body { color: var(--ink-2); }
/* Дропзоны */
[data-theme="dark"] .dropzone { border-color: rgba(77,139,245,.45); background: var(--blue-50); }
[data-theme="dark"] .dropzone:hover,
[data-theme="dark"] .dropzone.drag { border-color: var(--blue); background: var(--bg-soft2); }
[data-theme="dark"] .dropzone.loading { background: var(--amber-bg); border-color: var(--amber); }
/* Поле поиска со встроенной SVG-иконкой (stroke жёстко серый — ок в обеих темах) */
/* Бейджи нейтральные */
[data-theme="dark"] .badge.skip,
[data-theme="dark"] .badge.pending { background: var(--bg-soft2); color: var(--muted); }
/* Тени карточек в тёмной теме делаем глубже */
[data-theme="dark"] .card,
[data-theme="dark"] .howto-card { box-shadow: 0 1px 3px rgba(0,0,0,.5); }
[data-theme="dark"] .onb-card { box-shadow: 0 18px 50px rgba(0,0,0,.7); }
/* howto-блоки с захардкоженным светлым текстом/фоном */
[data-theme="dark"] .howto-callout.ok { color: var(--green); }
[data-theme="dark"] .howto-callout.warn { color: var(--amber); }
[data-theme="dark"] .howto-callout.info { color: var(--blue); }
[data-theme="dark"] .howto-col-ok { border-color: rgba(53,201,140,.4); }
[data-theme="dark"] .howto-col-bad { border-color: rgba(240,113,106,.4); }
[data-theme="dark"] .howto-compare tbody tr td:nth-child(2),
[data-theme="dark"] .howto-shortcuts tbody tr td:nth-child(1) { background: var(--red-bg); color: var(--red); }
[data-theme="dark"] .howto-compare tbody tr td:nth-child(3),
[data-theme="dark"] .howto-shortcuts tbody tr td:nth-child(2) { background: var(--green-bg); color: var(--green); }
/* Демо-кнопки онбординга */
[data-theme="dark"] .onb-demo-good { background: var(--green-bg); color: var(--green); border-color: rgba(53,201,140,.4); }
[data-theme="dark"] .onb-demo-good:hover { background: var(--bg-soft2); }
[data-theme="dark"] .onb-demo-bad { background: var(--red-bg); color: var(--red); border-color: rgba(240,113,106,.4); }
[data-theme="dark"] .onb-demo-bad:hover { background: var(--bg-soft2); }
[data-theme="dark"] .onb-x:hover { background: var(--bg-soft); color: var(--ink); }
[data-theme="dark"] .notify-optin-btn:hover { background: var(--bg-soft2); }
/* Прочие светлые литералы кнопок/hover */
[data-theme="dark"] button.secondary:hover { background: var(--bg-soft2); }
[data-theme="dark"] tr:hover td { background: var(--bg-soft); }
/* Спиннер на кнопке: верхняя граница белая — оставляем (на синем фоне) */
/* === Город пользователя === */
.seg-city{display:flex;gap:8px;margin-top:10px}
.seg-opt{flex:1;cursor:pointer}
.seg-opt input{position:absolute;opacity:0;pointer-events:none}
.seg-opt span{display:block;text-align:center;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink-2);font-weight:500;transition:all .15s ease}
.seg-opt:hover span{border-color:var(--blue)}
.seg-opt input:checked + span{border-color:var(--blue);background:var(--blue-50);color:var(--blue);box-shadow:var(--ring)}
.seg-opt input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}
.user-city{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font-size:.9em;cursor:pointer;margin-right:8px;line-height:1.2;font-weight:500}
.user-city:hover{border-color:var(--blue);color:var(--blue);background:var(--card);box-shadow:none}
.user-city:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.user-city::before{content:"";width:12px;height:12px;margin-right:3px;display:inline-block;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/%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 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center/contain no-repeat}
.city-popover{position:absolute;z-index:9999;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:12px;min-width:200px;max-width:min(280px,90vw)}
.city-popover h4{margin:0 0 8px;font-size:.95em;color:var(--muted);font-weight:600}
.city-popover .seg-city{margin-top:0;margin-bottom:10px}
.city-popover .pop-actions{display:flex;gap:8px;justify-content:flex-end}
.city-popover .pop-actions button{padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer;font-size:.9em;box-shadow:none}
.city-popover .pop-actions button:hover{background:var(--bg-soft)}
.city-popover .pop-actions .btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.city-popover .pop-actions .btn-primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
@media (max-width: 480px) {
.user-city{font-size:.85em;padding:3px 8px;margin-right:4px}
.user-city::before{width:11px;height:11px}
.city-popover{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(280px,90vw)}
}
/* ===== Нормативная база (вкладка админки) ===== */
.norm-toolbar {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 14px;
}
.norm-toolbar #norm-search { flex: 1; min-width: 220px; max-width: 360px; }
.norm-toolbar select { max-width: 220px; }
.norm-toolbar .grow { flex: 1; }
.norm-table { width: 100%; border-collapse: collapse; }
.norm-table th, .norm-table td { padding: 10px 12px; }
.norm-row { cursor: pointer; }
.norm-row:hover td { background: var(--bg-soft); }
.norm-chevron { color: var(--muted); }
.norm-detail-row td { background: var(--bg-soft); padding: 0; }
.norm-detail {
padding: 16px 18px;
border-top: 1px solid var(--line);
}
.norm-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 24px;
}
.norm-fields .field {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 8px;
}
.norm-fields .field label {
flex-basis: 160px;
flex-shrink: 0;
color: var(--muted);
font-size: 13px;
}
.norm-fields .field input,
.norm-fields .field select,
.norm-fields .field textarea {
flex: 1;
min-width: 0;
}
.norm-meta h4 {
margin: 0 0 6px;
font-size: 13px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.norm-meta h4 + * { margin-bottom: 14px; }
.norm-mentions, .norm-methods {
list-style: none;
padding-left: 0;
margin: 0;
}
.norm-mentions li, .norm-methods li {
padding: 6px 0;
border-bottom: 1px solid var(--line);
}
.norm-mentions li:last-child, .norm-methods li:last-child { border-bottom: none; }
.norm-actions {
display: flex;
gap: 8px;
align-items: center;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.norm-actions .grow { flex: 1; }
@media (max-width: 768px) {
.norm-detail-grid { grid-template-columns: 1fr; }
.norm-fields .field { flex-direction: column; align-items: stretch; gap: 4px; }
.norm-fields .field label { flex-basis: auto; }
.norm-table th:nth-child(2),
.norm-table td:nth-child(2),
.norm-table th:nth-child(4),
.norm-table td:nth-child(4),
.norm-table th:nth-child(6),
.norm-table td:nth-child(6) { display: none; }
}
/* Модал «Добавить норматив» */
.norm-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.norm-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,.4);
}
.norm-modal-card {
position: relative;
background: var(--card);
border-radius: 12px;
padding: 20px 24px;
max-width: 480px;
width: min(90vw, 480px);
box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.norm-modal-card h3 { margin: 0 0 14px; }
.norm-form label {
display: block;
margin-bottom: 10px;
font-size: 13px;
color: var(--muted);
}
.norm-form label input,
.norm-form label select {
display: block;
width: 100%;
margin-top: 4px;
}
.norm-modal-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 14px;
}
/* Вывод (заключение) о нормативе — поверх раскрытой строки */
.norm-conclusion{background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.norm-conclusion-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.norm-conclusion .badge{font-weight:600}
.norm-methods{list-style:none;padding:0;margin:4px 0}
.norm-methods li{padding:6px 8px;border-radius:6px;margin-bottom:4px;background:var(--bg-soft,#fafbff)}
.norm-methods .badge{margin-left:6px}
/* AI-мастер: drag-and-drop good/bad PDF (рядом стоящие зоны на шаге 5) */
.wiz-pdf-drop{min-height:120px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer}
.wiz-pdf-drop p{margin:4px 0}
.wiz-pdf-drop .hint{font-size:.85em;color:var(--muted,#666)}
.wiz-pdf-drop.loading{border-color:var(--amber);background:var(--amber-bg)}
/* ── Бейджи-индикаторы в верхнем меню (iPhone-точка) ── */
/* Базовый бейдж — нейтральный счётчик (синий бренд). Красный = только тревога
(сбои), амбер = предупреждение (устаревшие нормативы). Легенда цветов из CLAUDE.md. */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--blue,#126AEE);color:#fff;font-size:11px;font-weight:700;line-height:1;margin-left:4px;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.nav-badge[hidden]{display:none}
.nav-badge.warn{background:var(--amber,#D97A00)}
.nav-badge.alert{background:var(--red,#D6342C)}
/* ── Этап 1: карточка «Что распозналось» (два этапа проверки) ── */
.recog-card {
border: 1px solid var(--line);
border-radius: 14px;
background: var(--card);
padding: 18px;
margin-bottom: 12px;
}
.recog-head-title { font-size: 18px; font-weight: 800; }
.recog-head-sub { font-size: 13px; margin-top: 4px; line-height: 1.45; }
.recog-block { margin-top: 16px; }
.recog-block-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.recog-fields { display: flex; flex-direction: column; gap: 8px; }
.recog-field {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border-radius: 10px; background: var(--bg-soft);
}
.recog-field.ok::before { content: "✓"; color: var(--green); font-weight: 800; }
.recog-field.miss { flex-direction: column; align-items: stretch; gap: 6px; }
.recog-field.miss.key { border-left: 3px solid var(--blue-light); }
.recog-field-label { font-size: 14px; font-weight: 600; }
.recog-field-val { margin-left: auto; font-weight: 700; }
.recog-req {
font-size: 11px; font-weight: 700; color: var(--blue);
background: var(--blue-50); padding: 1px 7px; border-radius: 999px; margin-left: 6px;
}
.recog-input {
width: 100%; padding: 9px 12px; border: 1px solid var(--line);
border-radius: 9px; font-size: 15px; background: var(--card); color: var(--ink);
}
.recog-input:focus { outline: none; border-color: var(--blue); }
.recog-blocked { background: var(--bg-soft); border-radius: 10px; padding: 12px; }
.recog-blocked-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.recog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.recog-actions button { flex: 0 0 auto; }
.recog-msg { margin-top: 10px; font-size: 14px; }
.recog-msg .err { color: var(--red); }
@media (max-width: 700px) {
.recog-actions button { flex: 1 1 100%; }
}
/* ── Экран-разделитель «Куда подаём проект?» (корень /) ── */
.city-chooser { max-width: 560px; margin: 48px auto; text-align: center; }
.city-chooser-cards {
display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 8px;
}
.city-chooser-btn {
display: flex; flex-direction: column; align-items: center; gap: 10px;
background: var(--card); border: 2px solid var(--line); border-radius: 16px;
padding: 28px 32px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
min-width: 180px; flex: 1 1 160px; max-width: 220px;
font-family: inherit; color: var(--ink-2);
}
.city-chooser-btn:hover {
border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50);
}
.city-chooser-icon { font-size: 28px; display: block; }
.city-chooser-icon .city-ic { width: 48px; height: 48px; }
.city-msk .city-ic { color: var(--blue); }
.city-spb .city-ic { color: #1B3388; }
.city-chooser-title { font-size: 18px; font-weight: 700; }
.city-chooser-sub { font-size: 13px; color: var(--muted); }
/* ── Подпись города в логотипе шапки ── */
.wordmark { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.wm-city { display: inline-flex; align-items: center; gap: 4px;
color: var(--blue); font-weight: 500; font-size: .875em; }
.wm-city .city-ic { width: 14px; height: 14px; vertical-align: middle; }
.wm-sep { color: var(--muted); font-weight: 400; }
.wm-city-label { white-space: nowrap; }
@media (max-width: 480px) {
.city-chooser { margin: 24px auto; }
.city-chooser-btn { padding: 20px 16px; min-width: 130px; }
.city-chooser-title { font-size: 16px; }
.wm-city-label { display: none; } /* на мобиле только иконка */
}
/* ── Этап 0: привязка сделки Bitrix (блок #live-deal на главной) ───────── */
.deal-box {
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 14px;
margin-top: 12px;
}
.deal-box-ok {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
background: var(--green-bg);
border-color: rgba(31,164,107,.30);
}
.deal-ok { color: var(--green); font-weight: 600; }
.deal-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
margin-bottom: 6px;
}
.deal-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.deal-input {
flex: 1 1 180px;
min-width: 140px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 8px;
font-size: 15px;
}
.deal-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
.link-btn {
background: none;
border: none;
color: var(--blue);
font-weight: 600;
cursor: pointer;
padding: 4px 6px;
font-size: 14px;
margin-left: auto;
}
.link-btn:hover { text-decoration: underline; }
@media (max-width: 480px) {
.deal-box-ok { align-items: flex-start; }
.link-btn { margin-left: 0; }
.deal-row .primary { flex: 1 1 100%; }
}
/* Этап 1: статус ключевых документов сделки (ЕГРН/БТИ) из «Правильных документов» */
.deal-docs { margin-top: 10px; }
.deal-docs-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
margin-bottom: 8px;
}
.deal-docs-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 5px 0;
flex-wrap: wrap;
}
.dd-label { font-size: 14px; color: var(--ink-1); }
.dd-state { font-size: 13px; font-weight: 600; white-space: nowrap; }
.dd-ok { color: var(--green); }
.dd-warn { color: var(--orange, #D97A00); }
.dd-no { color: var(--ink-3, #888); }
.deal-docs-btn {
display: inline-block;
margin-top: 12px;
padding: 10px 18px;
background: var(--blue);
color: #fff;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
text-align: center;
box-shadow: var(--shadow-btn);
}
.deal-docs-btn:hover { background: var(--blue-dark); box-shadow: var(--shadow-btn-hover); }
@media (max-width: 480px) {
.deal-docs-btn { display: block; width: 100%; }
}
/* Этап 2: сверка данных проекта с эталоном ЕГРН/БТИ по сделке */
.cc-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
gap: 8px 14px;
padding: 9px 0;
border-bottom: 1px solid var(--line, #eee);
}
.cc-row:last-child { border-bottom: 0; }
.cc-label { font-size: 14px; font-weight: 600; color: var(--ink-1); }
.cc-values { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.cc-values .cc-src { color: var(--ink-3, #999); }
.cc-state { font-size: 13px; font-weight: 700; white-space: nowrap; text-align: right; }
.cc-match { color: var(--green); }
.cc-mismatch { color: var(--red); }
.cc-nodata { color: var(--ink-3, #999); font-weight: 600; }
.cc-row.is-mismatch { background: var(--red-soft, rgba(217,74,74,.06)); }
.cc-summary { font-size: 13px; color: var(--ink-2); margin: -4px 0 10px; }
/* Этап 2+: секции (параметры/помещения/размеры) внутри блока сверки */
.cc-card--info { border-left: 4px solid var(--blue-light, #79BBFF); background: var(--bg-soft, #F6F7F9); }
.cc-h3 {
font-size: 14px; font-weight: 700; color: var(--ink-1);
margin: 18px 0 6px; padding-top: 12px;
border-top: 1px solid var(--line, #eee);
}
.cc-card .cc-h3:first-of-type { border-top: 0; padding-top: 0; margin-top: 6px; }
.cc-empty { font-size: 13px; color: var(--ink-3, #999); margin: 4px 0 6px; }
/* Помещения (план до): таблица проект vs БТИ */
.cc-rooms-wrap { overflow-x: auto; }
.cc-rooms { width: 100%; border-collapse: collapse; font-size: 13px; }
.cc-rooms th, .cc-rooms td {
padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--line, #eee);
vertical-align: middle;
}
.cc-rooms th {
font-size: 12px; font-weight: 600; color: var(--ink-3, #888);
text-transform: none; white-space: nowrap;
}
.cc-rooms td.num, .cc-rooms th.num { text-align: right; white-space: nowrap; }
.cc-rooms th.st, .cc-rooms td.st { text-align: right; white-space: nowrap; }
.cc-rname { font-weight: 600; color: var(--ink-1); }
.cc-rnum {
display: inline-block; min-width: 20px; padding: 0 5px; margin-right: 4px;
font-size: 11px; font-weight: 700; color: var(--ink-3, #888);
background: var(--bg-soft, #F2F3F5); border-radius: 4px;
}
.cc-rooms tr.cc-r-bad { background: var(--red-soft, rgba(217,74,74,.06)); }
.cc-rooms tr.cc-r-only td { color: var(--ink-2); }
.cc-rooms tr:last-child td { border-bottom: 0; }
.cc-rooms-tot { font-size: 13px; color: var(--ink-2); margin: 8px 0 2px; }
.cc-rooms-note { font-size: 13px; color: var(--orange, #D97A00); font-weight: 600; margin: 2px 0 0; }
/* Размеры по БТИ (справка) */
.cc-dims { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.cc-dim {
display: inline-flex; align-items: baseline; gap: 6px;
padding: 5px 10px; border: 1px solid var(--line, #eee); border-radius: 8px;
background: var(--bg-soft, #F9F9F9); font-size: 13px;
}
.cc-dim-label { color: var(--ink-3, #888); }
.cc-dim-val { font-weight: 700; color: var(--ink-1); }
@media (max-width: 480px) {
.cc-row { grid-template-columns: 1fr; }
.cc-state { text-align: left; }
.cc-rooms th, .cc-rooms td { padding: 6px 5px; }
}
/* ── Обратная связь инженера (кнопка + модалка + «Мои обращения») ── */
/* Модалка обращения поверх онбординг-тура (z-index 10000), чтобы на первом
визите приветственное окно не перекрывало её. */
#fb-modal.norm-modal { z-index: 10001; }
/* Кнопка «Проверка прошла неправильно» на странице результата: заметная,
но не кричащая — оранжевый бренд-акцент предупреждения (не красный: это не ошибка). */
.fb-bar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.fb-open-btn {
background: var(--card, #fff);
color: var(--amber, #D97A00);
border: 1.5px solid var(--amber, #D97A00);
border-radius: 10px;
padding: 9px 16px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
}
.fb-open-btn:hover { background: var(--amber-bg, #FFF6EC); }
.fb-open-hint { font-size: 13px; }
@media (max-width: 560px) {
.fb-open-btn { width: 100%; }
.fb-open-hint { display: none; }
}
/* Карточки истории «Мои обращения» */
.fb-item {
border: 1px solid var(--line);
border-radius: 12px;
background: var(--card);
padding: 14px 16px;
margin-bottom: 12px;
}
.fb-item-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
}
.fb-item-proj { font-weight: 600; }
.fb-item-msg { white-space: pre-wrap; word-break: break-word; }
.fb-fixnote {
margin-top: 8px;
padding: 8px 10px;
border-left: 3px solid var(--green, #2E9E5B);
background: var(--bg-soft, #F6F7F9);
border-radius: 0 8px 8px 0;
font-size: 14px;
}
.fb-item-date { margin-top: 8px; font-size: 12px; }
/* Шапка «Мои обращения»: заголовок слева + кнопка «Сообщить об ошибке» справа */
.fb-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.fb-head > div { flex: 1 1 260px; }
@media (max-width: 560px) {
.fb-head { flex-direction: column; }
.fb-head .fb-open-btn { width: 100%; }
}
/* Раскрывающийся образец «Как описать ошибку» в форме обратной связи */
.fb-hint {
margin: -4px 0 2px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--bg-soft, #F6F7F9);
padding: 0;
}
.fb-hint > summary {
cursor: pointer;
padding: 9px 12px;
font-size: 13px;
font-weight: 600;
color: var(--blue, #126AEE);
list-style: none;
}
.fb-hint > summary::-webkit-details-marker { display: none; }
.fb-hint > summary::before { content: "▸ "; }
.fb-hint[open] > summary::before { content: "▾ "; }
.fb-hint-body { padding: 0 12px 10px; }
.fb-hint-body p { margin: 6px 0; font-size: 13px; line-height: 1.45; }
/* Админка → «Сложность проекта» (2026-08-12). Настройка баллов и шкалы Битрикса. */
.cxa-crit-h { font-weight: 600; margin: 14px 0 4px; font-size: .95rem; }
.cxa-yaml { width: 100%; min-height: 320px; font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: .82rem; line-height: 1.45; padding: 10px; border: 1px solid var(--c-border, #e5e8ee);
border-radius: 8px; }
.cxa-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.cxa-ok { background: var(--c-ok-bg, #eafaf0); border: 1px solid #bfe8cf; border-radius: 8px;
padding: 10px 12px; margin: 8px 0; }
.cxa-warn { background: var(--c-warn-bg, #fff7e6); border: 1px solid #ffe1a8; border-radius: 8px;
padding: 10px 12px; margin: 8px 0; }
.cxa-case { font-size: .88rem; padding: 6px 10px; border-left: 3px solid #cbd0d8; margin-bottom: 4px; }
.cxa-case.is-changed { border-left-color: #f5a623; background: #fff8ec; }
.cxa-hist { font-size: .88rem; padding: 6px 0; border-bottom: 1px solid var(--c-border, #e5e8ee);
display: flex; align-items: center; gap: 10px; }
.cxa-hist.is-active { font-weight: 600; }
.cxa-mini { padding: 2px 10px; font-size: .8rem; }