/* СЭД — интерфейс в стиле «СберСити»: графитовая шапка, белые поверхности, фирменный зелёный. */
:root {
  color-scheme: light;
  --head: #1d2023;
  --head-2: #26292d;
  --head-ink: #ffffff;
  --head-muted: #9aa3aa;
  --bg: #eef1f2;
  --panel: #ffffff;
  --ink: #15181b;
  --muted: #69737b;
  --line: #e1e5e8;
  --line-2: #eef1f3;
  --surface: #ffffff;
  --surface-2: #f7f9f9;
  --chip: #f5f7f8;
  --row-hover: #f7f9f8;
  --border-strong: #d3d9dd;
  --hover: #b4bcc2;
  --ink-2: #3d4448;
  --sber: #21a038;
  --sber-dark: #148a2c;
  --sber-soft: #e7f6ea;
  --teal: #11a59a;
  --sky: #1f8fd6;
  --grad: linear-gradient(120deg, #21a038 0%, #11a59a 55%, #1f8fd6 100%);

  /* статусы подсистем */
  --s-none: #b9c1c7;
  --s-smr: #7d878f;
  --s-pnr: #e5412d;
  --s-remarks: #f0ad00;
  --s-done: #21a038;

  --bad: #d4351c;
  --warn: #b77800;
  --info: #1f6fd6;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 20px;
  --shadow: 0 1px 2px rgba(21, 24, 27, .06), 0 8px 24px -12px rgba(21, 24, 27, .18);
  --font: "Onest", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 15px/1.5 var(--font);
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sber-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 12px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 16px; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 4px; }
code { font-size: .9em; background: var(--line-2); padding: 1px 5px; border-radius: 4px; }

/* ---------- Шапка ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--head); color: var(--head-ink);
  display: flex; align-items: center; gap: 28px;
  padding: 0 28px; height: 60px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand svg { display: block; }
.brand-word { font-weight: 800; font-size: 20px; letter-spacing: .12em; }
.brand-sep { width: 1px; height: 18px; background: #4a5056; }
.brand-sub { color: var(--head-muted); font-size: 14px; }

.nav { display: flex; gap: 2px; align-items: center; height: 100%; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 6px; height: 100%;
  padding: 0 11px; color: #c9d0d5; font-size: 14px; white-space: nowrap; text-decoration: none;
}
.nav a:hover { color: #fff; }
.nav a.active { color: #fff; }
.nav a.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--grad);
}
.nav .count { background: var(--sber); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 0 7px; line-height: 18px; }
.nav .sep { width: 1px; height: 18px; background: #3a3f44; margin: 0 6px; flex: none; }

.me { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; white-space: nowrap; }
.me .who { color: #fff; font-weight: 600; }
.me .role { color: var(--head-muted); }
.me a { color: var(--head-muted); }
.me a:hover { color: #fff; }
.ws-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e5412d; margin-right: 6px; vertical-align: 1px; }
.ws-dot.on { background: #3ad15a; box-shadow: 0 0 0 3px rgba(58, 209, 90, .18); }

/* ---------- Страница ---------- */
.main { max-width: 1760px; margin: 0 auto; padding: 28px 28px 64px; }
.view { display: none; }
.view.active { display: block; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.head h2 { margin: 0; }
.sub { color: var(--muted); font-size: 14px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px; margin-bottom: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label { font-size: 13px; color: var(--muted); font-weight: 600; }
.hint { font-size: 12.5px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=datetime-local], input[type=date], input[type=tel], input[type=time], input[type=search], input[type=number], select, textarea {
  font: inherit; font-size: 14px; color: inherit; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-s); padding: 9px 11px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 200px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sber); box-shadow: 0 0 0 3px rgba(33, 160, 56, .16); }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar input[type=search] { width: 260px; }
.toolbar select { width: auto; }

.btn {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  border-radius: 10px; padding: 9px 16px; display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { border-color: var(--hover); background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--sber); color: #fff; border-color: var(--sber); }
.btn.primary:hover { background: var(--sber-dark); border-color: var(--sber-dark); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--line-2); color: var(--ink); }
.btn.danger { color: var(--bad); }
.btn.small { padding: 4px 10px; font-size: 12.5px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- Таблицы ---------- */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
th { font-size: 12.5px; color: var(--muted); font-weight: 600; background: var(--surface-2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--row-hover); }
tbody tr.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: var(--sber-soft); } to { background: transparent; } }
td.num { color: var(--muted); white-space: nowrap; }
td.time { white-space: nowrap; color: var(--muted); font-size: 13px; }
td.text { max-width: 520px; white-space: pre-wrap; word-break: break-word; }
.empty { padding: 32px; text-align: center; color: var(--muted); }

