:root, [data-theme="light"] {
--brand: #007084;
--brand-dark: #005662;
--brand-soft: #e0f2f5;
--bg: #f7f9fa;
--surface: #ffffff;
--surface-2: #f0f5f7;
--text: #1a2832;
--text-soft: #5a6b78;
--border: #d8e2e8;
--danger: #c0392b;
--warn-bg: #fff8e1;
--warn-border: #f5b500;
--warn-text: #8a6d00;
--typo-bg: #fff0f0;
--typo-text: #5a2020;
--shadow: 0 1px 3px rgba(0,0,0,.04);
--shadow-lg: 0 8px 28px rgba(0,112,132,.15);
--font-scale: 1;
}
[data-theme="dark"] {
--brand: #4dd5e8;
--brand-dark: #84e3f0;
--brand-soft: #173039;
--bg: #0e1418;
--surface: #16202a;
--surface-2: #1c2832;
--text: #e8eef2;
--text-soft: #97a8b4;
--border: #283742;
--danger: #ff7466;
--warn-bg: #2a2410;
--warn-border: #b88a00;
--warn-text: #ffd966;
--typo-bg: #2a1818;
--typo-text: #ffb3a8;
--shadow: 0 1px 3px rgba(0,0,0,.4);
--shadow-lg: 0 8px 28px rgba(0,0,0,.5);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); transition: background .2s, color .2s; }
/* ===== LOGIN ===== */
.login-wrap {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
padding: 20px;
}
.login-card {
background: var(--surface);
width: 100%; max-width: 420px;
padding: 40px 36px;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,.18);
display: flex; flex-direction: column;
}
.login-logo { font-size: 22px; font-weight: 700; color: var(--brand); text-align: center; }
.login-sub { font-size: 13px; color: var(--text-soft); text-align: center; margin: 8px 0 28px; }
.login-card label { font-size: 13px; color: var(--text-soft); margin-top: 14px; margin-bottom: 6px; }
.login-card input {
height: 44px; padding: 0 14px;
border: 1px solid var(--border); border-radius: 8px; font-size: 15px;
outline: none; transition: border .15s;
}
.login-card input:focus { border-color: var(--brand); }
.login-card button {
margin-top: 24px; height: 46px;
background: var(--brand); color: #fff; border: 0; border-radius: 8px;
font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.login-card button:hover { background: var(--brand-dark); }
.login-hint { margin-top: 18px; font-size: 12px; color: var(--text-soft); text-align: center; }
.login-credits { margin-top: 14px; font-size: 11px; color: rgba(255,255,255,.65); text-align: center; }
.alert { background: #fdecea; color: var(--danger); padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 8px; }
/* ===== APP ===== */
.app { height: 100vh; display: flex; flex-direction: column; }
.app-header {
height: 56px; flex: 0 0 56px;
background: var(--brand); color: #fff;
display: flex; align-items: center; gap: 18px;
padding: 0 18px;
}
.brand { font-weight: 700; font-size: 16px; white-space: nowrap; }
.brand-link { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-link:hover .brand { opacity: .8; }
.brand-logo-sm { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; }
.app-header input[type=search] {
flex: 1 1 auto; max-width: 700px;
height: 38px; padding: 0 14px;
border: 0; border-radius: 6px;
font-size: 14px; outline: none;
}
.lang-switch { display: flex; gap: 2px; background: rgba(255,255,255,.15); border-radius: 6px; padding: 3px; }
.lang-switch button { background: transparent; color: #fff; border: 0; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 4px; opacity: .7; }
.lang-switch button:hover { opacity: 1; }
.lang-switch button.active { background: #fff; color: var(--brand); opacity: 1; }
.user-box { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.user-box a { color: #fff; text-decoration: none; opacity: .85; }
.user-box a:hover { opacity: 1; text-decoration: underline; }
.app-main { flex: 1; display: flex; min-height: 0; }
.nav { width: 340px; flex: 0 0 340px; background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; padding: 14px 0; }
.nav-title { padding: 0 18px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-soft); }
.nav ul { list-style: none; padding: 0; margin: 0; }
.nav li a { display: flex; gap: 8px; padding: 7px 18px; text-decoration: none; color: var(--text); font-size: calc(13px * var(--font-scale)); border-left: 3px solid transparent; }
.nav li a:hover { background: var(--brand-soft); }
.nav li.active a { border-left-color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.nav .cid { color: var(--brand); font-weight: 600; min-width: 56px; }
.nav .ctitle { color: var(--text); }
.nav .lvl-1 a { font-weight: 700; background: var(--surface-2); }
/* Свёртывание разделов в навигации */
.nav-group { list-style: none; }
.nav-group .group-head {
display: flex; align-items: center; gap: 6px;
padding: 9px 14px; text-decoration: none;
color: var(--text); font-weight: 700; font-size: 13.5px;
background: var(--surface-2);
border-left: 3px solid transparent;
transition: background .12s;
}
.nav-group .group-head:hover { background: var(--brand-soft); }
.nav-group .group-head .cid { color: var(--brand-dark); min-width: 36px; font-weight: 700; }
.nav-group .group-toggle {
display: inline-block; width: 16px; text-align: center;
color: var(--text-soft); font-size: 12px;
transition: transform .15s;
cursor: pointer;
}
.nav-group.open .group-toggle { transform: rotate(90deg); }
.nav-group .group-children { display: none; padding: 0; margin: 0; list-style: none; }
.nav-group.open .group-children { display: block; }
.nav-group.active .group-head { background: var(--brand-soft); border-left-color: var(--brand); }
.nav .lvl-1 .cid { color: var(--brand-dark); }
.nav .lvl-2 a { padding-left: 28px; }
.nav .lvl-3 a { padding-left: 44px; font-size: 12.5px; }
.nav .lvl-4 a { padding-left: 60px; font-size: 12px; }
.content { flex: 1; overflow-y: auto; padding: 28px 36px; }
.hint { color: var(--text-soft); padding: 40px; background: var(--surface); border-radius: 10px; border: 1px dashed var(--border); }
#clause-view { background: var(--surface); padding: 32px 36px; border-radius: 10px; box-shadow: var(--shadow); }
.clause-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
/* Хлебные крошки */
.breadcrumbs {
display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
font-size: 13px; margin-bottom: 14px;
font-family: monospace;
}
.breadcrumbs a {
color: var(--brand);
text-decoration: none;
padding: 2px 8px;
border-radius: 4px;
background: var(--brand-soft);
font-weight: 600;
transition: all .12s;
}
.breadcrumbs a:hover { background: var(--brand); color: #fff; }
.breadcrumbs .crumb-sep { color: var(--text-soft); padding: 0 2px; opacity: .5; }
.breadcrumbs .crumb-current {
color: var(--text-soft);
font-weight: 600;
padding: 2px 8px;
background: var(--surface-2);
border-radius: 4px;
}
/* Навигация Prev / Next в карточке пункта */
.clause-nav {
display: flex; align-items: center; justify-content: space-between;
margin: -12px -16px 14px;
padding: 8px 14px;
background: var(--surface-2);
border-radius: 10px 10px 0 0;
font-size: 13px;
}
.nav-btn {
background: transparent; color: var(--brand);
border: 0; padding: 6px 12px; cursor: pointer;
font-size: 13px; font-weight: 600; border-radius: 6px;
display: inline-flex; align-items: center; gap: 4px;
transition: background .15s;
}
.nav-btn:hover { background: var(--brand-soft); }
.nav-btn.nav-disabled { opacity: .25; cursor: default; pointer-events: none; }
.clause-counter {
font-size: 11px; color: var(--text-soft);
font-family: monospace; opacity: .7;
}
@media (max-width: 600px) {
.clause-nav { margin: -8px -8px 12px; padding: 6px 10px; }
.nav-btn { padding: 4px 8px; font-size: 12px; }
}
.clause-num { font-size: calc(28px * var(--font-scale)); font-weight: 700; color: var(--brand); }
.clause-title { font-size: calc(22px * var(--font-scale)); font-weight: 600; }
.clause-body { white-space: pre-wrap; line-height: 1.65; font-size: calc(15px * var(--font-scale)); }
.clause-body mark, .clause-title mark, .notes mark {
background: #fff59d; color: inherit; padding: 0 2px; border-radius: 2px;
font-weight: 600;
}
[data-theme="dark"] .clause-body mark,
[data-theme="dark"] .clause-title mark,
[data-theme="dark"] .notes mark { background: #4d3a00; color: #ffe89a; }
/* Кнопка «↶ Вернуться к X.Y.Z» — появляется после перехода по cross-ref */
.back-xref-btn {
background: var(--brand-soft); color: var(--brand-dark);
border: 1px solid var(--brand);
padding: 6px 14px; border-radius: 6px;
font-size: 13px; font-weight: 600; cursor: pointer;
margin-bottom: 12px;
display: inline-flex; align-items: center; gap: 6px;
transition: all .15s;
}
.back-xref-btn:hover { background: var(--brand); color: #fff; }
/* Inline cross-references (qarang/см./see X.Y.Z) */
.inline-ref {
color: var(--brand);
text-decoration: none;
background: var(--brand-soft);
padding: 1px 6px;
border-radius: 4px;
font-weight: 500;
white-space: nowrap;
font-size: 0.95em;
}
.inline-ref:hover { background: var(--brand); color: #fff; }
/* Термины раздела 3 — пунктирная подчёркивающая линия + tooltip */
abbr.term {
text-decoration: underline dotted var(--brand);
text-underline-offset: 2px;
cursor: help;
color: inherit;
border: 0;
}
abbr.term:hover { color: var(--brand); }
/* Попап с определением термина (для мобильных и расширенный для desktop) */
.term-popup {
position: absolute;
z-index: 800;
width: min(400px, calc(100vw - 16px));
background: var(--surface);
color: var(--text);
border: 1px solid var(--brand);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,.2);
padding: 12px 14px;
font-size: 13px;
animation: term-pop-in .15s ease both;
}
@keyframes term-pop-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.term-popup-head {
display: flex; align-items: baseline; gap: 8px;
margin-bottom: 8px; padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.term-popup-cid {
background: var(--brand-soft); color: var(--brand-dark);
padding: 2px 8px; border-radius: 4px;
font-weight: 700; font-size: 12px;
}
.term-popup-title { font-weight: 600; flex: 1; }
.term-popup-close {
background: transparent; border: 0; color: var(--text-soft);
cursor: pointer; padding: 2px 6px; border-radius: 4px;
font-size: 14px;
}
.term-popup-close:hover { background: var(--surface-2); color: var(--danger); }
.term-popup-body {
line-height: 1.5; max-height: 200px; overflow-y: auto;
white-space: pre-wrap; color: var(--text);
}
.term-popup-link {
display: inline-block; margin-top: 8px;
color: var(--brand); text-decoration: none; font-size: 12px;
font-weight: 600;
}
.term-popup-link:hover { text-decoration: underline; }
/* Плавающая кнопка цитаты при выделении текста */
#selection-cite {
box-shadow: 0 4px 14px rgba(0,0,0,.25);
font-size: 13px;
padding: 7px 14px;
white-space: nowrap;
}
.notes { margin-top: 22px; padding: 16px 18px; background: var(--warn-bg); border-left: 4px solid var(--warn-border); border-radius: 4px; }
.notes h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--warn-text); }
.notes ul { margin: 0; padding-left: 18px; }
.notes li { margin-bottom: 6px; line-height: 1.55; font-size: calc(14px * var(--font-scale)); }
.refs { margin-top: 18px; }
.refs h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-soft); }
.refs a { display: inline-block; margin-right: 8px; padding: 4px 10px; background: var(--brand-soft); color: var(--brand-dark); border-radius: 4px; text-decoration: none; font-size: 13px; }
.refs a:hover { background: var(--brand); color: #fff; }
.typos { margin-top: 18px; padding: 10px 14px; background: var(--typo-bg); border-left: 3px solid var(--danger); font-size: 13px; color: var(--typo-text); border-radius: 4px; }
.clause-unofficial, .reader-unofficial { margin: 8px 0 14px; padding: 10px 14px; background: #fff5e6; border-left: 4px solid #ff9500; border-radius: 4px; font-size: 13px; color: #6b3a00; }
.clause-unofficial b, .reader-unofficial b { display: block; margin-bottom: 2px; }
.clause-unofficial-sub, .reader-unofficial-sub { display: block; font-size: 12px; opacity: .85; }
[data-theme="dark"] .clause-unofficial, [data-theme="dark"] .reader-unofficial { background: #3a2a10; color: #ffd699; border-left-color: #ffa940; }
.actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn { padding: 8px 14px; background: var(--brand); color: #fff; border: 0; border-radius: 6px; cursor: pointer; font-size: 13px; }
.btn.secondary { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
.btn:hover { background: var(--brand-dark); color: #fff; }
.btn.is-bookmarked { color: #fff; }
.btn.is-bookmarked.color-yellow { background: #f7b500; border-color: #f7b500; }
.btn.is-bookmarked.color-yellow:hover { background: #c89400; }
.btn.is-bookmarked.color-red { background: #c0392b; border-color: #c0392b; }
.btn.is-bookmarked.color-red:hover { background: #962a1f; }
.btn.is-bookmarked.color-green { background: #27ae60; border-color: #27ae60; }
.btn.is-bookmarked.color-green:hover { background: #1f8c4d; }
.btn.is-bookmarked.color-blue { background: #2980b9; border-color: #2980b9; }
.btn.is-bookmarked.color-blue:hover { background: #1f6291; }
/* Popover выбора цвета закладки */
.bookmark-popover {
position: absolute;
z-index: 600;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,.2);
padding: 12px;
min-width: 200px;
animation: term-pop-in .15s ease both;
}
.bm-pop-title {
font-size: 12px; font-weight: 600; color: var(--text-soft);
text-transform: uppercase; letter-spacing: 1px;
margin-bottom: 8px;
}
.bm-color-list { display: flex; flex-direction: column; gap: 4px; }
.bm-color-btn {
display: flex; align-items: center; gap: 10px;
background: transparent; border: 0; padding: 8px 10px;
border-radius: 6px; cursor: pointer;
font-size: 13px; color: var(--text); width: 100%;
text-align: left;
}
.bm-color-btn:hover { background: var(--surface-2); }
.bm-color-btn.active { background: var(--brand-soft); font-weight: 600; }
.bm-color-dot {
width: 14px; height: 14px; border-radius: 50%;
flex: 0 0 14px;
box-shadow: 0 0 0 2px rgba(0,0,0,.06);
}
.bm-color-btn.color-yellow .bm-color-dot { background: #f7b500; }
.bm-color-btn.color-red .bm-color-dot { background: #c0392b; }
.bm-color-btn.color-green .bm-color-dot { background: #27ae60; }
.bm-color-btn.color-blue .bm-color-dot { background: #2980b9; }
.bm-remove {
width: 100%; margin-top: 8px;
background: transparent; color: var(--danger);
border: 1px solid var(--border); border-radius: 6px;
padding: 6px; cursor: pointer; font-size: 12px;
}
.bm-remove:hover { background: var(--typo-bg); }
/* Цветовая полоска у закладок на странице /bookmarks (жирная) */
.bookmark-item { border-left: 8px solid #ccc; padding-left: 14px; }
.bookmark-item.bm-color-yellow { border-left-color: #f7b500; }
.bookmark-item.bm-color-red { border-left-color: #c0392b; }
.bookmark-item.bm-color-green { border-left-color: #27ae60; }
.bookmark-item.bm-color-blue { border-left-color: #2980b9; }
/* Фильтр по цвету на /bookmarks */
.bm-filter {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 18px 0;
}
.bm-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
border-radius: 16px;
border: 1.5px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all .12s;
font-family: inherit;
}
.bm-chip:hover { background: var(--surface-2); }
.bm-chip.active {
border-color: var(--brand);
background: var(--brand);
color: #fff;
font-weight: 600;
}
.bm-chip-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ccc;
border: 1px solid rgba(0,0,0,.15);
}
.bm-chip-yellow .bm-chip-dot { background: #f7b500; }
.bm-chip-red .bm-chip-dot { background: #c0392b; }
.bm-chip-green .bm-chip-dot { background: #27ae60; }
.bm-chip-blue .bm-chip-dot { background: #2980b9; }
.bm-chip-count {
display: inline-block;
padding: 1px 7px;
font-size: 11px;
font-weight: 700;
background: var(--surface-2);
border-radius: 8px;
color: var(--text-soft);
min-width: 18px;
text-align: center;
}
.bm-chip.active .bm-chip-count {
background: rgba(255,255,255,.25);
color: #fff;
}
/* Бейдж кода стандарта (рядом с цветным бейджем) */
.bm-std-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
background: var(--surface-2);
color: var(--text-soft);
border: 1px solid var(--border);
margin-right: 6px;
vertical-align: middle;
}
/* Цветной бейдж рядом с заголовком закладки */
.bm-color-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-right: 8px;
vertical-align: middle;
color: #fff;
white-space: nowrap;
}
.bm-color-yellow-bg { background: #f7b500; color: #5a4400; }
.bm-color-red-bg { background: #c0392b; }
.bm-color-green-bg { background: #27ae60; }
.bm-color-blue-bg { background: #2980b9; }
.search-results { background: var(--surface); border-radius: 10px; padding: 16px 18px; margin-bottom: 18px; }
.search-results h3 { margin: 0 0 10px; font-size: 14px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 1px; }
.search-hit { padding: 10px 12px; border-radius: 6px; cursor: pointer; }
.search-hit:hover { background: var(--brand-soft); }
.search-hit .hit-id { color: var(--brand); font-weight: 700; margin-right: 10px; }
.search-hit .hit-title { font-weight: 600; }
.search-hit .hit-snippet { color: var(--text-soft); font-size: calc(13px * var(--font-scale)); margin-top: 4px; }
.search-hit .hit-title { font-weight: 600; font-size: calc(15px * var(--font-scale)); }
.search-hit mark { background: #fff59d; padding: 0 2px; border-radius: 2px; }
/* Гамбургер скрыт на десктопе */
.hamburger {
display: none;
background: transparent; color: #fff; border: 0;
font-size: 22px; cursor: pointer;
width: 36px; height: 36px;
align-items: center; justify-content: center;
border-radius: 4px; transition: background .15s;
}
.hamburger:hover { background: rgba(255,255,255,.15); }
.nav-backdrop { display: none; }
@media (max-width: 900px) {
.hamburger { display: inline-flex; flex: 0 0 auto; }
/* Высота auto — при wrap'е новая строка не обрезается */
.app-header { padding: 10px 12px; gap: 10px; flex-wrap: wrap; height: auto; flex: 0 0 auto; min-height: 56px; }
.app-header input[type=search] { order: 99; flex: 1 1 100%; }
.brand-link .brand { display: none; } /* на мобиле/планшете только лого */
.user-box { font-size: 12px; gap: 6px; }
.user-box .user-name { display: none; }
/* Кнопка выхода: только иконка (без текста) — экономим место для языков */
.logout-text { display: none; }
.logout-link { margin-left: 4px; padding: 4px 6px; }
/* Компактный переключатель языков — даже на планшете в портрете 768px */
.topbar-right { gap: 8px; flex-wrap: wrap; row-gap: 6px; }
.topbar-right .lang-switch { gap: 0; padding: 2px; }
.topbar-right .lang-switch button { padding: 4px 7px; font-size: 11px; min-width: 28px; }
.topbar-right .prefs-controls { gap: 6px; }
.font-controls button { width: 24px; height: 22px; font-size: 11px; }
.theme-toggle { width: 26px; height: 26px; font-size: 12px; }
.user-role { padding: 1px 5px; font-size: 10px; }
/* Та же логика для дашборда (там .topbar, не .app-header) */
.topbar { flex-wrap: wrap; gap: 10px; row-gap: 6px; }
.brand-title { font-size: 15px; }
.brand-sub { font-size: 11px; }
/* Sidebar превращается в выезжающий drawer */
.nav {
position: fixed; top: 56px; left: 0; bottom: 0;
width: 86%; max-width: 360px;
z-index: 100;
transform: translateX(-100%);
transition: transform .25s ease;
box-shadow: 4px 0 18px rgba(0,0,0,.18);
max-height: none;
}
.nav.open { transform: translateX(0); }
.nav-backdrop {
display: block; position: fixed; inset: 0;
background: rgba(0,0,0,.45);
opacity: 0; pointer-events: none;
transition: opacity .25s;
z-index: 99;
}
.nav-backdrop.show { opacity: 1; pointer-events: auto; }
.app-main { flex-direction: column; }
.content { padding: 16px 12px; }
#clause-view { padding: 18px 16px; }
.clause-head { gap: 10px; }
.clause-num { font-size: calc(22px * var(--font-scale)); }
.clause-title { font-size: calc(17px * var(--font-scale)); }
.actions { gap: 8px; }
.actions .btn { font-size: 12px; padding: 7px 10px; }
}
@media (max-width: 600px) {
.bookmark-item { flex-wrap: wrap; gap: 8px; }
.bm-actions { width: 100%; justify-content: flex-end; }
}
@media (max-width: 380px) {
/* Очень узкий экран — лишний скрыто, переключатель полностью на новой строке */
.topbar-right { width: 100%; justify-content: flex-end; }
.lang-switch { order: 99; flex-basis: 100%; justify-content: center; }
}
/* =================== DASHBOARD =================== */
.page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.topbar {
background: var(--brand);
color: #fff;
padding: 14px 28px;
display: flex;
align-items: center;
gap: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.topbar-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-logo {
width: 48px; height: 48px;
flex: 0 0 48px; /* не ужимать, не растягивать */
object-fit: contain;
display: block;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.brand-text { min-width: 0; }
.brand-title { font-size: 18px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: 12px; opacity: .85; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.user-name { font-weight: 600; }
.user-role { font-size: 12px; opacity: .75; padding: 2px 8px; background: rgba(255,255,255,.15); border-radius: 4px; margin-left: 6px; }
.logout-link { color: #fff; text-decoration: none; opacity: .8; margin-left: 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.logout-link:hover { opacity: 1; text-decoration: underline; }
.logout-icon { width: 16px; height: 16px; flex: 0 0 16px; vertical-align: middle; }
.dashboard {
max-width: 1200px;
margin: 0 auto;
padding: 48px 24px 32px;
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
gap: 36px;
}
.hero { text-align: center; padding: 24px 0 8px; }
.hero h1 { font-size: 34px; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.hero p { color: var(--text-soft); margin: 0 0 28px; font-size: 15px; }
.hero-search { display: flex; max-width: 720px; margin: 0 auto; gap: 0; box-shadow: 0 8px 28px rgba(0,112,132,.15); border-radius: 10px; overflow: hidden; }
.hero-search input {
flex: 1; height: 56px; padding: 0 22px; font-size: 17px;
border: 0; outline: none;
}
.hero-search button {
height: 56px; padding: 0 32px;
background: var(--brand); color: #fff; border: 0;
font-size: 15px; font-weight: 600; cursor: pointer;
transition: background .15s;
}
.hero-search button:hover { background: var(--brand-dark); }
.quickstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-card {
background: var(--surface);
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
border: 1px solid var(--border);
}
.stat-num { font-size: 32px; font-weight: 700; color: var(--brand); line-height: 1; }
.stat-label { font-size: 12px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 1px; margin-top: 8px; }
.stat-link { text-decoration: none; cursor: pointer; transition: all .15s; display: block; }
.stat-link:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,112,132,.12); }
.sections-grid h2, .recent h2 { font-size: 18px; font-weight: 600; color: var(--text); margin: 0 0 16px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tile {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 18px 20px;
text-decoration: none;
color: var(--text);
transition: all .18s;
display: flex; flex-direction: column; gap: 6px;
position: relative;
}
.tile:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(0,112,132,.12); transform: translateY(-2px); }
.tile-icon { font-size: 24px; color: var(--brand); }
.tile-num { font-size: 12px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .4px; }
.tile-title { font-size: 14.5px; font-weight: 600; line-height: 1.4; min-height: 40px; }
.tile-link { font-size: 12px; color: var(--brand); margin-top: auto; }
.tile-loading { padding: 18px; color: var(--text-soft); font-size: 14px; grid-column: 1 / -1; }
.recent-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.recent-tag {
background: var(--brand-soft); color: var(--brand-dark);
padding: 6px 14px; border-radius: 999px;
text-decoration: none; font-size: 13px; font-weight: 500;
transition: all .15s;
}
.recent-tag:hover { background: var(--brand); color: #fff; }
.dashboard-footer {
margin-top: auto;
padding: 24px 0 8px;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
font-size: 12px; color: var(--text-soft);
border-top: 1px solid var(--border);
}
.footer-version {
font-family: monospace; font-size: 11px; opacity: .6;
margin-left: auto;
}
.footer-version a { color: inherit; }
.footer-version a:hover { color: var(--brand); }
.footer-author { font-size: 11px; opacity: .75; }
.footer-link {
background: transparent; border: 0; color: var(--brand);
cursor: pointer; padding: 0; font: inherit; font-size: 11px;
}
.footer-link:hover { text-decoration: underline; }
/* Модалка «О приложении» */
.about-card { max-width: 560px; }
.about-grid { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.about-row { display: flex; gap: 12px; font-size: 13px; line-height: 1.5; }
.about-row b { flex: 0 0 130px; color: var(--text-soft); font-weight: 500; }
.about-row span { color: var(--text); }
.about-row a { color: var(--brand); }
.about-foot { font-size: 12px; color: var(--text-soft); margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
@media (max-width: 600px) {
.about-row { flex-direction: column; gap: 2px; }
.about-row b { flex-basis: auto; }
}
/* =================== PWA INSTALL BUTTON =================== */
.pwa-install-bar {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 9000;
display: flex;
align-items: center;
gap: 6px;
background: var(--brand);
border-radius: 30px;
padding: 4px;
box-shadow: 0 8px 24px rgba(0,112,132,.35);
animation: pwa-bar-in .3s ease both;
}
@keyframes pwa-bar-in {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.pwa-install-btn {
background: transparent; color: #fff; border: 0;
padding: 8px 18px; font-size: 14px; font-weight: 600;
cursor: pointer; border-radius: 26px;
transition: background .15s;
}
.pwa-install-btn:hover { background: rgba(255,255,255,.15); }
.pwa-install-close {
background: rgba(255,255,255,.15); color: #fff; border: 0;
width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
font-size: 14px; line-height: 1;
}
.pwa-install-close:hover { background: rgba(255,255,255,.3); }
.pwa-install-ios { background: #1c2832; padding: 10px 18px; border-radius: 12px; }
.pwa-install-ios .pwa-install-btn { font-size: 13px; padding: 4px 10px; cursor: default; }
.pwa-install-ios .pwa-install-btn:hover { background: transparent; }
@media (max-width: 600px) {
.pwa-install-bar { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; }
}
/* =================== OFFLINE BADGE =================== */
.is-offline body::before {
content: "📡 Oflayn rejim · Offline · Без сети";
position: fixed;
top: 0; left: 0; right: 0;
background: #c0392b;
color: #fff;
text-align: center;
padding: 5px 10px;
font-size: 12px;
font-weight: 600;
z-index: 10000;
letter-spacing: 1px;
}
.is-offline body { padding-top: 26px; }
/* =================== PARALLEL VIEW =================== */
.parallel-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 14px; }
.parallel-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.parallel-card {
position: relative;
background: var(--surface); color: var(--text);
border-radius: 12px;
width: 100%; max-width: 1400px; height: 90vh;
display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.parallel-head {
padding: 14px 20px;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
flex: 0 0 auto;
}
.parallel-head h3 { margin: 0; font-size: 16px; color: var(--brand); }
.parallel-close {
background: transparent; border: 0; color: var(--text-soft);
width: 32px; height: 32px; cursor: pointer; border-radius: 4px;
font-size: 16px;
}
.parallel-close:hover { background: var(--surface-2); color: var(--danger); }
.parallel-cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
flex: 1; min-height: 0;
overflow: hidden;
}
.parallel-col {
background: var(--surface);
display: flex; flex-direction: column;
min-height: 0;
}
.parallel-col-head {
padding: 10px 14px;
background: var(--brand-soft);
color: var(--brand-dark);
font-weight: 700; font-size: 12px; letter-spacing: 1px;
text-align: center;
flex: 0 0 auto;
border-bottom: 1px solid var(--border);
}
.parallel-col-body {
padding: 14px 16px;
overflow-y: auto;
flex: 1; min-height: 0;
font-size: 13px; line-height: 1.55;
}
.parallel-title { font-weight: 600; color: var(--brand-dark); font-size: 14px; margin-bottom: 8px; }
.parallel-text { white-space: pre-wrap; color: var(--text); }
.parallel-note {
margin-top: 10px; padding: 8px 10px;
background: var(--warn-bg); border-left: 3px solid var(--warn-border);
border-radius: 4px; font-size: 12.5px; color: var(--warn-text);
line-height: 1.5;
}
@media (max-width: 900px) {
.parallel-cols { grid-template-columns: repeat(2, 1fr); }
.parallel-card { height: 95vh; }
}
@media (max-width: 500px) {
.parallel-cols { grid-template-columns: 1fr; grid-auto-rows: 1fr; overflow-y: auto; }
.parallel-col { min-height: 200px; }
}
/* =================== ONBOARDING =================== */
.onb-backdrop {
position: fixed; inset: 0; z-index: 1500;
background: rgba(0,0,0,.55);
pointer-events: none;
}
.onb-highlight {
position: relative;
z-index: 1501;
box-shadow: 0 0 0 4px var(--brand), 0 0 0 9999px rgba(0,0,0,.55);
border-radius: 8px;
pointer-events: auto;
animation: onb-pulse 1.5s ease-in-out infinite;
}
@keyframes onb-pulse {
0%, 100% { box-shadow: 0 0 0 4px var(--brand), 0 0 0 9999px rgba(0,0,0,.55); }
50% { box-shadow: 0 0 0 8px var(--brand), 0 0 0 9999px rgba(0,0,0,.55); }
}
.onb-popover {
position: absolute;
z-index: 1600;
width: min(380px, calc(100vw - 24px));
background: var(--surface); color: var(--text);
border-radius: 10px;
box-shadow: 0 16px 50px rgba(0,0,0,.4);
padding: 18px 20px;
pointer-events: auto;
animation: onb-pop-in .2s ease both;
}
@keyframes onb-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.onb-pop-title { font-weight: 700; font-size: 16px; color: var(--brand); margin-bottom: 8px; }
.onb-pop-text { line-height: 1.55; font-size: 14px; }
.onb-pop-text code { background: var(--surface-2); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.onb-pop-actions { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
.onb-spacer { flex: 1; }
.onb-pop-actions button {
border: 0; padding: 7px 14px; border-radius: 6px;
font-size: 13px; cursor: pointer;
}
.onb-skip { background: transparent; color: var(--text-soft); }
.onb-skip:hover { color: var(--danger); }
.onb-prev { background: var(--surface-2); color: var(--text); }
.onb-prev:hover { background: var(--border); }
.onb-next { background: var(--brand); color: #fff; font-weight: 600; }
.onb-next:hover { background: var(--brand-dark); }
.onb-progress { display: flex; gap: 4px; justify-content: center; margin-top: 12px; }
.onb-progress span {
width: 18px; height: 4px; border-radius: 2px;
background: var(--border); transition: background .15s;
}
.onb-progress span.active { background: var(--brand); width: 26px; }
/* =================== TRAINING (тренажёр) =================== */
.training-stats { margin-bottom: 22px; padding: 12px 18px; background: var(--surface); border-radius: 8px; border: 1px solid var(--border); }
.training-stats .stats-row { font-size: 13px; }
.training-start h2, .training-start h3 { color: var(--text); margin: 18px 0 12px; font-size: 16px; }
.training-modes {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px; margin-bottom: 8px;
}
.training-mode-card {
background: var(--surface); border: 2px solid var(--border); border-radius: 10px;
padding: 18px 18px 14px; cursor: pointer; text-align: left;
transition: all .15s; color: var(--text); font-family: inherit;
}
.training-mode-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.training-mode-card.active { border-color: var(--brand); background: var(--brand-soft); }
.tm-icon { font-size: 26px; margin-bottom: 6px; }
.tm-title { font-weight: 700; font-size: 15px; color: var(--brand-dark); }
.tm-desc { font-size: 12px; color: var(--text-soft); margin-top: 4px; line-height: 1.4; }
.training-count-pick { display: flex; gap: 8px; margin-bottom: 22px; }
.training-count-pick button {
background: var(--surface); border: 2px solid var(--border); color: var(--text);
padding: 8px 18px; border-radius: 8px; font-weight: 600; cursor: pointer;
font-size: 14px; min-width: 60px;
}
.training-count-pick button.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-large { padding: 12px 28px !important; font-size: 16px !important; }
/* Quiz screen */
.training-quiz-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.training-progress { flex: 1; font-size: 13px; color: var(--text-soft); display: flex; gap: 14px; align-items: center; }
.training-score { margin-left: auto; }
.training-score b { color: var(--brand); }
.training-progress-bar {
height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden;
margin-bottom: 18px;
}
.training-progress-bar > div {
height: 100%; background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%);
width: 0%; transition: width .3s;
}
.training-question {
background: var(--surface); padding: 24px 26px; border-radius: 10px;
border: 1px solid var(--border);
}
.tq-prompt { text-align: center; margin-bottom: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.tq-prompt .tq-cid {
display: inline-block; padding: 14px 28px;
background: var(--brand); color: #fff;
font-size: 32px; font-weight: 700; border-radius: 10px;
letter-spacing: 1px;
}
.tq-snippet {
font-size: calc(15px * var(--font-scale, 1)); line-height: 1.6; color: var(--text);
text-align: left; padding: 4px 0;
}
.tq-question { font-weight: 600; color: var(--text-soft); margin-bottom: 14px; font-size: 14px; }
.tq-answers { display: flex; flex-direction: column; gap: 8px; }
.tq-answer {
background: var(--surface); border: 2px solid var(--border); color: var(--text);
padding: 12px 16px; border-radius: 8px; font: inherit; font-size: 14px;
cursor: pointer; text-align: left;
transition: all .12s;
}
.tq-answer:hover { border-color: var(--brand); }
.tq-answer.correct { background: #e6f7ed; border-color: #27ae60; color: #1f7a3a; }
.tq-answer.wrong { background: #fdecea; border-color: #c0392b; color: #a8281a; }
[data-theme="dark"] .tq-answer.correct { background: #15301f; color: #6fdb95; }
[data-theme="dark"] .tq-answer.wrong { background: #3a1816; color: #ff8b80; }
.tq-feedback {
margin-top: 14px; padding: 10px 14px; border-radius: 6px;
font-size: 14px; line-height: 1.5;
}
.tq-feedback.is-correct { background: var(--brand-soft); color: var(--brand-dark); border-left: 3px solid #27ae60; }
.tq-feedback.is-wrong { background: var(--typo-bg); color: var(--typo-text); border-left: 3px solid var(--danger); }
.tq-feedback .muted { font-weight: normal; opacity: .8; }
.tq-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
/* Result screen */
.training-result {
text-align: center; padding: 50px 20px;
background: var(--surface); border-radius: 12px; border: 1px solid var(--border);
}
.result-icon { font-size: 64px; margin-bottom: 8px; }
.training-result h2 { margin: 0 0 12px; color: var(--brand); }
.result-score { font-size: 32px; color: var(--text); font-weight: 700; }
.result-percent { font-size: 22px; color: var(--brand-dark); margin: 10px 0; }
.training-result p { max-width: 360px; margin: 0 auto 22px; color: var(--text-soft); line-height: 1.6; }
.result-actions { display: flex; gap: 10px; justify-content: center; }
/* =================== GLOSSARY =================== */
.hero-search-mini {
width: 100%; max-width: 480px;
height: 42px; padding: 0 16px;
font-size: 15px;
border: 1px solid var(--border); border-radius: 8px;
background: var(--surface); color: var(--text);
margin-bottom: 22px; outline: none;
transition: border-color .15s;
}
.hero-search-mini:focus { border-color: var(--brand); }
.glossary-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 14px;
}
.glossary-card {
background: var(--surface);
border: 1px solid var(--border); border-radius: 10px;
padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
transition: all .15s;
}
.glossary-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,112,132,.12); }
.glossary-card-head { display: flex; align-items: baseline; gap: 10px; }
.glossary-cid {
background: var(--brand-soft); color: var(--brand-dark);
font-weight: 700; font-size: 13px;
padding: 3px 10px; border-radius: 5px;
flex: 0 0 auto;
}
.glossary-term { margin: 0; font-size: 17px; color: var(--text); font-weight: 600; line-height: 1.3; }
.glossary-def { color: var(--text); line-height: 1.55; font-size: 14px; white-space: pre-wrap; }
.glossary-notes { background: var(--warn-bg); border-left: 3px solid var(--warn-border); padding: 8px 12px; border-radius: 4px; }
.glossary-note { font-size: 12.5px; color: var(--warn-text); margin-bottom: 4px; line-height: 1.5; }
.glossary-note:last-child { margin-bottom: 0; }
.glossary-open {
margin-top: auto;
color: var(--brand); text-decoration: none; font-size: 13px; font-weight: 600;
}
.glossary-open:hover { text-decoration: underline; }
@media (max-width: 600px) {
.glossary-grid { grid-template-columns: 1fr; }
}
/* =================== AUDITS =================== */
.audits-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.audits-list { display: flex; flex-direction: column; gap: 12px; }
.audit-card {
display: block; text-decoration: none; color: inherit;
background: var(--surface); padding: 16px 18px; border-radius: 10px;
border: 1px solid var(--border);
transition: all .15s;
}
.audit-card:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,112,132,.12); }
.audit-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.audit-card-title { font-weight: 700; font-size: 16px; color: var(--text); }
.audit-card-org { color: var(--text-soft); font-size: 13px; margin-bottom: 6px; }
.audit-card-status {
font-size: 11px; padding: 3px 10px; border-radius: 999px;
white-space: nowrap; flex: 0 0 auto;
}
.status-draft.audit-card-status { background: var(--surface-2); color: var(--text-soft); }
.status-completed.audit-card-status { background: #d4f4dd; color: #1f7a3a; }
.status-archived.audit-card-status { background: #ececec; color: #555; }
[data-theme="dark"] .status-completed.audit-card-status { background: #154025; color: #6fdb95; }
[data-theme="dark"] .status-archived.audit-card-status { background: #2a2a2a; color: #aaa; }
.audit-card-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 11px; }
.stat-tag { padding: 2px 8px; border-radius: 4px; background: var(--surface-2); }
.stat-tag.stat-nc { background: #fdecea; color: #a8281a; font-weight: 600; }
.stat-tag.stat-conf { background: #e6f7ed; color: #1f7a3a; }
.stat-tag.stat-na { background: #f2f2f2; color: #777; }
.stat-tag.stat-pending { background: #fff8e1; color: #8a6d00; }
[data-theme="dark"] .stat-tag.stat-nc { background: #3a1816; color: #ff8b80; }
[data-theme="dark"] .stat-tag.stat-conf { background: #15301f; color: #6fdb95; }
[data-theme="dark"] .stat-tag.stat-na { background: #2a2a2a; color: #aaa; }
[data-theme="dark"] .stat-tag.stat-pending { background: #2a2410; color: #ffd966; }
.audit-progress-bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.audit-progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%); transition: width .3s; }
.audit-card-foot { font-size: 11px; color: var(--text-soft); margin-top: 8px; opacity: .7; }
/* === Detail page === */
.audit-header { background: var(--surface); padding: 20px 22px; border-radius: 10px; margin-bottom: 18px; }
.audit-header h1 { margin: 0 0 8px; color: var(--text); font-size: 22px; }
.audit-meta { color: var(--text-soft); font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
.audit-meta .muted { font-family: monospace; opacity: .7; font-size: 11px; }
.audit-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.audit-actions .btn-mini.danger { background: #fdecea; color: #a8281a; border-color: transparent; }
.audit-actions .btn-mini.danger:hover { background: #c0392b; color: #fff; }
.audit-progress { margin-top: 12px; }
.audit-progress-stats { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: 12px; color: var(--text-soft); }
.audit-items { display: flex; flex-direction: column; gap: 12px; }
.audit-item {
background: var(--surface); padding: 14px 16px; border-radius: 8px;
border: 1px solid var(--border); border-left: 4px solid var(--border);
transition: border-left-color .15s;
}
.audit-item.status-conforming { border-left-color: #2ecc71; }
.audit-item.status-nonconforming { border-left-color: #c0392b; background: #fff7f6; }
[data-theme="dark"] .audit-item.status-nonconforming { background: #2a1818; }
.audit-item.status-na { border-left-color: #95a5a6; opacity: .75; }
.audit-item.status-pending { border-left-color: var(--border); }
.audit-item-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.audit-item-cid a {
background: var(--brand-soft); color: var(--brand-dark); font-weight: 700;
padding: 3px 10px; border-radius: 4px; font-size: 13px; text-decoration: none;
}
.audit-item-cid a:hover { background: var(--brand); color: #fff; }
.audit-item-title { font-weight: 600; color: var(--text); flex: 1; }
.audit-item-excerpt { color: var(--text-soft); font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.audit-item-radios { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; font-size: 13px; }
.audit-item-radios label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 3px 8px; border-radius: 4px; }
.audit-item-radios label:hover { background: var(--surface-2); }
.audit-item-radios .radio-conf { color: #1f7a3a; }
.audit-item-radios .radio-nc { color: #a8281a; }
.audit-item-radios .radio-na { color: #777; }
.audit-comment {
width: 100%; resize: vertical; min-height: 50px;
padding: 8px 10px; font-size: 13px; font-family: inherit;
background: var(--surface-2); color: var(--text);
border: 1px solid var(--border); border-radius: 5px;
}
.audit-comment:focus { border-color: var(--brand); outline: none; }
.audit-templates { margin-top: 8px; }
.audit-templates summary { cursor: pointer; font-size: 12px; color: var(--brand); padding: 4px 0; }
.audit-templates summary:hover { color: var(--brand-dark); }
.templates-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.template-btn {
background: var(--brand-soft); color: var(--brand-dark);
border: 0; padding: 5px 10px; border-radius: 4px;
font-size: 12px; cursor: pointer; text-align: left;
}
.template-btn:hover { background: var(--brand); color: #fff; }
/* Модалка */
[hidden] { display: none !important; } /* hidden должен побеждать любые display:flex/block */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.modal-card {
position: relative; background: var(--surface); color: var(--text);
padding: 24px 26px; border-radius: 10px; max-width: 480px; width: 100%;
box-shadow: 0 20px 60px rgba(0,0,0,.3);
display: flex; flex-direction: column; gap: 8px;
}
.modal-card h3 { margin: 0 0 14px; color: var(--brand); font-size: 18px; }
.modal-card label { font-size: 12px; color: var(--text-soft); margin-top: 8px; margin-bottom: 4px; }
.modal-card input, .modal-card select, .modal-card textarea {
height: 38px; padding: 0 12px; font-size: 14px; font-family: inherit;
background: var(--surface-2); color: var(--text);
border: 1px solid var(--border); border-radius: 6px; outline: none;
}
.modal-card textarea { height: auto; padding: 8px 12px; resize: vertical; }
.modal-card input:focus, .modal-card select:focus, .modal-card textarea:focus { border-color: var(--brand); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
/* =================== ADMIN PAGE =================== */
.admin-section { background: var(--surface); border-radius: 10px; padding: 20px 24px; margin-top: 24px; border: 1px solid var(--border); }
.admin-section h2 { margin: 0 0 14px; font-size: 17px; color: var(--text); }
.admin-actions { margin-bottom: 14px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-table th { font-weight: 600; color: var(--text-soft); text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }
.admin-table tbody tr:hover { background: var(--surface-2); }
.role-badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.role-badge.role-admin { background: #ffe082; color: #6b4f00; }
.role-badge.role-auditor { background: var(--brand-soft); color: var(--brand-dark); }
.row-actions { display: flex; gap: 8px; }
[data-theme="dark"] .role-badge.role-admin { background: #4d3f00; color: #ffd966; }
.top-queries { display: flex; flex-direction: column; gap: 8px; }
.topq-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr 50px; gap: 14px; align-items: center; font-size: 13px; }
.topq-text { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topq-bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.topq-fill { height: 100%; background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%); }
.topq-count { text-align: right; font-weight: 600; color: var(--brand); }
.stat-extra { font-size: 11px; color: var(--brand); margin-top: 6px; font-weight: 600; }
/* =================== PRINT MODE =================== */
@media print {
body { background: #fff !important; color: #000 !important; }
.app-header, .topbar, .reader-topbar, .nav, .nav-backdrop, .actions, .my-notes,
.lang-switch, .prefs-controls, .user-box, .hamburger, #search,
.search-results, .dashboard-footer, .admin-section, .quickstats,
.hero, .recent, .sections-grid, .bookmarks-list, .stat-extra,
.reader-nav, .reader-actions, .reader-flash, .reader-search-top { display: none !important; }
#clause-view { box-shadow: none; border: 0; padding: 0; max-width: 100%; background: #fff !important; }
.clause-num, .clause-title { color: #000 !important; }
.clause-body { font-size: 12pt; line-height: 1.5; color: #000 !important; }
.notes { background: #f5f5f5 !important; border-left-color: #888 !important; color: #000 !important; }
.notes h4 { color: #555 !important; }
.refs, .typos { display: none !important; }
.content, .reader-content { padding: 0 !important; overflow: visible !important; }
.app-main, .reader-body { display: block !important; }
.reader-clause { box-shadow: none !important; border: 0 !important; }
}
/* =================== BOOKMARKS PAGE =================== */
.page-h1 { font-size: 26px; font-weight: 700; color: var(--text); margin: 0 0 22px; }
.bookmarks-list { display: flex; flex-direction: column; gap: 10px; }
.bookmark-item {
display: flex; align-items: center; gap: 16px;
background: var(--surface); padding: 14px 18px; border-radius: 8px;
border: 1px solid var(--border);
transition: all .15s;
}
.bookmark-item:hover { border-color: var(--brand); transform: translateX(2px); }
.bm-cid {
background: var(--brand-soft); color: var(--brand-dark);
font-weight: 700; padding: 6px 12px; border-radius: 6px;
font-size: 14px; min-width: 70px; text-align: center;
flex: 0 0 auto;
}
.bm-body { flex: 1; min-width: 0; }
.bm-title { font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.bm-meta { font-size: 12px; color: var(--text-soft); display: flex; gap: 8px; align-items: center; }
.bm-lang { background: var(--surface-2); padding: 2px 8px; border-radius: 3px; font-weight: 600; font-size: 11px; }
.bm-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.bm-actions .btn-mini { text-decoration: none; }
/* =================== MY NOTES =================== */
.my-notes { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.my-notes-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.my-notes-head h4 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-soft); }
.btn-mini {
padding: 5px 12px; font-size: 12px; font-weight: 600;
background: var(--brand-soft); color: var(--brand-dark);
border: 1px solid transparent; border-radius: 5px; cursor: pointer;
transition: all .15s;
}
.btn-mini:hover { background: var(--brand); color: #fff; }
.my-notes-list { display: flex; flex-direction: column; gap: 10px; }
.my-notes-empty { color: var(--text-soft); font-size: 13px; padding: 14px 0; font-style: italic; }
.note-item {
background: var(--surface-2); padding: 12px 14px; border-radius: 6px;
border-left: 3px solid var(--brand);
}
.note-body { white-space: pre-wrap; font-size: calc(14px * var(--font-scale)); line-height: 1.55; color: var(--text); }
.note-meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--text-soft); }
.note-date { margin-right: auto; }
.btn-text { background: transparent; border: 0; color: var(--brand); cursor: pointer; font-size: 12px; padding: 2px 6px; }
.btn-text:hover { text-decoration: underline; }
.btn-text.danger { color: var(--danger); }
.note-editor {
background: var(--surface); padding: 12px; border-radius: 6px;
border: 1px solid var(--brand); display: flex; flex-direction: column; gap: 10px;
}
.note-editor textarea {
width: 100%; resize: vertical; min-height: 80px;
padding: 10px 12px; font-size: 14px; font-family: inherit;
background: var(--surface-2); color: var(--text);
border: 1px solid var(--border); border-radius: 5px; outline: none;
}
.note-editor textarea:focus { border-color: var(--brand); }
.note-editor-actions { display: flex; gap: 8px; }
.note-editor-actions .btn { padding: 6px 14px; font-size: 13px; }
/* =================== PREFS (theme + font size) =================== */
.prefs-controls { display: flex; align-items: center; gap: 10px; }
.font-controls { display: inline-flex; gap: 1px; background: rgba(255,255,255,.15); border-radius: 6px; padding: 2px; }
.font-controls button {
background: transparent; color: #fff; border: 0;
width: 30px; height: 28px; cursor: pointer; border-radius: 4px;
font-size: 12px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
opacity: .85; transition: all .15s;
}
.font-controls button:hover { background: rgba(255,255,255,.2); opacity: 1; }
.font-controls .font-reset { font-size: 13px; }
.theme-toggle {
background: rgba(255,255,255,.15); color: #fff; border: 0;
width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px; transition: background .15s;
position: relative;
}
.theme-toggle:hover { background: rgba(255,255,255,.25); }
.theme-toggle .theme-icon-light { display: inline; }
.theme-toggle .theme-icon-dark { display: none; }
.theme-toggle.is-dark .theme-icon-light { display: none; }
.theme-toggle.is-dark .theme-icon-dark { display: inline; }
/* Тёмная тема: контраст подложки в шапке */
[data-theme="dark"] .login-card { background: var(--surface); color: var(--text); }
[data-theme="dark"] .login-card input { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .login-hint { color: var(--text-soft); }
[data-theme="dark"] .hero-search { box-shadow: 0 8px 28px rgba(0,0,0,.5); }
[data-theme="dark"] .hero-search input { background: var(--surface); color: var(--text); }
[data-theme="dark"] .stat-card,
[data-theme="dark"] .tile,
[data-theme="dark"] #clause-view,
[data-theme="dark"] .search-results { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .search-hit mark { background: #4d3a00; color: #ffe89a; }
[data-theme="dark"] .topbar,
[data-theme="dark"] .app-header { background: linear-gradient(180deg, #0d4955 0%, #0a3a44 100%); }
[data-theme="dark"] .nav .lvl-1 a { background: var(--surface-2); }
@media (max-width: 700px) {
.topbar { flex-wrap: wrap; padding: 10px; gap: 12px; }
.topbar-right { width: 100%; justify-content: space-between; }
.dashboard { padding: 24px 14px; gap: 24px; }
.hero h1 { font-size: 24px; }
.hero-search input { height: 48px; font-size: 15px; }
.hero-search button { height: 48px; padding: 0 18px; }
.quickstats { grid-template-columns: repeat(2, 1fr); }
.stat-num { font-size: 26px; }
.tiles { grid-template-columns: 1fr; }
.brand-title { font-size: 15px; }
.brand-sub { font-size: 11px; }
}
/* =============================================================
HUB (витрина стандартов) — /hub
============================================================= */
.hub-page { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.hub-header {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 28px;
background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.hub-brand { display: flex; align-items: center; gap: 14px; }
.hub-logo { width: 44px; height: 44px; background: #fff; border-radius: 10px; padding: 4px;
box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.hub-title-main { font-size: 17px; font-weight: 700; }
.hub-title-sub { font-size: 12px; opacity: .85; }
.hub-user { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.hub-user-name { font-weight: 600; }
.hub-user-role { background: rgba(255,255,255,.18); padding: 3px 10px; border-radius: 12px;
font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.hub-logout { color: #fff; opacity: .85; padding: 6px; line-height: 0; }
.hub-logout:hover { opacity: 1; }
.hub-main { flex: 1; max-width: 980px; width: 100%; margin: 0 auto; padding: 48px 24px 24px; }
.hub-h1 { color: var(--brand); font-size: 28px; margin: 0 0 10px; }
.hub-p { color: var(--text-soft); font-size: 14px; margin: 0 0 36px; line-height: 1.6; max-width: 720px; }
.hub-grid { display: grid; gap: 16px; }
.hub-loading, .hub-empty { color: var(--text-soft); font-size: 14px; padding: 24px; text-align: center; }
.std-card {
display: flex; align-items: center; gap: 20px;
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; padding: 20px 22px;
text-decoration: none; color: var(--text);
box-shadow: var(--shadow); transition: all .15s;
}
.std-card:hover { border-color: var(--brand); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.std-card.is-disabled { opacity: .55; cursor: not-allowed; }
.std-card.is-disabled:hover { border-color: var(--border); box-shadow: var(--shadow); transform: none; }
.std-card-icon {
flex-shrink: 0; width: 60px; height: 60px;
background: var(--brand-soft); border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
}
.std-card-body { flex: 1; min-width: 0; }
.std-card-code { font-size: 16px; font-weight: 700; color: var(--brand); margin-bottom: 4px; }
.std-card-title { font-size: 14px; color: var(--text); line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; }
.std-card-meta { display: flex; gap: 10px; align-items: center;
font-size: 12px; color: var(--text-soft); margin-top: 8px; }
.std-card-badge { background: var(--warn-bg); color: var(--warn-text);
padding: 2px 8px; border-radius: 8px; font-weight: 600;
font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
border: 1px solid var(--warn-border); }
.std-card-arrow { color: var(--brand); font-size: 24px; opacity: .5; }
.std-card.is-disabled .std-card-arrow { display: none; }
.hub-footer {
margin-top: auto; padding: 28px 4px 8px;
display: flex; justify-content: space-between;
font-size: 12px; color: var(--text-soft);
}
.hub-footer a { color: var(--text-soft); text-decoration: none; }
.hub-footer a:hover { color: var(--brand); }
@media (max-width: 600px) {
.hub-header { padding: 12px 14px; }
.hub-title-main { font-size: 14px; }
.hub-title-sub { font-size: 10px; }
.hub-main { padding: 24px 14px; }
.hub-h1 { font-size: 22px; }
.std-card { padding: 14px; gap: 14px; }
.std-card-icon { width: 48px; height: 48px; font-size: 22px; }
.std-card-code { font-size: 14px; }
.std-card-title { font-size: 13px; }
}
/* =============================================================
READER (минимальная читалка не-iso13485 стандартов)
============================================================= */
.reader-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
/* Старые классы reader-topbar/reader-back использовались до перехода на app-header.
Оставлены для совместимости; новый layout наследует .app-header. */
.reader-topbar { /* совместимость */ }
/* Поиск в топбаре читалки (отдельный стиль т.к. app-header уже занят темой) */
.reader-search-top-wrap { position: relative; flex: 1; max-width: 420px; }
.reader-search-top {
width: 100%; height: 36px; padding: 6px 12px;
border-radius: 8px; border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.16); color: #fff; font-size: 13px;
outline: none;
}
.reader-search-top::placeholder { color: rgba(255,255,255,.7); }
.reader-search-top:focus { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.5); }
/* Live-search dropdown */
.reader-search-top-hits {
position: absolute; top: calc(100% + 4px); left: 0; right: 0;
background: var(--surface); border: 1px solid var(--border);
border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
z-index: 100; max-height: 360px; overflow-y: auto;
}
.reader-hit {
padding: 10px 14px; cursor: pointer;
display: flex; gap: 12px; align-items: baseline;
border-bottom: 1px solid var(--border);
}
.reader-hit:last-child { border-bottom: none; }
.reader-hit:hover { background: var(--brand-soft); }
.reader-hit-num { color: var(--brand); font-weight: 700; min-width: 50px; }
.reader-hit-title { color: var(--text); font-size: 14px; }
.reader-hit-empty { padding: 12px 14px; color: var(--text-soft); font-size: 13px; }
/* Modal: параллельный просмотр языков */
.reader-modal {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center;
}
.reader-modal-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.55);
}
.reader-modal-card {
position: relative; background: var(--surface); color: var(--text);
border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column;
}
.reader-parallel-card { width: 1200px; }
.reader-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.reader-modal-head h3 { margin: 0; font-size: 16px; color: var(--brand); }
.reader-modal-close {
background: transparent; border: 0; font-size: 24px; cursor: pointer;
color: var(--text-soft); padding: 0 8px; line-height: 1;
}
.reader-modal-close:hover { color: var(--text); }
.reader-parallel-cols {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px; padding: 16px 20px; overflow-y: auto;
}
.reader-parallel-col {
background: var(--bg); border: 1px solid var(--border);
border-radius: 8px; padding: 14px;
}
.reader-parallel-lang {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .6px; color: var(--brand);
margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.reader-parallel-col h4 { margin: 0 0 10px; font-size: 15px; color: var(--text); }
.reader-parallel-col .reader-text { font-size: calc(13.5px * var(--font-scale)); }
.reader-parallel-empty { color: var(--text-soft); font-style: italic; font-size: 13px; }
/* Активная кнопка переключателя языков в reader */
.reader-lang-switch button.active {
background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.5);
}
/* Стрелка свёртывания раздела в сайдбаре */
.reader-item-arrow {
display: inline-block; width: 14px; color: var(--text-soft);
font-size: 11px; cursor: pointer; user-select: none;
margin-right: 4px; flex-shrink: 0;
}
.reader-item-arrow:hover { color: var(--brand); }
/* Prev/Next навигация в шапке клуазы */
.reader-prevnext {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 10px 14px; margin: -8px -8px 18px;
border-radius: 8px; background: var(--surface-2);
font-size: calc(13px * var(--font-scale));
}
.reader-prevnext a, .reader-prevnext span {
color: var(--brand); text-decoration: none; font-weight: 600;
padding: 4px 10px; border-radius: 6px;
transition: background .15s;
}
.reader-prevnext a:hover { background: var(--brand-soft); }
.reader-prevnext .disabled { color: var(--text-soft); opacity: .4; cursor: default; }
.reader-prevnext-cur { color: var(--text-soft) !important; font-weight: 400 !important; }
/* Color picker для закладок */
.reader-color-picker {
position: absolute; z-index: 1000;
background: var(--surface); border: 1px solid var(--border);
border-radius: 8px; padding: 6px; display: flex; gap: 6px;
box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.reader-color-picker button {
width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,.15); cursor: pointer; padding: 0;
transition: transform .15s;
}
.reader-color-picker button:hover { transform: scale(1.15); }
/* Цветные состояния закладочной кнопки */
.btn.is-active.color-yellow { background: #f7b500; border-color: #f7b500; color: #fff; }
.btn.is-active.color-red { background: #c0392b; border-color: #c0392b; color: #fff; }
.btn.is-active.color-green { background: #27ae60; border-color: #27ae60; color: #fff; }
.btn.is-active.color-blue { background: #2980b9; border-color: #2980b9; color: #fff; }
/* Плашка для приложений где таблицы доступны только на UZ */
.annex-note {
background: var(--warn-bg);
border-left: 4px solid var(--warn-border);
color: var(--warn-text);
padding: 16px 20px;
border-radius: 6px;
margin: 24px 0;
font-size: calc(14px * var(--font-scale));
line-height: 1.6;
}
.annex-note b { color: var(--brand-dark); display: inline-block; margin-bottom: 4px; }
/* Aggregated view приложений в iso13485 reader (Ilova_A → A.1, A.2, ...) */
.subclauses { margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--border); }
.subclause { padding: 14px 0; border-top: 1px solid var(--border); }
.subclause:first-child { border-top: none; padding-top: 0; }
.subclause-title { display: flex; gap: 10px; align-items: baseline; margin: 8px 0 10px; }
.subclause-num { color: var(--brand); font-weight: 700; flex-shrink: 0; }
.subclause-lvl2 { font-size: calc(18px * var(--font-scale)); color: var(--brand); }
.subclause-lvl3 { font-size: calc(16px * var(--font-scale)); color: var(--text); font-weight: 600; }
.subclause-lvl4 { font-size: calc(14.5px * var(--font-scale)); color: var(--text-soft); font-weight: 600; }
.subclause-body { font-size: calc(14.5px * var(--font-scale)); }
/* Подсветка найденных слов в тексте клуазы */
mark.reader-hl {
background: #fff3a3; color: #1a2832;
padding: 0 2px; border-radius: 2px;
box-shadow: 0 0 0 1px rgba(247, 181, 0, .4);
}
[data-theme="dark"] mark.reader-hl {
background: #7a6300; color: #fff;
box-shadow: 0 0 0 1px rgba(247, 181, 0, .6);
}
/* Плавающая кнопка «Цитата» на выделение текста */
.sel-quote-btn {
position: absolute;
z-index: 10000;
padding: 7px 14px;
background: var(--brand);
color: #fff;
border: none;
border-radius: 18px;
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
box-shadow: 0 3px 12px rgba(0,0,0,.25);
user-select: none;
white-space: nowrap;
transition: transform .12s, filter .12s;
}
.sel-quote-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.sel-quote-btn:active { transform: translateY(0); }
@media print {
.sel-quote-btn { display: none !important; }
}
/* Toast-уведомление */
.reader-flash {
position: fixed; bottom: 24px; right: 24px;
background: var(--brand); color: #fff;
padding: 10px 18px; border-radius: 6px;
z-index: 9999; box-shadow: 0 4px 14px rgba(0,0,0,.2);
font-size: 14px;
animation: reader-flash-in .2s ease;
}
@keyframes reader-flash-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.reader-back, .hub-back-link {
color: #fff; text-decoration: none; font-size: 13px; opacity: .85; padding: 6px 10px;
border-radius: 6px; transition: background .15s, opacity .15s;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
}
.reader-back:hover, .hub-back-link:hover { background: rgba(255,255,255,.2); opacity: 1; }
.reader-title { flex: 1; font-size: 15px; font-weight: 600; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-controls { display: flex; align-items: center; gap: 12px; }
.reader-lang {
background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
color: #fff; font-size: 13px; padding: 6px 10px; border-radius: 6px;
outline: none; cursor: pointer;
}
.reader-lang option { color: #1a2832; background: #fff; }
.reader-body { flex: 1; display: grid; grid-template-columns: 360px 1fr; min-height: 0; }
.reader-nav {
background: var(--surface); border-right: 1px solid var(--border);
display: flex; flex-direction: column; min-height: 0;
}
.reader-search {
margin: 14px; padding: 8px 12px; height: 38px;
border: 1px solid var(--border); border-radius: 8px;
font-size: 13px; outline: none; background: var(--bg); color: var(--text);
}
.reader-search:focus { border-color: var(--brand); }
.reader-list { list-style: none; margin: 0; padding: 0 0 16px; overflow-y: auto; flex: 1; }
.reader-loading, .reader-error { padding: 14px 18px; color: var(--text-soft); font-size: 13px; }
.reader-error { color: var(--danger); }
.reader-item {
padding: 7px 18px; cursor: pointer; display: flex; gap: 10px;
font-size: 13px; line-height: 1.4; border-left: 3px solid transparent;
transition: background .12s, border-color .12s;
}
.reader-item:hover { background: var(--surface-2); }
.reader-item.is-active { background: var(--brand-soft); border-left-color: var(--brand); font-weight: 600; }
.reader-item-num { color: var(--brand); font-weight: 600; flex-shrink: 0; min-width: 48px; }
.reader-item-title { color: var(--text); }
.reader-item.lvl-2 { padding-left: 30px; font-size: 12.5px; }
.reader-item.lvl-2 .reader-item-num { min-width: 56px; }
.reader-item.lvl-3 { padding-left: 44px; font-size: 12px; color: var(--text-soft); }
.reader-item.lvl-3 .reader-item-num { min-width: 64px; }
.reader-item.lvl-4 { padding-left: 60px; font-size: 11.5px; color: var(--text-soft); }
.reader-content { overflow-y: auto; padding: 32px 40px; min-height: 0; }
.reader-placeholder { color: var(--text-soft); font-size: 14px; text-align: center; padding-top: 80px; }
.reader-clause { max-width: 760px; }
.reader-cid { font-size: 12px; color: var(--text-soft); margin-bottom: 6px;
text-transform: uppercase; letter-spacing: .5px; }
.reader-h2 { color: var(--brand); margin: 0 0 18px;
font-size: calc(22px * var(--font-scale)); line-height: 1.3; }
.reader-text { font-size: calc(15px * var(--font-scale)); line-height: 1.7; color: var(--text); }
.reader-text p { margin: 0 0 12px; }
.reader-text p:last-child { margin-bottom: 0; }
.reader-note p { margin: 0 0 6px; }
.reader-note p:last-child { margin-bottom: 0; }
.reader-note { background: var(--warn-bg); color: var(--warn-text);
border-left: 3px solid var(--warn-border);
padding: 10px 14px; margin: 14px 0; font-size: 13px; line-height: 1.55;
border-radius: 0 6px 6px 0; }
.reader-refs { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border);
font-size: 13px; color: var(--text-soft); }
.reader-xref { color: var(--brand); cursor: pointer; text-decoration: underline;
text-decoration-style: dotted; padding: 0 2px; }
.reader-xref:hover { background: var(--brand-soft); }
@media (max-width: 900px) {
/* Сайдбар читалки превращается в выезжающий drawer (как у iso13485) */
.reader-body { grid-template-columns: 1fr; }
.reader-nav {
position: fixed; top: 56px; left: 0; bottom: 0;
width: 86%; max-width: 360px;
z-index: 100;
transform: translateX(-100%);
transition: transform .25s ease;
box-shadow: 4px 0 18px rgba(0,0,0,.18);
max-height: none;
border-right: 1px solid var(--border);
}
.reader-nav.is-open { transform: translateX(0); }
/* Backdrop — общий класс .nav-backdrop уже определён выше; добавим состояние is-active */
.nav-backdrop.is-active { display: block; opacity: 1; pointer-events: auto; }
.reader-content { padding: 20px 16px; }
}
/* Figures (страницы оригинала PDF, отрисованные как картинки) */
.reader-figures-block { margin-top: 28px; padding-top: 18px;
border-top: 2px solid var(--border); }
.reader-figures-head { font-size: 13px; color: var(--text-soft); margin-bottom: 14px;
text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.reader-figures { display: flex; flex-direction: column; gap: 18px; }
.reader-figure { margin: 0; padding: 0; background: var(--surface);
border: 1px solid var(--border); border-radius: 8px;
box-shadow: var(--shadow); overflow: hidden; }
.reader-figure img { display: block; width: 100%; height: auto;
background: #fff; }
.reader-figure figcaption { padding: 8px 14px; font-size: 12px; color: var(--text-soft);
background: var(--surface-2); }
/* Подпункты приложения, отрендеренные inline */
.reader-children { margin-top: 24px; }
.reader-subclause { padding: 14px 0; border-top: 1px solid var(--border); }
.reader-subclause:first-child { border-top: none; }
.reader-h2--lvl2 { font-size: calc(18px * var(--font-scale)); margin: 6px 0 8px; color: var(--brand); }
.reader-h2--lvl3 { font-size: calc(16px * var(--font-scale)); margin: 4px 0 6px; color: var(--text); font-weight: 600; }
.reader-h2--lvl4 { font-size: calc(15px * var(--font-scale)); margin: 4px 0 6px; color: var(--text-soft); font-weight: 600; }
.reader-h2--lvl5 { font-size: calc(14px * var(--font-scale)); margin: 4px 0 6px; color: var(--text-soft); font-weight: 600; }
.reader-h2--lvl6 { font-size: calc(14px * var(--font-scale)); margin: 4px 0 6px; color: var(--text-soft); font-weight: 600; }
/* Заметки и таблицы тоже масштабируются */
.reader-note { font-size: calc(14px * var(--font-scale)); }
.reader-table { font-size: calc(14px * var(--font-scale)); }
/* Таблицы из DOCX */
.reader-tables-block { margin-top: 28px; padding-top: 18px;
border-top: 2px solid var(--border); }
.reader-tables { overflow-x: auto; }
.reader-table { border-collapse: collapse; width: 100%;
font-size: 14px; background: var(--surface);
border: 1px solid var(--border); border-radius: 4px; margin-top: 12px; }
.reader-table td, .reader-table th { border: 1px solid var(--border);
padding: 8px 10px; vertical-align: top;
text-align: left; }
/* Подсветка только для шапки — body-строки остаются белыми. */
.reader-table thead th { background: var(--surface-2); font-weight: 600;
text-align: center; vertical-align: middle; }
/* Fallback: если у таблицы нет , выделяем первую строку . */
.reader-table > tbody > tr:first-child > td:not([colspan]) {
/* без подсветки — оставляем как обычные ячейки */
}
.reader-table-footer-row td { background: var(--surface-2); font-style: italic;
font-size: 0.92em; color: var(--text-soft); }
.reader-annex-subtype { color: var(--text-soft); font-size: 0.95em;
font-style: italic; margin: -8px 0 12px; }
/* Подзаголовки внутри Annex: «C.1 Обучение», «С.2 Опыт работы» */
.reader-subhead { font-size: calc(15px * var(--font-scale)); font-weight: 700;
color: var(--text); margin: 18px 0 8px; }
/* Cover-page (титул ГОСТ Р после Введения) */
.reader-cover-page { text-align: center; margin: 28px 0;
padding: 22px 24px; background: var(--surface-2);
border: 1px solid var(--border); border-radius: 8px; }
.reader-cover-page .cover-line { margin: 4px 0; font-size: 0.95em;
color: var(--text-soft); font-style: italic; }
.reader-cover-page .cover-bold { margin: 8px 0; font-weight: 700;
font-size: 1.05em; letter-spacing: 0.3px; }
/* Ячейки-маркеры (X, X*, X X) — выравниваем по центру */
.reader-table td.reader-table-mark { text-align: center; vertical-align: middle;
font-weight: 600; }
/* Числовые таблицы (D.1) — все ячейки по центру */
.reader-table.reader-table-center-all td,
.reader-table.reader-table-center-all th { text-align: center; vertical-align: middle; }
/* Диагональная ячейка: верхний-правый и нижний-левый текст,
разделённые тонкой диагональной линией. */
.reader-table-diag-cell { position: relative; min-height: 110px;
min-width: 130px; padding: 0 !important;
background: var(--surface-2); }
.reader-table-diag-cell .diag-tr { position: absolute; top: 8px; right: 10px;
font-weight: 600; font-size: 0.92em;
text-align: right; max-width: 60%; }
.reader-table-diag-cell .diag-bl { position: absolute; bottom: 8px; left: 10px;
font-weight: 600; font-size: 0.92em;
text-align: left; max-width: 60%; }
.reader-table-diag-cell .diag-line { position: absolute; inset: 0;
pointer-events: none;
background: linear-gradient(
to top right,
transparent calc(50% - 0.5px),
var(--border) calc(50% - 0.5px),
var(--border) calc(50% + 0.5px),
transparent calc(50% + 0.5px)
); }
.reader-table ul { margin: 0; padding-left: 18px; }
.reader-table ul li { margin: 2px 0; }
/* Подсветка целой колонки таблицы (B.2 «Parts and Services Auditor»). */
.reader-table .reader-table-col-hl { background: rgba(120, 168, 220, .18); }
.reader-table th.reader-table-col-hl { background: rgba(120, 168, 220, .28); }
/* Закладка + заметки */
.reader-actions { display: flex; gap: 10px; margin: 24px 0 12px; flex-wrap: wrap; }
.reader-bm-btn, .reader-note-btn {
background: var(--surface); border: 1px solid var(--border);
color: var(--text); padding: 8px 16px; border-radius: 8px;
font-size: 13px; cursor: pointer; transition: all .12s;
}
.reader-bm-btn:hover, .reader-note-btn:hover {
border-color: var(--brand); color: var(--brand);
}
.reader-bm-btn.is-active {
background: var(--brand); color: #fff; border-color: var(--brand);
}
.reader-notes { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.reader-note-item {
background: var(--brand-soft); border: 1px solid var(--border);
border-left: 3px solid var(--brand);
border-radius: 0 6px 6px 0; padding: 10px 14px;
}
.reader-note-body { font-size: 14px; color: var(--text); white-space: pre-wrap; line-height: 1.5; }
.reader-note-meta { display: flex; justify-content: space-between; align-items: center;
margin-top: 6px; font-size: 11px; color: var(--text-soft); }
.reader-note-meta button {
background: none; border: 0; color: var(--danger); cursor: pointer;
font-size: 11px; padding: 2px 6px; border-radius: 4px;
}
.reader-note-meta button:hover { background: rgba(192,57,43,.08); }
.reader-note-editor {
background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
padding: 10px;
}
.reader-note-editor textarea {
width: 100%; border: 1px solid var(--border); border-radius: 4px;
padding: 8px; font-family: inherit; font-size: 13px; resize: vertical;
background: var(--bg); color: var(--text); outline: none; box-sizing: border-box;
}
.reader-note-editor textarea:focus { border-color: var(--brand); }
.reader-note-edit-actions { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; }
.reader-note-edit-actions button {
padding: 6px 14px; border-radius: 6px; font-size: 13px; cursor: pointer;
border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.reader-note-edit-actions button[data-act="save"] {
background: var(--brand); color: #fff; border-color: var(--brand);
}
/* ============ ABOUT-STANDARD page ============ */
.about-page { background: var(--bg); min-height: 100vh; }
.about-main {
max-width: 880px; margin: 0 auto; padding: 24px 20px 60px;
font-size: calc(15px * var(--font-scale, 1));
}
.about-title {
margin: 4px 0 20px; font-size: 28px; font-weight: 700; color: var(--brand);
letter-spacing: -0.02em;
}
.about-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; padding: 20px 22px; margin: 0 0 18px;
box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.about-card h2 {
margin: 0 0 14px; font-size: 18px; font-weight: 600;
color: var(--text); border-bottom: 2px solid var(--brand);
padding-bottom: 8px; display: inline-block;
}
.about-note {
margin: 0 0 14px; color: var(--text-muted); font-size: 14px; line-height: 1.5;
}
.about-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.about-table th, .about-table td {
padding: 10px 12px; text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: top; line-height: 1.5;
}
.about-table th {
width: 200px; color: var(--text-muted); font-weight: 500; background: transparent;
}
.about-table tr:last-child th, .about-table tr:last-child td { border-bottom: 0; }
.verb-table thead th {
width: auto; background: var(--surface-2, rgba(0,0,0,.03));
font-weight: 600; color: var(--text); border-bottom: 2px solid var(--border);
}
.verb-table td:nth-child(1), .verb-table td:nth-child(2), .verb-table td:nth-child(3) {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
white-space: nowrap; width: 110px;
}
.badge-idt {
display: inline-block; padding: 2px 8px; margin-left: 6px;
font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
background: var(--brand); color: #fff; border-radius: 10px;
vertical-align: middle;
}
.about-structure { list-style: none; margin: 0; padding: 0; }
.about-section-item {
display: flex; gap: 14px; padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.about-section-item:last-child { border-bottom: 0; }
.about-section-id {
flex: 0 0 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--brand); color: #fff;
border-radius: 8px; font-weight: 700; font-size: 15px;
}
.about-section-text { flex: 1; line-height: 1.5; }
.about-section-text b { display: block; margin-bottom: 4px; color: var(--text); }
.about-section-summary { color: var(--text-muted); font-size: 14px; }
.about-applic {
margin: 0; line-height: 1.6; color: var(--text);
background: var(--surface-2, rgba(0,112,132,.05));
border-left: 3px solid var(--brand); padding: 12px 16px;
border-radius: 0 6px 6px 0;
}
.about-foot { margin-top: 28px; text-align: center; }
.about-foot .btn {
display: inline-block; padding: 10px 20px;
background: var(--brand); color: #fff; border: 0; border-radius: 8px;
text-decoration: none; font-weight: 500; font-size: 14px; cursor: pointer;
}
.about-foot .btn:hover { background: var(--brand-dark, #005662); }
.about-error {
background: #fdecea; color: #c0392b; padding: 14px 18px;
border-radius: 8px; border-left: 3px solid #c0392b;
}
/* Маленькая ссылка «📚 Стандарт haqida» в шапке */
.about-link {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 10px; border-radius: 6px;
background: rgba(255,255,255,.08); color: rgba(255,255,255,.92);
text-decoration: none; font-size: 13px; font-weight: 500;
transition: background .15s;
white-space: nowrap;
}
.about-link:hover { background: rgba(255,255,255,.16); }
.about-link-icon { padding: 6px 8px; font-size: 16px; }
@media (max-width: 700px) {
.about-main { padding: 16px 12px 40px; }
.about-card { padding: 16px 14px; }
.about-title { font-size: 22px; }
.about-table th { width: auto; display: block; padding-bottom: 2px; }
.about-table td { display: block; padding-top: 2px; padding-bottom: 12px; }
.verb-table thead { display: none; }
.verb-table td { display: inline-block; width: auto; padding: 2px 6px; }
.verb-table tr {
display: block; padding: 12px 0; border-bottom: 1px solid var(--border);
}
.verb-table td:nth-child(4) { display: block; padding-top: 6px; color: var(--text-muted); }
}
/* ============ Clause edit modal (admin only) ============ */
.btn-edit {
background: #b8460e !important; color: #fff !important; border-color: #b8460e !important;
}
.btn-edit:hover { background: #963608 !important; }
.btn-ai {
background: #6c4ad6 !important; color: #fff !important; border-color: #6c4ad6 !important;
}
.btn-ai:hover { background: #5638b5 !important; }
/* Inline ✏ chip рядом с заголовком подпункта в агрегированном виде (admin) */
.reader-edit-chip {
background: #b8460e; color: #fff; border: 0;
padding: 2px 8px; border-radius: 5px;
font-size: 0.7em; cursor: pointer;
margin-left: 8px; vertical-align: middle;
opacity: 0.65; transition: opacity .15s;
}
.reader-edit-chip:hover { opacity: 1; background: #963608; }
/* Многократные примечания: один заголовок «Примечания» + нумерованный список */
.reader-note-multi { padding: 12px 16px; }
.reader-note-multi .reader-note-header { margin: 0 0 8px; }
.reader-note-list {
list-style: none; padding-left: 0; margin: 0;
counter-reset: reader-note-counter;
}
.reader-note-list li {
display: flex; gap: 8px; padding: 4px 0;
align-items: flex-start;
}
.reader-note-num {
flex: 0 0 auto;
font-weight: 600; color: var(--brand);
min-width: 18px;
}
.clause-edit-modal {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
}
.clause-edit-modal .modal-backdrop {
position: absolute; inset: 0; background: rgba(0,0,0,.55);
}
.clause-edit-card {
position: relative; background: var(--surface); color: var(--text);
width: min(880px, 96vw); max-height: 92vh; overflow: auto;
border-radius: 12px; padding: 22px 24px;
box-shadow: 0 30px 80px rgba(0,0,0,.45);
border: 1px solid var(--border);
}
.clause-edit-card h3 {
margin: 0 0 16px; font-size: 18px;
border-bottom: 2px solid var(--brand); padding-bottom: 8px;
}
.clause-edit-card code {
background: rgba(0,112,132,.15); color: var(--brand);
padding: 2px 8px; border-radius: 4px; font-weight: 600;
}
.ce-row { margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.ce-row label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.ce-row input, .ce-row textarea {
width: 100%; padding: 9px 12px; border-radius: 6px;
border: 1px solid var(--border); background: var(--bg); color: var(--text);
font-size: 14px; font-family: inherit; box-sizing: border-box; outline: none;
resize: vertical; line-height: 1.55;
}
.ce-row input:focus, .ce-row textarea:focus { border-color: var(--brand); }
.ce-row textarea { min-height: 220px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; }
.ce-hint {
font-size: 12px; color: var(--text-muted); line-height: 1.5;
margin: 4px 0 14px; background: rgba(0,112,132,.06);
padding: 8px 12px; border-left: 3px solid var(--brand); border-radius: 0 4px 4px 0;
}
.ce-hint a { color: var(--brand); }
.clause-edit-card .modal-actions {
display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px;
}
.clause-edit-card .btn {
padding: 8px 18px; border-radius: 6px; font-size: 14px; cursor: pointer;
border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.clause-edit-card .btn.primary {
background: var(--brand); color: #fff; border-color: var(--brand);
}
.clause-edit-card .btn.primary:hover { background: var(--brand-dark, #005662); }
.ce-status {
margin-top: 10px; min-height: 18px; font-size: 13px; color: var(--text-muted);
text-align: right;
}
/* Журнал правок в /admin */
.edits-filters {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
margin: 10px 0 14px;
}
.edits-filters select, .edits-filters .btn {
padding: 6px 12px; border-radius: 6px;
border: 1px solid var(--border); background: var(--surface); color: var(--text);
font-size: 13px;
}
.edit-filter-active { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.edits-table {
width: 100%; border-collapse: collapse; font-size: 12.5px;
background: var(--surface); border-radius: 8px; overflow: hidden;
border: 1px solid var(--border);
}
.edits-table th, .edits-table td {
padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border);
vertical-align: top;
}
.edits-table th { background: var(--surface-2, rgba(0,0,0,.04)); font-weight: 600; }
.edits-table tr:last-child td { border-bottom: 0; }
.edits-table tr.is-reverted { opacity: .55; }
.edits-table .edit-date { white-space: nowrap; color: var(--text-muted); }
.edits-table code {
font-size: 11.5px; background: rgba(0,112,132,.12);
padding: 1px 6px; border-radius: 3px;
}
.edits-table .edit-old { color: #c0392b; max-width: 280px; }
.edits-table .edit-new { color: #1f8d3a; max-width: 280px; }
.edit-status-rev {
font-size: 11px; color: var(--text-muted); font-style: italic;
}
.admin-hint {
font-size: 13px; color: var(--text-muted); line-height: 1.5;
margin: 4px 0 10px;
}
/* ============ AI Assistant: floating button + drawer ============ */
.ai-fab {
position: fixed;
bottom: 22px; right: 22px;
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #007084 0%, #005662 100%);
color: #fff;
border: 0;
font-size: 26px;
cursor: pointer;
box-shadow: 0 6px 24px rgba(0, 112, 132, .35), 0 2px 6px rgba(0,0,0,.15);
z-index: 9000;
transition: transform .2s, box-shadow .2s;
display: flex; align-items: center; justify-content: center;
}
.ai-fab:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(0,112,132,.45); }
.ai-fab:active { transform: scale(0.96); }
@media print {
.ai-fab, .ai-drawer { display: none !important; }
}
.ai-drawer {
position: fixed; inset: 0; z-index: 9100;
pointer-events: none;
}
.ai-drawer.is-open { pointer-events: auto; }
.ai-drawer-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.32);
opacity: 0; transition: opacity .25s;
}
.ai-drawer.is-open .ai-drawer-backdrop { opacity: 1; }
.ai-drawer-panel {
position: absolute;
top: 0; right: 0; bottom: 0;
width: 440px; max-width: 100vw;
background: var(--surface); color: var(--text);
display: flex; flex-direction: column;
box-shadow: -8px 0 30px rgba(0,0,0,.18);
transform: translateX(100%);
transition: transform .25s ease-out;
border-left: 1px solid var(--border);
}
.ai-drawer.is-open .ai-drawer-panel { transform: translateX(0); }
.ai-drawer-header {
display: flex; align-items: flex-start;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
gap: 12px;
background: linear-gradient(135deg, rgba(0,112,132,.08), rgba(0,112,132,.02));
}
.ai-drawer-title { flex: 1; min-width: 0; }
.ai-drawer-h { font-size: 16px; font-weight: 700; color: var(--brand); }
.ai-drawer-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ai-close {
background: transparent; border: 0; cursor: pointer;
font-size: 20px; line-height: 1; padding: 4px 8px;
color: var(--text-muted); border-radius: 6px;
}
.ai-close:hover { background: var(--border); color: var(--text); }
.ai-drawer-meta {
display: flex; gap: 8px; flex-wrap: wrap;
padding: 8px 18px; border-bottom: 1px solid var(--border);
background: var(--surface);
}
.ai-quota-pill, .ai-context-pill {
font-size: 11px; padding: 3px 9px; border-radius: 10px;
background: rgba(0,112,132,.12); color: var(--brand);
font-weight: 600;
}
.ai-quota-pill.ai-quota-empty { background: #fce8e6; color: #c0392b; }
.ai-quota-pill.ai-quota-disabled { background: #f5e6cb; color: #b8460e; }
/* Кнопка «Новый диалог» — справа от пиллов */
.ai-new-chat-btn {
margin-left: auto;
font-size: 11px;
padding: 4px 10px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-soft);
cursor: pointer;
font-family: inherit;
font-weight: 500;
transition: all .12s;
}
.ai-new-chat-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.ai-messages {
flex: 1; overflow-y: auto;
padding: 16px 14px; display: flex; flex-direction: column; gap: 10px;
background: var(--bg);
}
.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-assistant { justify-content: flex-start; }
.ai-bubble {
max-width: 88%; padding: 10px 14px;
border-radius: 14px;
line-height: 1.5; font-size: 14px;
word-wrap: break-word;
}
.ai-bubble-user {
background: var(--brand); color: #fff;
border-bottom-right-radius: 4px;
}
.ai-bubble-assistant {
background: var(--surface); color: var(--text);
border: 1px solid var(--border);
border-bottom-left-radius: 4px;
}
.ai-msg-error .ai-bubble-assistant {
background: #fdecea; color: #8b2820; border-color: #e6c4be;
}
.ai-msg-thinking .ai-bubble {
font-style: italic; color: var(--text-muted);
}
.ai-spinner {
display: inline-block; width: 12px; height: 12px;
border: 2px solid var(--text-muted); border-top-color: transparent;
border-radius: 50%; animation: ai-spin .8s linear infinite;
margin-right: 6px; vertical-align: middle;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
/* Markdown в AI-ответах */
.ai-md-h {
font-weight: 700;
color: var(--brand);
margin: 10px 0 6px 0;
line-height: 1.3;
}
.ai-md-h1 { font-size: 1.15em; }
.ai-md-h2 { font-size: 1.08em; }
.ai-md-h3 { font-size: 1em; color: var(--text); }
.ai-md-h4 { font-size: 0.98em; color: var(--text); }
.ai-md-h5 { font-size: 0.95em; color: var(--text-soft); }
.ai-md-h6 { font-size: 0.92em; color: var(--text-soft); }
.ai-md-hr {
border: none;
border-top: 1px solid var(--border);
margin: 12px 0;
}
.ai-md-table {
border-collapse: collapse;
margin: 10px 0;
width: 100%;
font-size: 0.93em;
background: var(--surface);
}
.ai-md-table th,
.ai-md-table td {
border: 1px solid var(--border);
padding: 5px 9px;
text-align: left;
vertical-align: top;
line-height: 1.4;
}
.ai-md-table th {
background: rgba(0,112,132,.10);
color: var(--brand);
font-weight: 700;
}
.ai-md-table tbody tr:nth-child(even) td {
background: rgba(0,0,0,.02);
}
.ai-md-list {
margin: 6px 0 6px 0;
padding-left: 22px;
}
.ai-md-list li {
margin: 3px 0;
line-height: 1.5;
}
.ai-md-quote {
margin: 8px 0;
padding: 6px 12px;
border-left: 3px solid var(--brand);
background: rgba(0,112,132,.06);
font-style: italic;
color: var(--text-soft);
}
.ai-bubble code {
background: var(--surface-2);
border-radius: 3px;
padding: 1px 5px;
font-family: ui-monospace, "SF Mono", Consolas, monospace;
font-size: 0.92em;
}
.ai-bubble strong { font-weight: 700; }
.ai-bubble em { font-style: italic; }
/* Мигающий курсор в конце стримящегося ответа */
.ai-stream-cursor {
display: inline-block;
width: 8px; height: 1em;
background: currentColor;
margin-left: 2px;
vertical-align: text-bottom;
opacity: .7;
animation: ai-cursor-blink 1s steps(2) infinite;
}
@keyframes ai-cursor-blink { 50% { opacity: 0; } }
.ai-citation {
display: inline-block;
background: rgba(0,112,132,.18); color: var(--brand);
padding: 1px 6px; border-radius: 4px;
font-weight: 600; text-decoration: none;
font-size: 0.95em; white-space: nowrap;
}
.ai-citation:hover { background: var(--brand); color: #fff; }
.ai-input-row {
display: flex; gap: 8px;
padding: 12px 14px;
border-top: 1px solid var(--border);
background: var(--surface);
}
.ai-input-row textarea {
flex: 1; padding: 9px 12px;
border: 1px solid var(--border); border-radius: 10px;
background: var(--bg); color: var(--text);
font-family: inherit; font-size: 14px;
resize: none; outline: none;
line-height: 1.4; min-height: 38px; max-height: 120px;
}
.ai-input-row textarea:focus { border-color: var(--brand); }
.ai-send {
background: var(--brand); color: #fff;
border: 0; border-radius: 10px;
padding: 0 18px; font-size: 14px; font-weight: 600;
cursor: pointer; min-width: 80px;
}
.ai-send:hover:not(:disabled) { background: var(--brand-dark, #005662); }
.ai-send:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 600px) {
.ai-drawer-panel { width: 100vw; }
.ai-fab { bottom: 16px; right: 16px; width: 50px; height: 50px; font-size: 22px; }
.ai-bubble { max-width: 92%; font-size: 14.5px; }
}