@import url("tokens.css?v=10.8");

/* ---------- базовое ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--c-text);
  /* «Deep Space»: глубокий синий + тонкая сетка эталонного листа */
  background:
    linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px),
    var(--c-bg);
  background-size:54px 54px, 54px 54px, auto;
  background-attachment:fixed;
  font-family:var(--f-sans); font-size:var(--fs-md); line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--c-brand-2); text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit; color:inherit}
svg{flex:0 0 auto}
::selection{background:var(--c-brand-dim)}
*:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-sm)}
.mono{font-family:var(--f-mono)}
.nowrap{white-space:nowrap}
.hidden{display:none !important}
.spacer{flex:1 1 auto}

/* скроллбары */
*{scrollbar-width:thin; scrollbar-color:var(--c-surface-3) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--c-surface-3); border-radius:var(--r-pill); border:2px solid transparent; background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--c-border)}

/* ---------- каркас ---------- */
.app{display:grid; grid-template-columns:var(--w-rail) 1fr; grid-template-rows:var(--h-topbar) 1fr; min-height:100vh}
.app.is-collapsed{grid-template-columns:var(--w-rail-collapsed) 1fr}

.topbar{
  grid-column:1/-1; display:flex; align-items:center; gap:var(--sp-3);
  padding:0 var(--sp-4); background:var(--c-surface);
  border-bottom:1px solid var(--c-border); position:sticky; top:0; z-index:40;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:750; letter-spacing:.2px}
.brand .logo{
  width:40px;height:40px;border-radius:12px; display:grid;place-items:center;
  color:var(--c-brand); background:var(--c-brand-dim); border:1px solid var(--c-border);
}
.brand small{display:block; font-weight:500; font-size:var(--fs-xs); color:var(--c-text-3)}
.topbar .divider{width:1px;height:26px;background:var(--c-border)}

.icon-btn{
  height:38px;min-width:38px;padding:0 10px; display:inline-flex;align-items:center;gap:7px;justify-content:center;
  background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:var(--r-sm);
  color:var(--c-text-2); cursor:pointer; transition:var(--t-fast);
}
.icon-btn:hover{color:var(--c-text); background:var(--c-surface-3); border-color:var(--c-brand)}
.icon-btn.is-on{color:var(--c-brand-2); border-color:var(--c-brand); background:var(--c-brand-dim)}

/* индикатор синхронизации — кликабельный */
.net-btn{background:none;border:none;padding:2px;cursor:pointer;border-radius:var(--r-pill);transition:var(--t-fast)}
.net-btn:hover{transform:translateY(-1px)}
.net-btn:hover .tag{box-shadow:var(--sh-2)}

