/* ===== v7: оболочка в оформлении G (эскиз docs/concepts/sketches/G.png) =====
   Грузится после app.css и переопределяет переменные. Колонки: разделы · документы · лист · свойства.
   Размеры колонок — переменные --nav-w, --docs-w, --props-w, отступы — --pad (от края), --gap (между колонками). */

/* — токены G — */
:root {
  --canvas: #EEF2F7; --panel: #FFFFFF; --line: #E5E9F0; --text: #111827; --muted: #6B7280; --faint: #9CA3AF;
  --hover: #F3F6FA; --input: #F3F5F9; --chip: #FFFFFF; --section: rgba(17, 24, 39, .03); --section-line: rgba(17, 24, 39, .07);
  --sel: #2563EB; --sel-weak: #E8F0FE; --sel-text: #1D4ED8;
  --primary: #13294B; --primary-hover: #1C3A66; --on-primary: #FFFFFF;
  --ai-bg: #E8F0FE; --ai-text: #2563EB;
  --ok: #15803D; --ok-weak: #DCFCE7; --warn: #B45309; --warn-weak: #FEF3C7; --danger: #DC2626; --danger-weak: #FEE2E2;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .07);
  --shadow-pop: 0 4px 12px rgba(16, 24, 40, .08), 0 18px 48px rgba(16, 24, 40, .16);
  --sheet-shadow: 0 1px 3px rgba(16, 24, 40, .10), 0 12px 32px rgba(16, 24, 40, .10);
  --switch-off: #D5DBE5; --track: #DCE2EC;
  --r-panel: 16px; --r-card: 12px; --r-ctl: 10px;
  --pad: 12px; --gap: 10px; --nav-w: 232px; --docs-w: 280px; --props-w: 300px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0F1218; --panel: #191D24; --line: #2A303A; --text: #E9ECF1; --muted: #9AA3AF; --faint: #6B7480;
    --hover: #222833; --input: #222833; --chip: #222833; --section: rgba(255, 255, 255, .03); --section-line: rgba(255, 255, 255, .07);
    --sel: #4C8DFF; --sel-weak: #1D2B45; --sel-text: #8AB4FF;
    --primary: #2F6FED; --primary-hover: #3D7BF5;
    --ai-bg: #1D2B45; --ai-text: #8AB4FF;
    --ok: #4ADE80; --ok-weak: rgba(74, 222, 128, .14); --warn: #FBBF24; --warn-weak: rgba(251, 191, 36, .14); --danger: #F87171; --danger-weak: rgba(248, 113, 113, .15);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
    --shadow-pop: 0 6px 16px rgba(0, 0, 0, .45), 0 24px 56px rgba(0, 0, 0, .55);
    --sheet-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .5);
    --switch-off: #3A4250; --track: #3A4250;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #0F1218; --panel: #191D24; --line: #2A303A; --text: #E9ECF1; --muted: #9AA3AF; --faint: #6B7480;
  --hover: #222833; --input: #222833; --chip: #222833; --section: rgba(255, 255, 255, .03); --section-line: rgba(255, 255, 255, .07);
  --sel: #4C8DFF; --sel-weak: #1D2B45; --sel-text: #8AB4FF;
  --primary: #2F6FED; --primary-hover: #3D7BF5;
  --ai-bg: #1D2B45; --ai-text: #8AB4FF;
  --ok: #4ADE80; --ok-weak: rgba(74, 222, 128, .14); --warn: #FBBF24; --warn-weak: rgba(251, 191, 36, .14); --danger: #F87171; --danger-weak: rgba(248, 113, 113, .15);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-pop: 0 6px 16px rgba(0, 0, 0, .45), 0 24px 56px rgba(0, 0, 0, .55);
  --sheet-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .5);
  --switch-off: #3A4250; --track: #3A4250;
  color-scheme: dark;
}

