/* YTool CRM — дизайн-система прототипа.
   Основа та же, что у Mini App: фон #141416, карточки #202023, акцент #AE1E1E, текст #F5F4F5,
   Verdana, скругление 18 px. Для рабочего инструмента добавлены три служебных тона статусов. */
:root {
  color-scheme: dark;
  --bg: #141416; --card: #202023; --accent: #AE1E1E; --text: #F5F4F5;
  --card-2: #2A2A2E; --card-3: #34343A;
  --text-2: rgba(245, 244, 245, 0.74); --text-3: rgba(245, 244, 245, 0.58);
  --line: rgba(245, 244, 245, 0.08); --line-2: rgba(245, 244, 245, 0.16);
  --accent-hi: #D9423F; --accent-press: #8F1818; --accent-soft: rgba(174, 30, 30, 0.18);
  --ok: #5FBF8B; --wait: #DDB04E; --warn: #E58B45; --note: rgba(221, 176, 78, 0.12); --note-line: rgba(221, 176, 78, 0.42);
  --r: 18px; --r-s: 12px; --r-xs: 8px; --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font: Verdana, Geneva, Tahoma, "DejaVu Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "Cascadia Mono", Consolas, "Courier New", monospace;
  --nav-w: 248px; --pad: 32px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); overflow: hidden; -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, p, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input, select, textarea, optgroup, option, summary { font: inherit; color: inherit; }
