/* БАЗА: общие компоненты, одинаковые для классики и OSBOS. Правила режимов сюда не добавлять. */
/* ==========================================================================
   OSBOS · единая дизайн-система
   Токены, оболочка, кнопки, формы, карточки, списки, модальные окна,
   рамки изображений со спиннером и лупой, лайтбокс, уведомления.
   ========================================================================== */

/* ===== тема: сдвиг оттенка --th (−180…180) и «разброс» --sp задаёт пользователь ===== */
:root {
  --th: 0; --sp: 1; --tl: 0; --ts: 1;
  --h-a: calc(266 + var(--th) - 30 * var(--sp)); --h-b: calc(266 + var(--th)); --h-c: calc(266 + var(--th) + 64 * var(--sp));
  --h-pk: calc(266 + var(--th) + 54 * var(--sp)); --h-cy: calc(266 + var(--th) - 76 * var(--sp)); --h-vi: calc(266 + var(--th) - 11 * var(--sp));
  --h-ac: calc(233 + var(--th)); --h-acc: calc(223 + var(--th)); --h-p: calc(221 + var(--th)); --h-tg: calc(205 + var(--th));
  --t-a: hsl(var(--h-a) calc(47% * var(--ts)) clamp(12%, calc(31% + var(--tl) * 1%), 86%)); --t-a2: hsl(var(--h-a) calc(46% * var(--ts)) clamp(12%, calc(42% + var(--tl) * 1%), 86%)); --t-b: hsl(var(--h-b) calc(45% * var(--ts)) clamp(12%, calc(43% + var(--tl) * 1%), 88%)); --t-b2: hsl(calc(var(--h-b) - 4) calc(46% * var(--ts)) clamp(12%, calc(50% + var(--tl) * 1%), 88%));
  --t-c: hsl(var(--h-c) calc(47% * var(--ts)) clamp(12%, calc(55% + var(--tl) * 1%), 90%)); --t-c2: hsl(calc(var(--h-c) - 14) calc(37% * var(--ts)) clamp(12%, calc(49% + var(--tl) * 1%), 88%));
  --acc: hsl(var(--h-acc) calc(90% * (0.55 + 0.45 * var(--ts))) clamp(40%, calc(63% + var(--tl) * .5%), 80%)); --acc-d: hsl(var(--h-acc) calc(72% * (0.55 + 0.45 * var(--ts))) 52%); --tg-c: hsl(var(--h-tg) 85% 56%);
  --primary: hsl(var(--h-p) calc(83% * (0.55 + 0.45 * var(--ts))) clamp(34%, calc(53% + var(--tl) * .35%), 62%)); --primary-hover: hsl(var(--h-p) calc(75% * (0.55 + 0.45 * var(--ts))) 46%); --primary-soft: hsl(var(--h-p) calc(100% * (0.55 + 0.45 * var(--ts))) 96%);
}

:root {
  color-scheme: light;
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef2f7;
  --text: #141a26;
  --text-2: #3a4457;
  --muted: #667286;
  --faint: #98a2b3;
  --line: #e3e7ee;
  --line-strong: #cdd5e1;
  
  
  
  --primary-ring: hsl(var(--h-p) calc(83% * (0.55 + 0.45 * var(--ts))) 53% / .2);
  --danger: #d4303d;
  --danger-hover: #b9232f;
  --danger-soft: #fdeced;
  --success: #14905a;
  --success-soft: #e6f6ee;
  --warn: #a9680b;
  --warn-soft: #fff4dc;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --sh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --sh-2: 0 6px 20px rgba(16, 24, 40, .08);
  --sh-pop: 0 24px 64px rgba(16, 24, 40, .24);
  --topbar-h: 60px;
  --sidebar-w: 248px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }

h1 { font-size: 28px; font-weight: 680; letter-spacing: -.025em; }

h2 { font-size: 18px; font-weight: 640; }

h3 { font-size: 15px; font-weight: 640; }

p { margin: 0; }

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

img,
video { max-width: 100%; }

[hidden] { display: none !important; }

code { padding: 1px 6px; border-radius: 6px; background: var(--surface-3); font-size: .9em; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

::selection { background: var(--primary-ring); }


.muted { color: var(--muted); }

.small { font-size: 13px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* иконки */
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

.i-sm { width: 15px; height: 15px; }

.i-lg { width: 22px; height: 22px; }

.i-xl { width: 28px; height: 28px; }

.nav-soon { margin-left: auto; font-size: 10.5px; font-weight: 650; padding: 2px 7px; border-radius: 99px; background: var(--surface-3); color: var(--muted); }


.page { flex: 1; min-width: 0; width: 100%; max-width: 1240px; margin: 0 auto; padding: 32px 32px 56px; }

.page-narrow { max-width: 920px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }

.page-head p { margin-top: 6px; color: var(--muted); font-size: 14.5px; }

.back-link { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; color: var(--muted); font-size: 14px; font-weight: 500; transition: color .15s, transform .15s; }

.back-link:hover { color: var(--text); }

.back-link:hover .i { transform: translateX(-2px); }

.back-link .i { transition: transform .15s; }


/* ===== Кнопки ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 560; line-height: 1; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}

.btn:hover { background: var(--surface-2); border-color: #b9c3d3; }

.btn:active { transform: translateY(1px); }

.btn:disabled,
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(37, 99, 235, .3); }

.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.btn-soft { background: var(--primary-soft); border-color: transparent; color: var(--primary); }

.btn-soft:hover { background: #dbe7ff; border-color: transparent; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }

.btn-ghost:hover { background: var(--surface-3); border-color: transparent; }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }

.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }

.btn-danger-ghost { background: transparent; border-color: transparent; color: var(--danger); }

.btn-danger-ghost:hover { background: var(--danger-soft); border-color: transparent; }

.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; gap: 7px; }

.btn-sm .i { width: 16px; height: 16px; }

.btn-icon { width: 40px; padding: 0; }

.btn-icon.btn-sm { width: 34px; }

.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }

.btn.is-busy > * { visibility: hidden; }

.btn.is-busy::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; color: var(--text-2); animation: osb-spin .7s linear infinite; }

.btn-primary.is-busy::after,
.btn-danger.is-busy::after { color: #fff; }

.btn-primary.is-busy,
.btn-danger.is-busy { color: transparent !important; }

.btn-group { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }


/* ===== Формы ===== */
.field { margin-bottom: 22px; }

.field:last-child { margin-bottom: 0; }

.field-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--text); }

.field-label .req { color: var(--danger); }

.field-help { margin-top: 7px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

.input,
.select,
.textarea {
  display: block; width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 15px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.input::placeholder,
.textarea::placeholder { color: var(--faint); }

.input:hover,
.select:hover,
.textarea:hover { border-color: #b7c2d3; }

.input:focus,
.select:focus,
.textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring); }

.input[readonly] { background: var(--surface-2); color: var(--muted); }

.textarea { min-height: 110px; resize: vertical; line-height: 1.55; }

.select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667286' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; cursor: pointer;
}

/* любой выпадающий список (в том числе select.input и в строках настроек) выглядит как список: стрелка справа */
select.input, .settings-row select:not(.select), .field select:not(.select) {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667286' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}

.input-with-icon { position: relative; }

.input-with-icon .i { position: absolute; left: 13px; top: 50%; margin-top: -9px; color: var(--faint); pointer-events: none; }

.input-with-icon .input { padding-left: 40px; }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.field-row > .field { margin-bottom: 22px; }

.field.is-remote .input,
.field.is-remote .select,
.field.is-remote .textarea { border-color: var(--peer, var(--primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--peer, var(--primary)) 22%, transparent); }

.peer-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 2px 9px 2px 3px; border-radius: 99px; background: color-mix(in srgb, var(--peer, var(--primary)) 14%, #fff); color: color-mix(in srgb, var(--peer, var(--primary)) 82%, #000); font-size: 12px; font-weight: 600; animation: osb-pop .2s var(--ease); }

.peer-chip .avatar { width: 20px; height: 20px; font-size: 10px; }


/* переключатель */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: 13px; color: var(--text-2); -webkit-tap-highlight-color: transparent; }

.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch-track { position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; background: var(--line-strong); transition: background .2s; }

.switch-track::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .3); transition: transform .22s var(--ease); }

.switch input:checked + .switch-track { background: var(--success); }

.switch input:checked + .switch-track::after { transform: translateX(16px); }

.switch input:focus-visible + .switch-track { outline: 2px solid var(--primary); outline-offset: 2px; }

.switch input:disabled + .switch-track { opacity: .5; }

.switch-label { white-space: nowrap; }


/* ===== Карточки, уведомления, статусы ===== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }

.card-body { padding: 26px; }

.card + .card { margin-top: 20px; }

.card-head { display: flex; align-items: center; gap: 12px; padding: 18px 26px; border-bottom: 1px solid var(--line); }

.card-head .ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }

.card-head h2 { font-size: 16px; }

.card-head p { color: var(--muted); font-size: 13px; margin-top: 2px; }

.card-head .grow { flex: 1; min-width: 0; }

.notice,
.admin-notice { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; border-radius: var(--r); font-size: 14px; border: 1px solid transparent; }

.notice-ok,
.admin-notice { background: var(--success-soft); border-color: #bfe6d1; color: #0d6a40; }

.notice-error { background: var(--danger-soft); border-color: #f5c3c7; color: #9d1f2b; }

.notice-info { background: var(--primary-soft); border-color: #c6d8ff; color: #1b4bb5; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }

.badge-ok { background: var(--success-soft); color: #0d6a40; }

.badge-warn { background: var(--warn-soft); color: var(--warn); }

.badge-muted { background: var(--surface-3); color: var(--muted); }

.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--peer, var(--primary)); color: #fff; font-size: 12px; font-weight: 700; border: 2px solid #fff; }


/* ===== Списки сущностей ===== */
.list { overflow: hidden; }

.list-head,
.list-row { display: grid; grid-template-columns: var(--cols); gap: 16px; align-items: center; padding: 12px 22px; }

.list-head { padding-top: 12px; padding-bottom: 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .02em; }

.list-row { border-bottom: 1px solid var(--line); transition: background .15s; }

.list-row:last-child { border-bottom: 0; }

.list-row:hover { background: #fafbfd; }

.list-row.row-locked { background: #fbfcfe; }

.list-thumb { width: 72px; height: 54px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }

.list-thumb.is-hidden { opacity: .55; }

.list-main { min-width: 0; }

.list-title { display: block; font-weight: 620; font-size: 15px; overflow-wrap: anywhere; }

.list-sub { margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.list-sub.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; }

.list-date { color: var(--text-2); font-size: 13.5px; white-space: nowrap; }

.list-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }

.list-actions form { margin: 0; display: inline-flex; }

.list-cell-label { display: none; }

.list-row > .c-meta { display: contents; }

.list-empty { padding: 64px 24px; text-align: center; color: var(--muted); }

.list-empty .ico { width: 56px; height: 56px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 16px; background: var(--primary-soft); color: var(--primary); }

.list-empty h2 { color: var(--text); margin-bottom: 6px; }

.list-empty p { margin-bottom: 20px; }

.list-depth { display: inline-block; flex: none; width: calc(var(--depth, 0) * 22px); }

.list-title-wrap { display: flex; align-items: center; gap: 14px; min-width: 0; }

.status-select {
  appearance: none; -webkit-appearance: none; min-height: 34px; padding: 0 30px 0 12px;
  border: 1px solid var(--line-strong); border-radius: 99px; background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667286' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.status-select[data-v="published"] { background-color: var(--success-soft); border-color: #bfe6d1; color: #0d6a40; }

.status-select[data-v="draft"] { background-color: var(--surface-2); }

.status-select[data-v="archived"] { background-color: var(--surface-3); color: var(--muted); }

.status-select:focus { outline: none; box-shadow: 0 0 0 4px var(--primary-ring); }

.status-select[data-saved="1"] { box-shadow: 0 0 0 4px rgba(20, 144, 90, .2); }

.lock-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

.lock-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); font-size: 12px; font-weight: 600; line-height: 1.4; animation: osb-pop .2s var(--ease); }

.lock-chip .i { width: 14px; height: 14px; }

.lock-chip small { font-weight: 500; opacity: .85; }

.row-locked .list-thumb { filter: grayscale(.5); }


/* ===== Рамки изображений: вписывание, спиннер, лупа ===== */
.tm-frame {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  background: var(--surface-2); border-radius: inherit; contain: paint;
}

.tm-frame > img,
.tm-frame > video {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  opacity: 0; transform: scale(1.04); filter: blur(10px);
  transition: opacity .5s var(--ease), transform .7s var(--ease), filter .55s var(--ease);
}

.tm-frame.is-ready > img,
.tm-frame.is-ready > video { opacity: 1; transform: none; filter: none; }

.tm-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .75) 50%, transparent 80%) 0 0 / 220% 100%, var(--surface-3);
  animation: tm-shimmer 1.5s linear infinite;
}

.tm-frame::after {
  content: ""; position: absolute; z-index: 2; left: 50%; top: 50%;
  width: var(--spin, 28px); height: var(--spin, 28px); margin: calc(var(--spin, 28px) / -2) 0 0 calc(var(--spin, 28px) / -2);
  border: 2.5px solid rgba(37, 99, 235, .18); border-top-color: var(--primary); border-radius: 50%;
  animation: osb-spin .8s linear infinite;
}

.tm-frame.is-ready::after,
.tm-frame.is-error::after { display: none; }

.tm-frame.is-ready.is-buffering::after { display: block; }

.tm-frame.is-ready::before {
  animation: none; background: var(--tm-src) center / cover no-repeat, var(--surface-3);
  filter: blur(20px) saturate(1.2); transform: scale(1.3); opacity: .5;
  transition: opacity .6s var(--ease);
}

.tm-frame.is-error::before { animation: none; background: var(--surface-3); }

.tm-frame.is-error > img,
.tm-frame.is-error > video { display: none; }

.tm-frame .tm-fail { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--faint); font-size: 11px; text-align: center; padding: 6px; }

.tm-frame .tm-fail .i { width: 22px; height: 22px; }

.tm-empty::before,
.tm-empty::after { display: none; }

.tm-empty { display: grid; place-items: center; color: var(--faint); }

.tm-empty-icon .i { width: 22px; height: 22px; }

.tm-frame[data-zoom] { cursor: zoom-in; }

.tm-veil {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  margin: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in;
  transition: background .25s;
}

.tm-frame.is-ready:hover > .tm-veil { background: rgba(15, 23, 42, .22); }

.tm-lens {
  display: grid; place-items: center; width: var(--z, 40px); height: var(--z, 40px);
  border-radius: 50%; color: #fff;
  background: rgba(15, 23, 42, .5); border: 1px solid rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  opacity: 0; transform: scale(.6);
  transition: opacity .22s var(--ease), transform .3s var(--ease);
}

.tm-lens .i { width: 50%; height: 50%; stroke-width: 1.9; }

.tm-frame.is-ready:hover .tm-lens { opacity: 1; transform: none; }

.tm-veil:hover .tm-lens { transform: scale(1.08); background: rgba(15, 23, 42, .66); }

@media (hover: none) {
  .tm-veil { place-items: end end; padding: 6px; }

  .tm-lens { --z: min(var(--z, 40px), 30px); opacity: .92; transform: none; }

  .tm-frame.is-ready:hover > .tm-veil { background: transparent; }
}

@keyframes tm-shimmer{ from { background-position: 120% 0, 0 0; } to { background-position: -120% 0, 0 0; } }

@keyframes osb-spin{ to { transform: rotate(360deg); } }

@keyframes osb-pop{ from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

@keyframes osb-fade{ from { opacity: 0; } to { opacity: 1; } }

@keyframes osb-rise{ from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }


/* ===== Окна, лайтбокс, уведомления ===== */
html.scroll-locked { overflow: hidden !important; }

body.scroll-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; padding-right: var(--sbw, 0); }

.osb-overlay {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, .5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  overscroll-behavior: contain; touch-action: none; animation: osb-fade .18s ease-out;
}

.osb-overlay.is-leaving { opacity: 0; transition: opacity .16s ease-in; }

.dlg {
  position: relative; width: min(460px, 100%); max-height: calc(100dvh - 40px); overflow: auto; touch-action: pan-y;
  padding: 26px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-pop);
  overscroll-behavior: contain; animation: osb-rise .26s var(--ease);
}

.dlg-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }

.dlg-icon.is-danger { background: var(--danger-soft); color: var(--danger); }

.dlg-icon.is-warn { background: var(--warn-soft); color: var(--warn); }

.dlg h2 { font-size: 19px; margin-bottom: 8px; }

.dlg p { color: var(--muted); line-height: 1.55; }

.dlg .input { margin-top: 14px; }

.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

.dlg-wide { width: min(1100px, 100%); padding: 0; display: flex; flex-direction: column; height: min(820px, calc(100dvh - 40px)); overflow: hidden; }

.dlg-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }

.dlg-head h2 { margin: 0; flex: 1; min-width: 0; }

.dlg-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; }

@media (max-width: 640px) {
  .osb-overlay { align-items: flex-end; padding: 0; }

  .dlg { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; padding: 22px 20px calc(22px + var(--sab, 0px)); animation: osb-sheet .3s var(--ease); }

  .dlg-wide { height: 94dvh; padding: 0; }

  .dlg-actions .btn { flex: 1; }
}

@keyframes osb-sheet{ from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }


.osb-lightbox { z-index: 9500; padding: 0; background: rgba(8, 12, 22, .92); cursor: zoom-out; }

.lb-stage { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; padding: 56px 72px; }

.lb-stage img { max-width: 100%; max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); min-width: 0; min-height: 0; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 80px rgba(0, 0, 0, .5); cursor: default; opacity: 0; transform: scale(.97); transition: opacity .4s var(--ease), transform .5s var(--ease); user-select: none; -webkit-user-drag: none; }

.lb-stage.is-ready img { opacity: 1; transform: none; }

