/* ============================================================
   Каталог — общая тема (vanilla CSS поверх Bootstrap 5)
   Подключать ПОСЛЕ bootstrap.min.css
   ============================================================ */

:root{
  /* поверхности и линии */
  --bg:#EEF0F3; --surface:#FFFFFF; --surface-2:#F4F6F9; --head:#F7F8FA; --alt:#FBFCFD;
  --track:#EEF1F5; --line:#E1E5EC; --line-2:#E6E9EF; --line-soft:#EDEFF3; --chip:#F1F3F6;
  /* текст */
  --ink:#1B2230; --ink-strong:#3B4252; --ink-2:#5A6475; --ink-3:#6B7588; --mut:#8B95A6; --mut-2:#A7AEBC; --mut-3:#B6BDC9;
  /* акценты */
  --accent:#4C5BD4; --accent-soft:#EEF0FC; --accent-ink:#3A47B5; --accent-hov:#3F4CC0;
  --teal:#0E8E83; --teal-soft:#E6F4F2; --teal-ink:#0B6B63; --teal-border:#CDE8E4;
  --ai:#6D54E8; --ai-soft:#EEEBFC;
  --ok:#1E9E5A; --ok-soft:#E6F6EE; --warn:#C9821B; --warn-soft:#FBF1DC; --err:#D64545; --err-soft:#FBE5E5;
  --violet:#7C3AED; --violet-soft:#F1EAFE; --orange:#D9730D; --orange-soft:#FBEEDD;
  --sel:#E9F0FE; --sel-border:#2F6BE0; --fill:#EAF2FF;
  /* радиусы / тени */
  --r-sm:7px; --r-md:10px; --r-lg:14px; --r-pill:20px;
  --sh-card:0 1px 2px rgba(20,30,60,.06); --sh-pop:0 18px 44px rgba(15,22,45,.18);
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* перекраска Bootstrap */
  --bs-primary:#4C5BD4; --bs-primary-rgb:76,91,212;
  --bs-body-color:#1B2230; --bs-body-bg:#EEF0F3;
  --bs-body-font-family:var(--font-sans);
  --bs-border-color:#E1E5EC;
  --bs-secondary-color:#8B95A6;
  --bs-link-color:#3A47B5; --bs-link-hover-color:#2C3795;
  --bs-font-monospace:var(--font-mono);
}

*{ -webkit-font-smoothing:antialiased; }
body{ background:var(--bg); color:var(--ink); font-family:var(--font-sans); }