code, kbd { font-family: var(--mono); }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--accent); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
.mono { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.muted { color: var(--text-2); } .faint { color: var(--text-3); }
.t-cap { font-size: 11px; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.nowrap { white-space: nowrap; } .right { text-align: right; } .wrap { overflow-wrap: anywhere; }
.ic { flex: none; }
time { white-space: nowrap; }

/* ── Каркас ──────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); height: 100vh; height: 100dvh; }
.nav { display: flex; flex-direction: column; padding: 16px 12px 12px; border-right: 1px solid var(--line); overflow-y: auto; background: var(--bg); scrollbar-width: thin; scrollbar-color: var(--card-3) transparent; }
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 10px; text-decoration: none; }
.logo__m { width: 34px; height: 26px; display: grid; place-items: center; border-radius: 9px; background: var(--accent); }
.logo__t { font-size: 17px; font-weight: 700; } .logo__t small { font-size: 11px; color: var(--text-3); letter-spacing: 0.08em; margin-left: 4px; }
.nav__g { margin: 12px 10px 4px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.nav__i { display: flex; align-items: center; gap: 11px; height: 34px; padding: 0 10px; border-radius: 10px; text-decoration: none; color: var(--text-2); font-size: 13.5px; transition: background 120ms, color 120ms; }
.nav__i:hover { background: var(--card); color: var(--text); }
.nav__i.is-on { background: var(--card); color: var(--text); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.nav__i span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__n { min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; background: var(--card-3); font-size: 11px; font-weight: 700; color: var(--text); }
.nav__foot { margin: auto 10px 0; padding-top: 12px; font-size: 11px; line-height: 1.5; color: var(--text-3); }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.top { flex: none; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 var(--pad); border-bottom: 1px solid var(--line); }
.top__menu { display: none !important; }
.top__t { font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-right: auto; }
.jump label, .search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--card); color: var(--text-3); border: 1px solid transparent; }
.jump label:focus-within, .search:focus-within { border-color: var(--line-2); color: var(--text); }
.jump input, .search input { border: 0; background: transparent; outline: none; width: 250px; min-width: 0; font-size: 13px; }
.search input { width: 240px; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input[type="search"]::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }
.top__bell, .top__demo { position: relative; }
.dot-n { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.who { display: flex; align-items: center; gap: 10px; }
.who__a { width: 34px; height: 34px; border-radius: 50%; background: var(--card-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.who__n { display: flex; flex-direction: column; line-height: 1.25; } .who__n b { font-size: 13px; white-space: nowrap; } .who__n small { font-size: 11px; color: var(--text-3); }
.view { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; outline: none; scrollbar-color: var(--card-3) transparent; }
.page { padding: 24px var(--pad) 56px; display: flex; flex-direction: column; gap: 20px; min-height: 100%; }
.page--fill { height: 100%; min-height: 0; padding-bottom: 20px; }
.page__h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page__h h2 { font-size: 19px; margin-right: auto; }
.lead { color: var(--text-2); font-size: 13px; max-width: 900px; }

/* ── Кнопки ──────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-s); background: var(--card-2); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background 120ms, transform 120ms, border-color 120ms; }
.btn:hover { background: var(--card-3); } .btn:active { transform: scale(0.98); }
.btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-hi); }
.btn--danger { background: transparent; border-color: var(--accent-hi); color: #FF8A84; } .btn--danger:hover { background: var(--accent-soft); }
.btn--line { background: transparent; border-color: var(--line-2); } .btn--line:hover { background: var(--card); }
.btn--ghost { background: transparent; color: var(--text-2); } .btn--ghost:hover { background: var(--card-2); color: var(--text); }
.btn--s { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 9px; }
.btn--icon { width: 40px; padding: 0; } .btn--icon.btn--s { width: 32px; }
.btn[disabled] { opacity: 0.42; cursor: not-allowed; transform: none; }
.why { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--text-2); line-height: 1.45; } .why .ic { margin-top: 1px; color: var(--text-3); }
.lnk { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; } .lnk:hover { text-decoration-color: var(--text); }
.seg { display: flex; background: var(--bg); border-radius: 10px; padding: 3px; gap: 2px; }
.seg__b { flex: 1; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.seg__b.is-on { background: var(--card-3); color: var(--text); }

/* ── Статусы и метки ─────────────────────────────── */
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; white-space: nowrap; color: var(--text); }
.st i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.st--act i { background: var(--accent-hi); box-shadow: 0 0 0 3px var(--accent-soft); } .st--live i { background: var(--text); }
.st--new i { background: var(--text); box-shadow: 0 0 0 3px rgba(245, 244, 245, 0.14); } .st--wait i { background: var(--wait); } .st--ok i { background: var(--ok); } .st--warn i { background: var(--warn); } .st--mute { color: var(--text-3); }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--card-2); font-size: 11px; color: var(--text-2); white-space: nowrap; }
.chip--act { background: var(--accent-soft); color: #FF9D97; } .chip--wait { background: var(--note); color: var(--wait); } .chip--ok { background: rgba(95, 191, 139, 0.14); color: var(--ok); }
.bot { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .bot__d { width: 7px; height: 7px; border-radius: 2px; background: var(--text-3); } .bot__d--m { background: var(--accent-hi); }

/* ── Карточки, блоки ─────────────────────────────── */
.card { background: var(--card); border-radius: var(--r); padding: 20px; }
.card--flush { padding: 0; overflow: hidden; }
.card__h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .card__h h3 { font-size: 15px; margin-right: auto; } .card__h .muted { font-size: 12px; }
.grid { display: grid; gap: 20px; } .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .g-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.blk { padding: 18px 0; border-top: 1px solid var(--line); } .blk:first-child { border-top: 0; padding-top: 0; }
.blk__h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .blk__h h3 { font-size: 14px; margin-right: auto; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 24px; }
.kv dt { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 2px; } .kv dd { font-size: 13.5px; overflow-wrap: anywhere; }
.kv--1 { grid-template-columns: 1fr; }
.tech { margin-top: 14px; font-size: 12px; } .tech summary { cursor: pointer; color: var(--text-3); padding: 4px 0; } .tech[open] summary { margin-bottom: 10px; }
.callout { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-s); background: var(--card-2); font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.callout .ic { margin-top: 1px; color: var(--text-3); } .callout b { color: var(--text); }
.callout--warn { background: var(--note); border: 1px solid var(--note-line); color: var(--text); } .callout--warn .ic { color: var(--wait); }
.callout--act { background: var(--accent-soft); color: var(--text); } .callout--act .ic { color: var(--accent-hi); }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 24px; color: var(--text-2); }
.empty h3 { font-size: 15px; color: var(--text); margin-top: 6px; } .empty p { font-size: 13px; max-width: 460px; } .empty .btn { margin-top: 10px; }
.empty--err .ic { color: var(--accent-hi); }
.pocket { object-fit: contain; }
.skel { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; } .skel__r { height: 44px; border-radius: var(--r-s); background: var(--card); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }

/* ── Вкладки, панель фильтров ────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 0; background: transparent; color: var(--text-2); font-size: 13.5px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); } .tab.is-on { color: var(--text); font-weight: 700; border-bottom-color: var(--accent); }
.tab__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--card-2); font-size: 11px; display: grid; place-items: center; font-weight: 700; color: var(--text-2); } .tab__n.is-hot { background: var(--card-3); color: var(--text); }
.bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bar__sp { flex: 1; } .bar__n { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.sel select, .fld select, .fld input, .fld textarea { height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); padding: 0 12px; font-size: 13px; outline: none; max-width: 100%; }
.sel select { padding-right: 28px; } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px; background-size: 5px 5px; background-repeat: no-repeat; }
select option { background: var(--card); color: var(--text); }
.sel select:focus-visible, .fld select:focus-visible, .fld input:focus-visible, .fld textarea:focus-visible { border-color: var(--text); outline: none; }
.toggle { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--card); font-size: 13px; cursor: pointer; white-space: nowrap; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); flex: none; margin: 0; }

/* ── Таблицы ─────────────────────────────────────── */
.tbl-wrap { background: var(--card); border-radius: var(--r); overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); font-weight: 700; padding: 12px 14px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th:first-child, .tbl td:first-child { padding-left: 20px; } .tbl th:last-child, .tbl td:last-child { padding-right: 20px; }
.tbl tbody tr[data-act] { cursor: pointer; transition: background 100ms; } .tbl tbody tr[data-act]:hover { background: rgba(245, 244, 245, 0.035); }
.tbl tbody tr.is-on { background: rgba(245, 244, 245, 0.06); box-shadow: inset 3px 0 0 var(--accent); }
.tbl tbody tr:focus-visible { outline-offset: -2px; }
.tbl .c-chk { width: 44px; padding-right: 0; } .tbl .c-num { font-weight: 700; white-space: nowrap; } .tbl .c-r { text-align: right; white-space: nowrap; } .tbl .c-act { text-align: right; white-space: nowrap; width: 1%; }
.tbl .c-act .btn + .btn { margin-left: 6px; }
.tbl .is-dim td { color: var(--text-3); }
.tbl-wrap--sticky { overflow: visible; } .tbl-wrap--sticky th { position: sticky; top: 0; z-index: 2; background: var(--card); box-shadow: 0 1px 0 var(--line); } .tbl-wrap--sticky th:first-child { border-top-left-radius: var(--r); } .tbl-wrap--sticky th:last-child { border-top-right-radius: var(--r); }
.cell2 { display: flex; flex-direction: column; min-width: 0; } .tbl td.c-name { min-width: 230px; } .tbl td.c-name b { white-space: nowrap; } .cell2 b { font-weight: 400; } .cell2 small { font-size: 12px; color: var(--text-3); }
.clip { display: block; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl td.c-grow { width: 40%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tbl td.c-grow .clip { max-width: none; }
.flag { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: 12px; color: #FF9D97; white-space: nowrap; } .flag--info { color: var(--wait); }

/* ── Формы ───────────────────────────────────────── */
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .fld + .fld { margin-top: 14px; } .form-grid .fld + .fld { margin-top: 0; }
.fld label { font-size: 12px; color: var(--text-2); font-weight: 700; } .req { color: var(--accent-hi); } .fld__tag { font-weight: 400; color: var(--text-3); margin-left: 4px; }
.fld input, .fld select, .fld textarea { width: 100%; height: 42px; background: var(--bg); border-color: var(--line-2); } .fld textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; min-height: 76px; }
.fld input[disabled], .fld select[disabled], .fld textarea[disabled] { opacity: 0.55; cursor: not-allowed; background: var(--card-2); }
.fld input[type="checkbox"], .check input[type="checkbox"] { width: 16px; height: 16px; padding: 0; border: 0; background: none; border-radius: 3px; }
.fld__hint { font-size: 12px; color: var(--text-3); } .fld__ok { font-size: 12px; color: var(--ok); } .fld__err { font-size: 12px; color: #FF8A84; } .has-err input, .has-err select, .has-err textarea { border-color: var(--accent-hi); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } .form-grid .full { grid-column: 1 / -1; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; cursor: pointer; flex-wrap: wrap; } .check input { margin-top: 2px; } .check small { flex-basis: 100%; padding-left: 26px; color: var(--text-3); font-size: 12px; } .check.is-off { opacity: 0.55; cursor: not-allowed; }
.langs { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg); border-radius: 10px; }
.lang { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: 0.03em; } .lang.is-on { background: var(--card-3); color: var(--text); }
.lang.is-miss::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--wait); margin-left: 5px; vertical-align: 2px; }

/* ── Боковая панель и окна ───────────────────────── */
.layer { position: fixed; inset: 0; z-index: 30; background: rgba(8, 8, 9, 0.62); display: grid; place-items: center; padding: 24px; }
.layer.is-new { animation: fade 140ms var(--ease); }
.layer--side { z-index: 20; place-items: stretch end; padding: 0; }
.drawer { width: min(680px, 100vw); height: 100%; background: var(--card); display: flex; flex-direction: column; box-shadow: -24px 0 60px rgba(0, 0, 0, 0.4); }
.is-new > .drawer { animation: slide 180ms var(--ease); }
.drawer--wide { width: min(760px, 100vw); }
.drawer__h { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 18px 16px 12px 24px; } .drawer__hh { flex: 1; min-width: 0; } .drawer__h h2 { font-size: 19px; outline: none; overflow-wrap: anywhere; }
.drawer__top { flex: none; padding: 0 24px 14px; display: flex; flex-direction: column; gap: 12px; } .drawer .tabs { padding: 0 20px; flex: none; }
.drawer__b { flex: 1; overflow-y: auto; padding: 20px 24px 40px; scrollbar-color: var(--card-3) transparent; }
.modal { width: min(540px, 100%); max-height: calc(100vh - 48px); background: var(--card); border-radius: var(--r); display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.is-new > .modal { animation: pop 140ms var(--ease); }
.modal--wide { width: min(820px, 100%); }
.modal__h { display: flex; align-items: center; gap: 8px; padding: 16px 14px 8px 24px; } .modal__h h2 { flex: 1; font-size: 17px; }
.modal__b { padding: 8px 24px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; font-size: 13.5px; } .modal__b .fld + .fld { margin-top: 0; }
.modal__f { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; padding: 14px 16px; background: var(--bg); border-radius: var(--r-s); font-size: 13px; } .facts dt { color: var(--text-3); } .facts dd { font-weight: 700; overflow-wrap: anywhere; }
.conseq { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); } .conseq li { display: flex; gap: 8px; } .conseq li::before { content: "•"; color: var(--accent-hi); }
.pop { position: absolute; right: 0; top: 46px; z-index: 15; width: 380px; background: var(--card-2); border: 1px solid var(--line-2); border-radius: var(--r-s); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.pop header, .pop footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; } .pop footer { border-top: 1px solid var(--line); font-size: 12px; }
.pop--bell ul { max-height: 420px; overflow-y: auto; }
.ntf { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 14px; text-decoration: none; border-top: 1px solid var(--line); font-size: 12.5px; }
.ntf:hover { background: var(--card-3); } .ntf__t { font-weight: 700; } .ntf__w { grid-row: 1; grid-column: 2; color: var(--text-3); font-size: 11px; } .ntf__x { grid-column: 1 / -1; color: var(--text-2); }
.ntf.is-new .ntf__t::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-hi); margin-right: 7px; }
.pop--demo { padding: 14px; display: flex; flex-direction: column; gap: 10px; width: 360px; } .pop__hint { font-size: 11.5px; color: var(--text-3); line-height: 1.5; } .pop__row { display: flex; flex-direction: column; gap: 8px; } .pop--demo .toggle { background: var(--bg); white-space: normal; height: auto; padding: 9px 12px; }
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; max-width: 460px; padding: 12px 16px; border-radius: var(--r-s); background: var(--card-3); border: 1px solid var(--line-2); font-size: 13px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); animation: pop 160ms var(--ease); }
.toast .ic { color: var(--ok); } .toast--err .ic { color: var(--accent-hi); }
@keyframes fade { from { opacity: 0; } } @keyframes slide { from { transform: translateX(32px); opacity: 0; } } @keyframes pop { from { transform: translateY(6px) scale(0.985); opacity: 0; } }