/* ---------- левый рельс: МОДУЛИ ---------- */
.rail{
  background:var(--c-bg-2); border-right:1px solid var(--c-border);
  display:flex; flex-direction:column; padding:var(--sp-3) var(--sp-2); gap:2px;
  position:sticky; top:var(--h-topbar); height:calc(100vh - var(--h-topbar)); overflow-y:auto;
}
.rail .rail-title{
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--c-text-3);
  padding:var(--sp-2) var(--sp-3) var(--sp-1);
}
.mod{
  display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:var(--r-md);
  color:var(--c-text-2); cursor:pointer; border:1px solid transparent; transition:var(--t-fast);
  position:relative; text-align:left; background:none; width:100%;
}
.mod:hover{background:var(--c-surface); color:var(--c-text)}
.mod .mod-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--c-surface-2); border:1px solid var(--c-border-soft); color:var(--mod-color,var(--c-brand)); transition:var(--t-fast)}
.mod .mod-txt{display:flex;flex-direction:column;min-width:0}
.mod .mod-txt b{font-weight:640;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod .mod-txt span{font-size:var(--fs-xs);color:var(--c-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod.is-active{background:var(--c-surface); color:var(--c-text); border-color:var(--c-border)}
.mod.is-active::before{content:""; position:absolute; left:-2px; top:12px;bottom:12px; width:3px; border-radius:3px; background:var(--mod-color,var(--c-brand))}
.mod.is-active .mod-ico{background:var(--mod-dim,var(--c-brand-dim)); border-color:transparent; color:var(--mod-color,var(--c-brand))}
.mod .badge-count{margin-left:auto; font-size:var(--fs-xs); font-weight:700; padding:1px 8px; border-radius:var(--r-pill); background:var(--c-brand-dim); color:var(--c-brand-2); border:1px solid color-mix(in srgb,var(--c-brand) 30%,transparent); flex:0 0 auto; font-variant-numeric:tabular-nums}
/* 10.7: уведомления модулей — семантическая окраска счётчика.
   info — брендовый (по умолчанию), warn — янтарный, bad — коралловый
   с мягкой пульсацией: «что-то не так» видно боковым зрением. */
.mod .badge-count.warn{background:var(--c-warn-dim); color:var(--c-warn); border-color:color-mix(in srgb,var(--c-warn) 38%,transparent)}
.mod .badge-count.bad{background:var(--c-danger-dim); color:var(--c-danger); border-color:color-mix(in srgb,var(--c-danger) 42%,transparent); animation:badgePulse 2.4s ease-in-out infinite}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-danger) 34%,transparent)}50%{box-shadow:0 0 0 4px transparent}}
@media (prefers-reduced-motion: reduce){ .mod .badge-count.bad{animation:none} }
.app.is-collapsed .mod-txt,.app.is-collapsed .rail-title,.app.is-collapsed .rail-foot span{display:none}
.app.is-collapsed .mod{justify-content:center}
/* 10.7: в свёрнутом рельсе счётчик сжимается в цветную точку на иконке */
.app.is-collapsed .mod .badge-count{position:absolute; top:5px; right:5px; width:10px; height:10px; padding:0; margin:0; border-radius:50%; font-size:0; line-height:0; background:var(--c-brand); border:2px solid var(--c-bg-2)}
.app.is-collapsed .mod .badge-count.warn{background:var(--c-warn)}
.app.is-collapsed .mod .badge-count.bad{background:var(--c-danger)}
.rail-foot{margin-top:auto; padding:var(--sp-2); font-size:var(--fs-xs); color:var(--c-text-3); display:flex; align-items:center; gap:8px}

/* ---------- рабочая область ---------- */
.main{min-width:0; display:flex; flex-direction:column}
.subbar{
  display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-5) 0;
  background:linear-gradient(180deg,var(--c-bg-2),transparent); position:sticky; top:var(--h-topbar); z-index:30;
  border-bottom:1px solid var(--c-border-soft); overflow-x:auto;
}
.subtab{
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px 11px; border:none; background:none;
  color:var(--c-text-3); cursor:pointer; font-size:13.5px; font-weight:600; white-space:nowrap;
  border-bottom:2px solid transparent; transition:var(--t-fast);
}
.subtab:hover{color:var(--c-text-2)}
.subtab .st-ico{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:var(--c-surface-2);border:1px solid var(--c-border-soft);color:var(--c-text-3);transition:var(--t-fast)}
.subtab.is-active{color:var(--c-text); border-bottom-color:var(--st-color,var(--c-brand))}
.subtab.is-active .st-ico{background:var(--st-dim,var(--c-brand-dim)); color:var(--st-color,var(--c-brand)); border-color:transparent}
.subtab .st-badge{font-size:10.5px;padding:0 6px;border-radius:var(--r-pill);background:var(--c-surface-3);color:var(--c-text-2)}

.view{padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4); animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Заголовок экрана (без дублирования названия вкладки: только контекст/подсказка) */
.view-hint{display:flex;align-items:center;gap:10px;color:var(--c-text-3);font-size:var(--fs-sm);flex-wrap:wrap}
.view-hint > span:nth-child(2){min-width:0}
/* 10.7: кнопка «Инструкция» — сдержанная, оживает при наведении */
.help-btn{color:var(--c-text-2);background:var(--c-surface);border-color:var(--c-border-soft);flex:0 0 auto}
.help-btn:hover{color:var(--c-brand-2);border-color:var(--c-brand);background:var(--c-brand-dim)}
.view-hint kbd{font-family:var(--f-mono);font-size:10.5px;background:var(--c-surface-2);border:1px solid var(--c-border);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--c-text-2)}

