/* Невод · найм-машина — стили панели (дизайн v2 «дороже и тише»).
   Цвета, тени и размеры — только из tokeny-v3.css. Здесь ни одного «голого»
   цвета, кроме прозрачности и чёрного в тенях.

   Правила, которые нельзя растерять при правках:
   · рамок у карточек нет: разделение — тон и волосяные линии --hair;
   · три высоты: .tray (утоплен) → .sheet (поднят) → .sheet.hi (то, что требует действия);
   · мята/тайга (--acc) — только действие; латунь (.money) — только деньги;
     зелёный/янтарь/красный — только про людей; точки всегда со словом;
   · заголовки и крупные цифры — Oswald 200 на ПК, 300 на телефоне;
   · на телефоне меню — нижние вкладки, кнопки на всю ширину. */

/* ---------------------------------------------------------------- основа */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  background-attachment: fixed;
  background-color: var(--bg-layer);
  color: var(--text);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--acc-edge); }
a { color: var(--acc-text); text-decoration: none; transition: color .12s; }
a:hover { color: var(--acc-hover); }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-layer), 0 0 0 4px var(--acc) !important; border-radius: 10px; }
b, strong { font-weight: 700; }
p { margin: 0 0 10px; }
.num, time, .phone { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.mono { font-family: var(--mono); font-size: .92em; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hair-strong); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }

.muted { color: var(--muted); }
.dim { color: var(--dim); }
.hot { color: var(--alarm-text); }
.warm { color: var(--warn-text); }
.good { color: var(--ok-text); }

/* ---------------------------------------------------------------- шрифтовая шкала */

h1, .h1 { font: var(--t-h1); letter-spacing: .005em; margin: 0; }
.h1-page { font: var(--t-h1-page); letter-spacing: .005em; margin: 0; overflow-wrap: anywhere; }
h2, .h2 { font: var(--t-h2); letter-spacing: .02em; margin: 0; }
h2 .of, .h2 .of { color: var(--dim); }
h3 { font: var(--t-title); margin: 0 0 6px; }
.label {
  font: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); display: inline-flex; align-items: center; gap: 8px;
}
.label.acc { color: var(--acc-text); }
.label.warn { color: var(--warn-text); }
.label.alarm { color: var(--alarm-text); }
.lede { color: var(--muted); font: 500 15px/1.45 var(--ui); margin: 8px 0 0; }
.lede b { color: var(--text); }
.small { font: var(--t-small); }
.hint { color: var(--dim); font: var(--t-small); }

/* ---------------------------------------------------------------- каркас */

.shell { max-width: calc(var(--page-max) + 2 * var(--s-6)); margin: 0 auto; padding: 36px var(--s-6) 96px; }

header.top {
  position: sticky; top: 0; z-index: 30;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
  box-shadow: var(--header-shadow);
}
.top-inner {
  max-width: calc(var(--page-max) + 2 * var(--s-6)); margin: 0 auto; padding: 0 var(--s-6);
  height: var(--h-nav); display: flex; align-items: center; gap: 36px;
}

/* Знак Невода: узел + слово целиком + подпись. Jost — только здесь. */
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); white-space: nowrap; flex: none; }
.brand:hover { color: var(--text); }
.brand svg { flex: none; }
.brand .word { font: 400 22px/1 "Jost", var(--ui); letter-spacing: .2em; margin-right: -.2em; }
.brand .sub { font: 400 11px/1 "Jost", var(--ui); letter-spacing: .18em; color: var(--dim); padding-top: 3px; }

nav.main { display: flex; align-items: center; gap: 28px; flex: 1; height: var(--h-nav); min-width: 0; }
nav.main a {
  display: inline-flex; align-items: center; gap: 8px; height: 100%;
  color: var(--muted); font: var(--t-nav); white-space: nowrap;
}
nav.main a:hover { color: var(--text); }
nav.main a.active { color: var(--text); font-weight: 700; box-shadow: inset 0 -2px 0 var(--text); }

/* Бейдж «ждут ответа» — точка и число, без красной заливки. */
.badge { display: inline-flex; align-items: center; gap: 5px; color: var(--alarm-text); font: 700 12px/1 var(--ui); }
.badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--alarm); }
.top-right { display: flex; align-items: center; gap: 22px; flex: none; }

/* Плашка ПРОнаймера — тот же логотип, что в приложении; это ссылка туда. */
.pro-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--acc-text); white-space: nowrap; }
.pro-chip:hover { color: var(--acc-hover); }
.pro-logo {
  display: inline-flex; align-items: baseline; height: 28px; padding: 0 7px 2px; border-radius: var(--r-logo);
  background: var(--logo-bg); color: var(--logo-fg); font-family: var(--display); letter-spacing: .01em;
}
.pro-logo b { font: 600 18px/26px var(--display); }
.pro-logo span { font: 300 18px/26px var(--display); }
.pro-logo.sm { height: 22px; padding: 0 6px 1px; border-radius: 5px; }
.pro-logo.sm b, .pro-logo.sm span { font-size: 14px; line-height: 21px; }

.icon-btn {
  width: 36px; height: 36px; border-radius: 999px; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background .12s, box-shadow .12s, color .12s;
}
.icon-btn:hover { background: var(--ghost); box-shadow: var(--ghost-shadow); color: var(--text); }
.avatar-org {
  width: 32px; height: 32px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-strong);
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--ui); letter-spacing: .02em;
}
a.avatar-org:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--acc-edge); }
:root[data-theme="dark"] .when-light, :root:not([data-theme="dark"]) .when-dark { display: none !important; }

/* Заголовок экрана и его кнопки. */
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.head > div:first-child { min-width: 0; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.back { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: 700 13px/1 var(--ui); margin-bottom: 28px; }
.back:hover { color: var(--text); }
.statusline { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1.3 var(--ui); margin-bottom: 12px; }
.statusline.ok { color: var(--ok-text); } .statusline.warn { color: var(--warn-text); } .statusline.alarm { color: var(--alarm-text); }
.statusline.idle { color: var(--muted); }
.subline { color: var(--muted); font: 500 14px/1.5 var(--ui); margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.subline b { color: var(--text); }

/* ---------------------------------------------------------------- поверхности */

.tray { background: var(--tray); box-shadow: var(--tray-inset); border-radius: var(--r-tray); }
.sheet { background: var(--sheet); box-shadow: var(--lift); border-radius: var(--r-sheet); padding: var(--sheet-pad); }
.sheet.hi { background: var(--sheet-hi); box-shadow: var(--lift-hi); border-radius: var(--r-sheet-hi); }
.sheet + .sheet, .stack > * + * { margin-top: var(--s-6); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; }
.sheet-head .hint { margin: 0; }
.sheet > .rows:first-child > .r:first-child, .sheet-head + .rows > .r:first-child { border-top: 1px solid var(--hair); }
.rows { display: flex; flex-direction: column; }
.r { border-top: 1px solid var(--hair); padding: 14px 0; }
.rows > .r:first-child { border-top: 0; }
.section-title { display: flex; align-items: center; gap: 18px; margin: 40px 0 18px; flex-wrap: wrap; }

.grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-6); align-items: start; }
.grid-main > aside { display: flex; flex-direction: column; gap: var(--s-6); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-6); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-6); align-items: start; }

