/* Тёмная тема — основа (решение владельца). Акцент утверждается по первому макету. */
:root {
  --bg: #101114;
  --surface: #191b20;
  --surface-2: #22252c;
  --line: #2e323b;
  --text: #f1f2f4;
  --muted: #9aa0ab;
  --accent: #f2c14e;      /* яркое золото вместо тусклой бронзы */
  --accent-ink: #1a1404;
  --good: #3ddc97;
  --bad: #ff6b6b;
  --warn: #ffb547;
  --radius: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
  max-width: 960px; margin: 0 auto; overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

.top { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; }
.brand { display: flex; gap: 10px; align-items: center; }
.brand small { display: block; color: var(--muted); font-size: 12px; }
.logo { width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 800; letter-spacing: .5px; }
.badge { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--warn); }

.tabs, .periods, .subtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 6px 0; }
.tabs button, .periods button, .subtabs button {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 14px;
}
.tabs button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.periods button.on, .subtabs button.on { background: var(--surface-2); border-color: var(--muted); }
.tabs { position: sticky; top: 0; background: var(--bg); padding: 6px 0; z-index: 2;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tabs button { padding: 7px 4px; }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-width: 0; }
.tile .label { color: var(--muted); font-size: 13px; }
.tile .value { font-size: 24px; font-weight: 700; margin: 4px 0; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .hint { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.tile.good .value { color: var(--good); }
.tile.bad .value { color: var(--bad); }
.bar { position: relative; height: 6px; background: var(--surface-2); border-radius: 3px; margin: 8px 0 4px; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 3px; }
.bar.good i { background: var(--good); } .bar.bad i { background: var(--bad); }
.bar b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); opacity: .7; }
.target { font-size: 12px; color: var(--muted); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 10px 0; }
.card h3 { margin: 0 0 8px; font-size: 15px; }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: 0; }
.row span:first-child { min-width: 0; overflow-wrap: anywhere; }
.big { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.alert { border-color: var(--bad); }
.alert .big { color: var(--bad); }
.stub { color: var(--muted); text-align: center; padding: 28px 12px; }
svg.curve { width: 100%; height: 110px; display: block; }

.master .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.master .cat { font-size: 12px; color: var(--muted); }
.master .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; font-size: 13px; }
.master .grid b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.master .grid b.good { color: var(--good); } .master .grid b.bad { color: var(--bad); }
.master > .muted { margin-top: 8px; }