/* ---------- карточки / панели ---------- */
.card{background:var(--c-surface); border:1px solid var(--c-border-soft); border-radius:var(--r-lg); box-shadow:var(--sh-1); transition:box-shadow var(--t-med), border-color var(--t-med)}
.card:hover{box-shadow:var(--sh-2); border-color:var(--c-border)}
.card-h{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-4) var(--sp-2)}
.card-h h3{margin:0;font-size:14.5px;font-weight:680;letter-spacing:.1px}
.card-h p{margin:0;font-size:var(--fs-xs);color:var(--c-text-3)}
.card-h + .card-b{padding-top:var(--sp-3)}
.card-b{padding:var(--sp-4)}
.card-b.flush{padding:0}
.grid{display:grid;gap:var(--sp-4)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* 10.7: предохранитель от выхода контента за край карточек/сайта —
   потомки грида и карточки не могут распирать дорожку шире контейнера
   (без этого длинные nowrap-строки «выдавливали» таблицы и бары). */
.grid > *{min-width:0}
.card,.card-b,.kpi{min-width:0}
.card-b{overflow-wrap:break-word}
.row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}

/* KPI — умная цветовая индикация: акцентная кромка и тонированная иконка */
.kpi{position:relative;overflow:hidden;padding:var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 4px);border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-border-soft);transition:box-shadow var(--t-med), border-color var(--t-med)}
.kpi:hover{box-shadow:var(--sh-2);border-color:var(--c-border)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--kpi-color,var(--c-brand)),color-mix(in srgb,var(--kpi-color,var(--c-brand)) 30%, transparent))}
.kpi .kpi-top{display:flex;align-items:center;gap:9px;position:relative;z-index:1}
.kpi .kpi-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--kpi-dim,var(--c-brand-dim));color:var(--kpi-color,var(--c-brand))}
.kpi .kpi-label{font-size:var(--fs-xs);color:var(--c-text-3);text-transform:uppercase;letter-spacing:.08em}
.kpi .kpi-val{position:relative;z-index:1;font-size:var(--fs-2xl);font-weight:740;letter-spacing:-.6px;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .kpi-sub{position:relative;z-index:1;font-size:var(--fs-xs);color:var(--c-text-3)}
.trend{font-size:var(--fs-xs);font-weight:650;padding:1px 6px;border-radius:var(--r-pill)}
.trend.up{color:var(--c-accent);background:var(--c-accent-dim)}
.trend.down{color:var(--c-danger);background:var(--c-danger-dim)}
.trend.flat{color:var(--c-text-3);background:var(--c-surface-3)}

/* ---------- элементы форм ---------- */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field > label{font-size:var(--fs-xs);color:var(--c-text-3);text-transform:uppercase;letter-spacing:.08em}
.input,.select,.textarea{
  width:100%;padding:9px 11px;background:var(--c-surface-2);border:1px solid var(--c-border);
  border-radius:var(--r-sm);transition:var(--t-fast);
}
.input:hover,.select:hover{border-color:var(--c-border)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--c-brand);background:var(--c-surface)}
.textarea{min-height:96px;resize:vertical;font-family:var(--f-mono);font-size:var(--fs-sm)}
.input-search{position:relative;flex:1 1 260px}
.input-search > svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--c-text-3);pointer-events:none}
.input-search .input{padding-left:36px;height:40px}
/* 10.8: «xl»-поиск стал компактным и профессиональным: 46px вместо 56px,
   обычный шрифт вместо огромного моноширинного, адаптивная ширина */
.input-xl .input{height:46px;font-size:var(--fs-md);padding-left:42px}
.input-xl > svg{left:14px}
/* инструменты поиска: очистка, голосовой ввод, сканер */
.input-search.has-tools .input{padding-right:112px}
.search-tools{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;gap:4px;align-items:center}
.st-btn{width:32px;height:32px;display:grid;place-items:center;border:1px solid transparent;border-radius:9px;
  background:transparent;color:var(--c-text-3);cursor:pointer;transition:var(--t-fast);padding:0}