/* Лоток сводных цифр. */
.figures { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); padding: 4px; }
.figures > * { padding: 20px 24px 22px; position: relative; color: var(--text); display: block; min-width: 0; }
.figures > * + *::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--hair); }
.figures a:hover { color: var(--text); }
.figures a:hover .label { color: var(--text); }
.fig { font: var(--t-num-xl); margin: 14px 0 10px; display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.fig small { font: 300 18px/1 var(--display); color: var(--muted); letter-spacing: .01em; }
.fig.alarm { color: var(--alarm-text); } .fig.warn { color: var(--warn-text); } .fig.ok { color: var(--ok-text); }
.fig-note { color: var(--muted); font: var(--t-small); }
.fig-note a { font-weight: 700; }

/* ---------------------------------------------------------------- кнопки */

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h-btn); padding: 0 22px; border-radius: var(--r-btn); border: 0;
  background: var(--ghost); color: var(--text); box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--hair);
  font: var(--t-btn); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background .12s, box-shadow .12s, transform .08s, color .12s;
}
button:hover, .btn:hover { color: var(--text); box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--acc-edge); }
button:active, .btn:active { background: var(--tray); box-shadow: var(--tray-inset); }
button svg, .btn svg { flex: none; }
button.primary, .btn.primary { background: var(--acc); color: var(--on-acc); box-shadow: var(--btn-shadow); }
button.primary:hover, .btn.primary:hover { background: var(--acc-hover); color: var(--on-acc); box-shadow: var(--btn-shadow); }
button.primary:active, .btn.primary:active { background: var(--acc-hover); box-shadow: inset 0 2px 6px rgba(0,0,0,.3); transform: translateY(1px); }
button.mint, .btn.mint { color: var(--acc-text); box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--acc-edge); }
button.mint:hover, .btn.mint:hover { color: var(--acc-text); box-shadow: var(--ghost-shadow), inset 0 0 0 1.5px var(--acc); }
button.danger, .btn.danger { color: var(--alarm-text); box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--alarm-edge); }
button.danger:hover, .btn.danger:hover { color: var(--alarm-text); box-shadow: var(--ghost-shadow), inset 0 0 0 1.5px var(--alarm); }
button.danger:active, .btn.danger:active { background: var(--alarm); color: var(--on-alarm); }
button.text, .btn.text { background: transparent; box-shadow: none; color: var(--muted); padding: 0 14px; }
button.text:hover, .btn.text:hover { background: var(--ghost); box-shadow: none; color: var(--text); }
button.text:active, .btn.text:active { background: var(--tray); }
button.text.acc, .btn.text.acc { color: var(--acc-text); }
button.text.danger, .btn.text.danger { color: var(--alarm-text); box-shadow: none; }
button.sm, .btn.sm { min-height: var(--h-btn-sm); padding: 0 16px; font-size: 13px; }
button.wide, .btn.wide { width: 100%; }
button:disabled, .btn.disabled { opacity: .38; cursor: not-allowed; transform: none; }
.btn.wait { color: var(--warn-text); box-shadow: inset 0 0 0 1px var(--hair); cursor: default; background: transparent; }
form.inline { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.acts { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.acts form { display: contents; }

/* ---------------------------------------------------------------- метки, точки, деньги */

.money {
  display: inline-flex; align-items: center; white-space: nowrap; height: 24px; padding: 0 10px;
  border-radius: 999px; background: var(--brass); color: var(--brass-text);
  font: 700 12px/1 var(--ui); font-variant-numeric: tabular-nums; box-shadow: var(--pill-inset);
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--dim); }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 4px var(--halo-ok); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 4px var(--halo-warn); }
.dot.alarm { background: var(--alarm); box-shadow: 0 0 0 4px var(--halo-alarm); }
.dot.live { background: var(--ok); box-shadow: 0 0 0 4px var(--halo-ok), 0 0 18px var(--ok); }
.dot.idle { background: var(--dim); box-shadow: 0 0 0 4px var(--hair); }
.st { display: inline-flex; align-items: center; gap: 9px; font: 700 13px/1.3 var(--ui); white-space: nowrap; color: var(--muted); }
.st.ok, .st.live { color: var(--ok-text); } .st.warn { color: var(--warn-text); } .st.alarm { color: var(--alarm-text); }
.st.idle { color: var(--dim); font-weight: 600; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px;
  background: var(--ghost); box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--hair);
  color: var(--muted); font: 700 12px/1 var(--ui); white-space: nowrap;
}
.pill.acc { color: var(--acc-text); box-shadow: inset 0 0 0 1px var(--acc-edge); }
.pill.warn { color: var(--warn-text); } .pill.alarm { color: var(--alarm-text); } .pill.ok { color: var(--ok-text); }
.tag { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.3 var(--ui); color: var(--muted); white-space: nowrap; }
.tag.ok { color: var(--ok-text); } .tag.warn { color: var(--warn-text); } .tag.alarm { color: var(--alarm-text); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tag.plain::before { display: none; }

/* Дорожка заполнения. */
.track { height: 3px; border-radius: 99px; background: var(--track); box-shadow: var(--track-inset); overflow: hidden; }
.track.thick { height: 4px; }
.track > span { display: block; height: 100%; border-radius: 99px; background: var(--acc); }
.track.ok > span, .track.live > span { background: var(--ok); }
.track.warn > span { background: var(--warn); }
.track.alarm > span { background: var(--alarm); }

/* Аватар-инициалы. */
.ava {
  width: 44px; height: 44px; border-radius: 999px; flex: none; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ghost); box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--hair);
  color: var(--acc-text); font: 700 13px/1 var(--ui); letter-spacing: .02em;
}
.ava.lg { width: 72px; height: 72px; font-size: 20px; }
.ava.md { width: 60px; height: 60px; font-size: 17px; }
.ava.vacant { background: transparent; box-shadow: none; border: 1.5px dashed var(--hair-strong); }
.ava .flag { position: absolute; top: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--bg-layer); }

/* ---------------------------------------------------------------- поля */

input[type="text"], input[type="tel"], input[type="password"], input[type="date"], input[type="time"],
input[type="number"], input[type="search"], input[type="url"], input:not([type]), select, textarea {
  width: 100%; min-height: var(--h-input); padding: 10px 14px; border: 0; border-radius: var(--r-field);
  background: var(--field); box-shadow: var(--field-inset); color: var(--text);
  font: 500 15px/1.4 var(--ui); min-width: 0;
  transition: box-shadow .12s;
}
textarea { resize: vertical; line-height: 1.5; field-sizing: content; min-height: 88px; }
input[type="date"], input[type="time"], input[type="number"] { font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus { box-shadow: var(--field-inset), 0 0 0 2px var(--acc) !important; }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
select {
  appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23889890' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
select option { background: var(--bg-layer); color: var(--text); }
::placeholder { color: var(--dim); opacity: .7; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--acc); width: 18px; height: 18px; cursor: pointer; margin: 0; flex: none; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 20px; align-items: start; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.span { grid-column: 1 / -1; }
.field > label, label.field > span, .field > .flabel { color: var(--text); font: 700 13px/1.3 var(--ui); }
.field .hint { margin: 0; }
.field .bad { color: var(--alarm-text); font: 600 13px/1.4 var(--ui); display: flex; gap: 8px; align-items: baseline; }
.field .bad::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--alarm); flex: none; transform: translateY(-1px); }
.field.wrong input, .field.wrong select, .field.wrong textarea { box-shadow: var(--field-inset), 0 0 0 2px var(--alarm-edge); }
.field.check { flex-direction: row; align-items: flex-start; gap: 12px; }
.field.check input { margin-top: 2px; }
.field.check .body { display: flex; flex-direction: column; gap: 3px; }
.field.check .body b { font: 600 14px/1.35 var(--ui); }
.rate-row { display: flex; gap: 8px; }
.rate-row input { flex: 1 1 auto; }
.rate-row select { width: auto; flex: 0 0 auto; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-top: 20px; }
.actions .hint { margin-right: auto; }

/* Поиск-пилюля. */
form.search { margin: 0; display: flex; }
form.search label {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: 999px; width: 240px;
  background: var(--field); box-shadow: var(--field-inset); color: var(--dim);
}
form.search label:focus-within { box-shadow: var(--field-inset), 0 0 0 2px var(--acc); }
form.search input { border: 0; box-shadow: none !important; background: transparent; min-height: 0; padding: 0; font-size: 14px; }

