:root{
  --app-header-height:60px;
  --bg:#eef1f8; --surface:#ffffff; --surface-2:#f6f8fc;
  --ink:#1f2a44; --muted:#7b8698; --faint:#a7b0c4;
  --line:#eaeef6; --line2:#dde3ee;
  --accent:#4c6fff; --accent-soft:#eaeeff; --accent-ink:#3a5bef;
  --ok:#1aa564; --warn:#f2544b; --star:#f6b83f; --track:#eef1f8;
  --c-doc:#4c6fff; --c-txt:#8a94ad; --c-pdf:#f2544b; --c-xls:#1aa564; --c-ppt:#f39c3d; --c-img:#12b5a5; --c-any:#8a94ad;
  --radius:14px; --radius-lg:18px;
  --shadow:0 1px 2px rgba(31,42,68,.04), 0 12px 34px -18px rgba(31,42,68,.22);
  --shadow-sm:0 1px 2px rgba(31,42,68,.05), 0 6px 16px -10px rgba(31,42,68,.2);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-padding-top:var(--app-header-height)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
.boot{padding:60px;text-align:center;color:var(--muted)}
button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:8px 14px;background:var(--accent);color:#fff;transition:filter .12s,background .12s}
button:hover{filter:brightness(1.05)}
button.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line2)}
button.ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}
button.sm{padding:5px 10px;font-size:13px;border-radius:8px}
button.danger{background:#fdeceb;color:var(--warn)}
button.danger:hover{filter:none;background:#fadedb}
button:disabled{opacity:.5;cursor:not-allowed}
input,textarea{font:inherit;padding:9px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);color:var(--ink);width:100%}
textarea{resize:vertical}
.mono{font-family:var(--mono);font-size:12.5px}
.muted{color:var(--muted)}

/* ---------- login / стартовая ---------- */
.brandwrap .dc{color:#0088BB;font-weight:800}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1000px 480px at 50% -8%,rgba(76,111,255,.12),transparent 62%),radial-gradient(620px 460px at 88% 116%,rgba(0,136,187,.08),transparent 55%),var(--bg);}
.hero{max-width:540px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.hero .word{display:flex;align-items:center;gap:13px;font-size:38px;font-weight:800;letter-spacing:-.01em}
.hero .word .logo{display:inline-flex;line-height:1;font-size:46px}
.hero .tag{font-family:var(--mono);font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:#0088BB;font-weight:600;margin-top:-6px}
/* ⚠️ АБЗАЦЫ ЭКРАНА ВХОДА: РОВНЫЕ СТРОКИ И ОДИН БЛОК ВМЕСТО ТРЁХ ОСТРОВОВ.
   Владелец: «странное форматирование текста». Беды было две, обе от раскладки, а не
   от слов. Первая: при выключке по центру и пределе 46ch последняя строка каждого
   абзаца оставалась висеть коротким огрызком («дальше — написано в письме.»,
   ««Спам».») — по центру такой огрызок виден куда сильнее, чем при выключке влево.
   text-wrap:balance раскладывает абзац на строки РОВНОЙ длины и огрызок убирает.
   Вторая: зазор .hero стоит 20 точек и одинаков для всего — заголовка, абзацев,
   кнопки. Три абзаца подряд разъезжались на те же 20 и читались тремя отдельными
   сообщениями. Между соседними абзацами зазор сведён к 8: это один текст. */
.hero p{color:var(--muted);font-size:16px;line-height:1.6;margin:0;max-width:44ch;
  text-wrap:balance}
.hero p + p{margin-top:-12px}

/* ══ КАРТОЧКА ВХОДА. ЧИСЛА СВЕРЕНЫ С ТЕМОЙ KEYCLOAK, А НЕ ПОДОБРАНЫ. ═══════════════
   Владелец, увидев переход с экрана Keycloak на наш: «зачем, почему нельзя открывать
   на предыдущей странице в том же дизайне?». На той странице — нельзя: форма стучится
   в наш сервер, а он на другом домене, и ради этого пришлось бы открыть CORS чужому
   экрану входа. Выглядеть одинаково — обязаны.
   Каждое число взято из stand/keycloak-theme/robodoc.css:
     ширина  424 = --col 360 + --pad 32 × 2;
     поле    32  = --pad;
     радиус  18  = --radius-lg;
     тень    --shadow-card: 0 2px 4px rgba(22,29,46,.05), 0 30px 70px -40px rgba(22,29,46,.4);
     заголовок 25/650/-.025em — #kc-page-title.
   Выключка ВЛЕВО, а не по центру: у Keycloak она левая, и центрованный текст рядом
   с её карточкой читался бы другой страницей — то самое, от чего уходим. */
.authcard{width:100%;max-width:424px;box-sizing:border-box;padding:32px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 2px 4px rgba(22,29,46,.05),0 30px 70px -40px rgba(22,29,46,.4);
  display:flex;flex-direction:column;align-items:stretch;gap:18px;text-align:left}
.authcard > p{max-width:none;text-align:left;margin:0}
.authcard p + p{margin-top:-6px}
.authcard .tag{margin:0;text-align:left;letter-spacing:.22em}
.authcard .cta,.authcard .ghost{width:100%}
.authcard .foot{margin-top:4px;padding-top:16px;border-top:1px solid var(--line);
  text-align:left}
.authcard .feats{justify-content:flex-start}
.authcard .lnkrow{justify-content:flex-start}
.hero .cta{padding:12px 34px;font-size:16px;border-radius:12px;box-shadow:0 12px 28px -12px rgba(76,111,255,.6)}
.hero .feats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.hero .feats .f{font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:8px 15px}
.hero .foot{font-size:12.5px;color:var(--faint);margin-top:10px}
/* Форма на экранах входа, регистрации и восстановления — ОДНА на все три: одинаковая ширина,
   одинаковые отступы, одинаковый кегль. Раньше эти же значения стояли строкой стиля прямо в
   разметке двух экранов регистрации; третий экран рядом с ними неизбежно разошёлся бы на
   пару точек, и человек читал бы это как «другая страница». */
.authform{width:100%;max-width:360px;text-align:left;display:flex;flex-direction:column;gap:12px}
/* Строка со ссылкой между кнопками (вход → «Не помню пароль») и строка «к кому идти».
   Отрицательный отступ сверху убирает лишний воздух: у .hero между детьми 20 точек, а ссылка
   принадлежит кнопке над собой, а не следующему блоку. */
.hero .lnkrow{font-size:13.5px;margin-top:-8px}
.hero a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--accent-soft)}
.hero a:hover{border-bottom-color:var(--accent-ink)}

/* ---------- top bar ---------- */
.top{height:60px;display:flex;align-items:center;gap:16px;padding:0 22px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:6}
.top .brand{font-weight:700;font-size:17px;color:var(--ink)}
.searchwrap{position:relative;flex:1;max-width:520px;margin:0 auto}
.searchwrap .si{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:16px}
.search{border-radius:100px;background:var(--surface-2);border:1px solid transparent;padding-left:38px;padding-right:38px;height:40px}
/* Крестик сброса живёт В САМОМ поле и появляется, только когда есть что сбрасывать:
   пустая кнопка рядом с пустым полем — обещание действия, которого нет. */
.sclear{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:none;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--faint);cursor:pointer;line-height:0}
.sclear.on{display:inline-flex}
.sclear:hover{background:var(--surface-2);color:var(--ink);filter:none}
/* Подсказки под строкой поиска. z-index выше шапки: список выпадает поверх содержимого. */
.sugg{position:absolute;left:0;right:0;top:46px;display:none;flex-direction:column;background:var(--surface);
  border:1px solid var(--line2);border-radius:12px;box-shadow:0 18px 44px -16px rgba(31,42,68,.4);overflow:hidden;z-index:20}
.sugg.on{display:flex}
.sugg-i{display:flex;align-items:center;gap:9px;padding:9px 13px;cursor:pointer;font-size:13.5px;color:var(--ink)}
.sugg-i:hover{background:var(--accent-soft);color:var(--accent-ink)}
.sugg-i .bi{display:inline-flex;color:var(--faint)}
.sugg-i .bi svg{width:16px;height:16px}
.sugg-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugg-h{font-size:11.5px;color:var(--faint);flex:none}
.search:focus{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
.top .who{color:var(--muted);font-size:14px}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:250px 1fr;min-height:calc(100vh - var(--app-header-height))}
.layout.drop{outline:2px dashed var(--accent);outline-offset:-10px;background:var(--accent-soft)}
.side{padding:18px 14px;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.create{width:100%;padding:12px;border-radius:12px;font-weight:600;font-size:15px;box-shadow:0 10px 24px -12px rgba(76,111,255,.6);margin-bottom:8px}
.nav{list-style:none;margin:0;padding:0}
.nav .nav-i{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;cursor:pointer;color:var(--ink);font-size:14.5px}
.nav .nav-i:hover{background:var(--surface-2)}
.nav .nav-i.active{background:var(--accent);color:#fff;font-weight:600;box-shadow:0 10px 22px -12px rgba(76,111,255,.7)}
.nav .nav-i.sub{padding-left:24px}
.nav .nav-i .ni{display:inline-flex;align-items:center;justify-content:center;width:20px;font-size:18px;color:var(--faint);flex:none}
.nav .nav-i.active .ni{color:#fff}
.nav .nav-i .del{margin-left:auto;display:inline-flex;opacity:0;color:var(--faint);font-size:14px;cursor:pointer}
.nav .nav-i:hover .del{opacity:.8}
.nav .nav-i .del:hover{color:var(--warn);opacity:1}
.group{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:14px 8px 4px}
.group .addf{cursor:pointer;color:#fff;background:var(--accent);width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:14px;padding:0;box-shadow:0 6px 14px -8px rgba(76,111,255,.8)}
.group .addf:hover{filter:brightness(1.06)}
.storage{margin-top:auto;display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--surface-2);border-radius:14px}
.storage .gwrap{flex:none;line-height:0}
.storage .sgrow{min-width:0}
.storage .slabel{font-size:12px;color:var(--muted);margin-bottom:3px;font-weight:600}
.storage .sused{font-size:12.5px;color:var(--ink);font-weight:600}

/* ---------- main ---------- */
.main{padding:22px 26px}
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.toolbar h2{margin:0;font-size:21px}
.toolbar .cnt2{color:var(--faint);font-size:14px;font-variant-numeric:tabular-nums}
.vtoggle{display:inline-flex;background:var(--surface);border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.vtoggle button{background:var(--surface);color:var(--muted);border-radius:0;padding:6px 11px;font-size:16px}
.vtoggle button.on{background:var(--accent-soft);color:var(--accent-ink)}
.empty{padding:60px;text-align:center;color:var(--muted);background:var(--surface);border-radius:var(--radius);border:1px dashed var(--line2)}

/* type icon */
.ic{width:40px;height:40px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;overflow:hidden;background:var(--c-any)}
.ic.ic-doc{background:var(--c-doc)} .ic.ic-txt{background:var(--c-txt)} .ic.ic-pdf{background:var(--c-pdf)}
.ic.ic-xls{background:var(--c-xls)} .ic.ic-ppt{background:var(--c-ppt)} .ic.ic-img{background:var(--c-img)} .ic.ic-any{background:var(--c-any)}
.ic.big{width:100%;height:100%;border-radius:0;font-size:15px}
.ic .thumb{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s}
.ic .thumb.loaded{opacity:1}

/* list */
.docs{display:flex;flex-direction:column;gap:8px}
.doc{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;box-shadow:var(--shadow-sm);transition:box-shadow .12s,border-color .12s}
.doc:hover{border-color:var(--line2);box-shadow:var(--shadow)}
.doc .grow{flex:1;min-width:0}
.doc .nm{font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc .nm:hover{color:var(--accent)}
.doc .nm .shq{font-size:12px;color:var(--faint)}
.doc .meta{color:var(--faint);font-size:12.5px;margin-top:2px}
.obadge{width:26px;height:26px;flex:none;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.star{background:none;border:0;color:#d7deea;font-size:17px;padding:2px 4px;line-height:1}
.star:hover{color:var(--star);filter:none}
.star.on{color:var(--star)}
.dots{background:none;border:0;color:var(--faint);font-size:19px;padding:2px 8px;border-radius:8px;line-height:1}
.dots:hover{background:var(--surface-2);color:var(--ink);filter:none}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;transition:box-shadow .12s,border-color .12s}
.tile:hover{border-color:var(--line2);box-shadow:var(--shadow)}
.tile .tprev{height:112px;background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.tile .tfoot{display:flex;align-items:center;gap:6px;padding:9px 11px}
.tile .tnm{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}

/* контекстное меню */
.ctxmenu{position:fixed;z-index:40;background:var(--surface);border:1px solid var(--line2);border-radius:12px;box-shadow:0 16px 40px -14px rgba(31,42,68,.4);padding:6px;min-width:200px}
.ctxmenu .ci{padding:9px 12px;border-radius:8px;font-size:14px;cursor:pointer;color:var(--ink)}
.ctxmenu .ci:hover{background:var(--surface-2)}
.ctxmenu .ci.danger{color:var(--warn)}
.ctxmenu .ci.danger:hover{background:#fdeceb}
.ctxmenu .ci-sep{height:1px;background:var(--line);margin:5px 4px}

/* chooser / modal общие */
/* ⚠️ ПРОКРУЧИВАЕТСЯ ТЕЛО ОКНА, А НЕ ВСЁ ОКНО, И РЯД КНОПОК ЛИПНЕТ К НИЗУ.
   Так было: overflow висел на притемняющем слое (.scrim), окно росло свободно и вылезало
   за экран целиком. Замерено на живом стенде: 1600x1000 — окно 1026 px при экране 1000
   сразу после открытия, «Отправить» уже за нижней кромкой; со снимком 1406 px, а подводка
   к приложенной картинке уводила шапку на -440 — отмотал вверх, чтобы увидеть заголовок,
   и потерял кнопки. 390x844 — 1162 без снимка и 1482 со снимком, до «Отправить» надо было
   прокрутить 706 px. Шапка и кнопки не сходились на экране НИКОГДА.
   Теперь окно — столбец на всю доступную высоту: шапка стоит, тело прокручивается, ряд
   кнопок прилипает к низу тела. То же устройство, что у окна обращения на витрине
   (.sup-win/.sup-body/.sup-btns в landing.html), и по тому же доводу.
   Правило общее для ВСЕХ окон приложения: выбор из списка (.chooser), загрузка файлов,
   «такой файл уже есть», «документ изменили, пока вы работали», окна modal() с кнопками
   (.mbtns) и окно обращения.
   Стережёт TestSupportОкнаПриложенияДержатШапкуИКнопки (webmodal_layout_test.go); что сторож
   не пустой, доказывает TestSupportПорчаРаскладкиОкнаКраснеет — он ломает каждую опору по
   очереди ровно тем, чем она была до починки, и требует от сторожа назвать поломку. */
/* overscroll-behavior:contain — прокрутка НЕ уходит сквозь окно на список под ним. Раньше её
   съедал сам слой (он прокручивался), а теперь слой стоит — и без этой строки колесо над
   затемнением увозило страницу за окном: замерено, 600 px за один поворот колеса. */
.scrim{position:fixed;inset:0;background:rgba(31,42,68,.34);display:flex;align-items:flex-start;justify-content:center;padding:34px 16px;z-index:20;overflow:hidden;overscroll-behavior:contain}
.modal{background:var(--surface);border-radius:16px;width:min(860px,100%);box-shadow:0 24px 70px -22px rgba(31,42,68,.5);overflow:hidden;
  max-height:100%;display:flex;flex-direction:column}
.modal .head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);flex:none}
.modal .head input.title{font-size:17px;font-weight:600;border:1px solid transparent;background:transparent;padding:6px 8px}
.modal .head input.title:hover,.modal .head input.title:focus{border-color:var(--line2);background:var(--surface-2)}
.modal .head b{font-size:16px}
.modal .head .x{margin-left:auto;background:none;color:var(--muted);font-size:20px;padding:2px 8px}
/* Тело — ЕДИНСТВЕННОЕ, что прокручивается в окне. min-height:0 обязателен: без него
   flex-элемент не даёт себя сжать ниже содержимого, и потолок окна не сработал бы вовсе. */
.modal .body{padding:18px 20px;display:flex;flex-direction:column;gap:14px;
  overflow:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0}
.modal .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chooser{display:flex;flex-direction:column;gap:8px}
.chooser button{justify-content:flex-start;text-align:left}
/* Предупреждение внутри окна: файл на диске изменили встречно, и следующее нажатие уберёт
   чужую правку. Жёлтая плашка, а не красная: это не отказ, а развилка — человек вправе
   заменить, но обязан знать цену. Тот же приём, что у .admnotice в админских разделах. */
.warnbox{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:12px;
  background:#fff6e8;border:1px solid #f0d9b0;color:#7a5310;font-size:13px;line-height:1.45}
.warnbox .bi{flex:none;margin-top:1px;color:#d9821f}
.warnbox b{color:#5c3d08}
/* Окно «документ изменили, пока вы работали»: под кнопками — место для ответа на «покажи,
   что на диске». Пока не спрашивали, места оно не занимает (:empty), иначе в окне зияла бы
   пустая полоса под тремя кнопками выбора. */
.stalenote{font-size:13px;color:var(--muted);line-height:1.45}
.stalenote:empty{display:none}
/* Чужая версия текста прямо в окне. Высоту ограничиваем: файл бывает в тысячи строк, и без
   потолка окно вырастало бы за экран вместе с кнопками выбора — до них было бы не дойти. */
.stalepre{margin:0;max-height:34vh;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.45;
  color:var(--ink);background:var(--surface-2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px}

.sec{border:1px solid var(--line);border-radius:var(--radius)}
.sec>.sh{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;user-select:none}
.sec>.sh .chev{margin-left:auto;color:var(--faint);transition:transform .15s}
.sec.open>.sh .chev{transform:rotate(90deg)}
.sec>.sc{display:none;padding:0 14px 14px}
.sec.open>.sc{display:block}
.ta{width:100%;min-height:240px;font-family:var(--mono);font-size:13px}
.vlist,.clist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.vlist li,.clist li{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13.5px}
.clist li{align-items:flex-start;flex-direction:column;gap:3px}
.clist .who{font-size:12px;color:var(--muted)}
/* Ответ в ветке: отступ и черта слева — тем же приёмом, что у Drive и Nextcloud. Отступ
   здесь несёт смысл, а не украшает: он и есть единственная подпись «это ответ на верхнее»,
   поэтому у ответа без корня надпись остаётся словами (commentLi, orphan). */
.clist li.reply{margin-left:22px;border-left:3px solid var(--line)}
.clist .creply{width:100%;margin-top:6px}
.pill{display:inline-block;font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:100px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.pill.lock{background:#fdf3e5;color:#a06a12;border-color:#f0d9b0}
.diff{font-family:var(--mono);font-size:13px;line-height:1.7;background:var(--surface-2);border-radius:8px;padding:12px;white-space:pre-wrap}
.diff .add{background:#dcf5e4;color:#1a7f4b;border-radius:3px}
.diff .del{background:#fbe0dd;color:#c0392b;text-decoration:line-through;border-radius:3px}

/* toast / upload */
.toast{position:fixed;bottom:22px;right:22px;left:auto;transform:none;background:var(--surface);color:var(--ink);padding:12px 18px;border-radius:12px;font-size:14px;z-index:50;box-shadow:0 16px 40px -14px rgba(31,42,68,.4);border:1px solid var(--line);opacity:0;transition:opacity .2s;font-weight:500}
.toast.show{opacity:1}

/* ---------- line-иконки и компоненты под референс 214 ---------- */
.i{display:block;width:1em;height:1em}
.searchwrap .si{display:flex;align-items:center;line-height:0;font-size:17px}
.dots{font-size:19px} .star{font-size:18px}
.star.on .i{fill:currentColor}
.shq{display:inline-flex;font-size:13px;color:var(--faint)}
.group .addf{display:inline-flex;font-size:14px}
.vtoggle button{display:inline-flex;align-items:center;font-size:16px;padding:7px 11px}
.doc .nm{gap:8px}
.pill.lock{display:inline-flex;align-items:center;gap:4px}
.pi{display:inline-flex;font-size:13px}

/* header actions (Загрузить / Создать) */
.toolbar{flex-wrap:wrap}
.hactions{display:flex;gap:10px}
.hactions button{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:11px;font-weight:600}
.bi{display:inline-flex;font-size:16px}

/* заголовки секций */
.sechead{font-size:15px;font-weight:700;color:var(--ink);margin:22px 2px 12px}
/* Счётчик внутри заголовка раздела. Своего правила у него не было вовсе: он наследовал
   жирный шрифт и цвет заголовка и вставал вплотную к тексту — «Незаданные настройки0».
   Число здесь подпись к заголовку, а не его часть: тоньше, тише и на отступе. */
.sechead .cnt2{margin-left:8px;font-weight:500;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
/* Пояснение к отпечатку кода: стоит рядом с «Открыть код», где его и ищут. */
.template-rule-code-note{font-size:12px;line-height:1.55;margin:10px 0 8px;max-width:78ch}
.template-rule-code-note code{font-size:11.5px}
/* Состояние правила с переключателем: щелчок по всей строке, а не по одной галочке. */
.template-rule-state-row{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.template-rule-state-row .template-rule-quick{flex:none;width:16px;height:16px;cursor:pointer}

/* карточки категорий */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:14px;margin-bottom:2px}
.catcard{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 18px;box-shadow:var(--shadow-sm)}
.catic{width:46px;height:46px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px}
.catn{font-weight:700;font-size:15px}
.catm{color:var(--faint);font-size:12.5px;margin-top:2px}
.cat-doc .catic{background:#e9edff;color:#4c6fff}
.cat-img .catic{background:#e5f7f0;color:#12b5a5}
.cat-med .catic{background:#f1e9ff;color:#8b5cf6}
.cat-all .catic{background:#fff1e6;color:#f39c3d}

/* карточки папок */
.fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px}
.fcard{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 16px;box-shadow:var(--shadow-sm);cursor:pointer;transition:box-shadow .12s,border-color .12s}
.fcard:hover{border-color:var(--line2);box-shadow:var(--shadow)}
.fcard .ficon{width:40px;height:40px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px;background:#fff5e0;color:#f5a623}
.fcard .fgrow{flex:1;min-width:0}
.fcard .fnm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard .fsub{color:var(--faint);font-size:12px;margin-top:2px}

/* заполнение категорий (процентное представление) */
.catcard .cgrow{min-width:0;flex:1}
.catbar{height:6px;border-radius:100px;background:#eef1f8;overflow:hidden;margin-top:8px}
.catfill{height:100%;border-radius:100px;background:var(--accent)}
.cat-doc .catfill{background:#4c6fff}
.cat-img .catfill{background:#12b5a5}
.cat-med .catfill{background:#8b5cf6}
.cat-all .catfill{background:#f39c3d}

/* зона drag-and-drop */
.dropzone{display:flex;align-items:center;gap:12px;justify-content:center;background:var(--surface);border:1.5px dashed var(--line2);border-radius:12px;padding:11px 18px;cursor:pointer;color:var(--muted);transition:border-color .12s,background .12s;margin-bottom:2px}
.dropzone:hover{border-color:var(--accent);color:var(--accent-ink)}
.dropzone.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.dropzone .dzic{width:34px;height:34px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-ink);font-size:18px}
.dztitle{font-weight:600;color:var(--ink);font-size:13.5px}
.dzsub{font-size:12px;color:var(--faint)}

/* карточка загрузки с процентами */
.upcard{position:fixed;bottom:22px;right:22px;width:340px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px -16px rgba(31,42,68,.42);z-index:55;overflow:hidden}
.uptop{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.uphead{font-weight:600;font-size:13.5px;flex:1}
.upx{background:none;color:var(--muted);font-size:15px;padding:2px 6px;display:inline-flex}
.uprows{max-height:220px;overflow:auto;padding:8px 14px 12px}
.uprow{display:grid;grid-template-columns:1fr 92px 42px;align-items:center;gap:8px;padding:6px 0}
.upnm{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upbar{height:6px;border-radius:100px;background:var(--track);overflow:hidden}
.upfill{height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,#4c6fff,#12b5a5);transition:width .15s}
.uppct{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.uppct.ok{color:var(--ok);font-weight:600}

/* Бургер: только на узком экране, где сайдбар уезжает за край. */
.burger{display:none;background:var(--surface-2);color:var(--muted);border:0;width:38px;height:38px;border-radius:10px;
  align-items:center;justify-content:center;padding:0;flex:none;cursor:pointer;line-height:0}
.burger:hover{background:var(--accent-soft);color:var(--accent-ink);filter:none}
.burger svg{width:20px;height:20px}
/* Затемнение под выехавшим меню. Ниже самого меню, выше всего остального. */
.sidescrim{position:fixed;inset:var(--app-header-height) 0 0 0;background:rgba(20,27,43,.34);z-index:49}

@media(max-width:820px){
  .layout{grid-template-columns:1fr}
  /* Меню не пропадает, а уезжает за левый край и возвращается по бургеру. Раньше здесь
     стояло .side{display:none} — вместе с меню человек терял все разделы, дерево папок,
     метки и «Управление местом», то есть навигацию целиком.
     Селектор с родителем намеренно: ниже по файлу .side переопределяется ещё дважды
     (position:sticky, overflow), и одноклассовое правило отсюда они бы перебили. */
  .layout > .side{display:flex;position:fixed;left:0;top:var(--app-header-height);height:calc(100vh - var(--app-header-height));width:min(280px,84vw);z-index:50;
    overflow-y:auto;transform:translateX(-101%);transition:transform .2s ease;box-shadow:16px 0 44px -28px rgba(20,30,60,.55)}
  body.sidenav .layout > .side{transform:none}
  .burger{display:inline-flex}
  .searchwrap{max-width:none}
  .cats,.fcards{grid-template-columns:1fr 1fr}
}
/* Меню открыто, а экран снова широкий (поворот планшета) — скрим обязан исчезнуть вместе
   с накладкой, иначе он невидимо перехватывает нажатия по списку. */
@media(min-width:821px){ .sidescrim{display:none} }
@media (prefers-reduced-motion: reduce){ .side{transition:none} }

/* ---- шапка: аватар, колокол ---- */
.iconbtn{background:var(--surface-2);color:var(--muted);border:0;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:19px;position:relative}
.iconbtn:hover{background:var(--accent-soft);color:var(--accent-ink);filter:none}
.iconbtn.bell .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--warn);border:2px solid var(--surface)}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#4c6fff,#12b5a5);color:#fff;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:none}

/* ---- панель уведомлений ---- */
.notif{position:fixed;z-index:45;width:340px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 44px -14px rgba(31,42,68,.4);overflow:hidden}
.nfhead{padding:12px 16px;font-weight:700;border-bottom:1px solid var(--line)}
.nfbody{max-height:360px;overflow:auto}
.nfrow{display:flex;gap:11px;align-items:flex-start;padding:10px 16px;border-bottom:1px solid var(--line)}
.nfrow:last-child{border-bottom:0}
.nfav{width:32px;height:32px;flex:none;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.nfgrow{min-width:0}
.nftext{font-size:13.5px;line-height:1.4}
.nftime{font-size:11.5px;color:var(--faint);margin-top:2px}

/* ---- настройки ---- */
select{font:inherit;padding:8px 11px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);color:var(--ink)}
/* РАЗДЕЛ НАСТРОЕК ОТДЕЛЁН ОТ СОДЕРЖИМОГО ЛИНИЕЙ И ВОЗДУХОМ, А НЕ ТОЛЬКО РЕГИСТРОМ.
   Заголовок и строки под ним стояли в одном весе и на одном фоне: «БЕЗОПАСНОСТЬ» читалось
   как ещё одна строка списка, и панель выглядела сплошной лентой. Разделяем тремя вещами
   разом — чертой сверху, отступом и цветом самого заголовка: одного из трёх мало, а вместе
   они дают ту границу, которую человек видит, не читая. */
.setgrp{display:flex;flex-direction:column;gap:8px;padding-top:18px;margin-top:6px;
  border-top:1px solid var(--line)}
.setgrp:first-child{padding-top:0;margin-top:0;border-top:0}
.setlbl{font-size:11.5px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.06em;
  opacity:.72}
.setseg{display:inline-flex;background:var(--surface-2);border-radius:11px;padding:4px;gap:4px;align-self:flex-start}
.segbtn{background:transparent;color:var(--muted);border-radius:8px;padding:8px 16px;font-weight:600;font-size:13.5px}
.segbtn.on{background:var(--surface);color:var(--accent-ink);box-shadow:var(--shadow-sm)}
.setrow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.setrow:last-child{border-bottom:0}
/* Строка-переход внутри раздела не должна нести ещё и разделитель снизу: черта раздела уже
   есть сверху, а вторая линия под каждой строкой возвращает ту же сплошную ленту. */
.setgrp .setrow-go+.setrow-go{border-top:1px solid var(--line)}
.setk{color:var(--muted)}

/* ---- шаринг: аватары ---- */
.sharelist{display:flex;flex-direction:column}
.shrow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.shrow:last-child{border-bottom:0}
.shav{width:36px;height:36px;flex:none;border-radius:50%;background:linear-gradient(135deg,#4c6fff,#12b5a5);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.shgrow{flex:1;min-width:0}
.shnm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shsub{font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shperm{font-size:13px;padding:6px 9px}
/* правый блок строки доступа: селектор прав + «×» с зазором (референс 249 — были слиты) */
.shright{display:flex;align-items:center;gap:10px;flex:none}
.shright .shperm{flex:none}
.shx{width:30px;height:30px;padding:0;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;font-size:17px}
/* аватар владельца в свёрнутой сводке доступа — акцент + тонкое кольцо */
.mav.own{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--accent),0 1px 3px rgba(20,30,60,.2)}
/* строка кнопок (обложка: «Заменить» + «Убрать») — зазор, чтобы не слипались (референс 251) */
.btnrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btnrow>button{display:inline-flex;align-items:center;gap:7px}

/* ---- угловой индикатор категории ---- */
.catcard{padding:14px 16px}
.catgg{flex:none;line-height:0}
.catn{font-size:14.5px}
.catm{font-size:12px;color:var(--faint);margin-top:2px}

/* ---- тёмная тема (референс 217) ---- */
:root.dark{
  --bg:#0e1320; --surface:#161d2e; --surface-2:#1d2739; --ink:#e7ebf5; --muted:#98a3bd; --faint:#6b7793;
  --line:#232d43; --line2:#2e3a54; --accent:#5b7bff; --accent-soft:#1e2842; --accent-ink:#93a8ff; --track:#2a3550;
}
:root.dark body{background:var(--bg)}
:root.dark .cat-doc .catic{background:#1d2747;color:#8aa0ff}
:root.dark .cat-img .catic{background:#123430;color:#3fd9c0}
:root.dark .cat-med .catic{background:#241d40;color:#b39bff}
:root.dark .cat-all .catic{background:#372814;color:#f3b34a}
:root.dark .fcard .ficon{background:#33280f;color:#f3b34a}
:root.dark .obadge,:root.dark .nfav{background:#1e2842;color:#93a8ff}
:root.dark .diff .add{background:#123a24;color:#63d38d}
:root.dark .diff .del{background:#3a1a1a;color:#ea9a92}
:root.dark .pill.lock{background:#372814;color:#e0b070;border-color:#4a3820}
/* Жёлтое по светлому в тёмной теме слепит — тот же приём, что у .pill.lock выше. */
:root.dark .warnbox{background:#372814;border-color:#4a3820;color:#e8c48a}
:root.dark .warnbox .bi{color:#e0b070}
:root.dark .warnbox b{color:#f0d7a8}
:root.dark .segbtn.on{background:var(--surface-2)}
:root.dark .login{background:radial-gradient(1000px 480px at 50% -8%,rgba(91,123,255,.18),transparent 62%),var(--bg)}

/* ---- категории как стат-карты с дугой из угла (205) ---- */
.cats{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.catcard{position:relative;overflow:hidden;display:block;min-height:120px;padding:16px 18px}
.cattop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.catcard .catic.small{width:38px;height:38px;border-radius:11px;font-size:18px}
.catn{font-size:14.5px;font-weight:700;color:var(--ink)}
.catbot{margin-top:24px;display:flex;align-items:baseline;gap:6px}
.catnum{font-size:27px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.catlbl{font-size:12px;color:var(--faint)}
.catpctbig{position:absolute;right:18px;bottom:15px;font-size:17px;font-weight:800;color:var(--ink)}
.catcg{position:absolute;right:-42px;bottom:-42px;width:150px;height:150px;pointer-events:none}
.catcg .cg{width:150px;height:150px;display:block}

/* ---- модалка загрузки (218) ---- */
.updz{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;border:2px dashed var(--line2);border-radius:14px;padding:30px 20px;cursor:pointer;transition:border-color .12s,background .12s}
.updz:hover,.updz.over{border-color:var(--accent);background:var(--accent-soft)}
.updzic{width:56px;height:56px;border-radius:16px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:26px}
.updzt{font-weight:700;font-size:17px}
.updzs{font-size:13.5px;color:var(--muted)}
.uplist{display:flex;flex-direction:column;gap:12px}
.uprow2{display:flex;flex-direction:column;gap:6px}
.uphd{display:flex;align-items:center;gap:10px}
.uprow2 .upnm{flex:1;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.upmeta{font-size:11.5px;color:var(--faint);white-space:nowrap}
.uprow2 .uppct{font-size:13px;font-weight:600;color:var(--muted);min-width:40px;text-align:right;display:inline-flex;justify-content:flex-end;align-items:center}
.uprow2 .uppct.ok{color:var(--ok)}
.uprow2 .uppct.err{color:var(--warn)}
.upctl{background:none;color:var(--faint);padding:2px;font-size:15px;display:inline-flex}
.upctl:hover{color:var(--warn);filter:none}
.updone{color:var(--ok);font-weight:600;font-size:12.5px}
.upfill.done{background:var(--ok)}

/* ---- аватар-фото ---- */
.avimg{width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar-lg{width:56px;height:56px;font-size:18px;flex:none}

/* сайдбар: имя папки + ⋮-меню действий */
.nav .nav-i .nvlbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .nav-i .fmenu{margin-left:auto;background:none;color:var(--faint);padding:2px 4px;display:inline-flex;font-size:16px;opacity:0;border-radius:6px}
.nav .nav-i:hover .fmenu{opacity:.85}
.nav .nav-i .fmenu:hover{background:rgba(0,0,0,.06);color:var(--ink);opacity:1}
.nav .nav-i.active .fmenu{color:#fff;opacity:.9}
.nav .nav-i.active .fmenu:hover{background:rgba(255,255,255,.22)}
:root.dark .nav .nav-i .fmenu:hover{background:rgba(255,255,255,.1)}

/* индикатор категории — чистый круг в углу карточки */
.catcard .catgg{position:absolute;right:16px;bottom:14px;line-height:0}

/* категории: индикатор слева снизу + число рядом */
.catcard{position:static;overflow:visible;display:block;min-height:0;padding:16px 18px}
.cattop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.catcard .catic.small{width:38px;height:38px;border-radius:11px;font-size:18px}
.catn{font-size:14.5px;font-weight:700;color:var(--ink)}
.catbot2{display:flex;align-items:center;gap:13px;margin-top:14px}
.catcard .catgg{position:static;line-height:0;flex:none}
.catbot2 .catnum{font-size:22px;font-weight:800;line-height:1}
.catbot2 .catlbl{font-size:12px;color:var(--faint);margin-top:3px}

/* категории: дуга-индикатор сбоку (205) */
.catcard{position:static;overflow:hidden;display:block;min-height:0;padding:16px 18px}
.catmid{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.catleft{min-width:0}
.catmid .catnum{font-size:24px;font-weight:800;line-height:1;display:inline}
.catmid .catlbl{font-size:12px;color:var(--faint);margin-left:4px}
.catmid .catpctbig{font-size:16px;font-weight:800;color:var(--ink);margin-top:9px}
.catarc{width:74px;height:98px;flex:none}
.catarc .ca{width:74px;height:98px;display:block}

/* категории 205: число слева, % посередине, дуга справа (фикс улетевшего %) */
.catmid{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:14px}
.catmid .catnum{font-size:24px;font-weight:800;line-height:1;display:inline}
.catmid .catlbl{font-size:12px;color:var(--faint);margin-left:4px}
.catmid .catpctbig{position:static;font-size:20px;font-weight:800;color:var(--ink);margin:0}
.catarc{width:72px;height:102px;flex:none;overflow:visible}
.catarc .ca{width:72px;height:102px;display:block}

/* карточки папок 226: имя+счётчик сверху, «Доступ» с аватарами, крупная иконка справа */
.fcards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.fcard{display:block;position:relative;padding:0;overflow:hidden}
.fc-top{display:flex;align-items:flex-start;gap:10px;padding:16px 16px 12px;background:linear-gradient(180deg,rgba(76,111,255,.09),rgba(76,111,255,0));border-bottom:1px solid var(--line)}
.fc-name{font-weight:800;font-size:16px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.fc-count{color:var(--faint);font-size:13px;font-weight:600;white-space:nowrap;margin-top:1px}
.fc-dots{flex:none;width:26px;height:26px;border:none;background:transparent;border-radius:8px;color:var(--faint);display:flex;align-items:center;justify-content:center;cursor:pointer}
.fc-dots:hover{background:var(--track);color:var(--ink)}
.fc-body{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:14px 16px 16px}
.fc-lbl{font-size:12px;color:var(--faint);font-weight:600;margin-bottom:8px}
.fc-solo{font-size:13px;color:var(--muted);font-weight:600}
.fc-ic{width:56px;height:56px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(76,111,255,.12);color:var(--accent)}
.fc-ic svg{width:30px;height:30px}
.mavs{display:flex;align-items:center}
.mav{width:32px;height:32px;border-radius:50%;border:2px solid var(--surface);margin-left:-8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;box-shadow:0 1px 3px rgba(20,30,60,.2)}
.mav:first-child{margin-left:0}
.mav.more{background:var(--track);color:var(--muted)}
:root.dark .fc-top{background:linear-gradient(180deg,rgba(108,140,255,.12),rgba(108,140,255,0))}
:root.dark .fc-ic{background:rgba(108,140,255,.16)}

/* v27: число/«файлов»/% ровно слева с gap, дуга прижата вправо */
.catmid{justify-content:flex-start;gap:10px}
.catmid .catlbl{margin-left:4px}
.catmid .catpctbig{margin:0}
.catarc{margin-left:auto}

/* v28: catleft не схлопывается (иначе «файлов» наезжает на %), дуга чуть компактнее */
.catmid .catleft{flex:none;min-width:auto;white-space:nowrap}
.catmid .catpctbig{flex:none}
.catarc{width:64px;height:96px}
.catarc .ca{width:64px;height:96px}

/* v29: большая сквозная дуга через всю карточку (референс 205) */
.catcard{position:relative;overflow:hidden;min-height:140px}
.catbg{position:absolute;inset:0;z-index:0;pointer-events:none}
.catbg svg{width:100%;height:100%;display:block}
.cattop{position:relative;z-index:1}
.catfoot{position:absolute;left:18px;bottom:16px;z-index:1;display:flex;align-items:baseline;gap:6px}
.catfoot .catnum{font-size:26px;font-weight:800;line-height:1}
.catfoot .catlbl{font-size:12px;color:var(--faint)}
.catpctbig{position:absolute;right:26px;top:50%;transform:translateY(-2px);z-index:1;font-size:22px;font-weight:800;color:var(--ink);margin:0}

/* v33: % ниже и правее — не залезает на дугу */
.catpctbig{right:16px;top:60%;bottom:auto;transform:none}

/* v34: % ещё чуть правее */
.catpctbig{right:10px}

/* v35: строка «Обновлено» в карточке папки (как Last updated в 229) + хедер-язычок */
.fc-upd{padding:11px 16px;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px;font-weight:500}
.fc-body{padding-bottom:12px}
.fc-top{margin:8px 8px 0;padding:12px 12px 12px;border-radius:12px 12px 0 0;border-bottom:none;background:linear-gradient(180deg,rgba(76,111,255,.10),rgba(76,111,255,.02))}
.fcard{padding-top:0}
:root.dark .fc-top{background:linear-gradient(180deg,rgba(108,140,255,.14),rgba(108,140,255,.03))}

/* v36: иконка категорий выше и левее — не наезжает на дугу */
.catcard .catic.small{transform:translate(-7px,-7px)}

/* хедер папки — язычок-ступенька как 229: плашка уже карточки, счётчик на фоне справа в 2 строки */
.fc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:0;padding:0 16px 0 0;background:none;border-bottom:none;border-radius:0}
.fc-tab{max-width:66%;background:linear-gradient(180deg,rgba(76,111,255,.13),rgba(76,111,255,.03));padding:14px 22px 15px 16px;border-radius:14px 0 16px 0}
.fc-tab .fc-name{margin:0;max-width:100%}
.fc-count{padding-top:13px;text-align:right;line-height:1.3}
.fc-size{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}
:root.dark .fc-tab{background:linear-gradient(180deg,rgba(108,140,255,.16),rgba(108,140,255,.04))}

/* v37: сайдбар прибит к экрану — плашка «Хранилище» всегда у нижней грани, не уезжает под страницу */
.side{position:sticky;top:var(--app-header-height);align-self:start;height:calc(100vh - var(--app-header-height));overflow-y:auto}

/* v38: колокольчик как 214 — белая кнопка-квадратик с рамкой, синяя точка-бейдж */
.swatches{margin-top:10px}
/* ⚠️ РАЗМЕР КРУГЛОЙ КНОПКИ И ЕЁ ЗНАЧКА ЗАДАЁТСЯ ЗДЕСЬ, И ТОЛЬКО ЗДЕСЬ.
   До этого правил было ВОСЕМЬ, дописанных одно поверх другого — v39, v41, v67, v70, v74,
   v76, v77, v78, — и каждое появлялось потому, что предыдущее «не сработало». Не срабатывало
   оно ровно по той причине, по которой их стало восемь: какое из них выигрывает, не мог
   сказать никто, и правка вслепую добавляла девятое. Измерено на живой странице: рисунок
   колокола выходил 11×13 CSS px в кнопке 44 px — то есть работал БАЗОВЫЙ font-size:19px,
   а все восемь правил не значили ничего.
   Значок задан в ПИКСЕЛЯХ, а не в em: em тянется за font-size, а font-size у этой кнопки
   переопределяли шесть раз из восьми. Появится девятое правило — размер снова станет
   загадкой; сторож на это стоит в webicons_ui_test.go. */
.iconbtn.bell{background:var(--surface);border:1px solid var(--line2);border-radius:12px;color:var(--ink);
  width:44px;height:44px;padding:0}
/* ⚠️ flex:none — ЭТО И ЕСТЬ ПОЧИНКА, А НЕ ЧИСЛО РЯДОМ. Измерено в живом браузере:
   у кнопки padding:8px 14px при width:44px и box-sizing:border-box, то есть внутреннее поле
   ровно 44−2−28 = 14 px. Значок — элемент флекса со flex-shrink:1, и его СПЛЮЩИВАЛО до 14 px
   по ширине при высоте 28: getComputedStyle давал width:14px там, где в правиле стоит 28.
   Отсюда и восемь правил подряд (v39…v78): каждое меняло ЧИСЛО, а сжимал контейнер, и число
   не значило ничего. Убираем обе причины: поле у кнопки в ноль и запрет сжатия значку. */
.iconbtn.bell svg{width:19px;height:19px;stroke-width:1.8;flex:none}
.iconbtn.bell:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.iconbtn.bell .dot{top:8px;right:8px;background:var(--accent);width:8px;height:8px}

/* v38: язычок папки чуть шире — больше места под имя, ступенька правее */
.fc-tab{max-width:80%;padding-right:26px}



/* v42: сортировка · фильтр по типу · мультивыбор + групповые операции */
.sortbtn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line2);color:var(--muted);border-radius:11px;padding:8px 12px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.sortbtn:hover{border-color:var(--accent);color:var(--accent)}
.sortbtn .bi{display:inline-flex}
.sortbtn .bi svg{width:16px;height:16px}
.sortbtn .sdir{font-weight:800;color:var(--accent)}
/* Кнопка с включённым фильтром подсвечена: иначе сокращённый список выглядит как «файлов нет». */
.sortbtn.on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
/* Переключатель области поиска — тот же сегментный вид, что у плотности списка, но с текстом. */
.vtoggle.sscope button{font-size:12.5px;font-weight:600;padding:7px 12px}

.catcard{cursor:pointer}
.catcard:hover{border-color:var(--line2)}
.catcard.active{outline:2px solid var(--accent);outline-offset:-2px}

.fclear{display:inline-flex;align-items:center;gap:5px;background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent);border-radius:100px;padding:4px 12px 4px 8px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.fclear .bi svg{width:13px;height:13px}

.selbox{flex:none;width:20px;height:20px;position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.selbox input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.selbox .selmark{width:20px;height:20px;border:1.7px solid var(--line2);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);color:#fff}
.selbox .selmark svg{width:13px;height:13px;opacity:0;stroke-width:3}
.selbox.on .selmark{background:var(--accent);border-color:var(--accent)}
.selbox.on .selmark svg{opacity:1}
.doc.sel{background:var(--accent-soft);border-color:var(--accent)}
.tile{position:relative}
.tile.sel{outline:2px solid var(--accent);outline-offset:-1px}
.tsel{position:absolute;top:9px;left:9px;z-index:3}
.tsel .selbox .selmark{box-shadow:0 1px 3px rgba(20,30,60,.25)}

.bulkbar{display:flex;align-items:center;gap:10px;width:100%}
.bulkbar .bcancel{flex:none;width:34px;height:34px;border:1px solid var(--line2);background:var(--surface);border-radius:10px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.bulkbar .bcancel:hover{border-color:var(--accent);color:var(--accent)}
.bulkbar .bcancel svg{width:16px;height:16px}
.bulkbar .bcount{font-weight:700;font-size:16px}
.bulkbar button.ghost,.bulkbar button.danger{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:11px;font-weight:600}
.bulkbar .bi{display:inline-flex}
.bulkbar .bi svg{width:16px;height:16px}

/* v44: правая панель-инспектор (drawer) вместо модалки файла */
.drawer-scrim{position:fixed;inset:0;background:rgba(20,27,43,.34);display:flex;justify-content:flex-end;z-index:60}
.drawer{width:min(440px,100%);height:100%;background:var(--surface);box-shadow:-24px 0 60px -30px rgba(20,27,43,.5);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s ease;border-left:1px solid var(--line)}
.drawer.in{transform:none}
.dhead{flex:none;display:flex;align-items:flex-start;gap:12px;padding:18px 18px 14px;border-bottom:1px solid var(--line)}
.dic{flex:none}
.dhwrap{flex:1;min-width:0}
.dtitle{font-size:17px;font-weight:700;width:100%;border:1px solid transparent;background:transparent;border-radius:8px;padding:4px 6px;color:var(--ink);font-family:inherit}
.dtitle:hover,.dtitle:focus{border-color:var(--line2);background:var(--surface-2);outline:none}
.dtitle.stat{padding:4px 0}
.dsub{font-size:12.5px;color:var(--faint);margin-top:3px;padding:0 6px}
/* ⚠️ ЗНАЧОК В КНОПКЕ СЖИМАЛСЯ КОНТЕЙНЕРОМ, И ЭТО ОБЩАЯ БОЛЕЗНЬ ВСЕХ КНОПОК-ЗНАЧКОВ.
   У кнопки padding:8px 14px (общий для всех button) при заданной ширине и box-sizing:
   border-box, поэтому внутреннее поле выходит крошечным: у крестика 38−2−28 = 10 px,
   у колокола было 44−2−28 = 14 px. Значок — элемент флекса со flex-shrink:1, и он в это
   поле СЖИМАЛСЯ: измерено в живом браузере, getComputedStyle отдавал 10×24 при правиле
   18×18 и 14×28 при правиле 28×28.
   Отсюда тринадцать правил подряд у двух кнопок (v39…v78 у колокола, v70…v77 у крестика):
   каждое меняло ЧИСЛО, а сжимал контейнер — и число не значило ничего.
   Лечим ПРИЧИНУ и в одном месте: поле кнопки в ноль, значку запрет сжатия. Размер после
   этого можно ставить один раз и он выполняется. */
.iconbtn,.dx{padding:0}
.iconbtn svg,.dx svg{flex:none}
.dx{flex:none;width:34px;height:34px;border:none;background:transparent;border-radius:9px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.dx:hover{background:var(--track);color:var(--ink)}
.dx svg{width:17px;height:17px;stroke-width:1.9}
.dbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 28px;display:flex;flex-direction:column;gap:12px}
.dbody .ta{min-height:180px}
.propgrid{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13.5px}
.propgrid .pk{color:var(--faint)}
.propgrid .pv{color:var(--ink);word-break:break-word}
.lockbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
/* Погашенная «Открыть в редакторе» и объяснение рядом с ней (чужой ручной замок). Перенос
   разрешён: объяснение длиннее кнопки, и на узком экране оно обязано уйти на свою строку,
   а не выдавить кнопку за край. */
.vredzapert{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.addshare{display:flex;gap:8px;align-items:stretch}
.addshare input{flex:1;min-width:0}
.addshare .shperm{flex:none}
.dlrow{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:13.5px;color:var(--muted);cursor:pointer}
.dlrow input{width:17px;height:17px;accent-color:var(--accent)}
button.primary{background:var(--accent);color:#fff;border:1px solid var(--accent)}
button.primary:hover{filter:brightness(1.06)}
@media (max-width:520px){.drawer{width:100%}}

/* v46: пикер пользователей (автокомплит) в «Доступ» */
.upick{position:relative;flex:1;min-width:0}
.upick-in{width:100%}
.upick-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--line2);border-radius:11px;box-shadow:0 16px 40px -14px rgba(20,30,60,.4);z-index:5;max-height:240px;overflow:auto;display:none;padding:5px}
.upick-drop.on{display:block}
.upick-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:8px;cursor:pointer}
.upick-item:hover{background:var(--accent-soft)}
.shav.sm{width:28px;height:28px;font-size:11px}
.upick-meta{min-width:0}
.upick-nm{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upick-sub{font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* v49: правая панель — колонка в layout (без затемнения/скрима, контент кликабелен) */
.drawer-scrim{display:none}
.layout.haspanel{grid-template-columns:250px minmax(0,1fr) 440px}
.drawer{position:sticky;top:var(--app-header-height);align-self:start;height:calc(100vh - var(--app-header-height));width:auto;transform:none;transition:none;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:-16px 0 40px -34px rgba(20,30,60,.4);
  display:flex;flex-direction:column;animation:panelin .18s ease}
@keyframes panelin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media(max-width:1080px){
  .layout.haspanel{grid-template-columns:250px minmax(0,1fr)}
  .drawer{position:fixed;right:0;top:var(--app-header-height);width:min(420px,100%);z-index:40;box-shadow:-24px 0 60px -28px rgba(20,30,60,.5)}
}
@media(max-width:820px){ .layout.haspanel{grid-template-columns:1fr} }

/* v50: колоночный список как Google Drive (Название | Изменён | Владелец | Размер | ⋯) */
.main{container-type:inline-size}
.docs.table{display:flex;flex-direction:column;gap:6px}
.docs.table .doc,.docs.table .dhead-row{display:grid;grid-template-columns:minmax(0,1fr) 126px 148px 132px 84px 60px;align-items:center;gap:12px}
.docs.table .doc{gap:12px}
.c-folder{min-width:0}
.folchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:100px;padding:2px 10px 2px 8px;font-size:12px;color:var(--muted);cursor:pointer}
.folchip:hover{border-color:var(--accent);color:var(--accent)}
.folchip .bi{display:inline-flex}
.folchip .bi svg{width:13px;height:13px}
.folchip-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* строка-папка в списке: та же сетка, что у файлов */
.folder-row .c-name .fri{width:40px;height:40px;flex:none;border-radius:11px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(76,111,255,.12);color:var(--accent)}
.folder-row .c-name .fri .fc-cover{border-radius:0}
.folder-row .c-name .fri svg{width:22px;height:22px}
.folder-row .c-name .nmt{font-weight:700}
.c-name{display:flex;align-items:center;gap:12px;min-width:0}
.c-name .nm{min-width:0;display:flex;align-items:center;gap:7px}
.c-name .nmt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.c-mod,.c-size{color:var(--muted);font-size:13px;white-space:nowrap}
.c-size{text-align:right}
.c-own{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:var(--muted)}
/* Колонка «Владелец» кликабельна (отбор по владельцу) — и должна выглядеть так же.
   Раньше она молчала на нажатие, и человек считал, что отбирать по владельцу нечем. */
.c-own.own-pick{cursor:pointer;border-radius:8px;padding:2px 6px;margin:-2px -6px}
.c-own.own-pick:hover{background:var(--accent-soft);color:var(--accent-ink)}
.ownav{width:24px;height:24px;border-radius:50%;flex:none;background:var(--accent);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.c-own span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-act{display:flex;align-items:center;gap:2px;justify-content:flex-end}
.dhead-row{padding:2px 14px 8px !important;background:transparent !important;border:0 !important;box-shadow:none !important;border-bottom:1px solid var(--line) !important;border-radius:0 !important;margin-bottom:2px}
.colh{background:transparent;border:0;color:var(--faint);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-family:inherit;display:inline-flex;align-items:center;gap:5px;cursor:pointer;padding:2px 0;justify-self:start}
.colh:first-child{padding-left:32px}
.colh.right{justify-self:end}
.colh.static{cursor:default}
.colh.on{color:var(--accent)}
.colh .colar{font-weight:800;font-size:12px}
/* адаптив: панель открыта → main уже → прячем колонки по ширине main (container queries) */
@container (max-width:900px){
  .c-folder,.dhead-row .colh:nth-child(4){display:none}
  .docs.table .doc,.docs.table .dhead-row{grid-template-columns:minmax(0,1fr) 124px 146px 84px 60px}
}
@container (max-width:700px){
  .c-own,.dhead-row .colh:nth-child(3){display:none}
  .docs.table .doc,.docs.table .dhead-row{grid-template-columns:minmax(0,1fr) 118px 82px 58px}
}
@container (max-width:520px){
  .c-mod,.dhead-row .colh:nth-child(2){display:none}
  .docs.table .doc,.docs.table .dhead-row{grid-template-columns:minmax(0,1fr) 76px 56px}
}

/* v51: цвет и обложка папки */
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line2);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.swatch.on{box-shadow:0 0 0 2px var(--accent)}
.swatch.none{background:var(--surface-2);color:var(--faint)}
.swatch.none svg{width:14px;height:14px}
.fcard .fc-ic{overflow:hidden}
.fc-cover{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}

/* v52: инлайн-превью в панели (картинки/PDF/видео/аудио) */
.prev-holder{margin-top:2px}
.prev-img{max-width:100%;border-radius:10px;display:block;border:1px solid var(--line)}
.prev-pdf{width:100%;height:62vh;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.prev-video{max-width:100%;border-radius:10px;display:block}
.prev-audio{width:100%;margin-top:6px}

/* v53: теги в инспекторе + чип фильтра */
.tagwrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tagchip{display:inline-flex;align-items:center;gap:2px;background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent);border-radius:100px;padding:3px 4px 3px 11px;font-size:12.5px;font-weight:600}
.tagchip.restr{background:#fbf0dc;color:#b5730f;border-color:#e2ad55}
:root.dark .tagchip.restr{background:#332608;color:#e2a13c;border-color:#5c4a1e}
.tagchip .tct{cursor:pointer}
.tagchip .tcx{background:transparent;border:0;color:inherit;opacity:.6;cursor:pointer;display:inline-flex;padding:2px;border-radius:50%}
.tagchip .tcx:hover{opacity:1;background:rgba(0,0,0,.10)}
.tagchip .tcx svg{width:12px;height:12px}

/* v54: DnD-перемещение — подсветка папки-цели */
.nav-i.dropfolder{background:var(--accent-soft);outline:2px dashed var(--accent);outline-offset:-2px}
.fcard.dropfolder{outline:2px dashed var(--accent);outline-offset:-2px;box-shadow:0 0 0 3px var(--accent-soft)}
.doc[draggable="true"],.tile[draggable="true"]{cursor:default}

/* v65: переключатель пользователь/группа + группы в списке доступа + аудит-строки */
.setseg.mini{display:inline-flex;gap:0;margin-bottom:10px;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.setseg.mini .segbtn{border:0;background:var(--surface);color:var(--muted);padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.setseg.mini .segbtn.on{background:var(--accent);color:#fff}
.addslot{flex:1;min-width:0;display:flex}
.shav.grp{background:var(--accent);color:#fff}
.shav.grp svg{width:16px;height:16px}

/* v67: SVG-шеврон единого размера + сводки в заголовках секций */
.sec>.sh{gap:8px}
.sec>.sh .chev{margin-left:8px;display:inline-flex;align-items:center;color:var(--faint);transition:transform .15s}
.sec>.sh .chev svg{width:17px;height:17px}
.sec.open>.sh .chev{transform:rotate(90deg)}
.secsum{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:62%}
.secsum-t{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.secsum-t.muted{color:var(--faint)}
.secsum-c{display:inline-flex;align-items:center;gap:6px;min-width:0}
.secsum-n{background:var(--accent-soft);color:var(--accent-ink);border-radius:100px;padding:1px 7px;font-size:11px;font-weight:700;flex:none}
.secsum .mavs .mav{width:24px;height:24px;font-size:9px;border-width:2px}


/* v67: язычок папки шире — больше места под имя, ступенька правее; ⋮ заметный */
.fc-top .fc-tab{max-width:none;min-width:56%;padding-right:32px}
.fc-top .fc-name{max-width:100%}
.fc-top .fc-count{flex:none}
.fc-dots{opacity:1;flex:none;color:var(--muted)}
.fc-dots:hover{background:var(--track);color:var(--ink)}

/* иконка+текст в кнопках всегда с отступом */
button:has(> .bi){display:inline-flex;align-items:center;gap:7px}
.dbody button:has(> .bi){gap:7px}

/* v71: X закрытия — размер через font-size (как колокол), 1em надёжно берётся ic-svg */

/* v72: X закрытия — крупнее и жирнее (путь заполняет больше viewBox) */

/* v73: чистый хедер карточки папки — язычок слева, счётчик+⋮ справа, ⋮ видимый и ровный */
.fcard .fc-top{display:flex;align-items:flex-start;gap:8px;padding:0 10px 0 0}
.fcard .fc-tab{flex:0 1 60%;min-width:0;max-width:none;padding:14px 20px 15px 16px;border-radius:14px 0 16px 0}
.fcard .fc-count{flex:none;margin-left:auto;text-align:right;padding-top:12px;line-height:1.3}
.fcard .fc-dots{flex:none;width:30px;height:30px;margin-top:7px;font-size:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:var(--muted);background:transparent;border:none;cursor:pointer;padding:0}
.fcard .fc-dots svg{width:1em;height:1em}
.fcard .fc-dots:hover{background:var(--track);color:var(--ink)}





/* ---- метки: чипы на строках файлов + счётчик в сайдбаре (RBDOC-102, вынос тегов на витрину) ---- */
.doc .c-name .nm{flex-direction:column;align-items:flex-start;gap:3px}
.doc .c-name .nmline{display:flex;align-items:center;gap:7px;min-width:0;max-width:100%}
.doc .c-name .nmline .nmt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowtags{display:flex;gap:4px;flex-wrap:wrap}
.rtag{font-size:10.5px;font-weight:600;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);border-radius:6px;padding:0 6px;line-height:16px;cursor:pointer;white-space:nowrap}
.rtag:hover{border-color:var(--accent);color:var(--accent)}
.nav .nav-i .nvcount{margin-left:auto;font-size:11px;color:var(--faint);background:var(--surface-2);border-radius:8px;padding:0 7px;line-height:17px}
.nav .nav-i.active .nvcount{background:rgba(255,255,255,.25);color:#fff}

/* ---- выбор папок галочкой (RBDOC-102: папки в мультивыборе) ---- */
.fc-sel{position:absolute;top:10px;left:10px;z-index:4;opacity:0;transition:opacity .12s}
.fcard:hover .fc-sel,.fcard.sel .fc-sel{opacity:1}
.fcard.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),var(--shadow)}
.fc-sel .selbox .selmark{box-shadow:0 1px 3px rgba(20,30,60,.25)}
.folder-row.sel{background:var(--accent-soft);border-color:var(--accent)}

/* ---- страница «Приложения» (синк-клиенты disk-sync) ---- */
.clients-page .cl-intro{max-width:720px;color:var(--muted);margin:2px 0 20px}
.clients-page .cl-intro b{color:var(--ink)}
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:26px}
.cl-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm);text-decoration:none;color:var(--ink);transition:box-shadow .12s,border-color .12s,transform .12s}
.cl-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
.cl-os{width:44px;height:44px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--muted)}
.cl-os svg{width:24px;height:24px}
.cl-os.os-macos{background:rgba(76,111,255,.12);color:var(--accent)}
.cl-os.os-windows{background:rgba(18,181,165,.14);color:#0e9c8f}
.cl-os.os-linux{background:rgba(243,156,61,.16);color:#d9821f}
.cl-meta{flex:1;min-width:0}
.cl-name{font-weight:600}
.cl-sub{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.cl-dl{flex:none;color:var(--faint)}
.cl-card:hover .cl-dl{color:var(--accent)}
.cl-how{max-width:720px}
.cl-how-h{font-weight:700;margin-bottom:8px}
.cl-code{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:pre-wrap;overflow-x:auto;line-height:1.6}

/* ---- клиенты синхронизации в профиле (компактный список со значками платформ) ---- */
.cl-list{display:flex;flex-direction:column;gap:8px}
.cl-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .12s,box-shadow .12s}
.cl-row:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.cl-row .cl-os{width:38px;height:38px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--surface-2);color:var(--muted)}
.cl-row .cl-os.os-macos{background:rgba(76,111,255,.12);color:var(--accent)}
.cl-row .cl-os.os-windows{background:rgba(18,181,165,.14);color:#0e9c8f}
.cl-row .cl-os.os-linux{background:rgba(243,156,61,.16);color:#d9821f}
.cl-row .cl-meta{flex:1;min-width:0}
.cl-row .cl-name{font-weight:600;font-size:13.5px}
.cl-row .cl-sub{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.cl-row .cl-dl{flex:none;color:var(--faint);font-size:18px;display:inline-flex}
.cl-row:hover .cl-dl{color:var(--accent)}

/* ---- установленные клиенты: статус устройства, версия, обновление (RBDOC-104) ---- */
.cl-row.static{cursor:default}
.cl-row.static:hover{border-color:var(--line);box-shadow:none}
.cl-row.upd{border-color:var(--accent);background:var(--accent-soft)}
.cl-name .cl-dot{width:7px;height:7px;border-radius:50%;background:var(--faint);display:inline-block;margin-left:7px;vertical-align:middle}
.cl-name .cl-dot.on{background:#1aa564;box-shadow:0 0 0 3px rgba(26,165,100,.18)}
.cl-upd{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:9px;background:var(--accent);color:#fff;font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.cl-upd:hover{filter:brightness(1.07)}
.cl-upd .ic svg,.cl-ok .ic svg{width:14px;height:14px;display:block}
.cl-ok{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:#1aa564;white-space:nowrap}
.cl-empty{border:1px dashed var(--line);border-radius:12px;padding:14px 16px;background:var(--surface-2)}
.cl-empty-t{font-weight:600;font-size:13.5px}
.cl-empty-s{font-size:12.5px;color:var(--faint);margin-top:3px}

.fcount{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}

.cl-more{margin-top:6px}
.cl-more>summary{cursor:pointer;color:var(--muted);font-size:12.5px;padding:6px 2px;list-style:none;user-select:none}
.cl-more>summary::-webkit-details-marker{display:none}
.cl-more>summary::before{content:'▸';display:inline-block;margin-right:6px;transition:transform .15s}
.cl-more[open]>summary::before{transform:rotate(90deg)}
.cl-more>summary:hover{color:var(--ink)}
.cl-more .cl-row{margin-top:6px}

/* ---- парк клиентов (админский обзор версий) ---- */
.fleet-sum{font-size:13px;color:var(--muted);margin-bottom:10px}
.fleet-warn{color:#d9821f;font-weight:600}
.fleet-tbl{border:1px solid var(--line);border-radius:12px;overflow:hidden;overflow-x:auto}
.fleet-hd,.fleet-row{display:grid;grid-template-columns:minmax(120px,1.4fr) minmax(110px,1.2fr) 84px 74px 96px;gap:10px;padding:8px 12px;align-items:center;font-size:12.5px}
.fleet-hd{background:var(--surface-2);color:var(--muted);font-weight:600}
.fleet-row{border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.fleet-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fleet-v.old{color:#d9821f;font-weight:600}
.fleet-t{color:var(--faint)}

/* ---- цвета меток: пикер в инспекторе + точка в сайдбаре ---- */
.tagpal-row{display:flex;align-items:center;gap:10px;margin:8px 0 4px}
.tagpal-lbl{font-size:12px;color:var(--muted);font-weight:600}
.tagpal{display:flex;gap:6px;flex-wrap:wrap}
.tsw{width:20px;height:20px;padding:0;border-radius:6px;box-shadow:0 0 0 1px var(--line) inset;cursor:pointer}
.tsw.on{outline:2px solid var(--ink);outline-offset:1px}
.tagdot{width:10px;height:10px;border-radius:50%;display:inline-block}
.nav .nav-i .ni .tagdot{box-shadow:0 0 0 2px var(--surface)}

/* ---- лента/журнал: кликабельная строка со ссылкой на объект ---- */
.nfrow.click{cursor:pointer;border-radius:10px;margin:0 -6px;padding-left:6px;padding-right:6px}
.nfrow.click:hover{background:var(--surface-2)}
.nftext .nfact{color:var(--muted)}
.nftext .nflink{color:var(--accent)}

/* ---- сворачиваемые разделы сайдбара (Папки / Метки) ---- */
.grouptog{cursor:pointer;user-select:none}
.grouptog .gchev{display:inline-flex;align-items:center;color:var(--faint);transition:transform .15s;margin-right:1px}
.grouptog .gchev svg{width:12px;height:12px}
.grouptog:not(.col) .gchev{transform:rotate(90deg)}
.grouptog:hover .glbl{color:var(--muted)}
.grouptog .glbl{transition:color .12s}

/* лента: название метки + аватар-картинка автора */
.nftext .nftag{color:var(--ink);font-weight:600}
.nfav{overflow:hidden}

/* аватар-фото владельца в строке + бейдж получателей доступа (с группой) */
.ownav{overflow:hidden}
.rsbs{display:inline-flex;align-items:center;margin-left:4px;vertical-align:middle}
.rsb{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--surface);margin-left:-5px;display:inline-flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:700;color:#fff}
.rsb:first-child{margin-left:0}
.rsb.grp{background:var(--accent)}
.rsb.grp svg{width:11px;height:11px}
.rsb.more{background:var(--track);color:var(--muted)}

/* ---- v126: компактные карточки папок — 5 в ряд, высота уменьшена пропорционально ----
   Было minmax(300px) → в рабочую ширину влезало 4. Уменьшаем шаг сетки и все внутренние
   размеры примерно на 17%, чтобы пропорции карточки сохранились. */
.fcards{grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.fc-tab{padding:11px 20px 12px 13px;border-radius:12px 0 14px 0}
.fc-name{font-size:14.5px}
.fc-count{padding-top:10px;font-size:12px}
.fc-size{font-size:11px;margin-top:1px}
.fc-body{padding:11px 13px 12px}
.fc-lbl{font-size:11.5px;margin-bottom:6px}
.fc-ic{width:46px;height:46px;border-radius:12px}
.fc-ic svg{width:25px;height:25px}
.fc-upd{padding:9px 13px;font-size:11.5px}
.fcard .fc-dots{width:26px;height:26px;margin-top:5px;font-size:17px}
.fc-top{padding-right:13px}

/* ---- v128: дерево папок в сайдбаре ----
   Показываем только первый уровень; вложенные раскрываются шевроном. Направляющая линия
   слева связывает вложенную папку с родителем — иначе плоский список не читается как дерево. */
.ghbtns{display:inline-flex;align-items:center;gap:2px}
.fnode{position:relative;padding-left:calc(8px + var(--d) * 15px)}
.ftog{flex:none;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--faint);cursor:pointer;padding:0;border-radius:4px;transition:transform .15s,color .12s}
.ftog svg{width:11px;height:11px}
.ftog:hover{color:var(--ink);background:var(--track)}
.ftog.on{transform:rotate(90deg)}
.ftog.empty{pointer-events:none}
/* направляющая: вертикаль от родителя + усик к иконке вложенной папки */
.fnode[data-d]:not([data-d="0"])::before{content:'';position:absolute;top:0;bottom:0;
  left:calc(8px + (var(--d) - 1) * 15px + 8px);width:1px;background:var(--line2)}
.fnode[data-d]:not([data-d="0"])::after{content:'';position:absolute;top:50%;
  left:calc(8px + (var(--d) - 1) * 15px + 8px);width:9px;height:1px;background:var(--line2)}
.fnode.active::before,.fnode.active::after{background:var(--accent);opacity:.5}
.fkids{flex:none;font-size:10.5px;font-weight:600;color:var(--muted);background:var(--track);border-radius:20px;padding:0 6px;line-height:16px}
.nav-i.fnode .nvlbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- v130: метки всегда на виду ----
   Длинный список папок выдавливал раздел «Метки» за нижнюю границу — казалось, что фильтра
   по меткам нет вовсе. Даём списку папок свою прокрутку. */
.navfolders{max-height:34vh;overflow-y:auto;overscroll-behavior:contain}
.tagempty{font-size:12.5px;color:var(--faint);padding:2px 10px 8px;line-height:1.45}
/* чипы фильтра типов событий в панели оповещений */
.drawer .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.drawer .chip{background:var(--surface-2);color:var(--muted);border:1px solid var(--line);font:inherit;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:100px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.drawer .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.drawer .chip .chipn{font-size:11px;opacity:.75;font-variant-numeric:tabular-nums}

/* ---- v136: карточка устройства в одну строку ----
   Сплошная заливка и кнопка во всю ширину выбивались из интерфейса: остальные блоки нейтральные,
   а действия компактные. Кнопка обновления — маленькая, справа от названия. */
.cl-dev{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);min-width:0}
.cl-dev .cl-os{width:34px;height:34px;flex:none;border-radius:9px}
.cl-dev .cl-os svg{width:18px;height:18px}
.cl-dev .cl-meta{flex:1;min-width:0}
.cl-dev .cl-name{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-dev .cl-sub{font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.cl-dev .cl-upd{flex:none;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:8px;
  border:1px solid var(--accent);color:var(--accent);background:transparent;font-size:12px;font-weight:600;
  text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.cl-dev .cl-upd:hover{background:var(--accent);color:#fff}
.cl-dev .cl-upd .okic{display:inline-flex}
.cl-dev .cl-upd .okic svg{width:13px;height:13px;display:block}
.cl-dev .cl-dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.cl-dev .cl-dot.on{background:#1aa564;box-shadow:0 0 0 3px rgba(26,165,100,.18)}
/* Отвязанное устройство: приглушено, но НЕ спрятано. Убрать его с экрана значило бы оставить
   человека без ответа на «почему мой ноутбук перестал синхронизироваться» — а это первый
   вопрос, который он задаст. Тот же приём, что у отвязанной строки в админском парке. */
.cl-dev.off{opacity:.62}
.cl-dev.off .cl-name{text-decoration:line-through;text-decoration-color:var(--faint)}
.cl-dev .pill{flex:none}
/* Пояснение под списком устройств: кто может отвязать и что при этом произойдёт.
   Стоит на месте кнопки, которой здесь нет и быть не может (отзыв — админская ручка). */
.cl-note{font-size:12.5px;color:var(--muted);line-height:1.5;padding:2px 2px 0}
.tagempty{font-size:12.5px;color:var(--faint);padding:2px 10px 8px;line-height:1.45}

/* ---- v139: сайдбар — папкам всё свободное место, метки и хранилище прижаты вниз ----
   Было: у списка папок фиксированные 34vh, из-за чего он обрывался на середине,
   а под свёрнутыми «Метками» зияла пустота. Теперь колонка: список папок тянется,
   прокрутка только внутри него. */
.side{display:flex;flex-direction:column;overflow:hidden}
.side-scroll>.nav:first-of-type{flex:none}
.side .group{flex:none}
.navfolders{flex:1 1 auto;min-height:88px;max-height:none;overflow-y:auto;overscroll-behavior:contain}
.tagsect{flex:none;margin-top:6px}
.tagsect .nav{max-height:22vh;overflow-y:auto;overscroll-behavior:contain}
.storage{flex:none;margin-top:auto}
/* цветная папка в дереве сайдбара — тот же цвет, что у карточки */
.nav-i.fnode .ni.col svg{stroke-width:2}
.nav-i.fnode .ni.col{opacity:.95}

/* Публичные ссылки (RBDOC-102) — блок в секции «Доступ» правой панели. */
.lnkbox { display: flex; flex-direction: column; gap: 6px; }
.lnk { border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px; background: var(--surface-2); }
.lnk + .lnk { margin-top: 6px; }
.lnk-top { display: flex; align-items: center; gap: 6px; }
.lnk-ic { color: var(--accent); display: flex; flex: none; }
.lnk-url { flex: 1; min-width: 0; width: auto; font-size: 12px; padding: 5px 8px;
           border: 1px solid var(--line2); border-radius: 7px; background: var(--surface); color: var(--muted); }
.lnk-url:focus { outline: none; border-color: var(--accent); color: var(--ink); }
.lnk-meta { font-size: 12px; color: var(--muted); margin-top: 5px; }
.lnk-meta.bad { color: var(--warn); }
.lnk-set { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line2);
           display: flex; flex-direction: column; gap: 7px; }
.lnk-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lnk-in { flex: 1; min-width: 130px; width: auto; padding: 6px 9px; border: 1px solid var(--line2);
          border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 13px; }
.lnk-row button.on { border-color: var(--accent); color: var(--accent); }

/* Хлебные крошки: путь до текущей папки + переход наверх. */
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.crumb-up { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  padding: 0; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface);
  color: var(--muted); cursor: pointer; flex: none; }
.crumb-up:hover { border-color: var(--accent); color: var(--accent); }
.crumbs .crumb { color: var(--muted); font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.crumbs .crumb:hover { color: var(--accent); }
.crumbs .crumb-sep { color: var(--faint); font-size: 13px; }
.crumbs .crumb-cur { margin: 0; font-size: 19px; }

/* Кто сейчас в документе. */
.presence { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Версии: выбранная для сравнения сторона. */
.vlist li.vpick { background: var(--accent-soft); border-radius: 8px; }
.vlist .ghost.sm.on { border-color: var(--accent); color: var(--accent); }
.vdiff { margin-top: 10px; }

/* Найденная папка: путь до неё, иначе одноимённые из разных веток неразличимы. */
.folder-row .nm .fpath { display: block; font-size: 12px; color: var(--faint); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Подсветка папки как цели перетаскивания в списочном виде (в сетке уже была). */
.doc.folder-row.dropfolder { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }
/* Пять действий в строке версии не помещаются в узкую панель — переносим, а не прокручиваем. */
.vlist li { flex-wrap: wrap; row-gap: 6px; }

/* Кнопки в модальном окне (передача владения и т.п.). */
/* Ряд кнопок прилипает к низу прокручиваемого тела: отрицательные поля растягивают его
   на боковые и нижний отступы тела (18/20 px), а bottom:-18px возвращает прилипание к
   самому краю — иначе под кнопками просвечивала бы уезжающая форма. */
.modal .mbtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap;
  position: sticky; bottom: -18px; z-index: 1; margin: 16px -20px -18px; padding: 12px 20px 18px;
  background: var(--surface); box-shadow: 0 -8px 16px -12px rgba(31,42,68,.35); }
.modal .mbody { display: flex; flex-direction: column; }

/* Корзина: кто удалил и откуда, срок до автоочистки. */
.c-own.trashmeta { flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.3; }
.c-own.trashmeta .muted { font-size: 12px; }
.c-mod .soonpurge { color: var(--warn); }

/* Полноэкранный просмотрщик: лайтбокс поверх списка. */
.viewer { position: fixed; inset: 0; z-index: 200; background: rgba(10, 14, 22, .93); }
.viewer .vwrap { position: absolute; inset: 0; display: flex; flex-direction: column; }
.viewer .vhead { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #fff; }
.viewer .vname { font-weight: 500; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer .vcount { font-size: 13px; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; }
.viewer .vtools { display: flex; align-items: center; gap: 6px; }
.viewer .vtools button { min-width: 34px; height: 32px; padding: 0 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: 14px; }
.viewer .vtools button:hover { background: rgba(255, 255, 255, .18); }
.viewer .vzoom { color: rgba(255, 255, 255, .72); font-size: 12.5px; min-width: 44px; text-align: center;
  font-variant-numeric: tabular-nums; }
.viewer .vstage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px 16px 20px; }
.viewer .vstage img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none;
  transition: transform .08s linear; will-change: transform; }
.viewer .vpdf { width: min(1100px, 96vw); height: 100%; border: 0; border-radius: 10px; background: #fff; }
.viewer .vmedia { max-width: 96vw; max-height: 100%; }
.viewer .vaudio { width: min(560px, 90vw); }
.viewer .vload { color: rgba(255, 255, 255, .7); }
.viewer .vnav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px;
  border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.viewer .vnav:hover { background: rgba(255, 255, 255, .22); }
.viewer .vnav.prev { left: 14px; }
.viewer .vnav.prev .i { transform: rotate(90deg); }
.viewer .vnav.next { right: 14px; }
.viewer .vnav.next .i { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .viewer .vstage img { transition: none; } }

/* Сообщения должны быть видны и поверх лайтбокса (у него z-index 200): иначе
   «дождитесь загрузки» и «не удалось» уходили под оверлей и человек их не видел. */
.toast { z-index: 300; }

/* Замок в строке файла и путь до найденного документа. */
.doc .nmline .lockbadge { color: var(--warn); display: inline-flex; margin-right: 4px; flex: none; }
.doc .nmline .fpath { display: inline-block; margin-left: 8px; font-size: 12px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }

/* Кусок найденного текста под именем документа. Приглушённый и не выше двух строк: фрагмент
   приезжает длиной в две сотни знаков, и без ограничения одна строка выдачи растягивалась бы
   втрое, а список поиска переставал бы читаться как список.

   ⚠️ white-space И font-weight ЗДЕСЬ ОБЯЗАТЕЛЬНЫ: ОБА НАСЛЕДУЮТСЯ ОТ ИМЕНИ ФАЙЛА, И БЕЗ НИХ
   ОБЕЩАННЫХ ДВУХ СТРОК НЕ БЫВАЕТ НИКОГДА. Фрагмент лежит ВНУТРИ .doc .nm — строки с именем
   документа, а она нарочно в одну строку без переносов (white-space:nowrap) и полужирная
   (font-weight:600). Наследуя это, фрагмент показывал человеку вот что: высота 16 px, то есть
   РОВНО ОДНА строка при объявленном -webkit-line-clamp: 2 (замерено в живом движке) — вторая
   строка не наступала никогда, потому что переносить текст запрещено; текст при этом шире
   своего места примерно на четверть и обрывается посреди слова БЕЗ многоточия (text-overflow
   не наследуется, а многоточие -webkit-box ставит на переносе, которого нет); и «приглушённый»
   фрагмент рисовался тем же полужирным, что и само имя файла, — то есть спорил с именем за
   внимание вместо того, чтобы уйти на второй план.
   Перенос сбрасываем ровно так же, как это уже сделано в журнале: .history .hrow .nftext. */
.doc .nm .snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--faint);
  white-space: normal; font-weight: 400; }
/* Подсветка совпадения. Собственное правило нужно и на своё: у <mark> браузерная заливка
   ядовито-жёлтая, мимо всей темы, и в тёмной теме текст на ней не читается вовсе. */
.doc .nm .snip mark { background: var(--accent-soft); color: var(--accent-ink);
  border-radius: 3px; padding: 0 2px; }

/* Действия по файлу — секция «Активность» в панели документа. */
.actlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.actlist li { display: flex; align-items: flex-start; gap: 9px; }
.actlist li.denied .actmeta > div:first-child { color: var(--warn); }
.actmeta { min-width: 0; line-height: 1.4; }
.actmeta .pill { margin-left: 6px; }

/* Крестик снятия фильтра по метке — у заголовка раздела. */
.tagsect .tagclear { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--accent-soft); color: var(--accent); }
.tagsect .tagclear:hover { background: var(--accent); color: #fff; }

/* Индикация изменений в строке: версии и комментарии. */
.chgbs { display: inline-flex; gap: 5px; margin-left: 8px; flex: none; }
.chgb { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px;
  font-size: 11.5px; line-height: 1.5; cursor: pointer; border: 1px solid var(--line2);
  color: var(--muted); background: var(--surface); font-variant-numeric: tabular-nums; }
.chgb:hover { border-color: var(--accent); color: var(--accent); }
.chgb.fresh { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 500; }
.chgb .i { width: 11px; height: 11px; }

/* Меню-переключатель: колонка галочки и заголовок группы. Нужны там, где меню показывает
   не действия, а текущий выбор (сортировка) — человек должен видеть, что включено. */
.ctxmenu .ci-head{padding:8px 12px 4px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.ctxmenu .ci .cimark{display:inline-flex;align-items:center;justify-content:center;width:16px;
  min-width:16px;margin-right:8px;color:var(--accent)}
.ctxmenu .ci .cimark svg{width:15px;height:15px}
.ctxmenu .ci{display:flex;align-items:center}
.ctxmenu .ci.on{font-weight:600}

/* Мелкие плитки — третья плотность. Та же карточка, плотнее сетка и ниже превью:
   так в экран помещается большая папка целиком. */
.grid.small{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.grid.small .tile .tprev{height:78px}
.grid.small .tile .tfoot{padding:6px 8px;gap:4px}
.grid.small .tile .tnm{font-size:12px}
.grid.small .tile .dots{transform:scale(.85)}
.grid.small .tile .ic.big{font-size:12px}
/* Карточка папки несёт обложку и дугу-индикатор, поэтому ужимаем её умереннее файловой
   плитки: ниже ~190px обложка и подпись начинают наезжать друг на друга. */
.fcards.small{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}

/* Раздел «Управление местом». */
.storage.act{cursor:pointer;border-radius:12px;transition:background .12s}
.storage.act:hover{background:var(--surface-2)}
.storage.act.on{background:var(--accent-soft)}
.space .spcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;box-shadow:var(--shadow-sm);margin-bottom:14px}
.space .sphead{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.space .spused{font-size:19px;font-weight:700}
.space .spfree{margin-left:auto;color:var(--muted);font-size:13.5px}
.space .spfree.low{color:var(--warn);font-weight:600}
.space .spbar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--track)}
.space .spbar i{display:block;height:100%}
.space .spbar i+i{box-shadow:inset 1px 0 0 var(--surface)}
.space .spbar.empty{background:var(--track)}
.space .splegend{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px}
.space .spleg{display:inline-flex;align-items:center;gap:7px;font-size:13px}
.space .spleg i{width:9px;height:9px;border-radius:3px;flex:none}
.space .spleg-l{color:var(--muted)}
.space .spleg-b{font-weight:600;font-variant-numeric:tabular-nums}
.space .sphints{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.space .sphint{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);
  background:var(--surface-2);border-radius:12px;padding:11px 14px}
.space .sphint .bi{color:var(--muted);flex:none}
.space .sphint button{margin-left:auto;flex:none}
.space .spfrow{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) 110px 110px 110px;
  align-items:center;gap:12px}
.space .spfrow .c-size{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.space .spfrow .c-size.strong{color:var(--ink);font-weight:600}
.space .dhead-row.spfrow .colh.right{text-align:right;justify-content:flex-end}
@media (max-width:900px){
  .space .spfrow{grid-template-columns:minmax(0,1fr) 92px;}
  .space .spfrow .c-folder,.space .spfrow .c-size:not(.strong){display:none}
}

/* Фотоальбом. Отдельной сущности нет — это папка, показанная сеткой снимков, поэтому
   отличаем её значком и более плотной, «фотографической» сеткой без рамок вокруг кадра. */
.fc-ic.album,.fri.album{background:#f0e7ff;color:#7c5cff}
:root.dark .fc-ic.album,:root.dark .fri.album{background:#2a2140;color:#b39dff}
.grid.album{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.grid.album.small{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px}
.grid.album .tile{border-radius:10px}
.grid.album .tile .tprev{height:150px;background:var(--surface-2)}
.grid.album.small .tile .tprev{height:96px}
.grid.album .tile .tprev .ic.big{width:100%;height:100%;border-radius:0}
.grid.album .tile .tprev img.thumb{width:100%;height:100%;object-fit:cover}
.grid.album .tile .tfoot{padding:6px 9px}
.grid.album .tile .tnm{font-size:12px;font-weight:500;color:var(--muted)}
/* Кнопка паузы слайд-шоу — в общем ряду инструментов просмотрщика. */
.viewer .vtools .vplay{color:var(--accent)}

/* Лента «Фото»: сетка кадров с заголовками месяцев. Заголовок липнет к верху при прокрутке —
   иначе, пролистав пару экранов, не понять, какой месяц сейчас перед глазами. */
.feed{display:flex;flex-direction:column;gap:18px}
.feedgrp .sechead{position:sticky;top:var(--app-header-height);z-index:2;background:var(--bg);padding:6px 0 8px;
  display:flex;align-items:center;gap:8px}

/* Таблица «Самые тяжёлые файлы» переопределяет общую сетку файлового списка. Без класса
   .spfiles в селекторе общее правило .docs.table .doc (специфичность выше) выигрывало,
   и числа разъезжались с заголовками колонок. */
.space .docs.table.spfiles .doc,
.space .docs.table.spfiles .dhead-row{
  display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) 110px 110px 110px;
  align-items:center;gap:12px}
.space .docs.table.spfiles .colh.right{text-align:right;justify-content:flex-end}
@media (max-width:900px){
  /* Скрываем колонки и в СТРОКАХ, и в ШАПКЕ: раньше прятались только строки, и шапка
     оставалась пятиколоночной над двумя колонками данных. */
  .space .docs.table.spfiles .doc,
  .space .docs.table.spfiles .dhead-row{grid-template-columns:minmax(0,1fr) 92px}
  .space .docs.table.spfiles .c-folder,
  .space .docs.table.spfiles .c-size:not(.strong),
  .space .docs.table.spfiles .dhead-row .colh:nth-child(2),
  .space .docs.table.spfiles .dhead-row .colh:nth-child(3),
  .space .docs.table.spfiles .dhead-row .colh:nth-child(4){display:none}
}

/* Раздел «История»: фильтры сверху, события сгруппированы по дням. */
.history .hfilters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.history .hfl{color:var(--muted);font-size:13px}
.history .hdate{background:var(--surface);border:1px solid var(--line2);border-radius:10px;
  padding:7px 10px;font:inherit;font-size:13.5px;color:var(--ink);
  /* Без ограничения поле даты растягивалось на всю строку фильтров и выдавливало
     остальные элементы на второй ряд. */
  flex:0 0 auto;width:auto;min-width:150px;max-width:190px}
.history .hfil{display:inline-flex;align-items:center;gap:6px;background:var(--surface);
  border:1px solid var(--line2);border-radius:10px;padding:7px 11px;font-size:13.5px;color:var(--ink)}
.history .hfil.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.history .hfil.x{padding:7px 9px;color:var(--muted)}
.history .hgroups{display:flex;flex-direction:column;gap:16px}
.history .hgrp .sechead{position:sticky;top:var(--app-header-height);z-index:2;background:var(--bg);padding:6px 0 8px;
  display:flex;align-items:center;gap:8px}
.history .hrows{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  overflow:hidden}
.history .hrow{display:flex;align-items:center;gap:12px;padding:10px 14px}
.history .hrow+.hrow{border-top:1px solid var(--line)}
.history .htime{flex:none;width:46px;color:var(--muted);font-size:13px;
  font-variant-numeric:tabular-nums}
.history .hsrc{flex:none;color:var(--faint);font-size:12.5px;text-align:right;min-width:118px}
.history .hmore{display:flex;justify-content:center;margin-top:16px}
/* Кнопка «только этот объект» в строке журнала: бледная, пока на строку не навели, — она
   служебная и не должна спорить с самим событием. */
.history .hnarrow{flex:none;padding:5px 7px;opacity:.35}
.history .hrow:hover .hnarrow{opacity:1}
@media (max-width:820px){ .history .hsrc{display:none} }
/* Середина строки истории должна занимать всё свободное место, иначе колонка источника
   болтается сразу за текстом и не выстраивается в столбец. */
.history .hrow .nfgrow{flex:1;min-width:0}
.history .hrow .nftext{white-space:normal}

/* На desktop все элементы шапки остаются в одном ряду. При нехватке ширины
   второстепенные действия доступны в меню, а измеряемый offset панелей сохранён. */
.top{flex-wrap:nowrap;height:60px;min-height:60px;padding:0 18px;gap:10px}
.top .brand,.top > .iconbtn,.top > .avatar{flex:none}
.top .topslot{order:0;flex:1 1 auto;min-width:0;display:flex;align-items:center}
.top .topslot .toolbar{margin:0;flex:1;min-width:0;gap:6px;flex-wrap:nowrap}
.top .topslot .toolbar > h2,.top .topslot .crumbs{flex:0 1 240px;min-width:0;max-width:240px;overflow:hidden}
.top .topslot .toolbar h2{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .topslot .crumbs{flex-wrap:nowrap}
.top .topslot .crumbs .crumb,.top .topslot .crumbs .crumb-sep{display:none}
.top .topslot .crumbs .crumb-cur{min-width:0}
.top .topslot .cnt2{flex:none;font-size:12px}
.top .topslot .tspacer{flex:1;min-width:0}
.top .topslot .hactions{flex:none;flex-wrap:nowrap;gap:6px}
.top .header-icon-action{font-size:0;width:34px;height:34px;padding:0;flex:none;justify-content:center}
.top .header-icon-action .bi{font-size:16px}
.top .sortbtn > span:not(.bi),.top .sortbtn .sdir{display:none}
.top .header-create{font-size:13px;width:auto;padding:0 10px;white-space:nowrap}
.top .vtoggle{height:34px;flex:none}
.top .vtoggle button{padding:5px 8px;font-size:14px}
.top .topslot .fclear{display:none}
.top .searchwrap{order:0;flex:0 1 220px;min-width:130px;max-width:240px;margin:0}
.top .search{height:36px;font-size:13px}
.top > .iconbtn,.top > .avatar{width:36px;height:36px}
.top .who{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.header-more{display:none;flex:none;width:34px;height:34px;padding:0;background:var(--surface);color:var(--ink);border:1px solid var(--line2);font-size:22px;line-height:1}
.header-more.has-filters{display:inline-flex;align-items:center;justify-content:center}
.header-actions-menu{max-height:calc(100vh - 16px);overflow-y:auto;overscroll-behavior:contain}
.top .bulkbar{min-width:0;flex:1;flex-wrap:nowrap;gap:6px}
.top .bulkbar .bcount{white-space:nowrap}
@media(max-width:1780px){.top .who{display:none}}
@media(max-width:1400px){
  .top{gap:8px;padding-left:14px;padding-right:14px}
  .top .topslot .toolbar > h2,.top .topslot .crumbs{max-width:190px}
  .top .searchwrap{flex-basis:170px;min-width:120px}
}
@media(max-width:1100px){
  .top .header-more{display:inline-flex;align-items:center;justify-content:center}
  .top .sortbtn,.top .vtoggle,.top .hactions button:not(.header-create),.top .selallbtn,.top .densebtn,.top .bulkbar button:not(.bcancel){display:none}
  .top .topslot .toolbar > h2,.top .topslot .crumbs{max-width:180px}
}
@media(max-width:820px){
  .top{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px}
  .top .brand{margin-right:auto}
  .top .topslot{order:1;flex-basis:100%}
  .top .topslot .toolbar > h2,.top .topslot .crumbs{max-width:none;flex:1}
  .top .searchwrap{order:2;flex-basis:100%;max-width:none}
}
@media(max-width:620px){.top > .support{display:none}}

/* ---- Путь до найденного файла в плитках (RBDOC-111) ----------------------------------
   В списке путь есть колонкой «Папка» и подписью .fpath, а в плитках и в ленте «Фото» ни
   того, ни другого: по выдаче поиска было не понять, откуда файл. Подпись показываем только
   при поиске (её рисует docPath) — в обычном просмотре папка и так известна из крошек. */
.tile .tnmwrap { flex: 1; min-width: 0; }
.tile .tpath { font-size: 11.5px; color: var(--faint); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* У плитки с путём подвал выше на одну строку — прижимаем содержимое к верху, иначе имя
   и путь разъезжаются относительно кнопки «⋮». */
.tile .tfoot.withpath { align-items: flex-start; }
.tile .tfoot.withpath .dots { margin-top: -2px; }
.grid.small .tile .tpath, .grid.album.small .tile .tpath { font-size: 11px; }

/* ---- Загрузка папки целиком (RBDOC-106) ---------------------------------------------
   В зоне теперь два действия: обычный диалог файлов и диалог выбора ПАПКИ — обычным
   папку выбрать нельзя вовсе, и без второй кнопки дерево грузилось бы только броском. */
.updzbtns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.updzbtns button { display: inline-flex; align-items: center; gap: 6px; }
/* Путь внутри загружаемой папки — под именем файла: без него в списке из ста строк
   одноимённые файлы разных подпапок неразличимы. */
.uprow2 .uppath { display: block; font-size: 11.5px; color: var(--faint); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- «Выделить всё» ------------------------------------------------------------------
   Галочка стоит в шапке списка ровно над галочками строк, поэтому левый отступ первой
   колонки, оставленный под них, ей и отдаём. Кнопку сортировки нельзя делать вложенным
   .colh: правила скрытия колонок на узком экране бьют по nth-child. */
.dhead-row .colh.namehead { padding-left: 0; gap: 10px; cursor: default; }
.dhead-row .namehead .colsort { background: transparent; border: 0; padding: 0; color: inherit;
  font: inherit; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.dhead-row .namehead .colsort.on { color: var(--accent); }
.dhead-row .namehead .selbox .selmark { width: 18px; height: 18px; }
/* Кнопка в панели раздела — для плиточных видов, где шапки списка нет. */
.selallbtn { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; background: var(--surface); color: var(--muted);
  border: 1px solid var(--line2); border-radius: 10px; }
.selallbtn:hover { border-color: var(--accent); color: var(--accent); filter: none; }
/* «Выделить всё» рядом со счётчиком выбранного: отсюда видно и сколько выбрано, и как
   добрать остальное одним нажатием. */
.bulkbar .blinkall { background: transparent; color: var(--accent); padding: 4px 8px;
  font-size: 13.5px; font-weight: 600; border-radius: 8px; }
.bulkbar .blinkall:hover { background: var(--accent-soft); filter: none; }
.bulkbar button.ghost.on { border-color: var(--accent); color: var(--accent); }

/* ---- Корзина: документ уехал вместе с папкой ---------------------------------------- */
.c-own.trashmeta .withfol { font-size: 12px; color: var(--accent-ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ---- Версии документа (RBDOC-108) ----------------------------------------------------
   Строка версии стала двухэтажной: сверху имя и признаки, снизу действия. В один ряд
   восемь кнопок и имя не помещаются в узкую панель ни при каком экране. */
.vlist li.vrow { flex-direction: column; align-items: stretch; gap: 8px; }
.vrow .vtop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* Имя версии крупно и первым: человек помнит редакцию как «на подпись», а не как «v7». */
.vrow .vname { font-weight: 600; font-size: 14px; cursor: text; border-bottom: 1px dashed transparent; }
.vrow .vname:hover { border-bottom-color: var(--line2); }
.vrow .vname.unnamed { font-weight: 400; color: var(--faint); font-style: italic; }
.vrow .vnum { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.vrow .vname-in { font: inherit; font-size: 14px; padding: 3px 8px; border: 1px solid var(--accent);
  border-radius: 8px; background: var(--surface); color: var(--ink); min-width: 160px; flex: 1; }
.vrow .vmeta { font-size: 12.5px; white-space: nowrap; }
.vrow .vacts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vrow .vacts button { display: inline-flex; align-items: center; gap: 5px; }
/* Кнопка удаления у закреплённой версии видна, но гасится: она не «пропала», её сначала
   надо открепить, и подсказка говорит именно это. */
.vrow .vacts .danger.sm.off { opacity: .45; }
/* «Сейчас в документе» — тихая плашка, а не предупреждение: это состояние, не проблема. */
.pill.cur { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.vlist li.vcur { border-color: var(--accent); }
.vhint { font-size: 12.5px; margin-top: 10px; }

/* Просмотр старой версии текстового документа — текстом, а не скачиванием файла. */
.viewer .vtext { max-width: min(900px, 92vw); max-height: 100%; overflow: auto; margin: 0;
  padding: 18px 22px; background: var(--surface); color: var(--ink); border-radius: 10px;
  font-family: var(--mono); font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

/* Эскиз документа вписываем целиком по белому листу: у страницы договора смысл в верхних
   строках, и обрезка «по кадру» срезала бы как раз их. */
.ic.docthumb .thumb { object-fit: contain; background: #fff; }

/* Чужая папка в «Избранном»: открыть её деревом нельзя, и карточка не должна обещать этого. */
.fcard.foreign { opacity: .92; }
.fcard.foreign .fc-upd { color: var(--faint); font-style: italic; }

/* Уточнение к событию журнала (какая версия, ушла ли папка с содержимым). */
.nfdet { color: var(--muted); }

/* ---- Доступ и журнал (RBDOC-107, 112) ------------------------------------------------ */

/* Подсказка под полем роли: почему справочник молчит или почему такой роли нет. Место под
   неё держим всегда — иначе появление сообщения дёргает всю форму выдачи вверх-вниз. */
.rolenote { font-size: 12.5px; min-height: 17px; margin: 6px 2px 0; }
.rolenote.bad { color: var(--warn); }
.upick-drop .shav.sm.grp svg { width: 14px; height: 14px; }

/* Переключатель скачивания в строке выданного доступа: замок — запрещено, стрелка вниз —
   разрешено. Цветом выделено именно ЗАПРЕЩЕНО: это отличие от обычного положения дел. */
.shdl { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; background: #fdeceb; color: var(--warn); border: 1px solid transparent;
  border-radius: 8px; flex: none; }
.shdl.on { background: var(--surface-2); color: var(--muted); border-color: var(--line2); }
/* Состояние неизвестно (сервер не прислал флаг) — пунктир: кнопка работает, но текущее
   положение ею не показано, и притворяться, что показано, нельзя. */
.shdl.unknown { background: transparent; color: var(--faint); border: 1px dashed var(--line2); }
.shdl:hover { filter: none; border-color: var(--accent); color: var(--accent); }
.shdl svg { width: 16px; height: 16px; }
/* «это вы» в чужом списке доступа — человек первым делом ищет там себя. */
.pill.me { margin-left: 6px; background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.pill.bad { background: #fdeceb; color: var(--warn); border-color: #f6c9c5; }
.acchint { font-size: 12.5px; margin-top: 10px; }
/* Ссылка внутри строки свойств («через папку …»). */
.plink { color: var(--accent-ink); cursor: pointer; }
.plink:hover { text-decoration: underline; }

/* ---- Чужая папка, открытая как папка -------------------------------------------------- */
.sfhead { background: var(--surface); border: 1px solid var(--line2); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.sfrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.sflbl { color: var(--faint); font-size: 12.5px; }
.sfchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 100px;
  background: var(--surface-2); border: 1px solid var(--line2); font-size: 12.5px; color: var(--ink); }
.sfchip.me { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.sfchip svg { width: 13px; height: 13px; }
/* Строка чужой папки: кликается целиком, но без выбора и перетаскивания — к чужой папке
   групповые действия не применимы. */
.doc.folder-row.shared { cursor: pointer; }
.doc.folder-row.shared .c-size .pill { font-family: var(--font); }

/* ---- Раздел «Мои ссылки» -------------------------------------------------------------- */
.main.links .lnkbox.page { margin-top: 4px; }
.lnkbox.page .lnk { padding: 12px 14px; background: var(--surface); }
.lnk-nm { font-weight: 600; color: var(--ink); cursor: pointer; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.lnk-nm:hover { color: var(--accent-ink); text-decoration: underline; }
/* Мёртвая ссылка (объекта нет, срок вышел) гасится, но остаётся читаемой: её надо найти
   глазами и отозвать, а не проглядеть. */
.lnk.dead { border-color: #f6c9c5; }
.lnk.dead .lnk-url { opacity: .6; }

/* «Показать ещё» в панели оповещений — та же кнопка, что в журнале, но панель уже. */
.drawer .hmore { display: flex; justify-content: center; margin-top: 12px; }
/* Тёмная тема: те же смыслы, но красное на светлом фоне в ней слепит (правило то же, что
   у .diff .del и .pill.lock выше). */
:root.dark .shdl { background: #3a1a1a; color: #ea9a92; }
:root.dark .pill.bad { background: #3a1a1a; color: #ea9a92; border-color: #5a2a28; }
:root.dark .lnk.dead { border-color: #5a2a28; }

/* ---- Администрирование (RBDOC-118) ---------------------------------------------------
   Отдельной визуальной системы у раздела нет: те же токены, та же плотность, те же карточки
   и пилюли, что и в остальном интерфейсе. Админка — это ещё один раздел диска, а не другой
   продукт, и выглядеть она должна так же — иначе человек каждый раз заново учится читать
   экран, на котором принимает самые дорогие решения. */

/* Группа в боковом меню: прижата к низу вместе с хранилищем — заходят в неё редко. */
.admsect { flex: none; margin-top: 6px; }
.admsect .nav { max-height: 30vh; overflow-y: auto; overscroll-behavior: contain; }

.main.admin .admtop { margin-bottom: 14px; }
/* Без «.admin » в селекторе намеренно: иначе у этого правила вес выше, чем у надстроек
   (.admok, .admdefq) на том же элементе, и заданные ими отступы молча не применяются. */
.admbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 16px; box-shadow: var(--shadow-sm); }

/* Плитки сводки — тот же приём, что у карточек категорий на главной. */
.admstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.admstat { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 15px 18px; box-shadow: var(--shadow-sm); }
.admstat-l { font-size: 12.5px; color: var(--muted); }
.admstat-v { font-size: 26px; font-weight: 800; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; }
.admstat-s { font-size: 12px; color: var(--faint); margin-top: 5px; }

/* Строка «цифра посчитана не по всем» — вместе с кнопкой досчитать. */
.admhint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px;
  color: var(--muted); margin-top: 12px; }
.admhint button { flex: none; }
/* Мелкое пояснение под полем или блоком. */
.admhint2 { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.45; }

/* Факты об установке: пары «что — значение». */
.admfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 22px; }
.admfact { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--line); font-size: 13.5px; }
.admfact-k { color: var(--muted); }
.admfact-v { font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Зависимость: точка состояния, имя, подробность, время ответа. Три состояния, а не два:
   «не настроено» — это решение, а не поломка, и красным оно быть не должно. */
.admdep { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.admdep:last-child { border-bottom: 0; }
.admdot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--faint); }
.admdot.ok { background: var(--ok); }
.admdot.fail { background: var(--warn); }
.admdot.off { background: var(--faint); }
.admdep-m { flex: 1; min-width: 0; }
.admdep-n { font-weight: 600; font-size: 14px; }
.admdep-d { font-size: 12.5px; color: var(--muted); margin-top: 2px; word-break: break-word; }
.admdep-s { font-size: 12.5px; color: var(--muted); flex: none; }
.admdep-s.ok { color: var(--ok); }
.admdep-s.fail { color: var(--warn); font-weight: 600; }
.admdep-t { font-size: 12px; color: var(--faint); flex: none; width: 62px; text-align: right;
  font-variant-numeric: tabular-nums; }

/* Незаданная настройка: последствие крупно, имя переменной — мелко и моноширинно. */
.admwarn { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.admwarn:last-child { border-bottom: 0; }
.admwarn-ic { color: #d9821f; flex: none; margin-top: 1px; }
.admwarn-m { min-width: 0; font-size: 13.5px; line-height: 1.45; }
.admwarn-e { color: var(--faint); margin-top: 3px; }
.admok { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: var(--muted); font-size: 13.5px; }
.admok .bi { color: var(--ok); }

/* Заметное предупреждение внутри раздела: справочник недоступен, выгрузка обрезана,
   человек за пределом лимита. */
.admnotice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; margin-bottom: 14px;
  background: #fff6e8; border: 1px solid #f0d9b0; border-radius: 12px; color: #7a5310; font-size: 13.5px; line-height: 1.45; }
.admnotice .bi { flex: none; margin-top: 1px; }

/* Строка фильтров: та же плотность, что у фильтров журнала. */
.admfilters { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; position: relative; }
.admfilters.wrap { flex-wrap: wrap; }
.admq { width: auto; flex: 1 1 240px; min-width: 180px; height: 38px; border-radius: 10px; padding-left: 36px; }
.admq.sm { flex: 0 1 190px; min-width: 150px; height: 34px; padding: 6px 10px; font-size: 13.5px; }
.admqi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint);
  display: flex; align-items: center; font-size: 16px; pointer-events: none; }
.admfilters.wrap .admq { padding-left: 10px; }
.admfil { display: inline-flex; align-items: center; gap: 6px; background: var(--surface);
  border: 1px solid var(--line2); color: var(--ink); border-radius: 10px; padding: 7px 11px; font-size: 13.5px; }
.admfil:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.admfil.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.admfil .bi { font-size: 13px; color: var(--faint); }
.admfil.on .bi { color: var(--accent-ink); }
.admdate { width: auto; flex: none; background: var(--surface); border: 1px solid var(--line2);
  border-radius: 10px; padding: 6px 10px; font-size: 13.5px; color: var(--ink); }
.admfl { font-size: 13px; color: var(--muted); }
.admtabs { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.admtabs .admhint2 { margin-top: 0; }
.admcount { font-size: 12.5px; color: var(--muted); margin: 0 2px 10px; }
.admmore { display: flex; justify-content: center; margin-top: 16px; }

/* Настройки контура (RBDOC-121). Карточка на настройку, а не строка таблицы: у каждой
   обязательны два абзаца — что она значит и что произойдёт после смены, — и в ячейку
   таблицы они не помещаются, а без них решение принимают по названию. */
.admset-card { padding: 16px; margin-bottom: 14px; }
.admset-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.admset-name { font-weight: 700; font-size: 15px; flex: 1 1 240px; min-width: 0; }
.admset-val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.admset-act { display: flex; gap: 8px; flex: none; }
.admset-src { font-size: 12.5px; color: var(--faint); margin-top: 4px; }
.admset-what { font-size: 13.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
/* Последствие — отдельным блоком со значком: его читают перед тем, как нажать, и потерять
   его среди описания нельзя. */
.admset-eff { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; padding: 10px 12px;
  background: var(--surface-2); border-radius: 10px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.admset-eff .bi { color: #d9821f; flex: none; margin-top: 1px; }
.admset-h { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .03em; margin: 22px 2px 10px; }
.admset-ro { padding: 4px 16px; }
.admrow-ro { padding: 12px 0; border-bottom: 1px solid var(--line); }
.admrow-ro:last-child { border-bottom: 0; }
.admrow-k { font-weight: 600; font-size: 13.5px; }
.admrow-v { font-size: 13.5px; color: var(--accent-ink); margin-top: 2px; word-break: break-word; }
.admrow-w { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }

/* Таблицы раздела. Один каркас, у каждой свои колонки: строки одинаковой высоты и
   выровненные числа читаются глазами столбцом, а карточками — нет. */
.admtbl { border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  overflow: hidden; box-shadow: var(--shadow-sm); }
.admtbl-hd, .admtbl-row { display: grid; gap: 12px; padding: 10px 14px; align-items: center; font-size: 13px; }
.admtbl-hd { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .03em; }
.admtbl-row { border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.admtbl-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admtbl-row.off { opacity: .62; }
.admperson { cursor: pointer; }
.admperson:hover { background: var(--surface-2); }

.admtbl.people .admtbl-hd, .admtbl.people .admtbl-row {
  grid-template-columns: minmax(190px, 2.2fr) 150px minmax(160px, 1.1fr) 92px 160px; }
.admtbl.audit .admtbl-hd, .admtbl.audit .admtbl-row {
  grid-template-columns: 138px minmax(110px, 1fr) minmax(110px, 1fr) minmax(150px, 1.7fr) minmax(100px, 1fr) 116px 96px; }
.admtbl.denials .admtbl-hd, .admtbl.denials .admtbl-row {
  grid-template-columns: minmax(130px, 1.2fr) minmax(120px, 1fr) minmax(150px, 1.4fr) 88px 92px 150px; }
.admtbl.dev .admtbl-hd, .admtbl.dev .admtbl-row {
  grid-template-columns: minmax(130px, 1.3fr) minmax(120px, 1.2fr) 92px 88px 116px 156px; }

/* Человек в строке: лицо, имя, под ним почта или логин. */
.admwho { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admwho-m { min-width: 0; display: flex; flex-direction: column; }
.admwho-n { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admwho-n .pill { margin-left: 6px; }
.admwho-s { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar.sm { width: 30px; height: 30px; font-size: 11px; }

/* Занятое место: цифра и под ней полоска заполнения. Полоска нужна именно рядом с числом —
   «1,8 ГБ» ничего не говорит, пока не видно, какая это часть лимита. */
.admused { display: flex; flex-direction: column; gap: 5px; }
.admused-n { font-weight: 600; }
.admbar { display: block; height: 5px; border-radius: 99px; background: var(--track); overflow: hidden; }
.admbar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.admbar i.over { background: var(--warn); }
.admquota { display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; overflow: hidden; }
.admnum { text-align: right; }
.admnum.strong { font-weight: 700; }
.admseen { color: var(--muted); display: flex; flex-direction: column; }
.admseen-s { font-size: 11.5px; color: var(--faint); }
.admwhen { color: var(--muted); }
.admobj { color: var(--ink); }
.admsrc { color: var(--faint); }
.admold { color: #d9821f; font-weight: 600; }
.admact { display: flex; justify-content: flex-end; }
.admact button { display: inline-flex; align-items: center; gap: 6px; }
/* Кто действовал: клик ставит отбор по этому человеку — идентификатор для журнала иначе
   приходится переносить глазами. */
.admactor { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admactor:hover { color: var(--accent-ink); text-decoration: underline; }
.pill.warn { background: #fff6e8; color: #a06a12; border-color: #f0d9b0; }

/* Карточка человека в правой панели. */
.drawer .admnums { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.admnums-i { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.admnums-i b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.admnums-i span { font-size: 11.5px; color: var(--muted); }
.admid { font-size: 12px; word-break: break-all; text-align: right; }
/* Полоса и легенда разбора места — те же, что в разделе «Управление местом»: правила там
   привязаны к .space, а показываем мы её ещё и в панели администратора. */
.admspace .spbar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--track); }
.admspace .spbar i { display: block; height: 100%; }
.admspace .spbar i + i { box-shadow: inset 1px 0 0 var(--surface); }
.admspace .splegend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.admspace .spleg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
.admspace .spleg i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.admspace .spleg-l { color: var(--muted); }
.admspace .spleg-b { font-weight: 600; font-variant-numeric: tabular-nums; }
.drawer .admnotice { margin: 8px 0 0; }

/* Экран отказа: раздел существует, но закрыт — и сказать это надо словами, а не пустотой. */
.admdeny { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 620px; margin: 0 auto; }
.admdeny-ic { color: var(--faint); font-size: 30px; display: flex; }
.admdeny-t { font-size: 17px; font-weight: 700; color: var(--ink); }

/* Справочник людей молчит — пикер выдачи доступа обязан это сказать: раньше «никого не
   нашлось» и «спросить некого» выглядели одинаково. */
.upick-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
  font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.upick-note .bi { color: #d9821f; flex: none; margin-top: 1px; }

@media (max-width: 1180px) {
  .admtbl.audit .admtbl-hd > *:nth-child(5), .admtbl.audit .admtbl-row > *:nth-child(5),
  .admtbl.audit .admtbl-hd > *:nth-child(6), .admtbl.audit .admtbl-row > *:nth-child(6) { display: none; }
  .admtbl.audit .admtbl-hd, .admtbl.audit .admtbl-row {
    grid-template-columns: 132px minmax(100px, 1fr) minmax(100px, 1fr) minmax(140px, 1.6fr) 96px; }
  .admtbl.people .admtbl-hd > *:nth-child(4), .admtbl.people .admtbl-row > *:nth-child(4) { display: none; }
  .admtbl.people .admtbl-hd, .admtbl.people .admtbl-row {
    grid-template-columns: minmax(170px, 2fr) 140px minmax(150px, 1fr) 150px; }
}
@media (max-width: 820px) {
  .admtbl.people .admtbl-hd > *:nth-child(5), .admtbl.people .admtbl-row > *:nth-child(5) { display: none; }
  .admtbl.people .admtbl-hd, .admtbl.people .admtbl-row { grid-template-columns: minmax(140px, 2fr) 120px 140px; }
  .admtbl.dev .admtbl-hd > *:nth-child(3), .admtbl.dev .admtbl-row > *:nth-child(3),
  .admtbl.dev .admtbl-hd > *:nth-child(5), .admtbl.dev .admtbl-row > *:nth-child(5) { display: none; }
  .admtbl.dev .admtbl-hd, .admtbl.dev .admtbl-row { grid-template-columns: minmax(120px, 1.2fr) minmax(110px, 1fr) 84px 130px; }
  .admtbl.denials .admtbl-hd > *:nth-child(6), .admtbl.denials .admtbl-row > *:nth-child(6) { display: none; }
  .admtbl.denials .admtbl-hd, .admtbl.denials .admtbl-row {
    grid-template-columns: minmax(110px, 1.2fr) minmax(100px, 1fr) minmax(120px, 1.4fr) 80px 84px; }
  .admfacts { grid-template-columns: 1fr; }
}

/* Тёмная тема: жёлтое и красное по светлому фону в ней слепит — тот же приём, что у .pill.lock. */
:root.dark .admnotice { background: #372814; border-color: #4a3820; color: #e8c48a; }
:root.dark .pill.warn { background: #372814; color: #e0b070; border-color: #4a3820; }
:root.dark .admwarn-ic, :root.dark .upick-note .bi { color: #e0b070; }
:root.dark .admold { color: #e0b070; }

/* Общий лимит по умолчанию — над списком людей: он не свойство человека, и в строке ему не место. */
.admdefq { display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin: 0 0 14px; }
.admdefq-m { flex: 1; min-width: 0; }
.admdefq-t { font-size: 14.5px; }
.admdefq-s { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.admdefq button { flex: none; }
@media (max-width: 820px) { .admdefq { flex-direction: column; align-items: stretch; } }

/* ---- Правила хранения (RBDOC-89) ---- */
/* Каркас таблицы общий с админскими (.admtbl): строки одной высоты и выровненные сроки
   читаются столбцом. Своя раскладка колонок — «на что / срок / по истечении / заведено /
   действие». Последняя колонка у того, кому правка закрыта, остаётся пустой намеренно:
   кнопки, ведущей в отказ, там быть не должно, а ширина колонки держит строки ровными. */
.admtbl.retn .admtbl-hd, .admtbl.retn .admtbl-row {
  grid-template-columns: minmax(160px, 1.4fr) minmax(180px, 1.8fr) minmax(130px, 1fr) 130px 90px; }
.main.retention .admbox { margin: 0 0 14px; padding: 14px 16px; }
/* Предупреждение о том, что снос по сроку не выполняется, — над правилами и заметное:
   без него экран обещает автоматическую очистку, которой не происходит. */
.retnote-t { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.retnote-t .bi { color: var(--warn); display: inline-flex; }
.main.retention .retprev { margin-top: 16px; }
/* Поля формы нового правила: подпись слева, поле справа — иначе пять полей подряд читаются
   как один столбец без имён. */
.retrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.retlbl { width: 120px; flex: none; color: var(--muted); font-size: 13px; }
.retrow input, .retrow select { flex: 1; min-width: 0; }
@media (max-width: 820px) {
  .admtbl.retn .admtbl-hd > *:nth-child(4), .admtbl.retn .admtbl-row > *:nth-child(4) { display: none; }
  .admtbl.retn .admtbl-hd, .admtbl.retn .admtbl-row {
    grid-template-columns: minmax(120px, 1.2fr) minmax(140px, 1.6fr) minmax(110px, 1fr) 84px; }
  .retrow { flex-direction: column; align-items: stretch; gap: 4px; }
  .retlbl { width: auto; }
}

/* ======================= ФОТОРЕЖИМ: мозаика и плотная сетка =======================
   Альбом — та же папка; признак kind='album' переключает ПРЕДСТАВЛЕНИЕ. Координаты
   плиток считает JS (mosaicLayout/squareLayout), CSS отвечает только за вид.
   Высота группы задаётся инлайном — без неё полоса прокрутки прыгала бы при
   виртуализации, потому что пустой контейнер не занимает места. */
.pfeed { position: relative; }
.pgrp { position: relative; }
/* Плитка позиционируется абсолютно и двигается transform'ом: top/left заставляли бы
   браузер пересчитывать раскладку страницы на каждое уточнение пропорций. */
.ptile { position: absolute; top: 0; left: 0; border-radius: 8px; overflow: hidden;
  background: var(--surface-2); }
.pfeed.dense .ptile { border-radius: 6px; }
.ptile.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Кнопка во весь кадр — настоящая <button>, а не div с tabindex: так работают Enter и
   Пробел и так диктор называет элемент правильно. */
.ptile .pbtn { position: absolute; inset: 0; padding: 0; margin: 0; border: 0;
  background: none; cursor: pointer; display: block; width: 100%; height: 100%; }
/* Прямоугольник, который виден, пока эскиз не пришёл. Форма у него уже правильная (её задаёт
   раскладка), и менять её приезд картинки не будет — лента не дёргается. А вот ЦВЕТ значка
   формата здесь приглушаем: в списке это одна яркая метка среди строк текста, а в ленте —
   целый экран одинаковых заливок с надписью IMG, который читается как поломка, а не как
   «сейчас загрузится». Подпись формата оставляем: если эскиз не выйдет вовсе, по ней видно,
   что это за файл. */
.ptile .pbtn .ic { width: 100%; height: 100%; border-radius: 0; font-size: 12px;
  background: var(--surface-2); color: var(--faint); }
.ptile .pbtn img.thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptile .pbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* Подпись — полосой по нижнему краю и ТОЛЬКО по наведению или фокусу: имя вида
   IMG_20230715_121314.jpg не несёт ничего, чего не видно на самом кадре. */
.pmeta { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 5px;
  display: flex; align-items: baseline; gap: 6px; pointer-events: none;
  color: #fff; font-size: 11.5px; line-height: 1.25; opacity: 0; transition: opacity .12s;
  background: linear-gradient(to top, rgba(12,16,28,.72), rgba(12,16,28,0)); }
.pmeta .pnm { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.pmeta .pdt { flex: none; opacity: .85; font-variant-numeric: tabular-nums; }
/* Узкая плитка: дату убираем, имя оставляем — см. photoPlace. Дата у снимка повторяется
   у всех соседей по группе (месяц и так написан в заголовке), а имя — единственное, что
   отличает эту плитку от соседней. */
.ptile.narrow .pmeta .pdt { display: none; }
.ptile:hover .pmeta, .ptile:focus-within .pmeta { opacity: 1; }
.pfeed.dense .pmeta .pdt { display: none; }
/* Точки и галочка прячутся ТОЛЬКО прозрачностью. display:none выкинул бы их из порядка
   табуляции, и «действия по наведению» стали бы «с клавиатуры действий нет». */
.ptile .pdots { position: absolute; top: 5px; right: 5px; z-index: 3; border: 0;
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; color: #fff;
  background: rgba(12,16,28,.5); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s; }
.ptile .tsel { top: 6px; left: 6px; opacity: 0; transition: opacity .12s; }
.ptile:hover .pdots, .ptile:focus-within .pdots,
.ptile:hover .tsel, .ptile:focus-within .tsel { opacity: 1; }
/* У ВЫБРАННОЙ плитки галочка видна всегда: иначе после прокрутки человек не знает,
   что у него отмечено. */
.ptile.sel .tsel { opacity: 1; }
/* Видно всегда: ролик (кадр видео неотличим от фотографии), пометка обрезки, замок. */
.ptile .pvid, .ptile .pcrop, .ptile .plock { position: absolute; z-index: 2;
  color: #fff; display: inline-flex; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(8,12,22,.75)); }
.ptile .pvid { left: 7px; bottom: 6px; font-size: 15px; }
.ptile .plock { left: 7px; top: 34px; font-size: 13px; }
.ptile .pcrop { right: 7px; bottom: 6px; font-size: 13px; opacity: .85; }
.pfeed.dense .ptile .pvid { font-size: 13px; }
/* Заголовок месяца липнет к верху: пролистав пару экранов, иначе не понять, где ты. */
.pfeed .phead { position: sticky; top: 0; z-index: 4; background: var(--bg);
  margin: 20px 0 10px; padding: 6px 0 8px; display: flex; align-items: center; gap: 9px; }
.pfeed .phead .selbox { opacity: 0; transition: opacity .12s; }
.pfeed .phead:hover .selbox, .pfeed .phead .selbox.on,
.pfeed .phead .selbox:focus-visible { opacity: 1; }
/* Разделитель года — тонкая строка во всю ширину. Нужен потому, что заголовки месяцев
   без него неоднозначны: «Август», «Март», «Август» подряд отличаются только годом,
   которого на экране нет. */
.pyear { display: flex; align-items: center; gap: 12px; margin: 26px 0 2px;
  font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.pyear::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Полоса лет справа. Показывается, только когда правда сокращает путь (охват больше
   одного года и групп больше двенадцати) — правило в photoFeed. */
.pyears { position: absolute; right: 0; top: 0; width: 40px; height: 100%;
  pointer-events: none; }
.pyears .pyi { position: sticky; top: 96px; display: flex; flex-direction: column;
  align-items: flex-end; gap: 1px; }
.pyears button { pointer-events: auto; border: 0; text-align: right;
  background: none; color: var(--faint); font-size: 11.5px; font-weight: 600;
  padding: 3px 2px; cursor: pointer; font-variant-numeric: tabular-nums; }
.pyears button.on { color: var(--accent); }
.pyears button:hover { color: var(--ink); }
/* Уменьшенная копия — подпись под кадром в просмотрщике. Не всплывающее уведомление:
   это не событие, а свойство того, что человек смотрит. */
.viewer .vnote { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: rgba(255,255,255,.86); font-size: 12.5px; pointer-events: none; }
.viewer .vnote .bi { display: inline-flex; opacity: .9; }
/* Перечень «что увидит адресат без скачивания» в панели ссылки. */
.dlnote { border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px;
  background: var(--surface-2); font-size: 12.5px; line-height: 1.45; }
.dlnote-h { display: flex; align-items: center; gap: 7px; font-weight: 600;
  margin-bottom: 6px; color: var(--ink); }
.dlnote-r { color: var(--muted); margin-top: 3px; }
.dlnote-r.warn { color: var(--warn); }
.dlnote-r b { color: var(--ink); font-weight: 600; }
.propnote { color: var(--faint); font-size: 12px; line-height: 1.4; margin-top: 3px; }
/* Кнопка ступени плотности стоит рядом с переключателем видов, а не внутри него. */
.densebtn { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--surface); color: var(--muted); cursor: pointer; }
.densebtn:hover { color: var(--ink); }
@media (max-width: 560px) {
  /* На узком экране полоса лет отнимала бы шестую часть ширины кадра. */
  .pyears { display: none; }
  .pyear { font-size: 18px; margin: 18px 0 2px; }
}

/* ── Раздел «Место и оплата» в настройках (RBDOC-155).
      Раскладка простая нарочно: человек приходит сюда с одним вопросом — «сколько у меня
      места и когда с меня спишут», — и ответ обязан стоять первым, до тарифов и карт. */
.pay-now{background:var(--surface-2);border:1px solid var(--line2);border-radius:12px;padding:14px 16px}
.pay-big{font-size:19px;font-weight:800;letter-spacing:-.01em}
.pay-sub{font-size:14px;font-weight:600;color:var(--muted);margin-top:2px}
/* Предупреждение «списывать нечем» — тёплым, а не красным: место ещё не закрыто, и пугать
   человека там, где у него есть время, значит приучать не верить нашим предупреждениям. */
.pay-warn{margin-top:10px;padding:9px 11px;border-radius:9px;font-size:13px;font-weight:600;
  background:var(--warm-soft);color:var(--warm);border:1px solid color-mix(in srgb,var(--warm) 28%,transparent)}
.pay-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:10px;margin-top:8px}
.pay-plan{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 14px 12px;
  border:1px solid var(--line2);border-radius:14px;background:var(--surface);cursor:pointer;
  text-align:left;font:inherit;color:inherit;transition:border-color .12s,box-shadow .12s}
.pay-plan:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);filter:none}
.pay-plan-t{font-weight:700;font-size:17px;letter-spacing:-.01em}
.pay-plan-p{font-size:14.5px;font-weight:600;color:var(--ink);margin-top:4px}
.pay-plan-per{font-size:12px;color:var(--faint)}
.pay-plan-go{margin-top:10px;font-size:13px;font-weight:600;color:var(--accent-ink)}
.pay-cards{display:grid;gap:8px;margin-top:8px}
.pay-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;
  border:1px solid var(--line2);border-radius:10px;background:var(--surface)}
/* Истёкшая карта притушена, но читаема: она остаётся в списке, потому что человеку надо
   понять, ЧЕМ он платил, а не гадать, куда делась карта. */
.pay-card-old{opacity:.72}
.pay-hist{display:grid;gap:2px;margin-top:8px}
.pay-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line)}
.pay-row:last-child{border-bottom:0}

/* Место: занято из предела и полоска. Стоит ПЕРВЫМ в разделе оплаты — до тарифов:
   человек приходит с вопросом «сколько у меня места», и предложение купить без остатка
   читается как продажа вслепую. Полоска краснеет с 90%: это уже не сведение, а повод. */
.pay-space { margin-top: 10px; }
.pay-space-t { font-size: 13px; margin-bottom: 6px; }
.pay-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pay-bar-in { height: 100%; background: var(--accent); border-radius: 999px; }
.pay-bar-hot .pay-bar-in { background: var(--warn); }

/* Фото в шапке настроек — само себе кнопка. Действия («заменить», «убрать») переехали сюда
   из двух кнопок в панели: панель узкая, и строки в ней стоят места, а на снимке это
   действие и ищут. Карандаш появляется при наведении — до наведения он лишний шум. */
.ava-edit{position:relative;padding:0;border:0;background:none;line-height:0;border-radius:50%;cursor:pointer}
.ava-edit:hover{filter:none}
.ava-cam{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line2);color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s}
.ava-cam svg{width:12px;height:12px}
.ava-edit:hover .ava-cam,.ava-edit:focus-visible .ava-cam{opacity:1}
.ava-edit:hover .avatar{filter:brightness(.92)}

/* Строка настроек, ведущая в окно: ключ слева, значение и шеврон справа, вся строка —
   кнопка. Отличается от обычной .setrow только тем, что на неё можно нажать, и это должно
   быть видно до нажатия: иначе человек ждёт значения, а получает окно. */
/* ⚠️ ОТСТУПЫ ЗАДАНЫ ВСЕГДА, А НЕ ПРИ НАВЕДЕНИИ. Раньше :hover добавлял боковое поле и
   отрицательное внешнее — и надпись «Бесплатный объём» ПРЫГАЛА по горизонтали каждый раз,
   когда мышь проходила мимо. Подсветка обязана менять только цвет: любое изменение
   геометрии на наведении двигает текст под курсором. */
.setrow-go{width:100%;background:none;border:0;padding:7px 8px;margin:0 -8px;text-align:left;
  cursor:pointer;display:flex;align-items:center;gap:8px;color:inherit;font:inherit;border-radius:8px}
.setrow-go:hover{background:var(--surface-2);filter:none}
.setrow-go .setv{margin-left:auto;color:var(--ink);font-weight:600}
/* ⚠️ ШЕВРОН СМОТРИТ ВПРАВО, А НЕ ВВЕРХ. Значок chevron нарисован «вправо» (M9 6l6 6-6 6),
   и поворот на -90° разворачивал его ВВЕРХ: на экране получалась «птичка» ^, которую читают
   как «свернуть», хотя строка открывает окно. Владелец: «зачем сменить пароль через стрелку
   справа, странный паттерн». Паттерн верный — строка, ведущая в окно, несёт шеврон вправо;
   неверен был поворот. Поворачивать нечего: значок и так вправо.
   НЕ ПРАВИЛО: это направление рисунка, а не ветка; вырезать нечего, а увидит это глаз. */
.setrow-go .setgo{display:inline-flex;color:var(--faint)}
.setrow-go .setgo svg{width:16px;height:16px}
.setsub{margin-top:2px}
/* Окно оплаты шире обычного: четыре тарифа строкой и история списаний в 460 px не встают. */
.pay-win{display:block}
.pay-win .pay-plans{margin-top:8px}

/* Заголовок панели настроек — это имя человека, и оно правится прямо здесь. Пока поле
   выглядело как обычный текст, никто не догадывался, что в него можно писать: рамка по
   наведению уже была, добавляем подсказку курсором. */
.drawer .dhead .dtitle:not(.stat){cursor:text}

/* Шапка раздела настроек со значком. Раздел должен читаться как раздел до того, как человек
   начнёт разбирать слова: значок даёт опору глазу, по которой панель листают. */
/* ЗНАЧОК РАЗДЕЛА — ЦВЕТНАЯ ПЛАШКА, А НЕ СЕРАЯ ЛИНИЯ.
   Серые значки одного веса с текстом ничего не расставляли: панель читалась ровной лентой,
   в которой нечему зацепить взгляд. Берём тот же язык, каким уже говорят карточки над
   списком документов (.catic): подложка своего цвета, значок в нём же, мягкая тень. Цвет у
   каждого раздела свой и постоянный — по нему раздел узнают, не читая подписи. */
.setlbl-i{display:flex;align-items:center;gap:9px}
.setlbl-i .bi{width:26px;height:26px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--surface-2);color:var(--faint);
  box-shadow:0 1px 2px rgba(16,24,40,.10),0 0 0 1px rgba(16,24,40,.03)}
.setlbl-i .bi svg{width:15px;height:15px;flex:none}
.setlbl-i.i-view .bi{background:#f1e9ff;color:#8b5cf6}
.setlbl-i.i-acc  .bi{background:#e9edff;color:#4c6fff}
.setlbl-i.i-sec  .bi{background:#e5f7f0;color:#12b5a5}
.setlbl-i.i-bell .bi{background:#fff1e6;color:#f39c3d}
.setlbl-i.i-pay  .bi{background:#e6f3ff;color:#0e86d4}
.setlbl-i.i-sync .bi{background:#eaf6ec;color:#1aa564}
.setlbl-i.i-help .bi{background:#fdeaea;color:#e0574e}
/* Тёмная тема: подложка гасится, цвет значка светлеет — иначе плашка выжигает панель. */
:root.dark .setlbl-i .bi{box-shadow:0 1px 2px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.04)}
:root.dark .setlbl-i.i-view .bi{background:#2a2145;color:#b79cff}
:root.dark .setlbl-i.i-acc  .bi{background:#1d2747;color:#8aa0ff}
:root.dark .setlbl-i.i-sec  .bi{background:#14332e;color:#5ad0bd}
:root.dark .setlbl-i.i-bell .bi{background:#3a2a17;color:#f0b46a}
:root.dark .setlbl-i.i-pay  .bi{background:#14293c;color:#5fb4ea}
:root.dark .setlbl-i.i-sync .bi{background:#152e20;color:#5bc98d}
:root.dark .setlbl-i.i-help .bi{background:#3a1e1e;color:#f0857c}

/* Таблица выбора оповещений в настройках человека (RBDOC-203).
   Сетка, а не список строк: галок в строке столько, сколько способов доставки настроено в
   контуре (в контуре без почты столбец один), и колонки обязаны стоять друг под другом —
   иначе человек не поймёт, какая галка к какому столбцу относится. Число колонок приходит
   переменной --optscols из кода: вписать его сюда числом значило бы, что при выключенной
   почте таблица разъезжается. */
/* ⚠️ КОЛОНКА ШИРИНОЙ 52 px ОБРЕЗАЛА ЗАГОЛОВОК. Таблица рисовалась в узкой панели настроек,
   и колонки были подогнаны под неё: «На рабочем столе» переносилось в три строки, а «Письмом»
   уходило за правый край. Теперь таблица живёт в окне (620 px), и колонке можно дать столько,
   сколько нужно самому длинному заголовку в одну строку. */
.optsgrid{display:grid;grid-template-columns:1fr repeat(var(--optscols,2),118px);align-items:center;
  margin-top:6px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.optshead{display:contents}
.optshead>span{padding:10px 8px;font-size:11.5px;color:var(--muted);text-align:center;
  white-space:nowrap;border-bottom:1px solid var(--line);background:var(--surface-2)}
.optshead>span:first-child{text-align:left;padding-left:12px}
.optsgrp{grid-column:1/-1;padding:8px 12px 4px;font-size:11.5px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em}
.optsrow{display:contents}
/* Свёрнутая группа. display:contents у строки означает, что её собственный display правит
   раскладку сетки, и обычного [hidden] мало: правило автора перебивает браузерное, и
   спрятанная строка продолжала бы стоять в таблице. */
.optsrow[hidden]{display:none}
/* Заголовок группы — кнопка во всю ширину: по нему и нажимают, поэтому он обязан выглядеть
   нажимаемым и попадать под палец, а не быть подписью со стрелкой рядом. */
.optsgrp-b{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;
  cursor:pointer;text-align:left;padding:9px 12px;border-radius:8px}
.optsgrp-b:hover{background:var(--surface-2)}
.optsgrp-n{flex:1;text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink)}
.optsgrp-c{font-size:11.5px;font-weight:500;color:var(--faint);text-transform:none;letter-spacing:0}
.optsarr{display:inline-flex;color:var(--faint);transition:transform .15s}
.optsarr svg{width:14px;height:14px}
.optsgrp-b.open .optsarr{transform:rotate(90deg)}
.optsk{padding:7px 12px;font-size:13.5px;color:var(--ink)}
.optscell{display:flex;align-items:center;justify-content:center;padding:7px 6px;cursor:pointer}
.optscell input{margin:0;cursor:pointer}

/* Сеанс в списке: слева где и когда, справа «Закрыть». Строкой, а не карточкой: сеансов
   единицы, и карточка на каждый превратила бы короткий список в простыню. */
.sess-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.sess-row:last-of-type{border-bottom:0}
.sess-main{flex:1;min-width:0}
.sess-t{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px}
.sess-now{background:var(--accent-soft);color:var(--accent-ink);border-radius:100px;
  padding:1px 8px;font-size:11px;font-weight:700}

/* «Всегда» вместо галки: вид есть, выключателя у него нет. Словом, а не серой галкой —
   серая галка читается как «выключено», то есть как решение человека, которого он не принимал. */
.opts-always{font-size:11px;font-weight:700;color:var(--faint);letter-spacing:.02em}

/* Разметка .md — показ заметки в карточке и в просмотрщике. Стили здесь, а не в разборе:
   разбор строит узлы и о внешнем виде не знает ничего, иначе он же стал бы вторым местом,
   где живёт оформление. */
.mdbody{line-height:1.6;font-size:14px;color:var(--text);word-wrap:break-word}
.mdbody h1,.mdbody h2,.mdbody h3,.mdbody h4,.mdbody h5,.mdbody h6{margin:18px 0 8px;line-height:1.25;font-weight:650}
.mdbody h1{font-size:22px}.mdbody h2{font-size:19px}.mdbody h3{font-size:16px}
.mdbody h4,.mdbody h5,.mdbody h6{font-size:14px;color:var(--faint)}
.mdbody p{margin:8px 0}
.mdbody ul,.mdbody ol{margin:8px 0;padding-left:22px}
.mdbody li{margin:3px 0}
.mdbody li>ul,.mdbody li>ol{margin:3px 0}
.mdbody blockquote{margin:10px 0;padding:2px 0 2px 12px;border-left:3px solid var(--line);color:var(--faint)}
.mdbody hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.mdbody code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--surface-2);border-radius:4px;padding:1px 5px}
.mdbody pre.mdcode{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;overflow:auto;margin:10px 0}
.mdbody pre.mdcode code{background:none;padding:0;font-size:12.5px;line-height:1.5}
.mdbody table.mdtable{border-collapse:collapse;margin:10px 0;font-size:13px;display:block;overflow-x:auto}
.mdbody table.mdtable th,.mdbody table.mdtable td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.mdbody table.mdtable th{background:var(--surface-2);font-weight:600}
.mdbody a{color:var(--accent);text-decoration:none}
.mdbody a:hover{text-decoration:underline}
/* В просмотрщике разметка живёт на той же сцене, что и <pre class="vtext">, и повторяет её
   рамки: иначе заметка растянулась бы во всю ширину экрана и стала нечитаемой. */
.viewer .vtext.mdbody{white-space:normal;text-align:left}
.viewer .vmd{font-size:12px;padding:0 10px}
/* Полный экран: значок такой же, как у соседей по панели просмотрщика. */
.viewer .vfull svg{width:17px;height:17px}
/* В настоящем полном экране оверлей уже занимает весь экран сам; фон делаем плотнее —
   рядом больше нет ни вкладок, ни страницы, и полупрозрачность не за чем просвечивать. */
.viewer:fullscreen{background:#0b0d12}
.viewer:-webkit-full-screen{background:#0b0d12}

/* Справочник шаблонов документов: просмотр без изменений. */
.template-page{padding:24px 28px;overflow:auto;min-width:0;max-width:1200px}
.template-intro{font-size:15px;line-height:1.6;max-width:880px;margin:0 0 10px}
.template-edition{font-size:12px;line-height:1.55;max-width:880px}
.template-filters{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:24px 0 16px}
.template-filters label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600}
.template-filters select{min-height:38px;max-width:360px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:var(--surface);color:inherit}
.template-list{display:grid;gap:8px}
.template-row{display:flex;align-items:center;gap:16px;text-align:left;width:100%;border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--surface);color:inherit;cursor:pointer;font:inherit}
.template-row:hover,.template-row:focus-visible{border-color:var(--accent);outline:2px solid transparent;background:var(--surface-2)}
.template-number{width:35px;flex-shrink:0;font-size:20px;font-variant-numeric:tabular-nums;color:var(--muted)}
.template-row-content{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.template-row-content strong{font-size:14px;line-height:1.4}
.template-row-content .muted{font-size:12px;line-height:1.4}
.template-source-state{font-size:11px;color:var(--muted)}
.template-source-state.unknown{color:#ad6413}
.template-arrow{font-size:22px}
.template-detail-head{margin:20px 0}
.template-detail-head h1{font-size:25px;line-height:1.3;margin:8px 0 14px}
.template-page h2{font-size:17px;margin:28px 0 12px}
.template-page h3{font-size:14px}
.template-note{border-left:3px solid var(--accent);padding:10px 14px;background:var(--surface-2);line-height:1.6;font-size:13px}
.template-sections{list-style:none;padding:0;line-height:1.65;font-size:13px}
.template-sections li{padding:5px 0 5px calc((var(--level) - 1)*20px)}
.template-sections li.primary{font-weight:600;margin-top:8px}
.template-tables details,.template-relations article,.template-variant{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:10px 0;font-size:13px;line-height:1.55}
.template-source{font-size:12px;margin:12px 0;color:var(--muted)}
.template-source summary,.template-tables summary{cursor:pointer;overflow-wrap:anywhere}
.template-source-hash,.template-source li{overflow-wrap:anywhere;font-size:11px}
.template-page a{color:var(--accent)}
@media(max-width:700px){.template-page{padding:18px 14px}.template-row{gap:10px;padding:12px}.template-filters{align-items:stretch}.template-filters label{flex:1;min-width:180px}.template-filters select{width:100%}}

.template-source-name{display:block;color:var(--ink);font-size:12px;overflow-wrap:anywhere}
.template-source-data{margin-top:8px;padding:0}
.template-source-data summary{font-size:11px}

/* Компактный реестр: метаданные в одной строке, происхождение — в карточке. */
.template-filters{align-items:center;gap:12px;flex-wrap:nowrap;margin:0 0 8px}
.template-filters label{flex-direction:row;align-items:center;gap:7px;min-width:0}
.template-filters select{min-height:34px;max-width:240px;min-width:0;padding:5px 9px}
.template-filters [role=status]{white-space:nowrap;margin-left:auto;font-size:12px}
.template-edition.compact{font-size:11px;margin:0 0 12px}
.template-list{gap:4px}
.template-row{height:56px;min-height:56px;padding:8px 12px;gap:12px;border-radius:7px}
.template-number{width:26px;font-size:13px;font-weight:600}
.template-row-content{flex-direction:row;align-items:center;gap:12px}
.template-row-content strong{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.template-row-meta{display:flex;align-items:center;gap:14px;min-width:0;max-width:45%}
.template-row-code,.template-row-format{flex:none;white-space:nowrap}
.template-row-stage{min-width:0;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.template-source-state.unknown{flex:none;font-size:10px;white-space:nowrap;border:1px solid #ead9bd;border-radius:5px;padding:2px 5px}
.template-arrow{font-size:18px}
.template-section-tree,.template-section-children{list-style:none;margin:0;padding:0}
.template-section-tree > li{border-bottom:1px solid var(--line)}
.template-sections li,.template-sections li.primary{padding:0;margin:0}
.template-section-tree summary,.template-section-leaf{display:flex;align-items:baseline;gap:10px;padding:10px 8px;cursor:pointer}
.template-section-tree summary{list-style:none}
.template-section-tree summary::before{content:'›';color:var(--muted);width:10px;flex:none;transition:transform .12s}
.template-section-tree details[open] > summary::before{transform:rotate(90deg)}
.template-section-leaf{padding-left:28px;cursor:default}
.template-section-number{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;flex:none}
.template-block-kind{color:var(--muted);font-size:11px;flex:none;letter-spacing:.03em;text-transform:uppercase}
.template-section-title{min-width:0;overflow-wrap:anywhere}
.template-section-count{margin-left:auto;color:var(--faint);font-size:11px;font-weight:400}
.template-section-children{margin:0 0 6px 17px;border-left:1px solid var(--line2);font-weight:400}
@media(max-width:1000px){.template-row-stage{display:none}.template-filter-label{display:none}}
@media(max-width:700px){
 .template-filters{gap:6px;flex-wrap:wrap}
 .template-filters label{min-width:0;flex:1}
 .template-filters select{width:100%;max-width:none}
 .template-filters [role=status]{margin-left:0}
 .template-row{gap:8px;padding:7px 9px}
 .template-row-content{flex-direction:column;align-items:stretch;gap:2px}
 .template-row-meta{max-width:100%;gap:8px}
 .template-row-content strong{flex:none}
 .template-source-state.unknown{max-width:115px;font-size:9px}
}

.template-catalog-note{font-size:11px;color:var(--muted);margin:0 0 10px;line-height:1.5}
.template-catalog-note summary{cursor:pointer}
.template-catalog-note p{max-width:880px;margin:7px 0}

/* Размер SVG не зависит от скрытого текстового названия компактной кнопки. */
.top .header-icon-action > svg{width:16px;height:16px;font-size:16px;flex:none}
.template-download-action{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 18px}
.template-download-status{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.template-download[disabled]{opacity:.65;cursor:wait}

/* Дерево разделов и пояснение выбранного блока читаются рядом без длинной ленты подсказок. */
.template-structure-workspace{display:grid;grid-template-columns:minmax(240px,2fr) minmax(300px,3fr);gap:20px;align-items:start;margin:16px 0 28px}
.template-structure-nav{min-width:0;max-height:66vh;overflow:auto;overscroll-behavior:contain;padding-right:8px}
.template-structure-nav .template-section-tree{margin-top:0}
.template-section-select{display:flex;align-items:baseline;gap:9px;min-width:0;width:100%;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;padding:7px 8px;border-radius:7px;overflow-wrap:anywhere}
.template-section-select:hover{background:var(--surface-2)}
.template-section-select[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.template-structure-nav summary .template-section-select{display:inline-flex;width:calc(100% - 46px);vertical-align:top}
.template-structure-nav .template-section-leaf{padding:0}
.template-other-guidance{border-top:1px solid var(--line2);margin-top:16px;padding-top:8px}
.template-other-guidance h3{font-size:13px;color:var(--muted)}
.template-block-panel{min-width:0;border:1px solid var(--line2);border-radius:12px;padding:20px;background:var(--surface);position:sticky;top:calc(var(--app-header-height,60px) + 16px);max-height:calc(100vh - var(--app-header-height,60px) - 40px);overflow:auto;overscroll-behavior:contain}
.template-block-panel h3{margin:0 0 16px;font-size:18px;line-height:1.4}
.template-guidance-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line2);margin-bottom:16px}
.template-guidance-tabs button{border:0;border-bottom:2px solid transparent;padding:10px 12px;background:transparent;font:inherit;cursor:pointer;color:var(--muted)}
.template-guidance-tabs button[aria-selected=true]{border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.template-guidance-content{line-height:1.6;outline-offset:4px;overflow-wrap:anywhere}
.template-obligation{font-size:12px;font-weight:600;color:var(--muted);margin:0 0 8px}
.template-guidance-description{font-size:15px}
.template-guidance-note,.template-relation-note{padding:10px 12px;border-left:3px solid var(--accent);background:var(--surface-2);font-size:13px;line-height:1.55}
.template-guidance-evidence{margin-top:16px;font-size:13px}
.template-relation-group{margin:18px 0 26px}
.template-relation-group>h3{font-size:15px;margin-bottom:10px}
.template-relation-card{border:1px solid var(--line2);border-radius:9px;padding:14px 16px;margin:10px 0;overflow-wrap:anywhere}
.template-relation-statement{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 12px;font-size:14px;line-height:1.5}
.template-relation-label{font-size:12px;color:var(--muted);font-weight:500}
.template-relation-node small{display:block;font-size:11px;color:var(--muted)}
.template-relation-targets{margin:0;padding-left:18px}
.template-relation-modality{font-size:13px;color:var(--muted)}
.template-relation-conditions{font-size:13px;line-height:1.5}
.template-relation-conditions ul{margin:5px 0;padding-left:20px}
.template-relation-evidence{font-size:12px;margin-top:10px}
@media(max-width:1100px){.template-structure-workspace{grid-template-columns:1fr}.template-structure-nav{max-height:40vh}.template-block-panel{position:static;max-height:none}.template-guidance-tabs button{flex:1;padding:10px 6px}}

/* Высоту шапки уже учитывает scroll-padding-top у html. */
.template-block-panel{scroll-margin-top:16px}

/* Плотная карточка: название и действие рядом, подробные сведения раскрываются по запросу. */
.template-detail-page{padding:12px 20px}
.template-back{padding:2px 0;background:transparent;color:var(--muted);font-size:12px;border-radius:0}
.template-back:hover{color:var(--accent);filter:none}
.template-detail-page .template-detail-head{margin:8px 0}
.template-detail-title-row{display:flex;align-items:center;gap:12px}
.template-detail-page .template-detail-head h1{flex:1;min-width:0;font-size:22px;line-height:1.2;margin:0}
.template-detail-title-row .template-download-action{flex:none;margin:0;gap:8px}
.template-detail-title-row .template-download{padding:7px 11px;font-size:12px;white-space:nowrap}
.template-download-status:empty{display:none}
.template-detail-meta{color:var(--muted);font-size:12px;line-height:1.5;margin:6px 0 0}
.template-card-information{font-size:12px;color:var(--muted);margin:8px 0}
.template-card-information p{margin:8px 0;line-height:1.5}
.template-detail-page h2{font-size:16px;margin:12px 0 8px}
.template-detail-page .template-structure-workspace{gap:12px;margin:8px 0 16px}
.template-detail-page .template-block-panel{padding:12px}
.template-detail-page .template-block-panel h3{font-size:16px;margin:0 0 10px}
.template-detail-page .template-guidance-tabs{margin-bottom:10px}
.template-detail-page .template-guidance-tabs button{padding:7px 10px;font-size:13px}
.template-detail-page .template-guidance-description{font-size:14px;margin:8px 0}
.template-child-guidance-label{font-size:12px;margin:6px 0}
.template-guided-descendants{list-style:none;padding:0;margin:4px 0}
.template-guided-descendants button{display:block;width:100%;text-align:left;background:transparent;color:var(--accent);padding:7px 0;font-size:13px;border-radius:0;border-bottom:1px solid var(--line)}
.template-card-sources{margin:16px 0;font-size:14px}
.template-card-sources>summary{font-weight:600}
/* Общие заголовки и фиксированные столбцы метаданных выравнивают реестр. */
.template-registry-wrap{overflow-x:auto;max-width:100%;border:1px solid var(--line2);border-radius:9px;background:var(--surface)}
.template-registry{width:100%;min-width:640px;border-collapse:collapse;table-layout:fixed;font-size:13px}
.template-col-number{width:48px}.template-col-code{width:72px}.template-col-format{width:70px}.template-col-stage{width:220px}
.template-registry th{height:38px;padding:7px 10px;text-align:left;font-size:12px;color:var(--muted);font-weight:600;background:var(--surface-2);border-bottom:1px solid var(--line2)}
.template-registry td{height:44px;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.template-registry tbody tr:last-child td{border-bottom:0}
.template-registry tbody tr[data-template-id]{cursor:pointer}
.template-registry tbody tr[data-template-id]:hover{background:var(--surface-2)}
.template-registry tbody tr[data-template-id]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.template-registry-number{font-variant-numeric:tabular-nums;color:var(--muted)}
.template-registry-name{display:flex;align-items:center;gap:8px;min-width:0}
.template-registry-name a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;color:var(--ink);text-decoration:none;font-weight:500}
.template-registry-name a:hover{color:var(--accent)}
.template-registry-name .template-source-state{flex:none;font-size:10px}
.template-registry-stage{font-size:11px;line-height:1.25;color:var(--muted)}
.template-registry-code,.template-registry-format{font-size:12px;color:var(--muted)}
.template-registry-empty{text-align:center}
@media(max-width:700px){.template-detail-page{padding:10px 12px}.template-detail-page .template-detail-head h1{font-size:20px}.template-detail-title-row{align-items:flex-start;gap:8px}.template-detail-title-row .template-download{padding:6px 8px;font-size:11px}.template-detail-title-row .template-download-action{max-width:140px}.template-col-stage{width:180px}}

.template-toolbar .template-download-action{max-width:none}
.template-toolbar .template-download-status{flex-basis:100%}

.template-rules-section{margin:18px 0}
.template-rule-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0}
.template-rule-coverage{border-left:3px solid var(--accent);background:var(--surface-2);padding:8px 12px;font-size:13px}
.template-rule-profile{font-size:12px;color:var(--muted);margin:10px 0;overflow-wrap:anywhere}
.template-rule-cards{border:1px solid var(--line2);border-radius:9px;background:var(--surface);overflow:hidden}
.template-rule-card{padding:10px 12px;border-bottom:1px solid var(--line)}
.template-rule-card:last-child{border-bottom:0}
.template-rule-card>summary{cursor:pointer;line-height:1.5}
.template-rule-card>summary>span:first-child{font-weight:600;margin-right:10px}
.template-rule-card>summary>small{color:var(--muted);margin-right:12px}
.template-rule-availability{font-size:11px;color:var(--muted)}
/* Три состояния правила — три разных вида. Раньше «Требует настройки» выглядело ровно как
   «Включено», хотя значит противоположное: правила в наборе нет и оно не выполняется. */
.template-rule-card.configured .template-rule-availability{color:var(--ink)}
.template-rule-card.unconfigured .template-rule-availability{color:var(--warn)}
.template-rule-card .template-rule-hint{font-size:12px;color:var(--muted);line-height:1.5}
.template-rule-permission{font-size:13px;line-height:1.5;border-left:3px solid var(--accent);background:var(--surface-2);padding:8px 12px}
.template-rule-closed-set{font-size:12px;color:var(--muted);line-height:1.5;margin:8px 0}
.template-validation-rule-note{flex:1 0 100%;font-size:12px;line-height:1.5;margin:0 0 8px}
.template-authoring-denied{font-size:13px;line-height:1.5;margin:8px 0;color:var(--ink)}
.template-edition-current{margin:0 0 20px}
.template-edition-nochange{font-size:13px;line-height:1.55;color:var(--muted);margin:8px 0}
.template-edition-diff{font-size:12px;line-height:1.5;color:var(--muted);margin:6px 0 0}
.template-edition-row{margin:0 0 12px}
.template-versions-limits{font-size:13px;line-height:1.55;border-left:3px solid var(--line2);background:var(--surface-2);padding:8px 12px}
.template-publication-history{display:block;margin:16px 0 0}
.template-publication-history>h2{margin:0 0 8px}
.template-rule-card p{font-size:13px;line-height:1.5}
.template-rule-card pre,.template-rule-source-code{overflow:auto;max-width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:12px;font-size:12px}
.template-rule-source-code{max-height:55vh;line-height:1.5;tab-size:4}
.template-rule-code-sha{font-size:11px;overflow-wrap:anywhere}
.template-rule-code-view{min-width:0}
.template-rule-library{max-height:70vh;overflow:auto}
.template-rule-definition{border-bottom:1px solid var(--line);padding:10px 0;overflow-wrap:anywhere}
.template-rule-definition summary{font-weight:600;cursor:pointer}
.template-rule-definition p{font-size:13px}

/* Окно проверки документа: слева узкая колонка отбора, справа отчёт и история, кнопки — внизу
   справа, там же, где «Закрыть» у самого окна. Прежняя сетка «1fr 2fr» на четыре поля подряд
   ставила «Документ» (самые длинные строки) в узкую колонку, «Редакцию» («Текущая версия») — в
   широкую, а поиск уезжал наверх справа, далеко от списка, к которому он относится. */
.template-validation-form{max-height:78vh;overflow:auto;padding-right:6px}
.template-validation-picker{display:grid;grid-template-columns:1fr;gap:12px}
.template-validation-publication-picker{display:grid;gap:7px;margin-bottom:14px;min-width:0}
.template-validation-publication-picker label{display:grid;gap:7px;font-size:13px;color:var(--muted);min-width:0}
.template-validation-publication-picker select{width:100%;min-width:0;max-width:100%;min-height:38px;border-radius:9px;border:1px solid var(--line2);padding:8px 10px;font-size:14px;background:var(--surface);color:var(--ink)}
.template-validation-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:9px;background:var(--surface);padding:0 10px}
.template-validation-search input{border:0;background:transparent;flex:1;min-width:0;padding:8px 0}
.template-validation-search .bi{color:var(--muted);flex:none}
.template-validation-picker-status{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.template-validation-picker-status:empty{display:none}
.template-validation-upload-row{display:flex;gap:8px;flex-wrap:wrap}
@media(min-width:900px){
 .template-validation-form{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:22px;align-items:start}
 .template-validation-form>.template-validation-actions{grid-column:1/-1}
}
.template-validation-picker label,.template-validation-compare-controls label{display:grid;gap:5px;font-size:12px;color:var(--muted);min-width:0}
.template-validation-rule-options{display:flex;flex-wrap:wrap;gap:9px 16px;border:1px solid var(--line2);border-radius:8px;margin:14px 0;padding:10px}
.template-validation-rule-options legend{font-size:13px;padding:0 6px}
.template-validation-rule-options label{display:flex;align-items:center;gap:6px;font-size:13px}
.template-validation-rule-options input{width:auto}
.template-validation-actions,.template-validation-summary{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}
.template-validation-actions{justify-content:flex-end}
.template-validation-summary span{font-size:12px;background:var(--surface-2);padding:5px 8px;border-radius:5px}
.template-validation-report>h3{font-size:18px;margin-bottom:6px}
.template-validation-report p{font-size:13px;line-height:1.5}
.template-validation-table-wrap{overflow:auto;max-width:100%}
.template-validation-table{width:100%;min-width:540px;border-collapse:collapse;font-size:12px}
.template-validation-table td,.template-validation-table th{border:1px solid var(--line2);padding:9px;text-align:left;vertical-align:top}
.template-validation-table th{background:var(--surface-2)}
.template-validation-table small,.template-validation-comparison small{display:block;color:var(--muted)}
.template-validation-table p{font-size:12px;margin:6px 0}
.template-validation-findings{padding-left:16px;overflow-wrap:anywhere}
.template-validation-findings details{font-size:11px;color:var(--muted);margin:5px 0}
.template-validation-identity{font-size:12px;margin:14px 0;overflow-wrap:anywhere}
.template-validation-missing{margin:12px 0;font-size:13px}
.template-validation-history{border-top:1px solid var(--line2);margin-top:18px;padding-top:8px}
/* Пустая история рисовала отбивку — черту, под которой ничего нет. Это читается как оборванный
   экран, а не как «отчётов пока не было». */
.template-validation-history:empty{display:none}
.template-validation-history-list{padding:0;list-style:none}
.template-validation-history-list li{margin:6px 0;display:flex;flex-wrap:wrap;gap:6px}
.template-validation-history-list button{text-align:left;max-width:100%}
.template-validation-compare-controls{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:8px}
.template-validation-comparison{font-size:13px;overflow-wrap:anywhere}
.template-validation-comparison details{margin:10px 0}
.template-detail-title-row .template-validate{font-size:12px;padding:7px 11px;white-space:nowrap}
@media(max-width:700px){.template-validation-picker,.template-validation-compare-controls{grid-template-columns:1fr}.template-validation-form{max-height:75vh}.template-rule-code-view select{max-width:100%}}

.template-validation-error{color:var(--warn);font-size:13px;overflow-wrap:anywhere}
.template-validation-error:empty{display:none}

.template-validation-report p,.template-validation-identity code{overflow-wrap:anywhere}

/* Шаблоны: панели, типографика и line-SVG по общей системе интерфейса диска. */
.template-page{max-width:none;padding:22px 28px;font-size:14.5px}
.template-page> :not(.template-record-card){max-width:1340px}
.template-detail-page{padding:20px 28px}
.template-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:1.5;padding:4px 0;margin:0 0 12px}
.template-record-card{width:100%;max-width:1340px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:clip}
.template-record-card .template-detail-head{margin:0;padding:20px 24px 16px}
.template-record-card .template-detail-title-row{gap:14px;align-items:center;flex-wrap:wrap}
.template-title-icon{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:12px;background:var(--accent-soft);color:#fff}
.template-title-icon svg{width:22px;height:22px;display:block}
.template-record-card .template-detail-head h1{font-size:23px;line-height:1.3;font-weight:650;margin:0;flex:1;min-width:180px;color:var(--ink)}
.template-record-card .template-detail-meta{font-size:13px;line-height:1.5;margin:8px 0 0;color:var(--muted)}
.template-record-card .template-card-information{margin:10px 0 0;font-size:13px;line-height:1.5}
.template-record-card button{font-size:14px;line-height:1.4}
.template-record-card .template-download,.template-record-card .template-validate{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 12px;font-size:14px;border-radius:9px;white-space:nowrap}
.template-record-card button>svg,.template-record-tabs button>svg,.template-rule-toolbar button>svg,.template-validation-actions button>svg{width:17px;height:17px;flex:none}
.template-record-card .template-download{background:var(--surface);color:var(--ink);border:1px solid var(--line2)}
.template-record-card .template-download:hover{color:var(--accent);border-color:var(--accent)}
.template-record-card .template-download-action{margin:0;gap:8px}
.template-record-card .template-download-status{font-size:13px;line-height:1.45}
.template-record-tabs{display:flex;align-items:center;gap:6px;padding:0 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line2);background:var(--surface)}
.template-record-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 16px;border-radius:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap}
.template-record-tabs button:hover{color:var(--ink);background:var(--surface-2);filter:none}
.template-record-tabs button[aria-selected=true]{color:var(--accent-ink);border-bottom-color:var(--accent);background:var(--surface)}
.template-record-panel{padding:20px 24px 24px;min-width:0}
.template-record-panel[hidden]{display:none!important}
/* Панель инструментов карточки: своя строка во всю ширину, кнопки в ряд. Перенос — только
   когда строка правда не помещается, а не из-за ограничения ширины, как было. */
.template-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.template-toolbar .template-download-action{margin:0;gap:10px;flex-wrap:wrap}
/* Постоянные действия над документом видны из каждого раздела карточки. Причина
   недоступности стоит рядом с выключенной кнопкой и доступна без наведения. */
.template-detail-head .template-toolbar{align-items:stretch;flex-direction:column;gap:14px}
.template-primary-actions{display:grid;grid-template-columns:repeat(2,minmax(210px,1fr));gap:12px 24px;max-width:880px;width:100%}
.template-primary-action{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.template-primary-action>.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 15px;border-radius:9px;font-size:14px}
.template-primary-action>.btn>svg{width:17px;height:17px;flex:none}
.template-primary-explanation{font-size:12px;line-height:1.5;margin:0;max-width:52ch;overflow-wrap:anywhere}
.template-detail-head .template-check-action{padding:0;margin:0;border:0;background:none;border-radius:0}
.template-secondary-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.template-secondary-actions .template-download-missing{margin:0;font-size:12px}
.template-detail-page .template-record-tabs{overflow-x:auto}
.template-detail-page .template-record-tabs button{flex-shrink:0;min-width:max-content}
.template-attributes-intro{margin:0 0 20px;line-height:1.6;max-width:85ch}
@media(max-width:640px){.template-primary-actions{grid-template-columns:1fr;gap:16px}.template-primary-action>.btn{width:100%}.template-secondary-actions{gap:8px}.template-record-tabs button{padding-inline:12px}}
/* Вкладка «Описание»: ведущий абзац, признаки, плитки чисел и даты. */
.template-about h2{font-size:15px;margin:18px 0 8px}
.template-about h2:first-child{margin-top:0}
/* Описание бланка пишет автор, в несколько строк: переводы строк сохраняются, длинное слово
   переносится, а не распирает вкладку. */
.template-about-lead{font-size:14px;line-height:1.6;margin:0 0 4px;max-width:70ch;white-space:pre-line;overflow-wrap:anywhere}
.template-about-empty{margin:0 0 4px}
.template-about-edit{margin:6px 0 0}
/* Признаки бланка — обычный текст одной строкой через « · ». Рамки, фона и скругления нет
   намеренно: «пилюлями» они выглядели метками, которые можно снять или поставить. */
.template-about-facts{margin:8px 0 0;font-size:12px;line-height:1.6;color:var(--muted);max-width:70ch}
.template-about-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}
.template-about-stats li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.template-about-stats li strong{font-size:20px;font-weight:600;line-height:1.1}
.template-about-stats li span{font-size:12px;color:var(--muted)}
.template-about-dates{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px}
.template-about-dates li{display:flex;flex-direction:column;gap:2px}
.template-about-dates li span{font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.template-about-dates li strong{font-size:13px;font-weight:600}
@media(max-width:640px){.template-about-stats{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}.template-toolbar{gap:8px}}
/* Сводка в шапке карточки шаблона: несколько фактов в строку, переносом на узком экране.
   Список, а не абзац: пары «подпись — значение» читаются и голосом, и глазами. */
.template-summary-strip{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:10px 0 0;padding:0}
.template-summary-strip li{display:flex;flex-direction:column;gap:2px;min-width:0}
.template-summary-strip li span{font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.template-summary-strip li strong{font-size:13px;font-weight:600;overflow-wrap:anywhere}
/* Запуск проверки — первым в своей вкладке, отделён от таблицы. На месте кнопки может
   стоять причина отказа, поэтому отступ задаётся контейнеру, а не кнопке. */
.template-check-action{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.template-check-action p{margin:0;line-height:1.5}
.template-check-action .hactions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* Отметка «проверка шла по другому шаблону» обязана читаться как оговорка к зелёному
   «Пройдено», а не теряться рядом с ним. */
.template-run-foreign{color:var(--warn,#a2601b);overflow-wrap:anywhere}
.template-documents-section td small{display:inline-block;margin-left:2px}
.template-scripts-section .template-rule-definition{margin:6px 0}
@media(max-width:640px){.template-summary-strip{gap:6px 14px}.template-check-action{padding:10px 12px}}
.template-record-panel>h2:first-child{margin-top:0}
.template-record-panel h2,.template-rules-section>h2{font-size:17px;line-height:1.4;font-weight:650;margin:18px 0 12px}
.template-record-panel h3{font-size:15px;line-height:1.45}
.template-record-panel .template-structure-workspace{grid-template-columns:minmax(245px,0.85fr) minmax(320px,1.45fr);gap:20px;margin:0;align-items:start}
.template-record-panel .template-structure-nav{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:8px;max-height:64vh}
.template-record-panel .template-section-tree>li{border-bottom-color:var(--line2)}
.template-record-panel .template-section-tree>li:last-child{border-bottom:0}
.template-record-panel .template-section-select{font-size:14px;line-height:1.5;padding:8px}
.template-record-panel .template-section-number{font-size:12px}
.template-record-panel .template-section-title{font-size:14px}
.template-record-panel .template-section-tree summary{padding:4px 0;align-items:center}
.template-record-panel .template-section-leaf{padding-left:16px}
.template-record-panel .template-block-panel{padding:18px 20px;border:1px solid var(--line2);border-radius:12px;box-shadow:none;top:calc(var(--app-header-height,60px) + 16px)}
.template-record-panel .template-block-panel h3{font-size:17px;line-height:1.4;margin:0 0 14px}
.template-record-panel .template-guidance-tabs{margin-bottom:14px}
.template-record-panel .template-guidance-tabs button{font-size:14px;padding:9px 12px}
.template-record-panel .template-guidance-description{font-size:14.5px;line-height:1.65;margin:10px 0}
.template-record-panel .template-obligation{font-size:12px;line-height:1.5}
.template-record-panel .template-guidance-note,.template-record-panel .template-relation-note{font-size:13px;line-height:1.6;border-radius:0 8px 8px 0}
.template-record-panel .template-guided-descendants button{font-size:14px;line-height:1.5;padding:10px 0}
.template-record-panel .template-tables{margin-top:18px}
.template-record-panel .template-tables details{padding:12px 14px;margin:8px 0;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;font-size:13px}
.template-record-panel .template-tables summary{line-height:1.6}
.template-record-panel .template-source,.template-record-panel .template-source-name{font-size:13px;line-height:1.5}
.template-record-panel .template-card-sources{padding:14px 16px;border:1px solid var(--line2);border-radius:12px}
.template-record-panel .template-relation-card{padding:16px;border-radius:12px;border-color:var(--line);background:var(--surface-2);margin:8px 0}
.template-record-panel .template-relation-statement{font-size:14px;gap:8px 12px}
.template-record-panel .template-relation-node small{font-size:12px;margin-top:3px}
.template-record-panel .template-relation-conditions,.template-record-panel .template-relation-modality{font-size:13px;line-height:1.6}
.template-filters{gap:14px;margin:0 0 16px;align-items:center}
.template-filters label{font-size:13px;gap:8px}
.template-filters select{min-height:36px;font-size:13px;border:1px solid var(--line2);border-radius:9px}
.template-registry-wrap{max-width:1340px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.template-registry{font-size:14px;min-width:720px}
.template-registry th{height:40px;font-size:12px;padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--line2)}
.template-registry td{height:48px;padding:8px 12px}
.template-col-number{width:48px}.template-col-code{width:78px}.template-col-format{width:82px}.template-col-stage{width:240px}
.template-registry-name{gap:10px;min-height:30px}
.template-registry-name a{font-size:14px;font-weight:550;line-height:1.4}
.template-registry-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border-radius:8px;color:#fff;background:var(--accent-soft)}
.template-registry-icon svg{width:17px;height:17px;display:block}
.template-registry-stage,.template-registry-code,.template-registry-format{font-size:12px;line-height:1.5}
.template-rules-section{margin:0}
.template-rule-toolbar{gap:8px;margin:0 0 16px;align-items:center}
.template-rule-toolbar button,.template-validation-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 12px;border-radius:9px;font-size:14px}
.template-rule-coverage{padding:10px 14px;margin:12px 0;border-radius:0 9px 9px 0;font-size:13px;line-height:1.55}
.template-rule-profile{font-size:12px;line-height:1.5;margin:10px 0 16px}
.template-rule-cards{border:1px solid var(--line2);border-radius:12px;background:var(--surface)}
.template-rule-card{padding:14px 16px}
.template-rule-card>summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none;font-size:14px}
.template-rule-card>summary::-webkit-details-marker{display:none}
.template-rule-card>summary:before{content:"›";display:inline-block;width:12px;color:var(--muted);font-size:18px;line-height:1;flex:none}
.template-rule-card[open]>summary:before{transform:rotate(90deg)}
.template-rule-card>summary>span:first-child{font-weight:650;margin-right:0}
.template-rule-card>summary>small{font-size:12px;margin-right:0}
.template-rule-availability{font-size:12px;line-height:1.4;background:var(--surface-2);border:1px solid var(--line);padding:3px 7px;border-radius:6px}
.template-rule-card.unconfigured .template-rule-availability{border-style:dashed;border-color:currentColor;background:transparent}
.template-rule-card .template-rule-hint{font-size:13px;line-height:1.6;margin:10px 0 0}
.template-rule-permission{font-size:14px;line-height:1.6;padding:10px 14px;margin:12px 0;border-radius:0 9px 9px 0}
.template-rule-closed-set{font-size:13px;line-height:1.6;margin:12px 0}
/* Настройка правила — в карточке самого правила. Отделена линией от описания: это не рассказ
   о проверке, а её органы управления, и путать их нельзя. */
.template-rule-settings{border-top:1px solid var(--line);margin:14px 0 0;padding:14px 0 0}
.template-rule-settings h4{font-size:14px;font-weight:650;line-height:1.5;margin:0 0 8px}
.template-rule-state{font-weight:600}
.template-rule-params{max-height:32vh}
.template-rule-form{display:grid;gap:2px;margin:12px 0 0}
.template-rule-form label{display:grid;gap:7px;font-size:13px;color:var(--muted);margin:12px 0}
.template-rule-switch{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:14px}
.template-rule-switch input{width:18px;height:18px;flex:none;accent-color:var(--accent)}
.template-rule-title{width:100%;min-height:36px;padding:8px 12px;border:1px solid var(--line2);border-radius:9px;background:var(--surface-2);color:var(--ink);font-size:14px}
.template-rule-editor{display:block;width:100%;min-height:150px;max-height:40vh;resize:vertical;font-family:var(--mono);font-size:13px;line-height:1.65;tab-size:2;background:var(--surface-2);color:var(--ink);padding:14px;border:1px solid var(--line2);border-radius:10px;white-space:pre}
.template-rule-editor:focus,.template-rule-title:focus{outline:2px solid var(--accent);outline-offset:2px}
/* Куда уходит правка и когда она подействует — врезкой, а не мелким серым: щёлкнуть переключателем
   и не увидеть перемен в каталоге читается как поломка. */
.template-rule-scope-note{font-size:13px;line-height:1.6;border-left:3px solid var(--warn);background:var(--surface-2);padding:10px 14px;margin:12px 0;border-radius:0 9px 9px 0}
.template-rule-status{font-size:13px;line-height:1.6;color:var(--muted)}
/* «Правила изменены, но ещё не действуют» — врезкой над разделом, тем же видом, что пояснение о
   том, когда подействует правка: это одно и то же сообщение, сказанное для всего набора. Кнопка
   «Применить» стоит в самой врезке, рядом с тем, к чему относится. */
.template-rules-pending{display:grid;gap:6px;justify-items:start;border-left:3px solid var(--warn);background:var(--surface-2);padding:10px 14px;margin:0 0 12px;border-radius:0 9px 9px 0}
.template-rules-pending p{margin:0;font-size:13px;line-height:1.6}
.template-rules-pending-title{font-weight:600}
.template-rules-apply{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:8px 12px;border-radius:9px;font-size:14px}
.template-rules-apply-body p{margin:0 0 10px;font-size:13.5px;line-height:1.5}
.template-rules-apply-consent-row{display:flex;align-items:flex-start;gap:9px;margin:0 0 10px;font-size:13.5px;line-height:1.5}
.template-rules-apply-consent-row input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--accent)}
/* «Добавить правило»: кнопка под списком правил и окно. Серые правила и таблицы — приглушённым
   текстом без рамок: это сведения «почему нельзя», а не кнопки. Выбранное правило подсвечено, чтобы
   было видно, чья форма ниже. */
.template-rule-add-row,.template-rule-workbench-add-row{margin:12px 0 0}
.template-rule-add-list{display:grid;gap:6px;margin:0 0 12px}
.template-rule-add-item{margin:0;font-size:13.5px;line-height:1.5}
.template-rule-add-off,.template-rule-add-table-off{color:var(--muted);margin:0;font-size:13px;line-height:1.5}
.template-rule-add-name{font-weight:600}
.template-rule-add-choice[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent)}
.template-rule-add-form{display:grid;gap:6px;margin:0 0 10px}
.template-rule-add-form p{margin:4px 0 0;font-size:13.5px}
.template-rule-add-check{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.5}
.template-rule-add-check input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--accent)}
.template-rule-add-field{display:grid;gap:4px;font-size:13.5px}
.template-rule-add-field input,.template-rule-add-table{width:100%;max-width:100%}
.template-rule-add-columns{display:grid;gap:4px}
.template-rule-add-warn{color:var(--warn);font-size:12.5px;line-height:1.5}
.template-rule-add-check .template-rule-add-warn{margin-left:6px}
.template-rule-add-sverka{margin:4px 0 0;font-size:12.5px}
.template-summary-strip li.template-summary-pending strong{color:var(--warn)}
.template-rule-edit,.template-rule-save{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 12px;border-radius:9px;font-size:14px}
.template-rule-evidence{font-size:13px;line-height:1.6;margin:12px 0 0}
.template-rule-evidence>summary{cursor:pointer}
/* Читателю показывается pre, а не запертая textarea: у [readonly] в этих стилях нет ни одного
   правила, и запертое поле неотличимо от рабочего. */
.template-config-field{margin:12px 0}
.template-config-view{max-height:52vh;overflow:auto;background:var(--surface-2);border:1px solid var(--line2);border-radius:12px;padding:16px;font-family:var(--mono);font-size:13px;line-height:1.65;tab-size:2;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:700px){.template-rule-editor{min-height:120px;font-size:12px;padding:12px}.template-rule-edit,.template-rule-save{width:100%}.template-config-view{padding:12px;font-size:12px}}
.template-versions-limits{font-size:14px;line-height:1.6;padding:10px 14px;margin:14px 0;border-radius:0 9px 9px 0}
.template-authoring-denied{font-size:14px;line-height:1.6;margin:12px 0}
.template-rule-card p,.template-rule-definition p{font-size:14px;line-height:1.6;margin:12px 0}
.template-rule-card pre,.template-rule-source-code{font-family:var(--mono);font-size:12.5px;line-height:1.65;border-radius:10px;padding:14px 16px;border-color:var(--line2)}
.template-rule-code-view select{min-height:36px;font-size:13px}
.template-rule-definition{padding:14px 0}
.template-rule-definition summary{font-size:14px;line-height:1.5}
.template-validation-form{font-size:14px;line-height:1.5}
.template-validation-picker{grid-template-columns:1fr;gap:14px}
.template-validation-picker label,.template-validation-compare-controls label{font-size:13px;gap:7px}
.template-validation-picker input,.template-validation-picker select,.template-validation-compare-controls select{min-height:38px;border-radius:9px;border:1px solid var(--line2);font-size:14px;background:var(--surface);color:var(--ink);padding:8px 10px;max-width:100%}
.template-validation-picker .template-validation-search input{min-height:36px;border:0;border-radius:0;padding:8px 0}
.template-validation-picker-status{font-size:13px;line-height:1.55}
.template-validation-upload{min-height:36px}
.template-validation-rule-options{gap:10px 18px;margin:16px 0;padding:12px 14px;border-radius:10px;background:var(--surface-2)}
.template-validation-rule-options label{font-size:14px;line-height:1.5}
.template-validation-rule-options input{width:16px;height:16px;accent-color:var(--accent)}
.template-validation-summary{gap:8px;margin:14px 0}
.template-validation-summary span{font-size:13px;line-height:1.5;padding:7px 10px;border:1px solid var(--line);border-radius:8px}
.template-validation-report>h3{font-size:19px;line-height:1.4;margin:16px 0 8px}
.template-validation-report p{font-size:14px;line-height:1.6}
.template-validation-table-wrap{border:1px solid var(--line2);border-radius:12px;background:var(--surface)}
.template-validation-table{font-size:13px;min-width:620px}
.template-validation-table td,.template-validation-table th{border:0;border-bottom:1px solid var(--line);padding:12px 14px;line-height:1.5}
.template-validation-table th{font-size:12px;font-weight:600;color:var(--muted);background:var(--surface-2)}
.template-validation-table tbody tr:last-child td{border-bottom:0}
.template-validation-table p{font-size:13px;line-height:1.6}
.template-validation-findings{margin:8px 0;padding-left:18px}
.template-validation-history{margin-top:22px;padding-top:16px}
.template-validation-history-list li{margin:8px 0}
.template-validation-history-list button{border:1px solid var(--line2);border-radius:10px;background:var(--surface);color:var(--ink);min-height:38px;padding:9px 12px;font-size:13px}
.template-validation-history-list button:hover{border-color:var(--accent);color:var(--accent-ink)}
.template-validation-comparison{font-size:14px;line-height:1.6}
.template-validation-error{font-size:13px;line-height:1.6}
.template-record-card button:focus-visible,.template-registry a:focus-visible,.template-validation-form button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:1100px){
 .template-page,.template-detail-page{padding:18px}
 .template-record-panel{padding:18px}
 .template-record-panel .template-structure-workspace{grid-template-columns:1fr}
 .template-record-panel .template-structure-nav{max-height:38vh}
 .template-record-panel .template-block-panel{position:static;max-height:none}
 .template-col-stage{width:210px}
}
@media(max-width:700px){
 .template-page,.template-detail-page{padding:12px}
 .template-record-card{border-radius:14px}
 .template-record-card .template-detail-head{padding:16px}
 .template-record-card .template-detail-title-row{gap:10px}
 .template-record-card .template-detail-head h1{font-size:20px;min-width:130px}
 .template-title-icon{width:36px;height:36px;border-radius:10px}
 .template-title-icon svg{width:20px;height:20px}

 .template-record-card .template-detail-meta{font-size:12px}
 .template-record-tabs{padding:0 8px;gap:0}
 .template-record-tabs button{flex:1;padding:12px 8px;font-size:13px;gap:5px;min-width:0}
 .template-record-tabs button>svg{width:16px;height:16px}
 .template-record-panel{padding:16px}
 .template-record-panel .template-structure-nav{padding:6px}
 .template-record-panel .template-block-panel{padding:16px}
 .template-rule-card{padding:12px}
 .template-rule-toolbar{align-items:stretch}
 .template-rule-toolbar button{flex:1}
 .template-validation-picker,.template-validation-compare-controls{grid-template-columns:1fr}
 .template-validation-actions button{flex:1}
 .template-record-card .template-validate,.template-record-card .template-download{font-size:13px;min-height:36px;padding:8px 10px}
}

/* Редактор условий и история конфигураций — те же формы и панели. */
.template-config-form{font-size:14px;line-height:1.55;max-height:76vh;overflow:auto;padding-right:6px}
.template-config-form label{display:grid;gap:7px;font-size:13px;color:var(--muted);margin:12px 0}
.template-config-editor{display:block;width:100%;min-height:340px;max-height:52vh;resize:vertical;font-family:var(--mono);font-size:13px;line-height:1.65;tab-size:2;background:var(--surface-2);color:var(--ink);padding:16px;border:1px solid var(--line2);border-radius:12px;white-space:pre}
.template-config-editor:focus{outline:2px solid var(--accent);outline-offset:2px}
.template-config-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 6px}
.template-config-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 12px;font-size:14px;border-radius:9px}
.template-config-history{max-height:70vh;overflow:auto;font-size:14px}
.template-config-version{border:1px solid var(--line2);border-radius:12px;background:var(--surface);padding:14px 16px;margin:10px 0}
.template-config-version>summary{cursor:pointer;font-size:14px;font-weight:600;line-height:1.5}
.template-config-version p,.template-config-history p{font-size:13px;line-height:1.6;color:var(--muted)}
.template-config-snapshot{max-height:48vh;overflow:auto;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:14px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.6;tab-size:2}
.template-config-form button:focus-visible,.template-config-history button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:700px){.template-config-editor{min-height:280px;font-size:12px;padding:12px}.template-config-toolbar button{flex:1}.template-config-version{padding:12px}}

/* В списке правил — только имя, состояние и действия. */
.template-rules-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0;color:var(--muted)}
.template-rule-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(130px,auto) auto;align-items:center;gap:20px;padding:18px 20px;border:1px solid var(--line);border-radius:10px;margin:10px 0}
.template-rule-row .template-rule-settings{border:0;padding:0;margin:0;min-width:0}.template-rule-row .template-rule-state-row{margin:0;white-space:nowrap}.template-rule-row .template-rule-status:empty,.template-rule-row .template-validation-error:empty{display:none}.template-rule-row .template-rule-status{margin:6px 0 0;font-size:12px}.template-rule-row-actions{display:flex;gap:8px}.template-rule-name{overflow-wrap:anywhere}.template-rules-technical{margin-top:20px;color:var(--muted);font-size:12px}.template-rules-actions{display:flex;gap:8px;margin-top:12px}
.template-rule-add-menu{position:relative}.template-rule-add-menu>summary{display:grid;place-items:center;list-style:none;width:36px;height:36px;background:var(--accent);color:white;border-radius:8px;font-size:25px;cursor:pointer}.template-rule-add-menu>summary::-webkit-details-marker{display:none}.template-rule-add-options{position:absolute;right:0;top:42px;z-index:3;display:flex;flex-direction:column;min-width:180px;padding:6px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px #0002}.template-rule-add-options button{text-align:left;border:0;white-space:nowrap}
@media(max-width:650px){.template-rule-row{grid-template-columns:1fr;gap:12px}.template-rule-row-actions{justify-content:flex-end}}

.template-rule-row{grid-template-columns:minmax(140px,1fr) auto}.template-rule-row-actions{align-items:center;gap:10px}.template-rule-row .template-rule-icon{padding:7px;width:34px;height:34px;display:grid;place-items:center;border-color:transparent;background:transparent;color:var(--muted)}.template-rule-icon .bi{display:flex}.template-rule-icon:hover{color:var(--accent);background:var(--accent-soft)}.rule-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.template-rule-row input.template-rule-toggle{appearance:none;-webkit-appearance:none;position:relative;width:34px;height:20px;padding:0;border:0;border-radius:12px;background:var(--faint);cursor:pointer;flex:none;transition:background .15s}.template-rule-row input.template-rule-toggle:before{content:'';position:absolute;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background:white;transition:transform .15s}.template-rule-row input.template-rule-toggle:checked{background:var(--accent)}.template-rule-row input.template-rule-toggle:checked:before{transform:translateX(14px)}.template-rule-row input.template-rule-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.template-rule-row .template-rule-settings{position:relative}.template-rule-row .template-validation-error:not(:empty){position:absolute;right:0;top:30px;min-width:260px;padding:10px;background:var(--surface);box-shadow:var(--shadow);z-index:2}
@media(max-width:650px){.template-rule-row{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:14px 12px}.template-rule-row-actions{gap:3px}}

.template-rule-list{border:1px solid var(--line);border-radius:10px;overflow:hidden}.template-rule-row{padding:10px 16px;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0}.template-rule-row:last-child{border-bottom:0}.template-rules-section .template-rules-pending{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px}.template-rules-section .template-rules-pending-title{margin:0}.template-rule-row input.template-rule-toggle:disabled{cursor:default;opacity:.65}
@media(max-width:650px){.template-rule-row{padding:10px}.template-rules-section .template-rules-pending{align-items:flex-start;flex-direction:column}}

.template-rule-description{margin:3px 0 0;color:var(--muted);font-size:13px;line-height:1.4}.template-rule-label{min-width:0}

.template-editions-scroll{overflow-x:auto;border:1px solid var(--line2);border-radius:10px}.template-editions-table{width:100%;border-collapse:collapse;min-width:540px;text-align:left;font-size:13px}.template-editions-table th{color:var(--muted);font-weight:500;background:var(--surface-2)}.template-editions-table th,.template-editions-table td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}.template-editions-table tbody tr:last-child td{border-bottom:0}.template-editions-table .template-edition-diff{font-size:13px}.template-edition-current-badge{display:inline-block;padding:3px 8px;border-radius:6px;color:var(--accent-ink);background:var(--accent-soft)}.template-edition-actions{display:flex;gap:8px;align-items:center}.template-editions-table .template-edition-action button{display:grid;place-items:center;width:32px;height:32px;padding:7px;background:transparent;color:var(--muted);border:0}.template-edition-action button:hover{background:var(--accent-soft);color:var(--accent)}.template-publication-history>h2{margin-bottom:16px}

/* Related documents: one compact row per relationship and applicability. */
.template-related-scroll{overflow-x:auto}
.template-related-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.template-related-table th,.template-related-table td{padding:12px 16px;border-bottom:1px solid var(--line,#e5e9f2);vertical-align:top}
.template-related-table th{color:var(--muted,#8490a5);font-weight:500}
.template-related-table td:first-child{width:30%}
.template-related-table td:last-child{width:23%}
.template-basis-summary{margin-top:24px}
.template-basis-summary p{font-size:14px;line-height:1.6}

/* Keep quota visible while long navigation and administration menus scroll. */
.side-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;display:flex;flex-direction:column;gap:6px}
.side-scroll>*{flex-shrink:0}
.side>.storage{flex:none;margin-top:8px}