.st-btn:hover{color:var(--c-brand-2);background:var(--c-brand-dim)}
.st-btn.is-rec{color:var(--c-danger);background:var(--c-danger-dim);animation:recPulse 1.2s ease-in-out infinite}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-danger) 40%,transparent)}50%{box-shadow:0 0 0 5px transparent}}
/* сканер (машинное зрение) */
.scan-box{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#000;min-height:280px;display:grid;place-items:center}
.scan-video{width:100%;max-height:52vh;object-fit:cover;display:block}
.scan-frame{position:absolute;inset:14% 18%;border:2px solid color-mix(in srgb,var(--c-accent) 80%,transparent);border-radius:14px;
  box-shadow:0 0 0 999px rgba(0,0,0,.25);pointer-events:none}
.scan-status{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:rgba(6,10,20,.72);color:#e9eefc;
  font-size:var(--fs-sm);text-align:center;backdrop-filter:blur(4px)}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-sm);
  border:1px solid var(--c-border);background:var(--c-surface-2);color:var(--c-text);
  cursor:pointer;font-weight:600;font-size:13.5px;transition:var(--t-fast);white-space:nowrap;
}
.btn:hover{background:var(--c-surface-3);border-color:var(--c-brand)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-on-brand);box-shadow:none}
.btn-primary:hover{filter:brightness(1.06);border-color:var(--c-brand-2)}
.btn-accent{background:var(--c-accent-dim);border-color:transparent;color:var(--c-accent)}
.btn-danger{background:var(--c-danger-dim);border-color:transparent;color:var(--c-danger)}
.btn-ghost{background:transparent}
.btn-sm{padding:5px 9px;font-size:var(--fs-sm)}
.btn-group{display:inline-flex;border:1px solid var(--c-border);border-radius:var(--r-sm);overflow:hidden}
.btn-group .btn{border:none;border-radius:0;background:transparent}
.btn-group .btn + .btn{border-left:1px solid var(--c-border)}
.btn-group .btn.is-on{background:var(--c-brand-dim);color:var(--c-brand-2)}

.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);
  background:var(--c-surface-2);border:1px solid var(--c-border);font-size:var(--fs-sm);color:var(--c-text-2);cursor:pointer;transition:var(--t-fast)
}
.chip:hover{border-color:var(--c-brand);color:var(--c-text)}
.chip.is-on{background:var(--c-brand-dim);border-color:transparent;color:var(--c-brand-2)}
.chip .x{opacity:.6}
.chip.chip-risk-hi{border-color:color-mix(in srgb,var(--c-danger) 55%,transparent);box-shadow:inset 3px 0 0 var(--c-danger)}
.chip.chip-risk-mid{border-color:color-mix(in srgb,var(--c-warn) 50%,transparent);box-shadow:inset 3px 0 0 var(--c-warn)}
/* интерактивная строка дубля по адресам */
.dup-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 12px;
  background:var(--c-surface-2);border:1px solid transparent;border-radius:var(--r-md);cursor:pointer;transition:var(--t-fast);color:var(--c-text)}
.dup-row:hover{border-color:var(--c-brand);box-shadow:var(--sh-1);transform:translateY(-1px)}
/* Теги — цветовая индикация состояния: зелёный/янтарный/красный/
   небесный/лиловый, каждый со своей тонированной подложкой и контуром */
/* 10.8: статус-теги не переносятся на две строки («не пересчитано» и
   прочие статусы больше не съезжают в таблицах) */
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:650;border:1px solid transparent;white-space:nowrap;line-height:1.35;max-width:100%}
.tag > span{overflow:hidden;text-overflow:ellipsis}
.tag.ok{background:var(--c-accent-dim);color:var(--c-accent);border-color:color-mix(in srgb,var(--c-accent) 38%,transparent)}
.tag.warn{background:var(--c-warn-dim);color:var(--c-warn);border-color:color-mix(in srgb,var(--c-warn) 38%,transparent)}
.tag.bad{background:var(--c-danger-dim);color:var(--c-danger);border-color:color-mix(in srgb,var(--c-danger) 38%,transparent)}
.tag.info{background:var(--c-cyan-dim);color:var(--c-cyan);border-color:color-mix(in srgb,var(--c-cyan) 38%,transparent)}
.tag.mut{background:var(--c-surface-3);color:var(--c-text-2);border-color:var(--c-border-soft)}
.tag.vio{background:var(--c-violet-dim);color:var(--c-violet);border-color:color-mix(in srgb,var(--c-violet) 38%,transparent)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}