/* Фильтр-чипы и выпадашки на <details>. */
.chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
  color: var(--muted); font: 700 13px/1 var(--ui); white-space: nowrap; cursor: pointer; list-style: none;
  transition: background .12s, box-shadow .12s;
}
.chip::-webkit-details-marker { display: none; }
.chip:hover { color: var(--text); background: var(--ghost); }
.chip.on { color: var(--text); background: var(--ghost); box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--hair); }
.chip.warn { color: var(--warn-text); }
.chip.warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.chip.warn.on { box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--halo-warn); }
.chip svg { color: var(--dim); }
details.menu { position: relative; }
details.menu > .pop {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; min-width: 200px; padding: 6px;
  background: var(--sheet-hi); box-shadow: var(--lift-hi); border-radius: 16px; display: flex; flex-direction: column;
}
details.menu > .pop a { padding: 10px 12px; border-radius: 10px; color: var(--text); font: 600 14px/1.2 var(--ui); white-space: nowrap; }
details.menu > .pop a:hover, details.menu > .pop a.on { background: var(--ghost); }
details.menu > .pop a.on { font-weight: 800; }

/* Вкладки (настройки, входящие) — подчёркивание цветом текста. */
.tabs { display: flex; gap: 26px; box-shadow: inset 0 -1px 0 var(--hair); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; color: var(--muted); font: 600 14px/1 var(--ui); white-space: nowrap; }
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--text); font-weight: 700; box-shadow: inset 0 -2px 0 var(--text); }
.tabs a .n { color: var(--dim); font-weight: 700; }
.tabs a .n.warn { color: var(--warn-text); }
.tabs .reddot { width: 6px; height: 6px; border-radius: 50%; background: var(--alarm); }

/* ---------------------------------------------------------------- уведомления */

.note {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; margin: 0 0 24px;
  background: var(--sheet-hi); box-shadow: var(--lift); border-radius: 16px; font: 500 14px/1.5 var(--ui); color: var(--muted);
}
.note > .dot { margin-top: 6px; }
.note b { color: var(--text); }
.note.alarm { box-shadow: var(--lift), inset 3px 0 0 var(--alarm); }
.note.tray { background: var(--tray); box-shadow: var(--tray-inset); }
.note .acts { margin-left: auto; flex: none; }

/* Тосты: успех исчезает сам через 6 с (CSS), ошибка висит, пока не закроют. */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 460px; padding: 12px 12px 12px 18px;
  background: var(--sheet-hi); box-shadow: var(--lift-hi); border-radius: 14px; color: var(--text); font: 600 14px/1.4 var(--ui);
}
.toast.ok { animation: toast-out .4s ease 6s forwards; }
.toast .x { width: 30px; height: 30px; min-height: 0; padding: 0; background: transparent; box-shadow: none; color: var(--dim); font-size: 18px; }
.toast:has(.x:focus), .toast.closed { display: none; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); visibility: hidden; } }

/* Пустые состояния. */
.empty { text-align: center; padding: 40px 24px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty svg { color: var(--dim); margin-bottom: 6px; }
.empty b { color: var(--text); font: var(--t-title); font-size: 15px; }
.empty p { margin: 0 0 8px; max-width: 420px; font: var(--t-body); }

/* ---------------------------------------------------------------- «Нужно ваше решение» */

.decide { padding: 22px 28px 14px; }
.decide-head { padding-bottom: 14px; }
.drow { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-top: 1px solid var(--hair); }
.drow .what { flex: 1; min-width: 0; }
.drow .what b { display: block; font: 700 16px/1.3 var(--ui); color: var(--text); }
.drow .what b a { color: var(--text); }
.drow .what b a:hover { color: var(--acc-text); }
.drow .what > span { display: block; color: var(--muted); font: var(--t-small); margin-top: 4px; }
.drow .acts { flex: none; }

/* Связка с ПРОнаймером: одна на экран, в момент боли, скрывается на неделю. */
.pro-tie { display: flex; align-items: center; gap: 14px; padding: 16px 0 6px; border-top: 1px solid var(--hair); color: var(--muted); font: 500 13px/1.5 var(--ui); }
.pro-tie .txt { flex: 1; min-width: 0; }
.pro-tie .txt .label { font-size: 10.5px; margin-right: 6px; color: var(--dim); }
.pro-tie .txt b { color: var(--text); }
.pro-tie .txt a { font-weight: 800; white-space: nowrap; }
.pro-tie .close { width: 30px; height: 30px; min-height: 0; padding: 0; background: transparent; box-shadow: none; color: var(--dim); font-size: 18px; flex: none; }
.pro-tie .close:hover { color: var(--text); background: var(--ghost); }
.pro-tie.solo { border-top: 0; padding: 0; }
.pro-tie[hidden] { display: none; }

/* ---------------------------------------------------------------- «Смены» */

/* Календарь-кружочки: полоса под шапкой, липкая. */
.calbar {
  position: sticky; top: var(--h-nav); z-index: 25;
  background: var(--header-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair); box-shadow: var(--header-shadow);
}
.calbar-inner { max-width: calc(var(--page-max) + 2 * var(--s-6)); margin: 0 auto; padding: 0 var(--s-6); height: 96px; display: flex; align-items: center; gap: 18px; }
.cal-month { width: 118px; flex: none; display: flex; flex-direction: column; gap: 5px; }
.cal-month b { font: 300 22px/1 var(--display); letter-spacing: .04em; font-weight: 300; }
.cal-month span { font: 500 12px/1 var(--ui); color: var(--dim); }
.cal-arrow { width: 32px; height: 32px; border-radius: 999px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: var(--ghost); box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--hair); }
.cal-arrow:hover { color: var(--text); box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--acc-edge); }
.cal-arrow.off { opacity: .38; pointer-events: none; }
.cal-days { flex: 1; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.cal-day { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text); }
.cal-day .wd { font: 600 10.5px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.cal-day .c {
  position: relative; width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 300 22px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--dim);
  transition: box-shadow .12s, background .12s;
}
.cal-day.has .c { background: var(--ghost); box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--hair); color: var(--text); }
.cal-day.has:hover .c { box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--acc-edge); }
.cal-day.sel .c { background: var(--acc); color: var(--on-acc); box-shadow: var(--btn-shadow); }
.cal-day.sel .wd { color: var(--text); }
.cal-day .n {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; opacity: .88;
  display: inline-flex; align-items: center; justify-content: center; font: 700 9.5px/1 var(--ui);
  box-shadow: 0 0 0 2px var(--bg-layer); background: var(--ok); color: var(--on-acc);
}
.cal-day .n.warn { background: var(--warn); color: var(--brass-text); }
.cal-day .n.alarm { background: var(--alarm); color: var(--on-alarm); }
.cal-day:not(.has) { pointer-events: none; }

/* «Сейчас на смене» — ghost-полоса. */
.live-strip {
  display: flex; align-items: center; gap: 16px; padding: 14px 22px; margin-bottom: 22px; border-radius: 16px;
  background: var(--ghost); box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--hair); color: var(--muted); font: var(--t-small);
}
.live-strip .label { color: var(--ok-text); }
.live-strip.warn .label { color: var(--warn-text); }
.live-strip .big { font: var(--t-count); color: var(--text); }
.live-strip .txt { flex: 1; min-width: 0; }
.live-strip a.go { font: 700 13px/1 var(--ui); color: var(--text); white-space: nowrap; }
.live-strip a.go:hover { color: var(--acc-text); }

.schedule-bar { display: flex; align-items: center; gap: 14px 22px; margin: 44px 0 26px; flex-wrap: wrap; }
.schedule-bar h2 { padding-right: 22px; box-shadow: inset -1px 0 0 var(--hair-strong); }
.schedule-bar form.search { margin-left: auto; }