.badge { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.st-queued   { color: var(--info); background: #eaf2fd; }
.st-sending  { color: var(--warn); background: #fff5e0; }
.st-sent     { color: var(--sber-dark); background: var(--sber-soft); }
.st-dry_run  { color: #5b4bc4; background: #f0eefc; }
.st-failed   { color: var(--bad); background: #fdecea; }
.st-cancelled{ color: var(--muted); background: var(--line-2); }
.ch-telegram { color: #0b74b5; background: #e8f4fc; }
.ch-max      { color: #5b4bc4; background: #f0eefc; }
.role-admin  { color: var(--sber-dark); background: var(--sber-soft); }
.role-reader { color: var(--muted); background: var(--line-2); }
.obj-tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--line-2); border-radius: 6px; padding: 1px 7px; }

.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; }
.stat .v { font-size: 26px; font-weight: 700; }
.stat .l { font-size: 13px; color: var(--muted); }

/* ---------- Индикатор статуса подсистемы ---------- */
.led { --c: var(--s-none); display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.led.s-none { --c: var(--s-none); }
.led.s-smr { --c: transparent; box-shadow: inset 0 0 0 2px var(--s-smr); }
.led.s-pnr { --c: var(--s-pnr); box-shadow: 0 0 0 3px rgba(229, 65, 45, .16); }
.led.s-remarks { --c: var(--s-remarks); box-shadow: 0 0 0 3px rgba(240, 173, 0, .18); }
.led.s-done { --c: var(--s-done); box-shadow: 0 0 0 3px rgba(33, 160, 56, .16); }

/* ---------- Главная: обзор ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; margin-bottom: 22px; }
.hero h1 { margin: 0 0 4px; }
.hero .sub b { color: var(--ink); font-weight: 600; }

/* Поле индикаторов: каждая клетка — одна подсистема */
.field-panel { background: var(--head); color: #fff; border-radius: var(--r-l); padding: 22px 24px 20px; margin-bottom: 16px; position: relative; overflow: hidden; }
.field-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 200px at 100% 0, rgba(17,165,154,.22), transparent 60%); pointer-events: none; }
.field-top { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.field-top h3 { margin: 0; font-size: 16px; color: #fff; }
.field-top .sub { color: var(--head-muted); }
.pixels { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(22px, 1fr)); gap: 5px; }
.px {
  aspect-ratio: 1; border-radius: 5px; background: #3a4046; cursor: pointer; border: 0; padding: 0;
  transition: transform .15s var(--ease), opacity .2s;
  animation: px-in .5s var(--ease) both; animation-delay: calc(var(--i) * 9ms);
}
.px:hover { transform: scale(1.25); z-index: 1; }
.px.s-none { background: #4a5157; }
.px.s-smr { background: transparent; box-shadow: inset 0 0 0 2px #8e989f; }
.px.s-pnr { background: var(--s-pnr); }
.px.s-remarks { background: var(--s-remarks); }
.px.s-done { background: var(--s-done); }
.px.dim { opacity: .15; }
@keyframes px-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

.legend { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.legend button {
  font: inherit; font-size: 13px; color: #d6dce0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px; padding: 5px 12px 5px 10px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.legend button:hover { background: rgba(255,255,255,.1); }
.legend button.on { background: #fff; color: #15181b; border-color: #fff; }
.legend b { font-weight: 700; color: #fff; }
.legend button.on b { color: #15181b; }
.legend .led.s-none { --c: #6b747b; }

.charts { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; margin-bottom: 28px; }
.chart-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px 22px; min-width: 0; display: flex; flex-direction: column; }
.chart-card h3 { margin-bottom: 2px; }
.chart-card .sub { margin-bottom: 14px; }
.donut-wrap { display: grid; place-items: center; position: relative; margin: 6px 0 10px; }
.donut-center { position: absolute; text-align: center; }
.donut-center .big { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.donut-center .small { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13.5px; }
.kv span:nth-child(odd) { color: var(--muted); }
.kv span:nth-child(even) { font-weight: 600; text-align: right; }

.bars { display: flex; align-items: flex-end; gap: 10px; flex: 1; min-height: 240px; padding-top: 14px; overflow-x: auto; }
.bar-col { flex: 1 0 34px; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; cursor: pointer; }
.bar-track { position: relative; flex: 1; width: 100%; max-width: 34px; background: var(--line-2); border-radius: 8px; overflow: hidden; display: flex; align-items: flex-end; }
.bar-fill { width: 100%; background: var(--grad); border-radius: 8px; height: 0; transition: height .9s var(--ease); }
.bar-col:hover .bar-track { box-shadow: 0 0 0 2px var(--sber); }
.bar-col .lbl { font-size: 12px; font-weight: 700; color: var(--muted); }
.bar-col .pct { font-size: 11.5px; color: var(--muted); }

/* ---------- Карточки объектов ---------- */
.obj-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.obj-toolbar h2 { margin: 0; }
.objects { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-items: start; }
.obj {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 18px 18px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 14px;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.obj:hover { border-color: var(--hover); box-shadow: var(--shadow); transform: translateY(-2px); }
.obj.hide { display: none; }
.obj-head { display: flex; align-items: center; gap: 14px; }
.obj-code {
  font-size: 30px; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  min-width: 64px;
}
.obj-title { flex: 1; min-width: 0; }
.obj-title a { color: var(--ink); font-weight: 700; font-size: 16px; }
.obj-title a:hover { color: var(--sber-dark); }
.obj-title .sub { font-size: 12.5px; }
.ring { flex: none; position: relative; width: 52px; height: 52px; }
.ring svg { transform: rotate(-90deg); }
.ring .rv { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; }
.ring circle.prog { transition: stroke-dashoffset 1s var(--ease); }

.subs { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink);
  background: var(--chip); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 9px 4px 8px;
  max-width: 100%;
}
.chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stack { display: flex; height: 6px; border-radius: 6px; overflow: hidden; background: var(--line-2); }
.stack i { display: block; height: 100%; }
.stack .s-none { background: var(--s-none); }
.stack .s-smr { background: var(--s-smr); }
.stack .s-pnr { background: var(--s-pnr); }
.stack .s-remarks { background: var(--s-remarks); }
.stack .s-done { background: var(--s-done); }

.obj-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); }
.obj-foot b { color: var(--ink); font-weight: 600; }
.obj-foot .meta { display: flex; gap: 12px; }
.obj-foot svg { vertical-align: -2px; margin-right: 3px; }

/* ---------- Страница объекта ---------- */
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.obj-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center;
  background: var(--head); color: #fff; border-radius: var(--r-l); padding: 24px 28px; margin-bottom: 16px; position: relative; overflow: hidden;
}
.obj-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 220px at 100% 0, rgba(33,160,56,.25), transparent 65%); pointer-events: none; }
.obj-hero > * { position: relative; }
.obj-hero .obj-code { font-size: 64px; }
.obj-hero h1 { color: #fff; margin: 0 0 6px; font-size: 26px; }
.obj-hero .sub { color: var(--head-muted); }
.obj-hero .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.obj-hero .btn { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.14); }
.obj-hero .btn:hover { background: rgba(255,255,255,.16); }
.obj-hero .btn.primary { background: var(--sber); border-color: var(--sber); }
.hero-leds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hero-leds .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); color: #e4e9ec; }
.hero-leds .led.s-none { --c: #6b747b; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; }
.kpi .v { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.kpi .l { font-size: 13px; color: var(--muted); }

.obj-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; margin-bottom: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-head h3 { margin: 0; }

.sys { border-top: 1px solid var(--line-2); padding: 14px 0; display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(170px, 1.2fr) minmax(150px, 1fr); gap: 16px; align-items: start; }
.sys:first-of-type { border-top: 0; padding-top: 4px; }
.sys-name { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.sys-status { font-size: 13px; color: var(--muted); margin-top: 4px; }
.sys select { font-size: 13px; padding: 6px 8px; margin-top: 6px; }
.sys-meta { font-size: 13px; color: var(--muted); display: grid; gap: 2px; }
.sys-meta b { color: var(--ink); font-weight: 600; }
.prog { height: 8px; background: var(--line-2); border-radius: 8px; overflow: hidden; margin: 6px 0 4px; }
.prog i { display: block; height: 100%; background: var(--grad); border-radius: 8px; width: 0; transition: width .9s var(--ease); }
.sys-notes { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; }
.sys-notes:empty { display: none; }
.sys-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.sys-docs-panel { grid-column: 1 / -1; }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--line-2); }
.tl { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 8px 0; }
.tl-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 2px solid var(--line); color: var(--muted); z-index: 1; }
.tl-ico svg { width: 15px; height: 15px; }
.tl.k-letter .tl-ico { border-color: var(--sber); color: var(--sber); }
.tl.k-incoming .tl-ico { border-color: var(--sky); color: var(--sky); }
.tl.k-file .tl-ico { border-color: var(--teal); color: var(--teal); }
.tl.k-event .tl-ico { border-color: #c9d0d5; }
.tl-body { min-width: 0; font-size: 13.5px; }
.tl-title { font-weight: 600; word-break: break-word; }
.tl-title a { color: var(--ink); }
.tl-meta { font-size: 12.5px; color: var(--muted); }
.tl-when { font-size: 12px; color: var(--muted); }
.tl-day { font-size: 12px; font-weight: 700; color: var(--muted); padding: 10px 0 2px 44px; }

.files { list-style: none; margin: 0; padding: 0; }
.files li { display: grid; grid-template-columns: 20px 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-2); }
.files li:first-child { border-top: 0; }
.file-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--sber-soft); color: var(--sber-dark); font-size: 10.5px; font-weight: 800; }
.files .fn { font-size: 13.5px; font-weight: 600; word-break: break-all; }
.files .fm { font-size: 12px; color: var(--muted); }

.tabs { display: flex; flex-wrap: wrap; gap: 2px; background: var(--line-2); border-radius: 10px; padding: 3px; }
.tabs button { font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: transparent; color: var(--muted); padding: 5px 9px; border-radius: 8px; cursor: pointer; }
.tabs button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---------- Зона перетаскивания файлов ---------- */
.drop {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-m); padding: 18px; text-align: center; color: var(--muted);
  font-size: 13.5px; cursor: pointer; transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over { border-color: var(--sber); background: var(--sber-soft); color: var(--sber-dark); }
.drop b { color: var(--ink); }
.drop input { display: none; }
.picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.picked .chip button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 0 0 2px; font-size: 14px; line-height: 1; }

/* ---------- Окно письма по объекту ---------- */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 16px; }
.tpl {
  text-align: left; font: inherit; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 10px 12px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tpl:hover { border-color: var(--hover); }
.tpl.on { border-color: var(--sber); background: var(--sber-soft); }
.tpl b { display: block; font-size: 13.5px; }
.tpl span { font-size: 12px; color: var(--muted); }
.rcpts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rcpt { font: inherit; font-size: 12.5px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.rcpt.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.step { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 8px; }

/* ---------- Создание письма (общая форма) ---------- */
.compose { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.contacts-pick { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-s); }
.contacts-pick label { display: flex; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line-2); cursor: pointer; font-size: 13px; }
.contacts-pick label:last-child { border-bottom: 0; }
.contacts-pick .org { color: var(--muted); }
.vars .field { margin-bottom: 8px; }

/* ---------- Модальное окно, подсказки, уведомления ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(21, 24, 27, .5); backdrop-filter: blur(3px); display: none; align-items: flex-start; justify-content: center; padding: 5vh 16px; z-index: 50; overflow: auto; }
.modal-bg.open { display: flex; animation: fade .2s ease-out; }
.modal { background: var(--panel); border-radius: var(--r-l); width: min(760px, 100%); padding: 24px 26px; box-shadow: 0 30px 80px rgba(0,0,0,.3); animation: rise .25s var(--ease); }
.modal.wide { width: min(980px, 100%); }
.modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.modal-head .obj-code { font-size: 34px; min-width: 0; }
.modal-head h3 { margin: 0; font-size: 19px; }
.modal-head .x { margin-left: auto; }
.modal .meta { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 13.5px; margin-bottom: 14px; }
.modal .meta dt { color: var(--muted); }
.modal .meta dd { margin: 0; word-break: break-word; }
.modal pre { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; font-family: inherit; font-size: 13.5px; max-height: 50vh; overflow: auto; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.compose-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.err-box { color: var(--bad); background: #fdecea; border-radius: var(--r-s); padding: 9px 12px; font-size: 13.5px; }

#tip {
  position: fixed; z-index: 70; pointer-events: none; opacity: 0; transform: translateY(4px);
  background: var(--head); color: #fff; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; max-width: 300px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: opacity .12s, transform .12s;
}
#tip.on { opacity: 1; transform: none; }
#tip b { display: block; font-size: 13px; margin-bottom: 2px; }
#tip .t-row { display: flex; align-items: center; gap: 7px; color: #cfd6da; }
#tip .t-note { color: #9aa3aa; margin-top: 4px; white-space: pre-wrap; }

#toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 80; }
.toast { background: var(--head); color: #fff; border-radius: 12px; padding: 11px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: 380px; font-size: 13.5px; border-left: 4px solid var(--teal); animation: rise .25s var(--ease); }
.toast.bad { border-left-color: #ef4444; }
.toast.ok { border-left-color: var(--sber); }

/* ---------- Вход ---------- */
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-art { background: var(--head); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 400px at 90% 10%, rgba(17,165,154,.28), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(33,160,56,.25), transparent 60%); }
.login-art > * { position: relative; }
.login-art h1 { font-size: 40px; max-width: 14ch; margin: 0 0 12px; }
.login-art p { color: var(--head-muted); max-width: 44ch; margin: 0; }
.login-leds { display: grid; grid-template-columns: repeat(12, 18px); gap: 6px; margin-top: 28px; }
.login-leds i { width: 18px; height: 18px; border-radius: 5px; background: #3a4046; }
.login-side { display: grid; place-items: center; padding: 24px; background: var(--bg); }
.login-box { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: 30px; box-shadow: var(--shadow); }
.login-box h2 { margin-bottom: 18px; }

/* ---------- Роль «Читатель» ---------- */
body.as-reader .admin-only, body.as-engineer .admin-only, body.as-manager .admin-only,
body.as-reader .edit-only, body.as-manager .edit-only,
body.as-reader .plan-only,
body.as-reader .oversee-only, body.as-engineer .oversee-only { display: none !important; }
/* Руководителю почта для отправки нужна для недельного отчёта. */
body.as-manager .edit-only.mail-out { display: block !important; }

@media (max-width: 1100px) {
  .charts { grid-template-columns: 1fr; }
  .obj-grid { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .topbar { padding: 0 16px; gap: 14px; height: auto; flex-wrap: wrap; padding-top: 10px; }
  .nav { order: 3; width: 100%; height: 44px; }
  .brand-sub, .brand-sep, .me .role { display: none; }
  .main { padding: 18px 16px 48px; }
  .hero { grid-template-columns: 1fr; }
  .compose, .compose-2, .grid2, .grid3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .obj-hero { grid-template-columns: 1fr; }
  .obj-hero .actions { justify-content: flex-start; }
  .sys { grid-template-columns: 1fr; }
  .login-page { grid-template-columns: 1fr; }
  .login-art { display: none; }
  h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body.as-admin .reader-only, body.as-engineer .reader-only { display: none !important; }

/* ---------- Подсистема: кнопка-чип и смена статуса ---------- */
button.chip { font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .15s, background .15s; }
button.chip:hover { border-color: var(--sber); background: var(--surface); }
.hero-leds button.chip:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.st-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.st-opt {
  display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px;
  cursor: pointer; font-size: 13.5px; transition: border-color .15s, background .15s;
}
.st-opt input { position: absolute; opacity: 0; pointer-events: none; }
.st-opt:hover { border-color: var(--hover); }
.st-opt:has(input:checked) { border-color: var(--ink); background: var(--surface-2); box-shadow: 0 0 0 1px var(--ink); }
.st-opt:has(input:focus-visible) { outline: 2px solid var(--sky); outline-offset: 2px; }
.st-opt em { font-style: normal; font-size: 11.5px; color: var(--muted); }

/* ---------- Реестры ---------- */
.reg-tabs { margin-bottom: 18px; display: inline-flex; }
.reg-tabs button { font-size: 14px; padding: 7px 14px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; }
.tile .v { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.tile .l { font-size: 13px; color: var(--muted); }
.tile.warn .v { color: var(--bad); }
.reg-grid { display: flex; flex-direction: column-reverse; gap: 16px; }
.reg-grid .panel { margin-bottom: 0; }
.reg-grid .hbars { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 28px; }
.hbars { display: grid; gap: 9px; }
.hbar { display: grid; grid-template-columns: 44px 1fr 34px; gap: 10px; align-items: center; font-size: 12.5px; cursor: default; }
.hbar b { font-weight: 700; }
.hbar .tr { height: 10px; border-radius: 6px; background: var(--line-2); overflow: hidden; display: flex; }
.hbar .tr i { display: block; height: 100%; transition: width .8s var(--ease); width: 0; }
.hbar .n { text-align: right; color: var(--muted); }
.kind-temp { color: #a35f00; background: #fff4dc; }
.kind-perm { color: var(--sber-dark); background: var(--sber-soft); }
.dup { color: var(--bad); font-weight: 700; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
td .row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.overdue { color: var(--bad); font-weight: 600; }
.suggest { border: 1px dashed #e0b25c; background: #fffaf0; border-radius: var(--r-m); padding: 12px 14px; margin-bottom: 16px; font-size: 13.5px; }
.suggest ul { margin: 6px 0 0; padding-left: 18px; }
.suggest li { margin: 4px 0; }
@media (max-width: 1100px) { .reg-grid { grid-template-columns: 1fr; } .tiles { grid-template-columns: repeat(2, 1fr); } }


/* ---------- Тёмная тема ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --head: #0d0f11;
  --head-2: #16191c;
  --bg: #111315;
  --panel: #181b1e;
  --surface: #1f2326;
  --surface-2: #1c2023;
  --chip: #22272b;
  --row-hover: #1e2226;
  --ink: #e6eaec;
  --ink-2: #c8cfd3;
  --muted: #959fa6;
  --line: #2a3034;
  --line-2: #23282c;
  --border-strong: #363d42;
  --hover: #4a5258;
  --sber: #2bb24a;
  --sber-dark: #43c561;
  --sber-soft: rgba(43, 178, 74, .15);
  --s-none: #5d666d;
  --s-smr: #8e989f;
  --bad: #ff6b55;
  --warn: #f0b440;
  --info: #6aa8ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -12px rgba(0, 0, 0, .7);
}
:root[data-theme="dark"] .field-panel,
:root[data-theme="dark"] .obj-hero,
:root[data-theme="dark"] .login-art { box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="dark"] .btn.primary { color: #fff; }
:root[data-theme="dark"] .st-queued    { background: rgba(106, 168, 255, .14); }
:root[data-theme="dark"] .st-sending   { background: rgba(240, 180, 64, .14); }
:root[data-theme="dark"] .st-dry_run   { color: #b3a8ff; background: rgba(140, 120, 255, .16); }
:root[data-theme="dark"] .st-failed    { background: rgba(255, 107, 85, .14); }
:root[data-theme="dark"] .ch-telegram  { color: #6cc4ff; background: rgba(60, 170, 255, .14); }
:root[data-theme="dark"] .ch-max       { color: #b3a8ff; background: rgba(140, 120, 255, .16); }
:root[data-theme="dark"] .kind-temp    { color: #f3c063; background: rgba(240, 173, 0, .15); }
:root[data-theme="dark"] .err-box      { background: rgba(255, 107, 85, .12); }
:root[data-theme="dark"] .suggest      { background: rgba(240, 173, 0, .07); border-color: rgba(240, 173, 0, .35); }
:root[data-theme="dark"] .file-ico     { color: var(--sber-dark); }
:root[data-theme="dark"] .modal-bg     { background: rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .modal        { border: 1px solid var(--line); }
:root[data-theme="dark"] .st-opt:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
:root[data-theme="dark"] .px.s-none    { background: #3d4449; }
:root[data-theme="dark"] .led.s-none   { --c: #6b747b; }
:root[data-theme="dark"] #tip, :root[data-theme="dark"] .toast { background: #262b2f; border: 1px solid #343a3f; }
:root[data-theme="dark"] .obj-tag      { color: var(--ink); }

/* Переключатель темы */
.theme-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #d6dce0; cursor: pointer;
  transition: background .15s, color .15s;
}
.theme-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.theme-btn svg { width: 17px; height: 17px; }
.theme-btn .moon { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .moon { display: block; }
.login-side .theme-btn { position: absolute; top: 18px; right: 18px; color: var(--muted); border-color: var(--line); background: var(--panel); }
.login-side { position: relative; }

/* ---------- Календарь ---------- */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.cal-wd { font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cal-day { min-height: 104px; padding: 6px 6px 8px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; transition: background .15s; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day:hover { background: var(--row-hover); }
.cal-day.out { opacity: .45; }
.cal-day.we .cal-n { color: var(--bad); }
.cal-day.sel { background: var(--sber-soft); }
.cal-n { font-size: 12.5px; font-weight: 600; color: var(--muted); align-self: flex-end; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.cal-day.today .cal-n { background: var(--sber); color: #fff; }
.cal-more { font-size: 11.5px; color: var(--muted); padding-left: 4px; }
.ev {
  --k: var(--s-smr); font: inherit; font-size: 11.5px; text-align: left; border: 0; cursor: pointer; color: var(--ink);
  background: color-mix(in srgb, var(--k) 14%, transparent); border-left: 3px solid var(--k); border-radius: 5px; padding: 2px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.ev:hover { background: color-mix(in srgb, var(--k) 26%, transparent); }
.ev-t { font-weight: 700; margin-right: 4px; }
.ev.done { text-decoration: line-through; opacity: .55; }
.ev.late { box-shadow: inset 0 0 0 1px var(--bad); }
.k-task { --k: #6f7d87; } .k-acceptance { --k: var(--sber); } .k-pnr { --k: var(--s-pnr); } .k-psi { --k: var(--sky); }
.k-meeting { --k: #8b6fd6; } .k-deadline { --k: var(--s-remarks); } .k-other { --k: #a3896b; }
.kind-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--k); margin-right: 7px; vertical-align: 0; }
.ev-list { list-style: none; margin: 0; padding: 0; }
.ev-row { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line-2); }
.ev-row:first-child { border-top: 0; }
.ev-row input { margin-top: 3px; accent-color: var(--sber); width: 16px; height: 16px; }
.ev-body { cursor: pointer; min-width: 0; }
.ev-title { font-weight: 600; font-size: 13.5px; }
.ev-row.done .ev-title { text-decoration: line-through; color: var(--muted); }
.kind-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.kind-opt { --k: var(--s-smr); position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 10px; cursor: pointer; }
.kind-opt::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--k); }
.kind-opt input { position: absolute; opacity: 0; pointer-events: none; }
.kind-opt:has(input:checked) { border-color: var(--k); background: color-mix(in srgb, var(--k) 14%, transparent); }

#reminders { position: fixed; right: 20px; top: 76px; z-index: 85; display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 32px)); }
.reminder { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--sber); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); animation: rise .3s var(--ease); }
.rm-head { font-size: 12px; font-weight: 700; color: var(--sber-dark); }
.rm-title { font-weight: 700; margin: 2px 0; }
.rm-meta { font-size: 12.5px; color: var(--muted); }
.rm-actions { display: flex; gap: 6px; margin-top: 10px; }
.me-link { color: inherit !important; text-decoration: none !important; }
.me-link:hover .who { text-decoration: underline; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸ "; }
details[open] > summary::before { content: "▾ "; }
@media (max-width: 1100px) { .cal-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .cal-day { min-height: 64px; } .ev { font-size: 0; padding: 0; height: 6px; } }

/* ---------- Анимированный логотип СберСити ---------- */
.sc-logo { position: relative; display: inline-block; width: 58px; height: 26px; flex: none; }
.sc-logo i { position: absolute; inset: 0; display: block;
  -webkit-mask: url(/static/brand/sbercity-mark.png) center / contain no-repeat; mask: url(/static/brand/sbercity-mark.png) center / contain no-repeat; }
.sc-flow { background: linear-gradient(100deg, #21a038 0%, #2fc26b 22%, #11a59a 45%, #1fb6c9 60%, #21a038 80%, #2fc26b 100%);
  background-size: 260% 100%; animation: sc-flow 6s linear infinite; }
.sc-shine { background: linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.95) 48%, transparent 58% 100%);
  background-size: 300% 100%; animation: sc-shine 3.2s ease-in-out infinite; mix-blend-mode: screen; }
.sc-glow { background: #2fc26b; filter: blur(7px); opacity: .35; transform: scale(1.04); animation: sc-glow 3.2s ease-in-out infinite; }
.sc-logo { animation: sc-float 6s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes sc-flow { from { background-position: 0% 0; } to { background-position: -260% 0; } }
@keyframes sc-shine { 0% { background-position: 150% 0; } 60%, 100% { background-position: -150% 0; } }
@keyframes sc-glow { 0%, 100% { opacity: .18; } 50% { opacity: .55; } }
@keyframes sc-float { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-1.5px) rotate(-2deg); } 75% { transform: translateY(1px) rotate(1.5deg); } }
.login-card .sc-logo, .login-art .sc-logo { width: 72px; height: 32px; }
@media (prefers-reduced-motion: reduce) {
  .sc-logo, .sc-flow, .sc-glow { animation-duration: 30s; }
  .sc-shine { animation: none; opacity: 0; }
}

/* ---------- Карта IP и проверка адресов ---------- */
.ip-rules { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 10px 12px; margin: 4px 0 12px; background: var(--surface-2); }
.ip-rules .step { margin: 0 0 8px; font-weight: 600; }
.ip-check { margin-top: 8px; font-size: 13px; }
.chk-ok { color: var(--sber); }
.chk-warn { color: var(--s-remarks, #d89b00); }
.chk-warn.small, .small { font-size: 12px; }
.map-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.map-grid .tbl td:first-child { width: 42%; }
.map-grid .tbl td:nth-child(3) { width: 180px; }
.map-pool .panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.meter { height: 6px; border-radius: 4px; background: var(--chip); overflow: hidden; margin-bottom: 3px; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--sber), #11a59a); border-radius: 4px; transition: width .6s; }
.empty-big { text-align: center; padding: 48px 16px; }
.empty-big b { font-size: 18px; }
.pw { font-family: ui-monospace, monospace; }
@media (max-width: 560px) { .map-grid { grid-template-columns: 1fr; } }
@media (max-width: 1560px) { .topbar .brand-sub, .topbar .sep2 { display: none; } }
.login-art .sc-logo.sc-hero { width: 240px; height: 108px; align-self: flex-start; margin: 8px 0; }
.sc-hero .sc-glow { filter: blur(18px); }
@media (max-width: 1600px) { .nav a { padding-left: 7px; padding-right: 7px; font-size: 13.5px; } .topbar { gap: 16px; } .me { gap: 10px; } }

/* ---------- Документы подсистем и акты о несоответствии ---------- */
.docs-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.segs { display: flex; flex-wrap: wrap; gap: 6px; }
.seg { font: inherit; font-size: 13px; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.seg b { font-weight: 700; color: var(--muted); margin-left: 2px; }
.seg:hover { border-color: var(--border-strong); }
.seg.on { border-color: var(--sber); background: var(--sber-soft); }
.seg.on b { color: var(--sber-dark); }
.seg-bad b { color: var(--s-pnr); }
.seg-bad.on { border-color: var(--s-pnr); background: color-mix(in srgb, var(--s-pnr) 12%, transparent); }
.docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.doc { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.doc.is-open { border-left: 4px solid var(--s-pnr); }
.doc-kind { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); align-self: start;
  background: var(--line-2); border-radius: 8px; padding: 6px 4px; text-align: center; }
.doc.k-nc_act .doc-kind { color: var(--s-pnr); background: color-mix(in srgb, var(--s-pnr) 12%, transparent); }
.doc.k-protocol .doc-kind, .doc.k-act .doc-kind { color: var(--sber-dark); background: var(--sber-soft); }
.doc.k-pmi .doc-kind { color: #0b74b5; background: #e8f4fc; }
.doc.k-warranty .doc-kind { color: #8a5a00; background: #fff5e0; }
.doc-title { font-weight: 700; }
.doc-desc { white-space: pre-wrap; margin: 4px 0; font-size: 13.5px; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.doc-meta b { color: var(--ink); font-weight: 600; }
.doc-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.doc-file { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: 12.5px; max-width: 100%; }
.doc-file a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-file .file-ico { font-style: normal; font-size: 9px; width: 26px; height: 18px; }
.doc-file .rm-file { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0 2px; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.btn.armed { color: #fff !important; background: var(--bad) !important; border-color: var(--bad) !important; }
.nc-open { color: var(--s-pnr); background: color-mix(in srgb, var(--s-pnr) 12%, transparent); }
.nc-overdue { color: #fff; background: var(--s-pnr); }
.nc-fixed { color: var(--sber-dark); background: var(--sber-soft); }
.nc-cancel { color: var(--muted); background: var(--line-2); }
.txt-bad { color: var(--s-pnr) !important; }
.nc-dot { font-style: normal; display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--s-pnr); color: #fff; font-size: 10.5px; font-weight: 700; margin-left: 4px; }
.nc-meta { color: var(--s-pnr); font-weight: 700; }
.empty-docs { color: var(--muted); padding: 18px; text-align: center; border: 1.5px dashed var(--line); border-radius: 12px; }
.docs-box, .sys-docs-panel { position: relative; border-radius: 12px; transition: background .2s; }
.sys-docs-panel { margin-top: 12px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.drop-over { background: color-mix(in srgb, var(--sber) 8%, transparent); outline: 2px dashed var(--sber); outline-offset: 2px; }
.sys-docs.on { border-color: var(--sber); background: var(--sber-soft); }
.add-doc { position: relative; }
.add-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 280px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 6px; }
.add-doc.open .add-menu { display: block; }
.add-menu button { display: block; width: 100%; text-align: left; font: inherit; font-size: 13.5px; background: none; border: 0; color: var(--ink); padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.add-menu button:hover { background: var(--hover); }
.doc-kinds label { position: relative; display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.doc-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.doc-kinds label:has(input:checked) { border-color: var(--sber); background: var(--sber-soft); font-weight: 600; }
.doc-kinds { margin-bottom: 14px; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
label.check input { accent-color: var(--sber); width: 16px; height: 16px; }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.small { font-size: 12px; padding: 2px 8px; margin: 2px 4px 2px 0; }
[data-theme="dark"] .doc.k-pmi .doc-kind { background: #10324a; color: #7cc3f0; }
[data-theme="dark"] .doc.k-warranty .doc-kind { background: #3a2c0c; color: #f0c56b; }
@media (max-width: 640px) { .doc { grid-template-columns: 1fr; } .doc-kind { justify-self: start; padding: 4px 10px; } }

/* ---------- Меню пользователя и быстрый выбор учётной записи ---------- */
.me-menu { position: relative; }
#me-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid transparent; border-radius: 10px; padding: 6px 10px; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
#me-toggle:hover, .me-menu.open #me-toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.me-role { color: var(--head-muted); font-size: 12px; }
.me-drop { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 90; }
.me-menu.open .me-drop { display: block; animation: rise .18s var(--ease); }
.me .me-drop a { display: block; color: var(--ink); padding: 9px 12px; border-radius: 8px; font-size: 14px; text-decoration: none; }
.me .me-drop a:hover { background: var(--hover); color: var(--ink); }
.me .me-drop a.danger { color: var(--bad); }
.sound-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: #c9d0d5; display: grid; place-items: center; cursor: pointer; }
.sound-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.sound-btn svg { width: 18px; height: 18px; }
.accounts { margin: 4px 0 14px; }
.acc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.acc { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 10px; cursor: pointer; background: var(--surface); }
.acc:hover { border-color: var(--border-strong); }
.acc.on { border-color: var(--sber); background: var(--sber-soft); }
.acc-ava { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: #6b7780; flex: none; }
.acc-ava.r-admin { background: linear-gradient(135deg, #21a038, #11a59a); }
.acc-ava.r-engineer { background: linear-gradient(135deg, #1f8fd6, #11a59a); }
.acc-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.acc-txt b { font-size: 14px; }
.acc-txt span { font-size: 12px; color: var(--muted); }
.acc-rm { border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; }
.acc-rm:hover { color: var(--bad); }

/* ---------- Звук ---------- */
.sound-btn.muted { color: #8e989f; }
.sound-panel { margin-top: 18px; }
.sound-panel.off .snd-vol, .sound-panel.off .snd-list { opacity: .45; }
.snd-vol { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.snd-vol input[type=range] { flex: 1; max-width: 360px; accent-color: var(--sber); }
.snd-list { list-style: none; margin: 0 0 8px; padding: 0; }
.snd-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span { width: 38px; height: 22px; border-radius: 11px; background: var(--border-strong); position: relative; transition: background .2s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + span { background: var(--sber); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--sber); outline-offset: 2px; }

/* ---------- Синхронизация ---------- */
.sync-wrap { position: relative; }
.sync-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: transparent; color: #e6ebee; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sync-pill:hover { background: rgba(255,255,255,.08); }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #8e989f; }
.sync-pill.on .sync-dot { background: #3ccf5e; box-shadow: 0 0 0 3px rgba(60,207,94,.2); }
.sync-pill.off .sync-dot { background: #f0ad00; }
.sync-pill.busy .sync-dot { background: #4fb3ff; animation: syncpulse 1s ease-in-out infinite; }
@keyframes syncpulse { 50% { opacity: .3; } }
.sync-n { background: #f0ad00; color: #1b1f22; border-radius: 9px; padding: 0 6px; font-size: 11px; line-height: 17px; }
.sync-drop { display: none; position: absolute; right: 0; top: calc(100% + 8px); width: 300px; background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; z-index: 90; font-size: 13px; white-space: normal; }
.sync-wrap.open .sync-drop { display: block; animation: rise .18s var(--ease); }
.sd-row { margin-bottom: 6px; }
.sd-actions { display: flex; gap: 8px; margin-top: 10px; }
.sync-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
#sp-nodes { grid-column: 1 / -1; order: 5; }
.sync-how { order: 6; }
.sync-state.on { border-top: 4px solid var(--sber); }
.sync-state.off { border-top: 4px solid #f0ad00; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0 0 16px; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; }
.steps-list { padding-left: 20px; line-height: 1.6; }
.steps-list li { margin-bottom: 6px; }
.sync-how ul { padding-left: 18px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 900px) { .sync-grid { grid-template-columns: 1fr; } }

/* ---------- Справка ---------- */
.help-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
.help-toc { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow: auto; }
.help-toc input { margin-bottom: 12px; }
.toc-group { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 4px; }
.help-toc nav a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--ink); font-size: 14px; text-decoration: none; }
.help-toc nav a:hover { background: var(--hover); }
.help-toc nav a.on { background: var(--sber-soft); color: var(--sber-dark); font-weight: 600; }
.help-body { padding: 8px 32px 24px; max-width: 860px; }
.help-sec { padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.help-sec:last-child { border-bottom: 0; }
.help-group { font-size: 11.5px; font-weight: 700; color: var(--sber); text-transform: uppercase; letter-spacing: .06em; }
.help-sec h2 { margin: 4px 0 10px; font-size: 22px; }
.help-sec p, .help-sec li { line-height: 1.65; font-size: 15px; }
.help-sec ul, .help-sec ol { padding-left: 22px; }
.help-sec li { margin-bottom: 4px; }
.help-tip { background: var(--sber-soft); border-left: 4px solid var(--sber); border-radius: 8px; padding: 10px 14px; margin: 10px 0; line-height: 1.6; }
.help-tip::before { content: "Совет. "; font-weight: 700; color: var(--sber-dark); }
.help-faq { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
.help-faq summary { cursor: pointer; font-weight: 600; }
.help-faq p { margin: 8px 0 0; }
.help-found { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; margin-top: 16px; }
mark { background: #ffe58a; color: inherit; border-radius: 3px; padding: 0 1px; }
[data-theme="dark"] mark { background: #7a6510; }
@media (max-width: 860px) { .help-layout { grid-template-columns: 1fr; } .help-toc { position: static; max-height: none; } .help-body { padding: 8px 18px; } }
@media print {
  .topbar, .help-toc, #view-help .hero .toolbar, #toasts, #reminders, #tip { display: none !important; }
  .view { display: none !important; }
  #view-help { display: block !important; }
  .help-layout { display: block; }
  .help-body { box-shadow: none; border: 0; max-width: none; padding: 0; }
  .help-faq { break-inside: avoid; }
  .help-faq:not([open]) p { display: block; }
  body { background: #fff; }
}
.me-head { padding: 8px 12px 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; display: flex; flex-direction: column; }
.me-head b { color: var(--ink); font-size: 14px; }
.me-head span { color: var(--muted); font-size: 12px; }
.me-sep { height: 1px; background: var(--line-2); margin: 4px 0; }
.me-cap { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 12px 2px; }
.me .me-drop a.active { background: var(--sber-soft); color: var(--sber-dark); }

/* ---------- Пульс: шапка ---------- */
.brand .brand-word { font-weight: 800; font-size: 21px; letter-spacing: -0.01em; }
.login-art .brand .sc-logo { width: 84px; height: 38px; }
.login-art .brand .brand-word { font-size: 30px; }

/* ---------- Главная: этапы готовности ---------- */
.pulse-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0; margin-bottom: 14px;
  background: var(--head); color: #fff; border-radius: var(--r-l); }
.pulse-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 220px at 100% 0, rgba(17,165,154,.22), transparent 60%), radial-gradient(500px 200px at 0 100%, rgba(33,160,56,.14), transparent 60%); }
.pulse-main { position: relative; padding: 20px 24px; min-width: 0; }
.pulse-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pulse-top h3 { margin: 0; font-size: 16px; color: #fff; }
.pulse-top .sub { color: var(--head-muted); }
.pulse-top .sub b { color: #fff; }
.stage-bar { display: flex; height: 30px; border-radius: 10px; overflow: hidden; gap: 3px; margin-bottom: 14px; }
.stage-bar i { display: flex; align-items: center; justify-content: center; min-width: 26px; cursor: pointer; font-style: normal; font-size: 12.5px; font-weight: 700;
  color: #fff; transition: opacity .2s, filter .2s; animation: grow .8s var(--ease) both; transform-origin: left; }
.stage-bar i:hover { filter: brightness(1.15); }
.stage-bar i.dim { opacity: .25; }
.stage-bar .s-none { background: #4a5157; }
.stage-bar .s-smr { background: #6b7780; }
.stage-bar .s-pnr { background: var(--s-pnr); }
.stage-bar .s-remarks { background: var(--s-remarks); color: #2a1f00; }
.stage-bar .s-done { background: var(--s-done); }
@keyframes grow { from { transform: scaleX(0); } }
.stages { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 6px; }
.stage { font: inherit; color: #e6ebee; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: background .2s, opacity .2s, transform .2s var(--ease); min-width: 0; }
.stage:hover { background: rgba(255,255,255,.09); transform: translateY(-1px); }
.stage.on { background: #fff; color: #15181b; border-color: #fff; }
.stage.dim { opacity: .45; }
.stage-step { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--head-muted); }
.stage.on .stage-step { color: #69737b; }
.stage-n { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.stage-n small { font-size: 12px; font-weight: 600; color: var(--head-muted); margin-left: 6px; letter-spacing: 0; }
.stage.on .stage-n small { color: #69737b; }
.stage-l { display: flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage .led.s-none { --c: #6b747b; }
.stage-arrow { align-self: center; color: #5b646b; font-size: 22px; line-height: 1; }
.pulse-side { position: relative; padding: 18px 22px; border-left: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.mini-donut { display: flex; align-items: center; gap: 14px; }
.md-cap { display: flex; flex-direction: column; gap: 2px; }
.md-cap b { font-size: 15px; }
.md-cap span { font-size: 12.5px; color: var(--head-muted); }
.pulse-side .kv { font-size: 13px; }
.pulse-side .kv span:nth-child(odd) { color: var(--head-muted); }
.pulse-side .kv span:nth-child(even) { color: #fff; }
.bars-card { margin-bottom: 22px; }
.bars-card .bars { min-height: 190px; }
.ds-at { color: var(--muted); cursor: help; }
@media (max-width: 1100px) {
  .pulse-panel { grid-template-columns: 1fr; }
  .pulse-side { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .stages { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stage-arrow { display: none; }
}
@media (max-width: 700px) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Плотные карточки и таблица объектов ---------- */
.obj { padding: 14px 14px 12px; gap: 10px; }
.obj-head { gap: 10px; }
.obj-code { font-size: 24px; min-width: 50px; }
.obj-title a { font-size: 15px; }
.obj .ring { width: 44px; height: 44px; }
.obj .ring .rv { font-size: 11px; }
.obj .subs { gap: 5px; }
.obj .chip { font-size: 12px; padding: 3px 8px 3px 7px; }
.obj-foot { font-size: 12.5px; }
.obj-toolbar-l { display: flex; align-items: center; gap: 14px; }
.objects.as-table { display: block; }
.obj-table { width: 100%; }
.obj-table td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
.obj-table tr.obj { cursor: pointer; }
.obj-table tr.obj:hover td { background: var(--row-hover); }
.obj-table tr.obj.hide { display: none; }
.ot-name { white-space: nowrap; }
.ot-code { display: inline-block; min-width: 44px; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; margin-right: 8px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ot-name a { color: var(--ink); font-weight: 600; }
.ot-sig { display: flex; align-items: center; gap: 8px; }
.ot-sig .prog { flex: 1; height: 6px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.ot-sig .prog i { display: block; height: 100%; background: var(--grad); border-radius: 4px; }
.obj-table .subs { max-width: 560px; }

/* ---------- Загрузка таблицы ---------- */
.imp-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 34px 20px; }
.imp-drop b { font-size: 15px; color: var(--ink); }
.imp-drop.busy { opacity: .7; pointer-events: none; }
.imp-ico, .imp-file { color: var(--sber); }
.imp-file { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--sber-soft); flex: none; }
.imp-notes { margin: 14px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.imp-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 4px 0 16px; }
.imp-tile { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.imp-tile b { font-size: 24px; line-height: 1.1; }
.imp-tile span { font-size: 12px; color: var(--muted); }
.imp-tile.add b { color: var(--sber); }
.imp-tile.st b { color: var(--s-pnr); }
.imp-tile.chg b { color: #1f8fd6; }
.imp-tile.zero b { color: var(--muted); }
.imp-same { background: var(--sber-soft); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.imp-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; margin-bottom: 12px; }
.imp-st { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer; font-size: 13.5px; }
.imp-st input { accent-color: var(--sber); width: 16px; height: 16px; }
.imp-st:has(input:not(:checked)) { opacity: .5; }
.imp-from { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.imp-arrow { color: var(--muted); }
.imp-to { font-weight: 600; }
.imp-opt { margin: 8px 0; align-items: flex-start; line-height: 1.5; }
.imp-details { margin: 8px 0; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px; }
.imp-details summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.imp-details .imp-list { margin: 10px 0 2px; }
.imp-chg { padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.imp-f { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; padding: 2px 0 2px 8px; }
.imp-f > span:first-child { color: var(--muted); }
.imp-miss { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
@media (max-width: 700px) { .imp-tiles { grid-template-columns: repeat(2, 1fr); } .imp-f { grid-template-columns: 1fr; } }
.objects.masonry { display: grid; grid-template-columns: repeat(var(--mcols), minmax(0, 1fr)); gap: 12px; align-items: start; }
.objects.masonry > .empty { grid-column: 1 / -1; }
.mcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bars-card .bars { flex: none; height: 210px; min-height: 0; }
.stage-l { white-space: normal; line-height: 1.25; font-size: 12px; align-items: flex-start; }
.stage-l .led { margin-top: 3px; flex: none; }
.obj-table tr.obj { display: table-row; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; gap: 0; }
.obj-table tr.obj:hover { transform: none; box-shadow: none; }
.tpl-preview { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 10px 12px; margin: 4px 0 12px; background: var(--surface-2); }
.tpl-text { white-space: pre-wrap; font-size: 13px; line-height: 1.5; max-height: 220px; overflow: auto; margin-top: 6px; color: var(--ink-2); }
#s-retext { margin-left: 8px; vertical-align: middle; }

/* ---------- Скачивание документов ---------- */
.doc { grid-template-columns: 112px 1fr; }
.doc-side { display: flex; align-items: flex-start; gap: 8px; }
.doc-pick, .of-pick { display: inline-flex; padding-top: 6px; cursor: pointer; }
.doc-pick input, .of-pick input, .dl-all-pick input, .of-bar input { accent-color: var(--sber); width: 16px; height: 16px; cursor: pointer; }
.doc-pick input:disabled { opacity: .3; cursor: default; }
.doc-side .doc-kind { flex: 1; }
.doc.picked { border-color: var(--sber); background: color-mix(in srgb, var(--sber) 5%, var(--panel)); }
.dl-bar { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dl-all-pick { font-size: 13px; margin-right: 2px; }
.btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.btn svg { vertical-align: -2px; margin-right: 5px; }
.of-bar { margin-bottom: 8px; gap: 6px; }
.of-bar label { font-size: 13px; }
@media (max-width: 640px) { .doc { grid-template-columns: 1fr; } }

/* ---------- Вход: этапы готовности (декоративно) ---------- */
.login-stages { margin-top: 30px; max-width: 460px; }
.ls-bar { display: flex; gap: 3px; height: 14px; border-radius: 7px; overflow: hidden; }
.ls-bar i { display: block; transform-origin: left; animation: grow 1s var(--ease) both; }
.ls-bar i:nth-child(2) { animation-delay: .1s; } .ls-bar i:nth-child(3) { animation-delay: .2s; }
.ls-bar i:nth-child(4) { animation-delay: .3s; } .ls-bar i:nth-child(5) { animation-delay: .4s; }
.ls-bar .s-none { background: #4a5157; } .ls-bar .s-smr { background: #6b7780; } .ls-bar .s-pnr { background: var(--s-pnr); }
.ls-bar .s-remarks { background: var(--s-remarks); } .ls-bar .s-done { background: var(--s-done); }
.ls-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; font-size: 13px; color: var(--head-muted); }
.ls-steps span { display: inline-flex; align-items: center; gap: 6px; }
.ls-steps b { color: #5b646b; font-weight: 400; }
.ls-steps .led.s-none { --c: #6b747b; }

/* ---------- Вход: кардиограмма кварталов ---------- */
.login-art { justify-content: flex-start; }
.login-art .ecg { margin: 36px -48px 0; height: 260px; }
.login-art .ecg svg { width: 100%; height: 100%; overflow: visible; }
.ecg .base { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.ecg .grid line { stroke: rgba(255,255,255,.035); }
.ecg .trace { fill: none; stroke: url(#ecgGrad); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(33,160,56,.55)); stroke-dasharray: 1; stroke-dashoffset: 1; animation: ecgdraw 3.2s cubic-bezier(.45,.05,.2,1) forwards; }
@keyframes ecgdraw { to { stroke-dashoffset: 0; } }
.ecg .head { fill: #e9fff0; filter: drop-shadow(0 0 10px #2fe06b); animation: ecghead 1.4s ease-in-out 3.2s infinite; }
@keyframes ecghead { 50% { opacity: .35; } }
.ecg .lbl { font: 600 11px Onest, system-ui, sans-serif; fill: #8e989f; text-anchor: middle; }
.ecg .pct { font: 700 12px Onest, system-ui, sans-serif; fill: #fff; text-anchor: middle; opacity: 0; animation: fadein .4s ease forwards; }
@keyframes fadein { to { opacity: 1; } }
.art-copy { margin-top: auto; padding-top: 28px; }
.art-copy h1 { font-size: 44px; line-height: 1.05; letter-spacing: -0.025em; max-width: 13ch; margin: 0 0 14px; }
.art-stats { margin-top: 26px; display: flex; gap: 24px; color: #9aa4ab; font-size: 13px; min-height: 44px; }
.art-stats b { color: #fff; font-size: 20px; display: block; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) {
  .ecg .trace { animation: none; stroke-dashoffset: 0; }
  .ecg .pct { animation: none; opacity: 1; }
  .ecg .head { display: none; }
}

/* ---------- Приветствие на главной ---------- */
#greet .greet-h { margin: 0 0 4px; font-size: 30px; letter-spacing: -0.02em; }
#greet .wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.2s ease-in-out .3s 1; }
#greet .wave.still { animation: none; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-8deg); } }
.greet-sub b { color: var(--ink); font-weight: 600; }
.pulse-day { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pd { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 8px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font-size: 13.5px; text-decoration: none; transition: border-color .15s, transform .15s; }
.pd:hover { border-color: var(--sber); text-decoration: none; transform: translateY(-1px); }
.pd-i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; flex: none; }
.pd-h { color: var(--muted); }
.t-ok { background: var(--sber-soft); color: var(--sber-dark); }
.t-msg { background: #e8f4fc; color: #0b74b5; }
.t-cal { background: #fff5e0; color: #8a5a00; }
.t-bad { background: color-mix(in srgb, var(--s-pnr) 14%, transparent); color: var(--s-pnr); }
.t-info { background: var(--line-2); color: var(--ink-2); }
[data-theme="dark"] .t-msg { background: #10324a; color: #7cc3f0; }
[data-theme="dark"] .t-cal { background: #3a2c0c; color: #f0c56b; }
.greet-quiet { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 12px; border-radius: 12px; background: var(--sber-soft); color: var(--sber-dark); font-size: 13.5px; }
.greet-quiet i { width: 8px; height: 8px; border-radius: 50%; background: var(--sber); }
.greet-since { font-size: 12px; color: var(--muted); margin-top: 10px; }
.greet-toggle { margin-top: 8px; font: inherit; font-size: 13px; color: var(--sber-dark); background: none; border: 0; padding: 0; cursor: pointer; }
.greet-toggle:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { #greet .wave { animation: none; } }
.more-menu { position: relative; }
.more-drop { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 300px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; }
.more-menu.open .more-drop { display: block; animation: rise .18s var(--ease); }
.more-drop a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.more-drop a span { font-size: 12px; font-weight: 400; color: var(--muted); }
.more-drop a:hover { background: var(--hover); text-decoration: none; }
/* Кардиограмма и заголовок — одним блоком по центру колонки при любой высоте экрана. */
.login-art .art-mid { margin: auto 0; padding: 24px 0 8px; width: 100%; }
.login-art .art-mid .ecg { margin: 0 -48px 6px; height: clamp(200px, 30vh, 340px); }
.login-art .art-mid .art-copy { margin-top: 0; padding-top: 0; }
@media (min-height: 1000px) { .login-art .art-mid .art-copy h1 { font-size: 52px; } }

/* ---------- Главная: этапы готовности в светлой теме ---------- */
:root[data-theme="light"] .pulse-panel { background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20,30,40,.04); }
:root[data-theme="light"] .pulse-panel::before {
  background: radial-gradient(700px 220px at 100% 0, rgba(17,165,154,.10), transparent 60%), radial-gradient(500px 200px at 0 100%, rgba(33,160,56,.08), transparent 60%); }
:root[data-theme="light"] .pulse-top h3,
:root[data-theme="light"] .pulse-top .sub b { color: var(--ink); }
:root[data-theme="light"] .pulse-top .sub,
:root[data-theme="light"] .stage-step,
:root[data-theme="light"] .stage-n small,
:root[data-theme="light"] .md-cap span,
:root[data-theme="light"] .pulse-side .kv span:nth-child(odd) { color: var(--muted); }
:root[data-theme="light"] .pulse-side .kv span:nth-child(even) { color: var(--ink); }
:root[data-theme="light"] .stage-bar .s-none { background: #c5ccd1; color: #3d4448; }
:root[data-theme="light"] .stage-bar .s-smr { background: #8a949b; }
:root[data-theme="light"] .stage { color: var(--ink); background: var(--surface-2); border-color: var(--line); }
:root[data-theme="light"] .stage:hover { background: #fff; border-color: var(--border-strong); box-shadow: 0 4px 14px rgba(20,30,40,.06); }
:root[data-theme="light"] .stage.on { background: var(--head); color: #fff; border-color: var(--head); }
:root[data-theme="light"] .stage.on .stage-step,
:root[data-theme="light"] .stage.on .stage-n small { color: var(--head-muted); }
:root[data-theme="light"] .stage-arrow { color: #b4bcc2; }
:root[data-theme="light"] .pulse-side { border-left-color: var(--line); }
:root[data-theme="light"] .pulse-panel .ring .rv { color: var(--ink) !important; }
:root[data-theme="light"] .pulse-panel .ring circle:not(.prog) { stroke: var(--line-2) !important; }
@media (max-width: 1100px) { :root[data-theme="light"] .pulse-side { border-top-color: var(--line); } }

/* ---------- Календарь: повестка ---------- */
.cal-tabs button { padding: 7px 12px; }
.cal-c { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.cal-left { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 78px; }
.cal-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; }
.cal-mhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-mhead h3 { margin: 0; font-size: 17px; flex: 1; text-align: center; }
.cal-nav { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; }
.cal-nav:hover { color: var(--ink); border-color: var(--border-strong); }
.cal-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-mini .mw { font-size: 12px; color: var(--muted); text-align: center; padding-bottom: 6px; }
.md { font: inherit; aspect-ratio: 1; border: 0; background: transparent; color: var(--ink); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; position: relative; cursor: pointer; transition: background .15s; }
.md:hover { background: var(--row-hover); }
.md.out { opacity: .32; } .md.we { color: var(--bad); }
.md.today { background: var(--sber); color: #fff; font-weight: 700; }
.md.sel { box-shadow: inset 0 0 0 2px var(--sber); }
.md .dots { display: flex; gap: 2px; position: absolute; bottom: 5px; }
.md .dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--k); }
.md.today .dots i { background: #fff; }
.cal-legend { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.chipk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); background: var(--panel); }
.chipk::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--k); }
.chipk b { color: var(--muted); font-weight: 600; }
.cal-qh { margin: 0 0 2px; font-size: 15px; }
.cal-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.cal-quick button { font: inherit; font-size: 13px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); display: flex; gap: 8px; align-items: center; cursor: pointer; transition: border-color .15s, transform .15s var(--ease); }
.cal-quick button::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--k); flex: none; }
.cal-quick button:hover { border-color: var(--k); transform: translateY(-1px); }
.cal-agenda { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.aday { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; }
.stamp { align-self: start; text-align: center; padding: 10px 0; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.stamp b { display: block; font-size: 34px; line-height: 1; letter-spacing: -0.03em; }
.stamp span { font-size: 12px; color: var(--muted); }
.stamp.we b { color: var(--bad); }
.stamp.td { background: var(--sber); border-color: var(--sber); color: #fff; } .stamp.td b { color: #fff; } .stamp.td span { color: #e2ffe9; }
.stamp.bad { background: color-mix(in srgb, var(--bad) 14%, var(--panel)); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); color: var(--bad); }
.acards { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.acard { display: grid; grid-template-columns: 76px 6px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s var(--ease); animation: rise .3s var(--ease) both; }
.acard:hover { border-color: var(--border-strong); box-shadow: 0 6px 18px rgba(20,30,40,.07); transform: translateY(-1px); }
.acard .tm { font-weight: 700; font-size: 15px; } .acard .tm span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.acard .ln { width: 6px; height: 38px; border-radius: 3px; background: var(--k); }
.acard .tx { min-width: 0; }
.acard .tx b { font-size: 14.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard .tx span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard .who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ava { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #1f8fd6, #11a59a); flex: none; }
.ag-done { font: inherit; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.acard:hover .ag-done { opacity: 1; }
.ag-done:hover { background: var(--sber); border-color: var(--sber); color: #fff; }
.acard.done { opacity: .55; } .acard.done .tx b { text-decoration: line-through; }
.acard.done .ag-done { opacity: 1; background: var(--sber-soft); color: var(--sber); border-color: transparent; }
.acard.over { border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); }
.acard.over .tm { color: var(--bad); }
.empty-day { color: var(--muted); font-size: 13px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 14px; }
.empty-day a { color: var(--sber); }
.ag-sel { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 700; }
.ag-empty { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: 36px 40px; }
.ag-empty h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -0.01em; }
.ag-empty p { color: var(--muted); font-size: 15px; max-width: 56ch; margin: 0; }
.ag-empty .cal-quick { max-width: 440px; margin-top: 18px; }
@media (max-width: 1100px) { .cal-c { grid-template-columns: 1fr; } .cal-left { position: static; } }
@media (max-width: 640px) {
  .aday { grid-template-columns: 1fr; gap: 8px; }
  .stamp { display: flex; gap: 8px; align-items: baseline; padding: 6px 12px; justify-self: start; } .stamp b { font-size: 20px; }
  .acard { grid-template-columns: 60px 4px minmax(0, 1fr); } .acard .who { display: none; }
}
.stamp.range b { font-size: 22px; padding: 4px 0 2px; }

/* ---------- Страница объекта: единый блок «Документы» ---------- */
#ob-docs .panel-head { flex-wrap: wrap; gap: 10px; }
#ob-docs .panel-head h3 .sub { font-weight: 600; margin-left: 4px; }
.od-segs { margin-bottom: 12px; }
.od-drop { margin-bottom: 12px; padding: 14px; }
.od-group { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 6px; }
.sub-tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: var(--chip); border: 1px solid var(--line); margin-right: 4px; vertical-align: 1px; }
.od-where { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; margin-bottom: 12px; }
.od-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.od-opt:hover { border-color: var(--border-strong); }
.od-opt:has(input:checked) { border-color: var(--sber); background: var(--sber-soft); }
.od-opt input { margin-top: 3px; accent-color: var(--sber); }
.od-opt span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.od-opt small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
a.busy { opacity: .6; pointer-events: none; }
.od-drop small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }

/* ---------- Контакты подсистемы ---------- */
.link-btn { font: inherit; font-size: inherit; background: none; border: 0; padding: 0; color: var(--ink-2); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.link-btn:hover { color: var(--sber); }
.link-btn .pen { opacity: 0; transition: opacity .15s; text-decoration: none; display: inline-block; }
.sys:hover .link-btn .pen { opacity: .7; }
.ct-list { display: flex; flex-direction: column; gap: 8px; }
.ct-row { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr 1.2fr auto; gap: 8px; align-items: center; animation: rise .25s var(--ease) both; }
@media (max-width: 760px) { .ct-row { grid-template-columns: 1fr 1fr; } }
select.small { padding: 6px 10px; font-size: 13px; width: auto; }

/* ---------- Карты сигналов ---------- */
.maps-bar { display: inline-block; width: 120px; height: 6px; border-radius: 3px; background: var(--line-2); vertical-align: middle; margin-left: 8px; overflow: hidden; }
.maps-bar i { display: block; height: 100%; background: var(--grad); border-radius: 3px; }
.mp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 8px; flex-wrap: wrap; }
.mp-list { max-height: 44vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.mp-row { display: grid; grid-template-columns: 26px auto minmax(110px, auto) 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line-2); font-size: 13.5px; }
.mp-row:first-child { border-top: 0; }
.mp-row.ok { background: color-mix(in srgb, var(--sber) 5%, transparent); }
.mp-pick input { accent-color: var(--sber); }
.mp-files { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mp-files a { font-size: 12.5px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-list.appear .mp-row { animation: rise .35s var(--ease) both; }
.mp-list.appear .mp-row:nth-child(2) { animation-delay: .03s; } .mp-list.appear .mp-row:nth-child(3) { animation-delay: .06s; }
.mp-list.appear .mp-row:nth-child(4) { animation-delay: .09s; } .mp-list.appear .mp-row:nth-child(n+5) { animation-delay: .12s; }

/* ---------- Исходная таблица (правка как в Excel) ---------- */
#view-sheet .hero { margin-bottom: 10px; }
.sh-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.sh-saved { color: var(--sber); font-weight: 600; }
.sh-wrap { overflow: auto; max-height: calc(100vh - 230px); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--panel); }
table.sheet { border-collapse: separate; border-spacing: 0; font-size: 13px; width: max-content; min-width: 100%; }
table.sheet th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 700; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-2); white-space: normal; line-height: 1.25; }
table.sheet th.stk { z-index: 4; }
table.sheet td { padding: 7px 10px; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); vertical-align: top; background: var(--panel); cursor: cell; max-width: 420px; white-space: pre-wrap; transition: background .25s, box-shadow .15s; }
table.sheet td.stk { position: sticky; z-index: 2; }
table.sheet tr.grp td { border-top: 2px solid var(--line); }
table.sheet tr:hover td { background: var(--row-hover); }
table.sheet td.c-int, table.sheet td.c-ro[data-k=pct] { text-align: right; font-variant-numeric: tabular-nums; }
table.sheet td.c-bool { text-align: center; }
table.sheet td.c-status { white-space: nowrap; }
table.sheet td.c-status .led { margin-right: 6px; }
table.sheet td.c-ro { cursor: default; color: var(--ink-2); }
table.sheet td.sel { box-shadow: inset 0 0 0 2px var(--sber); }
table.sheet td.editing { padding: 0; box-shadow: inset 0 0 0 2px var(--sber); }
table.sheet .sh-in { width: 100%; min-width: 100%; border: 0; border-radius: 0; padding: 7px 10px; font: inherit; background: var(--panel); color: var(--ink); outline: none; resize: vertical; box-shadow: none; }
table.sheet td.saving { background: color-mix(in srgb, var(--sky) 10%, var(--panel)); }
table.sheet td.flash { animation: shFlash 1.2s var(--ease); }
table.sheet td.flash-soft { animation: shFlash 1.2s var(--ease); }
table.sheet td.err { box-shadow: inset 0 0 0 2px var(--bad); }
@keyframes shFlash { 0% { background: color-mix(in srgb, var(--sber) 32%, var(--panel)); } 100% { background: var(--panel); } }
.sh-bool { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); color: #fff; font-size: 12px; font-weight: 800; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.sh-bool.on { background: var(--sber); border-color: var(--sber); transform: scale(1.05); }
.sh-pct { display: inline-block; min-width: 34px; padding: 0 6px; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 22%, transparent) var(--p), transparent var(--p)); }
table.sheet .clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
#view-sheet .hero .toolbar input[type=search] { width: 240px; }
#view-sheet .hero .toolbar select { width: auto; }

/* ---------- Библиотека ---------- */
.lib-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.lib-tree { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: 10px; position: sticky; top: 78px; max-height: calc(100vh - 100px); overflow: auto; }
.lt-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 12px 8px 4px; }
.lt-item { font: inherit; font-size: 13.5px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; border: 0; background: transparent; color: var(--ink); padding: 7px 10px; border-radius: 10px; cursor: pointer; transition: background .15s, color .15s; }
.lt-item > span { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-item b { font-size: 11.5px; color: var(--muted); background: var(--chip); border-radius: 999px; padding: 0 7px; }
.lt-item:hover { background: var(--row-hover); }
.lt-item.on { background: var(--sber-soft); color: var(--sber-dark); font-weight: 600; }
.lt-item.on b { background: var(--sber); color: #fff; }
.lt-row { display: flex; align-items: center; }
.lt-tg { font: inherit; width: 22px; height: 22px; flex: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 6px; transition: transform .25s var(--ease); font-size: 16px; line-height: 1; }
.lt-obj.open .lt-tg { transform: rotate(90deg); }
.lt-subs { margin-left: 22px; overflow: hidden; max-height: 0; transition: max-height .35s var(--ease); }
.lt-n { color: var(--muted); font-size: 12px; }
.lt-item.on .lt-n { color: inherit; }
.lt-obj.open .lt-subs { max-height: 600px; }
.lt-subs .lt-item { font-size: 13px; padding: 5px 10px; }
.lib-main { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px 20px; min-height: 300px; }
.lib-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.lib-head h3 { margin: 0 0 2px; font-size: 18px; }
.lib-ip { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--sky) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--sky) 25%, var(--line)); }
.lib-drop { margin-bottom: 14px; padding: 14px; }
.lib-drop small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.lib-list { display: flex; flex-direction: column; gap: 10px; }
.lib-doc { display: grid; grid-template-columns: 22px 46px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); animation: rise .35s var(--ease) both; }
.lib-doc:hover { border-color: var(--border-strong); box-shadow: 0 6px 18px rgba(20,30,40,.06); transform: translateY(-1px); }
.lib-doc.picked { border-color: var(--sber); background: color-mix(in srgb, var(--sber) 4%, var(--panel)); }
.lib-doc.drop-over { border-color: var(--sber); border-style: dashed; background: var(--sber-soft); }
.lib-pick input { margin-top: 14px; accent-color: var(--sber); }
.lib-ico { width: 46px; height: 54px; border-radius: 8px; display: grid; place-items: end center; padding-bottom: 8px; font-size: 10.5px; font-weight: 800; color: #fff; background: linear-gradient(160deg, #21a038, #11a59a 60%, #1f8fd6); position: relative; box-shadow: 0 4px 10px rgba(17,165,154,.25); }
.lib-ico::before { content: ""; position: absolute; top: 0; right: 0; width: 14px; height: 14px; background: linear-gradient(225deg, var(--panel) 50%, rgba(255,255,255,.35) 50%); border-bottom-left-radius: 4px; }
.lib-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.lib-code { font-size: 12px; font-family: ui-monospace, Consolas, monospace; padding: 1px 7px; border-radius: 6px; background: var(--chip); border: 1px solid var(--line); }
.lib-rev { font-size: 11.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--sber); color: #fff; }
.lib-rev.old { background: var(--chip); color: var(--muted); border: 1px solid var(--line); }
.lib-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.lib-stage { font-size: 12px; font-weight: 600; color: var(--sky); }
.lib-note { font-size: 13px; margin-top: 6px; color: var(--ink-2); }
.lib-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lib-file { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); max-width: 340px; transition: border-color .15s; }
.lib-file:hover { border-color: var(--sber); text-decoration: none; }
.lib-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-file small { color: var(--muted); }
.lib-hist { margin-top: 8px; font-size: 13px; }
.lib-hist summary { cursor: pointer; color: var(--muted); }
.lib-hrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px dashed var(--line); }
.lib-acts { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
@media (max-width: 1000px) { .lib-layout { grid-template-columns: 1fr; } .lib-tree { position: static; max-height: 320px; } .lib-doc { grid-template-columns: 22px 40px minmax(0, 1fr); } .lib-acts { grid-column: 2 / -1; flex-direction: row; flex-wrap: wrap; } }

/* ---------- AI-ассистент ---------- */
.ai-ava { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; }
.ai-ava svg, .ai-ava img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ai-ava.sm { width: 28px; height: 28px; }
.ai-ava.md { width: 38px; height: 38px; }
.ai-ava.xl { width: 76px; height: 76px; }
.ai-ava.breathe { animation: aiBreathe 3.2s ease-in-out infinite; }
.ai-ava.pop { animation: aiPop .45s var(--ease); }
@keyframes aiBreathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(33,160,56,.25); } 50% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(33,160,56,0); } }
@keyframes aiPop { 0% { transform: scale(.6); opacity: .3; } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
.ai-fab { position: fixed; right: 22px; bottom: 22px; z-index: 45; width: 58px; height: 58px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: transparent;
  box-shadow: 0 10px 28px rgba(17,165,154,.35), 0 2px 6px rgba(0,0,0,.15); transition: transform .3s var(--ease), box-shadow .3s; }
.ai-fab .ai-ava { width: 58px; height: 58px; }
.ai-fab::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(33,160,56,.45); animation: aiRing 2.8s ease-out infinite; pointer-events: none; }
.ai-fab:hover { transform: translateY(-3px) scale(1.06); }
.ai-fab.active { transform: scale(.9); }
.ai-fab.active::after, .ai-fab.off::after { animation: none; opacity: 0; }
.ai-fab.off { filter: grayscale(.7); opacity: .8; }
.ai-fab-tip { position: absolute; right: 68px; top: 50%; transform: translateY(-50%) translateX(6px); background: var(--head); color: #fff; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); }
.ai-fab:hover .ai-fab-tip { opacity: 1; transform: translateY(-50%); }
.ai-fab.active .ai-fab-tip { opacity: 0; }
@keyframes aiRing { 0% { transform: scale(.95); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.ai-panel { position: fixed; right: 22px; bottom: 92px; z-index: 46; width: min(420px, calc(100vw - 32px)); height: min(620px, calc(100vh - 130px)); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 60px rgba(10,20,30,.22); overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.97); transform-origin: bottom right; pointer-events: none; transition: opacity .28s var(--ease), transform .35s var(--ease); }
.ai-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.ai-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line-2); background: linear-gradient(120deg, color-mix(in srgb, var(--sber) 9%, var(--panel)), color-mix(in srgb, var(--sky) 7%, var(--panel))); }
.ai-hn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ai-hn b { font-size: 15px; }
.ai-hn span { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-on { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sber) 25%, transparent); }
.ai-ib { font: inherit; width: 32px; height: 32px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; transition: background .15s, color .15s; }
.ai-ib:hover { background: var(--row-hover); color: var(--ink); }
.ai-body { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.ai-empty { margin: auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ai-empty h4 { margin: 8px 0 0; font-size: 17px; }
.ai-empty p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 34ch; }
.ai-sugg { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 8px; }
.ai-q { font: inherit; font-size: 13px; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; transition: border-color .15s, transform .2s var(--ease); animation: rise .4s var(--ease) both; }
.ai-q:nth-child(2) { animation-delay: .05s; } .ai-q:nth-child(3) { animation-delay: .1s; } .ai-q:nth-child(4) { animation-delay: .15s; }
.ai-q:hover { border-color: var(--sber); transform: translateX(3px); }
.ai-msg { display: flex; gap: 8px; align-items: flex-end; animation: rise .3s var(--ease) both; }
.ai-msg.user { justify-content: flex-end; }
.ai-b { position: relative; max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: 13.8px; line-height: 1.45; background: var(--surface-2); border: 1px solid var(--line-2); overflow-wrap: anywhere; }
.ai-b p { margin: 0 0 6px; } .ai-b p:last-child { margin: 0; }
.ai-b ul { margin: 4px 0; padding-left: 18px; }
.ai-msg.user .ai-b { background: var(--sber); color: #fff; border-color: var(--sber); border-bottom-right-radius: 5px; }
.ai-msg.assistant .ai-b { border-bottom-left-radius: 5px; }
.ai-msg.err .ai-b { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); color: var(--bad); }
.ai-copy { position: absolute; right: -30px; bottom: 2px; width: 24px; height: 24px; border: 0; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s; }
.ai-msg:hover .ai-copy { opacity: 1; }
.ai-typing { display: flex; gap: 4px; padding: 13px 14px; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: aiDot 1.2s infinite ease-in-out; }
.ai-typing i:nth-child(2) { animation-delay: .15s; } .ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-5px); opacity: 1; } }
.ai-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 12px; border-top: 1px solid var(--line-2); }
.ai-form textarea { flex: 1; resize: none; min-height: 42px; max-height: 140px; border-radius: 14px; padding: 10px 12px; font: inherit; font-size: 14px; }
.ai-send { width: 42px; height: 42px; flex: none; border-radius: 14px; border: 0; background: var(--sber); color: #fff; cursor: pointer; display: grid; place-items: center; transition: transform .2s var(--ease), filter .2s; }
.ai-send:hover { transform: translateX(2px); filter: brightness(1.08); }
.ai-send:disabled { opacity: .5; cursor: default; transform: none; }
.aim-top { display: flex; gap: 16px; align-items: center; margin-bottom: 4px; }
.aim-avas { display: flex; gap: 10px; flex-wrap: wrap; }
.aim-ava { font: inherit; font-size: 11px; width: 58px; height: 58px; border-radius: 50%; border: 2px solid transparent; background: var(--surface-2); padding: 3px; cursor: pointer; display: grid; place-items: center; transition: border-color .15s, transform .2s var(--ease); color: var(--muted); }
.aim-ava .ai-ava { width: 48px; height: 48px; }
.aim-ava:hover { transform: translateY(-2px); }
.aim-ava.on { border-color: var(--sber); }
.aim-up span { display: flex; flex-direction: column; align-items: center; font-size: 18px; line-height: 1; } .aim-up small { font-size: 10.5px; margin-top: 2px; }
.aim-styles, .aia-prov { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.aim-st, .aia-p { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.aim-st:has(input:checked), .aia-p:has(input:checked) { border-color: var(--sber); background: var(--sber-soft); }
.aim-st input, .aia-p input { margin-top: 3px; accent-color: var(--sber); }
.aim-st span, .aia-p span { display: flex; flex-direction: column; } .aim-st small, .aia-p small { color: var(--muted); font-size: 12px; }
.aim-custom { margin-top: 10px; }
.aia-fields { margin-top: 14px; }
.aia-test { margin-top: 12px; }
.aia-ok { padding: 10px 12px; border-radius: 12px; background: var(--sber-soft); color: var(--sber-dark); font-size: 13.5px; animation: rise .3s var(--ease); }
@media (max-width: 640px) { .ai-panel { right: 8px; bottom: 84px; } .ai-fab { right: 14px; bottom: 14px; } }
#toasts { right: 94px; }

/* ================= Живой интерфейс: переходы, анимации, отклик на наведение ================= */
:root { --ease-soft: cubic-bezier(.22, .9, .3, 1); }
html { scroll-behavior: smooth; }

/* Плавная смена страниц: страница выплывает, блоки — по очереди. */
.view.active { animation: viewIn .42s var(--ease-soft) both; }
.view.active > * { animation: viewItem .5s var(--ease-soft) both; }
.view.active > *:nth-child(2) { animation-delay: .04s; } .view.active > *:nth-child(3) { animation-delay: .08s; }
.view.active > *:nth-child(4) { animation-delay: .12s; } .view.active > *:nth-child(5) { animation-delay: .16s; } .view.active > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes viewIn { from { opacity: 0; } }
@keyframes viewItem { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }

/* Окна: мягко появляются и так же мягко уходят. */
.modal-bg.open { animation: fade .22s ease-out; }
.modal-bg.closing { animation: fadeOut .19s ease-in forwards; }
.modal-bg.closing .modal { animation: sink .19s ease-in forwards; }
.modal { animation: modalIn .32s var(--ease-soft); }
.modal.swap { animation: modalSwap .28s var(--ease-soft); }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.965); } }
@keyframes modalSwap { from { opacity: .3; transform: translateX(14px); } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes sink { to { opacity: 0; transform: translateY(10px) scale(.98); } }

/* Уведомления уезжают вправо, а не исчезают рывком. */
.toast { animation: toastIn .35s var(--ease-soft); }
.toast.out { animation: toastOut .32s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }

/* Кнопки, вкладки, поля — без рывков. */
.btn, .seg, .tabs button, .chip, .nav a, input, select, textarea, .theme-btn, .sound-btn, #me-toggle {
  transition: background-color .22s, border-color .22s, color .22s, box-shadow .22s, transform .2s var(--ease-soft), opacity .2s; }
.btn { position: relative; overflow: hidden; }
.btn:active, .seg:active, .tabs button:active { transform: scale(.97); }
.btn.primary:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--sber) 35%, transparent); transform: translateY(-1px); }
.btn svg { transition: transform .3s var(--ease-soft); }
.btn:hover svg { transform: translateY(1px) scale(1.12); }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .18; transform: scale(0); pointer-events: none; animation: ripple .6s ease-out forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 3px; border-radius: 3px; background: var(--grad); transition: left .3s var(--ease-soft), right .3s var(--ease-soft); }
.nav a:hover::after { left: 30%; right: 30%; }
.theme-btn:hover svg { animation: spin 1s var(--ease-soft); }
.sound-btn:hover { animation: wiggle .5s; }
@keyframes spin { to { transform: rotate(180deg); } }
@keyframes wiggle { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.tabs button.on, .seg.on { animation: pop .3s var(--ease-soft); }
@keyframes pop { 50% { transform: scale(1.05); } }

/* Карточки появляются волной и «оживают» при наведении. */
.objects.appear .obj { animation: rise .5s var(--ease-soft) both; }
.objects.appear .mcol > .obj:nth-child(2) { animation-delay: .05s; } .objects.appear .mcol > .obj:nth-child(3) { animation-delay: .1s; } .objects.appear .mcol > .obj:nth-child(4) { animation-delay: .15s; } .objects.appear .mcol > .obj:nth-child(n+5) { animation-delay: .2s; }
.obj { transition: transform .35s var(--ease-soft), box-shadow .35s, border-color .35s; }
.obj:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(20, 40, 50, .12); border-color: color-mix(in srgb, var(--sber) 35%, var(--line)); }
.obj .ring { transition: transform .45s var(--ease-soft); }
.obj:hover .ring { transform: scale(1.1) rotate(-6deg); }
.obj:hover .obj-code { background-size: 200% 100%; animation: codeShine 1.4s var(--ease-soft); }
@keyframes codeShine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.obj .chip { transition: transform .25s var(--ease-soft), background .2s, border-color .2s; }
.obj:hover .chip { transform: translateY(-1px); }
.stack { position: relative; }
.stack::after, .prog::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; }
.obj:hover .stack::after, .sys:hover .prog::after { animation: sheen 1.1s var(--ease-soft); }
.prog { position: relative; overflow: hidden; }
@keyframes sheen { to { transform: translateX(100%); } }

/* Кольца готовности: мягкое свечение и полный оборот при наведении. */
.ring svg { transition: filter .4s; }
.ring:hover svg { animation: ringSpin .9s var(--ease-soft); filter: drop-shadow(0 0 6px rgba(17, 165, 154, .45)); }
@keyframes ringSpin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.ring .prog { transition: stroke-dashoffset 1.2s var(--ease-soft); }

/* Шкала «Готовность по объектам»: жидкость переливается, блик пробегает, при наведении столбик оживает. */
.bar-fill { position: relative; background: linear-gradient(180deg, #1f8fd6 0%, #11a59a 25%, #21a038 50%, #11a59a 75%, #1f8fd6 100%); background-size: 100% 260px;
  animation: liquid 9s linear infinite; animation-delay: calc(var(--ph, 0s) * -1); transition: height .9s var(--ease), filter .3s; }
.bar-fill::before { content: ""; position: absolute; left: 8%; right: 8%; top: 2px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.4); animation: surface 3.2s ease-in-out infinite; animation-delay: var(--ph, 0s); }
.bar-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%); background-size: 100% 40%; background-repeat: no-repeat;
  background-position: 0 260%; animation: rise-sheen 6s ease-in-out infinite; animation-delay: var(--ph, 0s); }
@keyframes liquid { from { background-position: 0 0; } to { background-position: 0 260px; } }
@keyframes surface { 0%, 100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(2px) scaleX(.92); } }
@keyframes rise-sheen { 0%, 70% { background-position: 0 260%; } 100% { background-position: 0 -160%; } }
.bar-track { transition: transform .35s var(--ease-soft), box-shadow .3s; }
.bar-track { transform-origin: 50% 100%; }
.bar-col:hover .bar-track { transform: scaleX(1.14); box-shadow: 0 0 0 2px var(--sber), 0 8px 20px rgba(17, 165, 154, .3); }
.bar-col:hover .bar-fill { filter: brightness(1.12) saturate(1.25); animation-duration: 2.4s; }
.bar-col .lbl, .bar-col .pct { transition: color .25s, transform .3s var(--ease-soft); }
.bar-col:hover .lbl { color: var(--sber); transform: scale(1.12); }
.bar-col:hover .pct { color: var(--ink); font-weight: 700; transform: scale(1.15); }

/* Полоса этапов и плитки этапов. */
.stage-bar i { position: relative; overflow: hidden; }
.stage-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%);
  animation: barSheen 7s ease-in-out infinite; animation-delay: var(--ph, 0s); }
@keyframes barSheen { 0%, 80% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.stage-bar i:hover { transform: scaleY(1.12); }
.stage { transition: background .25s, opacity .25s, transform .35s var(--ease-soft), box-shadow .3s; }
.stage:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
.stage:hover .led { animation: ledBeat .9s ease-in-out; }

/* Статусы, требующие внимания, тихо пульсируют. */
.led.s-pnr { animation: ledPulse 2.6s ease-in-out infinite; }
.led.s-remarks { animation: ledPulseY 3.4s ease-in-out infinite; }
@keyframes ledPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(229, 65, 45, .16); } 50% { box-shadow: 0 0 0 6px rgba(229, 65, 45, 0); } }
@keyframes ledPulseY { 0%, 100% { box-shadow: 0 0 0 3px rgba(240, 173, 0, .18); } 50% { box-shadow: 0 0 0 6px rgba(240, 173, 0, 0); } }
@keyframes ledBeat { 30% { transform: scale(1.5); } 60% { transform: scale(.9); } }

/* Логотип в шапке «дышит». */
.brand .sc-logo { transition: transform .5s var(--ease-soft); }
.brand:hover .sc-logo { transform: scale(1.08) rotate(-4deg); }

/* Часы на главной. */
.hero-side { flex-direction: column; align-items: flex-end; gap: 10px; }
.clock { min-height: 64px; }
.clk { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--ink); text-decoration: none !important; }
.clk-t { display: flex; align-items: center; font-size: 46px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.clk .dg { position: relative; display: inline-block; width: .6em; height: 1em; overflow: hidden; }
.clk .dg b { position: absolute; inset: 0; text-align: center; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.clk .dg b.in { animation: dgIn .55s var(--ease-soft) both; }
.clk .dg b.out { animation: dgOut .55s var(--ease-soft) both; }
@keyframes dgIn { from { transform: translateY(70%); opacity: 0; filter: blur(4px); } }
@keyframes dgOut { to { transform: translateY(-70%); opacity: 0; filter: blur(4px); } }
.clk-c { width: .32em; text-align: center; color: var(--teal); animation: colon 1s steps(1) infinite; transform: translateY(-.06em); }
@keyframes colon { 50% { opacity: .2; } }
.clk-bar { width: 100%; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.clk-bar i { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); }
.clk-d { font-size: 12.5px; color: var(--muted); }
.clk:hover .clk-t { animation: pop .4s var(--ease-soft); }
.clk:hover .clk-d { color: var(--sber); }
@media (max-width: 760px) { .hero-side { align-items: stretch; } .clk { align-items: flex-start; } .clk-t { font-size: 34px; } }

/* Приветствие после входа — как «Hello» на iPhone. */
.hello { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #0b1013; color: #fff; overflow: hidden; cursor: pointer; }
.hello-aurora i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(80px); opacity: .55; animation: aurora 9s ease-in-out infinite alternate; }
.hello-aurora i:nth-child(1) { background: #21a038; left: -15vmax; top: -20vmax; }
.hello-aurora i:nth-child(2) { background: #11a59a; right: -20vmax; top: 10vmax; animation-delay: -3s; }
.hello-aurora i:nth-child(3) { background: #1f8fd6; left: 20vmax; bottom: -30vmax; animation-delay: -6s; }
@keyframes aurora { to { transform: translate(8vmax, 6vmax) scale(1.15); } }
.hello-in { position: relative; text-align: center; width: min(1200px, 94vw); }
.hello-row { font-size: clamp(40px, 6vw, 96px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.hello-g { display: inline-block; opacity: 0; transform: translateY(24px); filter: blur(8px); animation: helloChar .8s var(--ease-soft) .15s forwards; }
.hello-name { font-weight: 800; white-space: nowrap; }
.hello-name span { display: inline-block; background: linear-gradient(120deg, #7ff0a0, #3fd3c4 50%, #6cc4ff); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(24px); filter: blur(8px); animation: helloChar .7s var(--ease-soft) forwards; animation-delay: calc(.45s + var(--i) * 55ms); }
@keyframes helloChar { to { opacity: 1; transform: none; filter: none; } }
.hello-ecg { display: block; width: min(760px, 80vw); height: auto; margin: 26px auto 0; overflow: visible; }
.hello-line { fill: none; stroke: url(#hg); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: helloDraw 1.3s cubic-bezier(.5, 0, .3, 1) .9s forwards; }
.hello-dot { fill: #6cc4ff; opacity: 0; animation: helloDot .2s linear .9s forwards; filter: drop-shadow(0 0 6px #6cc4ff); }
@keyframes helloDraw { to { stroke-dashoffset: 0; } }
@keyframes helloDot { to { opacity: 1; } }
.hello-sub { margin-top: 14px; font-size: clamp(14px, 1.3vw, 18px); color: rgba(255,255,255,.62); opacity: 0; animation: helloSub .8s ease 1.8s forwards; }
@keyframes helloSub { to { opacity: 1; } }
.hello-skip { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.35); opacity: 0; animation: helloSub 1s ease 2.4s forwards; }
.hello.leave { animation: helloLeave .85s var(--ease-soft) forwards; }
@keyframes helloLeave { to { opacity: 0; transform: scale(1.08); filter: blur(6px); visibility: hidden; } }
body.helloing { overflow: hidden; }
body.hello-reveal .topbar, body.hello-reveal .main { animation: reveal .9s var(--ease-soft); }
@keyframes reveal { from { transform: scale(.97); opacity: .4; filter: blur(4px); } }

/* Кто просил меньше движения — получает спокойный интерфейс. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hello-ecg path { stroke-dashoffset: 0; } .hello-g, .hello-n, .hello-sub, .hello-dot { opacity: 1; transform: none; filter: none; }
}

/* Столбики: без вертикальной прокрутки (она мигала и «трясла» шкалу при наведении). */
#bars.bars { overflow-y: hidden; padding-top: 18px; }
/* Режим «Подсистемы»: стадии вырастают снизу по очереди, по столбику пробегает блик, при наведении — ярче. */
.bar-stack { display: flex; flex-direction: column-reverse; width: 100%; height: 100%; position: relative; }
.bar-stack i { display: block; transform-origin: 50% 100%; animation: segGrow .7s var(--ease-soft) both; animation-delay: calc(var(--k, 0) * 90ms); transition: filter .3s; }
.bar-stack i + i { box-shadow: 0 -1px 0 rgba(255,255,255,.18) inset; }
.bar-stack::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%); background-size: 100% 40%; background-repeat: no-repeat;
  background-position: 0 260%; animation: rise-sheen 7s ease-in-out infinite; animation-delay: var(--ph, 0s); pointer-events: none; }
.bar-col:hover .bar-stack i { filter: brightness(1.15) saturate(1.2); }
@keyframes segGrow { from { transform: scaleY(0); opacity: .3; } }
/* Кружок «ожидается ПНР»: чёткое кольцо вместо размытой тени. */
.led.s-smr { box-sizing: border-box; background: transparent; box-shadow: none; border: 2px solid var(--s-smr); }
.legend .led.s-smr, .stage .led.s-smr { border-color: #8f9aa2; }
/* Выпадающие меню всегда поверх карточек: карточки с анимацией создают свои слои. */
.obj-toolbar, .docs-head, .lib-head, .hero { position: relative; z-index: 20; }
.hero { z-index: 21; }
.more-menu, .add-doc { position: relative; z-index: 41; }
/* Кадрирование картинки ассистента. */
.aim-crop { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); animation: rise .3s var(--ease-soft); }
.aim-crop[hidden] { display: none; }
.crop-stage { position: relative; width: 280px; height: 280px; overflow: hidden; border-radius: 14px; background: #000; cursor: grab; touch-action: none; user-select: none; flex: none; }
.crop-stage.grab { cursor: grabbing; }
.crop-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, .55); outline: 2px solid rgba(255,255,255,.85); outline-offset: -2px; }
.crop-side { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 10px; }
.crop-zoom { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--muted); }
.crop-zoom input { flex: 1; accent-color: var(--sber); }
.crop-prev { width: 64px; height: 64px; border-radius: 50%; background-repeat: no-repeat; border: 2px solid var(--line); }
/* Кнопка ассистента крупнее и перетаскивается. */
.ai-fab { width: 76px; height: 76px; touch-action: none; }
.ai-fab .ai-ava { width: 76px; height: 76px; }
.ai-fab-tip { right: 88px; }
.ai-fab.dragging { cursor: grabbing; transform: scale(1.08); box-shadow: 0 18px 40px rgba(17,165,154,.45), 0 4px 10px rgba(0,0,0,.2); transition: none; }
.ai-fab.dragging::after { animation: none; opacity: 0; }
.ai-fab.dragging .ai-fab-tip { opacity: 0; }
.ai-fab.on-left .ai-fab-tip { right: auto; left: 88px; }

/* ---------- Выгрузка календаря за период ---------- */
.cr-k.k-event, .cr-it.k-event { --k: var(--sber); } .cr-k.k-status, .cr-it.k-status { --k: var(--s-pnr); } .cr-k.k-doc, .cr-it.k-doc { --k: var(--sky); }
.cr-k.k-nc, .cr-it.k-nc { --k: var(--s-remarks); } .cr-k.k-lib, .cr-it.k-lib { --k: #8b6fd6; } .cr-k.k-letter, .cr-it.k-letter { --k: var(--teal); }
.cr-presets { align-items: center; margin-bottom: 12px; }
.cr-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cr-row label { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13.5px; }
.cr-row input[type=date] { width: auto; } .cr-row select { width: auto; min-width: 220px; }
.cr-inc { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 14px; }
.cr-k { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; border-left: 4px solid var(--k); transition: background .15s; }
.cr-k:has(input:checked) { background: color-mix(in srgb, var(--k) 8%, var(--panel)); }
.cr-k input { margin-top: 3px; accent-color: var(--k); }
.cr-k span { display: flex; flex-direction: column; } .cr-k small { color: var(--muted); font-size: 12px; }
.cr-prev { border-top: 1px solid var(--line-2); padding-top: 14px; }
.cr-tiles { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cr-tile { padding: 8px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; animation: rise .3s var(--ease-soft) both; }
.cr-tile b { font-size: 19px; } .cr-tile span { font-size: 12px; color: var(--muted); }
.cr-tile.ok b { color: var(--sber); } .cr-tile.bad b { color: var(--bad); }
.cr-days { max-height: 42vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.cr-day { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
.cr-dh { text-align: center; padding: 6px 0; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); align-self: start; position: sticky; top: 0; }
.cr-dh b { display: block; font-size: 20px; line-height: 1.1; } .cr-dh span { font-size: 11.5px; color: var(--muted); }
.cr-items { display: flex; flex-direction: column; gap: 4px; }
.cr-it { display: grid; grid-template-columns: 8px 44px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 7px 10px; border-radius: 10px; font-size: 13px; }
.cr-it:hover { background: var(--row-hover); }
.cr-it > i { width: 8px; height: 8px; border-radius: 50%; background: var(--k); margin-top: 6px; }
.cr-t { color: var(--muted); font-variant-numeric: tabular-nums; }
.cr-tx { color: var(--ink-2); margin-top: 1px; overflow-wrap: anywhere; }
.cr-res { text-align: right; font-size: 12px; color: var(--muted); white-space: nowrap; display: flex; flex-direction: column; }
.cr-it.done .cr-res { color: var(--sber); } .cr-it.over .cr-res { color: var(--bad); }
.cr-res small { color: var(--muted); }
.ai-panel { bottom: 108px; }
#toasts { right: 108px; }
/* Фон приветствия не занимает место в раскладке — текст ровно по центру экрана. */
.hello-aurora { position: absolute; inset: 0; pointer-events: none; }
.hello-row { white-space: nowrap; }

/* ---------- Календарь: месяц ---------- */
.cal-layout { grid-template-columns: minmax(0, 1fr) 360px; }
.cal-mside { display: flex; flex-direction: column; gap: 16px; }
.cal-mside .panel { margin-bottom: 0; }
.cal-mstats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.ms-t { --k: var(--teal); position: relative; padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; animation: rise .35s var(--ease-soft) both; }
.ms-t i { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k); }
.ms-t b { font-size: 22px; line-height: 1.1; } .ms-t span { font-size: 12px; color: var(--muted); }
.ms-t.zero b { color: var(--muted); } .ms-t.ok { --k: var(--sber); } .ms-t.ok b { color: var(--sber); } .ms-t.bad b { color: var(--bad); }
.ms-t.k-all { --k: var(--grad); } .ms-t.k-all i { background: var(--grad); }
.cal-grid { gap: 6px; border: 0; border-radius: 0; overflow: visible; }
.cal-wd { background: transparent; border: 0; padding: 0 8px 4px; }
.cal-day { position: relative; min-height: 112px; border: 1px solid transparent; border-radius: 12px; background: var(--surface-2); padding: 8px; overflow: hidden;
  transition: background .2s, border-color .2s, transform .25s var(--ease-soft), box-shadow .25s; }
.cal-day:nth-child(7n) { border-right: 1px solid transparent; }
.cal-day:hover { background: var(--panel); border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,30,40,.08); }
.cal-day.past:not(.today) { opacity: .78; }
.cal-day.out { opacity: .35; }
.cal-day.sel { border-color: var(--sber); background: var(--sber-soft); }
.cal-day.has-late { box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--bad) 60%, transparent); }
.cal-n { align-self: stretch; width: auto; height: auto; display: flex; align-items: center; gap: 6px; justify-content: flex-start; border-radius: 0; font-size: 13px; color: var(--ink-2); }
.cal-day.we .cal-n { color: var(--bad); }
.cal-day.today { border-color: var(--sber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sber) 20%, transparent); background: var(--panel); }
.cal-day.today .cal-n { background: none; color: var(--ink); }
.cal-day.today .cal-n em { font-style: normal; background: var(--sber); color: #fff; border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.cal-day.today .cal-n small { font-size: 11px; color: var(--sber); font-weight: 600; }
.cal-heat { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); opacity: calc(.25 + var(--h) * .75); }
.cal-plus { position: absolute; right: 7px; bottom: 7px; width: 24px; height: 24px; border-radius: 8px; border: 1px dashed var(--border-strong); background: var(--panel); color: var(--muted); font-size: 15px; line-height: 1;
  cursor: pointer; opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s var(--ease-soft), color .15s, border-color .15s; }
.cal-day:hover .cal-plus { opacity: 1; transform: none; }
.cal-plus:hover { color: var(--sber); border-color: var(--sber); border-style: solid; }
.cal-todaycard { border-radius: var(--r-l); padding: 18px 18px 8px; color: #fff; background: linear-gradient(140deg, #146b33, #0f5a5c 60%, #155a86); box-shadow: 0 12px 30px rgba(17,100,90,.25); position: relative; overflow: hidden; }
.cal-todaycard::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .cal-todaycard { background: linear-gradient(140deg, #133a24, #0f2a2e 60%, #12202b); border: 1px solid #1f4a33; box-shadow: none; }
.tc-d { font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.tc-w { color: rgba(255,255,255,.75); font-size: 13.5px; margin: 4px 0 12px; }
.tc-ev { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.12); cursor: pointer; position: relative; z-index: 1; }
.tc-ev:hover .tc-x { text-decoration: underline; text-underline-offset: 3px; }
.tc-ev.done { opacity: .55; } .tc-ev.late .tc-t { color: #ffb4a8; }
.tc-t { font-weight: 700; font-size: 14px; line-height: 1.2; }
.tc-x { font-size: 13.5px; min-width: 0; }
.tc-x span { display: block; color: rgba(255,255,255,.65); font-size: 12px; margin-top: 2px; }
.tc-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 6px; background: rgba(255,255,255,.16); margin-right: 6px; }
.tc-empty { border-top: 1px solid rgba(255,255,255,.12); padding: 12px 0 10px; color: rgba(255,255,255,.75); font-size: 13.5px; position: relative; z-index: 1; }
.tc-empty a { color: #fff; font-weight: 600; text-decoration: underline; }
@media (max-width: 1100px) { .cal-mstats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ms-t.k-acceptance i { background: var(--sber); } .ms-t.k-pnr i { background: var(--s-pnr); } .ms-t.k-psi i { background: var(--sky); }
.ms-t.k-meeting i { background: #8b6fd6; } .ms-t.k-task i, .ms-t.ok i { background: var(--sber); } .ms-t.k-deadline i { background: var(--s-remarks); } .ms-t.bad i { background: var(--bad); }
.cr-dir { display: inline-flex; margin-left: 4px; }

/* ---------- Входящая почта ---------- */
.in-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 13px; }
.seg-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--sber); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.mail-tools { align-items: center; }
.mail-tools input[type=search] { flex: 1 1 260px; max-width: 420px; }
.mail-tools .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.mail-tools .grow, .actions .grow { flex: 1; }
.mail-status { margin: 4px 0 10px; font-size: 12.5px; color: var(--muted); min-height: 18px; }
.mail-ok { display: inline-flex; align-items: center; gap: 7px; }
.mail-ok i { width: 7px; height: 7px; border-radius: 50%; background: var(--sber); box-shadow: 0 0 0 3px var(--sber-soft); }
.mail-ok i.spin { background: none; box-shadow: none; width: 11px; height: 11px; border: 2px solid var(--line); border-top-color: var(--sber); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mail-err { padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); font-size: 13px; margin-bottom: 10px; }
.mail-err a { color: inherit; font-weight: 600; }
.mail-off { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; padding: 14px 16px; border: 1.5px dashed var(--line); border-radius: 14px; color: var(--ink); font-size: 13.5px; line-height: 1.45; }
.mail-list { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.mail-empty { padding: 40px 16px; text-align: center; color: var(--muted); }
.mrow { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; transition: background .15s; }
.mrow:last-child { border-bottom: 0; }
.mrow:hover, .mrow:focus-visible { background: var(--line-2, rgba(0,0,0,.03)); outline: none; }
.mrow.unseen::before { content: ''; position: absolute; left: 5px; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: var(--sber); }
.mav { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: hsl(var(--h) 45% 32%); background: hsl(var(--h) 60% 90%); }
:root[data-theme="dark"] .mav { color: hsl(var(--h) 60% 80%); background: hsl(var(--h) 30% 24%); }
.mav.big { width: 44px; height: 44px; font-size: 15px; }
.mmain { flex: 1; min-width: 0; }
.mtop { display: flex; align-items: baseline; gap: 8px; }
.mfrom { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow:not(.unseen) .mfrom { font-weight: 500; }
.maddr { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mtime { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; flex: none; }
.mrow.unseen .mtime { color: var(--sber-dark); font-weight: 600; }
.msubj { font-size: 13.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow.unseen .msubj { font-weight: 600; }
.msnip { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.mchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mchip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--line-2, #f0f2f3); color: var(--muted); max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.mchip.reply { background: var(--sber-soft); color: var(--sber-dark); font-weight: 600; }
.mchip.warn { color: var(--bad); }
.mhead { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.mlink { padding: 8px 12px; border-radius: 10px; background: var(--sber-soft); color: var(--sber-dark); font-size: 13px; margin-bottom: 10px; }
.mlink a { color: inherit; font-weight: 600; }
.mobj { max-width: 360px; }
.mbody { white-space: pre-wrap; word-break: break-word; max-height: 46vh; overflow: auto; font: inherit; font-size: 13.5px; line-height: 1.55; background: var(--line-2, #f6f7f8); border-radius: 12px; padding: 14px 16px; margin: 6px 0 12px; }
.mbody a { color: var(--sber-dark); }
.mfiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin-bottom: 8px; }
.mfile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.mfile > div { flex: 1; min-width: 0; }
.mfname { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mfile .btn { padding: 4px 9px; font-size: 12px; }
.replies-h { margin: 14px 0 6px; font-size: 13px; color: var(--muted); }
.replies { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.reply-item { display: block; min-width: 0; overflow: hidden; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); color: inherit; text-decoration: none; font-size: 13px; }
.reply-item:hover { border-color: var(--sber); }
.reply-item .hint { margin-left: 8px; }
.reply-item div { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.switch-row { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 4px 0 10px; cursor: pointer; }
.imap-more summary { cursor: pointer; font-size: 13px; margin-bottom: 8px; }
@media (max-width: 640px) { .maddr { display: none; } .mrow { padding: 11px 12px; } }

/* ---------- Роли ---------- */
.role-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.role-tile { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.role-tile:hover { border-color: var(--border-strong, #c9d0d4); }
.role-tile:has(input:checked) { border-color: var(--sber); background: var(--sber-soft); }
.role-tile input { margin-top: 3px; accent-color: var(--sber); }
.role-tile b { display: block; font-size: 13.5px; }
.role-tile .hint { display: block; font-size: 12px; line-height: 1.35; margin-top: 2px; }
.role-detail { margin-top: 10px; }
.role-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; padding: 12px 14px; border-radius: 12px; background: var(--line-2); font-size: 13px; }
.role-lists ul { margin: 6px 0 0; padding-left: 18px; }
.role-lists li { margin: 3px 0; line-height: 1.4; }
.rl-h { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.rl-h.ok { color: var(--sber-dark); }
.rl-h.no { color: var(--muted); }
.role-matrix { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.role-matrix th, .role-matrix td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.role-matrix th:first-child, .role-matrix td:first-child { text-align: left; }
.role-matrix th { font-size: 12px; color: var(--muted); font-weight: 600; }
.role-matrix td.y { color: var(--sber-dark); font-weight: 700; }
.role-matrix td.n { color: var(--line); }
.role-matrix .hl { background: var(--sber-soft); }
.role-matrix th.hl { color: var(--sber-dark); }
.me-role-btn { font: inherit; font-size: 12px; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.me-role-btn:hover { color: var(--sber-dark); }
.role-manager { color: #7a4fc4; background: #f1eafc; }
.role-engineer { color: #1d6fb8; background: #e6f1fb; }
:root[data-theme="dark"] .role-manager { color: #c9b2f2; background: #2e2540; }
:root[data-theme="dark"] .role-engineer { color: #9cc8f0; background: #1e2c3a; }
@media (max-width: 640px) { .role-tiles, .role-lists { grid-template-columns: 1fr; } }

/* ---------- Кто в сети ---------- */
.online { display: flex; align-items: center; }
.online:empty { display: none; }
.oav { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #1c2024; margin-left: -6px; display: grid; place-items: center;
  font-family: inherit; font-weight: 700; font-size: 11px; line-height: 1; color: hsl(var(--h, 200) 55% 30%); background: hsl(var(--h, 200) 60% 86%); cursor: pointer; padding: 0; transition: transform .15s; }
.oav:first-child { margin-left: 0; }
.oav:hover { transform: translateY(-2px); z-index: 2; }
.oav i { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #1c2024; background: #8a949b; }
.oav.online i { background: #2fc552; }
.oav.away i { background: #f0b429; }
.oav.away { filter: saturate(.55); }
.oav.more, .oav.none { background: rgba(255,255,255,.1); color: #c7cfd4; font-size: 11px; }
/* Никого нет — кнопка как у темы и звука рядом. */
.oav.none { width: 34px; height: 34px; margin: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #d6dce0; }
.oav.none:hover { background: rgba(255,255,255,.12); color: #fff; transform: none; }
.oav.sm { width: 32px; height: 32px; margin: 0; border-color: var(--panel); flex: none; cursor: default; }
.oav.sm i { border-color: var(--panel); }
.online-pop { position: fixed; z-index: 60; width: 330px; max-height: 70vh; overflow: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.2); padding: 8px; animation: pop .18s var(--ease-soft, ease); }
.op-h { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 8px 4px; }
.op-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; }
.op-row:hover { background: var(--line-2); }
.op-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.op-main b { font-size: 13.5px; }
.op-st { font-size: 12px; color: var(--muted); }
.op-go { font-size: 12px; color: var(--sber-dark); text-decoration: none; font-weight: 600; margin-top: 2px; }
.op-go:hover { text-decoration: underline; }
.op-foot { font-size: 11.5px; color: var(--muted); padding: 8px; border-top: 1px solid var(--line); margin-top: 4px; line-height: 1.4; }
.pdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line); margin-right: 6px; vertical-align: 1px; }
.pdot.online { background: #2fc552; box-shadow: 0 0 0 3px rgba(47,197,82,.18); }
.pdot.away { background: #f0b429; }
tr.u-off td { opacity: .55; }
.user-hist { margin-left: 8px; align-self: center; }
@media (max-width: 900px) { .online { display: none; } }

/* ---------- Безопасность ---------- */
.sec-card { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sec-card:empty { display: none; }
.sec-card .hint { max-width: 520px; margin-top: 3px; }
.seg-row { display: inline-flex; gap: 2px; background: var(--line-2); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.seg-row button { font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: transparent; color: var(--muted); padding: 6px 11px; border-radius: 8px; cursor: pointer; }
.seg-row button.on { background: var(--surface, var(--panel)); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.note-box { color: var(--sber-dark); background: var(--sber-soft); border-radius: var(--r-s, 10px); padding: 9px 12px; font-size: 13.5px; margin-bottom: 10px; line-height: 1.4; }
.idle-warn { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(12,15,18,.55); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.idle-warn.on { opacity: 1; }
.iw-box { width: min(420px, calc(100vw - 32px)); background: var(--panel); color: var(--ink); border-radius: 20px; padding: 26px 26px 22px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.35);
  transform: translateY(10px) scale(.98); transition: transform .3s var(--ease-soft, ease); }
.idle-warn.on .iw-box { transform: none; }
.iw-box h3 { margin: 12px 0 6px; font-size: 20px; }
.iw-box p { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; }
.iw-ring { position: relative; width: 64px; height: 64px; margin: 0 auto; }
.iw-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.iw-ring circle { fill: none; stroke: var(--line); stroke-width: 3.5; }
.iw-ring .iw-p { stroke: #f0b429; stroke-dasharray: 119.4; stroke-dashoffset: 0; stroke-linecap: round; transition: stroke-dashoffset .5s linear; }
.iw-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 19px; font-variant-numeric: tabular-nums; }

/* ---------- Команда ---------- */
.team-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tk { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.tk b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tk span { font-size: 12.5px; color: var(--muted); }
.tk em { font-style: normal; font-size: 12px; color: var(--muted); margin-top: 4px; }
.tk.ok b { color: var(--sber-dark); }
.tk.bad b { color: var(--bad); }
.tk.warn b { color: var(--warn); }
.team-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.team-side { display: grid; gap: 16px; }
.team-people { display: grid; gap: 4px; }
.tp { padding: 12px 0; border-top: 1px solid var(--line); }
.tp:first-of-type { border-top: 0; }
.tp-head { display: flex; align-items: center; gap: 10px; }
.tp-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tp-who b { font-size: 14px; }
.tp-who .hint { font-size: 12px; }
.tp-add { flex: none; }
.tp-bar { height: 6px; border-radius: 3px; background: var(--line-2); margin: 10px 0 8px; overflow: hidden; }
.tp-bar i { display: block; height: 100%; border-radius: 3px; background: var(--sber); transition: width .6s var(--ease-soft, ease); }
.tp-bar i.warn { background: #f0ad00; }
.tp-bar i.bad { background: var(--bad); }
.tp-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.tp-nums b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tp-nums .bad, .tp-nums .bad b { color: var(--bad); }
.tp-tasks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.tp-tasks li { display: flex; gap: 8px; align-items: baseline; }
.tp-tasks .tp-d { flex: none; min-width: 44px; white-space: nowrap; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.tp-tasks li.late .tp-d { color: var(--bad); font-weight: 700; }
.tp-empty { margin-top: 6px; font-size: 12.5px; }
.team-chart { width: 100%; height: auto; display: block; }
.team-chart text { font-size: 10.5px; fill: var(--muted); }
.team-chart text.pct { font-weight: 700; fill: var(--ink); }
.team-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.team-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.tc-list { display: grid; gap: 10px; }
.tcr-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.tcr-top em { font-style: normal; color: var(--bad); font-weight: 600; }
.tcr-bar { position: relative; height: 6px; border-radius: 3px; background: var(--line-2); margin: 5px 0 3px; overflow: hidden; }
.tcr-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #f0ad00; border-radius: 3px; }
.tcr-bar i.od { background: var(--bad); }
@media (max-width: 1000px) { .team-grid { grid-template-columns: 1fr; } .team-kpi { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Комментарии ---------- */
.cm-list { display: grid; gap: 10px; }
.cm { display: flex; gap: 10px; }
.cm-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: hsl(var(--h) 45% 32%); background: hsl(var(--h) 60% 90%); }
.cm-b { flex: 1; min-width: 0; background: var(--line-2); border-radius: 4px 14px 14px 14px; padding: 8px 12px; }
.cm.boss .cm-b { background: #f3eefc; }
:root[data-theme="dark"] .cm.boss .cm-b { background: #2a2338; }
.cm-h { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.cm-h .hint { font-size: 11.5px; }
.cm-role { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7a4fc4; }
.cm-del { margin-left: auto; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; opacity: 0; transition: opacity .15s; }
.cm:hover .cm-del { opacity: 1; }
.cm-doc { font-size: 12px; color: var(--muted); margin-top: 1px; }
.cm-t { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.cm-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.cm-form textarea { flex: 1; min-height: 40px; resize: vertical; }
.cm-empty { font-size: 13px; }
.help-table { overflow-x: auto; margin: 6px 0 14px; }
.help-table table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.help-table th, .help-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.help-table th:first-child, .help-table td:first-child { text-align: left; }
.help-table th { font-size: 12.5px; color: var(--muted); }
.help-table td.y { color: var(--sber-dark); font-weight: 700; }
.help-table td.n { color: var(--muted); }
td.nowrap { white-space: nowrap; }
#contacts-body a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
#contacts-body a:hover { color: var(--sber-dark); border-bottom-color: var(--sber); }
/* Команда: недели — как «Готовность по объектам» */
.tw-bars { min-height: 0; height: 220px; flex: none; gap: 14px; padding-top: 18px; overflow: hidden; }
.tw-bars .bar-col { cursor: default; }
.tw-bars .bar-track { max-width: 38px; }
.tw-bars .bar-col.cur .lbl { color: var(--sber); }
.tw-bars .bar-col.cur .pct { color: var(--ink); font-weight: 700; }
#tw-mode button { white-space: nowrap; }

/* ---------- Чат ---------- */
.chat-btn { position: relative; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #d6dce0; display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s; }
.chat-btn:hover, .chat-btn.on { background: rgba(255,255,255,.12); color: #fff; }
.chat-btn b { position: absolute; top: -5px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--sber); color: #fff; font-size: 10.5px; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px #1c2024; }
.chat-btn b.mention, #chat-badge.mention { background: #f0a020; }

#view-chat { padding-bottom: 0; }
#chat-root { height: calc(100vh - 110px); min-height: 460px; }
.chat { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.c-side { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; }
.c-side-h { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.c-side-h .c-q { flex: 1; min-width: 0; }
.c-new-wrap { position: relative; }
.c-new { width: 38px; height: 38px; border-radius: 11px; border: 0; background: var(--sber); color: #fff; display: grid; place-items: center; cursor: pointer; }
.c-new:hover { filter: brightness(1.08); }
.c-new-menu { display: none; position: absolute; right: 0; top: 44px; z-index: 5; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 5px; min-width: 190px; }
.c-new-wrap.open .c-new-menu { display: block; animation: pop .15s; }
.c-new-menu button { display: block; width: 100%; text-align: left; font: inherit; font-size: 13.5px; padding: 8px 10px; border: 0; background: none; color: var(--ink); border-radius: 8px; cursor: pointer; }
.c-new-menu button:hover { background: var(--line-2); }
.c-list { flex: 1; overflow-y: auto; padding: 6px; }
.c-item { display: flex; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 12px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); align-items: center; }
.c-item:hover { background: var(--line-2); }
.c-item.on { background: var(--sber-soft); }
.c-it-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c-it-top, .c-it-bot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.c-it-top b { flex: 1; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-it-top time { font-size: 11.5px; color: var(--muted); flex: none; }
.c-item.unread .c-it-top time { color: var(--sber-dark); font-weight: 600; }
.c-last { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-last b { font-weight: 600; color: var(--ink); }
.c-item.unread .c-last { color: var(--ink); }
.c-n { flex: none; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px; background: var(--sber); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; line-height: 19px; text-align: center; }
.c-n.at { background: #f0a020; padding: 0 5px; }
.c-none { padding: 30px 16px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5; }

.cav { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13.5px;
  color: hsl(var(--h) 45% 30%); background: hsl(var(--h) 60% 88%); }
:root[data-theme="dark"] .cav { color: hsl(var(--h) 60% 82%); background: hsl(var(--h) 30% 24%); }
.cav.grp { border-radius: 13px; }
.cav.big { width: 40px; height: 40px; }
.cav.sm { width: 30px; height: 30px; font-size: 11px; }
.cav .pdot { position: absolute; right: -1px; bottom: -1px; margin: 0; width: 11px; height: 11px; border: 2px solid var(--panel); box-shadow: none; }
.cav .pdot.offline { display: none; }
.cav-sp { flex: none; width: 30px; }

.c-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg, var(--line-2)); }
.c-empty { margin: auto; text-align: center; color: var(--muted); display: flex; flex-direction: column; gap: 4px; align-items: center; }
.c-empty-ico { font-size: 40px; margin-bottom: 6px; opacity: .7; }
.c-empty b { color: var(--ink); font-size: 15px; }
.c-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.c-h-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.c-h-t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-h-t span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-h-t span .on { color: var(--sber-dark); }
.c-back { display: none; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px 0 0; }
.c-msgs { flex: 1; overflow-y: auto; padding: 14px 18px 6px; display: flex; flex-direction: column; gap: 2px; }
.c-load, .c-start { text-align: center; font-size: 12px; color: var(--muted); padding: 8px; }
.c-start { margin: auto; font-size: 13px; }
.c-day { text-align: center; margin: 12px 0 8px; }
.c-day span { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--panel); border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px; }
.c-sys { text-align: center; font-size: 12px; color: var(--muted); margin: 6px 0; }
.c-msg { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; position: relative; max-width: 100%; }
.c-msg.cont { margin-top: 2px; }
.c-msg.mine { flex-direction: row-reverse; }
.c-msg.mine .cav-sp { display: none; }
.c-bub { max-width: min(560px, 78%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px 16px 16px 6px; padding: 7px 11px 5px; min-width: 70px; box-shadow: 0 1px 1px rgba(0,0,0,.03); }
.c-msg.cont .c-bub { border-radius: 16px 16px 16px 6px; }
.c-msg.mine .c-bub { background: var(--sber-soft); border-color: transparent; border-radius: 16px 16px 6px 16px; }
:root[data-theme="dark"] .c-msg.mine .c-bub { background: #17392a; }
.c-msg.flash .c-bub { animation: flash 1.4s; box-shadow: 0 0 0 2px var(--sber); }
.c-au { font-size: 12px; font-weight: 700; color: hsl(var(--h) 50% 40%); margin-bottom: 2px; }
:root[data-theme="dark"] .c-au { color: hsl(var(--h) 60% 70%); }
.c-text { font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.c-text a { color: var(--sber-dark); }
.c-del { color: var(--muted); font-style: italic; }
.c-meta { font-size: 10.5px; color: var(--muted); text-align: right; margin-top: 2px; white-space: nowrap; }
.c-tick { font-style: normal; margin-left: 4px; letter-spacing: -2px; }
.c-tick.read { color: var(--sber); }
.cmention { color: var(--sber-dark); font-weight: 600; }
.cmention.to-me { background: rgba(240, 160, 32, .2); color: #b46a00; border-radius: 4px; padding: 0 3px; }
:root[data-theme="dark"] .cmention.to-me { color: #f5c06a; }
.cobj { display: inline-block; font-size: 12px; font-weight: 700; padding: 0 6px; border-radius: 6px; background: var(--line-2); color: var(--sber-dark) !important; text-decoration: none; }
.cobj:hover { background: var(--sber); color: #fff !important; }
.c-quote { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--sber); background: rgba(0,0,0,.04); border-radius: 6px; padding: 4px 8px; margin: 2px 0 5px; font: inherit; cursor: pointer; color: var(--ink); }
:root[data-theme="dark"] .c-quote { background: rgba(255,255,255,.06); }
.c-quote b { display: block; font-size: 12px; color: var(--sber-dark); }
.c-quote span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.c-imgs { display: grid; gap: 4px; margin: 2px 0 4px; border-radius: 10px; overflow: hidden; }
.c-imgs.n2 { grid-template-columns: 1fr 1fr; }
.c-imgs.n3 { grid-template-columns: 1fr 1fr 1fr; }
.c-img img { display: block; width: 100%; max-height: 300px; object-fit: cover; background: var(--line-2); }
.c-imgs.n1 .c-img img { max-width: 360px; object-fit: contain; }
.c-file { display: flex; align-items: center; gap: 9px; padding: 6px 8px; margin: 2px 0 4px; border-radius: 10px; background: rgba(0,0,0,.04); text-decoration: none; color: var(--ink); max-width: 340px; }
:root[data-theme="dark"] .c-file { background: rgba(255,255,255,.06); }
.c-file:hover { background: rgba(33,160,56,.12); }
.c-file > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.c-file b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-file i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.c-acts { align-self: center; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.c-msg:hover .c-acts { opacity: 1; }
.c-acts button { border: 0; background: var(--panel); border: 1px solid var(--line); color: var(--muted); width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.c-acts button:hover { color: var(--ink); }
.c-acts button.armed { width: auto; padding: 0 8px; color: var(--bad); border-color: var(--bad); }

.c-form { position: relative; padding: 8px 14px 12px; background: var(--panel); border-top: 1px solid var(--line); }
.c-row { display: flex; align-items: flex-end; gap: 8px; }
.c-row textarea { flex: 1; resize: none; min-height: 40px; max-height: 160px; padding: 9px 12px; border-radius: 12px; line-height: 1.4; font-size: 14px; }
.c-attach, .c-send { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 0; display: grid; place-items: center; cursor: pointer; }
.c-attach { background: none; color: var(--muted); }
.c-attach:hover { color: var(--ink); background: var(--line-2); }
.c-send { background: var(--sber); color: #fff; }
.c-send:disabled { opacity: .6; }
.c-ctx-in { display: flex; align-items: center; gap: 10px; padding: 6px 4px 8px; }
.c-ctx-i { color: var(--sber); font-size: 17px; width: 22px; text-align: center; }
.c-ctx-in div { flex: 1; min-width: 0; border-left: 3px solid var(--sber); padding-left: 8px; }
.c-ctx-in b { display: block; font-size: 12.5px; color: var(--sber-dark); }
.c-ctx-in span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-ctx-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.c-files { display: flex; flex-wrap: wrap; gap: 6px; }
.c-files:not(:empty) { padding-bottom: 8px; }
.c-fchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--line-2); max-width: 260px; }
.c-fchip i { font-style: normal; color: var(--muted); font-size: 11.5px; }
.c-fchip button { border: 0; background: none; color: var(--muted); cursor: pointer; }
.c-at { position: absolute; left: 60px; bottom: 58px; z-index: 6; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 5px; min-width: 260px; }
.c-at button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.c-at button.on, .c-at button:hover { background: var(--line-2); }
.c-at b { font-size: 13.5px; font-weight: 600; }
.c-at i { font-style: normal; font-size: 12px; color: var(--muted); margin-left: auto; }
.c-drop { display: none; position: absolute; inset: 10px; border: 2px dashed var(--sber); border-radius: 16px; background: rgba(33,160,56,.08); color: var(--sber-dark); font-weight: 700; place-items: center; z-index: 8; pointer-events: none; }
.c-main.dragging .c-drop { display: grid; }

.c-pick-q { width: 100%; margin-bottom: 10px; }
.c-pick-list { max-height: 46vh; overflow-y: auto; display: grid; gap: 2px; margin-bottom: 10px; }
.c-pick, .c-mem-r { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer; }
.c-pick:hover { background: var(--line-2); }
.c-pick:has(input:checked) { background: var(--sber-soft); }
.c-pick input { accent-color: var(--sber); }
.c-pick-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.c-pick-t b { font-size: 13.5px; font-weight: 600; }
.c-pick-t i { font-style: normal; font-size: 12px; color: var(--muted); }
.c-mem { display: grid; gap: 2px; margin: 6px 0 10px; }
.c-mem-r { cursor: default; }
.c-add summary { cursor: pointer; font-weight: 600; font-size: 13.5px; margin: 6px 0 8px; }

/* Всплывающая панель */
.chat-panel { position: fixed; top: 68px; right: 12px; bottom: 12px; width: min(420px, calc(100vw - 24px)); z-index: 47; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.25); overflow: hidden;
  transform: translateX(calc(100% + 24px)); opacity: 0; pointer-events: none; transition: transform .3s var(--ease-soft, ease), opacity .25s; }
.chat-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.cp-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.cp-head b { flex: 1; font-size: 15px; }
.cp-full, .cp-x { width: 30px; height: 30px; border-radius: 8px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; text-decoration: none; font-size: 15px; }
.cp-full:hover, .cp-x:hover { background: var(--line-2); color: var(--ink); }
.cp-body { flex: 1; min-height: 0; }
.chat.compact { grid-template-columns: 1fr; border: 0; border-radius: 0; height: 100%; }
.chat.compact .c-side { border-right: 0; }
.chat.compact .c-main { display: none; }
.chat.compact.in-room .c-side { display: none; }
.chat.compact.in-room .c-main { display: flex; }
.chat.compact .c-back { display: block; }
.chat.compact .c-msgs { padding: 10px 12px 6px; }
.chat.compact .c-bub { max-width: 84%; }
.chat.compact .c-at { left: 12px; }

/* Уведомление о сообщении */
.toast.chat-toast { cursor: pointer; display: flex; flex-direction: column; gap: 2px; max-width: 340px; border-left: 4px solid var(--sber); }
.toast.chat-toast.mention { border-left-color: #f0a020; }
.toast.chat-toast b { font-size: 13px; }
.toast.chat-toast span { font-size: 13px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast.out { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.op-row { align-items: center; }
.op-dm { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 14px; }
.op-dm:hover { border-color: var(--sber); }

@media (max-width: 900px) {
  .chat { grid-template-columns: 1fr; }
  .chat .c-main { display: none; }
  .chat.in-room .c-side { display: none; }
  .chat.in-room .c-main { display: flex; }
  .chat .c-back { display: block; }
}

/* Кнопка ассистента не мешает отправке сообщений: в разделе «Чат» и при открытой панели прячется. */
body.view-chat #ai-fab, body.chat-open #ai-fab { opacity: 0; pointer-events: none; transform: scale(.6); }
#ai-fab { transition: opacity .25s, transform .25s; }