.lb-spin { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 3px solid rgba(255, 255, 255, .2); border-top-color: #fff; border-radius: 50%; animation: osb-spin .8s linear infinite; }

.lb-stage.is-ready .lb-spin { display: none; }

.lb-btn { position: absolute; z-index: 3; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .15s, transform .15s; }

.lb-btn:hover { background: rgba(255, 255, 255, .24); }

.lb-close { right: 18px; top: 16px; }

.lb-prev { left: 16px; top: 50%; margin-top: -23px; }

.lb-next { right: 16px; top: 50%; margin-top: -23px; }

.lb-info { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; text-align: center; color: #e6eaf2; font-size: 14px; padding: 0 70px; pointer-events: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }

.lb-info small { display: block; opacity: .7; margin-top: 2px; }

@media (max-width: 640px) {
 .lb-stage { padding: 64px 8px 56px; }
 .lb-stage img { max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); }
 .lb-prev { left: 8px; }
 .lb-next { right: 8px; }
 .lb-btn { width: 40px; height: 40px; }
}


.osb-toasts { position: fixed; z-index: 9800; right: 20px; bottom: 20px; display: grid; gap: 10px; justify-items: end; pointer-events: none; }

.osb-toast { display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 12px; background: #172033; color: #fff; font-size: 14px; box-shadow: var(--sh-pop); pointer-events: auto; animation: osb-rise .26s var(--ease); }

.osb-toast.is-error { background: #7f1d24; }

.osb-toast.is-ok .i:first-child { color: #5fe0a1; }

.osb-toast button { margin-left: 6px; padding: 4px 10px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }

.osb-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: .2s; }

body.has-bar .osb-toasts { bottom: 92px; }


/* ===== Кнопка «наверх» ===== */
.fab-top {
  position: fixed; z-index: 55; right: 24px; bottom: 24px; width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text-2); box-shadow: var(--sh-2); cursor: pointer;
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .25s, transform .3s var(--ease), background .15s;
}

.fab-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.fab-top:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

body.has-bar .fab-top { bottom: 96px; }

.fab-top { bottom: calc(24px + var(--fab-lift, 0px)); padding: 0; line-height: 0; }

body.has-bar .fab-top { bottom: calc(24px + var(--fab-lift, 0px)); }

.fab-top .i,
.lb-btn .i,
.osb-x .i { display: block; margin: 0; width: 22px; height: 22px; }

.fab-top .i { transform: none; }

.lb-btn { padding: 0; line-height: 0; }

.lb-btn svg { display: block; margin: 0; }


/* ===== Обзор ===== */
.hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; padding: 28px 30px; border-radius: 22px; color: #fff; overflow: hidden; position: relative;
  background: radial-gradient(900px 300px at 100% -20%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(120deg, #1e40af, var(--primary) 55%, #3b82f6); box-shadow: 0 14px 40px rgba(37, 99, 235, .28); }

.hero h1 { color: #fff; font-size: 30px; }

.hero p { margin-top: 8px; color: rgba(255, 255, 255, .82); font-size: 15px; max-width: 520px; }

.hero-art { flex: none; width: 96px; height: 96px; display: grid; place-items: center; border-radius: 28px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); }

.hero-art .i { width: 44px; height: 44px; stroke-width: 1.4; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 30px; }

.stat { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }

a.stat:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: #bcd0fb; }

.stat-top { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 560; }

.stat-top .i { color: var(--primary); }

.stat-num { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-top: 6px; }

.stat-sub { color: var(--muted); font-size: 12.5px; }

.section-title { margin: 0 0 14px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 30px; }

.module-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }

a.module-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: #bcd0fb; }

a.module-card:hover .module-go { transform: translateX(3px); color: var(--primary); }

.module-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--primary-soft); color: var(--primary); }

.module-card h3 { font-size: 16px; }

.module-card p { color: var(--muted); font-size: 13.5px; line-height: 1.5; flex: 1; }

.module-foot { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12.5px; font-weight: 560; }

.module-go { transition: transform .2s var(--ease), color .2s; }

.module-card.is-soon { background: var(--surface-2); box-shadow: none; }

.module-card.is-soon .module-icon { background: var(--surface-3); color: var(--faint); }

.two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }

.mini-list { list-style: none; margin: 0; padding: 6px 0; }

.mini-list li { display: flex; align-items: center; gap: 12px; padding: 11px 22px; border-bottom: 1px solid var(--line); }

.mini-list li:last-child { border-bottom: 0; }

.mini-list .ml-ico { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 10px; background: var(--surface-3); color: var(--text-2); }

.mini-list .ml-main { flex: 1; min-width: 0; }

.mini-list .ml-title { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mini-list .ml-sub { color: var(--muted); font-size: 12.5px; }

.mini-empty { padding: 28px 22px; color: var(--muted); text-align: center; font-size: 14px; }

.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(20, 144, 90, .5); animation: live 1.8s infinite; }

@keyframes live{ 70% { box-shadow: 0 0 0 8px rgba(20, 144, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(20, 144, 90, 0); } }


/* ===== Вход ===== */
.login-page { min-height: 100vh; background: radial-gradient(900px 500px at 15% -10%, #dbe7ff, transparent 60%), radial-gradient(800px 500px at 100% 110%, #e5ecff, transparent 60%), var(--bg); }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.login-card { width: 100%; max-width: 410px; padding: 36px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--sh-pop); }

.login-card h1 { font-size: 26px; margin-bottom: 8px; }

.login-card .subtitle { margin-bottom: 26px; color: var(--muted); }

.login-card label { display: block; margin: 16px 0 8px; font-size: 14px; font-weight: 600; }

.login-card .btn { width: 100%; margin-top: 24px; min-height: 46px; }

.login-footer { margin-top: 24px; color: var(--faint); font-size: 12.5px; text-align: center; }

.error-message { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #f5c3c7; border-radius: var(--r); background: var(--danger-soft); color: #9d1f2b; font-size: 14px; }


/* ===== Профиль, настройки, база данных ===== */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; padding: 5px; border-radius: 12px; background: var(--surface-3); width: fit-content; max-width: 100%; }

.tabs a { padding: 8px 14px; border-radius: 9px; color: var(--text-2); font-size: 14px; font-weight: 560; }

.tabs a:hover { background: rgba(255, 255, 255, .7); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }

.form-grid label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }

.form-grid small { color: var(--muted); font-weight: 400; font-size: 12.5px; }

.settings-row { display: grid; grid-template-columns: 1fr 200px; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }

.settings-row:last-of-type { border-bottom: 0; }

.settings-row small { display: block; color: var(--muted); font-weight: 400; margin-top: 3px; }

.db-toolbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }

.db-toolbar label { display: flex; flex-direction: column; gap: 8px; min-width: 210px; flex: 1; font-size: 14px; font-weight: 600; }

.db-columns { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 20px; }

.db-columns span { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 13px; }

.db-columns small { color: var(--muted); font-size: 11px; }

.db-table-wrap { overflow: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r); -webkit-overflow-scrolling: touch; }

.data-table { width: 100%; border-collapse: collapse; min-width: 900px; font-size: 13.5px; }

.data-table th { padding: 11px 14px; text-align: left; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 650; white-space: nowrap; border-bottom: 1px solid var(--line); }

.data-table td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; max-width: 260px; overflow-wrap: anywhere; }

.db-edit-form { display: grid; gap: 8px; min-width: 220px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }

.db-edit-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

.db-pagination { display: flex; gap: 14px; align-items: center; justify-content: flex-end; padding: 16px 0 0; color: var(--muted); }

details > summary { cursor: pointer; color: var(--primary); font-weight: 560; }


/* ===== Адаптив ===== */
@media (max-width: 1100px) {
  .two-col { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --topbar-h: 56px; }

  .page { padding: 22px 16px 40px; }

  h1 { font-size: 24px; }

  .page-head { align-items: flex-start; flex-direction: column; gap: 14px; }

  .page-head > .btn { align-self: stretch; }

  .hero { padding: 22px 20px; border-radius: 18px; }

  .hero h1 { font-size: 24px; }

  .hero-art { display: none; }

  .card-body { padding: 20px 16px; }

  .card-head { padding: 16px; }

  .field-row,
.form-grid { grid-template-columns: 1fr; gap: 0; }

  .form-grid label { margin-bottom: 18px; }

  .settings-row { grid-template-columns: 1fr; gap: 10px; }

  .fab-top { right: 14px; bottom: 16px; width: 44px; height: 44px; }

  .fab-top,
body.has-bar .fab-top { bottom: calc(16px + var(--fab-lift, 0px) + var(--sab, 0px)); }

  .osb-toasts { right: 12px; left: 12px; bottom: 14px; justify-items: stretch; }

  .osb-toast { max-width: none; }

  body.has-bar .osb-toasts { bottom: 82px; }

  /* списки превращаются в карточки */
  .list-head { display: none; }

  .list-row { grid-template-columns: 72px 1fr; grid-template-areas: "thumb main" "meta meta" "act act"; gap: 10px 14px; padding: 14px 16px; }

  .list-row.no-thumb { grid-template-columns: 1fr; grid-template-areas: "main" "meta" "act"; }

  .list-row > .c-thumb { grid-area: thumb; }

  .list-row > .c-main { grid-area: main; }

  .list-row > .c-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }

  .list-row > .c-actions { grid-area: act; }

  .list-row .list-actions { justify-content: flex-start; }

  .list-row .list-actions .btn { flex: 1; }

  .list-row .list-actions form { flex: 1; }

  .list-row .list-actions form .btn { width: 100%; }

  .list-row .list-actions .btn-icon { flex: none; width: 40px; }

  .list-cell-label { display: inline; color: var(--faint); font-size: 12px; margin-right: 6px; }

  .list-row .c-meta > * { flex: none; max-width: 100%; white-space: nowrap; }

  .list-row .status-select { width: auto; }

  .login-card { padding: 28px 22px; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .stat { padding: 14px; }

  .stat-num { font-size: 26px; }

  .module-grid { grid-template-columns: 1fr; }

  .lock-chips { margin-top: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.db-table { width: 100%; border-collapse: collapse; min-width: 900px; font-size: 13.5px; }

.db-table th { padding: 11px 14px; text-align: left; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 650; white-space: nowrap; border-bottom: 1px solid var(--line); }

.db-table td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; max-width: 260px; overflow-wrap: anywhere; }

.login-logo { display: inline-block; margin-bottom: 26px; padding: 14px 22px; border-radius: 16px; background: linear-gradient(135deg, #0f1626, #1c2740); box-shadow: 0 8px 22px rgba(15, 22, 38, .25); }

.login-logo img { display: block; height: 30px; width: auto; }

.card-head h2 { display: flex; align-items: center; gap: 10px; }

.card-head h2 .i { color: var(--primary); }

.live-dot { flex: none; }

.two-col > .card { margin-top: 0 !important; }

.stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }


/* Кнопка «Создать» над списками */
.btn-create { gap: 10px; padding-left: 8px; min-height: 44px; border-radius: 14px; font-weight: 650; background: linear-gradient(135deg, #2f6df0, #1d4fd8); border-color: #1d4fd8; box-shadow: 0 6px 16px rgba(37, 99, 235, .28), inset 0 1px 0 rgba(255, 255, 255, .18); }

.btn-create:hover { background: linear-gradient(135deg, #3b78f5, #2257e6); transform: translateY(-1px); box-shadow: 0 9px 22px rgba(37, 99, 235, .34), inset 0 1px 0 rgba(255, 255, 255, .22); }

.btn-create .cr-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, .18); transition: transform .25s var(--ease), background .2s; }

.btn-create:hover .cr-ico { transform: rotate(90deg) scale(1.05); background: rgba(255, 255, 255, .28); }

.btn-create .cr-ico svg { width: 18px; height: 18px; stroke-width: 2.2; }

.page-head .btn-create { flex: none; }

/* Поля форм не вылезают за карточку на телефоне (дата, время) */
.field,
.field-row > *,
.form-grid > * { min-width: 0; }

.field .input,
.field .select,
input[type="datetime-local"],
input[type="date"],
input[type="time"] { min-width: 0; max-width: 100%; box-sizing: border-box; }

input[type="datetime-local"].input,
input[type="date"].input { display: block; width: 100%; -webkit-appearance: none; appearance: none; }

input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; min-width: 0; }

/* Отдельная кнопка просмотра и копирования в списках */
.list-actions .btn-icon { flex: none; }


/* ===== Администрирование: пользователи, роли ===== */
.notice-danger { background: var(--danger-soft); border-color: #f5c3c7; color: #9d1f2b; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }

.toolbar .input { flex: 1 1 240px; max-width: 420px; }

.toolbar .select { flex: none; width: auto; }

.user-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); }

.user-row:first-child { border-top: 0; }

.user-row.is-blocked { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(220, 38, 38, .03) 10px 20px); }

.u-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 17px; }

.u-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: flex-end; }

.u-meta .list-date { display: inline-flex; align-items: center; gap: 5px; }

.u-meta .list-date svg { width: 14px; height: 14px; }

.sess-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }

.sess-row b,
.sess-row small { display: block; }
 .sess-row small { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.sess-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }

.sess-row.is-current .sess-ico { background: var(--success-soft); color: #0d6a40; }

.row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.row-actions form { margin: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.req { color: var(--danger); }

.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.role-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.role-top { display: flex; gap: 14px; align-items: flex-start; }
 .role-top h2 { font-size: 17px; margin: 0 0 4px; }
 .role-top p { margin: 0; color: var(--muted); font-size: 13.5px; }

.role-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }

.role-stat,
.role-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
 .role-actions { margin-top: auto; }
 .role-actions form { margin: 0; }

.perm-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); cursor: pointer; }

.perm-row:first-of-type { border-top: 0; }

.perm-label { font-size: 14.5px; color: var(--text); }

.perm-row input:disabled + .switch-track { opacity: .55; }

/* Роли: дерево «модуль → подраздел → функция» */
.perm-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.perm-bar-in h2 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.perm-bar-in .hint { margin: 0; }
.perm-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.perm-mod { padding-top: 12px; padding-bottom: 12px; }
.perm-mod-head { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.perm-mod-head h2 { margin: 0; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.perm-mod-head h2 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perm-fold { flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.perm-fold:hover { background: var(--line); }
.perm-fold svg { width: 18px; height: 18px; transition: transform .2s; }
.perm-fold[aria-expanded="false"] svg { transform: rotate(-90deg); }
.perm-count { flex: none; font-size: 12.5px; color: var(--text-2); }
.perm-mod-body { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.perm-mod-body[hidden] { display: none; }
.perm-sub + .perm-sub { margin-top: 6px; }
.perm-sub.has-head { padding-left: 10px; border-left: 2px solid var(--line); margin-left: 4px; }
.perm-sub-head { display: flex; align-items: center; gap: 10px; padding: 8px 0 2px; }
.perm-sub-head h3 { margin: 0; flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text); }
.perm-sub-head h3 svg { width: 16px; height: 16px; color: var(--text-2); }
.perm-sub-body .perm-row:first-child { border-top: 0; }
.perm-sub.has-head .perm-sub-body { padding-left: 4px; }
.perm-mod.is-off .perm-mod-head h2, .perm-sub.is-off .perm-sub-head h3 { color: var(--text-2); }
.perm-row.is-locked { opacity: .5; cursor: default; }
.perm-row input:disabled ~ .perm-label { color: var(--text-2); }
@media (max-width: 560px) { .perm-bar-actions { width: 100%; } .perm-bar-actions .btn { flex: 1; } }

.perm-group .section-head { margin-bottom: 6px; }

@media (max-width: 760px) {
  .user-row { grid-template-columns: 44px minmax(0, 1fr); }
 .u-meta,
.user-row .list-actions { grid-column: 1 / -1; justify-content: flex-start; }

  .sess-row { grid-template-columns: 38px minmax(0, 1fr); }
 .sess-row form { grid-column: 2; }
}

.login-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 14px; background: var(--surface-3); }

.login-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }

.login-tabs button.is-active { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(16, 24, 40, .12); }

.login-check { display: flex !important; align-items: center; gap: 10px; margin: 2px 0 16px; font-weight: 500; color: var(--text-2); cursor: pointer; }

.login-check input { width: 18px; height: 18px; accent-color: var(--primary); }

.login-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--primary); font-size: 14px; font-weight: 550; }

.login-link:hover { text-decoration: underline; }

.btn-linklike { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 14px; display: block; margin-top: 14px; }

.code-input { font-size: 26px; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }

.login-card form[hidden],
.login-card [hidden] { display: none !important; }

.login-card .btn-primary { width: 100%; }

.set-tabs { display: flex; gap: 6px; margin: 0 0 20px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }

.set-tabs::-webkit-scrollbar { display: none; }

.set-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }

.set-tabs a:hover { background: var(--surface-2); }

.set-tabs a.is-active { background: var(--primary-soft); border-color: #c6d8ff; color: var(--primary); }

.inline-pair { display: flex; gap: 8px; }
 .inline-pair .input { max-width: 110px; }
 .inline-pair .select { flex: 1; }

.key-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
 .key-box code { padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid #bfe6d1; word-break: break-all; font-size: 13px; }

code { padding: 1px 6px; border-radius: 6px; background: var(--surface-3); font-size: .92em; }


/* ===== Переключатель режимов «Витрина / Forge» ===== */
.mode-switch { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface-3); border: 1px solid var(--line); margin: 0; }

.mode-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; padding: 0 22px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-weight: 650; font-size: 14.5px; cursor: pointer; transition: background .25s var(--ease), color .2s, box-shadow .25s, transform .15s; }

.mode-switch button:hover { color: var(--text); }

.mode-switch button.is-active { background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(16, 24, 40, .14); }

.mode-switch button.is-active svg { color: var(--primary); }

.mode-switch.in-top { margin-left: 36px; flex: none; }

@media (min-width: 901px) {
 :root { --topbar-h: 74px; }
}

.mode-switch.in-drawer { display: none; width: 100%; margin: 0 0 14px; }