.switch{position:relative;width:40px;height:22px;border-radius:var(--r-pill);background:var(--c-surface-3);border:1px solid var(--c-border);cursor:pointer;transition:var(--t-fast)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--c-text-3);transition:var(--t-fast)}
.switch.is-on{background:var(--c-brand-dim);border-color:var(--c-brand)}
.switch.is-on::after{left:20px;background:var(--c-brand)}

/* ---------- таблицы ---------- */
.table-wrap{overflow:auto;max-height:var(--tbl-h,64vh);border-radius:var(--r-lg)}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
table.tbl th,table.tbl td{padding:var(--cell-py,8px) 12px;text-align:left;border-bottom:1px solid var(--c-border-soft);vertical-align:middle}
table.tbl thead th{
  position:sticky;top:0;z-index:5;background:var(--c-surface-2);color:var(--c-text-3);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:650;white-space:nowrap;cursor:pointer;
  border-bottom:1px solid var(--c-border);
}
table.tbl thead th:hover{color:var(--c-text-2)}
table.tbl thead th .sort{opacity:.35;margin-left:5px}
table.tbl thead th.is-sorted .sort{opacity:1;color:var(--c-brand)}
table.tbl tbody tr{transition:background var(--t-fast)}
table.tbl tbody tr:nth-child(even){background:color-mix(in srgb, var(--c-surface-2) 38%, transparent)}
table.tbl tbody tr:hover{background:var(--c-surface-2);box-shadow:inset 2px 0 0 var(--c-brand)}
table.tbl tbody tr.is-selected{background:var(--c-brand-dim)}
table.tbl tbody tr.is-dirty td:first-child{box-shadow:inset 3px 0 0 var(--c-warn)}
table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--f-mono)}
table.tbl td:has(> .tag){white-space:nowrap}
table.tbl td .mono{font-size:12.5px}
table.tbl tbody td{line-height:1.5}
table.tbl td.cell-edit{cursor:text}
table.tbl td.cell-edit:hover{box-shadow:inset 0 0 0 1px var(--c-border)}
table.tbl td input.cell-input{width:100%;background:var(--c-surface);border:1px solid var(--c-brand);border-radius:5px;padding:3px 6px;font-size:13px}
table.tbl tfoot td{padding:10px 12px;background:var(--c-surface-2);font-weight:650;font-size:var(--fs-sm)}
.tbl-toolbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--c-border-soft)}
.tbl-foot{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--c-border-soft);font-size:var(--fs-sm);color:var(--c-text-3)}

/* прогресс */
.bar{height:8px;border-radius:var(--r-pill);background:var(--c-surface-3);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:var(--r-pill);background:var(--c-brand);transition:width .4s ease}
.bar.sm{height:5px}

