/* ============================================================
   СЭС-ПОМОР CRM — дизайн-система «Ночная охота»
   Единый источник правды для всех страниц (base.html + login.html).

   Характер: рабочий инструмент ночной смены. Глубокая чернильная
   синева + тёплый янтарь фонаря. Тёмная тема — родная, светлая —
   «дневная смена»: тёплая бумага + чернила (CRM выросла из тетрадей,
   поэтому суммы и телефоны — моноширинным «гроссбухом»).
   Шрифты только системные (работа офлайн в подвале):
   дисплей — Avenir Next Condensed / Futura / Trebuchet MS,
   текст   — Avenir Next / Verdana / Tahoma,
   цифры   — Menlo / Consolas.
   ============================================================ */

:root {
  color-scheme: light dark;

  --font-display: "Avenir Next Condensed", "AvenirNextCondensed-DemiBold",
                  "Avenir Next", Futura, "Trebuchet MS", Verdana, sans-serif;
  --font-body: "Avenir Next", Verdana, Tahoma, "Segoe UI", sans-serif;
  --font-mono: Menlo, Consolas, "DejaVu Sans Mono", monospace;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;

  /* ---- ночь (родная тема) ---- */
  --bg: #0b1424;
  --card: #15223c;
  --card-grad: linear-gradient(180deg, #182741 0%, #131f36 100%);
  --field-bg: #0c1628;
  --border: #2a3d63;
  --border-soft: rgba(126, 154, 204, 0.16);
  --fg: #eaf0fc;
  --muted: #90a4c9;
  --accent: #ffb44d;
  --accent-2: #f59d1c;
  --accent-ink: #241502;
  --link: #ffc670;
  --track: #1d2c4c;

  --danger: #ff8177;
  --danger-bg: rgba(255, 99, 88, 0.13);
  --danger-border: rgba(255, 99, 88, 0.4);
  --ok: #5bd996;
  --ok-bg: rgba(66, 211, 140, 0.13);

  --st-plan: #7fb2ff;
  --st-plan-bg: rgba(96, 156, 255, 0.15);
  --st-done: #5bd996;
  --st-done-bg: rgba(66, 211, 140, 0.14);
  --st-paid: #ffb44d;
  --st-paid-bg: rgba(255, 171, 64, 0.15);
  --st-cancel: #8b99b4;
  --st-cancel-bg: rgba(139, 153, 180, 0.14);

  /* легаси-алиасы (на случай var(--error-bg) в старых кусках) */
  --error-bg: var(--danger-bg);
  --error-fg: var(--danger);
  --success-bg: var(--ok-bg);
  --success-fg: var(--ok);

  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.045),
                 0 14px 30px -18px rgba(3, 8, 20, 0.9);
  --shadow-btn: 0 6px 18px -8px rgba(245, 157, 28, 0.55);
  --glow: 0 0 16px rgba(255, 176, 64, 0.35);
  --nav-bg: rgba(10, 17, 31, 0.92);

  --scene-bg:
    radial-gradient(1100px 560px at 85% -12%, rgba(255, 170, 60, 0.11), transparent 62%),
    radial-gradient(900px 640px at -18% 108%, rgba(64, 110, 200, 0.16), transparent 58%),
    linear-gradient(180deg, #0e1a30 0%, #0b1424 48%, #0a1120 100%);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2390a4c9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: light) {
  :root {
    /* ---- дневная смена: тёплая бумага + чернила ---- */
    --bg: #f2eee3;
    --card: #fefcf6;
    --card-grad: linear-gradient(180deg, #fffdf8 0%, #faf6ec 100%);
    --field-bg: #f5f1e5;
    --border: #d8cfb7;
    --border-soft: rgba(92, 80, 48, 0.16);
    --fg: #22304e;
    --muted: #6a7288;
    --accent: #e1930f;
    --accent-2: #c87f06;
    --accent-ink: #241502;
    --link: #a26502;
    --track: #e6ddc5;

    --danger: #b3261e;
    --danger-bg: #f8e4e1;
    --danger-border: #e5b4ae;
    --ok: #1e7e34;
    --ok-bg: #e4f2e7;

    --st-plan: #2e5ca8;
    --st-plan-bg: #e3eaf8;
    --st-done: #1e7e34;
    --st-done-bg: #e2f1e6;
    --st-paid: #966003;
    --st-paid-bg: #f7ead0;
    --st-cancel: #66707f;
    --st-cancel-bg: #e9e6dc;

    --shadow-card: 0 10px 22px -16px rgba(72, 58, 22, 0.5);
    --shadow-btn: 0 6px 16px -8px rgba(200, 127, 6, 0.55);
    --glow: 0 0 14px rgba(225, 147, 15, 0.3);
    --nav-bg: rgba(254, 252, 246, 0.94);

    --scene-bg:
      radial-gradient(1000px 480px at 82% -12%, rgba(240, 170, 60, 0.2), transparent 60%),
      linear-gradient(180deg, #f6f2e7 0%, #f2eee3 55%, #ece6d4 100%);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7288' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  }
}

/* ---------- база ---------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ночное небо: свечение фонаря + глубина; отдельным фикс-слоем,
   чтобы не дёргалось при скролле на телефонах */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--scene-bg);
}

/* зерно — едва заметная плёнка, чтобы фон не был «пластиковым» */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

main {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 12px 16px 24px;
  flex: 1;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(255, 176, 64, 0.35); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- типографика ---------- */

h1, .page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 4px 0 14px;
}

h2, .section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 22px 0 10px;
}
h2::before, .section-title::before {
  content: "";
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: var(--glow);
  flex-shrink: 0;
}
h2::after, .section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

.muted { color: var(--muted); }
.small { font-size: 0.82rem; }

.amount, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: -0.01em;
}
/* nowrap: «1 262 720 ₽» не должен переноситься посреди числа и ронять
   «₽» на отдельную строку (находка UX-ревью на 375px) */
