/* «Пудровый графит» — оформление как у CRM кондитерской (Юлия 28.09.2026:
   «дизайн библиотеки взять с CRM»). Цвета, шрифты и посадка — оттуда. */
:root{
  --ground:#1A191C;
  --surface:#232126;
  --raised:#2B292F;
  --line:#37343B;
  --line-soft:#2E2C33;
  --ink:#EFEAE6;
  --ink-dim:#B4ADA8;
  --ink-faint:#837C79;
  --powder:#DDB9A8;
  --powder-deep:#C39C8C;
  --beige:#CDBBA0;
  --sage:#93B49C;
  --clay:#C98383;
  --r:10px;
  --font-display:Georgia,"Times New Roman",serif;
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* старые имена — на них опираются шаблоны */
  --mut:var(--ink-faint);--acc:var(--powder);--card:var(--surface)
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-ui);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--powder)}
.wrap{display:grid;grid-template-columns:260px 1fr;min-height:100vh}

/* ── боковое меню ─────────────────────────────────────────────── */
.side{background:var(--surface);border-right:1px solid var(--line-soft);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:block;padding:18px 18px 14px;border-bottom:1px solid var(--line-soft);text-decoration:none}
.brand b{font-family:var(--font-display);font-size:26px;font-weight:400;
  letter-spacing:.14em;color:var(--powder);display:block;line-height:1.15}
.brand i{display:block;font-family:var(--font-display);font-size:12.5px;
  color:var(--ink-dim);margin-top:4px}
.brand span{display:block;font-size:10px;color:var(--ink-faint);letter-spacing:.09em;
  text-transform:uppercase;margin-top:6px}
.brand-login{border:0;padding:0 0 8px;text-align:center}
.brand-login b{font-size:32px}
.nav{overflow-y:auto;padding:8px 0 14px;flex:1}
.nav .group{padding:13px 18px 5px;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint)}
.leaf,.tree>summary{display:flex;align-items:center;gap:9px;padding:7px 18px;
  color:var(--ink-dim);font-size:13px;text-decoration:none;border-left:2px solid transparent}
.leaf:hover,.tree>summary:hover{background:var(--raised);color:var(--ink)}
.leaf.on,.tree>summary.on{background:var(--raised);color:var(--ink);
  border-left-color:var(--powder);font-weight:600}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);flex:none}