.mode-switch.in-drawer button { padding: 0 8px; }

@media (max-width: 900px) {
 .mode-switch.in-top { display: none; }
 .mode-switch.in-drawer { display: grid; }
}

@media (max-width: 1180px) and (min-width: 901px) {
 .mode-switch.in-top button { padding: 0 14px; }
}


/* ===== Аналитика ===== */
.an-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--line); }

.seg a { padding: 7px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); }

.seg a.is-active { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(16, 24, 40, .12); }

.an-chart { width: 100%; height: 170px; display: block; }

.an-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 12.5px; margin-top: 6px; }

.an-small { font-size: 18px !important; line-height: 1.3; }

.an-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

.an-bar { display: flex; gap: 12px; align-items: center; padding: 8px 0; }

.an-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }

.an-ico.lg { width: 44px; height: 44px; border-radius: 14px; }

.an-bar-main { flex: 1; min-width: 0; }

.an-bar-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 5px; }
 .an-bar-top span { color: var(--muted); font-variant-numeric: tabular-nums; }

.an-track { height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
 .an-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5b8cff, var(--primary)); transition: width .6s var(--ease); }

.an-mat { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); color: inherit; }

.an-mat:first-of-type { border-top: 0; }
 .an-mat b { display: block; font-size: 14.5px; }
 .an-mat small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
 .an-mat small svg { width: 13px; height: 13px; }

.an-mat:hover b { color: var(--primary); }

.an-best { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

.an-best-col { padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }

.an-best-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

.an-best-col a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13.5px; color: var(--text-2); }
 .an-best-col a:hover { color: var(--primary); }
 .an-best-col em { font-style: normal; color: var(--muted); }

.icon-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }

.icon-pick label { cursor: pointer; }
 .icon-pick input { position: absolute; opacity: 0; }

.icon-pick span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); transition: all .15s; }

.icon-pick input:checked + span { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }

.icon-pick span:hover { background: var(--surface-2); }

.tag-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
 .tag-head > div { flex: 1; }
 .tag-head b,
.tag-head small { display: block; }
 .tag-head small { color: var(--muted); font-size: 12.5px; }

.tag-del { margin-top: 10px; }

@media (max-width: 860px) {
 .an-cols { grid-template-columns: 1fr; }
}


/* ===== Главная: сворачиваемые блоки и приветствие ===== */
.fold { border: 1px solid var(--line); border-radius: var(--r-lg, 16px); background: var(--surface); margin-bottom: 16px; overflow: hidden; }

.fold-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 20px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--text); }

.fold-head h2 { margin: 0; font-size: 17px; flex: 1; display: flex; align-items: center; gap: 10px; }

.fold-head small { color: var(--muted); font-weight: 500; font-size: 13px; }

.fold-chev { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); transition: transform .35s var(--ease), background .2s; }

.fold-head:hover .fold-chev { background: var(--primary-soft); color: var(--primary); }

.fold[data-open="true"] .fold-chev { transform: rotate(180deg); }

.fold-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }

.fold[data-open="true"] .fold-body { grid-template-rows: 1fr; }

.fold-inner { overflow: hidden; min-height: 0; opacity: 0; transition: opacity .3s ease; }

.fold[data-open="true"] .fold-inner { opacity: 1; transition-delay: .08s; }

.fold-pad { padding: 4px 20px 20px; }

.hero h1 { overflow-wrap: anywhere; }

.an-mini { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; color: inherit; }

.an-mini-link { display: block; color: inherit; }

.an-mini-link:hover .an-mini-go { color: var(--primary); transform: translateX(3px); }

.an-mini-go { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; transition: all .2s; }

.an-mini-num { font-size: 30px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
 .an-mini-num small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; letter-spacing: 0; margin-top: 2px; }

.an-spark { width: 100%; height: 56px; margin-top: 8px; display: block; }