.amount { font-weight: 700; white-space: nowrap; }

/* ---------- карточки ---------- */

.card {
  background: var(--card-grad);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}

a.card { color: inherit; display: block; }
a.card:hover { text-decoration: none; border-color: var(--border); }

/* полоса статуса слева у карточек выездов */
.card.status-plan { border-left: 3px solid var(--st-plan); }
.card.status-done { border-left: 3px solid var(--st-done); }
.card.status-paid { border-left: 3px solid var(--st-paid); }
.card.status-cancelled { border-left: 3px solid var(--st-cancel); opacity: 0.75; }

.card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.alert {
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  border: 1px solid var(--border-soft);
}
.alert-error {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}
.alert-ok {
  background: var(--ok-bg);
  color: var(--ok);
}

/* ---------- стат-карточки (дашборд/отчёты) ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}

.stat { margin-bottom: 0; }

.stat .muted { font-size: 0.8rem; }

.stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-top: 2px;
  white-space: nowrap; /* «1 262 720 ₽» — одной строкой, см. .amount */
}

.stat-sub { font-size: 0.8rem; margin-top: 2px; }

.kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 8px;
  font-size: 0.92rem;
}

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

button { font: inherit; }

.btn {
  min-height: 46px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-body);
  border: none;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #ffc163 0%, #f59d1c 100%);
  color: var(--accent-ink);
  cursor: pointer;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  box-shadow: var(--shadow-btn);
  transition: transform 0.08s ease, filter 0.12s ease;
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn:active { transform: translateY(1px); filter: brightness(0.96); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn-ghost:hover { border-color: var(--muted); }

.btn-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-border);
  box-shadow: none;
}

.btn-block { width: 100%; }
.btn-icon { width: 46px; padding: 0; flex-shrink: 0; }

/* ---------- бейджи, чипы ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--track);
  color: var(--fg);
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge-plan { background: var(--st-plan-bg); color: var(--st-plan); }
.badge-done { background: var(--st-done-bg); color: var(--st-done); }
.badge-paid { background: var(--st-paid-bg); color: var(--st-paid); }
.badge-cancelled { background: var(--st-cancel-bg); color: var(--st-cancel); }
.badge-plan::before, .badge-done::before,
.badge-paid::before, .badge-cancelled::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge-warn { background: var(--danger-bg); color: var(--danger); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }

/* номер точки маршрута в списке «Сегодня» */
.route-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  background: linear-gradient(180deg, #ffc163, #f59d1c);
  color: var(--accent-ink);
  box-shadow: var(--glow);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  background: var(--st-paid-bg);
  color: var(--st-paid);
  border: 1px solid var(--border-soft);
}

/* ---------- поля и формы ---------- */

label { font-size: 0.85rem; color: var(--muted); }

.field {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  font-size: 1rem;
  font-family: var(--font-body);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--field-bg);
  color: var(--fg);
  transition: border-color 0.12s ease;
}
.field:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(245, 157, 28, 0.18); }

textarea.field { padding: 10px 12px; min-height: 80px; resize: vertical; }

select.field {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 34px;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-2); }

.form-col { display: flex; flex-direction: column; gap: 14px; }
.form-row label { display: block; margin-bottom: 5px; }

/* ---------- фильтры списков ---------- */

details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }

.filters summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  color: var(--muted);
}
.filters summary::after {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--chevron) no-repeat center;
  transition: transform 0.15s ease;
}
.filters[open] > summary::after,
.filters details[open] > summary::after { transform: rotate(180deg); }