/* пусто / загрузка */
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:var(--sp-10) var(--sp-4);color:var(--c-text-3);text-align:center}
.empty .e-ico{width:68px;height:68px;color:var(--c-brand);border-radius:var(--r-lg);display:grid;place-items:center;background:var(--c-surface-2);border:1px solid var(--c-border)}
.empty b{color:var(--c-text-2);font-size:var(--fs-lg)}
.skel{background:linear-gradient(90deg,var(--c-surface-2),var(--c-surface-3),var(--c-surface-2));background-size:200% 100%;animation:sk 1.1s infinite;border-radius:var(--r-sm);height:14px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* тосты */
.toasts{position:fixed;right:18px;bottom:18px;z-index:100;display:flex;flex-direction:column;gap:9px;max-width:380px}
/* Уведомления — каждому типу свой цвет: пиктограмма в тонированном
   кружке, цветная кромка и лёгкий тонированный фон */
.toast{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);background:var(--c-surface-2);border:1px solid var(--c-border);box-shadow:var(--sh-3);animation:slide .2s ease;cursor:pointer}
.toast .toast-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto}
.toast.ok{border-left:3px solid var(--c-accent);background:color-mix(in srgb,var(--c-accent) 7%,var(--c-surface-2))}
.toast.ok .toast-ico{background:var(--c-accent-dim);color:var(--c-accent)}
.toast.err{border-left:3px solid var(--c-danger);background:color-mix(in srgb,var(--c-danger) 7%,var(--c-surface-2))}
.toast.err .toast-ico{background:var(--c-danger-dim);color:var(--c-danger)}
.toast.warn{border-left:3px solid var(--c-warn);background:color-mix(in srgb,var(--c-warn) 7%,var(--c-surface-2))}
.toast.warn .toast-ico{background:var(--c-warn-dim);color:var(--c-warn)}
.toast.info{border-left:3px solid var(--c-cyan);background:color-mix(in srgb,var(--c-cyan) 7%,var(--c-surface-2))}
.toast.info .toast-ico{background:var(--c-cyan-dim);color:var(--c-cyan)}
.toast b{display:block;font-size:13px}
.toast span{font-size:var(--fs-sm);color:var(--c-text-2)}
@keyframes slide{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

/* модалка / шторка */
.overlay{position:fixed;inset:0;background:rgba(6,10,20,.62);backdrop-filter:blur(3px);z-index:90;display:grid;place-items:center;padding:var(--sp-4);animation:fade .15s ease}
.modal{width:min(720px,100%);max-height:86vh;overflow:auto;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);box-shadow:var(--sh-3)}
/* 10.7: содержимое всплывающих инструкций — нумерованные тезисы + плашка «важно» */
.help-doc{display:flex;flex-direction:column;gap:var(--sp-3)}
.help-intro{margin:0;color:var(--c-text-2);font-size:var(--fs-sm);line-height:1.6}
.help-steps{display:flex;flex-direction:column;gap:6px}
.help-step{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--c-surface-2);border:1px solid var(--c-border-soft);border-radius:var(--r-md)}
.help-step .help-n{flex:0 0 auto;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--c-brand-dim);color:var(--c-brand-2);font-size:var(--fs-xs);font-weight:750;margin-top:1px}
.help-step .help-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.help-step .help-t b{font-size:13.5px;font-weight:680}
.help-step .help-t span{font-size:var(--fs-sm);color:var(--c-text-2);line-height:1.55}
.help-note{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-md);background:var(--c-warn-dim);border:1px solid color-mix(in srgb,var(--c-warn) 35%,transparent);color:var(--c-warn);font-size:var(--fs-sm);line-height:1.55}
.help-note svg{margin-top:2px}
.modal-h{display:flex;align-items:center;gap:10px;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--c-border-soft)}
.modal-h h3{margin:0;font-size:var(--fs-lg)}
.modal-b{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
.modal-f{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--c-border-soft)}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(520px,94vw);background:var(--c-surface);border-left:1px solid var(--c-border);box-shadow:var(--sh-3);z-index:95;display:flex;flex-direction:column;animation:dr .22s ease}
@keyframes dr{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}

/* двухпанельный layout (разделы / база знаний / архив) */
.split{display:grid;grid-template-columns:270px 1fr;gap:var(--sp-4);align-items:start}
.split.narrow{grid-template-columns:230px 1fr}
@media (max-width:1080px){.split,.split.narrow{grid-template-columns:1fr}}
.list-nav{display:flex;flex-direction:column;gap:2px;padding:var(--sp-2);max-height:72vh;overflow:auto}
.list-nav .ln{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;color:var(--c-text-2);border:1px solid transparent;transition:var(--t-fast);text-align:left;background:none;width:100%}
.list-nav .ln:hover{background:var(--c-surface-2);color:var(--c-text)}
.list-nav .ln.is-active{background:var(--c-brand-dim);color:var(--c-brand-2);border-color:transparent;font-weight:640}
.list-nav .ln .ln-c{margin-left:auto;font-size:var(--fs-xs);color:var(--c-text-3)}
.list-nav .ln-group{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--c-text-3);padding:var(--sp-3) 10px var(--sp-1)}

/* таймлайн (журнал/архив) */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--c-border)}
.tl-item{position:relative;padding:10px 0}
.tl-item::before{content:"";position:absolute;left:-21px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--c-surface);border:2px solid var(--tl-color,var(--c-brand))}
.tl-time{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--c-text-3)}
.tl-body{background:var(--c-surface-2);border:1px solid var(--c-border-soft);border-radius:var(--r-md);padding:10px 12px;margin-top:4px}