.an-mini h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.an-mini ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
 .an-mini li { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
 .an-mini li span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .an-mini li span:first-child > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .an-mini li em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
 .an-mini li svg { width: 15px; height: 15px; flex: none; color: var(--primary); }

@media (max-width: 860px) {
 .an-mini { grid-template-columns: 1fr; gap: 16px; }
}


/* ---------- Хранилище: модуль и окно файла ---------- */
.st-cards {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}

.st-card {padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.st-card small {color:var(--muted)}
.st-card b {font-size:1.5rem}

.st-box {padding:16px;margin-bottom:16px}

.st-filter {display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:14px}
.st-filter label {display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted)}

.st-chk {display:inline-flex!important;flex-direction:row!important;align-items:center;gap:8px;font-size:.9rem!important;color:inherit!important}

.st-split {display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:800px) {
.st-split {grid-template-columns:1fr}
}

.st-split h3,
.fi h3 {font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:14px 0 8px}

.st-bar {display:grid;grid-template-columns:130px 1fr 40px;gap:8px;align-items:center;font-size:.9rem;margin:6px 0}
.st-bar i {display:block;height:8px;border-radius:6px;background:var(--surface-2,rgba(128,128,128,.15));overflow:hidden}
.st-bar b {display:block;height:100%;border-radius:6px;background:var(--accent,#3b82f6)}
.st-bar b.st-external {background:#e8a33d}
.st-bar b.st-direct {background:#8b95a5}
.st-bar em {text-align:right;font-style:normal}

.st-spark {display:flex;align-items:flex-end;gap:3px;height:70px}
.st-spark i {flex:1;min-width:3px;border-radius:3px 3px 0 0;background:var(--accent,#3b82f6);opacity:.8}

.st-host {display:flex;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line,rgba(128,128,128,.15));font-size:.9rem}
.st-host>:nth-child(2),
.st-host>.link-btn {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}
.st-host em {font-style:normal;color:var(--muted)}

.st-table-wrap {overflow-x:auto}
.st-table {width:100%;border-collapse:collapse;font-size:.9rem}
.st-table th,
.st-table td {padding:8px 10px;text-align:left;border-bottom:1px solid var(--line,rgba(128,128,128,.15));white-space:nowrap}
.st-table td small {display:block}

.st-thumb img {width:44px;height:44px;object-fit:cover;border-radius:8px;display:block}
.st-ext {display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;background:var(--surface-2,rgba(128,128,128,.15));font-size:.7rem;font-weight:700}

.st-pager {display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-top:12px}

.link-btn {background:none;border:0;padding:0;color:var(--accent,#3b82f6);cursor:pointer;font:inherit}
.link-btn:hover {text-decoration:underline}

.dlg.fi-modal {max-width:680px;width:calc(100vw - 24px);text-align:left}

.fi {max-height:80vh;overflow:auto;text-align:left}

.fi-head {display:flex;gap:14px;align-items:center}
.fi-head>div {flex:1;min-width:0}
.fi-head h2 {margin:0 0 2px;word-break:break-word}
.fi-head img {width:64px;height:64px;object-fit:cover;border-radius:10px}
.fi-id {display:block;color:var(--muted);font-family:monospace;font-size:.72rem;word-break:break-all}

.fi-stats {display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.fi-stats div {padding:10px;border-radius:10px;background:var(--surface-2,rgba(128,128,128,.12));text-align:center}
.fi-stats b {display:block;font-size:1.2rem}
.fi-stats small {color:var(--muted);font-size:.72rem}

@media(max-width:520px) {
.fi-stats {grid-template-columns:repeat(2,1fr)}
}

.fi-list {list-style:none;margin:0;padding:0}
.fi-list li {display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line,rgba(128,128,128,.15))}
.fi-list li a,
.fi-list li .link-btn {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fi-list em {font-style:normal;color:var(--muted);font-size:.8rem}

.fi-foot {display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--line,rgba(128,128,128,.2))}
.fi-foot .btn-danger-ghost {margin-left:auto}

.fi-warn {color:#b45309;font-weight:600}

.tm-info {position:absolute;right:8px;bottom:8px;z-index:3;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s}
.tm-frame:hover>.tm-info,
.tm-info:focus-visible {opacity:1}
@media(hover:none) {
.tm-info {opacity:.85}
}

.lb-fileinfo {display:inline-flex;gap:6px;align-items:center;margin-top:6px;padding:6px 12px;border-radius:999px;border:0;background:rgba(255,255,255,.16);color:#fff;cursor:pointer}


.st-filter .input {width:auto;min-width:140px}
.st-filter input[type=search] {flex:1;min-width:200px}

.st-spark i {flex:0 0 18px;max-width:18px}

.st-cards {align-items:stretch}
.st-card {margin:0}


/* Группы категорий в списке товаров */
.list-group { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 18px 10px calc(18px + var(--depth, 0) * 22px); border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-2, var(--surface-3)); font: inherit; color: var(--text); text-align: left; cursor: pointer; }

.list-group:hover { background: var(--primary-soft); }

.list-group b { font-weight: 650; }
 .list-group em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 13px; }

.list-group svg { width: 16px; height: 16px; color: var(--muted); flex: none; }

.lg-chev { display: inline-flex; transition: transform .25s var(--ease); }
 .list-group[aria-expanded="false"] .lg-chev { transform: rotate(-90deg); }

.list-group[hidden],
.list-row[hidden] { display: none; }


/* Логотип Forge в большом тумблере: цвета управляются переменными --logo-* */
.mode-switch .ms-logo { display: inline-flex; height: 30px; --logo-ink: var(--muted); --logo-accent: #f5c400; --logo-paper: #fff; transition: --logo-ink .2s; }

.mode-switch .ms-logo svg { height: 100%; width: auto; display: block; }

.mode-switch button.has-logo:hover .ms-logo { --logo-ink: var(--text); }

.mode-switch button.has-logo.is-active .ms-logo { --logo-ink: #0a0a0a; }

.mode-switch button.has-logo { padding: 0 24px; }

.mode-switch.in-top button.has-logo { min-width: 130px; }

@media (max-width: 1180px) and (min-width: 901px) {
 .mode-switch.in-top button.has-logo { min-width: 0; padding: 0 14px; }
 .mode-switch.in-top button.has-logo .ms-logo { height: 24px; }
}


/* Правки по итогам обхода интерфейса */
.mode-switch button { white-space: nowrap; }

.mode-switch.in-drawer button { font-size: 14px; gap: 6px; padding: 0 6px; }

.mode-switch.in-drawer .ms-logo { height: 24px; }

.fold-head h2 small { white-space: nowrap; }

.fold-head h2 { min-width: 0; }

form[action="/system-settings"] > .btn-primary,
form[action="/system-settings"] > div > .btn-primary:only-child { margin: 18px 0 8px; }

.page-head:has(> .head-ico) { justify-content: flex-start; align-items: center; gap: 16px; }

.role-grid > .card,
.st-cards > .card,
.an-cols > .card,
.two-col > .card,
.two-col > * > .card { margin-top: 0; }

.an-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; align-items: start; }
 @media (max-width: 800px) {
 .an-cols { grid-template-columns: 1fr; }
}

.page > .stat-grid,
.page > .card.section { margin-bottom: 20px; }

.page > .card.section + .card.section { margin-top: 0; }

.stat-grid > .stat { align-self: stretch; }

.stat .stat-num.an-small { font-size: 20px; line-height: 1.3; min-height: 1.3em; }


/* Курсор коллеги в обычном поле */
.field-caret { position: absolute; width: 2px; background: var(--peer, var(--primary)); border-radius: 1px; pointer-events: none; z-index: 4; transition: left .15s linear, top .15s linear; }

.field-caret i { position: absolute; left: -1px; bottom: 100%; padding: 1px 7px; border-radius: 6px 6px 6px 0; background: var(--peer, var(--primary)); color: #fff; font: 600 11px/1.5 var(--font, system-ui); white-space: nowrap; font-style: normal; }


/* Окно «Структура каталога» */
.dlg.dlg-structure { width: min(760px, 100%); padding: 22px 22px 18px; display: flex; flex-direction: column; max-height: min(86dvh, 820px); }

.cs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.cs-head h2 { margin-bottom: 4px; }

.cs-head p { font-size: 13.5px; }

.cs-bar { display: flex; align-items: center; margin: 14px 0 10px; }

.cs-ro { font-size: 13px; color: var(--muted); }

.cs-tree { flex: 1; min-height: 120px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md, 12px); padding: 6px; background: var(--surface-2, #f7f8fa); }

.cs-tree.is-busy { opacity: .6; pointer-events: none; }

.cs-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px calc(8px + var(--d, 0) * 26px); border-radius: 9px; background: var(--surface, #fff); margin-bottom: 4px; border: 1px solid transparent; }

.cs-row:hover { border-color: var(--line); }

.cs-row.is-dragging { opacity: .4; }

.cs-row.is-before::before,
.cs-row.is-after::after { content: ''; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: var(--primary); }

.cs-row.is-before::before { top: -3px; }
 .cs-row.is-after::after { bottom: -3px; }

.cs-row.is-into { background: var(--primary-soft); border-color: var(--primary); }

.cs-grip { color: var(--faint); cursor: grab; display: grid; place-items: center; flex: none; }

.cs-name { flex: 1; min-width: 0; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cs-name:hover { color: var(--primary); }

.cs-badge { flex: none; font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--surface-3, #eef0f3); border-radius: 99px; padding: 1px 8px; }

.cs-ctl { display: flex; gap: 2px; flex: none; }

.cs-ctl button { border: 0; background: transparent; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); cursor: pointer; }

.cs-ctl button:hover:not(:disabled) { background: var(--surface-3, #eef0f3); color: var(--text); }

.cs-ctl button:disabled { opacity: .25; cursor: default; }

.cs-ctl button.is-danger:hover { background: var(--danger-soft); color: var(--danger); }

.cs-empty { display: grid; justify-items: center; gap: 6px; padding: 36px 12px; color: var(--muted); text-align: center; }

@media (max-width: 640px) {
 .cs-ctl button { width: 34px; height: 34px; }
 .cs-row { flex-wrap: wrap; }
 .cs-name { flex-basis: calc(100% - 80px); }
}

.page-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }


/* ---------- центр коммуникаций ---------- */
:root { --chat-w: 420px; }

.chat-count { background: var(--danger, #dc2626); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 6px; min-width: 18px; text-align: center; margin-left: auto; }

.chat-panel { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: var(--chat-w); background: var(--surface, #fff); border-left: 1px solid var(--line, #e5e7eb); box-shadow: -8px 0 24px rgba(0,0,0,.08); z-index: 60; display: flex; flex-direction: column; min-width: 0; }

.chat-panel[hidden] { display: none; }

.chat-panel.is-full { width: auto; left: 0; border-left: 0; z-index: 70; }

body.chat-full { overflow: hidden; }

.chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line, #e5e7eb); flex-shrink: 0; }

.chat-tabs { display: flex; gap: 4px; background: var(--bg, #f3f4f6); padding: 3px; border-radius: 10px; }

.chat-tabs button { border: 0; background: none; padding: 7px 14px; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600; color: var(--muted, #6b7280); display: flex; align-items: center; gap: 6px; }

.chat-tabs button.active { background: #fff; color: var(--text, #111827); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.chat-head-actions { margin-left: auto; display: flex; gap: 2px; }

.chat-body { flex: 1; min-height: 0; display: flex; }

.chat-list { width: 100%; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line, #e5e7eb); }

.chat-dialog { display: none; flex: 1; min-width: 0; flex-direction: column; min-height: 0; }

.chat-panel[data-view="dialog"] .chat-list { display: none; }

.chat-panel[data-view="dialog"] .chat-dialog { display: flex; }

.chat-panel.is-full .chat-list { width: 340px; flex-shrink: 0; display: flex; }

.chat-panel.is-full .chat-dialog { display: flex; }

.chat-panel.is-full .chat-back { display: none; }

.chat-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px 0; }

.chat-filters button { border: 1px solid var(--line, #e5e7eb); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; }

.chat-filters button.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; }

.chat-search { display: flex; gap: 6px; padding: 8px 10px; }

.chat-search input,
.chat-search select { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; font: inherit; }

.chat-items { flex: 1; overflow-y: auto; }

.chat-item { display: flex; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line, #f1f1f1); background: none; cursor: pointer; font: inherit; align-items: flex-start; }

.chat-item:hover { background: var(--bg, #f9fafb); }

.chat-item.active { background: var(--primary-soft); }

.chat-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.chat-item-top { display: flex; justify-content: space-between; gap: 8px; }

.chat-item-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-item-top time { font-size: 11px; color: var(--muted, #6b7280); flex-shrink: 0; }

.chat-item-sub { font-size: 12.5px; color: var(--muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-item-sub i { font-style: normal; color: var(--primary); font-weight: 600; }

.chat-item-tag { font-size: 11px; color: var(--muted, #6b7280); }

.chat-empty { padding: 24px; text-align: center; color: var(--muted, #6b7280); font-size: 14px; margin: auto; }

.chat-people { border-top: 1px solid var(--line, #e5e7eb); max-height: 38%; overflow-y: auto; padding: 6px 0; }

.chat-people-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #6b7280); padding: 4px 12px; }

.chat-person { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 7px 12px; cursor: pointer; font: inherit; text-align: left; }

.chat-person:hover { background: var(--bg, #f9fafb); }

.chat-person small { margin-left: auto; color: var(--muted, #6b7280); font-size: 11px; }

.chat-person .dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; }

.chat-person .dot.on { background: #22c55e; }

.chat-dhead { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line, #e5e7eb); flex-shrink: 0; }

.chat-dtitle { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.chat-dtitle b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-dtitle span { font-size: 12px; color: var(--muted, #6b7280); }

.chat-dtools { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.chat-dbody { flex: 1; min-height: 0; display: flex; }

.chat-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); min-width: 0; }

.msg { max-width: 82%; padding: 8px 12px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); font-size: 14px; word-wrap: break-word; overflow-wrap: anywhere; }

.msg time { display: block; text-align: right; font-size: 10.5px; color: var(--muted, #9ca3af); margin-top: 2px; }

.msg-who { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted, #6b7280); margin-bottom: 2px; }

.msg-who a { color: inherit; text-decoration: underline dotted; cursor: pointer; }

.msg-out { align-self: flex-end; background: var(--primary-soft); }

.msg-in { align-self: flex-start; }

.msg-note { align-self: flex-end; background: #eef2ff; border: 1px dashed #a5b4fc; }

.msg-sys { align-self: center; background: none; box-shadow: none; color: var(--muted, #6b7280); font-size: 12px; padding: 2px; }

.chat-card { display: none; width: 260px; flex-shrink: 0; border-left: 1px solid var(--line, #e5e7eb); overflow-y: auto; padding: 12px; font-size: 13px; }

.chat-panel.is-full .chat-card { display: block; }

.chat-dialog.show-info .chat-card { display: block; position: absolute; right: 0; top: 49px; bottom: 0; background: #fff; z-index: 2; width: min(300px, 100%); box-shadow: -4px 0 14px rgba(0,0,0,.1); }

.chat-panel.is-full .chat-dialog.show-info .chat-card { position: static; box-shadow: none; }

.chat-dialog { position: relative; }

.chat-card-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #6b7280); margin: 10px 0 4px; }

.chat-card-title:first-child { margin-top: 0; }

.chat-card-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line, #f1f1f1); }

.chat-card-row span { color: var(--muted, #6b7280); }

.chat-card-row b { text-align: right; font-weight: 600; overflow-wrap: anywhere; }

.chat-card-none { color: var(--muted, #9ca3af); }

.chat-typing { height: 18px; padding: 0 14px; font-size: 12px; color: var(--muted, #6b7280); font-style: italic; flex-shrink: 0; }

.chat-compose { border-top: 1px solid var(--line, #e5e7eb); padding: 8px 12px 12px; position: relative; flex-shrink: 0; }

.chat-compose-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }

.chat-note-toggle { font-size: 13px; display: flex; align-items: center; gap: 6px; cursor: pointer; }

.chat-compose-row { display: flex; gap: 8px; align-items: flex-end; }

.chat-compose-row .icon-btn { flex: none; width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0; margin: 0; line-height: 0; align-self: flex-end; }

.chat-compose-row .icon-btn .i { display: block; margin: 0; }

.chat-compose textarea { flex: 1; resize: none; padding: 9px 12px; border: 1px solid var(--line, #d1d5db); border-radius: 10px; font: inherit; max-height: 120px; }

.chat-tpl { position: absolute; bottom: 100%; left: 12px; right: 12px; max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); z-index: 5; }

.chat-tpl button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px; cursor: pointer; font: inherit; border-bottom: 1px solid var(--line, #f1f1f1); }

.chat-tpl button:hover { background: var(--bg, #f9fafb); }

.chat-tpl span { display: block; font-size: 12.5px; color: var(--muted, #6b7280); }

.chat-toasts { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }

.chat-toast { display: flex; gap: 10px; align-items: center; text-align: left; background: #141a26; color: #fff; border: 0; border-radius: 12px; padding: 10px 14px; cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,.3); font: inherit; animation: chatin .25s ease-out; }

.chat-toast.out { opacity: 0; transform: translateX(-12px); transition: .3s; }

.chat-toast-body { display: flex; flex-direction: column; min-width: 0; }

.chat-toast-body span { font-size: 13px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes chatin{ from { opacity: 0; transform: translateY(10px); } }

.chat-pick { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; margin: 10px 0; }

.chat-settings label { display: block; margin: 10px 0; font-size: 13px; font-weight: 600; }

.chat-settings textarea,
.chat-settings input:not([type=checkbox]) { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line, #d1d5db); border-radius: 8px; font: inherit; font-weight: 400; }

.chat-set-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

[data-user-chat] { cursor: pointer; }

@media (max-width: 900px) {
  .chat-panel,
.chat-panel.is-full { left: 0; width: auto; top: var(--topbar-h); z-index: 58; }

  .chat-panel [data-act="full"] { display: none !important; }

  .chat-panel.is-full .chat-list { width: 100%; }

  .chat-panel.is-full[data-view="dialog"] .chat-list { display: none; }

  .chat-panel.is-full .chat-back { display: inline-flex; }

  .chat-panel.is-full .chat-card { display: none; }

  .chat-panel.is-full .chat-dialog.show-info .chat-card { display: block; position: absolute; }
}

.field-caret i[data-user-chat],
.peer[data-user-chat],
.peer-chip[data-user-chat],
.lock-chip[data-user-chat],
.dlg-owner[data-user-chat] { pointer-events: auto; cursor: pointer; }

.field-caret i[data-user-chat]:hover,
.peer[data-user-chat]:hover,
.lock-chip[data-user-chat]:hover { filter: brightness(.92); text-decoration: underline; }

.chat-panel:not(.is-full) .chat-dhead { flex-wrap: wrap; row-gap: 6px; }

.chat-panel:not(.is-full) .chat-dtools { width: 100%; justify-content: flex-start; order: 3; }

.chat-head-actions .icon-btn { border: 0; background: none; }

.chat-head-actions .icon-btn:hover { background: var(--surface-3); }


/* вложения, эмодзи, перетаскивание */
.msg a { color: var(--primary); text-decoration: underline; }

.msg .big-emoji { font-size: 38px; line-height: 1.15; }

.att-img { display: block; margin: 2px 0 4px; border-radius: 10px; overflow: hidden; max-width: 260px; }

.att-img img { display: block; width: 100%; max-height: 260px; object-fit: cover; }

.att-video { display: block; max-width: 260px; width: 100%; border-radius: 10px; margin: 2px 0 4px; background: #000; }

.att-file { display: flex; align-items: center; gap: 10px; text-decoration: none !important; color: inherit !important; padding: 4px 0; min-width: 190px; }

.att-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; }

.att-meta { display: flex; flex-direction: column; min-width: 0; }

.att-meta b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }

.att-meta small { font-size: 11px; opacity: .65; }

.att-viewer { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 200; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }

.att-viewer img { max-width: 94vw; max-height: 92vh; border-radius: 8px; }

.att-viewer button { position: absolute; top: 14px; right: 18px; font-size: 34px; color: #fff; background: none; border: 0; cursor: pointer; }

.chat-pending { display: flex; gap: 8px; flex-wrap: wrap; }

.chat-pending:not(:empty) { margin-bottom: 8px; }

.pend { display: flex; align-items: center; gap: 8px; background: var(--surface-3); border-radius: 10px; padding: 5px 8px; max-width: 220px; font-size: 12px; }

.pend img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }

.pend .att-ico { width: 34px; height: 34px; }

.pend-name { display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pend-name small { opacity: .65; overflow: hidden; text-overflow: ellipsis; }

.pend-err { background: var(--danger-soft); color: var(--danger); }

.pend-up { opacity: .75; }

.pend button { border: 0; background: none; font-size: 18px; cursor: pointer; color: inherit; }

.chat-emoji-btn { font-size: 18px; }

.chat-emoji { position: absolute; left: 12px; bottom: 100%; width: min(340px, calc(100% - 24px)); max-height: 250px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-2); padding: 8px; z-index: 6; }

.chat-emoji-g { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 6px 4px 2px; }

.chat-emoji-row { display: flex; flex-wrap: wrap; }

.chat-emoji-row button { border: 0; background: none; font-size: 22px; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; }

.chat-emoji-row button:hover { background: var(--surface-3); }

.chat-dialog.drop::after-old { content: ''; position: absolute; inset: 0; background: rgba(37,99,235,.12); border: 2px dashed var(--primary); color: var(--primary); font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 8; pointer-events: none; }

.chat-compose-row .icon-btn { border: 0; background: none; }

.chat-compose-row .icon-btn:hover { background: var(--surface-3); }


/* мессенджер как приложение */
.chat-head-actions .icon-btn.is-on { background: var(--success-soft); }

body.messenger-app { margin: 0; background: #fff; overscroll-behavior: none; }

.messenger-app .chat-panel { top: 0; left: 0; right: 0; bottom: 0; width: auto; border: 0; box-shadow: none; z-index: 1; padding-top: env(safe-area-inset-top); padding-bottom: var(--sab, 0px); background: #fff; }

.messenger-app .chat-head { background: #141a26; border: 0; padding-top: 10px; padding-bottom: 10px; }

.messenger-app .chat-tabs { background: rgba(255,255,255,.1); }

.messenger-app .chat-tabs button { color: #cbd5e1; }

.messenger-app .chat-tabs button.active { background: #fff; color: #141a26; }

.messenger-app .chat-head-actions .icon-btn { color: #fff; }

.messenger-app [data-act="full"] { display: none; }

.messenger-app .chat-item { padding: 13px 14px; }

.messenger-app .chat-compose { padding-bottom: calc(10px + var(--sab, 0px)); }

@media (max-width: 900px) {
  .chat-compose textarea { font-size: 16px; }

  .chat-search input,
.chat-search select { font-size: 16px; }

  .chat-msgs { padding: 12px 10px; }

  .msg { max-width: 90%; }
}

@media (max-width: 900px) {
  .chat-dhead { flex-wrap: wrap; row-gap: 6px; }

  .chat-dtools { width: 100%; justify-content: flex-start; order: 3; }
}


/* Настройки чата: аккуратная карточка с прокруткой */
.dlg.dlg-chatset { width: min(640px, 100%); max-height: min(88dvh, 860px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }

.dlg-chatset .chat-settings { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.dlg-chatset .chat-settings > h2 { margin: 0; padding: 18px 22px 12px; font-size: 19px; }

.dlg-chatset .chat-settings .cs-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px 8px; }

.dlg-chatset .chat-settings label { display: block; margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--text-2, inherit); }

.dlg-chatset .chat-settings .chat-note-toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 14px; }

.dlg-chatset .chat-settings .chat-note-toggle input { width: 20px; height: 20px; margin: 0; flex: none; }

.dlg-chatset .chat-settings textarea,
.dlg-chatset .chat-settings input:not([type=checkbox]) { box-sizing: border-box; display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 15px; font-weight: 400; line-height: 1.4; border: 1px solid var(--line, #d1d5db); border-radius: 10px; background: var(--surface, #fff); color: inherit; resize: vertical; }

.dlg-chatset .chat-set-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.dlg-chatset .chat-set-row > label { min-width: 0; }

.dlg-chatset .chat-settings .dlg-actions { margin: 0; padding: 14px 22px calc(14px + var(--sab, 0px)); border-top: 1px solid var(--line, #e5e7eb); background: var(--surface, #fff); }

@media (max-width: 640px) {
  .dlg.dlg-chatset { max-height: 94dvh; border-radius: 20px 20px 0 0; }

  .dlg-chatset .chat-set-row { grid-template-columns: 1fr; gap: 0; }

  .dlg-chatset .chat-settings > h2 { padding: 18px 18px 10px; }

  .dlg-chatset .chat-settings .cs-body { padding: 0 18px 8px; }

  .dlg-chatset .chat-settings .dlg-actions { padding-left: 18px; padding-right: 18px; }
}

/* Иконки панели чата */
.chat-head-actions .icon-btn .i,
.chat-compose-row .icon-btn .i { width: 20px; height: 20px; }

.chat-head-actions [data-act="push"].is-on { color: var(--primary); }

.chat-head-actions [data-act="push"]:not(.is-on) { color: var(--muted); }

.chat-sound { display: inline-flex; }

.pend > button[data-act="rm-file"] .i { width: 16px; height: 16px; }


/* Журнал ошибок */
.errlog { padding: 16px; }

.errlog-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 10px; }

.errlog-filters,
.errlog-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.errlog-filters .input { width: auto; min-width: 150px; }

.errlog-filters input[type=search] { min-width: 240px; }

.errlog-auto { font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }

.errlog-sum { color: var(--muted); font-size: 13px; margin: 6px 0 12px; }

.errlog-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 12px; text-align: center; color: var(--muted); }

.errlog-row { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--surface); overflow: hidden; }

.errlog-row.lvl-critical,
.errlog-row.lvl-error { border-left: 4px solid var(--danger); }

.errlog-row.lvl-warning { border-left: 4px solid var(--warn); }

.errlog-row summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; flex-wrap: wrap; }

.errlog-row summary::-webkit-details-marker { display: none; }

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

.errlog-msg { flex: 1; min-width: 200px; font-size: 13.5px; overflow-wrap: anywhere; }

.errlog-count { background: var(--danger-soft); color: var(--danger); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }

.errlog-body { padding: 4px 14px 14px; border-top: 1px solid var(--line); }

.errlog-full { font-weight: 600; margin: 10px 0; overflow-wrap: anywhere; white-space: pre-wrap; }

.errlog-body dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; font-size: 13px; margin: 0 0 10px; }

.errlog-body dt { color: var(--muted); }

.errlog-body dd { margin: 0; overflow-wrap: anywhere; }

.errlog-trace { background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: 10px; overflow: auto; max-height: 280px; font-size: 12px; line-height: 1.5; margin: 0 0 10px; }

.errlog-pages { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }

.errlog-pages a { padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; }

.errlog-pages a.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

@media (max-width: 640px) {
 .errlog-body dl { grid-template-columns: 1fr; }
 .errlog-filters input[type=search],
.errlog-filters .input { width: 100%; }
}


/* Тексты витрины */
.texts-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; position: sticky; top: 0; z-index: 3; background: var(--surface); padding: 8px 0; }

.texts-bar .input { flex: 1; min-width: 200px; max-width: 420px; }

.texts-sum { color: var(--muted); font-size: 13px; margin-right: auto; }

.texts-group { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }

.texts-group > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; background: var(--surface-2, #f6f7f9); list-style: none; }

.texts-group > summary::-webkit-details-marker { display: none; }

.texts-n { background: var(--primary-soft); color: var(--primary); border-radius: 999px; padding: 0 9px; font-size: 12px; font-weight: 700; }

.texts-head,
.texts-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(200px, 1.2fr) minmax(200px, 1.2fr); gap: 10px; padding: 8px 14px; align-items: center; }

.texts-head { font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }

.texts-row { border-bottom: 1px solid var(--line); }

.texts-row:last-child { border-bottom: 0; }

.texts-row[hidden] { display: none; }

.texts-def { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }

.texts-foot { margin-top: 14px; }

@media (max-width: 760px) {
 .texts-head { display: none; }
 .texts-row { grid-template-columns: 1fr; gap: 6px; }
}


/* Плашка источника обращения (когда в списке витрина и Forge вперемешку) */
.src-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.5; vertical-align: middle; }

.src-chip.src-shop { background: #e0ecff; color: #1d4ed8; }

.src-chip.src-forge { background: #ffedd5; color: #c2410c; }

.chat-item-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.messenger-app .chat-head-actions [data-act="push"]:not(.is-on) { color: #cbd5e1; }

.messenger-app .chat-head-actions [data-act="push"].is-on { color: #60a5fa; }


/* ---------- быстрый просмотр слева от мессенджера (досье клиента, товар, PDF) ---------- */
button.chat-dtitle { background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: default; padding: 2px 6px; margin: 0 -6px; border-radius: 8px; }

button.chat-dtitle[data-act="client"] { cursor: pointer; }

button.chat-dtitle[data-act="client"]:hover { background: var(--bg, #f3f4f6); }

button.chat-dtitle[data-act="client"] b::after { content: ' ›'; color: var(--muted, #9ca3af); }

.att-prod { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line, #e5e7eb); background: #fff; border-radius: 12px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, box-shadow .2s; }

.att-prod:hover { border-color: #FFC107; box-shadow: 0 4px 14px rgba(0,0,0,.08); }

.att-prod-ico { width: 34px; height: 34px; border-radius: 9px; background: #262626; color: #FFC107; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.att-prod .att-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.att-prod .att-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.att-prod .att-meta small { color: var(--muted, #6b7280); }

.att-prod-go { font-size: 12px; font-weight: 700; color: #b88a00; }

.qv { position: fixed; top: var(--topbar-h, 56px); left: 0; bottom: 0; right: var(--chat-w, 420px); opacity: 0; transition: opacity .2s; }

.qv.is-in { opacity: 1; }

body:not(.chat-docked) .qv,
body.chat-full .qv { right: 0; }

@media (max-width: 900px) {
 .qv { right: 0; top: 0; }
}

.qv-bd { position: absolute; inset: 0; background: rgba(15,15,15,.45); backdrop-filter: blur(2px); }

.qv-win { position: absolute; inset: 14px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px -16px rgba(0,0,0,.5); display: flex; flex-direction: column; overflow: hidden; transform: translateY(10px) scale(.99); transition: transform .22s; }

.qv.is-in .qv-win { transform: none; }

@media (max-width: 900px) {
 .qv-win { inset: 0; border-radius: 0; }
}

.qv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line, #e5e7eb); flex-shrink: 0; }

.qv-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.qv-ttl b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qv-ttl span { font-size: 12px; color: var(--muted, #6b7280); }

.qv-tabs { display: flex; gap: 4px; padding: 8px 14px; border-bottom: 1px solid var(--line, #e5e7eb); overflow-x: auto; flex-shrink: 0; }

.qv-tabs[hidden] { display: none; }

.qv-tabs button { border: 0; background: none; padding: 7px 12px; border-radius: 8px; font: inherit; font-weight: 600; color: var(--muted, #6b7280); cursor: pointer; white-space: nowrap; }

.qv-tabs button.active { background: #262626; color: #FFC107; }

.qv-body { flex: 1; overflow-y: auto; padding: 16px 18px; position: relative; }

.qv-load,
.qv-empty { text-align: center; color: var(--muted, #6b7280); padding: 40px 0; }

.qv-card { border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 6px 14px; margin-bottom: 14px; }

.qv-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid #f1f2f4; font-size: 14px; }

.qv-row:last-child { border-bottom: 0; }
 .qv-row span { color: var(--muted, #6b7280); }
 .qv-row b { text-align: right; word-break: break-word; }

.qv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }

.qv-stats div { background: #f6f7f9; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
 .qv-stats b { font-size: 20px; }
 .qv-stats span { font-size: 12px; color: var(--muted, #6b7280); }

.qv-hint { margin-top: 12px; font-size: 13px; color: var(--muted, #6b7280); }

.qv-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line, #e5e7eb); background: #fff; border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; font: inherit; color: inherit; cursor: pointer; }

div.qv-item { cursor: default; }

button.qv-item:hover { border-color: #FFC107; }

.qv-item b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .qv-item small { color: var(--muted, #6b7280); }
 .qv-item span { font-weight: 700; }

.qv-order { border: 1px solid var(--line, #e5e7eb); border-radius: 12px; margin-bottom: 8px; padding: 0 10px 8px; }

.qv-order summary { display: flex; align-items: center; gap: 10px; padding: 12px 4px; cursor: pointer; list-style: none; }
 .qv-order summary::-webkit-details-marker { display: none; }

.qv-order summary i { margin-left: auto; font-style: normal; font-weight: 800; }

.qv-st { background: #fff3cd; color: #8a6d00; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }

.qv-prod { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 22px; }

@media (max-width: 900px) {
 .qv-prod { grid-template-columns: 1fr; }
}

.qv-main { display: block; width: 100%; aspect-ratio: 4/3; border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: #f3f4f6; cursor: zoom-in; }

.qv-main img { width: 100%; height: 100%; object-fit: contain; }

.qv-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }

.qv-thumbs button { flex: 0 0 72px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; opacity: .7; background: #f3f4f6; }

.qv-thumbs button.active { border-color: #FFC107; opacity: 1; }
 .qv-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.qv-noimg { aspect-ratio: 4/3; border-radius: 14px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; color: #9ca3af; }

.qv-price { font-size: 28px; font-weight: 900; }
 .qv-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 12px; font-size: 13px; color: var(--muted, #6b7280); }

.qv-sum { font-size: 15px; color: #4b5563; margin-bottom: 12px; }
 .qv-h { margin: 18px 0 8px; font-size: 15px; }

.qv-docs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
 .qv-doc { text-align: left; background: #fff; cursor: pointer; font: inherit; }

.qv-body.qv-pdf { padding: 0; display: flex; flex-direction: column; }

.qv-pdf-bar { display: flex; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line, #e5e7eb); }

.qv-pdf-box { position: relative; flex: 1; min-height: 0; background: #525659; }

.qv-pdf-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.qv-pdf-box .spinner { position: absolute; left: 50%; top: 50%; margin: -12px; }

.qv-pdf-box.is-ready .spinner { display: none; }

.spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid rgba(120,120,120,.25); border-top-color: #FFC107; border-radius: 50%; animation: qvspin .8s linear infinite; }

@keyframes qvspin{ to { transform: rotate(360deg); } }

/* тумблер: вместо текста «Витрина TRS» — логотип TRS (маска: цвет как у соседнего логотипа) */
.mode-switch .ms-word { display: block; height: 22px; width: 69px; background: var(--muted); -webkit-mask: url(../../img/osb-wordmark.png) center / contain no-repeat; mask: url(../../img/osb-wordmark.png) center / contain no-repeat; transition: background .2s; }

.mode-switch button.has-logo:hover .ms-word { background: var(--text); }

.mode-switch button.has-logo.is-active .ms-word { background: #0a0a0a; }

.mode-switch.in-drawer .ms-word { height: 18px; width: 56px; }

.src-chip.src-tg { background: #dbf1fd; color: #0369a1; }

.chat-tg { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; }

.chat-tg small { color: #6b7280; font-size: 12px; }

.chat-tg input { flex: 1; min-width: 0; }


/* Крестик закрытия окон — как на витрине */
.osb-x { width: 40px; height: 40px; border-radius: 9999px; border: 0; background: #262626; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .2s, color .2s, transform .2s; }

.osb-x:hover { background: #FFC107; color: #000; transform: rotate(90deg); }

.osb-x:active { transform: rotate(90deg) scale(.92); }

.osb-x:focus-visible { outline: 2px solid #FFC107; outline-offset: 2px; }

.osb-x svg { width: 18px; height: 18px; }

.lb-close { border-radius: 9999px; }

/* Меню настроек — переносится на новые строки, ничего не обрезается */
.set-tabs { flex-wrap: wrap; overflow: visible; }

/* Кнопка «Назад» в мессенджере */
.chat-back { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; border-radius: 9999px; border: 1px solid var(--line, #e5e7eb); background: #fff; color: var(--text, #111827); font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: background .2s, border-color .2s, transform .15s; }

.chat-back svg { width: 16px; height: 16px; transition: transform .2s; }

.chat-back:hover { background: var(--primary-soft, #eef3ff); border-color: #c6d8ff; color: var(--primary, var(--primary)); }

.chat-back:hover svg { transform: translateX(-2px); }

.chat-back:active { transform: scale(.96); }

.att-viewer button { width: 44px; height: 44px; border-radius: 9999px; background: #262626; font-size: 26px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s, transform .2s; }

.att-viewer button:hover { background: #FFC107; color: #000; transform: rotate(90deg); }

.chat-tg .tg-adv { font-size: 12px; color: #6b7280; }
 .chat-tg .tg-adv summary { cursor: pointer; margin: 2px 0 6px; }
 .chat-tg .tg-adv label { display: block; margin-top: 6px; }


/* Команда: список людей и диалогов единым списком */
.chat-item .avatar { position: relative; }

.chat-item .avatar .pdot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #9ca3af; border: 2px solid #fff; }

.chat-item .avatar .pdot.on { background: #22c55e; }

.chat-person-item .chat-item-sub { color: #6b7280; }

/* Поле ответа: выше от нижнего края экрана (телефон, жест «домой») */
.chat-compose { padding-bottom: calc(18px + var(--sab, 0px)); }

.chat-compose-row { padding-bottom: 6px; }

@media (max-width: 900px) {
 .chat-compose { padding-bottom: calc(30px + var(--sab, 0px)); }
}

.messenger-app .chat-compose { padding-bottom: calc(26px + var(--sab, 0px)); }

/* Панель эмодзи (витрина и ERP) */
.emo-pop { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); max-width: 380px; z-index: 60; background: #fff; border: 1px solid #e5e7eb; border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.28); overflow: hidden; display: flex; flex-direction: column; animation: emo-in .16s ease-out; transform-origin: bottom left; color: #111827; font-family: inherit; }

.emo-pop.is-leaving { opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .12s, transform .12s; }

@keyframes emo-in{ from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

.emo-search { padding: 10px 10px 4px; }

.emo-search input { width: 100%; box-sizing: border-box; height: 38px; border: 0; border-radius: 12px; background: #f1f3f5; padding: 0 14px; font-size: 14px; color: inherit; outline: none; }

.emo-search input:focus { box-shadow: 0 0 0 2px #FFC107 inset; background: #fff; }

.emo-tabs { display: flex; gap: 2px; padding: 4px 8px 6px; border-bottom: 1px solid #eef0f3; }

.emo-tabs button { flex: 1; height: 34px; border: 0; background: none; border-radius: 10px; font-size: 19px; cursor: pointer; opacity: .5; transition: background .15s, opacity .15s, transform .15s; }

.emo-tabs button:hover { opacity: .9; }

.emo-tabs button.on { opacity: 1; background: #fff3c4; }

.emo-pop.is-search .emo-tabs { opacity: .4; pointer-events: none; }

.emo-body { height: 250px; overflow-y: auto; padding: 0 8px 8px; position: relative; scrollbar-width: thin; overscroll-behavior: contain; }

.emo-h { position: sticky; top: 0; z-index: 1; background: rgba(255,255,255,.96); backdrop-filter: blur(4px); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9ca3af; padding: 8px 4px 4px; }

.emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); }

.emo-c { height: 38px; border: 0; background: none; border-radius: 10px; font-size: 24px; line-height: 1; cursor: pointer; transition: transform .1s, background .15s; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }

.emo-c:hover { background: #fff3c4; transform: scale(1.22); }

.emo-none { grid-column: 1 / -1; color: #9ca3af; font-size: 13px; padding: 12px 4px; }

.emo-sec:last-child { min-height: 200px; }

@media (max-width: 640px) {
 .emo-pop { max-width: none; }
}

.av-row {display:flex;align-items:center;gap:18px;flex-wrap:wrap}

.av-big {width:96px;height:96px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:38px;font-weight:700;overflow:hidden;flex:none}

.av-big img {width:100%;height:100%;object-fit:cover}

.av-actions {display:flex;gap:8px;align-items:center}

.av-row .hint {flex-basis:100%}

.chat-av {width:var(--av,40px);height:var(--av,40px);border-radius:50%;object-fit:cover;flex:none;display:block}

.avatar img {width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}

.u-avatar {overflow:hidden}
.u-avatar img {width:100%;height:100%;object-fit:cover;display:block}


/* чат сжимает контент сбоку: полоса прокрутки страницы — слева от панели чата */
@media (min-width: 901px) {
  html:has(body.chat-docked) { scrollbar-gutter: auto; }

  body.chat-docked { overflow: hidden; }
}

/* кнопки чата в общем стиле */
.chat-head-actions { gap: 4px; align-items: center; }

.chat-head-actions .icon-btn { width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; color: #475569; background: #f1f5f9; border: 1px solid transparent; transition: background .15s, color .15s, transform .1s, box-shadow .15s; cursor: pointer; padding: 0; }

.chat-head-actions .icon-btn:hover { background: #e2e8f0; color: #0f172a; }

.chat-head-actions .icon-btn:active { transform: scale(.94); }

.chat-head-actions .icon-btn.is-on { background: #dbeafe; color: var(--primary); }

.chat-head-actions [data-act="close"]:hover { background: #fee2e2; color: #dc2626; }

.chat-head-actions [data-act="full"] { background: #eff6ff; color: var(--primary); }

.chat-head-actions [data-act="full"]:hover { background: #dbeafe; }

.chat-head-actions .icon-btn .i { width: 19px; height: 19px; }

.messenger-app .chat-head-actions .icon-btn { background: rgba(255,255,255,.1); color: #e2e8f0; }

.messenger-app .chat-head-actions .icon-btn:hover { background: rgba(255,255,255,.2); color: #fff; }

.messenger-app .chat-head-actions .icon-btn.is-on { background: rgba(96,165,250,.25); color: #93c5fd; }

.chat-head { gap: 6px; padding: 8px; }

.chat-head .chat-tabs button { padding: 6px 10px; }

.chat-head-actions { gap: 3px; }

.chat-head-actions .icon-btn { width: 32px; height: 32px; border-radius: 9px; flex: none; }

.chat-head-actions .icon-btn .i { width: 17px; height: 17px; }

.tile-edit-frame { width: 100%; height: min(84vh, 760px); border: 0; border-radius: 14px; background: #fff; display: block; }

.tile-edit-wrap { position: relative; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(15,23,42,.35); }

.tile-edit-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line, #e5e7eb); font-weight: 800; }

/* на мелких превью лупы нет (клик по картинке по-прежнему открывает просмотр) */
.tm-small > .tm-veil { background: transparent !important; }

.tm-small .tm-lens { display: none !important; }


.only-wide {display:none!important}
@media(min-width:1024px) {
.only-wide {display:inline-flex!important}
}

/* ---- Режим окна рабочего стола: левое меню настроек, нижняя панель кнопок, боковое дерево ---- */
.form-bar {margin-top:6px}

.tree-pane {grid-column:1;grid-row:1 / span 60;position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;background:var(--surface-2);border-right:1px solid var(--line);padding:12px 8px}

.tree-pane h3 {margin:2px 8px 8px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;justify-content:space-between}

.tree-pane button {display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:0;background:none;color:var(--text);font:inherit;font-size:13.5px;padding:7px 8px;border-radius:8px;cursor:pointer}

.tree-pane button:hover {background:#e9edf5}

.tree-pane button.is-active {background:var(--primary-soft);color:var(--primary);font-weight:650}

.tree-pane button em {margin-left:auto;font-style:normal;color:var(--muted);font-size:12px}

.tree-pane .tp-open {margin:10px 4px 0;width:auto;justify-content:center;border:1px solid var(--line);background:#fff;font-weight:600}

.list-group.flash {animation:lgflash 1.2s}

@keyframes lgflash{0%,60%{background:#fff3c4}}


/* ===== OSBOS Messenger: оформление в духе Telegram (только страница /messenger) ===== */
.messenger-app { --tg: hsl(calc(205 + var(--th)) 72% 51%); --tg-out: #e3f4cd; background: #fff; }

.messenger-app .chat-panel { background: #fff; }

.messenger-app .chat-head { background: #fff; color: #111827; border-bottom: 1px solid #eef0f3; padding: 10px 14px; gap: 14px; }

.messenger-app .chat-head::before { content: "OSBOS Messenger"; font-weight: 800; font-size: 15px; color: var(--tg); letter-spacing: .01em; white-space: nowrap; }

.messenger-app .chat-tabs { background: #f1f3f6; border-radius: 999px; padding: 3px; }

.messenger-app .chat-tabs button { border-radius: 999px; padding: 6px 14px; color: #5b6575; }

.messenger-app .chat-tabs button.active { background: var(--tg); color: #fff; box-shadow: none; }

.messenger-app .chat-tabs button.active .chat-count { background: #fff; color: var(--tg); }

.messenger-app .chat-list { background: #fff; border-right: 1px solid #eef0f3; }

.messenger-app .chat-filters button { border: 0; background: #f1f3f6; color: #5b6575; }

.messenger-app .chat-filters button.active { background: var(--tg); color: #fff; }

.messenger-app .chat-search input { border: 0; background: #f1f3f6; border-radius: 999px; padding: 9px 14px; }

.messenger-app .chat-item { border: 0; border-radius: 12px; margin: 1px 6px; width: calc(100% - 12px); padding: 9px 10px; }

.messenger-app .chat-item:hover { background: #f4f6f9; }

.messenger-app .chat-item.active { background: var(--tg); color: #fff; }

.messenger-app .chat-item.active .chat-item-sub,
.messenger-app .chat-item.active time,
.messenger-app .chat-item.active .chat-item-tag,
.messenger-app .chat-item.active .chat-item-sub i { color: rgba(255,255,255,.85); }

.messenger-app .chat-item .avatar,
.messenger-app .chat-item [class*="avatar"] { width: 46px; height: 46px; border-radius: 50%; font-size: 16px; }

.messenger-app .chat-msgs { background: #dbe7d3 radial-gradient(circle at 20% 20%, rgba(255,255,255,.35) 0 2px, transparent 3px) 0 0/34px 34px; padding: 18px max(14px, 8%); gap: 4px; }

.messenger-app .msg { border-radius: 16px; padding: 7px 12px 5px; box-shadow: 0 1px 1px rgba(0,0,0,.12); }

.messenger-app .msg-in { border-bottom-left-radius: 5px; background: #fff; }

.messenger-app .msg-out { border-bottom-right-radius: 5px; background: var(--tg-out); }

.messenger-app .chat-compose { background: #fff; border-top: 0; box-shadow: 0 -1px 0 #eef0f3; }

.messenger-app .chat-compose textarea { border: 0; background: #f1f3f6; border-radius: 22px; padding: 11px 16px; }

.messenger-app .chat-compose-row .btn-primary,
.messenger-app .chat-compose-row [data-act="send"] { border-radius: 50%; background: var(--tg); border-color: var(--tg); }

.messenger-app .chat-head-actions .icon-btn { background: transparent; color: #6b7686; border-radius: 50%; }

.messenger-app .chat-head-actions .icon-btn:hover { background: #f1f3f6; }

.messenger-app .chat-head-actions [data-act="full"] { background: transparent; color: #6b7686; }


/* ===== Вход: экран блокировки в стиле ОС ===== */
body.login-page { min-height: 100vh; background: radial-gradient(1100px 700px at 85% 5%, hsl(var(--h-pk) calc(100% * var(--ts)) 74% / .55), transparent 60%), radial-gradient(1000px 800px at 5% 95%, hsl(var(--h-cy) calc(100% * var(--ts)) 50% / .45), transparent 60%), radial-gradient(900px 600px at 50% 50%, hsl(var(--h-vi) calc(100% * var(--ts)) 65% / .5), transparent 70%), linear-gradient(160deg, var(--t-a), var(--t-b) 55%, var(--t-c)) fixed; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif; color: #fff; }

.login-page .os-clock { position: fixed; top: 7vh; left: 0; right: 0; text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.25); pointer-events: none; }

.login-page .os-date { font-size: 20px; font-weight: 600; text-transform: capitalize; opacity: .92; }

.login-page .os-time { font-size: 96px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }

.login-page .login-wrap { min-height: 100vh; display: grid; place-items: center; padding-top: 22vh; background: none; }

.login-page .login-card { width: min(380px, calc(100vw - 32px)); background: rgba(255,255,255,.2); backdrop-filter: saturate(1.8) blur(30px); -webkit-backdrop-filter: saturate(1.8) blur(30px); border: 1px solid rgba(255,255,255,.35); border-radius: 22px; box-shadow: 0 24px 70px rgba(0,0,0,.35); color: #fff; padding: 26px 26px 20px; }

.login-page .login-logo img { height: 28px; width: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }

.login-page .login-card h1 { color: #fff; font-size: 20px; }

.login-page .login-card .subtitle,
.login-page .login-footer,
.login-page .login-card label { color: rgba(255,255,255,.85); }

.login-page .login-card .input { background: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 12px; }

.login-page .login-card .input::placeholder { color: rgba(255,255,255,.65); }

.login-page .login-card .input:focus { background: rgba(255,255,255,.4); outline: 2px solid rgba(255,255,255,.7); }

.login-page .login-tabs { background: rgba(255,255,255,.2); border-radius: 12px; }

.login-page .login-tabs button { color: #fff; border-radius: 10px; }

.login-page .login-tabs button.is-active { background: rgba(255,255,255,.9); color: #1d1d1f; }

.login-page .btn-primary { background: #0a84ff; border-color: #0a84ff; border-radius: 12px; color: #fff; }

.login-page .login-link { color: #fff; opacity: .85; }

.login-page .notice { border-radius: 12px; }

@media (max-height: 640px) {
 .login-page .os-time { font-size: 56px; }
 .login-page .login-wrap { padding-top: 26vh; }
}

.login-page .login-logo,
.login-page .login-logo img { background: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }

.login-page .login-logo { display: flex; justify-content: center; margin-bottom: 6px; }

.login-page .login-card h1,
.login-page .login-card .subtitle { text-align: center; }

.login-page .os-date { text-transform: none; }

.login-page .os-date::first-letter { text-transform: uppercase; }

.login-page .login-logo { margin-bottom: 16px; }


/* списки: даты в одной ячейке */
.list-dates { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.25; }

.list-dates span { display: flex; justify-content: space-between; gap: 10px; }

.list-dates i { font-style: normal; color: var(--muted, #6b7280); font-size: 12px; }

.list-actions { flex-wrap: nowrap; }

.list-actions .btn { flex: none; }

.list-row .c-main { min-width: 0; }

.list-row .c-main .list-title,
.list-row .c-main b { overflow-wrap: anywhere; }


/* мессенджер: отправка и служебное сообщение */
.chat-compose-row [data-act="send"] { width: 42px; height: 42px; min-width: 42px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0; flex: none; box-shadow: 0 2px 8px rgba(37,99,235,.35); }

.chat-compose-row [data-act="send"] .i { width: 20px; height: 20px; margin: 0 2px 0 0; stroke: #fff; }

.chat-compose-row [data-act="send"]:disabled { opacity: .5; box-shadow: none; }

.svc-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: #5b6575; padding: 3px 12px 3px 4px; border-radius: 999px; background: #f1f3f6; border: 1px solid transparent; user-select: none; transition: background .2s, color .2s, border-color .2s; }

.svc-toggle input { position: absolute; opacity: 0; pointer-events: none; }

.svc-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #cdd3dc; transition: background .2s; flex: none; }

.svc-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); display: grid; place-items: center; transition: transform .2s cubic-bezier(.2,.8,.2,1); color: #8a93a2; }

.svc-knob .i { width: 11px; height: 11px; }

.svc-toggle input:checked ~ .svc-track { background: #f59e0b; }

.svc-toggle input:checked ~ .svc-track .svc-knob { transform: translateX(16px); color: #f59e0b; }

.svc-toggle:has(input:checked) { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

.svc-toggle:has(input:focus-visible) { outline: 2px solid var(--primary, var(--primary)); outline-offset: 2px; }

.chat-compose:has([data-internal]:checked) textarea { background: #fffbeb !important; box-shadow: inset 0 0 0 1px #fcd34d; }


/* аналитика: таблицы детализации */
.an-table { display: flex; flex-direction: column; }

.an-tr { display: grid; grid-template-columns: 170px 110px 1fr; gap: 14px; align-items: center; padding: 11px 6px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }

.an-tr.an-src { grid-template-columns: minmax(180px,1.3fr) 110px 110px minmax(160px,1.2fr); }

.an-tr.an-mat-r { grid-template-columns: minmax(200px,2fr) 110px 100px 100px minmax(150px,1.2fr); }

.an-th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #6b7280); font-weight: 700; }

a.an-tr:hover { background: var(--surface-2, #f7f8fb); }

.an-name { display: flex; align-items: center; gap: 8px; }

.an-share { display: flex; align-items: center; gap: 10px; }
 .an-share .an-track { flex: 1; }
 .an-share em { font-style: normal; font-weight: 700; min-width: 34px; text-align: right; }

.an-table .an-track { height: 8px; }
.list-actions {gap:4px}


/* вход: без «окна», как экран входа macOS / Windows */
.login-page .login-card { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; display: flex; flex-direction: column; align-items: center; width: min(320px, calc(100vw - 32px)); }

.login-page .login-card > * { width: 100%; }

.login-page .login-logo { position: fixed !important; bottom: 28px; left: 0; right: 0; width: 100% !important; margin: 0 !important; opacity: .9; }

.login-page .login-logo img { height: 22px !important; }

.login-page .login-avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.2)); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 10px 30px rgba(0,0,0,.25); width: 96px; }

.login-page .login-avatar .i { width: 46px; height: 46px; stroke: #fff; stroke-width: 1.5; fill: none; }

.login-page .login-card h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; text-shadow: 0 1px 6px rgba(0,0,0,.25); }

.login-page .login-card .subtitle { display: none; }

.login-page .login-card label:not(.login-check) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.login-page .login-card .input { height: 44px; border-radius: 999px; padding: 0 18px; text-align: center; background: rgba(255,255,255,.3); border-color: rgba(255,255,255,.45); margin-bottom: 10px; backdrop-filter: blur(14px); }

.login-page .login-card .input::placeholder { color: rgba(255,255,255,.8); }

.login-page .login-tabs { background: none; justify-content: center; gap: 4px; margin: 4px 0 14px; padding: 0; }

.login-page .login-tabs button { background: none; padding: 5px 14px; border-radius: 999px; font-size: 13px; opacity: .8; }

.login-page .login-tabs button.is-active { background: rgba(255,255,255,.28); color: #fff; opacity: 1; }

.login-page .login-card .btn-primary { height: 44px; border-radius: 999px; background: rgba(255,255,255,.92); color: #1d1d1f; border: 0; font-weight: 600; }

.login-page .login-check { justify-content: center; color: rgba(255,255,255,.85); font-size: 13px; margin: 4px 0 10px; }

.login-page .login-footer { display: none; }

.login-page .login-link { justify-content: center; font-size: 13px; margin-top: 10px; }

.msg { cursor: pointer; }

.msg-reacts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }

.msg-reacts span { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 12px; background: rgba(0,0,0,.06); font-size: 13px; }

.msg-reacts span.mine { background: rgba(42,171,238,.22); }

.msg-reacts b { font-size: 11px; font-weight: 600; }

.msg-menu { position: fixed; z-index: 10000; min-width: 200px; padding: 6px; background: rgba(255,255,255,.97); backdrop-filter: blur(16px); border: 1px solid rgba(0,0,0,.1); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.22); }

.msg-menu > button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left; color: #1d2230; }

.msg-menu > button:hover { background: var(--tg-c); color: #fff; }

.msg-menu .i { width: 16px; height: 16px; }

.mm-emo { display: flex; gap: 2px; padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid rgba(0,0,0,.08); }

.mm-emo button { width: 34px; height: 34px; border: 0; background: none; font-size: 20px; border-radius: 50%; cursor: pointer; transition: transform .1s; }

.mm-emo button:hover { background: rgba(0,0,0,.07); transform: scale(1.18); }

.login-page .login-avatar { margin-top: -36px !important; margin-bottom: 20px !important; }

.login-page .login-card h1 { margin-bottom: 26px !important; }


/* ===== единый стиль «OSBOS» для обычного (плоского/мобильного) интерфейса ===== */
:root { --os-grad: linear-gradient(100deg, var(--t-a2), var(--t-b2) 55%, var(--t-c2)); }

body:not(.dsk):not(.login-page) { background: radial-gradient(900px 420px at 100% -10%, hsl(var(--h-c) 37% 51% / .10), transparent 60%), radial-gradient(800px 420px at 0 0, hsl(var(--h-ac) 69% 58% / .10), transparent 60%), var(--bg); }

.hero { background: radial-gradient(900px 300px at 100% -20%, rgba(255,255,255,.25), transparent 60%), var(--os-grad); box-shadow: 0 14px 40px hsl(var(--h-b) 45% 43% / .32); }

@media (max-width: 899px) {
  .hero { border-radius: 20px; }
}


/* ===== тонкие минималистичные полосы прокрутки ===== */
* {scrollbar-width:thin;scrollbar-color:rgba(110,118,140,.42) transparent}

*::-webkit-scrollbar {width:8px;height:8px}

*::-webkit-scrollbar-track {background:transparent}

*::-webkit-scrollbar-thumb {background:rgba(110,118,140,.38);border-radius:8px;border:2px solid transparent;background-clip:content-box}

*::-webkit-scrollbar-thumb:hover {background:rgba(90,98,125,.65);background-clip:content-box;border:2px solid transparent}

*::-webkit-scrollbar-corner {background:transparent}

/* выпадающие списки и меню не выходят за экран */
select {max-width:100%}

.dropdown,
.menu-pop,
.popover,
[role=listbox],
[role=menu] {max-height:min(70vh,520px);overflow-y:auto;max-width:calc(100vw - 16px)}

/* вход на невысоких экранах: часы не наезжают на аватар */
@media (max-height:780px) {
.login-page .os-time {font-size:64px}
.login-page .os-date {font-size:16px}
.login-page .os-clock {top:3.5vh}
.login-page .login-wrap {padding-top:20vh}
.login-page .login-avatar {width:76px!important;height:76px!important;margin-top:-26px!important}
}

@media (max-height:620px) {
.login-page .os-clock {position:static;padding-top:14px}
.login-page .os-time {font-size:44px}
.login-page .os-date {font-size:14px}
.login-page .login-wrap {min-height:0;padding-top:10px;padding-bottom:20px}
.login-page .login-avatar {width:56px!important;height:56px!important;margin-top:0!important;margin-bottom:10px!important}
.login-page .login-avatar .i {width:28px;height:28px}
.login-page .login-card h1 {margin-bottom:14px!important}
}


/* ===== страж сессии: повторный вход и предупреждение ===== */
.sg-modal {position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:16px;background:rgba(14,16,28,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

.sg-box {width:min(380px,100%);background:#fff;color:#141a26;border-radius:18px;padding:22px 22px 18px;box-shadow:0 30px 80px rgba(0,0,0,.45);display:grid;gap:12px}

.sg-box h2 {margin:0;font-size:19px}
.sg-box p {margin:0;color:#667286;font-size:13.5px;line-height:1.5}

.sg-box label {display:grid;gap:5px;font-size:12.5px;font-weight:600;color:#3a4457}

.sg-box input {height:42px;border:1px solid #cdd5e1;border-radius:11px;padding:0 12px;font:inherit;font-size:15px;background:#fff;color:inherit}

.sg-box input[readonly] {background:#f3f5f9;color:#667286}
.sg-box input:focus {outline:2px solid var(--primary-ring,rgba(60,90,240,.25));border-color:var(--primary,#3b5bdb)}

.sg-err {min-height:16px;color:#d4303d;font-size:13px}

.sg-act {display:grid;gap:8px}
.sg-ok {height:42px;border:0;border-radius:11px;background:var(--primary,#3b5bdb);color:#fff;font:inherit;font-weight:650;cursor:pointer}
.sg-ok:disabled {opacity:.6}

.sg-out {text-align:center;font-size:12.5px;color:#667286}

.sg-warn {position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:99990;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);padding:10px 12px 10px 16px;border-radius:12px;background:#20232b;color:#fff;font-size:13.5px;box-shadow:0 14px 40px rgba(0,0,0,.4)}

.sg-warn button {border:0;border-radius:8px;background:#fff;color:#141a26;font:inherit;font-weight:650;font-size:13px;padding:6px 12px;cursor:pointer;flex:none}

.cs-inline {flex:1;display:flex;flex-direction:column;min-height:0;width:100%}

.cs-inline .cs-tree {flex:1;min-height:0}

.chat-compose textarea { min-height: 42px; box-sizing: border-box; }


/* ===== Лайтбокс: сцена занимает весь экран, картинка всегда по центру и не уходит вниз ===== */
.osb-lightbox { display: block; height: 100vh; height: 100dvh; }

.lb-stage { position: absolute; inset: 0; width: auto; height: auto; padding: 64px 76px; display: flex; align-items: center; justify-content: center; }

.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; flex: 0 1 auto; object-fit: contain; margin: auto; }

@media (max-width: 640px) {
 .lb-stage { padding: 60px 8px 40px; }
 .lb-stage img { max-height: 100%; }
}

.lb-close { right: 16px; top: 16px; }
 .lb-btn { box-sizing: border-box; }

.lb-info { bottom: calc(14px + var(--sab, 0px)); }


/* ===== Действия строки: «Изменить» слева, значки (просмотр/копия/история/удаление) прижаты к правому краю везде ===== */
.list-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 4px; }

.list-actions > [data-act="edit"] + * { margin-left: auto; }

@media (max-width: 900px) {
  .list-row > .c-actions { justify-self: stretch; width: 100%; }

  .list-row .list-actions { justify-content: flex-start; flex-wrap: nowrap; width: 100%; }

  .list-row .list-actions .btn { flex: none; }

  .list-row .list-actions > [data-act="edit"] { flex: 0 1 auto; }

  .list-row .list-actions form { flex: none; }

  .list-row .list-actions form .btn { width: 40px; }

  .list-row .list-actions .btn-icon { width: 40px; }
}


/* ===== Прелоадеры: переход между страницами и ожидание картинок ===== */
.osb-pageload { position: fixed; z-index: 9990; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--primary, #2563eb), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: osb-pl 1s linear infinite; pointer-events: none; }

@keyframes osb-pl{ from { background-position: -40% 0; } to { background-position: 140% 0; } }

img[loading="lazy"]:not([src]),
.tm-frame.is-buffering { background: var(--surface-2, #f1f3f7); }


/* редактор группы чата */
.grp-ed .grp-l { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 13px; }

.grp-ed .grp-h { margin: 0 0 6px; font-size: 12px; color: var(--faint, #8e8e93); }

.grp-ed .chat-pick label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.grp-ed .chat-pick small { color: var(--faint, #8e8e93); }

.grp-ed .dlg-actions { flex-wrap: wrap; }


/* чат: галочки доставки/прочтения, цитата ответа, панель ответа */
.msg-read { display: inline-flex; align-items: center; margin-left: 5px; vertical-align: -1px; opacity: .55; }

.msg-read.is-read { color: #2aabee; opacity: 1; }

.msg-quote { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 5px; padding: 3px 8px; border-left: 3px solid #2aabee; border-radius: 3px 8px 8px 3px; background: rgba(42, 171, 238, .12); font-size: .88em; line-height: 1.3; text-align: left; }

.msg-quote b { font-weight: 600; color: #1f8dc9; }

.msg-quote span { color: inherit; opacity: .78; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

.chat-replybar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }

.chat-replybar .msg-quote { flex: 1; min-width: 0; margin: 0; }

.msg-note .msg-quote,
.msg-out .msg-quote { background: rgba(255, 255, 255, .45); }

/* телефон с нижним меню: чат уже стоит над ним, запас под «чёлку» снизу не нужен */
@media (max-width: 900px) {
 body:not(.messenger-app) .chat-compose { padding-bottom: 12px; }
}


/* ===== строка ввода чата: единая высота 40px, ровные зазоры, без пустоты снизу (итоговые правила) ===== */
.chat-compose,
.messenger-app .chat-compose { padding: 8px 12px 10px; }

.chat-compose-row { display: flex; align-items: flex-end; gap: 6px; padding: 0; }

.chat-compose-row .icon-btn { width: 40px; height: 40px; }

.chat-compose-row .icon-btn:last-of-type { margin-right: 2px; }

.chat-compose textarea,
.messenger-app .chat-compose textarea { min-height: 40px; height: 40px; padding: 9px 14px; line-height: 20px; border-radius: 20px; box-sizing: border-box; overflow-y: auto; }

.chat-compose-row [data-act="send"] { width: 40px; height: 40px; min-width: 40px; margin-left: 4px; }

.chat-compose-tools:empty { display: none; }

.chat-compose-tools { margin-bottom: 6px; }

@media (max-width: 900px) {
  body:not(.messenger-app) .chat-compose { padding-bottom: 10px; }

  .messenger-app .chat-compose { padding-bottom: calc(8px + var(--sab, 0px)); }

  .chat-compose textarea { font-size: 16px; }
}

@media (max-width: 900px) {
  .chat-compose textarea,
.messenger-app .chat-compose textarea { min-height: 44px; height: 44px; padding: 11px 14px; border-radius: 22px; }

  .chat-compose-row .icon-btn,
.chat-compose-row [data-act="send"] { width: 44px; height: 44px; min-width: 44px; }
}


/* переход по подразделам без перезагрузки: приглушённое содержимое и спиннер (список подразделов остаётся на месте) */
main.page.pn-busy { position: relative; }

main.page.pn-busy > :not(.set-tabs):not(.mod-title) { opacity: .4; pointer-events: none; transition: opacity .15s; }

main.page.pn-busy::after { content: ""; position: fixed; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 3px solid rgba(0, 122, 255, .25); border-top-color: var(--ap, #007aff); border-radius: 50%; animation: pn-spin .7s linear infinite; z-index: 30; }

@media (min-width: 721px) {
 main.page.pn-busy:has(> .set-tabs)::after { left: calc(50% + 108px); }
}

@keyframes pn-spin{ to { transform: rotate(360deg); } }


/* интерфейс не выделяется мышью и долгим нажатием; выделять можно только поля ввода, редакторы, код и блоки с data-selectable */
html,
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

input,
textarea,
select,
[contenteditable],
[contenteditable] *,
pre,
code,
kbd,
samp,
.selectable,
[data-selectable],
[data-selectable] * { -webkit-user-select: text; user-select: text; }

img,
svg,
a,
button { -webkit-user-drag: none; }


/* ===== вход в плоском интерфейсе (и на телефоне): обычная светлая страница, без обоев и часов ОС ===== */
html:has(body.login-flat),
html[data-pf="apple"]:has(body.login-flat) { background: #f2f2f7; }

body.login-page.login-flat,
html[data-pf="apple"] body.login-page.login-flat { background: #f2f2f7; }

.login-flat .os-clock,
.login-flat .login-avatar { display: none !important; }

.login-flat .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }

.login-flat .login-card { width: min(400px, 100%); background: #fff !important; border: .5px solid rgba(60, 60, 67, .16) !important; border-radius: 20px !important; box-shadow: 0 8px 30px rgba(16, 24, 40, .08) !important; padding: 28px 24px 22px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

.login-flat .login-logo { position: static !important; display: flex; justify-content: center; margin: 0 0 18px !important; opacity: 1; }

.login-flat .login-logo img { height: 26px !important; filter: brightness(0) opacity(.86); }

.login-flat .login-card h1 { color: #1c1c1e; font-size: 22px; font-weight: 700; text-align: center; text-shadow: none; margin: 0 0 4px; }

.login-flat .login-card .subtitle { display: block !important; color: #6c6c70; text-align: center; margin: 0 0 18px; }

.login-flat .login-card label { color: #3a3a3c; }

.login-flat .login-card .input { height: 46px; border-radius: 12px; padding: 0 14px; text-align: left; background: #fff !important; border: 1px solid #d1d1d6 !important; color: #1c1c1e !important; margin-bottom: 12px; backdrop-filter: none !important; }

.login-flat .login-card .input::placeholder { color: #8e8e93 !important; }

.login-flat .login-card .input:focus { outline: 2px solid rgba(0, 122, 255, .35); border-color: #007aff !important; }

.login-flat .login-tabs { background: #eeeef0; border-radius: 12px; padding: 3px; gap: 2px; margin: 0 0 16px; justify-content: stretch; }

.login-flat .login-tabs button { color: #3a3a3c; opacity: 1; border-radius: 9px; font-size: 14px; padding: 0 10px; }

.login-flat .login-tabs button.is-active { background: #fff; color: #1c1c1e; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }

.login-flat .login-check { color: #3a3a3c; }

.login-flat .login-card .btn-primary,
html[data-pf="apple"] .login-flat .login-card .btn-primary { height: 46px; border-radius: 12px; background: #007aff !important; border-color: #007aff !important; color: #fff !important; box-shadow: none; margin-top: 6px; }

.login-flat .login-card .btn-primary svg { stroke: #fff; }

.login-flat .login-link { color: #007aff; opacity: 1; }

.login-flat .login-footer { color: #8e8e93; }


/* ===== Единый компонент прелоадера (используется везде) =====
   .osb-spin           — круг-индикатор (модификаторы .sm / .lg), цвет — акцент интерфейса
   .osb-loader         — блок «идёт загрузка» (круг + необязательная подпись), помещается в пустой контейнер
   .is-loading         — состояние контейнера: содержимое приглушается, по центру крутится круг (OSB.loading(el, true))
   .osb-pageload       — тонкая полоса сверху для навигации и долгих запросов (включается автоматически) */
:root { --spin-c: var(--ap, var(--primary, #2563eb)); }

.osb-spin { display: inline-block; flex: none; width: var(--sp, 28px); height: var(--sp, 28px); border-radius: 50%; border: 3px solid rgba(120, 130, 150, .28); border-top-color: var(--spin-c); animation: osb-spin .75s linear infinite; box-sizing: border-box; }

.osb-spin.sm { --sp: 16px; border-width: 2px; }

.osb-spin.lg { --sp: 44px; border-width: 4px; }

.osb-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 36px 16px; min-height: 120px; color: var(--muted, #6b7280); font-size: 13px; text-align: center; }

.osb-loader.fill { position: absolute; inset: 0; padding: 0; min-height: 0; background: var(--wl-bg, rgba(255, 255, 255, .72)); z-index: 5; }

.is-loading { position: relative; min-height: 96px; }

.is-loading > * { opacity: .38; pointer-events: none; transition: opacity .15s; }

.is-loading::after { content: ""; position: absolute; z-index: 6; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid rgba(120, 130, 150, .28); border-top-color: var(--spin-c); animation: osb-spin .75s linear infinite; }

.is-loading > .osb-loader { opacity: 1; }

.is-loading:has(> .osb-loader)::after { display: none; }

/* старые прелоадеры приведены к единому виду */
.spinner { border-color: rgba(120, 130, 150, .28); border-top-color: var(--spin-c); width: 28px; height: 28px; animation: osb-spin .75s linear infinite; }

.osb-pageload { background-image: linear-gradient(90deg, transparent, var(--spin-c), transparent); }

.tm-frame::after { border-top-color: var(--spin-c); }

.btn.is-busy::after { animation-duration: .75s; }

/* окна ОС: общий круг загрузки */
.osb-pageload.is-center::after { content: ""; position: fixed; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(120, 130, 150, .3); border-top-color: var(--spin-c); animation: osb-spin .75s linear infinite; }

.fm-panel > .osb-loader.fill { top: 52px; }

.dsk-desk .osb-loader.fill,
.wl { --wl-bg: rgba(245, 247, 251, .92); }


/* ===== переключатель режима интерфейса: «Классический | OSBOS» ===== */
.mode-switch { display: none; align-items: center; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(120, 120, 128, .14); }

@media (min-width: 900px) {
 .mode-switch { display: inline-flex; }
}

.mode-switch .ms { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted, #6b7280); text-decoration: none; white-space: nowrap; cursor: pointer; border: 0; background: none; }

.mode-switch .ms .i { width: 15px; height: 15px; }

.mode-switch .ms:hover:not(.on) { color: var(--text, #111827); }

.mode-switch .ms.on { background: #fff; color: var(--text, #111827); box-shadow: 0 1px 3px rgba(0, 0, 0, .16); cursor: default; }

@media (max-width: 1100px) {
 .mode-switch .ms span:not(.i) { display: none; }
 .mode-switch .ms { padding: 0 9px; }
 .mode-switch .ms.on span:not(.i) { display: inline; }
}


/* нижний отступ «домашней полосы»: только в установленном приложении; в Safari панель браузера уже вне страницы — иначе под нижним меню остаётся пустая полоса */
:root { --sab: 0px; }

@media (display-mode: standalone) {
 :root { --sab: env(safe-area-inset-bottom); }
}

html.is-standalone { --sab: env(safe-area-inset-bottom); }

.form-bar [data-fd-cancel] { order: -1; }


/* стрелки-подсказки на лентах плиток подразделов (только телефон/планшет, где лента горизонтальная) */
.sc-arr { position: fixed; z-index: 60; width: 22px; height: 22px; border-radius: 50%; display: none; align-items: center; justify-content: center; pointer-events: none; color: var(--ink-2, #475569); background: color-mix(in srgb, var(--surface, #fff) 92%, transparent); box-shadow: 0 1px 4px rgba(15,23,42,.18); opacity: 0; transition: opacity .15s; }

.sc-arr.on { opacity: 1; }

@media (max-width: 1100px) {
 .sc-arr { display: flex; }
}

.key-reveal { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; vertical-align: middle; }

.key-reveal code.is-open { word-break: break-all; user-select: all; }

.key-reveal .pw-eye { position: static; transform: none; flex: none; width: 30px; height: 30px; display: inline-grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--muted); }

.key-reveal .pw-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }


/* ===== Структура каталога: аккуратное дерево + статичный нижний блок ===== */
.cs-inline,
.dlg.dlg-structure { --cs-line: color-mix(in srgb, var(--muted, #8a93a3) 45%, transparent); }

.cs-inline { display: flex; flex-direction: column; min-height: 0; width: 100%; height: 100%; }

.cs-inline .cs-head,
.dlg-structure .cs-head { padding: 16px 20px 10px; }

.cs-inline .cs-tree { flex: 1; min-height: 0; margin: 0 16px; overflow-y: auto; padding: 8px 6px; }

.cs-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); background: rgba(249,249,251,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); margin-top: 12px; }

.cs-foot .cs-ro { margin-right: auto; }

.cs-foot .btn-cancel { background: var(--fill, #ececf0); color: var(--text, #1c1c1e); border: 0; }

.cs-tree .cs-row { margin: 0; padding: 3px 8px 3px 8px; min-height: 40px; background: transparent; border: 0; border-radius: 10px; gap: 6px; }

.cs-tree .cs-row:hover { background: var(--surface, #fff); box-shadow: 0 0 0 1px var(--line); }

.cs-tree .cs-row.is-root { margin-top: 6px; }

.cs-tree .cs-row.is-root .cs-name { font-weight: 700; }

.cs-tree .cs-row.is-child .cs-name { font-weight: 500; }

.cs-ind { display: flex; align-self: stretch; flex: none; }

.cs-g { display: block; width: 24px; position: relative; flex: none; }

.cs-g.pipe::before,
.cs-g.tee::before { content: ''; position: absolute; left: 11px; top: -3px; bottom: -3px; border-left: 1.5px solid var(--cs-line); }

.cs-g.elb::before { content: ''; position: absolute; left: 11px; top: -3px; height: calc(50% + 3px); border-left: 1.5px solid var(--cs-line); border-bottom: 1.5px solid var(--cs-line); border-bottom-left-radius: 8px; width: 12px; box-sizing: border-box; }

.cs-g.tee::after { content: ''; position: absolute; left: 11px; top: 50%; width: 12px; border-top: 1.5px solid var(--cs-line); }

.cs-ico { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: var(--primary, #2563eb); }

.cs-ico.is-leaf::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--faint, #b5bcc9); }

.cs-ico svg { width: 18px; height: 18px; }

.cs-row.is-into { background: var(--primary-soft) !important; box-shadow: 0 0 0 1.5px var(--primary) !important; }

@media (max-width: 640px) {
 .cs-tree .cs-row { flex-wrap: nowrap; }
 .cs-ctl button { width: 30px; height: 30px; }
 .cs-foot { padding: 10px 14px; }
}


/* панель-список: кнопки создания внизу, статично */
.form-bar.list-bar { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }

.form-bar.list-bar .btn-create { white-space: nowrap; }

.cs-inline .osb-x { display: none; }

@media (max-width: 640px) {
  .cs-tree .cs-row { flex-wrap: wrap; row-gap: 0; }

  .cs-tree .cs-name { flex: 1 1 0; min-width: 90px; white-space: normal; }

  .cs-tree .cs-ctl { flex: 1 0 100%; justify-content: flex-end; padding-left: calc(var(--d, 0) * 24px + 52px); }
}

/* Структура каталога: кнопки в общей закреплённой панели, заголовок окна не дублируется */
html.is-embed.fs-bar .cs-page { height: calc(100vh - var(--fbh, 0px)) !important; }
html.is-embed .cs-inline .cs-head h2 { display: none; }
.cs-page > .cs-foot.form-bar { border-top: 1px solid var(--line); }

/* Окно с нижней панелью: после прокрутки до конца между содержимым и панелью остаётся зазор */
html.is-embed.fs-bar body { padding-bottom: 14px; box-sizing: border-box; }
html.is-embed.fs-bar .cs-inline .cs-tree, html.is-embed.fs-bar .cs-page .cs-tree { margin-bottom: 14px; }

/* Папки командного мессенджера */
.chat-title { font-size: 15px; letter-spacing: .2px; }
.chat-folders { display: flex; gap: 6px; padding: 8px 10px 0; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.chat-folders::-webkit-scrollbar { display: none; }
.chat-folder { border: 1px solid var(--line, #e5e7eb); background: var(--card, #fff); color: var(--muted, #6b7280); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; user-select: none; -webkit-user-select: none; }
.chat-folder.active { background: var(--primary-soft, #e0e7ff); color: var(--primary, #4f46e5); border-color: transparent; }
.chat-folder-add { padding: 6px 9px; }
.chat-folder-add svg { width: 14px; height: 14px; }
.chat-folder .chat-count { margin: 0; }
.msg-menu .mm-title { padding: 6px 12px 2px; font-size: 11px; color: var(--muted, #6b7280); text-transform: uppercase; }
.chat-item { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.messenger-app .chat-title { color: #fff; }

/* чекбоксы «где показывать» у общих публикаций */
.check-row { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 6px 0 2px; }
.check-row .check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.check-row .check input { width: 18px; height: 18px; accent-color: var(--primary, #2563eb); }

.att-viewer .av-spin { position: absolute; width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; animation: avspin .8s linear infinite; }
@keyframes avspin { to { transform: rotate(360deg); } }
.att-viewer .av-x { z-index: 2; top: calc(14px + env(safe-area-inset-top, 0px)); }
.att-viewer .av-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; justify-content: center; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); cursor: default; }
.att-viewer .av-bar button { position: static; width: auto; height: 44px; border-radius: 22px; padding: 0 22px; font-size: 16px; color: #fff; background: rgba(60,60,60,.85); transform: none; }
.att-viewer .av-bar button:hover { transform: none; background: #FFC107; color: #000; }

/* окна и модалки: область прокрутки заканчивается НАД панелью кнопок (полоса прокрутки не уходит под неё) */
html.is-embed.fs-bar, html.is-embed:has(.ed-bar) { overflow: hidden; height: 100%; }
html.is-embed.fs-bar > body { position: fixed; top: 0; left: 0; right: 0; bottom: var(--fbh, 64px); overflow-y: auto; overflow-x: hidden; }
html.is-embed:not(.fs-bar):has(.ed-bar) > body { position: fixed; top: 0; left: 0; right: 0; bottom: var(--edh, 61px); overflow-y: auto; overflow-x: hidden; }
html.is-embed.fs-bar .page::after, html.is-embed:has(.ed-bar) .page::after { display: none !important; }

/* окна редактора (новость, статья…): без лишнего отступа сверху, внизу — небольшой запас над панелью кнопок */
html.is-embed main.page > form.editor > .card { margin-top: 0 !important; margin-bottom: 20px !important; }
html.is-embed main.page:has(> form.editor) { gap: 0 !important; row-gap: 0 !important; }

/* чат: плавное появление сообщений, «призрак» отправки, затемнение поля, загрузка вложений */
@keyframes msgIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.chat-msgs .msg-new { animation: msgIn .26s cubic-bezier(.2,.8,.2,1) both; }
.msg-ghost { opacity: .82; }
.msg-spin { display: flex; align-items: center; justify-content: center; min-width: 160px; min-height: 84px; border-radius: 10px; background: rgba(0,0,0,.05); margin: 2px 0 4px; }
.msg-spin .spin, .chat-compose [data-act="send"].is-busy::after { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(100,116,139,.3); border-top-color: var(--primary, #2563eb); animation: avspin .8s linear infinite; display: inline-block; }
.chat-compose [data-act="send"].is-busy { position: relative; color: transparent !important; }
.chat-compose [data-act="send"].is-busy > * { opacity: 0; }
.chat-compose [data-act="send"].is-busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-top-color: #fff; border-color: rgba(255,255,255,.4); border-top-color: #fff; }
.chat-compose.is-sending textarea { opacity: .5; background: rgba(0,0,0,.06); cursor: progress; }
.chat-compose.is-sending .icon-btn[data-act="attach"], .chat-compose.is-sending .icon-btn[data-act="emoji"] { opacity: .5; pointer-events: none; }
.att-img { display: block; border-radius: 10px; min-width: 160px; min-height: 96px; background: linear-gradient(100deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.05) 70%) 0 0 / 220% 100%; animation: shim 1.2s linear infinite; }
.att-img:has(img.is-ld) { min-width: 0; min-height: 0; background: none; animation: none; }
.att-img img { opacity: 0; transition: opacity .3s; }
.att-img img.is-ld { opacity: 1; }
@keyframes shim { to { background-position: -120% 0; } }

/* заготовки сообщений при первой загрузке переписки */
.chat-skel { background: var(--bg, #fff); display: flex; flex-direction: column; height: 100%; animation: skelIn .2s both; }
@keyframes skelIn { from { opacity: 0; } to { opacity: 1; } }
.chat-skel i { display: block; border-radius: 10px; background: linear-gradient(100deg, rgba(120,130,150,.14) 30%, rgba(120,130,150,.26) 50%, rgba(120,130,150,.14) 70%) 0 0 / 220% 100%; animation: shim 1.3s linear infinite; }
.skel-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line, #e5e7eb); }
.skel-head span { display: flex; flex-direction: column; gap: 8px; }
.skel-head span i { height: 12px; }
.skel-ava { width: 40px; height: 40px; border-radius: 50% !important; }
.skel-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; overflow: hidden; }
.skel-msg { max-width: 70%; }
.skel-msg i { width: 100%; border-radius: 16px; }
.skel-msg.l { align-self: flex-start; }
.skel-msg.r { align-self: flex-end; }
.chat-dialog { animation: skelIn .25s both; }

/* чат: аватар собеседника в шапке диалога (как в Telegram) и спокойный интервал между сообщениями */
.chat-dhead .chat-dava { width: 40px; height: 40px; flex: none; font-size: 15px; }
.chat-dhead .chat-dava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.messenger-app .chat-msgs, .chat-msgs { gap: 7px !important; }
.chat-msgs .msg-in + .msg-out, .chat-msgs .msg-out + .msg-in, .chat-msgs .msg-note + .msg, .chat-msgs .msg + .msg-note { margin-top: 7px; }

/* вложения: место под картинку резервируется по её пропорциям (как в Telegram) — никаких прыжков высоты */
.att-img[style*="--w"] { width: min(calc(var(--w) * 1px), 300px, calc(360px * var(--w) / var(--h))); aspect-ratio: var(--w) / var(--h); max-height: 360px; min-width: 120px; min-height: 0; overflow: hidden; position: relative; }
.att-img[style*="--w"] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.att-img.att-pend { animation: none; background: rgba(0,0,0,.08); }
.att-img .att-spin { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.28); }
.att-img .att-spin .spin, .att-pend > .spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; animation: avspin .8s linear infinite; display: block; }
.att-file.att-pend > .spin { border-color: rgba(100,116,139,.3); border-top-color: var(--primary, #2563eb); width: 20px; height: 20px; margin-left: auto; }
/* значки файлов по типу */
.att-ico.ext-pdf { background: #e5484d; } .att-ico.ext-doc { background: #2f6fe4; } .att-ico.ext-xls { background: #1f9d55; }
.att-ico.ext-ppt { background: #f08a24; } .att-ico.ext-zip { background: #8b6f47; } .att-ico.ext-txt { background: #64748b; }
.att-ico.ext-vid { background: #8b5cf6; } .att-ico.ext-aud { background: #ec4899; } .att-ico.ext-oth { background: #475569; }
.att-file { gap: 12px; padding: 6px 0; }
.att-ico { border-radius: 12px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }

/* ===== Telegram-подобное: альбом, серии сообщений, кольцо загрузки, зона дропа ===== */
.att-album { display: grid; gap: 2px; width: min(300px, 100%); margin: 2px 0 4px; border-radius: 10px; overflow: hidden; grid-template-columns: 1fr 1fr; aspect-ratio: 1 / 1; }
.att-album .att-img, .att-album .att-img[style*="--w"] { width: auto; max-width: none; max-height: none; aspect-ratio: auto; margin: 0; border-radius: 0; min-width: 0; min-height: 0; position: relative; }
.att-album .att-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.att-album.n2 { aspect-ratio: 2 / 1; }
.att-album.n3 { grid-template-rows: 1fr 1fr; } .att-album.n3 .att-img:first-child { grid-row: 1 / 3; }
.att-album.n4 { grid-template-rows: 1fr 1fr; }
.att-album.n5, .att-album.n6 { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; }
.att-album.n5 .att-img, .att-album.n6 .att-img { grid-column: span 2; }
.att-album.n5 .att-img:nth-child(-n+2) { grid-column: span 3; }
.att-album .att-img:hover img { filter: brightness(.94); }
/* кольцо прогресса поверх превью */
.ring { width: 44px; height: 44px; transform: rotate(-90deg); animation: ringspin 1.6s linear infinite; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.ring circle { fill: none; stroke-width: 3; }
.ring .rb { stroke: rgba(255,255,255,.28); }
.ring .rf { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .25s ease; }
@keyframes ringspin { to { transform: rotate(270deg); } }
.att-img .att-spin { background: rgba(0,0,0,.34); }
.pend-th { position: relative; display: block; width: 36px; height: 36px; flex: none; border-radius: 8px; overflow: hidden; }
.pend-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pend-th .ring { position: absolute; inset: 0; width: 100%; height: 100%; padding: 4px; background: rgba(0,0,0,.35); box-sizing: border-box; }
/* серии одного автора: углы склеены, отступ 2px, имя показывается у первого */
.chat-msgs .msg.g-up { margin-top: -5px !important; }
.chat-msgs .msg.g-up > .msg-who { display: none; }
.chat-msgs .msg-out.g-up, .chat-msgs .msg-note.g-up { border-top-right-radius: 5px; }
.chat-msgs .msg-out.g-dn, .chat-msgs .msg-note.g-dn { border-bottom-right-radius: 5px; }
.chat-msgs .msg-in.g-up { border-top-left-radius: 5px; }
.chat-msgs .msg-in.g-dn { border-bottom-left-radius: 5px; }
/* зона перетаскивания файлов в чат */
.chat-dz { position: absolute; inset: 0; z-index: 9; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(240,246,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
.chat-dialog.drop > .chat-dz { display: flex; animation: dzIn .18s ease both; }
.chat-dz-box { width: 100%; height: 100%; max-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--primary, #2563eb); border-radius: 22px; background: rgba(255,255,255,.55); color: var(--primary, #2563eb); text-align: center; padding: 20px; }
.chat-dz-box b { font-size: 18px; } .chat-dz-box small { color: var(--muted, #64748b); font-size: 13px; }
.chat-dz-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--primary, #2563eb); color: #fff; display: grid; place-items: center; animation: dzBob 1.1s ease-in-out infinite; }
.chat-dz-ico .i { width: 30px; height: 30px; }
@keyframes dzIn { from { opacity: 0; } } @keyframes dzBob { 50% { transform: translateY(-6px); } }

/* удалённое сообщение (как в WhatsApp) */
.msg-deleted { background: rgba(255,255,255,.7) !important; }
.msg-deleted.msg-out { background: rgba(255,255,255,.6) !important; }
.msg-del { display: flex; align-items: center; gap: 7px; color: var(--muted, #6b7280); font-style: italic; }
.msg-del .i { width: 15px; height: 15px; flex: none; opacity: .8; }
.msg-fade { animation: msgIn .25s ease both; }
.msg-menu .mm-danger { color: #d4303d; } .msg-menu > button.mm-danger:hover { background: #d4303d; color: #fff; }

/* чат без выбранного диалога: тот же фон, что у переписки (а не пустота) */
.chat-dialog:has(> .chat-empty) { background: var(--bg); }
.messenger-app .chat-dialog:has(> .chat-empty) { background: #dbe7d3 radial-gradient(circle at 20% 20%, rgba(255,255,255,.35) 0 2px, transparent 3px) 0 0/34px 34px; justify-content: center; }
.chat-dialog > .chat-empty { align-self: center; }
.messenger-app .chat-dialog > .chat-empty { background: rgba(0,0,0,.32); color: #fff; border-radius: 16px; padding: 6px 16px; font-size: 13px; margin: auto; }

/* превью: скруглённые углы везде, зазор между превью и названием */
.tm-frame, .list-thumb { border-radius: 12px; overflow: hidden; }
.tm-frame > img { border-radius: inherit; }
.list-row { column-gap: 20px; }
.list-title-wrap { gap: 18px; }

/* окно прогресса загрузки (desk-ingest.js) */
.ing-panel { position: fixed; right: 18px; bottom: 18px; z-index: 99997; width: min(360px, calc(100vw - 36px)); padding: 14px 16px; border-radius: 14px; background: var(--card, #fff); color: var(--text, #1d2330); border: 1px solid var(--line, #e3e6ea); box-shadow: 0 16px 44px rgba(15, 23, 42, .28); font: 13px/1.35 system-ui, sans-serif; }
.ing-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ing-h b { font-size: 14px; }
.ing-x { position: relative; z-index: 2; pointer-events: auto; border: 1px solid var(--line, #e3e6ea); background: none; color: inherit; border-radius: 8px; padding: 3px 10px; font: inherit; cursor: pointer; }
.ing-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; }
.ing-bar { height: 8px; border-radius: 4px; background: rgba(120, 130, 150, .22); overflow: hidden; }
.ing-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #3d9bff, #0a84ff); transition: width .2s; }
.ing-s { margin-top: 7px; opacity: .65; font-size: 12px; }
.ing-panel.is-done .ing-bar i { background: #30b94d; }

/* форма входа (стекло): «Запомнить это устройство» — переключатель в стиле Apple, текст по центру строки */
.login-page .login-check { align-items: center; gap: 12px; line-height: 22px; }
.login-page .login-check span { line-height: 22px; }
.login-page .login-check input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 40px; height: 24px; margin: 0; border-radius: 12px; background: rgba(255, 255, 255, .28); border: 1px solid rgba(255, 255, 255, .35); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); cursor: pointer; transition: background .2s, border-color .2s; }
.login-page .login-check input::after { content: ""; position: absolute; top: 1px; left: 1px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); transition: transform .22s cubic-bezier(.3, .9, .3, 1.2); }
.login-page .login-check input:checked { background: #30d158; border-color: #30d158; }
.login-page .login-check input:checked::after { transform: translateX(16px); }
.login-page .login-check input:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 2px; }

/* экран блокировки / повторного входа: крупная аватарка, имя и почта (lock.php и окно session-guard) */
.lock-avatar, .sg-ava { width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 14px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, #6aa8ff, #3b5bdb); border: 2px solid rgba(255, 255, 255, .55); box-shadow: 0 14px 40px rgba(0, 0, 0, .35); color: #fff; font-size: 46px; font-weight: 600; }
.lock-avatar img, .sg-ava img { width: 100%; height: 100%; object-fit: cover; }
.login-page .lock-card { margin-top: 0; }
.login-page.lock-page .login-avatar { display: none; }
.sg-lock { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 16px; color: #fff; background: rgba(14, 16, 28, .72); -webkit-backdrop-filter: blur(34px) saturate(150%); backdrop-filter: blur(34px) saturate(150%); }
.sg-lock .sg-card { width: min(360px, 100%); display: grid; gap: 10px; justify-items: center; text-align: center; }
.sg-lock h2 { margin: 0; font-size: 24px; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.sg-lock .sg-mail { margin: -4px 0 6px; opacity: .78; font-size: 14px; }
.sg-lock .sg-msg { margin: 0 0 4px; opacity: .85; font-size: 13.5px; line-height: 1.45; }
.sg-lock form { width: 100%; display: grid; gap: 10px; }
.sg-lock input[type=password] { height: 46px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .92); color: #141a26; padding: 0 14px; font: inherit; font-size: 16px; text-align: center; }
.sg-lock input[type=password]:focus { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 2px; }
.sg-lock .sg-ok { height: 44px; border-radius: 12px; border: 0; background: linear-gradient(180deg, #3d9bff, #0a84ff); color: #fff; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.sg-lock .sg-ok:disabled { opacity: .6; }
.sg-lock .sg-out { background: none; border: 0; color: rgba(255, 255, 255, .8); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.sg-lock .sg-err { min-height: 18px; color: #ffb4b4; font-size: 13px; }
.login-page .lock-card .lock-avatar { width: 112px !important; height: 112px !important; min-width: 112px; max-width: 112px; flex: none; margin: 0 auto 14px !important; aspect-ratio: 1; }
.login-page .lock-card .lock-avatar img { width: 100% !important; height: 100% !important; max-width: none; border-radius: 50%; object-fit: cover; }
.login-page .lock-card h1 { margin-bottom: 4px; }
.login-page .lock-card .lock-mail { margin: 0 0 18px; text-align: center; color: rgba(255, 255, 255, .8); font-size: 14px; display: block !important; }
.login-page .lock-card .btn-linklike { display: block; margin: 8px auto 0; text-align: center; }

/* История версий (Приложения и обновления) */
.vh-ov { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .35); }
.vh-box { width: min(560px, 100%); max-height: min(80vh, 640px); display: flex; flex-direction: column; border-radius: 16px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); overflow: hidden; }
.vh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.vh-x { border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: #6e6e73; }
.vh-body { overflow: auto; padding: 6px 18px 14px; }
.vh-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 11px 0; border-top: 1px solid rgba(0, 0, 0, .07); }
.vh-row:first-child { border-top: 0; }
.vh-v { min-width: 110px; display: flex; align-items: center; gap: 8px; }
.vh-cur { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: rgba(52, 199, 89, .16); color: #1f8f3f; }
.vh-m { flex: 1; min-width: 160px; font-size: 12.5px; color: #6e6e73; }

/* мессенджер: вложения перед отправкой — крупные плитки, в которые легко попасть; аватары всегда круглые */
.chat-pending { gap: 10px; }
.chat-pending .pend:has(.pend-th) { position: relative; display: block; width: 112px; max-width: none; padding: 0; background: none; }
.chat-pending .pend:has(.pend-th) .pend-th { width: 112px; height: 112px; border-radius: 14px; }
.chat-pending .pend:has(.pend-th) .pend-name { display: none; }
.chat-pending .pend:has(.pend-th) > button[data-act="rm-file"] { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 26, 38, .78); color: #fff; padding: 0; }
.chat-pending .pend:not(:has(.pend-th)) { padding: 8px 10px; }
.chat-pending .pend > button[data-act="rm-file"] { min-width: 32px; min-height: 32px; }
@media (max-width: 720px) { .chat-pending { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .chat-pending .pend:has(.pend-th), .chat-pending .pend:has(.pend-th) .pend-th { width: 96px; height: 96px; flex: none; } }
.avatar, .chat-head-actions .icon-btn { flex: none; aspect-ratio: 1 / 1; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@media (max-width: 720px) { .chat-head { flex-wrap: wrap; } }

/* мессенджер: кнопка отправки всегда круглая (схема macos красила все .btn в квадрат со скруглением 6px) */
html[data-sc] .chat-compose-row [data-act="send"], html[data-sc][data-pf] .chat-compose-row [data-act="send"] { border-radius: 50% !important; padding: 0 !important; border: 0 !important; background: var(--tg, var(--primary, #2a8de0)) !important; color: #fff; box-shadow: none; }
html[data-sc] .chat-compose-row [data-act="send"]:hover { background: var(--tg, var(--primary, #2a8de0)) !important; filter: brightness(1.08); }
/* картинки в сообщениях показываются целиком, без обрезки (в альбомах плитка по-прежнему заполняется) */
.att-img:not([style*="--w"]) img { max-height: 360px; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
/* пока картинка грузится — резерв места по --w/--h (чтобы чат не прыгал); загрузилась — рамка ровно по размеру картинки, без пустоты */
:not(.att-album) > .att-img[style*="--w"]:has(img.is-ld):not(.att-pend) { aspect-ratio: auto; width: fit-content; max-width: min(300px, 100%); max-height: none; min-width: 0; position: static; }
:not(.att-album) > .att-img[style*="--w"]:has(img.is-ld):not(.att-pend) img { position: static; inset: auto; width: auto; height: auto; max-width: 100%; max-height: 360px; object-fit: contain; display: block; }
.att-album .att-img img, .att-album .att-img[style*="--w"] img { object-fit: cover; }
/* альбом: плитки крупные, ширина не зависит от подписи */
.att-album { width: min(340px, 78vw); min-width: 220px; }

/* мессенджер: картинки и альбомы прилипают к краям облака сообщения, углы скругляются самим облаком */
/* Не зависит от отступов темы: у облака с медиа боковые и верхний padding обнуляются, текст и время получают свои поля */
.msg { flex-shrink: 0; }
.msg:has(> .att-img, > .att-album) { overflow: hidden; padding-left: 0; padding-right: 0; }
.msg:has(> .att-img, > .att-album) { padding-top: 0; }
.msg:has(> .att-img, > .att-album) > .msg-who { margin-top: 7px; }
.msg:has(> .att-img, > .att-album) > :not(.att-img):not(.att-album) { margin-left: 12px; margin-right: 12px; }
.msg > .att-img, .msg > .att-album { margin: 0 0 3px; border-radius: 0; }
.msg:not(.g-up) > .msg-who + .att-img, .msg:not(.g-up) > .msg-who + .att-album { margin-top: 4px; }
.msg > .att-img:not(.att-pend), .msg > .att-img[style*="--w"]:has(img.is-ld):not(.att-pend) { width: 100%; max-width: none; min-width: 0; border-radius: 0; }
.msg > .att-img:not(.att-pend) img, .msg > .att-img[style*="--w"]:has(img.is-ld):not(.att-pend) img { width: 100%; height: auto; max-width: none; max-height: none; object-fit: cover; }
.msg > .att-album { gap: 0; width: 100%; min-width: 0; }
.msg:has(> .att-img:not(.att-pend), > .att-album) { width: min(250px, 72vw); max-width: 82%; }
.msg > .att-img:not(.att-pend) img { max-height: 300px; }

/* Кнопки папок/групп — лаконично, как кнопки режима клиентов; альбом — равномерная сетка квадратов */
.chat-search .btn, .chat-dtools .btn { flex: none; width: auto; height: auto; min-height: 0; padding: 6px 12px; font-size: 13px; font-weight: 600; border-radius: 999px; gap: 0; }
.chat-dtools { gap: 6px; }
.att-album.n3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; aspect-ratio: 3 / 1; }
.att-album.n3 .att-img:first-child { grid-row: auto; }
.att-album.n5 { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; }
.att-album.n5 .att-img:nth-child(-n+2), .att-album.n5 .att-img:nth-child(n+3) { grid-column: span 2; }
.att-album.n5 .att-img:nth-child(1) { grid-column: 2 / span 2; } .att-album.n5 .att-img:nth-child(2) { grid-column: 4 / span 2; }
.att-album.n5 .att-img:nth-child(3) { grid-column: 1 / span 2; }

/* обновление сущности (ui.js, data-ent): серый мерцающий прелоадер на блоке, появление нового и уход удалённого */
[data-ent].ent-busy{position:relative;pointer-events:none}
[data-ent].ent-busy>*{opacity:.35;transition:opacity .15s}
[data-ent].ent-busy::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 20%,rgba(128,128,128,.28) 50%,transparent 80%);background-size:200% 100%;animation:entShimmer 1s linear infinite;pointer-events:none}
@keyframes entShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
[data-ent].ent-new{animation:entIn .35s ease-out}
@keyframes entIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
[data-ent].ent-gone{opacity:0;transform:scale(.98);transition:opacity .22s,transform .22s;pointer-events:none}
@media(prefers-reduced-motion:reduce){[data-ent].ent-busy::after,[data-ent].ent-new{animation:none}}

/* подсветка обновлённого (ui.js, flash): жёлтая обводка плавно появляется и плавно гаснет */
.ent-flash{animation:entFlash 2.6s ease-in-out;border-radius:6px}
@keyframes entFlash{0%{box-shadow:0 0 0 2px rgba(255,204,0,0);background-color:rgba(255,204,0,0)}14%{box-shadow:0 0 0 2px rgba(255,204,0,.95);background-color:rgba(255,204,0,.12)}45%{box-shadow:0 0 0 2px rgba(255,204,0,.7);background-color:rgba(255,204,0,.07)}100%{box-shadow:0 0 0 2px rgba(255,204,0,0);background-color:rgba(255,204,0,0)}}
@media(prefers-reduced-motion:reduce){.ent-flash{animation:entFlashRm 1.6s linear}@keyframes entFlashRm{0%,60%{box-shadow:0 0 0 2px rgba(255,204,0,.8)}100%{box-shadow:0 0 0 2px rgba(255,204,0,0)}}}

/* неудача сохранения: красная обводка у блока, плавно гаснет */
.ent-flash-err{animation:entFlashErr 2.6s ease-in-out;border-radius:6px}
@keyframes entFlashErr{0%{box-shadow:0 0 0 2px rgba(255,59,48,0);background-color:rgba(255,59,48,0)}14%{box-shadow:0 0 0 2px rgba(255,59,48,.95);background-color:rgba(255,59,48,.1)}45%{box-shadow:0 0 0 2px rgba(255,59,48,.7);background-color:rgba(255,59,48,.06)}100%{box-shadow:0 0 0 2px rgba(255,59,48,0);background-color:rgba(255,59,48,0)}}