.filter-grid {
  display: grid;
  /* minmax(0,1fr): нативный date-input шире половины карточки и на 1fr
     раздувал колонки за край */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.filter-grid .wide { grid-column: 1 / -1; }
.filter-grid input[type="date"] { padding: 0 8px; font-size: 0.95rem; }

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-size: 0.95rem;
  color: var(--fg);
}
.check input { width: 20px; height: 20px; }
/* вариант для подписей в 2 строки (исходы звонка): кнопка у первой строки,
   а не по вертикальному центру всего блока (находка UX-ревью) */
.check-start { align-items: flex-start; min-height: 36px; }
.check-start input { margin-top: 3px; flex-shrink: 0; }

.found-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 10px;
}
.found { font-weight: 600; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
}

/* ---------- прогресс-полосы (выручка) ---------- */

.meter {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: var(--glow);
}
.meter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.meter-row .m-label { width: 3em; flex-shrink: 0; }
.meter-row .m-val { min-width: 70px; text-align: right; flex-shrink: 0; }

/* ---------- таблицы (отчёты) ---------- */

.table-wrap { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; }
.table th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
}
.table th.num, .table td.num { text-align: right; padding-left: 10px; }
.table td {
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-soft);
  vertical-align: top;
}
/* зазор между соседними колонками — на 375px «Клиент» и «Город»
   слипались («нет телефонаПавловка», находка UX-ревью) */
.table td:not(:last-child), .table th:not(:last-child) { padding-right: 8px; }
.table tr:last-child td { border-bottom: none; }
.table td .meter { height: 5px; margin-top: 4px; }

/* ---------- верхняя планка бренда ---------- */

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  padding: 12px 16px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}
.brand:hover { text-decoration: none; }
.brand svg { color: var(--accent); filter: drop-shadow(0 0 6px rgba(255, 176, 64, 0.5)); }
.topbar-sub {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- нижняя навигация ---------- */

nav.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-soft);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

nav.bottom-nav > a,
nav.bottom-nav .more > summary {
  position: relative;
  flex: 1;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
nav.bottom-nav > a:hover,
nav.bottom-nav .more > summary:hover { text-decoration: none; color: var(--fg); }

nav.bottom-nav svg { width: 22px; height: 22px; }

nav.bottom-nav > a.active,
nav.bottom-nav .more > summary.active { color: var(--accent); }
nav.bottom-nav > a.active::before,
nav.bottom-nav .more > summary.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
  box-shadow: var(--glow);
}
nav.bottom-nav > a.active svg,
nav.bottom-nav .more > summary.active svg {
  filter: drop-shadow(0 0 6px rgba(255, 176, 64, 0.55));
}

/* «Ещё» — раскрывающийся лист над навигацией */
nav.bottom-nav .more { flex: 1; position: relative; }

.more-sheet {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 8px;
  min-width: 210px;
  background: var(--card-grad);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px -12px rgba(3, 8, 20, 0.75);
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.more-sheet a,
.more-sheet button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 12px;
  border: none;
  background: none;
  border-radius: var(--r-md);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
}
.more-sheet a:hover, .more-sheet button:hover {
  background: var(--track);
  text-decoration: none;
}
.more-sheet svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.more-sheet a.active { color: var(--accent); }
.more-sheet a.active svg { color: var(--accent); }
.more-sheet .sheet-sep { height: 1px; background: var(--border-soft); margin: 6px 8px; }
.more-sheet form { margin: 0; display: flex; }

/* бренд в рейке — только десктоп */
nav.bottom-nav > a.nav-brand { display: none; }

/* ---------- страница входа ---------- */

body.login-body {
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-height: 100vh;
}

.login-scene {
  position: relative;
  width: 100%;
  max-width: 380px;
}

/* луна-фонарь над карточкой */
.login-moon {
  position: absolute;
  top: -74px;
  right: 18px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffe9c2 0%, #ffc871 45%, #f59d1c 100%);
  box-shadow: 0 0 40px 8px rgba(255, 176, 64, 0.4),
              0 0 120px 30px rgba(255, 176, 64, 0.16);
}

.login-card { padding: 26px 22px; margin: 0; }

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.login-brand svg { color: var(--accent); filter: drop-shadow(0 0 8px rgba(255, 176, 64, 0.6)); }

.login-tag {
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 22px;
}

/* ---------- появление списков ---------- */