/* ── Дашборд ─────────────────────────────────────── */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; gap: 24px; padding: 14px 28px; border-radius: var(--r); background: var(--card); overflow: hidden; }
.hero::before { content: ""; position: absolute; right: -80px; top: -110px; width: 380px; height: 320px; background: radial-gradient(closest-side, rgba(174, 30, 30, 0.34), transparent); pointer-events: none; }
.hero h2 { font-size: 22px; line-height: 1.25; } .hero p { color: var(--text-2); margin-top: 6px; max-width: 620px; }
.hero__slot { position: relative; height: 96px; display: grid; place-items: center; }
.hero__slot img { height: 96px; width: auto; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--r); background: var(--card); text-decoration: none; border: 1px solid transparent; transition: border-color 120ms, transform 120ms; min-width: 0; }
.tile:hover { border-color: var(--line-2); transform: translateY(-1px); }
.tile b { font-size: 28px; line-height: 1.1; } .tile span { font-size: 13px; font-weight: 700; } .tile small { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.tile.is-hot b { color: #FF8A84; } .tile.is-hot { background: linear-gradient(180deg, rgba(174, 30, 30, 0.16), var(--card) 70%); }
.tile.is-zero b { color: var(--text-3); }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .metric { padding: 4px 20px 4px 0; } .metric + .metric { border-left: 1px solid var(--line); padding-left: 20px; }
.metric b { display: block; font-size: 26px; font-weight: 400; letter-spacing: -0.01em; white-space: nowrap; margin-top: 4px; font-variant-numeric: tabular-nums; } .metric > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); } .metric small { display: block; font-size: 11.5px; color: var(--text-3); line-height: 1.45; margin-top: 4px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; margin-top: 20px; } .bars__c { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.bars__b { width: 100%; max-width: 44px; border-radius: 6px 6px 2px 2px; background: var(--card-3); min-height: 2px; } .bars__c:last-child .bars__b { background: var(--accent); } .bars__c small { font-size: 10px; color: var(--text-3); white-space: nowrap; }
.rows > li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; } .rows > li:first-child { border-top: 0; }
.rows .grow { flex: 1; min-width: 0; } .rows small { color: var(--text-3); font-size: 11.5px; display: block; }
.meter { width: 90px; height: 6px; border-radius: 3px; background: var(--card-3); overflow: hidden; flex: none; } .meter i { display: block; height: 100%; background: var(--ok); border-radius: 3px; } .meter.is-low i { background: var(--warn); } .meter.is-out i { background: var(--accent-hi); }