/* ---- кнопки ---- */
.btn{ --bs-btn-font-weight:600; --bs-btn-font-size:.82rem; border-radius:var(--r-md); white-space:nowrap; }
.btn-sm{ --bs-btn-font-size:.78rem; border-radius:var(--r-sm); }
.btn-primary{
  --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:var(--accent-hov); --bs-btn-hover-border-color:var(--accent-hov);
  --bs-btn-active-bg:var(--accent-hov); --bs-btn-active-border-color:var(--accent-hov);
  --bs-btn-disabled-bg:var(--accent); --bs-btn-disabled-border-color:var(--accent);
}
.btn-outline-secondary{
  --bs-btn-color:var(--ink-2); --bs-btn-border-color:var(--line);
  --bs-btn-hover-bg:var(--surface-2); --bs-btn-hover-border-color:var(--line); --bs-btn-hover-color:var(--ink);
  --bs-btn-active-bg:var(--surface-2); --bs-btn-active-color:var(--ink); --bs-btn-active-border-color:var(--line);
}
.btn-soft{ background:var(--accent-soft); color:var(--accent-ink); border:1px solid transparent; }
.btn-soft:hover{ background:#E4E8FB; color:var(--accent-ink); }
.btn-teal{ background:var(--teal); color:#fff; } .btn-teal:hover{ background:var(--teal-ink); color:#fff; }
.btn-ai{ background:var(--ai); color:#fff; } .btn-ai:hover{ background:#5B45D0; color:#fff; }

/* ---- карточки ---- */
.card{ --bs-card-border-color:var(--line-2); --bs-card-border-radius:var(--r-lg); --bs-card-bg:var(--surface); box-shadow:var(--sh-card); }
.card-soft{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); }

/* ---- шапка приложения ---- */
.app-header{ height:52px; min-height:52px; flex:0 0 52px; background:var(--surface); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; padding:0 18px; position:sticky; top:0; z-index:1030; }
.app-logo{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; color:var(--ink); text-decoration:none; white-space:nowrap; }
.app-logo .mark{ width:24px; height:24px; border-radius:7px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; flex:none; }
.app-crumb{ color:var(--mut); font-size:13px; white-space:nowrap; }
.app-title{ font-weight:600; font-size:14px; white-space:nowrap; }

/* ---- бейджи статусов ---- */
.badge-soft{ display:inline-flex; align-items:center; font-weight:700; font-size:10px; padding:3px 9px; border-radius:var(--r-pill); letter-spacing:.01em; white-space:nowrap; line-height:1.2; }
.badge-ok{ background:var(--ok-soft); color:var(--ok); }
.badge-warn{ background:var(--warn-soft); color:var(--warn); }
.badge-err{ background:var(--err-soft); color:var(--err); }
.badge-accent{ background:var(--accent-soft); color:var(--accent-ink); }
.badge-teal{ background:var(--teal-soft); color:var(--teal-ink); }
.badge-mut{ background:var(--chip); color:var(--ink-2); }

/* ---- утилиты текста/цвета ---- */
.text-mut{ color:var(--mut)!important; } .text-ink2{ color:var(--ink-2)!important; }
.text-teal{ color:var(--teal-ink)!important; } .text-ai{ color:var(--ai)!important; }
.text-ok{ color:var(--ok)!important; } .text-warn{ color:var(--warn)!important; } .text-err{ color:var(--err)!important; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.fw-700{ font-weight:700; } .fw-600{ font-weight:600; }
.bg-head{ background:var(--head)!important; } .bg-surface2{ background:var(--surface-2)!important; }

/* ---- плотная таблица ---- */
.table-dense{ --bs-table-bg:var(--surface); font-size:12.5px; margin:0; }
.table-dense thead th{ background:var(--head); color:var(--ink-2); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.03em; border-bottom:1.5px solid var(--line); white-space:nowrap; position:sticky; top:0; z-index:2; }
.table-dense tbody td{ border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.table-dense tbody tr:hover{ background:var(--alt); }

/* ---- модульная плитка дашборда ---- */
.module-card{ display:block; background:var(--surface); border:1px solid var(--line-2); border-radius:16px; padding:18px; text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s, border-color .15s; height:100%; }
.module-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(20,30,60,.1); border-color:#C7CEF5; color:inherit; }
.module-ico{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:19px; }

/* ---- боковые рейлы ---- */
.rail{ flex:none; width:250px; background:var(--surface); border-right:1px solid var(--line); overflow:auto; }
.rail-section{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--mut); padding:6px 8px; }
.rail-item{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px 9px; border-radius:8px; border:none; background:transparent; color:var(--ink-2); font-size:13px; cursor:pointer; margin-bottom:1px; }
.rail-item:hover{ background:var(--surface-2); }
.rail-item.active{ background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }

/* ---- инпуты ---- */
.form-control, .form-select{ border-color:var(--line); border-radius:var(--r-md); font-size:13px; color:var(--ink); }
.form-control:focus, .form-select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(76,91,212,.13); }
.form-control::placeholder{ color:var(--mut-2); }
.input-icon{ position:relative; }
.input-icon > .form-control{ padding-left:30px; }
.input-icon > .ico{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--mut); font-size:13px; pointer-events:none; }

/* ---- прогресс / покрытие ---- */
.cov-track{ height:6px; border-radius:3px; background:var(--track); overflow:hidden; }
.cov-fill{ height:100%; border-radius:3px; background:var(--accent); }

/* ---- табы-кнопки (segmented) ---- */
.seg{ display:inline-flex; gap:3px; background:var(--chip); border-radius:9px; padding:3px; }
.seg .seg-btn{ border:none; background:transparent; color:var(--ink-3); font-size:12px; font-weight:600; padding:5px 11px; border-radius:7px; cursor:pointer; }
.seg .seg-btn.active{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(20,30,60,.12); }

/* ---- тост ---- */
.app-toast{ position:fixed; left:18px; bottom:18px; z-index:1080; display:flex; align-items:center; gap:12px; background:var(--ink); color:#fff; border-radius:11px; padding:10px 12px 10px 15px; box-shadow:0 12px 30px rgba(15,20,40,.3); font-size:12.5px; }

/* скролл */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:#C5CBD6; border-radius:8px; border:3px solid var(--surface); background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }

/* ============================================================
   Refinement layer — современный вид 2026
   ============================================================ */
:root{
  --bg:#ECEEF2;
  --r-sm:8px; --r-md:11px; --r-lg:16px;
  --sh-card:0 1px 2px rgba(20,28,56,.05), 0 1px 1px rgba(20,28,56,.03);
  --sh-pop:0 8px 16px -4px rgba(20,28,56,.12), 0 24px 48px -12px rgba(20,28,56,.18);
  --sh-lift:0 12px 28px -8px rgba(30,40,90,.16);
  --ring:0 0 0 3.5px rgba(76,91,212,.16);
}
body{ background:
  radial-gradient(1200px 600px at 100% -10%, rgba(76,91,212,.045), transparent 60%),
  radial-gradient(1000px 500px at -10% 110%, rgba(14,142,131,.04), transparent 55%),
  var(--bg);
  background-attachment:fixed; letter-spacing:-0.003em; }

/* плавность повсюду */
.btn,.card,.card-soft,.module-card,.rail-item,.nav-a,.seg-btn,.form-control,.form-select,.badge-soft,.tab-btn{
  transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s cubic-bezier(.2,.7,.3,1);
}

/* шапка — фростед */
.app-header{ background:rgba(255,255,255,.82); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid rgba(20,28,56,.07); }

/* карточки */
.card,.card-soft{ border-radius:var(--r-lg); border-color:rgba(20,28,56,.07); box-shadow:var(--sh-card); }
.module-card{ border-radius:var(--r-lg); border-color:rgba(20,28,56,.07); box-shadow:var(--sh-card); }
.module-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lift); border-color:rgba(76,91,212,.28); }
.module-ico{ border-radius:13px; box-shadow:inset 0 0 0 1px rgba(20,28,56,.04); }