@media (prefers-reduced-motion: no-preference) {
  .card { animation: rise 0.3s ease both; }
  #visits-list > .card:nth-child(2),
  #rows > .card:nth-child(4), #dash-today-list > .card:nth-child(2) { animation-delay: 0.04s; }
  #visits-list > .card:nth-child(3),
  #rows > .card:nth-child(5), #dash-today-list > .card:nth-child(3) { animation-delay: 0.08s; }
  #visits-list > .card:nth-child(4),
  #rows > .card:nth-child(6), #dash-today-list > .card:nth-child(4) { animation-delay: 0.12s; }
  #visits-list > .card:nth-child(5),
  #rows > .card:nth-child(7), #dash-today-list > .card:nth-child(5) { animation-delay: 0.16s; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- десктоп: левая рейка вместо нижней панели ---------- */

@media (min-width: 1024px) {
  body { padding-bottom: 0; padding-left: 112px; }

  main { max-width: 880px; padding: 20px 32px 40px; }

  /* Экраны-списки/таблицы (сводка, клиенты, заявки, отчёты, админка) сами
     просят класс main.wide (base.html: {% block main_class %}wide{% endblock %})
     — узкая колонка 880px им тесна и оставляет пустым весь остальной широкий
     экран (полтора-два экрана пустоты на 1920px). Экраны-чтение (скрипт
     звонка, статья базы знаний) класс НЕ ставят — там 880px это выбранная
     длина строки, а не забытая ширина. */
  main.wide { max-width: 1320px; }

  .topbar { display: none; }

  nav.bottom-nav {
    top: 0;
    bottom: 0;
    right: auto;
    width: 112px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    padding: 14px 8px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: none;
    border-right: 1px solid var(--border-soft);
  }

  nav.bottom-nav > a.nav-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--fg);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 18px;
    text-decoration: none;
  }
  nav.bottom-nav > a.nav-brand svg { width: 30px; height: 30px; color: var(--accent); filter: drop-shadow(0 0 8px rgba(255, 176, 64, 0.55)); }
  nav.bottom-nav > a.nav-brand:hover { text-decoration: none; background: none; }

  nav.bottom-nav > a,
  nav.bottom-nav .more,
  nav.bottom-nav .more > summary {
    flex: none;
    width: 100%;
    min-height: 60px;
    border-radius: var(--r-md);
    font-size: 0.68rem;
  }
  nav.bottom-nav > a.active::before,
  nav.bottom-nav .more > summary.active::before {
    left: 0;
    top: 17px;
    transform: none;
    width: 3px;
    height: 26px;
    border-radius: 0 3px 3px 0;
  }
  nav.bottom-nav > a:hover,
  nav.bottom-nav .more > summary:hover { background: var(--track); }

  .more-sheet {
    bottom: 0;
    right: auto;
    left: calc(100% + 10px);
  }

  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-value { font-size: 2.3rem; }
  /* «Позвонить» в списке обзвона: на десктопе не тянем кнопку на всю
     ширину колонки (~800px) — компактнее (находка UX-ревью) */
  .call-btn { width: fit-content; min-width: 240px; }
  .kv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filter-grid .wide { grid-column: span 2; }
}

/* ---------- печать (КП, /kp/{id} — crm/routes/kp.py) ---------- */

/* .no-print сама по себе ничего не меняет на экране — только маркер для
   правила ниже; элементы навигации/формы отправки скрываются при печати,
   виден только сам бланк (.kp-sheet). */
.no-print {}

@media print {
  .topbar, nav.bottom-nav, .no-print { display: none !important; }
  body { padding-bottom: 0; background: #fff; color: #111; }
  body::before, body::after { display: none; }
  .card.kp-sheet {
    border: none;
    box-shadow: none;
    background: none;
    padding: 0;
  }
}

/* ---------- обучение (/training) и markdown-тело ---------- */

/* В ui.css не было правил для blockquote/ul/li вообще, а теория уроков
   собрана из скриптов БЗ (29 блок-цитат в skript-holodnyj-zvonok.md):
   браузерный margin-inline 40px на 375px съедал ширину карточки. Правило
   чинит и уже существующий .kb-body на карточке звонка, а не только урок. */
.kb-body blockquote {
  margin: 10px 0;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--accent);
  color: var(--fg);
}
.kb-body ul, .kb-body ol { padding-left: 20px; margin: 8px 0; }
.kb-body li { margin: 4px 0; }

/* Chevron для новых <details>: глобальные `details summary { list-style:none }`
   выше гасят маркер у ВСЕХ раскрывающихся блоков, а стрелка нарисована только
   для .filters summary — без этого правила блок остаётся вовсе без аффорданса
   (так уже выглядит «Сменить пароль» в admin.html). */
.reveal summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  color: var(--fg);
}
.reveal summary::after {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: var(--chevron) no-repeat center;
  transition: transform 0.15s ease;
}
.reveal[open] > summary::after { transform: rotate(180deg); }

/* Группа вариантов ответа читается скринридером как одна группа (fieldset +
   legend), но дефолтная рамка и отступы браузера в этой системе — визуальный
   шум; min-width:0 не даёт fieldset распирать флекс-контейнер на 375px. */