/* ── Заказ ───────────────────────────────────────── */
.ohead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ohead--act { justify-content: flex-end; } .ohead--act .sel { margin-right: auto; }
.ohead .sel select { background-color: var(--bg); height: 36px; }
.ohead__sp { flex: 1; }
.timeline { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 22px; } .timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line-2); }
.timeline li { position: relative; font-size: 13px; } .timeline li::before { content: ""; position: absolute; left: -21px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--card-3); border: 2px solid var(--card); }
.timeline li.is-key::before { background: var(--accent-hi); } .timeline small { display: block; color: var(--text-3); font-size: 11.5px; }
.answers { display: flex; flex-direction: column; gap: 10px; } .answers > div { padding: 10px 14px; border-radius: var(--r-s); background: var(--bg); } .answers dt { font-size: 11.5px; color: var(--text-3); } .answers dd { overflow-wrap: anywhere; }
.fullcard { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }

/* ── Поддержка ───────────────────────────────────── */
.sup { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr) 290px; gap: 16px; }
.sup > * { min-height: 0; background: var(--card); border-radius: var(--r); display: flex; flex-direction: column; overflow: hidden; }
.sup__qh { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); } .sup__qh .search { background: var(--bg); } .sup__qh .search input { width: 100%; flex: 1; }
.sup__qf { display: flex; gap: 6px; flex-wrap: wrap; } .sup__qf .sel select, .sup__qf .toggle { height: 32px; font-size: 12px; background-color: var(--bg); padding-left: 10px; }
.queue { flex: 1; overflow-y: auto; scrollbar-color: var(--card-3) transparent; }
.qi { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.qi:hover { background: rgba(245, 244, 245, 0.035); } .qi.is-on { background: rgba(245, 244, 245, 0.06); box-shadow: inset 3px 0 0 var(--accent); }
.qi__n { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qi__w { font-size: 11px; color: var(--text-3); } .qi__m { grid-column: 1; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi__u { grid-column: 2; min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent); font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; justify-self: end; }
.qi__t { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.chat__h { flex: none; padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .chat__h h2 { font-size: 15px; } .chat__hh { flex: 1 1 100%; min-width: 0; } .chat__h .sel select { height: 32px; font-size: 12px; background-color: var(--bg); }
.chat__b { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scrollbar-color: var(--card-3) transparent; }
.msg { max-width: min(78%, 620px); padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; background: var(--card-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg--out { align-self: flex-end; background: #3A2224; border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.msg--bot { background: var(--card-3); }
.msg--note { align-self: stretch; max-width: none; background: var(--note); border: 1px dashed var(--note-line); border-radius: var(--r-s); }
.msg--sys { align-self: center; background: transparent; color: var(--text-3); font-size: 12px; padding: 2px 8px; }
.msg__m { display: flex; gap: 8px; align-items: center; margin-top: 5px; font-size: 11px; color: var(--text-3); white-space: normal; flex-wrap: wrap; } .msg--note .msg__m b { color: var(--wait); }
.msg__fail { color: #FF8A84; } .msg__att { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); font-size: 12px; white-space: normal; }
.composer { flex: none; border-top: 1px solid var(--line); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.composer__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); } .composer__top .seg { background: var(--bg); } .composer__top .seg__b { height: 28px; }
.composer textarea { width: 100%; min-height: 64px; max-height: 180px; resize: vertical; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--bg); padding: 10px 12px; outline: none; line-height: 1.5; }
.composer textarea:focus-visible { border-color: var(--text); } .composer.is-note textarea { border-color: var(--note-line); background: var(--note); }
.composer__row { display: flex; align-items: center; gap: 10px; } .composer__row .why { flex: 1; }
.side { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 0; scrollbar-color: var(--card-3) transparent; } .side .kv { grid-template-columns: 1fr; gap: 10px; }
.side h3 { font-size: 13px; } .side .blk { padding: 14px 0; } .mini { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; } .mini li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }

.only-sm, .only-md, .only-lg { display: none !important; }
.flags { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; } .flags .flag { margin-left: 0; }
.chat-in { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; background: var(--bg); }
.chat__b--in { max-height: 440px; min-height: 120px; } .chat-in .empty { padding: 28px 16px; } .chat-in .composer textarea { background: var(--card); }

/* Заявка на партнёрство: тот же каркас, что у карточки заказа, с отдельной областью переписки. */
.app-head__actions { flex-wrap: wrap; justify-content: flex-end; }
.app-details { max-width: 880px; }
.app-copy { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; color: var(--text-2); }
.app-reason { margin-top: 10px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.app-decision { display: flex; flex-direction: column; gap: 10px; }
.app-chat { display: flex; min-height: 360px; max-height: min(640px, calc(100vh - 285px)); flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--bg); }
.app-chat__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--card-2); }
.app-chat__bar .actions { justify-content: flex-end; margin: 0; }
.app-chat__scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 18px; scrollbar-color: var(--card-3) transparent; }
.app-msg { width: fit-content; max-width: min(78%, 640px); padding: 11px 14px; border-radius: 15px; background: var(--card-2); border-bottom-left-radius: 5px; overflow-wrap: anywhere; }
.app-msg--staff { align-self: flex-end; background: #3A2224; border-bottom-left-radius: 15px; border-bottom-right-radius: 5px; }
.app-msg--applicant { align-self: flex-start; }
.app-msg.is-unread { box-shadow: 0 0 0 2px var(--wait); }
.app-msg header { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.app-msg header b { font-size: 12.5px; }
.app-msg header span { color: var(--text-3); font-size: 11px; }
.app-msg > p { white-space: pre-wrap; line-height: 1.55; }
.app-msg footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.app-tech { margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(245, 244, 245, 0.09); font-size: 12px; }
.app-tech summary { width: fit-content; color: var(--text-3); cursor: pointer; }
.app-tech__body { margin-top: 10px; min-width: min(360px, 100%); }
.app-tech__body .kv { gap: 6px; }
.app-tech__body .actrow { margin-top: 10px; }
.app-event__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-timeline .app-tech { max-width: 620px; }
.app-full__main { min-width: 0; padding: 20px 0 0; }
.app-full__tabs { padding: 0 20px; }
.app-full__body { padding: 20px 24px 28px; }
.app-full__side { align-self: start; position: sticky; top: 0; }
.app-side-status { display: flex; gap: 8px; flex-wrap: wrap; }
.app-full .app-chat { max-height: min(720px, calc(100vh - 245px)); }

/* ── Каталог ─────────────────────────────────────── */
.cat { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
.tree { background: var(--card); border-radius: var(--r); padding: 10px; position: sticky; top: 0; } .tree__h { display: flex; align-items: center; padding: 6px 8px 8px; } .tree__h b { flex: 1; font-size: 13px; }
.tn { display: flex; align-items: center; gap: 4px; border-radius: 10px; } .tn.is-on { background: var(--card-2); box-shadow: inset 3px 0 0 var(--accent); } .tn:hover { background: var(--card-2); }
.tn__b { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 0; background: transparent; text-align: left; font-size: 13px; } .tn__b span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn--sub .tn__b { padding-left: 28px; color: var(--text-2); } .tn.is-on .tn__b { color: var(--text); font-weight: 700; } .tn__n { font-size: 11px; color: var(--text-3); } .tn.is-arch .tn__b { color: var(--text-3); text-decoration: line-through; }
.tn .btn { opacity: 0; } .tn:hover .btn, .tn:focus-within .btn, .tn.is-on .btn { opacity: 1; }
.editor { display: flex; flex-direction: column; gap: 16px; } .editor__h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .editor__h h2 { font-size: 19px; margin-right: auto; min-width: 0; overflow-wrap: anywhere; }
.editor__b { background: var(--card); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 20px; }

.sub-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .sub-h h3 { font-size: 15px; margin-right: auto; }
.q { border: 1px solid var(--line); border-radius: var(--r-s); background: var(--bg); } .q + .q { margin-top: 10px; } .q.is-off { opacity: 0.7; }
.q__h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .q__n { width: 26px; height: 26px; border-radius: 8px; background: var(--card-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.q__t { flex: 1; min-width: 0; } .q__t b { display: block; font-size: 13.5px; overflow-wrap: anywhere; } .q__t small { color: var(--text-3); font-size: 11.5px; }
.q__b { padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.q details { border-top: 1px dashed var(--line-2); padding-top: 12px; } .q summary { cursor: pointer; font-size: 12px; color: var(--text-2); margin-bottom: 12px; }
.avail { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-s); background: var(--bg); } .avail b { display: block; } .avail small { color: var(--text-2); font-size: 13px; line-height: 1.5; display: block; margin-top: 2px; } .avail--ok .ic { color: var(--ok); } .avail--act .ic { color: var(--accent-hi); } .avail--wait .ic { color: var(--wait); }
.ver { display: flex; flex-direction: column; gap: 8px; } .ver li { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; padding: 8px 12px; border-radius: 10px; background: var(--bg); } .ver li.is-cur { box-shadow: inset 3px 0 0 var(--ok); } .ver .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ── Склад ───────────────────────────────────────── */
.bulk { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-s); background: var(--card-2); border: 1px solid var(--line-2); flex-wrap: wrap; } .bulk b { margin-right: auto; font-size: 13px; }
.steps { display: flex; gap: 6px; flex-wrap: wrap; counter-reset: s; } .steps li { counter-increment: s; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); padding: 6px 12px 6px 6px; border-radius: 20px; background: var(--bg); }
.steps li::before { content: counter(s); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--card-2); font-weight: 700; font-size: 11px; }
.steps li.is-on { color: var(--text); font-weight: 700; } .steps li.is-on::before { background: var(--accent); color: #fff; } .steps li.is-done::before { content: "✓"; background: var(--card-3); color: var(--ok); }
.drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px; border: 1px dashed var(--line-2); border-radius: var(--r-s); text-align: center; color: var(--text-2); font-size: 13px; } .drop input { max-width: 100%; font-size: 12px; }
.res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .res div { padding: 12px 14px; border-radius: var(--r-s); background: var(--bg); } .res b { display: block; font-size: 22px; } .res small { color: var(--text-3); font-size: 12px; }
.flist { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; } .flist li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 8px 12px; border-radius: 10px; background: var(--bg); } .flist .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.secret { padding: 12px 14px; border-radius: var(--r-s); background: var(--bg); border: 1px solid var(--note-line); font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }

/* ── Деньги ──────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .stat { padding: 14px 16px; border-radius: var(--r-s); background: var(--bg); } .stat b { display: block; font-size: 20px; white-space: nowrap; } .stat span { font-size: 12px; color: var(--text-2); } .stat small { display: block; color: var(--text-3); font-size: 11px; margin-top: 2px; }
.stat.is-debt b { color: #FF8A84; } .eq { font-size: 12px; color: var(--text-3); }

/* ── Сообщения бота, рассылки ────────────────────── */
.mw { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; gap: 16px; } .mw > * { min-height: 0; background: var(--card); border-radius: var(--r); overflow-y: auto; scrollbar-color: var(--card-3) transparent; }
.mw__list { padding: 12px; display: flex; flex-direction: column; gap: 4px; } .mw__list .search { background: var(--bg); margin-bottom: 6px; flex: none; } .mw__list .search input { width: 100%; flex: 1; }
.mi { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; } .mi:hover { background: var(--card-2); } .mi.is-on { background: var(--card-2); box-shadow: inset 3px 0 0 var(--accent); } .mi b { font-size: 13px; } .mi small { font-size: 11px; color: var(--text-3); }
.mw__ed { padding: 20px; display: flex; flex-direction: column; gap: 16px; } .mw__pv { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.fmt { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .fmt .btn { min-width: 32px; } .var { font-family: var(--mono); font-size: 11.5px; }
.tg { background: #17212B; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; } .tg__m { background: #182533; border-radius: 12px 12px 12px 4px; padding: 9px 12px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; } .tg__m a { color: #6AB2F2; }
.tg__img { height: 96px; border-radius: 10px; background: #22303D; display: grid; place-items: center; font-size: 11px; color: var(--text-3); margin-bottom: 8px; white-space: normal; }
.tg__k { display: flex; gap: 4px; } .tg__k span { flex: 1; text-align: center; padding: 8px 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.09); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 54px 54px auto; gap: 8px; align-items: end; } .brow .fld + .fld { margin-top: 0; }
.prog { height: 8px; border-radius: 4px; background: var(--card-3); overflow: hidden; display: flex; } .prog i { display: block; height: 100%; } .prog .p-ok { background: var(--ok); } .prog .p-fail { background: var(--accent-hi); } .prog .p-skip { background: var(--wait); }
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .diff > div { padding: 10px 12px; border-radius: 10px; background: var(--bg); font-size: 12px; } .diff h4 { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .diff dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; } .diff dt { color: var(--text-3); } .diff dd { overflow-wrap: anywhere; }
.arow td { background: rgba(0, 0, 0, 0.16); padding-top: 14px; padding-bottom: 16px; }

/* ── Доработка: подсказки, раскрываемые блоки, очереди, редактор ── */
.stat b, .res b { font-weight: 400; font-variant-numeric: tabular-nums; }
.tip { position: relative; display: inline-flex; vertical-align: middle; }
.tip__b { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); } .tip__b:hover, .tip.is-open .tip__b { color: var(--text); background: var(--card-2); }
.tip__p { display: none; position: absolute; z-index: 12; top: 26px; left: -8px; width: 300px; padding: 10px 12px; border-radius: 10px; background: var(--card-3); border: 1px solid var(--line-2); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); font-size: 12.5px; line-height: 1.5; font-weight: 400; color: var(--text); text-transform: none; letter-spacing: 0; white-space: normal; text-align: left; }
.tip--r .tip__p { left: auto; right: -8px; } .tip:hover .tip__p, .tip:focus-within .tip__p, .tip.is-open .tip__p { display: block; }
h3 .tip { margin-left: 6px; }
.folds { display: flex; flex-direction: column; margin-top: 4px; border-top: 1px solid var(--line); }
.fold { border-bottom: 1px solid var(--line); } .editor__b > .fold, .modal__b > .fold { border: 1px solid var(--line); border-radius: var(--r-s); padding: 0 14px; }
.fold > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 700; } .fold > summary::-webkit-details-marker { display: none; }
.fold > summary .ic { color: var(--text-3); transition: transform 140ms var(--ease); } .fold[open] > summary .ic { transform: rotate(90deg); }
.fold > summary small { margin-left: auto; font-weight: 400; font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fold__b { padding: 4px 0 16px; }
.page--dash { max-width: 1180px; gap: 16px; }
.alerts { display: flex; flex-direction: column; gap: 8px; } .alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r-s); background: var(--card); border: 1px solid var(--note-line); font-size: 13px; } .alert .ic { color: var(--wait); margin-top: 2px; }
.qlist li + li { border-top: 1px solid var(--line); }
.qrow { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 8px; margin: 0 -8px; border-radius: 10px; text-decoration: none; font-size: 14px; } .qrow:hover { background: var(--card-2); }
.qrow span { flex: 1; } .qrow b { min-width: 28px; text-align: right; font-size: 16px; font-weight: 400; font-variant-numeric: tabular-nums; } .qrow .ic { color: var(--text-3); } .qrow.is-zero, .qrow.is-zero b { color: var(--text-3); font-weight: 400; }
.calm { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--text-2); } .calm .ic { color: var(--ok); }
.metrics--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.work { display: flex; flex-direction: column; gap: 8px; } .work__r { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 10px 14px; border-radius: var(--r-s); background: var(--bg); }
.work__l { font-size: 12.5px; color: var(--text-3); } .work__v { font-size: 14px; } .work__a { display: inline-flex; align-items: center; gap: 6px; } .work__a a { text-decoration: none; }
.actrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ed { display: grid; grid-template-columns: minmax(0, 1080px) minmax(260px, 340px); gap: 24px; align-items: start; } .ed__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ed__side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
.pv { border-radius: var(--r); background: var(--card); overflow: hidden; } .pv__img { aspect-ratio: 16 / 9; background: var(--card-2); display: grid; place-items: center; } .pv__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv__img span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); text-align: center; padding: 0 12px; overflow-wrap: anywhere; }
.pv__b { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; } .pv__t { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); font-weight: 700; } .pv__b h4 { font-size: 16px; overflow-wrap: anywhere; }
.pv__d { font-size: 13.5px; color: var(--text-2); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .pv__f { display: flex; align-items: center; margin-top: 6px; } .pv__f b { font-size: 18px; font-weight: 400; }
.pv__n { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.savebar { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 0; background: var(--bg); border-top: 1px solid var(--line); }
.savebar__n { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--wait); } .savebar__n.is-ok { color: var(--text-3); }
.narrow { max-width: 300px; }
.imgpick { display: flex; align-items: center; gap: 12px; min-height: 42px; } .imgpick__th { width: 56px; height: 42px; border-radius: 8px; background: var(--card-2); display: grid; place-items: center; overflow: hidden; flex: none; color: var(--text-3); } .imgpick__th img { width: 100%; height: 100%; object-fit: cover; }
.imgpick__t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .imgpick__t b { font-weight: 400; font-size: 13px; } .imgpick__t small { font-size: 12px; color: var(--text-3); }
.lrows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; } .lrows li { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px 8px 14px; background: var(--bg); } .lrows li + li { border-top: 1px solid var(--line); }
.lrows .grow { flex: 1; min-width: 0; } .lrows b { display: block; font-size: 13.5px; overflow-wrap: anywhere; } .lrows small { font-size: 12.5px; color: var(--text-3); } .lrows li.is-off b { color: var(--text-2); font-weight: 400; } .lrows__c { font-size: 13px; white-space: nowrap; }
.lrows--t li { display: grid; grid-template-columns: minmax(0, 1fr) 108px 168px 76px 142px; gap: 8px; } .lrows--t li > .btn { justify-self: end; } .lrows--t li > .btn:last-child { grid-column: 5; } .lrows--t b { font-weight: 400; }
.pvf { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--r-s); background: var(--bg); border: 1px dashed var(--line-2); } .pvf label { font-size: 14px; font-weight: 700; }
.pvf input, .pvf textarea { height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); padding: 0 12px; outline: none; width: 100%; } .pvf textarea { height: auto; padding: 10px 12px; resize: vertical; } .pvf input:focus-visible, .pvf textarea:focus-visible { border-color: var(--text); }
.colset { position: relative; } .colset > summary { list-style: none; cursor: pointer; } .colset > summary::-webkit-details-marker { display: none; }
.colset__p { position: absolute; right: 0; top: 46px; z-index: 6; width: 280px; padding: 14px; display: flex; flex-direction: column; gap: 10px; border-radius: var(--r-s); background: var(--card-2); border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.tfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.pager { display: flex; align-items: center; gap: 8px; } .pager__n { font-size: 13px; color: var(--text-2); margin-right: 6px; white-space: nowrap; } .pager__p { font-size: 13px; min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; } .pager .sel select { height: 32px; font-size: 12px; }
.ver li .grow { white-space: pre-wrap; }

/* ── Адаптация ───────────────────────────────────── */
@media (max-width: 1500px) { .hide-xl { display: none !important; } .jump input { width: 200px; } .sup { grid-template-columns: 290px minmax(0, 1fr) 260px; gap: 12px; } .mw { grid-template-columns: 260px minmax(0, 1fr) 320px; } }
@media (max-width: 1400px) { .ed { grid-template-columns: minmax(0, 1fr); } .ed__side { position: static; max-width: 420px; } }
@media (max-width: 1320px) {
  :root { --pad: 24px; }
  .hide-lg { display: none !important; } .only-lg { display: block !important; } .cat { grid-template-columns: 250px minmax(0, 1fr); } .who__n { display: none; } .jump input { width: 170px; } .search input { width: 190px; }
  .sup { grid-template-columns: 270px minmax(0, 1fr) 250px; } .mw { grid-template-columns: 250px minmax(0, 1fr) 320px; } .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .tile { padding: 14px; }
  .fullcard { grid-template-columns: minmax(0, 1fr) 320px; } .clip { max-width: 240px; }
}
@media (max-width: 1100px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .nav { position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: var(--nav-w); transform: translateX(-100%); transition: transform 180ms var(--ease); box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5); }
  .nav-open .nav { transform: none; } .nav-open .main::after { content: ""; position: fixed; inset: 0; z-index: 35; background: rgba(8, 8, 9, 0.6); }
  .top__menu { display: inline-flex !important; margin-left: -8px; }
  .hide-md { display: none !important; } .only-md { display: inline-flex !important; } .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-2, .g-3, .g-21, .g-12, .fullcard { grid-template-columns: minmax(0, 1fr); } .metrics--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; } .metrics--4 .metric:nth-child(3) { border-left: 0; padding-left: 0; }
  .sup { grid-template-columns: 280px minmax(0, 1fr); } .sup > .side { display: none; } .sup.show-side > .side { display: flex; position: fixed; z-index: 18; right: 0; top: 64px; bottom: 0; width: 300px; border-radius: 0; box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5); }
  .mw { grid-template-columns: 230px minmax(0, 1fr); overflow-y: auto; } .mw__pv { grid-column: 1 / -1; } .mw > * { overflow: visible; } .page--fill.mwp { height: auto; }
  .cat { grid-template-columns: 230px minmax(0, 1fr); }
}
@media (max-width: 820px) {
  :root { --pad: 16px; }
  .drawer__h [data-act="goFull"] span { display: none; } .clip { max-width: 150px; } .tbl .c-act .btn { padding: 0 8px; } .jump { display: none; } .only-sm { display: inline-flex !important; } .hide-sm { display: none !important; } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero { grid-template-columns: minmax(0, 1fr) 120px; padding: 18px; } .hero__slot, .hero__slot img { height: 104px; }
  .form-grid, .metrics, .metrics--4, .res, .diff { grid-template-columns: minmax(0, 1fr); } .work__r { grid-template-columns: minmax(0, 1fr) auto; } .work__l { grid-column: 1 / -1; } .lrows--t li { grid-template-columns: minmax(0, 1fr) auto; } .lrows--t li > .btn:last-child { grid-column: auto; } .tfoot { flex-direction: column; align-items: stretch; } .tip__p { width: 240px; } .metric + .metric { border-left: 0; border-top: 1px solid var(--line); padding: 14px 0 0; margin-top: 14px; }
  .cat { grid-template-columns: minmax(0, 1fr); } .tree { position: static; } .brow { grid-template-columns: 1fr 1fr; }
  .sup { grid-template-columns: minmax(0, 1fr); } .sup > .sup__q { display: flex; } .sup.has-conv > .sup__q { display: none; } .sup:not(.has-conv) > .chat { display: none; }
  .mw { grid-template-columns: minmax(0, 1fr); } .search input { width: 100%; } .bar .search { flex: 1 1 100%; } .pop { width: min(360px, calc(100vw - 32px)); } .drawer__b { padding: 16px 16px 32px; } .drawer__h { padding-left: 16px; } .drawer__top { padding: 0 16px 12px; } .drawer .tabs { padding: 0 12px; }
  .editor__b { padding: 16px; } .tbl th:first-child, .tbl td:first-child { padding-left: 14px; } .tbl th, .tbl td { padding-left: 10px; padding-right: 10px; }
  .drawer--wide { width: 100vw; }
  .app-head__actions { justify-content: stretch; }
  .app-head__actions .btn { flex: 1 1 auto; }
  .app-chat { min-height: 420px; max-height: calc(100vh - 245px); border-left: 0; border-right: 0; border-radius: 0; margin-left: -16px; margin-right: -16px; }
  .app-chat__bar { align-items: flex-start; flex-direction: column; padding: 12px 16px; }
  .app-chat__bar .actions { width: 100%; justify-content: stretch; }
  .app-chat__bar .btn { flex: 1 1 auto; }
  .app-chat__scroll { padding: 14px 16px 20px; }
  .app-msg { max-width: 92%; }
  .app-msg header { flex-direction: column; gap: 2px; }
  .app-full__tabs { padding: 0 12px; }
  .app-full__body { padding: 16px; }
  .app-full__side { position: static; }
  .app-full .app-chat { max-height: none; min-height: 520px; margin-left: -16px; margin-right: -16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 820px) { .hero { grid-template-columns: minmax(0, 1fr) 84px; padding: 14px 18px; } .hero__slot, .hero__slot img { height: 76px; } }
.grow-tabs { flex: 1; min-width: 0; }
.alerts { gap: 0; border-radius: var(--r-s); background: var(--card); border: 1px solid var(--note-line); } .alert { border: 0; background: transparent; padding: 8px 14px; } .alert + .alert { border-top: 1px solid var(--line); border-radius: 0; }
.page--dash { gap: 14px; padding-top: 20px; } .qrow { min-height: 42px; } .page--dash .card { padding: 16px 20px; } .page--dash .card__h { margin-bottom: 8px; }
@media (max-width: 820px) { .lrows--t li { display: flex; flex-wrap: wrap; gap: 6px 12px; } .lrows--t li > .grow { flex: 1 1 100%; } .lrows--t li > .lrows__c.muted { flex: 1; } }
.page--dash { padding-bottom: 24px; }

/* ── Точечные правки: склад, предпросмотр, редактор описания, ответ покупателя ── */
/* Склад: фиксированные ширины служебных колонок, название товара занимает остаток и переносится. */
.tbl--fixed { table-layout: fixed; } .tbl--fixed .c-chk { width: 44px; } .tbl--fixed td.c-prod { overflow-wrap: anywhere; padding-right: 24px; } .tbl--fixed td.c-file { overflow-wrap: anywhere; } .tbl--fixed td.c-wh { white-space: nowrap; }
.tbl--fixed th.c-prod { width: auto; }
.ma { padding: 14px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.ma__offer { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 18px; background: #202023; font-size: 15px; line-height: 1.55; }
.ma__img { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #2A2A2E; display: grid; place-items: center; } .ma__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ma__img.is-demo img { object-fit: contain; padding: 10px; } .ma__img.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: transparent; border: 1px dashed var(--line-2); color: var(--text-3); font-size: 13px; }
.ma__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ma__type { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ma__icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #2A2A2E; }
.ma__cap { font-size: 11px; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(245, 244, 245, 0.44); font-weight: 700; }
.ma__dot { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(245, 244, 245, 0.66); white-space: nowrap; } .ma__dot::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(245, 244, 245, 0.44); }
.ma__dot--on { color: var(--text); } .ma__dot--on::before { background: var(--text); } .ma__dot--alert { color: var(--text); font-weight: 700; } .ma__dot--alert::before { background: var(--accent); }
.ma__txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ma__txt h3 { font-size: 15px; line-height: 1.4; font-weight: 700; overflow-wrap: anywhere; }
.ma__desc { font-size: 13px; line-height: 1.5; color: rgba(245, 244, 245, 0.66); overflow-wrap: anywhere; } .ma__desc ul, .ma__desc ol, .rte__ed ul, .rte__ed ol { padding-left: 20px; margin: 4px 0; } .ma__desc ul, .rte__ed ul { list-style: disc; } .ma__desc ol, .rte__ed ol { list-style: decimal; }
.ma__desc a, .rte__ed a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.ma__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(245, 244, 245, 0.08); } .ma__price { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; white-space: nowrap; }
.ma__offer.is-out .ma__price { color: rgba(245, 244, 245, 0.44); }
.imgpick__th.is-demo img { object-fit: contain; }
.rte { gap: 8px; } .rte__bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .rte__b { min-width: 34px; padding: 0 10px; } .rte__sp { flex: 1; } .rte__bar .btn.is-on { background: var(--card-3); color: var(--text); }
.rte__link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line-2); } .rte__link input { flex: 1; min-width: 200px; height: 34px; }
.rte__ed { min-height: 132px; max-height: 320px; overflow-y: auto; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); font-size: 13.5px; line-height: 1.55; outline: none; overflow-wrap: anywhere; }
.rte__ed:focus-visible { border-color: var(--text); } .rte__ed:empty::before { content: attr(data-ph); color: var(--text-3); } .rte__ed[contenteditable="false"] { opacity: 0.6; }
.view:has(.savebar) { scroll-padding-bottom: 96px; } .ed .editor__b { margin-bottom: 12px; }
.reply { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 14px; border-radius: var(--r-s); background: var(--bg); border-left: 3px solid var(--wait); } .reply__b { flex: 1; min-width: 0; }
.reply__t { font-size: 12px; color: var(--wait); font-weight: 700; } .reply__x { font-size: 13.5px; line-height: 1.45; margin-top: 2px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg.is-hl { box-shadow: 0 0 0 2px var(--wait); } .msg:focus { outline: none; }
@media (max-width: 1100px) { .tbl-wrap--sticky:has(.tbl--wide) { overflow-x: auto; } .tbl--wide { min-width: 1060px; } }
.ma__img { position: relative; } .ma__img img { position: absolute; inset: 0; }

/* Вход */
.login { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: #141416; }
.login[hidden] { display: none; }
.login__box { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 18px; background: #202023; border: 1px solid rgba(255, 255, 255, .08); }
.login__box h1 { font-size: 22px; margin: 0; }
.login__sub { margin: -8px 0 4px; color: #9a9aa0; font-size: 13px; }
.login__box label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #c9c9cf; }
.login__box input { height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: #141416; color: #F5F4F5; font: inherit; }
.login__box input:focus-visible { outline: 2px solid #AE1E1E; outline-offset: 1px; }
.login__msg { min-height: 18px; margin: 0; color: #ff8f8f; font-size: 13px; }
.login__note { margin: 0; color: #9a9aa0; font-size: 12px; line-height: 1.5; }