/* День — отдельный лист: корешок слева, строки смен справа. */
.dayl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 8px; padding: 24px 28px; scroll-margin-top: 184px; }
.dayl + .dayl { margin-top: 20px; }
.spine {
  position: sticky; top: 196px; align-self: start; padding: 4px 0 8px 18px;
  border-left: 2px solid; border-image: linear-gradient(180deg, var(--spine, var(--ok)), transparent) 1;
}
.dayl.warn { --spine: var(--warn); } .dayl.alarm { --spine: var(--alarm); } .dayl.ok, .dayl.live { --spine: var(--ok); }
.spine .label { font-size: 10.5px; margin-bottom: 8px; color: var(--text); }
.spine .label.today { color: var(--ok-text); }
.spine .dn { display: flex; align-items: flex-end; gap: 10px; }
.spine .dn b { font: var(--t-day); text-shadow: var(--engrave); font-variant-numeric: tabular-nums; font-weight: 200; }
.spine .dn span { color: var(--muted); font: 500 13px/1.3 var(--ui); padding-bottom: 4px; }
.spine .dn span em { display: block; font-style: normal; color: var(--dim); }
.spine .sum { font: 500 12px/1.4 var(--ui); color: var(--muted); margin-top: 14px; }
.spine .sum.warn { color: var(--warn-text); } .spine .sum.alarm { color: var(--alarm-text); }
.spine .dots { display: flex; gap: 3px; margin-top: 10px; }
.spine .dots .dot { width: 8px; height: 8px; box-shadow: 0 0 0 3px var(--halo-ok); }
.spine .dots .dot.warn { box-shadow: 0 0 0 3px var(--halo-warn); }
.spine .dots .dot.alarm { box-shadow: 0 0 0 3px var(--halo-alarm); }

.srow {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) 96px 200px 128px; gap: 0 14px; align-items: center;
  padding: 18px 14px; margin: 0 -14px; border-top: 1px solid var(--hair); border-radius: 14px; color: var(--text);
  position: relative; transition: background .12s, box-shadow .12s;
}
.srow:first-child { border-top-color: var(--hair); }
.srow:hover { background: var(--ghost); color: var(--text); }
.srow:active { background: var(--tray); box-shadow: var(--tray-inset); }
.srow:hover + .srow { border-top-color: transparent; }
.srow .stretch { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.srow > * { position: relative; z-index: 1; }
.srow > .stretch { z-index: 0; }
.srow .time { display: flex; align-items: center; gap: 12px; font: var(--t-time); font-variant-numeric: tabular-nums; pointer-events: none; }
.srow .obj { min-width: 0; pointer-events: none; }
.srow .obj b { display: block; font: var(--t-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .obj span { display: block; color: var(--muted); font: var(--t-small); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .obj span i { font-style: normal; font-weight: 700; color: var(--text); }
.srow .pay { pointer-events: none; }
.srow .cnt { pointer-events: none; }
.srow .cnt .top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.srow .cnt .of { font: var(--t-count); font-variant-numeric: tabular-nums; }
.srow .cnt .of.ok, .srow .cnt .of.live { color: var(--ok-text); } .srow .cnt .of.warn { color: var(--warn-text); } .srow .cnt .of.alarm { color: var(--alarm-text); }
.srow .cnt .st { font-size: 12px; }
.srow .cnt .bench { color: var(--dim); font: 500 12px/1 var(--ui); margin-top: 8px; display: block; }
.srow .go { justify-self: end; }

/* ---------------------------------------------------------------- строки-таблицы */

.trow {
  display: grid; gap: 0 16px; align-items: center; padding: 14px 12px; margin: 0 -12px; border-top: 1px solid var(--hair);
  border-radius: 14px; color: var(--text); transition: background .12s, box-shadow .12s;
}
a.trow:hover, .trow.link:hover { background: var(--ghost); color: var(--text); }
a.trow:active { background: var(--tray); box-shadow: var(--tray-inset); }
.rows > .trow:first-child { border-top: 1px solid var(--hair); }
.thead { display: grid; gap: 0 16px; padding: 0 12px 10px; margin: 0 -12px; }
.thead > * { font: var(--t-label); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.trow .who b { display: block; font: 700 15px/1.3 var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .who > span, .trow .sub { display: block; color: var(--muted); font: var(--t-small); margin-top: 2px; }
.trow .big { font: var(--t-count); font-variant-numeric: tabular-nums; }
.right { justify-self: end; text-align: right; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font: var(--t-label); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding: 0 0 10px; white-space: nowrap; }
td { padding: 13px 0; border-top: 1px solid var(--hair); vertical-align: middle; font: var(--t-body); }
th + th, td + td { padding-left: 18px; }
td.num, th.num { text-align: right; }
.scroll-x { overflow-x: auto; }

/* Пары «ключ — значение» (как добраться, анкета). */
.kv { display: flex; flex-direction: column; }
.kv > div { padding: 14px 0; border-top: 1px solid var(--hair); }
.kv > div:first-child { border-top: 0; padding-top: 4px; }
.kv .label { display: flex; margin-bottom: 6px; font-size: 10.5px; color: var(--dim); }
.kv .v { font: 600 15px/1.45 var(--ui); color: var(--text); overflow-wrap: anywhere; }
.kv .v.plain { font-weight: 500; }
dl.kv2 { display: grid; grid-template-columns: auto 1fr; margin: 0; }
dl.kv2 > dt, dl.kv2 > dd { margin: 0; padding: 11px 0; border-top: 1px solid var(--hair); }
dl.kv2 > dt:first-of-type, dl.kv2 > dd:first-of-type { border-top: 0; }
dl.kv2 > dt { color: var(--muted); padding-right: 18px; font: var(--t-small); }
dl.kv2 > dd { text-align: right; font: 600 14px/1.4 var(--ui); }

/* История событий. */
.feed .item { display: grid; grid-template-columns: 110px 200px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--hair); font: var(--t-small); }
.feed .item:first-child { border-top: 0; }
.feed time { color: var(--dim); }
.feed .what { color: var(--text); font-weight: 700; }
.feed .detail { color: var(--muted); overflow-wrap: anywhere; }

/* Строка решения по записи (переписка, карточка работника). */
.decision { padding: 4px 0 2px; }
.decision + .decision { border-top: 1px solid var(--hair); padding-top: 16px; margin-top: 14px; }
.decision-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.decision-head a b { color: var(--text); }
.decision-head .num { color: var(--muted); font: var(--t-small); }
.decision-head .st { margin-left: auto; }
.decision form.inline { padding-top: 14px; border-top: 1px solid var(--hair); width: 100%; justify-content: flex-end; }
.decision .hint { margin-right: auto; }

/* ---------------------------------------------------------------- переписка */

.thread { display: flex; flex-direction: column; gap: 12px; max-height: 64vh; overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 8px; }
.msg { max-width: 72%; border-radius: 18px; padding: 10px 14px 11px; background: var(--bubble-in); box-shadow: var(--ghost-shadow); font: 500 14.5px/1.45 var(--ui); }
.msg .who { color: var(--dim); font: 700 11.5px/1 var(--ui); display: flex; gap: 6px; margin-bottom: 6px; }
.msg .body { white-space: pre-wrap; word-break: break-word; }
.msg.in { align-self: flex-start; border-bottom-left-radius: 6px; }
.msg.out { align-self: flex-end; background: var(--ghost); box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--hair); border-bottom-right-radius: 6px; }
.msg.out .who { color: var(--acc-text); }
.msg.out.by-recruiter { background: var(--acc); color: var(--on-acc); box-shadow: var(--btn-shadow); }
.msg.out.by-recruiter .who { color: var(--on-acc); opacity: .8; }
.msg .queued { color: var(--dim); font: 600 12px/1.3 var(--ui); margin-top: 6px; }
.msg.by-recruiter .queued { color: var(--on-acc); }
.msg .queued.fail { color: var(--alarm-text); }
.msg.by-recruiter .queued.fail { color: var(--on-acc); text-decoration: underline; }
.marker { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--ghost); box-shadow: inset 0 0 0 1px var(--hair); font: 700 12px/1.3 var(--ui); color: var(--muted); text-align: center; }
.marker.warn { color: var(--warn-text); }
.quick-replies { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 12px; }
.reply-box textarea { min-height: 96px; }

/* ---------------------------------------------------------------- фото «как добраться» */

.photo-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.photo { position: relative; width: 132px; height: 132px; border-radius: 14px; overflow: hidden; background: var(--tray); box-shadow: var(--tray-inset); display: block; cursor: pointer; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s, filter .15s; }
.photo .keep { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 9px; background: var(--sheet-hi); color: var(--text); font: 700 12px/1.2 var(--ui); }
.photo .keep input { width: 15px; height: 15px; }
.photo:has(input:not(:checked)) img { opacity: .3; filter: grayscale(1); }
.photo:has(input:not(:checked)) .keep { color: var(--alarm-text); text-decoration: line-through; }
.photo.new { box-shadow: inset 0 0 0 2px var(--acc); cursor: default; }
.photo.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: transparent; box-shadow: none; border: 1.5px dashed var(--acc-edge); color: var(--muted); text-align: center; padding: 10px; }
.photo.add svg { color: var(--acc-text); }
.photo.add b { font: 700 13px/1.2 var(--ui); color: var(--text); }
.photo.add small { font: 500 11.5px/1.3 var(--ui); color: var(--dim); }
.photo.add:hover { border-color: var(--acc); background: var(--ghost); }
.photo-field .picked { color: var(--acc-text); font: 700 13px/1.3 var(--ui); }
.photo-field.wrong .photo.add { border-color: var(--alarm); }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs a, .thumbs .thumb { position: relative; display: block; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; box-shadow: var(--ghost-shadow); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs form { position: absolute; top: 4px; right: 4px; margin: 0; }
.thumbs form button { width: 22px; height: 22px; min-height: 0; padding: 0; font-size: 13px; background: var(--sheet-hi); }

/* Свёрнутые блоки. */
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ""; width: 9px; height: 9px; border-right: 1.6px solid var(--dim); border-bottom: 1.6px solid var(--dim); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; flex: none; }
details.fold[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.fold > summary h2 { color: var(--muted); }
details.fold[open] > summary h2 { color: var(--text); }
details.fold > .in { padding-top: 16px; }

/* Переключатель-тумблер на чекбоксе. */
.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.switch .sw { width: 44px; height: 26px; border-radius: 999px; background: var(--track); box-shadow: var(--track-inset); position: relative; flex: none; transition: background .15s; }
.switch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ghost); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
:root[data-theme="dark"] .switch .sw::after { background: var(--text); }
.switch input:checked + .sw { background: var(--acc); }
.switch input:checked + .sw::after { transform: translateX(18px); background: var(--on-acc); }
.switch input:focus-visible + .sw { box-shadow: 0 0 0 2px var(--bg-layer), 0 0 0 4px var(--acc); }

/* Плитки-чекбоксы (группы для публикации). */
.pick { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-inner); background: var(--ghost); box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--hair); cursor: pointer; transition: box-shadow .12s; }
.pick:hover { box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--acc-edge); }
.pick:has(input:checked) { box-shadow: var(--ghost-shadow), inset 0 0 0 1.5px var(--acc); }
.pick input { width: 20px; height: 20px; }
.pick .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pick .body b { font: 700 15px/1.3 var(--ui); }
.pick .body span { color: var(--muted); font: var(--t-small); }
.pick .will { font: 600 12px/1 var(--ui); color: var(--dim); white-space: nowrap; }
.pick .will .on { color: var(--acc-text); display: none; }
.pick:has(input:checked) .will .on { display: inline; }
.pick:has(input:checked) .will .off { display: none; }
.picks { display: flex; flex-direction: column; gap: 10px; }