fieldset.quiz { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.quiz > legend { padding: 0; margin-bottom: 6px; }

/* ---------- захват клиента в обзвоне (crm/locks.py) ---------- */

/* Пометка «в работе у …» в списке /calls. Красным (--danger), а не серым:
   это не примечание, а причина, по которой соседняя кнопка не нажимается —
   серую подпись оператор пролистывает и потом жмёт мёртвую кнопку. */
.lock-note {
  margin: 8px 0 6px;
  color: var(--danger);
  font-size: 0.85rem;
  line-height: 1.35;
}

/* Кнопка «Позвонить» у занятого клиента остаётся на месте (строка списка не
   должна прыгать в высоте, когда клиента кто-то взял), но выключена. */
.call-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Имя владельца — отдельной строкой над объяснением: во время смены оператор
   считывает именно «у кого», остальное дочитывает при необходимости. */
.call-lock strong {
  display: block;
  margin-bottom: 2px;
}

/* Работа оператора, не принятая из-за чужого захвата (call_card.html, ответ
   409). Рамка цветом опасности, но фон обычной карточки: это не ошибка ввода,
   а спасённый текст, который человек сейчас будет копировать — он должен
   читаться, а не мигать. */
.call-conflict {
  border-color: var(--danger);
}

.call-conflict textarea[readonly] {
  background: var(--bg);
}

/* ---------- пульт оператора: карточка звонка на одной странице ----------
   Просьба владелицы: во время звонка не должно быть переходов. Скрипт,
   калькулятор+прайс и поиск по БЗ живут в общей рабочей области
   (.op-workspace/.op-tabs — см. ниже, тот же приём, что на /pricing-panel):
   три sticky-колонки на десктопе, вкладки на узком экране — всегда на
   экране без скролла. Реже нужное (карточка клиента, шпаргалка возражений,
   история, исход) — обычным скроллом ниже; плавающая кнопка держит «Исход»
   всегда на экране. */

html { scroll-behavior: smooth; }

/* якоря секций ниже рабочей области (возражения/история/исход) — на случай
   прямой ссылки с фрагментом (#outcome и т.п.), скролл с отступом. */
.call-anchor { scroll-margin-top: 12px; }

.call-fab {
  position: fixed;
  right: 14px;
  bottom: calc(72px + 14px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  box-shadow: 0 14px 28px -10px rgba(3, 8, 20, 0.85), var(--shadow-btn);
}

@media (min-width: 760px) {
  /* на широком экране карточка не листается настолько, чтобы кнопка
     закрывала контент своим краем — сдвигаем чуть внутрь от края */
  .call-fab { right: max(14px, calc((100% - 680px) / 2 + 14px)); }
}

/* ---------- дашборд/«сегодня»: тренд выручки, «Требуют внимания», прогресс дня ----------
   Просьба владелицы: минимум переходов, ключевые действия сразу на виду.
   Плановые визиты на / и на /today используют один и тот же партиал
   _visit_row.html с hx-post — статус меняется на месте, без перезагрузки,
   уже на обеих страницах. /today добавляет живой счётчик «выполнено N из
   M»: он приходит тем же ответом POST /visits/{id}/status через
   hx-swap-oob (crm/routes/today.py::_progress_fragment), отдельного опроса
   не заводим. */

.stat-trend-up { color: var(--ok); }
.stat-trend-down { color: var(--danger); }

/* «Требуют внимания» — построчный список вместо четырёх одинаковых
   inline-стилей, которые раньше были в dashboard.html */
.attn-list { display: flex; flex-direction: column; }
.attn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border-soft);
}
.attn-row:last-child { border-bottom: none; }
.attn-row a { font-weight: 700; }

/* прогресс дня на /today: карточка «выполнено N из M» + полоса */
.today-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.today-progress-row strong { font-family: var(--font-mono); color: var(--accent); }
.today-progress-done .today-progress-row strong { color: var(--ok); }
.today-progress-done .meter i { background: var(--ok); box-shadow: none; }
/* ---------- карточка клиента: быстрый переход по разделам ----------
   Визиты и звонки на этой карточке и так не разнесены по вкладкам/URL —
   звонки подтягиваются htmx'ом прямо в страницу, — но длинную историю без
   якорей приходилось листать в поисках нужного раздела. Тот же приём, что
   «пульт оператора» на карточке звонка (call-fab выше):
   полоса ведёт по секциям ЭТОЙ ЖЕ страницы (scroll, не переход), а
   плавающая кнопка держит «＋ Выезд» на экране всегда — не только пока не
   проскроллили мимо статичной кнопки в начале карточки. */