/* графики */
.chart{width:100%;height:var(--ch-h,240px);display:block;overflow:visible}
.legend{display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--c-text-2)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px}
.heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(13px,1fr));gap:3px}
.heat i{aspect-ratio:1;border-radius:3px;background:var(--c-surface-3)}

/* база знаний */
.article{max-width:840px;font-size:14.5px;line-height:1.65}
.article h2{font-size:var(--fs-xl);margin:var(--sp-6) 0 var(--sp-2)}
.article h3{font-size:var(--fs-lg);margin:var(--sp-5) 0 var(--sp-2);color:var(--c-text)}
.article p{margin:0 0 var(--sp-3);color:var(--c-text-2)}
.article ul,.article ol{margin:0 0 var(--sp-3) 20px;color:var(--c-text-2)}
.article li{margin-bottom:5px}
.article code{font-family:var(--f-mono);font-size:12.5px;background:var(--c-surface-2);border:1px solid var(--c-border-soft);border-radius:5px;padding:1px 5px;color:var(--c-brand-2)}
.article blockquote{margin:0 0 var(--sp-3);padding:10px 14px;border-left:3px solid var(--c-brand);background:var(--c-brand-dim);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--c-text-2)}
.toc{position:sticky;top:calc(var(--h-topbar) + 60px);font-size:var(--fs-sm)}
.toc a{display:block;padding:4px 10px;border-left:2px solid var(--c-border);color:var(--c-text-3)}
.toc a:hover,.toc a.is-on{color:var(--c-brand-2);border-left-color:var(--c-brand);text-decoration:none}

/* карта адресов пересчёта */
.addr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.addr-cell{padding:9px;border-radius:var(--r-sm);border:1px solid var(--c-border);background:var(--c-surface-2);cursor:pointer;transition:var(--t-fast)}
.addr-cell:hover{transform:translateY(-1px);box-shadow:var(--sh-2);border-color:var(--c-brand)}
.addr-cell b{display:block;font-family:var(--f-mono);font-size:12.5px}
.addr-cell small{color:var(--c-text-3);font-size:10.5px}
.addr-cell[data-pri="high"]{border-left:3px solid var(--c-danger)}
.addr-cell[data-pri="mid"]{border-left:3px solid var(--c-warn)}
.addr-cell[data-pri="low"]{border-left:3px solid var(--c-accent)}
.addr-cell.is-done{opacity:.5}

/* ============================================================
   10.8 · ПОЛНАЯ АДАПТИВНОСТЬ ПОД РАЗНЫЕ ЭКРАНЫ
   ≥1100px — полный интерфейс; 720–1100px — свёрнутый рельс;
   ≤720px — мобильный режим: нижняя навигация модулей, компактный
   топбар, полноширинные модалки, таблицы со скроллом.
   ============================================================ */