/* Превью поста в стиле Telegram. */
.tg-post { background: var(--bubble-in); border-radius: 16px 16px 16px 4px; padding: 14px 16px; white-space: pre-wrap; font: 500 14px/1.5 var(--ui); box-shadow: var(--ghost-shadow); }
.tg-post a { color: var(--tg-link); }
.tg-buttons { display: grid; gap: 6px; margin-top: 8px; }
.tg-buttons span { display: block; text-align: center; padding: 9px; border-radius: 10px; background: var(--bubble-in); color: var(--tg-link); font: 700 13px/1.2 var(--ui); box-shadow: var(--ghost-shadow); }
pre.copy { margin: 0; white-space: pre-wrap; font: 500 13.5px/1.5 var(--ui); background: var(--field); box-shadow: var(--field-inset); border-radius: var(--r-field); padding: 14px 16px; max-height: 260px; overflow: auto; }

/* Графики метрик. */
.chart { width: 100%; height: 172px; display: block; overflow: visible; }
.chart .axis { stroke: var(--hair-strong); stroke-width: 1; }
.chart .line { fill: none; stroke: var(--acc); stroke-width: 2.5; }
.chart .dot { fill: var(--acc); }
.chart text { fill: var(--dim); font-size: 11px; font-family: var(--ui); }
.bar { display: grid; grid-template-columns: 180px minmax(0, 1fr) 80px; gap: 16px; align-items: center; padding: 10px 0; }
.bar .track { height: 8px; }
.bar b { font: var(--t-count); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- телефон: нижние вкладки */

.tabbar { display: none; }

@media (max-width: 1180px) {
  nav.main { gap: 20px; }
  .top-inner { gap: 24px; }
  .brand .sub { display: none; }
  .srow { grid-template-columns: 104px minmax(0, 1fr) 90px 180px 120px; }
}
@media (max-width: 1020px) {
  .grid-main { grid-template-columns: 1fr; }
  .grid-main > aside { position: static; }
  .figures { --cols: 2 !important; }
  .figures > *:nth-child(3)::before { display: none; }
  .srow { grid-template-columns: 100px minmax(0, 1fr) 160px; grid-template-areas: "time obj go" "time cnt pay"; gap: 8px 14px; }
  .srow .time { grid-area: time; } .srow .obj { grid-area: obj; } .srow .pay { grid-area: pay; justify-self: end; }
  .srow .cnt { grid-area: cnt; } .srow .go { grid-area: go; }
}

@media (max-width: 860px) {
  :root { --h-nav: var(--h-nav-tel); }
  html { scroll-padding-top: 130px; }
  body { font-size: 15px; }
  .shell { padding: 22px var(--pad-tel) calc(var(--h-tabbar) + 40px + env(safe-area-inset-bottom)); }
  .top-inner { padding: 0 var(--pad-tel); gap: 12px; }
  nav.main, .top-right .avatar-org, .top-right .pro-chip .arr { display: none; }
  .top-right { margin-left: auto; gap: 8px; }
  .brand { gap: 9px; }
  .brand svg { width: 22px; height: 22px; }
  .brand .word { font-size: 18px; letter-spacing: .18em; }
  .pro-logo { height: 24px; padding: 0 6px 1px; }
  .pro-logo b, .pro-logo span { font-size: 15px; line-height: 23px; }

  h1, .h1 { font-weight: 300; font-size: 44px; }
  .h1-page { font-weight: 300; font-size: 36px; }
  .h2, h2 { font-size: 22px; }
  .fig { font-weight: 300; font-size: 36px; margin: 10px 0 8px; }
  .sheet { padding: var(--sheet-pad-tel); box-shadow: var(--lift-tel); border-radius: 18px; }
  .sheet.hi { box-shadow: var(--lift-hi-tel); border-radius: 20px; }
  .sheet + .sheet, .stack > * + * { margin-top: 16px; }
  .grid-main, .grid-2, .grid-3 { gap: 16px; }
  .head { margin-bottom: 18px; }
  .head .toolbar { width: 100%; }
  .head .toolbar .btn, .head .toolbar button { flex: 1; }
  .head .toolbar .btn.primary { order: -1; flex-basis: 100%; }
  button, .btn { min-height: var(--h-btn-tel); }
  button.sm, .btn.sm { min-height: 40px; }
  .back { margin-bottom: 18px; }

  .figures { --cols: 2 !important; padding: 2px; }
  .figures > * { padding: 14px 14px 16px; }
  .figures > *:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .figures > *:nth-child(odd)::before { display: none; }
  .figures > *:nth-child(even)::before { display: block; top: 14px; bottom: 14px; }

  .decide { padding: 18px 16px 10px; }
  .drow { flex-wrap: wrap; gap: 12px; }
  .drow .what { flex-basis: 100%; }
  .drow .acts { width: 100%; flex-wrap: nowrap; }
  .drow .acts > *, .drow .acts form > * { flex: 1; }
  .drow .acts form { display: flex; flex: 1; }
  .pro-tie { flex-wrap: wrap; align-items: flex-start; }
  .pro-tie .txt { flex-basis: calc(100% - 44px); order: 2; }
  .pro-tie .pro-logo { order: 1; }
  .pro-tie .close { order: 3; position: absolute; right: 8px; }
  .pro-tie { position: relative; }

  .calbar { top: var(--h-nav-tel); }
  .calbar-inner { padding: 0; height: 88px; gap: 0; position: relative; }
  .cal-month, .cal-arrow { display: none; }
  .cal-days { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 44px 0 var(--pad-tel); gap: 0; scroll-snap-type: x proximity; }
  .cal-days::-webkit-scrollbar { display: none; }
  .cal-day { flex: 0 0 58px; scroll-snap-align: start; }
  .cal-day .c { width: 42px; height: 42px; }
  .calbar-inner::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 44px; background: linear-gradient(90deg, transparent, var(--fade)); pointer-events: none; }

  .live-strip { flex-wrap: wrap; gap: 6px 12px; padding: 14px 16px; }
  .live-strip .txt { flex-basis: calc(100% - 30px); }
  .schedule-bar { margin: 32px 0 18px; }
  .schedule-bar h2 { box-shadow: none; padding-right: 0; }
  .schedule-bar .chips { margin-left: auto; }
  .schedule-bar form.search { margin-left: 0; flex-basis: 100%; }
  form.search label { width: 100%; height: 44px; }

  .dayl { display: block; padding: 0 16px 6px; scroll-margin-top: 150px; }
  .dayl + .dayl { margin-top: 16px; }
  .spine {
    position: static; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "dn label dots" "dn sum dots"; align-items: center;
    gap: 2px 14px; padding: 14px 0 14px 14px; margin: 0 -16px 0 -16px; padding-left: 18px; padding-right: 16px;
    border-left: 0; border-image: none; box-shadow: inset 2px 0 0 var(--spine, var(--ok)); border-radius: 18px 18px 0 0;
  }
  .spine .label { grid-area: label; margin: 0; align-self: end; }
  .spine .dn { grid-area: dn; }
  .spine .dn b { font-size: 44px; font-weight: 300; }
  .spine .dn span { display: none; }
  .spine .sum { grid-area: sum; margin: 0; align-self: start; }
  .spine .dots { grid-area: dots; margin: 0; }
  .srow { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "time st" "obj obj" "cnt pay" "trk trk" "go go"; gap: 6px 10px; padding: 16px 0; margin: 0; border-radius: 0; }
  .srow:hover { background: transparent; }
  .srow .time { grid-area: time; font-weight: 300; font-size: 30px; }
  .srow .obj { grid-area: obj; }
  .srow .obj b { white-space: normal; }
  .srow .pay { grid-area: pay; justify-self: end; }
  .srow .cnt { display: contents; }
  .srow .cnt .top { grid-area: cnt; margin: 0; justify-content: flex-start; align-items: baseline; gap: 10px; }
  .srow .cnt .top .st { position: absolute; right: 0; top: 24px; }
  .srow .cnt .top .of { font-size: 22px; }
  .srow .cnt .track { grid-area: trk; margin-top: 4px; }
  .srow .cnt .bench { display: none; }
  .srow .cnt .bench-inline { display: inline; }
  .srow .go { grid-area: go; justify-self: stretch; }
  .srow .go .btn { width: 100%; }

  .feed .item { grid-template-columns: 1fr; gap: 2px; }
  .msg { max-width: 88%; }
  .bar { grid-template-columns: 1fr 64px; }
  .bar .track { grid-column: 1 / -1; grid-row: 2; }
  .toasts { left: 16px; right: 16px; bottom: calc(var(--h-tabbar) + 12px); align-items: stretch; }
  .note { flex-wrap: wrap; }
  .note .acts { margin-left: 0; width: 100%; }
  .actions { justify-content: stretch; }
  .actions > * { flex: 1; }
  .actions .hint { flex-basis: 100%; }
  .photo { width: calc(50% - 5px); height: auto; aspect-ratio: 1; }
  .tabs { margin-left: calc(-1 * var(--pad-tel)); margin-right: calc(-1 * var(--pad-tel)); padding: 0 var(--pad-tel); gap: 22px; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--h-tabbar) + env(safe-area-inset-bottom)); padding: 8px 4px env(safe-area-inset-bottom);
    background: var(--header-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 -1px 0 var(--hair), 0 -10px 30px -20px rgba(0,0,0,.35);
  }
  .tabbar > a, .tabbar summary {
    display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 4px;
    font: 600 11px/1 var(--ui); color: var(--dim); cursor: pointer; list-style: none;
  }
  .tabbar summary::-webkit-details-marker { display: none; }
  .tabbar .ti { position: relative; display: grid; place-items: center; height: 26px; }
  .tabbar .ti .reddot { position: absolute; top: -1px; right: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--alarm); box-shadow: 0 0 0 2px var(--bg-layer); }
  .tabbar > a.active, .tabbar details.active > summary { color: var(--acc-text); font-weight: 700; }
  .tabbar details { position: relative; }
  .tabbar .more {
    position: absolute; right: 6px; bottom: calc(100% + 14px); min-width: 230px; padding: 6px;
    background: var(--sheet-hi); box-shadow: var(--lift-hi); border-radius: 18px; display: flex; flex-direction: column;
  }
  .tabbar .more a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; color: var(--text); font: 600 15px/1 var(--ui); }
  .tabbar .more a svg { color: var(--muted); }
  .tabbar .more a:hover, .tabbar .more a.active { background: var(--ghost); }
}