.client-quicknav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px 12px;
  padding: 10px 16px;
  background: linear-gradient(var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.client-quicknav::-webkit-scrollbar { display: none; }
.client-quicknav .chip { flex-shrink: 0; }

.client-anchor { scroll-margin-top: 62px; }

.client-fab {
  position: fixed;
  right: 14px;
  bottom: calc(72px + 14px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  box-shadow: 0 14px 28px -10px rgba(3, 8, 20, 0.85), var(--shadow-btn);
}
@media (min-width: 760px) {
  /* на широком экране карточка не листается настолько, чтобы кнопка
     закрывала контент своим краем — сдвигаем чуть внутрь от края */
  .client-fab { right: max(14px, calc((100% - 680px) / 2 + 14px)); }
}
/* ---------- отчёты/обзвон/журнал/админка: таблично-цифровые экраны ----------
   Просьба владелицы: минимум переходов между смежными разделами. Вместо
   мелкой ссылки «→» в углу — вкладки: обе стороны пары всегда на виду,
   переключение — один тап без «где я, куда назад» (Отчёты↔Обзвон,
   Обзвон↔Журнал, Люди↔Роли). Сами отчёты — таблицы цифр для владелицы:
   тут сознательно нет декора уровня «пульта оператора» — упор на
   типографику чисел (.amount/.mono уже есть) и сканируемые группировки. */

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  background: var(--field-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.tabs a {
  flex: 1;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: calc(var(--r-md) - 4px);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--muted);
  text-decoration: none;
  text-align: center;
}
.tabs a:hover { color: var(--fg); text-decoration: none; }
.tabs a.active {
  background: linear-gradient(180deg, #ffc163, #f59d1c);
  color: var(--accent-ink);
  box-shadow: var(--shadow-btn);
}

/* группы чекбоксов в фильтрах /calls — тот же inline-flex, что раньше был
   продублирован style="" в шести местах шаблона */
.check-group { display: flex; flex-wrap: wrap; gap: 2px 14px; }

@media (min-width: 1024px) {
  /* Списки карточек (сегодня, заявки, дашборд «план на сегодня», клиенты,
     история визитов на карточке клиента) — сеткой в несколько колонок,
     а не одной на всю ширину main.wide (1320px). */
  #visits-list,
  #dash-today-list,
  .cards-grid,
  .client-visits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    align-items: start;
  }
  #visits-list > .card,
  #dash-today-list > .card,
  .cards-grid > .card,
  .client-visits-grid > .card {
    margin-bottom: 0;
  }

  /* Дашборд: «Требуют внимания» и «Выручка по месяцам» рядом, не друг под другом */
  .dash-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }

  /* Формы визита/клиента (.form-grid рядом с .form-col — сам .form-col
     общий для форм за пределами этих экранов, его трогать нельзя): поля
     парами, кроме textarea/кнопки/инфоблоков — те помечены .wide и тянутся
     на всю ширину. */
  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
  }
  .form-grid > .wide {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1024px) {
  /* ---------- десктоп: списки-карточки в несколько колонок вместо одной
     пустой на всю ширину — статьи БЗ (kb.html/_kb_results.html), уроки и
     ручной допуск (training.html/training_progress.html), кандидаты на
     обзвон и журнал звонков (calls.html/calls_journal.html). Мобильная
     раскладка (одна колонка) не тронута — правила только здесь. ---------- */
  main.wide .kb-article-grid,
  main.wide .lesson-grid,
  main.wide .cand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: start;
    gap: 12px;
  }
  main.wide .kb-article-grid > .card,
  main.wide .lesson-grid > .card,
  main.wide .cand-grid > .card {
    margin-bottom: 0;
  }

  /* форма статьи БЗ: заголовок/категория/теги в два столбца, текст статьи —
     во всю ширину ниже (см. kb_form.html) */
  main.wide .kb-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
  }
}
/* ---------- density-admin: отчёты/админка на широком экране (main.wide) ---------- */
/* Экраны: reports.html, reports_calls.html, admin.html, admin_roles.html,
   segments.html. На main.wide (1320px) их списки/формы одной колонкой
   оставляли пустой правую половину — здесь только раскладка внутри уже
   существующих карточек, мобильный вид (< 1024px) не меняется. */

@media (min-width: 1024px) {
  /* «По месяцам» в отчётах (reports.html, reports_calls.html) — список из
     13 строк в одну колонку на 1320px, переносим в 2 колонки. */
  .month-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
  }

  /* .form-grid — модификатор поверх .form-col только для форм admin.html и
     admin_roles.html (Новый пользователь / Новая роль / права роли). Сам
     .form-col не трогаем: его используют и другие экраны (login.html и
     карточки клиента/звонка/заявки), где узкая колонка — то, что нужно. */
  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 20px;
  }
  .form-grid > *:not(.form-row) { grid-column: 1 / -1; }

  /* Чекбоксы прав в форме роли — тоже в 2 колонки, иначе список из 9 прав
     одной колонкой на всю ширину карточки. */
  .form-grid fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 20px;
  }
  .form-grid fieldset > legend { grid-column: 1 / -1; }

  /* Списки карточек (типы клиентов, пользователи в admin.html; сохранённые
     аудитории в segments.html) — в 2 колонки вместо одной на всю ширину. */
  .type-grid,
  .user-grid,
  .segment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }
}