/* кнопки */
.btn{ --bs-btn-font-weight:600; border-radius:var(--r-md); letter-spacing:-0.005em; }
.btn-primary{ box-shadow:0 1px 2px rgba(76,91,212,.25), 0 6px 16px -6px rgba(76,91,212,.5); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 2px 4px rgba(76,91,212,.3), 0 10px 22px -6px rgba(76,91,212,.55); }
.btn-primary:active{ transform:translateY(0); }
.btn-outline-secondary{ --bs-btn-border-color:rgba(20,28,56,.12); }
.btn-outline-secondary:hover{ box-shadow:var(--sh-card); }

/* поля ввода */
.form-control,.form-select{ border-radius:var(--r-md); border-color:rgba(20,28,56,.13); background:rgba(255,255,255,.7); }
.form-control:focus,.form-select:focus{ border-color:var(--accent); box-shadow:var(--ring); background:#fff; }

/* рейлы / навигация */
.rail{ background:rgba(255,255,255,.6); backdrop-filter:blur(8px); border-right:1px solid rgba(20,28,56,.07); }
.rail-item{ border-radius:9px; }
.rail-item.active{ box-shadow:inset 0 0 0 1px rgba(76,91,212,.18); }
.nav-a{ border-radius:9px; }

/* segmented */
.seg{ background:rgba(20,28,56,.05); border-radius:11px; padding:3px; }
.seg .seg-btn{ border-radius:8px; }
.seg .seg-btn.active{ box-shadow:0 1px 2px rgba(20,28,56,.14), 0 2px 6px -2px rgba(20,28,56,.12); }

/* бейджи */
.badge-soft{ border-radius:999px; box-shadow:inset 0 0 0 1px rgba(20,28,56,.04); }

/* индикаторы покрытия — мягче */
.cov-track,.impact-bar{ border-radius:999px; }
.cov-fill{ border-radius:999px; }

/* поповеры/модалки */
.modal-content{ border:1px solid rgba(20,28,56,.08); border-radius:18px; box-shadow:var(--sh-pop); overflow:hidden; }
.offcanvas{ border-left:1px solid rgba(20,28,56,.08)!important; }
.app-toast{ border-radius:14px; box-shadow:var(--sh-pop); backdrop-filter:blur(6px); }

/* таблицы */
.table-dense thead th{ background:rgba(247,248,250,.9); backdrop-filter:blur(6px); border-bottom:1px solid rgba(20,28,56,.1); }

/* кнопка сворачивания рейла */
.rail-toggle{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:none; border-radius:7px; background:transparent; color:var(--mut); font-size:15px; line-height:1; cursor:pointer; transition:background-color .15s, color .15s; }
.rail-toggle:hover{ background:rgba(20,28,56,.06); color:var(--ink); }

::selection{ background:rgba(76,91,212,.18); }
html{ scroll-behavior:smooth; }
*:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:6px; }