@media (max-width: 380px) {
  .figures > * { padding: 12px; }
  .fig { font-size: 32px; }
}

/* Корешок дня: на ПК — «пт / октября», на телефоне — полное имя дня. */
.spine .dn .wd-long { display: none; }
.spine .dn span span { display: block; }
@media (max-width: 860px) {
  .spine .dn span { display: none; }
}
.spine .mtitle { display: none; }
@media (max-width: 860px) {
  .spine > .label { display: none; }
  .spine .mtitle { display: flex; align-items: baseline; gap: 10px; grid-area: label; align-self: end; font: 600 15px/1.2 var(--ui); }
  .spine .mtitle .label { margin: 0; font-size: 10px; }
}

/* Подтверждение необратимого: всплывающий лист на <details>, без скриптов. */
details.confirm { position: relative; display: inline-block; }
details.confirm > summary { list-style: none; }
details.confirm > summary::-webkit-details-marker { display: none; }
details.confirm > .pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: 360px; max-width: calc(100vw - 40px);
  padding: 20px 22px 18px; background: var(--sheet-hi); box-shadow: var(--lift-hi); border-radius: var(--r-sheet-hi); text-align: left; white-space: normal;
}
details.confirm > .pop b { display: block; font: 300 22px/1.15 var(--display); margin-bottom: 8px; }
details.confirm > .pop p { color: var(--muted); font: var(--t-small); margin: 0 0 14px; }
details.confirm > .pop .acts { padding-top: 14px; border-top: 1px solid var(--hair); }

/* Карточка смены: состав. */
.crew { display: grid; grid-template-columns: 44px minmax(0, 1fr) 150px auto; gap: 0 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hair); }
.crew .who { min-width: 0; }
.crew .who b { display: block; font: 700 15px/1.3 var(--ui); }
.crew .who b a { color: var(--text); }
.crew .who b a:hover { color: var(--acc-text); }
.crew .who span { display: block; color: var(--muted); font: var(--t-small); margin-top: 3px; }
.crew .phone { color: var(--muted); font: var(--t-small); white-space: nowrap; }
.crew .acts { flex-wrap: nowrap; }
.crew.free .who span { color: var(--dim); font: 500 14px/1.3 var(--ui); margin: 0; }
.bench-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 140px auto; gap: 0 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); }
.bench-row .pos { font: 300 20px/1 var(--display); color: var(--dim); }
.funnel-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 10px; }
.funnel-line .fig { margin: 0; }
.funnel-line small { color: var(--muted); font: 500 13px/1.2 var(--ui); }
.funnel-steps { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--dim); font: var(--t-small); }
.funnel-steps b { color: var(--text); font-weight: 700; }
@media (max-width: 860px) {
  .crew { grid-template-columns: 44px minmax(0, 1fr); gap: 10px 14px; }
  .crew .phone { grid-column: 2; }
  .crew .acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr .8fr; }
  .crew .acts > *, .crew .acts form > *, .crew .acts details > summary { width: 100%; }
  .crew.free { grid-template-columns: 44px 1fr; }
  .bench-row { grid-template-columns: 28px minmax(0, 1fr); }
  .bench-row > :nth-child(3), .bench-row > :nth-child(4) { grid-column: 2; }
  details.confirm > .pop { position: fixed; left: 16px; right: 16px; top: auto; bottom: calc(var(--h-tabbar) + 16px); width: auto; }
}