/* ---------- рабочая область оператора (/pricing-panel, /calls/{id}) ----------
   Скрипт звонка | калькулятор + прайс | база знаний — на одном экране:
   оператор ведёт живой разговор, переходы и поиск по разделам недопустимы.
   Общий блок для полноэкранной панели калькулятора И карточки звонка (там
   ниже рабочей области ещё карточка клиента/возражения/история/исход —
   реже нужны во время разговора, обычным скроллом). ≥1100px — три колонки;
   уже — вкладки внутри страницы (.op-tabs видимы, общий JS-партиал
   _op_tabs_script.html вешает .op-tabbed и переключает .op-pane-active).
   Без JS вкладок нет и панели остаются в потоке — всё доступно скроллом. */

.op-tabs { display: none; }

.call-calculator {
  display: block;
  width: 100%;
  height: 720px;
  height: clamp(420px, calc(100dvh - 100px), 860px);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

@media (max-width: 1099px) {
  .op-tabs {
    display: flex;
    position: sticky;
    top: 8px;
    z-index: 30;
  }
  .op-workspace.op-tabbed .op-pane { display: none; }
  .op-workspace.op-tabbed .op-pane-active { display: block; }
}

@media (min-width: 1100px) {
  .op-workspace {
    display: grid;
    grid-template-columns: minmax(260px, 3fr) minmax(340px, 4fr) minmax(260px, 3fr);
    gap: 0 20px;
    align-items: start;
  }
  .op-pane { min-width: 0; }
  /* боковые панели (скрипт и БЗ) скроллятся сами и не уезжают при
     прокрутке длинного центра — sticky, не fixed: колонок три, и
     fixed-позиционирование одной из них не разделить с остальными */
  .op-workspace > .op-pane:first-child,
  .op-workspace > .op-pane:last-child {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
  .op-workspace .op-pane > h2:first-child { margin-top: 4px; }
}

/* скрипт читают вслух в трубку — крупнее и просторнее обычного текста */
.op-script-body { font-size: 1.06rem; line-height: 1.6; }

/* прайс-подсказка около калькулятора на карточке звонка: свёрнутый
   <details class="reveal">, разворачивается без перехода */
.calc-price-hint { padding: 4px 14px 8px; }
.calc-price-hint-section { margin: 4px 0 10px; }

/* разбор цены оператора в #calc-result: база → скидки строками → итог */
#calc-result .calc-op-total {
  color: var(--fg);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.02rem;
  margin-top: 4px;
}
#calc-result .badge { margin: 2px 0; }

/* ---------- живой поиск единой БЗ в рабочей области ----------
   Карточка звонка и /pricing-panel: результаты /kb/search группами по
   категориям + inline-просмотр статьи/урока прямо под поиском (панель
   .kb-inline-view создаёт JS в _pricing_calc_embed.html). На трёхколоночном
   десктопе всё живёт в скроллируемой колонке БЗ — скрипт звонка остаётся
   виден в соседней; на узких экранах — внутри вкладки «База знаний». */

.kb-cat-head {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 0 4px;
}
.kb-result-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kb-result {
  display: block;
  padding: 8px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
}
.kb-result:hover,
.kb-result.active {
  border-color: var(--accent);
  text-decoration: none;
}
.kb-result.active { box-shadow: 0 0 0 2px rgba(245, 157, 28, 0.25); }
.kb-result-title { font-weight: 600; }
/* подсветка совпадений — янтарь «Ночной охоты» вместо дефолтной жёлтой */
.kb-result mark,
#kb-live mark,
.kb-inline-view mark {
  background: rgba(255, 180, 77, 0.32);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* .kb-inline-view — панель просмотра, создаёт JS embed'а; сам фрагмент
   бэкенда внутри неё — <article class="kb-inline"> (crm/routes/kb.py) */
.kb-inline-view { margin-top: 10px; }
/* кнопки «← результаты» и «×» не должны уезжать при чтении длинной статьи:
   sticky работает и в скроллируемой колонке БЗ, и при скролле страницы.
   top: 62px — запас под закреплённую полосу вкладок (.op-tabs, узкая
   панель, ~56px с отступом) с небольшим зазором. */
.kb-inline-bar {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  position: sticky;
  top: 62px;
  z-index: 5;
  background: var(--card);
}
@media (min-width: 1100px) {
  /* внутри трёхколоночной рабочей области колонка БЗ скроллится сама и
     закреплённых полос над ней нет — липнем к верху колонки без поправки */
  .op-workspace .kb-inline-bar { top: 0; }
}
.kb-inline-bar .btn { padding: 4px 10px; }
.kb-inline-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

/* Call card only: compact workspace, preserving the shared calculator styles. */
main.call-workpage { max-width: none; padding: 8px 12px 24px; }
.call-workpage .found-row { margin: 0 0 8px; gap: 8px; flex-wrap: wrap; }
.call-workpage .op-workspace { gap: 12px; }
.call-work-search { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; position: sticky; top: 0; z-index: 32; background: var(--bg); padding: 6px 0; }
.call-work-search label { flex-shrink: 0; font-size: .85rem; }
.call-work-search input { margin: 0; }
.call-workpage .op-pane { min-width: 0; overflow-wrap: anywhere; }
.call-workpage .op-pane > h2:first-child { margin: 0 0 8px; font-size: 1rem; }
.call-workpage .op-script-body { font-size: .9rem; line-height: 1.45; }
.call-workpage .op-script-body h2,
.call-workpage .op-script-body h3 { margin: 10px 0 6px; font-size: .95rem; }
.call-workpage .op-script-body p { margin: 6px 0; }
.call-workpage .op-script-body blockquote { margin: 6px 0; padding: 6px 10px; }
.call-workpage .op-script-body ul,
.call-workpage .op-script-body ol { margin: 6px 0; padding-left: 20px; }
.call-workpage .op-script-body li { margin: 3px 0; }
.call-workpage .call-script-greeting > h2 { margin-top: 0; }
.call-workpage .call-script-warning {
  margin: 8px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--danger);
  background: var(--danger-bg);
  font-size: .82rem;
}
.call-workpage .call-script-warning > h2 { margin-top: 0; }
.call-workpage .call-script-branch > summary { padding: 9px 26px 9px 0; font-size: .9rem; }
.call-workpage .call-script-branch > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.call-workpage .call-contact { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.call-workpage .call-contact .card-head { margin-bottom: 4px; }
.call-workpage .call-contact .btn { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.call-workpage > .card,
.call-workpage > form.card { padding: 10px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.call-workpage > h2 { margin: 16px 0 8px; font-size: 1.05rem; }
@media (min-width: 1100px) {
  .call-workpage .op-workspace {
    grid-template-columns: minmax(260px, 1fr) minmax(340px, 1.2fr) minmax(240px, .85fr);
    grid-template-areas: "script schedule kb" "script calculator kb";
  }
  .call-workpage #op-script { grid-area: script; }
  .call-workpage #op-schedule { grid-area: schedule; }
  .call-workpage #op-calc { grid-area: calculator; }
  .call-workpage #op-kb { grid-area: kb; }
  .call-workpage .op-workspace > .op-pane { top: 68px; }
}
@media (min-width: 1280px) {
  .call-workpage .op-workspace {
    grid-template-columns: minmax(240px, 1fr) minmax(280px, 1fr) minmax(330px, 1.2fr) minmax(190px, .85fr);
    grid-template-areas: "script schedule calculator kb";
  }
  .call-workpage .op-workspace > .op-pane { max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 1099px) {
  .call-work-search { position: sticky; top: 0; z-index: 32; background: var(--bg); padding: 6px 0; margin: 0; min-height: 56px; }
  .call-work-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .call-workpage .op-tabs { margin: 0; top: var(--call-search-height, 58px); background: var(--bg); }
  .call-workpage .op-tabs a { flex: 1; padding: 10px 6px; text-align: center; font-size: .85rem; }
  .call-workpage .op-workspace.op-tabbed #op-script {
    display: flex; flex-direction: column; position: sticky; top: calc(var(--call-search-height, 58px) + var(--call-tabs-height, 70px));
    height: 174px; max-height: 28dvh; z-index: 29; background: var(--bg);
    border-bottom: 1px solid var(--border); padding: 6px 0;
  }
  .call-workpage #op-script > h2 { font-size: .85rem; margin-bottom: 4px; }
  .call-workpage .op-script-body { overflow: auto; min-height: 0; overscroll-behavior: contain; }
  .call-workpage [data-schedule] :is(button, input, select, textarea, summary) {
    scroll-margin-top: calc(var(--call-search-height, 58px) + var(--call-tabs-height, 70px) + var(--call-script-height, 174px) + 8px);
    scroll-margin-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}
@media print {
  .call-workpage .op-workspace.op-tabbed .op-pane { display: block; position: static; max-height: none; overflow: visible; }
}
@media (max-height: 500px) and (max-width: 1099px) {
  .call-workpage .op-workspace.op-tabbed #op-script { height: 76px; }
}