.leaf.on .dot{background:var(--powder)}
.n{margin-left:auto;font-size:11px;color:var(--ink-faint);font-weight:400}
/* раскрывающаяся ветка: стрелочка крутится, подразделы — с отступом */
.tree>summary{cursor:pointer;list-style:none;font-weight:400}
.mob{display:flex;flex-direction:column;flex:1;min-height:0}
.mob[open]{display:flex}
.mob>.nav{flex:1}
.mob-btn{display:none}
.tree>summary::-webkit-details-marker{display:none}
.tree>summary a{color:inherit;text-decoration:none}
.arrow{width:0;height:0;flex:none;border-left:5px solid var(--ink-faint);
  border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.tree[open]>summary .arrow{transform:rotate(90deg);border-left-color:var(--powder)}
.tree-kids{border-left:1px solid var(--line-soft);margin-left:21px}
.tree-kids .leaf,.tree-kids .tree>summary{padding-left:14px}
.who{border-top:1px solid var(--line-soft);padding:11px 18px;font-size:12px;
  color:var(--ink-dim);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.who a,.who .link{color:var(--ink-faint);font-size:11px}
.who a{margin-left:auto}
.who form{margin:0}
.ava{width:26px;height:26px;border-radius:50%;background:var(--powder-deep);
  color:#241C19;display:grid;place-items:center;font-weight:700;font-size:11px;flex:none}

/* ── верхняя полоса и содержимое ──────────────────────────────── */
.page{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:14px;padding:12px 24px;
  border-bottom:1px solid var(--line-soft);background:var(--surface);position:sticky;top:0;z-index:5}
.search{flex:1;max-width:560px}
.main{padding:22px 24px 44px;max-width:1180px;width:100%}
h1{font-family:var(--font-display);font-weight:400;font-size:22px;margin:4px 0 14px}
h2{font-family:var(--font-display);font-weight:400;font-size:16px;margin:24px 0 10px;color:var(--ink-dim)}
.mut{color:var(--ink-faint)}
.lead{font-size:15px;color:var(--ink-dim)}
.crumbs{font-size:12px;color:var(--ink-faint);margin:0 0 4px}
.crumbs a{color:var(--ink-faint);text-decoration:none}
.crumbs a:hover{color:var(--powder)}

/* карточки документов */
.list{display:grid;gap:8px}
.item{display:block;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:11px 14px;text-decoration:none;color:var(--ink)}
.item:hover{border-color:var(--powder-deep)}
.item b{display:block;color:var(--ink);font-weight:600;margin:3px 0}
.item .desc{display:block;font-size:13px;color:var(--ink-dim)}
.item .meta,.meta{color:var(--ink-faint);font-size:12px}
.type{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  padding:2px 8px;border-radius:5px;background:#332F27;color:var(--beige);border:1px solid #4A4335}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:14px 16px;text-decoration:none;color:var(--ink);display:flex;justify-content:space-between}
.card:hover{border-color:var(--powder-deep)}
.card b{color:var(--powder);font-weight:600}
/* подразделы внутри раздела — плитками */
.podrazdely{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-bottom:16px}
.podrazdely .side-link{display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r);padding:12px 14px;
  text-decoration:none;color:var(--ink)}
.podrazdely .side-link:hover{border-color:var(--powder-deep)}
.podrazdely .n{margin-left:auto}

/* кнопки */
.btn{display:inline-block;background:var(--powder);border:1px solid var(--powder);color:#241C19;
  font-weight:600;padding:7px 14px;border-radius:8px;font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;text-decoration:none}
.btn:hover{background:var(--powder-deep);border-color:var(--powder-deep)}
.btn.ghost{background:var(--raised);color:var(--ink);border-color:var(--line);font-weight:400}
.btn.ghost:hover{border-color:var(--powder-deep)}
.btn.small{padding:4px 10px;font-size:12px}
.btn.danger{background:#3A2A2C;color:var(--clay);border:1px solid #523839}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--powder);outline-offset:2px}
button.link{background:none;border:0;color:var(--ink-faint);cursor:pointer;font:inherit;padding:0}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.preview{width:100%;height:70vh;border:1px solid var(--line-soft);border-radius:var(--r);background:#fff}

/* формы */
input[type=text],input[type=search],input[type=password],input:not([type]),textarea,select{
  width:100%;background:var(--ground);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:8px 11px;font:inherit;font-size:14px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--powder-deep)}
input[type=file]{color:var(--ink-dim);font:inherit}
.form{display:grid;gap:12px;max-width:560px;margin:10px 0}
.form label{display:grid;gap:5px;font-size:12px;color:var(--ink-dim)}
.chk{display:flex!important;align-items:center;gap:8px;color:var(--ink)!important}
.chk input{width:auto}
details.edit,details.archive{margin-top:20px;border-top:1px solid var(--line-soft);padding-top:12px}
summary{cursor:pointer;font-weight:600}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r);padding:8px 12px}
.row input[name=name]{flex:1;min-width:160px;width:auto}
.row select{width:auto;flex:1;min-width:180px}
.card-form{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:14px 16px;max-width:none;margin:12px 0}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
table.rights{border-collapse:collapse;width:100%;font-size:13px}
table.rights td{padding:6px 8px;border-bottom:1px solid var(--line-soft)}
table.rights td:first-child{font-weight:600;width:40%}
.err{background:#3A2A2C;border:1px solid #523839;color:#F0D2D2;border-radius:8px;padding:9px 12px}

/* вход */
.login-body{display:grid;place-items:center;min-height:100vh;padding:24px}
.login{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:14px;padding:28px 26px;display:grid;gap:12px}
.login h1{margin:0;color:var(--powder)}
.login label{display:grid;gap:5px;font-size:12px;color:var(--ink-dim)}

/* телефон: меню сверху, сворачивается в кнопку-список */
@media (max-width:880px){
  .wrap{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .side{position:static;height:auto}
  .brand{padding:14px 16px 10px}
  .brand b{font-size:22px}
  .mob-btn{display:block;list-style:none;padding:12px 16px;font-weight:600;
    color:var(--powder);cursor:pointer}
  .mob-btn::-webkit-details-marker{display:none}
  .nav{max-height:none}
  .top{position:static;padding:10px 16px}
  .main{padding:16px}
  .preview{height:60vh}
}
@media (max-width:600px){
  .row-2{grid-template-columns:1fr}
  table.rights td{display:block;width:auto!important;border:0;padding:2px 6px}
  table.rights tr{display:block;border-bottom:1px solid var(--line-soft);padding:6px 0}
}