/* Входящие: строка разговора. */
.conv { grid-template-columns: 44px minmax(150px, 220px) minmax(0, 1fr) 120px 150px 16px; grid-template-areas: "ava who last when state chev" "ava who shiftl when state chev"; row-gap: 3px; }
.conv .ava { grid-area: ava; } .conv .who { grid-area: who; min-width: 0; } .conv .when { grid-area: when; } .conv .state { grid-area: state; } .conv .chev { grid-area: chev; }
.conv .who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .last { grid-area: last; min-width: 0; font: 500 14px/1.4 var(--ui); color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; align-self: end; }
.conv .last b { font-weight: 700; }
.conv .shiftl { grid-area: shiftl; color: var(--dim); font: var(--t-small); align-self: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .when { font: 600 13px/1.3 var(--ui); color: var(--muted); }
.conv .state { font: 700 13px/1.3 var(--ui); color: var(--muted); }
.conv .chev { color: var(--dim); }
@media (max-width: 1020px) {
  .conv { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ava who when" "ava last last" "ava shiftl state"; gap: 4px 14px; }
  .conv .ava { align-self: start; } .conv .when { justify-self: end; font-size: 12px; }
  .conv .state { font-size: 12px; justify-self: end; } .conv .chev { display: none; }
}
@media (max-width: 860px) {
  .hide-tel { display: none !important; }
  .head form.search, .head form.search label { width: 100%; }
  .head form.search { flex-basis: 100%; }
  .head .toolbar form.search { order: 2; }
}
@media (max-width: 860px) {
  .decision form.inline > button, .decision form.inline > .btn { flex: 1 1 40%; }
  .decision form.inline > button.primary { flex-basis: 100%; order: 9; }
}

/* Работники: таблица. */
.wtable { grid-template-columns: 44px minmax(0, 1fr) 160px 120px 130px 110px 190px; }
.wtable .c-rel .big { margin-right: 4px; }
.wtable .c-now { white-space: normal; font-size: 12.5px; }
@media (max-width: 1020px) {
  .thead.wtable { display: none; }
  .trow.wtable { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ava who rel" "ava spec spec" "ava now now"; gap: 3px 14px; }
  .wtable .ava { grid-area: ava; align-self: start; } .wtable .who { grid-area: who; }
  .wtable .c-rel { grid-area: rel; justify-self: end; } .wtable .c-city { display: none; } .wtable .c-last { display: none; }
  .wtable .c-spec { grid-area: spec; } .wtable .c-now { grid-area: now; }
  .wtable .c-rel .sub { display: none !important; }
}
@media (max-width: 860px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--pad-tel)); margin-right: calc(-1 * var(--pad-tel)); padding: 0 var(--pad-tel); }
  .chips::-webkit-scrollbar { display: none; }
  .schedule-bar .chips { margin: 0; padding: 0; overflow: visible; }
}
/* Связка в узкой колонке: логотип и крестик сверху, текст ниже. */
aside .pro-tie { display: grid; grid-template-columns: 1fr auto; gap: 10px 8px; align-items: center; }
aside .pro-tie .pro-logo { justify-self: start; }
aside .pro-tie .txt { grid-column: 1 / -1; grid-row: 2; }
aside .pro-tie .close { grid-column: 2; grid-row: 1; position: static; }
.grid-main.wide-aside { grid-template-columns: minmax(0, 1fr) 400px; }
@media (max-width: 1020px) { .grid-main.wide-aside { grid-template-columns: 1fr; } }

/* Справочник клиентов. */
.client-block { border-top: 1px solid var(--hair); padding: 18px 0 8px; }
.client-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.client-name { display: block; font: 700 17px/1.3 var(--ui); margin-bottom: 3px; }
.obj-box { padding: 14px 16px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 12px; }
.obj-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.obj-top b { display: block; font: 700 15px/1.3 var(--ui); margin-bottom: 3px; }
.obj-top .hint { display: block; }
.thumbs .add-photo { display: inline-flex; align-items: center; }

/* Деньги в списках — текстом латунного цвета; пилюля .money — только в
   заголовке карточки смены и в превью поста. */
.price { color: var(--money); font: 700 14px/1.2 var(--ui); white-space: nowrap; font-variant-numeric: tabular-nums; }
.srow .pay { justify-self: end; }

/* Подсказка у поля — знак «?» с текстом во всплывающей подсказке. */
.q { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; margin-left: 6px; vertical-align: 1px;
  box-shadow: inset 0 0 0 1px var(--hair-strong); color: var(--dim); font: 700 10px/1 var(--ui); cursor: help; }
.q:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--acc-edge); }

/* «⋯» — остальные действия строки. */
details.more-acts { position: relative; display: inline-block; }
details.more-acts > summary { list-style: none; width: 38px; height: 38px; border-radius: 999px; display: inline-grid; place-items: center; cursor: pointer;
  background: var(--ghost); box-shadow: var(--ghost-shadow); color: var(--muted); }
details.more-acts > summary::-webkit-details-marker { display: none; }
details.more-acts > summary:hover { color: var(--text); box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--acc-edge); }
details.more-acts > .pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; padding: 6px;
  background: var(--sheet-hi); box-shadow: var(--lift-hi); border-radius: 16px; display: flex; flex-direction: column; }
details.more-acts > .pop button { justify-content: flex-start; width: 100%; background: transparent; box-shadow: none; border-radius: 10px; min-height: 40px; padding: 0 12px; font-weight: 600; }
details.more-acts > .pop button:hover { background: var(--ghost); }
details.more-acts > .pop button.danger { color: var(--alarm-text); }
details.more-acts > .pop .sep { height: 1px; background: var(--hair); margin: 4px 6px; }
@media (max-width: 860px) {
  .crew .acts { display: flex; flex-wrap: nowrap; }
  .crew .acts > button { flex: 1; }
  .crew .acts details.more-acts > .pop { right: 0; }
}