@media (max-width:1100px){
  .app{grid-template-columns:var(--w-rail-collapsed) 1fr}
  .app .mod-txt,.app .rail-title,.app .rail-foot span{display:none}
  .app .mod{justify-content:center}
  .app .mod .badge-count{position:absolute;top:5px;right:5px;width:10px;height:10px;padding:0;margin:0;border-radius:50%;font-size:0;line-height:0;background:var(--c-brand);border:2px solid var(--c-bg-2)}
  .app .mod .badge-count.warn{background:var(--c-warn)}
  .app .mod .badge-count.bad{background:var(--c-danger)}
  .view{padding:var(--sp-4) var(--sp-3)}
}
@media (max-width:720px){
  :root{--h-topbar:54px}
  .app{grid-template-columns:1fr}
  /* модули — нижняя панель навигации (как в мобильных приложениях) */
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:70;
    flex-direction:row;align-items:center;justify-content:space-around;gap:0;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    border-top:1px solid var(--c-border);border-right:none;overflow-x:auto;overflow-y:hidden;
    background:color-mix(in srgb,var(--c-bg-2) 92%, transparent);backdrop-filter:blur(10px)}
  .rail .mod{flex:0 0 auto;width:auto;padding:6px 8px}
  .rail .mod.is-active::before{left:10px;right:10px;top:auto;bottom:-6px;width:auto;height:3px}
  .view{padding:var(--sp-3);padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  /* компактный топбар: без быстрого перехода и разделителя */
  .topbar{gap:6px;padding:0 8px}
  .topbar .divider,.topbar .input-search,.brand small{display:none}
  .brand .logo{width:34px;height:34px}
  .icon-btn{height:36px;min-width:36px;padding:0 8px}
  .icon-btn span{display:none}
  .subbar{padding:var(--sp-2) var(--sp-3) 0;top:var(--h-topbar)}
  .subtab{padding:7px 9px 9px;font-size:12.5px}
  .subtab .st-ico{width:27px;height:27px}
  /* сетки и KPI сжимаются, но не ломаются */
  .g-2,.g-3{grid-template-columns:1fr}
  .g-4{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
  .kpi .kpi-val{font-size:22px}
  .card-h,.card-b{padding-left:var(--sp-3);padding-right:var(--sp-3)}
  /* модалки и шторки — во весь экран */
  .overlay{padding:8px}
  .modal{max-height:96vh;border-radius:var(--r-lg)}
  .modal-b,.modal-h,.modal-f{padding-left:var(--sp-4);padding-right:var(--sp-4)}
  .modal-f{flex-wrap:wrap}
  .drawer{width:100vw}
  .toasts{left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));max-width:none}
  /* таблицы: горизонтальный скролл вместо давки */
  .table-wrap{max-height:70vh;-webkit-overflow-scrolling:touch}
  table.tbl{font-size:12.5px;min-width:560px}
  .tbl-toolbar{padding:var(--sp-2) var(--sp-3)}
  .tbl-toolbar .btn span{display:none}
  .tbl-foot{padding:var(--sp-2) var(--sp-3)}
  /* поиск и инструменты — крупные зоны касания */
  .input-xl .input{height:48px}
  .st-btn{width:36px;height:36px}
  .login-card{padding:var(--sp-6) var(--sp-4) var(--sp-4)}
}
@media (max-width:400px){
  .g-4{grid-template-columns:1fr 1fr}
  .subtab span:last-child{max-width:96px;overflow:hidden;text-overflow:ellipsis}
}
/* крупные экраны: контент не растягивается бесконечно */
@media (min-width:1900px){
  .view{max-width:1720px;margin:0 auto;width:100%}
}
@media print{.rail,.topbar,.subbar,.toasts{display:none}.app{display:block}}

/* ---------- экран входа (эталонный макет ROCH) ---------- */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:var(--sp-6);
  background:radial-gradient(900px 500px at 20% -10%, var(--c-cyan-dim), transparent),
             radial-gradient(900px 600px at 110% 110%, var(--c-brand-dim), transparent), var(--c-bg)}
.login-card{width:min(400px,100%); background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-xl); padding:var(--sp-8) var(--sp-6) var(--sp-5); box-shadow:var(--sh-3);
  display:flex; flex-direction:column; gap:var(--sp-3); text-align:center}
.login-logo{width:64px;height:64px;border-radius:16px;margin:0 auto;display:grid;place-items:center;
  color:var(--c-brand); background:var(--c-brand-dim); border:1px solid var(--c-border)}
.login-card h1{margin:2px 0 0; font-size:var(--fs-2xl); letter-spacing:.3px}
.login-sub{margin:0 0 var(--sp-2); color:var(--c-text-3); font-size:var(--fs-sm)}
.login-field{text-align:left; display:flex; flex-direction:column; gap:6px}
.login-field label{font-size:var(--fs-xs); letter-spacing:.14em; color:var(--c-text-3); font-weight:600}
.login-input{height:44px}
.login-btn{height:46px; justify-content:center; margin-top:var(--sp-2); font-weight:700}
.login-err{background:var(--c-danger-dim); color:var(--c-danger); border:1px solid var(--c-danger);
  border-radius:var(--r-sm); padding:8px 10px; font-size:var(--fs-sm); text-align:left}
.login-foot{display:flex; gap:7px; align-items:flex-start; justify-content:center; color:var(--c-text-3); font-size:var(--fs-xs); margin-top:var(--sp-2)}
.login-eco{color:var(--c-text-3); font-size:10px; letter-spacing:.34em; margin-top:var(--sp-1)}