.h2 { font-size: 16px; margin: 18px 0 4px; }
.queue { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.queue div { background: var(--surface-2); border-radius: 10px; padding: 10px; font-size: 13px; color: var(--muted); }
.queue b { display: block; font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.stats b { display: block; font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.stats b.good { color: var(--good); } .stats b.bad { color: var(--bad); }
.goal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 5px 0; font-size: 13px; }
.goal-row .bar { grid-column: 1 / -1; margin: 0; height: 5px; }
.goal-row .v { font-variant-numeric: tabular-nums; }
.goal-row .v.good { color: var(--good); } .goal-row .v.bad { color: var(--bad); }
.goal-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.goal-head small { color: var(--muted); }
.task { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.task:first-of-type { border-top: 0; }
.task .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.task small { color: var(--muted); display: block; }
.task small.late { color: var(--bad); }
.check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--muted); background: transparent; }
.check:hover { border-color: var(--good); background: rgba(61, 220, 151, .15); }
.link { background: none; border: 0; color: var(--muted); padding: 2px 4px; font-size: 12px; }
details.add { margin: 10px 0; }
details.add summary { cursor: pointer; color: var(--accent); list-style: none; padding: 6px 0; font-weight: 600; }
details.add summary::-webkit-details-marker { display: none; }
form.f { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
form.f .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
form.f label { font-size: 12px; color: var(--muted); display: grid; gap: 4px; min-width: 0; }
form.f input, form.f select, form.f textarea { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; width: 100%; min-width: 0; }
form.f button { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px; padding: 10px; font-weight: 700; }
.cl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.cl-row:first-of-type { border-top: 0; }
.cl-row > span { min-width: 0; overflow-wrap: anywhere; }
.cl-row small { display: block; font-size: 11px; }
.cl-row .v { font-variant-numeric: tabular-nums; } .cl-row .v.good { color: var(--good); } .cl-row .v.bad { color: var(--bad); }
form.f.inline { display: flex; gap: 8px; padding: 0; border: 0; background: none; margin-top: 8px; }
form.f.inline input { flex: 1; } form.f.inline button { flex: 0 0 44px; }
#staffCfg select { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; }
label.upload { display: block; margin: 10px 0; }
label.upload input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.upload span { display: block; text-align: center; padding: 12px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 700; cursor: pointer; }
label.upload input:focus-visible + span { outline: 2px solid var(--text); }
label.upload.over span { outline: 3px dashed var(--text); outline-offset: 3px; }
label.upload small.desk { display: none; font-weight: 400; }

/* Компьютер: шире, плитки в 3–4 колонки, карточки финансов в две колонки. */
@media (min-width: 1024px) {
  body { max-width: 1440px; padding: 0 32px 32px; }
  label.upload small.desk { display: inline; }
  label.upload span { padding: 28px; border: 2px dashed var(--accent-ink); }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #payrollTop { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; }
  #mastersList { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
}
details.pay > summary { list-style: none; cursor: pointer; }
details.pay > summary::-webkit-details-marker { display: none; }
details.pay[open] > summary { color: var(--accent); }
.pay-actions { display: grid; gap: 6px; padding: 4px 0 10px; }
.pay-actions form.f.inline { margin: 0; }
.pay-actions input { font-size: 14px !important; padding: 7px 8px !important; }
.pay-actions button { flex: 0 0 auto !important; padding: 7px 10px !important; font-size: 13px; }
.pay-actions button.ok { background: var(--good) !important; }
.pay-actions button.del { background: var(--surface-2) !important; color: var(--bad) !important; border: 1px solid var(--bad) !important; }
.payroll.ok { border-color: var(--good); } .payroll.ok .big { color: var(--good); }
.payroll.alert .big { color: var(--bad); }
.scroll-x { overflow-x: auto; margin: 8px -14px 0; padding: 0 14px; }
table.pnl { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
table.pnl th, table.pnl td { padding: 5px 6px; text-align: right; border-top: 1px solid var(--line); }
table.pnl th:first-child, table.pnl td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
table.pnl th { color: var(--muted); font-weight: 500; border-top: 0; }
table.pnl tr.sum td { font-weight: 700; }
table.pnl tr.total td { color: var(--accent); }
.neg { color: var(--bad); } .pos { color: var(--good); }
form.f select { font: inherit; }
.sal-head, .sal-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 6px; align-items: center; padding: 6px 0; font-size: 13px; }
.sal-head { font-size: 11px; }
.sal-row { border-top: 1px solid var(--line); }
.sal-row > span:not(:first-child), .sal-row > b, .sal-head > span:not(:first-child) { text-align: right; }
.sal-row input { width: 100%; min-width: 0; font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; text-align: right; }
.sal-row input.manual { border-color: var(--accent); }
.sal-row.sum { font-weight: 700; }
@media (max-width: 520px) { .sal-head, .sal-row { grid-template-columns: minmax(0, 1fr) repeat(4, minmax(0, 0.9fr)); font-size: 11px; } }
label.cl-item { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer; }
label.cl-item:first-child { border-top: 0; }
label.cl-item input { width: 22px; height: 22px; accent-color: var(--good); flex: 0 0 auto; }
label.cl-item span { flex: 1; }
.res-row { display: flex; flex-wrap: wrap; gap: 6px; }
.res-row button.res { border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 7px 12px; font-size: 13px; }
.res-row button.res[data-res="booked"], .res-row button.res[data-res="confirmed"] { background: var(--good); color: #062; border-color: var(--good); font-weight: 700; }
.pay-actions input.nextAt { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
button.card.pick { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; cursor: pointer; }
button.card.pick img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
button.pickrow { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; text-align: left; }
.chat { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 80%; padding: 8px 12px; border-radius: 14px; background: var(--surface-2); overflow-wrap: anywhere; }
.msg.them { align-self: flex-start; }
.tick { font-weight: 700; letter-spacing: -2px; }
.tick.read { color: #1d6fe0; }
.msg.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); }
.msg small { display: block; font-size: 10px; opacity: .6; margin-top: 2px; }
.ideas { border-style: dashed; color: var(--muted); font-size: 13px; }

.login { padding-top: 10vh; }
.login-list { display: grid; gap: 10px; margin-top: 16px; }
.login-list button { text-align: left; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); display: flex; justify-content: space-between; }
.login-list button:disabled { opacity: .55; cursor: default; }
.login-list button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.login-list a.primary { display: block; padding: 14px 16px; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font-weight: 700; text-align: center; text-decoration: none; }
.err { color: var(--bad); }

/* Маркетинг: поля недели в две колонки */
.mkt-in { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.mkt-in label { font-size: 12px; }

/* Переключатель ролей владельца */
.role-switch { background: var(--surface-2); color: inherit; border: 1px solid var(--line, #2a2c33); border-radius: 10px; padding: 6px 8px; font: inherit; font-size: 13px; max-width: 170px; }
/* Доступ сотрудников */
.user-row { padding: 10px 0; border-top: 1px solid var(--line); }
.xroles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.chip-check { display: inline-flex; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.chip-check input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.day-pick { display: inline-flex; align-items: center; gap: 4px; }
.day-pick input { font: inherit; font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px; color-scheme: dark; min-width: 0; }
.day-pick button:disabled { opacity: .3; }
.loss-tip { background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 14px; }
table.loss { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
table.loss th { text-align: right; font-weight: 500; color: var(--muted); font-size: 11px; padding: 4px; }
table.loss td { text-align: right; padding: 5px 4px; border-top: 1px solid var(--line); white-space: nowrap; }
table.loss th:first-child, table.loss td:first-child { text-align: left; }
.saved-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70; max-width: calc(100vw - 32px); background: #1f8f4e; color: #fff; font-weight: 600; border-radius: 12px; padding: 10px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.visit-hist { margin-top: 10px; }
.visit-hist h4 { margin: 0 0 2px; font-size: 14px; }
.visit-row { font-size: 13px; padding: 6px 0; }
.dial-modal { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.65); display: grid; place-items: center; padding: 16px; }
.dial-box { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; width: min(340px, 100%); display: grid; gap: 14px; text-align: center; }
.dial-go { display: block; background: #1f8f4e; color: #fff; font-weight: 700; font-size: 18px; border-radius: 12px; padding: 16px; text-decoration: none; }
@media (pointer: coarse) { .desk-only { display: none !important; } }
.pref-row { display: flex; gap: 8px; align-items: center; }
.pref-row input { flex: 1; min-width: 0; font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px; }
.next-label { display: grid; gap: 4px; font-size: 11px; color: var(--muted); }
.next-label input { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; color-scheme: dark; }
.nocall-until { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nocall-until input { font: inherit; font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px; color-scheme: dark; }
#calls details.call[open] { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; } /* полоса между открытой карточкой и списком */
.call-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 6px 0 10px; }
.call-plan > div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; }
.call-plan small { font-size: 12px; }
.call-plan b { font-size: 20px; }
.h3-mini { margin: 10px 0 2px; font-size: 13px; font-weight: 600; }
.home-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.home-grid .card { margin: 0; }
@media (min-width: 1024px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-wide { grid-column: 1 / -1; } }
.feedback { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feedback label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.feedback label:nth-child(n+3) { grid-column: 1 / -1; }
.feedback input, .feedback textarea { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; width: 100%; min-width: 0; }
.client-card { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin: 6px 0 10px; display: grid; gap: 4px; }
.cascade { font-size: 10px; opacity: .85; }

/* Инбокс: на телефоне переписка над списком, на компьютере — две колонки (ниже) */
.inbox-empty { display: none; }
button.pickrow.on { background: var(--surface-2); }

/* ---------- Компьютер (≥1024 px): боковое меню, сетки карточек, формы в несколько колонок ---------- */
@media (min-width: 1024px) {
  body.guest { max-width: 860px; }
  .top { padding: 18px 0 14px; }
  .role-switch { max-width: 240px; padding: 8px 10px; font-size: 14px; }
  button:not(:disabled):hover { filter: brightness(1.12); }

  /* Вкладки → боковое меню слева, контент справа (только там, где вкладки видны: владелец, админ) */
  body:not(.guest) main#app:has(> nav.tabs:not([hidden])) {
    display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 28px; align-items: start;
  }
  body:not(.guest) main#app:has(> nav.tabs:not([hidden])) > :not(nav.tabs) { grid-column: 2; min-width: 0; }
  body:not(.guest) main#app > nav.tabs {
    grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 16px; margin: 6px 0;
    display: flex; flex-direction: column; gap: 4px; padding: 8px; overflow: visible;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  }
  body:not(.guest) main#app > nav.tabs button {
    text-align: left; padding: 10px 14px; border-radius: 10px; border-color: transparent; background: none;
    display: flex; justify-content: space-between; align-items: center;
  }
  body:not(.guest) main#app > nav.tabs button:hover { background: var(--surface-2); }
  body:not(.guest) main#app > nav.tabs button.on { background: var(--accent); color: var(--accent-ink); }
  .periods, .subtabs { flex-wrap: wrap; }

  /* Сетки карточек */
  #payrollTop { grid-template-columns: 3fr 2fr; }
  /* Разделы из карточек — по две в ряд; заголовки, раскрывашки, формы и одиночные карточки после заголовка — во всю ширину */
  #master, #adminsView, #checklist, #goals, #clMaster, #clAdmin, #mkt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
  #mkt > :not(details ~ div.card) { grid-column: 1 / -1; } /* каналы рекламы — по два в ряд */
  :is(#adminsView, #goals, #clMaster, #clAdmin, #master) > :is(.h2, details, form, .ideas, .card:first-child, .h2 + .card:not(:has(+ .card))) { grid-column: 1 / -1; }
  #checklist > details { margin: 0; }
  /* Финансы: «ЗП» рядом с соседней короткой карточкой (Деньги сейчас / сводка платежей), остальное во всю ширину */
  #fin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
  #fin > * { grid-column: 1 / -1; min-width: 0; }
  #fin > .card.payroll:first-child:has(+ div.card), #fin > .card.payroll:first-child + div.card { grid-column: auto; align-self: stretch; }
  .queue { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chat { max-height: 70vh; }

  /* Формы: поля в несколько колонок вместо одной длинной */
  form.f:not(.inline) { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-items: end; gap: 10px 12px; padding: 14px; }
  form.f:not(.inline) .two { display: contents; }
  form.f:not(.inline) > :is(fieldset, .muted, .res-row, .err, label:has(textarea), [data-err]) { grid-column: 1 / -1; }
  form.f:not(.inline) > [data-err]:empty, form.f:not(.inline) > .err:empty { display: none; }
  form.f:not(.inline) > button { justify-self: start; min-width: 180px; padding: 10px 18px; }
  form.f label.cl-item { display: flex; align-self: center; border-top: 0; padding: 8px 0; color: var(--text); font-size: 14px; }
  /* Обзвон: гости в две колонки */
  #calls .card:has(> details.call) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
  #calls .card:has(> details.call) > :not(details.call) { grid-column: 1 / -1; }
  #calls .call-body .pay-actions { grid-template-columns: minmax(0, 1fr); }
  #calls .call-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  #calls .visit-hist { margin-top: 0; max-height: 460px; overflow-y: auto; }
  #calls .card:has(> details.call) > details.call[open] { grid-column: 1 / -1; } /* раскрытая карточка — на всю ширину, соседние ниже */
  form.f.inline { max-width: 720px; }
  .mkt-in { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 12px; }
  details.pay .pay-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
  details.pay .pay-actions form.f.inline { max-width: none; }
  details.pay .pay-actions > :is(.res-row, [data-phone-for], .link) { grid-column: 1 / -1; }
  details.pay .pay-actions > button.link { justify-self: start; }

  /* Таблицы финансов: крупнее и без обрезки первой колонки */
  table.pnl { font-size: 13px; }
  table.pnl th, table.pnl td { padding: 6px 10px; }
  table.pnl th:first-child, table.pnl td:first-child { max-width: 280px; }
  table.pnl tbody tr:hover td { background: var(--surface-2); }
  .sal-head, .sal-row { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); font-size: 14px; }

  /* Инбокс как мессенджер: слева список, справа переписка с карточкой клиента и ответом */
  .inbox { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); grid-template-areas: "list thread"; gap: 14px; align-items: start; }
  .inbox > .ilist { grid-area: list; margin: 10px 0; padding: 6px; position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow-y: auto; }
  .inbox > .ilist button.pickrow { padding: 10px 8px; border-radius: 10px; border-top-color: transparent; }
  .inbox > .ilist button.pickrow + button.pickrow { border-top: 1px solid var(--line); }
  .inbox > .ilist button.pickrow:hover { background: var(--surface-2); }
  .inbox > .ithread, .inbox > .inbox-empty { grid-area: thread; }
  .inbox > .inbox-empty { display: grid; place-items: center; min-height: 50vh; margin: 10px 0; }
  .inbox > .ithread { display: flex; flex-direction: column; height: calc(100vh - 175px); min-height: 480px; position: sticky; top: 12px; }
  .inbox > .ithread .client-card { max-height: 38%; overflow-y: auto; flex: 0 0 auto; }
  .inbox > .ithread .chat { flex: 1 1 auto; max-height: none; min-height: 120px; padding-right: 4px; }
  .inbox > .ithread .msg { max-width: 70%; }
  .inbox > .ithread #replyForm { max-width: none; }
}
@media (min-width: 1600px) {
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #mastersList { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Звук и уведомления */
.notify-wrap { position: relative; display: inline-block; vertical-align: middle; margin-right: 6px; }
.notify-bell { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 5px 9px; font-size: 15px; line-height: 1.2; cursor: pointer; color: inherit; }
.notify-bell.off { filter: grayscale(1); opacity: .65; }
.notify-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: min(280px, calc(100vw - 32px)); display: grid; gap: 8px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.notify-toast { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(320px, calc(100vw - 32px)); display: grid; gap: 2px; text-align: left; cursor: pointer; color: inherit;
  background: var(--surface-2); border: 1px solid var(--accent); border-radius: 12px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.notify-toast + .notify-toast { bottom: 96px; }
.notify-toast span { font-size: 13px; opacity: .85; overflow-wrap: anywhere; }

/* Итог звонка: второе нажатие подтверждает */
.res.armed { background: var(--warn, #c9821a); color: #111; border-color: transparent; font-weight: 600; }
.hist { margin-top: 10px; font-size: 13px; }
.hist-row { border-top: 1px solid var(--line); padding: 6px 0; }
.hist-row div { white-space: pre-wrap; }
.log-row { border-top: 1px solid var(--line, rgba(255,255,255,.08)); padding: 8px 0; }
.log-edit { margin-top: 6px; }