/* — основа: шкала G (основной 15, подписи 13, заголовки колонок 22–24) — */
body { background: var(--canvas); font-size: 15px; line-height: 1.45; }
#canvas, #toolbar { display: none !important; }
.fi { flex: none; display: block; }
:where(#nav, #left, #editor, #page-host, #acct) button:focus-visible, :where(#nav, #left, #page-host) a:focus-visible,
:is(#layers, #left-sec) .layer:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
:where(#nav .nav-list, #layers, #props, #page-host, .ed-scroll) { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.btn { height: 36px; padding: 0 14px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 600; border-color: var(--line); color: var(--text); }
.btn.primary { background: var(--sel); border-color: var(--sel); color: #fff; }
.btn.danger { color: var(--danger); }
.seg { border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border-radius: 999px; font-size: 13px; padding: 7px 10px; }
.chk input[type="checkbox"]:checked { background: var(--sel); }

/* меню — светлая карточка (тёмная в тёмной теме) */
.menu { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 6px; min-width: 230px;
  box-shadow: var(--shadow-pop); max-height: calc(100vh - 16px); overflow-y: auto; }
.menu button { padding: 9px 12px; border-radius: 10px; font-size: 14px; gap: 18px; align-items: center; color: var(--text); text-align: left; }
.menu button:hover { background: var(--hover); }
.menu button > span { color: var(--muted); opacity: 1; font-size: 13px; margin-left: auto; white-space: nowrap; }
.menu .m-l { font-style: normal; display: flex; align-items: center; gap: 10px; min-width: 0; }
.menu .m-ic { width: 18px; height: 18px; flex: none; }
.menu .m-dc { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #5865F2; color: #fff; flex: none; }
.menu .m-dc svg { width: 12px; height: 12px; }
.menu .m-danger { color: var(--danger); }
.menu .dot { box-shadow: 0 0 0 1px var(--line); margin-right: 0; }

#toast { background: #111827; color: #fff; border-radius: 12px; font-size: 14px; padding: 10px 16px; bottom: 28px; box-shadow: var(--shadow-pop); }
:root[data-theme="dark"] #toast { background: #2A3340; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #toast { background: #2A3340; } }

/* окна */
.modal-bg { background: rgba(15, 18, 24, .45); }
.modal { border-radius: 18px; box-shadow: var(--shadow-pop); }
.modal .m-h { padding: 18px 22px 8px; font-size: 19px; font-weight: 700; border-bottom: 0; }
.modal .m-b { padding: 8px 22px 16px; font-size: 15px; }
.modal .m-f { padding: 14px 22px 18px; gap: 10px; }
.modal .m-f .btn { height: 40px; padding: 0 18px; font-size: 15px; }
.mform label { font-size: 13px; }
.mform label.chk { font-size: 15px; }
.mform .r-in { height: 42px; border-radius: var(--r-ctl); padding: 0 12px; font-size: 15px; }

/* ===== раскладка v8: три колонки — левая (меню разделов ИЛИ «Документы»), лист, свойства (компьютер ≥ 1200px) =====
   Левая колонка ~300 пкс: #nav (меню) и #left («Документы») стоят на одном месте; видна одна — body.lp-docs (app.js, applyLP).
   Переход — содержимое уезжает вбок и тает, новое въезжает (только после первой отрисовки: body.lp-ready). Освободившееся
   место — листу, «Свойствам» (340) и ИИ. Планшет 900–1199: меню — полоса значков, «Документы» выезжают поверх листа. */
:root { --lp-w: 300px; --props-w: 340px; --rail-w: 72px; }
@media (min-width: 900px) {
  .panel { top: var(--pad); bottom: var(--pad); border-radius: var(--r-panel); box-shadow: var(--shadow); background: var(--panel); }
  #nav, #left { left: var(--pad); width: var(--lp-w); }
  #right { right: var(--pad); width: var(--props-w); }
  #editor { top: var(--pad); bottom: var(--pad); left: calc(var(--pad) + var(--lp-w) + var(--gap)); right: calc(var(--pad) + var(--props-w) + var(--gap)); gap: 10px; }
  #page-host { left: calc(var(--pad) + var(--lp-w) + var(--gap)); right: var(--pad); top: var(--pad); bottom: var(--pad); }
  .ed-bar { flex-wrap: nowrap; }
}
/* 1200–1439: колонки чуть уже — лист шире */
@media (min-width: 1200px) and (max-width: 1439px) { :root { --lp-w: 284px; --props-w: 320px; } }
@media (min-width: 1200px) {
  /* видна одна половина колонки; спрятанная — без фокуса (inert) и без щелчков */
  body.lp-docs #nav, body:not(.lp-docs) #left { opacity: 0; visibility: hidden; pointer-events: none; }
  body.lp-docs #nav > *, body:not(.lp-docs) #left > * { transform: translateX(var(--lp-shift, -28px)); }
  body:not(.lp-docs) #left { --lp-shift: 28px; }
  body.lp-ready #nav, body.lp-ready #left { transition: opacity .2s ease, visibility 0s linear 0s; }
  body.lp-ready.lp-docs #nav, body.lp-ready:not(.lp-docs) #left { transition: opacity .18s ease, visibility 0s linear .26s; }
  body.lp-ready #nav > *, body.lp-ready #left > * { transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
}
/* на страницах-разделах (Оформления, Пользовательские, Законы…) лист и «Свойства» уступают место странице; слева — меню */
body:not([data-section="docs"]) :is(#right, #editor) { display: none !important; }
@media (max-width: 1199px) { body:not([data-section="docs"]):not(.sec-left) #left { display: none !important; } }
/* левая панель раздела (v13, «Законы»): в колонке «внутрь» — её список вместо поиска и списка документов */
body.sec-left :is(#layers, #dl-add, #left > .dl-search) { display: none !important; }
body:not(.sec-left) #left-sec { display: none !important; }
#left-sec { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
#lp-scrim { display: none; }
@media (prefers-reduced-motion: reduce) {
  body.lp-ready :is(#nav, #left), body.lp-ready :is(#nav, #left) > * { transition: none !important; }
}

/* ===== колонка 1 — «Разделы» ===== */
#nav { flex-direction: column; padding: 22px 12px 12px; }  /* display — у .panel (на телефоне скрыта, пока не открыта шторка) */
.nav-brand { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; color: var(--text); text-decoration: none; border-radius: 12px; }
.nav-brand img { width: 104px; height: auto; margin-bottom: 10px; }
.nav-brand b { font-size: 20px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.nav-brand span { font-size: 15px; color: var(--muted); margin-top: 3px; }
:root[data-theme="dark"] .nav-brand img { filter: invert(.93); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-brand img { filter: invert(.93); } }
.nav-list { flex: 1; min-height: 0; overflow-y: auto; margin: 26px -4px 0; padding: 0 4px; display: flex; flex-direction: column; gap: 4px; }
.nav-it { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; font-size: 15px; font-weight: 500;
  color: var(--text); text-decoration: none; text-align: left; flex: none; }
.nav-it:hover { background: var(--hover); }
.nav-it.on { background: var(--sel-weak); color: var(--sel); font-weight: 600; }
.nav-ic { width: 24px; height: 24px; display: grid; place-items: center; flex: none; }
.nav-ic .fi { width: 22px; height: 22px; }
.nav-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-admin { margin-top: 6px; position: relative; }
.nav-admin::before { content: ""; position: absolute; left: 12px; right: 12px; top: -5px; height: 1px; background: var(--line); }
.nav-foot { margin-top: 12px; padding: 0; border: 0; }
/* «Документы» — внутрь: стрелка справа */
.nav-it .chev-r { width: 18px; height: 18px; margin-left: auto; color: var(--muted); flex: none; transition: transform .15s; }
.nav-it.on .chev-r { color: var(--sel); }
.nav-it.nav-in:hover .chev-r { transform: translateX(2px); }

/* профиль не заполнен — красный круглый «!» (аватар, «Профиль игрока», «←» в «Документах», «Профиль» на телефоне) */
.pf-bang { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #E5484D; color: #fff; font: 800 12px/1 Inter, sans-serif;
  font-style: normal; flex: none; box-shadow: 0 0 0 2px var(--panel); }
.acct-av .pf-bang { position: absolute; top: -4px; right: -4px; }
.acct-pf.miss > span { display: flex; flex-direction: column; line-height: 1.25; white-space: normal; }
.acct-pf.miss > span small { font-size: 12px; font-weight: 500; color: var(--muted); }
.acct-pf.miss .pf-bang { margin-right: 4px; }

/* карточка аккаунта */
.acct-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
.acct-user { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 0; text-align: left; }
.acct-user:hover { background: var(--hover); }
.acct-user > svg.chev { width: 18px; height: 18px; color: var(--muted); flex: none; }
.acct-av { position: relative; width: 40px; height: 40px; flex: none; display: block; }
.acct-user .acct-av img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.acct-dc { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #5865F2; color: #fff; }
.acct-dc svg { width: 23px; height: 23px; }
.acct-user i.acct-dot { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--panel); background: #23A55A; display: none; }
.acct-user i.acct-dot.cs-saving { background: var(--sel); animation: blink 1s ease-in-out infinite; }
.acct-user i.acct-dot.cs-wait { background: #F0B232; }
.acct-user i.acct-dot.cs-err { background: #F23F43; }
.acct-who { flex: 1; min-width: 0; display: block; }
.acct-who b { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.acct-user .acct-who small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-row { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 8px 8px 12px; border-top: 1px solid var(--line); font-size: 13px;
  font-weight: 500; color: var(--text); text-align: left; }
button.acct-row:hover { background: var(--hover); }
.acct-row > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-row .chev-r { width: 15px; height: 15px; color: var(--muted); flex: none; }
.acct-row.cs-saving .fi { animation: blink 1s ease-in-out infinite; }
.acct-row.cs-err > span { color: var(--danger); }
.acct-card > .acct-row:first-child { border-top: 0; }
.acct-guest { padding: 10px; }
.acct-guest .dc-btn { height: 44px; border-radius: 12px; font-size: 14px; gap: 8px; padding: 0 10px; white-space: nowrap; }
.acct-guest .dc-btn svg { width: 20px; height: 20px; flex: none; }
.acct-guest .acct-note { margin: 8px 0 0; font-size: 13px; }

/* ===== колонка 2 — «Документы» ===== */
#left { flex-direction: column; padding: 18px 14px 0; }
.dl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 14px 0; }
.dl-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
/* «←» — к меню разделов */
.dl-back { position: relative; width: 40px; height: 40px; margin-left: -4px; border-radius: 12px; display: grid; place-items: center; color: var(--text); flex: none; transition: background .15s; }
.dl-back:hover { background: var(--hover); }
.dl-back svg { width: 22px; height: 22px; }
.dl-back-dot { display: none; position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 2px var(--panel); }
body.pf-miss .dl-back-dot { display: block; }
.dl-add { width: 40px; height: 40px; border-radius: 50%; background: var(--sel-weak); color: var(--sel); display: grid; place-items: center; flex: none; transition: background .15s; }
.dl-add:hover { background: color-mix(in srgb, var(--sel) 20%, var(--panel)); }
.dl-add svg { width: 22px; height: 22px; }
.dl-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; background: var(--input); border: 1.5px solid transparent;
  margin-bottom: 12px; flex: none; cursor: text; }
.dl-search:focus-within { border-color: var(--sel); background: var(--panel); }
.dl-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.dl-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: 15px; color: var(--text); padding: 0; }
.dl-search input::placeholder { color: var(--faint); }
.dl-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -12px; padding: 0 12px 14px; }
.dl-group { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; background: var(--panel); }
.dl-gh { display: flex; align-items: center; padding-right: 6px; }
.dl-gh .dl-bh { padding-right: 6px; }
.dl-bh { flex: 1; min-width: 0; width: 100%; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 8px 0 12px; border-radius: 13px; text-align: left; color: var(--text); }
.dl-bh:hover { background: var(--hover); }
.dl-group.open .dl-bh { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.dl-bi { width: 24px; height: 24px; display: grid; place-items: center; flex: none; margin-right: 2px; }
.dl-bi .fi { width: 22px; height: 22px; }
.dl-bn { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-cnt { min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--input); color: var(--muted); font-size: 12px; font-weight: 600;
  display: inline-grid; place-items: center; flex: none; font-variant-numeric: tabular-nums; }
.dl-bh .chev { width: 16px; height: 16px; color: var(--muted); flex: none; transition: transform .18s; }
.dl-group.open .dl-bh .chev { transform: rotate(180deg); }
.dl-docs { display: none; padding: 2px 6px 6px; }
.dl-group.open .dl-docs, #layers.searching .dl-docs { display: block; }
.dl-cap { margin: 16px 6px 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.dl-empty, .dl-none { margin: 2px 8px 8px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.dl-none { margin-top: 10px; }
/* строки документов */
:is(#layers, #left-sec) .layer { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 6px 0 12px; border-radius: 10px; font-size: 15px;
  color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: clip; outline-offset: -2px; }
:is(#layers, #left-sec) .layer + .layer { margin-top: 2px; }
:is(#layers, #left-sec) .layer:hover { background: var(--hover); }
:is(#layers, #left-sec) .layer.on { background: var(--sel); color: #fff; }
:is(#layers, #left-sec) .layer .dl-ic { width: 20px; height: 20px; color: var(--muted); flex: none; }
:is(#layers, #left-sec) .layer.on .dl-ic { color: #fff; }
:is(#layers, #left-sec) .layer .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#layers .layer .tag { margin-left: 0; font-size: 12px; color: var(--muted); flex: none; }
#layers .layer.on .tag { color: rgba(255, 255, 255, .85); }
.dl-more { width: 30px; height: 30px; border-radius: 8px; display: none; place-items: center; color: inherit; flex: none; }
.dl-more svg { width: 18px; height: 18px; }
.dl-more:hover { background: var(--hover); }
#layers .layer.on .dl-more { display: grid; }
#layers .layer.on .dl-more:hover { background: rgba(255, 255, 255, .2); }
/* «⋯» у «Моих документов» (ZIP, список) — при наведении, чтобы не теснить название; на сенсорных экранах — всегда */
.dl-gh .dl-more { color: var(--muted); }
.dl-gh:hover .dl-more, .dl-gh:focus-within .dl-more { display: grid; }
@media (hover: none) { .dl-gh .dl-more { display: grid; } }
/* свои документы: значок, название, «№ · дата», метка */
#layers .layer.mine { min-height: 56px; padding: 6px 6px 6px 8px; }
.dl-fi { width: 36px; height: 36px; border-radius: 10px; background: var(--sel-weak); display: grid; place-items: center; flex: none; }
.dl-fi .fi { width: 22px; height: 22px; }
#layers .layer.mine.on .dl-fi { background: rgba(255, 255, 255, .92); }
.dl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dl-txt .lbl { font-weight: 600; }
.dl-txt small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
#layers .layer.on .dl-txt small { color: rgba(255, 255, 255, .82); }
.mark { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; flex: none; line-height: 1.3; }
.mark.ok { background: var(--ok-weak); color: var(--ok); }
.mark.tick { width: 22px; height: 22px; padding: 0; display: inline-grid; place-items: center; font-size: 13px; font-weight: 800; }  /* утверждённый бланк в ведомстве: галочка, название — в подсказке */
.mark.draft { background: #FFEDD5; color: #C2410C; }
.mark.off { background: var(--danger-weak); color: var(--danger); }
.mark.copy { background: var(--sel-weak); color: var(--sel); }
:root[data-theme="dark"] .mark.draft { background: rgba(251, 146, 60, .16); color: #FDBA74; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark.draft { background: rgba(251, 146, 60, .16); color: #FDBA74; } }
#layers .layer.on .mark { display: none; }

/* ===== колонка 3 — лист ===== */
.ed-bar { position: relative; gap: 10px; min-height: 70px; padding: 10px 12px 10px 18px; border-radius: var(--r-panel); box-shadow: var(--shadow); container-type: inline-size; }
.ed-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* в app.css «.ed-title span» — 11,5 пкс: в шапке G подписи 13 */
.ed-title span { font-size: inherit; color: inherit; overflow: visible; }
.ed-crumbs { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; min-width: 0; }
.ed-crumbs span { overflow: hidden; text-overflow: ellipsis; flex: none; }
.ed-crumbs span:first-child { flex: 0 1 auto; min-width: 48px; }  /* первым сжимается ведомство, номер — нет */
.ed-crumbs i { font-style: normal; color: var(--faint); flex: none; }
.ed-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ed-title .ed-name b { font-size: 23px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ed-title .ed-tag { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--input); padding: 3px 9px; border-radius: 999px; flex: none; }
.ed-title .ed-tag[hidden] { display: none; }
.ed-title .ed-saved { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--ok); flex: none; white-space: nowrap; }
.ed-saved svg { width: 16px; height: 16px; }
.ed-title .ed-saved.cs-saving { color: var(--muted); }
.ed-title .ed-saved.cs-err { color: var(--danger); }
.ed-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.ed-acts .btn { height: 42px; padding: 0 13px; border-radius: 12px; font-size: 15px; font-weight: 600; gap: 8px; border: 0; }
.ed-acts .btn svg { width: 20px; height: 20px; flex: none; }
.ed-acts .btn[hidden] { display: none; }
#editor .ai-btn { background: var(--ai-bg); color: var(--ai-text); }
#editor .ai-btn:hover { background: color-mix(in srgb, var(--ai-text) 16%, var(--panel)); filter: none; }
#editor .ai-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--ai-text); }
.ed-split { display: flex; flex: none; }
.ed-split .btn.primary { background: var(--primary); color: var(--on-primary); border: 0; }
.ed-split .btn.primary:hover { background: var(--primary-hover); filter: none; }
.ed-split #ed-png { border-radius: 12px 0 0 12px; }
.ed-split #ed-dl { border-radius: 0 12px 12px 0; padding: 0 8px; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2); }
/* «Создать документ по шаблону» — заметная, но второстепенная: главная на экране одна — «Скачать PNG» */
#editor .tpl-btn { background: var(--panel); color: var(--sel); box-shadow: inset 0 0 0 1.5px var(--sel); }
#editor .tpl-btn:hover { background: var(--sel-weak); filter: none; }
.l-min { display: none; }
.ed-warn { position: absolute; left: 50%; top: calc(100% + 64px); transform: translateX(-50%); z-index: 4; font-size: 13px; font-weight: 600; color: #92400E;
  background: #FEF3C7; padding: 7px 14px; border-radius: 999px; box-shadow: var(--shadow); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.ed-warn[hidden] { display: none; }
/* у шаблона рядом с названием — «Шаблон» (без «Сохранено»), в шапке на одну кнопку больше */
.ed-bar:has(.tpl-btn:not([hidden])) .ed-title .ed-saved { display: none; }
/* узкая шапка: подписи кнопок короче, потом — одни значки (у шаблона сжимается раньше) */
@container (max-width: 980px) { .tpl-btn .l-full { display: none; } .tpl-btn .l-min { display: inline; } }
@container (max-width: 700px) { .ai-btn .l { display: none; } .ed-acts .ai-btn { padding: 0 12px; } }
/* тесно (панель ИИ открыта, ноутбук) — первой сжимается второстепенная «Создать» (до «+»), главная держит подпись дольше всех:
   «Скачать PNG» → «Скачать» → значок */
@container (max-width: 640px) { .tpl-btn .l-min { display: none; } .ed-acts .tpl-btn { padding: 0 12px; } }
@container (max-width: 560px) { .ed-title .ed-saved { display: none; } }
@container (max-width: 500px) { #ed-png .l-png { display: none; } }
@container (max-width: 400px) { #ed-png .l { display: none; } .ed-split #ed-png { padding: 0 12px; } }
@container (max-width: 470px) { .ed-title .ed-tag { display: none; } }
/* совсем узко (планшет с открытой панелью ИИ): «Создать» — только в меню «+» колонки «Документы», название листа — целиком */
@container (max-width: 300px) { .ed-acts .tpl-btn { display: none; } }

/* панель правки — одна строка-капсула под шапкой; редкое — в «Ещё ▾» */
.ed-fmt { display: flex; justify-content: center; min-width: 0; container-type: inline-size; }
/* капсула помещается в колонку листа целиком (1600 и 1440 — с запасом ~25 точек): лишнее уходит в «Ещё ▾» по ширине контейнера */
.ed-fmt #fmt { width: auto; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 1px; padding: 5px 8px; border-radius: 999px;
  background: var(--panel); color: var(--text); box-shadow: var(--shadow); font-size: 14px; }
.ed-fmt #fmt::-webkit-scrollbar { display: none; }
.ed-fmt #fmt button { height: 34px; min-width: 34px; padding: 0 9px; border-radius: 999px; font-size: 14px; color: var(--text); flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; }
.ed-fmt #fmt button svg { width: 18px; height: 18px; }
.ed-fmt #fmt button:hover { background: var(--hover); }
.ed-fmt #fmt .fs, .ed-fmt #fmt .fbr { width: 1px; height: 20px; background: var(--line); margin: 0 3px; flex: none; }
.ed-fmt #fmt .more { color: var(--sel); font-weight: 600; }
#fmt .rare { display: none !important; }
@container (max-width: 720px) { #fmt .al { display: none !important; } }
@container (max-width: 570px) { #fmt .c2 { display: none !important; } }
@container (max-width: 450px) { #fmt .c3 { display: none !important; } }
/* «Мои данные ▾» (profile.js) в капсулу помещается только на очень широком листе, иначе — пункт «Ещё ▾» (без скрытой прокрутки) */
@container (max-width: 879px) { #fmt [data-pf-menu] { display: none !important; } }
:root[data-theme="dark"] .ed-fmt #fmt .mk { color: #1e1e1e; }

.ed-scroll { padding: 20px 0 96px; border-radius: var(--r-panel); }
.ed-pages .doc { box-shadow: var(--sheet-shadow); }
/* лист масштабируется transform'ом, место под него — обёртка (размеры ставит setEdZoom) */
.ed-sizer { margin: 0 auto; position: relative; }
#editor .ed-pages { width: 794px; margin: 0; transform-origin: 0 0; }
/* v9 (эскиз Б): стеклянная капсула — масштаб, «Лист N из M», ⤢ «целиком ↔ по ширине» */
#editor .ed-zoom { position: absolute; right: 14px; bottom: 14px; z-index: 4; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--panel); background: color-mix(in srgb, var(--panel) 84%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--line); box-shadow: var(--shadow-pop); }
#editor .ed-zoom button { height: 32px; min-width: 32px; padding: 0 8px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); }
#editor .ed-zoom button:hover { background: var(--hover); color: var(--text); }
.ez-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); flex: none; }
.ez-pg { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ez-pg[hidden] + .ez-sep { display: none; }
#editor .ed-zoom .ez-mode { display: grid; place-items: center; padding: 0; }
.ez-mode svg { width: 18px; height: 18px; }
#editor .ed-zoom .ez-mode.on { color: var(--sel); background: var(--sel-weak); }
/* лист — бумага на столе: мягкая тень (эскиз А) */
.ed-pages .doc { box-shadow: var(--sheet-shadow); }
#ed-zv { min-width: 54px; font-variant-numeric: tabular-nums; }
.off-frame { position: absolute !important; left: -30000px; top: 0; }

/* ===== колонка 4 — «Свойства» (рамка; содержимое — renderProps / props.css) ===== */
#right { flex-direction: column; }
#props { flex: 1; min-height: 0; overflow-y: auto; }

/* ===== страницы-разделы (#page-host) — общие части для всех модулей ===== */
#page-host { position: fixed; z-index: 5; overflow-y: auto; overflow-x: hidden; border-radius: var(--r-panel); }
#page-host[hidden] { display: none !important; }
.pg { padding: 6px 4px 40px; }
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin: 4px 2px 20px; flex-wrap: wrap; }
.pg-ht { min-width: 0; }
.pg-head h1 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.pg-head p { margin: 6px 0 0; font-size: 15px; color: var(--muted); max-width: 780px; }
.pg-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg-note { color: var(--muted); }
.pg-pick { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.pg-sel { height: 42px; max-width: 320px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 15px; box-shadow: var(--shadow); }
.pg-card { background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--shadow); }

/* «Оформления»: сетка превью */
.st-grid { --k: .3; display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 16px; }
.st-card { display: flex; flex-direction: column; gap: 10px; padding: 10px; background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--shadow);
  outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .15s; }
.st-card.on { outline-color: var(--sel); }
.st-prev { position: relative; aspect-ratio: 794 / 640; overflow: hidden; border-radius: 10px; background: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.st-sheet { position: absolute; left: 0; top: 0; width: 794px; transform: scale(var(--k)); transform-origin: 0 0; pointer-events: none; }
.st-sheet .pages { gap: 0; }
.st-sheet .doc + .doc { display: none; }
body.show-vars .st-sheet .doc .var { background: none; box-shadow: none; }
body.show-vars .st-sheet .doc .f.smp::first-line { background: none; }
.st-meta { padding: 0 4px; min-width: 0; }
.st-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-t b { font-size: 17px; font-weight: 700; }
.st-all { font-size: 12px; font-weight: 600; color: var(--sel); background: var(--sel-weak); padding: 2px 8px; border-radius: 999px; }
.st-h { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.st-acts { display: flex; gap: 8px; padding: 0 2px 2px; margin-top: auto; }
.st-acts .st-apply { flex: 1; height: 38px; border-radius: 999px; border: 1.5px solid var(--sel); background: transparent; color: var(--sel); font-size: 14px; }
.st-acts .st-apply:hover { background: var(--sel-weak); }
.st-card.on .st-apply { background: var(--sel); color: #fff; }
.st-acts .st-more { width: 38px; height: 38px; padding: 0; border-radius: 999px; color: var(--muted); }
.st-acts .st-more svg { width: 18px; height: 18px; }

/* «Гербы и печати» */
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
/* длинное название ведомства — в две строки, а не обрывом; знаки в ряду карточек — на одной высоте (прижаты вниз) */
.kit-box { display: flex; flex-direction: column; padding: 14px 14px 10px; background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--shadow); }
.kit-box header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kit-bi { width: 26px; height: 26px; display: grid; place-items: center; flex: none; }
.kit-box header b { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.kit-hex { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.kit-hex i { width: 12px; height: 12px; border-radius: 4px; background: var(--accent); }
.kit-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: auto; }
.kit-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border-radius: 12px; color: var(--text); }
.kit-tile:hover { background: var(--hover); }
.kit-tile:hover .kit-art { box-shadow: 0 0 0 2px var(--sel); }
.kit-art { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 12px; background: #fff repeating-conic-gradient(rgba(0, 0, 0, .045) 0 25%, transparent 0 50%) 0 0 / 12px 12px;
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s; }
.kit-art img { max-width: 64px; max-height: 70px; }
.kit-art svg { width: 72px; height: 72px; }
.kit-tile small { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.25; }

/* «Настройки» (v10, эскиз «Н · Списком», docs/v9/sketches/settings.png): одна колонка по центру, группы строками.
   Строка: значок в цветном скруглённом квадрате (--tone), подпись (и пояснение), справа — управление или «›». Разметка — mountSettings(). */
.set-col { max-width: 720px; margin: 0 auto; }
.pg-set .pg-head { margin-bottom: 18px; }
.set-grp { margin: 0 0 16px; padding: 0 18px 4px; background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--shadow); }
.set-gh { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 0 12px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--text); }
.set-gh .fi { width: 22px; height: 22px; flex: none; }
.set-grp > :not(.set-gh) { border-top: 1px solid var(--line); }
.set-grp > .set-prev { border-top: 0; }
.set-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 0; color: var(--text); text-align: left; font-size: 15px; }
button.set-row, label.set-row { cursor: pointer; }
.set-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--tone, var(--sel)) 16%, var(--panel)); }
.set-ic .fi { width: 20px; height: 20px; }
.set-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 500; line-height: 1.35; }
.set-t small { font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--muted); }
.set-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-chev { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform .15s, color .15s; }
.set-go:hover .set-chev { color: var(--sel); transform: translateX(2px); }
.set-go:hover > .set-t { color: var(--sel); }
.set-danger > .set-t, .set-danger:hover > .set-t { color: var(--danger); }
.set-danger:hover .set-chev { color: var(--danger); }
.set-go:focus-visible, .set-body .btn:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; border-radius: 10px; }
/* тема: сегменты, выбранный — синий */
.pg-set .seg { display: flex; flex: none; gap: 2px; margin-left: auto; padding: 3px; border-radius: 10px; background: var(--input); }
.pg-set .seg button { flex: 1 1 auto; height: 34px; padding: 0 14px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.pg-set .seg button:hover { color: var(--text); }
.pg-set .seg button.on { background: var(--sel); color: #fff; font-weight: 600; box-shadow: none; }
.pg-set .seg button:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; }
/* переключатель */
.set-tg { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: var(--switch-off);
  cursor: pointer; transition: background .2s; }
.set-tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transition: transform .2s; }
.set-tg:checked { background: var(--sel); }
.set-tg:checked::after { transform: translateX(18px); }
.set-tg:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
/* образец бумаги: всегда белый лист; жёлтые места — как переключатель «Подсвечивать места для замены» */
.set-prev { display: flex; justify-content: center; padding: 2px 0 18px; }
.set-paper { width: min(400px, 100%); padding: 16px 26px 18px; background: #fff; color: #1b1b1b; border-radius: 4px; text-align: left;
  font: 13px/1.5 Tinos, "Times New Roman", Times, serif; box-shadow: 0 1px 3px rgba(16, 24, 40, .14), 0 10px 28px rgba(16, 24, 40, .14); }
.set-paper img { display: block; width: 44px; height: 48px; margin: 0 auto 6px; object-fit: contain; }
.set-paper b { display: block; text-align: center; }
.set-paper .sp-org { padding-bottom: 6px; border-bottom: 1px solid #1b1b1b; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; }
.set-paper .sp-kind { margin: 8px 0 2px; font-size: 20px; letter-spacing: .16em; text-transform: uppercase; }
.set-paper .sp-meta { display: flex; justify-content: space-between; gap: 12px; }
.set-paper .sp-t { margin: 6px 0 4px; }
.set-paper p { margin: 0 0 2px; }
.set-var { font-style: normal; border-radius: 2px; }
body.show-vars .set-var { background: rgba(255, 205, 41, .45); box-shadow: 0 0 0 1px rgba(214, 160, 0, .3); }
/* свои ведомства */
.set-list { list-style: none; margin: 0; padding: 0; }
.set-list > li + li { border-top: 1px solid var(--line); }
.set-em { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), 0 0 0 2px color-mix(in srgb, var(--accent, var(--line)) 55%, transparent); }
.set-em img { max-width: 28px; max-height: 30px; object-fit: contain; }
.set-bb { display: flex; gap: 8px; flex: none; }
.set-bb .btn { height: 34px; padding: 0 12px; font-size: 13px; }
.set-note { margin: 0; padding: 10px 0 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
/* клавиши: на широком — в две колонки */
.set-keys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 32px; }
.set-keys li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; font-size: 14px; border-top: 1px solid var(--line); }
.set-keys li:nth-child(1), .set-keys li:nth-child(5) { border-top: 0; }
.set-kk { display: flex; gap: 6px; flex: none; }
.set-keys kbd { font: 600 13px/1.4 Inter, sans-serif; background: var(--input); border: 1px solid var(--line); border-radius: 7px; padding: 2px 8px; color: var(--text); white-space: nowrap; }
@media (max-width: 640px) {
  .set-grp { padding: 0 14px 2px; }
  .set-theme { flex-wrap: wrap; row-gap: 10px; }
  .set-theme .seg { flex: 1 1 100%; margin-left: 0; }
  .pg-set .seg button { height: 40px; padding: 0 8px; }
  .set-keys { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .set-keys li:nth-child(5) { border-top: 1px solid var(--line); }
  .set-body { flex-wrap: wrap; row-gap: 10px; }
  .set-body > .set-t { flex: 1 1 calc(100% - 48px); }
  .set-bb { flex: 1 1 100%; padding-left: 48px; }
  .set-bb .btn { flex: 1; height: 40px; }
  .set-paper { padding: 14px 16px 16px; }
}

/* ===== 1200–1439: колонка 284 — пункты разделов чуть плотнее; счётчики у ведомств — только на широком (название важнее) ===== */
@media (min-width: 1200px) and (max-width: 1439px) {
  #nav { padding-left: 10px; padding-right: 10px; }
  .nav-it { padding: 0 12px; gap: 12px; }
}
@media (max-width: 1439px) { .dl-body .dl-cnt { display: none; } }

/* ===== невысокий экран (ноутбук 1280×720): герб и пункты меню плотнее — «Панель владельца» не уходит под карточку аккаунта ===== */
@media (min-width: 1200px) and (max-height: 820px) {
  #nav { padding-top: 16px; }
  .nav-brand img { width: 72px; margin-bottom: 6px; }
  .nav-brand b { font-size: 18px; }
  .nav-list { margin-top: 16px; gap: 2px; }
  .nav-it { min-height: 44px; }
}

/* ===== планшет 900–1199: меню — полоса значков, «Документы» выезжают поверх листа ===== */
@media (min-width: 900px) and (max-width: 1199px) {
  :root { --props-w: 300px; }
  #nav { width: var(--rail-w); padding: 14px 8px 10px; align-items: stretch; z-index: 21; }
  .nav-brand { padding: 0; }
  .nav-brand img { width: 46px; margin: 0; }
  .nav-brand b, .nav-brand span { display: none; }
  .nav-list { margin-top: 18px; align-items: center; }
  .nav-it { width: 52px; min-height: 50px; padding: 0; justify-content: center; }
  .nav-t, .nav-it .chev-r { display: none; }
  .nav-admin::before { left: 8px; right: 8px; }
  .acct-card { border: 0; }
  .acct-user { padding: 6px 0; justify-content: center; border-radius: 12px; }
  .acct-who, .acct-user > svg.chev, .acct-row { display: none; }
  .acct-user i.acct-dot { display: block; }
  .acct-guest { padding: 0; }
  .acct-guest .dc-btn { width: 48px; height: 48px; margin: 0 auto; padding: 0; border-radius: 14px; }
  .acct-guest .dc-btn span, .acct-guest .acct-note { display: none; }
  #editor, #page-host { left: calc(var(--pad) + var(--rail-w) + var(--gap)); }
  /* «Документы» — поверх листа, от полосы значков; «←», щелчок мимо или выбор документа — убрать */
  #left { left: calc(var(--pad) + var(--rail-w) + var(--gap)); width: 320px; z-index: 22; box-shadow: var(--shadow-pop);
    opacity: 0; visibility: hidden; transform: translateX(-14px); pointer-events: none; }
  body.lp-over #left { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  body.lp-ready #left { transition: opacity .18s ease, transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s; }
  body.lp-ready.lp-over #left { transition: opacity .2s ease, transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  #lp-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(15, 18, 24, .24); }
  .dl-head h2 { font-size: 22px; }
  .pg-head h1 { font-size: 28px; }
}

/* ===== v9: «Свернуть панель» на компьютере (body.rail, app.js setRail) — меню разделов полосой значков, как на планшете; лист шире.
   Колонка сужается плавно: значки остаются на месте, подписи уходят за край; «Документы» — поверх листа от полосы ===== */
.nav-rail { margin-top: 8px; min-height: 44px; color: var(--muted); font-size: 14px; flex: none; }
.nav-rail:hover { color: var(--text); }
.nav-rail .rail-chev { transition: transform .32s cubic-bezier(.2, .8, .2, 1); transform-origin: 14.75px 12px; }
body.rail .nav-rail .rail-chev { transform: scaleX(-1); }
@media (max-width: 1199px) { .nav-rail { display: none !important; } }
@media (min-width: 1200px) {
  body.lp-ready #nav { transition: opacity .2s ease, visibility 0s linear 0s, width .34s cubic-bezier(.2, .8, .2, 1), padding .34s cubic-bezier(.2, .8, .2, 1); }
  body.lp-ready :is(#editor, #page-host) { transition: left .34s cubic-bezier(.2, .8, .2, 1); }
  body.lp-ready .nav-brand img { transition: width .34s cubic-bezier(.2, .8, .2, 1), margin .34s cubic-bezier(.2, .8, .2, 1); }
  body.rail #nav { width: var(--rail-w); padding: 14px 12px 10px; overflow: hidden; z-index: 21; }
  body.rail .nav-brand { padding: 0; align-items: flex-start; }
  body.rail .nav-brand img { width: 46px; margin: 0 0 0 1px; }
  body.rail .nav-brand :is(b, span), body.rail #nav .nav-t, body.rail #nav .chev-r { opacity: 0; pointer-events: none; }
  body.rail .nav-brand :is(b, span) { white-space: nowrap; }
  body.rail .nav-list { margin-top: 18px; overflow: hidden; }
  body.rail .nav-it { width: 48px; min-height: 48px; padding: 0 0 0 12px; gap: 0; }
  body.rail .nav-admin::before { left: 6px; right: 6px; }
  /* карточка аккаунта полосой: аватар (меню «Выйти»), под ним — «Профиль игрока» и облако значками */
  body.rail .acct-card { border: 0; background: transparent; overflow: visible; }
  body.rail .acct-user { width: 48px; padding: 4px; border-radius: 12px; }
  body.rail .acct-who, body.rail .acct-user > svg.chev { display: none; }
  body.rail .acct-user i.acct-dot { display: block; }
  body.rail .acct-row { width: 48px; min-height: 42px; padding: 0 0 0 14px; border: 0; border-radius: 12px; position: relative; }
  body.rail .acct-row > span, body.rail .acct-row .chev-r { display: none; }
  body.rail .acct-row .pf-bang { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; font-size: 11px; margin: 0; }
  body.rail .acct-guest { padding: 0; }
  body.rail .acct-guest .dc-btn { width: 48px; height: 48px; padding: 0; border-radius: 14px; justify-content: center; }
  body.rail .acct-guest .dc-btn span, body.rail .acct-guest .acct-note { display: none; }
  body.rail :is(#editor, #page-host) { left: calc(var(--pad) + var(--rail-w) + var(--gap)); }
  /* меню полосой видно и тогда, когда поверх листа открыты «Документы» */
  body.rail.lp-docs #nav { opacity: 1; visibility: visible; pointer-events: auto; }
  body.rail.lp-docs #nav > * { transform: none; }
  body.rail #left { left: calc(var(--pad) + var(--rail-w) + var(--gap)); width: 320px; z-index: 22; box-shadow: var(--shadow-pop);
    opacity: 0; visibility: hidden; transform: translateX(-14px); pointer-events: none; }
  body.rail.lp-over #left { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  body.rail.lp-ready #left { transition: opacity .18s ease, transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s; }
  body.rail.lp-ready.lp-over #left { transition: opacity .2s ease, transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  body.rail #lp-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(15, 18, 24, .24); }
}
@media (prefers-reduced-motion: reduce) { body.lp-ready :is(#nav, #editor, #page-host, .nav-brand img) { transition: none !important; } }
/* ===== телефон < 900: экраны «Меню» и «Документы» на весь экран, нижняя панель — mobile.css ===== */
@media (max-width: 899px) {
  #left { padding: 14px 12px 0; }
  #page-host { left: 8px; right: 8px; top: 58px; bottom: 8px; }
  .pg-head h1 { font-size: 26px; }
  .st-grid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; }
  /* узкая карточка вида: «⋯» — в углу превью (как в «Пользовательских»), «Применить» / «✓ У документа» — во всю ширину */
  .st-card { position: relative; }
  .st-acts .st-more { position: absolute; top: 16px; right: 16px; background: var(--panel); box-shadow: var(--shadow); }
  .st-acts .st-apply { padding: 0 8px; }
  .kit-grid, .set-grid { grid-template-columns: minmax(0, 1fr); }
  .ed-bar { min-height: 0; padding: 8px 8px 8px 14px; gap: 6px 8px; }
  .ed-title .ed-name b { font-size: 19px; }
  .ed-acts { margin-left: auto; }
  .ed-acts .btn { height: 40px; padding: 0 12px; }
  .ed-warn { top: calc(100% + 54px); }
}

/* ===== v8: выбор герба, переименование ведомства, фильтр оформлений, утверждённые бланки в списке ===== */
/* «Без герба»: прозрачная точка вместо картинки — не занимает места (оформления дополнительно сжимают шапку по .no-emblem) */
.doc img[src^="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB"] { display: none !important; }

/* окно выбора герба: поиск, группы, плитки */
.em-modal .modal { width: min(680px, calc(100vw - 24px)); }
.em-modal .m-b { padding-bottom: 8px; }
.em-pick { display: grid; gap: 12px; }
.em-pick .em-q { margin: 0; }
.em-gs { display: flex; flex-wrap: wrap; gap: 6px; }
.em-gs .chip { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--input); color: var(--text); font-size: 13px; font-weight: 500; }
.em-gs .chip.on { background: var(--sel); color: #fff; font-weight: 600; }
.em-list { max-height: min(56vh, 520px); overflow-y: auto; margin: 0 -6px; padding: 2px 6px 6px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.em-sec h4 { margin: 14px 2px 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.em-sec[hidden], .em-t[hidden] { display: none !important; }
.em-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.em-top { margin-bottom: 2px; }
.em-t { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  color: var(--text); transition: border-color .15s, box-shadow .15s, background .15s; }
.em-t:hover { border-color: var(--sel); }
.em-t.on { border-color: var(--sel); box-shadow: inset 0 0 0 1px var(--sel); background: var(--sel-weak); }
.em-i { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 12px; background: #fff; }
.em-i img { max-width: 56px; max-height: 60px; object-fit: contain; }
.em-i svg { width: 34px; height: 34px; color: #9CA3AF; }
.em-t small { font-size: 12px; line-height: 1.25; text-align: center; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.em-empty { margin: 14px 2px; font-size: 14px; color: var(--muted); }
/* «Новое ведомство»: герб — превью, название, «Выбрать…», «Свой…» */
.m-emrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.m-emprev { width: 48px; height: 52px; display: grid; place-items: center; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.m-emprev img { max-width: 40px; max-height: 44px; object-fit: contain; }
.m-emprev svg { width: 26px; height: 26px; color: #9CA3AF; }
.m-emrow b { flex: 1; min-width: 80px; font-size: 15px; font-weight: 600; }
/* «Переименовать ведомство» */
.rb-modal .modal { width: min(500px, calc(100vw - 24px)); }
.rb-modal textarea.r-in { height: auto; min-height: 64px; padding: 10px 12px; resize: vertical; line-height: 1.4; }
.rb-modal .m-f .rb-reset { margin-right: auto; }
.rb-modal .m-f .rb-reset:disabled { opacity: .45; cursor: default; }

/* «Оформления»: группы и поиск (если у видов есть группы) */
.st-filter { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: -6px 2px 18px; }
.st-gs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.st-gs .chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--panel); color: var(--text); font-size: 14px;
  font-weight: 500; box-shadow: var(--shadow); }
.st-gs .chip small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-gs .chip.on { background: var(--sel); color: #fff; font-weight: 600; }
.st-gs .chip.on small { color: rgba(255, 255, 255, .8); }
.st-q { width: min(300px, 100%); margin: 0; background: var(--panel); box-shadow: var(--shadow); }
.st-card[hidden] { display: none !important; }

/* утверждённые бланки ведомства (общие бланки) — первыми строками группы */
#layers .layer.extra { min-height: 50px; padding: 4px 6px 4px 12px; }
#layers .layer.extra .dl-txt small { white-space: nowrap; }
#layers .layer.extra .mark { font-size: 12px; }
/* «Гербы и печати»: герб ведомства — сменить (из набора или «Без герба») */
.kit-em { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 38px; margin-top: 8px; padding: 0 12px; border-radius: 10px;
  background: var(--input); color: var(--text); font-size: 13px; text-align: left; }
.kit-em span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.kit-em b { color: var(--text); font-weight: 600; }
.kit-em i { flex: none; font-style: normal; font-weight: 600; color: var(--sel); }
.kit-em:hover { background: var(--sel-weak); }
/* пояснения в окнах — не мельче 13 пкс */
.modal .r-note { font-size: 13px; }
/* герба ещё нет на сервере (набор пополняется) — плитку не показывать */
.em-t.em-broken { display: none !important; }

/* ===== голосовой ввод (v11, voice.js): микрофон у поля ИИ-юриста и ИИ-помощника; идёт запись — красная кнопка «стоп» с таймером ===== */
.voice-btn { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; border: 0;
  background: var(--sel-weak); color: var(--sel) !important; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none;
  transition: background .15s, color .15s, transform .12s; }
.voice-btn svg { width: 21px; height: 21px; }
.voice-btn:hover { filter: brightness(.97); }
.voice-btn:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.voice-btn.on { background: #e5484d; color: #fff !important; animation: voice-pulse 1.6s ease-out infinite; }
.voice-btn.on svg { width: 16px; height: 16px; }
.voice-btn.hold { transform: scale(1.08); }
.voice-btn.busy { pointer-events: none; }
.voice-btn.busy svg { opacity: 0; }
.voice-btn.busy::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: voice-spin .8s linear infinite; }
@keyframes voice-spin { to { transform: rotate(360deg); } }
.voice-btn[data-t]::after { content: attr(data-t); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 2px 7px;
  border-radius: 999px; background: #e5484d; color: #fff; font: 600 11.5px/1.4 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; pointer-events: none; }
@keyframes voice-pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .45); } 70%, 100% { box-shadow: 0 0 0 12px rgba(229, 72, 77, 0); } }
textarea.voice-on { caret-color: #e5484d; }
.aip-fbar .voice-btn { width: 40px; height: 40px; border-radius: 11px; }
@media (prefers-reduced-motion: reduce) { .voice-btn.on { animation: none; } }

/* v12: «ко всем бланкам» включено — подсказка, как вернуть каждому ведомству свой вид */
.st-allnote { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: -8px 2px 18px; padding: 10px 14px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); font-size: 14px; color: var(--muted); }
.st-allback { border: 0; background: none; padding: 0; color: var(--sel); font: inherit; font-weight: 600; cursor: pointer; }
.st-allback:hover { text-decoration: underline; }