/* Каналы: таблица. */
.ctable { grid-template-columns: 220px minmax(0, 1fr) 64px 64px 92px 64px 130px; align-items: center; }
.ctable .who .st { display: inline-flex; }
.ctable.off .big { color: var(--dim); }
@media (max-width: 1020px) {
  .thead.ctable { display: none; }
  .trow.ctable { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "who who who act" "what what what what" ; row-gap: 8px; }
  .ctable .who { grid-area: who; } .ctable .c-what { grid-area: what; } .ctable .c-act { grid-area: act; }
  .ctable .c-n { justify-self: start; text-align: left; font-size: 18px; }
  .ctable .c-n::before { display: block; font: var(--t-label); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
  .ctable .c-n:nth-of-type(3)::before { content: "7 дней"; } .ctable .c-n:nth-of-type(4)::before { content: "30 дней"; }
  .ctable .c-n:nth-of-type(5)::before { content: "записались"; } .ctable .c-n:nth-of-type(6)::before { content: "доля"; }
}

/* Метрики. */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.tile { padding: 22px 24px; }
.tile .fig small { margin-left: 6px; }
.bar { grid-template-columns: 170px minmax(0, 1fr) 110px; }
.weeks { display: flex; gap: 12px; align-items: flex-end; }
.wk { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.wk .col { width: 100%; height: 110px; border-radius: 12px; display: flex; align-items: flex-end; overflow: hidden; }
.wk .col span { display: block; width: 100%; background: var(--warn); border-radius: 0; min-height: 0; }
@media (max-width: 1020px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid-4 { gap: 12px; } .tile { padding: 16px; } .bar { grid-template-columns: 1fr 90px; } }

/* Настройки: строки «подпись — поле». */
.set-rows { display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.set-row { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.set-row:last-child { border-bottom: 0; }
.set-split { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 10px 24px; align-items: start; }
.set-split .set-label { padding-top: 12px; }
.set-label { font: 700 14px/1.35 var(--ui); color: var(--text); }
.danger-mark { color: var(--alarm-text); font: 700 10.5px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; margin-left: 6px; }
.login-box { background: var(--tray); box-shadow: var(--tray-inset); border-radius: var(--r-tray); padding: 20px 22px; margin: 0 0 18px; }
.login-title { display: block; font: 300 22px/1.2 var(--display); margin-bottom: 10px; }
.login-howto { margin: 4px 0 14px 20px; padding: 0; line-height: 1.6; }
.login-step .actions { justify-content: flex-start; }
.login-narrow { max-width: 340px; }
.connect { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; margin: 0 0 18px; border-radius: var(--r-inner); background: var(--tray); box-shadow: var(--tray-inset); }
.connect > div { display: flex; flex-direction: column; gap: 4px; max-width: 640px; }
.connect.on { box-shadow: var(--tray-inset), inset 3px 0 0 var(--ok); }
.people { display: flex; flex-direction: column; margin: 0 0 18px; border-top: 1px solid var(--hair); }
.person.recipient { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.person.recipient .who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.invite { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: -6px 0 18px; }
.invite input { flex: 1 1 320px; width: auto; font-family: var(--mono); font-size: 13px; }
.invite .hint { flex-basis: 100%; }
@media (max-width: 860px) { .set-split { grid-template-columns: 1fr; } .set-split .set-label { padding-top: 0; } }
.grid-2 > .sheet, .grid-3 > .sheet, .grid-4 > .sheet, .grid-main > .sheet, .grid-main > aside > .sheet:first-child { margin-top: 0; }
.chan { display: inline-flex; align-items: center; gap: 4px; }
.chan svg { color: var(--dim); }
@media (max-width: 1020px) { .wtable .who .chan { display: none; } }

/* Сотрудники. */
.staff-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 0 16px; align-items: center; }
.staff-row b { font: 700 15px/1.3 var(--ui); }
.staff-row.off { opacity: .6; }
.staff-form { display: grid; grid-template-columns: 1fr 1fr 180px auto; gap: 14px; align-items: end; }
@media (max-width: 860px) {
  .staff-row { grid-template-columns: 44px minmax(0, 1fr); row-gap: 10px; }
  .staff-row > form, .staff-row > .acts, .staff-row > .pill { grid-column: 2; justify-content: flex-start; }
  .staff-form { grid-template-columns: 1fr; }
}

/* Ставка: единица, от–до, «за что» для сдельной, когда выплата. */
.rate-grid { display: grid; grid-template-columns: 150px 1fr 1fr 1.2fr; gap: 10px; align-items: center; }
.rate-num, .rate-piece { display: flex; align-items: center; gap: 8px; background: var(--field); box-shadow: var(--field-inset); border-radius: var(--r-field); padding: 0 12px; min-height: var(--h-input); }
.rate-num span, .rate-piece span { color: var(--dim); font: 600 13px/1 var(--ui); }
.rate-num input, .rate-piece input { box-shadow: none !important; background: transparent; padding: 0; min-height: 0; border-radius: 0; }
.rate-num:focus-within, .rate-piece:focus-within { box-shadow: var(--field-inset), 0 0 0 2px var(--acc); }
.rate-piece { display: none; grid-column: 1 / 3; }
.rate-grid:has(.rate-unit option[value="piece"]:checked) .rate-piece { display: flex; }
.rate-payout { grid-column: auto; }
@media (max-width: 860px) {
  .rate-grid { grid-template-columns: 1fr 1fr; }
  .rate-unit, .rate-payout, .rate-piece { grid-column: 1 / -1; }
}
@media (min-width: 861px) { .tabs { flex-wrap: wrap; column-gap: 24px; overflow: visible; } }

/* Форма смены: день, начало, конец, людей — одной строкой. */
.when-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr .8fr; gap: 14px; }
.notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.notes-grid textarea { min-height: 130px; }
.quick-notes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.quick-notes .chip { min-height: 0; height: 32px; padding: 0 12px; background: var(--ghost); box-shadow: var(--ghost-shadow); font-size: 12.5px; gap: 6px; }
.quick-notes .chip small { color: var(--dim); font: 600 10.5px/1 var(--ui); }
.quick-notes .chip:hover { box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--acc-edge); }
@media (max-width: 860px) {
  .when-grid { grid-template-columns: 1fr 1fr; }
  .when-grid > .field:first-child { grid-column: 1 / -1; }
  .notes-grid { grid-template-columns: 1fr; }
}

/* «В пост» / «Только боту»: одна строка — кому уйдёт текст */
.note-for { display: block; margin: -2px 0 8px; }

/* Длинные списки с галочками (рассылка по базе, старые чаты) — плотнее */
.picks.dense { gap: 6px; }
.picks.dense .pick { padding: 10px 14px; }
.picks.dense .pick .body b { font-size: 14px; }
.grid-main > * { min-width: 0; }

/* «Подсказка боту»: объяснение для чайника и пример диалога */
.bot-brief { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-inner); background: var(--tray); }
.bot-brief-who { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ghost); box-shadow: var(--ghost-shadow); color: var(--acc-text); }
.bot-brief b { font: 700 14px/1.35 var(--ui); }
.bot-example { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--hair); }
.bot-example span { font: var(--t-small); color: var(--muted); }
.bot-example .bot-a { color: var(--text); }

/* «Добавить человека»: списку нужен воздух, телефон — узкий столбец */
.crew.pick-row { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
.crew.pick-row .phone { padding: 0 6px; }

/* «Через какой аккаунт»: переключатель-пилюли на радио */
.acc-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.acc-switch label { position: relative; cursor: pointer; }
.acc-switch input { position: absolute; opacity: 0; pointer-events: none; }
.acc-switch .chip { background: transparent; box-shadow: inset 0 0 0 1px var(--hair); }
.acc-switch .chip:hover { background: var(--ghost); }
.acc-switch input:checked + .chip { color: var(--text); background: var(--ghost); box-shadow: var(--ghost-shadow), inset 0 0 0 1px var(--acc-edge); }
.acc-switch input:focus-visible + .chip { outline: 2px solid var(--acc); outline-offset: 2px; }
.acc-switch .chip small { color: var(--dim); font: 600 11px/1 var(--ui); }

/* «Аккаунты сотрудников» в настройках */
.staff-acc { display: flex; flex-direction: column; gap: 10px; }
.staff-acc .connect { margin: 0; }

/* «Мой Telegram» — один экран подключения */
.acc-connect { max-width: 640px; }
.acc-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; counter-reset: s; flex-wrap: wrap; }
.acc-steps li { counter-increment: s; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--tray); }
.acc-steps li::before { content: counter(s); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--hair); color: var(--dim); font-weight: 700; font-size: 12px; }
.acc-steps li.now { color: var(--text); font-weight: 700; }
.acc-steps li.now::before { background: var(--acc); color: var(--on-acc); }
.acc-steps li.done::before { content: "✓"; background: var(--halo-ok); color: var(--ok); }
.qr-login { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.qr-box { background: #fff; border-radius: 16px; padding: 10px; line-height: 0; box-shadow: var(--btn-shadow); }
.qr-box svg { width: 220px; height: 220px; }
.qr-login > div:last-child { flex: 1 1 240px; }
.acc-alt { margin-top: 22px; border-top: 1px solid var(--hair); padding-top: 14px; }
.acc-alt summary { cursor: pointer; color: var(--dim); font-size: 13px; margin-bottom: 12px; }