* { box-sizing: border-box; }
body { font: 14px/1.45 -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; color: #1c2430; background: #f5f6f8; }
a { color: #2563c9; text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: #8a93a0; }
.small { font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Шапка: три зоны — логотип (слева) · меню (растягивается) · пользователь (справа). */
.nav { display: flex; align-items: center; gap: 24px; background: #1c2430; color: #fff; padding: 0 20px; min-height: 50px; }
.nav .brand { font-weight: 700; color: #fff; font-size: 15px; white-space: nowrap; }
.nav .brand:hover { text-decoration: none; }

/* Меню занимает свободное место между логотипом и блоком пользователя. */
.navmenu { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; }
.navmenu a { color: #cdd4dd; padding: 7px 12px; border-radius: 6px; white-space: nowrap;
             transition: color .15s ease, background .15s ease; }
.navmenu a:hover { color: #fff; background: rgba(255, 255, 255, .07); text-decoration: none; }
/* Активная страница: светлее + плашка + тонкое акцентное подчёркивание. */
.navmenu a.active { color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 -2px 0 #2563c9; }

/* Блок пользователя справа: имя·роль приглушены, «выйти» — явная кнопка. */
.navuser { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.navuser .who { color: #8a93a0; font-size: 13px; }
.navuser .logout { color: #cdd4dd; border: 1px solid #3a4656; padding: 5px 12px; border-radius: 6px;
                   transition: color .15s ease, background .15s ease, border-color .15s ease; }
.navuser .logout:hover { color: #fff; background: rgba(255, 255, 255, .08); border-color: #5a6878; text-decoration: none; }

.wrap { max-width: 1200px; margin: 22px auto; padding: 0 20px; }
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 24px 0 8px; }
section { margin-bottom: 30px; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.filters input[type=text], .filters input[name=q], .filters select { padding: 7px 9px; border: 1px solid #cdd4dd; border-radius: 6px; }
.filters input[name=q] { min-width: 300px; }
button { padding: 7px 16px; border: 0; border-radius: 6px; background: #2563c9; color: #fff; cursor: pointer; }
button:hover { background: #1d50a8; }

table.grid, table.compare { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.grid th, .grid td, .compare th, .compare td { padding: 8px 11px; border-bottom: 1px solid #eef0f3; text-align: left; vertical-align: top; }
.grid thead th { background: #fafbfc; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #6b7480; }
.grid tbody tr:hover { background: #f8fafd; }

.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; background: #e9edf2; color: #51606f; margin-right: 4px; }
.tag.warn { background: #fde7c9; color: #8a5a12; }
.tag.ok-tag { background: #e7f6ec; color: #1d7a3e; }

.reconcile-bar { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 8px;
  background: #fff7ea; border: 1px solid #f0dcb8; margin-bottom: 16px; }
.reconcile-bar.done { background: #e7f6ec; border-color: #b8e3c6; }
.reconcile-bar span { flex: 1; }
button.ghost { background: #fff; color: #51606f; border: 1px solid #cdd4dd; }
button.ghost:hover { background: #f1f3f6; }

.tag.vtag { background: #e6edfb; color: #2b4c8c; }

/* переключатель вариантов (цвет люверса) */
.variants { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.variants .vlabel { color: #6b7480; margin-right: 4px; }
.swatch { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 18px;
  background: #fff; border: 1px solid #cdd4dd; color: #1c2430; }
.swatch:hover { text-decoration: none; border-color: #2563c9; }
.swatch.active { background: #2563c9; color: #fff; border-color: #2563c9; }
.sw-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); display: inline-block; }
.sw-1 { background: linear-gradient(135deg,#e8e8e8,#bdbdbd); }      /* хром */
.sw-3 { background: linear-gradient(135deg,#cfcfcf,#9a9a9a); }      /* матовый хром */
.sw-6 { background: linear-gradient(135deg,#e8d28a,#b8932f); }      /* матовое золото */
.sw-9 { background: linear-gradient(135deg,#b9824d,#7a4a22); }      /* бронзовый */
.sw-2, .sw-na { background: repeating-linear-gradient(45deg,#eee,#eee 3px,#ccc 3px,#ccc 6px); }

/* вопросы */
.qadd { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.qadd textarea { flex: 1; padding: 8px 10px; border: 1px solid #cdd4dd; border-radius: 6px; font: inherit; }
.qadd select { padding: 8px; border: 1px solid #cdd4dd; border-radius: 6px; }
.qans { display: flex; gap: 6px; }
.qans input { padding: 5px 8px; border: 1px solid #cdd4dd; border-radius: 5px; }
tr.qanswered { opacity: .62; }

/* финансы */
.finperiod { background: #fff; border-radius: 8px; padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.finhead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.finhead h2 { margin: 0; font-size: 17px; }
.finprofit { font-size: 15px; background: #e7f6ec; color: #1d7a3e; padding: 6px 14px; border-radius: 8px; }
.finprofit.neg { background: #fdecea; color: #c0392b; }
.fingrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 14px; }
.finbox h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #6b7480; margin: 0 0 6px; }
.finbox.recon { background: #fbfcfe; border: 1px solid #e8edf4; border-radius: 8px; padding: 10px 12px; }
table.kv { width: 100%; border-collapse: collapse; }
/* Горизонтальный padding ОБЯЗАТЕЛЕН: без него в 3+-колоночных таблицах (синхронизации,
   «по пользователям») значения соседних колонок слипаются («не запускалосьнет загрузчика»,
   «31 мтолько что»). 12px по бокам = ≥24px зазор между колонками. */
table.kv td, table.kv th { padding: 8px 12px; border-bottom: 1px solid #f1f3f6; vertical-align: top; }
table.kv th { color: #6b7480; font-weight: 600; font-size: 12px; }
/* крайние ячейки — заподлицо с краями секции (для обычных 2-колоночных key-value таблиц) */
table.kv td:first-child, table.kv th:first-child { padding-left: 0; }
table.kv td:last-child,  table.kv th:last-child  { padding-right: 0; }
table.kv tr.strong td { font-weight: 700; border-top: 1px solid #cdd4dd; }
table.kv .num { text-align: right; font-variant-numeric: tabular-nums; }
table.kv .num.neg { color: #c0392b; }

.pager { display: flex; gap: 14px; align-items: center; margin-top: 16px; }

.login { max-width: 320px; margin: 8vh auto; background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.login h1 { margin: 0 0 2px; }
.login form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.login input { padding: 9px 11px; border: 1px solid #cdd4dd; border-radius: 6px; }
.error { color: #c0392b; }

.cardtop { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.canon { background: #fff; padding: 14px 18px; border-radius: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; flex: 1; min-width: 280px; }
.cost { background: #fff; padding: 14px 18px; border-radius: 8px; min-width: 220px; }
.cost-main { font-size: 26px; font-weight: 700; }

.subnav { display: flex; gap: 6px; margin: 0 0 18px; }
.subnav a { padding: 6px 14px; border-radius: 6px; background: #fff; color: #51606f; }
.subnav a.active { background: #2563c9; color: #fff; }
.ok { color: #1d7a3e; background: #e7f6ec; padding: 9px 12px; border-radius: 6px; }
.grid.narrow { max-width: 380px; }
.grid input { width: 110px; padding: 6px 8px; border: 1px solid #cdd4dd; border-radius: 5px; text-align: right; }
code { background: #eef0f3; padding: 1px 5px; border-radius: 4px; }

.compare th:first-child { width: 150px; color: #6b7480; font-weight: 600; }
.compare thead th { background: #fafbfc; }
.compare tr.divergent { background: #fff6e9; }
.compare tr.divergent td { font-weight: 600; }

/* каталог: фасеты + результаты */
.catalog { display: flex; gap: 20px; align-items: flex-start; }
.facets { width: 230px; flex: none; background: #fff; border-radius: 8px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.facets .fsearch { width: 100%; padding: 7px 9px; border: 1px solid #cdd4dd; border-radius: 6px; margin-bottom: 12px; }
.facet { margin-bottom: 16px; }
.facet h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #6b7480; margin: 0 0 6px; }
.facet label { display: flex; align-items: center; gap: 7px; padding: 2px 0; cursor: pointer; }
.facet label .muted { margin-left: auto; font-size: 12px; }
.facets button { width: 100%; margin-top: 4px; }
.clearf { display: block; text-align: center; margin-top: 8px; font-size: 13px; }
.results { flex: 1; min-width: 0; }

.toolbar { display: flex; align-items: center; margin-bottom: 12px; }
.toolbar .spacer { flex: 1; }
.viewtoggle button { background: #fff; color: #51606f; border: 1px solid #cdd4dd; padding: 6px 12px; }
.viewtoggle button:first-child { border-radius: 6px 0 0 6px; }
.viewtoggle button:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.viewtoggle button.active { background: #2563c9; color: #fff; border-color: #2563c9; }

.cthumb { width: 46px; }
.cthumb img { width: 42px; height: 42px; object-fit: cover; border-radius: 5px; display: block; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.tile { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06); display: flex; flex-direction: column; color: inherit; }
.tile:hover { box-shadow: 0 3px 10px rgba(0,0,0,.12); text-decoration: none; }
.tile .thumb { aspect-ratio: 3/4; background: #eef0f3; display: flex; align-items: center; justify-content: center; }
.tile .thumb img { width: 100%; height: 100%; object-fit: cover; }
.tile .noimg { color: #aab2bd; font-size: 13px; }
.tile .tname { padding: 8px 10px 2px; font-size: 13px; min-height: 38px; }
.tile .tmeta { padding: 0 10px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; color: #8a93a0; font-size: 12px; }
.tile .tcost { padding: 6px 10px 10px; font-weight: 700; }

/* галерея в карточке */
td.media { width: 220px; }
.media .mainimg img { width: 150px; height: 200px; object-fit: cover; border-radius: 6px; display: block; }
.media .gallery { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; align-items: center; }
.media .gallery img { width: 38px; height: 38px; object-fit: cover; border-radius: 4px; }
.media .more { color: #8a93a0; font-size: 12px; }
.media .video { display: inline-block; margin-top: 6px; font-weight: 600; }

/* редактируемые техкарты */
table.cards input.ci { width: 78px; padding: 5px 6px; border: 1px solid #cdd4dd; border-radius: 5px; text-align: right; }
table.cards input.o { width: 70px; background: #fffdf5; }
table.cards td { padding: 5px 8px; }
.savebar { position: sticky; bottom: 0; background: #f5f6f8; padding: 12px 0; display: flex; gap: 12px; align-items: center; }