/* Общий базовый слой AI-Система АВР/ППР (вынесено из инлайн-стилей) */ /* Нативные контролы (в т.ч. календарь datetime-local) — в тон теме */ html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } /* ==== Светлая тема (включается data-theme="light" на ) ==== */ html[data-theme="light"] { --bg-primary: #f4f6fb; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-card-hover: #eef1f7; --bg-elevated: #e9edf5; --border-subtle: rgba(15,23,42,0.08); --border-medium: rgba(15,23,42,0.14); --text-primary: #14171f; --text-secondary: #55607a; --text-muted: #8a92a6; --accent-glow: rgba(99,102,241,0.12); --shadow-sm: 0 1px 3px rgba(15,23,42,0.08); --shadow-md: 0 4px 20px rgba(15,23,42,0.10); --shadow-lg: 0 8px 40px rgba(15,23,42,0.12); } html[data-theme="light"] .sidebar { background: rgba(255,255,255,0.96); } html[data-theme="light"] .bg-mesh::before { opacity: .45; } html[data-theme="light"] .grid-overlay { opacity: .5; } /* мелкие «стеклянные» подложки (чипы статусов/качества) на белом фоне делаем видимыми */ html[data-theme="light"] .ch-status, html[data-theme="light"] .ch-quality { background: rgba(15,23,42,0.05) !important; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } @keyframes meshFloat { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -20px) rotate(1deg); } 66% { transform: translate(-20px, 15px) rotate(-1deg); } } .sidebar-header { padding: 24px 20px; border-bottom: 1px solid var(--border-subtle); } .logo { display: flex; align-items: center; gap: 12px; } .logo-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 4px 15px rgba(99,102,241,0.4); } .logo-text { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.3; } .logo-text span { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; } .nav-section { padding: 16px 12px; flex: 1; overflow-y: auto; } .nav-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); padding: 0 12px; margin-bottom: 8px; } .nav-item:hover { background: var(--bg-card-hover); color: var(--text-primary); } .nav-item.active { background: var(--accent-glow); color: var(--accent-primary); border: 1px solid rgba(99,102,241,0.2); } .nav-item i { width: 20px; text-align: center; font-size: 15px; } .nav-badge { margin-left: auto; background: var(--danger); color: white; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; } .sidebar-footer { padding: 16px; border-top: 1px solid var(--border-subtle); } .user-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border-subtle); } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } .user-info { flex: 1; } .user-name { font-size: 13px; font-weight: 600; } .user-role { font-size: 11px; color: var(--text-muted); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; border: none; cursor: pointer; transition: var(--transition); text-decoration: none; } .btn-primary { background: var(--accent-gradient); color: white; box-shadow: 0 4px 20px rgba(99,102,241,0.3); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 25px rgba(99,102,241,0.4); } .btn-ghost { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-subtle); } .btn-ghost:hover { background: var(--bg-card-hover); color: var(--text-primary); } .card-header { padding: 20px 24px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 10px; } .card-title i { color: var(--accent-primary); } .footer-links { display: flex; gap: 20px; } .footer-links a { color: var(--text-muted); text-decoration: none; transition: var(--transition); } .footer-links a:hover { color: var(--text-primary); } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ============ Status Page (канал-тред обновлений) ============ */ .btn-xs { padding: 4px 10px; font-size: 11px; border-radius: 6px; } #status-page-container .sp-chip { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: rgba(255,255,255,.06); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; } .sp-chip.k-investigating { color: var(--warning); } .sp-chip.k-identified { color: var(--info, #3b82f6); } .sp-chip.k-monitoring { color: var(--accent-primary); } .sp-chip.k-resolved { color: var(--success); } .sp-chip.k-postmortem { color: var(--text-secondary); } .sp-quality { cursor: help; } .sp-thread { position: relative; padding-left: 24px; } .sp-thread::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--border-medium), transparent); } .sp-upd { position: relative; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; } .sp-upd::before { content: ''; position: absolute; left: -24px; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-primary); border: 2px solid var(--accent-primary); } .sp-upd[data-kind=investigating]::before { border-color: var(--warning); } .sp-upd[data-kind=identified]::before { border-color: var(--info, #3b82f6); } .sp-upd[data-kind=monitoring]::before { border-color: var(--accent-primary); } .sp-upd[data-kind=resolved]::before { border-color: var(--success); background: var(--success); } .sp-upd-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .sp-seq { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .sp-src { margin-bottom: 10px; border: 1px dashed var(--border-medium); border-radius: 8px; background: rgba(255,255,255,.02); } .sp-src summary { cursor: pointer; list-style: none; padding: 8px 10px; font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 7px; } .sp-src summary::-webkit-details-marker { display: none; } .sp-src-body { padding: 0 10px 10px; font-size: 12px; color: var(--text-secondary); white-space: pre-wrap; line-height: 1.55; } .sp-text, .sp-comment, .sp-src-input, .sp-translation, .sp-title, .sp-title-tr, .sp-title-edit, .sp-title-tr-edit, .sp-start-date, .sp-start-time, .sp-pub-date, .sp-pub-time, .sp-edit-date, .sp-edit-time, #status-page-container select, .tga-title, .tga-title-edit, .tga-src-input, .tga-start-date, .tga-start-time, .tga-pub-date, .tga-pub-time, #tga-container select { width: 100%; background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: 8px; color: var(--text-primary); font-size: 13px; line-height: 1.55; padding: 9px 10px; box-sizing: border-box; font-family: inherit; } .sp-translation { min-height: 90px; resize: vertical; border-style: dashed; } .sp-text, .sp-comment, .sp-src-input { resize: vertical; } .sp-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .sp-issues { margin-top: 8px; font-size: 11.5px; color: var(--text-secondary); line-height: 1.6; } .sp-issues b { color: var(--danger); font-weight: 600; } .sp-warn { border: 1px solid var(--warning); background: rgba(245,158,11,.08); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 12.5px; color: var(--warning); line-height: 1.5; } .sp-acts { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; } .sp-composer { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px; margin-top: 6px; } .sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; } .sp-lbl { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; } .sp-checklist { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; } .sp-req { font-size: 11px; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border-subtle); color: var(--text-muted); display: inline-flex; gap: 5px; align-items: center; } .sp-req.ok { color: var(--success); border-color: rgba(34,197,94,.35); } @media (max-width: 768px) { .sp-grid { grid-template-columns: 1fr; } .sp-thread { padding-left: 18px; } .sp-upd::before { left: -18px; } } /* ---- P0-4: мобильная навигация (фикс-панель + гамбургер + оверлей) ---- */ #mobile-topbar, #mobile-nav-toggle, #mobile-nav-overlay { display: none; } @media (max-width: 768px) { /* непрозрачная верхняя панель во всю ширину — контент скроллится под ней */ #mobile-topbar { display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: 0; right: 0; height: 52px; padding: 0 10px; background: var(--bg-elevated); border-bottom: 1px solid var(--border-subtle); z-index: 1002; } #mobile-brand { font-weight: 700; font-size: 15px; color: var(--text-primary); } #mobile-nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--bg-secondary); border: 1px solid var(--border-medium); color: var(--text-primary); font-size: 17px; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: 0 0 auto; } #mobile-nav-toggle:active { transform: scale(0.94); } /* z-index сайдбара форсируем через !important — иначе инлайновый .sidebar{z-index:100} перебивает наш, и оверлей (z:1000) оказывается выше меню, перехватывая тапы. Сайдбар выезжает ПОД панелью (top:52px), панель всегда сверху. */ .sidebar { position: fixed !important; top: 52px !important; left: 0; height: calc(100% - 52px) !important; z-index: 1001 !important; transition: transform .25s ease; } /* dvh = реальная видимая высота: на Android адресная строка Chrome прячется/появляется, и с height:100% низ панели (кнопка темы) уезжал за экран */ @supports (height: 100dvh) { .sidebar { height: calc(100dvh - 52px) !important; } } /* панель — фикс-колонка: скроллится ТОЛЬКО список навигации, футер (юзер + тема) прижат к низу */ .sidebar { display: flex !important; flex-direction: column !important; overflow: hidden; } .sidebar .nav-section { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .sidebar .sidebar-footer { flex: 0 0 auto; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); } .sidebar .sidebar-footer .theme-toggle { margin-top: 8px !important; } .sidebar.mobile-open { transform: translateX(0) !important; } .sidebar-header { display: none; } /* бренд уже в верхней панели */ #mobile-nav-overlay.show { display: block; position: fixed; inset: 52px 0 0 0; z-index: 1000; background: rgba(0,0,0,.5); } .main-content { padding-top: 64px !important; } } /* ---- Адаптивность под телефоны (общий слой поверх инлайновых стилей страниц) ---- */ @media (max-width: 768px) { /* поля контента компактнее; сверху место под кнопку-гамбургер */ .main-content { margin-left: 0 !important; max-width: 100% !important; padding: 16px 14px !important; padding-top: 64px !important; } /* шапка страницы: заголовок сверху, поиск и кнопки — в одну строку */ .top-bar { flex-direction: column; align-items: stretch; gap: 12px; } .top-actions { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px; } .top-actions .btn { flex: 0 0 auto; white-space: nowrap; display: flex; align-items: center; justify-content: center; } /* пользователи: поиск тянется по ширине, кнопка «Новый сотрудник» — компактный значок рядом */ #user-add { flex: 0 0 auto; font-size: 0 !important; padding: 0 14px !important; min-width: 48px; } #user-add i { font-size: 17px; } .search-box { flex: 1 1 0; width: auto !important; min-width: 0; } /* поиск занимает всё свободное место */ /* у input жёсткая width:280px в инлайн-стилях страниц — форсируем 100%, иначе поиск налезает на кнопки */ .search-box input { width: 100% !important; box-sizing: border-box; } /* тап по поиску — он разворачивается во всю ширину, кнопки уходят на строку ниже */ .top-actions .search-box:focus-within { flex-basis: 100%; } .page-title h1 { font-size: 22px; } .page-title p { font-size: 13px; } /* все многоколоночные сетки — в одну колонку */ .stats-row, .stats-grid, .metrics-grid, .module-grid, .status-section, .two-col, .detail-grid, .cards-grid { grid-template-columns: 1fr !important; } /* быстрые фильтры/чипы: единый вид как в Документах — одна строка с прокруткой вбок, без переноса в «коробку» (перебиваем инлайновый .filters-bar{flex-wrap:wrap} страниц). */ .filters-bar, .role-filters, .category-tabs { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; padding-bottom: 4px; } .category-tabs { width: auto !important; max-width: 100%; } /* было width:fit-content → вылезало за экран */ .filter-chip, .role-chip, .cat-tab { white-space: nowrap; flex: 0 0 auto; padding: 6px 12px !important; font-size: 12.5px !important; } .filters-bar > div[style*="flex:1"], .filters-bar > div[style*="flex: 1"] { display: none; } /* карточки-метрики в одну строку: [значок] цифра · надпись (компактно, а не три этажа) */ .stats-row, .stats-grid, .metrics-grid { gap: 10px !important; } .stat-card { display: flex !important; align-items: center; gap: 12px; padding: 14px 16px !important; } .stat-card .stat-header { margin: 0 !important; flex: 0 0 auto; } .stat-card .stat-icon { width: 40px; height: 40px; } .stat-card .stat-trend { display: none; } /* бейдж тренда на мобиле лишний */ .stat-card .stat-value { font-size: 24px !important; margin: 0 !important; flex: 0 0 auto; } .stat-card .stat-label { font-size: 13px; flex: 1 1 auto; text-align: left; } /* пользователи: в карточке прячем аватар, а ячейку «Пользователь» кладём столбиком (подпись сверху, имя+email под ней во всю ширину — иначе имя ломается по буквам) */ .users-table td[data-col="user"] { flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; } .users-table td[data-col="user"]::before { flex: 0 0 auto; } .users-table td[data-col="user"] .user-cell-avatar { display: none !important; } .users-table td[data-col="user"] > div { text-align: left; width: 100%; } /* подписи в карточках пользователей компактнее — значениям больше места */ .users-table td::before { font-size: 12.5px; } .users-table td { align-items: flex-start; } /* «Последняя активность» — длинную ПОДПИСЬ переносим на 2 строки, значение остаётся справа */ .users-table td[data-col="active"]::before { white-space: normal !important; flex: 0 1 52%; } /* настройки: поля в одну колонку — секция помещается, длинные подписи спокойно переносятся */ .form-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .form-group { min-width: 0; } .form-label { white-space: normal; overflow-wrap: anywhere; } .form-input, .form-select, select, .form-group select, .form-group input, .form-group textarea { width: 100% !important; max-width: 100%; box-sizing: border-box; } /* инцидент: заголовок компактнее; действия и группы кнопок в шапках карточек переносятся */ .incident-meta-block h1 { font-size: 18px !important; } .incident-actions { flex-wrap: wrap; } .card-header > div { flex-wrap: wrap; } /* страховка от горизонтального «разъезда» страницы (таблицы/фильтры имеют свою прокрутку) */ .main-content { overflow-x: clip; } /* инцидент: сетка колонок не должна раздуваться шире экрана из-за широкого содержимого */ .detail-grid { grid-template-columns: minmax(0, 1fr) !important; } .detail-grid > * { min-width: 0; } /* карточка инцидента: «Информация» — значения переносятся, не уезжают за экран */ .info-row { flex-wrap: wrap; gap: 4px 10px; } .info-value { overflow-wrap: anywhere; min-width: 0; } /* «Оценка AI»: пункты замечаний переносятся */ .detail-grid li, .detail-grid ul { overflow-wrap: anywhere; } /* каналы: шире (уменьшаем вложенные отступы), шапка переносится */ .card-body { padding-left: 10px !important; padding-right: 10px !important; } .channel-card { padding: 12px !important; } .channel-card > div:first-child { flex-wrap: wrap; gap: 8px; } /* кнопки-иконки одинакового размера (ровный ряд): действия канала + копирование в шапке. Мелкие копи-кнопки у полей (тема/подзаголовок/…) НЕ трогаем. */ .channel-card .btn, .channel-card > div:first-child .ch-copy { font-size: 0 !important; width: 44px; height: 44px; min-width: 44px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .channel-card .btn i, .channel-card > div:first-child .ch-copy i { font-size: 15px; margin: 0 !important; } /* «Включить рассылку» — необратимое действие: оставляем ПОДПИСЬ даже на мобиле (не только значок) */ .channel-card .ch-staff-activate { font-size: 12px !important; width: auto !important; min-width: 0 !important; padding: 0 12px !important; gap: 6px; } .channel-card .ch-staff-activate i { font-size: 14px; } /* чип качества кликабелен (список замечаний по тапу — title на тач недоступен) */ .ch-quality { cursor: pointer; } /* пользователи: кнопка «Новый сотрудник» — только значок (текст прячем через font-size:0) */ #user-add { font-size: 0 !important; padding: 10px 13px !important; } #user-add i { font-size: 16px; } /* «?»-пузырёк вместо длинной подписи-пояснения */ .hint-q-btn { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-medium); background: var(--bg-secondary); color: var(--text-muted); font-size: 11px; line-height: 1; cursor: pointer; padding: 0; margin-left: 6px; vertical-align: middle; } /* модули: убираем дублирующую нижнюю подпись «Обязательный модуль» — оставляем верхнюю плашку */ .module-card.required .status-indicator.required { display: none !important; } /* модули: длинная строка провайдеров/чипов переносится, а не уезжает за экран */ .module-meta { flex-wrap: wrap; } .module-meta .meta-item { min-width: 0; overflow-wrap: anywhere; } /* модалки (id заканчивается на -modal) должны быть ВЫШЕ фикс-панели (z:1002), иначе она их перекрывает */ [id$="-modal"] { z-index: 2000 !important; } /* ТАБЛИЦЫ → КАРТОЧКИ: строка = карточка, ячейка = «Заголовок: значение». Заголовок таблицы прячем визуально, подпись берём из data-label (проставляет app.js). */ table.data-table thead, table.doc-table thead, table.users-table thead, table.usage-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } table.data-table, table.data-table tbody, table.data-table tr, table.data-table td, table.doc-table, table.doc-table tbody, table.doc-table tr, table.doc-table td, table.users-table, table.users-table tbody, table.users-table tr, table.users-table td, table.usage-table, table.usage-table tbody, table.usage-table tr, table.usage-table td { display: block; width: auto; } table.data-table tr, table.doc-table tr, table.users-table tr, table.usage-table tr { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 6px 12px; margin-bottom: 10px; } table.data-table td, table.doc-table td, table.users-table td, table.usage-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0 !important; border: none !important; text-align: right; white-space: normal; overflow-wrap: anywhere; min-width: 0; } /* подпись слева не переносится (иначе «слетают буквы»); значение справа занимает остаток и переносится */ table.data-table td::before, table.doc-table td::before, table.users-table td::before, table.usage-table td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); text-align: left; flex: 0 0 auto; white-space: nowrap; } table.data-table td:empty, table.doc-table td:empty, table.users-table td:empty, table.usage-table td:empty { display: none; } /* база знаний: в карточке прячем колонку-иконку и дублирующий тип под названием (тип уже в строке «Тип») */ .doc-table td.doc-icon-cell { display: none !important; } .doc-table .doc-meta { display: none !important; } /* настройки → журнал действий: записи переносятся по строкам, не уезжают за экран */ #logs-view { overflow-x: hidden; } #logs-view > div { flex-wrap: wrap !important; } /* карточки/секции — меньше внутренние отступы (чтобы содержимое было шире) */ .card, .card-header { padding-left: 10px !important; padding-right: 10px !important; } .card-header { flex-wrap: wrap; gap: 8px; } .main-content { padding-left: 10px !important; padding-right: 10px !important; } /* заголовок инцидента в столбик */ .incident-header { flex-direction: column; align-items: stretch; gap: 12px; } /* группы кнопок не вылезают за экран */ .btn-row, .actions, .toolbar { flex-wrap: wrap; } /* пагинация в столбик, номера страниц переносятся */ .pagination { flex-direction: column; align-items: stretch; gap: 10px; } .pagination-pages { flex-wrap: wrap; justify-content: center; } /* футер в столбик, ссылки переносятся */ .app-footer { flex-direction: column; align-items: flex-start; gap: 10px; } .footer-links { flex-wrap: wrap; gap: 14px; } /* модули: бейдж «Обязательный» (абсолютный, top-right) не должен наезжать на заголовок — сдвигаем шапку карточки вниз, чтобы иконка+название были под бейджем */ .module-card.required .module-header { margin-top: 20px; } /* аналитика: селектор периода — переносим по строкам (аккуратнее, чем узкая прокрутка) */ .period-selector { flex-wrap: wrap; gap: 6px; } .period-btn { flex: 0 0 auto; white-space: nowrap; padding: 6px 12px; font-size: 12.5px; } #range-wrap { flex: 0 0 auto; margin-left: 0 !important; } /* выпадающие меню/уведомления не должны вылезать за экран. z-index НИЖЕ оверлея (1000) и сайдбара (1001): открыл меню — оно поверх панели уведомлений, а тап по оверлею закрывает и меню, и уведомления (раньше панель с z:9997 накрывала всё и перехватывала тапы — «ничего нельзя нажать») */ .notif-panel { position: fixed !important; left: 10px !important; right: 10px !important; top: 62px !important; width: auto !important; z-index: 999 !important; max-height: calc(100dvh - 140px) !important; } #cols-menu { left: 0 !important; right: auto !important; max-width: calc(100vw - 40px); } /* календари/пикеры дат не должны вылезать за экран */ #range-pop, .dp-pop { position: fixed !important; left: 10px !important; right: 10px !important; top: 90px !important; width: auto !important; max-width: calc(100vw - 20px) !important; box-sizing: border-box !important; } /* тосты — снизу, а не под верхней панелью */ #toast-host { top: auto !important; bottom: 16px !important; left: 12px !important; right: 12px !important; align-items: stretch !important; } /* модалки почти во всю ширину */ .modal, .modal-box { width: 96vw !important; max-width: 96vw !important; } /* типографика: не даём телефону самовольно раздувать шрифт, переносим длинные абзацы */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-size: 15px; line-height: 1.5; } .card p, .info-row, .timeline-text, .card-desc, .module-desc { overflow-wrap: anywhere; } h1 { font-size: 22px; line-height: 1.25; } h2 { font-size: 19px; line-height: 1.3; } h3 { font-size: 16px; } .nav-label { font-size: 11px; } } /* ---- Пагинация: общие стили кнопок (страницы без своих стилей, напр. База знаний) ---- */ .page-btn { min-width: 32px; height: 32px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--border-subtle); background: var(--bg-secondary); color: var(--text-secondary); font-size: 12.5px; cursor: pointer; transition: all .2s; } .page-btn:hover { color: var(--text-primary); border-color: var(--border-medium); } .page-btn.active { background: var(--accent-glow); border-color: rgba(99,102,241,.4); color: var(--accent-primary); font-weight: 600; }